ci: 更新 Jenkinsfile，添加部署参数和构建条件

.github/copilot-instructions.md

@@ -32,6 +32,7 @@ Pinia Stores（持久化状态）
 ```
 
 **关键模式**：
+
 - **Pinia stores 必须是单一实例**，通过 `storeToRefs()` 获取响应式引用
 - **API 请求必须通过 `useFetchWrapped`** 来自动处理认证头（token/user_id）
 - **FFmpeg 采用单例模式**（`useFFmpeg()` 返回全局加载的实例），避免重复初始化
@@ -53,6 +54,7 @@ useFetchWrapped<AuthedRequest, BaseResponse<resp.xxx>>(
 ```
 
 **约定**：
+
 - **每个请求必须包含** `token` 和 `user_id`（来自 `useLoginState`）
 - **响应结构统一**: `BaseResponse<T>` 包含 `ret: number` 状态码和 `data: T` 数据
 - **API_BASE 在 `nuxt.config.ts` 中定义**，所有请求都相对于此 URL
@@ -60,11 +62,13 @@ useFetchWrapped<AuthedRequest, BaseResponse<resp.xxx>>(
 ### 3. 媒体处理架构
 
 #### FFmpeg 初始化流程
+
 - **单例加载**: 首次调用 `useFFmpeg()` 时初始化，后续复用缓存的实例
 - **WASM 资源加载**: 从 CDN（`cdn.jsdelivr.net`）加载 FFmpeg core、wasm、worker
 - **错误恢复**: 调用 `cleanupFFmpeg()` 清理资源并重置单例
 
 #### 视频合成流程（核心用例）
+
 ```
 输入: 透明通道视频 (WebM) + 背景图 (PNG/File)
   ↓
@@ -82,7 +86,9 @@ useFetchWrapped<AuthedRequest, BaseResponse<resp.xxx>>(
 ### 4. UI 组件架构
 
 #### 内置组件库（`components/uni/`）
+
 自定义包装组件，提供统一 API：
+
 - `UniButton`: 按钮 + loading 状态
 - `UniInput`/`UniTextArea`: 表单输入
 - `UniSelect`: 下拉选择
@@ -90,8 +96,9 @@ useFetchWrapped<AuthedRequest, BaseResponse<resp.xxx>>(
 - `UniCopyable`: 可复制文本
 
 **消息通知用法**：
+
 ```typescript
-const toast = useToast()  // Radix Vue 的 Toast（顶部通知）
+const toast = useToast() // Radix Vue 的 Toast（顶部通知）
 // 或从 provide 注入
 const messageApi = inject('uni-message')
 messageApi.success('操作成功')
@@ -99,6 +106,7 @@ messageApi.error('操作失败', 5000)
 ```
 
 #### Radix Vue + Nuxt UI 集成
+
 - 使用 Radix Vue for 基础组件（button, dialog, select）
 - Nuxt UI 用于高级组件 + 主题管理
 - **颜色方案**: primary='indigo', gray='neutral'，详见 `app.config.ts`
@@ -106,6 +114,7 @@ messageApi.error('操作失败', 5000)
 ### 5. 路由与页面结构
 
 **目录映射**：
+
 ```
 pages/
 ├── generation.vue (导航枢纽)
@@ -122,6 +131,7 @@ pages/
 ```
 
 **导航约定**：
+
 - `/generation` → 功能导航页面
 - `/aigc/chat` → 聊天/文本生成
 - `/generation/course` → 视频生成工作流
@@ -130,6 +140,7 @@ pages/
 ## 开发工作流
 
 ### 启动项目
+
 ```bash
 ni                    # 安装依赖
 nr dev                # 启动 http://localhost:3000
@@ -139,11 +150,13 @@ nr generate           # 生产构建 (生成静态文件)
 ### 常见任务
 
 **添加新的 API 端点**：
+
 1. 定义 Request 和 Response 类型（参考 `typings/llm.ts`）
 2. 在 composable 中使用 `useFetchWrapped` 调用
 3. 自动包含 token/user_id（来自 `useLoginState`）
 
 **添加新的视频处理功能**：
+
 1. 使用 `useFFmpeg()` 获取实例（自动初始化）
 2. 写入文件到 vFS: `ffmpeg.writeFile()`
 3. 执行命令：`ffmpeg.exec([...filterArgs])`
@@ -151,6 +164,7 @@ nr generate           # 生产构建 (生成静态文件)
 5. 使用 progress callback 通报处理进度
 
 **添加新的 UI 组件**：
+
 1. 创建在 `components/` 下（自动注册）
 2. 优先使用 Radix Vue + Nuxt UI（已集成）
 3. 使用 Tailwind CSS utility classes + `@apply` 指令
@@ -159,22 +173,26 @@ nr generate           # 生产构建 (生成静态文件)
 ## 项目特定的约定
 
 ### 类型定义位置
+
 - **LLM 相关**: `typings/llm.ts`（ChatMessage, ChatSession, ModelTag, LLMModal）
 - **全局类型**: `typings/types.d.ts`（BaseResponse, AuthedRequest, UserSchema）
 - **组件接口**: 组件目录下的 `index.d.ts`（例 `components/aigc/drawing/index.d.ts`）
 
 ### 命名规范
+
 - **Composables**: `use` 前缀（`useLoginState`, `useLLM`）
 - **Stores**: `use` + 功能名（`useHistory`, `useTourState`）
 - **组件**: PascalCase（`ChatItem.vue`, `ModalAuthentication.vue`）
 - **工具函数**: camelCase，放在 `composables/` 或各功能目录
 
 ### 响应式数据模式
+
 - **Pinia store 返回值**: 必须通过 `storeToRefs()` 才能保持响应式
 - **模板中的 ref**: 直接访问（Vue 自动展开）
 - **跨组件数据**: 优先使用 Pinia store（带持久化）
 
 ### 进度反馈与错误处理
+
 - **长时间操作** (视频处理): 通过 callback 函数报告 progress（0-100）
 - **错误处理**: 返回 Promise reject，上层 catch 处理；可选通过 toast/message 提示
 - **FFmpeg 错误**: 捕获 exitCode 非零，记录详细的 FFmpeg 输出
@@ -182,6 +200,7 @@ nr generate           # 生产构建 (生成静态文件)
 ## 依赖与性能优化
 
 ### 关键依赖
+
 - **@ffmpeg/ffmpeg@0.12.15**: WASM 视频处理（从 CDN 加载）
 - **@webav/av-cliper**: 客户端视频剪辑库
 - **markdown-it + highlight.js**: 内容渲染（支持代码高亮）
@@ -189,13 +208,16 @@ nr generate           # 生产构建 (生成静态文件)
 - **idb-keyval**: IndexedDB 简化操作（缓存大文件）
 
 ### Vite 优化设置
+
 ```typescript
 // nuxt.config.ts 中排除以下包进行优化，避免 bundling WASM
 optimizeDeps.exclude: ['@ffmpeg/ffmpeg', 'idb-keyval', '@webav/av-cliper', 'gsap', 'markdown-it']
 ```
 
 ### 构建排除项
+
 Worker 格式设置为 ES Module，避免 Vite 默认处理：
+
 ```typescript
 vite.worker.format = 'es'
 ```
@@ -209,13 +231,13 @@ vite.worker.format = 'es'
 
 ## 常见陷阱与解决方案
 
-| 问题 | 原因 | 解决方案 |
+| 问题               | 原因                | 解决方案                                                        |
-|------|------|--------|
+| ------------------ | ------------------- | --------------------------------------------------------------- |
-| API 请求 401 | 缺少 token 或已过期 | 检查 `useLoginState().token`，通过 ModalAuthentication 重新登录 |
+| API 请求 401       | 缺少 token 或已过期 | 检查 `useLoginState().token`，通过 ModalAuthentication 重新登录 |
-| FFmpeg 加载超时 | CDN 资源加载慢 | 检查网络，可切换到本地 `/public/assets/ffmpeg` |
+| FFmpeg 加载超时    | CDN 资源加载慢      | 检查网络，可切换到本地 `/public/assets/ffmpeg`                  |
-| 视频输出无声音 | 滤镜链未映射音频 | 确保 FFmpeg 命令包含 `-map '1:a?'` 映射音频轨道 |
+| 视频输出无声音     | 滤镜链未映射音频    | 确保 FFmpeg 命令包含 `-map '1:a?'` 映射音频轨道                 |
-| 组件未注册 | 文件位置错误 | 确保在 `components/` 目录下，子目录自动扁平化注册 |
+| 组件未注册         | 文件位置错误        | 确保在 `components/` 目录下，子目录自动扁平化注册               |
-| Pinia 状态未持久化 | 未配置 persist 选项 | 在 store 返回语句后添加 persist 配置（参考 `useLoginState`） |
+| Pinia 状态未持久化 | 未配置 persist 选项 | 在 store 返回语句后添加 persist 配置（参考 `useLoginState`）    |
 
 ## 资源链接
 

.oxfmtrc.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
   "singleQuote": true,
   "jsxSingleQuote": true,
   "htmlWhitespaceSensitivity": "ignore",
@@ -9,5 +10,7 @@
   "trailingComma": "es5",
   "vueIndentScriptAndStyle": false,
   "bracketSameLine": false,
-  "singleAttributePerLine": true
+  "singleAttributePerLine": true,
+  "experimentalSortPackageJson": false,
+  "ignorePatterns": []
 }

.oxlintrc.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": null,
+  "categories": {},
+  "rules": {},
+  "settings": {
+    "jsx-a11y": {
+      "polymorphicPropName": null,
+      "components": {},
+      "attributes": {}
+    },
+    "next": {
+      "rootDir": []
+    },
+    "react": {
+      "formComponents": [],
+      "linkComponents": [],
+      "version": null,
+      "componentWrapperFunctions": []
+    },
+    "jsdoc": {
+      "ignorePrivate": false,
+      "ignoreInternal": false,
+      "ignoreReplacesDocs": true,
+      "overrideReplacesDocs": true,
+      "augmentsExtendsReplacesDocs": false,
+      "implementsReplacesDocs": false,
+      "exemptDestructuredRootsFromChecks": false,
+      "tagNamePreference": {}
+    },
+    "vitest": {
+      "typecheck": false
+    }
+  },
+  "env": {
+    "builtin": true
+  },
+  "globals": {},
+  "ignorePatterns": []
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["oxc.oxc-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "oxc.fmt.configPath": ".oxfmtrc.json",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "always"
+  },
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

Jenkinsfile

@@ -0,0 +1,74 @@
+pipeline {
+  agent any
+
+  options {
+    timestamps()
+  }
+
+  parameters {
+    choice(
+      name: 'XSH_DEPLOY_TARGET',
+      choices: ['main'],
+      description: 'main：眩生花线上版本'
+    )
+    booleanParam(
+      name: 'XSH_DEPLOY_TO_PRODUCTION',
+      defaultValue: true,
+      description: '是否自动部署到线上环境（否则只构建产物）\n* 仅在 main 分支生效'
+    )
+  }
+
+  tools {
+    nodejs 'NodeJS 22.22'
+  }
+
+  libraries {
+    lib('xsh-common@main')
+  }
+
+  stages {
+    stage('Checkout') {
+      steps {
+        checkout scm
+      }
+    }
+
+    stage('Lint') {
+      steps {
+        sh '''
+          corepack enable
+          pnpm install --registry=https://registry.npmmirror.com
+          pnpm run lint
+        '''
+      }
+    }
+
+    stage('Build') {
+      when {
+        allOf {
+          expression { currentBuild.currentResult == 'SUCCESS' }
+          expression { env.TAG_NAME != null }
+        }
+      }
+      steps {
+        sh '''
+          corepack enable
+          pnpm install --registry=https://registry.npmmirror.com
+          pnpm run generate
+        '''
+      }
+    }
+  }
+
+  post {
+    always {
+      echo "Build finished: ${currentBuild.currentResult}"
+    }
+    success {
+      archiveArtifacts allowEmptyArchive: true, artifacts: 'dist/**', followSymlinks: true, onlyIfSuccessful: true
+    }
+    failure {
+      echo "Build failed"
+    }
+  }
+}

README.md

@@ -1,6 +1,6 @@
-# Nuxt 3 Minimal Starter
+# XSH 数字人微课平台 Next
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+_🚧 文档施工中_
 
 ## Setup
 

components/BubbleTitle.vue

