From 8676b12a66177ae97ed2c721bf463bf7404fa5ff Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sun, 19 Oct 2025 14:05:13 +0800
Subject: [PATCH] feat(front): implement Accordion component and its
 subcomponents for enhanced UI interactivity and organization

---
 front/assets/css/main.css                     | 18 +++++++++++
 front/components/ui/accordion/Accordion.vue   | 15 +++++++++
 .../ui/accordion/AccordionContent.vue         | 23 +++++++++++++
 .../components/ui/accordion/AccordionItem.vue | 19 +++++++++++
 .../ui/accordion/AccordionTrigger.vue         | 32 +++++++++++++++++++
 front/components/ui/accordion/index.ts        |  4 +++
 front/components/ui/avatar/Avatar.vue         | 15 +++++++++
 front/components/ui/avatar/AvatarFallback.vue | 21 ++++++++++++
 front/components/ui/avatar/AvatarImage.vue    | 12 +++++++
 front/components/ui/avatar/index.ts           |  3 ++
 10 files changed, 162 insertions(+)
 create mode 100644 front/components/ui/accordion/Accordion.vue
 create mode 100644 front/components/ui/accordion/AccordionContent.vue
 create mode 100644 front/components/ui/accordion/AccordionItem.vue
 create mode 100644 front/components/ui/accordion/AccordionTrigger.vue
 create mode 100644 front/components/ui/accordion/index.ts
 create mode 100644 front/components/ui/avatar/Avatar.vue
 create mode 100644 front/components/ui/avatar/AvatarFallback.vue
 create mode 100644 front/components/ui/avatar/AvatarImage.vue
 create mode 100644 front/components/ui/avatar/index.ts

diff --git a/front/assets/css/main.css b/front/assets/css/main.css
index c16b81a..b68607b 100644
--- a/front/assets/css/main.css
+++ b/front/assets/css/main.css
@@ -41,6 +41,24 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  @keyframes accordion-down {
+  from {
+    height: 0;
+    }
+  to {
+    height: var(--reka-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height);
+    }
+  to {
+    height: 0;
+    }
+  }
 }
 
 :root {
diff --git a/front/components/ui/accordion/Accordion.vue b/front/components/ui/accordion/Accordion.vue
new file mode 100644
index 0000000..5ca8a33
--- /dev/null
+++ b/front/components/ui/accordion/Accordion.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <AccordionRoot data-slot="accordion" v-bind="forwarded">
+        <slot />
+    </AccordionRoot>
+</template>
diff --git a/front/components/ui/accordion/AccordionContent.vue b/front/components/ui/accordion/AccordionContent.vue
new file mode 100644
index 0000000..e0613e8
--- /dev/null
+++ b/front/components/ui/accordion/AccordionContent.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionContent } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <AccordionContent
+        data-slot="accordion-content"
+        v-bind="delegatedProps"
+        class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+    >
+        <div :class="cn('pt-0 pb-4', props.class)">
+            <slot />
+        </div>
+    </AccordionContent>
+</template>
diff --git a/front/components/ui/accordion/AccordionItem.vue b/front/components/ui/accordion/AccordionItem.vue
new file mode 100644
index 0000000..5eb2357
--- /dev/null
+++ b/front/components/ui/accordion/AccordionItem.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionItem, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <AccordionItem data-slot="accordion-item" v-bind="forwardedProps" :class="cn('border-b last:border-b-0', props.class)">
+        <slot />
+    </AccordionItem>
+</template>
diff --git a/front/components/ui/accordion/AccordionTrigger.vue b/front/components/ui/accordion/AccordionTrigger.vue
new file mode 100644
index 0000000..93be286
--- /dev/null
+++ b/front/components/ui/accordion/AccordionTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import { AccordionHeader, AccordionTrigger } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <AccordionHeader class="flex">
+        <AccordionTrigger
+            data-slot="accordion-trigger"
+            v-bind="delegatedProps"
+            :class="
+                cn(
+                    'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+                    props.class
+                )
+            "
+        >
+            <slot />
+            <slot name="icon">
+                <ChevronDown class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+            </slot>
+        </AccordionTrigger>
+    </AccordionHeader>
+</template>
diff --git a/front/components/ui/accordion/index.ts b/front/components/ui/accordion/index.ts
new file mode 100644
index 0000000..9340ac0
--- /dev/null
+++ b/front/components/ui/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
diff --git a/front/components/ui/avatar/Avatar.vue b/front/components/ui/avatar/Avatar.vue
new file mode 100644
index 0000000..62aebc2
--- /dev/null
+++ b/front/components/ui/avatar/Avatar.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AvatarRoot } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <AvatarRoot data-slot="avatar" :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)">
+        <slot />
+    </AvatarRoot>
+</template>
diff --git a/front/components/ui/avatar/AvatarFallback.vue b/front/components/ui/avatar/AvatarFallback.vue
new file mode 100644
index 0000000..bf9ad68
--- /dev/null
+++ b/front/components/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AvatarFallback } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <AvatarFallback
+        data-slot="avatar-fallback"
+        v-bind="delegatedProps"
+        :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+    >
+        <slot />
+    </AvatarFallback>
+</template>
diff --git a/front/components/ui/avatar/AvatarImage.vue b/front/components/ui/avatar/AvatarImage.vue
new file mode 100644
index 0000000..c62d274
--- /dev/null
+++ b/front/components/ui/avatar/AvatarImage.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+    <AvatarImage data-slot="avatar-image" v-bind="props" class="aspect-square size-full">
+        <slot />
+    </AvatarImage>
+</template>
diff --git a/front/components/ui/avatar/index.ts b/front/components/ui/avatar/index.ts
new file mode 100644
index 0000000..6a90410
--- /dev/null
+++ b/front/components/ui/avatar/index.ts
@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'