some components

src/components/ab-bangumi-card.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { Write } from '@icon-park/vue-next';
+
+withDefaults(
+  defineProps<{
+    poster: string;
+    name: string;
+    season: number;
+  }>(),
+  {}
+);
+
+defineEmits(['click']);
+</script>
+
+<template>
+  <div w-150px is-btn @click="() => $emit('click')">
+    <div rounded-4px overflow-hidden poster-shandow rel>
+      <img :src="`https://mikanani.me${poster}`" alt="poster" w-full h-210px />
+
+      <div
+        abs
+        f-cer
+        z-1
+        inset-0
+        opacity-0
+        transition-all
+        duration-300
+        hover:backdrop-blur-2px
+        hover:bg-white
+        hover:bg-opacity-30
+        hover:opacity-100
+        active:duration-0
+        active:bg-opacity-60
+        class="group"
+      >
+        <div
+          text-white
+          rounded="1/2"
+          wh-44px
+          f-cer
+          bg-theme-row
+          class="group-active:poster-pen-active"
+        >
+          <Write size="20" />
+        </div>
+      </div>
+    </div>
+
+    <div px-4px py-8px>
+      <div text-h3>{{ name }}</div>
+      <div text-main>Season {{ season }}</div>
+    </div>
+  </div>
+</template>

src/components/ab-container.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    title: string;
+  }>(),
+  {
+    title: 'title',
+  }
+);
+</script>
+
+<template>
+  <div rounded-10px overflow-hidden>
+    <div
+      bg-theme-row
+      w-full
+      text-white
+      fx-cer
+      px-20px
+      h-45px
+      justify-between
+      select-none
+    >
+      <div text-h2>{{ title }}</div>
+    </div>
+
+    <div p-20px bg-white>
+      <slot></slot>
+    </div>
+  </div>
+</template>

src/components/ab-fold-panel.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { Down, Up } from '@icon-park/vue-next';
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+  }>(),
+  {
+    title: 'title',
+  }
+);
+</script>
+
+<template>
+  <Disclosure v-slot="{ open }">
+    <div rounded-10px overflow-hidden>
+      <DisclosureButton
+        bg-theme-row
+        w-full
+        text-white
+        fx-cer
+        px-20px
+        h-45px
+        justify-between
+      >
+        <div text-h2>{{ title }}</div>
+
+        <Component :is="open ? Up : Down" size="24" />
+      </DisclosureButton>
+
+      <div bg-white px-8px py-20px>
+        <DisclosurePanel>
+          <slot name="title"></slot>
+        </DisclosurePanel>
+
+        <div line></div>
+
+        <DisclosurePanel>
+          <slot></slot>
+        </DisclosurePanel>
+      </div>
+    </div>
+  </Disclosure>
+</template>

src/components/ab-label.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    label: string;
+  }>(),
+  {
+    label: '',
+  }
+);
+</script>
+
+<template>
+  <div fx-cer justify-between>
+    <div>{{ label }}</div>
+
+    <slot> </slot>
+  </div>
+</template>

src/components/ab-popup.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogPanel,
+} from '@headlessui/vue';
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean;
+    title: string;
+    maskClick: boolean;
+  }>(),
+  {
+    show: false,
+    title: 'title',
+    maskClick: true,
+  }
+);
+
+const emit = defineEmits(['update:show']);
+
+const close = () => {
+  if (props.maskClick) {
+    emit('update:show', false);
+  }
+};
+</script>
+
+<template>
+  <TransitionRoot appear :show="show" as="template">
+    <Dialog as="div" @close="close" class="relative z-10">
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-black bg-opacity-25" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <DialogPanel>
+              <ab-container :title="title">
+                <slot></slot>
+              </ab-container>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

src/components/ab-status-bar.vue

@@ -35,24 +35,26 @@ withDefaults(
         overflow-hidden
         shadow
       >
-        <MenuItem v-for="i in items" :key="i.id">
+        <MenuItem v-for="i in items" :key="i.id" v-slot="{ active }">
           <div
             w-full
             h-32px
             px-12px
             fx-cer
             justify-between
-            text-black
             is-btn
-            transition-colors
             hover:text-white
             hover:bg-primary
             class="group"
+            :class="[active ? 'text-white bg-theme-row' : 'text-black']"
           >
             <div text-main>{{ i.label }}</div>
 
-            <div text-primary class="group-hover:text-white" transition-colors>
-              <component :is="i.icon" size="16"></component>
+            <div
+              class="group-hover:text-white"
+              :class="[active ? 'text-white' : 'text-primary']"
+            >
+              <Component :is="i.icon" size="16"></Component>
             </div>
           </div>
         </MenuItem>