@@ -25,15 +25,19 @@ const props = defineProps({
       <h1
         v-if="subtitle"
         class="text-base text-neutral-300 dark:text-neutral-600 italic tracking-wide font-black leading-none"
-      >{{ subtitle }}</h1>
+      >
+        {{ subtitle }}
+      </h1>
 
-      <h1 class="text-xl font-bold text-neutral-700 dark:text-neutral-300 leading-none relative z-[1]">
+      <h1
+        class="text-xl font-bold text-neutral-700 dark:text-neutral-300 leading-none relative z-[1]"
+      >
         {{ title }}
       </h1>
     </div>
 
     <div class="flex gap-2.5">
-      <slot name="action"/>
+      <slot name="action" />
     </div>
 
     <div
@@ -44,6 +48,4 @@ const props = defineProps({
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

components/DatePicker.vue

@@ -1,18 +1,23 @@
 <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 type {
+  DatePickerDate,
+  DatePickerRangeObject,
+} from 'v-calendar/dist/types/src/use/datePicker'
 import 'v-calendar/dist/style.css'
 
 defineOptions({
-  inheritAttrs: false
+  inheritAttrs: false,
 })
 
 const props = defineProps({
   modelValue: {
-    type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
+    type: [Date, Object] as PropType<
-    default: null
+      DatePickerDate | DatePickerRangeObject | null
-  }
+    >,
+    default: null,
+  },
 })
 
 const emit = defineEmits(['update:model-value', 'close'])
@@ -22,15 +27,15 @@ const date = computed({
   set: (value) => {
     emit('update:model-value', value)
     emit('close')
-  }
+  },
 })
 
 const attrs = {
-  'transparent': true,
+  transparent: true,
-  'borderless': true,
+  borderless: true,
-  'color': 'primary',
+  color: 'primary',
   'is-dark': { selector: 'html', darkClass: 'dark' },
-  'first-day-of-week': 2
+  'first-day-of-week': 2,
 }
 
 function onDayClick(_: any, event: MouseEvent): void {
@@ -41,7 +46,11 @@ function onDayClick(_: any, event: MouseEvent): void {
 
 <template>
   <VCalendarDatePicker
-    v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end"
+    v-if="
+      date &&
+      (date as DatePickerRangeObject)?.start &&
+      (date as DatePickerRangeObject)?.end
+    "
     v-model.range="date"
     :columns="2"
     v-bind="{ ...attrs, ...$attrs }"
@@ -82,7 +91,8 @@ function onDayClick(_: any, event: MouseEvent): void {
   --vc-accent-900: rgb(var(--color-primary-900));
 }
 
-.vc-container .vc-weekday-1, .vc-container .vc-weekday-7 {
+.vc-container .vc-weekday-1,
+.vc-container .vc-weekday-7 {
   @apply text-primary;
 }
 </style>

components/DigitalHumanTrainCreator.vue

@@ -18,7 +18,7 @@ const emit = defineEmits<Emits>()
 
 const isOpen = computed({
   get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value)
+  set: (value) => emit('update:modelValue', value),
 })
 
 // 表单状态
@@ -36,7 +36,7 @@ const isSubmitting = ref(false)
 const uploadProgress = reactive({
   step: 0,
   total: 3,
-  message: ''
+  message: '',
 })
 
 // 表单验证
@@ -205,7 +205,8 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
     }
   } catch (error) {
     console.error('数字人定制失败:', error)
-    const errorMessage = error instanceof Error ? error.message : '数字人定制失败，请重试'
+    const errorMessage =
+      error instanceof Error ? error.message : '数字人定制失败，请重试'
     toast.add({
       title: '提交失败',
       description: errorMessage,
@@ -241,7 +242,10 @@ const showAuthModal = ref(false)
 </script>
 
 <template>
-  <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-6xl' }">
+  <UModal
+    v-model="isOpen"
+    :ui="{ width: 'sm:max-w-6xl' }"
+  >
     <UCard
       :ui="{
         ring: '',
@@ -273,7 +277,10 @@ const showAuthModal = ref(false)
             @submit="onSubmit"
           >
             <!-- 数字人视频素材 -->
-            <UFormGroup label="数字人视频素材" required>
+            <UFormGroup
+              label="数字人视频素材"
+              required
+            >
               <UniFileDnD
                 accept="video/mp4,video/mov"
                 class="h-36"
@@ -291,7 +298,8 @@ const showAuthModal = ref(false)
                       </span>
                     </div>
                     <p class="text-xs text-gray-500 mt-1">
-                      小于 1GB 的 mov/mp4 格式，比例 9:16，帧率 25FPS，分辨率 1080P，时长 3-6 分钟
+                      小于 1GB 的 mov/mp4 格式，比例 9:16，帧率 25FPS，分辨率
+                      1080P，时长 3-6 分钟
                     </p>
                   </div>
                 </template>
@@ -299,7 +307,11 @@ const showAuthModal = ref(false)
             </UFormGroup>
 
             <!-- 数字人名称 -->
-            <UFormGroup label="数字人名称" name="dh_name" required>
+            <UFormGroup
+              label="数字人名称"
+              name="dh_name"
+              required
+            >
               <UInput
                 v-model="formState.dh_name"
                 placeholder="请输入数字人名称"
@@ -307,7 +319,11 @@ const showAuthModal = ref(false)
             </UFormGroup>
 
             <!-- 单位名称 -->
-            <UFormGroup label="单位名称" name="organization" required>
+            <UFormGroup
+              label="单位名称"
+              name="organization"
+              required
+            >
               <UInput
                 v-model="formState.organization"
                 placeholder="请输入单位名称"
@@ -315,7 +331,10 @@ const showAuthModal = ref(false)
             </UFormGroup>
 
             <!-- 形象授权视频 -->
-            <UFormGroup label="形象授权视频" required>
+            <UFormGroup
+              label="形象授权视频"
+              required
+            >
               <template #description>
                 <div class="flex items-center justify-between">
                   <span class="text-xs text-gray-500">
@@ -344,7 +363,11 @@ const showAuthModal = ref(false)
                     />
                     <div class="mt-2">
                       <span class="text-sm text-gray-600 dark:text-gray-400">
-                        {{ authVideoFile ? authVideoFile.name : '点击或拖拽上传授权视频' }}
+                        {{
+                          authVideoFile
+                            ? authVideoFile.name
+                            : '点击或拖拽上传授权视频'
+                        }}
                       </span>
                     </div>
                   </div>
@@ -364,10 +387,15 @@ const showAuthModal = ref(false)
             </UButton>
 
             <!-- 上传进度 -->
-            <div v-if="isSubmitting" class="mt-4 space-y-2">
+            <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>
+                <span>
+                  {{ uploadProgress.step }}/{{ uploadProgress.total }}
+                </span>
               </div>
               <UProgress
                 :value="(uploadProgress.step / uploadProgress.total) * 100"
@@ -382,54 +410,105 @@ const showAuthModal = ref(false)
           <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">
+              <h3
-                <UIcon name="i-heroicons-video-camera" class="h-5 w-5" />
+                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">
+              <div
-                <UIcon name="i-heroicons-video-camera" class="h-12 w-12 text-gray-400" />
+                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="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" />
+                  <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 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>
+                    客服微信：
+                    <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="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">
+                <div
-                  <UIcon name="i-heroicons-light-bulb" class="h-5 w-5 text-amber-600 dark:text-amber-400" />
+                  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>
+                  <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 flex-shrink-0" />
+                      <UIcon
-                      <span class="text-xs text-gray-600 dark:text-gray-300">确保光线充足，避免背光</span>
+                        name="i-heroicons-sun"
+                        class="h-4 w-4 text-amber-500 mt-0.5 flex-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 flex-shrink-0" />
+                      <UIcon
-                      <span class="text-xs text-gray-600 dark:text-gray-300">选择安静环境，减少噪音干扰</span>
+                        name="i-heroicons-speaker-wave"
+                        class="h-4 w-4 text-green-500 mt-0.5 flex-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 flex-shrink-0" />
+                      <UIcon
-                      <span class="text-xs text-gray-600 dark:text-gray-300">人脸占画面比例控制在 1/4 以内</span>
+                        name="i-heroicons-viewfinder-circle"
+                        class="h-4 w-4 text-blue-500 mt-0.5 flex-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 flex-shrink-0" />
+                      <UIcon
-                      <span class="text-xs text-gray-600 dark:text-gray-300">保持自然表情，使用恰当手势</span>
+                        name="i-heroicons-face-smile"
+                        class="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0"
+                      />
+                      <span class="text-xs text-gray-600 dark:text-gray-300">
+                        保持自然表情，使用恰当手势
+                      </span>
                     </div>
                   </div>
                 </div>

components/GradientDivider.vue

@@ -27,6 +27,4 @@ const props = defineProps({
   ></div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

components/Icon/MessageResponding.vue

@@ -1,52 +1,217 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <svg
-    <circle cx="4" cy="12" r="0" fill="currentColor">
+    xmlns="http://www.w3.org/2000/svg"
-      <animate fill="freeze" attributeName="r" begin="0;svgSpinners3DotsMove1.end" calcMode="spline" dur="0.5s"
+    width="1em"
-               keySplines=".36,.6,.31,1" values="0;3"></animate>
+    height="1em"
-      <animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove7.end" calcMode="spline" dur="0.5s"
+    viewBox="0 0 24 24"
-               keySplines=".36,.6,.31,1" values="4;12"></animate>
+  >
-      <animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove5.end" calcMode="spline" dur="0.5s"
+    <circle
-               keySplines=".36,.6,.31,1" values="12;20"></animate>
+      cx="4"
-      <animate id="svgSpinners3DotsMove0" fill="freeze" attributeName="r" begin="svgSpinners3DotsMove3.end"
+      cy="12"
-               calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
+      r="0"
-      <animate id="svgSpinners3DotsMove1" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove0.end"
+      fill="currentColor"
-               dur="0.001s" values="20;4"></animate>
+    >
+      <animate
+        fill="freeze"
+        attributeName="r"
+        begin="0;svgSpinners3DotsMove1.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="0;3"
+      ></animate>
+      <animate
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove7.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="4;12"
+      ></animate>
+      <animate
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove5.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="12;20"
+      ></animate>
+      <animate
+        id="svgSpinners3DotsMove0"
+        fill="freeze"
+        attributeName="r"
+        begin="svgSpinners3DotsMove3.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="3;0"
+      ></animate>
+      <animate
+        id="svgSpinners3DotsMove1"
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove0.end"
+        dur="0.001s"
+        values="20;4"
+      ></animate>
     </circle>
-    <circle cx="4" cy="12" r="3" fill="currentColor">
+    <circle
-      <animate fill="freeze" attributeName="cx" begin="0;svgSpinners3DotsMove1.end" calcMode="spline" dur="0.5s"
+      cx="4"
-               keySplines=".36,.6,.31,1" values="4;12"></animate>
+      cy="12"
-      <animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove7.end" calcMode="spline" dur="0.5s"
+      r="3"
-               keySplines=".36,.6,.31,1" values="12;20"></animate>
+      fill="currentColor"
-      <animate id="svgSpinners3DotsMove2" fill="freeze" attributeName="r" begin="svgSpinners3DotsMove5.end"
+    >
-               calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
+      <animate
-      <animate id="svgSpinners3DotsMove3" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove2.end"
+        fill="freeze"
-               dur="0.001s" values="20;4"></animate>
+        attributeName="cx"
-      <animate fill="freeze" attributeName="r" begin="svgSpinners3DotsMove3.end" calcMode="spline" dur="0.5s"
+        begin="0;svgSpinners3DotsMove1.end"
-               keySplines=".36,.6,.31,1" values="0;3"></animate>
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="4;12"
+      ></animate>
+      <animate
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove7.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="12;20"
+      ></animate>
+      <animate
+        id="svgSpinners3DotsMove2"
+        fill="freeze"
+        attributeName="r"
+        begin="svgSpinners3DotsMove5.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="3;0"
+      ></animate>
+      <animate
+        id="svgSpinners3DotsMove3"
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove2.end"
+        dur="0.001s"
+        values="20;4"
+      ></animate>
+      <animate
+        fill="freeze"
+        attributeName="r"
+        begin="svgSpinners3DotsMove3.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="0;3"
+      ></animate>
     </circle>
-    <circle cx="12" cy="12" r="3" fill="currentColor">
+    <circle
-      <animate fill="freeze" attributeName="cx" begin="0;svgSpinners3DotsMove1.end" calcMode="spline" dur="0.5s"
+      cx="12"
-               keySplines=".36,.6,.31,1" values="12;20"></animate>
+      cy="12"
-      <animate id="svgSpinners3DotsMove4" fill="freeze" attributeName="r" begin="svgSpinners3DotsMove7.end"
+      r="3"
-               calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
+      fill="currentColor"
-      <animate id="svgSpinners3DotsMove5" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove4.end"
+    >
-               dur="0.001s" values="20;4"></animate>
+      <animate
-      <animate fill="freeze" attributeName="r" begin="svgSpinners3DotsMove5.end" calcMode="spline" dur="0.5s"
+        fill="freeze"
-               keySplines=".36,.6,.31,1" values="0;3"></animate>
+        attributeName="cx"
-      <animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove3.end" calcMode="spline" dur="0.5s"
+        begin="0;svgSpinners3DotsMove1.end"
-               keySplines=".36,.6,.31,1" values="4;12"></animate>
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="12;20"
+      ></animate>
+      <animate
+        id="svgSpinners3DotsMove4"
+        fill="freeze"
+        attributeName="r"
+        begin="svgSpinners3DotsMove7.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="3;0"
+      ></animate>
+      <animate
+        id="svgSpinners3DotsMove5"
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove4.end"
+        dur="0.001s"
+        values="20;4"
+      ></animate>
+      <animate
+        fill="freeze"
+        attributeName="r"
+        begin="svgSpinners3DotsMove5.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="0;3"
+      ></animate>
+      <animate
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove3.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="4;12"
+      ></animate>
     </circle>
-    <circle cx="20" cy="12" r="3" fill="currentColor">
+    <circle
-      <animate id="svgSpinners3DotsMove6" fill="freeze" attributeName="r" begin="0;svgSpinners3DotsMove1.end"
+      cx="20"
-               calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
+      cy="12"
-      <animate id="svgSpinners3DotsMove7" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove6.end"
+      r="3"
-               dur="0.001s" values="20;4"></animate>
+      fill="currentColor"
-      <animate fill="freeze" attributeName="r" begin="svgSpinners3DotsMove7.end" calcMode="spline" dur="0.5s"
+    >
-               keySplines=".36,.6,.31,1" values="0;3"></animate>
+      <animate
-      <animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove5.end" calcMode="spline" dur="0.5s"
+        id="svgSpinners3DotsMove6"
-               keySplines=".36,.6,.31,1" values="4;12"></animate>
+        fill="freeze"
-      <animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove3.end" calcMode="spline" dur="0.5s"
+        attributeName="r"
-               keySplines=".36,.6,.31,1" values="12;20"></animate>
+        begin="0;svgSpinners3DotsMove1.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="3;0"
+      ></animate>
+      <animate
+        id="svgSpinners3DotsMove7"
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove6.end"
+        dur="0.001s"
+        values="20;4"
+      ></animate>
+      <animate
+        fill="freeze"
+        attributeName="r"
+        begin="svgSpinners3DotsMove7.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="0;3"
+      ></animate>
+      <animate
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove5.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="4;12"
+      ></animate>
+      <animate
+        fill="freeze"
+        attributeName="cx"
+        begin="svgSpinners3DotsMove3.end"
+        calcMode="spline"
+        dur="0.5s"
+        keySplines=".36,.6,.31,1"
+        values="12;20"
+      ></animate>
     </circle>
   </svg>
 </template>

components/ImagePlaceholder.vue

@@ -2,26 +2,29 @@
 const props = defineProps({
   gradient: {
     type: String,
-    default: '90deg, #FFC0CB 0%, #FFC0CB 100%'
+    default: '90deg, #FFC0CB 0%, #FFC0CB 100%',
   },
   aspect: {
     type: String,
-    default: '16/9'
+    default: '16/9',
-  }
+  },
 })
 
 const elem = ref<HTMLElement>()
 const size = computed(() => {
   return {
     width: elem.value?.getBoundingClientRect().width.toFixed(0),
-    height: elem.value?.getBoundingClientRect().height.toFixed(0)
+    height: elem.value?.getBoundingClientRect().height.toFixed(0),
   }
 })
 </script>
 
 <template>
-  <div ref="elem" class="gradient-background flex justify-center items-center"
+  <div
-       :style="`aspect-ratio: ${aspect};`">
+    ref="elem"
+    class="gradient-background flex justify-center items-center"
+    :style="`aspect-ratio: ${aspect};`"
+  >
     <ClientOnly>
       <h1 class="text-white/80 drop-shadow-2xl text-sm font-bold">
         {{ size.width }} x {{ size.height }}

components/LoginNeededContent.vue

@@ -19,9 +19,14 @@ const modal = useModal()
 
 <template>
   <ClientOnly>
-    <div v-if="!loginState.is_logged_in"
+    <div
-         class="w-full flex flex-col justify-center items-center gap-2 py-40">
+      v-if="!loginState.is_logged_in"
-      <Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
+      class="w-full flex flex-col justify-center items-center gap-2 py-40"
+    >
+      <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"
@@ -33,17 +38,23 @@ const modal = useModal()
         登录
       </UButton>
     </div>
-    <div v-else-if="needAdmin && loginState.user.auth_code !== 2"
+    <div
-         class="w-full flex flex-col justify-center items-center gap-2 py-40">
+      v-else-if="needAdmin && loginState.user.auth_code !== 2"
-      <Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="tabler:hand-stop"/>
+      class="w-full flex flex-col justify-center items-center gap-2 py-40"
+    >
+      <Icon
+        class="text-7xl text-neutral-300 dark:text-neutral-700"
+        name="tabler:hand-stop"
+      />
       <p class="text-sm text-neutral-500 dark:text-neutral-400">账号没有权限</p>
     </div>
-    <div :class="contentClass" v-else>
+    <div
-      <slot/>
+      :class="contentClass"
+      v-else
+    >
+      <slot />
     </div>
   </ClientOnly>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

components/Markdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import md from 'markdown-it'
-import hljs from "highlight.js";
+import hljs from 'highlight.js'
-import 'highlight.js/styles/github-dark-dimmed.min.css';
+import 'highlight.js/styles/github-dark-dimmed.min.css'
 
 const renderer = md({
   html: true,
@@ -11,17 +11,16 @@ const renderer = md({
   highlight: function (str, lang) {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return (
+        return `<pre class="hljs" style="overflow-x: auto"><code>${
-            `<pre class="hljs" style="overflow-x: auto"><code>${
+          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
-                hljs.highlight(str, {language: lang, ignoreIllegals: true}).value
+        }</code></pre>`
-            }</code></pre>`
+      } catch (_) {}
-        )
-      } catch (_) {
-      }
     }
 
-    return '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>';
+    return (
-  }
+      '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>'
+    )
+  },
 })
 
 const props = defineProps({
@@ -34,11 +33,11 @@ const props = defineProps({
 
 <template>
   <article
-      class="prose dark:prose-invert max-w-none prose-sm prose-neutral"
+    class="prose dark:prose-invert max-w-none prose-sm prose-neutral"
-      v-html="renderer.render(source.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;'))"
+    v-html="
+      renderer.render(source.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;'))
+    "
   ></article>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

components/ModalDigitalHumanSelect.vue

@@ -33,8 +33,8 @@ const toast = useToast()
 const page = ref(1)
 
 const sourceTypeList = [
-  { label: 'xsh_wm', value: 1, color: 'blue' },   // 万木（腾讯）
+  { label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
-  { label: 'xsh_zy', value: 2, color: 'green' },  // XSH 自有
+  { label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
   { label: 'xsh_fh', value: 3, color: 'purple' }, // 硅基（泛化数字人）
   { label: 'xsh_bb', value: 4, color: 'indigo' }, // 百度小冰
 ]

components/SlideCreateCourse.vue

@@ -48,7 +48,9 @@ watchEffect(() => {
   if (selected_digital_human.value) {
     // 2025.03.31 使用内部数字人 ID
     createCourseState.digital_human_id =
-      selected_digital_human.value.digital_human_id ?? selected_digital_human.value.id ?? 0
+      selected_digital_human.value.digital_human_id ??
+      selected_digital_human.value.id ??
+      0
   }
   if (selected_titles.value) {
     createCourseState.opening_url = selected_titles.value.opening_file
@@ -338,16 +340,20 @@ const onCreateCourseSubmit = async (
     <ModalDigitalHumanSelect
       :is-open="isDigitalSelectorOpen"
       @close="isDigitalSelectorOpen = false"
-      @select="digitalHumans => {
+      @select="
-        selected_digital_human = (digitalHumans as DigitalHumanItem)
+        (digitalHumans) => {
-      }"
+          selected_digital_human = digitalHumans as DigitalHumanItem
+        }
+      "
     />
     <ModalVideoTitleSelect
       :is-open="isTitlesSelectorOpen"
       @close="isTitlesSelectorOpen = false"
-      @select="titles => {
+      @select="
-        selected_titles = (titles as TitlesTemplate)
+        (titles) => {
-      }"
+          selected_titles = titles as TitlesTemplate
+        }
+      "
     />
   </USlideover>
 </template>

components/SlideCreateCourseGreen.vue

@@ -290,9 +290,11 @@ const onCreateCourseGreenSubmit = async (
     <ModalDigitalHumanSelect
       :is-open="isDigitalSelectorOpen"
       @close="isDigitalSelectorOpen = false"
-      @select="digitalHumans => {
+      @select="
-        selected_digital_human = (digitalHumans as DigitalHumanItem)
+        (digitalHumans) => {
-      }"
+          selected_digital_human = digitalHumans as DigitalHumanItem
+        }
+      "
     />
   </USlideover>
 </template>

components/aigc/RatioSelector.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import type {PropType} from 'vue';
+import type { PropType } from 'vue'
 
 const props = defineProps({
   ratios: {
-    type: Array as PropType<{
+    type: Array as PropType<
-      ratio: string,
+      {
-      label?: string,
+        ratio: string
-      value: string | number
+        label?: string
-    }[]>,
+        value: string | number
+      }[]
+    >,
     required: true,
   },
   modelValue: {
@@ -40,7 +42,7 @@ const getRatio = (ratio: string) => {
   }
 }
 
-const getShapeSize = (r: { w: number, h: number }, size: number) => {
+const getShapeSize = (r: { w: number; h: number }, size: number) => {
   const ratio = r.w / r.h
   if (r.w > r.h) {
     return {
@@ -58,25 +60,36 @@ const getShapeSize = (r: { w: number, h: number }, size: number) => {
 
 <template>
   <div class="grid grid-cols-4 gap-2">
-    <div v-for="(ratio, k) in ratios" :key="ratio.value" @click="handle_select(ratio.value)"
+    <div
-         class="w-full aspect-square bg-neutral-200/50 dark:bg-neutral-700/50 rounded-lg py-1.5 flex flex-col justify-between items-center cursor-pointer select-none"
+      v-for="(ratio, k) in ratios"
-         :class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']">
+      :key="ratio.value"
-      <div class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded flex justify-center items-center"
+      @click="handle_select(ratio.value)"
-           :class="[ratio.value === selected && 'bg-sky-300/50 dark:bg-sky-600/50']" :style="{
+      class="w-full aspect-square bg-neutral-200/50 dark:bg-neutral-700/50 rounded-lg py-1.5 flex flex-col justify-between items-center cursor-pointer select-none"
-        width: getShapeSize(getRatio(ratio.ratio), 30).w * 1.1 + 'px',
+      :class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']"
-        height: getShapeSize(getRatio(ratio.ratio), 30).h * 1.1 + 'px'
+    >
-      }">
+      <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="[
+          ratio.value === selected && 'bg-sky-300/50 dark:bg-sky-600/50',
+        ]"
+        :style="{
+          width: getShapeSize(getRatio(ratio.ratio), 30).w * 1.1 + 'px',
+          height: getShapeSize(getRatio(ratio.ratio), 30).h * 1.1 + 'px',
+        }"
+      >
         <span class="text-xs font-thin font-mono">{{ ratio.ratio }}</span>
       </div>
       <span class="text-[10px]">
         {{
-          ratio?.label || getRatio(ratio.ratio).w === getRatio(ratio.ratio).h ? '正方形' : (getRatio(ratio.ratio).w > getRatio(ratio.ratio).h ? '横向' : '纵向')
+          ratio?.label || getRatio(ratio.ratio).w === getRatio(ratio.ratio).h
+            ? '正方形'
+            : getRatio(ratio.ratio).w > getRatio(ratio.ratio).h
+              ? '横向'
+              : '纵向'
         }}
       </span>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

components/aigc/ReferenceFigureSelector.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type {PropType} from 'vue';
+import type { PropType } from 'vue'
 
 const props = defineProps({
   value: {
@@ -22,18 +22,21 @@ const selected_file = ref<File | null>(null)
 const image_dataurl = ref('')
 const loading = ref(false)
 
-watch(() => props.value, async (newVal) => {
+watch(
-  handleFileInput({target: {files: [newVal!]}})
+  () => props.value,
-})
+  async (newVal) => {
+    handleFileInput({ target: { files: [newVal!] } })
+  }
+)
 
 const handleTrashClick = () => {
-  fileInput.value!.value = '';
+  fileInput.value!.value = ''
   selected_file.value = null
   image_dataurl.value = ''
   emit('update', null)
 }
 
-const handleFileInput = (event: { target: any; }) => {
+const handleFileInput = (event: { target: any }) => {
   if (event.target.files) {
     const file = event.target.files[0]
     if (!file) return
@@ -54,49 +57,117 @@ const handleFileInput = (event: { target: any; }) => {
 </script>
 
 <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
+  <div
-              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 hover:dark:bg-neutral-700/80 transition border dark:border-neutral-700 cursor-pointer"
-       :class="{'cursor-pointer': !loading, 'cursor-not-allowed': loading}"
+    :class="{ 'cursor-pointer': !loading, 'cursor-not-allowed': loading }"
-       @click="() => !loading && fileInput?.click()">
+    @click="() => !loading && fileInput?.click()"
-    <input ref="fileInput" type="file" class="hidden" @change="handleFileInput" accept="image/*"/>
+  >
-    <Transition name="trash-btn" mode="out-in">
+    <input
-      <button type="button" @click.stop.prevent="handleTrashClick" v-if="!!selected_file"
+      ref="fileInput"
-              class="absolute -top-1 -right-1 bg-white dark:bg-black rounded-full p-1 shadow-lg border dark:border-neutral-700">
+      type="file"
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+      class="hidden"
-          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+      @change="handleFileInput"
-                d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/>
+      accept="image/*"
+    />
+    <Transition
+      name="trash-btn"
+      mode="out-in"
+    >
+      <button
+        type="button"
+        @click.stop.prevent="handleTrashClick"
+        v-if="!!selected_file"
+        class="absolute -top-1 -right-1 bg-white dark:bg-black rounded-full p-1 shadow-lg border dark:border-neutral-700"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
+          />
         </svg>
       </button>
     </Transition>
     <div class="w-12 h-12 rounded-md overflow-hidden">
-      <Transition name="preview-swap" mode="out-in">
+      <Transition
-        <div v-if="loading"
+        name="preview-swap"
-             class="w-full h-full flex justify-center items-center rounded-md border-2 border-dashed border-neutral-400 dark:border-neutral-600 text-neutral-400 dark:text-neutral-600">
+        mode="out-in"
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+      >
-            <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+        <div
-                  opacity=".25"/>
+          v-if="loading"
-            <path fill="currentColor"
+          class="w-full h-full flex justify-center items-center rounded-md border-2 border-dashed border-neutral-400 dark:border-neutral-600 text-neutral-400 dark:text-neutral-600"
-                  d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
+        >
-              <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
+          <svg
-                                values="0 12 12;360 12 12"/>
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+              opacity=".25"
+            />
+            <path
+              fill="currentColor"
+              d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+            >
+              <animateTransform
+                attributeName="transform"
+                dur="0.75s"
+                repeatCount="indefinite"
+                type="rotate"
+                values="0 12 12;360 12 12"
+              />
             </path>
           </svg>
         </div>
-        <div v-else-if="!selected_file"
+        <div
-             class="w-full h-full flex justify-center items-center rounded-md border-2 border-dashed border-neutral-400 dark:border-neutral-600 text-neutral-400 dark:text-neutral-600">
+          v-else-if="!selected_file"
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+          class="w-full h-full flex justify-center items-center rounded-md border-2 border-dashed border-neutral-400 dark:border-neutral-600 text-neutral-400 dark:text-neutral-600"
-            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        >
-                  d="M12 5v14m-7-7h14"/>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 5v14m-7-7h14"
+            />
           </svg>
         </div>
-        <img v-else class="w-12 h-12 rounded-md object-cover" :src="image_dataurl" :key="selected_file.name"
+        <img
-             alt="Preview">
+          v-else
+          class="w-12 h-12 rounded-md object-cover"
+          :src="image_dataurl"
+          :key="selected_file.name"
+          alt="Preview"
+        />
       </Transition>
     </div>
     <div class="flex-1 flex justify-center">
-      <p class="text-neutral-400/80 dark:text-neutral-500 text-sm font-medium select-none text-center">
+      <p
+        class="text-neutral-400/80 dark:text-neutral-500 text-sm font-medium select-none text-center"
+      >
         {{ selected_file ? textOnSelect : text }}
-        <span v-if="selected_file && textOnSelect" class="block text-[10px] text-center">
+        <span
+          v-if="selected_file && textOnSelect"
+          class="block text-[10px] text-center"
+        >
           {{ selected_file?.name || textOnSelect }}
         </span>
       </p>

components/aigc/chat/ChatItem.vue

@@ -21,29 +21,35 @@ const dayjs = useDayjs()
 
 <template>
   <div
-      class="chat-card group"
+    class="chat-card group"
-      :class="{'active': active}"
+    :class="{ active: active }"
-      :title="chatSession.subject"
+    :title="chatSession.subject"
   >
     <div class="chat-card-title">
       <Icon
-          v-if="!!chatSession.assistant"
+        v-if="!!chatSession.assistant"
-          name="i-tabler-masks-theater"
+        name="i-tabler-masks-theater"
-          class="text-lg mr-1 "
+        class="text-lg mr-1"
       />
       <span class="flex-1 text-ellipsis overflow-x-hidden">
-        {{ !!chatSession.assistant ? chatSession.assistant.tpl_name : chatSession.subject }}
+        {{
+          !!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>
+        {{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
+      </div>
     </div>
     <div
-        @click.stop="emit('remove', chatSession)"
+      @click.stop="emit('remove', chatSession)"
-        class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
+      class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
     >
-      <Icon name="i-tabler-trash"/>
+      <Icon name="i-tabler-trash" />
     </div>
   </div>
 </template>

components/aigc/chat/Message.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type {PropType} from 'vue'
+import type { PropType } from 'vue'
-import type {ChatMessage} from '~/typings/llm'
+import type { ChatMessage } from '~/typings/llm'
 import MessageResponding from '~/components/Icon/MessageResponding.vue'
 
 const props = defineProps({
@@ -38,31 +38,54 @@ const message_background = computed(() => {
 </script>
 
 <template>
-  <div class="chat" :class="{'justify-end': message_place_end}">
+  <div
-    <div class="chat-inside" :class="{'items-end': message_place_end}">
+    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"/>
+        <Icon
+          :name="message_avatar"
+          class="text-lg"
+        />
       </div>
-      <div class="flex flex-col" :class="{'items-end': message_place_end}">
+      <div
-        <Transition mode="out-in" name="message-content-change">
+        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="chat-inside-content relative"
-              :class="message_background"
+            :class="message_background"
-              :key="message.content"
+            :key="message.content"
           >
             <div v-if="message.content">
               <!-- TODO: 生成结果的代码添加复制按钮 -->
-              <Markdown :source="message.content"/>
+              <Markdown :source="message.content" />
             </div>
             <span v-else>
-              <MessageResponding class="text-xl text-neutral-500 dark:text-neutral-300 mx-2"/>
+              <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
+          v-if="message.preset"
+          class="chat-inside-extra"
+        >
           预设消息
         </div>
-        <div v-else-if="message.create_at" class="chat-inside-extra">
+        <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>

components/aigc/chat/NewSessionScreen.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type {Assistant} from '~/typings/llm'
+import type { Assistant } from '~/typings/llm'
-import {useLazyAsyncData} from '#app'
+import { useLazyAsyncData } from '#app'
 
 const loginState = useLoginState()
 
@@ -16,116 +16,177 @@ const emit = defineEmits({
   cancel: () => true,
 })
 
-const {
+const { data: assistantTemplates, pending: assistantTemplatesPending } =
-  data: assistantTemplates,
+  await useLazyAsyncData(
-  pending: assistantTemplatesPending,
-} = await useLazyAsyncData(
     'App.Assistant_Template.GetList',
-    () => useFetchWrapped<
+    () =>
-        req.AssistantTemplateList & AuthedRequest, BaseResponse<PagedData<Assistant>>
+      useFetchWrapped<
-    >('App.Assistant_Template.GetList', {
+        req.AssistantTemplateList & AuthedRequest,
-      user_id: loginState.user.id,
+        BaseResponse<PagedData<Assistant>>
-      token: loginState.token as string,
+      >('App.Assistant_Template.GetList', {
-      page: 1,
+        user_id: loginState.user.id,
-      perpage: 20,
+        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"
+      <div
-           class="absolute inset-0 bg-white dark:bg-neutral-900 flex justify-center items-center z-[1] text-primary">
+        v-if="assistantTemplatesPending"
-        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
+        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"/>
+              <feGaussianBlur
-              <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"/>
+                in="SourceGraphic"
-              <feBlend in="SourceGraphic" in2="z"/>
+                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">
+            <circle
-              <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+              cx="5"
-                       repeatCount="indefinite" values="5;8;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">
+            <circle
-              <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+              cx="19"
-                       repeatCount="indefinite" values="19;16;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"
+            <animateTransform
-                              values="0 12 12;360 12 12"/>
+              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"
+        v-if="!nonBack"
-          variant="ghost"
+        variant="ghost"
-          size="xs"
+        size="xs"
-          @click="emit('cancel')"
+        @click="emit('cancel')"
       >
         <template #leading>
-          <UIcon name="i-tabler-chevron-left"/>
+          <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">
+        <svg
-          <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+          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"/>
+              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"/>
+              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"/>
+            />
+            <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"
+        class="group ring-primary hover:ring-2 transition duration-300"
-          variant="soft"
+        variant="soft"
-          size="lg"
+        size="lg"
-          :ui="{ rounded: 'rounded-full' }"
+        :ui="{ rounded: 'rounded-full' }"
-          @click="emit('select', null)"
+        @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">
+          <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"
+              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"
+              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"
+              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"
+              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"
+      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 || []"
+        v-for="assistant in assistantTemplates?.data.items || []"
-          :key="assistant.id"
+        :key="assistant.id"
-          class="assistant-item select-none"
+        class="assistant-item select-none"
-          @click="emit('select', assistant)"
+        @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 class="text-sm text-neutral-500 dark:text-neutral-400">
+            {{ assistant.des }}
+          </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>

components/aigc/drawing/OptionBlock.vue

@@ -1,39 +1,51 @@
 <script lang="ts" setup>
-
 const props = defineProps({
   label: {
     type: String,
-    default: ''
+    default: '',
   },
   icon: {
     type: String,
-    default: ''
+    default: '',
   },
   comment: {
     type: String,
-    default: ''
+    default: '',
-  }
+  },
 })
 </script>
 
 <template>
-  <div class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded flex flex-col gap-1 shadow">
+  <div
+    class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded flex flex-col gap-1 shadow"
+  >
     <div class="flex items-center gap-1 text-sm">
-      <UIcon v-if="icon" :name="icon" class="text-base inline-block"/>
+      <UIcon
-      <div class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden">
+        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">
+        <UTooltip
-          <UIcon class="text-base" name="i-tabler-help"/>
+          v-if="comment"
+          :popper="{ arrow: true, placement: 'right' }"
+          :text="comment"
+        >
+          <UIcon
+            class="text-base"
+            name="i-tabler-help"
+          />
         </UTooltip>
       </div>
-      <slot name="actions"/>
+      <slot name="actions" />
     </div>
     <div class="flex flex-col gap-2">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

components/aigc/drawing/ResultBlock.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type {ResultBlockMeta} from '~/components/aigc/drawing/index';
+import type { ResultBlockMeta } from '~/components/aigc/drawing/index'
-import type {PropType} from 'vue';
+import type { PropType } from 'vue'
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
-import {get} from 'idb-keyval';
+import { get } from 'idb-keyval'
 
 const props = defineProps({
   icon: {
@@ -35,7 +35,7 @@ const cachedImagesInterval = ref<NodeJS.Timeout | null>(null)
 
 onMounted(async () => {
   cachedImagesInterval.value = setInterval(async () => {
-    const res = await get(props.fid) as string[] || []
+    const res = ((await get(props.fid)) as string[]) || []
     if (res.length === cachedImages.value.length) return
     cachedImages.value = res
   }, 200)
@@ -56,110 +56,224 @@ const handle_download = (url: string) => {
 
 const handle_use_reference = async (blob_url: string) => {
   fetch(blob_url)
-  .then(res => res.blob())
+    .then((res) => res.blob())
-  .then(blob => {
+    .then((blob) => {
-    const file = new File([blob], `xsh_drawing-${props.meta?.datetime! * 1000}.png`, {type: 'image/png'})
+      const file = new File(
-    emit('use-reference', file)
+        [blob],
-  })
+        `xsh_drawing-${props.meta?.datetime! * 1000}.png`,
-  .catch(() => {
+        { type: 'image/png' }
-    toast.add({
+      )
-      title: '转换失败',
+      emit('use-reference', file)
-      description: '无法获取图片数据',
+    })
-      color: 'red',
+    .catch(() => {
-      icon: 'i-tabler-circle-x',
+      toast.add({
+        title: '转换失败',
+        description: '无法获取图片数据',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
     })
-  })
 }
 
 const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text).then(() => {
+  navigator.clipboard
-    toast.add({
+    .writeText(text)
-      title: '复制成功',
+    .then(() => {
-      description: '已将内容复制到剪贴板',
+      toast.add({
-      color: 'primary',
+        title: '复制成功',
-      icon: 'i-tabler-copy',
+        description: '已将内容复制到剪贴板',
+        color: 'primary',
+        icon: 'i-tabler-copy',
+      })
     })
-  }).catch(() => {
+    .catch(() => {
-    toast.add({
+      toast.add({
-      title: '复制失败',
+        title: '复制失败',
-      description: '无法复制到剪贴板',
+        description: '无法复制到剪贴板',
-      color: 'red',
+        color: 'red',
-      icon: 'i-tabler-circle-x',
+        icon: 'i-tabler-circle-x',
+      })
     })
-  })
 }
 </script>
 
 <template>
   <div class="w-full">
     <div class="flex items-center gap-1">
-      <UIcon :name="icon"/>
+      <UIcon :name="icon" />
       <h1 class="text-sm font-semibold">
         {{ meta.type || 'AI 智能绘图' }}
       </h1>
-      <UDivider class="flex-1" size="sm"/>
+      <UDivider
-      <UButton color="black" size="xs" icon="i-tabler-info-circle"
+        class="flex-1"
-               :variant="show_meta ? 'solid' : 'ghost'" :disabled="!meta"
+        size="sm"
-               @click="show_meta = !show_meta"></UButton>
+      />
-      <slot name="header-right"/>
+      <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">
+    <div
-      <UIcon name="i-tabler-article" class="mt-0.5"/>
+      v-if="prompt"
-      <p class="text-sm flex-1 text-ellipsis cursor-pointer"
+      class="flex items-start gap-2 mt-1 mb-2"
-         :class="{'line-clamp-1': !expand_prompt, 'line-clamp-none': expand_prompt}"
+    >
-         @click="expand_prompt = !expand_prompt">
+      <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"
+      <UButton
-               @click="copyToClipboard(prompt)"></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
-      <div class="h-full aspect-auto relative rounded-lg shadow-md overflow-hidden group"
+      v-if="cachedImages.length > 0"
-           v-for="(url, i) in cachedImages" :key="`${fid}-${i}`">
+      class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x"
-        <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">
+      <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-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"
+        >
           <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
+              <UButton
-                       @click="handle_use_reference(url)"></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
+              <UButton
-                       @click="handle_download(url)"></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"/>
+        <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">
+    <div
-      <UIcon name="i-svg-spinners-tadpole" class="text-3xl"/>
+      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">
+    <Transition
-      <div v-if="show_meta" class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2">
+      v-if="meta"
-        <UBadge v-if="meta.modal" color="black" variant="solid" class="text-[10px] font-bold gap-0.5">
+      name="meta"
-          <UIcon class="text-sm" name="i-tabler-box-seam"/>
+    >
+      <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">
+        <UBadge
-          <UIcon class="text-sm" name="i-tabler-christmas-tree"/>
+          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">
+        <UBadge
-          <UIcon class="text-sm" name="i-solar-fire-bold"/>
+          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">
+        <UBadge
-          <UIcon class="text-sm" name="i-tabler-aspect-ratio"/>
+          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">
+        <UBadge
-          <UIcon class="text-sm" name="i-tabler-number"/>
+          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">
+        <UBadge
-          <UIcon class="text-sm" name="i-tabler-calendar-month"/>
+          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>

components/aigc/generation/GBTaskCard.vue

@@ -31,7 +31,9 @@ const selectedBackgroundFile = ref<File | null>(null)
 const selectedBackgroundPreview = ref<string>('')
 const isCombinatorLoading = ref(false)
 const compositingProgress = ref(0)
-const compositingPhase = ref<'loading' | 'analyzing' | 'preparing' | 'executing' | 'finalizing'>('loading')
+const compositingPhase = ref<
+  'loading' | 'analyzing' | 'preparing' | 'executing' | 'finalizing'
+>('loading')
 const combinatorError = ref<string>('')
 const fileInputRef = ref<HTMLInputElement | null>(null)
 const compositedVideoBlob = ref<Blob | null>(null)
@@ -39,11 +41,11 @@ const compositedVideoBlob = ref<Blob | null>(null)
 // 阶段显示文本
 const phaseText = computed(() => {
   const phaseMap: Record<typeof compositingPhase.value, string> = {
-    'loading': '加载资源...',
+    loading: '加载资源...',
-    'analyzing': '分析图片...',
+    analyzing: '分析图片...',
-    'preparing': '准备合成...',
+    preparing: '准备合成...',
-    'executing': '合成中...',
+    executing: '合成中...',
-    'finalizing': '完成处理...',
+    finalizing: '完成处理...',
   }
   return phaseMap[compositingPhase.value]
 })
@@ -99,7 +101,7 @@ const composeBackgroundVideo = async () => {
         onProgress: (info) => {
           compositingProgress.value = info.progress
           compositingPhase.value = info.phase
-        }
+        },
       }
     )
 
@@ -138,7 +140,9 @@ const downloadCompositedVideo = () => {
 }
 
 const compositedVideoUrl = computed(() => {
-  return compositedVideoBlob.value ? URL.createObjectURL(compositedVideoBlob.value) : ''
+  return compositedVideoBlob.value
+    ? URL.createObjectURL(compositedVideoBlob.value)
+    : ''
 })
 
 const startDownload = (url: string, filename: string) => {
@@ -148,12 +152,9 @@ const startDownload = (url: string, filename: string) => {
     downloadingState.video = 0
   }
 
-  const {
+  const { download, progressEmitter } = useDownload(url, filename)
-    download,
-    progressEmitter,
-  } = useDownload(url, filename)
 
-  progressEmitter.on('progress', progress => {
+  progressEmitter.on('progress', (progress) => {
     if (url.endsWith('.ass')) {
       downloadingState.subtitle = progress
     } else {
@@ -176,7 +177,7 @@ const startDownload = (url: string, filename: string) => {
     })
   })
 
-  progressEmitter.on('error', err => {
+  progressEmitter.on('error', (err) => {
     if (url.endsWith('.ass')) {
       downloadingState.subtitle = 0
     } else {
@@ -198,54 +199,111 @@ const startDownload = (url: string, filename: string) => {
   <div
     class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow 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">
+    <div
-      <div v-if="!video.video_cover" class="w-full h-full flex flex-col justify-center items-center gap-2" :class="!isFailed ? 'bg-primary' : 'bg-rose-400'">
+      class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group"
-        <UIcon v-if="!isFailed" class="animate-spin text-4xl text-white" name="tabler:loader"/>
+    >
-        <UIcon v-else class="text-4xl text-white" name="tabler:alert-triangle"/>
+      <div
+        v-if="!video.video_cover"
+        class="w-full h-full flex flex-col justify-center items-center gap-2"
+        :class="!isFailed ? 'bg-primary' : 'bg-rose-400'"
+      >
+        <UIcon
+          v-if="!isFailed"
+          class="animate-spin text-4xl text-white"
+          name="tabler:loader"
+        />
+        <UIcon
+          v-else
+          class="text-4xl text-white"
+          name="tabler:alert-triangle"
+        />
         <div class="flex flex-col items-center gap-0.5">
           <span class="text-sm font-bold text-white/90">
             {{ isFailed ? '生成失败' : '火速生成中...' }}
           </span>
-          <span v-if="!isFailed" class="text-xs font-medium text-white/50">{{ video.progress }}%</span>
+          <span
+            v-if="!isFailed"
+            class="text-xs font-medium text-white/50"
+          >
+            {{ video.progress }}%
+          </span>
         </div>
       </div>
-      <NuxtImg v-else :src="video.video_cover" class="w-full h-full brightness-90 object-cover"/>
+      <NuxtImg
-      <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">
+        v-else
-        <div class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer" @click="isPreviewModalOpen = true">
+        :src="video.video_cover"
-          <Icon name="i-tabler-play" class="text-white text-3xl" />
+        class="w-full h-full brightness-90 object-cover"
+      />
+      <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"
+      >
+        <div
+          class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer"
+          @click="isPreviewModalOpen = true"
+        >
+          <Icon
+            name="i-tabler-play"
+            class="text-white text-3xl"
+          />
         </div>
       </div>
     </div>
     <div class="flex-1 flex flex-col justify-between gap-2">
-      <div class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5">
+      <div
+        class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5"
+      >
         <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">{{ video.title || '无标题' }}</p>
+            <p class="text-sm font-bold line-clamp-1">
+              {{ video.title || '无标题' }}
+            </p>
           </li>
           <li class="">
             <h2 class="text-2xs font-medium text-primary-500">完成时间</h2>
-            <p class="text-xs line-clamp-1">{{ video.complete_time ? dayjs(video.complete_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '进行中' }}</p>
+            <p class="text-xs line-clamp-1">
+              {{
+                video.complete_time
+                  ? dayjs(video.complete_time * 1000).format(
+                      'YYYY-MM-DD HH:mm:ss'
+                    )
+                  : '进行中'
+              }}
+            </p>
           </li>
           <li class="">
             <h2 class="text-2xs font-medium text-primary-500">生成耗时</h2>
-            <p class="text-xs line-clamp-1">{{ video.duration ? dayjs.duration(video.duration || 0).format('HH:mm:ss') : '进行中' }}</p>
+            <p class="text-xs line-clamp-1">
+              {{
+                video.duration
+                  ? dayjs.duration(video.duration || 0).format('HH:mm:ss')
+                  : '进行中'
+              }}
+            </p>
           </li>
-          <li class="col-span-2 cursor-pointer" @click="isFullContentOpen = true">
+          <li
+            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>
           </li>
         </ul>
       </div>
-      <div class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap">
+      <div
-<!--        <div-->
+        class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap"
-<!--          class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">-->
+      >
-<!--          <UIcon class="text-primary text-lg" name="i-tabler-user-square-rounded"/>-->
+        <!--        <div-->
-<!--          <p class="text-xs">数字人 {{ video.digital_human_id }}</p>-->
+        <!--          class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">-->
-<!--        </div>-->
+        <!--          <UIcon class="text-primary text-lg" name="i-tabler-user-square-rounded"/>-->
+        <!--          <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="w-fit hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none"
-          <p class="text-2xs text-neutral-400 dark:text-neutral-500">{{ video.digital_human_id }}</p>
+        >
+          <p class="text-2xs text-neutral-400 dark:text-neutral-500">
+            {{ video.digital_human_id }}
+          </p>
         </div>
         <div class="space-x-2">
           <UButton
@@ -258,13 +316,24 @@ const startDownload = (url: string, filename: string) => {
           />
           <UButtonGroup size="xs">
             <UButton
-              :label="downloadingState.subtitle > 0 && downloadingState.subtitle < 100 ? `${downloadingState.subtitle.toFixed(0)}%` : '字幕'"
+              :label="
-              :loading="downloadingState.subtitle > 0 && downloadingState.subtitle < 100"
+                downloadingState.subtitle > 0 && downloadingState.subtitle < 100
+                  ? `${downloadingState.subtitle.toFixed(0)}%`
+                  : '字幕'
+              "
+              :loading="
+                downloadingState.subtitle > 0 && downloadingState.subtitle < 100
+              "
               :disabled="!video.subtitle"
               color="primary"
               leading-icon="i-tabler-file-download"
               variant="soft"
-              @click="startDownload(video.subtitle!, (video.title || video.task_id) + '.ass')"
+              @click="
+                startDownload(
+                  video.subtitle!,
+                  (video.title || video.task_id) + '.ass'
+                )
+              "
             />
             <UDropdown
               :items="[
@@ -273,8 +342,11 @@ const startDownload = (url: string, filename: string) => {
                     label: '绿幕视频下载',
                     icon: 'tabler:download',
                     click: () => {
-                      startDownload(video.video_url!, (video.title || video.task_id) + '.mp4')
+                      startDownload(
-                    }
+                        video.video_url!,
+                        (video.title || video.task_id) + '.mp4'
+                      )
+                    },
                   },
                   {
                     label: '合成背景图片',
@@ -282,14 +354,20 @@ const startDownload = (url: string, filename: string) => {
                     click: () => {
                       isVideoBackgroundPreviewOpen = true
                     },
-                    disabled: !video.video_alpha_url
+                    disabled: !video.video_alpha_url,
                   },
                 ],
               ]"
             >
               <UButton
-                :label="downloadingState.video > 0 && downloadingState.video < 100 ? `${downloadingState.video.toFixed(0)}%` : '视频'"
+                :label="
-                :loading="downloadingState.video > 0 && downloadingState.video < 100"
+                  downloadingState.video > 0 && downloadingState.video < 100
+                    ? `${downloadingState.video.toFixed(0)}%`
+                    : '视频'
+                "
+                :loading="
+                  downloadingState.video > 0 && downloadingState.video < 100
+                "
                 :disabled="!video.video_url"
                 color="primary"
                 leading-icon="i-tabler-download"
@@ -302,10 +380,17 @@ const startDownload = (url: string, filename: string) => {
     </div>
     <!-- Full video content -->
     <UModal v-model="isFullContentOpen">
-      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <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
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+            >
               {{ video.title || '无标题' }}
               <span class="block text-xs text-primary">驱动内容</span>
             </h3>
@@ -326,47 +411,92 @@ const startDownload = (url: string, filename: string) => {
 
         <template #footer>
           <div class="flex justify-end gap-2">
-            <UButton color="primary" @click="isFullContentOpen = false">关闭</UButton>
+            <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' }">
+      <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">
+            <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">
+              <p
+                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+              >
                 {{ video.title }}
               </p>
             </div>
-            <UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isPreviewModalOpen = false" />
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isPreviewModalOpen = false"
+            />
           </div>
         </template>
 
-        <video class="w-full rounded shadow" controls autoplay :src="video.video_url" />
+        <video
+          class="w-full rounded shadow"
+          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' }">
+      <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">
+            <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">
+              <p
+                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+              >
                 {{ video.title }}
               </p>
             </div>
-            <UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isVideoBackgroundPreviewOpen = false" />
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isVideoBackgroundPreviewOpen = false"
+            />
           </div>
         </template>
 
         <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
+            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">选择背景图片</div>
+              <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">
@@ -397,7 +527,10 @@ const startDownload = (url: string, filename: string) => {
               />
 
               <!-- 选中的文件名 -->
-              <div v-if="selectedBackgroundFile" class="text-xs text-neutral-500 dark:text-neutral-400">
+              <div
+                v-if="selectedBackgroundFile"
+                class="text-xs text-neutral-500 dark:text-neutral-400"
+              >
                 已选择: {{ selectedBackgroundFile.name }}
               </div>
             </div>
@@ -413,17 +546,29 @@ const startDownload = (url: string, filename: string) => {
           />
 
           <!-- 合成进度 -->
-          <div v-if="isCombinatorLoading" class="space-y-2">
+          <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-sm font-medium text-gray-900 dark:text-white">
-              <span class="text-xs text-neutral-500">{{ compositingProgress }}%</span>
+                {{ phaseText }}
+              </span>
+              <span class="text-xs text-neutral-500">
+                {{ compositingProgress }}%
+              </span>
             </div>
             <UProgress :value="compositingProgress" />
           </div>
 
           <!-- 合成预览 -->
-          <div v-if="compositedVideoBlob" class="space-y-2">
+          <div
-            <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="w-full rounded-lg shadow bg-black"
               controls
@@ -446,13 +591,15 @@ const startDownload = (url: string, filename: string) => {
               v-if="compositedVideoBlob"
               color="gray"
               label="重新选择"
-              @click="() => {
+              @click="
-                selectedBackgroundFile = null
+                () => {
-                selectedBackgroundPreview = ''
+                  selectedBackgroundFile = null
-                compositedVideoBlob = null
+                  selectedBackgroundPreview = ''
-                combinatorError = ''
+                  compositedVideoBlob = null
-                isCombinatorLoading = false
+                  combinatorError = ''
-              }"
+                  isCombinatorLoading = false
+                }
+              "
             />
             <UButton
               v-if="compositedVideoBlob"
@@ -477,6 +624,4 @@ const startDownload = (url: string, filename: string) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

components/aigc/generation/SRTEditor.vue

@@ -610,7 +610,10 @@ defineExpose({
 }
 
 .subtitle.stroke {
-  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000,
+  text-shadow:
+    1px 1px 0 #000,
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
     -1px 1px 0 #000;
 }
 

components/aigc/nav/NavGroup.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>

components/aigc/nav/NavItem.vue

@@ -1,25 +1,16 @@
 <script setup lang="ts">
-const props = defineProps({
+export type NavItemProps = {
-  icon: {
+  label: string
-    type: String,
+  icon: string
-    default: 'i-tabler-photo-filled',
+  to: string
-  },
+  admin?: boolean
-  label: {
+  hide?: boolean
-    type: String,
+}
-    required: true,
+
-  },
+const props = withDefaults(defineProps<NavItemProps>(), {
-  to: {
+  icon: 'i-tabler-photo-filled',
-    type: String,
+  admin: false,
-    required: true,
+  hide: false,
-  },
-  admin: {
-    type: Boolean,
-    default: false,
-  },
-  hide: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 const route = useRoute()
@@ -44,15 +35,22 @@ const activeClass = computed(() => {
     class="px-4 py-3 flex justify-between items-center rounded-lg transition cursor-pointer"
   >
     <div class="flex items-center gap-2">
-      <Icon :name="icon" class="text-xl inline"/>
+      <Icon
+        :name="icon"
+        class="text-xl inline"
+      />
       <h1 class="flex-1 text-[14px] font-medium line-clamp-1">
         {{ label }}
       </h1>
     </div>
-    <UBadge v-if="admin" color="amber" label="OP" size="xs" variant="subtle"/>
+    <UBadge
+      v-if="admin"
+      color="amber"
+      label="OP"
+      size="xs"
+      variant="subtle"
+    />
   </NuxtLink>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

components/uni/Button/index.vue

@@ -1,36 +1,36 @@
 <script lang="ts" setup>
-import type {PropType} from "vue";
+import type { PropType } from 'vue'
 
 const emit = defineEmits(['click'])
 const props = defineProps({
   type: {
     type: String as PropType<ButtonType>,
-    default: 'normal'
+    default: 'normal',
   },
   attrType: {
     type: String as PropType<'button' | 'submit' | 'reset'>,
-    default: 'button'
+    default: 'button',
   },
   size: {
     type: String as PropType<ButtonSize>,
-    default: 'base'
+    default: 'base',
   },
   block: {
     type: Boolean,
-    default: false
+    default: false,
   },
   icon: {
     type: String,
-    default: ''
+    default: '',
   },
   loading: {
     type: Boolean,
-    default: false
+    default: false,
   },
   disabled: {
     type: Boolean,
-    default: false
+    default: false,
-  }
+  },
 })
 
 const buttonTypeClass = computed(() => {
@@ -54,21 +54,36 @@ const handleClick = (e: any) => {
 </script>
 
 <template>
-  <button class="w-fit flex justify-center items-center rounded-md font-bold border shadow-sm transition focus:ring-4"
+  <button
-          :class="{
+    class="w-fit flex justify-center items-center rounded-md font-bold border shadow-sm transition focus:ring-4"
-    'w-full': block,
+    :class="{
-    'uni-button--disabled': disabled || loading,
+      'w-full': block,
-    [buttonTypeClass]: buttonTypeClass,
+      'uni-button--disabled': disabled || loading,
-    [buttonSizeClass]: buttonSizeClass,
+      [buttonTypeClass]: buttonTypeClass,
-  }" @click="handleClick" :disabled="disabled || loading" :type="attrType">
+      [buttonSizeClass]: buttonSizeClass,
+    }"
+    @click="handleClick"
+    :disabled="disabled || loading"
+    :type="attrType"
+  >
     <Transition name="icon">
       <UniIconSpinner v-if="loading" />
-      <Icon v-else-if="buttonIcon" :name="buttonIcon" :key="buttonIcon" />
+      <Icon
-      <span v-else class="mr-2">
+        v-else-if="buttonIcon"
-        <slot name="icon"/>
+        :name="buttonIcon"
+        :key="buttonIcon"
+      />
+      <span
+        v-else
+        class="mr-2"
+      >
+        <slot name="icon" />
       </span>
     </Transition>
-    <div class="flex items-center whitespace-nowrap leading-snug" :class="{ 'ml-2': buttonIcon || loading }">
+    <div
+      class="flex items-center whitespace-nowrap leading-snug"
+      :class="{ 'ml-2': buttonIcon || loading }"
+    >
       <slot />
     </div>
   </button>
@@ -77,7 +92,7 @@ const handleClick = (e: any) => {
 <style scoped>
 .icon-enter-active,
 .icon-leave-active {
-  transition: all .3s ease;
+  transition: all 0.3s ease;
 }
 
 .icon-enter-from,

components/uni/Copyable/index.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import {useMessage} from "~/composables/uni/useMessage";
+import { useMessage } from '~/composables/uni/useMessage'
 
 const props = defineProps({
   hideIcon: {
     type: Boolean,
-    default: false
+    default: false,
   },
   iconSize: {
     type: String,
-    default: '1em'
+    default: '1em',
   },
   text: {
     type: String,
-    required: true
+    required: true,
-  }
+  },
 })
 
 const message = useMessage()
@@ -22,48 +22,123 @@ const copied = ref(false)
 const copied_timeout = ref()
 
 const fuck_copy = () => {
-  navigator.clipboard.writeText(props.text || '').then(() => {
+  navigator.clipboard
-    copied.value = true
+    .writeText(props.text || '')
-    if (copied_timeout.value) clearInterval(copied_timeout.value)
+    .then(() => {
-    copied_timeout.value = setTimeout(() => copied.value = false, 1500)
+      copied.value = true
-  }).catch(e => {
+      if (copied_timeout.value) clearInterval(copied_timeout.value)
-    message.error(`复制失败`)
+      copied_timeout.value = setTimeout(() => (copied.value = false), 1500)
-  })
+    })
+    .catch((e) => {
+      message.error(`复制失败`)
+    })
 }
 </script>
 
 <template>
-  <div class="inline-flex items-center gap-0.5 cursor-pointer" @click="fuck_copy">
+  <div
-    <slot/>
+    class="inline-flex items-center gap-0.5 cursor-pointer"
-    <Transition v-if="!hideIcon" name="icon" mode="out-in">
+    @click="fuck_copy"
-      <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" :width="iconSize" :height="iconSize" viewBox="0 0 24 24"
+  >
-           class="text-neutral-500">
+    <slot />
-        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <Transition
-          <path d="M8 10a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2z"/>
+      v-if="!hideIcon"
-          <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>
+      name="icon"
+      mode="out-in"
+    >
+      <svg
+        v-if="!copied"
+        xmlns="http://www.w3.org/2000/svg"
+        :width="iconSize"
+        :height="iconSize"
+        viewBox="0 0 24 24"
+        class="text-neutral-500"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path
+            d="M8 10a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2z"
+          />
+          <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
         </g>
       </svg>
-      <svg v-else xmlns="http://www.w3.org/2000/svg" :width="iconSize" :height="iconSize" viewBox="0 0 24 24"
+      <svg
-           class="text-green-600">
+        v-else
+        xmlns="http://www.w3.org/2000/svg"
+        :width="iconSize"
+        :height="iconSize"
+        viewBox="0 0 24 24"
+        class="text-green-600"
+      >
         <defs>
           <mask id="lineMdCheckAll0">
-            <g fill="none" stroke="#fff" stroke-dasharray="22" stroke-dashoffset="22" stroke-linecap="round"
+            <g
-               stroke-linejoin="round" stroke-width="2">
+              fill="none"
+              stroke="#fff"
+              stroke-dasharray="22"
+              stroke-dashoffset="22"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
               <path d="M2 13.5l4 4l10.75 -10.75">
-                <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="22;0"/>
+                <animate
+                  fill="freeze"
+                  attributeName="stroke-dashoffset"
+                  dur="0.2s"
+                  values="22;0"
+                />
               </path>
-              <path stroke="#000" stroke-width="4" d="M7.5 13.5l4 4l10.75 -10.75" opacity="0">
+              <path
-                <set attributeName="opacity" begin="0.2s" to="1"/>
+                stroke="#000"
-                <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="22;0"/>
+                stroke-width="4"
+                d="M7.5 13.5l4 4l10.75 -10.75"
+                opacity="0"
+              >
+                <set
+                  attributeName="opacity"
+                  begin="0.2s"
+                  to="1"
+                />
+                <animate
+                  fill="freeze"
+                  attributeName="stroke-dashoffset"
+                  begin="0.2s"
+                  dur="0.2s"
+                  values="22;0"
+                />
               </path>
-              <path d="M7.5 13.5l4 4l10.75 -10.75" opacity="0">
+              <path
-                <set attributeName="opacity" begin="0.2s" to="1"/>
+                d="M7.5 13.5l4 4l10.75 -10.75"
-                <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="22;0"/>
+                opacity="0"
+              >
+                <set
+                  attributeName="opacity"
+                  begin="0.2s"
+                  to="1"
+                />
+                <animate
+                  fill="freeze"
+                  attributeName="stroke-dashoffset"
+                  begin="0.2s"
+                  dur="0.2s"
+                  values="22;0"
+                />
               </path>
             </g>
           </mask>
         </defs>
-        <rect width="24" height="24" fill="currentColor" mask="url(#lineMdCheckAll0)"/>
+        <rect
+          width="24"
+          height="24"
+          fill="currentColor"
+          mask="url(#lineMdCheckAll0)"
+        />
       </svg>
     </Transition>
   </div>

components/uni/FileDnD/index.vue

@@ -26,9 +26,9 @@ const selectedFiles = ref<File[]>([])
 
 const onIncomeFiles = (files?: FileList | null) => {
   if (files && files.length > 0) {
-    let wantedFiles = Array.from(files).filter(file => {
+    let wantedFiles = Array.from(files).filter((file) => {
       if (props.accept) {
-        const accept = props.accept.split(',').map(type => type.trim())
+        const accept = props.accept.split(',').map((type) => type.trim())
         return accept.includes(file.type)
       }
       return true
@@ -46,19 +46,20 @@ const onIncomeFiles = (files?: FileList | null) => {
 <template>
   <div
     :class="{
-      'bg-neutral-300 dark:bg-neutral-900 border-primary-300 dark:border-primary-800 shadow-inner': dragover,
+      'bg-neutral-300 dark:bg-neutral-900 border-primary-300 dark:border-primary-800 shadow-inner':
+        dragover,
     }"
-    class="w-full h-44 relative rounded-md border-2 border-dashed border-neutral-200 dark:border-neutral-800
+    class="w-full h-44 relative rounded-md border-2 border-dashed border-neutral-200 dark:border-neutral-800 bg-inherit cursor-pointer select-none transition duration-200 hover:border-primary-300 dark:hover:border-primary-800 overflow-hidden"
-           bg-inherit cursor-pointer select-none transition duration-200
-           hover:border-primary-300 dark:hover:border-primary-800 overflow-hidden"
     @click="inputRef?.click()"
     @dragover.prevent="dragover = true"
     @dragleave.prevent="dragover = false"
-    @drop.prevent="$event => {
+    @drop.prevent="
-      dragover = false
+      ($event) => {
-      if (!$event.dataTransfer?.files) return
+        dragover = false
-      onIncomeFiles($event.dataTransfer?.files)
+        if (!$event.dataTransfer?.files) return
-    }"
+        onIncomeFiles($event.dataTransfer?.files)
+      }
+    "
   >
     <input
       ref="inputRef"
@@ -70,7 +71,7 @@ const onIncomeFiles = (files?: FileList | null) => {
     />
     <div
       :class="{
-        'pb-6': selectedFiles.length > 0
+        'pb-6': selectedFiles.length > 0,
       }"
       class="w-full h-full flex flex-col justify-center items-center gap-2 transition-all"
     >
@@ -87,13 +88,27 @@ const onIncomeFiles = (files?: FileList | null) => {
       class="absolute inset-x-0 bottom-0 pl-2 pr-0.5 py-0.5 flex justify-between items-center bg-neutral-100 dark:bg-neutral-900 border-t dark:border-neutral-800"
     >
       <div class="flex-1 pr-4 overflow-hidden flex items-center gap-1">
-        <Icon :name="selectedFiles.length === 1 ? 'i-tabler-file' : 'i-tabler-files'"
+        <Icon
-              class="text-neutral-500 dark:text-neutral-400"/>
+          :name="
+            selectedFiles.length === 1 ? 'i-tabler-file' : 'i-tabler-files'
+          "
+          class="text-neutral-500 dark:text-neutral-400"
+        />
         <p
-          :title="selectedFiles.slice(0, 3).map(file => file.name).join(', ')"
+          :title="
+            selectedFiles
+              .slice(0, 3)
+              .map((file) => file.name)
+              .join(', ')
+          "
           class="text-2xs font-medium overflow-hidden text-ellipsis whitespace-nowrap"
         >
-          {{ selectedFiles.slice(0, 3).map(file => file.name).join(', ') }}
+          {{
+            selectedFiles
+              .slice(0, 3)
+              .map((file) => file.name)
+              .join(', ')
+          }}
         </p>
       </div>
       <div>
@@ -102,18 +117,18 @@ const onIncomeFiles = (files?: FileList | null) => {
           size="xs"
           square
           variant="ghost"
-          @click.stop="() => {
+          @click.stop="
-            selectedFiles = []
+            () => {
-            inputRef!.value = ''
+              selectedFiles = []
-          }"
+              inputRef!.value = ''
+            }
+          "
         >
-          <Icon name="i-tabler-x"/>
+          <Icon name="i-tabler-x" />
         </UButton>
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

components/uni/Icon/CircleError.vue

@@ -1,10 +1,21 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <svg
-    <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <g
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
       <path d="M0 0h24v24H0z"></path>
-      <path fill="currentColor"
+      <path
-        d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-6.489 5.8a1 1 0 0 0-1.218 1.567L10.585 12l-1.292 1.293l-.083.094a1 1 0 0 0 1.497 1.32L12 13.415l1.293 1.292l.094.083a1 1 0 0 0 1.32-1.497L13.415 12l1.292-1.293l.083-.094a1 1 0 0 0-1.497-1.32L12 10.585l-1.293-1.292l-.094-.083z">
+        fill="currentColor"
-      </path>
+        d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-6.489 5.8a1 1 0 0 0-1.218 1.567L10.585 12l-1.292 1.293l-.083.094a1 1 0 0 0 1.497 1.32L12 13.415l1.293 1.292l.094.083a1 1 0 0 0 1.32-1.497L13.415 12l1.292-1.293l.083-.094a1 1 0 0 0-1.497-1.32L12 10.585l-1.293-1.292l-.094-.083z"
+      ></path>
     </g>
   </svg>
 </template>

components/uni/Icon/CircleInfo.vue

@@ -1,7 +1,15 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <svg
-    <path fill="currentColor" fillRule="evenodd"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
       d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10Zm-10 5.75a.75.75 0 0 0 .75-.75v-6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75ZM12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2Z"
-      clipRule="evenodd"></path>
+      clipRule="evenodd"
+    ></path>
   </svg>
 </template>

components/uni/Icon/CircleSuccess.vue

@@ -1,10 +1,21 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <svg
-    <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <g
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
       <path d="M0 0h24v24H0z"></path>
-      <path fill="currentColor"
+      <path
-        d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-1.293 5.953a1 1 0 0 0-1.32-.083l-.094.083L11 12.585l-1.293-1.292l-.094-.083a1 1 0 0 0-1.403 1.403l.083.094l2 2l.094.083a1 1 0 0 0 1.226 0l.094-.083l4-4l.083-.094a1 1 0 0 0-.083-1.32z">
+        fill="currentColor"
-      </path>
+        d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-1.293 5.953a1 1 0 0 0-1.32-.083l-.094.083L11 12.585l-1.293-1.292l-.094-.083a1 1 0 0 0-1.403 1.403l.083.094l2 2l.094.083a1 1 0 0 0 1.226 0l.094-.083l4-4l.083-.094a1 1 0 0 0-.083-1.32z"
+      ></path>
     </g>
   </svg>
 </template>

components/uni/Icon/CircleWarning.vue

@@ -1,10 +1,21 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <svg
-    <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <g
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
       <path d="M0 0h24v24H0z"></path>
-      <path fill="currentColor"
+      <path
-        d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1-19.995.324L2 12l.004-.28C2.152 6.327 6.57 2 12 2zm.01 13l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986L12.01 15zM12 7a1 1 0 0 0-.993.883L11 8v4l.007.117a1 1 0 0 0 1.986 0L13 12V8l-.007-.117A1 1 0 0 0 12 7z">
+        fill="currentColor"
-      </path>
+        d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1-19.995.324L2 12l.004-.28C2.152 6.327 6.57 2 12 2zm.01 13l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986L12.01 15zM12 7a1 1 0 0 0-.993.883L11 8v4l.007.117a1 1 0 0 0 1.986 0L13 12V8l-.007-.117A1 1 0 0 0 12 7z"
+      ></path>
     </g>
   </svg>
 </template>

components/uni/Icon/Spinner.vue

@@ -1,11 +1,26 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+  <svg
-    <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+    xmlns="http://www.w3.org/2000/svg"
-      opacity=".25"></path>
+    width="1em"
-    <path fill="currentColor"
+    height="1em"
-      d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
+    viewBox="0 0 24 24"
-      <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
+  >
-        values="0 12 12;360 12 12"></animateTransform>
+    <path
+      fill="currentColor"
+      d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+      opacity=".25"
+    ></path>
+    <path
+      fill="currentColor"
+      d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="0.75s"
+        repeatCount="indefinite"
+        type="rotate"
+        values="0 12 12;360 12 12"
+      ></animateTransform>
     </path>
   </svg>
 </template>

components/uni/Input/index.vue

@@ -1,31 +1,33 @@
 <script lang="ts" setup>
-import type {PropType} from "vue";
+import type { PropType } from 'vue'
 
 const emit = defineEmits(['input', 'change', 'update:modelValue'])
 const props = defineProps({
   label: {
     type: String,
     required: false,
-    default: ''
+    default: '',
   },
   modelValue: {
     type: [String, Number] as PropType<string | number | undefined>,
-    required: true
+    required: true,
   },
   placeholder: {
     type: String,
     required: false,
-    default: ''
+    default: '',
   },
   type: {
-    type: String as PropType<'text' | 'password' | 'number' | 'email' | 'tel' | 'date'>,
+    type: String as PropType<
+      'text' | 'password' | 'number' | 'email' | 'tel' | 'date'
+    >,
     required: false,
-    default: 'text'
+    default: 'text',
   },
   justify: {
     type: String as PropType<'start' | 'end'>,
     required: false,
-    default: 'end'
+    default: 'end',
   },
   pattern: {
     type: [String, RegExp],
@@ -34,28 +36,38 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     required: false,
-    default: false
+    default: false,
   },
 })
 
 const inputValue = ref(props.modelValue)
 const isError = ref(false)
 
-watch(() => props.modelValue, (value) => {
+watch(
-  inputValue.value = value
+  () => props.modelValue,
-  if (props.pattern && value) {
+  (value) => {
-    const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
+    inputValue.value = value
-    isError.value = !pattern.test(value as string)
+    if (props.pattern && value) {
-    pattern.lastIndex = 0
+      const pattern =
-  }
+        typeof props.pattern === 'string'
-}, { immediate: true })
+          ? new RegExp(props.pattern)
+          : props.pattern
+      isError.value = !pattern.test(value as string)
+      pattern.lastIndex = 0
+    }
+  },
+  { immediate: true }
+)
 
 const handleInput = (e: any) => {
   if (props.disabled) return
   const value = e.target.value
 
   if (props.pattern && value && props.type !== 'date') {
-    const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
+    const pattern =
+      typeof props.pattern === 'string'
+        ? new RegExp(props.pattern)
+        : props.pattern
     isError.value = !pattern.test(value)
     pattern.lastIndex = 0
     inputValue.value = value
@@ -71,18 +83,33 @@ const handleInput = (e: any) => {
 </script>
 
 <template>
-  <div class="flex flex-col space-y-1"
+  <div
-    :class="{ 'justify-start': justify === 'start', 'justify-end': justify === 'end' }">
+    class="flex flex-col space-y-1"
-    <p class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']" v-if="label">
+    :class="{
+      'justify-start': justify === 'start',
+      'justify-end': justify === 'end',
+    }"
+  >
+    <p
+      class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']"
+      v-if="label"
+    >
       {{ label }}
     </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
+      <input
-                   border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700
+        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"
-                     focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800
+        :class="{
-                     outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
+          '!border-red-500': isError,
-        :class="{ '!border-red-500': isError, 'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600': disabled }"
+          'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
-             :value="inputValue" @input="handleInput" :placeholder="placeholder" :disabled="disabled" :type="type"/>
+            disabled,
+        }"
+        :value="inputValue"
+        @input="handleInput"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :type="type"
+      />
     </div>
   </div>
 </template>

components/uni/Message/Provider.vue

@@ -1,24 +1,32 @@
 <script lang="ts" setup>
-
+import type {
-import type {Message, MessageApi, MessageProviderApi, MessageType} from "~/components/uni/Message/index";
+  Message,
+  MessageApi,
+  MessageProviderApi,
+  MessageType,
+} from '~/components/uni/Message/index'
 
 const props = defineProps({
   max: {
     type: Number,
-    default: 5
+    default: 5,
-  }
+  },
 })
 
 const nuxtApp = useNuxtApp()
 const messageList = ref<Message[]>([])
 
-const createMessage = (content: string, type: MessageType, duration: number = 3000) => {
+const createMessage = (
-  const {max} = props
+  content: string,
+  type: MessageType,
+  duration: number = 3000
+) => {
+  const { max } = props
   messageList.value.push({
     id: (Date.now() + Math.random() * 100).toString(32).toUpperCase(),
     content,
     type,
-    duration
+    duration,
   })
   if (messageList.value.length > max) {
     messageList.value.shift()
@@ -27,26 +35,29 @@ const createMessage = (content: string, type: MessageType, duration: number = 30
 
 const providerApi: MessageProviderApi = {
   destroy: (id: string) => {
-    messageList.value.splice(messageList.value.findIndex(message => message.id === id), 1)
+    messageList.value.splice(
-  }
+      messageList.value.findIndex((message) => message.id === id),
+      1
+    )
+  },
 }
 
 const api: MessageApi = {
   info: (content: string, duration: number = 3000) => {
-    createMessage(content, 'info', duration);
+    createMessage(content, 'info', duration)
   },
   success: (content: string, duration: number = 3000) => {
-    createMessage(content, 'success', duration);
+    createMessage(content, 'success', duration)
   },
   warning: (content: string, duration: number = 3000) => {
-    createMessage(content, 'warning', duration);
+    createMessage(content, 'warning', duration)
   },
   error: (content: string, duration: number = 3000) => {
-    createMessage(content, 'error', duration);
+    createMessage(content, 'error', duration)
   },
   destroyAll: function (): void {
-    throw new Error('Function not implemented.');
+    throw new Error('Function not implemented.')
-  }
+  },
 }
 
 nuxtApp.vueApp.provide('uni-message-provider', providerApi)
@@ -54,12 +65,16 @@ nuxtApp.vueApp.provide('uni-message', api)
 </script>
 
 <template>
-  <slot/>
+  <slot />
   <teleport to="body">
     <div id="message-provider">
       <div class="message-wrapper">
         <TransitionGroup name="message">
-          <UniMessage v-for="(message, k) in messageList" :key="message.id" :message="message"/>
+          <UniMessage
+            v-for="(message, k) in messageList"
+            :key="message.id"
+            :message="message"
+          />
         </TransitionGroup>
       </div>
     </div>
@@ -73,11 +88,11 @@ nuxtApp.vueApp.provide('uni-message', api)
 
 .message-move,
 .message-leave-active {
-  transition: all .6s ease;
+  transition: all 0.6s ease;
 }
 
 .message-enter-active {
-  transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
+  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
 .message-enter-from {

components/uni/Message/index.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
-
+import type {
-import type {Message, MessageProviderApi} from "~/components/uni/Message/index";
+  Message,
+  MessageProviderApi,
+} from '~/components/uni/Message/index'
 
 const providerApi = inject<MessageProviderApi>('uni-message-provider')
 
 const props = defineProps({
   message: {
     require: true,
-    type: Object
+    type: Object,
-  }
+  },
 })
 
 const message = ref<Message>(props.message as Message)
@@ -16,22 +18,39 @@ const message = ref<Message>(props.message as Message)
 onMounted(() => {
   setTimeout(() => {
     providerApi?.destroy(message.value.id)
-  }, message.value?.duration || 3000);
+  }, message.value?.duration || 3000)
 })
 </script>
 
 <template>
-  <div class="message" :class="{
+  <div
-    '!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
+    class="message"
-    '!text-emerald-500 !border-emerald-400 !bg-emerald-50': message.type === 'success',
+    :class="{
-    '!text-orange-500 !border-orange-400 !bg-orange-50': message.type === 'warning',
+      '!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
-    '!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
+      '!text-emerald-500 !border-emerald-400 !bg-emerald-50':
-    [message.type]: message.type
+        message.type === 'success',
-  }">
+      '!text-orange-500 !border-orange-400 !bg-orange-50':
-    <UniIconCircleSuccess v-if="message.type === 'success'" class="text-xl" />
+        message.type === 'warning',
-    <UniIconCircleWarning v-if="message.type === 'warning'" class="text-xl" />
+      '!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
-    <UniIconCircleError v-if="message.type === 'error'" class="text-xl" />
+      [message.type]: message.type,
-    <UniIconCircleInfo v-if="message.type === 'info'" class="text-xl" />
+    }"
+  >
+    <UniIconCircleSuccess
+      v-if="message.type === 'success'"
+      class="text-xl"
+    />
+    <UniIconCircleWarning
+      v-if="message.type === 'warning'"
+      class="text-xl"
+    />
+    <UniIconCircleError
+      v-if="message.type === 'error'"
+      class="text-xl"
+    />
+    <UniIconCircleInfo
+      v-if="message.type === 'info'"
+      class="text-xl"
+    />
     <span>
       {{ message.content }}
     </span>
@@ -41,23 +60,23 @@ onMounted(() => {
 <style scoped>
 .message {
   min-width: 80px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   @apply h-fit px-2 py-1.5 border bg-white border-gray-300 rounded-md text-gray-500 text-xs flex items-center gap-1.5 first-of-type:mt-2.5 mt-2.5 font-bold pointer-events-auto;
 }
 
 .message.info {
-  box-shadow: 0 4px 12px rgba(59, 130, 246, .2);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
 }
 
 .message.success {
-  box-shadow: 0 4px 12px rgba(16, 185, 129, .2);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
 }
 
 .message.warning {
-  box-shadow: 0 4px 12px rgba(249, 115, 22, .2);
+  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
 }
 
 .message.error {
-  box-shadow: 0 4px 12px rgba(244, 63, 94, .2);
+  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
 }
 </style>

components/uni/Select/index.vue

@@ -1,36 +1,36 @@
 <script lang="ts" setup>
-import {computed, type PropType} from "vue";
+import { computed, type PropType } from 'vue'
 
 const emit = defineEmits(['input', 'change', 'update:modelValue'])
 const props = defineProps({
   label: {
     type: String,
     required: false,
-    default: ''
+    default: '',
   },
   modelValue: {
     type: [String, Number],
-    required: false
+    required: false,
   },
   items: {
     type: Array as PropType<SelectItem[]>,
-    required: true
+    required: true,
   },
   justify: {
     type: String as PropType<'start' | 'end'>,
     required: false,
-    default: 'end'
+    default: 'end',
   },
   disabled: {
     type: Boolean,
     required: false,
-    default: false
+    default: false,
   },
   align: {
     type: String as PropType<'bottom' | 'top'>,
     required: false,
-    default: 'bottom'
+    default: 'bottom',
-  }
+  },
 })
 
 const selectWrapperRef = ref()
@@ -39,14 +39,17 @@ const optionsRef = ref()
 
 const optionsAlign = computed(() => {
   switch (props.align) {
-    case "bottom":
+    case 'bottom':
       return 'top-full mt-2'
-    case "top":
+    case 'top':
       return 'bottom-full mb-2'
   }
 })
-const hasAnyIcon = computed(() => props.items.some(item => item.icon))
+const hasAnyIcon = computed(() => props.items.some((item) => item.icon))
-const selectedItem = computed(() => props.items.find(item => item.value === props.modelValue) as SelectItem)
+const selectedItem = computed(
+  () =>
+    props.items.find((item) => item.value === props.modelValue) as SelectItem
+)
 const optionsExpanded = ref(false)
 const selectedIconFlag = ref(true)
 
@@ -57,58 +60,113 @@ const handleOptionSelect = (option: SelectItem) => {
   emit('input', option.value)
   emit('change', option.value)
   emit('update:modelValue', option.value)
-  selectedIconFlag.value = false;
+  selectedIconFlag.value = false
   nextTick(() => {
-    selectedIconFlag.value = true;
+    selectedIconFlag.value = true
-  });
+  })
 }
 
 onMounted(() => {
-  selectRef.value.ownerDocument.addEventListener('click', (e: { target: any; }) => {
+  selectRef.value.ownerDocument.addEventListener(
-    if (optionsExpanded && !selectRef?.value?.contains(e.target)) {
+    'click',
-      optionsExpanded.value = false
+    (e: { target: any }) => {
+      if (optionsExpanded && !selectRef?.value?.contains(e.target)) {
+        optionsExpanded.value = false
+      }
     }
-  })
+  )
 })
 </script>
 
 <template>
-  <div class="flex flex-col space-y-1"
+  <div
-    :class="{ 'justify-start': justify === 'start', 'justify-end': justify === 'end' }">
+    class="flex flex-col space-y-1"
-    <p class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']" v-if="label">
+    :class="{
+      'justify-start': justify === 'start',
+      'justify-end': justify === 'end',
+    }"
+  >
+    <p
+      class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']"
+      v-if="label"
+    >
       {{ label }}
     </p>
-    <div class="relative" ref="selectWrapperRef">
+    <div
-      <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
+      class="relative"
-                   border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700
+      ref="selectWrapperRef"
-                     focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 shadow-sm"
+    >
-        :class="{ 'cursor-not-allowed bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600': disabled }" ref="selectRef" type="button" @click="handleSelectClick" :disabled="disabled">
+      <button
-        <span v-if="selectedItem?.icon && !selectedIconFlag && hasAnyIcon"
+        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="inline-block w-5 h-5 pointer-events-none"></span>
+        :class="{
-        <Icon v-else-if="selectedItem?.icon && selectedIconFlag && hasAnyIcon" :name="selectedItem?.icon"
+          'cursor-not-allowed bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
-          class="inline-block w-5 h-5 pointer-events-none" />
+            disabled,
-        <Transition name="select-item" mode="out-in">
+        }"
-          <span class="leading-snug whitespace-nowrap text-sm" :key="selectedItem?.value">{{
+        ref="selectRef"
+        type="button"
+        @click="handleSelectClick"
+        :disabled="disabled"
+      >
+        <span
+          v-if="selectedItem?.icon && !selectedIconFlag && hasAnyIcon"
+          class="inline-block w-5 h-5 pointer-events-none"
+        ></span>
+        <Icon
+          v-else-if="selectedItem?.icon && selectedIconFlag && hasAnyIcon"
+          :name="selectedItem?.icon"
+          class="inline-block w-5 h-5 pointer-events-none"
+        />
+        <Transition
+          name="select-item"
+          mode="out-in"
+        >
+          <span
+            class="leading-snug whitespace-nowrap text-sm"
+            :key="selectedItem?.value"
+          >
+            {{
               selectedItem?.label || selectedItem?.value || 'Select an option'
-            }}</span>
+            }}
+          </span>
         </Transition>
-        <Icon name="tabler:dots-vertical"
+        <Icon
-          class="absolute bg-neutral-50 text-gray-500 dark:bg-neutral-700/50 dark:text-neutral-500 inset-y-0 right-0 h-full" />
+          name="tabler:dots-vertical"
+          class="absolute bg-neutral-50 text-gray-500 dark:bg-neutral-700/50 dark:text-neutral-500 inset-y-0 right-0 h-full"
+        />
       </button>
-      <div class="absolute right-0 w-full md:w-fit rounded-md border overflow-x-hidden overflow-y-auto transition shadow-lg opacity-0
+      <div
-                bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 z-50 max-h-64"
+        class="absolute right-0 w-full md:w-fit rounded-md border overflow-x-hidden overflow-y-auto transition shadow-lg opacity-0 bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 z-50 max-h-64"
-           :class="{ 'opacity-100 pointer-events-auto': optionsExpanded, '-translate-y-4 pointer-events-none': !optionsExpanded, [optionsAlign]: optionsAlign }"
+        :class="{
-        ref="optionsRef">
+          'opacity-100 pointer-events-auto': optionsExpanded,
-        <div class="flex items-center gap-2.5 px-2 py-2 cursor-pointer
+          '-translate-y-4 pointer-events-none': !optionsExpanded,
-                  dark:text-neutral-300 font-['Nunito'] transition whitespace-nowrap
+          [optionsAlign]: optionsAlign,
-                  bg-white dark:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-700"
+        }"
-          v-for="(option, index) in items" :key="index" :class="{
+        ref="optionsRef"
-            '!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': option.disabled
+        <div
-          }" @click="!option.disabled ? handleOptionSelect(option) : void 0">
+          class="flex items-center gap-2.5 px-2 py-2 cursor-pointer dark:text-neutral-300 font-['Nunito'] transition whitespace-nowrap bg-white dark:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-700"
-          <div class="inline-block w-5 h-5" v-if="hasAnyIcon && !option.icon"></div>
+          v-for="(option, index) in items"
-          <Icon :name="(option?.icon)" class="inline-block w-5 h-5" v-if="option.icon" />
+          :key="index"
-          <span class="leading-none whitespace-nowrap text-sm font-sans">{{ option.label || 'No label' }}</span>
+          :class="{
+            '!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':
+              option.disabled,
+          }"
+          @click="!option.disabled ? handleOptionSelect(option) : void 0"
+        >
+          <div
+            class="inline-block w-5 h-5"
+            v-if="hasAnyIcon && !option.icon"
+          ></div>
+          <Icon
+            :name="option?.icon"
+            class="inline-block w-5 h-5"
+            v-if="option.icon"
+          />
+          <span class="leading-none whitespace-nowrap text-sm font-sans">
+            {{ option.label || 'No label' }}
+          </span>
         </div>
       </div>
     </div>
@@ -118,12 +176,12 @@ onMounted(() => {
 <style scoped>
 .select-item-enter-active,
 .select-item-leave-active {
-  transition: all .15s ease;
+  transition: all 0.15s ease;
 }
 
 .select-item-enter-from,
 .select-item-leave-to {
-  opacity: .5;
+  opacity: 0.5;
   filter: blur(2px);
 }
 </style>

components/uni/TextArea/index.vue

@@ -1,4 +1,3 @@
-
 import { textarea } from '@nuxt/ui';
 <script lang="ts" setup>
 const emit = defineEmits(['input', 'change', 'update:modelValue'])
@@ -6,21 +5,21 @@ const props = defineProps({
   label: {
     type: String,
     required: false,
-    default: ''
+    default: '',
   },
   modelValue: {
     type: [String, Number],
-    required: true
+    required: true,
   },
   placeholder: {
     type: String,
     required: false,
-    default: ''
+    default: '',
   },
   justify: {
     type: String as PropType<'start' | 'end'>,
     required: false,
-    default: 'end'
+    default: 'end',
   },
   pattern: {
     type: [String, RegExp],
@@ -29,12 +28,12 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     required: false,
-    default: false
+    default: false,
   },
   rows: {
     type: Number,
     required: false,
-    default: 5
+    default: 5,
   },
   minRows: {
     type: Number,
@@ -46,21 +45,31 @@ const textAreaRef = ref()
 const inputValue = ref(props.modelValue)
 const isError = ref(false)
 
-watch(() => props.modelValue, (value) => {
+watch(
-  inputValue.value = value
+  () => props.modelValue,
-  if (props.pattern && value) {
+  (value) => {
-    const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
+    inputValue.value = value
-    isError.value = !pattern.test(value as string)
+    if (props.pattern && value) {
-    pattern.lastIndex = 0
+      const pattern =
-  }
+        typeof props.pattern === 'string'
-}, { immediate: true })
+          ? new RegExp(props.pattern)
+          : props.pattern
+      isError.value = !pattern.test(value as string)
+      pattern.lastIndex = 0
+    }
+  },
+  { immediate: true }
+)
 
 const handleInput = (e: any) => {
   if (props.disabled) return
   const value = e.target.value
 
   if (props.pattern && value) {
-    const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
+    const pattern =
+      typeof props.pattern === 'string'
+        ? new RegExp(props.pattern)
+        : props.pattern
     isError.value = !pattern.test(value)
     pattern.lastIndex = 0
     inputValue.value = value
@@ -92,19 +101,34 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col space-y-1"
+  <div
-    :class="{ 'justify-start': justify === 'start', 'justify-end': justify === 'end' }">
+    class="flex flex-col space-y-1"
-    <p class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']" v-if="label">
+    :class="{
+      'justify-start': justify === 'start',
+      'justify-end': justify === 'end',
+    }"
+  >
+    <p
+      class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']"
+      v-if="label"
+    >
       {{ label }}
     </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
+      <textarea
-                   border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700
+        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"
-                     focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800
+        :rows="minRows || rows"
-                     outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
+        ref="textAreaRef"
-        :rows="minRows || rows" ref="textAreaRef"
+        :class="{
-        :class="{ '!border-red-500': isError, 'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600': disabled }"
+          '!border-red-500': isError,
-        :value="inputValue" @input="handleInput" :placeholder="placeholder" :disabled="disabled" />
+          'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
+            disabled,
+        }"
+        :value="inputValue"
+        @input="handleInput"
+        :placeholder="placeholder"
+        :disabled="disabled"
+      />
     </div>
   </div>
 </template>

components/uni/Toggle/index.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
+import type { PropType } from 'vue'
 
 const emit = defineEmits(['input', 'change', 'update:modelValue'])
 
 const props = defineProps({
   modelValue: {
     type: Boolean,
-    required: false
+    required: false,
   },
   size: {
     type: String as PropType<'sm' | 'md' | 'lg'>,
     required: false,
-    default: 'md'
+    default: 'md',
   },
   value: {
     type: Boolean,
-    required: false
+    required: false,
   },
   onIcon: {
     type: String,
@@ -24,7 +24,7 @@ const props = defineProps({
   offIcon: {
     type: String,
     required: false,
-  }
+  },
 })
 
 const checked = ref(false)
@@ -88,31 +88,49 @@ onMounted(() => {
   }
 })
 
-watch(() => props.modelValue, (value) => {
+watch(
-  checked.value = value
+  () => props.modelValue,
-})
+  (value) => {
+    checked.value = value
+  }
+)
 </script>
 
 <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-none"
-      :class="{
+    :class="{
       '!bg-green-400 dark:!bg-green-400/50': checked,
       [buttonSizeClass]: buttonSizeClass,
-      [buttonPaddingClass]: buttonPaddingClass
+      [buttonPaddingClass]: buttonPaddingClass,
-    }" @click="handleCheck">
+    }"
+    @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 duration-300 group-active:scale-90"
-        :class="{
+      :class="{
-      '!shadow-lg': checked,
+        '!shadow-lg': checked,
-      'group-active:translate-x-3 group-active:duration-500': !checked,
+        'group-active:translate-x-3 group-active:duration-500': !checked,
-      [bulletSizeClass]: bulletSizeClass,
+        [bulletSizeClass]: bulletSizeClass,
-      [bulletTranslateClass]: checked
+        [bulletTranslateClass]: checked,
-    }">
+      }"
-      <span v-if="onIcon || offIcon" class="absolute inset-0 flex items-center justify-center text-neutral-400">
+    >
-        <Transition name="icon" mode="out-in">
+      <span
-          <slot v-if="checked" name="on-icon"/>
+        v-if="onIcon || offIcon"
-          <slot v-else name="off-icon"/>
+        class="absolute inset-0 flex items-center justify-center text-neutral-400"
+      >
+        <Transition
+          name="icon"
+          mode="out-in"
+        >
+          <slot
+            v-if="checked"
+            name="on-icon"
+          />
+          <slot
+            v-else
+            name="off-icon"
+          />
         </Transition>
       </span>
     </span>

composables/fetchCourseSubtitleUrl.ts

@@ -1,4 +1,6 @@
-export const fetchCourseSubtitleUrl = async (course: resp.gen.CourseGenItem) => {
+export const fetchCourseSubtitleUrl = async (
+  course: resp.gen.CourseGenItem
+) => {
   const loginState = useLoginState()
 
   try {

composables/useBlobUrlFromB64.ts

@@ -8,13 +8,13 @@ export const useBlobUrlFromB64 = (dataurl: string): string => {
   if (mimeMatches === null) {
     throw new Error('dataurl is not a valid base64 image')
   }
-  const mime = mimeMatches[1]  //image/png
+  const mime = mimeMatches[1] //image/png
   const b64data = atob(arr[1])
   let length = b64data.length
   const u8arr = new Uint8Array(length)
   while (length--) {
     u8arr[length] = b64data.charCodeAt(length)
   }
-  const blob = new Blob([u8arr], {type: mime})
+  const blob = new Blob([u8arr], { type: mime })
   return URL.createObjectURL(blob)
 }

composables/useDefer.ts

@@ -1,22 +1,22 @@
 export const useDefer = (maxFrame: number = 1000) => {
-    const frame = ref(1)
+  const frame = ref(1)
-    let rafId: number
+  let rafId: number
 
-    function updateFrame() {
+  function updateFrame() {
-        rafId = requestAnimationFrame(() => {
+    rafId = requestAnimationFrame(() => {
-            frame.value++
+      frame.value++
-            if (frame.value > maxFrame) return
+      if (frame.value > maxFrame) return
-            updateFrame()
+      updateFrame()
-        })
+    })
-    }
+  }
 
-    onMounted(() => {
+  onMounted(() => {
-        updateFrame()
+    updateFrame()
-    })
+  })
-    onUnmounted(() => {
+  onUnmounted(() => {
-        cancelAnimationFrame(rafId)
+    cancelAnimationFrame(rafId)
-    })
+  })
-    return (n: number) => {
+  return (n: number) => {
-        return frame.value >= n
+    return frame.value >= n
-    }
+  }
 }

composables/useDownload.ts

@@ -1,6 +1,9 @@
 import { EventEmitter } from 'events'
 
-export const useDownload = (url: string, filename: string): {
+export const useDownload = (
+  url: string,
+  filename: string
+): {
   download: () => void
   progressEmitter: EventEmitter
 } => {
@@ -18,7 +21,9 @@ export const useDownload = (url: string, filename: string): {
     }
     xhr.onload = function () {
       if (this.status === 200) {
-        const blob = new Blob([this.response], { type: 'application/octet-stream' })
+        const blob = new Blob([this.response], {
+          type: 'application/octet-stream',
+        })
         const url = window.URL.createObjectURL(blob)
         const link = document.createElement('a')
         link.href = url

composables/useFetchWrapped.ts

@@ -1,21 +1,21 @@
-import {useFormPayload} from "~/composables/useFormPayload";
+import { useFormPayload } from '~/composables/useFormPayload'
 
 export const useFetchWrapped = <TypeReq, TypeResp>(
-    action: string,
+  action: string,
-    payload?: TypeReq,
+  payload?: TypeReq,
-    options?: {
+  options?: {
-        method?: 'GET' | 'POST'
+    method?: 'GET' | 'POST'
-        headers?: Record<string, string>
+    headers?: Record<string, string>
-        baseURL?: string
+    baseURL?: string
-    }
+  }
 ) => {
-    const runtimeConfig = useRuntimeConfig()
+  const runtimeConfig = useRuntimeConfig()
-    return $fetch<TypeResp>('/', {
+  return $fetch<TypeResp>('/', {
-        baseURL: options?.baseURL || runtimeConfig.public.API_BASE,
+    baseURL: options?.baseURL || runtimeConfig.public.API_BASE,
-        method: options?.method || 'POST',
+    method: options?.method || 'POST',
-        query: {
+    query: {
-            s: action
+      s: action,
-        },
+    },
-        body: useFormPayload(payload as object)
+    body: useFormPayload(payload as object),
-    })
+  })
 }

composables/useFormPayload.ts

@@ -1,10 +1,10 @@
 export const useFormPayload = (payload: object) => {
-    const formData = new FormData()
+  const formData = new FormData()
-    for (const dataKey in payload) {
+  for (const dataKey in payload) {
-        if (payload.hasOwnProperty(dataKey)) {
+    if (payload.hasOwnProperty(dataKey)) {
-            // @ts-ignore
+      // @ts-ignore
-            formData.append(dataKey, payload[dataKey])
+      formData.append(dataKey, payload[dataKey])
-        }
     }
-    return formData
+  }
+  return formData
 }

composables/useHistory.ts

@@ -1,5 +1,5 @@
-import type {ResultBlockMeta} from '~/components/aigc/drawing';
+import type { ResultBlockMeta } from '~/components/aigc/drawing'
-import type {ChatSession} from "~/typings/llm";
+import type { ChatSession } from '~/typings/llm'
 
 export interface HistoryItem {
   fid: string
@@ -9,20 +9,24 @@ export interface HistoryItem {
   images?: string[]
 }
 
-export const useHistory = defineStore('xsh_assistant_aigc_history', () => {
+export const useHistory = defineStore(
-  const text2img = ref<HistoryItem[]>([])
+  'xsh_assistant_aigc_history',
-  const chatSessions = ref<ChatSession[]>([])
+  () => {
-  const setChatSessions = (sessions: ChatSession[]) => {
+    const text2img = ref<HistoryItem[]>([])
-    chatSessions.value = sessions
+    const chatSessions = ref<ChatSession[]>([])
-  }
+    const setChatSessions = (sessions: ChatSession[]) => {
+      chatSessions.value = sessions
+    }
 
-  return {
+    return {
-    text2img,
+      text2img,
-    chatSessions,
+      chatSessions,
-    setChatSessions,
+      setChatSessions,
+    }
+  },
+  {
+    persist: {
+      storage: persistedState.localStorage,
+    },
   }
-}, {
+)
-  persist: {
-    storage: persistedState.localStorage
-  }
-})

composables/useLLM.ts

@@ -1,31 +1,50 @@
-import {type ChatMessage, llmModels, type LLMSpark, type MessageRole, type ModelTag} from "~/typings/llm";
+import {
-import {useFetchWrapped} from "~/composables/useFetchWrapped";
+  type ChatMessage,
+  llmModels,
+  type LLMSpark,
+  type MessageRole,
+  type ModelTag,
+} from '~/typings/llm'
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
 
 export interface LLMRequestOptions {
   modelTag: ModelTag
 }
 
-export const useLLM = (context: ChatMessage[], options: LLMRequestOptions): Promise<string> => new Promise((resolve, reject) => {
+export const useLLM = (
-  const {modelTag} = options
+  context: ChatMessage[],
-  const model = llmModels.find(model => model.tag === modelTag)
+  options: LLMRequestOptions
-  if (!model) return reject('model specified is not available')
+): Promise<string> =>
-  const loginState = useLoginState()
+  new Promise((resolve, reject) => {
-  useFetchWrapped<LLMSpark.request | AuthedRequest, BaseResponse<LLMSpark.response>>(
+    const { modelTag } = options
-    model.endpoint,
+    const model = llmModels.find((model) => model.tag === modelTag)
-    {
+    if (!model) return reject('model specified is not available')
+    const loginState = useLoginState()
+    useFetchWrapped<
+      LLMSpark.request | AuthedRequest,
+      BaseResponse<LLMSpark.response>
+    >(model.endpoint, {
       token: loginState.token || '',
       user_id: loginState.user.id,
-      prompt: JSON.stringify(context.filter(c => c.content && !c.interrupted).map(c => ({
+      prompt: JSON.stringify(
-        role: c.role,
+        context
-        content: c.content
+          .filter((c) => c.content && !c.interrupted)
-      })))
+          .map((c) => ({
-    }
+            role: c.role,
-  ).then(res => {
+            content: c.content,
-    if (res.ret !== 200) return reject(res.msg || 'unknown error')
+          }))
-    if (res.data.request_msg) return resolve(res.data.request_msg)
+      ),
-    if (res.data.request_fail) return reject(res.data.request_fail?.header?.message || 'unknown error')
+    })
-    return reject('unknown error')
+      .then((res) => {
-  }).catch(err => {
+        if (res.ret !== 200) return reject(res.msg || 'unknown error')
-    reject(err)
+        if (res.data.request_msg) return resolve(res.data.request_msg)
+        if (res.data.request_fail)
+          return reject(
+            res.data.request_fail?.header?.message || 'unknown error'
+          )
+        return reject('unknown error')
+      })
+      .catch((err) => {
+        reject(err)
+      })
   })
-})

composables/useLoginState.ts

@@ -1,64 +1,79 @@
-import {useFetchWrapped} from "~/composables/useFetchWrapped";
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
 
-export const useLoginState = defineStore('loginState', () => {
+export const useLoginState = defineStore(
+  'loginState',
+  () => {
     const is_logged_in = ref(false)
     const token = ref<string | null>(null)
     const user = ref<UserSchema>({} as UserSchema)
 
     const checkSession = () => {
-        return new Promise<boolean>(resolve => {
+      return new Promise<boolean>((resolve) => {
-            if (!token.value) return resolve(false)
+        if (!token.value) return resolve(false)
-            useFetchWrapped<AuthedRequest, BaseResponse<resp.user.CheckSession>>('App.User_User.CheckSession', {
+        useFetchWrapped<AuthedRequest, BaseResponse<resp.user.CheckSession>>(
-                token: token.value,
+          'App.User_User.CheckSession',
-                user_id: user.value.id
+          {
-            }).then(res => {
+            token: token.value,
-                if (res.ret !== 200) {
+            user_id: user.value.id,
-                    resolve(false)
+          }
-                    return
+        )
-                }
+          .then((res) => {
-                resolve(res.data.is_login)
+            if (res.ret !== 200) {
-                // update global state
+              resolve(false)
-                is_logged_in.value = res.data.is_login
+              return
-            }).catch(err => resolve(false))
+            }
-        })
+            resolve(res.data.is_login)
+            // update global state
+            is_logged_in.value = res.data.is_login
+          })
+          .catch((err) => resolve(false))
+      })
     }
 
     const updateProfile = () => {
-        return new Promise<UserSchema>((resolve, reject) => {
+      return new Promise<UserSchema>((resolve, reject) => {
-            if (!token.value) return reject('token is empty')
+        if (!token.value) return reject('token is empty')
-            useFetchWrapped<AuthedRequest, BaseResponse<resp.user.Profile>>('App.User_User.Profile', {
+        useFetchWrapped<AuthedRequest, BaseResponse<resp.user.Profile>>(
-                token: token.value,
+          'App.User_User.Profile',
-                user_id: user.value.id
+          {
-            }).then(res => {
+            token: token.value,
-                if (res.ret !== 200) {
+            user_id: user.value.id,
-                    reject(res.msg || '未知错误')
+          }
-                    return
+        )
-                }
+          .then((res) => {
-                user.value = res.data.profile
+            if (res.ret !== 200) {
-                resolve(res.data.profile)
+              reject(res.msg || '未知错误')
-            }).catch(err => reject(err || '未知错误'))
+              return
-        })
+            }
+            user.value = res.data.profile
+            resolve(res.data.profile)
+          })
+          .catch((err) => reject(err || '未知错误'))
+      })
     }
 
-    const logout = () => new Promise<void>(resolve => {
+    const logout = () =>
+      new Promise<void>((resolve) => {
         token.value = null
         user.value = {} as UserSchema
         is_logged_in.value = false
         resolve()
-    })
+      })
 
     return {
-        is_logged_in,
+      is_logged_in,
-        token,
+      token,
-        user,
+      user,
-        checkSession,
+      checkSession,
-        updateProfile,
+      updateProfile,
-        logout
+      logout,
     }
-}, {
+  },
+  {
     persist: {
-        key: 'xsh_assistant_persisted_state',
+      key: 'xsh_assistant_persisted_state',
-        storage: persistedState.localStorage,
+      storage: persistedState.localStorage,
-        paths: ['is_logged_in', 'token', 'user']
+      paths: ['is_logged_in', 'token', 'user'],
-    }
+    },
-})
+  }
+)

composables/useTourState.ts

@@ -1,32 +1,39 @@
-export const useTourState = defineStore('tour_state', () => {
+export const useTourState = defineStore(
-  const tourState = ref<{ [key: string]: boolean }>({})
+  'tour_state',
+  () => {
+    const tourState = ref<{ [key: string]: boolean }>({})
 
-  const isTourDone = (tourId: string) => tourState.value[tourId] || false
+    const isTourDone = (tourId: string) => tourState.value[tourId] || false
-  const setTourDone = (tourId: string) => {
+    const setTourDone = (tourId: string) => {
-    tourState.value = {
+      tourState.value = {
-      ...tourState.value,
+        ...tourState.value,
-      [tourId]: true,
+        [tourId]: true,
+      }
+    }
+    const autoDriveTour = (
+      tourId: string,
+      driver: ReturnType<typeof useDriver>
+    ) => {
+      if (isTourDone(tourId)) return
+      driver.setConfig({
+        ...driver.getConfig(),
+        onDestroyed: () => setTourDone(tourId),
+      })
+      driver.drive()
     }
-  }
-  const autoDriveTour = (tourId: string, driver: ReturnType<typeof useDriver>) => {
-    if (isTourDone(tourId)) return
-    driver.setConfig({
-      ...driver.getConfig(),
-      onDestroyed: () => setTourDone(tourId),
-    })
-    driver.drive()
-  }
 
-  return {
+    return {
-    tourState,
+      tourState,
-    isTourDone,
+      isTourDone,
-    setTourDone,
+      setTourDone,
-    autoDriveTour,
+      autoDriveTour,
-  }
+    }
-}, {
-  persist: {
-    key: 'xsh_assistant_tour_state',
-    storage: persistedState.localStorage,
-    paths: ['tourState'],
   },
-})
+  {
+    persist: {
+      key: 'xsh_assistant_tour_state',
+      storage: persistedState.localStorage,
+      paths: ['tourState'],
+    },
+  }
+)

composables/useVideoBackgroundCompositing.ts

@@ -90,9 +90,8 @@ export const useVideoBackgroundCompositing = async (
     const backgroundData = await fetchFile(backgroundImage)
 
     progressCallback?.({ progress: 15, phase: 'analyzing' })
-    const { width: bgWidth, height: bgHeight } = await getImageDimensions(
+    const { width: bgWidth, height: bgHeight } =
-      backgroundData
+      await getImageDimensions(backgroundData)
-    )
     console.log(
       `[Compositing] Background image dimensions: ${bgWidth}x${bgHeight}`
     )

composables/useVideoSubtitleEmbedding.ts

@@ -3,28 +3,28 @@ import {
   EmbedSubtitlesClip,
   MP4Clip,
   OffscreenSprite,
-} from "@webav/av-cliper";
+} from '@webav/av-cliper'
 
 export interface SubtitleEmbeddingOptions {
-  color?: string;
+  color?: string
-  textBgColor?: string | null;
+  textBgColor?: string | null
-  type?: "srt";
+  type?: 'srt'
-  fontFamily?: string;
+  fontFamily?: string
-  fontSize?: number;
+  fontSize?: number
-  letterSpacing?: string | null;
+  letterSpacing?: string | null
-  bottomOffset?: number;
+  bottomOffset?: number
-  strokeStyle?: string;
+  strokeStyle?: string
-  lineWidth?: number | null;
+  lineWidth?: number | null
-  lineCap?: CanvasLineCap | null;
+  lineCap?: CanvasLineCap | null
-  lineJoin?: CanvasLineJoin | null;
+  lineJoin?: CanvasLineJoin | null
   textShadow?: {
-    offsetX: number;
+    offsetX: number
-    offsetY: number;
+    offsetY: number
-    blur: number;
+    blur: number
-    color: string;
+    color: string
-  };
+  }
-  videoWidth?: number;
+  videoWidth?: number
-  videoHeight?: number;
+  videoHeight?: number
 }
 
 export const useVideoSubtitleEmbedding = async (
@@ -36,7 +36,7 @@ export const useVideoSubtitleEmbedding = async (
     options = {
       videoWidth: 1920,
       videoHeight: 1080,
-    };
+    }
   }
 
   console.log(`video clip: ${videoUrl}`)
@@ -44,10 +44,10 @@ export const useVideoSubtitleEmbedding = async (
   const videoClip = new MP4Clip((await fetch(videoUrl)).body!)
   const videoSprite = new OffscreenSprite(videoClip)
   videoSprite.time = { duration: videoClip.meta.duration, offset: 0 }
-  await videoSprite.ready;
+  await videoSprite.ready
 
   const srtSprite = new OffscreenSprite(
-    new EmbedSubtitlesClip(await(await fetch(srtUrl)).text(), {
+    new EmbedSubtitlesClip(await (await fetch(srtUrl)).text(), {
       videoWidth: 1920,
       videoHeight: 1080,
       fontSize: 36,
@@ -62,20 +62,20 @@ export const useVideoSubtitleEmbedding = async (
       ...options,
     })
   )
-  await srtSprite.ready;
+  await srtSprite.ready
   srtSprite.time = { duration: videoClip.meta.duration, offset: 0 }
 
   const combinator = new Combinator({
     width: 1920,
     height: 1080,
-  });
+  })
 
-  await combinator.addSprite(videoSprite);
+  await combinator.addSprite(videoSprite)
-  await combinator.addSprite(srtSprite);
+  await combinator.addSprite(srtSprite)
 
   const srcBlob = URL.createObjectURL(
     await new Response(combinator.output()).blob()
-  );
+  )
 
-  return srcBlob;
+  return srcBlob
-};
+}

layouts/default.vue

@@ -143,12 +143,12 @@ onMounted(async () => {
         </span>
         <!-- <span class="text-xs text-neutral-600 dark:text-neutral-300">眩生花科技</span> -->
       </h1>
-      <div class="hidden md:block">
+      <!-- <div class="hidden md:block">
         <UHorizontalNavigation
           :links="links"
           class="select-none"
         />
-      </div>
+      </div> -->
       <div class="flex flex-row items-center gap-4">
         <ClientOnly>
           <UButton

package.json

@@ -8,6 +8,8 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
     "postinstall": "nuxt prepare"
   },
   "packageManager": "pnpm@10.22.0",
@@ -44,11 +46,15 @@
     "@pinia/nuxt": "^0.5.2",
     "@tailwindcss/typography": "^0.5.13",
     "@types/markdown-it": "^13.0.9",
+    "@types/node": "^25.2.2",
     "@vite-pwa/nuxt": "^0.5.0",
     "@vueuse/core": "^10.11.1",
     "@vueuse/nuxt": "^10.11.1",
     "dayjs-nuxt": "^2.1.9",
-    "sass": "^1.77.8"
+    "oxfmt": "^0.28.0",
+    "oxlint": "^1.43.0",
+    "sass": "^1.77.8",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "dayjs": "^1.11.12",

pages/aigc/chat/index.vue

@@ -36,7 +36,9 @@ 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 currentAssistant = computed<Assistant | null>(
+  () => getSessionCopyById(currentSessionId.value || '')?.assistant || null
+)
 const modals = reactive({
   modelSelect: false,
   assistantSelect: false,
@@ -47,30 +49,47 @@ const modals = reactive({
  * 获取指定 ID 的会话数据
  * @param chatSessionId
  */
-const getSessionCopyById = (chatSessionId: ChatSessionId): ChatSession | undefined => chatSessions.value.find(s => s.id === 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
+    if (chatSessionId) {
+      // 切换到指定 ID
       // 保存当前输入并清空输入框
-      setChatSessions(chatSessions.value.map(s => s.id === currentSessionId.value ? {
+      setChatSessions(
-        ...s,
+        chatSessions.value.map((s) =>
-        last_input: user_input.value,
+          s.id === currentSessionId.value
-      } : s))
+            ? {
+                ...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 ? {
+      setChatSessions(
-        ...s,
+        chatSessions.value.map((s) =>
-        last_input: '',
+          s.id === chatSessionId
-      } : s))
+            ? {
-    } else { // 切换到第一个会话
+                ...s,
+                last_input: '',
+              }
+            : s
+        )
+      )
+    } else {
+      // 切换到第一个会话
       currentSessionId.value = chatSessions.value[0].id
     }
   } else {
@@ -91,23 +110,22 @@ const createSession = (assistant: Assistant | null) => {
   // 生成一个新的会话 ID
   const sessionId = uuidv4()
   // 新会话数据
-  const newChat = !!assistant ? {
+  const newChat = !!assistant
-    id: sessionId,
+    ? {
-    subject: '新对话',
+        id: sessionId,
-    messages: [],
+        subject: '新对话',
-    create_at: dayjs().unix(),
+        messages: [],
-    assistant,
+        create_at: dayjs().unix(),
-  } : {
+        assistant,
-    id: sessionId,
+      }
-    subject: '新对话',
+    : {
-    messages: [],
+        id: sessionId,
-    create_at: dayjs().unix(),
+        subject: '新对话',
-  }
+        messages: [],
+        create_at: dayjs().unix(),
+      }
   // 插入新会话数据
-  setChatSessions([
+  setChatSessions([newChat, ...chatSessions.value])
-    newChat,
-    ...chatSessions.value,
-  ])
   // 切换到新的会话
   selectCurrentSessionId(sessionId)
   // 关闭新建会话屏幕
@@ -123,7 +141,7 @@ const createSession = (assistant: Assistant | null) => {
       insetMessage({
         id: uuidv4(),
         role: 'user',
-        content: `${ currentAssistant.value?.target }，${ currentAssistant.value?.demand }`,
+        content: `${currentAssistant.value?.target}，${currentAssistant.value?.demand}`,
         preset: true,
       })
       insetMessage({
@@ -196,13 +214,16 @@ const handleClickSend = (event: any) => {
   })
   useLLM(trimmedMessages, {
     modelTag: currentModel.value,
-  }).then(reply => {
-    modifyMessageContent(assistantReplyId, reply)
-  }).catch(err => {
-    modifyMessageContent(assistantReplyId, err, true)
-  }).finally(() => {
-    responding.value = false
   })
+    .then((reply) => {
+      modifyMessageContent(assistantReplyId, reply)
+    })
+    .catch((err) => {
+      modifyMessageContent(assistantReplyId, err, true)
+    })
+    .finally(() => {
+      responding.value = false
+    })
 }
 
 const scrollToMessageListBottom = () => {
@@ -215,34 +236,48 @@ const scrollToMessageListBottom = () => {
 }
 
 const insetMessage = (message: ChatMessage): ChatMessageId => {
-  setChatSessions(chatSessions.value.map(s => s.id === currentSessionId.value ? {
+  setChatSessions(
-    ...s,
+    chatSessions.value.map((s) =>
-    messages: [
+      s.id === currentSessionId.value
-      ...s.messages,
+        ? {
-      message,
+            ...s,
-    ],
+            messages: [...s.messages, message],
-  } : s))
+          }
+        : s
+    )
+  )
   scrollToMessageListBottom()
   return message.id
 }
 
-const getMessages = () => getSessionCopyById(currentSessionId.value!)?.messages || []
+const getMessages = () =>
+  getSessionCopyById(currentSessionId.value!)?.messages || []
 
 const modifyMessageContent = (
-    messageId: ChatMessageId,
+  messageId: ChatMessageId,
-    content: string,
+  content: string,
-    interrupted: boolean = false,
+  interrupted: boolean = false,
-    updateTime: boolean = true,
+  updateTime: boolean = true
 ) => {
-  setChatSessions(chatSessions.value.map(s => s.id === currentSessionId.value ? {
+  setChatSessions(
-    ...s,
+    chatSessions.value.map((s) =>
-    messages: s.messages.map(m => m.id === messageId ? {
+      s.id === currentSessionId.value
-      ...m,
+        ? {
-      content,
+            ...s,
-      interrupted,
+            messages: s.messages.map((m) =>
-      create_at: updateTime ? dayjs().unix() : m.create_at,
+              m.id === messageId
-    } : m),
+                ? {
-  } : s))
+                    ...m,
+                    content,
+                    interrupted,
+                    create_at: updateTime ? dayjs().unix() : m.create_at,
+                  }
+                : m
+            ),
+          }
+        : s
+    )
+  )
   scrollToMessageListBottom()
 }
 
@@ -255,9 +290,8 @@ onMounted(() => {
 <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]
+      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"
-               shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
+      :class="{ 'translate-x-0': showSidebar }"
-        :class="{'translate-x-0': showSidebar}"
     >
       <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
         <!-- list -->
@@ -266,20 +300,31 @@ onMounted(() => {
           <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">
+                <div
-                  <Icon name="i-tabler-messages" class="text-2xl"/>
+                  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"
+                v-for="session in chatSessions"
-                  :chat-session="session" :key="session.id"
+                :chat-session="session"
-                  :active="session.id === currentSessionId"
+                :key="session.id"
-                  @click="selectCurrentSessionId(session.id)"
+                :active="session.id === currentSessionId"
-                  @remove="() => {
+                @click="selectCurrentSessionId(session.id)"
-                  chatSessions.splice(chatSessions.findIndex(s => s.id === session.id), 1)
+                @remove="
-                  session.id === currentSessionId && selectCurrentSessionId()
+                  () => {
-                }"
+                    chatSessions.splice(
+                      chatSessions.findIndex((s) => s.id === session.id),
+                      1
+                    )
+                    session.id === currentSessionId && selectCurrentSessionId()
+                  }
+                "
               />
             </TransitionGroup>
           </ClientOnly>
@@ -289,10 +334,10 @@ onMounted(() => {
         <div></div>
         <div>
           <UButton
-              color="white"
+            color="white"
-              variant="solid"
+            variant="solid"
-              icon="i-tabler-message-circle-plus"
+            icon="i-tabler-message-circle-plus"
-              @click="handleClickCreateSession"
+            @click="handleClickCreateSession"
           >
             新建聊天
           </UButton>
@@ -300,66 +345,101 @@ onMounted(() => {
       </div>
     </div>
     <div class="h-[calc(100vh-4rem)] flex-1 bg-white dark:bg-neutral-900">
-
+      <Transition
-      <Transition name="message" mode="out-in">
+        name="message"
-        <div v-if="!loginState.is_logged_in" class="w-full h-full">
+        mode="out-in"
-          <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"/>
+        <div
-            <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
+          v-if="!loginState.is_logged_in"
-            <UButton class="mt-2 font-bold" color="black" variant="solid" size="xs"
+          class="w-full h-full"
-                     @click="modal.open(ModalAuthentication)">
+        >
+          <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"
+          v-else-if="
-            :non-back="!getSessionCopyById(currentSessionId!)"
+            modals.newSessionScreen ||
-            @select="createSession"
+            getSessionCopyById(currentSessionId!) === undefined
-            @cancel="modals.newSessionScreen = false"
+          "
+          :non-back="!getSessionCopyById(currentSessionId!)"
+          @select="createSession"
+          @cancel="modals.newSessionScreen = false"
         />
         <div
-            v-else
+          v-else
-            class="w-full h-full flex flex-col"
+          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">
+            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"
+              class="md:hidden"
-                color="black"
+              color="black"
-                variant="ghost"
+              variant="ghost"
-                icon="i-tabler-menu-2"
+              icon="i-tabler-menu-2"
-                @click="showSidebar = !showSidebar"
+              @click="showSidebar = !showSidebar"
-            >
+            ></UButton>
-            </UButton>
+            <h1 class="font-medium">
-            <h1 class="font-medium">{{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}</h1>
+              {{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}
+            </h1>
           </div>
-          <div ref="messagesWrapperRef" class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
+          <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() || []"
+                  v-for="message in getMessages() || []"
-                    :message="message"
+                  :message="message"
-                    :key="message.id"
+                  :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">
+              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">
+              <div
-                  <Icon name="tabler:box"/>
+                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() || '模型' }}
+                    {{
+                      llmModels
+                        .find((m) => m.tag === currentModel)
+                        ?.name.toUpperCase() || '模型'
+                    }}
                   </span>
                 </button>
                 <button
-                    v-if="currentAssistant?.tpl_name"
+                  v-if="currentAssistant?.tpl_name"
-                    class="chat-option-btn"
+                  class="chat-option-btn"
                 >
-                  <Icon name="tabler:robot-face"/>
+                  <Icon name="tabler:robot-face" />
                   <span class="text-xs">
                     {{ currentAssistant.tpl_name }}
                   </span>
@@ -367,22 +447,22 @@ onMounted(() => {
               </div>
               <div class="relative">
                 <UTextarea
-                    v-model="user_input"
+                  v-model="user_input"
-                    size="lg"
+                  size="lg"
-                    autoresize
+                  autoresize
-                    :rows="5"
+                  :rows="5"
-                    :maxrows="12"
+                  :maxrows="12"
-                    class="font-sans"
+                  class="font-sans"
-                    placeholder="Enter 发送, Ctrl + Enter 换行"
+                  placeholder="Enter 发送, Ctrl + Enter 换行"
-                    @keydown.ctrl.enter="user_input += '\n'"
+                  @keydown.ctrl.enter="user_input += '\n'"
-                    @keydown.enter.prevent="handleClickSend"
+                  @keydown.enter.prevent="handleClickSend"
                 />
                 <UButton
-                    color="black"
+                  color="black"
-                    variant="solid"
+                  variant="solid"
-                    icon="i-tabler-send-2"
+                  icon="i-tabler-send-2"
-                    class="absolute bottom-2.5 right-3"
+                  class="absolute bottom-2.5 right-3"
-                    @click.stop="handleClickSend"
+                  @click.stop="handleClickSend"
                 >
                   发送
                 </UButton>
@@ -391,42 +471,53 @@ onMounted(() => {
           </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
+            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"
+            v-for="(llm, index) in llmModels"
-              :key="index"
+            :key="index"
-              @click="currentModel = llm.tag"
+            @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' : 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'"
+            :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"/>
+            <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 opacity-90">{{ llm.name || 'unknown' }}</h1>
+              <h1 class="font-bold drop-shadow 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">
+          <div
-            <UButton>
+            class="flex justify-end items-center"
-              确定
+            @click="modals.modelSelect = false"
-            </UButton>
+          >
+            <UButton>确定</UButton>
           </div>
         </template>
       </UCard>
     </UModal>
-
   </div>
 </template>
 

pages/aigc/draw/index.vue

@@ -28,7 +28,11 @@ const showSidebar = ref(false)
 
 const generating = ref(false)
 
-const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
+const handle_stick_mousedown = (
+  e: MouseEvent,
+  min: number = 240,
+  max: number = 400
+) => {
   const handler = leftHandler.value
   if (handler) {
     const startX = e.clientX
@@ -38,16 +42,24 @@ const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number =
       if (newWidth < min || newWidth > max) {
         newWidth = Math.min(Math.max(newWidth, min), max)
       }
-      handler.parentElement!.style.width = `${ newWidth }px`
+      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]')
+      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]')
+    leftHandler.value?.lastElementChild?.classList.add(
+      'bg-indigo-300',
+      'dark:bg-indigo-700',
+      'w-[3px]'
+    )
     window.addEventListener('mousemove', handle_mousemove)
     window.addEventListener('mouseup', handle_mouseup)
   }
@@ -216,16 +228,19 @@ const defaultFormState = reactive({
   prompt: '',
   negative_prompt: '',
   resolution: '1024:768',
-  styles: defaultStyles.find(item => item.value === 401),
+  styles: defaultStyles.find((item) => item.value === 401),
   file: null,
 })
-watch(() => defaultFormState.file, (newVal) => {
+watch(
-  if (newVal) {
+  () => defaultFormState.file,
-    defaultFormState.styles = img2imgStyles[0]
+  (newVal) => {
-  } else {
+    if (newVal) {
-    defaultFormState.styles = defaultStyles.find(item => item.value === 401)
+      defaultFormState.styles = img2imgStyles[0]
+    } else {
+      defaultFormState.styles = defaultStyles.find((item) => item.value === 401)
+    }
   }
-})
+)
 
 const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
   if (!loginState.is_logged_in) {
@@ -253,147 +268,271 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
   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,
+    event.data.file
-    user_id: loginState.user.id,
+      ? 'App.Assistant_HunYuan.TenImgToImg'
-    device_id: 'web',
+      : 'App.Assistant_HunYuan.TenTextToImg',
-    ...event.data,
+    {
-    styles: styleItem.value,
+      token: loginState.token as string,
-  }).then(res => {
+      user_id: loginState.user.id,
-    if (res.ret !== 200) {
+      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: res.msg || '未知错误',
+        description: err.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 => {
+    .finally(() => {
-    toast.add({
+      generating.value = false
-      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"
+    <div
-         :class="{'translate-x-0': showSidebar}"
+      ref="leftSection"
-         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">
+      :class="{ 'translate-x-0': showSidebar }"
-      <div ref="leftHandler"
+      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"
-           class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
+      style="width: 320px"
-           @dblclick="leftSection?.style.setProperty('width', '320px')"
+    >
-           @mousedown.prevent="handle_stick_mousedown">
+      <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-[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"></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"
+        ></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">
+        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>
+      >
+        <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">
+        <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="提示词">
+            <OptionBlock
+              comment="Prompts"
+              icon="i-tabler-article"
+              label="提示词"
+            >
               <UFormGroup name="prompt">
-                <UTextarea v-model="defaultFormState.prompt" :rows="2" autoresize
+                <UTextarea
-                           placeholder="请输入提示词，每个提示词之间用英文逗号隔开" resize/>
+                  v-model="defaultFormState.prompt"
+                  :rows="2"
+                  autoresize
+                  placeholder="请输入提示词，每个提示词之间用英文逗号隔开"
+                  resize
+                />
               </UFormGroup>
             </OptionBlock>
-            <OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
+            <OptionBlock
+              comment="Negative Prompts"
+              icon="i-tabler-article-off"
+              label="负面提示词"
+            >
               <UFormGroup name="negative_prompt">
-                <UTextarea v-model="defaultFormState.negative_prompt" :rows="2" autoresize
+                <UTextarea
-                           placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
+                  v-model="defaultFormState.negative_prompt"
-                           resize/>
+                  :rows="2"
+                  autoresize
+                  placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
+                  resize
+                />
               </UFormGroup>
             </OptionBlock>
-            <OptionBlock icon="i-tabler-library-photo" label="参考图片">
+            <OptionBlock
+              icon="i-tabler-library-photo"
+              label="参考图片"
+            >
               <UFormGroup name="input_image">
                 <ReferenceFigureSelector
                   :value="defaultFormState.file"
                   text="选择参考图片"
-                  text-on-select="已选择参考图" @update="file => {defaultFormState.file = file}"/>
+                  text-on-select="已选择参考图"
+                  @update="
+                    (file) => {
+                      defaultFormState.file = file
+                    }
+                  "
+                />
               </UFormGroup>
             </OptionBlock>
-            <OptionBlock icon="i-tabler-photo-hexagon" label="图片风格">
+            <OptionBlock
+              icon="i-tabler-photo-hexagon"
+              label="图片风格"
+            >
               <UFormGroup name="styles">
-                <USelectMenu v-model="defaultFormState.styles"
+                <USelectMenu
-                             :options="defaultFormState.file ? img2imgStyles : defaultStyles"></USelectMenu>
+                  v-model="defaultFormState.styles"
+                  :options="
+                    defaultFormState.file ? img2imgStyles : defaultStyles
+                  "
+                ></USelectMenu>
               </UFormGroup>
             </OptionBlock>
-            <OptionBlock icon="i-tabler-article-off" label="图片比例">
+            <OptionBlock
+              icon="i-tabler-article-off"
+              label="图片比例"
+            >
               <UFormGroup name="resolution">
-                <RatioSelector v-model="defaultFormState.resolution" :ratios="defaultRatios"/>
+                <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
+          <div
-                      bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400
+            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"
-                      dark:border-neutral-700">
+          >
-            <UButton :loading="generating" block class="font-bold" color="indigo" size="lg" type="submit">
+            <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>
+              <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
-        <div v-if="!loginState.is_logged_in"
+        class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto"
-             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"/>
+        <div
-          <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
+          v-if="!loginState.is_logged_in"
-          <UButton class="mt-2 font-bold" color="black" size="xs" variant="solid"
+          class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
-                   @click="modal.open(ModalAuthentication)">
+        >
+          <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"
+        <div
-             class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
+          v-else-if="history.text2img.length === 0"
-          <Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="i-tabler-photo-hexagon"/>
+          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"
+        <ResultBlock
-                     :meta="result.meta" :prompt="result.prompt"
+          v-for="(result, k) in history.text2img"
-                     @use-reference="file => {defaultFormState.file = file}">
+          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>
+              <UButton
-              <template #panel="{close}">
+                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
+                      class="font-bold"
+                      color="gray"
+                      size="xs"
+                      @click="close"
+                    >
                       取消
                     </UButton>
-                    <UButton class="font-bold" color="red" size="xs"
+                    <UButton
-                             @click="() => {
+                      class="font-bold"
-                               history.text2img.splice(k, 1)
+                      color="red"
-                               del(result.fid)
+                      size="xs"
-                               close()
+                      @click="
-                             }">
+                        () => {
+                          history.text2img.splice(k, 1)
+                          del(result.fid)
+                          close()
+                        }
+                      "
+                    >
                       仍然删除
                     </UButton>
                   </div>
@@ -402,15 +541,17 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
             </UPopover>
           </template>
         </ResultBlock>
-        <div class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600">
+        <div
-          <UIcon name="i-tabler-info-triangle"/>
+          class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600"
-          <p class="text-xs font-bold">所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地</p>
+        >
+          <UIcon name="i-tabler-info-triangle" />
+          <p class="text-xs font-bold">
+            所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地
+          </p>
         </div>
       </div>
     </ClientOnly>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

pages/aigc/navigation.vue

@@ -195,7 +195,9 @@ const open = (url?: string | URL, target?: string, features?: string) => {
 </script>
 
 <template>
-  <div class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0 overflow-y-scroll">
+  <div
+    class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0 overflow-y-scroll"
+  >
     <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"

pages/generation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NavItem from '~/components/aigc/NavItem.vue'
+import NavItem from '~/components/aigc/nav/NavItem.vue'
 
 useSeoMeta({
   title: '智能生成',
@@ -82,10 +82,16 @@ onMounted(() => {
     <LoginNeededContent
       content-class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900"
     >
-      <Transition name="subpage" mode="out-in">
+      <Transition
+        name="subpage"
+        mode="out-in"
+      >
         <div>
           <Suspense>
-            <NuxtPage :page-key="route.fullPath" keepalive />
+            <NuxtPage
+              :page-key="route.fullPath"
+              keepalive
+            />
           </Suspense>
         </div>
       </Transition>

pages/generation/admin/digital-human-train.vue

@@ -147,7 +147,9 @@ const handleAvatarUpload = (files: FileList) => {
 }
 
 // 提交录入表单
-const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>) => {
+const onProcessSubmit = async (
+  event: FormSubmitEvent<typeof processFormState>
+) => {
   if (!currentTrainItem.value) return
 
   if (!avatarFile.value) {
@@ -187,7 +189,10 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
       avatar: avatarUrl,
     })
 
-    if (createSystemResult.ret !== 200 || !createSystemResult.data.digital_human_id) {
+    if (
+      createSystemResult.ret !== 200 ||
+      !createSystemResult.data.digital_human_id
+    ) {
       throw new Error(createSystemResult.msg || '创建系统数字人失败')
     }
 
@@ -216,7 +221,9 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
     toast.add({
       title: '录入成功',
       description: `数字人"${event.data.name}"已成功录入并分配给用户 ${currentTrainItem.value.user_id}${
-        createUserResult.data.failed ? `，失败 ${createUserResult.data.failed} 个` : ''
+        createUserResult.data.failed
+          ? `，失败 ${createUserResult.data.failed} 个`
+          : ''
       }`,
       color: 'green',
       icon: 'i-tabler-check',
@@ -238,7 +245,8 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
     await refreshTrainList()
   } catch (error) {
     console.error('录入数字人失败:', error)
-    const errorMessage = error instanceof Error ? error.message : '录入失败，请重试'
+    const errorMessage =
+      error instanceof Error ? error.message : '录入失败，请重试'
     toast.add({
       title: '录入失败',
       description: errorMessage,
@@ -275,7 +283,8 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
     }
   } catch (error) {
     console.error('删除定制记录失败:', error)
-    const errorMessage = error instanceof Error ? error.message : '删除失败，请重试'
+    const errorMessage =
+      error instanceof Error ? error.message : '删除失败，请重试'
     toast.add({
       title: '删除失败',
       description: errorMessage,
@@ -294,14 +303,17 @@ const formatTime = (timestamp: number) => {
 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'
+  videoModal.className =
+    'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'
 
   const videoContainer = document.createElement('div')
-  videoContainer.className = 'bg-white dark:bg-gray-800 rounded-lg p-4 max-w-4xl max-h-[80vh] overflow-auto'
+  videoContainer.className =
+    'bg-white dark:bg-gray-800 rounded-lg p-4 max-w-4xl max-h-[80vh] overflow-auto'
 
   const titleElement = document.createElement('h3')
   titleElement.textContent = title
-  titleElement.className = 'text-lg font-semibold mb-4 text-gray-900 dark:text-white'
+  titleElement.className =
+    'text-lg font-semibold mb-4 text-gray-900 dark:text-white'
 
   const video = document.createElement('video')
   video.src = videoUrl
@@ -310,7 +322,8 @@ 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'
+  closeButton.className =
+    'mt-4 px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600'
   closeButton.onclick = () => {
     document.body.removeChild(videoModal)
   }
@@ -472,7 +485,8 @@ const previewVideo = (videoUrl: string, title: string) => {
           <div>
             <h3 class="text-lg font-semibold">录入数字人</h3>
             <p class="text-sm text-gray-500 mt-1">
-              为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户 {{ currentTrainItem?.user_id }}
+              为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
+              {{ currentTrainItem?.user_id }}
             </p>
           </div>
         </template>

pages/generation/admin/index.vue

@@ -81,23 +81,34 @@ const navigateToPage = (path: string) => {
                   class="w-8 h-8"
                   :class="{
                     'text-blue-600 dark:text-blue-400': page.color === 'blue',
-                    'text-amber-600 dark:text-amber-400': page.color === 'amber',
+                    'text-amber-600 dark:text-amber-400':
-                    'text-green-600 dark:text-green-400': page.color === 'green',
+                      page.color === 'amber',
+                    'text-green-600 dark:text-green-400':
+                      page.color === 'green',
                   }"
                 />
               </div>
 
-              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+              <h3
+                class="text-lg font-semibold text-gray-900 dark:text-white mb-2"
+              >
                 {{ page.title }}
               </h3>
 
-              <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+              <p
+                class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed"
+              >
                 {{ 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">
+              <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"
+              >
                 <span>进入管理</span>
-                <UIcon name="i-heroicons-arrow-right" class="ml-1 w-4 h-4" />
+                <UIcon
+                  name="i-heroicons-arrow-right"
+                  class="ml-1 w-4 h-4"
+                />
               </div>
             </div>
           </UCard>

pages/generation/admin/materials.vue

@@ -147,7 +147,13 @@ const isUploadingEndingVideo = ref(false)
 const isUploadingEndingCover = ref(false)
 
 // 处理片头片尾请求
-const handleProcessTitles = (item: TitlesTemplate & { user_id?: number; to_user_id?: number; remark?: string }) => {
+const handleProcessTitles = (
+  item: TitlesTemplate & {
+    user_id?: number
+    to_user_id?: number
+    remark?: string
+  }
+) => {
   currentTitlesItem.value = item
 
   // 预填充表单数据
@@ -375,7 +381,9 @@ const handleEndingCoverUpload = async (files: FileList) => {
 }
 
 // 提交处理表单
-const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>) => {
+const onProcessSubmit = async (
+  event: FormSubmitEvent<typeof processFormState>
+) => {
   if (!currentTitlesItem.value) return
 
   if (isProcessing.value) return
@@ -399,7 +407,10 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
     >('App.User_UserTitles.updateStatus', {
       token: loginState.token!,
       user_id: loginState.user.id,
-      to_user_id: currentTitlesItem.value.to_user_id || currentTitlesItem.value.user_id || 0,
+      to_user_id:
+        currentTitlesItem.value.to_user_id ||
+        currentTitlesItem.value.user_id ||
+        0,
       user_title_id: currentTitlesItem.value.id,
       process_status: 1, // 标记为已完成
       opening_url: event.data.opening_url,
@@ -439,7 +450,8 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
     }
   } catch (error) {
     console.error('处理片头片尾失败:', error)
-    const errorMessage = error instanceof Error ? error.message : '处理失败，请重试'
+    const errorMessage =
+      error instanceof Error ? error.message : '处理失败，请重试'
     toast.add({
       title: '处理失败',
       description: errorMessage,
@@ -452,7 +464,9 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
 }
 
 // 删除请求
-const handleDeleteTitles = async (item: TitlesTemplate & { user_id?: number; to_user_id?: number }) => {
+const handleDeleteTitles = async (
+  item: TitlesTemplate & { user_id?: number; to_user_id?: number }
+) => {
   try {
     const result = await useFetchWrapped<
       {
@@ -480,7 +494,8 @@ const handleDeleteTitles = async (item: TitlesTemplate & { user_id?: number; to_
     }
   } catch (error) {
     console.error('删除片头片尾请求失败:', error)
-    const errorMessage = error instanceof Error ? error.message : '删除失败，请重试'
+    const errorMessage =
+      error instanceof Error ? error.message : '删除失败，请重试'
     toast.add({
       title: '删除失败',
       description: errorMessage,
@@ -575,12 +590,22 @@ const handleCreateOpeningVideoUpload = async (files: FileList) => {
   if (!file) return
 
   if (!file.type.startsWith('video/')) {
-    toast.add({ title: '文件格式错误', description: '请上传视频文件', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '文件格式错误',
+      description: '请上传视频文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
     return
   }
 
   if (file.size > 100 * 1024 * 1024) {
-    toast.add({ title: '文件过大', description: '视频文件大小不能超过100MB', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '文件过大',
+      description: '视频文件大小不能超过100MB',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
     return
   }
 
@@ -589,10 +614,19 @@ const handleCreateOpeningVideoUpload = async (files: FileList) => {
     createOpeningVideoFile.value = file
     const uploadUrl = await useFileGo(file, 'material')
     createFormState.opening_file = uploadUrl
-    toast.add({ title: '片头视频上传成功', color: 'green', icon: 'i-tabler-check' })
+    toast.add({
+      title: '片头视频上传成功',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
   } catch (error) {
     console.error('片头视频上传失败:', error)
-    toast.add({ title: '上传失败', description: error instanceof Error ? error.message : '请重试', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '上传失败',
+      description: error instanceof Error ? error.message : '请重试',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
   } finally {
     isUploadingCreateOpeningVideo.value = false
   }
@@ -603,12 +637,22 @@ const handleCreateOpeningCoverUpload = async (files: FileList) => {
   if (!file) return
 
   if (!file.type.startsWith('image/')) {
-    toast.add({ title: '文件格式错误', description: '请上传图片文件', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '文件格式错误',
+      description: '请上传图片文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
     return
   }
 
   if (file.size > 10 * 1024 * 1024) {
-    toast.add({ title: '文件过大', description: '图片文件大小不能超过10MB', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '文件过大',
+      description: '图片文件大小不能超过10MB',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
     return
   }
 
@@ -617,10 +661,19 @@ const handleCreateOpeningCoverUpload = async (files: FileList) => {
     createOpeningCoverFile.value = file
     const uploadUrl = await useFileGo(file, 'material')
     createFormState.opening_url = uploadUrl
-    toast.add({ title: '片头封面上传成功', color: 'green', icon: 'i-tabler-check' })
+    toast.add({
+      title: '片头封面上传成功',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
   } catch (error) {
     console.error('片头封面上传失败:', error)
-    toast.add({ title: '上传失败', description: error instanceof Error ? error.message : '请重试', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '上传失败',
+      description: error instanceof Error ? error.message : '请重试',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
   } finally {
     isUploadingCreateOpeningCover.value = false
   }
@@ -631,12 +684,22 @@ const handleCreateEndingVideoUpload = async (files: FileList) => {
   if (!file) return
 
   if (!file.type.startsWith('video/')) {
-    toast.add({ title: '文件格式错误', description: '请上传视频文件', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '文件格式错误',
+      description: '请上传视频文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
     return
   }
 
   if (file.size > 100 * 1024 * 1024) {
-    toast.add({ title: '文件过大', description: '视频文件大小不能超过100MB', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '文件过大',
+      description: '视频文件大小不能超过100MB',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
     return
   }
 
@@ -645,10 +708,19 @@ const handleCreateEndingVideoUpload = async (files: FileList) => {
     createEndingVideoFile.value = file
     const uploadUrl = await useFileGo(file, 'material')
     createFormState.ending_file = uploadUrl
-    toast.add({ title: '片尾视频上传成功', color: 'green', icon: 'i-tabler-check' })
+    toast.add({
+      title: '片尾视频上传成功',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
   } catch (error) {
     console.error('片尾视频上传失败:', error)
-    toast.add({ title: '上传失败', description: error instanceof Error ? error.message : '请重试', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '上传失败',
+      description: error instanceof Error ? error.message : '请重试',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
   } finally {
     isUploadingCreateEndingVideo.value = false
   }
@@ -659,12 +731,22 @@ const handleCreateEndingCoverUpload = async (files: FileList) => {
   if (!file) return
 
   if (!file.type.startsWith('image/')) {
-    toast.add({ title: '文件格式错误', description: '请上传图片文件', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '文件格式错误',
+      description: '请上传图片文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
     return
   }
 
   if (file.size > 10 * 1024 * 1024) {
-    toast.add({ title: '文件过大', description: '图片文件大小不能超过10MB', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '文件过大',
+      description: '图片文件大小不能超过10MB',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
     return
   }
 
@@ -673,17 +755,28 @@ const handleCreateEndingCoverUpload = async (files: FileList) => {
     createEndingCoverFile.value = file
     const uploadUrl = await useFileGo(file, 'material')
     createFormState.ending_url = uploadUrl
-    toast.add({ title: '片尾封面上传成功', color: 'green', icon: 'i-tabler-check' })
+    toast.add({
+      title: '片尾封面上传成功',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
   } catch (error) {
     console.error('片尾封面上传失败:', error)
-    toast.add({ title: '上传失败', description: error instanceof Error ? error.message : '请重试', color: 'red', icon: 'i-tabler-alert-triangle' })
+    toast.add({
+      title: '上传失败',
+      description: error instanceof Error ? error.message : '请重试',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
   } finally {
     isUploadingCreateEndingCover.value = false
   }
 }
 
 // 提交创建表单
-const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) => {
+const onCreateSubmit = async (
+  event: FormSubmitEvent<typeof createFormState>
+) => {
   if (isCreating.value) return
 
   try {
@@ -738,7 +831,8 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
     }
   } catch (error) {
     console.error('创建片头片尾模板失败:', error)
-    const errorMessage = error instanceof Error ? error.message : '创建失败，请重试'
+    const errorMessage =
+      error instanceof Error ? error.message : '创建失败，请重试'
     toast.add({
       title: '创建失败',
       description: errorMessage,
@@ -797,14 +891,24 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
             :variant="statusFilter === 0 ? 'solid' : 'ghost'"
             label="待处理"
             icon="i-tabler-clock"
-            @click="statusFilter = 0; pagination.page = 1"
+            @click="
+              () => {
+                statusFilter = 0
+                pagination.page = 1
+              }
+            "
           />
           <UButton
             :color="statusFilter === 1 ? 'primary' : 'gray'"
             :variant="statusFilter === 1 ? 'solid' : 'ghost'"
             label="已完成"
             icon="i-tabler-check"
-            @click="statusFilter = 1; pagination.page = 1"
+            @click="
+              () => {
+                statusFilter = 1
+                pagination.page = 1
+              }
+            "
           />
         </UButtonGroup>
         <UBadge
@@ -835,16 +939,27 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
           </template>
 
           <template #info-data="{ row }">
-            <div v-if="row.info" class="flex items-center gap-2">
+            <div
+              v-if="row.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 cursor-pointer hover:opacity-80 transition-opacity"
-                @click="previewVideo(row.info.opening_file, `原始模板: ${row.info.title}`)"
+                @click="
+                  previewVideo(
+                    row.info.opening_file,
+                    `原始模板: ${row.info.title}`
+                  )
+                "
               />
               <div class="flex flex-col min-w-0">
-                <span class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate" :title="row.info.title">
+                <span
+                  class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate"
+                  :title="row.info.title"
+                >
                   {{ row.info.title }}
                 </span>
                 <span class="text-2xs text-gray-500 dark:text-gray-400">
@@ -852,13 +967,24 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                 </span>
               </div>
             </div>
-            <span v-else class="text-sm text-gray-400">-</span>
+            <span
+              v-else
+              class="text-sm text-gray-400"
+            >
+              -
+            </span>
           </template>
 
           <template #preview-data="{ row }">
-            <div class="flex items-center gap-3" v-if="row.opening_file || row.ending_file">
+            <div
+              class="flex items-center gap-3"
+              v-if="row.opening_file || row.ending_file"
+            >
               <!-- 片头 -->
-              <div v-if="row.opening_file" class="flex flex-col items-center gap-0.5">
+              <div
+                v-if="row.opening_file"
+                class="flex flex-col items-center gap-0.5"
+              >
                 <img
                   v-if="row.opening_url"
                   :src="row.opening_url"
@@ -871,12 +997,20 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   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"
                   @click="previewVideo(row.opening_file, '制作片头预览')"
                 >
-                  <UIcon name="i-tabler-player-play" class="text-blue-500" />
+                  <UIcon
+                    name="i-tabler-player-play"
+                    class="text-blue-500"
+                  />
                 </div>
-                <span class="text-2xs text-blue-600 dark:text-blue-400">片头</span>
+                <span class="text-2xs text-blue-600 dark:text-blue-400">
+                  片头
+                </span>
               </div>
               <!-- 片尾 -->
-              <div v-if="row.ending_file" class="flex flex-col items-center gap-0.5">
+              <div
+                v-if="row.ending_file"
+                class="flex flex-col items-center gap-0.5"
+              >
                 <img
                   v-if="row.ending_url"
                   :src="row.ending_url"
@@ -889,12 +1023,22 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   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"
                   @click="previewVideo(row.ending_file, '制作片尾预览')"
                 >
-                  <UIcon name="i-tabler-player-play" class="text-green-500" />
+                  <UIcon
+                    name="i-tabler-player-play"
+                    class="text-green-500"
+                  />
                 </div>
-                <span class="text-2xs text-green-600 dark:text-green-400">片尾</span>
+                <span class="text-2xs text-green-600 dark:text-green-400">
+                  片尾
+                </span>
               </div>
             </div>
-            <span v-else class="text-sm text-gray-400">未上传</span>
+            <span
+              v-else
+              class="text-sm text-gray-400"
+            >
+              未上传
+            </span>
           </template>
 
           <template #actions-data="{ row }">
@@ -964,7 +1108,9 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
           <div>
             <h3 class="text-lg font-semibold">处理片头片尾请求</h3>
             <p class="text-sm text-gray-500 mt-1">
-              为用户 {{ currentTitlesItem?.to_user_id || currentTitlesItem?.user_id }} 上传制作好的片头片尾视频
+              为用户
+              {{ currentTitlesItem?.to_user_id || currentTitlesItem?.user_id }}
+              上传制作好的片头片尾视频
             </p>
           </div>
         </template>
@@ -1014,10 +1160,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   />
                   <div class="mt-2">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{ isUploadingOpeningVideo ? '上传中...' : (openingVideoFile ? openingVideoFile.name : '点击或拖拽上传片头视频') }}
+                      {{
+                        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">
+                  <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>
@@ -1048,10 +1203,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   />
                   <div class="mt-2">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{ isUploadingOpeningCover ? '上传中...' : (openingCoverFile ? openingCoverFile.name : '点击或拖拽上传片头封面') }}
+                      {{
+                        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">
+                  <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>
@@ -1084,10 +1248,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   />
                   <div class="mt-2">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{ isUploadingEndingVideo ? '上传中...' : (endingVideoFile ? endingVideoFile.name : '点击或拖拽上传片尾视频') }}
+                      {{
+                        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">
+                  <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>
@@ -1118,10 +1291,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   />
                   <div class="mt-2">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{ isUploadingEndingCover ? '上传中...' : (endingCoverFile ? endingCoverFile.name : '点击或拖拽上传片尾封面') }}
+                      {{
+                        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">
+                  <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>
@@ -1142,7 +1324,13 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
               type="submit"
               color="primary"
               :loading="isProcessing"
-              :disabled="isProcessing || isUploadingOpeningVideo || isUploadingOpeningCover || isUploadingEndingVideo || isUploadingEndingCover"
+              :disabled="
+                isProcessing ||
+                isUploadingOpeningVideo ||
+                isUploadingOpeningCover ||
+                isUploadingEndingVideo ||
+                isUploadingEndingCover
+              "
             >
               {{ isProcessing ? '提交中...' : '提交并分配' }}
             </UButton>
@@ -1255,7 +1443,10 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
             name="title"
             required
           >
-            <UInput v-model="createFormState.title" placeholder="请输入模板标题" />
+            <UInput
+              v-model="createFormState.title"
+              placeholder="请输入模板标题"
+            />
           </UFormGroup>
 
           <UFormGroup
@@ -1263,7 +1454,10 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
             name="description"
             required
           >
-            <UTextarea v-model="createFormState.description" placeholder="请输入模板描述" />
+            <UTextarea
+              v-model="createFormState.description"
+              placeholder="请输入模板描述"
+            />
           </UFormGroup>
 
           <UDivider label="片头" />
@@ -1291,10 +1485,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   />
                   <div class="mt-2">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{ isUploadingCreateOpeningVideo ? '上传中...' : (createOpeningVideoFile ? createOpeningVideoFile.name : '点击或拖拽上传片头视频') }}
+                      {{
+                        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">
+                  <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>
@@ -1325,10 +1528,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   />
                   <div class="mt-2">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{ isUploadingCreateOpeningCover ? '上传中...' : (createOpeningCoverFile ? createOpeningCoverFile.name : '点击或拖拽上传片头封面') }}
+                      {{
+                        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">
+                  <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>
@@ -1361,10 +1573,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   />
                   <div class="mt-2">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{ isUploadingCreateEndingVideo ? '上传中...' : (createEndingVideoFile ? createEndingVideoFile.name : '点击或拖拽上传片尾视频') }}
+                      {{
+                        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">
+                  <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>
@@ -1395,10 +1616,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
                   />
                   <div class="mt-2">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
-                      {{ isUploadingCreateEndingCover ? '上传中...' : (createEndingCoverFile ? createEndingCoverFile.name : '点击或拖拽上传片尾封面') }}
+                      {{
+                        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">
+                  <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>
@@ -1422,7 +1652,13 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
               form="createForm"
               color="primary"
               :loading="isCreating"
-              :disabled="isCreating || isUploadingCreateOpeningVideo || isUploadingCreateOpeningCover || isUploadingCreateEndingVideo || isUploadingCreateEndingCover"
+              :disabled="
+                isCreating ||
+                isUploadingCreateOpeningVideo ||
+                isUploadingCreateOpeningCover ||
+                isUploadingCreateEndingVideo ||
+                isUploadingCreateEndingCover
+              "
             >
               {{ isCreating ? '创建中...' : '创建模板' }}
             </UButton>

pages/generation/admin/users.vue

@@ -596,8 +596,8 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
                 </UBadge>
                 <UBadge
                   v-else-if="
-                  getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
+                    getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
-                "
+                  "
                   color="red"
                   variant="subtle"
                   size="xs"
@@ -662,7 +662,9 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
                   开通
                 </UButton>
                 <UButton
-                  v-else-if="getBalanceByTag(row.tag)!.expire_time < dayjs().unix()"
+                  v-else-if="
+                    getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
+                  "
                   color="teal"
                   icon="tabler:clock-plus"
                   size="xs"
@@ -684,15 +686,17 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
                   size="xs"
                   variant="soft"
                   @click="
-                  () => {
+                    () => {
-                    isActivateBalance = false
+                      isActivateBalance = false
-                    userBalanceEditing = true
+                      userBalanceEditing = true
-                    userBalanceState.request_type = row.tag
+                      userBalanceState.request_type = row.tag
-                    userBalanceState.expire_time =
+                      userBalanceState.expire_time =
-                      getBalanceByTag(row.tag)!.expire_time * 1000
+                        getBalanceByTag(row.tag)!.expire_time * 1000
-                    userBalanceState.remain_count = getBalanceByTag(row.tag)!.remain_count
+                      userBalanceState.remain_count = getBalanceByTag(
-                  }
+                        row.tag
-                "
+                      )!.remain_count
+                    }
+                  "
                 >
                   更新
                 </UButton>
@@ -867,7 +871,10 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
         default-tab="system"
         multiple
         @close="isDigitalSelectorOpen = false"
-        @select="digitalHumans => onDigitalHumansSelected(digitalHumans as DigitalHumanItem[])"
+        @select="
+          (digitalHumans) =>
+            onDigitalHumansSelected(digitalHumans as DigitalHumanItem[])
+        "
       />
     </USlideover>
   </LoginNeededContent>

pages/generation/course.vue

@@ -11,22 +11,21 @@ const loginState = useLoginState()
 const deletePending = ref(false)
 const page = ref(1)
 
-const {
+const { data: courseList, refresh: refreshCourseList } = useAsyncData(
-  data: courseList,
+  () =>
-  refresh: refreshCourseList,
+    useFetchWrapped<
-} = useAsyncData(
+      req.gen.CourseGenList & AuthedRequest,
-  () => useFetchWrapped<
+      BaseResponse<PagedData<resp.gen.CourseGenItem>>
-    req.gen.CourseGenList & AuthedRequest,
+    >('App.Digital_Convert.GetList', {
-    BaseResponse<PagedData<resp.gen.CourseGenItem>>
+      token: loginState.token!,
-  >('App.Digital_Convert.GetList', {
+      user_id: loginState.user.id,
-    token: loginState.token!,
+      to_user_id: loginState.user.id,
-    user_id: loginState.user.id,
+      page: page.value,
-    to_user_id: loginState.user.id,
+      perpage: 15,
-    page: page.value,
+    }),
-    perpage: 15,
+  {
-  }), {
     watch: [page],
-  },
+  }
 )
 
 const onCreateCourseClick = () => {
@@ -48,31 +47,33 @@ const onCourseDelete = (task_id: string) => {
     user_id: loginState.user.id,
     to_user_id: loginState.user.id,
     task_id,
-  }).then(res => {
-    if (res.ret === 200) {
-      toast.add({
-        title: '删除成功',
-        description: '已删除任务记录',
-        color: 'green',
-        icon: 'i-tabler-check',
-      })
-    } else {
-      toast.add({
-        title: '删除失败',
-        description: res.msg || '未知错误',
-        color: 'red',
-        icon: 'i-tabler-alert-triangle',
-      })
-    }
-  }).finally(() => {
-    deletePending.value = false
-    refreshCourseList()
   })
+    .then((res) => {
+      if (res.ret === 200) {
+        toast.add({
+          title: '删除成功',
+          description: '已删除任务记录',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .finally(() => {
+      deletePending.value = false
+      refreshCourseList()
+    })
 }
 
 const beforeLeave = (el: any) => {
-  el.style.width = `${ el.offsetWidth }px`
+  el.style.width = `${el.offsetWidth}px`
-  el.style.height = `${ el.offsetHeight }px`
+  el.style.height = `${el.offsetHeight}px`
 }
 
 const leave = (el: any, done: Function) => {
@@ -91,7 +92,10 @@ onMounted(() => {
 <template>
   <div>
     <div class="p-4 pb-0">
-      <BubbleTitle subtitle="VIDEOS" title="我的微课视频">
+      <BubbleTitle
+        subtitle="VIDEOS"
+        title="我的微课视频"
+      >
         <template #action>
           <UButton
             :trailing="false"
@@ -100,30 +104,38 @@ onMounted(() => {
             label="新建微课"
             size="md"
             variant="solid"
-            @click="() => {
+            @click="
-              if (!loginState.is_logged_in) {
+              () => {
-                modal.open(ModalAuthentication)
+                if (!loginState.is_logged_in) {
-                return
+                  modal.open(ModalAuthentication)
+                  return
+                }
+                onCreateCourseClick()
               }
-              onCreateCourseClick()
+            "
-            }"
           />
         </template>
       </BubbleTitle>
-      <GradientDivider/>
+      <GradientDivider />
     </div>
     <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"
       >
-        <Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="i-tabler-photo-hexagon"/>
+        <Icon
-        <p class="text-sm text-neutral-500 dark:text-neutral-400">
+          class="text-7xl text-neutral-300 dark:text-neutral-700"
-          没有记录
+          name="i-tabler-photo-hexagon"
-        </p>
+        />
+        <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
       </div>
-      <div v-else class="p-4">
+      <div
-        <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">
+        v-else
+        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"
+        >
           <TransitionGroup
             name="card"
             @beforeLeave="beforeLeave"
@@ -138,13 +150,16 @@ onMounted(() => {
           </TransitionGroup>
         </div>
         <div class="flex justify-end mt-4">
-          <UPagination v-model="page" :max="9" :page-count="16" :total="courseList?.data.total || 0"/>
+          <UPagination
+            v-model="page"
+            :max="9"
+            :page-count="16"
+            :total="courseList?.data.total || 0"
+          />
         </div>
       </div>
     </Transition>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

pages/generation/green-screen.vue

@@ -15,25 +15,24 @@ const pageCount = ref(15)
 const searchInput = ref('')
 const debounceSearch = refDebounced(searchInput, 1000)
 
-watch(debounceSearch, () => page.value = 1)
+watch(debounceSearch, () => (page.value = 1))
 
-const {
+const { data: videoList, refresh: refreshVideoList } = useAsyncData(
-  data: videoList,
+  () =>
-  refresh: refreshVideoList,
+    useFetchWrapped<
-} = useAsyncData(
+      req.gen.GBVideoList & AuthedRequest,
-  () => useFetchWrapped<
+      BaseResponse<PagedData<GBVideoItem>>
-    req.gen.GBVideoList & AuthedRequest,
+    >('App.Digital_VideoTask.GetList', {
-    BaseResponse<PagedData<GBVideoItem>>
+      token: loginState.token!,
-  >('App.Digital_VideoTask.GetList', {
+      user_id: loginState.user.id,
-    token: loginState.token!,
+      to_user_id: loginState.user.id,
-    user_id: loginState.user.id,
+      page: page.value,
-    to_user_id: loginState.user.id,
+      perpage: pageCount.value,
-    page: page.value,
+      title: debounceSearch.value,
-    perpage: pageCount.value,
+    }),
-    title: debounceSearch.value,
+  {
-  }), {
     watch: [page, pageCount, debounceSearch],
-  },
+  }
 )
 
 const onCreateCourseGreenClick = () => {
@@ -53,7 +52,7 @@ const onCourseGreenDelete = (task: GBVideoItem) => {
     token: loginState.token!,
     user_id: loginState.user.id,
     task_id: task.task_id,
-  }).then(res => {
+  }).then((res) => {
     if (res.data.code === 1) {
       refreshVideoList()
       toast.add({
@@ -74,8 +73,8 @@ const onCourseGreenDelete = (task: GBVideoItem) => {
 }
 
 const beforeLeave = (el: any) => {
-  el.style.width = `${ el.offsetWidth }px`
+  el.style.width = `${el.offsetWidth}px`
-  el.style.height = `${ el.offsetHeight }px`
+  el.style.height = `${el.offsetHeight}px`
 }
 
 const leave = (el: any, done: Function) => {
@@ -126,7 +125,11 @@ onMounted(() => {
     <div class="p-4 pb-0">
       <BubbleTitle
         :subtitle="!debounceSearch ? 'GB VIDEOS' : 'SEARCH...'"
-        :title="!debounceSearch ? '我的绿幕视频' : `标题搜索：${debounceSearch.toLocaleUpperCase()}`"
+        :title="
+          !debounceSearch
+            ? '我的绿幕视频'
+            : `标题搜索：${debounceSearch.toLocaleUpperCase()}`
+        "
       >
         <template #action>
           <UButtonGroup size="md">
@@ -163,7 +166,7 @@ onMounted(() => {
           />
         </template>
       </BubbleTitle>
-      <GradientDivider/>
+      <GradientDivider />
     </div>
 
     <Transition name="loading-screen">
@@ -171,14 +174,17 @@ onMounted(() => {
         v-if="videoList?.data.items.length === 0"
         class="w-full py-20 flex flex-col justify-center items-center gap-2"
       >
-        <Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="i-tabler-photo-hexagon"/>
+        <Icon
-        <p class="text-sm text-neutral-500 dark:text-neutral-400">
+          class="text-7xl text-neutral-300 dark:text-neutral-700"
-          没有记录
+          name="i-tabler-photo-hexagon"
-        </p>
+        />
+        <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
       </div>
       <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">
+          <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"
+          >
             <TransitionGroup
               name="card"
               @beforeLeave="beforeLeave"
@@ -188,20 +194,22 @@ onMounted(() => {
                 v-for="(v, i) in videoList?.data.items"
                 :key="v.task_id"
                 :video="v"
-                @delete="v => onCourseGreenDelete(v)"
+                @delete="(v) => onCourseGreenDelete(v)"
               />
             </TransitionGroup>
           </div>
           <div class="flex justify-end mt-4">
-            <UPagination v-model="page" :max="9" :page-count="pageCount" :total="videoList?.data.total || 0"/>
+            <UPagination
+              v-model="page"
+              :max="9"
+              :page-count="pageCount"
+              :total="videoList?.data.total || 0"
+            />
           </div>
         </div>
       </div>
     </Transition>
-
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

pages/generation/materials.vue

@@ -23,21 +23,21 @@ const {
   status: systemTitlesTemplateStatus,
   refresh: refreshSystemTitlesTemplate,
 } = useAsyncData(
-    'systemTitlesTemplate',
+  'systemTitlesTemplate',
-    () =>
+  () =>
-      useFetchWrapped<
+    useFetchWrapped<
-        PagedDataRequest & AuthedRequest,
+      PagedDataRequest & AuthedRequest,
-        BaseResponse<PagedData<TitlesTemplate>>
+      BaseResponse<PagedData<TitlesTemplate>>
-      >('App.Digital_Titles.GetList', {
+    >('App.Digital_Titles.GetList', {
-        token: loginState.token!,
+      token: loginState.token!,
-        user_id: loginState.user.id,
+      user_id: loginState.user.id,
-        page: systemPagination.page,
+      page: systemPagination.page,
-        perpage: systemPagination.pageSize,
+      perpage: systemPagination.pageSize,
-      }),
+    }),
-    {
+  {
-      watch: [systemPagination],
+    watch: [systemPagination],
-    }
+  }
-  )
+)
 
 const {
   data: userTitlesTemplate,
@@ -88,7 +88,7 @@ const userTitlesState = reactive({
   title_id: 0,
   title: '',
   description: '',
-  remark: ''
+  remark: '',
 })
 
 const onUserTitlesRequest = (titles: TitlesTemplate) => {
@@ -215,18 +215,18 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
         title="片头片尾模版"
         subtitle="Materials"
       >
-      <template #action>
+        <template #action>
-        <UButton
+          <UButton
-          color="amber"
+            color="amber"
-          icon="tabler:plus"
+            icon="tabler:plus"
-          variant="soft"
+            variant="soft"
-          v-if="loginState.user.auth_code === 2"
+            v-if="loginState.user.auth_code === 2"
-          @click="isCreateSystemTitlesSlideActive = true"
+            @click="isCreateSystemTitlesSlideActive = true"
-        >
+          >
-          创建模板
+            创建模板
-        </UButton>
+          </UButton>
-      </template>
+        </template>
-    </BubbleTitle>
+      </BubbleTitle>
       <GradientDivider />
     </div>
     <div class="p-4">
@@ -248,7 +248,9 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
           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>
+        <p class="text-sm text-neutral-500 dark:text-neutral-400">
+          暂时没有可用模板
+        </p>
       </div>
       <div
         class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"

pages/index.vue

@@ -1,13 +1,7 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
-
-</script>
 
 <template>
-  <div>
+  <div>Homepage is still WIP</div>
-    Homepage is still WIP
-  </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

pages/user/authenticate.vue

@@ -4,7 +4,7 @@ import { object, string, type InferType } from 'yup'
 
 definePageMeta({
   layout: 'authenticate',
-  preventLoginCheck: true
+  preventLoginCheck: true,
 })
 
 useSeoMeta({

tailwind.config.ts

@@ -8,8 +8,8 @@ export default <Partial<Config>>{
     },
     extend: {
       screens: {
-        'hd': '1280px',
+        hd: '1280px',
-        'fhd': '1920px',
+        fhd: '1920px',
         '2k': '2560px',
         '4k': '3840px',
       },
@@ -27,9 +27,9 @@ export default <Partial<Config>>{
         sidebar_dark: 'inset -2px 0 2px 0 rgba(255, 255, 255, .05)',
       },
       textShadow: {
-        'default': '2px 2px 5px grey',
+        default: '2px 2px 5px grey',
-        'md': '4px 4px 10px grey',
+        md: '4px 4px 10px grey',
-        'lg': '6px 6px 15px grey',
+        lg: '6px 6px 15px grey',
       },
     },
   },

tsconfig.json

@@ -3,7 +3,7 @@
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
+    "esModuleInterop": true
   },
   "references": [
     {

typings/llm.ts

@@ -1,10 +1,7 @@
 export type ChatSessionId = string
 export type ChatMessageId = string
 
-export type ModelTag =
+export type ModelTag = 'spark1_5' | 'spark3_0' | 'spark3_5'
-  'spark1_5' |
-  'spark3_0' |
-  'spark3_5'
 
 export interface LLMModal {
   tag: ModelTag
@@ -15,17 +12,17 @@ export interface LLMModal {
 }
 
 export interface Assistant {
-  id: number;
+  id: number
-  user_id: number;
+  user_id: number
-  create_time: number;
+  create_time: number
-  tpl_name: string;
+  tpl_name: string
-  types: string;
+  types: string
-  des: string;
+  des: string
-  input_tpl: string;
+  input_tpl: string
-  role: string;
+  role: string
-  target: string;
+  target: string
-  style: string;
+  style: string
-  demand: string;
+  demand: string
 }
 
 export namespace LLMSpark {
@@ -52,21 +49,21 @@ export const llmModels: Readonly<LLMModal[]> = Object.freeze([
     name: 'Spark 1.5',
     description: '科大讯飞星火 1.5',
     icon: 'tabler:car',
-    endpoint: 'App.Assistant_Spark.Chat_1_5'
+    endpoint: 'App.Assistant_Spark.Chat_1_5',
   },
   {
     tag: 'spark3_0',
     name: 'Spark 3.0',
     description: '科大讯飞星火 3.0',
     icon: 'tabler:plane-departure',
-    endpoint: 'App.Assistant_Spark.Chat_3_0'
+    endpoint: 'App.Assistant_Spark.Chat_3_0',
   },
   {
     tag: 'spark3_5',
     name: 'Spark 3.5',
     description: '科大讯飞星火 3.5',
     icon: 'tabler:rocket',
-    endpoint: 'App.Assistant_Spark.Chat_3_5'
+    endpoint: 'App.Assistant_Spark.Chat_3_5',
   },
 ])