From d0bca215c1b355d411ec356f39bd28ea7481e8be Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Tue, 10 Feb 2026 10:29:50 +0800
Subject: [PATCH 1/2] chore(deps): bump tailwindcss to v4

---
 app/assets/css/tailwind.css                   | 24 ++++++++++++++++---
 app/components/BubbleTitle.vue                |  4 ++--
 app/components/DigitalHumanTrainCreator.vue   |  8 +++----
 app/components/GradientDivider.vue            |  6 ++---
 app/components/ImagePlaceholder.vue           |  2 +-
 app/components/ModalAuthentication.vue        |  2 +-
 app/components/aigc/RatioSelector.vue         |  2 +-
 .../aigc/ReferenceFigureSelector.vue          |  2 +-
 app/components/aigc/chat/Message.vue          |  2 +-
 app/components/aigc/chat/NewSessionScreen.vue |  6 ++---
 app/components/aigc/drawing/OptionBlock.vue   |  2 +-
 app/components/aigc/drawing/ResultBlock.vue   |  6 ++---
 .../aigc/generation/CGTaskCard.client.vue     |  8 +++----
 app/components/aigc/generation/GBTaskCard.vue |  8 +++----
 app/components/aigc/generation/SRTEditor.vue  | 14 +++++------
 .../aigc/generation/TitlesTemplate.vue        |  8 +++----
 app/components/uni/Button/index.vue           |  2 +-
 app/components/uni/Input/index.vue            |  4 ++--
 app/components/uni/Message/Provider.vue       |  2 +-
 app/components/uni/Message/index.vue          |  8 +++----
 app/components/uni/Select/index.vue           |  6 ++---
 app/components/uni/TextArea/index.vue         |  4 ++--
 app/components/uni/Toggle/index.vue           |  8 +++----
 app/layouts/default.vue                       |  2 +-
 app/pages/aigc/chat/index.vue                 |  6 ++---
 app/pages/aigc/draw/index.vue                 |  2 +-
 app/pages/aigc/navigation.vue                 |  4 ++--
 .../generation/admin/digital-human-train.vue  |  2 +-
 app/pages/generation/admin/materials.vue      | 14 +++++------
 app/pages/generation/avatar-models.vue        |  8 +++----
 app/pages/generation/ppt-templates.vue        |  2 +-
 app/pages/user/authenticate.vue               |  2 +-
 app/pages/user/register.vue                   |  2 +-
 package.json                                  |  4 ++--
 pnpm-lock.yaml                                | 19 +++++++++++----
 35 files changed, 117 insertions(+), 88 deletions(-)

diff --git a/app/assets/css/tailwind.css b/app/assets/css/tailwind.css
index 0f90bc1..caa50b4 100644
--- a/app/assets/css/tailwind.css
+++ b/app/assets/css/tailwind.css
@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../../../tailwind.config.ts';
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 @layer base {
   html {
diff --git a/app/components/BubbleTitle.vue b/app/components/BubbleTitle.vue
index 648c983..e855c34 100644
--- a/app/components/BubbleTitle.vue
+++ b/app/components/BubbleTitle.vue
@@ -30,7 +30,7 @@ const props = defineProps({
       </h1>
 
       <h1
-        class="text-xl font-bold text-neutral-700 dark:text-neutral-300 leading-none relative z-[1]"
+        class="text-xl font-bold text-neutral-700 dark:text-neutral-300 leading-none relative z-1"
       >
         {{ title }}
       </h1>
@@ -43,7 +43,7 @@ const props = defineProps({
     <div
       v-if="bubble"
       :class="`bg-${bubbleColor}/50`"
-      class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full z-[0]"
+      class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full z-0"
     ></div>
   </div>
 </template>
diff --git a/app/components/DigitalHumanTrainCreator.vue b/app/components/DigitalHumanTrainCreator.vue
index f9a00b0..36a64a2 100644
--- a/app/components/DigitalHumanTrainCreator.vue
+++ b/app/components/DigitalHumanTrainCreator.vue
@@ -477,7 +477,7 @@ const showAuthModal = ref(false)
                     <div class="flex items-center gap-2">
                       <UIcon
                         name="i-heroicons-sun"
-                        class="h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0"
+                        class="h-4 w-4 text-amber-500 mt-0.5 shrink-0"
                       />
                       <span class="text-xs text-gray-600 dark:text-gray-300">
                         确保光线充足，避免背光
@@ -486,7 +486,7 @@ const showAuthModal = ref(false)
                     <div class="flex items-center gap-2">
                       <UIcon
                         name="i-heroicons-speaker-wave"
-                        class="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0"
+                        class="h-4 w-4 text-green-500 mt-0.5 shrink-0"
                       />
                       <span class="text-xs text-gray-600 dark:text-gray-300">
                         选择安静环境，减少噪音干扰
@@ -495,7 +495,7 @@ const showAuthModal = ref(false)
                     <div class="flex items-center gap-2">
                       <UIcon
                         name="i-heroicons-viewfinder-circle"
-                        class="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"
+                        class="h-4 w-4 text-blue-500 mt-0.5 shrink-0"
                       />
                       <span class="text-xs text-gray-600 dark:text-gray-300">
                         人脸占画面比例控制在 1/4 以内
@@ -504,7 +504,7 @@ const showAuthModal = ref(false)
                     <div class="flex items-center gap-2">
                       <UIcon
                         name="i-heroicons-face-smile"
-                        class="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0"
+                        class="h-4 w-4 text-purple-500 mt-0.5 shrink-0"
                       />
                       <span class="text-xs text-gray-600 dark:text-gray-300">
                         保持自然表情，使用恰当手势
diff --git a/app/components/GradientDivider.vue b/app/components/GradientDivider.vue
index 4604951..b4b2255 100644
--- a/app/components/GradientDivider.vue
+++ b/app/components/GradientDivider.vue
@@ -18,12 +18,12 @@ const props = defineProps({
 <template>
   <div
     :class="{
-      'w-full h-[1px]': !vertical,
-      'w-[1px] h-full': vertical,
+      'w-full h-px': !vertical,
+      'w-px h-full': vertical,
       [`from-${lineGradientFrom}-500/50`]: true,
       [`to-${lineGradientTo}-300/50`]: true,
     }"
-    class="bg-gradient-to-r rounded-full my-4"
+    class="bg-linear-to-r rounded-full my-4"
   ></div>
 </template>
 
diff --git a/app/components/ImagePlaceholder.vue b/app/components/ImagePlaceholder.vue
index 9936517..72a429e 100644
--- a/app/components/ImagePlaceholder.vue
+++ b/app/components/ImagePlaceholder.vue
@@ -36,6 +36,6 @@ const size = computed(() => {
 <style scoped>
 .gradient-background {
   @apply rounded-lg;
-  @apply bg-gradient-to-r from-indigo-800 to-purple-600;
+  @apply bg-linear-to-r from-indigo-800 to-purple-600;
 }
 </style>
diff --git a/app/components/ModalAuthentication.vue b/app/components/ModalAuthentication.vue
index 549aa31..ae3352e 100644
--- a/app/components/ModalAuthentication.vue
+++ b/app/components/ModalAuthentication.vue
@@ -585,7 +585,7 @@ const onForgetPasswordSubmit = (
 
 .pin-input {
   @apply w-full md:w-16 aspect-square rounded text-center shadow caret-transparent;
-  @apply outline-0 ring-indigo-500 focus:ring font-bold;
+  @apply outline-0 ring-indigo-500 focus:ring-3 font-bold;
 }
 
 .pin-label {
diff --git a/app/components/aigc/RatioSelector.vue b/app/components/aigc/RatioSelector.vue
index 8370ed2..0fd2b5b 100644
--- a/app/components/aigc/RatioSelector.vue
+++ b/app/components/aigc/RatioSelector.vue
@@ -68,7 +68,7 @@ const getShapeSize = (r: { w: number; h: number }, size: number) => {
       :class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']"
     >
       <div
-        class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded flex justify-center items-center"
+        class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded-sm flex justify-center items-center"
         :class="[
           ratio.value === selected && 'bg-sky-300/50 dark:bg-sky-600/50',
         ]"
diff --git a/app/components/aigc/ReferenceFigureSelector.vue b/app/components/aigc/ReferenceFigureSelector.vue
index 462401d..3a1f062 100644
--- a/app/components/aigc/ReferenceFigureSelector.vue
+++ b/app/components/aigc/ReferenceFigureSelector.vue
@@ -58,7 +58,7 @@ const handleFileInput = (event: { target: any }) => {
 
 <template>
   <div
-    class="w-full bg-neutral-200/50 dark:bg-neutral-700/50 rounded-md flex justify-between items-center p-1.5 gap-2 relative hover:bg-neutral-200/80 hover:dark:bg-neutral-700/80 transition border dark:border-neutral-700 cursor-pointer"
+    class="w-full bg-neutral-200/50 dark:bg-neutral-700/50 rounded-md flex justify-between items-center p-1.5 gap-2 relative hover:bg-neutral-200/80 dark:hover:bg-neutral-700/80 transition border dark:border-neutral-700 cursor-pointer"
     :class="{ 'cursor-pointer': !loading, 'cursor-not-allowed': loading }"
     @click="() => !loading && fileInput?.click()"
   >
diff --git a/app/components/aigc/chat/Message.vue b/app/components/aigc/chat/Message.vue
index fe7894d..07f086d 100644
--- a/app/components/aigc/chat/Message.vue
+++ b/app/components/aigc/chat/Message.vue
@@ -25,7 +25,7 @@ const message_avatar = computed(() => {
 })
 const message_background = computed(() => {
   if (props.message?.interrupted) {
-    return 'bg-red-200/50 dark:bg-red-800/20 border-red-300 dark:!border-red-500/50'
+    return 'bg-red-200/50 dark:bg-red-800/20 border-red-300 dark:border-red-500/50!'
   }
   switch (props.message?.role) {
     case 'user':
diff --git a/app/components/aigc/chat/NewSessionScreen.vue b/app/components/aigc/chat/NewSessionScreen.vue
index 97219be..64cffc2 100644
--- a/app/components/aigc/chat/NewSessionScreen.vue
+++ b/app/components/aigc/chat/NewSessionScreen.vue
@@ -40,7 +40,7 @@ const { data: assistantTemplates, pending: assistantTemplatesPending } =
     <Transition name="loading-screen">
       <div
         v-if="assistantTemplatesPending"
-        class="absolute inset-0 bg-white dark:bg-neutral-900 flex justify-center items-center z-[1] text-primary"
+        class="absolute inset-0 bg-white dark:bg-neutral-900 flex justify-center items-center z-1 text-primary"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -151,7 +151,7 @@ const { data: assistantTemplates, pending: assistantTemplatesPending } =
         class="group ring-primary hover:ring-2 transition duration-300"
         variant="soft"
         size="lg"
-        :ui="{ rounded: 'rounded-full' }"
+        :ui="{ rounded-sm: 'rounded-full' }"
         @click="emit('select', null)"
       >
         <span class="-mt-0.5">直接开始</span>
@@ -202,7 +202,7 @@ const { data: assistantTemplates, pending: assistantTemplatesPending } =
 }
 
 .assistant-item {
-  @apply w-full bg-white dark:bg-neutral-800 rounded-lg shadow-sm ring-primary ring-offset-2 dark:ring-offset-0 hover:ring-2 transition;
+  @apply w-full bg-white dark:bg-neutral-800 rounded-lg shadow-xs ring-primary ring-offset-2 dark:ring-offset-0 hover:ring-2 transition;
   @apply flex items-center gap-4 px-4 py-2 cursor-pointer border dark:border-neutral-700 hover:border-transparent;
 }
 </style>
diff --git a/app/components/aigc/drawing/OptionBlock.vue b/app/components/aigc/drawing/OptionBlock.vue
index 87e1259..20d05a9 100644
--- a/app/components/aigc/drawing/OptionBlock.vue
+++ b/app/components/aigc/drawing/OptionBlock.vue
@@ -17,7 +17,7 @@ const props = defineProps({
 
 <template>
   <div
-    class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded flex flex-col gap-1 shadow"
+    class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded-sm flex flex-col gap-1 shadow-sm"
   >
     <div class="flex items-center gap-1 text-sm">
       <UIcon
diff --git a/app/components/aigc/drawing/ResultBlock.vue b/app/components/aigc/drawing/ResultBlock.vue
index 06216a7..d54d11e 100644
--- a/app/components/aigc/drawing/ResultBlock.vue
+++ b/app/components/aigc/drawing/ResultBlock.vue
@@ -155,7 +155,7 @@ const copyToClipboard = (text: string) => {
         :key="`${fid}-${i}`"
       >
         <div
-          class="absolute inset-0 bg-gradient-to-t from-neutral-800/40 to-transparent w-full h-full flex items-end scale-105 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition"
+          class="absolute inset-0 bg-linear-to-t from-neutral-800/40 to-transparent w-full h-full flex items-end scale-105 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition"
         >
           <div class="w-full flex justify-end gap-1 p-1">
             <UTooltip text="以此图为参考创作">
@@ -189,7 +189,7 @@ const copyToClipboard = (text: string) => {
     </div>
     <div
       v-else
-      class="h-64 aspect-[3/4] mb-4 rounded-lg placeholder-gradient flex justify-center items-center"
+      class="h-64 aspect-3/4 mb-4 rounded-lg placeholder-gradient flex justify-center items-center"
     >
       <UIcon
         name="i-svg-spinners-tadpole"
@@ -298,6 +298,6 @@ const copyToClipboard = (text: string) => {
 }
 
 .placeholder-gradient {
-  @apply animate-pulse bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800;
+  @apply animate-pulse bg-linear-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800;
 }
 </style>
diff --git a/app/components/aigc/generation/CGTaskCard.client.vue b/app/components/aigc/generation/CGTaskCard.client.vue
index 3304adf..a651704 100644
--- a/app/components/aigc/generation/CGTaskCard.client.vue
+++ b/app/components/aigc/generation/CGTaskCard.client.vue
@@ -236,7 +236,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
 
 <template>
   <div
-    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden"
+    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow-sm transition overflow-hidden"
   >
     <div class="relative w-full aspect-video group">
       <NuxtImg
@@ -248,7 +248,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
       />
       <div
         v-else
-        class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern"
+        class="absolute inset-0 bg-linear-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern"
       >
         <Icon
           v-if="isFailed"
@@ -269,7 +269,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
           <UBadge
             :color="stateDisplay.color"
             :variant="isFailed ? 'solid' : 'subtle'"
-            class="shadow"
+            class="shadow-sm"
             size="sm"
           >
             <Icon
@@ -462,7 +462,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
         </template>
 
         <video
-          class="w-full rounded shadow"
+          class="w-full rounded-sm shadow-sm"
           controls
           autoplay
           :src="course.video_url"
diff --git a/app/components/aigc/generation/GBTaskCard.vue b/app/components/aigc/generation/GBTaskCard.vue
index 7ae35af..9aa540f 100644
--- a/app/components/aigc/generation/GBTaskCard.vue
+++ b/app/components/aigc/generation/GBTaskCard.vue
@@ -197,10 +197,10 @@ const startDownload = (url: string, filename: string) => {
 
 <template>
   <div
-    class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden p-3"
+    class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow-sm transition overflow-hidden p-3"
   >
     <div
-      class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group"
+      class="flex-0 h-48 aspect-10/16 flex flex-col items-center justify-center rounded-lg shadow-sm overflow-hidden relative group"
     >
       <div
         v-if="!video.video_cover"
@@ -451,7 +451,7 @@ const startDownload = (url: string, filename: string) => {
         </template>
 
         <video
-          class="w-full rounded shadow"
+          class="w-full rounded-sm shadow-sm"
           controls
           autoplay
           :src="video.video_url"
@@ -570,7 +570,7 @@ const startDownload = (url: string, filename: string) => {
               视频预览
             </div>
             <video
-              class="w-full rounded-lg shadow bg-black"
+              class="w-full rounded-lg shadow-sm bg-black"
               controls
               autoplay
               muted
diff --git a/app/components/aigc/generation/SRTEditor.vue b/app/components/aigc/generation/SRTEditor.vue
index 493bb5f..4265725 100644
--- a/app/components/aigc/generation/SRTEditor.vue
+++ b/app/components/aigc/generation/SRTEditor.vue
@@ -41,7 +41,7 @@ type subtitleStyleSchema = InferType<typeof subtitleStyleSchema>
 
 const subtitleStyleState = reactive<subtitleStyleSchema>({
   color: '#fff',
-  effect: 'shadow',
+  effect: 'shadow-sm',
   fontSize: 24,
   bottomOffset: 12,
 })
@@ -213,7 +213,7 @@ const exportVideo = async () => {
     color: subtitleStyleState.color,
     fontSize: subtitleStyleState.fontSize,
     textShadow:
-      subtitleStyleState.effect === 'shadow'
+      subtitleStyleState.effect === 'shadow-sm'
         ? {
             offsetX: 2,
             offsetY: 2,
@@ -381,7 +381,7 @@ defineExpose({
                 fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
                 bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
                 textShadow:
-                  subtitleStyleState.effect === 'shadow'
+                  subtitleStyleState.effect === 'shadow-sm'
                     ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
                     : undefined,
               }"
@@ -391,7 +391,7 @@ defineExpose({
             <video
               controls
               ref="videoElement"
-              class="rounded"
+              class="rounded-sm"
               style="-webkit-user-drag: none"
               :src="course.video_url"
               @timeupdate="syncSubtitles"
@@ -425,7 +425,7 @@ defineExpose({
                         fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
                         bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
                         textShadow:
-                          subtitleStyleState.effect === 'shadow'
+                          subtitleStyleState.effect === 'shadow-sm'
                             ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
                             : undefined,
                       }"
@@ -475,7 +475,7 @@ defineExpose({
                         :options="[
                           {
                             label: '阴影',
-                            value: 'shadow',
+                            value: 'shadow-sm',
                           },
                           {
                             label: '描边',
@@ -606,7 +606,7 @@ defineExpose({
   content: '';
   inset: 80% 0 0;
   position: absolute;
-  @apply bg-gradient-to-b from-transparent to-white dark:to-neutral-950 pointer-events-none;
+  @apply bg-linear-to-b from-transparent to-white dark:to-neutral-950 pointer-events-none;
 }
 
 .subtitle.stroke {
diff --git a/app/components/aigc/generation/TitlesTemplate.vue b/app/components/aigc/generation/TitlesTemplate.vue
index 7c6ec24..d188281 100644
--- a/app/components/aigc/generation/TitlesTemplate.vue
+++ b/app/components/aigc/generation/TitlesTemplate.vue
@@ -38,12 +38,12 @@ const closePreview = () => {
 
 <template>
   <div
-    class="relative w-full flex flex-col rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden shadow-none hover:shadow transition-shadow"
+    class="relative w-full flex flex-col rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden shadow-none hover:shadow-sm transition-shadow"
   >
-    <div class="relative w-full aspect-[16/9] group">
+    <div class="relative w-full aspect-16/9 group">
       <NuxtImg
         placeholder
-        placeholder-class="w-full aspect-[16/9] object-cover bg-neutral-200 dark:bg-neutral-800"
+        placeholder-class="w-full aspect-16/9 object-cover bg-neutral-200 dark:bg-neutral-800"
         class="object-cover relative"
         :src="data.opening_url"
       />
@@ -183,7 +183,7 @@ const closePreview = () => {
 
         <video
           v-if="previewVideoUrl"
-          class="w-full rounded shadow"
+          class="w-full rounded-sm shadow-sm"
           controls
           autoplay
           :src="previewVideoUrl"
diff --git a/app/components/uni/Button/index.vue b/app/components/uni/Button/index.vue
index f79f1bc..62411dc 100644
--- a/app/components/uni/Button/index.vue
+++ b/app/components/uni/Button/index.vue
@@ -55,7 +55,7 @@ const handleClick = (e: any) => {
 
 <template>
   <button
-    class="w-fit flex justify-center items-center rounded-md font-bold border shadow-sm transition focus:ring-4"
+    class="w-fit flex justify-center items-center rounded-md font-bold border shadow-xs transition focus:ring-4"
     :class="{
       'w-full': block,
       'uni-button--disabled': disabled || loading,
diff --git a/app/components/uni/Input/index.vue b/app/components/uni/Input/index.vue
index 9f80a93..77c7f3b 100644
--- a/app/components/uni/Input/index.vue
+++ b/app/components/uni/Input/index.vue
@@ -98,9 +98,9 @@ const handleInput = (e: any) => {
     </p>
     <div class="relative">
       <input
-        class="relative w-full flex items-center gap-2.5 p-2 pr-2 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
+        class="relative w-full flex items-center gap-2.5 p-2 pr-2 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 outline-hidden placeholder-neutral-400 dark:placeholder-neutral-500 shadow-xs"
         :class="{
-          '!border-red-500': isError,
+          'border-red-500!': isError,
           'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
             disabled,
         }"
diff --git a/app/components/uni/Message/Provider.vue b/app/components/uni/Message/Provider.vue
index cc5fd69..bfa560d 100644
--- a/app/components/uni/Message/Provider.vue
+++ b/app/components/uni/Message/Provider.vue
@@ -83,7 +83,7 @@ nuxtApp.vueApp.provide('uni-message', api)
 
 <style scoped>
 #message-provider .message-wrapper {
-  @apply z-[50000] fixed inset-0 flex flex-col items-center pointer-events-none;
+  @apply z-50000 fixed inset-0 flex flex-col items-center pointer-events-none;
 }
 
 .message-move,
diff --git a/app/components/uni/Message/index.vue b/app/components/uni/Message/index.vue
index a6484aa..d3bba6c 100644
--- a/app/components/uni/Message/index.vue
+++ b/app/components/uni/Message/index.vue
@@ -26,12 +26,12 @@ onMounted(() => {
   <div
     class="message"
     :class="{
-      '!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
-      '!text-emerald-500 !border-emerald-400 !bg-emerald-50':
+      'text-blue-500! border-blue-400! bg-blue-50!': message.type === 'info',
+      'text-emerald-500! border-emerald-400! bg-emerald-50!':
         message.type === 'success',
-      '!text-orange-500 !border-orange-400 !bg-orange-50':
+      'text-orange-500! border-orange-400! bg-orange-50!':
         message.type === 'warning',
-      '!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
+      'text-rose-500! border-rose-400! bg-rose-50!': message.type === 'error',
       [message.type]: message.type,
     }"
   >
diff --git a/app/components/uni/Select/index.vue b/app/components/uni/Select/index.vue
index 136117b..aca437d 100644
--- a/app/components/uni/Select/index.vue
+++ b/app/components/uni/Select/index.vue
@@ -97,7 +97,7 @@ onMounted(() => {
       ref="selectWrapperRef"
     >
       <button
-        class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 shadow-sm"
+        class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 shadow-xs"
         :class="{
           'cursor-not-allowed bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
             disabled,
@@ -148,9 +148,9 @@ onMounted(() => {
           v-for="(option, index) in items"
           :key="index"
           :class="{
-            '!bg-neutral-200 dark:!bg-neutral-700 hover:!bg-neutral-200 dark:hover:!bg-neutral-700':
+            'bg-neutral-200! dark:bg-neutral-700! hover:bg-neutral-200! dark:hover:bg-neutral-700!':
               option.value === selectedItem?.value,
-            '!cursor-not-allowed text-neutral-300 dark:text-neutral-500 hover:bg-white dark:hover:!bg-neutral-800':
+            'cursor-not-allowed! text-neutral-300 dark:text-neutral-500 hover:bg-white dark:hover:bg-neutral-800!':
               option.disabled,
           }"
           @click="!option.disabled ? handleOptionSelect(option) : void 0"
diff --git a/app/components/uni/TextArea/index.vue b/app/components/uni/TextArea/index.vue
index 06a74eb..f0486a2 100644
--- a/app/components/uni/TextArea/index.vue
+++ b/app/components/uni/TextArea/index.vue
@@ -116,11 +116,11 @@ onMounted(() => {
     </p>
     <div class="relative">
       <textarea
-        class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden overflow-y-auto border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
+        class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden overflow-y-auto border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 outline-hidden placeholder-neutral-400 dark:placeholder-neutral-500 shadow-xs"
         :rows="minRows || rows"
         ref="textAreaRef"
         :class="{
-          '!border-red-500': isError,
+          'border-red-500!': isError,
           'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
             disabled,
         }"
diff --git a/app/components/uni/Toggle/index.vue b/app/components/uni/Toggle/index.vue
index d0957da..3422d5d 100644
--- a/app/components/uni/Toggle/index.vue
+++ b/app/components/uni/Toggle/index.vue
@@ -98,18 +98,18 @@ watch(
 
 <template>
   <button
-    class="relative flex items-center rounded-lg bg-neutral-100 dark:bg-neutral-800 shadow-inner transition ease-in-out group outline-none"
+    class="relative flex items-center rounded-lg bg-neutral-100 dark:bg-neutral-800 shadow-inner transition ease-in-out group outline-hidden"
     :class="{
-      '!bg-green-400 dark:!bg-green-400/50': checked,
+      'bg-green-400! dark:bg-green-400/50!': checked,
       [buttonSizeClass]: buttonSizeClass,
       [buttonPaddingClass]: buttonPaddingClass,
     }"
     @click="handleCheck"
   >
     <span
-      class="aspect-[1/1] translate-x-0 transition ease-in-out bg-white dark:bg-black rounded-md shadow duration-300 group-active:scale-90"
+      class="aspect-1/1 translate-x-0 transition ease-in-out bg-white dark:bg-black rounded-md shadow-sm duration-300 group-active:scale-90"
       :class="{
-        '!shadow-lg': checked,
+        'shadow-lg!': checked,
         'group-active:translate-x-3 group-active:duration-500': !checked,
         [bulletSizeClass]: bulletSizeClass,
         [bulletTranslateClass]: checked,
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 0806467..bcf22f7 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -208,7 +208,7 @@ onMounted(async () => {
               <span class="truncate">{{ item.label }}</span>
               <UIcon
                 :name="item.icon"
-                class="ms-auto size-4 flex-shrink-0 text-gray-400 dark:text-gray-500"
+                class="ms-auto size-4 shrink-0 text-gray-400 dark:text-gray-500"
               />
             </template>
           </UDropdown>
diff --git a/app/pages/aigc/chat/index.vue b/app/pages/aigc/chat/index.vue
index 0eaac43..6838198 100644
--- a/app/pages/aigc/chat/index.vue
+++ b/app/pages/aigc/chat/index.vue
@@ -488,7 +488,7 @@ onMounted(() => {
             v-for="(llm, index) in llmModels"
             :key="index"
             @click="currentModel = llm.tag"
-            class="flex flex-col gap-2 justify-center items-center w-full aspect-[1/1] border-2 rounded-xl cursor-pointer transition duration-150 select-none"
+            class="flex flex-col gap-2 justify-center items-center w-full aspect-1/1 border-2 rounded-xl cursor-pointer transition duration-150 select-none"
             :class="
               llm.tag === currentModel
                 ? 'border-primary shadow-xl bg-primary text-white'
@@ -501,7 +501,7 @@ onMounted(() => {
               class="text-4xl opacity-80"
             />
             <div class="flex flex-col gap-0.5 items-center">
-              <h1 class="font-bold drop-shadow opacity-90">
+              <h1 class="font-bold drop-shadow-sm opacity-90">
                 {{ llm.name || 'unknown' }}
               </h1>
               <p class="text-xs opacity-60">{{ llm.description }}</p>
@@ -548,7 +548,7 @@ onMounted(() => {
 
 .chat-option-btn {
   @apply text-lg px-2 py-1.5 flex gap-1 justify-center items-center rounded-lg;
-  @apply bg-white border border-neutral-300 shadow-sm hover:shadow-card;
+  @apply bg-white border border-neutral-300 shadow-xs hover:shadow-card;
   @apply dark:bg-neutral-800 dark:border-neutral-600;
 }
 </style>
diff --git a/app/pages/aigc/draw/index.vue b/app/pages/aigc/draw/index.vue
index 6f4370c..46d4a9c 100644
--- a/app/pages/aigc/draw/index.vue
+++ b/app/pages/aigc/draw/index.vue
@@ -333,7 +333,7 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
         @mousedown.prevent="handle_stick_mousedown"
       >
         <span
-          class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"
+          class="w-px h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"
         ></span>
       </div>
       <div
diff --git a/app/pages/aigc/navigation.vue b/app/pages/aigc/navigation.vue
index 282a431..0689243 100644
--- a/app/pages/aigc/navigation.vue
+++ b/app/pages/aigc/navigation.vue
@@ -200,7 +200,7 @@ const open = (url?: string | URL, target?: string, features?: string) => {
   >
     <div class="container max-w-[1280px] mx-auto py-4 space-y-12">
       <div
-        class="pattern w-full p-10 flex flex-col justify-center gap-3 items-center rounded-lg shadow-sm border border-gray-200 dark:border-neutral-700"
+        class="pattern w-full p-10 flex flex-col justify-center gap-3 items-center rounded-lg shadow-xs border border-gray-200 dark:border-neutral-700"
       >
         <h1 class="text-4xl font-bold text-center text-primary">AI 工具导航</h1>
         <p>常用 AI 工具，一网打尽，常用常新</p>
@@ -222,7 +222,7 @@ const open = (url?: string | URL, target?: string, features?: string) => {
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
               <div
                 v-for="link in cat.links"
-                class="bg-white dark:bg-neutral-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-neutral-700 space-y-2 cursor-pointer hover:shadow-md transition-all duration-300"
+                class="bg-white dark:bg-neutral-800 p-4 rounded-lg shadow-xs border border-gray-200 dark:border-neutral-700 space-y-2 cursor-pointer hover:shadow-md transition-all duration-300"
                 :key="link.id"
                 @click="open(link.url)"
               >
diff --git a/app/pages/generation/admin/digital-human-train.vue b/app/pages/generation/admin/digital-human-train.vue
index cd38b37..af72389 100644
--- a/app/pages/generation/admin/digital-human-train.vue
+++ b/app/pages/generation/admin/digital-human-train.vue
@@ -323,7 +323,7 @@ const previewVideo = (videoUrl: string, title: string) => {
   const closeButton = document.createElement('button')
   closeButton.textContent = '关闭'
   closeButton.className =
-    'mt-4 px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600'
+    'mt-4 px-4 py-2 bg-gray-500 text-white rounded-sm hover:bg-gray-600'
   closeButton.onclick = () => {
     document.body.removeChild(videoModal)
   }
diff --git a/app/pages/generation/admin/materials.vue b/app/pages/generation/admin/materials.vue
index be0b275..e514157 100644
--- a/app/pages/generation/admin/materials.vue
+++ b/app/pages/generation/admin/materials.vue
@@ -947,7 +947,7 @@ const onCreateSubmit = async (
                 v-if="row.info.opening_url"
                 :src="row.info.opening_url"
                 :alt="row.info.title"
-                class="w-16 h-9 object-cover rounded cursor-pointer hover:opacity-80 transition-opacity"
+                class="w-16 h-9 object-cover rounded-sm cursor-pointer hover:opacity-80 transition-opacity"
                 @click="
                   previewVideo(
                     row.info.opening_file,
@@ -989,12 +989,12 @@ const onCreateSubmit = async (
                   v-if="row.opening_url"
                   :src="row.opening_url"
                   alt="片头"
-                  class="w-14 h-8 object-cover rounded cursor-pointer hover:opacity-80 transition-opacity ring-1 ring-blue-200 dark:ring-blue-800"
+                  class="w-14 h-8 object-cover rounded-sm cursor-pointer hover:opacity-80 transition-opacity ring-1 ring-blue-200 dark:ring-blue-800"
                   @click="previewVideo(row.opening_file, '制作片头预览')"
                 />
                 <div
                   v-else
-                  class="w-14 h-8 bg-blue-100 dark:bg-blue-900/30 rounded flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
+                  class="w-14 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-sm flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
                   @click="previewVideo(row.opening_file, '制作片头预览')"
                 >
                   <UIcon
@@ -1015,12 +1015,12 @@ const onCreateSubmit = async (
                   v-if="row.ending_url"
                   :src="row.ending_url"
                   alt="片尾"
-                  class="w-14 h-8 object-cover rounded cursor-pointer hover:opacity-80 transition-opacity ring-1 ring-green-200 dark:ring-green-800"
+                  class="w-14 h-8 object-cover rounded-sm cursor-pointer hover:opacity-80 transition-opacity ring-1 ring-green-200 dark:ring-green-800"
                   @click="previewVideo(row.ending_file, '制作片尾预览')"
                 />
                 <div
                   v-else
-                  class="w-14 h-8 bg-green-100 dark:bg-green-900/30 rounded flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
+                  class="w-14 h-8 bg-green-100 dark:bg-green-900/30 rounded-sm flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
                   @click="previewVideo(row.ending_file, '制作片尾预览')"
                 >
                   <UIcon
@@ -1364,7 +1364,7 @@ const onCreateSubmit = async (
             v-if="previewVideoUrl"
             :src="previewVideoUrl"
             controls
-            class="w-full h-full rounded"
+            class="w-full h-full rounded-sm"
           />
         </div>
       </UCard>
@@ -1395,7 +1395,7 @@ const onCreateSubmit = async (
             v-if="previewImageUrl"
             :src="previewImageUrl"
             :alt="previewImageTitle"
-            class="max-w-full max-h-[70vh] rounded object-contain"
+            class="max-w-full max-h-[70vh] rounded-sm object-contain"
           />
         </div>
       </UCard>
diff --git a/app/pages/generation/avatar-models.vue b/app/pages/generation/avatar-models.vue
index 2f1235d..a7418a7 100644
--- a/app/pages/generation/avatar-models.vue
+++ b/app/pages/generation/avatar-models.vue
@@ -305,14 +305,14 @@ const onAvatarUpload = async (files: FileList) => {
             ? systemAvatarList?.data.items
             : userAvatarList?.data.items"
           :key="avatar.model_id || k"
-          class="relative rounded-lg shadow overflow-hidden w-full aspect-[9/16] group"
+          class="relative rounded-lg shadow-sm overflow-hidden w-full aspect-9/16 group"
         >
           <NuxtImg
             :src="avatar.avatar"
             class="w-full h-full object-cover"
           />
           <div
-            class="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/50 to-transparent flex gap-2"
+            class="absolute inset-x-0 bottom-0 p-2 bg-linear-to-t from-black/50 to-transparent flex gap-2"
           >
             <UBadge
               color="white"
@@ -334,7 +334,7 @@ const onAvatarUpload = async (files: FileList) => {
             </template>
           </div>
           <div
-            class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity"
+            class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
           >
             <UButtonGroup>
               <UButton
@@ -376,7 +376,7 @@ const onAvatarUpload = async (files: FileList) => {
             <template #avatar-data="{ row }">
               <NuxtImg
                 :src="row.avatar"
-                class="h-16 aspect-[9/16] rounded-lg"
+                class="h-16 aspect-9/16 rounded-lg"
               />
             </template>
             <template #type-data="{ row }">
diff --git a/app/pages/generation/ppt-templates.vue b/app/pages/generation/ppt-templates.vue
index df99064..6da0836 100644
--- a/app/pages/generation/ppt-templates.vue
+++ b/app/pages/generation/ppt-templates.vue
@@ -327,7 +327,7 @@ const onDeleteCat = (cat: PPTCategory) => {
               class="w-full aspect-video object-cover"
             />
             <div
-              class="absolute inset-x-0 bottom-0 p-3 pt-6 flex justify-between items-end bg-gradient-to-t from-black/50 to-transparent"
+              class="absolute inset-x-0 bottom-0 p-3 pt-6 flex justify-between items-end bg-linear-to-t from-black/50 to-transparent"
             >
               <div class="space-y-0.5">
                 <h3 class="text-base font-bold text-white">{{ ppt.title }}</h3>
diff --git a/app/pages/user/authenticate.vue b/app/pages/user/authenticate.vue
index b3dcf55..3f2b42b 100644
--- a/app/pages/user/authenticate.vue
+++ b/app/pages/user/authenticate.vue
@@ -608,7 +608,7 @@ onMounted(() => {
       <UButton
         color="gray"
         variant="ghost"
-        class="!text-gray-500"
+        class="text-gray-500!"
         @click="
           () => {
             router.push('/user/register')
diff --git a/app/pages/user/register.vue b/app/pages/user/register.vue
index 5ce3263..2fb08e4 100644
--- a/app/pages/user/register.vue
+++ b/app/pages/user/register.vue
@@ -157,7 +157,7 @@ const onSubmit = (form: RegisterSchema) => {
       <UButton
         color="gray"
         variant="ghost"
-        class="!text-gray-500"
+        class="text-gray-500!"
         @click="
           () => {
             router.push('/user/authenticate')
diff --git a/package.json b/package.json
index 61440cd..6eca523 100644
--- a/package.json
+++ b/package.json
@@ -53,11 +53,11 @@
     "oxfmt": "^0.28.0",
     "oxlint": "^1.43.0",
     "sass": "^1.77.8",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "dayjs": "^1.11.19",
-    "tailwindcss": "^3.4.7"
+    "dayjs": "^1.11.19"
   },
   "packageManager": "pnpm@10.22.0"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 045a23e..43ea6fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,9 +74,6 @@ importers:
       radix-vue:
         specifier: ^1.9.2
         version: 1.9.17(vue@3.5.28(typescript@5.9.3))
-      tailwindcss:
-        specifier: ^3.4.7
-        version: 3.4.19(yaml@2.8.2)
       v-calendar:
         specifier: ^3.1.2
         version: 3.1.2(@popperjs/core@2.11.8)(vue@3.5.28(typescript@5.9.3))
@@ -101,7 +98,7 @@ importers:
         version: 0.11.3(magicast@0.5.2)(pinia@2.3.1(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3)))
       '@tailwindcss/typography':
         specifier: ^0.5.13
-        version: 0.5.19(tailwindcss@3.4.19(yaml@2.8.2))
+        version: 0.5.19(tailwindcss@4.1.18)
       '@types/markdown-it':
         specifier: ^13.0.9
         version: 13.0.9
@@ -129,6 +126,9 @@ importers:
       sass:
         specifier: ^1.77.8
         version: 1.97.3
+      tailwindcss:
+        specifier: ^4.1.18
+        version: 4.1.18
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -3180,6 +3180,7 @@ packages:
   glob@11.1.0:
     resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
     engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@13.0.1:
@@ -4882,6 +4883,9 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.1.18:
+    resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
+
   tar-fs@2.1.4:
     resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
 
@@ -7544,6 +7548,11 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.19(yaml@2.8.2)
 
+  '@tailwindcss/typography@0.5.19(tailwindcss@4.1.18)':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.1.18
+
   '@tanstack/virtual-core@3.13.18': {}
 
   '@tanstack/vue-virtual@3.13.18(vue@3.5.28(typescript@5.9.3))':
@@ -11031,6 +11040,8 @@ snapshots:
       - tsx
       - yaml
 
+  tailwindcss@4.1.18: {}
+
   tar-fs@2.1.4:
     dependencies:
       chownr: 1.1.4
-- 
2.49.1


From 75f1987be33415fac9d4e954a63c9f680d830ac9 Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Tue, 10 Feb 2026 18:07:44 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor!:=20=E5=8D=87=E7=BA=A7=20@nuxt/ui@?=
 =?UTF-8?q?3=EF=BC=8C=E9=87=8D=E6=9E=84=E6=89=80=E6=9C=89=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=92=8C=E7=BB=84=E4=BB=B6=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=EF=BC=8C=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=9C=A8?=
 =?UTF-8?q?=E9=9C=80=E6=B1=82=E4=B8=AD=E7=9A=84=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .oxlintrc.json                                |    4 +-
 .vscode/settings.json                         |    6 +-
 app/app.config.ts                             |   26 +-
 app/app.vue                                   |   19 +-
 app/assets/css/{tailwind.css => main.css}     |    6 +
 app/components/BubbleTitle.vue                |    2 +-
 app/components/DatePicker.vue                 |   11 +-
 app/components/DigitalHumanTrainCreator.vue   |  603 ++---
 app/components/LoginNeededContent.vue         |    7 +-
 app/components/ModalAuthentication.vue        |  468 ++--
 app/components/ModalDigitalHumanSelect.vue    |  288 +--
 app/components/ModalVideoTitleSelect.vue      |  207 +-
 app/components/SlideCreateCourse.vue          |  447 ++--
 app/components/SlideCreateCourseGreen.vue     |  318 ++-
 app/components/aigc/RatioSelector.vue         |    2 +-
 app/components/aigc/chat/ChatItem.vue         |   81 -
 app/components/aigc/chat/Message.vue          |  129 --
 app/components/aigc/chat/NewSessionScreen.vue |  208 --
 app/components/aigc/drawing/OptionBlock.vue   |   51 -
 app/components/aigc/drawing/ResultBlock.vue   |  303 ---
 app/components/aigc/drawing/index.d.ts        |    9 -
 .../aigc/generation/CGTaskCard.client.vue     |  267 +--
 app/components/aigc/generation/GBTaskCard.vue |  481 ++--
 app/components/aigc/generation/SRTEditor.vue  |  687 +++---
 .../aigc/generation/TitlesTemplate.vue        |   86 +-
 app/components/aigc/nav/NavItem.vue           |    4 +-
 app/components/uni/Input/index.vue            |    2 +-
 app/components/uni/Select/index.vue           |    2 +-
 app/components/uni/TextArea/index.vue         |    2 +-
 app/components/uni/Toggle/index.vue           |    2 +-
 app/layouts/default.vue                       |   61 +-
 app/pages/aigc/chat/index.vue                 |  554 -----
 app/pages/aigc/draw/index.vue                 |  557 -----
 app/pages/generation.vue                      |    2 +
 .../generation/admin/digital-human-train.vue  |  333 +--
 app/pages/generation/admin/index.vue          |   21 +-
 app/pages/generation/admin/materials.vue      | 1341 +++++------
 app/pages/generation/admin/users.vue          |  841 ++++---
 app/pages/generation/avatar-models.vue        |  255 +--
 app/pages/generation/course.vue               |   29 +-
 app/pages/generation/green-screen.vue         |   28 +-
 app/pages/generation/materials.vue            |  189 +-
 app/pages/generation/ppt-templates.vue        |  334 +--
 app/pages/profile.vue                         |  101 +-
 app/pages/user/authenticate.vue               |   79 +-
 app/pages/user/register.vue                   |   26 +-
 nuxt.config.ts                                |    2 +
 package.json                                  |    2 +-
 pnpm-lock.yaml                                | 2008 +++++++++--------
 49 files changed, 4892 insertions(+), 6599 deletions(-)
 rename app/assets/css/{tailwind.css => main.css} (79%)
 delete mode 100644 app/components/aigc/chat/ChatItem.vue
 delete mode 100644 app/components/aigc/chat/Message.vue
 delete mode 100644 app/components/aigc/chat/NewSessionScreen.vue
 delete mode 100644 app/components/aigc/drawing/OptionBlock.vue
 delete mode 100644 app/components/aigc/drawing/ResultBlock.vue
 delete mode 100644 app/components/aigc/drawing/index.d.ts
 delete mode 100644 app/pages/aigc/chat/index.vue
 delete mode 100644 app/pages/aigc/draw/index.vue

diff --git a/.oxlintrc.json b/.oxlintrc.json
index ed1ef5b..8676ed9 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -10,7 +10,9 @@
     "vitest"
   ],
   "categories": {},
-  "rules": {},
+  "rules": {
+    "no-unused-vars": "error"
+  },
   "settings": {
     "jsdoc": {
       "ignorePrivate": false,
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f563e1a..762595d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,9 +1,9 @@
 {
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.formatOnSave": true,
-  // "editor.codeActionsOnSave": {
-  //   "source.fixAll.oxc": "always"
-  // },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "always"
+  },
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "[typescript]": {
     "editor.defaultFormatter": "oxc.oxc-vscode"
diff --git a/app/app.config.ts b/app/app.config.ts
index 32aa854..323d793 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -1,14 +1,28 @@
 export default defineAppConfig({
   ui: {
-    primary: 'indigo',
-    gray: 'neutral',
     strategy: 'merge',
+    colors: {
+      primary: 'indigo',
+      neutral: 'neutral',
+      success: 'emerald',
+      warning: 'amber',
+    },
+    icons: {
+      loading: 'svg-spinners-180-ring',
+    },
     button: {
-      icon: {
-        loading: 'animate-none',
+      slots: {
+        leadingIcon: 'animate-none',
       },
-      default: {
-        loadingIcon: 'i-svg-spinners-180-ring-with-bg',
+    },
+    input: {
+      slots: {
+        root: 'w-full',
+      },
+    },
+    textarea: {
+      slots: {
+        root: 'w-full',
       },
     },
     notifications: {
diff --git a/app/app.vue b/app/app.vue
index 1186dc7..8f3c52f 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -4,7 +4,7 @@ import ModalAuthentication from '~/components/ModalAuthentication.vue'
 const toast = useToast()
 const route = useRoute()
 const router = useRouter()
-const modal = useModal()
+const overlay = useOverlay()
 const loginState = useLoginState()
 
 useHead({
@@ -24,10 +24,11 @@ onMounted(() => {
       toast.add({
         title: '登录失效',
         description: '登录已过期，请重新登录',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
-      modal.open(ModalAuthentication)
+      const modal = overlay.create(ModalAuthentication)
+      modal.open()
     } else if (!loggedIn && !loginState.token) {
       // Prevents redirect from register page
       if (route.path === '/user/register') return
@@ -41,12 +42,10 @@ onMounted(() => {
   <div>
     <NuxtLoadingIndicator />
 
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-
-    <UModals />
-    <USlideovers />
-    <UNotifications />
+    <UApp>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UApp>
   </div>
 </template>
diff --git a/app/assets/css/tailwind.css b/app/assets/css/main.css
similarity index 79%
rename from app/assets/css/tailwind.css
rename to app/assets/css/main.css
index caa50b4..d450cb7 100644
--- a/app/assets/css/tailwind.css
+++ b/app/assets/css/main.css
@@ -1,7 +1,10 @@
 @import 'tailwindcss';
+@import '@nuxt/ui';
 
 @config '../../../tailwind.config.ts';
 
+@source inline("{hover:,}{bg,text,border,from,to}-{primary,neutral,amber}{-{50,{100..900..100},950},}{/{0..100..5},}");
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -25,3 +28,6 @@
     box-sizing: border-box;
   }
 }
+
+@layer theme {
+}
diff --git a/app/components/BubbleTitle.vue b/app/components/BubbleTitle.vue
index e855c34..d6286ae 100644
--- a/app/components/BubbleTitle.vue
+++ b/app/components/BubbleTitle.vue
@@ -14,7 +14,7 @@ const props = defineProps({
   },
   bubbleColor: {
     type: String,
-    default: 'primary-500',
+    default: 'primary',
   },
 })
 </script>
diff --git a/app/components/DatePicker.vue b/app/components/DatePicker.vue
index 6675b50..814816b 100644
--- a/app/components/DatePicker.vue
+++ b/app/components/DatePicker.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { DatePicker as VCalendarDatePicker } from 'v-calendar'
-// @ts-ignore
-import type {
-  DatePickerDate,
-  DatePickerRangeObject,
-} from 'v-calendar/dist/types/src/use/datePicker'
 import 'v-calendar/dist/style.css'
+import type {
+  DatePickerRangeObject,
+  DatePickerDate,
+} from 'v-calendar/dist/types/src/use/datePicker.js'
 
 defineOptions({
   inheritAttrs: false,
@@ -65,6 +64,8 @@ function onDayClick(_: any, event: MouseEvent): void {
 </template>
 
 <style>
+@reference '@/assets/css/main.css';
+
 :root {
   --vc-gray-50: rgb(var(--color-gray-50));
   --vc-gray-100: rgb(var(--color-gray-100));
diff --git a/app/components/DigitalHumanTrainCreator.vue b/app/components/DigitalHumanTrainCreator.vue
index 36a64a2..0cad67b 100644
--- a/app/components/DigitalHumanTrainCreator.vue
+++ b/app/components/DigitalHumanTrainCreator.vue
@@ -65,7 +65,7 @@ const handleVideoUpload = (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '仅支持MP4和MOV格式的视频文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -76,7 +76,7 @@ const handleVideoUpload = (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '视频文件大小不能超过1GB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -86,7 +86,7 @@ const handleVideoUpload = (files: FileList) => {
   toast.add({
     title: '文件上传成功',
     description: '数字人视频已选择',
-    color: 'green',
+    color: 'success',
     icon: 'i-tabler-check',
   })
 }
@@ -101,7 +101,7 @@ const handleAuthVideoUpload = (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '仅支持MP4和MOV格式的视频文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -112,7 +112,7 @@ const handleAuthVideoUpload = (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '视频文件大小不能超过1GB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -122,7 +122,7 @@ const handleAuthVideoUpload = (files: FileList) => {
   toast.add({
     title: '文件上传成功',
     description: '授权视频已选择',
-    color: 'green',
+    color: 'success',
     icon: 'i-tabler-check',
   })
 }
@@ -133,7 +133,7 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
   if (!videoFile.value) {
     toast.add({
       title: '请上传数字人视频素材',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -142,7 +142,7 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
   if (!authVideoFile.value) {
     toast.add({
       title: '请上传形象授权视频',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -186,7 +186,7 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
       toast.add({
         title: '数字人定制提交成功',
         description: '您的数字人定制请求已提交，请等待管理员处理',
-        color: 'green',
+        color: 'success',
         icon: 'i-tabler-check',
       })
 
@@ -210,7 +210,7 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
     toast.add({
       title: '提交失败',
       description: errorMessage,
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -243,312 +243,317 @@ const showAuthModal = ref(false)
 
 <template>
   <UModal
-    v-model="isOpen"
-    :ui="{ width: 'sm:max-w-6xl' }"
+    v-model:open="isOpen"
+    :ui="{ content: 'sm:max-w-6xl' }"
   >
-    <UCard
-      :ui="{
-        ring: '',
-        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-      }"
-    >
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-            数字人定制
-          </h3>
-          <UButton
-            color="gray"
-            variant="ghost"
-            icon="i-heroicons-x-mark-20-solid"
-            class="-my-1"
-            @click="isOpen = false"
-          />
-        </div>
-      </template>
-
-      <div class="grid grid-cols-7 gap-6">
-        <!-- 左侧表单 -->
-        <div class="col-span-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-800">
-          <UForm
-            :schema="schema"
-            :state="formState"
-            class="space-y-4"
-            @submit="onSubmit"
-          >
-            <!-- 数字人视频素材 -->
-            <UFormGroup
-              label="数字人视频素材"
-              required
-            >
-              <UniFileDnD
-                accept="video/mp4,video/mov"
-                class="h-36"
-                @change="handleVideoUpload"
-              >
-                <template #default>
-                  <div class="text-center">
-                    <UIcon
-                      name="i-heroicons-video-camera"
-                      class="mx-auto h-12 w-12 text-gray-400"
-                    />
-                    <div class="mt-2">
-                      <span class="text-sm text-gray-600 dark:text-gray-400">
-                        {{ videoFile ? videoFile.name : '点击或拖拽上传视频' }}
-                      </span>
-                    </div>
-                    <p class="text-xs text-gray-500 mt-1">
-                      小于 1GB 的 mov/mp4 格式，比例 9:16，帧率 25FPS，分辨率
-                      1080P，时长 3-6 分钟
-                    </p>
-                  </div>
-                </template>
-              </UniFileDnD>
-            </UFormGroup>
-
-            <!-- 数字人名称 -->
-            <UFormGroup
-              label="数字人名称"
-              name="dh_name"
-              required
-            >
-              <UInput
-                v-model="formState.dh_name"
-                placeholder="请输入数字人名称"
-              />
-            </UFormGroup>
-
-            <!-- 单位名称 -->
-            <UFormGroup
-              label="单位名称"
-              name="organization"
-              required
-            >
-              <UInput
-                v-model="formState.organization"
-                placeholder="请输入单位名称"
-              />
-            </UFormGroup>
-
-            <!-- 形象授权视频 -->
-            <UFormGroup
-              label="形象授权视频"
-              required
-            >
-              <template #description>
-                <div class="flex items-center justify-between">
-                  <span class="text-xs text-gray-500">
-                    请确保本人进行形象授权视频录制，否则脸部比对将不通过导致制作失败
-                  </span>
-                  <UButton
-                    variant="link"
-                    size="xs"
-                    icon="i-heroicons-document-text"
-                    @click="showAuthModal = true"
-                  >
-                    授权文案
-                  </UButton>
-                </div>
-              </template>
-              <UniFileDnD
-                accept="video/mp4,video/mov"
-                class="h-36"
-                @change="handleAuthVideoUpload"
-              >
-                <template #default>
-                  <div class="text-center">
-                    <UIcon
-                      name="i-heroicons-shield-check"
-                      class="mx-auto h-12 w-12 text-gray-400"
-                    />
-                    <div class="mt-2">
-                      <span class="text-sm text-gray-600 dark:text-gray-400">
-                        {{
-                          authVideoFile
-                            ? authVideoFile.name
-                            : '点击或拖拽上传授权视频'
-                        }}
-                      </span>
-                    </div>
-                  </div>
-                </template>
-              </UniFileDnD>
-            </UFormGroup>
-
-            <!-- 提交按钮 -->
-            <UButton
-              type="submit"
-              class="w-full"
-              :loading="isSubmitting"
-              :disabled="isSubmitting"
-              color="primary"
-            >
-              {{ isSubmitting ? '提交中...' : '确认提交' }}
-            </UButton>
-
-            <!-- 上传进度 -->
-            <div
-              v-if="isSubmitting"
-              class="mt-4 space-y-2"
-            >
-              <div class="flex justify-between text-sm">
-                <span>{{ uploadProgress.message }}</span>
-                <span>
-                  {{ uploadProgress.step }}/{{ uploadProgress.total }}
-                </span>
-              </div>
-              <UProgress
-                :value="(uploadProgress.step / uploadProgress.total) * 100"
-                color="primary"
-              />
-            </div>
-          </UForm>
-        </div>
-
-        <!-- 右侧教程和提示 -->
-        <div class="col-span-4 p-4 rounded-lg border dark:border-gray-700">
-          <div class="flex flex-col h-full gap-6">
-            <!-- 教程视频 -->
-            <div class="flex-1">
-              <h3
-                class="text-lg font-semibold mb-3 text-gray-800 dark:text-white flex items-center gap-2"
-              >
-                <UIcon
-                  name="i-heroicons-video-camera"
-                  class="h-5 w-5"
-                />
-                视频录制教程
-              </h3>
-              <div
-                class="w-full aspect-video border rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center"
-              >
-                <UIcon
-                  name="i-heroicons-video-camera"
-                  class="h-12 w-12 text-gray-400"
-                />
-              </div>
-            </div>
-
-            <!-- 联系方式 -->
-            <div
-              class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-700"
-            >
-              <div class="flex items-center gap-3">
-                <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-lg">
-                  <UIcon
-                    name="i-heroicons-chat-bubble-left-right"
-                    class="h-5 w-5 text-blue-600 dark:text-blue-400"
-                  />
-                </div>
-                <div>
-                  <p class="text-sm font-medium text-gray-800 dark:text-white">
-                    需要帮助？
-                  </p>
-                  <p class="text-sm text-gray-600 dark:text-gray-300">
-                    客服微信：
-                    <span class="font-mono text-blue-600 dark:text-blue-400">
-                      xxxxxx
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <!-- 录制指南 -->
-            <div
-              class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 border border-amber-200 dark:border-amber-700"
-            >
-              <div class="flex items-start gap-3">
-                <div
-                  class="bg-amber-100 dark:bg-amber-900 p-2 rounded-lg mt-0.5"
-                >
-                  <UIcon
-                    name="i-heroicons-light-bulb"
-                    class="h-5 w-5 text-amber-600 dark:text-amber-400"
-                  />
-                </div>
-                <div class="flex-1">
-                  <h4
-                    class="text-sm font-semibold text-gray-800 dark:text-white mb-3"
-                  >
-                    录制注意事项
-                  </h4>
-                  <div class="space-y-2">
-                    <div class="flex items-center gap-2">
-                      <UIcon
-                        name="i-heroicons-sun"
-                        class="h-4 w-4 text-amber-500 mt-0.5 shrink-0"
-                      />
-                      <span class="text-xs text-gray-600 dark:text-gray-300">
-                        确保光线充足，避免背光
-                      </span>
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <UIcon
-                        name="i-heroicons-speaker-wave"
-                        class="h-4 w-4 text-green-500 mt-0.5 shrink-0"
-                      />
-                      <span class="text-xs text-gray-600 dark:text-gray-300">
-                        选择安静环境，减少噪音干扰
-                      </span>
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <UIcon
-                        name="i-heroicons-viewfinder-circle"
-                        class="h-4 w-4 text-blue-500 mt-0.5 shrink-0"
-                      />
-                      <span class="text-xs text-gray-600 dark:text-gray-300">
-                        人脸占画面比例控制在 1/4 以内
-                      </span>
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <UIcon
-                        name="i-heroicons-face-smile"
-                        class="h-4 w-4 text-purple-500 mt-0.5 shrink-0"
-                      />
-                      <span class="text-xs text-gray-600 dark:text-gray-300">
-                        保持自然表情，使用恰当手势
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </UCard>
-
-    <!-- 授权文案弹窗 -->
-    <UModal v-model="showAuthModal">
+    <template #content>
       <UCard>
         <template #header>
           <div class="flex items-center justify-between">
             <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-              授权视频文案
+              数字人定制
             </h3>
             <UButton
-              color="gray"
+              color="neutral"
               variant="ghost"
               icon="i-heroicons-x-mark-20-solid"
               class="-my-1"
-              @click="showAuthModal = false"
+              @click="isOpen = false"
             />
           </div>
         </template>
 
-        <div class="p-4">
-          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-            请确保您是视频中人物的合法授权人，在授权视频中朗读以下文案：
-          </p>
-          <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
-            <p class="text-sm leading-relaxed text-gray-800 dark:text-gray-200">
-              我是在"AI智慧职教平台"定制上传视频的模特本人，我承诺已经按照平台规则进行合法授权，特此承诺。
-            </p>
+        <div class="grid grid-cols-7 gap-6">
+          <!-- 左侧表单 -->
+          <div class="col-span-3 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
+            <UForm
+              :schema="schema"
+              :state="formState"
+              class="space-y-4"
+              @submit="onSubmit"
+            >
+              <!-- 数字人视频素材 -->
+              <UFormField
+                label="数字人视频素材"
+                required
+              >
+                <UniFileDnD
+                  accept="video/mp4,video/mov"
+                  class="h-36"
+                  @change="handleVideoUpload"
+                >
+                  <template #default>
+                    <div class="text-center">
+                      <UIcon
+                        name="i-heroicons-video-camera"
+                        class="mx-auto h-12 w-12 text-gray-400"
+                      />
+                      <div class="mt-2">
+                        <span class="text-sm text-gray-600 dark:text-gray-400">
+                          {{
+                            videoFile ? videoFile.name : '点击或拖拽上传视频'
+                          }}
+                        </span>
+                      </div>
+                      <p class="mt-1 text-xs text-gray-500">
+                        小于 1GB 的 mov/mp4 格式，比例 9:16，帧率 25FPS，分辨率
+                        1080P，时长 3-6 分钟
+                      </p>
+                    </div>
+                  </template>
+                </UniFileDnD>
+              </UFormField>
+
+              <!-- 数字人名称 -->
+              <UFormField
+                label="数字人名称"
+                name="dh_name"
+                required
+              >
+                <UInput
+                  v-model="formState.dh_name"
+                  placeholder="请输入数字人名称"
+                />
+              </UFormField>
+
+              <!-- 单位名称 -->
+              <UFormField
+                label="单位名称"
+                name="organization"
+                required
+              >
+                <UInput
+                  v-model="formState.organization"
+                  placeholder="请输入单位名称"
+                />
+              </UFormField>
+
+              <!-- 形象授权视频 -->
+              <UFormField
+                label="形象授权视频"
+                required
+              >
+                <template #description>
+                  <div class="flex items-center justify-between">
+                    <span class="text-xs text-gray-500">
+                      请确保本人进行形象授权视频录制，否则脸部比对将不通过导致制作失败
+                    </span>
+                    <UButton
+                      variant="link"
+                      size="xs"
+                      icon="i-heroicons-document-text"
+                      @click="showAuthModal = true"
+                    >
+                      授权文案
+                    </UButton>
+                  </div>
+                </template>
+                <UniFileDnD
+                  accept="video/mp4,video/mov"
+                  class="h-36"
+                  @change="handleAuthVideoUpload"
+                >
+                  <template #default>
+                    <div class="text-center">
+                      <UIcon
+                        name="i-heroicons-shield-check"
+                        class="mx-auto h-12 w-12 text-gray-400"
+                      />
+                      <div class="mt-2">
+                        <span class="text-sm text-gray-600 dark:text-gray-400">
+                          {{
+                            authVideoFile
+                              ? authVideoFile.name
+                              : '点击或拖拽上传授权视频'
+                          }}
+                        </span>
+                      </div>
+                    </div>
+                  </template>
+                </UniFileDnD>
+              </UFormField>
+
+              <!-- 提交按钮 -->
+              <UButton
+                type="submit"
+                class="w-full"
+                :loading="isSubmitting"
+                :disabled="isSubmitting"
+                color="primary"
+              >
+                {{ isSubmitting ? '提交中...' : '确认提交' }}
+              </UButton>
+
+              <!-- 上传进度 -->
+              <div
+                v-if="isSubmitting"
+                class="mt-4 space-y-2"
+              >
+                <div class="flex justify-between text-sm">
+                  <span>{{ uploadProgress.message }}</span>
+                  <span>
+                    {{ uploadProgress.step }}/{{ uploadProgress.total }}
+                  </span>
+                </div>
+                <UProgress
+                  :value="(uploadProgress.step / uploadProgress.total) * 100"
+                  color="primary"
+                />
+              </div>
+            </UForm>
+          </div>
+
+          <!-- 右侧教程和提示 -->
+          <div class="col-span-4 rounded-lg border p-4 dark:border-gray-700">
+            <div class="flex h-full flex-col gap-6">
+              <!-- 教程视频 -->
+              <div class="flex-1">
+                <h3
+                  class="mb-3 flex items-center gap-2 text-lg font-semibold text-gray-800 dark:text-white"
+                >
+                  <UIcon
+                    name="i-heroicons-video-camera"
+                    class="h-5 w-5"
+                  />
+                  视频录制教程
+                </h3>
+                <div
+                  class="flex aspect-video w-full items-center justify-center rounded-lg border bg-gray-100 dark:bg-gray-800"
+                >
+                  <UIcon
+                    name="i-heroicons-video-camera"
+                    class="h-12 w-12 text-gray-400"
+                  />
+                </div>
+              </div>
+
+              <!-- 联系方式 -->
+              <div
+                class="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-700 dark:bg-blue-900/20"
+              >
+                <div class="flex items-center gap-3">
+                  <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900">
+                    <UIcon
+                      name="i-heroicons-chat-bubble-left-right"
+                      class="h-5 w-5 text-blue-600 dark:text-blue-400"
+                    />
+                  </div>
+                  <div>
+                    <p
+                      class="text-sm font-medium text-gray-800 dark:text-white"
+                    >
+                      需要帮助？
+                    </p>
+                    <p class="text-sm text-gray-600 dark:text-gray-300">
+                      客服微信：
+                      <span class="font-mono text-blue-600 dark:text-blue-400">
+                        xxxxxx
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 录制指南 -->
+              <div
+                class="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-700 dark:bg-amber-900/20"
+              >
+                <div class="flex items-start gap-3">
+                  <div
+                    class="mt-0.5 rounded-lg bg-amber-100 p-2 dark:bg-amber-900"
+                  >
+                    <UIcon
+                      name="i-heroicons-light-bulb"
+                      class="h-5 w-5 text-amber-600 dark:text-amber-400"
+                    />
+                  </div>
+                  <div class="flex-1">
+                    <h4
+                      class="mb-3 text-sm font-semibold text-gray-800 dark:text-white"
+                    >
+                      录制注意事项
+                    </h4>
+                    <div class="space-y-2">
+                      <div class="flex items-center gap-2">
+                        <UIcon
+                          name="i-heroicons-sun"
+                          class="mt-0.5 h-4 w-4 shrink-0 text-amber-500"
+                        />
+                        <span class="text-xs text-gray-600 dark:text-gray-300">
+                          确保光线充足，避免背光
+                        </span>
+                      </div>
+                      <div class="flex items-center gap-2">
+                        <UIcon
+                          name="i-heroicons-speaker-wave"
+                          class="mt-0.5 h-4 w-4 shrink-0 text-green-500"
+                        />
+                        <span class="text-xs text-gray-600 dark:text-gray-300">
+                          选择安静环境，减少噪音干扰
+                        </span>
+                      </div>
+                      <div class="flex items-center gap-2">
+                        <UIcon
+                          name="i-heroicons-viewfinder-circle"
+                          class="mt-0.5 h-4 w-4 shrink-0 text-blue-500"
+                        />
+                        <span class="text-xs text-gray-600 dark:text-gray-300">
+                          人脸占画面比例控制在 1/4 以内
+                        </span>
+                      </div>
+                      <div class="flex items-center gap-2">
+                        <UIcon
+                          name="i-heroicons-face-smile"
+                          class="mt-0.5 h-4 w-4 shrink-0 text-purple-500"
+                        />
+                        <span class="text-xs text-gray-600 dark:text-gray-300">
+                          保持自然表情，使用恰当手势
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </UCard>
-    </UModal>
+
+      <!-- 授权文案弹窗 -->
+      <UModal v-model:open="showAuthModal">
+        <template #content>
+          <UCard>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                  授权视频文案
+                </h3>
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-heroicons-x-mark-20-solid"
+                  class="-my-1"
+                  @click="showAuthModal = false"
+                />
+              </div>
+            </template>
+
+            <div class="p-4">
+              <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+                请确保您是视频中人物的合法授权人，在授权视频中朗读以下文案：
+              </p>
+              <div class="rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
+                <p
+                  class="text-sm leading-relaxed text-gray-800 dark:text-gray-200"
+                >
+                  我是在"AI智慧职教平台"定制上传视频的模特本人，我承诺已经按照平台规则进行合法授权，特此承诺。
+                </p>
+              </div>
+            </div>
+          </UCard>
+        </template>
+      </UModal>
+    </template>
   </UModal>
 </template>
 
diff --git a/app/components/LoginNeededContent.vue b/app/components/LoginNeededContent.vue
index b50559d..33b14cd 100644
--- a/app/components/LoginNeededContent.vue
+++ b/app/components/LoginNeededContent.vue
@@ -14,7 +14,8 @@ defineProps({
   },
 })
 
-const modal = useModal()
+const overlay = useOverlay()
+const modal = overlay.create(ModalAuthentication)
 </script>
 
 <template>
@@ -30,10 +31,10 @@ const modal = useModal()
       <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
       <UButton
         class="mt-2 font-bold"
-        color="black"
+        color="primary"
         size="xs"
         variant="solid"
-        @click="modal.open(ModalAuthentication)"
+        @click="modal.open()"
       >
         登录
       </UButton>
diff --git a/app/components/ModalAuthentication.vue b/app/components/ModalAuthentication.vue
index ae3352e..2092f6a 100644
--- a/app/components/ModalAuthentication.vue
+++ b/app/components/ModalAuthentication.vue
@@ -4,8 +4,9 @@ import { object, string, type InferType } from 'yup'
 import type { FormSubmitEvent } from '#ui/types'
 import { useFetchWrapped } from '~/composables/useFetchWrapped'
 
+const emit = defineEmits(['close'])
 const toast = useToast()
-const modal = useModal()
+const overlay = useOverlay()
 const loginState = useLoginState()
 
 const sms_triggered = ref(false)
@@ -55,7 +56,7 @@ function onSubmit(form: req.user.Login) {
         toast.add({
           title: '登录失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -64,7 +65,7 @@ function onSubmit(form: req.user.Login) {
         toast.add({
           title: '登录失败',
           description: res.msg || '账号或密码错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -73,7 +74,7 @@ function onSubmit(form: req.user.Login) {
         toast.add({
           title: '登录失败',
           description: res.msg || '无法获取登录状态',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -84,7 +85,8 @@ function onSubmit(form: req.user.Login) {
         .updateProfile()
         .then(() => {
           loginState.checkSession()
-          modal.close()
+          // TODO: only close the specific modal
+          overlay.closeAll()
           toast.add({
             title: '登录成功',
             description: `${loginState.user.username}, 欢迎回来`,
@@ -96,7 +98,7 @@ function onSubmit(form: req.user.Login) {
           toast.add({
             title: '登录失败',
             description: err.msg || '网络错误',
-            color: 'red',
+            color: 'error',
             icon: 'i-tabler-circle-x',
           })
         })
@@ -108,7 +110,7 @@ function onSubmit(form: req.user.Login) {
       toast.add({
         title: '登录失败',
         description: err.msg || '网络错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-circle-x',
       })
     })
@@ -130,7 +132,7 @@ const obtainSmsCode = () => {
         toast.add({
           title: '验证码发送失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -140,7 +142,7 @@ const obtainSmsCode = () => {
       sms_counting_down.value = 60 // TODO: save timestamp to localstorage
       toast.add({
         title: '短信验证码已发送',
-        color: 'indigo',
+        color: 'primary',
         icon: 'i-tabler-circle-check',
       })
       const interval = setInterval(() => {
@@ -154,7 +156,7 @@ const obtainSmsCode = () => {
       toast.add({
         title: '验证码发送失败',
         description: err.msg || '网络错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-circle-x',
       })
     })
@@ -175,7 +177,7 @@ const handle_sms_verify = (e: string[]) => {
         toast.add({
           title: '登录失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -185,7 +187,7 @@ const handle_sms_verify = (e: string[]) => {
         toast.add({
           title: '登录失败',
           description: res.msg || '无法获取登录状态',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -196,7 +198,7 @@ const handle_sms_verify = (e: string[]) => {
         .updateProfile()
         .then(() => {
           loginState.checkSession()
-          modal.close()
+          emit('close')
           toast.add({
             title: '登录成功',
             description: `${loginState.user.username}, 欢迎回来`,
@@ -208,7 +210,7 @@ const handle_sms_verify = (e: string[]) => {
           toast.add({
             title: '登录失败',
             description: err.msg || '网络错误',
-            color: 'red',
+            color: 'error',
             icon: 'i-tabler-circle-x',
           })
         })
@@ -251,7 +253,7 @@ const obtainForgetSmsCode = () => {
         toast.add({
           title: '验证码发送失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -261,7 +263,7 @@ const obtainForgetSmsCode = () => {
       sms_counting_down.value = 60 // TODO: save timestamp to localstorage
       toast.add({
         title: '短信验证码已发送',
-        color: 'indigo',
+        color: 'primary',
         icon: 'i-tabler-circle-check',
       })
       const interval = setInterval(() => {
@@ -275,7 +277,7 @@ const obtainForgetSmsCode = () => {
       toast.add({
         title: '验证码发送失败',
         description: err.msg || '网络错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-circle-x',
       })
     })
@@ -299,7 +301,7 @@ const onForgetPasswordSubmit = (
         toast.add({
           title: '重置密码失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -307,7 +309,7 @@ const onForgetPasswordSubmit = (
       toast.add({
         title: '重置密码成功',
         description: '请您继续登录',
-        color: 'green',
+        color: 'success',
         icon: 'i-tabler-circle-check',
       })
       currentTab.value = 1
@@ -316,7 +318,7 @@ const onForgetPasswordSubmit = (
       toast.add({
         title: '重置密码失败',
         description: err.msg || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-circle-x',
       })
     })
@@ -324,173 +326,101 @@ const onForgetPasswordSubmit = (
 </script>
 
 <template>
-  <UModal prevent-close>
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3
-            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-          >
-            登录眩生花 AI 助手
-          </h3>
-          <UButton
-            color="gray"
-            variant="ghost"
-            icon="i-heroicons-x-mark-20-solid"
-            class="-my-1"
-            @click="modal.close()"
-          />
-        </div>
-      </template>
-
-      <UTabs
-        :items="items"
-        class="w-full"
-        v-model="currentTab"
-      >
-        <template #default="{ item, index, selected }">
-          <div class="flex items-center gap-2 relative truncate">
-            <span class="truncate">{{ item.label }}</span>
-            <span
-              v-if="selected"
-              class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400"
+  <UModal :dismissible="false">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+            >
+              登录眩生花 AI 助手
+            </h3>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              icon="i-heroicons-x-mark-20-solid"
+              class="-my-1"
+              @click="$emit('close')"
             />
           </div>
         </template>
-        <template #item="{ item }">
-          <UCard @submit.prevent="() => onSubmit(accountForm)">
-            <template #header>
-              <p
-                class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-              >
-                {{ item.label }}
-              </p>
-              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                {{ item.description }}
-              </p>
-            </template>
 
-            <div
-              v-if="item.key === 'account'"
-              class="space-y-3"
-            >
-              <UFormGroup
-                label="用户名"
-                name="username"
-                required
-              >
-                <UInput
-                  v-model="accountForm.username"
-                  :disabled="final_loading"
-                  required
-                />
-              </UFormGroup>
-              <UFormGroup
-                label="密码"
-                name="password"
-                required
-              >
-                <UInput
-                  v-model="accountForm.password"
-                  :disabled="final_loading"
-                  type="password"
-                  required
-                />
-              </UFormGroup>
+        <UTabs
+          :items="items"
+          class="w-full"
+          v-model="currentTab"
+        >
+          <!-- <template #default="{ item, index, selected }">
+            <div class="relative flex items-center gap-2 truncate">
+              <span class="truncate">{{ item.label }}</span>
+              <span
+                v-if="selected"
+                class="bg-primary-500 dark:bg-primary-400 absolute -right-4 h-2 w-2 rounded-full"
+              />
             </div>
+          </template> -->
+          <template #content="{ item }">
+            <UCard @submit.prevent="() => onSubmit(accountForm)">
+              <template #header>
+                <p
+                  class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+                >
+                  {{ item.label }}
+                </p>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                  {{ item.description }}
+                </p>
+              </template>
 
-            <div
-              v-else-if="item.key === 'sms'"
-              class="space-y-3"
-            >
-              <UFormGroup
-                label="手机号"
-                name="mobile"
-                required
-              >
-                <UButtonGroup class="w-full">
-                  <UInput
-                    v-model="smsForm.mobile"
-                    :disabled="final_loading"
-                    type="sms"
-                    class="w-full"
-                    required
-                  >
-                    <template #leading>
-                      <span class="text-gray-500 dark:text-gray-400 text-xs">
-                        +86
-                      </span>
-                    </template>
-                  </UInput>
-                  <UButton
-                    :label="
-                      sms_counting_down
-                        ? `${sms_counting_down}秒后重发`
-                        : '获取验证码'
-                    "
-                    @click="obtainSmsCode"
-                    :loading="sms_sending"
-                    :disabled="!!sms_counting_down || final_loading"
-                    class="text-xs font-bold"
-                    color="gray"
-                  />
-                </UButtonGroup>
-              </UFormGroup>
-              <Transition name="pin-root">
-                <div v-if="sms_triggered">
-                  <Label
-                    for="pin-input"
-                    class="pin-label"
-                  >
-                    验证码
-                  </Label>
-                  <PinInputRoot
-                    id="sms-input"
-                    v-model="smsForm.sms_code"
-                    :disabled="sms_sending || final_loading"
-                    placeholder="○"
-                    class="w-full flex gap-2 justify-between md:justify-start items-center mt-1"
-                    @complete="handle_sms_verify"
-                    type="number"
-                    otp
-                    required
-                  >
-                    <PinInputInput
-                      v-for="(id, index) in 4"
-                      :key="id"
-                      :index="index"
-                      class="pin-input"
-                      :autofocus="index === 0"
-                    />
-                  </PinInputRoot>
-                </div>
-              </Transition>
-            </div>
-
-            <div
-              v-if="item.key === 'recovery'"
-              class="space-y-3"
-            >
-              <UForm
+              <div
+                v-if="item.key === 'account'"
                 class="space-y-3"
-                :schema="forgetPasswordSchema"
-                :state="forgetPasswordState"
-                @submit="onForgetPasswordSubmit"
               >
-                <UFormGroup
+                <UFormField
+                  label="用户名"
+                  name="username"
+                  required
+                >
+                  <UInput
+                    v-model="accountForm.username"
+                    :disabled="final_loading"
+                    required
+                  />
+                </UFormField>
+                <UFormField
+                  label="密码"
+                  name="password"
+                  required
+                >
+                  <UInput
+                    v-model="accountForm.password"
+                    :disabled="final_loading"
+                    type="password"
+                    required
+                  />
+                </UFormField>
+              </div>
+
+              <div
+                v-else-if="item.key === 'sms'"
+                class="space-y-3"
+              >
+                <UFormField
                   label="手机号"
                   name="mobile"
                   required
                 >
                   <UButtonGroup class="w-full">
                     <UInput
-                      v-model="forgetPasswordState.mobile"
+                      v-model="smsForm.mobile"
                       :disabled="final_loading"
-                      type="tel"
+                      type="sms"
                       class="w-full"
+                      required
                     >
                       <template #leading>
-                        <span class="text-gray-500 dark:text-gray-400 text-xs">
+                        <span class="text-xs text-gray-500 dark:text-gray-400">
                           +86
                         </span>
                       </template>
@@ -501,78 +431,156 @@ const onForgetPasswordSubmit = (
                           ? `${sms_counting_down}秒后重发`
                           : '获取验证码'
                       "
-                      @click="obtainForgetSmsCode"
+                      @click="obtainSmsCode"
                       :loading="sms_sending"
-                      :disabled="!!sms_counting_down"
+                      :disabled="!!sms_counting_down || final_loading"
                       class="text-xs font-bold"
-                      color="gray"
+                      color="neutral"
                     />
                   </UButtonGroup>
-                </UFormGroup>
-                <UFormGroup
-                  label="验证码"
-                  name="sms_code"
-                  required
-                >
-                  <UInput
-                    v-model="forgetPasswordState.sms_code"
-                    type="sms"
-                    class="w-full"
-                    :disabled="final_loading"
-                  />
-                </UFormGroup>
-                <UFormGroup
-                  label="新密码"
-                  name="password"
-                  required
-                >
-                  <UInput
-                    v-model="forgetPasswordState.password"
-                    type="password"
-                    :disabled="final_loading"
-                  />
-                </UFormGroup>
+                </UFormField>
+                <Transition name="pin-root">
+                  <div v-if="sms_triggered">
+                    <Label
+                      for="pin-input"
+                      class="pin-label"
+                    >
+                      验证码
+                    </Label>
+                    <PinInputRoot
+                      id="sms-input"
+                      v-model="smsForm.sms_code"
+                      :disabled="sms_sending || final_loading"
+                      placeholder="○"
+                      class="mt-1 flex w-full items-center justify-between gap-2 md:justify-start"
+                      @complete="handle_sms_verify"
+                      type="number"
+                      otp
+                      required
+                    >
+                      <PinInputInput
+                        v-for="(id, index) in 4"
+                        :key="id"
+                        :index="index"
+                        class="pin-input"
+                        :autofocus="index === 0"
+                      />
+                    </PinInputRoot>
+                  </div>
+                </Transition>
+              </div>
 
-                <div>
+              <div
+                v-if="item.key === 'recovery'"
+                class="space-y-3"
+              >
+                <UForm
+                  class="space-y-3"
+                  :schema="forgetPasswordSchema"
+                  :state="forgetPasswordState"
+                  @submit="onForgetPasswordSubmit"
+                >
+                  <UFormField
+                    label="手机号"
+                    name="mobile"
+                    required
+                  >
+                    <UButtonGroup class="w-full">
+                      <UInput
+                        v-model="forgetPasswordState.mobile"
+                        :disabled="final_loading"
+                        type="tel"
+                        class="w-full"
+                      >
+                        <template #leading>
+                          <span
+                            class="text-xs text-gray-500 dark:text-gray-400"
+                          >
+                            +86
+                          </span>
+                        </template>
+                      </UInput>
+                      <UButton
+                        :label="
+                          sms_counting_down
+                            ? `${sms_counting_down}秒后重发`
+                            : '获取验证码'
+                        "
+                        @click="obtainForgetSmsCode"
+                        :loading="sms_sending"
+                        :disabled="!!sms_counting_down"
+                        class="text-xs font-bold"
+                        color="neutral"
+                      />
+                    </UButtonGroup>
+                  </UFormField>
+                  <UFormField
+                    label="验证码"
+                    name="sms_code"
+                    required
+                  >
+                    <UInput
+                      v-model="forgetPasswordState.sms_code"
+                      type="sms"
+                      class="w-full"
+                      :disabled="final_loading"
+                    />
+                  </UFormField>
+                  <UFormField
+                    label="新密码"
+                    name="password"
+                    required
+                  >
+                    <UInput
+                      v-model="forgetPasswordState.password"
+                      type="password"
+                      :disabled="final_loading"
+                    />
+                  </UFormField>
+
+                  <div>
+                    <UButton
+                      type="submit"
+                      :loading="final_loading"
+                    >
+                      重置密码
+                    </UButton>
+                  </div>
+                </UForm>
+              </div>
+
+              <template
+                #footer
+                v-if="item.key === 'account'"
+              >
+                <div class="flex items-center justify-between">
                   <UButton
                     type="submit"
+                    color="primary"
                     :loading="final_loading"
                   >
-                    重置密码
+                    登录
+                  </UButton>
+                  <UButton
+                    variant="link"
+                    color="neutral"
+                    @click="currentTab = 2"
+                  >
+                    忘记密码
                   </UButton>
                 </div>
-              </UForm>
-            </div>
-
-            <template
-              #footer
-              v-if="item.key === 'account'"
-            >
-              <div class="flex items-center justify-between">
-                <UButton
-                  type="submit"
-                  color="black"
-                  :loading="final_loading"
-                >
-                  登录
-                </UButton>
-                <UButton
-                  variant="link"
-                  color="gray"
-                  @click="currentTab = 2"
-                >
-                  忘记密码
-                </UButton>
-              </div>
-            </template>
-          </UCard>
-        </template>
-      </UTabs>
-    </UCard>
+              </template>
+            </UCard>
+          </template>
+        </UTabs>
+      </UCard>
+    </template>
   </UModal>
 </template>
 
 <style scoped>
+@reference '@/assets/css/main.css';
+
 .pin-root-enter-active,
 .pin-root-leave-active {
   @apply transition duration-500;
@@ -580,15 +588,15 @@ const onForgetPasswordSubmit = (
 
 .pin-root-enter-from,
 .pin-root-leave-to {
-  @apply opacity-0 -translate-y-2;
+  @apply -translate-y-2 opacity-0;
 }
 
 .pin-input {
-  @apply w-full md:w-16 aspect-square rounded text-center shadow caret-transparent;
-  @apply outline-0 ring-indigo-500 focus:ring-3 font-bold;
+  @apply aspect-square w-full rounded text-center caret-transparent shadow md:w-16;
+  @apply focus:ring-3 font-bold outline-0 ring-indigo-500;
 }
 
 .pin-label {
-  @apply block text-sm font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400;
+  @apply block text-sm font-medium text-gray-700 after:ms-0.5 after:text-red-500 after:content-['*'] dark:text-gray-200 dark:after:text-red-400;
 }
 </style>
diff --git a/app/components/ModalDigitalHumanSelect.vue b/app/components/ModalDigitalHumanSelect.vue
index db277af..fad5122 100644
--- a/app/components/ModalDigitalHumanSelect.vue
+++ b/app/components/ModalDigitalHumanSelect.vue
@@ -27,16 +27,17 @@ const emit = defineEmits({
 })
 
 const loginState = useLoginState()
-const modal = useModal()
 const toast = useToast()
 
 const page = ref(1)
 
+const isRealOpen = computed(() => props.isOpen)
+
 const sourceTypeList = [
-  { label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
-  { label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
-  { label: 'xsh_fh', value: 3, color: 'purple' }, // 硅基（泛化数字人）
-  { label: 'xsh_bb', value: 4, color: 'indigo' }, // 百度小冰
+  { label: 'xsh_wm', value: 1, color: 'info' }, // 万木（腾讯）
+  { label: 'xsh_zy', value: 2, color: 'success' }, // XSH 自有
+  { label: 'xsh_fh', value: 3, color: 'warning' }, // 硅基（泛化数字人）
+  { label: 'xsh_bb', value: 4, color: 'primary' }, // 百度小冰
 ]
 // const sourceType = ref(sourceTypeList[0])
 
@@ -59,7 +60,7 @@ const handleClose = () => {
   if (props.isOpen) {
     emit('close')
   } else {
-    modal.close()
+    emit('close')
   }
 }
 
@@ -68,7 +69,7 @@ const handleSubmit = () => {
     toast.add({
       title: '请选择数字人',
       description: '请至少选择一个数字人',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-circle-x',
     })
     return
@@ -77,7 +78,7 @@ const handleSubmit = () => {
     'select',
     props.multiple
       ? selectedDigitalHumans.value
-      : selectedDigitalHumans.value[0]
+      : selectedDigitalHumans.value[0]!
   )
   handleClose()
   setTimeout(() => {
@@ -153,113 +154,111 @@ onMounted(() => {
 
 <template>
   <UModal
-    :model-value="isOpen"
-    :ui="{ width: 'w-full sm:max-w-3xl' }"
+    v-model:open="isRealOpen"
+    :ui="{ content: 'w-full sm:max-w-3xl' }"
     @close="handleClose"
   >
-    <UCard
-      :ui="{
-        ring: '',
-        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-      }"
-    >
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3
-            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-          >
-            数字人选择器
-          </h3>
-          <UButton
-            class="-my-1"
-            color="gray"
-            icon="i-tabler-x"
-            variant="ghost"
-            @click="handleClose"
-          />
-        </div>
-      </template>
-
-      <UTabs
-        v-model="tabIndex"
-        :items="tabItems"
-      >
-        <template #item="{ item }">
-          <div class="w-full grid grid-cols-3 sm:grid-cols-5 gap-4">
-            <div
-              v-for="(d, i) in item.key === 'user'
-                ? userDigitalList?.data.items
-                : systemDigitalList?.data.items"
-              :key="`${item.key === 'user' ? 'user' : 'system'}-digital-${
-                d.model_id
-              }`"
-              :class="{
-                'border-primary shadow-md': selectedDigitalHumans.includes(d),
-                'border-neutral-200 dark:border-neutral-700':
-                  !selectedDigitalHumans.includes(d),
-              }"
-              class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white dark:bg-neutral-800 rounded-md border dark:border-2 cursor-pointer transition-all duration-150 select-none"
-              @click="
-                !disabledDigitalHumanIds.includes(d.model_id)
-                  ? handleSelectClick(d)
-                  : void 0
-              "
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
             >
+              数字人选择器
+            </h3>
+            <UButton
+              class="-my-1"
+              color="neutral"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="handleClose"
+            />
+          </div>
+        </template>
+
+        <UTabs
+          v-model="tabIndex"
+          :items="tabItems"
+        >
+          <template #content="{ item }">
+            <div class="grid w-full grid-cols-3 gap-4 sm:grid-cols-5">
               <div
-                v-if="disabledDigitalHumanIds.includes(d.model_id)"
-                class="absolute inset-0 bg-neutral-400 dark:bg-neutral-700 bg-opacity-50 dark:bg-opacity-50 cursor-not-allowed z-10"
-              ></div>
-              <div
-                :class="{ 'bg-primary-50': selectedDigitalHumans.includes(d) }"
-                class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-square object-cover overflow-hidden transition-all duration-150"
+                v-for="(d, i) in item.key === 'user'
+                  ? userDigitalList?.data.items
+                  : systemDigitalList?.data.items"
+                :key="`${item.key === 'user' ? 'user' : 'system'}-digital-${
+                  d.model_id
+                }`"
+                :class="{
+                  'border-primary shadow-md': selectedDigitalHumans.includes(d),
+                  'border-neutral-200 dark:border-neutral-700':
+                    !selectedDigitalHumans.includes(d),
+                }"
+                class="relative flex w-full cursor-pointer select-none flex-col items-center justify-center gap-2 overflow-hidden rounded-md border bg-white transition-all duration-150 dark:border-2 dark:bg-neutral-800"
+                @click="
+                  !disabledDigitalHumanIds.includes(d.model_id)
+                    ? handleSelectClick(d)
+                    : void 0
+                "
               >
-                <NuxtImg
-                  :src="d.avatar"
-                  class="-translate-y-4"
-                />
-                <UIcon
-                  v-if="selectedDigitalHumans.includes(d)"
-                  class="absolute top-1 right-1 text-lg text-primary"
-                  name="i-tabler-check"
-                />
-                <UIcon
+                <div
                   v-if="disabledDigitalHumanIds.includes(d.model_id)"
-                  class="absolute top-1 right-1 text-lg text-red-500"
-                  name="tabler:user-off"
-                />
-                <template
-                  v-for="(t, i) in sourceTypeList"
-                  :key="i"
+                  class="absolute inset-0 z-10 cursor-not-allowed bg-neutral-400/50 dark:bg-neutral-700/50"
+                ></div>
+                <div
+                  :class="{
+                    'bg-primary-50': selectedDigitalHumans.includes(d),
+                  }"
+                  class="relative aspect-square w-full overflow-hidden border-b bg-neutral-100 object-cover transition-all duration-150 dark:border-neutral-700 dark:bg-neutral-800"
                 >
-                  <UBadge
-                    v-if="t.value === d.type"
-                    class="absolute bottom-1 right-1"
-                    size="xs"
-                    variant="subtle"
-                    :color="t.color"
-                    :label="t.label"
+                  <NuxtImg
+                    :src="d.avatar"
+                    class="-translate-y-4"
                   />
-                </template>
-              </div>
-              <div class="w-full flex flex-col gap-1 px-2 pb-2">
-                <div class="flex justify-between items-center">
-                  <span
-                    class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1"
+                  <UIcon
+                    v-if="selectedDigitalHumans.includes(d)"
+                    class="text-primary absolute right-1 top-1 text-lg"
+                    name="i-tabler-check"
+                  />
+                  <UIcon
+                    v-if="disabledDigitalHumanIds.includes(d.model_id)"
+                    class="absolute right-1 top-1 text-lg text-red-500"
+                    name="tabler:user-off"
+                  />
+                  <template
+                    v-for="(t, i) in sourceTypeList"
+                    :key="i"
                   >
-                    {{ d.name }}
-                  </span>
-                  <span
-                    class="text-xs text-neutral-300 dark:text-neutral-500 font-medium"
-                  >
-                    ID:{{ d.digital_human_id || d.id }}
-                  </span>
+                    <UBadge
+                      v-if="t.value === d.type"
+                      class="absolute bottom-1 right-1"
+                      size="xs"
+                      variant="subtle"
+                      :color="t.color as any"
+                      :label="t.label"
+                    />
+                  </template>
+                </div>
+                <div class="flex w-full flex-col gap-1 px-2 pb-2">
+                  <div class="flex items-center justify-between">
+                    <span
+                      class="line-clamp-1 text-sm font-medium text-neutral-800 dark:text-neutral-300"
+                    >
+                      {{ d.name }}
+                    </span>
+                    <span
+                      class="text-xs font-medium text-neutral-300 dark:text-neutral-500"
+                    >
+                      ID:{{ d.digital_human_id || d.id }}
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="flex justify-between items-end">
-            <div class="flex items-center gap-2">
-              <!-- <span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium">
+            <div class="flex items-end justify-between">
+              <div class="flex items-center gap-2">
+                <!-- <span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium">
                 选择来源:
               </span>
               <USelectMenu
@@ -267,50 +266,51 @@ onMounted(() => {
                 :options="sourceTypeList.map(i => ({ label: i.label, value: i.value }))"
                 @change="page = 1"
               /> -->
+              </div>
+              <UPagination
+                v-if="
+                  (item.key === 'user'
+                    ? userDigitalList?.data.total || 0
+                    : systemDigitalList?.data.total || 0) > 0
+                "
+                v-model:page="page"
+                :page-count="15"
+                :total="
+                  item.key === 'user'
+                    ? userDigitalList?.data.total || 0
+                    : systemDigitalList?.data.total || 0
+                "
+                class="pt-4"
+              />
+            </div>
+          </template>
+        </UTabs>
+
+        <template #footer>
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="select-none text-xs font-medium opacity-50">
+                如果没有出现您的数字人，请联系管理员开通
+              </p>
+            </div>
+            <div class="flex items-center gap-4">
+              <UButton
+                color="neutral"
+                label="取消"
+                variant="ghost"
+                @click="handleClose"
+              />
+              <UButton
+                color="primary"
+                label="选择"
+                variant="solid"
+                @click="handleSubmit"
+              />
             </div>
-            <UPagination
-              v-if="
-                (item.key === 'user'
-                  ? userDigitalList?.data.total || 0
-                  : systemDigitalList?.data.total || 0) > 0
-              "
-              v-model="page"
-              :page-count="15"
-              :total="
-                item.key === 'user'
-                  ? userDigitalList?.data.total || 0
-                  : systemDigitalList?.data.total || 0
-              "
-              class="pt-4"
-            />
           </div>
         </template>
-      </UTabs>
-
-      <template #footer>
-        <div class="flex justify-between items-center">
-          <div>
-            <p class="text-xs font-medium opacity-50 select-none">
-              如果没有出现您的数字人，请联系管理员开通
-            </p>
-          </div>
-          <div class="flex items-center gap-4">
-            <UButton
-              color="gray"
-              label="取消"
-              variant="ghost"
-              @click="handleClose"
-            />
-            <UButton
-              color="primary"
-              label="选择"
-              variant="solid"
-              @click="handleSubmit"
-            />
-          </div>
-        </div>
-      </template>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>
 
diff --git a/app/components/ModalVideoTitleSelect.vue b/app/components/ModalVideoTitleSelect.vue
index 01e3e4f..ed00eb2 100644
--- a/app/components/ModalVideoTitleSelect.vue
+++ b/app/components/ModalVideoTitleSelect.vue
@@ -12,8 +12,8 @@ const emit = defineEmits({
 })
 
 const toast = useToast()
-const modal = useModal()
 const loginState = useLoginState()
+const isRealOpen = computed(() => props.isOpen)
 
 const pagination = reactive({
   page: 1,
@@ -48,7 +48,7 @@ const handleClose = () => {
   if (props.isOpen) {
     emit('close')
   } else {
-    modal.close()
+    emit('close')
   }
 }
 
@@ -57,7 +57,7 @@ const handleSubmit = () => {
     toast.add({
       title: '请选择片头',
       description: '请选择一个片头',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-circle-x',
     })
     return
@@ -69,118 +69,115 @@ const handleSubmit = () => {
 
 <template>
   <UModal
-    :model-value="isOpen"
-    :ui="{ width: 'w-full sm:max-w-3xl' }"
+    v-model:open="isRealOpen"
+    :ui="{ content: 'w-full sm:max-w-3xl' }"
     @close="handleClose"
   >
-    <UCard
-      :ui="{
-        ring: '',
-        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-      }"
-    >
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3
-            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-          >
-            视频片头选择器
-          </h3>
-          <UButton
-            class="-my-1"
-            color="gray"
-            icon="i-tabler-x"
-            variant="ghost"
-            @click="handleClose"
-          />
-        </div>
-      </template>
-
-      <div>
-        <div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-4">
-          <div
-            v-for="(titles, i) in userTitlesTemplate?.data.items"
-            :key="`user-titles-${titles.id}`"
-            :class="{
-              'border-primary shadow-md': selectedTitle?.id === titles.id,
-              'border-neutral-200 dark:border-neutral-700':
-                selectedTitle?.id !== titles.id,
-            }"
-            class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white dark:bg-neutral-800 rounded-md border dark:border-2 cursor-pointer transition-all duration-150 select-none"
-            @click="selectedTitle = titles"
-          >
-            <div
-              :class="{
-                'bg-primary-50': selectedTitle?.id === titles.id,
-              }"
-              class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-video object-cover overflow-hidden transition-all duration-150"
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
             >
-              <NuxtImg :src="titles.opening_url" />
-              <UIcon
-                v-if="selectedTitle?.id === titles.id"
-                class="absolute top-1 right-1 text-lg text-primary"
-                name="i-tabler-check"
-              />
-            </div>
-            <div class="w-full flex flex-col gap-1 px-2 pb-2">
-              <div class="flex justify-between items-center">
-                <span
-                  class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1"
-                >
-                  {{ titles.title }}
-                </span>
-                <span
-                  class="text-xs text-neutral-300 dark:text-neutral-500 font-medium"
-                >
-                  ID:{{ titles.id }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-end">
-          <UPagination
-            v-if="(userTitlesTemplate?.data.total || 0) > 0"
-            v-model="pagination.page"
-            :page-count="pagination.pageSize"
-            :total="userTitlesTemplate?.data.total || 0"
-            class="pt-4"
-          />
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex justify-between items-center">
-          <div>
-            <p class="text-xs font-medium opacity-50 select-none">
-              如果此处没有您的片头，请在
-              <a
-                class="text-primary"
-                href="/generation/materials"
-                target="_blank"
-              >
-                片头模版库
-              </a>
-              页面确认已经制作完毕
-            </p>
-          </div>
-          <div class="flex items-center gap-4">
+              视频片头选择器
+            </h3>
             <UButton
-              color="gray"
-              label="取消"
+              class="-my-1"
+              color="neutral"
+              icon="i-tabler-x"
               variant="ghost"
               @click="handleClose"
             />
-            <UButton
-              color="primary"
-              label="选择"
-              variant="solid"
-              @click="handleSubmit"
+          </div>
+        </template>
+
+        <div>
+          <div class="grid w-full grid-cols-2 gap-4 sm:grid-cols-3">
+            <div
+              v-for="(titles, i) in userTitlesTemplate?.data.items"
+              :key="`user-titles-${titles.id}`"
+              :class="{
+                'border-primary shadow-md': selectedTitle?.id === titles.id,
+                'border-neutral-200 dark:border-neutral-700':
+                  selectedTitle?.id !== titles.id,
+              }"
+              class="relative flex w-full cursor-pointer select-none flex-col items-center justify-center gap-2 overflow-hidden rounded-md border bg-white transition-all duration-150 dark:border-2 dark:bg-neutral-800"
+              @click="selectedTitle = titles"
+            >
+              <div
+                :class="{
+                  'bg-primary-50': selectedTitle?.id === titles.id,
+                }"
+                class="relative aspect-video w-full overflow-hidden border-b bg-neutral-100 object-cover transition-all duration-150 dark:border-neutral-700 dark:bg-neutral-800"
+              >
+                <NuxtImg :src="titles.opening_url" />
+                <UIcon
+                  v-if="selectedTitle?.id === titles.id"
+                  class="text-primary absolute right-1 top-1 text-lg"
+                  name="i-tabler-check"
+                />
+              </div>
+              <div class="flex w-full flex-col gap-1 px-2 pb-2">
+                <div class="flex items-center justify-between">
+                  <span
+                    class="line-clamp-1 text-sm font-medium text-neutral-800 dark:text-neutral-300"
+                  >
+                    {{ titles.title }}
+                  </span>
+                  <span
+                    class="text-xs font-medium text-neutral-300 dark:text-neutral-500"
+                  >
+                    ID:{{ titles.id }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-end">
+            <UPagination
+              v-if="(userTitlesTemplate?.data.total || 0) > 0"
+              v-model:page="pagination.page"
+              :page-count="pagination.pageSize"
+              :total="userTitlesTemplate?.data.total || 0"
+              class="pt-4"
             />
           </div>
         </div>
-      </template>
-    </UCard>
+
+        <template #footer>
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="select-none text-xs font-medium opacity-50">
+                如果此处没有您的片头，请在
+                <a
+                  class="text-primary"
+                  href="/generation/materials"
+                  target="_blank"
+                >
+                  片头模版库
+                </a>
+                页面确认已经制作完毕
+              </p>
+            </div>
+            <div class="flex items-center gap-4">
+              <UButton
+                color="neutral"
+                label="取消"
+                variant="ghost"
+                @click="handleClose"
+              />
+              <UButton
+                color="primary"
+                label="选择"
+                variant="solid"
+                @click="handleSubmit"
+              />
+            </div>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>
 
diff --git a/app/components/SlideCreateCourse.vue b/app/components/SlideCreateCourse.vue
index 3cfa446..7a94617 100644
--- a/app/components/SlideCreateCourse.vue
+++ b/app/components/SlideCreateCourse.vue
@@ -5,9 +5,8 @@ import ModalDigitalHumanSelect from '~/components/ModalDigitalHumanSelect.vue'
 import type { FormSubmitEvent } from '#ui/types'
 import { useFetchWrapped } from '~/composables/useFetchWrapped'
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(['success', 'close'])
 
-const slide = useSlideover()
 const toast = useToast()
 const loginState = useLoginState()
 
@@ -65,14 +64,14 @@ const onCreateCourseSubmit = async (
     toast.add({
       title: '未选择文件',
       description: '请先选择 PPTX 文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
   }
   creationPending.value = true
   // upload PPTX file
-  useFileGo(selected_file.value[0], 'ppt').then((url) => {
+  useFileGo(selected_file.value[0]!, 'ppt').then((url) => {
     useFetchWrapped<
       req.gen.CourseGenCreate & AuthedRequest,
       BaseResponse<resp.gen.CourseGenCreate>
@@ -93,16 +92,16 @@ const onCreateCourseSubmit = async (
           toast.add({
             title: '创建成功',
             description: '已加入生成队列',
-            color: 'green',
+            color: 'success',
             icon: 'i-tabler-check',
           })
           emit('success')
-          slide.close()
+          emit('close')
         } else {
           toast.add({
             title: '创建失败',
             description: res.msg || '未知错误',
-            color: 'red',
+            color: 'error',
             icon: 'i-tabler-alert-triangle',
           })
         }
@@ -113,7 +112,7 @@ const onCreateCourseSubmit = async (
         toast.add({
           title: '创建失败',
           description: e.message || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       })
@@ -122,239 +121,229 @@ const onCreateCourseSubmit = async (
 </script>
 
 <template>
-  <USlideover prevent-close>
-    <UCard
-      :ui="{
-        body: { base: 'flex-1' },
-        ring: '',
-        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-      }"
-      class="flex flex-col flex-1"
-    >
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3
-            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-          >
-            新建微课视频
-          </h3>
-          <UButton
-            class="-my-1"
-            color="gray"
-            icon="i-tabler-x"
-            variant="ghost"
-            @click="slide.close()"
-          />
-        </div>
-      </template>
-
-      <UForm
-        ref="creationForm"
-        :schema="createCourseSchema"
-        :state="createCourseState"
-        class="space-y-4"
-        @submit="onCreateCourseSubmit"
+  <USlideover
+    :dismissible="false"
+    title="新建微课视频"
+  >
+    <template #content>
+      <UCard
+        :ui="{
+          body: 'flex-1',
+        }"
+        class="flex flex-1 flex-col"
       >
-        <div class="flex justify-between gap-2 *:flex-1">
-          <UFormGroup
-            label="微课标题"
-            name="task_title"
-            required
-          >
-            <UInput
-              v-model="createCourseState.task_title"
-              placeholder="请输入微课标题"
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+            >
+              新建微课视频
+            </h3>
+            <UButton
+              class="-my-1"
+              color="neutral"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="$emit('close')"
             />
-          </UFormGroup>
-        </div>
+          </div>
+        </template>
 
-        <div class="grid grid-cols-2 gap-2">
-          <UFormGroup
-            label="数字人"
-            name="digital_human_id"
+        <UForm
+          ref="creationForm"
+          :schema="createCourseSchema"
+          :state="createCourseState"
+          class="space-y-4"
+          @submit="onCreateCourseSubmit"
+        >
+          <div class="flex justify-between gap-2 *:flex-1">
+            <UFormField
+              label="微课标题"
+              name="task_title"
+              required
+            >
+              <UInput
+                v-model="createCourseState.task_title"
+                placeholder="请输入微课标题"
+              />
+            </UFormField>
+          </div>
+
+          <div class="grid grid-cols-2 gap-2">
+            <UFormField
+              label="数字人"
+              name="digital_human_id"
+              required
+            >
+              <div
+                :class="{ 'shadow-inner': !!selected_digital_human }"
+                class="flex cursor-pointer select-none items-center gap-2 rounded-md bg-neutral-100 p-2 transition-all dark:bg-neutral-800"
+                @click="isDigitalSelectorOpen = true"
+              >
+                <div
+                  class="flex aspect-square w-12 items-center justify-center overflow-hidden rounded-md border dark:border-neutral-700"
+                >
+                  <UIcon
+                    v-if="!selected_digital_human"
+                    class="text-2xl opacity-50"
+                    name="i-tabler-user-screen"
+                  />
+                  <NuxtImg
+                    v-else
+                    :src="selected_digital_human?.avatar"
+                  />
+                </div>
+                <div class="flex flex-col text-sm font-medium text-neutral-400">
+                  <span
+                    :class="!!selected_digital_human ? 'text-neutral-600' : ''"
+                  >
+                    {{ selected_digital_human?.name || '点击选择数字人' }}
+                  </span>
+                  <span
+                    v-if="selected_digital_human?.description"
+                    class="text-2xs"
+                  >
+                    {{ selected_digital_human?.description }}
+                  </span>
+                </div>
+              </div>
+            </UFormField>
+            <UFormField
+              label="视频片头片尾"
+              name="opening"
+            >
+              <div
+                :class="{ 'shadow-inner': !!selected_titles }"
+                class="flex cursor-pointer select-none items-center gap-2 rounded-md bg-neutral-100 p-2 transition-all dark:bg-neutral-800"
+                @click="isTitlesSelectorOpen = true"
+              >
+                <div
+                  class="flex aspect-square w-12 items-center justify-center overflow-hidden rounded-md border dark:border-neutral-700"
+                >
+                  <UIcon
+                    v-if="!selected_titles"
+                    class="text-2xl opacity-50"
+                    name="i-tabler-brackets-contain"
+                  />
+                  <NuxtImg
+                    v-else
+                    :src="selected_titles?.opening_url"
+                  />
+                </div>
+                <div class="flex flex-col text-sm font-medium text-neutral-400">
+                  <span :class="!!selected_titles ? 'text-neutral-600' : ''">
+                    {{ selected_titles?.title || '点击选择片头' }}
+                  </span>
+                  <span
+                    v-if="selected_titles?.description"
+                    class="text-2xs"
+                  >
+                    {{ selected_titles?.description }}
+                  </span>
+                </div>
+              </div>
+            </UFormField>
+          </div>
+
+          <UFormField
+            label="PPT 文件"
             required
           >
-            <div
-              :class="{ 'shadow-inner': !!selected_digital_human }"
-              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
-              @click="isDigitalSelectorOpen = true"
-            >
-              <div
-                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden"
-              >
-                <UIcon
-                  v-if="!selected_digital_human"
-                  class="text-2xl opacity-50"
-                  name="i-tabler-user-screen"
-                />
-                <NuxtImg
-                  v-else
-                  :src="selected_digital_human?.avatar"
-                />
-              </div>
-              <div class="flex flex-col text-neutral-400 text-sm font-medium">
-                <span
-                  :class="!!selected_digital_human ? 'text-neutral-600' : ''"
-                >
-                  {{ selected_digital_human?.name || '点击选择数字人' }}
-                </span>
-                <span
-                  v-if="selected_digital_human?.description"
-                  class="text-2xs"
-                >
-                  {{ selected_digital_human?.description }}
-                </span>
-              </div>
-            </div>
-          </UFormGroup>
-          <UFormGroup
-            label="视频片头片尾"
-            name="opening"
+            <template #help>
+              <p class="text-xs text-neutral-400">仅支持 .pptx 格式</p>
+            </template>
+            <FileDnD
+              accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
+              @change="(file) => (selected_file = file)"
+            />
+          </UFormField>
+
+          <UAccordion
+            :items="[{ label: '高级选项' }]"
+            color="neutral"
+            size="lg"
           >
-            <div
-              :class="{ 'shadow-inner': !!selected_titles }"
-              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
-              @click="isTitlesSelectorOpen = true"
-            >
+            <template #content>
               <div
-                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden"
+                class="space-y-4 rounded-lg border p-4 pb-6 dark:border-neutral-700"
               >
-                <UIcon
-                  v-if="!selected_titles"
-                  class="text-2xl opacity-50"
-                  name="i-tabler-brackets-contain"
-                />
-                <NuxtImg
-                  v-else
-                  :src="selected_titles?.opening_url"
-                />
-              </div>
-              <div class="flex flex-col text-neutral-400 text-sm font-medium">
-                <span :class="!!selected_titles ? 'text-neutral-600' : ''">
-                  {{ selected_titles?.title || '点击选择片头' }}
-                </span>
-                <span
-                  v-if="selected_titles?.description"
-                  class="text-2xs"
+                <UFormField
+                  label="生成线路"
+                  name="gen_server"
                 >
-                  {{ selected_titles?.description }}
-                </span>
+                  <USelectMenu
+                    v-model="createCourseState.gen_server"
+                    :items="[
+                      {
+                        label: '主线路',
+                        value: 'main',
+                      },
+                      {
+                        label: '备用线路',
+                        value: 'standby1',
+                      },
+                    ]"
+                    value-key="value"
+                  />
+                </UFormField>
+                <UFormField
+                  :label="`视频倍速：${createCourseState.speed}`"
+                  name="speed"
+                >
+                  <USlider
+                    v-model="createCourseState.speed"
+                    :max="1.5"
+                    :min="0.5"
+                    :step="0.1"
+                    class="pt-4"
+                    size="sm"
+                  />
+                </UFormField>
               </div>
-            </div>
-          </UFormGroup>
-          <!-- <UFormGroup label="视频片头片尾" name="opening">
-            <div
-              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
-            >
-              <div
-                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center">
-                <UIcon class="text-2xl opacity-50" name="i-tabler-brackets-contain"/>
-              </div>
-              <div class="flex flex-col text-neutral-400 text-sm font-medium">
-                <span>点击选择</span>
-              </div>
-            </div>
-          </UFormGroup> -->
-        </div>
+            </template>
+          </UAccordion>
+        </UForm>
 
-        <UFormGroup
-          label="PPT 文件"
-          required
-        >
-          <template #help>
-            <p class="text-xs text-neutral-400">仅支持 .pptx 格式</p>
-          </template>
-          <FileDnD
-            accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
-            @change="(file) => (selected_file = file)"
-          />
-        </UFormGroup>
+        <ModalDigitalHumanSelect
+          :is-open="isDigitalSelectorOpen"
+          @close="isDigitalSelectorOpen = false"
+          @select="
+            (digitalHumans) => {
+              selected_digital_human = digitalHumans as DigitalHumanItem
+            }
+          "
+        />
+        <ModalVideoTitleSelect
+          :is-open="isTitlesSelectorOpen"
+          @close="isTitlesSelectorOpen = false"
+          @select="
+            (titles) => {
+              selected_titles = titles as TitlesTemplate
+            }
+          "
+        />
 
-        <UAccordion
-          :items="[{ label: '高级选项' }]"
-          color="gray"
-          size="lg"
-        >
-          <template #item>
-            <div
-              class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6"
-            >
-              <UFormGroup
-                label="生成线路"
-                name="gen_server"
-              >
-                <USelectMenu
-                  v-model="createCourseState.gen_server"
-                  :options="[
-                    {
-                      label: '主线路',
-                      value: 'main',
-                    },
-                    {
-                      label: '备用线路',
-                      value: 'standby1',
-                    },
-                  ]"
-                  option-attribute="label"
-                  value-attribute="value"
-                />
-              </UFormGroup>
-              <UFormGroup
-                :label="`视频倍速：${createCourseState.speed}`"
-                name="speed"
-              >
-                <URange
-                  v-model="createCourseState.speed"
-                  :max="1.5"
-                  :min="0.5"
-                  :step="0.1"
-                  class="pt-4"
-                  size="sm"
-                />
-              </UFormGroup>
-            </div>
-          </template>
-        </UAccordion>
-      </UForm>
-
-      <template #footer>
-        <div class="flex justify-end space-x-4">
-          <UButton
-            color="gray"
-            label="取消"
-            size="lg"
-            variant="ghost"
-            @click="slide.close()"
-          />
-          <UButton
-            :loading="creationPending"
-            color="primary"
-            label="提交"
-            size="lg"
-            variant="solid"
-            @click="creationForm?.submit()"
-          />
-        </div>
-      </template>
-    </UCard>
-    <ModalDigitalHumanSelect
-      :is-open="isDigitalSelectorOpen"
-      @close="isDigitalSelectorOpen = false"
-      @select="
-        (digitalHumans) => {
-          selected_digital_human = digitalHumans as DigitalHumanItem
-        }
-      "
-    />
-    <ModalVideoTitleSelect
-      :is-open="isTitlesSelectorOpen"
-      @close="isTitlesSelectorOpen = false"
-      @select="
-        (titles) => {
-          selected_titles = titles as TitlesTemplate
-        }
-      "
-    />
+        <template #footer>
+          <div class="flex justify-end space-x-4">
+            <UButton
+              color="neutral"
+              label="取消"
+              size="lg"
+              variant="ghost"
+              @click="$emit('close')"
+            />
+            <UButton
+              :loading="creationPending"
+              color="primary"
+              label="提交"
+              size="lg"
+              variant="solid"
+              @click="creationForm?.submit()"
+            />
+          </div>
+        </template>
+      </UCard>
+    </template>
   </USlideover>
 </template>
 
diff --git a/app/components/SlideCreateCourseGreen.vue b/app/components/SlideCreateCourseGreen.vue
index d03dced..050a583 100644
--- a/app/components/SlideCreateCourseGreen.vue
+++ b/app/components/SlideCreateCourseGreen.vue
@@ -4,9 +4,7 @@ import ModalDigitalHumanSelect from '~/components/ModalDigitalHumanSelect.vue'
 import type { FormSubmitEvent } from '#ui/types'
 import { useFetchWrapped } from '~/composables/useFetchWrapped'
 
-const emit = defineEmits(['success'])
-
-const slide = useSlideover()
+const emit = defineEmits(['success', 'close'])
 const toast = useToast()
 const loginState = useLoginState()
 
@@ -100,16 +98,16 @@ const onCreateCourseGreenSubmit = async (
         toast.add({
           title: '创建成功',
           description: '视频已加入生成队列',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
         emit('success')
-        slide.close()
+        emit('close')
       } else {
         toast.add({
           title: '创建失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -120,7 +118,7 @@ const onCreateCourseGreenSubmit = async (
       toast.add({
         title: '创建失败',
         description: e.message || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     })
@@ -128,174 +126,174 @@ const onCreateCourseGreenSubmit = async (
 </script>
 
 <template>
-  <USlideover prevent-close>
-    <UCard
-      :ui="{
-        body: { base: 'flex-1' },
-        ring: '',
-        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-      }"
-      class="flex flex-col flex-1"
-    >
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3
-            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-          >
-            新建绿幕视频
-          </h3>
-          <UButton
-            class="-my-1"
-            color="gray"
-            icon="i-tabler-x"
-            variant="ghost"
-            @click="slide.close()"
-          />
-        </div>
-      </template>
-
-      <UForm
-        ref="creationForm"
-        :schema="createCourseSchema"
-        :state="createCourseState"
-        class="space-y-4"
-        @submit="onCreateCourseGreenSubmit"
+  <USlideover :dismissible="false">
+    <template #content>
+      <UCard
+        :ui="{
+          body: 'flex-1',
+        }"
+        class="flex flex-1 flex-col"
       >
-        <div class="flex justify-between gap-2 *:flex-1">
-          <UFormGroup
-            label="视频标题"
-            name="title"
-            required
-          >
-            <UInput
-              v-model="createCourseState.title"
-              placeholder="请输入视频标题"
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+            >
+              新建绿幕视频
+            </h3>
+            <UButton
+              class="-my-1"
+              color="neutral"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="emit('close')"
             />
-          </UFormGroup>
-        </div>
+          </div>
+        </template>
 
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          <UFormGroup
-            label="数字人"
-            name="digital_human_id"
-            required
-          >
-            <div
-              :class="{ 'shadow-inner': !!selected_digital_human }"
-              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
-              @click="isDigitalSelectorOpen = true"
+        <UForm
+          ref="creationForm"
+          :schema="createCourseSchema"
+          :state="createCourseState"
+          class="space-y-4"
+          @submit="onCreateCourseGreenSubmit"
+        >
+          <div class="flex justify-between gap-2 *:flex-1">
+            <UFormField
+              label="视频标题"
+              name="title"
+              required
+            >
+              <UInput
+                v-model="createCourseState.title"
+                placeholder="请输入视频标题"
+              />
+            </UFormField>
+          </div>
+
+          <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <UFormField
+              label="数字人"
+              name="digital_human_id"
+              required
             >
               <div
-                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden"
+                :class="{ 'shadow-inner': !!selected_digital_human }"
+                class="flex cursor-pointer select-none items-center gap-2 rounded-md bg-neutral-100 p-2 transition-all dark:bg-neutral-800"
+                @click="isDigitalSelectorOpen = true"
               >
-                <UIcon
-                  v-if="!selected_digital_human"
-                  class="text-2xl opacity-50"
-                  name="i-tabler-user-screen"
-                />
-                <NuxtImg
-                  v-else
-                  :src="selected_digital_human?.avatar"
-                />
-              </div>
-              <div class="flex flex-col text-neutral-400 text-sm font-medium">
-                <span
-                  :class="!!selected_digital_human ? 'text-neutral-600' : ''"
+                <div
+                  class="flex aspect-square w-12 items-center justify-center overflow-hidden rounded-md border dark:border-neutral-700"
                 >
-                  {{ selected_digital_human?.name || '点击选择数字人' }}
-                </span>
-                <span
-                  v-if="selected_digital_human?.description"
-                  class="text-2xs"
-                >
-                  {{ selected_digital_human?.description }}
-                </span>
+                  <UIcon
+                    v-if="!selected_digital_human"
+                    class="text-2xl opacity-50"
+                    name="i-tabler-user-screen"
+                  />
+                  <NuxtImg
+                    v-else
+                    :src="selected_digital_human?.avatar"
+                  />
+                </div>
+                <div class="flex flex-col text-sm font-medium text-neutral-400">
+                  <span
+                    :class="!!selected_digital_human ? 'text-neutral-600' : ''"
+                  >
+                    {{ selected_digital_human?.name || '点击选择数字人' }}
+                  </span>
+                  <span
+                    v-if="selected_digital_human?.description"
+                    class="text-2xs"
+                  >
+                    {{ selected_digital_human?.description }}
+                  </span>
+                </div>
               </div>
-            </div>
-          </UFormGroup>
-        </div>
+            </UFormField>
+          </div>
 
-        <!-- <UFormGroup label="背景图片" name="bg_img" help="可以上传图片作为视频背景，留空则为绿幕背景">
+          <!-- <UFormField label="背景图片" name="bg_img" help="可以上传图片作为视频背景，留空则为绿幕背景">
           <UInput type="file" accept="image/jpg,image/png" placeholder="选择背景图片" @change="selected_bg_img = $event?.[0] || undefined"/>
-        </UFormGroup> -->
+        </UFormField> -->
 
-        <UFormGroup
-          label="驱动内容"
-          name="content"
-          required
-        >
-          <UTextarea
-            v-model="createCourseState.content"
-            :rows="6"
-            autoresize
-            placeholder="请输入驱动文本内容"
-          />
-        </UFormGroup>
+          <UFormField
+            label="驱动内容"
+            name="content"
+            required
+          >
+            <UTextarea
+              v-model="createCourseState.content"
+              :rows="6"
+              autoresize
+              placeholder="请输入驱动文本内容"
+            />
+          </UFormField>
 
-        <UFormGroup
-          label="启用背景合成"
-          name="bg_img"
-          help="开启后生成透明通道，可在视频生成完毕后选择自定义背景合成；关闭则使用绿幕背景。"
-        >
-          <UToggle v-model="enableBackgroundCompositing" />
-        </UFormGroup>
+          <UFormField
+            label="启用背景合成"
+            name="bg_img"
+            help="开启后生成透明通道，可在视频生成完毕后选择自定义背景合成；关闭则使用绿幕背景。"
+          >
+            <USwitch v-model="enableBackgroundCompositing" />
+          </UFormField>
 
-        <UAccordion
-          :items="[{ label: '高级选项' }]"
-          color="gray"
-          size="lg"
-        >
-          <template #item>
-            <div
-              class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6"
-            >
-              <UFormGroup
-                :label="`视频倍速：${createCourseState.speed}`"
-                name="speed"
-              >
-                <URange
-                  v-model="createCourseState.speed"
-                  :max="1.5"
-                  :min="0.5"
-                  :step="0.1"
-                  class="pt-4"
-                  size="sm"
-                />
-              </UFormGroup>
-            </div>
-          </template>
-        </UAccordion>
-      </UForm>
-
-      <template #footer>
-        <div class="flex justify-end space-x-4">
-          <UButton
+          <UAccordion
+            :items="[{ label: '高级选项' }]"
             color="gray"
-            label="取消"
             size="lg"
-            variant="ghost"
-            @click="slide.close()"
-          />
-          <UButton
-            :loading="creationPending"
-            color="primary"
-            label="提交"
-            size="lg"
-            variant="solid"
-            @click="creationForm?.submit()"
-          />
-        </div>
-      </template>
-    </UCard>
-    <ModalDigitalHumanSelect
-      :is-open="isDigitalSelectorOpen"
-      @close="isDigitalSelectorOpen = false"
-      @select="
-        (digitalHumans) => {
-          selected_digital_human = digitalHumans as DigitalHumanItem
-        }
-      "
-    />
+          >
+            <template #content>
+              <div
+                class="space-y-4 rounded-lg border p-4 pb-6 dark:border-neutral-700"
+              >
+                <UFormField
+                  :label="`视频倍速：${createCourseState.speed}`"
+                  name="speed"
+                >
+                  <USlider
+                    v-model="createCourseState.speed"
+                    :max="1.5"
+                    :min="0.5"
+                    :step="0.1"
+                    class="pt-4"
+                    size="sm"
+                  />
+                </UFormField>
+              </div>
+            </template>
+          </UAccordion>
+        </UForm>
+
+        <template #footer>
+          <div class="flex justify-end space-x-4">
+            <UButton
+              color="neutral"
+              label="取消"
+              size="lg"
+              variant="ghost"
+              @click="emit('close')"
+            />
+            <UButton
+              :loading="creationPending"
+              color="primary"
+              label="提交"
+              size="lg"
+              variant="solid"
+              @click="creationForm?.submit()"
+            />
+          </div>
+        </template>
+      </UCard>
+      <ModalDigitalHumanSelect
+        :is-open="isDigitalSelectorOpen"
+        @close="isDigitalSelectorOpen = false"
+        @select="
+          (digitalHumans) => {
+            selected_digital_human = digitalHumans as DigitalHumanItem
+          }
+        "
+      />
+    </template>
   </USlideover>
 </template>
 
diff --git a/app/components/aigc/RatioSelector.vue b/app/components/aigc/RatioSelector.vue
index 0fd2b5b..ff079a9 100644
--- a/app/components/aigc/RatioSelector.vue
+++ b/app/components/aigc/RatioSelector.vue
@@ -68,7 +68,7 @@ const getShapeSize = (r: { w: number; h: number }, size: number) => {
       :class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']"
     >
       <div
-        class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded-sm flex justify-center items-center"
+        class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded-xs flex justify-center items-center"
         :class="[
           ratio.value === selected && 'bg-sky-300/50 dark:bg-sky-600/50',
         ]"
diff --git a/app/components/aigc/chat/ChatItem.vue b/app/components/aigc/chat/ChatItem.vue
deleted file mode 100644
index 9c3ba2f..0000000
--- a/app/components/aigc/chat/ChatItem.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type { ChatSession } from '~/typings/llm'
-
-const props = defineProps({
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  chatSession: {
-    type: Object as PropType<ChatSession>,
-    required: true,
-  },
-})
-const emit = defineEmits<{
-  (e: 'remove', session: ChatSession): void
-}>()
-
-const dayjs = useDayjs()
-</script>
-
-<template>
-  <div
-    class="chat-card group"
-    :class="{ active: active }"
-    :title="chatSession.subject"
-  >
-    <div class="chat-card-title">
-      <Icon
-        v-if="!!chatSession.assistant"
-        name="i-tabler-masks-theater"
-        class="text-lg mr-1"
-      />
-      <span class="flex-1 text-ellipsis overflow-x-hidden">
-        {{
-          !!chatSession.assistant
-            ? chatSession.assistant.tpl_name
-            : chatSession.subject
-        }}
-      </span>
-    </div>
-    <div class="chat-card-meta">
-      <div>{{ chatSession.messages.length }}条对话</div>
-      <div>
-        {{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
-      </div>
-    </div>
-    <div
-      @click.stop="emit('remove', chatSession)"
-      class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
-    >
-      <Icon name="i-tabler-trash" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.chat-card {
-  @apply flex flex-col gap-2 bg-white dark:bg-neutral-800 px-4 py-3 rounded-lg relative border-2 border-transparent shadow-card;
-  @apply transition-none duration-150 hover:bg-cyan-300/5;
-  @apply select-none;
-
-  &.active {
-    @apply border-cyan-500;
-  }
-
-  &-title {
-    @apply w-[calc(100%-16px)] inline-flex items-center text-sm font-medium text-ellipsis text-nowrap overflow-x-hidden;
-  }
-
-  &-meta {
-    @apply flex justify-between items-center text-xs text-neutral-400;
-  }
-
-  &-remove-btn {
-    @apply absolute top-0.5 right-0 md:opacity-0;
-    @apply transition duration-300 hover:text-red-400;
-    @apply cursor-pointer;
-  }
-}
-</style>
diff --git a/app/components/aigc/chat/Message.vue b/app/components/aigc/chat/Message.vue
deleted file mode 100644
index 07f086d..0000000
--- a/app/components/aigc/chat/Message.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type { ChatMessage } from '~/typings/llm'
-import MessageResponding from '~/components/Icon/MessageResponding.vue'
-
-const props = defineProps({
-  message: {
-    type: Object as PropType<ChatMessage>,
-    required: true,
-  },
-})
-
-const dayjs = useDayjs()
-
-const message_place_end = computed(() => props.message?.role !== 'assistant')
-const message_avatar = computed(() => {
-  switch (props.message?.role) {
-    case 'user':
-      return 'i-fluent-emoji-slightly-smiling-face'
-    case 'assistant':
-      return 'i-fluent-emoji-robot'
-    case 'system':
-      return 'i-fluent-emoji-receipt'
-  }
-})
-const message_background = computed(() => {
-  if (props.message?.interrupted) {
-    return 'bg-red-200/50 dark:bg-red-800/20 border-red-300 dark:border-red-500/50!'
-  }
-  switch (props.message?.role) {
-    case 'user':
-      return 'bg-primary-100 dark:bg-primary-800'
-    case 'assistant':
-    case 'system':
-      return 'bg-neutral-100 dark:bg-neutral-800'
-  }
-})
-</script>
-
-<template>
-  <div
-    class="chat"
-    :class="{ 'justify-end': message_place_end }"
-  >
-    <div
-      class="chat-inside"
-      :class="{ 'items-end': message_place_end }"
-    >
-      <div class="chat-inside-avatar">
-        <Icon
-          :name="message_avatar"
-          class="text-lg"
-        />
-      </div>
-      <div
-        class="flex flex-col"
-        :class="{ 'items-end': message_place_end }"
-      >
-        <Transition
-          mode="out-in"
-          name="message-content-change"
-        >
-          <div
-            class="chat-inside-content relative"
-            :class="message_background"
-            :key="message.content"
-          >
-            <div v-if="message.content">
-              <!-- TODO: 生成结果的代码添加复制按钮 -->
-              <Markdown :source="message.content" />
-            </div>
-            <span v-else>
-              <MessageResponding
-                class="text-xl text-neutral-500 dark:text-neutral-300 mx-2"
-              />
-            </span>
-          </div>
-        </Transition>
-        <div
-          v-if="message.preset"
-          class="chat-inside-extra"
-        >
-          预设消息
-        </div>
-        <div
-          v-else-if="message.create_at"
-          class="chat-inside-extra"
-        >
-          {{ dayjs(message.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.chat {
-  @apply w-full flex;
-
-  &-inside {
-    @apply w-fit flex flex-col gap-2;
-    @apply md:max-w-[80%];
-
-    &-avatar {
-      @apply w-8 h-8 flex justify-center items-center rounded-xl;
-      @apply bg-white border shadow-card;
-      @apply dark:bg-neutral-800 dark:border-neutral-700;
-    }
-
-    &-content {
-      @apply px-2 py-2.5 rounded-xl text-sm w-fit;
-      @apply border dark:border-neutral-700;
-    }
-
-    &-extra {
-      @apply px-1 text-xs text-neutral-300 dark:text-neutral-700;
-    }
-  }
-}
-
-.message-content-change-enter-active,
-.message-content-change-leave-active {
-  @apply transition-all duration-300 overflow-hidden;
-}
-
-.message-content-change-enter-from {
-  @apply opacity-0 translate-y-4;
-}
-</style>
diff --git a/app/components/aigc/chat/NewSessionScreen.vue b/app/components/aigc/chat/NewSessionScreen.vue
deleted file mode 100644
index 64cffc2..0000000
--- a/app/components/aigc/chat/NewSessionScreen.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<script setup lang="ts">
-import type { Assistant } from '~/typings/llm'
-import { useLazyAsyncData } from '#app'
-
-const loginState = useLoginState()
-
-const props = defineProps({
-  nonBack: {
-    type: Boolean,
-    default: false,
-  },
-})
-// noinspection JSUnusedLocalSymbols
-const emit = defineEmits({
-  select: (assistant: Assistant | null) => true,
-  cancel: () => true,
-})
-
-const { data: assistantTemplates, pending: assistantTemplatesPending } =
-  await useLazyAsyncData(
-    'App.Assistant_Template.GetList',
-    () =>
-      useFetchWrapped<
-        req.AssistantTemplateList & AuthedRequest,
-        BaseResponse<PagedData<Assistant>>
-      >('App.Assistant_Template.GetList', {
-        user_id: loginState.user.id,
-        token: loginState.token as string,
-        page: 1,
-        perpage: 20,
-      }),
-    {
-      server: false,
-    }
-  )
-</script>
-
-<template>
-  <div class="w-full h-full flex flex-col items-center gap-4 relative">
-    <Transition name="loading-screen">
-      <div
-        v-if="assistantTemplatesPending"
-        class="absolute inset-0 bg-white dark:bg-neutral-900 flex justify-center items-center z-1 text-primary"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="40"
-          height="40"
-          viewBox="0 0 24 24"
-        >
-          <defs>
-            <filter id="svgSpinnersGooeyBalls20">
-              <feGaussianBlur
-                in="SourceGraphic"
-                result="y"
-                stdDeviation="1"
-              />
-              <feColorMatrix
-                in="y"
-                result="z"
-                values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
-              />
-              <feBlend
-                in="SourceGraphic"
-                in2="z"
-              />
-            </filter>
-          </defs>
-          <g filter="url(#svgSpinnersGooeyBalls20)">
-            <circle
-              cx="5"
-              cy="12"
-              r="4"
-              fill="currentColor"
-            >
-              <animate
-                attributeName="cx"
-                calcMode="spline"
-                dur="2s"
-                keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                repeatCount="indefinite"
-                values="5;8;5"
-              />
-            </circle>
-            <circle
-              cx="19"
-              cy="12"
-              r="4"
-              fill="currentColor"
-            >
-              <animate
-                attributeName="cx"
-                calcMode="spline"
-                dur="2s"
-                keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                repeatCount="indefinite"
-                values="19;16;19"
-              />
-            </circle>
-            <animateTransform
-              attributeName="transform"
-              dur="0.75s"
-              repeatCount="indefinite"
-              type="rotate"
-              values="0 12 12;360 12 12"
-            />
-          </g>
-        </svg>
-      </div>
-    </Transition>
-    <div class="w-full p-2">
-      <UButton
-        v-if="!nonBack"
-        variant="ghost"
-        size="xs"
-        @click="emit('cancel')"
-      >
-        <template #leading>
-          <UIcon name="i-tabler-chevron-left" />
-        </template>
-        <span>返回</span>
-      </UButton>
-    </div>
-    <div class="flex flex-col items-center gap-8">
-      <h1 class="text-lg font-medium flex flex-col items-center gap-2">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="2em"
-          height="2em"
-          viewBox="0 0 24 24"
-        >
-          <g
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          >
-            <path
-              d="M13.192 9h6.616a2 2 0 0 1 1.992 2.183l-.567 6.182A4 4 0 0 1 17.25 21h-1.5a4 4 0 0 1-3.983-3.635l-.567-6.182A2 2 0 0 1 13.192 9M15 13h.01M18 13h.01"
-            />
-            <path
-              d="M15 16.5c1 .667 2 .667 3 0m-9.368-.518A4.037 4.037 0 0 1 8.25 16h-1.5a4 4 0 0 1-3.983-3.635L2.2 6.183A2 2 0 0 1 4.192 4h6.616a2 2 0 0 1 2 2M6 8h.01M9 8h.01"
-            />
-            <path d="M6 12c.764-.51 1.528-.63 2.291-.36" />
-          </g>
-        </svg>
-        <span>选择智能助手</span>
-      </h1>
-      <UButton
-        class="group ring-primary hover:ring-2 transition duration-300"
-        variant="soft"
-        size="lg"
-        :ui="{ rounded-sm: 'rounded-full' }"
-        @click="emit('select', null)"
-      >
-        <span class="-mt-0.5">直接开始</span>
-        <template #trailing>
-          <span
-            class="group-hover:translate-x-1 transition duration-300 ease-out relative w-3 h-full -mt-0.5"
-          >
-            <UIcon
-              name="i-tabler-arrow-right"
-              class="w-5 h-5 absolute top-auto bottom-auto right-0 opacity-0 group-hover:opacity-100 transition duration-300"
-            />
-            <UIcon
-              name="i-tabler-chevron-right"
-              class="w-5 h-5 absolute top-auto bottom-auto right-0 -mr-[3.5px] group-hover:opacity-0 transition duration-300"
-            />
-          </span>
-        </template>
-      </UButton>
-    </div>
-    <div
-      class="w-full md:w-3/4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 overflow-y-auto p-4 md:p-8"
-    >
-      <div
-        v-for="assistant in assistantTemplates?.data.items || []"
-        :key="assistant.id"
-        class="assistant-item select-none"
-        @click="emit('select', assistant)"
-      >
-        <div class="flex flex-col gap-1">
-          <div class="text-base font-medium">{{ assistant.tpl_name }}</div>
-          <div class="text-sm text-neutral-500 dark:text-neutral-400">
-            {{ assistant.des }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<!--suppress CssUnusedSymbol -->
-<style scoped>
-.loading-screen-leave-active {
-  @apply transition duration-300;
-}
-
-.loading-screen-leave-to {
-  @apply opacity-0;
-}
-
-.assistant-item {
-  @apply w-full bg-white dark:bg-neutral-800 rounded-lg shadow-xs ring-primary ring-offset-2 dark:ring-offset-0 hover:ring-2 transition;
-  @apply flex items-center gap-4 px-4 py-2 cursor-pointer border dark:border-neutral-700 hover:border-transparent;
-}
-</style>
diff --git a/app/components/aigc/drawing/OptionBlock.vue b/app/components/aigc/drawing/OptionBlock.vue
deleted file mode 100644
index 20d05a9..0000000
--- a/app/components/aigc/drawing/OptionBlock.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  comment: {
-    type: String,
-    default: '',
-  },
-})
-</script>
-
-<template>
-  <div
-    class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded-sm flex flex-col gap-1 shadow-sm"
-  >
-    <div class="flex items-center gap-1 text-sm">
-      <UIcon
-        v-if="icon"
-        :name="icon"
-        class="text-base inline-block"
-      />
-      <div
-        class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden"
-      >
-        <span>{{ label }}</span>
-        <UTooltip
-          v-if="comment"
-          :popper="{ arrow: true, placement: 'right' }"
-          :text="comment"
-        >
-          <UIcon
-            class="text-base"
-            name="i-tabler-help"
-          />
-        </UTooltip>
-      </div>
-      <slot name="actions" />
-    </div>
-    <div class="flex flex-col gap-2">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/app/components/aigc/drawing/ResultBlock.vue b/app/components/aigc/drawing/ResultBlock.vue
deleted file mode 100644
index d54d11e..0000000
--- a/app/components/aigc/drawing/ResultBlock.vue
+++ /dev/null
@@ -1,303 +0,0 @@
-<script setup lang="ts">
-import type { ResultBlockMeta } from '~/components/aigc/drawing/index'
-import type { PropType } from 'vue'
-import dayjs from 'dayjs'
-import { get } from 'idb-keyval'
-
-const props = defineProps({
-  icon: {
-    type: String,
-    default: 'i-tabler-photo-filled',
-  },
-  prompt: {
-    type: String,
-  },
-  fid: {
-    type: String,
-    required: true,
-  },
-  images: {
-    type: Array,
-  },
-  meta: {
-    type: Object as PropType<ResultBlockMeta>,
-  },
-})
-const emit = defineEmits(['use-reference'])
-
-const toast = useToast()
-
-const expand_prompt = ref(false)
-const show_meta = ref(true)
-
-const cachedImages = ref<string[]>([])
-const cachedImagesInterval = ref<NodeJS.Timeout | null>(null)
-
-onMounted(async () => {
-  cachedImagesInterval.value = setInterval(async () => {
-    const res = ((await get(props.fid)) as string[]) || []
-    if (res.length === cachedImages.value.length) return
-    cachedImages.value = res
-  }, 200)
-})
-
-onUnmounted(() => {
-  if (cachedImagesInterval.value) {
-    clearInterval(cachedImagesInterval.value)
-  }
-})
-
-const handle_download = (url: string) => {
-  const a = document.createElement('a')
-  a.href = url
-  a.download = `xsh_ai_drawing-${dayjs(props.meta?.datetime! * 1000).format('YYYY-MM-DD-HH-mm-ss')}.png`
-  a.click()
-}
-
-const handle_use_reference = async (blob_url: string) => {
-  fetch(blob_url)
-    .then((res) => res.blob())
-    .then((blob) => {
-      const file = new File(
-        [blob],
-        `xsh_drawing-${props.meta?.datetime! * 1000}.png`,
-        { type: 'image/png' }
-      )
-      emit('use-reference', file)
-    })
-    .catch(() => {
-      toast.add({
-        title: '转换失败',
-        description: '无法获取图片数据',
-        color: 'red',
-        icon: 'i-tabler-circle-x',
-      })
-    })
-}
-
-const copyToClipboard = (text: string) => {
-  navigator.clipboard
-    .writeText(text)
-    .then(() => {
-      toast.add({
-        title: '复制成功',
-        description: '已将内容复制到剪贴板',
-        color: 'primary',
-        icon: 'i-tabler-copy',
-      })
-    })
-    .catch(() => {
-      toast.add({
-        title: '复制失败',
-        description: '无法复制到剪贴板',
-        color: 'red',
-        icon: 'i-tabler-circle-x',
-      })
-    })
-}
-</script>
-
-<template>
-  <div class="w-full">
-    <div class="flex items-center gap-1">
-      <UIcon :name="icon" />
-      <h1 class="text-sm font-semibold">
-        {{ meta.type || 'AI 智能绘图' }}
-      </h1>
-      <UDivider
-        class="flex-1"
-        size="sm"
-      />
-      <UButton
-        color="black"
-        size="xs"
-        icon="i-tabler-info-circle"
-        :variant="show_meta ? 'solid' : 'ghost'"
-        :disabled="!meta"
-        @click="show_meta = !show_meta"
-      ></UButton>
-      <slot name="header-right" />
-    </div>
-    <div
-      v-if="prompt"
-      class="flex items-start gap-2 mt-1 mb-2"
-    >
-      <UIcon
-        name="i-tabler-article"
-        class="mt-0.5"
-      />
-      <p
-        class="text-sm flex-1 text-ellipsis cursor-pointer"
-        :class="{
-          'line-clamp-1': !expand_prompt,
-          'line-clamp-none': expand_prompt,
-        }"
-        @click="expand_prompt = !expand_prompt"
-      >
-        {{ prompt }}
-      </p>
-      <UButton
-        color="gray"
-        size="xs"
-        icon="i-tabler-copy"
-        variant="ghost"
-        class="-mt-1"
-        @click="copyToClipboard(prompt)"
-      ></UButton>
-    </div>
-    <div
-      v-if="cachedImages.length > 0"
-      class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x"
-    >
-      <div
-        class="h-full aspect-auto relative rounded-lg shadow-md overflow-hidden group"
-        v-for="(url, i) in cachedImages"
-        :key="`${fid}-${i}`"
-      >
-        <div
-          class="absolute inset-0 bg-linear-to-t from-neutral-800/40 to-transparent w-full h-full flex items-end scale-105 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition"
-        >
-          <div class="w-full flex justify-end gap-1 p-1">
-            <UTooltip text="以此图为参考创作">
-              <UButton
-                color="indigo"
-                variant="soft"
-                size="2xs"
-                icon="i-tabler-copy"
-                square
-                @click="handle_use_reference(url)"
-              ></UButton>
-            </UTooltip>
-            <UTooltip text="下载">
-              <UButton
-                color="indigo"
-                variant="soft"
-                size="2xs"
-                icon="i-tabler-download"
-                square
-                @click="handle_download(url)"
-              ></UButton>
-            </UTooltip>
-          </div>
-        </div>
-        <img
-          class="result-image"
-          :src="useBlobUrlFromB64(url)"
-          alt="AI Generated"
-        />
-      </div>
-    </div>
-    <div
-      v-else
-      class="h-64 aspect-3/4 mb-4 rounded-lg placeholder-gradient flex justify-center items-center"
-    >
-      <UIcon
-        name="i-svg-spinners-tadpole"
-        class="text-3xl"
-      />
-    </div>
-    <Transition
-      v-if="meta"
-      name="meta"
-    >
-      <div
-        v-if="show_meta"
-        class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2"
-      >
-        <UBadge
-          v-if="meta.modal"
-          color="black"
-          variant="solid"
-          class="text-[10px] font-bold gap-0.5"
-        >
-          <UIcon
-            class="text-sm"
-            name="i-tabler-box-seam"
-          />
-          {{ meta.modal }}
-        </UBadge>
-        <UBadge
-          v-if="meta.style"
-          color="green"
-          variant="subtle"
-          class="text-[10px] font-bold gap-0.5"
-        >
-          <UIcon
-            class="text-sm"
-            name="i-tabler-christmas-tree"
-          />
-          {{ meta.style }}
-        </UBadge>
-        <UBadge
-          v-if="meta.cost"
-          color="amber"
-          variant="subtle"
-          class="text-[10px] font-bold gap-0.5"
-        >
-          <UIcon
-            class="text-sm"
-            name="i-solar-fire-bold"
-          />
-          {{ meta.cost }}
-        </UBadge>
-        <UBadge
-          v-if="meta.ratio"
-          color="indigo"
-          variant="subtle"
-          class="text-[10px] font-bold gap-0.5"
-        >
-          <UIcon
-            class="text-sm"
-            name="i-tabler-aspect-ratio"
-          />
-          {{ meta.ratio }}
-        </UBadge>
-        <UBadge
-          v-if="meta.id"
-          color="indigo"
-          variant="subtle"
-          class="text-[10px] font-bold gap-0.5"
-        >
-          <UIcon
-            class="text-sm"
-            name="i-tabler-number"
-          />
-          {{ meta.id }}
-        </UBadge>
-        <UBadge
-          v-if="meta.datetime"
-          color="indigo"
-          variant="subtle"
-          class="text-[10px] font-bold gap-0.5"
-        >
-          <UIcon
-            class="text-sm"
-            name="i-tabler-calendar-month"
-          />
-          {{ dayjs(meta.datetime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
-        </UBadge>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.meta-enter-active,
-.meta-leave-active {
-  @apply transition duration-300;
-}
-
-.meta-enter-from,
-.meta-leave-to {
-  @apply opacity-0 -translate-y-2;
-}
-
-.result-image {
-  @apply snap-start;
-  @apply w-full h-full object-cover;
-}
-
-.placeholder-gradient {
-  @apply animate-pulse bg-linear-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800;
-}
-</style>
diff --git a/app/components/aigc/drawing/index.d.ts b/app/components/aigc/drawing/index.d.ts
deleted file mode 100644
index 206eda9..0000000
--- a/app/components/aigc/drawing/index.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export declare interface ResultBlockMeta {
-  modal?: string
-  cost?: string
-  ratio?: string
-  id?: string
-  style?: string
-  datetime?: number
-  type?: string
-}
diff --git a/app/components/aigc/generation/CGTaskCard.client.vue b/app/components/aigc/generation/CGTaskCard.client.vue
index a651704..130469c 100644
--- a/app/components/aigc/generation/CGTaskCard.client.vue
+++ b/app/components/aigc/generation/CGTaskCard.client.vue
@@ -6,7 +6,6 @@ import gsap from 'gsap'
 
 const toast = useToast()
 const loginState = useLoginState()
-const { metaSymbol } = useShortcuts()
 
 const srtEditor = ref()
 
@@ -59,17 +58,17 @@ const isPreviewModalOpen = ref(false)
 const stateDisplay = computed(() => {
   if (props.course.progress === -1)
     return {
-      color: 'red',
+      color: 'error' as const,
       text: '失败',
     }
   if (props.course.progress === 100)
     return {
-      color: 'green',
+      color: 'success' as const,
       text: '完成',
     }
   return {
-    color: 'blue',
-    text: !!props.course.progress
+    color: 'info' as const,
+    text: props.course.progress
       ? `${tweenedGenerateProgress.value.toFixed(0)}%`
       : '队列中',
   }
@@ -108,7 +107,7 @@ const startDownload = async (url: string, filename: string) => {
     toast.add({
       title: '下载完成',
       description: '资源下载已完成',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   })
@@ -122,7 +121,7 @@ const startDownload = async (url: string, filename: string) => {
     toast.add({
       title: '下载失败',
       description: err.message || '下载失败，未知错误',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   })
@@ -137,7 +136,7 @@ const copyTaskId = (extraMessage?: string) => {
   toast.add({
     title: '复制成功',
     description: '已复制任务 ID',
-    color: 'green',
+    color: 'success',
     icon: 'i-tabler-check',
   })
 }
@@ -155,7 +154,7 @@ const onCombination = async () => {
     toast.add({
       title: '获取字幕失败',
       description: '无法获取字幕文件，请稍后重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -174,7 +173,7 @@ const onCombination = async () => {
       toast.add({
         title: '嵌入字幕失败',
         description: err.message || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
       combinationState.value = 0
@@ -208,7 +207,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
         toast.add({
           title: '重试已提交',
           description: '已加入生成队列',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
         // delete
@@ -217,7 +216,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
         toast.add({
           title: '提交重试失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -226,7 +225,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
       toast.add({
         title: '提交重试失败',
         description: err.message || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     }
@@ -236,11 +235,11 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
 
 <template>
   <div
-    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow-sm transition overflow-hidden"
+    class="hover:shadow-xs w-full overflow-hidden rounded-xl border border-neutral-200 transition dark:border-neutral-700"
   >
-    <div class="relative w-full aspect-video group">
+    <div class="group relative aspect-video w-full">
       <NuxtImg
-        class="w-full aspect-video object-cover pointer-events-none absolute inset-0"
+        class="pointer-events-none absolute inset-0 aspect-video w-full object-cover"
         v-if="!!course.video_cover"
         :src="course.video_cover"
         alt="image"
@@ -248,33 +247,33 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
       />
       <div
         v-else
-        class="absolute inset-0 bg-linear-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern"
+        class="bg-linear-to-br to-primary-400 pattern absolute inset-0 flex items-center justify-center from-purple-400"
       >
         <Icon
           v-if="isFailed"
-          class="text-white text-[64px] opacity-50"
+          class="text-[64px] text-white opacity-50"
           name="i-tabler-alert-triangle"
         />
         <Icon
           v-else
-          class="text-white text-[64px] animate-pulse"
+          class="animate-pulse text-[64px] text-white"
           name="i-tabler-photo-video"
         />
       </div>
-      <div class="absolute inset-2 flex justify-end items-start">
+      <div class="absolute inset-2 flex items-start justify-end">
         <UTooltip
           :prevent="course.progress > -1"
           :text="course.message || ''"
         >
           <UBadge
             :color="stateDisplay.color"
-            :variant="isFailed ? 'solid' : 'subtle'"
-            class="shadow-sm"
+            variant="solid"
+            class="shadow-xs"
             size="sm"
           >
             <Icon
               v-if="isFailed"
-              class="text-base mr-0.5"
+              class="mr-0.5 text-base"
               name="i-tabler-alert-triangle"
             />
             {{ stateDisplay.text }}
@@ -283,24 +282,24 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
       </div>
       <div
         v-if="isDownloadable"
-        class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center opacity-0 group-hover:opacity-100 duration-300"
+        class="absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 backdrop-blur-md duration-300 group-hover:opacity-100"
       >
         <div
-          class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer"
+          class="flex aspect-square w-14 cursor-pointer items-center justify-center rounded-full bg-gray-300/50 backdrop-blur-md"
           @click="isPreviewModalOpen = true"
         >
           <Icon
             name="i-tabler-play"
-            class="text-white text-3xl"
+            class="text-3xl text-white"
           />
         </div>
       </div>
     </div>
-    <div class="px-2 pt-1 pb-2 flex justify-between">
+    <div class="flex justify-between px-2 pb-2 pt-1">
       <div class="flex-1 overflow-hidden pt-1">
         <h1
           :title="course.title"
-          class="inline-flex items-center text-sm font-medium overflow-hidden text-ellipsis text-nowrap"
+          class="inline-flex items-center overflow-hidden text-ellipsis text-nowrap text-sm font-medium"
         >
           <Icon
             class="text-base"
@@ -308,7 +307,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
           />
           <span class="pl-0.5">{{ course.title }}</span>
         </h1>
-        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
+        <p class="space-x-2 pt-0.5 text-xs text-neutral-400">
           <span>
             {{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
           </span>
@@ -327,32 +326,15 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
           </button>
         </p>
       </div>
-      <div class="flex items-center gap-1">
+      <div class="flex items-end gap-1">
         <UButtonGroup>
-          <!-- <UButton
-            v-if="isFailed"
-            color="white"
-            :disabled="!isFailed"
-            label="重试"
-            leading-icon="i-tabler-refresh"
-            size="xs"
-            @click="onRetryClick(course)"
-          />
           <UButton
-            v-else
-            color="white"
-            :disabled="!isDownloadable"
-            label="下载"
-            leading-icon="i-tabler-download"
-            size="xs"
-            @click="onCombination"
-          /> -->
-          <UButton
-            color="white"
+            color="neutral"
+            variant="outline"
             :disabled="!isFailed && !isDownloadable"
             :label="isFailed ? '重试' : isDownloadable ? '下载' : '生成中'"
             :leading-icon="isFailed ? 'i-tabler-refresh' : 'i-tabler-download'"
-            size="xs"
+            size="sm"
             @click="
               () => {
                 if (isFailed) {
@@ -364,15 +346,18 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
             "
           />
           <!-- retry -->
-          <UDropdown
+          <UDropdownMenu
             v-model:open="isDropdownOpen"
+            :content="{
+              align: 'end',
+            }"
             :items="[
               [
                 {
                   label: '下载原视频',
                   icon: 'i-tabler-file-plus',
                   disabled: !isDownloadable,
-                  click: () =>
+                  onClick: () =>
                     startDownload(
                       course.video_url,
                       `眩生花微课_${props.course.title}_${props.course.task_id}.mp4`
@@ -383,14 +368,14 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
                   icon: 'i-tabler-play',
                   shortcuts: ['P'],
                   disabled: !isDownloadable,
-                  click: () => (isPreviewModalOpen = true),
+                  onClick: () => (isPreviewModalOpen = true),
                 },
                 {
                   label: '编辑字幕',
                   icon: 'i-solar-subtitles-linear',
-                  shortcuts: [metaSymbol, 'D'],
+                  shortcuts: ['meta', 'D'],
                   disabled: !isDownloadable,
-                  click: () => {
+                  onClick: () => {
                     srtEditor.open()
                     isDropdownOpen = false
                   },
@@ -398,9 +383,9 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
                 {
                   label: '下载字幕',
                   icon: 'i-tabler-file-download',
-                  shortcuts: [metaSymbol, 'S'],
+                  shortcuts: ['meta', 'S'],
                   disabled: !isDownloadable,
-                  click: async () => {
+                  onClick: async () => {
                     await startDownload(
                       await fetchCourseSubtitleUrl(course),
                       `眩生花微课_${props.course.title}_${props.course.task_id}.srt`
@@ -413,110 +398,104 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
                   label: '删除记录',
                   icon: 'i-tabler-trash-x',
                   shortcuts: ['Delete'],
-                  click: () => emit('delete', course.task_id),
+                  onClick: () => emit('delete', course.task_id),
                 },
               ],
             ]"
-            :popper="{ placement: 'bottom-end' }"
           >
             <UButton
               :disabled="course.progress > 1 && course.progress < 100"
-              color="white"
-              size="xs"
+              color="neutral"
+              variant="outline"
+              size="sm"
               trailing-icon="i-tabler-dots"
             />
-          </UDropdown>
+          </UDropdownMenu>
         </UButtonGroup>
       </div>
     </div>
-    <UModal
-      v-model="isPreviewModalOpen"
-      :ui="{ width: 'w-full sm:max-w-4xl' }"
-    >
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <div
-              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
-            >
-              <p>微课视频预览</p>
-              <p
-                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
-              >
-                {{ course.title }}
-              </p>
-            </div>
-            <UButton
-              class="-my-1"
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isPreviewModalOpen = false"
-            />
-          </div>
-        </template>
 
-        <video
-          class="w-full rounded-sm shadow-sm"
-          controls
-          autoplay
-          :src="course.video_url"
-        />
-      </UCard>
+    <UModal v-model:open="isPreviewModalOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div
+                class="overflow-hidden text-base font-semibold leading-6 text-gray-900 dark:text-white"
+              >
+                <p>微课视频预览</p>
+                <p
+                  class="w-full overflow-hidden text-ellipsis text-nowrap text-xs text-blue-500"
+                >
+                  {{ course.title }}
+                </p>
+              </div>
+              <UButton
+                class="-my-1"
+                color="neutral"
+                icon="i-tabler-x"
+                variant="ghost"
+                @click="isPreviewModalOpen = false"
+              />
+            </div>
+          </template>
+
+          <video
+            class="rounded-xs shadow-xs w-full"
+            controls
+            autoplay
+            :src="course.video_url"
+          />
+        </UCard>
+      </template>
     </UModal>
-    <UModal v-model="isCombinationModalOpen">
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <div
-              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
-            >
-              <p>嵌入视频字幕</p>
-              <p
-                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+
+    <UModal v-model:open="isCombinationModalOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div
+                class="overflow-hidden text-base font-semibold leading-6 text-gray-900 dark:text-white"
               >
-                {{ course.title }}
-              </p>
+                <p>嵌入视频字幕</p>
+                <p
+                  class="w-full overflow-hidden text-ellipsis text-nowrap text-xs text-blue-500"
+                >
+                  {{ course.title }}
+                </p>
+              </div>
+              <UButton
+                class="-my-1"
+                color="neutral"
+                icon="i-tabler-x"
+                variant="ghost"
+                @click="isCombinationModalOpen = false"
+              />
             </div>
-            <UButton
-              class="-my-1"
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isCombinationModalOpen = false"
-            />
-          </div>
-        </template>
-        <UProgress
-          animation="carousel"
-          :value="combinationState"
-          :max="['嵌入字幕中', '合并完成，开始下载']"
-        >
-          <template #step-0="{ step }">
-            <span class="inline-flex items-center gap-1 text-emerald-500">
-              <UIcon name="tabler:text-caption" />
-              {{ step }}
-            </span>
           </template>
 
-          <template #step-1="{ step }">
-            <span class="inline-flex items-center gap-1 text-primary-500">
-              <UIcon name="tabler:paperclip" />
-              {{ step }}
-            </span>
-          </template>
-        </UProgress>
-      </UCard>
+          <UProgress
+            animation="carousel"
+            :value="combinationState"
+            :max="['嵌入字幕中', '合并完成，开始下载']"
+          >
+            <template #step-0="{ step }">
+              <span class="inline-flex items-center gap-1 text-emerald-500">
+                <UIcon name="tabler:text-caption" />
+                {{ step }}
+              </span>
+            </template>
+
+            <template #step-1="{ step }">
+              <span class="text-primary-500 inline-flex items-center gap-1">
+                <UIcon name="tabler:paperclip" />
+                {{ step }}
+              </span>
+            </template>
+          </UProgress>
+        </UCard>
+      </template>
     </UModal>
     <AigcGenerationSRTEditor
       ref="srtEditor"
diff --git a/app/components/aigc/generation/GBTaskCard.vue b/app/components/aigc/generation/GBTaskCard.vue
index 9aa540f..dd59639 100644
--- a/app/components/aigc/generation/GBTaskCard.vue
+++ b/app/components/aigc/generation/GBTaskCard.vue
@@ -61,7 +61,7 @@ const handleBackgroundFileSelect = (event: Event) => {
     toast.add({
       title: '文件类型错误',
       description: '请选择一个图片文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -82,7 +82,7 @@ const composeBackgroundVideo = async () => {
     toast.add({
       title: '未选择图片',
       description: '请先选择一个背景图片',
-      color: 'orange',
+      color: 'warning',
       icon: 'i-tabler-alert-circle',
     })
     return
@@ -110,7 +110,7 @@ const composeBackgroundVideo = async () => {
     toast.add({
       title: '合成成功',
       description: '背景已成功合成，可预览或下载',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch (err: any) {
@@ -118,7 +118,7 @@ const composeBackgroundVideo = async () => {
     toast.add({
       title: '合成失败',
       description: combinatorError.value,
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -172,7 +172,7 @@ const startDownload = (url: string, filename: string) => {
     toast.add({
       title: '下载完成',
       description: '资源下载已完成',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   })
@@ -186,7 +186,7 @@ const startDownload = (url: string, filename: string) => {
     toast.add({
       title: '下载失败',
       description: err.message || '下载失败，未知错误',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   })
@@ -197,14 +197,14 @@ const startDownload = (url: string, filename: string) => {
 
 <template>
   <div
-    class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow-sm transition overflow-hidden p-3"
+    class="hover:shadow-xs flex w-full gap-2 overflow-hidden rounded-xl border border-neutral-200 p-3 transition dark:border-neutral-700"
   >
     <div
-      class="flex-0 h-48 aspect-10/16 flex flex-col items-center justify-center rounded-lg shadow-sm overflow-hidden relative group"
+      class="aspect-10/16 shadow-xs group relative flex h-48 flex-col items-center justify-center overflow-hidden rounded-lg"
     >
       <div
         v-if="!video.video_cover"
-        class="w-full h-full flex flex-col justify-center items-center gap-2"
+        class="flex h-full w-full flex-col items-center justify-center gap-2"
         :class="!isFailed ? 'bg-primary' : 'bg-rose-400'"
       >
         <UIcon
@@ -232,36 +232,36 @@ const startDownload = (url: string, filename: string) => {
       <NuxtImg
         v-else
         :src="video.video_cover"
-        class="w-full h-full brightness-90 object-cover"
+        class="h-full w-full object-cover brightness-90"
       />
       <div
-        class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center rounded-lg opacity-0 group-hover:opacity-100 duration-300"
+        class="absolute inset-0 flex items-center justify-center rounded-lg bg-black/10 opacity-0 backdrop-blur-md duration-300 group-hover:opacity-100"
       >
         <div
-          class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer"
+          class="flex aspect-square w-14 cursor-pointer items-center justify-center rounded-full bg-gray-300/50 backdrop-blur-md"
           @click="isPreviewModalOpen = true"
         >
           <Icon
             name="i-tabler-play"
-            class="text-white text-3xl"
+            class="text-3xl text-white"
           />
         </div>
       </div>
     </div>
-    <div class="flex-1 flex flex-col justify-between gap-2">
+    <div class="flex flex-1 flex-col justify-between gap-2">
       <div
-        class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5"
+        class="flex-1 rounded-lg bg-neutral-100 p-2 px-2.5 dark:bg-neutral-800"
       >
         <ul class="grid grid-cols-2 gap-1.5">
           <li class="col-span-2">
             <!--            <h2 class="text-2xs font-medium text-primary-500">标题</h2>-->
-            <p class="text-sm font-bold line-clamp-1">
+            <p class="line-clamp-1 text-sm font-bold">
               {{ video.title || '无标题' }}
             </p>
           </li>
           <li class="">
-            <h2 class="text-2xs font-medium text-primary-500">完成时间</h2>
-            <p class="text-xs line-clamp-1">
+            <h2 class="text-primary-500 text-2xs font-medium">完成时间</h2>
+            <p class="line-clamp-1 text-xs">
               {{
                 video.complete_time
                   ? dayjs(video.complete_time * 1000).format(
@@ -272,8 +272,8 @@ const startDownload = (url: string, filename: string) => {
             </p>
           </li>
           <li class="">
-            <h2 class="text-2xs font-medium text-primary-500">生成耗时</h2>
-            <p class="text-xs line-clamp-1">
+            <h2 class="text-primary-500 text-2xs font-medium">生成耗时</h2>
+            <p class="line-clamp-1 text-xs">
               {{
                 video.duration
                   ? dayjs.duration(video.duration || 0).format('HH:mm:ss')
@@ -285,13 +285,13 @@ const startDownload = (url: string, filename: string) => {
             class="col-span-2 cursor-pointer"
             @click="isFullContentOpen = true"
           >
-            <h2 class="text-2xs font-medium text-primary-500">驱动文本</h2>
-            <p class="text-xs line-clamp-4 text-justify">{{ video.content }}</p>
+            <h2 class="text-primary-500 text-2xs font-medium">驱动文本</h2>
+            <p class="line-clamp-4 text-justify text-xs">{{ video.content }}</p>
           </li>
         </ul>
       </div>
       <div
-        class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap"
+        class="group flex flex-nowrap items-center justify-end whitespace-nowrap sm:justify-between"
       >
         <!--        <div-->
         <!--          class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">-->
@@ -299,7 +299,7 @@ const startDownload = (url: string, filename: string) => {
         <!--          <p class="text-xs">数字人 {{ video.digital_human_id }}</p>-->
         <!--        </div>-->
         <div
-          class="w-fit hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none"
+          class="hidden w-fit items-center gap-1 transition-all group-hover:pointer-events-none group-hover:opacity-0 sm:flex"
         >
           <p class="text-2xs text-neutral-400 dark:text-neutral-500">
             {{ video.digital_human_id }}
@@ -307,8 +307,8 @@ const startDownload = (url: string, filename: string) => {
         </div>
         <div class="space-x-2">
           <UButton
-            class="transition-all sm:opacity-0 sm:translate-x-4 sm:pointer-events-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto"
-            color="red"
+            class="transition-all group-hover:pointer-events-auto group-hover:translate-x-0 group-hover:opacity-100 sm:pointer-events-none sm:translate-x-4 sm:opacity-0"
+            color="error"
             icon="i-tabler-trash"
             size="xs"
             variant="soft"
@@ -335,7 +335,7 @@ const startDownload = (url: string, filename: string) => {
                 )
               "
             />
-            <UDropdown
+            <UDropdownMenu
               :items="[
                 [
                   {
@@ -373,133 +373,125 @@ const startDownload = (url: string, filename: string) => {
                 leading-icon="i-tabler-download"
                 variant="soft"
               />
-            </UDropdown>
+            </UDropdownMenu>
           </UButtonGroup>
         </div>
       </div>
     </div>
     <!-- Full video content -->
-    <UModal v-model="isFullContentOpen">
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3
-              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-            >
-              {{ video.title || '无标题' }}
-              <span class="block text-xs text-primary">驱动内容</span>
-            </h3>
-            <UButton
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isFullContentOpen = false"
-            />
-          </div>
-        </template>
-
-        <div>
-          <article class="prose">
-            <p class="text-justify">{{ video.content }}</p>
-          </article>
-        </div>
-
-        <template #footer>
-          <div class="flex justify-end gap-2">
-            <UButton
-              color="primary"
-              @click="isFullContentOpen = false"
-            >
-              关闭
-            </UButton>
-          </div>
-        </template>
-      </UCard>
-    </UModal>
-    <UModal v-model="isPreviewModalOpen">
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <div
-              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
-            >
-              <p>绿幕视频预览</p>
-              <p
-                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+    <UModal v-model:open="isFullContentOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3
+                class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
               >
-                {{ video.title }}
-              </p>
+                {{ video.title || '无标题' }}
+                <span class="text-primary block text-xs">驱动内容</span>
+              </h3>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                icon="i-tabler-x"
+                @click="isFullContentOpen = false"
+              />
             </div>
-            <UButton
-              class="-my-1"
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isPreviewModalOpen = false"
-            />
-          </div>
-        </template>
+          </template>
 
-        <video
-          class="w-full rounded-sm shadow-sm"
-          controls
-          autoplay
-          :src="video.video_url"
-        />
-      </UCard>
-    </UModal>
-    <UModal v-model="isVideoBackgroundPreviewOpen">
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <div
-              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
-            >
-              <p>视频背景合成</p>
-              <p
-                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+          <div>
+            <article class="prose">
+              <p class="text-justify">{{ video.content }}</p>
+            </article>
+          </div>
+
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="primary"
+                @click="isFullContentOpen = false"
               >
-                {{ video.title }}
-              </p>
+                关闭
+              </UButton>
             </div>
-            <UButton
-              class="-my-1"
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isVideoBackgroundPreviewOpen = false"
-            />
-          </div>
-        </template>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
 
-        <div class="space-y-4">
-          <!-- 背景图片选择区域 -->
-          <div
-            v-if="!compositedVideoBlob && !isCombinatorLoading"
-            class="border-2 border-dashed border-neutral-200 dark:border-neutral-700 rounded-lg p-4"
-          >
-            <div class="space-y-3">
-              <div class="text-sm font-medium text-gray-900 dark:text-white">
-                选择背景图片
+    <UModal v-model:open="isPreviewModalOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div
+                class="overflow-hidden text-base font-semibold leading-6 text-gray-900 dark:text-white"
+              >
+                <p>绿幕视频预览</p>
+                <p
+                  class="w-full overflow-hidden text-ellipsis text-nowrap text-xs text-blue-500"
+                >
+                  {{ video.title }}
+                </p>
               </div>
+              <UButton
+                class="-my-1"
+                color="neutral"
+                variant="ghost"
+                icon="i-tabler-x"
+                @click="isPreviewModalOpen = false"
+              />
+            </div>
+          </template>
 
-              <!-- 预览区域 -->
-              <!-- <div v-if="selectedBackgroundPreview" class="relative w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
+          <video
+            class="rounded-xs shadow-xs w-full"
+            controls
+            autoplay
+            :src="video.video_url"
+          />
+        </UCard>
+      </template>
+    </UModal>
+
+    <UModal v-model:open="isVideoBackgroundPreviewOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div
+                class="overflow-hidden text-base font-semibold leading-6 text-gray-900 dark:text-white"
+              >
+                <p>视频背景合成</p>
+                <p
+                  class="w-full overflow-hidden text-ellipsis text-nowrap text-xs text-blue-500"
+                >
+                  {{ video.title }}
+                </p>
+              </div>
+              <UButton
+                class="-my-1"
+                color="neutral"
+                variant="ghost"
+                icon="i-tabler-x"
+                @click="isVideoBackgroundPreviewOpen = false"
+              />
+            </div>
+          </template>
+
+          <div class="space-y-4">
+            <!-- 背景图片选择区域 -->
+            <div
+              v-if="!compositedVideoBlob && !isCombinatorLoading"
+              class="rounded-lg border-2 border-dashed border-neutral-200 p-4 dark:border-neutral-700"
+            >
+              <div class="space-y-3">
+                <div class="text-sm font-medium text-gray-900 dark:text-white">
+                  选择背景图片
+                </div>
+
+                <!-- 预览区域 -->
+                <!-- <div v-if="selectedBackgroundPreview" class="relative w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
                 <img :src="selectedBackgroundPreview" alt="背景预览" class="w-full h-full object-cover" />
               </div>
               <div v-else class="w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800 flex flex-col items-center justify-center gap-2">
@@ -507,119 +499,122 @@ const startDownload = (url: string, filename: string) => {
                 <span class="text-xs text-neutral-400">点击选择图片</span>
               </div> -->
 
-              <!-- 文件输入 -->
-              <input
-                ref="fileInputRef"
-                type="file"
-                accept="image/*"
-                class="hidden"
-                @change="handleBackgroundFileSelect"
-              />
+                <!-- 文件输入 -->
+                <input
+                  ref="fileInputRef"
+                  type="file"
+                  accept="image/*"
+                  class="hidden"
+                  @change="handleBackgroundFileSelect"
+                />
 
-              <!-- 选择按钮 -->
-              <UButton
-                block
-                color="primary"
-                icon="i-tabler-photo-plus"
-                label="选择图片"
-                variant="soft"
-                @click="fileInputRef?.click()"
-              />
+                <!-- 选择按钮 -->
+                <UButton
+                  block
+                  color="primary"
+                  icon="i-tabler-photo-plus"
+                  label="选择图片"
+                  variant="soft"
+                  @click="fileInputRef?.click()"
+                />
 
-              <!-- 选中的文件名 -->
-              <div
-                v-if="selectedBackgroundFile"
-                class="text-xs text-neutral-500 dark:text-neutral-400"
-              >
-                已选择: {{ selectedBackgroundFile.name }}
+                <!-- 选中的文件名 -->
+                <div
+                  v-if="selectedBackgroundFile"
+                  class="text-xs text-neutral-500 dark:text-neutral-400"
+                >
+                  已选择: {{ selectedBackgroundFile.name }}
+                </div>
               </div>
             </div>
-          </div>
 
-          <!-- 错误提示 -->
-          <UAlert
-            v-if="combinatorError"
-            color="red"
-            icon="i-tabler-alert-triangle"
-            title="合成失败"
-            :description="combinatorError"
-          />
+            <!-- 错误提示 -->
+            <UAlert
+              v-if="combinatorError"
+              color="error"
+              icon="i-tabler-alert-triangle"
+              title="合成失败"
+              :description="combinatorError"
+            />
 
-          <!-- 合成进度 -->
-          <div
-            v-if="isCombinatorLoading"
-            class="space-y-2"
-          >
-            <div class="flex justify-between items-center">
-              <span class="text-sm font-medium text-gray-900 dark:text-white">
-                {{ phaseText }}
-              </span>
-              <span class="text-xs text-neutral-500">
-                {{ compositingProgress }}%
-              </span>
+            <!-- 合成进度 -->
+            <div
+              v-if="isCombinatorLoading"
+              class="space-y-2"
+            >
+              <div class="flex items-center justify-between">
+                <span class="text-sm font-medium text-gray-900 dark:text-white">
+                  {{ phaseText }}
+                </span>
+                <span class="text-xs text-neutral-500">
+                  {{ compositingProgress }}%
+                </span>
+              </div>
+              <UProgress :value="compositingProgress" />
             </div>
-            <UProgress :value="compositingProgress" />
-          </div>
 
-          <!-- 合成预览 -->
-          <div
-            v-if="compositedVideoBlob"
-            class="space-y-2"
-          >
-            <div class="text-sm font-medium text-gray-900 dark:text-white">
-              视频预览
+            <!-- 合成预览 -->
+            <div
+              v-if="compositedVideoBlob"
+              class="space-y-2"
+            >
+              <div class="text-sm font-medium text-gray-900 dark:text-white">
+                视频预览
+              </div>
+              <video
+                class="shadow-xs w-full rounded-lg bg-black"
+                controls
+                autoplay
+                muted
+                :src="compositedVideoUrl"
+              />
             </div>
-            <video
-              class="w-full rounded-lg shadow-sm bg-black"
-              controls
-              autoplay
-              muted
-              :src="compositedVideoUrl"
-            />
           </div>
-        </div>
 
-        <template #footer>
-          <div class="flex justify-end gap-2">
-            <UButton
-              color="gray"
-              label="取消"
-              :disabled="isCombinatorLoading"
-              @click="isVideoBackgroundPreviewOpen = false"
-            />
-            <UButton
-              v-if="compositedVideoBlob"
-              color="gray"
-              label="重新选择"
-              @click="
-                () => {
-                  selectedBackgroundFile = null
-                  selectedBackgroundPreview = ''
-                  compositedVideoBlob = null
-                  combinatorError = ''
-                  isCombinatorLoading = false
-                }
-              "
-            />
-            <UButton
-              v-if="compositedVideoBlob"
-              color="green"
-              icon="i-tabler-download"
-              label="下载合成视频"
-              @click="downloadCompositedVideo"
-            />
-            <UButton
-              v-else
-              :disabled="!selectedBackgroundFile || isCombinatorLoading"
-              :loading="isCombinatorLoading"
-              color="primary"
-              icon="i-tabler-wand"
-              :label="isCombinatorLoading ? '合成中' : '开始合成'"
-              @click="composeBackgroundVideo"
-            />
-          </div>
-        </template>
-      </UCard>
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="neutral"
+                variant="outline"
+                label="取消"
+                :disabled="isCombinatorLoading"
+                @click="isVideoBackgroundPreviewOpen = false"
+              />
+              <UButton
+                v-if="compositedVideoBlob"
+                color="neutral"
+                variant="outline"
+                label="重新选择"
+                @click="
+                  () => {
+                    selectedBackgroundFile = null
+                    selectedBackgroundPreview = ''
+                    compositedVideoBlob = null
+                    combinatorError = ''
+                    isCombinatorLoading = false
+                  }
+                "
+              />
+              <UButton
+                v-if="compositedVideoBlob"
+                color="success"
+                icon="i-tabler-download"
+                label="下载合成视频"
+                @click="downloadCompositedVideo"
+              />
+              <UButton
+                v-else
+                :disabled="!selectedBackgroundFile || isCombinatorLoading"
+                :loading="isCombinatorLoading"
+                color="primary"
+                icon="i-tabler-wand"
+                :label="isCombinatorLoading ? '合成中' : '开始合成'"
+                @click="composeBackgroundVideo"
+              />
+            </div>
+          </template>
+        </UCard>
+      </template>
     </UModal>
   </div>
 </template>
diff --git a/app/components/aigc/generation/SRTEditor.vue b/app/components/aigc/generation/SRTEditor.vue
index 4265725..ac42281 100644
--- a/app/components/aigc/generation/SRTEditor.vue
+++ b/app/components/aigc/generation/SRTEditor.vue
@@ -41,7 +41,7 @@ type subtitleStyleSchema = InferType<typeof subtitleStyleSchema>
 
 const subtitleStyleState = reactive<subtitleStyleSchema>({
   color: '#fff',
-  effect: 'shadow-sm',
+  effect: 'shadow-xs',
   fontSize: 24,
   bottomOffset: 12,
 })
@@ -58,7 +58,7 @@ const loadSrt = async () => {
     toast.add({
       title: '加载字幕失败',
       description: `${err}` || '未知错误',
-      color: 'red',
+      color: 'error',
     })
   } finally {
     isLoading.value = false
@@ -79,8 +79,8 @@ const parseSrt = (srt: string) => {
         subtitles.value.push(subtitle)
       }
       subtitle = {
-        start: match[1],
-        end: match[2],
+        start: match[1] || '',
+        end: match[2] || '',
         text: '',
       }
     } else if (subtitle) {
@@ -105,23 +105,23 @@ const generateSrt = () => {
 
 const formatTime = (time: string) => {
   const parts = time.split(',')
-  const timeParts = parts[0].split(':')
+  const timeParts = parts[0]?.split(':') || []
   return {
-    hours: parseInt(timeParts[0]),
-    minutes: parseInt(timeParts[1]),
-    seconds: parseInt(timeParts[2]),
-    milliseconds: parseInt(parts[1]),
+    hours: parseInt(timeParts[0] || '0'),
+    minutes: parseInt(timeParts[1] || '0'),
+    seconds: parseInt(timeParts[2] || '0'),
+    milliseconds: parseInt(parts[1] || '0'),
   }
 }
 
 const formatTimeToDayjs = (time: string) => {
   const parts = time.split(',')
-  const timeParts = parts[0].split(':')
+  const timeParts = parts[0]?.split(':') || []
   return dayjs()
-    .hour(parseInt(timeParts[0]))
-    .minute(parseInt(timeParts[1]))
-    .second(parseInt(timeParts[2]))
-    .millisecond(parseInt(parts[1]))
+    .hour(parseInt(timeParts[0] || '0'))
+    .minute(parseInt(timeParts[1] || '0'))
+    .second(parseInt(timeParts[2] || '0'))
+    .millisecond(parseInt(parts[1] || '0'))
 }
 
 const syncSubtitles = () => {
@@ -183,7 +183,7 @@ const saveNewSubtitle = () => {
     .then((_) => {
       modified.value = false
       toast.add({
-        color: 'green',
+        color: 'success',
         title: '字幕已保存',
         description: '修改后的字幕文件已保存',
       })
@@ -202,7 +202,7 @@ const exportVideo = async () => {
     toast.add({
       title: '获取字幕失败',
       description: '无法获取字幕文件，请稍后重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -213,7 +213,7 @@ const exportVideo = async () => {
     color: subtitleStyleState.color,
     fontSize: subtitleStyleState.fontSize,
     textShadow:
-      subtitleStyleState.effect === 'shadow-sm'
+      subtitleStyleState.effect === 'shadow-xs'
         ? {
             offsetX: 2,
             offsetY: 2,
@@ -258,346 +258,349 @@ defineExpose({
 <template>
   <div>
     <USlideover
-      v-model="isDrawerActive"
-      :prevent-close="modified"
-      :ui="{ width: 'max-w-lg' }"
+      v-model:open="isDrawerActive"
+      :dismissible="!modified"
+      :ui="{
+        wrapper: 'max-w-lg',
+        body: 'flex flex-col flex-1 overflow-hidden',
+      }"
     >
-      <UCard
-        class="flex flex-col flex-1 overflow-hidden"
-        :ui="{
-          body: { base: 'overflow-auto flex-1' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <UButton
-            color="gray"
-            variant="ghost"
-            size="sm"
-            icon="tabler:x"
-            class="flex sm:hidden absolute end-5 top-5 z-10"
-            square
-            padded
-            @click="isDrawerActive = false"
-          />
-          <div class="flex flex-col">
-            <h3
-              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-            >
-              字幕编辑器
-            </h3>
-            <h3
-              class="text-xs font-semibold text-blue-500"
-              v-if="course.title"
-            >
-              {{ course.title }}
-            </h3>
-          </div>
-        </template>
-
-        <div
-          v-if="isLoading"
-          class="flex justify-center items-center text-primary"
+      <template #content>
+        <UCard
+          class="flex flex-1 flex-col overflow-hidden"
+          :ui="{
+            body: 'overflow-auto flex-1',
+          }"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 24 24"
-          >
-            <defs>
-              <filter id="svgSpinnersGooeyBalls20">
-                <feGaussianBlur
-                  in="SourceGraphic"
-                  result="y"
-                  stdDeviation="1"
-                />
-                <feColorMatrix
-                  in="y"
-                  result="z"
-                  values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
-                />
-                <feBlend
-                  in="SourceGraphic"
-                  in2="z"
-                />
-              </filter>
-            </defs>
-            <g filter="url(#svgSpinnersGooeyBalls20)">
-              <circle
-                cx="5"
-                cy="12"
-                r="4"
-                fill="currentColor"
-              >
-                <animate
-                  attributeName="cx"
-                  calcMode="spline"
-                  dur="2s"
-                  keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                  repeatCount="indefinite"
-                  values="5;8;5"
-                />
-              </circle>
-              <circle
-                cx="19"
-                cy="12"
-                r="4"
-                fill="currentColor"
-              >
-                <animate
-                  attributeName="cx"
-                  calcMode="spline"
-                  dur="2s"
-                  keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                  repeatCount="indefinite"
-                  values="19;16;19"
-                />
-              </circle>
-              <animateTransform
-                attributeName="transform"
-                dur="0.75s"
-                repeatCount="indefinite"
-                type="rotate"
-                values="0 12 12;360 12 12"
-              />
-            </g>
-          </svg>
-        </div>
-        <div
-          v-else
-          class="flex flex-col h-full gap-2 overflow-hidden overscroll-y-none overshadow"
-        >
-          <div class="relative w-full aspect-video flex-1">
-            <div
-              class="absolute w-fit mx-auto inset-x-0 font-sans font-bold subtitle"
-              :class="{
-                stroke: subtitleStyleState.effect === 'stroke',
-              }"
-              :style="{
-                lineHeight: '1',
-                color: subtitleStyleState.color,
-                fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
-                bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
-                textShadow:
-                  subtitleStyleState.effect === 'shadow-sm'
-                    ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
-                    : undefined,
-              }"
-            >
-              {{ subtitles.find((sub) => sub.active)?.text }}
-            </div>
-            <video
-              controls
-              ref="videoElement"
-              class="rounded-sm"
-              style="-webkit-user-drag: none"
-              :src="course.video_url"
-              @timeupdate="syncSubtitles"
+          <template #header>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              icon="tabler:x"
+              class="absolute end-5 top-5 z-10 flex sm:hidden"
+              square
+              padded
+              @click="isDrawerActive = false"
             />
-          </div>
-          <UAccordion
-            :items="[{ label: '字幕选项' }]"
-            color="gray"
-            size="lg"
-          >
-            <template #item>
-              <div
-                class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6"
+            <div class="flex flex-col">
+              <h3
+                class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
               >
-                <div class="w-full flex flex-col justify-center">
-                  <div
-                    class="rounded-md w-full aspect-video relative overflow-hidden"
-                  >
-                    <img
-                      class="object-cover w-full h-full rounded-md"
-                      src="https://static-xsh.oss-cn-chengdu.aliyuncs.com/file/2024-08-04/9ed1e5c0133824f0bcf79d1ad9e9ecbb.png"
-                    />
-                    <span
-                      class="absolute font-sans font-bold bottom-0 left-1/2 transform -translate-x-1/2 subtitle"
-                      :class="{
-                        stroke: subtitleStyleState.effect === 'stroke',
-                      }"
-                      :style="{
-                        lineHeight: '1',
-                        color: subtitleStyleState.color,
-                        fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
-                        bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
-                        textShadow:
-                          subtitleStyleState.effect === 'shadow-sm'
-                            ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
-                            : undefined,
-                      }"
+                字幕编辑器
+              </h3>
+              <h3
+                class="text-xs font-semibold text-blue-500"
+                v-if="course.title"
+              >
+                {{ course.title }}
+              </h3>
+            </div>
+          </template>
+
+          <div
+            v-if="isLoading"
+            class="text-primary flex items-center justify-center"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+            >
+              <defs>
+                <filter id="svgSpinnersGooeyBalls20">
+                  <feGaussianBlur
+                    in="SourceGraphic"
+                    result="y"
+                    stdDeviation="1"
+                  />
+                  <feColorMatrix
+                    in="y"
+                    result="z"
+                    values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
+                  />
+                  <feBlend
+                    in="SourceGraphic"
+                    in2="z"
+                  />
+                </filter>
+              </defs>
+              <g filter="url(#svgSpinnersGooeyBalls20)">
+                <circle
+                  cx="5"
+                  cy="12"
+                  r="4"
+                  fill="currentColor"
+                >
+                  <animate
+                    attributeName="cx"
+                    calcMode="spline"
+                    dur="2s"
+                    keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                    repeatCount="indefinite"
+                    values="5;8;5"
+                  />
+                </circle>
+                <circle
+                  cx="19"
+                  cy="12"
+                  r="4"
+                  fill="currentColor"
+                >
+                  <animate
+                    attributeName="cx"
+                    calcMode="spline"
+                    dur="2s"
+                    keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                    repeatCount="indefinite"
+                    values="19;16;19"
+                  />
+                </circle>
+                <animateTransform
+                  attributeName="transform"
+                  dur="0.75s"
+                  repeatCount="indefinite"
+                  type="rotate"
+                  values="0 12 12;360 12 12"
+                />
+              </g>
+            </svg>
+          </div>
+          <div
+            v-else
+            class="overshadow flex h-full flex-col gap-2 overflow-hidden overscroll-y-none"
+          >
+            <div class="relative aspect-video w-full flex-1">
+              <div
+                class="subtitle absolute inset-x-0 mx-auto w-fit font-sans font-bold"
+                :class="{
+                  stroke: subtitleStyleState.effect === 'stroke',
+                }"
+                :style="{
+                  lineHeight: '1',
+                  color: subtitleStyleState.color,
+                  fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
+                  bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
+                  textShadow:
+                    subtitleStyleState.effect === 'shadow-xs'
+                      ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
+                      : undefined,
+                }"
+              >
+                {{ subtitles.find((sub) => sub.active)?.text }}
+              </div>
+              <video
+                controls
+                ref="videoElement"
+                class="rounded-xs"
+                style="-webkit-user-drag: none"
+                :src="course.video_url"
+                @timeupdate="syncSubtitles"
+              />
+            </div>
+            <UAccordion
+              :items="[{ label: '字幕选项' }]"
+              color="gray"
+              size="lg"
+            >
+              <template #content>
+                <div
+                  class="space-y-4 rounded-lg border p-4 pb-6 dark:border-neutral-700"
+                >
+                  <div class="flex w-full flex-col justify-center">
+                    <div
+                      class="relative aspect-video w-full overflow-hidden rounded-md"
                     >
-                      字幕样式预览
+                      <img
+                        class="h-full w-full rounded-md object-cover"
+                        src="https://static-xsh.oss-cn-chengdu.aliyuncs.com/file/2024-08-04/9ed1e5c0133824f0bcf79d1ad9e9ecbb.png"
+                      />
+                      <span
+                        class="subtitle absolute bottom-0 left-1/2 -translate-x-1/2 transform font-sans font-bold"
+                        :class="{
+                          stroke: subtitleStyleState.effect === 'stroke',
+                        }"
+                        :style="{
+                          lineHeight: '1',
+                          color: subtitleStyleState.color,
+                          fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
+                          bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
+                          textShadow:
+                            subtitleStyleState.effect === 'shadow-xs'
+                              ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
+                              : undefined,
+                        }"
+                      >
+                        字幕样式预览
+                      </span>
+                    </div>
+                    <span class="text-2xs font-medium italic opacity-50 mt-1">
+                      字幕预览仅供参考，以实际渲染效果为准
                     </span>
                   </div>
-                  <span class="text-sm italic opacity-50">
-                    字幕预览仅供参考，以实际渲染效果为准
-                  </span>
+                  <UForm
+                    :schema="subtitleStyleSchema"
+                    :state="subtitleStyleState"
+                    class="flex flex-col gap-4"
+                  >
+                    <div class="flex gap-4">
+                      <UFormField
+                        label="字幕颜色"
+                        name="fontColor"
+                        class="w-full"
+                        size="xs"
+                      >
+                        <USelectMenu
+                          :items="[
+                            {
+                              label: '黑色',
+                              value: '#000',
+                            },
+                            {
+                              label: '白色',
+                              value: '#fff',
+                            },
+                          ]"
+                          value-key="value"
+                          v-model="subtitleStyleState.color"
+                        />
+                      </UFormField>
+                      <UFormField
+                        label="字幕效果"
+                        name="effect"
+                        class="w-full"
+                        size="xs"
+                      >
+                        <USelectMenu
+                          :items="[
+                            {
+                              label: '阴影',
+                              value: 'shadow-xs',
+                            },
+                            {
+                              label: '描边',
+                              value: 'stroke',
+                            },
+                          ]"
+                          value-key="value"
+                          v-model="subtitleStyleState.effect"
+                        />
+                      </UFormField>
+                    </div>
+                    <UFormField
+                      :label="`字幕大小 ${subtitleStyleState.fontSize}px`"
+                      name="fontSize"
+                      size="xs"
+                    >
+                      <USlider
+                        :max="64"
+                        :min="20"
+                        :step="2"
+                        size="sm"
+                        v-model="subtitleStyleState.fontSize"
+                      />
+                    </UFormField>
+                    <UFormField
+                      :label="`字幕偏移量 ${subtitleStyleState.bottomOffset}px`"
+                      name="offset"
+                      size="xs"
+                    >
+                      <USlider
+                        :max="30"
+                        :min="0"
+                        :step="1"
+                        size="sm"
+                        v-model="subtitleStyleState.bottomOffset"
+                      />
+                    </UFormField>
+                  </UForm>
                 </div>
-                <UForm
-                  :schema="subtitleStyleSchema"
-                  :state="subtitleStyleState"
-                  class="flex flex-col gap-4"
-                >
-                  <div class="flex gap-4">
-                    <UFormGroup
-                      label="字幕颜色"
-                      name="fontColor"
-                      class="w-full"
-                      size="xs"
-                    >
-                      <USelectMenu
-                        :options="[
-                          {
-                            label: '黑色',
-                            value: '#000',
-                          },
-                          {
-                            label: '白色',
-                            value: '#fff',
-                          },
-                        ]"
-                        option-attribute="label"
-                        value-attribute="value"
-                        v-model="subtitleStyleState.color"
-                      />
-                    </UFormGroup>
-                    <UFormGroup
-                      label="字幕效果"
-                      name="effect"
-                      class="w-full"
-                      size="xs"
-                    >
-                      <USelectMenu
-                        :options="[
-                          {
-                            label: '阴影',
-                            value: 'shadow-sm',
-                          },
-                          {
-                            label: '描边',
-                            value: 'stroke',
-                          },
-                        ]"
-                        option-attribute="label"
-                        value-attribute="value"
-                        v-model="subtitleStyleState.effect"
-                      />
-                    </UFormGroup>
-                  </div>
-                  <UFormGroup
-                    :label="`字幕大小 ${subtitleStyleState.fontSize}px`"
-                    name="fontSize"
-                    size="xs"
-                  >
-                    <URange
-                      :max="64"
-                      :min="20"
-                      :step="2"
-                      size="sm"
-                      v-model="subtitleStyleState.fontSize"
-                    />
-                  </UFormGroup>
-                  <UFormGroup
-                    :label="`字幕偏移量 ${subtitleStyleState.bottomOffset}px`"
-                    name="offset"
-                    size="xs"
-                  >
-                    <URange
-                      :max="30"
-                      :min="0"
-                      :step="1"
-                      size="sm"
-                      v-model="subtitleStyleState.bottomOffset"
-                    />
-                  </UFormGroup>
-                </UForm>
-              </div>
-            </template>
-          </UAccordion>
-          <ul
-            class="flex-1 px-0.5 pb-[100%] overflow-y-auto space-y-0.5 scroll-smooth relative"
-          >
-            <li
-              v-for="(subtitle, index) in subtitles"
-              :key="index"
-              :id="'subtitle-' + index"
+              </template>
+            </UAccordion>
+            <ul
+              class="relative flex-1 space-y-0.5 overflow-y-auto scroll-smooth px-0.5 pb-[100%]"
             >
-              <div :class="{ 'text-primary': subtitle.active }">
-                <span class="text-xs font-medium opacity-60">
-                  {{ formatTimeToDayjs(subtitle.start).format('HH:mm:ss') }}
-                  -
-                  {{ formatTimeToDayjs(subtitle.end).format('HH:mm:ss') }}
-                  <span class="opacity-50">
-                    [{{
-                      formatTimeToDayjs(subtitle.end).diff(
-                        formatTimeToDayjs(subtitle.start),
-                        'second'
-                      )
-                    }}s]
+              <li
+                v-for="(subtitle, index) in subtitles"
+                :key="index"
+                :id="'subtitle-' + index"
+              >
+                <div :class="{ 'text-primary': subtitle.active }">
+                  <span class="text-xs font-medium opacity-60">
+                    {{ formatTimeToDayjs(subtitle.start).format('HH:mm:ss') }}
+                    -
+                    {{ formatTimeToDayjs(subtitle.end).format('HH:mm:ss') }}
+                    <span class="opacity-50">
+                      [{{
+                        formatTimeToDayjs(subtitle.end).diff(
+                          formatTimeToDayjs(subtitle.start),
+                          'second'
+                        )
+                      }}s]
+                    </span>
                   </span>
-                </span>
-                <UInput
-                  v-model="subtitle.text"
-                  class="w-full"
-                  placeholder="请输入字幕内容"
-                  :name="'subtitle-' + index"
-                  :autofocus="false"
-                  :color="subtitle.active ? 'primary' : undefined"
-                  @click="onSubtitleInputClick(subtitle)"
-                  @input="
-                    () => {
-                      if (!modified) modified = true
-                    }
-                  "
-                >
-                  <template #trailing>
-                    <UIcon
-                      v-show="subtitle.active"
-                      name="tabler:keyframe-align-vertical-filled"
-                    />
-                  </template>
-                </UInput>
-              </div>
-            </li>
-          </ul>
-        </div>
-
-        <template #footer>
-          <div class="flex justify-end items-center gap-2">
-            <span
-              v-if="modified"
-              class="text-sm text-yellow-500 font-medium"
-            >
-              已更改但未保存
-            </span>
-            <UButton
-              :loading="isExporting"
-              variant="soft"
-              icon="i-tabler-file-export"
-              @click="exportVideo"
-            >
-              导出视频
-            </UButton>
-            <UButton
-              :disabled="isExporting || !modified"
-              :loading="isSaving"
-              icon="i-tabler-device-floppy"
-              @click="saveNewSubtitle"
-            >
-              保存{{ isSaving ? '中' : '' }}
-            </UButton>
+                  <UInput
+                    v-model="subtitle.text"
+                    class="w-full"
+                    placeholder="请输入字幕内容"
+                    :name="'subtitle-' + index"
+                    :autofocus="false"
+                    :color="subtitle.active ? 'primary' : undefined"
+                    @click="onSubtitleInputClick(subtitle)"
+                    @input="
+                      () => {
+                        if (!modified) modified = true
+                      }
+                    "
+                  >
+                    <template #trailing>
+                      <UIcon
+                        v-show="subtitle.active"
+                        name="tabler:keyframe-align-vertical-filled"
+                      />
+                    </template>
+                  </UInput>
+                </div>
+              </li>
+            </ul>
           </div>
-        </template>
-      </UCard>
+
+          <template #footer>
+            <div class="flex items-center justify-end gap-2">
+              <span
+                v-if="modified"
+                class="text-sm font-medium text-yellow-500"
+              >
+                已更改但未保存
+              </span>
+              <UButton
+                :loading="isExporting"
+                variant="soft"
+                icon="i-tabler-file-export"
+                @click="exportVideo"
+              >
+                导出视频
+              </UButton>
+              <UButton
+                :disabled="isExporting || !modified"
+                :loading="isSaving"
+                icon="i-tabler-device-floppy"
+                @click="saveNewSubtitle"
+              >
+                保存{{ isSaving ? '中' : '' }}
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
     </USlideover>
   </div>
 </template>
 
 <style scoped>
+@reference '@/assets/css/main.css';
+
 .overshadow {
   @apply relative;
 }
@@ -606,7 +609,7 @@ defineExpose({
   content: '';
   inset: 80% 0 0;
   position: absolute;
-  @apply bg-linear-to-b from-transparent to-white dark:to-neutral-950 pointer-events-none;
+  @apply bg-linear-to-b pointer-events-none from-transparent to-white dark:to-neutral-950;
 }
 
 .subtitle.stroke {
diff --git a/app/components/aigc/generation/TitlesTemplate.vue b/app/components/aigc/generation/TitlesTemplate.vue
index d188281..a489810 100644
--- a/app/components/aigc/generation/TitlesTemplate.vue
+++ b/app/components/aigc/generation/TitlesTemplate.vue
@@ -38,17 +38,17 @@ const closePreview = () => {
 
 <template>
   <div
-    class="relative w-full flex flex-col rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden shadow-none hover:shadow-sm transition-shadow"
+    class="hover:shadow-xs relative flex w-full flex-col overflow-hidden rounded-lg border border-neutral-200 shadow-none transition-shadow dark:border-neutral-700"
   >
-    <div class="relative w-full aspect-16/9 group">
+    <div class="aspect-16/9 group relative w-full">
       <NuxtImg
         placeholder
         placeholder-class="w-full aspect-16/9 object-cover bg-neutral-200 dark:bg-neutral-800"
-        class="object-cover relative"
+        class="relative object-cover"
         :src="data.opening_url"
       />
       <div
-        class="absolute inset-0 bg-black/10 backdrop-blur-md opacity-0 group-hover:opacity-100 duration-300 flex flex-col gap-2 justify-center items-center"
+        class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/10 opacity-0 backdrop-blur-md duration-300 group-hover:opacity-100"
       >
         <UButton
           icon="tabler:play"
@@ -66,10 +66,10 @@ const closePreview = () => {
         />
       </div>
     </div>
-    <div class="relative p-2 flex justify-between items-center gap-2">
+    <div class="relative flex items-center justify-between gap-2 p-2">
       <div class="flex-1">
         <h1
-          class="text-base font-medium line-clamp-1"
+          class="line-clamp-1 text-base font-medium"
           :title="data.title"
         >
           {{ data.title }}
@@ -85,7 +85,8 @@ const closePreview = () => {
         >
           <UButton
             label="使用模板"
-            color="white"
+            color="neutral"
+            variant="outline"
             @click="emit('user-titles-request', data)"
           />
           <!-- <UButton
@@ -97,11 +98,11 @@ const closePreview = () => {
           <UPopover v-if="loginState.user.auth_code === 2">
             <UButton
               icon="tabler:trash"
-              color="red"
+              color="error"
             />
 
             <template #panel="{ close }">
-              <div class="flex flex-col p-2 gap-2">
+              <div class="flex flex-col gap-2 p-2">
                 <p class="text-xs text-gray-500 dark:text-gray-400">
                   素材删除后不可恢复，确认删除？
                 </p>
@@ -109,7 +110,7 @@ const closePreview = () => {
                   class="w-fit"
                   icon="tabler:trash"
                   label="确认删除"
-                  color="red"
+                  color="error"
                   size="xs"
                   @click="emit('system-titles-delete', data)"
                 />
@@ -130,12 +131,12 @@ const closePreview = () => {
               icon="tabler:trash"
               label="删除素材"
               variant="soft"
-              color="red"
+              color="error"
               size="xs"
             />
 
             <template #panel="{ close }">
-              <div class="flex flex-col p-2 gap-2">
+              <div class="flex flex-col gap-2 p-2">
                 <p class="text-xs text-gray-500 dark:text-gray-400">
                   素材删除后不可恢复，确认删除？
                 </p>
@@ -143,7 +144,7 @@ const closePreview = () => {
                   class="w-fit"
                   icon="tabler:trash"
                   label="确认删除"
-                  color="red"
+                  color="error"
                   size="xs"
                   @click="emit('user-titles-delete', data)"
                 />
@@ -155,40 +156,37 @@ const closePreview = () => {
     </div>
 
     <UModal
-      v-model="isPreviewModalOpen"
-      :ui="{ width: 'w-full sm:max-w-4xl' }"
+      v-model:open="isPreviewModalOpen"
+      :ui="{ content: 'w-full sm:max-w-4xl' }"
     >
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <div
-              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
-            >
-              <p>视频预览</p>
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div
+                class="overflow-hidden text-base font-semibold leading-6 text-gray-900 dark:text-white"
+              >
+                <p>视频预览</p>
+              </div>
+              <UButton
+                class="-my-1"
+                color="neutral"
+                icon="i-tabler-x"
+                variant="ghost"
+                @click="isPreviewModalOpen = false"
+              />
             </div>
-            <UButton
-              class="-my-1"
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isPreviewModalOpen = false"
-            />
-          </div>
-        </template>
+          </template>
 
-        <video
-          v-if="previewVideoUrl"
-          class="w-full rounded-sm shadow-sm"
-          controls
-          autoplay
-          :src="previewVideoUrl"
-        ></video>
-      </UCard>
+          <video
+            v-if="previewVideoUrl"
+            class="rounded-xs shadow-xs w-full"
+            controls
+            autoplay
+            :src="previewVideoUrl"
+          ></video>
+        </UCard>
+      </template>
     </UModal>
   </div>
 </template>
diff --git a/app/components/aigc/nav/NavItem.vue b/app/components/aigc/nav/NavItem.vue
index 823b2da..0899c77 100644
--- a/app/components/aigc/nav/NavItem.vue
+++ b/app/components/aigc/nav/NavItem.vue
@@ -45,9 +45,9 @@ const activeClass = computed(() => {
     </div>
     <UBadge
       v-if="admin"
-      color="amber"
+      color="warning"
       label="OP"
-      size="xs"
+      size="sm"
       variant="subtle"
     />
   </NuxtLink>
diff --git a/app/components/uni/Input/index.vue b/app/components/uni/Input/index.vue
index 77c7f3b..8b6572e 100644
--- a/app/components/uni/Input/index.vue
+++ b/app/components/uni/Input/index.vue
@@ -98,7 +98,7 @@ const handleInput = (e: any) => {
     </p>
     <div class="relative">
       <input
-        class="relative w-full flex items-center gap-2.5 p-2 pr-2 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 outline-hidden placeholder-neutral-400 dark:placeholder-neutral-500 shadow-xs"
+        class="relative w-full flex items-center gap-2.5 p-2 pr-2 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-neutral-200/50 dark:focus:ring-neutral-800/50 outline-hidden placeholder-neutral-400 dark:placeholder-neutral-500 shadow-xs"
         :class="{
           'border-red-500!': isError,
           'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
diff --git a/app/components/uni/Select/index.vue b/app/components/uni/Select/index.vue
index aca437d..26a7c98 100644
--- a/app/components/uni/Select/index.vue
+++ b/app/components/uni/Select/index.vue
@@ -97,7 +97,7 @@ onMounted(() => {
       ref="selectWrapperRef"
     >
       <button
-        class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 shadow-xs"
+        class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-neutral-200/50 dark:focus:ring-neutral-800/50 shadow-xs"
         :class="{
           'cursor-not-allowed bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
             disabled,
diff --git a/app/components/uni/TextArea/index.vue b/app/components/uni/TextArea/index.vue
index f0486a2..99f8f88 100644
--- a/app/components/uni/TextArea/index.vue
+++ b/app/components/uni/TextArea/index.vue
@@ -116,7 +116,7 @@ onMounted(() => {
     </p>
     <div class="relative">
       <textarea
-        class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden overflow-y-auto border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 outline-hidden placeholder-neutral-400 dark:placeholder-neutral-500 shadow-xs"
+        class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden overflow-y-auto border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-neutral-200/50 dark:focus:ring-neutral-800/50 outline-hidden placeholder-neutral-400 dark:placeholder-neutral-500 shadow-xs"
         :rows="minRows || rows"
         ref="textAreaRef"
         :class="{
diff --git a/app/components/uni/Toggle/index.vue b/app/components/uni/Toggle/index.vue
index 3422d5d..6409a80 100644
--- a/app/components/uni/Toggle/index.vue
+++ b/app/components/uni/Toggle/index.vue
@@ -107,7 +107,7 @@ watch(
     @click="handleCheck"
   >
     <span
-      class="aspect-1/1 translate-x-0 transition ease-in-out bg-white dark:bg-black rounded-md shadow-sm duration-300 group-active:scale-90"
+      class="aspect-1/1 translate-x-0 transition ease-in-out bg-white dark:bg-black rounded-md shadow-xs duration-300 group-active:scale-90"
       :class="{
         'shadow-lg!': checked,
         'group-active:translate-x-3 group-active:duration-500': !checked,
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index bcf22f7..de00f38 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
 import ModalAuthentication from '~/components/ModalAuthentication.vue'
 
 const colorMode = useColorMode()
 const dayjs = useDayjs()
-const modal = useModal()
+const overlay = useOverlay()
 const toast = useToast()
 const router = useRouter()
 const loginState = useLoginState()
@@ -40,7 +41,9 @@ const links = [
   },
 ]
 
-const items = [
+const items: (DropdownMenuItem & {
+  icon?: string
+})[][] = [
   [
     {
       label: 'support@fenshenzhike.com',
@@ -64,7 +67,7 @@ const items = [
           toast.add({
             title: '退出登录',
             description: `您已成功退出登录账号`,
-            color: 'indigo',
+            color: 'success',
             icon: 'i-tabler-logout-2',
           })
           router.push({ path: '/user/authenticate' })
@@ -74,7 +77,8 @@ const items = [
 ]
 
 const open_login_modal = () => {
-  modal.open(ModalAuthentication)
+  const modal = overlay.create(ModalAuthentication)
+  modal.open()
 }
 
 onMounted(async () => {
@@ -97,22 +101,22 @@ onMounted(async () => {
       toast.add({
         title: '获取待审核用户失败',
         description: '获取未审核用户列表失败',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     } else if (unverifiedUsers.data.total > 0) {
       toast.add({
         title: '有新用户等待审核',
         description: `有 ${unverifiedUsers.data.total} 个新用户注册，请尽快审核`,
-        color: 'amber',
+        color: 'warning',
         icon: 'i-tabler-user-plus',
-        timeout: 0,
+        duration: 0,
         actions: [
           {
             label: '前往处理',
             variant: 'solid',
-            color: 'amber',
-            click: () => {
+            color: 'warning',
+            onClick: () => {
               router.push({
                 path: '/generation/admin/users',
                 query: {
@@ -123,7 +127,7 @@ onMounted(async () => {
           },
           // {
           //   label: '全部忽略',
-          //   click: () => {
+          //   onClick: () => {
           //     alert('ignored')
           //   },
           // },
@@ -144,7 +148,8 @@ onMounted(async () => {
         <!-- <span class="text-xs text-neutral-600 dark:text-neutral-300">眩生花科技</span> -->
       </h1>
       <!-- <div class="hidden md:block">
-        <UHorizontalNavigation
+        <NavigationMenu
+          orientation="horizontal"
           :links="links"
           class="select-none"
         />
@@ -157,7 +162,7 @@ onMounted(async () => {
                 ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition'
                 : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'
             "
-            color="gray"
+            color="neutral"
             variant="ghost"
             aria-label="Theme"
             @click="isDark = !isDark"
@@ -167,21 +172,24 @@ onMounted(async () => {
             label="登录或注册"
             size="xs"
             class="font-bold"
-            color="indigo"
+            color="primary"
             @click="open_login_modal"
           />
-          <UDropdown
+          <UDropdownMenu
             v-if="loginState.is_logged_in"
             :items="items"
-            :popper="{ placement: 'bottom-start' }"
-            :ui="{ item: { disabled: 'cursor-text select-text' } }"
+            :content="{
+              align: 'end',
+            }"
           >
             <UAvatar
               :alt="loginState.user.username.toUpperCase()"
               :src="loginState.user.avatar"
-              chip-color="amber"
-              chip-position="bottom-right"
-              chip-text="OP"
+              :chip="{
+                color: 'warning',
+                position: 'bottom-right',
+                text: 'OP',
+              }"
               size="md"
             />
             <template #account="{ item }">
@@ -190,7 +198,7 @@ onMounted(async () => {
                   已登录为
                   <UBadge
                     v-if="loginState.user.auth_code === 2"
-                    color="amber"
+                    color="warning"
                     size="xs"
                     variant="subtle"
                   >
@@ -207,11 +215,12 @@ onMounted(async () => {
             <template #item="{ item }">
               <span class="truncate">{{ item.label }}</span>
               <UIcon
+                v-if="item.icon"
                 :name="item.icon"
                 class="ms-auto size-4 shrink-0 text-gray-400 dark:text-gray-500"
               />
             </template>
-          </UDropdown>
+          </UDropdownMenu>
         </ClientOnly>
       </div>
     </header>
@@ -229,6 +238,8 @@ onMounted(async () => {
 </template>
 
 <style>
+@reference '@/assets/css/main.css';
+
 body {
   @apply bg-neutral-50 bg-fixed dark:bg-neutral-950;
   /* @apply bg-[url('~/assets/background-pattern.svg')] dark:bg-[url('~/assets/background-pattern-dark.svg')]; */
@@ -270,11 +281,13 @@ body {
 </style>
 
 <style scoped>
+@reference '@/assets/css/main.css';
+
 header {
-  @apply fixed inset-x-0 z-30 h-16 border-b bg-white;
-  @apply dark:border-neutral-800 dark:bg-neutral-900;
+  @apply fixed inset-x-0 z-30 h-16 border-b bg-white/50;
+  @apply dark:border-neutral-800 dark:bg-neutral-900/50;
   @apply flex flex-row items-center justify-between px-4;
-  @apply bg-opacity-50 backdrop-blur-3xl backdrop-saturate-150 dark:bg-opacity-50;
+  @apply backdrop-blur-3xl backdrop-saturate-150;
 }
 
 main {
diff --git a/app/pages/aigc/chat/index.vue b/app/pages/aigc/chat/index.vue
deleted file mode 100644
index 6838198..0000000
--- a/app/pages/aigc/chat/index.vue
+++ /dev/null
@@ -1,554 +0,0 @@
-<script lang="ts" setup>
-import ChatItem from '~/components/aigc/chat/ChatItem.vue'
-import Message from '~/components/aigc/chat/Message.vue'
-import {
-  type Assistant,
-  type ChatMessage,
-  type ChatMessageId,
-  type ChatSession,
-  type ChatSessionId,
-  llmModels,
-  type ModelTag,
-} from '~/typings/llm'
-import { useHistory } from '~/composables/useHistory'
-import { uuidv4 } from '@uniiem/uuid'
-import { useLLM } from '~/composables/useLLM'
-import { trimObject } from '@uniiem/object-trim'
-import ModalAuthentication from '~/components/ModalAuthentication.vue'
-import NewSessionScreen from '~/components/aigc/chat/NewSessionScreen.vue'
-
-useSeoMeta({
-  title: '聊天',
-})
-
-const dayjs = useDayjs()
-const toast = useToast()
-const modal = useModal()
-const loginState = useLoginState()
-const historyStore = useHistory()
-const { chatSessions } = storeToRefs(historyStore)
-const { setChatSessions } = historyStore
-
-const currentSessionId = ref<ChatSessionId | null>(null)
-const messagesWrapperRef = ref<HTMLDivElement | null>(null)
-
-const showSidebar = ref(false)
-const user_input = ref('')
-const responding = ref(false)
-const currentModel = ref<ModelTag>('spark3_5')
-const currentAssistant = computed<Assistant | null>(
-  () => getSessionCopyById(currentSessionId.value || '')?.assistant || null
-)
-const modals = reactive({
-  modelSelect: false,
-  assistantSelect: false,
-  newSessionScreen: false,
-})
-
-/**
- * 获取指定 ID 的会话数据
- * @param chatSessionId
- */
-const getSessionCopyById = (
-  chatSessionId: ChatSessionId
-): ChatSession | undefined =>
-  chatSessions.value.find((s) => s.id === chatSessionId)
-/**
- * 切换当前会话
- * @param chatSessionId 指定会话 ID，不传则切换到列表中第一个会话
- */
-const selectCurrentSessionId = (chatSessionId?: ChatSessionId) => {
-  if (chatSessions.value.length > 0) {
-    if (chatSessionId) {
-      // 切换到指定 ID
-      // 保存当前输入并清空输入框
-      setChatSessions(
-        chatSessions.value.map((s) =>
-          s.id === currentSessionId.value
-            ? {
-                ...s,
-                last_input: user_input.value,
-              }
-            : s
-        )
-      )
-      user_input.value = ''
-      // 切换到指定 ID 会话
-      currentSessionId.value = chatSessionId
-      // 恢复输入
-      user_input.value = getSessionCopyById(chatSessionId)?.last_input || ''
-      // 清除已恢复的输入
-      setChatSessions(
-        chatSessions.value.map((s) =>
-          s.id === chatSessionId
-            ? {
-                ...s,
-                last_input: '',
-              }
-            : s
-        )
-      )
-    } else {
-      // 切换到第一个会话
-      currentSessionId.value = chatSessions.value[0].id
-    }
-  } else {
-    handleClickCreateSession()
-  }
-  nextTick(() => {
-    showSidebar.value = false
-    modals.newSessionScreen = false
-    scrollToMessageListBottom()
-  })
-}
-
-/**
- * 创建新会话处理函数
- * @param assistant 指定助手，不传或空值则不指定助手
- */
-const createSession = (assistant: Assistant | null) => {
-  // 生成一个新的会话 ID
-  const sessionId = uuidv4()
-  // 新会话数据
-  const newChat = !!assistant
-    ? {
-        id: sessionId,
-        subject: '新对话',
-        messages: [],
-        create_at: dayjs().unix(),
-        assistant,
-      }
-    : {
-        id: sessionId,
-        subject: '新对话',
-        messages: [],
-        create_at: dayjs().unix(),
-      }
-  // 插入新会话数据
-  setChatSessions([newChat, ...chatSessions.value])
-  // 切换到新的会话
-  selectCurrentSessionId(sessionId)
-  // 关闭新建会话屏幕
-  modals.newSessionScreen = false
-  nextTick(() => {
-    if (!!currentAssistant.value) {
-      insetMessage({
-        id: uuidv4(),
-        role: 'system',
-        content: currentAssistant.value?.role || '',
-        preset: true,
-      })
-      insetMessage({
-        id: uuidv4(),
-        role: 'user',
-        content: `${currentAssistant.value?.target}，${currentAssistant.value?.demand}`,
-        preset: true,
-      })
-      insetMessage({
-        id: uuidv4(),
-        role: 'assistant',
-        content: currentAssistant.value?.input_tpl || '',
-        preset: true,
-      })
-    } else {
-      insetMessage({
-        id: uuidv4(),
-        role: 'assistant',
-        content: '你好，有什么可以帮助你的吗？',
-        preset: true,
-      })
-    }
-  })
-}
-
-/**
- * 处理点击新建会话按钮事件
- */
-const handleClickCreateSession = () => {
-  showSidebar.value = false
-  modals.newSessionScreen = true
-}
-
-/**
- * 处理发送消息操作
- * @param event
- */
-const handleClickSend = (event: any) => {
-  if (!loginState.is_logged_in) {
-    modal.open(ModalAuthentication)
-    return
-  }
-  if (event.ctrlKey) {
-    return
-  }
-  if (responding.value) return
-  if (!user_input.value) return
-  if (!currentSessionId.value) {
-    toast.add({
-      title: '发送失败',
-      description: '请先选择一个会话',
-      color: 'red',
-      icon: 'i-tabler-circle-x',
-    })
-    return
-  }
-  // 插入用户消息
-  insetMessage({
-    id: uuidv4(),
-    role: 'user',
-    content: user_input.value,
-    create_at: dayjs().unix(),
-  })
-  user_input.value = ''
-  // 进入响应中状态
-  responding.value = true
-  // 插入空助手消息(加载状态)
-  const assistantReplyId = insetMessage({
-    id: uuidv4(),
-    role: 'assistant',
-    content: '',
-  })
-  // 请求模型回复
-  const trimmedMessages = trimObject(getMessages(), 2000, {
-    keys: ['content'],
-  })
-  useLLM(trimmedMessages, {
-    modelTag: currentModel.value,
-  })
-    .then((reply) => {
-      modifyMessageContent(assistantReplyId, reply)
-    })
-    .catch((err) => {
-      modifyMessageContent(assistantReplyId, err, true)
-    })
-    .finally(() => {
-      responding.value = false
-    })
-}
-
-const scrollToMessageListBottom = () => {
-  nextTick(() => {
-    messagesWrapperRef.value?.scrollTo({
-      top: messagesWrapperRef.value.scrollHeight,
-      behavior: 'smooth',
-    })
-  })
-}
-
-const insetMessage = (message: ChatMessage): ChatMessageId => {
-  setChatSessions(
-    chatSessions.value.map((s) =>
-      s.id === currentSessionId.value
-        ? {
-            ...s,
-            messages: [...s.messages, message],
-          }
-        : s
-    )
-  )
-  scrollToMessageListBottom()
-  return message.id
-}
-
-const getMessages = () =>
-  getSessionCopyById(currentSessionId.value!)?.messages || []
-
-const modifyMessageContent = (
-  messageId: ChatMessageId,
-  content: string,
-  interrupted: boolean = false,
-  updateTime: boolean = true
-) => {
-  setChatSessions(
-    chatSessions.value.map((s) =>
-      s.id === currentSessionId.value
-        ? {
-            ...s,
-            messages: s.messages.map((m) =>
-              m.id === messageId
-                ? {
-                    ...m,
-                    content,
-                    interrupted,
-                    create_at: updateTime ? dayjs().unix() : m.create_at,
-                  }
-                : m
-            ),
-          }
-        : s
-    )
-  )
-  scrollToMessageListBottom()
-}
-
-onMounted(() => {
-  // 切换到第一个会话, 没有会话会自动创建
-  selectCurrentSessionId()
-})
-</script>
-
-<template>
-  <div class="w-full flex relative">
-    <div
-      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px] shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
-      :class="{ 'translate-x-0': showSidebar }"
-    >
-      <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
-        <!-- list -->
-        <div class="flex flex-col gap-3 relative">
-          <!-- ClientOnly avoids hydrate exception -->
-          <ClientOnly>
-            <TransitionGroup name="chat-item">
-              <div v-if="chatSessions.length === 0">
-                <div
-                  class="text-center text-neutral-400 dark:text-neutral-500 py-4 flex flex-col items-center gap-2"
-                >
-                  <Icon
-                    name="i-tabler-messages"
-                    class="text-2xl"
-                  />
-                  <span>没有会话</span>
-                </div>
-              </div>
-              <ChatItem
-                v-for="session in chatSessions"
-                :chat-session="session"
-                :key="session.id"
-                :active="session.id === currentSessionId"
-                @click="selectCurrentSessionId(session.id)"
-                @remove="
-                  () => {
-                    chatSessions.splice(
-                      chatSessions.findIndex((s) => s.id === session.id),
-                      1
-                    )
-                    session.id === currentSessionId && selectCurrentSessionId()
-                  }
-                "
-              />
-            </TransitionGroup>
-          </ClientOnly>
-        </div>
-      </div>
-      <div class="pt-4 flex justify-between items-center">
-        <div></div>
-        <div>
-          <UButton
-            color="white"
-            variant="solid"
-            icon="i-tabler-message-circle-plus"
-            @click="handleClickCreateSession"
-          >
-            新建聊天
-          </UButton>
-        </div>
-      </div>
-    </div>
-    <div class="h-[calc(100vh-4rem)] flex-1 bg-white dark:bg-neutral-900">
-      <Transition
-        name="message"
-        mode="out-in"
-      >
-        <div
-          v-if="!loginState.is_logged_in"
-          class="w-full h-full"
-        >
-          <div
-            class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
-          >
-            <Icon
-              name="i-tabler-user-circle"
-              class="text-7xl text-neutral-300 dark:text-neutral-700"
-            />
-            <p class="text-sm text-neutral-500 dark:text-neutral-400">
-              请登录后使用
-            </p>
-            <UButton
-              class="mt-2 font-bold"
-              color="black"
-              variant="solid"
-              size="xs"
-              @click="modal.open(ModalAuthentication)"
-            >
-              登录
-            </UButton>
-          </div>
-        </div>
-        <NewSessionScreen
-          v-else-if="
-            modals.newSessionScreen ||
-            getSessionCopyById(currentSessionId!) === undefined
-          "
-          :non-back="!getSessionCopyById(currentSessionId!)"
-          @select="createSession"
-          @cancel="modals.newSessionScreen = false"
-        />
-        <div
-          v-else
-          class="w-full h-full flex flex-col"
-        >
-          <div
-            class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2"
-          >
-            <UButton
-              class="md:hidden"
-              color="black"
-              variant="ghost"
-              icon="i-tabler-menu-2"
-              @click="showSidebar = !showSidebar"
-            ></UButton>
-            <h1 class="font-medium">
-              {{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}
-            </h1>
-          </div>
-          <div
-            ref="messagesWrapperRef"
-            class="flex-1 flex flex-col overflow-auto overflow-x-hidden"
-          >
-            <div class="flex flex-col gap-8 px-4 py-8">
-              <TransitionGroup name="message">
-                <Message
-                  v-for="message in getMessages() || []"
-                  :message="message"
-                  :key="message.id"
-                />
-              </TransitionGroup>
-            </div>
-          </div>
-          <ClientOnly>
-            <div
-              class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50"
-            >
-              <div
-                class="flex items-center gap-2 overflow-auto overflow-y-hidden"
-              >
-                <button
-                  class="chat-option-btn"
-                  @click="modals.modelSelect = true"
-                >
-                  <Icon name="tabler:box" />
-                  <span class="text-xs">
-                    {{
-                      llmModels
-                        .find((m) => m.tag === currentModel)
-                        ?.name.toUpperCase() || '模型'
-                    }}
-                  </span>
-                </button>
-                <button
-                  v-if="currentAssistant?.tpl_name"
-                  class="chat-option-btn"
-                >
-                  <Icon name="tabler:robot-face" />
-                  <span class="text-xs">
-                    {{ currentAssistant.tpl_name }}
-                  </span>
-                </button>
-              </div>
-              <div class="relative">
-                <UTextarea
-                  v-model="user_input"
-                  size="lg"
-                  autoresize
-                  :rows="5"
-                  :maxrows="12"
-                  class="font-sans"
-                  placeholder="Enter 发送, Ctrl + Enter 换行"
-                  @keydown.ctrl.enter="user_input += '\n'"
-                  @keydown.enter.prevent="handleClickSend"
-                />
-                <UButton
-                  color="black"
-                  variant="solid"
-                  icon="i-tabler-send-2"
-                  class="absolute bottom-2.5 right-3"
-                  @click.stop="handleClickSend"
-                >
-                  发送
-                </UButton>
-              </div>
-            </div>
-          </ClientOnly>
-        </div>
-      </Transition>
-    </div>
-
-    <!-- Modals -->
-    <UModal v-model="modals.modelSelect">
-      <UCard>
-        <template #header>
-          <h3
-            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-          >
-            选择大语言模型
-          </h3>
-        </template>
-        <div class="grid grid-cols-3 gap-4">
-          <div
-            v-for="(llm, index) in llmModels"
-            :key="index"
-            @click="currentModel = llm.tag"
-            class="flex flex-col gap-2 justify-center items-center w-full aspect-1/1 border-2 rounded-xl cursor-pointer transition duration-150 select-none"
-            :class="
-              llm.tag === currentModel
-                ? 'border-primary shadow-xl bg-primary text-white'
-                : 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'
-            "
-          >
-            <Icon
-              v-if="llm?.icon"
-              :name="llm.icon"
-              class="text-4xl opacity-80"
-            />
-            <div class="flex flex-col gap-0.5 items-center">
-              <h1 class="font-bold drop-shadow-sm opacity-90">
-                {{ llm.name || 'unknown' }}
-              </h1>
-              <p class="text-xs opacity-60">{{ llm.description }}</p>
-            </div>
-          </div>
-        </div>
-        <template #footer>
-          <div
-            class="flex justify-end items-center"
-            @click="modals.modelSelect = false"
-          >
-            <UButton>确定</UButton>
-          </div>
-        </template>
-      </UCard>
-    </UModal>
-  </div>
-</template>
-
-<!--suppress CssUnusedSymbol -->
-<style scoped>
-.message-enter-active {
-  @apply transition duration-300;
-}
-
-.message-enter-from {
-  @apply translate-y-4 opacity-0;
-}
-
-.chat-item-move,
-.chat-item-enter-active,
-.chat-item-leave-active {
-  @apply transition-all duration-300;
-}
-
-.chat-item-enter-from,
-.chat-item-leave-to {
-  @apply opacity-0 scale-90;
-}
-
-.chat-item-leave-active {
-  @apply absolute inset-x-0;
-}
-
-.chat-option-btn {
-  @apply text-lg px-2 py-1.5 flex gap-1 justify-center items-center rounded-lg;
-  @apply bg-white border border-neutral-300 shadow-xs hover:shadow-card;
-  @apply dark:bg-neutral-800 dark:border-neutral-600;
-}
-</style>
diff --git a/app/pages/aigc/draw/index.vue b/app/pages/aigc/draw/index.vue
deleted file mode 100644
index 46d4a9c..0000000
--- a/app/pages/aigc/draw/index.vue
+++ /dev/null
@@ -1,557 +0,0 @@
-<script lang="ts" setup>
-import OptionBlock from '~/components/aigc/drawing/OptionBlock.vue'
-import ResultBlock from '~/components/aigc/drawing/ResultBlock.vue'
-import { useLoginState } from '~/composables/useLoginState'
-import ModalAuthentication from '~/components/ModalAuthentication.vue'
-import { type InferType, number, object, string } from 'yup'
-import type { FormSubmitEvent } from '#ui/types'
-import RatioSelector from '~/components/aigc/RatioSelector.vue'
-import { useFetchWrapped } from '~/composables/useFetchWrapped'
-import type { ResultBlockMeta } from '~/components/aigc/drawing'
-import { useHistory } from '~/composables/useHistory'
-import { del, set } from 'idb-keyval'
-import ReferenceFigureSelector from '~/components/aigc/ReferenceFigureSelector.vue'
-
-useSeoMeta({
-  title: '绘画',
-})
-
-const toast = useToast()
-const modal = useModal()
-const dayjs = useDayjs()
-const history = useHistory()
-const loginState = useLoginState()
-
-const leftSection = ref<HTMLElement | null>(null)
-const leftHandler = ref<HTMLElement | null>(null)
-const showSidebar = ref(false)
-
-const generating = ref(false)
-
-const handle_stick_mousedown = (
-  e: MouseEvent,
-  min: number = 240,
-  max: number = 400
-) => {
-  const handler = leftHandler.value
-  if (handler) {
-    const startX = e.clientX
-    const startWidth = handler.parentElement?.offsetWidth || 0
-    const handle_mousemove = (e: MouseEvent) => {
-      let newWidth = startWidth + e.clientX - startX
-      if (newWidth < min || newWidth > max) {
-        newWidth = Math.min(Math.max(newWidth, min), max)
-      }
-      handler.parentElement!.style.width = `${newWidth}px`
-    }
-    const handle_mouseup = () => {
-      leftSection.value?.classList.add('transition-all')
-      leftHandler.value?.lastElementChild?.classList.remove(
-        'bg-indigo-300',
-        'dark:bg-indigo-700',
-        'w-[3px]'
-      )
-      window.removeEventListener('mousemove', handle_mousemove)
-      window.removeEventListener('mouseup', handle_mouseup)
-    }
-    leftSection.value?.classList.remove('transition-all')
-    leftHandler.value?.lastElementChild?.classList.add(
-      'bg-indigo-300',
-      'dark:bg-indigo-700',
-      'w-[3px]'
-    )
-    window.addEventListener('mousemove', handle_mousemove)
-    window.addEventListener('mouseup', handle_mouseup)
-  }
-}
-
-const defaultRatios = [
-  {
-    ratio: '1:1',
-    value: '768:768',
-  },
-  {
-    ratio: '4:3',
-    value: '1024:768',
-  },
-  {
-    ratio: '3:4',
-    value: '768:1024',
-  },
-]
-
-interface StyleItem {
-  label: string
-  value: number
-  avatar?: { src: string }
-}
-
-const defaultStyles: StyleItem[] = [
-  {
-    label: '通用写实风格',
-    value: 401,
-  },
-  {
-    label: '日系动漫',
-    value: 201,
-  },
-  {
-    label: '科幻风格',
-    value: 114,
-  },
-  {
-    label: '怪兽风格',
-    value: 202,
-  },
-  {
-    label: '唯美古风',
-    value: 203,
-  },
-  {
-    label: '复古动漫',
-    value: 204,
-  },
-  {
-    label: '游戏卡通手绘',
-    value: 301,
-  },
-  {
-    label: '水墨画',
-    value: 101,
-  },
-  {
-    label: '概念艺术',
-    value: 102,
-  },
-  {
-    label: '水彩画',
-    value: 104,
-  },
-  {
-    label: '像素画',
-    value: 105,
-  },
-  {
-    label: '厚涂风格',
-    value: 106,
-  },
-  {
-    label: '插图',
-    value: 107,
-  },
-  {
-    label: '剪纸风格',
-    value: 108,
-  },
-  {
-    label: '印象派',
-    value: 119,
-  },
-  {
-    label: '印象派（莫奈）',
-    value: 109,
-  },
-  {
-    label: '油画',
-    value: 103,
-  },
-  {
-    label: '油画（梵高）',
-    value: 118,
-  },
-  {
-    label: '古典肖像画',
-    value: 111,
-  },
-  {
-    label: '黑白素描画',
-    value: 112,
-  },
-  {
-    label: '赛博朋克',
-    value: 113,
-  },
-  {
-    label: '暗黑风格',
-    value: 115,
-  },
-  {
-    label: '蒸汽波',
-    value: 117,
-  },
-  {
-    label: '2.5D',
-    value: 110,
-  },
-  {
-    label: '3D',
-    value: 116,
-  },
-]
-const img2imgStyles: StyleItem[] = [
-  {
-    label: '水彩画',
-    value: 106,
-  },
-  {
-    label: '2.5D',
-    value: 110,
-  },
-  {
-    label: '日系动漫',
-    value: 201,
-  },
-  {
-    label: '美系动漫',
-    value: 202,
-  },
-  {
-    label: '唯美古风',
-    value: 203,
-  },
-]
-
-const defaultFormSchema = object({
-  prompt: string().required('请输入提示词'),
-  negative_prompt: string(),
-  resolution: string().required('请选择分辨率'),
-  styles: object<StyleItem>({
-    label: string(),
-    value: number(),
-  }).required('请选择风格'),
-  file: string().nullable(),
-})
-
-type DefaultFormSchema = InferType<typeof defaultFormSchema>
-
-const defaultFormState = reactive({
-  prompt: '',
-  negative_prompt: '',
-  resolution: '1024:768',
-  styles: defaultStyles.find((item) => item.value === 401),
-  file: null,
-})
-watch(
-  () => defaultFormState.file,
-  (newVal) => {
-    if (newVal) {
-      defaultFormState.styles = img2imgStyles[0]
-    } else {
-      defaultFormState.styles = defaultStyles.find((item) => item.value === 401)
-    }
-  }
-)
-
-const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
-  if (!loginState.is_logged_in) {
-    modal.open(ModalAuthentication)
-    return
-  }
-  generating.value = true
-  const styleItem = event.data.styles as StyleItem
-  if (!event.data.file) delete event.data.file
-  // generate a uuid
-  const fid = Math.random().toString(36).substring(2)
-  const meta: ResultBlockMeta = {
-    cost: '1000',
-    modal: '混元大模型',
-    style: styleItem.label,
-    ratio: event.data.resolution,
-    datetime: dayjs().unix(),
-    type: event.data.file ? '智能图生图' : '智能文生图',
-  }
-  history.text2img.unshift({
-    fid,
-    meta,
-    prompt: event.data.prompt,
-  })
-  useFetchWrapped<
-    (HunYuan.Text2Img.req | HunYuan.Img2Img.req) & AuthedRequest,
-    BaseResponse<HunYuan.resp>
-  >(
-    event.data.file
-      ? 'App.Assistant_HunYuan.TenImgToImg'
-      : 'App.Assistant_HunYuan.TenTextToImg',
-    {
-      token: loginState.token as string,
-      user_id: loginState.user.id,
-      device_id: 'web',
-      ...event.data,
-      styles: styleItem.value,
-    }
-  )
-    .then((res) => {
-      if (res.ret !== 200) {
-        toast.add({
-          title: '生成失败',
-          description: res.msg || '未知错误',
-          color: 'red',
-          icon: 'i-tabler-circle-x',
-        })
-        history.text2img = history.text2img.filter((item) => item.fid !== fid)
-        return
-      }
-      history.text2img = history.text2img.map((item) => {
-        if (item.fid === fid) {
-          set(`${item.fid}`, [
-            `data:image/png;base64,${res.data.request_image}`,
-          ])
-          item.meta = {
-            ...item.meta,
-            id: res.data.data_id as string,
-          }
-        }
-        return item
-      })
-    })
-    .catch((err) => {
-      toast.add({
-        title: '生成失败',
-        description: err.msg || '网络错误',
-        color: 'red',
-        icon: 'i-tabler-circle-x',
-      })
-    })
-    .finally(() => {
-      generating.value = false
-    })
-}
-</script>
-
-<template>
-  <div class="w-full flex relative">
-    <div
-      ref="leftSection"
-      :class="{ 'translate-x-0': showSidebar }"
-      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
-      style="width: 320px"
-    >
-      <div
-        ref="leftHandler"
-        class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
-        @dblclick="leftSection?.style.setProperty('width', '320px')"
-        @mousedown.prevent="handle_stick_mousedown"
-      >
-        <span
-          class="w-px h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"
-        ></span>
-      </div>
-      <div
-        class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-900 rounded-r-lg shadow-lg flex md:hidden justify-center items-center"
-      >
-        <UButton
-          color="black"
-          icon="i-tabler-brush"
-          size="lg"
-          square
-          @click="showSidebar = !showSidebar"
-        ></UButton>
-      </div>
-      <div class="h-full flex flex-col overflow-y-auto">
-        <UForm
-          :schema="defaultFormSchema"
-          :state="defaultFormState"
-          @submit="onDefaultFormSubmit"
-        >
-          <div class="flex flex-col gap-2 p-4 pb-28">
-            <OptionBlock
-              comment="Prompts"
-              icon="i-tabler-article"
-              label="提示词"
-            >
-              <UFormGroup name="prompt">
-                <UTextarea
-                  v-model="defaultFormState.prompt"
-                  :rows="2"
-                  autoresize
-                  placeholder="请输入提示词，每个提示词之间用英文逗号隔开"
-                  resize
-                />
-              </UFormGroup>
-            </OptionBlock>
-            <OptionBlock
-              comment="Negative Prompts"
-              icon="i-tabler-article-off"
-              label="负面提示词"
-            >
-              <UFormGroup name="negative_prompt">
-                <UTextarea
-                  v-model="defaultFormState.negative_prompt"
-                  :rows="2"
-                  autoresize
-                  placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
-                  resize
-                />
-              </UFormGroup>
-            </OptionBlock>
-            <OptionBlock
-              icon="i-tabler-library-photo"
-              label="参考图片"
-            >
-              <UFormGroup name="input_image">
-                <ReferenceFigureSelector
-                  :value="defaultFormState.file"
-                  text="选择参考图片"
-                  text-on-select="已选择参考图"
-                  @update="
-                    (file) => {
-                      defaultFormState.file = file
-                    }
-                  "
-                />
-              </UFormGroup>
-            </OptionBlock>
-            <OptionBlock
-              icon="i-tabler-photo-hexagon"
-              label="图片风格"
-            >
-              <UFormGroup name="styles">
-                <USelectMenu
-                  v-model="defaultFormState.styles"
-                  :options="
-                    defaultFormState.file ? img2imgStyles : defaultStyles
-                  "
-                ></USelectMenu>
-              </UFormGroup>
-            </OptionBlock>
-            <OptionBlock
-              icon="i-tabler-article-off"
-              label="图片比例"
-            >
-              <UFormGroup name="resolution">
-                <RatioSelector
-                  v-model="defaultFormState.resolution"
-                  :ratios="defaultRatios"
-                />
-              </UFormGroup>
-            </OptionBlock>
-          </div>
-          <div
-            class="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2 bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400 dark:border-neutral-700"
-          >
-            <UButton
-              :loading="generating"
-              block
-              class="font-bold"
-              color="indigo"
-              size="lg"
-              type="submit"
-            >
-              {{ generating ? '生成中' : '生成' }}
-            </UButton>
-            <p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
-              生成即代表您同意
-              <a
-                class="underline underline-offset-2"
-                href="#"
-                target="_blank"
-              >
-                用户许可协议
-              </a>
-            </p>
-          </div>
-        </UForm>
-      </div>
-    </div>
-    <ClientOnly>
-      <div
-        class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto"
-      >
-        <div
-          v-if="!loginState.is_logged_in"
-          class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
-        >
-          <Icon
-            class="text-7xl text-neutral-300 dark:text-neutral-700"
-            name="i-tabler-user-circle"
-          />
-          <p class="text-sm text-neutral-500 dark:text-neutral-400">
-            请登录后使用
-          </p>
-          <UButton
-            class="mt-2 font-bold"
-            color="black"
-            size="xs"
-            variant="solid"
-            @click="modal.open(ModalAuthentication)"
-          >
-            登录
-          </UButton>
-        </div>
-        <div
-          v-else-if="history.text2img.length === 0"
-          class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
-        >
-          <Icon
-            class="text-7xl text-neutral-300 dark:text-neutral-700"
-            name="i-tabler-photo-hexagon"
-          />
-          <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
-        </div>
-        <ResultBlock
-          v-for="(result, k) in history.text2img"
-          v-else
-          :key="result.fid"
-          :fid="result.fid"
-          :meta="result.meta"
-          :prompt="result.prompt"
-          @use-reference="
-            (file) => {
-              defaultFormState.file = file
-            }
-          "
-        >
-          <template #header-right>
-            <UPopover overlay>
-              <UButton
-                color="black"
-                icon="i-tabler-trash"
-                size="xs"
-                variant="ghost"
-              ></UButton>
-              <template #panel="{ close }">
-                <div class="p-4 flex flex-col gap-4">
-                  <h2 class="text-sm">删除后无法恢复，确定删除？</h2>
-                  <div class="flex items-center justify-end gap-2">
-                    <UButton
-                      class="font-bold"
-                      color="gray"
-                      size="xs"
-                      @click="close"
-                    >
-                      取消
-                    </UButton>
-                    <UButton
-                      class="font-bold"
-                      color="red"
-                      size="xs"
-                      @click="
-                        () => {
-                          history.text2img.splice(k, 1)
-                          del(result.fid)
-                          close()
-                        }
-                      "
-                    >
-                      仍然删除
-                    </UButton>
-                  </div>
-                </div>
-              </template>
-            </UPopover>
-          </template>
-        </ResultBlock>
-        <div
-          class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600"
-        >
-          <UIcon name="i-tabler-info-triangle" />
-          <p class="text-xs font-bold">
-            所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地
-          </p>
-        </div>
-      </div>
-    </ClientOnly>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/app/pages/generation.vue b/app/pages/generation.vue
index ff03a87..e0df05d 100644
--- a/app/pages/generation.vue
+++ b/app/pages/generation.vue
@@ -100,6 +100,8 @@ onMounted(() => {
 </template>
 
 <style>
+@reference '@/assets/css/main.css';
+
 .subpage-enter-active,
 .subpage-leave-active {
   @apply transition-all duration-300;
diff --git a/app/pages/generation/admin/digital-human-train.vue b/app/pages/generation/admin/digital-human-train.vue
index af72389..6e3555d 100644
--- a/app/pages/generation/admin/digital-human-train.vue
+++ b/app/pages/generation/admin/digital-human-train.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { object, string, number } from 'yup'
-import type { FormSubmitEvent } from '#ui/types'
+import type { FormSubmitEvent, TableColumn } from '#ui/types'
 
 useHead({
   title: '数字人定制管理 | 管理员',
@@ -40,38 +40,38 @@ const {
 const trainList = computed(() => trainListResp.value?.data.items || [])
 
 // 表格列定义
-const columns = [
+const columns: TableColumn<DigitalHumanTrainItem>[] = [
   {
-    key: 'id',
-    label: 'ID',
+    accessorKey: 'id',
+    header: 'ID',
   },
   {
-    key: 'dh_name',
-    label: '数字人名称',
+    accessorKey: 'dh_name',
+    header: '数字人名称',
   },
   {
-    key: 'organization',
-    label: '单位名称',
+    accessorKey: 'organization',
+    header: '单位名称',
   },
   {
-    key: 'user_id',
-    label: '用户ID',
+    accessorKey: 'user_id',
+    header: '用户ID',
   },
   {
-    key: 'create_time',
-    label: '创建时间',
+    accessorKey: 'create_time',
+    header: '创建时间',
   },
   {
-    key: 'video_url',
-    label: '数字人视频',
+    accessorKey: 'video_url',
+    header: '数字人视频',
   },
   {
-    key: 'auth_video_url',
-    label: '授权视频',
+    accessorKey: 'auth_video_url',
+    header: '授权视频',
   },
   {
-    key: 'actions',
-    label: '操作',
+    accessorKey: 'actions',
+    header: '操作',
   },
 ]
 
@@ -126,7 +126,7 @@ const handleAvatarUpload = (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传图片文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -137,7 +137,7 @@ const handleAvatarUpload = (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '图片文件大小不能超过10MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -155,7 +155,7 @@ const onProcessSubmit = async (
   if (!avatarFile.value) {
     toast.add({
       title: '请上传数字人预览图',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -225,7 +225,7 @@ const onProcessSubmit = async (
           ? `，失败 ${createUserResult.data.failed} 个`
           : ''
       }`,
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
 
@@ -250,7 +250,7 @@ const onProcessSubmit = async (
     toast.add({
       title: '录入失败',
       description: errorMessage,
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -274,7 +274,7 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
       toast.add({
         title: '删除成功',
         description: '定制记录已删除',
-        color: 'green',
+        color: 'success',
         icon: 'i-tabler-check',
       })
       await refreshTrainList()
@@ -288,7 +288,7 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
     toast.add({
       title: '删除失败',
       description: errorMessage,
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   }
@@ -304,7 +304,7 @@ const previewVideo = (videoUrl: string, title: string) => {
   // 创建一个简单的视频预览弹窗
   const videoModal = document.createElement('div')
   videoModal.className =
-    'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'
+    'fixed inset-0 z-50 flex items-center justify-center bg-black/50'
 
   const videoContainer = document.createElement('div')
   videoContainer.className =
@@ -323,7 +323,7 @@ const previewVideo = (videoUrl: string, title: string) => {
   const closeButton = document.createElement('button')
   closeButton.textContent = '关闭'
   closeButton.className =
-    'mt-4 px-4 py-2 bg-gray-500 text-white rounded-sm hover:bg-gray-600'
+    'mt-4 px-4 py-2 bg-gray-500 text-white rounded-xs hover:bg-gray-600'
   closeButton.onclick = () => {
     document.body.removeChild(videoModal)
   }
@@ -352,11 +352,11 @@ const previewVideo = (videoUrl: string, title: string) => {
       >
         <template #action>
           <UButton
-            color="gray"
+            color="neutral"
             variant="soft"
             icon="i-tabler-refresh"
             label="刷新"
-            @click="refreshTrainList"
+            @click="() => refreshTrainList()"
           />
         </template>
       </BubbleTitle>
@@ -374,77 +374,80 @@ const previewVideo = (videoUrl: string, title: string) => {
 
       <div class="flex flex-col gap-4">
         <UTable
-          :rows="trainList"
+          :data="trainList"
           :columns="columns"
           :loading="trainListStatus === 'pending'"
-          :progress="{ color: 'amber', animation: 'carousel' }"
-          class="border dark:border-neutral-800 rounded-md"
+          loading-color="warning"
+          loading-animation="carousel"
+          class="rounded-md border dark:border-neutral-800"
         >
-          <template #create_time-data="{ row }">
-            <span class="text-sm">{{ formatTime(row.create_time) }}</span>
+          <template #create_time-cell="{ row }">
+            <span class="text-sm">
+              {{ formatTime(row.original.create_time) }}
+            </span>
           </template>
 
-          <template #video_url-data="{ row }">
+          <template #video_url-cell="{ row }">
             <div class="flex gap-2">
               <UButton
-                color="blue"
+                color="info"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-download"
-                :to="row.video_url"
+                :to="row.original.video_url"
                 target="_blank"
                 label="下载"
               />
               <UButton
-                color="green"
+                color="success"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-eye"
                 label="预览"
-                @click="previewVideo(row.video_url, '数字人视频')"
+                @click="previewVideo(row.original.video_url, '数字人视频')"
               />
             </div>
           </template>
 
-          <template #auth_video_url-data="{ row }">
+          <template #auth_video_url-cell="{ row }">
             <div class="flex gap-2">
               <UButton
-                color="blue"
+                color="info"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-download"
-                :to="row.auth_video_url"
+                :to="row.original.auth_video_url"
                 target="_blank"
                 label="下载"
               />
               <UButton
-                color="green"
+                color="success"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-eye"
                 label="预览"
-                @click="previewVideo(row.auth_video_url, '授权视频')"
+                @click="previewVideo(row.original.auth_video_url, '授权视频')"
               />
             </div>
           </template>
 
-          <template #actions-data="{ row }">
+          <template #actions-cell="{ row }">
             <div class="flex gap-2">
               <UButton
-                color="amber"
+                color="warning"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-user-cog"
                 label="录入"
-                @click="handleProcessTrain(row)"
+                @click="handleProcessTrain(row.original)"
               />
               <UButton
-                color="red"
+                color="error"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-trash"
                 label="删除"
-                @click="handleDeleteTrain(row)"
+                @click="handleDeleteTrain(row.original)"
               />
             </div>
           </template>
@@ -452,7 +455,7 @@ const previewVideo = (videoUrl: string, title: string) => {
 
         <div class="flex justify-end">
           <UPagination
-            v-model="pagination.page"
+            v-model:page="pagination.page"
             :max="9"
             :page-count="pagination.pageSize"
             :total="trainListResp?.data.total || 0"
@@ -462,125 +465,127 @@ const previewVideo = (videoUrl: string, title: string) => {
     </div>
 
     <!-- 录入数字人弹窗 -->
-    <USlideover v-model="isProcessModalOpen">
-      <UCard
-        :ui="{
-          body: { base: 'flex-1' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-        class="flex flex-col flex-1"
-      >
-        <template #header>
-          <UButton
-            class="flex absolute end-5 top-5 z-10"
-            color="gray"
-            icon="i-tabler-x"
-            padded
-            size="sm"
-            square
-            variant="ghost"
-            @click="isProcessModalOpen = false"
-          />
-          <div>
-            <h3 class="text-lg font-semibold">录入数字人</h3>
-            <p class="text-sm text-gray-500 mt-1">
-              为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
-              {{ currentTrainItem?.user_id }}
-            </p>
-          </div>
-        </template>
-
-        <UForm
-          class="space-y-4"
-          :schema="processFormSchema"
-          :state="processFormState"
-          @submit="onProcessSubmit"
+    <USlideover v-model:open="isProcessModalOpen">
+      <template #content>
+        <UCard
+          :ui="{
+            body: 'flex-1',
+          }"
+          class="flex flex-1 flex-col"
         >
-          <UFormGroup
-            label="名称"
-            name="name"
-          >
-            <UInput v-model="processFormState.name" />
-          </UFormGroup>
-
-          <UFormGroup
-            label="数字人ID"
-            name="model_id"
-            description="请输入五位数字人ID"
-          >
-            <UInput
-              v-model="processFormState.model_id"
-              type="number"
-              placeholder="请输入数字人ID"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-            label="描述"
-            name="description"
-          >
-            <UTextarea
-              v-model="processFormState.description"
-              rows="3"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-            label="供应商类型"
-            name="type"
-          >
-            <USelectMenu
-              v-model="processFormState.type"
-              value-attribute="value"
-              :options="sourceTypeList"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-            label="数字人预览图"
-            required
-          >
-            <UniFileDnD
-              accept="image/png,image/jpeg,image/jpg"
-              @change="handleAvatarUpload"
-            >
-              <template #default>
-                <div class="text-center">
-                  <UIcon
-                    name="i-heroicons-photo"
-                    class="mx-auto h-12 w-12 text-gray-400"
-                  />
-                  <div class="mt-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{ avatarFile ? avatarFile.name : '点击或拖拽上传图片' }}
-                    </span>
-                  </div>
-                </div>
-              </template>
-            </UniFileDnD>
-          </UFormGroup>
-
-          <div class="flex justify-end gap-2 pt-4">
+          <template #header>
             <UButton
-              type="button"
-              color="gray"
-              variant="soft"
+              class="absolute end-5 top-5 z-10 flex"
+              color="neutral"
+              variant="ghost"
+              icon="i-tabler-x"
+              padded
+              size="sm"
+              square
               @click="isProcessModalOpen = false"
+            />
+            <div>
+              <h3 class="text-lg font-semibold">录入数字人</h3>
+              <p class="mt-1 text-sm text-gray-500">
+                为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
+                {{ currentTrainItem?.user_id }}
+              </p>
+            </div>
+          </template>
+
+          <UForm
+            class="space-y-4"
+            :schema="processFormSchema"
+            :state="processFormState"
+            @submit="onProcessSubmit"
+          >
+            <UFormField
+              label="名称"
+              name="name"
             >
-              取消
-            </UButton>
-            <UButton
-              type="submit"
-              color="primary"
-              :loading="isProcessing"
-              :disabled="isProcessing"
+              <UInput v-model="processFormState.name" />
+            </UFormField>
+
+            <UFormField
+              label="数字人ID"
+              name="model_id"
+              description="请输入五位数字人ID"
             >
-              {{ isProcessing ? '录入中...' : '录入并分配' }}
-            </UButton>
-          </div>
-        </UForm>
-      </UCard>
+              <UInput
+                v-model="processFormState.model_id"
+                type="number"
+                placeholder="请输入数字人ID"
+              />
+            </UFormField>
+
+            <UFormField
+              label="描述"
+              name="description"
+            >
+              <UTextarea
+                v-model="processFormState.description"
+                :rows="3"
+              />
+            </UFormField>
+
+            <UFormField
+              label="供应商类型"
+              name="type"
+            >
+              <USelectMenu
+                v-model="processFormState.type"
+                value-attribute="value"
+                :options="sourceTypeList"
+              />
+            </UFormField>
+
+            <UFormField
+              label="数字人预览图"
+              required
+            >
+              <UniFileDnD
+                accept="image/png,image/jpeg,image/jpg"
+                @change="handleAvatarUpload"
+              >
+                <template #default>
+                  <div class="text-center">
+                    <UIcon
+                      name="i-heroicons-photo"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          avatarFile ? avatarFile.name : '点击或拖拽上传图片'
+                        }}
+                      </span>
+                    </div>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormField>
+
+            <div class="flex justify-end gap-2 pt-4">
+              <UButton
+                type="button"
+                color="neutral"
+                variant="soft"
+                @click="isProcessModalOpen = false"
+              >
+                取消
+              </UButton>
+              <UButton
+                type="submit"
+                color="primary"
+                :loading="isProcessing"
+                :disabled="isProcessing"
+              >
+                {{ isProcessing ? '录入中...' : '录入并分配' }}
+              </UButton>
+            </div>
+          </UForm>
+        </UCard>
+      </template>
     </USlideover>
   </div>
 </template>
diff --git a/app/pages/generation/admin/index.vue b/app/pages/generation/admin/index.vue
index f134853..50df9b0 100644
--- a/app/pages/generation/admin/index.vue
+++ b/app/pages/generation/admin/index.vue
@@ -54,7 +54,7 @@ const navigateToPage = (path: string) => {
     </div>
 
     <div class="p-4">
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
         <div
           v-for="page in adminPages"
           :key="page.path"
@@ -62,14 +62,11 @@ const navigateToPage = (path: string) => {
           @click="navigateToPage(page.path)"
         >
           <UCard
-            class="hover:shadow-lg transition-all duration-200 group-hover:scale-105"
-            :ui="{
-              ring: 'ring-1 ring-gray-200 dark:ring-gray-700 group-hover:ring-gray-300 dark:group-hover:ring-gray-600',
-            }"
+            class="transition-all duration-200 hover:shadow-lg group-hover:scale-105"
           >
-            <div class="flex flex-col items-center text-center p-6">
+            <div class="flex flex-col items-center p-6 text-center">
               <div
-                class="w-16 h-16 rounded-full flex items-center justify-center mb-4 transition-colors"
+                class="mb-4 flex h-16 w-16 items-center justify-center rounded-full transition-colors"
                 :class="{
                   'bg-blue-100 dark:bg-blue-900/30': page.color === 'blue',
                   'bg-amber-100 dark:bg-amber-900/30': page.color === 'amber',
@@ -78,7 +75,7 @@ const navigateToPage = (path: string) => {
               >
                 <UIcon
                   :name="page.icon"
-                  class="w-8 h-8"
+                  class="h-8 w-8"
                   :class="{
                     'text-blue-600 dark:text-blue-400': page.color === 'blue',
                     'text-amber-600 dark:text-amber-400':
@@ -90,24 +87,24 @@ const navigateToPage = (path: string) => {
               </div>
 
               <h3
-                class="text-lg font-semibold text-gray-900 dark:text-white mb-2"
+                class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
               >
                 {{ page.title }}
               </h3>
 
               <p
-                class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed"
+                class="text-sm leading-relaxed text-gray-600 dark:text-gray-400"
               >
                 {{ page.description }}
               </p>
 
               <div
-                class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors"
+                class="mt-4 flex items-center text-sm text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300"
               >
                 <span>进入管理</span>
                 <UIcon
                   name="i-heroicons-arrow-right"
-                  class="ml-1 w-4 h-4"
+                  class="ml-1 h-4 w-4"
                 />
               </div>
             </div>
diff --git a/app/pages/generation/admin/materials.vue b/app/pages/generation/admin/materials.vue
index e514157..ab8201f 100644
--- a/app/pages/generation/admin/materials.vue
+++ b/app/pages/generation/admin/materials.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { object, string, number } from 'yup'
-import type { FormSubmitEvent } from '#ui/types'
+import type { FormSubmitEvent, TableColumn } from '#ui/types'
 
 useHead({
   title: '片头片尾管理 | 管理员',
@@ -72,42 +72,42 @@ const {
 const titlesList = computed(() => titlesListResp.value?.data.items || [])
 
 // 表格列定义
-const columns = [
+const columns: TableColumn<UserTitlesRequest>[] = [
   {
-    key: 'id',
-    label: 'ID',
+    accessorKey: 'id',
+    header: 'ID',
   },
   {
-    key: 'user_id',
-    label: '用户ID',
+    accessorKey: 'user_id',
+    header: '用户ID',
   },
   {
-    key: 'title',
-    label: '课程名称',
+    accessorKey: 'title',
+    header: '课程名称',
   },
   {
-    key: 'description',
-    label: '主讲人',
+    accessorKey: 'description',
+    header: '主讲人',
   },
   {
-    key: 'remark',
-    label: '备注',
+    accessorKey: 'remark',
+    header: '备注',
   },
   {
-    key: 'info',
-    label: '原始模板',
+    accessorKey: 'info',
+    header: '原始模板',
   },
   {
-    key: 'create_time',
-    label: '创建时间',
+    accessorKey: 'create_time',
+    header: '创建时间',
   },
   {
-    key: 'preview',
-    label: '制作结果',
+    accessorKey: 'preview',
+    header: '制作结果',
   },
   {
-    key: 'actions',
-    label: '操作',
+    accessorKey: 'actions',
+    header: '操作',
   },
 ]
 
@@ -182,7 +182,7 @@ const handleOpeningVideoUpload = async (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传视频文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -193,7 +193,7 @@ const handleOpeningVideoUpload = async (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '视频文件大小不能超过100MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -208,7 +208,7 @@ const handleOpeningVideoUpload = async (files: FileList) => {
 
     toast.add({
       title: '片头视频上传成功',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch (error) {
@@ -216,7 +216,7 @@ const handleOpeningVideoUpload = async (files: FileList) => {
     toast.add({
       title: '上传失败',
       description: error instanceof Error ? error.message : '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -234,7 +234,7 @@ const handleOpeningCoverUpload = async (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传图片文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -245,7 +245,7 @@ const handleOpeningCoverUpload = async (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '图片文件大小不能超过10MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -260,7 +260,7 @@ const handleOpeningCoverUpload = async (files: FileList) => {
 
     toast.add({
       title: '片头封面上传成功',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch (error) {
@@ -268,7 +268,7 @@ const handleOpeningCoverUpload = async (files: FileList) => {
     toast.add({
       title: '上传失败',
       description: error instanceof Error ? error.message : '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -286,7 +286,7 @@ const handleEndingVideoUpload = async (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传视频文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -297,7 +297,7 @@ const handleEndingVideoUpload = async (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '视频文件大小不能超过100MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -312,7 +312,7 @@ const handleEndingVideoUpload = async (files: FileList) => {
 
     toast.add({
       title: '片尾视频上传成功',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch (error) {
@@ -320,7 +320,7 @@ const handleEndingVideoUpload = async (files: FileList) => {
     toast.add({
       title: '上传失败',
       description: error instanceof Error ? error.message : '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -338,7 +338,7 @@ const handleEndingCoverUpload = async (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传图片文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -349,7 +349,7 @@ const handleEndingCoverUpload = async (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '图片文件大小不能超过10MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -364,7 +364,7 @@ const handleEndingCoverUpload = async (files: FileList) => {
 
     toast.add({
       title: '片尾封面上传成功',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch (error) {
@@ -372,7 +372,7 @@ const handleEndingCoverUpload = async (files: FileList) => {
     toast.add({
       title: '上传失败',
       description: error instanceof Error ? error.message : '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -425,7 +425,7 @@ const onProcessSubmit = async (
       toast.add({
         title: '处理成功',
         description: `片头片尾已成功分配给用户 ${currentTitlesItem.value.to_user_id || currentTitlesItem.value.user_id}`,
-        color: 'green',
+        color: 'success',
         icon: 'i-tabler-check',
       })
 
@@ -455,7 +455,7 @@ const onProcessSubmit = async (
     toast.add({
       title: '处理失败',
       description: errorMessage,
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -485,7 +485,7 @@ const handleDeleteTitles = async (
       toast.add({
         title: '删除成功',
         description: '片头片尾请求已删除',
-        color: 'green',
+        color: 'success',
         icon: 'i-tabler-check',
       })
       await refreshTitlesList()
@@ -499,7 +499,7 @@ const handleDeleteTitles = async (
     toast.add({
       title: '删除失败',
       description: errorMessage,
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   }
@@ -593,7 +593,7 @@ const handleCreateOpeningVideoUpload = async (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传视频文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -603,7 +603,7 @@ const handleCreateOpeningVideoUpload = async (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '视频文件大小不能超过100MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -616,7 +616,7 @@ const handleCreateOpeningVideoUpload = async (files: FileList) => {
     createFormState.opening_file = uploadUrl
     toast.add({
       title: '片头视频上传成功',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch (error) {
@@ -624,7 +624,7 @@ const handleCreateOpeningVideoUpload = async (files: FileList) => {
     toast.add({
       title: '上传失败',
       description: error instanceof Error ? error.message : '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -640,7 +640,7 @@ const handleCreateOpeningCoverUpload = async (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传图片文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -650,7 +650,7 @@ const handleCreateOpeningCoverUpload = async (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '图片文件大小不能超过10MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -663,7 +663,7 @@ const handleCreateOpeningCoverUpload = async (files: FileList) => {
     createFormState.opening_url = uploadUrl
     toast.add({
       title: '片头封面上传成功',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch (error) {
@@ -671,7 +671,7 @@ const handleCreateOpeningCoverUpload = async (files: FileList) => {
     toast.add({
       title: '上传失败',
       description: error instanceof Error ? error.message : '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -687,7 +687,7 @@ const handleCreateEndingVideoUpload = async (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传视频文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -697,7 +697,7 @@ const handleCreateEndingVideoUpload = async (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '视频文件大小不能超过100MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -710,7 +710,7 @@ const handleCreateEndingVideoUpload = async (files: FileList) => {
     createFormState.ending_file = uploadUrl
     toast.add({
       title: '片尾视频上传成功',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch (error) {
@@ -718,7 +718,7 @@ const handleCreateEndingVideoUpload = async (files: FileList) => {
     toast.add({
       title: '上传失败',
       description: error instanceof Error ? error.message : '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -734,7 +734,7 @@ const handleCreateEndingCoverUpload = async (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传图片文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -744,7 +744,7 @@ const handleCreateEndingCoverUpload = async (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '图片文件大小不能超过10MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -757,7 +757,7 @@ const handleCreateEndingCoverUpload = async (files: FileList) => {
     createFormState.ending_url = uploadUrl
     toast.add({
       title: '片尾封面上传成功',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch (error) {
@@ -765,7 +765,7 @@ const handleCreateEndingCoverUpload = async (files: FileList) => {
     toast.add({
       title: '上传失败',
       description: error instanceof Error ? error.message : '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -809,7 +809,7 @@ const onCreateSubmit = async (
       toast.add({
         title: '创建成功',
         description: `系统片头片尾模板已创建，ID: ${result.data.title_id}`,
-        color: 'green',
+        color: 'success',
         icon: 'i-tabler-check',
       })
 
@@ -836,7 +836,7 @@ const onCreateSubmit = async (
     toast.add({
       title: '创建失败',
       description: errorMessage,
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -862,11 +862,11 @@ const onCreateSubmit = async (
               @click="openCreateModal"
             />
             <UButton
-              color="gray"
+              color="neutral"
               variant="soft"
               icon="i-tabler-refresh"
               label="刷新"
-              @click="refreshTitlesList"
+              @click="() => refreshTitlesList()"
             />
           </div>
         </template>
@@ -883,11 +883,11 @@ const onCreateSubmit = async (
       />
 
       <!-- 状态筛选 -->
-      <div class="flex items-center gap-4 mb-4">
+      <div class="mb-4 flex items-center gap-4">
         <span class="text-sm text-gray-600 dark:text-gray-400">状态筛选：</span>
         <UButtonGroup>
           <UButton
-            :color="statusFilter === 0 ? 'primary' : 'gray'"
+            :color="statusFilter === 0 ? 'primary' : 'neutral'"
             :variant="statusFilter === 0 ? 'solid' : 'ghost'"
             label="待处理"
             icon="i-tabler-clock"
@@ -899,7 +899,7 @@ const onCreateSubmit = async (
             "
           />
           <UButton
-            :color="statusFilter === 1 ? 'primary' : 'gray'"
+            :color="statusFilter === 1 ? 'primary' : 'neutral'"
             :variant="statusFilter === 1 ? 'solid' : 'ghost'"
             label="已完成"
             icon="i-tabler-check"
@@ -922,48 +922,51 @@ const onCreateSubmit = async (
 
       <div class="flex flex-col gap-4">
         <UTable
-          :rows="titlesList"
+          :data="titlesList"
           :columns="columns"
           :loading="titlesListStatus === 'pending'"
-          :progress="{ color: 'amber', animation: 'carousel' }"
-          class="border dark:border-neutral-800 rounded-md"
+          loading-color="warning"
+          loading-animation="carousel"
+          class="rounded-md border dark:border-neutral-800"
         >
-          <template #create_time-data="{ row }">
-            <span class="text-sm">{{ formatTime(row.create_time) }}</span>
-          </template>
-
-          <template #remark-data="{ row }">
-            <span class="text-sm text-gray-500 max-w-32 truncate block">
-              {{ row.remark || '-' }}
+          <template #create_time-cell="{ row }">
+            <span class="text-sm">
+              {{ formatTime(row.original.create_time) }}
             </span>
           </template>
 
-          <template #info-data="{ row }">
+          <template #remark-cell="{ row }">
+            <span class="block max-w-32 truncate text-sm text-gray-500">
+              {{ row.original.remark || '-' }}
+            </span>
+          </template>
+
+          <template #info-cell="{ row }">
             <div
-              v-if="row.info"
+              v-if="row.original.info"
               class="flex items-center gap-2"
             >
               <img
-                v-if="row.info.opening_url"
-                :src="row.info.opening_url"
-                :alt="row.info.title"
-                class="w-16 h-9 object-cover rounded-sm cursor-pointer hover:opacity-80 transition-opacity"
+                v-if="row.original.info.opening_url"
+                :src="row.original.info.opening_url"
+                :alt="row.original.info.title"
+                class="rounded-xs h-9 w-16 cursor-pointer object-cover transition-opacity hover:opacity-80"
                 @click="
                   previewVideo(
-                    row.info.opening_file,
-                    `原始模板: ${row.info.title}`
+                    row.original.info.opening_file,
+                    `原始模板: ${row.original.info.title}`
                   )
                 "
               />
-              <div class="flex flex-col min-w-0">
+              <div class="flex min-w-0 flex-col">
                 <span
-                  class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate"
-                  :title="row.info.title"
+                  class="truncate text-xs font-medium text-gray-700 dark:text-gray-300"
+                  :title="row.original.info.title"
                 >
-                  {{ row.info.title }}
+                  {{ row.original.info.title }}
                 </span>
                 <span class="text-2xs text-gray-500 dark:text-gray-400">
-                  {{ row.info.description }}
+                  {{ row.original.info.description }}
                 </span>
               </div>
             </div>
@@ -975,27 +978,31 @@ const onCreateSubmit = async (
             </span>
           </template>
 
-          <template #preview-data="{ row }">
+          <template #preview-cell="{ row }">
             <div
               class="flex items-center gap-3"
-              v-if="row.opening_file || row.ending_file"
+              v-if="row.original.opening_file || row.original.ending_file"
             >
               <!-- 片头 -->
               <div
-                v-if="row.opening_file"
+                v-if="row.original.opening_file"
                 class="flex flex-col items-center gap-0.5"
               >
                 <img
-                  v-if="row.opening_url"
-                  :src="row.opening_url"
+                  v-if="row.original.opening_url"
+                  :src="row.original.opening_url"
                   alt="片头"
-                  class="w-14 h-8 object-cover rounded-sm cursor-pointer hover:opacity-80 transition-opacity ring-1 ring-blue-200 dark:ring-blue-800"
-                  @click="previewVideo(row.opening_file, '制作片头预览')"
+                  class="rounded-xs h-8 w-14 cursor-pointer object-cover ring-1 ring-blue-200 transition-opacity hover:opacity-80 dark:ring-blue-800"
+                  @click="
+                    previewVideo(row.original.opening_file, '制作片头预览')
+                  "
                 />
                 <div
                   v-else
-                  class="w-14 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-sm flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
-                  @click="previewVideo(row.opening_file, '制作片头预览')"
+                  class="rounded-xs flex h-8 w-14 cursor-pointer items-center justify-center bg-blue-100 transition-opacity hover:opacity-80 dark:bg-blue-900/30"
+                  @click="
+                    previewVideo(row.original.opening_file, '制作片头预览')
+                  "
                 >
                   <UIcon
                     name="i-tabler-player-play"
@@ -1008,20 +1015,24 @@ const onCreateSubmit = async (
               </div>
               <!-- 片尾 -->
               <div
-                v-if="row.ending_file"
+                v-if="row.original.ending_file"
                 class="flex flex-col items-center gap-0.5"
               >
                 <img
-                  v-if="row.ending_url"
-                  :src="row.ending_url"
+                  v-if="row.original.ending_url"
+                  :src="row.original.ending_url"
                   alt="片尾"
-                  class="w-14 h-8 object-cover rounded-sm cursor-pointer hover:opacity-80 transition-opacity ring-1 ring-green-200 dark:ring-green-800"
-                  @click="previewVideo(row.ending_file, '制作片尾预览')"
+                  class="rounded-xs h-8 w-14 cursor-pointer object-cover ring-1 ring-green-200 transition-opacity hover:opacity-80 dark:ring-green-800"
+                  @click="
+                    previewVideo(row.original.ending_file, '制作片尾预览')
+                  "
                 />
                 <div
                   v-else
-                  class="w-14 h-8 bg-green-100 dark:bg-green-900/30 rounded-sm flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
-                  @click="previewVideo(row.ending_file, '制作片尾预览')"
+                  class="rounded-xs flex h-8 w-14 cursor-pointer items-center justify-center bg-green-100 transition-opacity hover:opacity-80 dark:bg-green-900/30"
+                  @click="
+                    previewVideo(row.original.ending_file, '制作片尾预览')
+                  "
                 >
                   <UIcon
                     name="i-tabler-player-play"
@@ -1041,33 +1052,33 @@ const onCreateSubmit = async (
             </span>
           </template>
 
-          <template #actions-data="{ row }">
+          <template #actions-cell="{ row }">
             <div class="flex gap-2">
               <UButton
                 v-if="statusFilter === 0"
-                color="amber"
+                color="warning"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-upload"
                 label="处理"
-                @click="handleProcessTitles(row)"
+                @click="handleProcessTitles(row.original)"
               />
               <UButton
                 v-else
-                color="blue"
+                color="info"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-edit"
                 label="编辑"
-                @click="handleProcessTitles(row)"
+                @click="handleProcessTitles(row.original)"
               />
               <UButton
-                color="red"
+                color="error"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-trash"
                 label="删除"
-                @click="handleDeleteTitles(row)"
+                @click="handleDeleteTitles(row.original)"
               />
             </div>
           </template>
@@ -1075,7 +1086,7 @@ const onCreateSubmit = async (
 
         <div class="flex justify-end">
           <UPagination
-            v-model="pagination.page"
+            v-model:page="pagination.page"
             :max="9"
             :page-count="pagination.pageSize"
             :total="titlesListResp?.data.total || 0"
@@ -1085,586 +1096,582 @@ const onCreateSubmit = async (
     </div>
 
     <!-- 处理片头片尾弹窗 -->
-    <USlideover v-model="isProcessModalOpen">
-      <UCard
-        :ui="{
-          body: { base: 'flex-1 overflow-y-auto' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-        class="flex flex-col flex-1"
-      >
-        <template #header>
-          <UButton
-            class="flex absolute end-5 top-5 z-10"
-            color="gray"
-            icon="i-tabler-x"
-            padded
-            size="sm"
-            square
-            variant="ghost"
-            @click="isProcessModalOpen = false"
-          />
-          <div>
-            <h3 class="text-lg font-semibold">处理片头片尾请求</h3>
-            <p class="text-sm text-gray-500 mt-1">
-              为用户
-              {{ currentTitlesItem?.to_user_id || currentTitlesItem?.user_id }}
-              上传制作好的片头片尾视频
-            </p>
-          </div>
-        </template>
-
-        <UForm
-          class="space-y-4"
-          :schema="processFormSchema"
-          :state="processFormState"
-          @submit="onProcessSubmit"
+    <USlideover v-model:open="isProcessModalOpen">
+      <template #content>
+        <UCard
+          :ui="{
+            body: 'flex-1 overflow-y-auto',
+          }"
+          class="flex flex-1 flex-col"
         >
-          <UFormGroup
-            label="课程名称"
-            name="title"
-          >
-            <UInput v-model="processFormState.title" />
-          </UFormGroup>
-
-          <UFormGroup
-            label="主讲人"
-            name="description"
-          >
-            <UInput v-model="processFormState.description" />
-          </UFormGroup>
-
-          <UDivider label="片头" />
-
-          <UFormGroup
-            label="上传片头视频"
-            name="opening_file"
-            required
-          >
-            <UniFileDnD
-              accept="video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-ms-wmv"
-              @change="handleOpeningVideoUpload"
-            >
-              <template #default>
-                <div class="text-center py-4">
-                  <UIcon
-                    v-if="!isUploadingOpeningVideo"
-                    name="i-tabler-video-plus"
-                    class="mx-auto h-12 w-12 text-gray-400"
-                  />
-                  <UIcon
-                    v-else
-                    name="i-tabler-loader-2"
-                    class="mx-auto h-12 w-12 text-gray-400 animate-spin"
-                  />
-                  <div class="mt-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{
-                        isUploadingOpeningVideo
-                          ? '上传中...'
-                          : openingVideoFile
-                            ? openingVideoFile.name
-                            : '点击或拖拽上传片头视频'
-                      }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="processFormState.opening_file"
-                    class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
-                  >
-                    ✓ {{ processFormState.opening_file }}
-                  </p>
-                </div>
-              </template>
-            </UniFileDnD>
-          </UFormGroup>
-
-          <UFormGroup
-            label="上传片头封面"
-            name="opening_url"
-            required
-          >
-            <UniFileDnD
-              accept="image/png,image/jpeg,image/jpg,image/webp"
-              @change="handleOpeningCoverUpload"
-            >
-              <template #default>
-                <div class="text-center py-4">
-                  <UIcon
-                    v-if="!isUploadingOpeningCover"
-                    name="i-tabler-photo-plus"
-                    class="mx-auto h-12 w-12 text-gray-400"
-                  />
-                  <UIcon
-                    v-else
-                    name="i-tabler-loader-2"
-                    class="mx-auto h-12 w-12 text-gray-400 animate-spin"
-                  />
-                  <div class="mt-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{
-                        isUploadingOpeningCover
-                          ? '上传中...'
-                          : openingCoverFile
-                            ? openingCoverFile.name
-                            : '点击或拖拽上传片头封面'
-                      }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="processFormState.opening_url"
-                    class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
-                  >
-                    ✓ {{ processFormState.opening_url }}
-                  </p>
-                </div>
-              </template>
-            </UniFileDnD>
-          </UFormGroup>
-
-          <UDivider label="片尾" />
-
-          <UFormGroup
-            label="上传片尾视频"
-            name="ending_file"
-            required
-          >
-            <UniFileDnD
-              accept="video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-ms-wmv"
-              @change="handleEndingVideoUpload"
-            >
-              <template #default>
-                <div class="text-center py-4">
-                  <UIcon
-                    v-if="!isUploadingEndingVideo"
-                    name="i-tabler-video-plus"
-                    class="mx-auto h-12 w-12 text-gray-400"
-                  />
-                  <UIcon
-                    v-else
-                    name="i-tabler-loader-2"
-                    class="mx-auto h-12 w-12 text-gray-400 animate-spin"
-                  />
-                  <div class="mt-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{
-                        isUploadingEndingVideo
-                          ? '上传中...'
-                          : endingVideoFile
-                            ? endingVideoFile.name
-                            : '点击或拖拽上传片尾视频'
-                      }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="processFormState.ending_file"
-                    class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
-                  >
-                    ✓ {{ processFormState.ending_file }}
-                  </p>
-                </div>
-              </template>
-            </UniFileDnD>
-          </UFormGroup>
-
-          <UFormGroup
-            label="上传片尾封面"
-            name="ending_url"
-            required
-          >
-            <UniFileDnD
-              accept="image/png,image/jpeg,image/jpg,image/webp"
-              @change="handleEndingCoverUpload"
-            >
-              <template #default>
-                <div class="text-center py-4">
-                  <UIcon
-                    v-if="!isUploadingEndingCover"
-                    name="i-tabler-photo-plus"
-                    class="mx-auto h-12 w-12 text-gray-400"
-                  />
-                  <UIcon
-                    v-else
-                    name="i-tabler-loader-2"
-                    class="mx-auto h-12 w-12 text-gray-400 animate-spin"
-                  />
-                  <div class="mt-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{
-                        isUploadingEndingCover
-                          ? '上传中...'
-                          : endingCoverFile
-                            ? endingCoverFile.name
-                            : '点击或拖拽上传片尾封面'
-                      }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="processFormState.ending_url"
-                    class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
-                  >
-                    ✓ {{ processFormState.ending_url }}
-                  </p>
-                </div>
-              </template>
-            </UniFileDnD>
-          </UFormGroup>
-
-          <div class="flex justify-end gap-2 pt-4">
+          <template #header>
             <UButton
-              type="button"
-              color="gray"
-              variant="soft"
+              class="absolute end-5 top-5 z-10 flex"
+              color="neutral"
+              icon="i-tabler-x"
+              padded
+              size="sm"
+              square
+              variant="ghost"
               @click="isProcessModalOpen = false"
+            />
+            <div>
+              <h3 class="text-lg font-semibold">处理片头片尾请求</h3>
+              <p class="mt-1 text-sm text-gray-500">
+                为用户
+                {{
+                  currentTitlesItem?.to_user_id || currentTitlesItem?.user_id
+                }}
+                上传制作好的片头片尾视频
+              </p>
+            </div>
+          </template>
+
+          <UForm
+            class="space-y-4"
+            :schema="processFormSchema"
+            :state="processFormState"
+            @submit="onProcessSubmit"
+          >
+            <UFormField
+              label="课程名称"
+              name="title"
             >
-              取消
-            </UButton>
-            <UButton
-              type="submit"
-              color="primary"
-              :loading="isProcessing"
-              :disabled="
-                isProcessing ||
-                isUploadingOpeningVideo ||
-                isUploadingOpeningCover ||
-                isUploadingEndingVideo ||
-                isUploadingEndingCover
-              "
+              <UInput v-model="processFormState.title" />
+            </UFormField>
+
+            <UFormField
+              label="主讲人"
+              name="description"
             >
-              {{ isProcessing ? '提交中...' : '提交并分配' }}
-            </UButton>
-          </div>
-        </UForm>
-      </UCard>
+              <UInput v-model="processFormState.description" />
+            </UFormField>
+
+            <USeparator label="片头" />
+
+            <UFormField
+              label="上传片头视频"
+              name="opening_file"
+              required
+            >
+              <UniFileDnD
+                accept="video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-ms-wmv"
+                @change="handleOpeningVideoUpload"
+              >
+                <template #default>
+                  <div class="py-4 text-center">
+                    <UIcon
+                      v-if="!isUploadingOpeningVideo"
+                      name="i-tabler-video-plus"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <UIcon
+                      v-else
+                      name="i-tabler-loader-2"
+                      class="mx-auto h-12 w-12 animate-spin text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          isUploadingOpeningVideo
+                            ? '上传中...'
+                            : openingVideoFile
+                              ? openingVideoFile.name
+                              : '点击或拖拽上传片头视频'
+                        }}
+                      </span>
+                    </div>
+                    <p
+                      v-if="processFormState.opening_file"
+                      class="mx-auto mt-1 max-w-xs truncate text-xs text-green-600"
+                    >
+                      ✓ {{ processFormState.opening_file }}
+                    </p>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormField>
+
+            <UFormField
+              label="上传片头封面"
+              name="opening_url"
+              required
+            >
+              <UniFileDnD
+                accept="image/png,image/jpeg,image/jpg,image/webp"
+                @change="handleOpeningCoverUpload"
+              >
+                <template #default>
+                  <div class="py-4 text-center">
+                    <UIcon
+                      v-if="!isUploadingOpeningCover"
+                      name="i-tabler-photo-plus"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <UIcon
+                      v-else
+                      name="i-tabler-loader-2"
+                      class="mx-auto h-12 w-12 animate-spin text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          isUploadingOpeningCover
+                            ? '上传中...'
+                            : openingCoverFile
+                              ? openingCoverFile.name
+                              : '点击或拖拽上传片头封面'
+                        }}
+                      </span>
+                    </div>
+                    <p
+                      v-if="processFormState.opening_url"
+                      class="mx-auto mt-1 max-w-xs truncate text-xs text-green-600"
+                    >
+                      ✓ {{ processFormState.opening_url }}
+                    </p>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormField>
+
+            <USeparator label="片尾" />
+
+            <UFormField
+              label="上传片尾视频"
+              name="ending_file"
+              required
+            >
+              <UniFileDnD
+                accept="video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-ms-wmv"
+                @change="handleEndingVideoUpload"
+              >
+                <template #default>
+                  <div class="py-4 text-center">
+                    <UIcon
+                      v-if="!isUploadingEndingVideo"
+                      name="i-tabler-video-plus"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <UIcon
+                      v-else
+                      name="i-tabler-loader-2"
+                      class="mx-auto h-12 w-12 animate-spin text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          isUploadingEndingVideo
+                            ? '上传中...'
+                            : endingVideoFile
+                              ? endingVideoFile.name
+                              : '点击或拖拽上传片尾视频'
+                        }}
+                      </span>
+                    </div>
+                    <p
+                      v-if="processFormState.ending_file"
+                      class="mx-auto mt-1 max-w-xs truncate text-xs text-green-600"
+                    >
+                      ✓ {{ processFormState.ending_file }}
+                    </p>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormField>
+
+            <UFormField
+              label="上传片尾封面"
+              name="ending_url"
+              required
+            >
+              <UniFileDnD
+                accept="image/png,image/jpeg,image/jpg,image/webp"
+                @change="handleEndingCoverUpload"
+              >
+                <template #default>
+                  <div class="py-4 text-center">
+                    <UIcon
+                      v-if="!isUploadingEndingCover"
+                      name="i-tabler-photo-plus"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <UIcon
+                      v-else
+                      name="i-tabler-loader-2"
+                      class="mx-auto h-12 w-12 animate-spin text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          isUploadingEndingCover
+                            ? '上传中...'
+                            : endingCoverFile
+                              ? endingCoverFile.name
+                              : '点击或拖拽上传片尾封面'
+                        }}
+                      </span>
+                    </div>
+                    <p
+                      v-if="processFormState.ending_url"
+                      class="mx-auto mt-1 max-w-xs truncate text-xs text-green-600"
+                    >
+                      ✓ {{ processFormState.ending_url }}
+                    </p>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormField>
+
+            <div class="flex justify-end gap-2 pt-4">
+              <UButton
+                type="button"
+                color="neutral"
+                variant="soft"
+                @click="isProcessModalOpen = false"
+              >
+                取消
+              </UButton>
+              <UButton
+                type="submit"
+                color="primary"
+                :loading="isProcessing"
+                :disabled="
+                  isProcessing ||
+                  isUploadingOpeningVideo ||
+                  isUploadingOpeningCover ||
+                  isUploadingEndingVideo ||
+                  isUploadingEndingCover
+                "
+              >
+                {{ isProcessing ? '提交中...' : '提交并分配' }}
+              </UButton>
+            </div>
+          </UForm>
+        </UCard>
+      </template>
     </USlideover>
 
     <!-- 视频预览弹窗 -->
-    <UModal v-model="isPreviewModalOpen">
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-lg font-semibold">{{ previewVideoTitle }}</h3>
-            <UButton
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isPreviewModalOpen = false"
+    <UModal v-model:open="isPreviewModalOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-lg font-semibold">{{ previewVideoTitle }}</h3>
+              <UButton
+                color="neutral"
+                icon="i-tabler-x"
+                variant="ghost"
+                @click="isPreviewModalOpen = false"
+              />
+            </div>
+          </template>
+
+          <div class="aspect-video">
+            <video
+              v-if="previewVideoUrl"
+              :src="previewVideoUrl"
+              controls
+              class="rounded-xs h-full w-full"
             />
           </div>
-        </template>
-
-        <div class="aspect-video">
-          <video
-            v-if="previewVideoUrl"
-            :src="previewVideoUrl"
-            controls
-            class="w-full h-full rounded-sm"
-          />
-        </div>
-      </UCard>
+        </UCard>
+      </template>
     </UModal>
 
     <!-- 图片预览弹窗 -->
-    <UModal v-model="isPreviewImageModalOpen">
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-lg font-semibold">{{ previewImageTitle }}</h3>
-            <UButton
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isPreviewImageModalOpen = false"
+    <UModal v-model:open="isPreviewImageModalOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-lg font-semibold">{{ previewImageTitle }}</h3>
+              <UButton
+                color="neutral"
+                icon="i-tabler-x"
+                variant="ghost"
+                @click="isPreviewImageModalOpen = false"
+              />
+            </div>
+          </template>
+
+          <div class="flex justify-center">
+            <img
+              v-if="previewImageUrl"
+              :src="previewImageUrl"
+              :alt="previewImageTitle"
+              class="rounded-xs max-h-[70vh] max-w-full object-contain"
             />
           </div>
-        </template>
-
-        <div class="flex justify-center">
-          <img
-            v-if="previewImageUrl"
-            :src="previewImageUrl"
-            :alt="previewImageTitle"
-            class="max-w-full max-h-[70vh] rounded-sm object-contain"
-          />
-        </div>
-      </UCard>
+        </UCard>
+      </template>
     </UModal>
 
     <!-- 创建系统片头片尾模板弹窗 -->
-    <USlideover v-model="isCreateModalOpen">
-      <UCard
-        :ui="{
-          body: { base: 'flex-1 overflow-y-auto' },
-          footer: { base: 'sticky bottom-0 bg-white dark:bg-gray-900' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-        class="flex flex-col flex-1 h-full"
-      >
-        <template #header>
-          <UButton
-            class="flex absolute end-5 top-5 z-10"
-            color="gray"
-            icon="i-tabler-x"
-            padded
-            size="sm"
-            square
-            variant="ghost"
-            @click="isCreateModalOpen = false"
-          />
-          <div>
-            <h3 class="text-lg font-semibold">创建系统片头片尾模板</h3>
-            <p class="text-sm text-gray-500 mt-1">
-              创建新的系统片头片尾模板，供所有用户使用
-            </p>
-          </div>
-        </template>
-
-        <UForm
-          id="createForm"
-          class="space-y-4"
-          :schema="createFormSchema"
-          :state="createFormState"
-          @submit="onCreateSubmit"
+    <USlideover v-model:open="isCreateModalOpen">
+      <template #content>
+        <UCard
+          :ui="{
+            body: 'flex-1 overflow-y-auto',
+            footer: 'sticky bottom-0 bg-white dark:bg-gray-900',
+          }"
+          class="flex h-full flex-1 flex-col"
         >
-          <UFormGroup
-            label="标题"
-            name="title"
-            required
-          >
-            <UInput
-              v-model="createFormState.title"
-              placeholder="请输入模板标题"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-            label="描述"
-            name="description"
-            required
-          >
-            <UTextarea
-              v-model="createFormState.description"
-              placeholder="请输入模板描述"
-            />
-          </UFormGroup>
-
-          <UDivider label="片头" />
-
-          <UFormGroup
-            label="上传片头视频"
-            name="opening_file"
-            required
-          >
-            <UniFileDnD
-              accept="video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-ms-wmv"
-              @change="handleCreateOpeningVideoUpload"
-            >
-              <template #default>
-                <div class="text-center py-4">
-                  <UIcon
-                    v-if="!isUploadingCreateOpeningVideo"
-                    name="i-tabler-video-plus"
-                    class="mx-auto h-12 w-12 text-gray-400"
-                  />
-                  <UIcon
-                    v-else
-                    name="i-tabler-loader-2"
-                    class="mx-auto h-12 w-12 text-gray-400 animate-spin"
-                  />
-                  <div class="mt-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{
-                        isUploadingCreateOpeningVideo
-                          ? '上传中...'
-                          : createOpeningVideoFile
-                            ? createOpeningVideoFile.name
-                            : '点击或拖拽上传片头视频'
-                      }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="createFormState.opening_file"
-                    class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
-                  >
-                    ✓ {{ createFormState.opening_file }}
-                  </p>
-                </div>
-              </template>
-            </UniFileDnD>
-          </UFormGroup>
-
-          <UFormGroup
-            label="上传片头封面"
-            name="opening_url"
-            required
-          >
-            <UniFileDnD
-              accept="image/png,image/jpeg,image/jpg,image/webp"
-              @change="handleCreateOpeningCoverUpload"
-            >
-              <template #default>
-                <div class="text-center py-4">
-                  <UIcon
-                    v-if="!isUploadingCreateOpeningCover"
-                    name="i-tabler-photo-plus"
-                    class="mx-auto h-12 w-12 text-gray-400"
-                  />
-                  <UIcon
-                    v-else
-                    name="i-tabler-loader-2"
-                    class="mx-auto h-12 w-12 text-gray-400 animate-spin"
-                  />
-                  <div class="mt-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{
-                        isUploadingCreateOpeningCover
-                          ? '上传中...'
-                          : createOpeningCoverFile
-                            ? createOpeningCoverFile.name
-                            : '点击或拖拽上传片头封面'
-                      }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="createFormState.opening_url"
-                    class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
-                  >
-                    ✓ {{ createFormState.opening_url }}
-                  </p>
-                </div>
-              </template>
-            </UniFileDnD>
-          </UFormGroup>
-
-          <UDivider label="片尾" />
-
-          <UFormGroup
-            label="上传片尾视频"
-            name="ending_file"
-            required
-          >
-            <UniFileDnD
-              accept="video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-ms-wmv"
-              @change="handleCreateEndingVideoUpload"
-            >
-              <template #default>
-                <div class="text-center py-4">
-                  <UIcon
-                    v-if="!isUploadingCreateEndingVideo"
-                    name="i-tabler-video-plus"
-                    class="mx-auto h-12 w-12 text-gray-400"
-                  />
-                  <UIcon
-                    v-else
-                    name="i-tabler-loader-2"
-                    class="mx-auto h-12 w-12 text-gray-400 animate-spin"
-                  />
-                  <div class="mt-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{
-                        isUploadingCreateEndingVideo
-                          ? '上传中...'
-                          : createEndingVideoFile
-                            ? createEndingVideoFile.name
-                            : '点击或拖拽上传片尾视频'
-                      }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="createFormState.ending_file"
-                    class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
-                  >
-                    ✓ {{ createFormState.ending_file }}
-                  </p>
-                </div>
-              </template>
-            </UniFileDnD>
-          </UFormGroup>
-
-          <UFormGroup
-            label="上传片尾封面"
-            name="ending_url"
-            required
-          >
-            <UniFileDnD
-              accept="image/png,image/jpeg,image/jpg,image/webp"
-              @change="handleCreateEndingCoverUpload"
-            >
-              <template #default>
-                <div class="text-center py-4">
-                  <UIcon
-                    v-if="!isUploadingCreateEndingCover"
-                    name="i-tabler-photo-plus"
-                    class="mx-auto h-12 w-12 text-gray-400"
-                  />
-                  <UIcon
-                    v-else
-                    name="i-tabler-loader-2"
-                    class="mx-auto h-12 w-12 text-gray-400 animate-spin"
-                  />
-                  <div class="mt-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{
-                        isUploadingCreateEndingCover
-                          ? '上传中...'
-                          : createEndingCoverFile
-                            ? createEndingCoverFile.name
-                            : '点击或拖拽上传片尾封面'
-                      }}
-                    </span>
-                  </div>
-                  <p
-                    v-if="createFormState.ending_url"
-                    class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
-                  >
-                    ✓ {{ createFormState.ending_url }}
-                  </p>
-                </div>
-              </template>
-            </UniFileDnD>
-          </UFormGroup>
-        </UForm>
-
-        <template #footer>
-          <div class="flex justify-end gap-2">
+          <template #header>
             <UButton
-              type="button"
-              color="gray"
-              variant="soft"
+              class="absolute end-5 top-5 z-10 flex"
+              color="neutral"
+              icon="i-tabler-x"
+              padded
+              size="sm"
+              square
+              variant="ghost"
               @click="isCreateModalOpen = false"
+            />
+            <div>
+              <h3 class="text-lg font-semibold">创建系统片头片尾模板</h3>
+              <p class="mt-1 text-sm text-gray-500">
+                创建新的系统片头片尾模板，供所有用户使用
+              </p>
+            </div>
+          </template>
+
+          <UForm
+            id="createForm"
+            class="space-y-4"
+            :schema="createFormSchema"
+            :state="createFormState"
+            @submit="onCreateSubmit"
+          >
+            <UFormField
+              label="标题"
+              name="title"
+              required
             >
-              取消
-            </UButton>
-            <UButton
-              type="submit"
-              form="createForm"
-              color="primary"
-              :loading="isCreating"
-              :disabled="
-                isCreating ||
-                isUploadingCreateOpeningVideo ||
-                isUploadingCreateOpeningCover ||
-                isUploadingCreateEndingVideo ||
-                isUploadingCreateEndingCover
-              "
+              <UInput
+                v-model="createFormState.title"
+                placeholder="请输入模板标题"
+              />
+            </UFormField>
+
+            <UFormField
+              label="描述"
+              name="description"
+              required
             >
-              {{ isCreating ? '创建中...' : '创建模板' }}
-            </UButton>
-          </div>
-        </template>
-      </UCard>
+              <UTextarea
+                v-model="createFormState.description"
+                placeholder="请输入模板描述"
+              />
+            </UFormField>
+
+            <USeparator label="片头" />
+
+            <UFormField
+              label="上传片头视频"
+              name="opening_file"
+              required
+            >
+              <UniFileDnD
+                accept="video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-ms-wmv"
+                @change="handleCreateOpeningVideoUpload"
+              >
+                <template #default>
+                  <div class="py-4 text-center">
+                    <UIcon
+                      v-if="!isUploadingCreateOpeningVideo"
+                      name="i-tabler-video-plus"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <UIcon
+                      v-else
+                      name="i-tabler-loader-2"
+                      class="mx-auto h-12 w-12 animate-spin text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          isUploadingCreateOpeningVideo
+                            ? '上传中...'
+                            : createOpeningVideoFile
+                              ? createOpeningVideoFile.name
+                              : '点击或拖拽上传片头视频'
+                        }}
+                      </span>
+                    </div>
+                    <p
+                      v-if="createFormState.opening_file"
+                      class="mx-auto mt-1 max-w-xs truncate text-xs text-green-600"
+                    >
+                      ✓ {{ createFormState.opening_file }}
+                    </p>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormField>
+
+            <UFormField
+              label="上传片头封面"
+              name="opening_url"
+              required
+            >
+              <UniFileDnD
+                accept="image/png,image/jpeg,image/jpg,image/webp"
+                @change="handleCreateOpeningCoverUpload"
+              >
+                <template #default>
+                  <div class="py-4 text-center">
+                    <UIcon
+                      v-if="!isUploadingCreateOpeningCover"
+                      name="i-tabler-photo-plus"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <UIcon
+                      v-else
+                      name="i-tabler-loader-2"
+                      class="mx-auto h-12 w-12 animate-spin text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          isUploadingCreateOpeningCover
+                            ? '上传中...'
+                            : createOpeningCoverFile
+                              ? createOpeningCoverFile.name
+                              : '点击或拖拽上传片头封面'
+                        }}
+                      </span>
+                    </div>
+                    <p
+                      v-if="createFormState.opening_url"
+                      class="mx-auto mt-1 max-w-xs truncate text-xs text-green-600"
+                    >
+                      ✓ {{ createFormState.opening_url }}
+                    </p>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormField>
+
+            <USeparator label="片尾" />
+
+            <UFormField
+              label="上传片尾视频"
+              name="ending_file"
+              required
+            >
+              <UniFileDnD
+                accept="video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-ms-wmv"
+                @change="handleCreateEndingVideoUpload"
+              >
+                <template #default>
+                  <div class="py-4 text-center">
+                    <UIcon
+                      v-if="!isUploadingCreateEndingVideo"
+                      name="i-tabler-video-plus"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <UIcon
+                      v-else
+                      name="i-tabler-loader-2"
+                      class="mx-auto h-12 w-12 animate-spin text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          isUploadingCreateEndingVideo
+                            ? '上传中...'
+                            : createEndingVideoFile
+                              ? createEndingVideoFile.name
+                              : '点击或拖拽上传片尾视频'
+                        }}
+                      </span>
+                    </div>
+                    <p
+                      v-if="createFormState.ending_file"
+                      class="mx-auto mt-1 max-w-xs truncate text-xs text-green-600"
+                    >
+                      ✓ {{ createFormState.ending_file }}
+                    </p>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormField>
+
+            <UFormField
+              label="上传片尾封面"
+              name="ending_url"
+              required
+            >
+              <UniFileDnD
+                accept="image/png,image/jpeg,image/jpg,image/webp"
+                @change="handleCreateEndingCoverUpload"
+              >
+                <template #default>
+                  <div class="py-4 text-center">
+                    <UIcon
+                      v-if="!isUploadingCreateEndingCover"
+                      name="i-tabler-photo-plus"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <UIcon
+                      v-else
+                      name="i-tabler-loader-2"
+                      class="mx-auto h-12 w-12 animate-spin text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          isUploadingCreateEndingCover
+                            ? '上传中...'
+                            : createEndingCoverFile
+                              ? createEndingCoverFile.name
+                              : '点击或拖拽上传片尾封面'
+                        }}
+                      </span>
+                    </div>
+                    <p
+                      v-if="createFormState.ending_url"
+                      class="mx-auto mt-1 max-w-xs truncate text-xs text-green-600"
+                    >
+                      ✓ {{ createFormState.ending_url }}
+                    </p>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormField>
+          </UForm>
+
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                type="button"
+                color="neutral"
+                variant="soft"
+                @click="isCreateModalOpen = false"
+              >
+                取消
+              </UButton>
+              <UButton
+                type="submit"
+                form="createForm"
+                color="primary"
+                :loading="isCreating"
+                :disabled="
+                  isCreating ||
+                  isUploadingCreateOpeningVideo ||
+                  isUploadingCreateOpeningCover ||
+                  isUploadingCreateEndingVideo ||
+                  isUploadingCreateEndingCover
+                "
+              >
+                {{ isCreating ? '创建中...' : '创建模板' }}
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
     </USlideover>
   </div>
 </template>
diff --git a/app/pages/generation/admin/users.vue b/app/pages/generation/admin/users.vue
index 63f88a7..bc59691 100644
--- a/app/pages/generation/admin/users.vue
+++ b/app/pages/generation/admin/users.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { TableColumn } from '#ui/types'
+
 const route = useRoute()
 const toast = useToast()
 const dayjs = useDayjs()
@@ -35,49 +37,41 @@ const systemServices: ServiceType[] = [
   },
 ]
 
-const columns = [
+const columns: TableColumn<UserSchema>[] = [
   {
-    key: 'id',
-    label: 'ID',
-    disabled: true,
+    accessorKey: 'id',
+    header: 'ID',
   },
   {
-    key: 'avatar',
-    label: '头像',
-    disabled: true,
+    accessorKey: 'avatar',
+    header: '头像',
   },
   {
-    key: 'username',
-    label: '账户名/姓名',
-    disabled: true,
+    accessorKey: 'username',
+    header: '账户名/姓名',
   },
   {
-    key: 'company',
-    label: '单位',
+    accessorKey: 'company',
+    header: '单位',
   },
   {
-    key: 'mobile',
-    label: '手机号',
+    accessorKey: 'mobile',
+    header: '手机号',
   },
   {
-    key: 'sex',
-    label: '性别',
+    accessorKey: 'sex',
+    header: '性别',
   },
   {
-    key: 'auth_code',
-    label: '角色',
+    accessorKey: 'auth_code',
+    header: '角色',
   },
   {
-    key: 'actions',
-    label: '操作',
+    accessorKey: 'actions',
+    header: '操作',
   },
 ]
 
-const selectedColumns = ref([
-  ...columns.filter((row) => {
-    return !['auth_code'].includes(row.key)
-  }),
-])
 const page = ref(1)
 const pageCount = ref(15)
 const state_filter = ref<'verified' | 'unverified'>('verified')
@@ -127,7 +121,7 @@ const dhPageCount = ref(10)
 watch(dhPageCount, () => (dhPage.value = 1))
 
 onMounted(() => {
-  if (!!route.query?.unverified) {
+  if (route.query?.unverified) {
     state_filter.value = 'unverified'
   }
 })
@@ -188,7 +182,7 @@ const items = (row: UserSchema) => [
     {
       label: '服务和用量',
       icon: 'tabler:server-cog',
-      click: () => openSlide(row),
+      onClick: () => openSlide(row),
       disabled: row.auth_code === 0,
     },
   ],
@@ -197,7 +191,7 @@ const items = (row: UserSchema) => [
       disabled: row.id === loginState.user.id,
       label: row.auth_code !== 0 ? '停用账号' : '启用账号',
       icon: row.auth_code !== 0 ? 'tabler:cancel' : 'tabler:shield-check',
-      click: () => setUserStatus(row.id, row.auth_code === 0),
+      onClick: () => setUserStatus(row.id, row.auth_code === 0),
     },
   ],
 ]
@@ -235,7 +229,7 @@ const onDigitalHumansSelected = (digitalHumans: DigitalHumanItem[]) => {
         description: `成功授权 ${res.data.success} 个数字人${
           res.data.failed ? `，失败 ${res.data.failed} 个` : ''
         }`,
-        color: 'green',
+        color: 'success',
         icon: 'tabler:check',
       })
       refreshDigitalHumansData()
@@ -243,7 +237,7 @@ const onDigitalHumansSelected = (digitalHumans: DigitalHumanItem[]) => {
       toast.add({
         title: '授权失败',
         description: res.msg || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'tabler:alert-triangle',
       })
     }
@@ -269,7 +263,7 @@ const revokeDigitalHuman = (uid: number, digitalHumanId: number) => {
       toast.add({
         title: '撤销成功',
         description: '已撤销数字人授权',
-        color: 'green',
+        color: 'success',
         icon: 'tabler:check',
       })
       refreshDigitalHumansData()
@@ -277,7 +271,7 @@ const revokeDigitalHuman = (uid: number, digitalHumanId: number) => {
       toast.add({
         title: '撤销失败',
         description: res.msg || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'tabler:alert-triangle',
       })
     }
@@ -303,7 +297,7 @@ const setUserStatus = (uid: number, is_verified: boolean) => {
       toast.add({
         title: '操作成功',
         description: `已${is_verified ? '启用' : '停用'}账号`,
-        color: 'green',
+        color: 'success',
         icon: is_verified ? 'tabler:shield-check' : 'tabler:cancel',
       })
       refreshUsersData()
@@ -311,7 +305,7 @@ const setUserStatus = (uid: number, is_verified: boolean) => {
       toast.add({
         title: '操作失败',
         description: res.msg || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'tabler:alert-triangle',
       })
     }
@@ -366,14 +360,14 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
         toast.add({
           title: '操作成功',
           description: `已${isActivate ? '开通' : '更新'}服务`,
-          color: 'green',
+          color: 'success',
           icon: 'tabler:check',
         })
       } else {
         toast.add({
           title: '操作失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'tabler:alert-triangle',
         })
       }
@@ -382,7 +376,7 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
       toast.add({
         title: '操作失败',
         description: err.message || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'tabler:alert-triangle',
       })
     })
@@ -403,10 +397,10 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
       >
         <template #action>
           <UButton
-            color="amber"
+            color="warning"
             icon="tabler:reload"
             variant="soft"
-            @click="refreshUsersData"
+            @click="() => refreshUsersData()"
           >
             刷新
           </UButton>
@@ -417,21 +411,21 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
         line-gradient-to="amber"
       />
       <div>
-        <div class="flex justify-between items-center w-full py-3">
+        <div class="flex w-full items-center justify-between py-3">
           <div class="flex items-center gap-1.5">
-            <span class="text-sm leading-0">每页显示:</span>
+            <span class="leading-0 text-sm">每页显示:</span>
             <USelect
               v-model="pageCount"
-              :options="[5, 10, 15, 20]"
+              :items="[5, 10, 15, 20]"
               class="me-2 w-20"
               size="xs"
             />
           </div>
 
-          <div class="flex gap-1.5 items-center">
+          <div class="flex items-center gap-1.5">
             <USelectMenu
               v-model="state_filter"
-              :options="[
+              :items="[
                 {
                   label: '正常账号',
                   value: 'verified',
@@ -443,75 +437,61 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
                   icon: 'tabler:user-cancel',
                 },
               ]"
+              value-key="value"
               :ui-menu="{
                 width: 'w-fit',
                 option: { size: 'text-xs', icon: { base: 'w-4 h-4' } },
               }"
               size="xs"
-              value-attribute="value"
             />
-            <USelectMenu
-              v-model="selectedColumns"
-              :options="columns.filter((row) => !['actions'].includes(row.key))"
-              :ui-menu="{
-                width: 'w-fit',
-                option: { size: 'text-xs', icon: { base: 'w-4 h-4' } },
-              }"
-              multiple
-            >
-              <UButton
-                color="gray"
-                icon="tabler:layout-columns"
-                size="xs"
-              >
-                显示列
-              </UButton>
-            </USelectMenu>
           </div>
         </div>
         <UTable
-          :columns="selectedColumns"
+          :columns="columns"
           :loading="usersDataStatus === 'pending'"
           :progress="{ color: 'amber', animation: 'carousel' }"
-          :rows="usersData?.data.items"
-          class="border dark:border-neutral-800 rounded-md"
+          :data="usersData?.data.items"
+          class="rounded-md border dark:border-neutral-800"
         >
-          <template #username-data="{ row }">
+          <template #username-cell="{ row }">
             <span
               :class="{
-                'font-semibold text-amber-500': row.id === loginState.user.id,
+                'font-semibold text-amber-500':
+                  row.original.id === loginState.user.id,
               }"
             >
-              {{ row.username }}
+              {{ row.original.username }}
               <span class="text-xs">
-                {{ row.id === loginState.user.id ? ' (本账号)' : '' }}
+                {{ row.original.id === loginState.user.id ? ' (本账号)' : '' }}
               </span>
             </span>
           </template>
-          <template #avatar-data="{ row }">
+          <template #avatar-cell="{ row }">
             <UAvatar
-              :alt="row.username.toUpperCase()"
-              :src="row.avatar"
+              :alt="row.original.username.toUpperCase()"
+              :src="row.original.avatar"
               size="sm"
             />
           </template>
-          <template #sex-data="{ row }">
-            {{ row.sex === 0 ? '' : row.sex === 1 ? '男' : '女' }}
+          <template #sex-cell="{ row }">
+            {{
+              row.original.sex === 0 ? '' : row.original.sex === 1 ? '男' : '女'
+            }}
           </template>
-          <template #actions-data="{ row }">
-            <UDropdown :items="items(row)">
+          <template #actions-cell="{ row }">
+            <UDropdownMenu :items="items(row.original)">
               <UButton
-                color="gray"
+                color="neutral"
                 icon="tabler:dots"
                 variant="ghost"
               />
-            </UDropdown>
+            </UDropdownMenu>
           </template>
         </UTable>
         <div class="flex justify-end py-3.5">
           <UPagination
             v-if="(usersData?.data.total || -1) > 0"
-            v-model="page"
+            v-model:page="page"
             :page-count="pageCount"
             :total="usersData?.data.total || 0"
           />
@@ -519,365 +499,358 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
       </div>
     </div>
     <USlideover
-      v-model="isSlideOpen"
-      :ui="{ width: 'w-screen max-w-3xl' }"
+      v-model:open="isSlideOpen"
+      :ui="{ content: 'w-screen max-w-3xl' }"
     >
-      <UCard
-        :ui="{
-          body: { base: 'flex-1 overflow-y-auto' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-        class="flex flex-col overflow-hidden"
-      >
-        <template #header>
-          <UButton
-            class="flex absolute end-5 top-5 z-10"
-            color="gray"
-            icon="tabler:x"
-            padded
-            size="sm"
-            square
-            variant="ghost"
-            @click="closeSlide"
-          />
-          服务和用量管理
-          <p class="text-sm font-medium text-primary">
-            {{ viewingUser?.username }} (UID:{{ viewingUser?.id }})
-          </p>
-        </template>
-
-        <div class="">
-          <UDivider
-            label="服务用量管理"
-            class="mb-4"
-            :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
-          />
-
-          <div class="border dark:border-neutral-700 rounded-md">
-            <UTable
-              :columns="[
-                { key: 'service', label: '服务' },
-                { key: 'status', label: '状态' },
-                { key: 'create_time', label: '开通时间' },
-                { key: 'expire_time', label: '过期时间' },
-                { key: 'remain_count', label: '余量(秒)' },
-                { key: 'actions' },
-              ]"
-              :loading="userBalancesStatus === 'pending'"
-              :rows="[
-                ...systemServices,
-                // 如果 userBalances?.data.items 具有 systemServices 中没有的服务，则添加到列表中
-                ...(userBalances?.data.items
-                  .filter(
-                    (row) =>
-                      !systemServices.find((s) => s.tag === row.request_type)
-                  )
-                  .map((row) => ({
-                    tag: row.request_type,
-                    name: row.request_type,
-                  })) || []),
-              ]"
-            >
-              <template #service-data="{ row }: { row: ServiceType }">
-                {{
-                  systemServices.find((s) => s.tag === row.tag)?.name || row.tag
-                }}
-              </template>
-
-              <template #status-data="{ row }">
-                <UBadge
-                  v-if="!getBalanceByTag(row.tag)"
-                  color="gray"
-                  variant="solid"
-                  size="xs"
-                >
-                  未开通
-                </UBadge>
-                <UBadge
-                  v-else-if="
-                    getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
-                  "
-                  color="red"
-                  variant="subtle"
-                  size="xs"
-                >
-                  已过期
-                </UBadge>
-                <UBadge
-                  v-else
-                  color="green"
-                  variant="subtle"
-                  size="xs"
-                >
-                  生效中
-                </UBadge>
-              </template>
-
-              <template #create_time-data="{ row }">
-                <span class="text-xs">
-                  {{
-                    !!getBalanceByTag(row.tag)
-                      ? dayjs(
-                          getBalanceByTag(row.tag)!.create_time * 1000
-                        ).format('YYYY-MM-DD HH:mm:ss')
-                      : '未开通'
-                  }}
-                </span>
-              </template>
-
-              <template #expire_time-data="{ row }">
-                <span class="text-xs">
-                  {{
-                    !!getBalanceByTag(row.tag)
-                      ? dayjs(
-                          getBalanceByTag(row.tag)!.expire_time * 1000
-                        ).format('YYYY-MM-DD HH:mm:ss')
-                      : '未开通'
-                  }}
-                </span>
-              </template>
-
-              <template #remain_count-data="{ row }">
-                <span class="text-sm">
-                  {{ getBalanceByTag(row.tag)?.remain_count || 0 }}
-                </span>
-              </template>
-
-              <template #actions-data="{ row }">
-                <UButton
-                  v-if="!getBalanceByTag(row.tag)"
-                  color="green"
-                  icon="tabler:clock-check"
-                  size="xs"
-                  variant="soft"
-                  @click="
-                    () => {
-                      isActivateBalance = true
-                      userBalanceEditing = true
-                      userBalanceState.request_type = row.tag
-                    }
-                  "
-                >
-                  开通
-                </UButton>
-                <UButton
-                  v-else-if="
-                    getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
-                  "
-                  color="teal"
-                  icon="tabler:clock-plus"
-                  size="xs"
-                  variant="soft"
-                  @click="
-                    () => {
-                      isActivateBalance = false
-                      userBalanceEditing = true
-                      userBalanceState.request_type = row.tag
-                    }
-                  "
-                >
-                  延续
-                </UButton>
-                <UButton
-                  v-else
-                  color="sky"
-                  icon="tabler:rotate-clockwise"
-                  size="xs"
-                  variant="soft"
-                  @click="
-                    () => {
-                      isActivateBalance = false
-                      userBalanceEditing = true
-                      userBalanceState.request_type = row.tag
-                      userBalanceState.expire_time =
-                        getBalanceByTag(row.tag)!.expire_time * 1000
-                      userBalanceState.remain_count = getBalanceByTag(
-                        row.tag
-                      )!.remain_count
-                    }
-                  "
-                >
-                  更新
-                </UButton>
-              </template>
-            </UTable>
-
-            <UModal
-              v-model="isBalanceEditModalOpen"
-              :ui="{ width: 'w-xl' }"
-            >
-              <UCard
-                :ui="{
-                  ring: '',
-                  divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-                }"
-              >
-                <template #header>
-                  <!-- 为 {{ viewingUser!.username }}
-                <span class="text-primary">{{ isActivateBalance ? '开通' : '续期' }}</span>
-                服务：
-                {{
-                  systemServices.find(
-                    (s) => s.tag === userBalanceState.request_type
-                  )?.name || userBalanceState.request_type
-                }} -->
-                  <div class="flex justify-between items-center gap-1">
-                    <h1 class="text-sm font-medium">
-                      {{ isActivateBalance ? '开通' : '续期' }}
-                      {{
-                        systemServices.find(
-                          (s) => s.tag === userBalanceState.request_type
-                        )?.name || userBalanceState.request_type
-                      }}
-                      服务
-                    </h1>
-                    <p
-                      class="text-xs text-indigo-500 inline-flex items-center gap-1"
-                    >
-                      <UIcon
-                        name="tabler:user-circle"
-                        class="text-base"
-                      />
-                      {{ viewingUser!.username }}
-                    </p>
-                  </div>
-                </template>
-
-                <div class="flex justify-between gap-4">
-                  <UFormGroup
-                    label="到期时间"
-                    class="flex-1"
-                  >
-                    <UPopover :popper="{ placement: 'bottom-start' }">
-                      <UButton
-                        block
-                        variant="soft"
-                        icon="i-heroicons-calendar-days-20-solid"
-                        :label="
-                          dayjs(userBalanceState.expire_time).format(
-                            'YYYY-MM-DD HH:mm'
-                          )
-                        "
-                      />
-
-                      <template #panel="{ close }">
-                        <DatePicker
-                          v-model="userBalanceState.expire_time"
-                          locale="cn"
-                          mode="dateTime"
-                          title-position="left"
-                          is-required
-                          is24hr
-                          @close="close"
-                        />
-                      </template>
-                    </UPopover>
-                  </UFormGroup>
-                  <UFormGroup
-                    label="服务时长(秒)"
-                    class="flex-1"
-                  >
-                    <UInput v-model="userBalanceState.remain_count" />
-                  </UFormGroup>
-                </div>
-
-                <template #footer>
-                  <div class="flex items-center justify-end gap-2">
-                    <UButton
-                      color="gray"
-                      size="sm"
-                      variant="ghost"
-                      @click="isBalanceEditModalOpen = false"
-                    >
-                      取消
-                    </UButton>
-                    <UButton
-                      color="primary"
-                      icon="tabler:check"
-                      size="sm"
-                      @click="
-                        udpateBalance(
-                          userBalanceState.request_type as ServiceTag,
-                          isActivateBalance
-                        )
-                      "
-                    >
-                      {{ isActivateBalance ? '开通' : '续期' }}
-                    </UButton>
-                  </div>
-                </template>
-              </UCard>
-            </UModal>
-          </div>
-
-          <UDivider
-            label="数字人权限管理"
-            class="my-4"
-            :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
-          />
-
-          <div class="border dark:border-neutral-700 rounded-md">
-            <UTable
-              :columns="[
-                { key: 'name', label: '名称' },
-                { key: 'digital_human_id', label: '本地ID' },
-                { key: 'model_id', label: '上游ID' },
-                { key: 'actions' },
-              ]"
-              :loading="digitalHumansDataStatus === 'pending'"
-              :rows="digitalHumansData?.data.items"
-            >
-              <template #actions-data="{ row }">
-                <UButton
-                  color="gray"
-                  icon="tabler:cancel"
-                  size="xs"
-                  variant="ghost"
-                  @click="
-                    revokeDigitalHuman(
-                      viewingUser?.id || 0,
-                      row.digital_human_id
-                    )
-                  "
-                >
-                  撤销授权
-                </UButton>
-              </template>
-            </UTable>
-          </div>
-          <div class="flex justify-between py-3.5">
+      <template #content>
+        <UCard
+          :ui="{
+            body: 'flex-1 overflow-y-auto',
+          }"
+          class="flex flex-col overflow-hidden"
+        >
+          <template #header>
             <UButton
-              icon="tabler:plus"
-              size="xs"
-              @click="isDigitalSelectorOpen = true"
-            >
-              新增授权
-            </UButton>
-            <UPagination
-              v-if="(digitalHumansData?.data.total || -1) > 0"
-              v-model="dhPage"
-              :page-count="dhPageCount"
-              :total="digitalHumansData?.data.total || 0"
+              class="absolute end-5 top-5 z-10 flex"
+              color="neutral"
+              variant="ghost"
+              icon="tabler:x"
+              padded
+              size="sm"
+              square
+              @click="closeSlide"
             />
+            服务和用量管理
+            <p class="text-primary text-sm font-medium">
+              {{ viewingUser?.username }} (UID:{{ viewingUser?.id }})
+            </p>
+          </template>
+
+          <div class="">
+            <USeparator
+              label="服务用量管理"
+              class="mb-4"
+              :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
+            />
+
+            <div class="rounded-md border dark:border-neutral-700">
+              <UTable
+                :columns="[
+                  { accessorKey: 'service', header: '服务' },
+                  { accessorKey: 'status', header: '状态' },
+                  { accessorKey: 'create_time', header: '开通时间' },
+                  { accessorKey: 'expire_time', header: '过期时间' },
+                  { accessorKey: 'remain_count', header: '余量(秒)' },
+                  { accessorKey: 'actions' },
+                ]"
+                :loading="userBalancesStatus === 'pending'"
+                :data="[
+                  ...systemServices,
+                  // 如果 userBalances?.data.items 具有 systemServices 中没有的服务，则添加到列表中
+                  ...(userBalances?.data.items
+                    .filter(
+                      (row) =>
+                        !systemServices.find((s) => s.tag === row.request_type)
+                    )
+                    .map((row) => ({
+                      tag: row.request_type,
+                      name: row.request_type,
+                    })) || []),
+                ]"
+              >
+                <template #service-cell="{ row }">
+                  {{
+                    systemServices.find((s) => s.tag === row.original.tag)
+                      ?.name || row.original.tag
+                  }}
+                </template>
+
+                <template #status-cell="{ row }">
+                  <UBadge
+                    v-if="!getBalanceByTag(row.original.tag)"
+                    color="neutral"
+                    variant="soft"
+                    size="xs"
+                  >
+                    未开通
+                  </UBadge>
+                  <UBadge
+                    v-else-if="
+                      getBalanceByTag(row.original.tag)!.expire_time <
+                      dayjs().unix()
+                    "
+                    color="error"
+                    variant="subtle"
+                    size="xs"
+                  >
+                    已过期
+                  </UBadge>
+                  <UBadge
+                    v-else
+                    color="success"
+                    variant="subtle"
+                    size="xs"
+                  >
+                    生效中
+                  </UBadge>
+                </template>
+
+                <template #create_time-cell="{ row }">
+                  <span class="text-xs">
+                    {{
+                      !!getBalanceByTag(row.original.tag)
+                        ? dayjs(
+                            getBalanceByTag(row.original.tag)!.create_time *
+                              1000
+                          ).format('YYYY-MM-DD HH:mm:ss')
+                        : '未开通'
+                    }}
+                  </span>
+                </template>
+
+                <template #expire_time-cell="{ row }">
+                  <span class="text-xs">
+                    {{
+                      !!getBalanceByTag(row.original.tag)
+                        ? dayjs(
+                            getBalanceByTag(row.original.tag)!.expire_time *
+                              1000
+                          ).format('YYYY-MM-DD HH:mm:ss')
+                        : '未开通'
+                    }}
+                  </span>
+                </template>
+
+                <template #remain_count-cell="{ row }">
+                  <span class="text-sm">
+                    {{ getBalanceByTag(row.original.tag)?.remain_count || 0 }}
+                  </span>
+                </template>
+
+                <template #actions-cell="{ row }">
+                  <UButton
+                    v-if="!getBalanceByTag(row.original.tag)"
+                    color="success"
+                    icon="tabler:clock-check"
+                    size="xs"
+                    variant="soft"
+                    @click="
+                      () => {
+                        isActivateBalance = true
+                        userBalanceEditing = true
+                        userBalanceState.request_type = row.original.tag
+                      }
+                    "
+                  >
+                    开通
+                  </UButton>
+                  <UButton
+                    v-else-if="
+                      getBalanceByTag(row.original.tag)!.expire_time <
+                      dayjs().unix()
+                    "
+                    color="info"
+                    icon="tabler:clock-plus"
+                    size="xs"
+                    variant="soft"
+                    @click="
+                      () => {
+                        isActivateBalance = false
+                        userBalanceEditing = true
+                        userBalanceState.request_type = row.original.tag
+                      }
+                    "
+                  >
+                    延续
+                  </UButton>
+                  <UButton
+                    v-else
+                    color="info"
+                    icon="tabler:rotate-clockwise"
+                    size="xs"
+                    variant="soft"
+                    @click="
+                      () => {
+                        isActivateBalance = false
+                        userBalanceEditing = true
+                        userBalanceState.request_type = row.original.tag
+                        userBalanceState.expire_time =
+                          getBalanceByTag(row.original.tag)!.expire_time * 1000
+                        userBalanceState.remain_count = getBalanceByTag(
+                          row.original.tag
+                        )!.remain_count
+                      }
+                    "
+                  >
+                    更新
+                  </UButton>
+                </template>
+              </UTable>
+
+              <UModal
+                v-model:open="isBalanceEditModalOpen"
+                :ui="{ content: 'w-xl' }"
+              >
+                <template #content>
+                  <UCard>
+                    <template #header>
+                      <div class="flex items-center justify-between gap-1">
+                        <h1 class="text-sm font-medium">
+                          {{ isActivateBalance ? '开通' : '续期' }}
+                          {{
+                            systemServices.find(
+                              (s) => s.tag === userBalanceState.request_type
+                            )?.name || userBalanceState.request_type
+                          }}
+                          服务
+                        </h1>
+                        <p
+                          class="inline-flex items-center gap-1 text-xs text-indigo-500"
+                        >
+                          <UIcon
+                            name="tabler:user-circle"
+                            class="text-base"
+                          />
+                          {{ viewingUser!.username }}
+                        </p>
+                      </div>
+                    </template>
+
+                    <div class="flex justify-between gap-4">
+                      <UFormField
+                        label="到期时间"
+                        class="flex-1"
+                      >
+                        <UPopover :popper="{ placement: 'bottom-start' }">
+                          <UButton
+                            block
+                            variant="soft"
+                            icon="i-heroicons-calendar-days-20-solid"
+                            :label="
+                              dayjs(userBalanceState.expire_time).format(
+                                'YYYY-MM-DD HH:mm'
+                              )
+                            "
+                          />
+
+                          <template #panel="{ close }">
+                            <DatePicker
+                              v-model="userBalanceState.expire_time"
+                              locale="cn"
+                              mode="dateTime"
+                              title-position="left"
+                              is-required
+                              is24hr
+                              @close="close"
+                            />
+                          </template>
+                        </UPopover>
+                      </UFormField>
+                      <UFormField
+                        label="服务时长(秒)"
+                        class="flex-1"
+                      >
+                        <UInput v-model="userBalanceState.remain_count" />
+                      </UFormField>
+                    </div>
+
+                    <template #footer>
+                      <div class="flex items-center justify-end gap-2">
+                        <UButton
+                          color="neutral"
+                          variant="ghost"
+                          size="sm"
+                          @click="isBalanceEditModalOpen = false"
+                        >
+                          取消
+                        </UButton>
+                        <UButton
+                          color="primary"
+                          icon="tabler:check"
+                          size="sm"
+                          @click="
+                            udpateBalance(
+                              userBalanceState.request_type as ServiceTag,
+                              isActivateBalance
+                            )
+                          "
+                        >
+                          {{ isActivateBalance ? '开通' : '续期' }}
+                        </UButton>
+                      </div>
+                    </template>
+                  </UCard>
+                </template>
+              </UModal>
+            </div>
+
+            <USeparator
+              label="数字人权限管理"
+              class="my-4"
+              :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
+            />
+
+            <div class="rounded-md border dark:border-neutral-700">
+              <UTable
+                :columns="[
+                  { accessorKey: 'name', header: '名称' },
+                  { accessorKey: 'digital_human_id', header: '本地ID' },
+                  { accessorKey: 'model_id', header: '上游ID' },
+                  { accessorKey: 'actions' },
+                ]"
+                :loading="digitalHumansDataStatus === 'pending'"
+                :data="digitalHumansData?.data.items"
+              >
+                <template #actions-cell="{ row }">
+                  <UButton
+                    color="neutral"
+                    variant="ghost"
+                    icon="tabler:cancel"
+                    size="xs"
+                    @click="
+                      revokeDigitalHuman(
+                        viewingUser?.id || 0,
+                        row.original.digital_human_id || 0
+                      )
+                    "
+                  >
+                    撤销授权
+                  </UButton>
+                </template>
+              </UTable>
+            </div>
+            <div class="flex justify-between py-3.5">
+              <UButton
+                icon="tabler:plus"
+                size="xs"
+                @click="isDigitalSelectorOpen = true"
+              >
+                新增授权
+              </UButton>
+              <UPagination
+                v-if="(digitalHumansData?.data.total || -1) > 0"
+                v-model:page="dhPage"
+                :page-count="dhPageCount"
+                :total="digitalHumansData?.data.total || 0"
+              />
+            </div>
           </div>
-        </div>
-      </UCard>
-      <ModalDigitalHumanSelect
-        :disabled-digital-human-ids="
-          digitalHumansData?.data.items.map((d) => d.model_id)
-        "
-        :is-open="isDigitalSelectorOpen"
-        default-tab="system"
-        multiple
-        @close="isDigitalSelectorOpen = false"
-        @select="
-          (digitalHumans) =>
-            onDigitalHumansSelected(digitalHumans as DigitalHumanItem[])
-        "
-      />
+        </UCard>
+
+        <ModalDigitalHumanSelect
+          :disabled-digital-human-ids="
+            digitalHumansData?.data.items.map((d) => d.model_id)
+          "
+          :is-open="isDigitalSelectorOpen"
+          default-tab="system"
+          multiple
+          @close="isDigitalSelectorOpen = false"
+          @select="
+            (digitalHumans) =>
+              onDigitalHumansSelected(digitalHumans as DigitalHumanItem[])
+          "
+        />
+      </template>
     </USlideover>
   </LoginNeededContent>
 </template>
-
-<style scoped></style>
diff --git a/app/pages/generation/avatar-models.vue b/app/pages/generation/avatar-models.vue
index a7418a7..eb2ce42 100644
--- a/app/pages/generation/avatar-models.vue
+++ b/app/pages/generation/avatar-models.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { number, object, string, type InferType } from 'yup'
-import type { FormSubmitEvent } from '#ui/types'
+import type { FormSubmitEvent, TableColumn } from '#ui/types'
 
 const toast = useToast()
 const loginState = useLoginState()
@@ -94,7 +94,7 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
         toast.add({
           title: '删除成功',
           description: '数字人已删除',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
         refreshSystemAvatarList()
@@ -102,7 +102,7 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
         toast.add({
           title: '删除失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -111,43 +111,43 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
       toast.add({
         title: '删除失败',
         description: '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     })
 }
 
-const columns = [
+const columns: TableColumn<DigitalHumanItem>[] = [
   {
-    key: 'avatar',
-    label: '图片',
+    accessorKey: 'avatar',
+    header: '图片',
   },
   {
-    key: 'name',
-    label: '名称',
+    accessorKey: 'name',
+    header: '名称',
   },
   {
-    key: 'model_id',
-    label: 'ID',
+    accessorKey: 'model_id',
+    header: 'ID',
   },
   {
-    key: 'type',
-    label: '来源',
+    accessorKey: 'type',
+    header: '来源',
   },
   {
-    key: 'description',
-    label: '备注',
+    accessorKey: 'description',
+    header: '备注',
   },
   {
-    key: 'actions',
+    accessorKey: 'actions',
   },
 ]
 
 const sourceTypeList = [
-  { label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
-  { label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
-  { label: 'xsh_fh', value: 3, color: 'purple' }, // 硅基（泛化数字人）
-  { label: 'xsh_bb', value: 4, color: 'indigo' }, // 百度小冰
+  { label: 'xsh_wm', value: 1, color: 'info' as const }, // 万木（腾讯）
+  { label: 'xsh_zy', value: 2, color: 'success' as const }, // XSH 自有
+  { label: 'xsh_fh', value: 3, color: 'warning' as const }, // 硅基（泛化数字人）
+  { label: 'xsh_bb', value: 4, color: 'primary' as const }, // 百度小冰
 ]
 
 const isCreateSlideOpen = ref(false)
@@ -189,7 +189,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
         toast.add({
           title: '创建成功',
           description: '数字人已创建',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
         refreshSystemAvatarList()
@@ -199,7 +199,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
         toast.add({
           title: '创建失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -208,7 +208,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
       toast.add({
         title: '创建失败',
         description: '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     })
@@ -216,20 +216,22 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
 
 const onAvatarUpload = async (files: FileList) => {
   const file = files[0]
+  if (!file) return
+
   try {
     const url = await useFileGo(file, 'material')
     createAvatarState.avatar = url
     toast.add({
       title: '上传文件成功',
       description: '文件已上传',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch {
     toast.add({
       title: '上传文件失败',
       description: '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   }
@@ -245,7 +247,7 @@ const onAvatarUpload = async (files: FileList) => {
       >
         <template #action>
           <UButton
-            color="gray"
+            color="neutral"
             variant="soft"
             :label="showSystemAvatar ? '显示用户数字人' : '显示系统数字人'"
             @click="showSystemAvatar = !showSystemAvatar"
@@ -257,20 +259,20 @@ const onAvatarUpload = async (files: FileList) => {
                 : 'tabler:layout-grid'
             "
             variant="soft"
-            color="gray"
+            color="neutral"
             @click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
             :label="data_layout === 'grid' ? '列表视图' : '宫格视图'"
           />
           <UButton
             v-if="loginState.user.auth_code === 2"
-            color="amber"
+            color="warning"
             variant="soft"
             icon="tabler:user-cog"
             label="定制管理"
             :to="'/generation/admin/digital-human-train'"
           />
           <UButton
-            color="blue"
+            color="info"
             variant="soft"
             icon="tabler:user-plus"
             label="定制数字人"
@@ -278,7 +280,7 @@ const onAvatarUpload = async (files: FileList) => {
           />
           <UButton
             v-if="loginState.user.auth_code === 2"
-            color="amber"
+            color="warning"
             variant="soft"
             icon="tabler:plus"
             label="创建数字人"
@@ -305,18 +307,18 @@ const onAvatarUpload = async (files: FileList) => {
             ? systemAvatarList?.data.items
             : userAvatarList?.data.items"
           :key="avatar.model_id || k"
-          class="relative rounded-lg shadow-sm overflow-hidden w-full aspect-9/16 group"
+          class="shadow-xs aspect-9/16 group relative w-full overflow-hidden rounded-lg"
         >
           <NuxtImg
             :src="avatar.avatar"
-            class="w-full h-full object-cover"
+            class="h-full w-full object-cover"
           />
           <div
-            class="absolute inset-x-0 bottom-0 p-2 bg-linear-to-t from-black/50 to-transparent flex gap-2"
+            class="bg-linear-to-t absolute inset-x-0 bottom-0 flex gap-2 from-black/50 to-transparent p-2"
           >
             <UBadge
-              color="white"
-              variant="solid"
+              color="neutral"
+              variant="subtle"
               icon="tabler:user-screen"
             >
               {{ avatar.name }}
@@ -334,11 +336,11 @@ const onAvatarUpload = async (files: FileList) => {
             </template>
           </div>
           <div
-            class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
+            class="absolute inset-0 flex flex-col items-center justify-center bg-white/50 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 dark:bg-neutral-800/50"
           >
             <UButtonGroup>
               <UButton
-                color="black"
+                color="neutral"
                 icon="tabler:download"
                 label="下载图片"
                 @click="
@@ -353,7 +355,7 @@ const onAvatarUpload = async (files: FileList) => {
               />
             </UButtonGroup>
             <span
-              class="text-xs font-medium text-neutral-400 dark:text-neutral-300 pt-4"
+              class="pt-4 text-xs font-medium text-neutral-400 dark:text-neutral-300"
             >
               ID: {{ avatar.model_id }}
             </span>
@@ -363,39 +365,40 @@ const onAvatarUpload = async (files: FileList) => {
       <div v-else>
         <div class="flex flex-col gap-4">
           <UTable
-            :rows="
+            :data="
               showSystemAvatar
                 ? systemAvatarList?.data.items
                 : userAvatarList?.data.items
             "
             :columns="columns"
             :loading="userAvatarStatus === 'pending'"
-            :progress="{ color: 'amber', animation: 'carousel' }"
-            class="border dark:border-neutral-800 rounded-md"
+            loading-color="warning"
+            loading-animation="carousel"
+            class="rounded-md border dark:border-neutral-800"
           >
-            <template #avatar-data="{ row }">
+            <template #avatar-cell="{ row }">
               <NuxtImg
-                :src="row.avatar"
-                class="h-16 aspect-9/16 rounded-lg"
+                :src="row.original.avatar"
+                class="h-16 w-auto rounded-lg object-contain"
               />
             </template>
-            <template #type-data="{ row }">
+            <template #type-cell="{ row }">
               <template
                 v-for="(t, i) in sourceTypeList"
                 :key="i"
               >
                 <UBadge
-                  v-if="t.value === row.type"
+                  v-if="t.value === row.original.type"
                   variant="subtle"
                   :color="t.color"
                   :label="t.label"
                 />
               </template>
             </template>
-            <template #actions-data="{ row }">
+            <template #actions-cell="{ row }">
               <div class="flex gap-2">
                 <UButton
-                  color="gray"
+                  color="neutral"
                   icon="tabler:download"
                   label="下载图片"
                   variant="soft"
@@ -403,29 +406,29 @@ const onAvatarUpload = async (files: FileList) => {
                   @click="
                     () => {
                       const { download } = useDownload(
-                        row.avatar,
-                        `数字人_${row.name}.png`
+                        row.original.avatar,
+                        `数字人_${row.original.name}.png`
                       )
                       download()
                     }
                   "
                 />
                 <UButton
-                  color="red"
+                  color="error"
                   icon="tabler:trash"
                   label="删除"
                   variant="soft"
                   size="xs"
-                  @click="onSystemAvatarDelete(row)"
+                  @click="onSystemAvatarDelete(row.original)"
                 />
               </div>
             </template>
           </UTable>
         </div>
       </div>
-      <div class="flex justify-end mt-4">
+      <div class="mt-4 flex justify-end">
         <UPagination
-          v-model="pagination.page"
+          v-model:page="pagination.page"
           :max="9"
           :page-count="pagination.pageSize"
           :total="userAvatarList?.data.total || 0"
@@ -433,81 +436,81 @@ const onAvatarUpload = async (files: FileList) => {
       </div>
     </div>
 
-    <USlideover v-model="isCreateSlideOpen">
-      <UCard
-        :ui="{
-          body: { base: 'flex-1' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-        class="flex flex-col flex-1"
-      >
-        <template #header>
-          <UButton
-            class="flex absolute end-5 top-5 z-10"
-            color="gray"
-            icon="tabler:x"
-            padded
-            size="sm"
-            square
-            variant="ghost"
-            @click="isCreateSlideOpen = false"
-          />
-          创建系统数字人
-        </template>
-
-        <UForm
-          class="space-y-3"
-          :schema="createAvatarSchema"
-          :state="createAvatarState"
-          @submit="onCreateAvatarSubmit"
+    <USlideover v-model:open="isCreateSlideOpen">
+      <template #content>
+        <UCard
+          :ui="{
+            body: 'flex-1',
+          }"
+          class="flex flex-1 flex-col"
         >
-          <UFormGroup
-            label="名称"
-            name="name"
-          >
-            <UInput v-model="createAvatarState.name" />
-          </UFormGroup>
-          <UFormGroup
-            label="备注"
-            name="description"
-          >
-            <UInput v-model="createAvatarState.description" />
-          </UFormGroup>
-          <UFormGroup
-            label="ID"
-            name="model_id"
-          >
-            <UInput v-model="createAvatarState.model_id" />
-          </UFormGroup>
-          <UFormGroup
-            label="图片"
-            name="avatar"
-          >
-            <UniFileDnD
-              accept="image/png,image/jpeg"
-              @change="onAvatarUpload"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="类型"
-            name="type"
-          >
-            <USelectMenu
-              v-model="createAvatarState.type"
-              value-attribute="value"
-              :options="sourceTypeList"
-            />
-          </UFormGroup>
-          <UFormGroup class="flex justify-end pt-4">
+          <template #header>
             <UButton
-              type="submit"
-              color="primary"
-              label="创建"
+              class="absolute end-5 top-5 z-10 flex"
+              color="neutral"
+              icon="tabler:x"
+              padded
+              size="sm"
+              square
+              variant="ghost"
+              @click="isCreateSlideOpen = false"
             />
-          </UFormGroup>
-        </UForm>
-      </UCard>
+            创建系统数字人
+          </template>
+
+          <UForm
+            class="space-y-3"
+            :schema="createAvatarSchema"
+            :state="createAvatarState"
+            @submit="onCreateAvatarSubmit"
+          >
+            <UFormField
+              label="名称"
+              name="name"
+            >
+              <UInput v-model="createAvatarState.name" />
+            </UFormField>
+            <UFormField
+              label="备注"
+              name="description"
+            >
+              <UInput v-model="createAvatarState.description" />
+            </UFormField>
+            <UFormField
+              label="ID"
+              name="model_id"
+            >
+              <UInput v-model="createAvatarState.model_id" />
+            </UFormField>
+            <UFormField
+              label="图片"
+              name="avatar"
+            >
+              <UniFileDnD
+                accept="image/png,image/jpeg"
+                @change="onAvatarUpload"
+              />
+            </UFormField>
+            <UFormField
+              label="类型"
+              name="type"
+            >
+              <USelectMenu
+                v-model="createAvatarState.type"
+                :items="sourceTypeList"
+                value-key="value"
+              />
+            </UFormField>
+            <UFormField class="flex justify-end pt-4">
+              <UButton
+                type="submit"
+                color="primary"
+                label="创建"
+              />
+            </UFormField>
+          </UForm>
+        </UCard>
+      </template>
     </USlideover>
 
     <!-- 数字人定制对话框 -->
diff --git a/app/pages/generation/course.vue b/app/pages/generation/course.vue
index 6876a7a..339b819 100644
--- a/app/pages/generation/course.vue
+++ b/app/pages/generation/course.vue
@@ -4,8 +4,9 @@ import SlideCreateCourse from '~/components/SlideCreateCourse.vue'
 import { useFetchWrapped } from '~/composables/useFetchWrapped'
 
 const toast = useToast()
-const modal = useModal()
-const slide = useSlideover()
+const overlay = useOverlay()
+const modal = overlay.create(ModalAuthentication)
+const slide = overlay.create(SlideCreateCourse)
 const loginState = useLoginState()
 
 const deletePending = ref(false)
@@ -28,12 +29,10 @@ const { data: courseList, refresh: refreshCourseList } = useAsyncData(
   }
 )
 
-const onCreateCourseClick = () => {
-  slide.open(SlideCreateCourse, {
-    onSuccess: () => {
-      refreshCourseList()
-    },
-  })
+const onCreateCourseClick = async () => {
+  const slideInst = slide.open()
+  await slideInst
+  refreshCourseList()
 }
 
 const onCourseDelete = (task_id: string) => {
@@ -53,14 +52,14 @@ const onCourseDelete = (task_id: string) => {
         toast.add({
           title: '删除成功',
           description: '已删除任务记录',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
       } else {
         toast.add({
           title: '删除失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -107,7 +106,7 @@ onMounted(() => {
             @click="
               () => {
                 if (!loginState.is_logged_in) {
-                  modal.open(ModalAuthentication)
+                  modal.open()
                   return
                 }
                 onCreateCourseClick()
@@ -121,7 +120,7 @@ onMounted(() => {
     <Transition name="loading-screen">
       <div
         v-if="courseList?.data.items.length === 0"
-        class="w-full py-20 flex flex-col justify-center items-center gap-2"
+        class="flex w-full flex-col items-center justify-center gap-2 py-20"
       >
         <Icon
           class="text-7xl text-neutral-300 dark:text-neutral-700"
@@ -134,7 +133,7 @@ onMounted(() => {
         class="p-4"
       >
         <div
-          class="relative grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5 gap-4"
+          class="relative grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5"
         >
           <TransitionGroup
             name="card"
@@ -149,9 +148,9 @@ onMounted(() => {
             />
           </TransitionGroup>
         </div>
-        <div class="flex justify-end mt-4">
+        <div class="mt-4 flex justify-end">
           <UPagination
-            v-model="page"
+            v-model:page="page"
             :max="9"
             :page-count="16"
             :total="courseList?.data.total || 0"
diff --git a/app/pages/generation/green-screen.vue b/app/pages/generation/green-screen.vue
index ed32d6c..8371e1c 100644
--- a/app/pages/generation/green-screen.vue
+++ b/app/pages/generation/green-screen.vue
@@ -5,7 +5,8 @@ import { useTourState } from '~/composables/useTourState'
 import SlideCreateCourseGreen from '~/components/SlideCreateCourseGreen.vue'
 
 const route = useRoute()
-const slide = useSlideover()
+const overlay = useOverlay()
+const slide = overlay.create(SlideCreateCourseGreen)
 const toast = useToast()
 const loginState = useLoginState()
 const tourState = useTourState()
@@ -35,12 +36,10 @@ const { data: videoList, refresh: refreshVideoList } = useAsyncData(
   }
 )
 
-const onCreateCourseGreenClick = () => {
-  slide.open(SlideCreateCourseGreen, {
-    onSuccess: () => {
-      refreshVideoList()
-    },
-  })
+const onCreateCourseGreenClick = async () => {
+  const slideInst = slide.open()
+  await slideInst
+  refreshVideoList()
 }
 
 const onCourseGreenDelete = (task: GBVideoItem) => {
@@ -58,14 +57,14 @@ const onCourseGreenDelete = (task: GBVideoItem) => {
       toast.add({
         title: '删除成功',
         description: '已删除任务记录',
-        color: 'green',
+        color: 'success',
         icon: 'i-tabler-check',
       })
     } else {
       toast.add({
         title: '删除失败',
         description: res.msg || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     }
@@ -137,7 +136,6 @@ onMounted(() => {
               id="input-search"
               v-model="searchInput"
               :autofocus="false"
-              :ui="{ icon: { trailing: { pointer: '' } } }"
               autocomplete="off"
               placeholder="标题搜索"
               variant="outline"
@@ -146,7 +144,7 @@ onMounted(() => {
                 <UButton
                   v-show="searchInput !== ''"
                   :padded="false"
-                  color="gray"
+                  color="neutral"
                   icon="i-tabler-x"
                   variant="link"
                   @click="searchInput = ''"
@@ -172,7 +170,7 @@ onMounted(() => {
     <Transition name="loading-screen">
       <div
         v-if="videoList?.data.items.length === 0"
-        class="w-full py-20 flex flex-col justify-center items-center gap-2"
+        class="flex w-full flex-col items-center justify-center gap-2 py-20"
       >
         <Icon
           class="text-7xl text-neutral-300 dark:text-neutral-700"
@@ -183,7 +181,7 @@ onMounted(() => {
       <div v-else>
         <div class="p-4">
           <div
-            class="relative grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5 gap-4"
+            class="relative grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5"
           >
             <TransitionGroup
               name="card"
@@ -198,9 +196,9 @@ onMounted(() => {
               />
             </TransitionGroup>
           </div>
-          <div class="flex justify-end mt-4">
+          <div class="mt-4 flex justify-end">
             <UPagination
-              v-model="page"
+              v-model:page="page"
               :max="9"
               :page-count="pageCount"
               :total="videoList?.data.total || 0"
diff --git a/app/pages/generation/materials.vue b/app/pages/generation/materials.vue
index 7ce3db6..97042af 100644
--- a/app/pages/generation/materials.vue
+++ b/app/pages/generation/materials.vue
@@ -110,14 +110,14 @@ const onSystemTitlesDelete = (titles: TitlesTemplate) => {
         toast.add({
           title: '删除成功',
           description: '已删除系统片头模板',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
       } else {
         toast.add({
           title: '删除失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -126,7 +126,7 @@ const onSystemTitlesDelete = (titles: TitlesTemplate) => {
       toast.add({
         title: '删除失败',
         description: error instanceof Error ? error.message : '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     })
@@ -153,14 +153,14 @@ const onUserTitlesDelete = (titles: TitlesTemplate) => {
         toast.add({
           title: '删除成功',
           description: '已删除片头素材',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
       } else {
         toast.add({
           title: '删除失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -188,14 +188,14 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
         toast.add({
           title: '提交成功',
           description: '已提交片头制作请求',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
       } else {
         toast.add({
           title: '提交失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -217,7 +217,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
       >
         <template #action>
           <UButton
-            color="amber"
+            color="warning"
             icon="tabler:plus"
             variant="soft"
             v-if="loginState.user.auth_code === 2"
@@ -231,18 +231,18 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
     </div>
     <div class="p-4">
       <div
-        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
         v-if="systemTitlesTemplateStatus === 'pending'"
       >
         <USkeleton
-          class="w-full aspect-video"
+          class="aspect-video w-full"
           v-for="i in systemPagination.pageSize"
           :key="i"
         />
       </div>
       <div
         v-else-if="systemTitlesTemplate?.data.items.length === 0"
-        class="w-full py-20 flex flex-col justify-center items-center gap-2"
+        class="flex w-full flex-col items-center justify-center gap-2 py-20"
       >
         <Icon
           class="text-7xl text-neutral-300 dark:text-neutral-700"
@@ -253,7 +253,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
         </p>
       </div>
       <div
-        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
         v-else
       >
         <AigcGenerationTitlesTemplate
@@ -298,18 +298,18 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
         </template>
       </UAlert>
       <div
-        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
         v-if="userTitlesTemplateStatus === 'pending'"
       >
         <USkeleton
-          class="w-full aspect-video"
+          class="aspect-video w-full"
           v-for="i in userPagination.pageSize"
           :key="i"
         />
       </div>
       <div
         v-else-if="userTitlesTemplate?.data.items.length === 0"
-        class="w-full py-20 flex flex-col justify-center items-center gap-2"
+        class="flex w-full flex-col items-center justify-center gap-2 py-20"
       >
         <Icon
           class="text-7xl text-neutral-300 dark:text-neutral-700"
@@ -320,7 +320,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
         </p>
       </div>
       <div
-        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
         v-else
       >
         <AigcGenerationTitlesTemplate
@@ -333,90 +333,87 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
       </div>
     </div>
 
-    <UModal v-model="isUserTitlesRequestModalActive">
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <div
-              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
-            >
-              <p>使用模板</p>
-            </div>
-            <UButton
-              class="-my-1"
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isUserTitlesRequestModalActive = false"
-            />
-          </div>
-        </template>
-
-        <div>
-          <UForm
-            class="space-y-4"
-            :schema="userTitlesSchema"
-            :state="userTitlesState"
-            @submit="onUserTitlesSubmit"
-          >
-            <UFormGroup
-              label="课程名称"
-              name="title"
-              required
-            >
-              <UInput v-model="userTitlesState.title" />
-            </UFormGroup>
-            <UFormGroup
-              label="主讲人"
-              name="description"
-              required
-            >
-              <UInput v-model="userTitlesState.description" />
-            </UFormGroup>
-            <UFormGroup
-              label="备注"
-              name="remark"
-              help="可选，可以在此处填写学校、单位等额外信息"
-            >
-              <UTextarea v-model="userTitlesState.remark" />
-            </UFormGroup>
-            <UFormGroup name="title_id">
-              <UInput
-                type="hidden"
-                v-model="userTitlesState.title_id"
-              />
-            </UFormGroup>
-
-            <UAlert
-              icon="tabler:info-circle"
-              color="primary"
-              variant="subtle"
-              title="片头片尾模板"
-              description="提交模板相应字段后，待工作人员制作好后即可使用"
-            />
-
-            <div class="flex justify-end gap-2">
+    <UModal v-model:open="isUserTitlesRequestModalActive">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div
+                class="overflow-hidden text-base font-semibold leading-6 text-gray-900 dark:text-white"
+              >
+                <p>使用模板</p>
+              </div>
               <UButton
-                color="primary"
-                variant="soft"
-                label="取消"
+                class="-my-1"
+                color="neutral"
+                icon="i-tabler-x"
+                variant="ghost"
                 @click="isUserTitlesRequestModalActive = false"
               />
-              <UButton
-                color="primary"
-                type="submit"
-              >
-                提交
-              </UButton>
             </div>
-          </UForm>
-        </div>
-      </UCard>
+          </template>
+
+          <div>
+            <UForm
+              class="space-y-4"
+              :schema="userTitlesSchema"
+              :state="userTitlesState"
+              @submit="onUserTitlesSubmit"
+            >
+              <UFormField
+                label="课程名称"
+                name="title"
+                required
+              >
+                <UInput v-model="userTitlesState.title" />
+              </UFormField>
+              <UFormField
+                label="主讲人"
+                name="description"
+                required
+              >
+                <UInput v-model="userTitlesState.description" />
+              </UFormField>
+              <UFormField
+                label="备注"
+                name="remark"
+                help="可选，可以在此处填写学校、单位等额外信息"
+              >
+                <UTextarea v-model="userTitlesState.remark" />
+              </UFormField>
+              <UFormField name="title_id">
+                <UInput
+                  type="hidden"
+                  v-model="userTitlesState.title_id"
+                />
+              </UFormField>
+
+              <UAlert
+                icon="tabler:info-circle"
+                color="primary"
+                variant="subtle"
+                title="片头片尾模板"
+                description="提交模板相应字段后，待工作人员制作好后即可使用"
+              />
+
+              <div class="flex justify-end gap-2">
+                <UButton
+                  color="primary"
+                  variant="soft"
+                  label="取消"
+                  @click="isUserTitlesRequestModalActive = false"
+                />
+                <UButton
+                  color="primary"
+                  type="submit"
+                >
+                  提交
+                </UButton>
+              </div>
+            </UForm>
+          </div>
+        </UCard>
+      </template>
     </UModal>
   </div>
 </template>
diff --git a/app/pages/generation/ppt-templates.vue b/app/pages/generation/ppt-templates.vue
index 6da0836..c9fc1d0 100644
--- a/app/pages/generation/ppt-templates.vue
+++ b/app/pages/generation/ppt-templates.vue
@@ -102,7 +102,7 @@ const onCreateSubmit = (event: FormSubmitEvent<PPTCreateSchema>) => {
         toast.add({
           title: '创建成功',
           description: '已加入模板库',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
         isCreateSlideOpen.value = false
@@ -120,14 +120,14 @@ const onCreateSubmit = (event: FormSubmitEvent<PPTCreateSchema>) => {
       toast.add({
         title: '创建失败',
         description: '请检查输入是否正确',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     })
 }
 
 const onFileSelect = async (files: FileList, type: 'preview' | 'ppt') => {
-  const url = await useFileGo(files[0], 'material')
+  const url = await useFileGo(files[0]!, 'material')
   if (type === 'preview') {
     pptCreateState.preview_url = url
   } else {
@@ -136,7 +136,7 @@ const onFileSelect = async (files: FileList, type: 'preview' | 'ppt') => {
   toast.add({
     title: '上传成功',
     description: `已上传 ${type === 'preview' ? '预览图' : 'PPT 文件'}`,
-    color: 'green',
+    color: 'success',
     icon: 'i-tabler-check',
   })
 }
@@ -156,14 +156,14 @@ const onDeletePPT = (ppt: PPTTemplate) => {
         toast.add({
           title: '删除成功',
           description: '已删除模板',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
       } else {
         toast.add({
           title: '删除失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -172,7 +172,7 @@ const onDeletePPT = (ppt: PPTTemplate) => {
       toast.add({
         title: '删除失败',
         description: '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     })
@@ -196,7 +196,7 @@ const onCreateCat = () => {
           toast.add({
             title: '创建成功',
             description: '已加入分类列表',
-            color: 'green',
+            color: 'success',
             icon: 'i-tabler-check',
           })
           createCatInput.value = ''
@@ -206,7 +206,7 @@ const onCreateCat = () => {
         toast.add({
           title: '创建失败',
           description: '请检查输入是否正确',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       })
@@ -228,14 +228,14 @@ const onDeleteCat = (cat: PPTCategory) => {
         toast.add({
           title: '删除成功',
           description: '已删除分类',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
       } else {
         toast.add({
           title: '删除失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -244,7 +244,7 @@ const onDeleteCat = (cat: PPTCategory) => {
       toast.add({
         title: '删除失败',
         description: '请检查输入是否正确',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     })
@@ -262,7 +262,7 @@ const onDeleteCat = (cat: PPTCategory) => {
           <UButton
             v-if="loginState.user.auth_code === 2"
             label="分类管理"
-            color="amber"
+            color="warning"
             variant="soft"
             icon="tabler:grid"
             @click="isCatSlideOpen = true"
@@ -270,7 +270,7 @@ const onDeleteCat = (cat: PPTCategory) => {
           <UButton
             v-if="loginState.user.auth_code === 2"
             label="创建模板"
-            color="amber"
+            color="warning"
             variant="soft"
             icon="tabler:plus"
             @click="isCreateSlideOpen = true"
@@ -293,7 +293,7 @@ const onDeleteCat = (cat: PPTCategory) => {
             'bg-primary text-white': selectedCat === cat.id,
             'bg-gray-100 text-gray-500': selectedCat !== cat.id,
           }"
-          class="rounded-lg px-4 py-2 text-sm cursor-pointer"
+          class="cursor-pointer rounded-lg px-4 py-2 text-sm"
         >
           {{ cat.type }}
         </div>
@@ -302,7 +302,7 @@ const onDeleteCat = (cat: PPTCategory) => {
       <div class="space-y-4">
         <div
           v-if="pptTemplates?.data.items.length === 0"
-          class="w-full py-20 flex flex-col justify-center items-center gap-2"
+          class="flex w-full flex-col items-center justify-center gap-2 py-20"
         >
           <Icon
             class="text-7xl text-neutral-300 dark:text-neutral-700"
@@ -314,20 +314,20 @@ const onDeleteCat = (cat: PPTCategory) => {
         </div>
         <div
           v-else
-          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 mt-4"
+          class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4"
         >
           <div
             v-for="ppt in pptTemplates?.data.items"
             :key="ppt.id"
-            class="relative bg-white rounded-lg shadow-md overflow-hidden"
+            class="relative overflow-hidden rounded-lg bg-white shadow-md"
           >
             <NuxtImg
               :src="ppt.preview_url"
               :alt="ppt.title"
-              class="w-full aspect-video object-cover"
+              class="aspect-video w-full object-cover"
             />
             <div
-              class="absolute inset-x-0 bottom-0 p-3 pt-6 flex justify-between items-end bg-linear-to-t from-black/50 to-transparent"
+              class="bg-linear-to-t absolute inset-x-0 bottom-0 flex items-end justify-between from-black/50 to-transparent p-3 pt-6"
             >
               <div class="space-y-0.5">
                 <h3 class="text-base font-bold text-white">{{ ppt.title }}</h3>
@@ -340,7 +340,7 @@ const onDeleteCat = (cat: PPTCategory) => {
                 <UButton
                   v-if="loginState.user.auth_code === 2"
                   size="sm"
-                  color="red"
+                  color="error"
                   icon="tabler:trash"
                   variant="soft"
                   @click="onDeletePPT(ppt)"
@@ -357,173 +357,173 @@ const onDeleteCat = (cat: PPTCategory) => {
           </div>
         </div>
 
-        <div class="w-full flex justify-end">
+        <div class="flex w-full justify-end">
           <UPagination
             v-if="(pptTemplates?.data.total || 0) > pagination.perpage"
             :total="pptTemplates?.data.total"
             :page-count="pagination.perpage"
             :max="9"
-            v-model="pagination.page"
+            v-model:page="pagination.page"
           />
         </div>
       </div>
     </div>
 
-    <USlideover v-model="isCreateSlideOpen">
-      <UCard
-        :ui="{
-          body: { base: 'flex-1' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-        class="flex flex-col flex-1"
-      >
-        <template #header>
-          <UButton
-            class="flex absolute end-5 top-5 z-10"
-            color="gray"
-            icon="tabler:x"
-            padded
-            size="sm"
-            square
-            variant="ghost"
-            @click="isCreateSlideOpen = false"
-          />
-          创建 PPT 模板
-        </template>
-
-        <UForm
-          class="space-y-4"
-          :schema="pptCreateSchema"
-          :state="pptCreateState"
-          @submit="onCreateSubmit"
+    <USlideover v-model:open="isCreateSlideOpen">
+      <template #content>
+        <UCard
+          :ui="{
+            body: 'flex-1',
+          }"
+          class="flex flex-1 flex-col"
         >
-          <UFormGroup
-            label="模板标题"
-            name="title"
-          >
-            <UInput v-model="pptCreateState.title" />
-          </UFormGroup>
-          <UFormGroup
-            label="模板描述"
-            name="description"
-          >
-            <UTextarea v-model="pptCreateState.description" />
-          </UFormGroup>
-          <UFormGroup
-            label="模板分类"
-            name="type"
-          >
-            <USelectMenu
-              v-model="pptCreateState.type"
-              value-attribute="value"
-              option-attribute="label"
-              searchable
-              searchable-placeholder="搜索现有分类..."
-              :options="selectMenuOptions"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="预览图"
-            name="preview_url"
-          >
-            <UniFileDnD
-              @change="onFileSelect($event, 'preview')"
-              accept="image/png,image/jpeg"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="PPT 文件"
-            name="file_url"
-          >
-            <UniFileDnD
-              @change="onFileSelect($event, 'ppt')"
-              accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
-            />
-          </UFormGroup>
-
-          <div class="flex justify-end">
+          <template #header>
             <UButton
-              label="创建"
-              color="primary"
-              type="submit"
+              class="absolute end-5 top-5 z-10 flex"
+              color="neutral"
+              icon="tabler:x"
+              padded
+              size="sm"
+              square
+              variant="ghost"
+              @click="isCreateSlideOpen = false"
             />
-          </div>
-        </UForm>
-      </UCard>
-    </USlideover>
-    <USlideover v-model="isCatSlideOpen">
-      <UCard
-        :ui="{
-          body: { base: 'flex-1' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-        class="flex flex-col flex-1"
-      >
-        <template #header>
-          <UButton
-            class="flex absolute end-5 top-5 z-10"
-            color="gray"
-            icon="tabler:x"
-            padded
-            size="sm"
-            square
-            variant="ghost"
-            @click="isCatSlideOpen = false"
-          />
-          PPT 模板分类管理
-        </template>
+            创建 PPT 模板
+          </template>
 
-        <div class="space-y-4">
-          <UFormGroup label="创建分类">
-            <UButtonGroup
-              orientation="horizontal"
-              class="w-full"
-              size="lg"
+          <UForm
+            class="space-y-4"
+            :schema="pptCreateSchema"
+            :state="pptCreateState"
+            @submit="onCreateSubmit"
+          >
+            <UFormField
+              label="模板标题"
+              name="title"
             >
-              <UInput
-                class="flex-1"
-                placeholder="分类名称"
-                v-model="createCatInput"
+              <UInput v-model="pptCreateState.title" />
+            </UFormField>
+            <UFormField
+              label="模板描述"
+              name="description"
+            >
+              <UTextarea v-model="pptCreateState.description" />
+            </UFormField>
+            <UFormField
+              label="模板分类"
+              name="type"
+            >
+              <USelectMenu
+                v-model="pptCreateState.type"
+                :items="selectMenuOptions"
+                value-key="value"
+                searchable
+                searchable-placeholder="搜索现有分类..."
               />
+            </UFormField>
+            <UFormField
+              label="预览图"
+              name="preview_url"
+            >
+              <UniFileDnD
+                @change="onFileSelect($event, 'preview')"
+                accept="image/png,image/jpeg"
+              />
+            </UFormField>
+            <UFormField
+              label="PPT 文件"
+              name="file_url"
+            >
+              <UniFileDnD
+                @change="onFileSelect($event, 'ppt')"
+                accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
+              />
+            </UFormField>
+
+            <div class="flex justify-end">
               <UButton
-                icon="tabler:plus"
-                color="gray"
                 label="创建"
-                :disabled="!createCatInput"
-                @click="onCreateCat"
+                color="primary"
+                type="submit"
               />
-            </UButtonGroup>
-          </UFormGroup>
-          <div class="border dark:border-neutral-700 rounded-md">
-            <UTable
-              :columns="[
-                { key: 'id', label: 'ID' },
-                { key: 'type', label: '分类' },
-                { key: 'create_time', label: '创建时间' },
-                { key: 'actions' },
-              ]"
-              :rows="pptCategories?.data.items"
-            >
-              <template #create_time-data="{ row }">
-                {{
-                  dayjs(row.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
-                }}
-              </template>
-              <template #actions-data="{ row }">
-                <UButton
-                  color="red"
-                  icon="tabler:trash"
-                  size="xs"
-                  variant="soft"
-                  @click="onDeleteCat(row)"
+            </div>
+          </UForm>
+        </UCard>
+      </template>
+    </USlideover>
+
+    <USlideover v-model:open="isCatSlideOpen">
+      <template #content>
+        <UCard
+          :ui="{
+            body: 'flex-1',
+          }"
+          class="flex flex-1 flex-col"
+        >
+          <template #header>
+            <UButton
+              class="absolute end-5 top-5 z-10 flex"
+              color="neutral"
+              icon="tabler:x"
+              padded
+              size="sm"
+              square
+              variant="ghost"
+              @click="isCatSlideOpen = false"
+            />
+            PPT 模板分类管理
+          </template>
+
+          <div class="space-y-4">
+            <UFormField label="创建分类">
+              <UButtonGroup
+                orientation="horizontal"
+                class="w-full"
+                size="lg"
+              >
+                <UInput
+                  class="flex-1"
+                  placeholder="分类名称"
+                  v-model="createCatInput"
                 />
-              </template>
-            </UTable>
+                <UButton
+                  icon="tabler:plus"
+                  color="neutral"
+                  label="创建"
+                  :disabled="!createCatInput"
+                  @click="onCreateCat"
+                />
+              </UButtonGroup>
+            </UFormField>
+            <div class="rounded-md border dark:border-neutral-700">
+              <UTable
+                :columns="[
+                  { accessorKey: 'id', header: 'ID' },
+                  { accessorKey: 'type', header: '分类' },
+                  { accessorKey: 'create_time', header: '创建时间' },
+                  { accessorKey: 'actions' },
+                ]"
+                :rows="pptCategories?.data.items"
+              >
+                <template #create_time-data="{ row }">
+                  {{
+                    dayjs(row.original.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
+                  }}
+                </template>
+                <template #actions-data="{ row }">
+                  <UButton
+                    color="error"
+                    icon="tabler:trash"
+                    size="xs"
+                    variant="soft"
+                    @click="onDeleteCat(row.original)"
+                  />
+                </template>
+              </UTable>
+            </div>
           </div>
-        </div>
-      </UCard>
+        </UCard>
+      </template>
     </USlideover>
   </div>
 </template>
diff --git a/app/pages/profile.vue b/app/pages/profile.vue
index 59d6240..59a22a1 100644
--- a/app/pages/profile.vue
+++ b/app/pages/profile.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { number, object, string, ref as yref, type InferType } from 'yup'
-import type { FormSubmitEvent } from '#ui/types'
+import type { FormSubmitEvent, TabsItem } from '#ui/types'
 
 const toast = useToast()
 const route = useRoute()
@@ -9,30 +9,31 @@ const loginState = useLoginState()
 
 const tabs = [
   {
-    slot: 'info',
+    slot: 'info' as const,
     label: '基本资料',
     icon: 'tabler:user-square-rounded',
   },
   {
-    slot: 'security',
+    slot: 'security' as const,
     label: '账号安全',
     icon: 'tabler:shield-half-filled',
   },
-]
+] satisfies TabsItem[]
 
 const currentTab = computed({
   get() {
-    const index = tabs.findIndex((item) => item.slot === route.query.tab)
-    if (index === -1) {
-      return 0
-    }
+    // const index = tabs.findIndex((item) => item.slot === route.query.tab)
+    // if (index === -1) {
+    //   return 0
+    // }
 
-    return index
+    // return index
+    return (route.query.tab as string) || tabs[0]?.slot || 'info'
   },
-  set(value) {
+  set(tab) {
     // Hash is specified here to prevent the page from scrolling to the top
     router.replace({
-      query: { tab: tabs[value].slot },
+      query: { tab },
     })
   },
 })
@@ -80,7 +81,7 @@ const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
         toast.add({
           title: '个人资料已更新',
           description: '您的个人资料已更新成功',
-          color: 'green',
+          color: 'success',
         })
         loginState.updateProfile()
         isEditProfileModified.value = false
@@ -88,7 +89,7 @@ const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
         toast.add({
           title: '更新失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
         })
       }
     })
@@ -96,7 +97,7 @@ const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
       toast.add({
         title: '更新失败',
         description: err.message || '未知错误',
-        color: 'red',
+        color: 'error',
       })
     })
 }
@@ -135,7 +136,7 @@ const onChangePasswordSubmit = (
         toast.add({
           title: '密码已修改',
           description: '请重新登录',
-          color: 'green',
+          color: 'success',
         })
         setTimeout(() => {
           loginState.logout()
@@ -145,7 +146,7 @@ const onChangePasswordSubmit = (
         toast.add({
           title: '修改密码失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
         })
       }
     })
@@ -153,7 +154,7 @@ const onChangePasswordSubmit = (
       toast.add({
         title: '修改密码失败',
         description: err.message || '未知错误',
-        color: 'red',
+        color: 'error',
       })
     })
 }
@@ -163,8 +164,8 @@ const onChangePasswordSubmit = (
   <LoginNeededContent
     content-class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0"
   >
-    <div class="container max-w-[1280px] mx-auto pt-12 flex flex-col gap-12">
-      <h1 class="text-2xl font-medium inline-flex items-center gap-2">
+    <div class="container mx-auto flex max-w-7xl flex-col gap-12 pt-12">
+      <h1 class="inline-flex items-center gap-2 text-2xl font-medium">
         <UIcon
           name="line-md:person"
           class="text-3xl"
@@ -179,10 +180,8 @@ const onChangePasswordSubmit = (
             :src="loginState.user?.avatar"
             :alt="loginState.user?.nickname || loginState.user?.username"
             :ui="{
-              rounded: 'rounded-xl',
-              size: {
-                huge: 'w-48 h-48 text-4xl',
-              },
+              root: 'size-14 text-4xl',
+              image: 'rounded-xl',
             }"
           />
           <div>
@@ -203,16 +202,19 @@ const onChangePasswordSubmit = (
         <div>
           <UTabs
             v-model="currentTab"
-            :items="tabs"
             orientation="vertical"
+            :items="tabs"
             :ui="{
-              wrapper:
-                'w-full flex flex-col sm:flex-row items-start gap-4 sm:gap-16',
-              list: {
-                width: 'w-full sm:w-48 h-fit',
-                background: 'bg-transparent',
-                tab: { active: 'bg-neutral-100 dark:bg-neutral-700' },
-              },
+              root: 'w-full flex flex-col sm:flex-row items-start gap-4 sm:gap-16',
+              list: 'w-full sm:w-48 h-fit bg-transparent',
+              indicator:
+                'data-[state=active]:bg-neutral-100 data-[state=active]:dark:bg-neutral-700',
+              trigger: 'w-full',
+              // list: {
+              //   width: 'w-full sm:w-48 h-fit',
+              //   background: 'bg-transparent',
+              //   tab: { active: 'bg-neutral-100 dark:bg-neutral-700' },
+              // },
             }"
           >
             <template #info>
@@ -224,15 +226,15 @@ const onChangePasswordSubmit = (
                   @submit="onEditProfileSubmit"
                   @change="isEditProfileModified = true"
                 >
-                  <UFormGroup
+                  <UFormField
                     name="username"
                     label="姓名"
                     help="您的真实姓名，将用于登录系统"
                     hint="账户名"
                   >
                     <UInput v-model="editProfileState.username" />
-                  </UFormGroup>
-                  <UFormGroup
+                  </UFormField>
+                  <UFormField
                     name="mobile"
                     label="手机号码"
                     help="手机号作为登录和找回密码的凭证，暂不支持修改"
@@ -241,27 +243,27 @@ const onChangePasswordSubmit = (
                       :placeholder="loginState.user?.mobile || 'nil'"
                       disabled
                     />
-                  </UFormGroup>
-                  <UFormGroup
+                  </UFormField>
+                  <UFormField
                     name="sex"
                     label="性别"
                   >
                     <USelect
                       v-model="editProfileState.sex"
-                      :options="[
+                      :items="[
                         { label: '男', value: 1 },
                         { label: '女', value: 2 },
                         { label: '保密', value: 0 },
                       ]"
                     />
-                  </UFormGroup>
-                  <UFormGroup
+                  </UFormField>
+                  <UFormField
                     name="company"
                     label="公司/学校/组织名称"
                     help="您所在的公司或组织名称"
                   >
                     <UInput v-model="editProfileState.company" />
-                  </UFormGroup>
+                  </UFormField>
 
                   <div>
                     <UButton
@@ -274,6 +276,7 @@ const onChangePasswordSubmit = (
                 </UForm>
               </div>
             </template>
+
             <template #security>
               <div class="tab-content space-y-4">
                 <UForm
@@ -282,7 +285,7 @@ const onChangePasswordSubmit = (
                   :state="changePasswordState"
                   @submit="onChangePasswordSubmit"
                 >
-                  <UFormGroup
+                  <UFormField
                     name="old_password"
                     label="旧密码"
                   >
@@ -290,8 +293,8 @@ const onChangePasswordSubmit = (
                       type="password"
                       v-model="changePasswordState.old_password"
                     />
-                  </UFormGroup>
-                  <UFormGroup
+                  </UFormField>
+                  <UFormField
                     name="new_password"
                     label="新密码"
                   >
@@ -299,8 +302,8 @@ const onChangePasswordSubmit = (
                       type="password"
                       v-model="changePasswordState.new_password"
                     />
-                  </UFormGroup>
-                  <UFormGroup
+                  </UFormField>
+                  <UFormField
                     name="confirm_password"
                     label="确认新密码"
                   >
@@ -308,13 +311,13 @@ const onChangePasswordSubmit = (
                       type="password"
                       v-model="changePasswordState.confirm_password"
                     />
-                  </UFormGroup>
+                  </UFormField>
 
                   <div>
                     <UButton type="submit">修改密码</UButton>
                   </div>
                 </UForm>
-                <!-- <UDivider /> -->
+                <!-- <USeparator /> -->
               </div>
             </template>
           </UTabs>
@@ -325,7 +328,9 @@ const onChangePasswordSubmit = (
 </template>
 
 <style scoped>
+@reference '@/assets/css/main.css';
+
 .tab-content {
-  @apply bg-neutral-50 dark:bg-neutral-800 rounded-lg p-6;
+  @apply rounded-lg bg-neutral-50 p-6 dark:bg-neutral-800;
 }
 </style>
diff --git a/app/pages/user/authenticate.vue b/app/pages/user/authenticate.vue
index 3f2b42b..071959f 100644
--- a/app/pages/user/authenticate.vue
+++ b/app/pages/user/authenticate.vue
@@ -63,7 +63,7 @@ function onSubmit(form: req.user.Login) {
         toast.add({
           title: '登录失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -72,7 +72,7 @@ function onSubmit(form: req.user.Login) {
         toast.add({
           title: '登录失败',
           description: res.msg || '账号或密码错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -81,7 +81,7 @@ function onSubmit(form: req.user.Login) {
         toast.add({
           title: '登录失败',
           description: res.msg || '无法获取登录状态',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -104,7 +104,7 @@ function onSubmit(form: req.user.Login) {
           toast.add({
             title: '登录失败',
             description: err.msg || '网络错误',
-            color: 'red',
+            color: 'error',
             icon: 'i-tabler-circle-x',
           })
         })
@@ -116,7 +116,7 @@ function onSubmit(form: req.user.Login) {
       toast.add({
         title: '登录失败',
         description: err.msg || '网络错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-circle-x',
       })
     })
@@ -138,7 +138,7 @@ const obtainSmsCode = () => {
         toast.add({
           title: '验证码发送失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -148,7 +148,7 @@ const obtainSmsCode = () => {
       sms_counting_down.value = 60 // TODO: save timestamp to localstorage
       toast.add({
         title: '短信验证码已发送',
-        color: 'indigo',
+        color: 'primary',
         icon: 'i-tabler-circle-check',
       })
       const interval = setInterval(() => {
@@ -162,7 +162,7 @@ const obtainSmsCode = () => {
       toast.add({
         title: '验证码发送失败',
         description: err.msg || '网络错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-circle-x',
       })
     })
@@ -183,7 +183,7 @@ const handle_sms_verify = (e: string[]) => {
         toast.add({
           title: '登录失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -193,7 +193,7 @@ const handle_sms_verify = (e: string[]) => {
         toast.add({
           title: '登录失败',
           description: res.msg || '无法获取登录状态',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -216,7 +216,7 @@ const handle_sms_verify = (e: string[]) => {
           toast.add({
             title: '登录失败',
             description: err.msg || '网络错误',
-            color: 'red',
+            color: 'error',
             icon: 'i-tabler-circle-x',
           })
         })
@@ -259,7 +259,7 @@ const obtainForgetSmsCode = () => {
         toast.add({
           title: '验证码发送失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -269,7 +269,7 @@ const obtainForgetSmsCode = () => {
       sms_counting_down.value = 60 // TODO: save timestamp to localstorage
       toast.add({
         title: '短信验证码已发送',
-        color: 'indigo',
+        color: 'primary',
         icon: 'i-tabler-circle-check',
       })
       const interval = setInterval(() => {
@@ -283,7 +283,7 @@ const obtainForgetSmsCode = () => {
       toast.add({
         title: '验证码发送失败',
         description: err.msg || '网络错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-circle-x',
       })
     })
@@ -307,7 +307,7 @@ const onForgetPasswordSubmit = (
         toast.add({
           title: '重置密码失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-circle-x',
         })
         return
@@ -315,7 +315,7 @@ const onForgetPasswordSubmit = (
       toast.add({
         title: '重置密码成功',
         description: '请您继续登录',
-        color: 'green',
+        color: 'success',
         icon: 'i-tabler-circle-check',
       })
       currentTab.value = 1
@@ -324,7 +324,7 @@ const onForgetPasswordSubmit = (
       toast.add({
         title: '重置密码失败',
         description: err.msg || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-circle-x',
       })
     })
@@ -353,7 +353,7 @@ onMounted(() => {
       toast.add({
         title: '认证失败',
         description: err.msg || 'Token 或 UserID 无效',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-circle-x',
       })
       router.replace('/')
@@ -377,10 +377,10 @@ onMounted(() => {
     <div class="flex flex-col items-center">
       <UTabs
         :items="items"
-        class="w-full sm:w-[400px]"
+        class="w-full sm:w-100"
         v-model="currentTab"
       >
-        <template #default="{ item, index, selected }">
+        <!-- <template #default="{ item, index, selected }">
           <div class="flex items-center gap-2 relative truncate">
             <span class="truncate">{{ item.label }}</span>
             <span
@@ -388,8 +388,8 @@ onMounted(() => {
               class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400"
             />
           </div>
-        </template>
-        <template #item="{ item }">
+        </template> -->
+        <template #content="{ item }">
           <UCard @submit.prevent="() => onSubmit(accountForm)">
             <template #header>
               <p
@@ -406,7 +406,7 @@ onMounted(() => {
               v-if="item.key === 'account'"
               class="space-y-3"
             >
-              <UFormGroup
+              <UFormField
                 label="用户名"
                 name="username"
                 required
@@ -416,8 +416,8 @@ onMounted(() => {
                   :disabled="final_loading"
                   required
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                 label="密码"
                 name="password"
                 required
@@ -428,14 +428,14 @@ onMounted(() => {
                   type="password"
                   required
                 />
-              </UFormGroup>
+              </UFormField>
             </div>
 
             <div
               v-else-if="item.key === 'sms'"
               class="space-y-3"
             >
-              <UFormGroup
+              <UFormField
                 label="手机号"
                 name="mobile"
                 required
@@ -464,10 +464,11 @@ onMounted(() => {
                     :loading="sms_sending"
                     :disabled="!!sms_counting_down || final_loading"
                     class="text-xs font-bold"
-                    color="gray"
+                    color="neutral"
+                    variant="outline"
                   />
                 </UButtonGroup>
-              </UFormGroup>
+              </UFormField>
               <Transition name="pin-root">
                 <div
                   v-if="sms_triggered"
@@ -512,7 +513,7 @@ onMounted(() => {
                 :state="forgetPasswordState"
                 @submit="onForgetPasswordSubmit"
               >
-                <UFormGroup
+                <UFormField
                   label="手机号"
                   name="mobile"
                   required
@@ -540,11 +541,11 @@ onMounted(() => {
                       :loading="sms_sending"
                       :disabled="!!sms_counting_down"
                       class="text-xs font-bold"
-                      color="gray"
+                      color="neutral"
                     />
                   </UButtonGroup>
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                   label="验证码"
                   name="sms_code"
                   required
@@ -555,8 +556,8 @@ onMounted(() => {
                     class="w-full"
                     :disabled="final_loading"
                   />
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                   label="新密码"
                   name="password"
                   required
@@ -566,7 +567,7 @@ onMounted(() => {
                     type="password"
                     :disabled="final_loading"
                   />
-                </UFormGroup>
+                </UFormField>
 
                 <div>
                   <UButton
@@ -586,14 +587,14 @@ onMounted(() => {
               <div class="flex items-center justify-between">
                 <UButton
                   type="submit"
-                  color="black"
+                  color="neutral"
                   :loading="final_loading"
                 >
                   登录
                 </UButton>
                 <UButton
                   variant="link"
-                  color="gray"
+                  color="neutral"
                   @click="currentTab = 2"
                 >
                   忘记密码
@@ -606,7 +607,7 @@ onMounted(() => {
     </div>
     <div class="pt-4">
       <UButton
-        color="gray"
+        color="neutral"
         variant="ghost"
         class="text-gray-500!"
         @click="
diff --git a/app/pages/user/register.vue b/app/pages/user/register.vue
index 2fb08e4..bd8599f 100644
--- a/app/pages/user/register.vue
+++ b/app/pages/user/register.vue
@@ -48,7 +48,7 @@ const onSubmit = (form: RegisterSchema) => {
         toast.add({
           title: '注册成功',
           description: '请联系客服激活账号后登录',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
         router.push('/user/authenticate')
@@ -59,7 +59,7 @@ const onSubmit = (form: RegisterSchema) => {
       toast.add({
         title: '注册失败',
         description: err.message || '注册失败，请稍后再试',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     }
@@ -78,7 +78,7 @@ const onSubmit = (form: RegisterSchema) => {
     <div class="flex flex-col items-center">
       <UCard
         @submit.prevent="() => onSubmit(registerState)"
-        class="w-full sm:w-[400px]"
+        class="w-full sm:w-100"
       >
         <!-- <template #header>
           <p
@@ -92,7 +92,7 @@ const onSubmit = (form: RegisterSchema) => {
         </template> -->
 
         <div class="space-y-3">
-          <UFormGroup
+          <UFormField
             label="姓名"
             name="username"
             help="请使用姓名作为用户名，将用于登录"
@@ -103,8 +103,8 @@ const onSubmit = (form: RegisterSchema) => {
               :disabled="final_loading"
               required
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
             label="密码"
             name="password"
             required
@@ -115,8 +115,8 @@ const onSubmit = (form: RegisterSchema) => {
               type="password"
               required
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
             label="手机号"
             name="mobile"
             required
@@ -126,8 +126,8 @@ const onSubmit = (form: RegisterSchema) => {
               :disabled="final_loading"
               required
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
             label="公司/单位"
             name="company"
             required
@@ -137,14 +137,14 @@ const onSubmit = (form: RegisterSchema) => {
               :disabled="final_loading"
               required
             />
-          </UFormGroup>
+          </UFormField>
         </div>
 
         <template #footer>
           <div class="flex items-center justify-between">
             <UButton
               type="submit"
-              color="black"
+              color="neutral"
               :loading="final_loading"
             >
               注册
@@ -155,7 +155,7 @@ const onSubmit = (form: RegisterSchema) => {
     </div>
     <div class="pt-4">
       <UButton
-        color="gray"
+        color="neutral"
         variant="ghost"
         class="text-gray-500!"
         @click="
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 24afcd0..b92e023 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,6 +4,8 @@ export default defineNuxtConfig({
 
   ssr: false,
 
+  css: ['@/assets/css/main.css'],
+
   runtimeConfig: {
     public: {
       API_BASE: 'https://service1.fenshenzhike.com/',
diff --git a/package.json b/package.json
index 6eca523..9444bfb 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@nuxt/ui": "^2.20.0",
+    "@nuxt/ui": "^3.3.7",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@pinia/nuxt": "^0.11.3",
     "@tailwindcss/typography": "^0.5.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 43ea6fc..db1b2e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,7 +64,7 @@ importers:
         version: 14.1.0
       nuxt:
         specifier: ^4.3.1
-        version: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2)
+        version: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2)
       nuxt-driver.js:
         specifier: ^0.0.11
         version: 0.0.11(magicast@0.5.2)
@@ -88,8 +88,8 @@ importers:
         version: 1.7.1
     devDependencies:
       '@nuxt/ui':
-        specifier: ^2.20.0
-        version: 2.22.3(idb-keyval@6.2.2)(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))(yaml@2.8.2)(yup@1.7.1)
+        specifier: ^3.3.7
+        version: 3.3.7(@babel/parser@7.29.0)(db0@0.3.4)(embla-carousel@8.6.0)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.28(typescript@5.9.3)))(vue@3.5.28(typescript@5.9.3))(yup@1.7.1)
       '@nuxtjs/google-fonts':
         specifier: ^3.2.0
         version: 3.2.0(magicast@0.5.2)
@@ -107,13 +107,13 @@ importers:
         version: 25.2.2
       '@vite-pwa/nuxt':
         specifier: ^1.1.1
-        version: 1.1.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)
+        version: 1.1.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)
       '@vueuse/core':
         specifier: ^14.2.0
         version: 14.2.0(vue@3.5.28(typescript@5.9.3))
       '@vueuse/nuxt':
         specifier: ^14.2.0
-        version: 14.2.0(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
+        version: 14.2.0(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
       dayjs-nuxt:
         specifier: ^2.1.11
         version: 2.1.11(magicast@0.5.2)
@@ -679,6 +679,12 @@ packages:
       commander:
         optional: true
 
+  '@capsizecss/metrics@3.6.2':
+    resolution: {integrity: sha512-5uL1EIhAlfg0dvWsR1DGfqIsyiPBUsD/qlra15B82Ik28BcH7ScYEHLA4F34fZA0KamlpYcappvt2n1pTuDUfw==}
+
+  '@capsizecss/unpack@2.4.0':
+    resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==}
+
   '@clack/core@1.0.0':
     resolution: {integrity: sha512-Orf9Ltr5NeiEuVJS8Rk2XTw3IxNC2Bic3ash7GgYeA8LJ/zmSNpSQ/m5UAhe03lA6KFgklzZ5KTHs4OAMA/SAQ==}
 
@@ -689,18 +695,6 @@ packages:
     resolution: {integrity: sha512-SIOD2DxrRRwQ+jgzlXCqoEFiKOFqaPjhnNTGKXSRLvp1HiOvapLaFG2kEr9dYQTYe8rKrd9uvDUzmAITeNyaHQ==}
     engines: {node: '>=18.0.0'}
 
-  '@csstools/selector-resolve-nested@3.1.0':
-    resolution: {integrity: sha512-mf1LEW0tJLKfWyvn5KdDrhpxHyuxpbNwTIwOYLIvsTffeyOf85j5oIzfG0yosxDgx/sswlqBnESYUcQH0vgZ0g==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      postcss-selector-parser: ^7.0.0
-
-  '@csstools/selector-specificity@5.0.0':
-    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      postcss-selector-parser: ^7.0.0
-
   '@dxup/nuxt@0.3.2':
     resolution: {integrity: sha512-2f2usP4oLNsIGjPprvABe3f3GWuIhIDp0169pGLFxTDRI5A4d4sBbGpR+tD9bGZCT+1Btb6Q2GKlyv3LkDCW5g==}
 
@@ -716,156 +710,312 @@ packages:
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/aix-ppc64@0.27.3':
     resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm64@0.27.3':
     resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-arm@0.27.3':
     resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/android-x64@0.27.3':
     resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-arm64@0.27.3':
     resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.27.3':
     resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-arm64@0.27.3':
     resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.27.3':
     resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm64@0.27.3':
     resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-arm@0.27.3':
     resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.27.3':
     resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.27.3':
     resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.27.3':
     resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.27.3':
     resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.27.3':
     resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.27.3':
     resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/linux-x64@0.27.3':
     resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
   '@esbuild/netbsd-arm64@0.27.3':
     resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.27.3':
     resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-arm64@0.27.3':
     resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.27.3':
     resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@esbuild/openharmony-arm64@0.27.3':
     resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/sunos-x64@0.27.3':
     resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-arm64@0.27.3':
     resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.27.3':
     resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@esbuild/win32-x64@0.27.3':
     resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==}
     engines: {node: '>=18'}
@@ -900,21 +1050,6 @@ packages:
   '@floating-ui/vue@1.1.10':
     resolution: {integrity: sha512-vdf8f6rHnFPPLRsmL4p12wYl+Ux4mOJOkjzKEMYVnwdf7UFdvBtHlLvQyx8iKG5vhPRbDRgZxdtpmyigDPjzYg==}
 
-  '@headlessui/tailwindcss@0.2.2':
-    resolution: {integrity: sha512-xNe42KjdyA4kfUKLLPGzME9zkH7Q3rOZ5huFihWNWOQFxnItxPB3/67yBI8/qBfY8nwBRx5GHn4VprsoluVMGw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      tailwindcss: ^3.0 || ^4.0
-
-  '@headlessui/vue@1.7.23':
-    resolution: {integrity: sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      vue: ^3.2.0
-
-  '@iconify-json/heroicons@1.2.3':
-    resolution: {integrity: sha512-n+vmCEgTesRsOpp5AB5ILB6srsgsYK+bieoQBNlafvoEhjVXLq8nIGN4B0v/s4DUfa0dOrjwE/cKJgIKdJXOEg==}
-
   '@iconify-json/line-md@1.2.14':
     resolution: {integrity: sha512-ZlgQyMcptcni3wEua+ij9hXEuYmlHKlf38/fZT4Qhds07naE9NeEmE0tqWMHAtkir+r9VRTTz3jXzwXWkLZiCg==}
 
@@ -989,10 +1124,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@koa/router@12.0.2':
-    resolution: {integrity: sha512-sYcHglGKTxGF+hQ6x67xDfkE9o+NhVlRHBqq6gLywaMc6CojK/5vFZByphdonKinYlMLkEkacm+HEse9HzwgTA==}
-    engines: {node: '>= 12'}
-
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
 
@@ -1059,6 +1190,9 @@ packages:
       '@vitejs/devtools':
         optional: true
 
+  '@nuxt/fonts@0.11.4':
+    resolution: {integrity: sha512-GbLavsC+9FejVwY+KU4/wonJsKhcwOZx/eo4EuV57C4osnF/AtEmev8xqI0DNlebMEhEGZbu1MGwDDDYbeR7Bw==}
+
   '@nuxt/icon@1.15.0':
     resolution: {integrity: sha512-kA0rxqr1B601zNJNcOXera8CyYcxUCEcT7dXEC7rwAz71PRCN5emf7G656eKEQgtqrD4JSj6NQqWDgrmFcf/GQ==}
 
@@ -1091,21 +1225,29 @@ packages:
     peerDependencies:
       '@nuxt/kit': '>=3.0.0'
 
-  '@nuxt/ui@2.22.3':
-    resolution: {integrity: sha512-895SAzqCCT5JAc1JQ8nAmmpwdKCJqArY8ifL/PNtD681FKSdXiSPxODGnpqpovM/ws6bvoRwglA7BtwAJ5ySBg==}
+  '@nuxt/ui@3.3.7':
+    resolution: {integrity: sha512-pTUb/Uk3J2XVWDFks7baTmq9hfp+T+nvnXP7/QypBIAZLdkSMgEsFmP7xgX5Gugc/LaThIkAifzfks4wiSGuVA==}
+    hasBin: true
     peerDependencies:
+      '@inertiajs/vue3': ^2.0.7
       joi: ^17.13.0
       superstruct: ^2.0.0
+      typescript: ^5.6.3
       valibot: ^1.0.0
+      vue-router: ^4.5.0
       yup: ^1.6.0
-      zod: ^3.24.0
+      zod: ^3.24.0 || ^4.0.0
     peerDependenciesMeta:
+      '@inertiajs/vue3':
+        optional: true
       joi:
         optional: true
       superstruct:
         optional: true
       valibot:
         optional: true
+      vue-router:
+        optional: true
       yup:
         optional: true
       zod:
@@ -1128,9 +1270,6 @@ packages:
   '@nuxtjs/google-fonts@3.2.0':
     resolution: {integrity: sha512-cGAjDJoeQ2jm6VJCo4AtSmKO6KjsbO9RSLj8q261fD0lMVNMZCxkCxBkg8L0/2Vfgp+5QBHWVXL71p1tiybJFw==}
 
-  '@nuxtjs/tailwindcss@6.14.0':
-    resolution: {integrity: sha512-30RyDK++LrUVRgc2A85MktGWIZoRQgeQKjE4CjjD64OXNozyl+4ScHnnYgqVToMM6Ch2ZG2W4wV2J0EN6F0zkQ==}
-
   '@oxc-minify/binding-android-arm-eabi@0.112.0':
     resolution: {integrity: sha512-m7TGBR2hjsBJIN9UJ909KBoKsuogo6CuLsHKvUIBXdjI0JVHP8g4ZHeB+BJpGn5LJdeSGDfz9MWiuXrZDRzunw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1937,29 +2076,117 @@ packages:
   '@swc/helpers@0.5.18':
     resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==}
 
-  '@tailwindcss/aspect-ratio@0.4.2':
-    resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==}
-    peerDependencies:
-      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
+  '@tailwindcss/node@4.1.18':
+    resolution: {integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==}
 
-  '@tailwindcss/container-queries@0.1.1':
-    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
-    peerDependencies:
-      tailwindcss: '>=3.2.0'
+  '@tailwindcss/oxide-android-arm64@4.1.18':
+    resolution: {integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
 
-  '@tailwindcss/forms@0.5.11':
-    resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'
+  '@tailwindcss/oxide-darwin-arm64@4.1.18':
+    resolution: {integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.18':
+    resolution: {integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.18':
+    resolution: {integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
+    resolution: {integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
+    resolution: {integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
+    resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
+    resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
+    resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
+    resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
+    resolution: {integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
+    resolution: {integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.18':
+    resolution: {integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.18':
+    resolution: {integrity: sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==}
 
   '@tailwindcss/typography@0.5.19':
     resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
+  '@tailwindcss/vite@4.1.18':
+    resolution: {integrity: sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
   '@tanstack/virtual-core@3.13.18':
     resolution: {integrity: sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==}
 
+  '@tanstack/vue-table@8.21.3':
+    resolution: {integrity: sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: '>=3.2'
+
   '@tanstack/vue-virtual@3.13.18':
     resolution: {integrity: sha512-6pT8HdHtTU5Z+t906cGdCroUNA5wHjFXsNss9gwk7QAr1VNZtz9IQCs2Nhx0gABK48c+OocHl2As+TMg8+Hy4A==}
     peerDependencies:
@@ -2126,6 +2353,9 @@ packages:
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+
   '@vueuse/core@13.9.0':
     resolution: {integrity: sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==}
     peerDependencies:
@@ -2178,14 +2408,12 @@ packages:
       universal-cookie:
         optional: true
 
-  '@vueuse/math@13.9.0':
-    resolution: {integrity: sha512-Qk2jqlaEGKwwe2/MBGtUd8nPpzoQPSQTfm2d30NPywjpYdpbI+WqOAE99MuSq9kIRoU7Xq3IYBtxMaLTy6lpsA==}
-    peerDependencies:
-      vue: ^3.5.0
-
   '@vueuse/metadata@10.11.1':
     resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
 
+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+
   '@vueuse/metadata@13.9.0':
     resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
 
@@ -2201,6 +2429,9 @@ packages:
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+
   '@vueuse/shared@13.9.0':
     resolution: {integrity: sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==}
     peerDependencies:
@@ -2228,10 +2459,6 @@ packages:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
 
-  accepts@1.3.8:
-    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
-    engines: {node: '>= 0.6'}
-
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
@@ -2272,9 +2499,6 @@ packages:
     resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
     engines: {node: '>=14'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -2287,9 +2511,6 @@ packages:
     resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
     engines: {node: '>= 14'}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -2409,10 +2630,6 @@ packages:
     resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
     hasBin: true
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
@@ -2422,12 +2639,12 @@ packages:
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
+  blob-to-buffer@1.2.9:
+    resolution: {integrity: sha512-BF033y5fN6OCofD3vgHmNtwZWRcq9NLyyxyILx9hfMy1sXYy4ojFl765hJ2lP0YaN2fuxPaLO2Vzzoxy0FLFFA==}
+
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  brace-expansion@1.1.12:
-    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
-
   brace-expansion@2.0.2:
     resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
 
@@ -2435,6 +2652,9 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
+  brotli@1.3.3:
+    resolution: {integrity: sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==}
+
   browserslist@4.28.1:
     resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -2469,10 +2689,6 @@ packages:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  cache-content-type@1.0.1:
-    resolution: {integrity: sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==}
-    engines: {node: '>= 6.0.0'}
-
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -2485,24 +2701,12 @@ packages:
     resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
   caniuse-lite@1.0.30001769:
     resolution: {integrity: sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==}
 
-  chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
-
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
@@ -2532,14 +2736,14 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clone@2.1.2:
+    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
+    engines: {node: '>=0.8'}
+
   cluster-key-slot@1.1.2:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
 
-  co@4.6.0:
-    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
-    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2557,6 +2761,9 @@ packages:
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
+  colortranslator@5.0.0:
+    resolution: {integrity: sha512-Z3UPUKasUVDFCDYAjP2fmlVRf1jFHJv1izAmPjiOa0OCIw1W7iC8PZ2GsoDa8uZv+mKyWopxxStT9q05+27h7w==}
+
   commander@11.1.0:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
@@ -2564,14 +2771,6 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
-  commander@6.2.1:
-    resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
-    engines: {node: '>= 6'}
-
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -2590,9 +2789,6 @@ packages:
     resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
     engines: {node: '>= 14'}
 
-  concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
@@ -2603,14 +2799,6 @@ packages:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
-  content-disposition@0.5.4:
-    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
-    engines: {node: '>= 0.6'}
-
-  content-type@1.0.5:
-    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
-    engines: {node: '>= 0.6'}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -2620,10 +2808,6 @@ packages:
   cookie-es@2.0.0:
     resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
 
-  cookies@0.9.1:
-    resolution: {integrity: sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==}
-    engines: {node: '>= 0.8'}
-
   copy-anything@4.0.5:
     resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
     engines: {node: '>=18'}
@@ -2650,6 +2834,9 @@ packages:
     resolution: {integrity: sha512-p9nwwR4qyT5W996vBZhdvBCnMhicY5ytZkR4D1Xj0wuTDEiMnjwR57Q3RXYY/s0EpX6Ay3vgIcfaR+ewGHsi+g==}
     engines: {node: '>=18.0'}
 
+  cross-fetch@3.2.0:
+    resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -2772,14 +2959,6 @@ packages:
       sqlite3:
         optional: true
 
-  debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -2793,9 +2972,6 @@ packages:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
 
-  deep-equal@1.0.1:
-    resolution: {integrity: sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==}
-
   deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
@@ -2831,17 +3007,10 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
-  delegates@1.0.0:
-    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
-
   denque@2.1.0:
     resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
     engines: {node: '>=0.10'}
 
-  depd@1.1.2:
-    resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
-    engines: {node: '>= 0.6'}
-
   depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -2849,10 +3018,6 @@ packages:
   destr@2.0.5:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
-  destroy@1.2.0:
-    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
-    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
-
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -2860,16 +3025,13 @@ packages:
   devalue@5.6.2:
     resolution: {integrity: sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+  dfa@1.2.0:
+    resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==}
 
   diff@8.0.3:
     resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
     engines: {node: '>=0.3.1'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
@@ -2915,16 +3077,56 @@ packages:
   electron-to-chromium@1.5.286:
     resolution: {integrity: sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==}
 
+  embla-carousel-auto-height@8.6.0:
+    resolution: {integrity: sha512-/HrJQOEM6aol/oF33gd2QlINcXy3e19fJWvHDuHWp2bpyTa+2dm9tVVJak30m2Qy6QyQ6Fc8DkImtv7pxWOJUQ==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-auto-scroll@8.6.0:
+    resolution: {integrity: sha512-WT9fWhNXFpbQ6kP+aS07oF5IHYLZ1Dx4DkwgCY8Hv2ZyYd2KMCPfMV1q/cA3wFGuLO7GMgKiySLX90/pQkcOdQ==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-autoplay@8.6.0:
+    resolution: {integrity: sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-class-names@8.6.0:
+    resolution: {integrity: sha512-l1hm1+7GxQ+zwdU2sea/LhD946on7XO2qk3Xq2XWSwBaWfdgchXdK567yzLtYSHn4sWYdiX+x4nnaj+saKnJkw==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-fade@8.6.0:
+    resolution: {integrity: sha512-qaYsx5mwCz72ZrjlsXgs1nKejSrW+UhkbOMwLgfRT7w2LtdEB03nPRI06GHuHv5ac2USvbEiX2/nAHctcDwvpg==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-vue@8.6.0:
+    resolution: {integrity: sha512-v8UO5UsyLocZnu/LbfQA7Dn2QHuZKurJY93VUmZYP//QRWoCWOsionmvLLAlibkET3pGPs7++03VhJKbWD7vhQ==}
+    peerDependencies:
+      vue: ^3.2.37
+
+  embla-carousel-wheel-gestures@8.1.0:
+    resolution: {integrity: sha512-J68jkYrxbWDmXOm2n2YHl+uMEXzkGSKjWmjaEgL9xVvPb3HqVmg6rJSKfI3sqIDVvm7mkeTy87wtG/5263XqHQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      embla-carousel: ^8.0.0 || ~8.0.0-rc03
+
+  embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  encodeurl@1.0.2:
-    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
-    engines: {node: '>= 0.8'}
-
   encodeurl@2.0.0:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
@@ -2932,6 +3134,10 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
+  enhanced-resolve@5.19.0:
+    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
+    engines: {node: '>=10.13.0'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -2973,6 +3179,11 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   esbuild@0.27.3:
     resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
     engines: {node: '>=18'}
@@ -3069,6 +3280,12 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  fontaine@0.6.0:
+    resolution: {integrity: sha512-cfKqzB62GmztJhwJ0YXtzNsmpqKAcFzTqsakJ//5COTzbou90LU7So18U+4D8z+lDXr4uztaAUZBonSoPDcj1w==}
+
+  fontkit@2.0.4:
+    resolution: {integrity: sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==}
+
   for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
@@ -3080,10 +3297,6 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
-  fresh@0.5.2:
-    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
-    engines: {node: '>= 0.6'}
-
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
@@ -3095,9 +3308,6 @@ packages:
     resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
     engines: {node: '>=10'}
 
-  fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3169,10 +3379,6 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
   glob@10.5.0:
     resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
     hasBin: true
@@ -3187,10 +3393,6 @@ packages:
     resolution: {integrity: sha512-B7U/vJpE3DkJ5WXTgTpTRN63uV42DseiXXKMwG14LQBXmsdeIoHAPbU/MEo6II0k5ED74uc2ZGTC6MwHFQhF6w==}
     engines: {node: 20 || >=22}
 
-  glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
-
   global-directory@4.0.1:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
@@ -3231,10 +3433,6 @@ packages:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
 
-  has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
-
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
@@ -3264,18 +3462,6 @@ packages:
   hookable@6.0.1:
     resolution: {integrity: sha512-uKGyY8BuzN/a5gvzvA+3FVWo0+wUjgtfSdnmjtrOVwQCZPHpHDH2WRO3VZSOeluYrHoDCiXFffZXs8Dj1ULWtw==}
 
-  http-assert@1.5.0:
-    resolution: {integrity: sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==}
-    engines: {node: '>= 0.8'}
-
-  http-errors@1.6.3:
-    resolution: {integrity: sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==}
-    engines: {node: '>= 0.6'}
-
-  http-errors@1.8.1:
-    resolution: {integrity: sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==}
-    engines: {node: '>= 0.6'}
-
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -3321,13 +3507,6 @@ packages:
   impound@1.0.0:
     resolution: {integrity: sha512-8lAJ+1Arw2sMaZ9HE2ZmL5zOcMnt18s6+7Xqgq2aUVy4P1nlzAyPtzCDxsk51KVFwHEEdc6OWvUyqwHwhRYaug==}
 
-  inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
-
-  inherits@2.0.3:
-    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
-
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -3368,10 +3547,6 @@ packages:
     resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
     engines: {node: '>= 0.4'}
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
   is-boolean-object@1.2.2:
     resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
@@ -3550,10 +3725,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
-    hasBin: true
-
   jiti@2.6.1:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
@@ -3587,11 +3758,6 @@ packages:
     resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
     engines: {node: '>=0.10.0'}
 
-  keygrip@1.1.0:
-    resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
-    engines: {node: '>= 0.6'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
-
   kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -3607,25 +3773,6 @@ packages:
   knitwork@1.3.0:
     resolution: {integrity: sha512-4LqMNoONzR43B1W0ek0fhXMsDNW/zxa1NdFAVMY+k28pgZLovR4G3PB5MrpTxCy1QaZCqNoiaKPr5w5qZHfSNw==}
 
-  koa-compose@4.1.0:
-    resolution: {integrity: sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==}
-
-  koa-convert@2.0.0:
-    resolution: {integrity: sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==}
-    engines: {node: '>= 10'}
-
-  koa-send@5.0.1:
-    resolution: {integrity: sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==}
-    engines: {node: '>= 8'}
-
-  koa-static@5.0.0:
-    resolution: {integrity: sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==}
-    engines: {node: '>= 7.6.0'}
-
-  koa@2.16.3:
-    resolution: {integrity: sha512-zPPuIt+ku1iCpFBRwseMcPYQ1cJL8l60rSmKeOuGfOXyE6YnTBmf2aEFNL2HQGrD0cPcLO/t+v9RTgC+fwEh/g==}
-    engines: {node: ^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4}
-
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
@@ -3640,13 +3787,80 @@ packages:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
 
+  lightningcss-android-arm64@1.30.2:
+    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
+    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.2:
+    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.2:
+    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.2:
+    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.2:
+    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
@@ -3725,10 +3939,6 @@ packages:
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
-  media-typer@0.3.0:
-    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
-    engines: {node: '>= 0.6'}
-
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -3736,26 +3946,14 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  methods@1.1.2:
-    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
-    engines: {node: '>= 0.6'}
-
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
   mime-db@1.54.0:
     resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
     engines: {node: '>= 0.6'}
 
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
   mime-types@3.0.2:
     resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
     engines: {node: '>=18'}
@@ -3773,17 +3971,10 @@ packages:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
 
-  mini-svg-data-uri@1.4.4:
-    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
-    hasBin: true
-
   minimatch@10.1.2:
     resolution: {integrity: sha512-fu656aJ0n2kcXwsnwnv9g24tkU5uSmOlTjd6WyyaKm2Z+h1qmY6bAjrcaIxF/BslFqbZ8UBtbJi7KgQOZD2PTw==}
     engines: {node: 20 || >=22}
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-
   minimatch@5.1.6:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
@@ -3825,9 +4016,6 @@ packages:
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -3844,10 +4032,6 @@ packages:
   napi-build-utils@2.0.0:
     resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
 
-  negotiator@0.6.3:
-    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
-    engines: {node: '>= 0.6'}
-
   nitropack@2.13.1:
     resolution: {integrity: sha512-2dDj89C4wC2uzG7guF3CnyG+zwkZosPEp7FFBGHB3AJo11AywOolWhyQJFHDzve8COvGxJaqscye9wW2IrUsNw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3935,14 +4119,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -3982,17 +4158,10 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
-  only@0.0.2:
-    resolution: {integrity: sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==}
-
   open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
 
-  open@7.4.2:
-    resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
-    engines: {node: '>=8'}
-
   open@8.4.2:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
@@ -4042,6 +4211,9 @@ packages:
   package-manager-detector@1.6.0:
     resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
 
+  pako@0.2.9:
+    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -4049,10 +4221,6 @@ packages:
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
-  path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -4072,9 +4240,6 @@ packages:
     resolution: {integrity: sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==}
     engines: {node: 20 || >=22}
 
-  path-to-regexp@6.3.0:
-    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
-
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
@@ -4095,10 +4260,6 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pinia-plugin-persistedstate@4.7.1:
     resolution: {integrity: sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==}
     peerDependencies:
@@ -4122,20 +4283,12 @@ packages:
       typescript:
         optional: true
 
-  pirates@4.0.7:
-    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
-    engines: {node: '>= 6'}
-
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
   pkg-types@2.3.0:
     resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
-  portfinder@1.0.38:
-    resolution: {integrity: sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==}
-    engines: {node: '>= 10.12'}
-
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -4182,36 +4335,6 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.1.0:
-    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@6.0.1:
-    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      jiti: '>=1.21.0'
-      postcss: '>=8.0.9'
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-      postcss:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
-
   postcss-merge-longhand@7.0.5:
     resolution: {integrity: sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -4248,18 +4371,6 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
-  postcss-nesting@13.0.2:
-    resolution: {integrity: sha512-1YCI290TX+VP0U/K/aFxzHzQWHWURL+CtHMSbex1lCdpXD1SoR2sYuxDu5aNI9lPoXpKTCggFZiDJbwylU0LEQ==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      postcss: ^8.4
-
   postcss-normalize-charset@7.0.1:
     resolution: {integrity: sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -4336,10 +4447,6 @@ packages:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
   postcss-selector-parser@7.1.1:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
@@ -4436,9 +4543,6 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
@@ -4453,10 +4557,6 @@ packages:
   readdir-glob@1.1.3:
     resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
 
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-
   readdirp@4.1.2:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
@@ -4503,10 +4603,10 @@ packages:
     resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
     hasBin: true
 
-  replace-in-file@6.3.5:
-    resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
-    engines: {node: '>=10'}
-    hasBin: true
+  reka-ui@2.6.0:
+    resolution: {integrity: sha512-NrGMKrABD97l890mFS3TNUzB0BLUfbL3hh0NjcJRIUSUljb288bx3Mzo31nOyUcdiiW0HqFGXJwyCBh9cWgb0w==}
+    peerDependencies:
+      vue: '>= 3.2.0'
 
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
@@ -4520,15 +4620,14 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
-  resolve-path@1.4.0:
-    resolution: {integrity: sha512-i1xevIst/Qa+nA9olDxLWnLk8YZbi8R/7JPbCMcgyWaFR6bKWaexgJgEB5oc2PKMjYdrHynyz0NY+if+H98t1w==}
-    engines: {node: '>= 0.8'}
-
   resolve@1.22.11:
     resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
     engines: {node: '>= 0.4'}
     hasBin: true
 
+  restructure@3.0.2:
+    resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}
+
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -4641,9 +4740,6 @@ packages:
     resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
     engines: {node: '>= 0.4'}
 
-  setprototypeof@1.1.0:
-    resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
-
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -4745,10 +4841,6 @@ packages:
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
-  statuses@1.5.0:
-    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
-    engines: {node: '>= 0.6'}
-
   statuses@2.0.2:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
@@ -4829,11 +4921,6 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
-  sucrase@3.35.1:
-    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   superjson@2.2.6:
     resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
     engines: {node: '>=16'}
@@ -4842,10 +4929,6 @@ packages:
     resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
     engines: {node: '>=18'}
 
-  supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
-
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -4868,24 +4951,26 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
-  tailwind-config-viewer@2.0.4:
-    resolution: {integrity: sha512-icvcmdMmt9dphvas8wL40qttrHwAnW3QEN4ExJ2zICjwRsPj7gowd1cOceaWG3IfTuM/cTNGQcx+bsjMtmV+cw==}
-    engines: {node: '>=13'}
-    hasBin: true
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
+  tailwind-variants@3.2.2:
+    resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
+    engines: {node: '>=16.x', pnpm: '>=7.x'}
     peerDependencies:
-      tailwindcss: 1 || 2 || 2.0.1-compat || 3
-
-  tailwind-merge@2.6.1:
-    resolution: {integrity: sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==}
-
-  tailwindcss@3.4.19:
-    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+      tailwind-merge: '>=3.0.0'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      tailwind-merge:
+        optional: true
 
   tailwindcss@4.1.18:
     resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
 
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
   tar-fs@2.1.4:
     resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
 
@@ -4919,16 +5004,12 @@ packages:
   text-decoder@1.2.3:
     resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
   tiny-case@1.0.3:
     resolution: {integrity: sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==}
 
+  tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -4965,16 +5046,9 @@ packages:
   tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  tsscmp@1.0.6:
-    resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
-    engines: {node: '>=0.6.x'}
-
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
@@ -4990,10 +5064,6 @@ packages:
     resolution: {integrity: sha512-JnTrzGu+zPV3aXIUhnyWJj4z/wigMsdYajGLIYakqyOW1nPllzXEJee0QQbHj+CTIQtXGlAjuK0UY+2xTyjVAw==}
     engines: {node: '>=20'}
 
-  type-is@1.6.18:
-    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
-    engines: {node: '>= 0.6'}
-
   type-level-regexp@0.1.17:
     resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
 
@@ -5058,10 +5128,16 @@ packages:
     resolution: {integrity: sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==}
     engines: {node: '>=4'}
 
+  unicode-properties@1.4.1:
+    resolution: {integrity: sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==}
+
   unicode-property-aliases-ecmascript@2.2.0:
     resolution: {integrity: sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==}
     engines: {node: '>=4'}
 
+  unicode-trie@2.0.0:
+    resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==}
+
   unicorn-magic@0.3.0:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
@@ -5070,6 +5146,9 @@ packages:
     resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
     engines: {node: '>=20'}
 
+  unifont@0.4.1:
+    resolution: {integrity: sha512-zKSY9qO8svWYns+FGKjyVdLvpGPwqmsCjeJLN1xndMiqxHWBAhoWDMYMG960MxeV48clBmG+fDP59dHY1VoZvg==}
+
   unimport@5.6.0:
     resolution: {integrity: sha512-8rqAmtJV8o60x46kBAJKtHpJDJWkA2xcBqWKPI14MgUb05o1pnpnCnXSxedUXyeq7p8fR5g3pTo2BaswZ9lD9A==}
     engines: {node: '>=18.12.0'}
@@ -5082,6 +5161,18 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unplugin-auto-import@20.3.0:
+    resolution: {integrity: sha512-RcSEQiVv7g0mLMMXibYVKk8mpteKxvyffGuDKqZZiFr7Oq3PB1HwgHdK5O7H4AzbhzHoVKG0NnMnsk/1HIVYzQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': ^4.0.0
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+
   unplugin-utils@0.2.5:
     resolution: {integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==}
     engines: {node: '>=18.12.0'}
@@ -5090,6 +5181,19 @@ packages:
     resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
     engines: {node: '>=20.19.0'}
 
+  unplugin-vue-components@30.0.0:
+    resolution: {integrity: sha512-4qVE/lwCgmdPTp6h0qsRN2u642tt4boBQtcpn4wQcWZAsr8TQwq+SPT3NDu/6kBFxzo/sSEK4ioXhOOBrXc3iw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2 || ^4.0.0
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+
   unplugin-vue-router@0.19.2:
     resolution: {integrity: sha512-u5dgLBarxE5cyDK/hzJGfpCTLIAyiTXGlo85COuD4Nssj6G7NxS+i9mhCWz/1p/ud1eMwdcUbTXehQe41jYZUA==}
     peerDependencies:
@@ -5202,9 +5306,11 @@ packages:
       '@popperjs/core': ^2.0.0
       vue: ^3.2.0
 
-  vary@1.1.2:
-    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
-    engines: {node: '>= 0.8'}
+  vaul-vue@0.4.1:
+    resolution: {integrity: sha512-A6jOWOZX5yvyo1qMn7IveoWN91mJI5L3BUKsIwkg6qrTGgHs1Sb1JF/vyLJgnbN1rH4OOOxFbtqL9A46bOyGUQ==}
+    peerDependencies:
+      reka-ui: ^2.0.0
+      vue: ^3.3.0
 
   vite-dev-rpc@1.1.0:
     resolution: {integrity: sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==}
@@ -5332,6 +5438,9 @@ packages:
   vue-bundle-renderer@2.2.0:
     resolution: {integrity: sha512-sz/0WEdYH1KfaOm0XaBmRZOWgYTEvUDt6yPYaUzl4E52qzgWLlknaPPTTZmp6benaPTlQAI/hN1x3tAzZygycg==}
 
+  vue-component-type-helpers@3.2.4:
+    resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -5383,6 +5492,10 @@ packages:
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
+  wheel-gestures@2.2.48:
+    resolution: {integrity: sha512-f+Gy33Oa5Z14XY9679Zze+7VFhbsQfBFXodnU2x589l4kxGM9L5Y8zETTmcMR5pWOPQyRv4Z0lNax6xCO0NSlA==}
+    engines: {node: '>=18'}
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -5514,10 +5627,6 @@ packages:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
 
-  ylru@1.4.0:
-    resolution: {integrity: sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==}
-    engines: {node: '>= 4.0.0'}
-
   youch-core@0.3.3:
     resolution: {integrity: sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==}
 
@@ -6229,6 +6338,16 @@ snapshots:
       cac: 6.7.14
       citty: 0.2.0
 
+  '@capsizecss/metrics@3.6.2': {}
+
+  '@capsizecss/unpack@2.4.0':
+    dependencies:
+      blob-to-buffer: 1.2.9
+      cross-fetch: 3.2.0
+      fontkit: 2.0.4
+    transitivePeerDependencies:
+      - encoding
+
   '@clack/core@1.0.0':
     dependencies:
       picocolors: 1.1.1
@@ -6242,14 +6361,6 @@ snapshots:
 
   '@cloudflare/kv-asset-handler@0.4.2': {}
 
-  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.1)':
-    dependencies:
-      postcss-selector-parser: 7.1.1
-
-  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.1)':
-    dependencies:
-      postcss-selector-parser: 7.1.1
-
   '@dxup/nuxt@0.3.2(magicast@0.5.2)':
     dependencies:
       '@dxup/unimport': 0.1.2
@@ -6278,81 +6389,159 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@esbuild/aix-ppc64@0.25.12':
+    optional: true
+
   '@esbuild/aix-ppc64@0.27.3':
     optional: true
 
+  '@esbuild/android-arm64@0.25.12':
+    optional: true
+
   '@esbuild/android-arm64@0.27.3':
     optional: true
 
+  '@esbuild/android-arm@0.25.12':
+    optional: true
+
   '@esbuild/android-arm@0.27.3':
     optional: true
 
+  '@esbuild/android-x64@0.25.12':
+    optional: true
+
   '@esbuild/android-x64@0.27.3':
     optional: true
 
+  '@esbuild/darwin-arm64@0.25.12':
+    optional: true
+
   '@esbuild/darwin-arm64@0.27.3':
     optional: true
 
+  '@esbuild/darwin-x64@0.25.12':
+    optional: true
+
   '@esbuild/darwin-x64@0.27.3':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.25.12':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.27.3':
     optional: true
 
+  '@esbuild/freebsd-x64@0.25.12':
+    optional: true
+
   '@esbuild/freebsd-x64@0.27.3':
     optional: true
 
+  '@esbuild/linux-arm64@0.25.12':
+    optional: true
+
   '@esbuild/linux-arm64@0.27.3':
     optional: true
 
+  '@esbuild/linux-arm@0.25.12':
+    optional: true
+
   '@esbuild/linux-arm@0.27.3':
     optional: true
 
+  '@esbuild/linux-ia32@0.25.12':
+    optional: true
+
   '@esbuild/linux-ia32@0.27.3':
     optional: true
 
+  '@esbuild/linux-loong64@0.25.12':
+    optional: true
+
   '@esbuild/linux-loong64@0.27.3':
     optional: true
 
+  '@esbuild/linux-mips64el@0.25.12':
+    optional: true
+
   '@esbuild/linux-mips64el@0.27.3':
     optional: true
 
+  '@esbuild/linux-ppc64@0.25.12':
+    optional: true
+
   '@esbuild/linux-ppc64@0.27.3':
     optional: true
 
+  '@esbuild/linux-riscv64@0.25.12':
+    optional: true
+
   '@esbuild/linux-riscv64@0.27.3':
     optional: true
 
+  '@esbuild/linux-s390x@0.25.12':
+    optional: true
+
   '@esbuild/linux-s390x@0.27.3':
     optional: true
 
+  '@esbuild/linux-x64@0.25.12':
+    optional: true
+
   '@esbuild/linux-x64@0.27.3':
     optional: true
 
+  '@esbuild/netbsd-arm64@0.25.12':
+    optional: true
+
   '@esbuild/netbsd-arm64@0.27.3':
     optional: true
 
+  '@esbuild/netbsd-x64@0.25.12':
+    optional: true
+
   '@esbuild/netbsd-x64@0.27.3':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.25.12':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.27.3':
     optional: true
 
+  '@esbuild/openbsd-x64@0.25.12':
+    optional: true
+
   '@esbuild/openbsd-x64@0.27.3':
     optional: true
 
+  '@esbuild/openharmony-arm64@0.25.12':
+    optional: true
+
   '@esbuild/openharmony-arm64@0.27.3':
     optional: true
 
+  '@esbuild/sunos-x64@0.25.12':
+    optional: true
+
   '@esbuild/sunos-x64@0.27.3':
     optional: true
 
+  '@esbuild/win32-arm64@0.25.12':
+    optional: true
+
   '@esbuild/win32-arm64@0.27.3':
     optional: true
 
+  '@esbuild/win32-ia32@0.25.12':
+    optional: true
+
   '@esbuild/win32-ia32@0.27.3':
     optional: true
 
+  '@esbuild/win32-x64@0.25.12':
+    optional: true
+
   '@esbuild/win32-x64@0.27.3':
     optional: true
 
@@ -6387,19 +6576,6 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@headlessui/tailwindcss@0.2.2(tailwindcss@3.4.19(yaml@2.8.2))':
-    dependencies:
-      tailwindcss: 3.4.19(yaml@2.8.2)
-
-  '@headlessui/vue@1.7.23(vue@3.5.28(typescript@5.9.3))':
-    dependencies:
-      '@tanstack/vue-virtual': 3.13.18(vue@3.5.28(typescript@5.9.3))
-      vue: 3.5.28(typescript@5.9.3)
-
-  '@iconify-json/heroicons@1.2.3':
-    dependencies:
-      '@iconify/types': 2.0.0
-
   '@iconify-json/line-md@1.2.14':
     dependencies:
       '@iconify/types': 2.0.0
@@ -6495,16 +6671,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@koa/router@12.0.2':
-    dependencies:
-      debug: 4.4.3
-      http-errors: 2.0.1
-      koa-compose: 4.1.0
-      methods: 1.1.2
-      path-to-regexp: 6.3.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@kwsites/file-exists@1.1.1':
     dependencies:
       debug: 4.4.3
@@ -6587,19 +6753,19 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@2.7.0(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))':
+  '@nuxt/devtools-kit@2.7.0(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))':
     dependencies:
       '@nuxt/kit': 3.21.1(magicast@0.5.2)
       execa: 8.0.1
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/devtools-kit@3.1.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))':
+  '@nuxt/devtools-kit@3.1.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))':
     dependencies:
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
       execa: 8.0.1
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - magicast
 
@@ -6614,12 +6780,12 @@ snapshots:
       prompts: 2.4.2
       semver: 7.7.4
 
-  '@nuxt/devtools@3.1.1(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
+  '@nuxt/devtools@3.1.1(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
     dependencies:
-      '@nuxt/devtools-kit': 3.1.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      '@nuxt/devtools-kit': 3.1.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
       '@nuxt/devtools-wizard': 3.1.1
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
-      '@vue/devtools-core': 8.0.6(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
+      '@vue/devtools-core': 8.0.6(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
       '@vue/devtools-kit': 8.0.6
       birpc: 2.9.0
       consola: 3.4.2
@@ -6644,9 +6810,9 @@ snapshots:
       sirv: 3.0.2
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.15
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
-      vite-plugin-inspect: 11.3.3(@nuxt/kit@4.3.1(magicast@0.5.2))(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
-      vite-plugin-vue-tracer: 1.2.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite-plugin-inspect: 11.3.3(@nuxt/kit@4.3.1(magicast@0.5.2))(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      vite-plugin-vue-tracer: 1.2.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
       which: 5.0.0
       ws: 8.19.0
     transitivePeerDependencies:
@@ -6655,13 +6821,59 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/icon@1.15.0(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
+  '@nuxt/fonts@0.11.4(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))':
+    dependencies:
+      '@nuxt/devtools-kit': 2.7.0(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      '@nuxt/kit': 3.21.1(magicast@0.5.2)
+      consola: 3.4.2
+      css-tree: 3.1.0
+      defu: 6.1.4
+      esbuild: 0.25.12
+      fontaine: 0.6.0
+      h3: 1.15.5
+      jiti: 2.6.1
+      magic-regexp: 0.10.0
+      magic-string: 0.30.21
+      node-fetch-native: 1.6.7
+      ohash: 2.0.11
+      pathe: 2.0.3
+      sirv: 3.0.2
+      tinyglobby: 0.2.15
+      ufo: 1.6.3
+      unifont: 0.4.1
+      unplugin: 2.3.11
+      unstorage: 1.17.4(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - encoding
+      - idb-keyval
+      - ioredis
+      - magicast
+      - uploadthing
+      - vite
+
+  '@nuxt/icon@1.15.0(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@iconify/collections': 1.0.648
       '@iconify/types': 2.0.0
       '@iconify/utils': 2.3.0
       '@iconify/vue': 5.0.0(vue@3.5.28(typescript@5.9.3))
-      '@nuxt/devtools-kit': 2.7.0(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      '@nuxt/devtools-kit': 2.7.0(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
       '@nuxt/kit': 3.21.1(magicast@0.5.2)
       consola: 3.4.2
       local-pkg: 1.1.2
@@ -6767,7 +6979,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/nitro-server@4.3.1(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(typescript@5.9.3)':
+  '@nuxt/nitro-server@4.3.1(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(typescript@5.9.3)':
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
@@ -6785,7 +6997,7 @@ snapshots:
       klona: 2.0.6
       mocked-exports: 0.1.1
       nitropack: 2.13.1(idb-keyval@6.2.2)
-      nuxt: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2)
+      nuxt: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2)
       ohash: 2.0.11
       pathe: 2.0.3
       pkg-types: 2.3.0
@@ -6849,58 +7061,100 @@ snapshots:
       rc9: 3.0.0
       std-env: 3.10.0
 
-  '@nuxt/ui@2.22.3(idb-keyval@6.2.2)(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))(yaml@2.8.2)(yup@1.7.1)':
+  '@nuxt/ui@3.3.7(@babel/parser@7.29.0)(db0@0.3.4)(embla-carousel@8.6.0)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.28(typescript@5.9.3)))(vue@3.5.28(typescript@5.9.3))(yup@1.7.1)':
     dependencies:
-      '@headlessui/tailwindcss': 0.2.2(tailwindcss@3.4.19(yaml@2.8.2))
-      '@headlessui/vue': 1.7.23(vue@3.5.28(typescript@5.9.3))
-      '@iconify-json/heroicons': 1.2.3
-      '@nuxt/icon': 1.15.0(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
+      '@iconify/vue': 5.0.0(vue@3.5.28(typescript@5.9.3))
+      '@internationalized/date': 3.11.0
+      '@internationalized/number': 3.6.5
+      '@nuxt/fonts': 0.11.4(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      '@nuxt/icon': 1.15.0(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
+      '@nuxt/schema': 4.3.1
       '@nuxtjs/color-mode': 3.5.2(magicast@0.5.2)
-      '@nuxtjs/tailwindcss': 6.14.0(magicast@0.5.2)(yaml@2.8.2)
-      '@popperjs/core': 2.11.8
       '@standard-schema/spec': 1.1.0
-      '@tailwindcss/aspect-ratio': 0.4.2(tailwindcss@3.4.19(yaml@2.8.2))
-      '@tailwindcss/container-queries': 0.1.1(tailwindcss@3.4.19(yaml@2.8.2))
-      '@tailwindcss/forms': 0.5.11(tailwindcss@3.4.19(yaml@2.8.2))
-      '@tailwindcss/typography': 0.5.19(tailwindcss@3.4.19(yaml@2.8.2))
+      '@tailwindcss/postcss': 4.1.18
+      '@tailwindcss/vite': 4.1.18(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      '@tanstack/vue-table': 8.21.3(vue@3.5.28(typescript@5.9.3))
+      '@unhead/vue': 2.1.4(vue@3.5.28(typescript@5.9.3))
       '@vueuse/core': 13.9.0(vue@3.5.28(typescript@5.9.3))
       '@vueuse/integrations': 13.9.0(fuse.js@7.1.0)(idb-keyval@6.2.2)(vue@3.5.28(typescript@5.9.3))
-      '@vueuse/math': 13.9.0(vue@3.5.28(typescript@5.9.3))
+      colortranslator: 5.0.0
+      consola: 3.4.2
       defu: 6.1.4
+      embla-carousel-auto-height: 8.6.0(embla-carousel@8.6.0)
+      embla-carousel-auto-scroll: 8.6.0(embla-carousel@8.6.0)
+      embla-carousel-autoplay: 8.6.0(embla-carousel@8.6.0)
+      embla-carousel-class-names: 8.6.0(embla-carousel@8.6.0)
+      embla-carousel-fade: 8.6.0(embla-carousel@8.6.0)
+      embla-carousel-vue: 8.6.0(vue@3.5.28(typescript@5.9.3))
+      embla-carousel-wheel-gestures: 8.1.0(embla-carousel@8.6.0)
       fuse.js: 7.1.0
+      hookable: 5.5.3
+      knitwork: 1.3.0
+      magic-string: 0.30.21
+      mlly: 1.8.0
       ohash: 2.0.11
       pathe: 2.0.3
+      reka-ui: 2.6.0(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3))
       scule: 1.3.0
-      tailwind-merge: 2.6.1
-      tailwindcss: 3.4.19(yaml@2.8.2)
+      tailwind-merge: 3.4.0
+      tailwind-variants: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18)
+      tailwindcss: 4.1.18
+      tinyglobby: 0.2.15
+      typescript: 5.9.3
+      unplugin: 2.3.11
+      unplugin-auto-import: 20.3.0(@nuxt/kit@4.3.1(magicast@0.5.2))(@vueuse/core@13.9.0(vue@3.5.28(typescript@5.9.3)))
+      unplugin-vue-components: 30.0.0(@babel/parser@7.29.0)(@nuxt/kit@4.3.1(magicast@0.5.2))(vue@3.5.28(typescript@5.9.3))
+      vaul-vue: 0.4.1(reka-ui@2.6.0(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3)))(vue@3.5.28(typescript@5.9.3))
+      vue-component-type-helpers: 3.2.4
     optionalDependencies:
+      vue-router: 4.6.4(vue@3.5.28(typescript@5.9.3))
       yup: 1.7.1
     transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@babel/parser'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - '@vue/composition-api'
       - async-validator
+      - aws4fetch
       - axios
       - change-case
+      - db0
       - drauu
+      - embla-carousel
+      - encoding
       - focus-trap
       - idb-keyval
+      - ioredis
       - jwt-decode
       - magicast
       - nprogress
       - qrcode
       - sortablejs
       - supports-color
-      - tsx
       - universal-cookie
+      - uploadthing
       - vite
       - vue
-      - yaml
 
-  '@nuxt/vite-builder@4.3.1(@types/node@25.2.2)(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3))(yaml@2.8.2)':
+  '@nuxt/vite-builder@4.3.1(@types/node@25.2.2)(lightningcss@1.30.2)(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3))(yaml@2.8.2)':
     dependencies:
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
       '@rollup/plugin-replace': 6.0.3(rollup@4.57.1)
-      '@vitejs/plugin-vue': 6.0.4(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
-      '@vitejs/plugin-vue-jsx': 5.1.4(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
+      '@vitejs/plugin-vue': 6.0.4(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx': 5.1.4(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
       autoprefixer: 10.4.24(postcss@8.5.6)
       consola: 3.4.2
       cssnano: 7.1.2(postcss@8.5.6)
@@ -6914,7 +7168,7 @@ snapshots:
       magic-string: 0.30.21
       mlly: 1.8.0
       mocked-exports: 0.1.1
-      nuxt: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2)
+      nuxt: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2)
       pathe: 2.0.3
       pkg-types: 2.3.0
       postcss: 8.5.6
@@ -6923,9 +7177,9 @@ snapshots:
       std-env: 3.10.0
       ufo: 1.6.3
       unenv: 2.0.0-rc.24
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
-      vite-node: 5.3.0(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
-      vite-plugin-checker: 0.12.0(oxlint@1.43.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite-node: 5.3.0(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite-plugin-checker: 0.12.0(oxlint@1.43.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
       vue: 3.5.28(typescript@5.9.3)
       vue-bundle-renderer: 2.2.0
     transitivePeerDependencies:
@@ -6970,30 +7224,6 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxtjs/tailwindcss@6.14.0(magicast@0.5.2)(yaml@2.8.2)':
-    dependencies:
-      '@nuxt/kit': 3.21.1(magicast@0.5.2)
-      autoprefixer: 10.4.24(postcss@8.5.6)
-      c12: 3.3.3(magicast@0.5.2)
-      consola: 3.4.2
-      defu: 6.1.4
-      h3: 1.15.5
-      klona: 2.0.6
-      ohash: 2.0.11
-      pathe: 2.0.3
-      pkg-types: 2.3.0
-      postcss: 8.5.6
-      postcss-nesting: 13.0.2(postcss@8.5.6)
-      tailwind-config-viewer: 2.0.4(tailwindcss@3.4.19(yaml@2.8.2))
-      tailwindcss: 3.4.19(yaml@2.8.2)
-      ufo: 1.6.3
-      unctx: 2.5.0
-    transitivePeerDependencies:
-      - magicast
-      - supports-color
-      - tsx
-      - yaml
-
   '@oxc-minify/binding-android-arm-eabi@0.112.0':
     optional: true
 
@@ -7530,31 +7760,96 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.19(yaml@2.8.2))':
+  '@tailwindcss/node@4.1.18':
     dependencies:
-      tailwindcss: 3.4.19(yaml@2.8.2)
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.18
 
-  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.19(yaml@2.8.2))':
-    dependencies:
-      tailwindcss: 3.4.19(yaml@2.8.2)
+  '@tailwindcss/oxide-android-arm64@4.1.18':
+    optional: true
 
-  '@tailwindcss/forms@0.5.11(tailwindcss@3.4.19(yaml@2.8.2))':
-    dependencies:
-      mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.4.19(yaml@2.8.2)
+  '@tailwindcss/oxide-darwin-arm64@4.1.18':
+    optional: true
 
-  '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(yaml@2.8.2))':
+  '@tailwindcss/oxide-darwin-x64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.18':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-x64': 4.1.18
+      '@tailwindcss/oxide-freebsd-x64': 4.1.18
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
+
+  '@tailwindcss/postcss@4.1.18':
     dependencies:
-      postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.19(yaml@2.8.2)
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.18
+      '@tailwindcss/oxide': 4.1.18
+      postcss: 8.5.6
+      tailwindcss: 4.1.18
 
   '@tailwindcss/typography@0.5.19(tailwindcss@4.1.18)':
     dependencies:
       postcss-selector-parser: 6.0.10
       tailwindcss: 4.1.18
 
+  '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))':
+    dependencies:
+      '@tailwindcss/node': 4.1.18
+      '@tailwindcss/oxide': 4.1.18
+      tailwindcss: 4.1.18
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+
+  '@tanstack/table-core@8.21.3': {}
+
   '@tanstack/virtual-core@3.13.18': {}
 
+  '@tanstack/vue-table@8.21.3(vue@3.5.28(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      vue: 3.5.28(typescript@5.9.3)
+
   '@tanstack/vue-virtual@3.13.18(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@tanstack/virtual-core': 3.13.18
@@ -7626,12 +7921,12 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vite-pwa/nuxt@1.1.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)':
+  '@vite-pwa/nuxt@1.1.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)':
     dependencies:
       '@nuxt/kit': 3.21.1(magicast@0.5.2)
       pathe: 1.1.2
       ufo: 1.6.3
-      vite-plugin-pwa: 1.2.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)
+      vite-plugin-pwa: 1.2.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)
     transitivePeerDependencies:
       - magicast
       - supports-color
@@ -7639,22 +7934,22 @@ snapshots:
       - workbox-build
       - workbox-window
 
-  '@vitejs/plugin-vue-jsx@5.1.4(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.4(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
       '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
       '@rolldown/pluginutils': 1.0.0-rc.3
       '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.29.0)
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.28(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@6.0.4(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.4(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.28(typescript@5.9.3)
 
   '@volar/language-core@2.4.27':
@@ -7734,14 +8029,14 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-core@8.0.6(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
+  '@vue/devtools-core@8.0.6(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@vue/devtools-kit': 8.0.6
       '@vue/devtools-shared': 8.0.6
       mitt: 3.0.1
       nanoid: 5.1.6
       pathe: 2.0.3
-      vite-hot-client: 2.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      vite-hot-client: 2.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
       vue: 3.5.28(typescript@5.9.3)
     transitivePeerDependencies:
       - vite
@@ -7804,6 +8099,15 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@12.8.2(typescript@5.9.3)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      vue: 3.5.28(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/core@13.9.0(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
@@ -7827,24 +8131,21 @@ snapshots:
       fuse.js: 7.1.0
       idb-keyval: 6.2.2
 
-  '@vueuse/math@13.9.0(vue@3.5.28(typescript@5.9.3))':
-    dependencies:
-      '@vueuse/shared': 13.9.0(vue@3.5.28(typescript@5.9.3))
-      vue: 3.5.28(typescript@5.9.3)
-
   '@vueuse/metadata@10.11.1': {}
 
+  '@vueuse/metadata@12.8.2': {}
+
   '@vueuse/metadata@13.9.0': {}
 
   '@vueuse/metadata@14.2.0': {}
 
-  '@vueuse/nuxt@14.2.0(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
+  '@vueuse/nuxt@14.2.0(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
       '@vueuse/core': 14.2.0(vue@3.5.28(typescript@5.9.3))
       '@vueuse/metadata': 14.2.0
       local-pkg: 1.1.2
-      nuxt: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2)
+      nuxt: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2)
       vue: 3.5.28(typescript@5.9.3)
     transitivePeerDependencies:
       - magicast
@@ -7856,6 +8157,12 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/shared@12.8.2(typescript@5.9.3)':
+    dependencies:
+      vue: 3.5.28(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/shared@13.9.0(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       vue: 3.5.28(typescript@5.9.3)
@@ -7883,11 +8190,6 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
-  accepts@1.3.8:
-    dependencies:
-      mime-types: 2.1.35
-      negotiator: 0.6.3
-
   acorn-import-attributes@1.9.5(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
@@ -7917,8 +8219,6 @@ snapshots:
 
   ansis@4.2.0: {}
 
-  any-promise@1.3.0: {}
-
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
@@ -7947,8 +8247,6 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
-  arg@5.0.2: {}
-
   argparse@2.0.1: {}
 
   aria-hidden@1.2.6:
@@ -8070,8 +8368,6 @@ snapshots:
 
   baseline-browser-mapping@2.9.19: {}
 
-  binary-extensions@2.3.0: {}
-
   bindings@1.5.0:
     dependencies:
       file-uri-to-path: 1.0.0
@@ -8085,12 +8381,9 @@ snapshots:
       readable-stream: 3.6.2
     optional: true
 
-  boolbase@1.0.0: {}
+  blob-to-buffer@1.2.9: {}
 
-  brace-expansion@1.1.12:
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
+  boolbase@1.0.0: {}
 
   brace-expansion@2.0.2:
     dependencies:
@@ -8100,6 +8393,10 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
+  brotli@1.3.3:
+    dependencies:
+      base64-js: 1.5.1
+
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.19
@@ -8146,11 +8443,6 @@ snapshots:
 
   cac@6.7.14: {}
 
-  cache-content-type@1.0.1:
-    dependencies:
-      mime-types: 2.1.35
-      ylru: 1.4.0
-
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -8168,8 +8460,6 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.3.0
 
-  camelcase-css@2.0.1: {}
-
   caniuse-api@3.0.0:
     dependencies:
       browserslist: 4.28.1
@@ -8179,23 +8469,6 @@ snapshots:
 
   caniuse-lite@1.0.30001769: {}
 
-  chalk@4.1.2:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
@@ -8227,9 +8500,9 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
-  cluster-key-slot@1.1.2: {}
+  clone@2.1.2: {}
 
-  co@4.6.0: {}
+  cluster-key-slot@1.1.2: {}
 
   color-convert@2.0.1:
     dependencies:
@@ -8251,14 +8524,12 @@ snapshots:
 
   colord@2.9.3: {}
 
+  colortranslator@5.0.0: {}
+
   commander@11.1.0: {}
 
   commander@2.20.3: {}
 
-  commander@4.1.1: {}
-
-  commander@6.2.1: {}
-
   commander@7.2.0:
     optional: true
 
@@ -8276,31 +8547,18 @@ snapshots:
       normalize-path: 3.0.0
       readable-stream: 4.7.0
 
-  concat-map@0.0.1: {}
-
   confbox@0.1.8: {}
 
   confbox@0.2.4: {}
 
   consola@3.4.2: {}
 
-  content-disposition@0.5.4:
-    dependencies:
-      safe-buffer: 5.2.1
-
-  content-type@1.0.5: {}
-
   convert-source-map@2.0.0: {}
 
   cookie-es@1.2.2: {}
 
   cookie-es@2.0.0: {}
 
-  cookies@0.9.1:
-    dependencies:
-      depd: 2.0.0
-      keygrip: 1.1.0
-
   copy-anything@4.0.5:
     dependencies:
       is-what: 5.5.0
@@ -8324,6 +8582,12 @@ snapshots:
 
   croner@9.1.0: {}
 
+  cross-fetch@3.2.0:
+    dependencies:
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -8460,10 +8724,6 @@ snapshots:
 
   db0@0.3.4: {}
 
-  debug@3.2.7:
-    dependencies:
-      ms: 2.1.3
-
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -8473,8 +8733,6 @@ snapshots:
       mimic-response: 3.1.0
     optional: true
 
-  deep-equal@1.0.1: {}
-
   deep-extend@0.6.0:
     optional: true
 
@@ -8505,28 +8763,20 @@ snapshots:
 
   defu@6.1.4: {}
 
-  delegates@1.0.0: {}
-
   denque@2.1.0: {}
 
-  depd@1.1.2: {}
-
   depd@2.0.0: {}
 
   destr@2.0.5: {}
 
-  destroy@1.2.0: {}
-
   detect-libc@2.1.2: {}
 
   devalue@5.6.2: {}
 
-  didyoumean@1.2.2: {}
+  dfa@1.2.0: {}
 
   diff@8.0.3: {}
 
-  dlv@1.1.3: {}
-
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -8571,12 +8821,47 @@ snapshots:
 
   electron-to-chromium@1.5.286: {}
 
+  embla-carousel-auto-height@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-auto-scroll@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-autoplay@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-class-names@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-fade@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel-vue@8.6.0(vue@3.5.28(typescript@5.9.3)):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      vue: 3.5.28(typescript@5.9.3)
+
+  embla-carousel-wheel-gestures@8.1.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+      wheel-gestures: 2.2.48
+
+  embla-carousel@8.6.0: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
 
-  encodeurl@1.0.2: {}
-
   encodeurl@2.0.0: {}
 
   end-of-stream@1.4.5:
@@ -8584,6 +8869,11 @@ snapshots:
       once: 1.4.0
     optional: true
 
+  enhanced-resolve@5.19.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
   entities@4.5.0: {}
 
   entities@7.0.1: {}
@@ -8672,6 +8962,35 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  esbuild@0.25.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
+
   esbuild@0.27.3:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.27.3
@@ -8782,6 +9101,31 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  fontaine@0.6.0:
+    dependencies:
+      '@capsizecss/metrics': 3.6.2
+      '@capsizecss/unpack': 2.4.0
+      css-tree: 3.1.0
+      magic-regexp: 0.10.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      ufo: 1.6.3
+      unplugin: 2.3.11
+    transitivePeerDependencies:
+      - encoding
+
+  fontkit@2.0.4:
+    dependencies:
+      '@swc/helpers': 0.5.18
+      brotli: 1.3.3
+      clone: 2.1.2
+      dfa: 1.2.0
+      fast-deep-equal: 3.1.3
+      restructure: 3.0.2
+      tiny-inflate: 1.0.3
+      unicode-properties: 1.4.1
+      unicode-trie: 2.0.0
+
   for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
@@ -8793,8 +9137,6 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
-  fresh@0.5.2: {}
-
   fresh@2.0.0: {}
 
   fs-constants@1.0.0:
@@ -8807,8 +9149,6 @@ snapshots:
       jsonfile: 6.2.0
       universalify: 2.0.1
 
-  fs.realpath@1.0.0: {}
-
   fsevents@2.3.3:
     optional: true
 
@@ -8883,10 +9223,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
   glob@10.5.0:
     dependencies:
       foreground-child: 3.3.1
@@ -8911,15 +9247,6 @@ snapshots:
       minipass: 7.1.2
       path-scurry: 2.0.1
 
-  glob@7.2.3:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-
   global-directory@4.0.1:
     dependencies:
       ini: 4.1.1
@@ -8971,8 +9298,6 @@ snapshots:
 
   has-bigints@1.1.0: {}
 
-  has-flag@4.0.0: {}
-
   has-property-descriptors@1.0.2:
     dependencies:
       es-define-property: 1.0.1
@@ -8997,26 +9322,6 @@ snapshots:
 
   hookable@6.0.1: {}
 
-  http-assert@1.5.0:
-    dependencies:
-      deep-equal: 1.0.1
-      http-errors: 1.8.1
-
-  http-errors@1.6.3:
-    dependencies:
-      depd: 1.1.2
-      inherits: 2.0.3
-      setprototypeof: 1.1.0
-      statuses: 1.5.0
-
-  http-errors@1.8.1:
-    dependencies:
-      depd: 1.1.2
-      inherits: 2.0.4
-      setprototypeof: 1.2.0
-      statuses: 1.5.0
-      toidentifier: 1.0.1
-
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -9062,13 +9367,6 @@ snapshots:
       unplugin: 2.3.11
       unplugin-utils: 0.2.5
 
-  inflight@1.0.6:
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-
-  inherits@2.0.3: {}
-
   inherits@2.0.4: {}
 
   ini@1.3.8:
@@ -9162,10 +9460,6 @@ snapshots:
     dependencies:
       has-bigints: 1.1.0
 
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
   is-boolean-object@1.2.2:
     dependencies:
       call-bound: 1.0.4
@@ -9325,8 +9619,6 @@ snapshots:
       filelist: 1.0.4
       picocolors: 1.1.1
 
-  jiti@1.21.7: {}
-
   jiti@2.6.1: {}
 
   js-tokens@4.0.0: {}
@@ -9349,10 +9641,6 @@ snapshots:
 
   jsonpointer@5.0.1: {}
 
-  keygrip@1.1.0:
-    dependencies:
-      tsscmp: 1.0.6
-
   kleur@3.0.3: {}
 
   kleur@4.1.5: {}
@@ -9361,56 +9649,6 @@ snapshots:
 
   knitwork@1.3.0: {}
 
-  koa-compose@4.1.0: {}
-
-  koa-convert@2.0.0:
-    dependencies:
-      co: 4.6.0
-      koa-compose: 4.1.0
-
-  koa-send@5.0.1:
-    dependencies:
-      debug: 4.4.3
-      http-errors: 1.8.1
-      resolve-path: 1.4.0
-    transitivePeerDependencies:
-      - supports-color
-
-  koa-static@5.0.0:
-    dependencies:
-      debug: 3.2.7
-      koa-send: 5.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  koa@2.16.3:
-    dependencies:
-      accepts: 1.3.8
-      cache-content-type: 1.0.1
-      content-disposition: 0.5.4
-      content-type: 1.0.5
-      cookies: 0.9.1
-      debug: 4.4.3
-      delegates: 1.0.0
-      depd: 2.0.0
-      destroy: 1.2.0
-      encodeurl: 1.0.2
-      escape-html: 1.0.3
-      fresh: 0.5.2
-      http-assert: 1.5.0
-      http-errors: 1.8.1
-      is-generator-function: 1.1.2
-      koa-compose: 4.1.0
-      koa-convert: 2.0.0
-      on-finished: 2.4.1
-      only: 0.0.2
-      parseurl: 1.3.3
-      statuses: 1.5.0
-      type-is: 1.6.18
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   kolorist@1.8.0: {}
 
   launch-editor@2.12.0:
@@ -9424,9 +9662,56 @@ snapshots:
 
   leven@3.1.0: {}
 
-  lilconfig@3.1.3: {}
+  lightningcss-android-arm64@1.30.2:
+    optional: true
 
-  lines-and-columns@1.2.4: {}
+  lightningcss-darwin-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    optional: true
+
+  lightningcss@1.30.2:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
+
+  lilconfig@3.1.3: {}
 
   linkify-it@5.0.0:
     dependencies:
@@ -9529,27 +9814,17 @@ snapshots:
 
   mdurl@2.0.0: {}
 
-  media-typer@0.3.0: {}
-
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
 
-  methods@1.1.2: {}
-
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
 
-  mime-db@1.52.0: {}
-
   mime-db@1.54.0: {}
 
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
   mime-types@3.0.2:
     dependencies:
       mime-db: 1.54.0
@@ -9561,16 +9836,10 @@ snapshots:
   mimic-response@3.1.0:
     optional: true
 
-  mini-svg-data-uri@1.4.4: {}
-
   minimatch@10.1.2:
     dependencies:
       '@isaacs/brace-expansion': 5.0.1
 
-  minimatch@3.1.2:
-    dependencies:
-      brace-expansion: 1.1.12
-
   minimatch@5.1.6:
     dependencies:
       brace-expansion: 2.0.2
@@ -9608,12 +9877,6 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   nanoid@3.3.11: {}
 
   nanoid@5.1.6: {}
@@ -9623,8 +9886,6 @@ snapshots:
   napi-build-utils@2.0.0:
     optional: true
 
-  negotiator@0.6.3: {}
-
   nitropack@2.13.1(idb-keyval@6.2.2):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.4.2
@@ -9777,16 +10038,16 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2):
+  nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2):
     dependencies:
       '@dxup/nuxt': 0.3.2(magicast@0.5.2)
       '@nuxt/cli': 3.33.1(@nuxt/schema@4.3.1)(cac@6.7.14)(magicast@0.5.2)
-      '@nuxt/devtools': 3.1.1(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
+      '@nuxt/devtools': 3.1.1(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
-      '@nuxt/nitro-server': 4.3.1(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(typescript@5.9.3)
+      '@nuxt/nitro-server': 4.3.1(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(typescript@5.9.3)
       '@nuxt/schema': 4.3.1
       '@nuxt/telemetry': 2.7.0(@nuxt/kit@4.3.1(magicast@0.5.2))
-      '@nuxt/vite-builder': 4.3.1(@types/node@25.2.2)(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3))(yaml@2.8.2)
+      '@nuxt/vite-builder': 4.3.1(@types/node@25.2.2)(lightningcss@1.30.2)(magicast@0.5.2)(nuxt@4.3.1(@parcel/watcher@2.5.6)(@types/node@25.2.2)(@vue/compiler-sfc@3.5.28)(cac@6.7.14)(db0@0.3.4)(idb-keyval@6.2.2)(ioredis@5.9.2)(lightningcss@1.30.2)(magicast@0.5.2)(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2))(oxlint@1.43.0)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3))(yaml@2.8.2)
       '@unhead/vue': 2.1.4(vue@3.5.28(typescript@5.9.3))
       '@vue/shared': 3.5.28
       c12: 3.3.3(magicast@0.5.2)
@@ -9906,10 +10167,6 @@ snapshots:
       pathe: 2.0.3
       tinyexec: 1.0.2
 
-  object-assign@4.1.1: {}
-
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -9944,13 +10201,12 @@ snapshots:
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
+    optional: true
 
   onetime@6.0.0:
     dependencies:
       mimic-fn: 4.0.0
 
-  only@0.0.2: {}
-
   open@10.2.0:
     dependencies:
       default-browser: 5.5.0
@@ -9958,11 +10214,6 @@ snapshots:
       is-inside-container: 1.0.0
       wsl-utils: 0.1.0
 
-  open@7.4.2:
-    dependencies:
-      is-docker: 2.2.1
-      is-wsl: 2.2.0
-
   open@8.4.2:
     dependencies:
       define-lazy-prop: 2.0.0
@@ -10081,12 +10332,12 @@ snapshots:
 
   package-manager-detector@1.6.0: {}
 
+  pako@0.2.9: {}
+
   parseurl@1.3.3: {}
 
   path-browserify@1.0.1: {}
 
-  path-is-absolute@1.0.1: {}
-
   path-key@3.1.1: {}
 
   path-key@4.0.0: {}
@@ -10103,8 +10354,6 @@ snapshots:
       lru-cache: 11.2.5
       minipass: 7.1.2
 
-  path-to-regexp@6.3.0: {}
-
   pathe@1.1.2: {}
 
   pathe@2.0.3: {}
@@ -10117,8 +10366,6 @@ snapshots:
 
   picomatch@4.0.3: {}
 
-  pify@2.3.0: {}
-
   pinia-plugin-persistedstate@4.7.1(@nuxt/kit@4.3.1(magicast@0.5.2))(@pinia/nuxt@0.11.3(magicast@0.5.2)(pinia@2.3.1(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3))))(pinia@2.3.1(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3))):
     dependencies:
       defu: 6.1.4
@@ -10137,8 +10384,6 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  pirates@4.0.7: {}
-
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -10151,13 +10396,6 @@ snapshots:
       exsolve: 1.0.8
       pathe: 2.0.3
 
-  portfinder@1.0.38:
-    dependencies:
-      async: 3.2.6
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
   possible-typed-array-names@1.1.0: {}
 
   postcss-calc@10.1.1(postcss@8.5.6):
@@ -10197,26 +10435,6 @@ snapshots:
     dependencies:
       postcss: 8.5.6
 
-  postcss-import@15.1.0(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.11
-
-  postcss-js@4.1.0(postcss@8.5.6):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.6
-
-  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.6)(yaml@2.8.2):
-    dependencies:
-      lilconfig: 3.1.3
-    optionalDependencies:
-      jiti: 1.21.7
-      postcss: 8.5.6
-      yaml: 2.8.2
-
   postcss-merge-longhand@7.0.5(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
@@ -10256,18 +10474,6 @@ snapshots:
       postcss: 8.5.6
       postcss-selector-parser: 7.1.1
 
-  postcss-nested@6.2.0(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-      postcss-selector-parser: 6.1.2
-
-  postcss-nesting@13.0.2(postcss@8.5.6):
-    dependencies:
-      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.1)
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.6
-      postcss-selector-parser: 7.1.1
-
   postcss-normalize-charset@7.0.1(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
@@ -10335,11 +10541,6 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-selector-parser@7.1.1:
     dependencies:
       cssesc: 3.0.0
@@ -10454,10 +10655,6 @@ snapshots:
       strip-json-comments: 2.0.1
     optional: true
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   readable-stream@2.3.8:
     dependencies:
       core-util-is: 1.0.3
@@ -10487,10 +10684,6 @@ snapshots:
     dependencies:
       minimatch: 5.1.6
 
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
-
   readdirp@4.1.2: {}
 
   readdirp@5.0.0: {}
@@ -10544,11 +10737,22 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
-  replace-in-file@6.3.5:
+  reka-ui@2.6.0(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3)):
     dependencies:
-      chalk: 4.1.2
-      glob: 7.2.3
-      yargs: 17.7.2
+      '@floating-ui/dom': 1.7.5
+      '@floating-ui/vue': 1.1.10(vue@3.5.28(typescript@5.9.3))
+      '@internationalized/date': 3.11.0
+      '@internationalized/number': 3.6.5
+      '@tanstack/vue-virtual': 3.13.18(vue@3.5.28(typescript@5.9.3))
+      '@vueuse/core': 12.8.2(typescript@5.9.3)
+      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      aria-hidden: 1.2.6
+      defu: 6.1.4
+      ohash: 2.0.11
+      vue: 3.5.28(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
 
   require-directory@2.1.1: {}
 
@@ -10556,17 +10760,14 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
-  resolve-path@1.4.0:
-    dependencies:
-      http-errors: 1.6.3
-      path-is-absolute: 1.0.1
-
   resolve@1.22.11:
     dependencies:
       is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  restructure@3.0.2: {}
+
   reusify@1.1.0: {}
 
   rfdc@1.4.1: {}
@@ -10721,8 +10922,6 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
 
-  setprototypeof@1.1.0: {}
-
   setprototypeof@1.2.0: {}
 
   sharp@0.32.6:
@@ -10837,8 +11036,6 @@ snapshots:
 
   standard-as-callback@2.1.0: {}
 
-  statuses@1.5.0: {}
-
   statuses@2.0.2: {}
 
   std-env@3.10.0: {}
@@ -10949,26 +11146,12 @@ snapshots:
       postcss: 8.5.6
       postcss-selector-parser: 7.1.1
 
-  sucrase@3.35.1:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      commander: 4.1.1
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.7
-      tinyglobby: 0.2.15
-      ts-interface-checker: 0.1.13
-
   superjson@2.2.6:
     dependencies:
       copy-anything: 4.0.5
 
   supports-color@10.2.2: {}
 
-  supports-color@7.2.0:
-    dependencies:
-      has-flag: 4.0.0
-
   supports-preserve-symlinks-flag@1.0.0: {}
 
   svgo@3.3.2:
@@ -10996,52 +11179,18 @@ snapshots:
 
   tagged-tag@1.0.0: {}
 
-  tailwind-config-viewer@2.0.4(tailwindcss@3.4.19(yaml@2.8.2)):
-    dependencies:
-      '@koa/router': 12.0.2
-      commander: 6.2.1
-      fs-extra: 9.1.0
-      koa: 2.16.3
-      koa-static: 5.0.0
-      open: 7.4.2
-      portfinder: 1.0.38
-      replace-in-file: 6.3.5
-      tailwindcss: 3.4.19(yaml@2.8.2)
-    transitivePeerDependencies:
-      - supports-color
+  tailwind-merge@3.4.0: {}
 
-  tailwind-merge@2.6.1: {}
-
-  tailwindcss@3.4.19(yaml@2.8.2):
+  tailwind-variants@3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18):
     dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-import: 15.1.0(postcss@8.5.6)
-      postcss-js: 4.1.0(postcss@8.5.6)
-      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6)(yaml@2.8.2)
-      postcss-nested: 6.2.0(postcss@8.5.6)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.11
-      sucrase: 3.35.1
-    transitivePeerDependencies:
-      - tsx
-      - yaml
+      tailwindcss: 4.1.18
+    optionalDependencies:
+      tailwind-merge: 3.4.0
 
   tailwindcss@4.1.18: {}
 
+  tapable@2.3.0: {}
+
   tar-fs@2.1.4:
     dependencies:
       chownr: 1.1.4
@@ -11111,16 +11260,10 @@ snapshots:
     transitivePeerDependencies:
       - react-native-b4a
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
   tiny-case@1.0.3: {}
 
+  tiny-inflate@1.0.3: {}
+
   tiny-invariant@1.3.3: {}
 
   tinyexec@1.0.2: {}
@@ -11148,12 +11291,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  ts-interface-checker@0.1.13: {}
-
   tslib@2.8.1: {}
 
-  tsscmp@1.0.6: {}
-
   tunnel-agent@0.6.0:
     dependencies:
       safe-buffer: 5.2.1
@@ -11167,11 +11306,6 @@ snapshots:
     dependencies:
       tagged-tag: 1.0.0
 
-  type-is@1.6.18:
-    dependencies:
-      media-typer: 0.3.0
-      mime-types: 2.1.35
-
   type-level-regexp@0.1.17: {}
 
   typed-array-buffer@1.0.3:
@@ -11250,12 +11384,27 @@ snapshots:
 
   unicode-match-property-value-ecmascript@2.2.1: {}
 
+  unicode-properties@1.4.1:
+    dependencies:
+      base64-js: 1.5.1
+      unicode-trie: 2.0.0
+
   unicode-property-aliases-ecmascript@2.2.0: {}
 
+  unicode-trie@2.0.0:
+    dependencies:
+      pako: 0.2.9
+      tiny-inflate: 1.0.3
+
   unicorn-magic@0.3.0: {}
 
   unicorn-magic@0.4.0: {}
 
+  unifont@0.4.1:
+    dependencies:
+      css-tree: 3.1.0
+      ohash: 2.0.11
+
   unimport@5.6.0:
     dependencies:
       acorn: 8.15.0
@@ -11279,6 +11428,18 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unplugin-auto-import@20.3.0(@nuxt/kit@4.3.1(magicast@0.5.2))(@vueuse/core@13.9.0(vue@3.5.28(typescript@5.9.3))):
+    dependencies:
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      picomatch: 4.0.3
+      unimport: 5.6.0
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+    optionalDependencies:
+      '@nuxt/kit': 4.3.1(magicast@0.5.2)
+      '@vueuse/core': 13.9.0(vue@3.5.28(typescript@5.9.3))
+
   unplugin-utils@0.2.5:
     dependencies:
       pathe: 2.0.3
@@ -11289,6 +11450,23 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.3
 
+  unplugin-vue-components@30.0.0(@babel/parser@7.29.0)(@nuxt/kit@4.3.1(magicast@0.5.2))(vue@3.5.28(typescript@5.9.3)):
+    dependencies:
+      chokidar: 4.0.3
+      debug: 4.4.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+      vue: 3.5.28(typescript@5.9.3)
+    optionalDependencies:
+      '@babel/parser': 7.29.0
+      '@nuxt/kit': 4.3.1(magicast@0.5.2)
+    transitivePeerDependencies:
+      - supports-color
+
   unplugin-vue-router@0.19.2(@vue/compiler-sfc@3.5.28)(vue-router@4.6.4(vue@3.5.28(typescript@5.9.3)))(vue@3.5.28(typescript@5.9.3)):
     dependencies:
       '@babel/generator': 7.29.1
@@ -11388,25 +11566,31 @@ snapshots:
       vue: 3.5.28(typescript@5.9.3)
       vue-screen-utils: 1.0.0-beta.13(vue@3.5.28(typescript@5.9.3))
 
-  vary@1.1.2: {}
+  vaul-vue@0.4.1(reka-ui@2.6.0(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3)))(vue@3.5.28(typescript@5.9.3)):
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.28(typescript@5.9.3))
+      reka-ui: 2.6.0(typescript@5.9.3)(vue@3.5.28(typescript@5.9.3))
+      vue: 3.5.28(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
 
-  vite-dev-rpc@1.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
+  vite-dev-rpc@1.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
     dependencies:
       birpc: 2.9.0
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
-      vite-hot-client: 2.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite-hot-client: 2.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
 
-  vite-hot-client@2.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
+  vite-hot-client@2.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
     dependencies:
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
 
-  vite-node@5.3.0(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+  vite-node@5.3.0(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       cac: 6.7.14
       es-module-lexer: 2.0.0
       obug: 2.1.1
       pathe: 2.0.3
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -11420,7 +11604,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.12.0(oxlint@1.43.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
+  vite-plugin-checker@0.12.0(oxlint@1.43.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
     dependencies:
       '@babel/code-frame': 7.29.0
       chokidar: 4.0.3
@@ -11429,13 +11613,13 @@ snapshots:
       picomatch: 4.0.3
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.15
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vscode-uri: 3.1.0
     optionalDependencies:
       oxlint: 1.43.0
       typescript: 5.9.3
 
-  vite-plugin-inspect@11.3.3(@nuxt/kit@4.3.1(magicast@0.5.2))(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
+  vite-plugin-inspect@11.3.3(@nuxt/kit@4.3.1(magicast@0.5.2))(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
     dependencies:
       ansis: 4.2.0
       debug: 4.4.3
@@ -11445,35 +11629,35 @@ snapshots:
       perfect-debounce: 2.1.0
       sirv: 3.0.2
       unplugin-utils: 0.3.1
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
-      vite-dev-rpc: 1.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite-dev-rpc: 1.1.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
     optionalDependencies:
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-pwa@1.2.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0):
+  vite-plugin-pwa@1.2.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0):
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       workbox-build: 7.4.0
       workbox-window: 7.4.0
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-tracer@1.2.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3)):
+  vite-plugin-vue-tracer@1.2.0(vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3)):
     dependencies:
       estree-walker: 3.0.3
       exsolve: 1.0.8
       magic-string: 0.30.21
       pathe: 2.0.3
       source-map-js: 1.2.1
-      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.28(typescript@5.9.3)
 
-  vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+  vite@7.3.1(@types/node@25.2.2)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.3
       fdir: 6.5.0(picomatch@4.0.3)
@@ -11485,6 +11669,7 @@ snapshots:
       '@types/node': 25.2.2
       fsevents: 2.3.3
       jiti: 2.6.1
+      lightningcss: 1.30.2
       sass: 1.97.3
       terser: 5.46.0
       yaml: 2.8.2
@@ -11495,6 +11680,8 @@ snapshots:
     dependencies:
       ufo: 1.6.3
 
+  vue-component-type-helpers@3.2.4: {}
+
   vue-demi@0.14.10(vue@3.5.28(typescript@5.9.3)):
     dependencies:
       vue: 3.5.28(typescript@5.9.3)
@@ -11539,6 +11726,8 @@ snapshots:
       tr46: 1.0.1
       webidl-conversions: 4.0.2
 
+  wheel-gestures@2.2.48: {}
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -11713,7 +11902,8 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.2
 
-  wrappy@1.0.2: {}
+  wrappy@1.0.2:
+    optional: true
 
   ws@8.19.0: {}
 
@@ -11747,8 +11937,6 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
-  ylru@1.4.0: {}
-
   youch-core@0.3.3:
     dependencies:
       '@poppinss/exception': 1.2.3
-- 
2.49.1