chore(config): 更新格式化和 lint 配置，格式化部分文件

.gitea/workflows/deploy.yml

@@ -1,7 +1,7 @@
 name: 'CD'
 
 on:
-  push: 
+  push:
     branches:
       - 'release/**'
     tags:
@@ -25,10 +25,10 @@ jobs:
 
       - name: ⚙ Install dependencies
         run: pnpm i
-      
+
       - name: 🔨 Genereate project
         run: pnpm generate
-      
+
       - name: 📂 Sync deployment
         uses: SamKirkland/FTP-Deploy-Action@v4.3.5
         with:

.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 重新登录 |
-| FFmpeg 加载超时 | CDN 资源加载慢 | 检查网络，可切换到本地 `/public/assets/ffmpeg` |
-| 视频输出无声音 | 滤镜链未映射音频 | 确保 FFmpeg 命令包含 `-map '1:a?'` 映射音频轨道 |
-| 组件未注册 | 文件位置错误 | 确保在 `components/` 目录下，子目录自动扁平化注册 |
-| Pinia 状态未持久化 | 未配置 persist 选项 | 在 store 返回语句后添加 persist 配置（参考 `useLoginState`） |
+| 问题               | 原因                | 解决方案                                                        |
+| ------------------ | ------------------- | --------------------------------------------------------------- |
+| API 请求 401       | 缺少 token 或已过期 | 检查 `useLoginState().token`，通过 ModalAuthentication 重新登录 |
+| FFmpeg 加载超时    | CDN 资源加载慢      | 检查网络，可切换到本地 `/public/assets/ffmpeg`                  |
+| 视频输出无声音     | 滤镜链未映射音频    | 确保 FFmpeg 命令包含 `-map '1:a?'` 映射音频轨道                 |
+| 组件未注册         | 文件位置错误        | 确保在 `components/` 目录下，子目录自动扁平化注册               |
+| Pinia 状态未持久化 | 未配置 persist 选项 | 在 store 返回语句后添加 persist 配置（参考 `useLoginState`）    |
 
 ## 资源链接
 

.node-version

@@ -0,0 +1 @@
+v22.22.0

.oxfmtrc.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "htmlWhitespaceSensitivity": "ignore",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "semi": false,
+  "trailingComma": "es5",
+  "vueIndentScriptAndStyle": false,
+  "bracketSameLine": false,
+  "singleAttributePerLine": true,
+  "embeddedLanguageFormatting": "auto",
+  "experimentalSortPackageJson": true,
+  "experimentalSortImports": {},
+  "experimentalTailwindcss": {},
+  "ignorePatterns": []
+}

.oxlintrc.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": [
+    "eslint",
+    "unicorn",
+    "vue",
+    "typescript",
+    "jsdoc",
+    "promise",
+    "vitest"
+  ],
+  "categories": {},
+  "rules": {},
+  "settings": {
+    "jsdoc": {
+      "ignorePrivate": false,
+      "ignoreInternal": false,
+      "ignoreReplacesDocs": true,
+      "overrideReplacesDocs": true,
+      "augmentsExtendsReplacesDocs": false,
+      "implementsReplacesDocs": false,
+      "exemptDestructuredRootsFromChecks": false,
+      "tagNamePreference": {}
+    },
+    "vitest": {
+      "typecheck": false
+    }
+  },
+  "env": {
+    "builtin": true
+  },
+  "globals": {},
+  "ignorePatterns": []
+}

.prettierrc

@@ -1,13 +0,0 @@
-{
-  "singleQuote": true,
-  "jsxSingleQuote": true,
-  "htmlWhitespaceSensitivity": "ignore",
-  "printWidth": 80,
-  "tabWidth": 2,
-  "bracketSpacing": true,
-  "semi": false,
-  "trailingComma": "es5",
-  "vueIndentScriptAndStyle": false,
-  "bracketSameLine": false,
-  "singleAttributePerLine": true
-}

.vscode/extensions.json

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

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  // "editor.codeActionsOnSave": {
+  //   "source.fixAll.oxc": "always"
+  // },
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "[typescript]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  }
+}

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
 

app/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>
+<style scoped></style>

app/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>,
-    default: null
-  }
+    type: [Date, Object] as PropType<
+      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,
-  'borderless': true,
-  'color': 'primary',
+  transparent: true,
+  borderless: true,
+  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>

app/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: '',
 })
 
 // 表单验证
@@ -189,7 +189,7 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
         color: 'green',
         icon: 'i-tabler-check',
       })
-      
+
       // 重置表单
       formState.dh_name = ''
       formState.organization = ''
@@ -197,7 +197,7 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
       authVideoFile.value = null
       uploadProgress.step = 0
       uploadProgress.message = ''
-      
+
       // 关闭弹窗
       isOpen.value = false
     } else {
@@ -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">
-                <UIcon name="i-heroicons-video-camera" class="h-5 w-5" />
+              <h3
+                class="text-lg font-semibold mb-3 text-gray-800 dark:text-white flex items-center gap-2"
+              >
+                <UIcon
+                  name="i-heroicons-video-camera"
+                  class="h-5 w-5"
+                />
                 视频录制教程
               </h3>
-              <div class="w-full aspect-video border rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
-                <UIcon name="i-heroicons-video-camera" class="h-12 w-12 text-gray-400" />
+              <div
+                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">
-                  <UIcon name="i-heroicons-light-bulb" class="h-5 w-5 text-amber-600 dark:text-amber-400" />
+                <div
+                  class="bg-amber-100 dark:bg-amber-900 p-2 rounded-lg mt-0.5"
+                >
+                  <UIcon
+                    name="i-heroicons-light-bulb"
+                    class="h-5 w-5 text-amber-600 dark:text-amber-400"
+                  />
                 </div>
                 <div class="flex-1">
-                  <h4 class="text-sm font-semibold text-gray-800 dark:text-white mb-3">录制注意事项</h4>
+                  <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" />
-                      <span class="text-xs text-gray-600 dark:text-gray-300">确保光线充足，避免背光</span>
+                      <UIcon
+                        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" />
-                      <span class="text-xs text-gray-600 dark:text-gray-300">选择安静环境，减少噪音干扰</span>
+                      <UIcon
+                        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" />
-                      <span class="text-xs text-gray-600 dark:text-gray-300">人脸占画面比例控制在 1/4 以内</span>
+                      <UIcon
+                        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" />
-                      <span class="text-xs text-gray-600 dark:text-gray-300">保持自然表情，使用恰当手势</span>
+                      <UIcon
+                        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>
@@ -473,4 +552,4 @@ const showAuthModal = ref(false)
   </UModal>
 </template>
 
-<style scoped></style>
+<style scoped></style>

app/components/GradientDivider.vue

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

app/components/Icon/MessageResponding.vue

@@ -0,0 +1,217 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      cx="4"
+      cy="12"
+      r="0"
+      fill="currentColor"
+    >
+      <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"
+    >
+      <animate
+        fill="freeze"
+        attributeName="cx"
+        begin="0;svgSpinners3DotsMove1.end"
+        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"
+    >
+      <animate
+        fill="freeze"
+        attributeName="cx"
+        begin="0;svgSpinners3DotsMove1.end"
+        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"
+    >
+      <animate
+        id="svgSpinners3DotsMove6"
+        fill="freeze"
+        attributeName="r"
+        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>

app/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"
-       :style="`aspect-ratio: ${aspect};`">
+  <div
+    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 }}
@@ -35,4 +38,4 @@ const size = computed(() => {
   @apply rounded-lg;
   @apply bg-gradient-to-r from-indigo-800 to-purple-600;
 }
-</style>
+</style>

app/components/LoginNeededContent.vue

@@ -19,9 +19,14 @@ const modal = useModal()
 
 <template>
   <ClientOnly>
-    <div v-if="!loginState.is_logged_in"
-         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"/>
+    <div
+      v-if="!loginState.is_logged_in"
+      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"
-         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"/>
+    <div
+      v-else-if="needAdmin && loginState.user.auth_code !== 2"
+      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>
-      <slot/>
+    <div
+      :class="contentClass"
+      v-else
+    >
+      <slot />
     </div>
   </ClientOnly>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

app/components/Markdown.vue

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

app/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_zy', value: 2, color: 'green' },  // XSH 自有
+  { label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
+  { label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
   { label: 'xsh_fh', value: 3, color: 'purple' }, // 硅基（泛化数字人）
   { label: 'xsh_bb', value: 4, color: 'indigo' }, // 百度小冰
 ]

app/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 => {
-        selected_digital_human = (digitalHumans as DigitalHumanItem)
-      }"
+      @select="
+        (digitalHumans) => {
+          selected_digital_human = digitalHumans as DigitalHumanItem
+        }
+      "
     />
     <ModalVideoTitleSelect
       :is-open="isTitlesSelectorOpen"
       @close="isTitlesSelectorOpen = false"
-      @select="titles => {
-        selected_titles = (titles as TitlesTemplate)
-      }"
+      @select="
+        (titles) => {
+          selected_titles = titles as TitlesTemplate
+        }
+      "
     />
   </USlideover>
 </template>

app/components/SlideCreateCourseGreen.vue

@@ -96,7 +96,7 @@ const onCreateCourseGreenSubmit = async (
     BaseResponse<resp.gen.GBVideoCreate>
   >('App.Digital_VideoTask.Create', payload)
     .then((res) => {
-      if (!!res.data.task_id) {
+      if (res.data.task_id) {
         toast.add({
           title: '创建成功',
           description: '视频已加入生成队列',
@@ -290,9 +290,11 @@ const onCreateCourseGreenSubmit = async (
     <ModalDigitalHumanSelect
       :is-open="isDigitalSelectorOpen"
       @close="isDigitalSelectorOpen = false"
-      @select="digitalHumans => {
-        selected_digital_human = (digitalHumans as DigitalHumanItem)
-      }"
+      @select="
+        (digitalHumans) => {
+          selected_digital_human = digitalHumans as DigitalHumanItem
+        }
+      "
     />
   </USlideover>
 </template>

app/components/aigc/RatioSelector.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  ratios: {
+    type: Array as PropType<
+      {
+        ratio: string
+        label?: string
+        value: string | number
+      }[]
+    >,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const selected = ref<string | number>('')
+
+onMounted(() => {
+  if (props.modelValue) {
+    handle_select(props.modelValue)
+  } else {
+    handle_select(props.ratios[0].value)
+  }
+})
+
+const handle_select = (value: string | number) => {
+  selected.value = value
+  emit('update:modelValue', value)
+}
+
+const getRatio = (ratio: string) => {
+  const [w, h] = ratio.split(/[:\/]/).map(Number)
+  return {
+    w: w,
+    h: h,
+  }
+}
+
+const getShapeSize = (r: { w: number; h: number }, size: number) => {
+  const ratio = r.w / r.h
+  if (r.w > r.h) {
+    return {
+      w: size,
+      h: size / ratio,
+    }
+  } else {
+    return {
+      w: size * ratio,
+      h: size,
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-2">
+    <div
+      v-for="(ratio, k) in ratios"
+      :key="ratio.value"
+      @click="handle_select(ratio.value)"
+      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"
+      :class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']"
+    >
+      <div
+        class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded flex justify-center items-center"
+        :class="[
+          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
+              ? '横向'
+              : '纵向'
+        }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

app/components/aigc/ReferenceFigureSelector.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  value: {
+    type: Object as PropType<File | null>,
+    default: null,
+  },
+  text: {
+    type: String,
+    default: '选择图片进行图生图',
+  },
+  textOnSelect: {
+    type: String,
+  },
+})
+const emit = defineEmits(['update'])
+
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const selected_file = ref<File | null>(null)
+const image_dataurl = ref('')
+const loading = ref(false)
+
+watch(
+  () => props.value,
+  async (newVal) => {
+    handleFileInput({ target: { files: [newVal!] } })
+  }
+)
+
+const handleTrashClick = () => {
+  fileInput.value!.value = ''
+  selected_file.value = null
+  image_dataurl.value = ''
+  emit('update', null)
+}
+
+const handleFileInput = (event: { target: any }) => {
+  if (event.target.files) {
+    const file = event.target.files[0]
+    if (!file) return
+    selected_file.value = file
+    loading.value = true
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      image_dataurl.value = e.target?.result as string
+      loading.value = false
+    }
+    reader.onerror = (e) => {
+      loading.value = false
+    }
+    reader.readAsDataURL(selected_file.value!)
+    emit('update', selected_file.value)
+  }
+}
+</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 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 }"
+    @click="() => !loading && fileInput?.click()"
+  >
+    <input
+      ref="fileInput"
+      type="file"
+      class="hidden"
+      @change="handleFileInput"
+      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"
+      >
+        <div
+          v-if="loading"
+          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"
+        >
+          <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"
+              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"
+          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"
+        >
+          <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"
+          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"
+      >
+        {{ selected_file ? textOnSelect : text }}
+        <span
+          v-if="selected_file && textOnSelect"
+          class="block text-[10px] text-center"
+        >
+          {{ selected_file?.name || textOnSelect }}
+        </span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.trash-btn-enter-active,
+.trash-btn-leave-active {
+  @apply transition duration-200;
+}
+
+.trash-btn-enter-from,
+.trash-btn-leave-to {
+  @apply opacity-0 scale-75;
+}
+
+.preview-swap-enter-active,
+.preview-swap-leave-active {
+  @apply transition duration-200;
+}
+
+.preview-swap-enter-from,
+.preview-swap-leave-to {
+  @apply blur-sm;
+}
+</style>

app/components/aigc/chat/ChatItem.vue

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

app/components/aigc/chat/Message.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type {PropType} from 'vue'
-import type {ChatMessage} from '~/typings/llm'
+import type { PropType } from 'vue'
+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 class="chat-inside" :class="{'items-end': message_place_end}">
+  <div
+    class="chat"
+    :class="{ 'justify-end': message_place_end }"
+  >
+    <div
+      class="chat-inside"
+      :class="{ 'items-end': message_place_end }"
+    >
       <div class="chat-inside-avatar">
-        <Icon :name="message_avatar" class="text-lg"/>
+        <Icon
+          :name="message_avatar"
+          class="text-lg"
+        />
       </div>
-      <div class="flex flex-col" :class="{'items-end': message_place_end}">
-        <Transition mode="out-in" name="message-content-change">
+      <div
+        class="flex flex-col"
+        :class="{ 'items-end': message_place_end }"
+      >
+        <Transition
+          mode="out-in"
+          name="message-content-change"
+        >
           <div
-              class="chat-inside-content relative"
-              :class="message_background"
-              :key="message.content"
+            class="chat-inside-content relative"
+            :class="message_background"
+            :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>
@@ -103,4 +126,4 @@ const message_background = computed(() => {
 .message-content-change-enter-from {
   @apply opacity-0 translate-y-4;
 }
-</style>
+</style>

app/components/aigc/chat/NewSessionScreen.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import type { Assistant } from '~/typings/llm'
+import { useLazyAsyncData } from '#app'
+
+const loginState = useLoginState()
+
+const props = defineProps({
+  nonBack: {
+    type: Boolean,
+    default: false,
+  },
+})
+// noinspection JSUnusedLocalSymbols
+const emit = defineEmits({
+  select: (assistant: Assistant | null) => true,
+  cancel: () => true,
+})
+
+const { data: assistantTemplates, pending: assistantTemplatesPending } =
+  await useLazyAsyncData(
+    'App.Assistant_Template.GetList',
+    () =>
+      useFetchWrapped<
+        req.AssistantTemplateList & AuthedRequest,
+        BaseResponse<PagedData<Assistant>>
+      >('App.Assistant_Template.GetList', {
+        user_id: loginState.user.id,
+        token: loginState.token as string,
+        page: 1,
+        perpage: 20,
+      }),
+    {
+      server: false,
+    }
+  )
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col items-center gap-4 relative">
+    <Transition name="loading-screen">
+      <div
+        v-if="assistantTemplatesPending"
+        class="absolute inset-0 bg-white dark:bg-neutral-900 flex justify-center items-center z-[1] text-primary"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="40"
+          height="40"
+          viewBox="0 0 24 24"
+        >
+          <defs>
+            <filter id="svgSpinnersGooeyBalls20">
+              <feGaussianBlur
+                in="SourceGraphic"
+                result="y"
+                stdDeviation="1"
+              />
+              <feColorMatrix
+                in="y"
+                result="z"
+                values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
+              />
+              <feBlend
+                in="SourceGraphic"
+                in2="z"
+              />
+            </filter>
+          </defs>
+          <g filter="url(#svgSpinnersGooeyBalls20)">
+            <circle
+              cx="5"
+              cy="12"
+              r="4"
+              fill="currentColor"
+            >
+              <animate
+                attributeName="cx"
+                calcMode="spline"
+                dur="2s"
+                keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                repeatCount="indefinite"
+                values="5;8;5"
+              />
+            </circle>
+            <circle
+              cx="19"
+              cy="12"
+              r="4"
+              fill="currentColor"
+            >
+              <animate
+                attributeName="cx"
+                calcMode="spline"
+                dur="2s"
+                keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                repeatCount="indefinite"
+                values="19;16;19"
+              />
+            </circle>
+            <animateTransform
+              attributeName="transform"
+              dur="0.75s"
+              repeatCount="indefinite"
+              type="rotate"
+              values="0 12 12;360 12 12"
+            />
+          </g>
+        </svg>
+      </div>
+    </Transition>
+    <div class="w-full p-2">
+      <UButton
+        v-if="!nonBack"
+        variant="ghost"
+        size="xs"
+        @click="emit('cancel')"
+      >
+        <template #leading>
+          <UIcon name="i-tabler-chevron-left" />
+        </template>
+        <span>返回</span>
+      </UButton>
+    </div>
+    <div class="flex flex-col items-center gap-8">
+      <h1 class="text-lg font-medium flex flex-col items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="2em"
+          height="2em"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path
+              d="M13.192 9h6.616a2 2 0 0 1 1.992 2.183l-.567 6.182A4 4 0 0 1 17.25 21h-1.5a4 4 0 0 1-3.983-3.635l-.567-6.182A2 2 0 0 1 13.192 9M15 13h.01M18 13h.01"
+            />
+            <path
+              d="M15 16.5c1 .667 2 .667 3 0m-9.368-.518A4.037 4.037 0 0 1 8.25 16h-1.5a4 4 0 0 1-3.983-3.635L2.2 6.183A2 2 0 0 1 4.192 4h6.616a2 2 0 0 1 2 2M6 8h.01M9 8h.01"
+            />
+            <path d="M6 12c.764-.51 1.528-.63 2.291-.36" />
+          </g>
+        </svg>
+        <span>选择智能助手</span>
+      </h1>
+      <UButton
+        class="group ring-primary hover:ring-2 transition duration-300"
+        variant="soft"
+        size="lg"
+        :ui="{ rounded: 'rounded-full' }"
+        @click="emit('select', null)"
+      >
+        <span class="-mt-0.5">直接开始</span>
+        <template #trailing>
+          <span
+            class="group-hover:translate-x-1 transition duration-300 ease-out relative w-3 h-full -mt-0.5"
+          >
+            <UIcon
+              name="i-tabler-arrow-right"
+              class="w-5 h-5 absolute top-auto bottom-auto right-0 opacity-0 group-hover:opacity-100 transition duration-300"
+            />
+            <UIcon
+              name="i-tabler-chevron-right"
+              class="w-5 h-5 absolute top-auto bottom-auto right-0 -mr-[3.5px] group-hover:opacity-0 transition duration-300"
+            />
+          </span>
+        </template>
+      </UButton>
+    </div>
+    <div
+      class="w-full md:w-3/4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 overflow-y-auto p-4 md:p-8"
+    >
+      <div
+        v-for="assistant in assistantTemplates?.data.items || []"
+        :key="assistant.id"
+        class="assistant-item select-none"
+        @click="emit('select', assistant)"
+      >
+        <div class="flex flex-col gap-1">
+          <div class="text-base font-medium">{{ assistant.tpl_name }}</div>
+          <div class="text-sm text-neutral-500 dark:text-neutral-400">
+            {{ assistant.des }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<!--suppress CssUnusedSymbol -->
+<style scoped>
+.loading-screen-leave-active {
+  @apply transition duration-300;
+}
+
+.loading-screen-leave-to {
+  @apply opacity-0;
+}
+
+.assistant-item {
+  @apply w-full bg-white dark:bg-neutral-800 rounded-lg shadow-sm ring-primary ring-offset-2 dark:ring-offset-0 hover:ring-2 transition;
+  @apply flex items-center gap-4 px-4 py-2 cursor-pointer border dark:border-neutral-700 hover:border-transparent;
+}
+</style>

app/components/aigc/drawing/OptionBlock.vue

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

app/components/aigc/drawing/ResultBlock.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import type { ResultBlockMeta } from '~/components/aigc/drawing/index'
+import type { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { get } from 'idb-keyval'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: 'i-tabler-photo-filled',
+  },
+  prompt: {
+    type: String,
+  },
+  fid: {
+    type: String,
+    required: true,
+  },
+  images: {
+    type: Array,
+  },
+  meta: {
+    type: Object as PropType<ResultBlockMeta>,
+  },
+})
+const emit = defineEmits(['use-reference'])
+
+const toast = useToast()
+
+const expand_prompt = ref(false)
+const show_meta = ref(true)
+
+const cachedImages = ref<string[]>([])
+const cachedImagesInterval = ref<NodeJS.Timeout | null>(null)
+
+onMounted(async () => {
+  cachedImagesInterval.value = setInterval(async () => {
+    const res = ((await get(props.fid)) as string[]) || []
+    if (res.length === cachedImages.value.length) return
+    cachedImages.value = res
+  }, 200)
+})
+
+onUnmounted(() => {
+  if (cachedImagesInterval.value) {
+    clearInterval(cachedImagesInterval.value)
+  }
+})
+
+const handle_download = (url: string) => {
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `xsh_ai_drawing-${dayjs(props.meta?.datetime! * 1000).format('YYYY-MM-DD-HH-mm-ss')}.png`
+  a.click()
+}
+
+const handle_use_reference = async (blob_url: string) => {
+  fetch(blob_url)
+    .then((res) => res.blob())
+    .then((blob) => {
+      const file = new File(
+        [blob],
+        `xsh_drawing-${props.meta?.datetime! * 1000}.png`,
+        { type: 'image/png' }
+      )
+      emit('use-reference', file)
+    })
+    .catch(() => {
+      toast.add({
+        title: '转换失败',
+        description: '无法获取图片数据',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+    })
+}
+
+const copyToClipboard = (text: string) => {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      toast.add({
+        title: '复制成功',
+        description: '已将内容复制到剪贴板',
+        color: 'primary',
+        icon: 'i-tabler-copy',
+      })
+    })
+    .catch(() => {
+      toast.add({
+        title: '复制失败',
+        description: '无法复制到剪贴板',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+    })
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex items-center gap-1">
+      <UIcon :name="icon" />
+      <h1 class="text-sm font-semibold">
+        {{ meta.type || 'AI 智能绘图' }}
+      </h1>
+      <UDivider
+        class="flex-1"
+        size="sm"
+      />
+      <UButton
+        color="black"
+        size="xs"
+        icon="i-tabler-info-circle"
+        :variant="show_meta ? 'solid' : 'ghost'"
+        :disabled="!meta"
+        @click="show_meta = !show_meta"
+      ></UButton>
+      <slot name="header-right" />
+    </div>
+    <div
+      v-if="prompt"
+      class="flex items-start gap-2 mt-1 mb-2"
+    >
+      <UIcon
+        name="i-tabler-article"
+        class="mt-0.5"
+      />
+      <p
+        class="text-sm flex-1 text-ellipsis cursor-pointer"
+        :class="{
+          'line-clamp-1': !expand_prompt,
+          'line-clamp-none': expand_prompt,
+        }"
+        @click="expand_prompt = !expand_prompt"
+      >
+        {{ prompt }}
+      </p>
+      <UButton
+        color="gray"
+        size="xs"
+        icon="i-tabler-copy"
+        variant="ghost"
+        class="-mt-1"
+        @click="copyToClipboard(prompt)"
+      ></UButton>
+    </div>
+    <div
+      v-if="cachedImages.length > 0"
+      class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x"
+    >
+      <div
+        class="h-full aspect-auto relative rounded-lg shadow-md overflow-hidden group"
+        v-for="(url, i) in cachedImages"
+        :key="`${fid}-${i}`"
+      >
+        <div
+          class="absolute inset-0 bg-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
+                @click="handle_use_reference(url)"
+              ></UButton>
+            </UTooltip>
+            <UTooltip text="下载">
+              <UButton
+                color="indigo"
+                variant="soft"
+                size="2xs"
+                icon="i-tabler-download"
+                square
+                @click="handle_download(url)"
+              ></UButton>
+            </UTooltip>
+          </div>
+        </div>
+        <img
+          class="result-image"
+          :src="useBlobUrlFromB64(url)"
+          alt="AI Generated"
+        />
+      </div>
+    </div>
+    <div
+      v-else
+      class="h-64 aspect-[3/4] mb-4 rounded-lg placeholder-gradient flex justify-center items-center"
+    >
+      <UIcon
+        name="i-svg-spinners-tadpole"
+        class="text-3xl"
+      />
+    </div>
+    <Transition
+      v-if="meta"
+      name="meta"
+    >
+      <div
+        v-if="show_meta"
+        class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2"
+      >
+        <UBadge
+          v-if="meta.modal"
+          color="black"
+          variant="solid"
+          class="text-[10px] font-bold gap-0.5"
+        >
+          <UIcon
+            class="text-sm"
+            name="i-tabler-box-seam"
+          />
+          {{ meta.modal }}
+        </UBadge>
+        <UBadge
+          v-if="meta.style"
+          color="green"
+          variant="subtle"
+          class="text-[10px] font-bold gap-0.5"
+        >
+          <UIcon
+            class="text-sm"
+            name="i-tabler-christmas-tree"
+          />
+          {{ meta.style }}
+        </UBadge>
+        <UBadge
+          v-if="meta.cost"
+          color="amber"
+          variant="subtle"
+          class="text-[10px] font-bold gap-0.5"
+        >
+          <UIcon
+            class="text-sm"
+            name="i-solar-fire-bold"
+          />
+          {{ meta.cost }}
+        </UBadge>
+        <UBadge
+          v-if="meta.ratio"
+          color="indigo"
+          variant="subtle"
+          class="text-[10px] font-bold gap-0.5"
+        >
+          <UIcon
+            class="text-sm"
+            name="i-tabler-aspect-ratio"
+          />
+          {{ meta.ratio }}
+        </UBadge>
+        <UBadge
+          v-if="meta.id"
+          color="indigo"
+          variant="subtle"
+          class="text-[10px] font-bold gap-0.5"
+        >
+          <UIcon
+            class="text-sm"
+            name="i-tabler-number"
+          />
+          {{ meta.id }}
+        </UBadge>
+        <UBadge
+          v-if="meta.datetime"
+          color="indigo"
+          variant="subtle"
+          class="text-[10px] font-bold gap-0.5"
+        >
+          <UIcon
+            class="text-sm"
+            name="i-tabler-calendar-month"
+          />
+          {{ dayjs(meta.datetime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
+        </UBadge>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.meta-enter-active,
+.meta-leave-active {
+  @apply transition duration-300;
+}
+
+.meta-enter-from,
+.meta-leave-to {
+  @apply opacity-0 -translate-y-2;
+}
+
+.result-image {
+  @apply snap-start;
+  @apply w-full h-full object-cover;
+}
+
+.placeholder-gradient {
+  @apply animate-pulse bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800;
+}
+</style>

app/components/aigc/drawing/index.d.ts

@@ -6,4 +6,4 @@ export declare interface ResultBlockMeta {
   style?: string
   datetime?: number
   type?: string
-}
+}

app/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': '加载资源...',
-    'analyzing': '分析图片...',
-    'preparing': '准备合成...',
-    'executing': '合成中...',
-    'finalizing': '完成处理...',
+    loading: '加载资源...',
+    analyzing: '分析图片...',
+    preparing: '准备合成...',
+    executing: '合成中...',
+    finalizing: '完成处理...',
   }
   return phaseMap[compositingPhase.value]
 })
@@ -51,9 +53,9 @@ const phaseText = computed(() => {
 const handleBackgroundFileSelect = (event: Event) => {
   const target = event.target as HTMLInputElement
   const file = target.files?.[0]
-  
+
   if (!file) return
-  
+
   // 验证文件类型
   if (!file.type.startsWith('image/')) {
     toast.add({
@@ -64,7 +66,7 @@ const handleBackgroundFileSelect = (event: Event) => {
     })
     return
   }
-  
+
   selectedBackgroundFile.value = file
   const reader = new FileReader()
   reader.onload = (e) => {
@@ -85,12 +87,12 @@ const composeBackgroundVideo = async () => {
     })
     return
   }
-  
+
   try {
     isCombinatorLoading.value = true
     compositingProgress.value = 0
     combinatorError.value = ''
-    
+
     // 使用 FFmpeg WASM 进行视频背景合成
     const resultBlob = await useVideoBackgroundCompositing(
       props.video.video_alpha_url!,
@@ -99,12 +101,12 @@ const composeBackgroundVideo = async () => {
         onProgress: (info) => {
           compositingProgress.value = info.progress
           compositingPhase.value = info.phase
-        }
+        },
       }
     )
-    
+
     compositedVideoBlob.value = resultBlob
-    
+
     toast.add({
       title: '合成成功',
       description: '背景已成功合成，可预览或下载',
@@ -126,7 +128,7 @@ const composeBackgroundVideo = async () => {
 
 const downloadCompositedVideo = () => {
   if (!compositedVideoBlob.value) return
-  
+
   const url = URL.createObjectURL(compositedVideoBlob.value)
   const link = document.createElement('a')
   link.href = url
@@ -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 {
-    download,
-    progressEmitter,
-  } = useDownload(url, filename)
+  const { 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 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-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group"
+    >
+      <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"/>
-      <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" />
+      <NuxtImg
+        v-else
+        :src="video.video_cover"
+        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-->
-<!--          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"/>-->
-<!--          <p class="text-xs">数字人 {{ video.digital_human_id }}</p>-->
-<!--        </div>-->
+      <div
+        class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap"
+      >
+        <!--        <div-->
+        <!--          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"/>-->
+        <!--          <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">
-          <p class="text-2xs text-neutral-400 dark:text-neutral-500">{{ video.digital_human_id }}</p>
+          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>
         </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)}%` : '字幕'"
-              :loading="downloadingState.subtitle > 0 && downloadingState.subtitle < 100"
+              :label="
+                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)}%` : '视频'"
-                :loading="downloadingState.video > 0 && downloadingState.video < 100"
+                :label="
+                  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,48 +411,93 @@ 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">
                 <img :src="selectedBackgroundPreview" alt="背景预览" class="w-full h-full object-cover" />
@@ -376,7 +506,7 @@ const startDownload = (url: string, filename: string) => {
                 <UIcon class="text-3xl text-neutral-400" name="tabler:photo" />
                 <span class="text-xs text-neutral-400">点击选择图片</span>
               </div> -->
-              
+
               <!-- 文件输入 -->
               <input
                 ref="fileInputRef"
@@ -385,7 +515,7 @@ const startDownload = (url: string, filename: string) => {
                 class="hidden"
                 @change="handleBackgroundFileSelect"
               />
-              
+
               <!-- 选择按钮 -->
               <UButton
                 block
@@ -395,9 +525,12 @@ const startDownload = (url: string, filename: string) => {
                 variant="soft"
                 @click="fileInputRef?.click()"
               />
-              
+
               <!-- 选中的文件名 -->
-              <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,20 +546,32 @@ 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-xs text-neutral-500">{{ compositingProgress }}%</span>
+              <span class="text-sm font-medium text-gray-900 dark:text-white">
+                {{ phaseText }}
+              </span>
+              <span class="text-xs text-neutral-500">
+                {{ compositingProgress }}%
+              </span>
             </div>
             <UProgress :value="compositingProgress" />
           </div>
 
           <!-- 合成预览 -->
-          <div v-if="compositedVideoBlob" class="space-y-2">
-            <div class="text-sm font-medium text-gray-900 dark:text-white">视频预览</div>
-            <video 
+          <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 
+              controls
               autoplay
               muted
               :src="compositedVideoUrl"
@@ -446,13 +591,15 @@ const startDownload = (url: string, filename: string) => {
               v-if="compositedVideoBlob"
               color="gray"
               label="重新选择"
-              @click="() => {
-                selectedBackgroundFile = null
-                selectedBackgroundPreview = ''
-                compositedVideoBlob = null
-                combinatorError = ''
-                isCombinatorLoading = false
-              }"
+              @click="
+                () => {
+                  selectedBackgroundFile = null
+                  selectedBackgroundPreview = ''
+                  compositedVideoBlob = null
+                  combinatorError = ''
+                  isCombinatorLoading = false
+                }
+              "
             />
             <UButton
               v-if="compositedVideoBlob"
@@ -477,6 +624,4 @@ const startDownload = (url: string, filename: string) => {
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

app/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;
 }
 

app/components/aigc/nav/NavGroup.vue

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

app/components/aigc/nav/NavItem.vue

@@ -1,25 +1,16 @@
 <script setup lang="ts">
-const props = defineProps({
-  icon: {
-    type: String,
-    default: 'i-tabler-photo-filled',
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  to: {
-    type: String,
-    required: true,
-  },
-  admin: {
-    type: Boolean,
-    default: false,
-  },
-  hide: {
-    type: Boolean,
-    default: false,
-  },
+export type NavItemProps = {
+  label: string
+  icon: string
+  to: string
+  admin?: boolean
+  hide?: boolean
+}
+
+const props = withDefaults(defineProps<NavItemProps>(), {
+  icon: 'i-tabler-photo-filled',
+  admin: false,
+  hide: 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>
+<style scoped></style>

app/components/uni/Button/index.d.ts

@@ -1,2 +1,2 @@
 type ButtonType = 'normal' | 'primary' | 'danger'
-type ButtonSize = 'base' | 'medium' | 'small'
+type ButtonSize = 'base' | 'medium' | 'small'

app/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"
-          :class="{
-    'w-full': block,
-    'uni-button--disabled': disabled || loading,
-    [buttonTypeClass]: buttonTypeClass,
-    [buttonSizeClass]: buttonSizeClass,
-  }" @click="handleClick" :disabled="disabled || loading" :type="attrType">
+  <button
+    class="w-fit flex justify-center items-center rounded-md font-bold border shadow-sm transition focus:ring-4"
+    :class="{
+      'w-full': block,
+      'uni-button--disabled': disabled || loading,
+      [buttonTypeClass]: buttonTypeClass,
+      [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" />
-      <span v-else class="mr-2">
-        <slot name="icon"/>
+      <Icon
+        v-else-if="buttonIcon"
+        :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,

app/components/uni/Copyable/index.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { useMessage } from '~/composables/uni/useMessage'
+
+const props = defineProps({
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
+  iconSize: {
+    type: String,
+    default: '1em',
+  },
+  text: {
+    type: String,
+    required: true,
+  },
+})
+
+const message = useMessage()
+
+const copied = ref(false)
+const copied_timeout = ref()
+
+const fuck_copy = () => {
+  navigator.clipboard
+    .writeText(props.text || '')
+    .then(() => {
+      copied.value = true
+      if (copied_timeout.value) clearInterval(copied_timeout.value)
+      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"
+  >
+    <slot />
+    <Transition
+      v-if="!hideIcon"
+      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"
+        class="text-green-600"
+      >
+        <defs>
+          <mask id="lineMdCheckAll0">
+            <g
+              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"
+                />
+              </path>
+              <path
+                stroke="#000"
+                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"
+              >
+                <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)"
+        />
+      </svg>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.icon-enter-active,
+.icon-leave-active {
+  @apply transition duration-300;
+}
+
+.icon-enter-from,
+.icon-leave-to {
+  @apply opacity-0;
+}
+</style>

app/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
-           bg-inherit cursor-pointer select-none transition duration-200
-           hover:border-primary-300 dark:hover:border-primary-800 overflow-hidden"
+    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"
     @click="inputRef?.click()"
     @dragover.prevent="dragover = true"
     @dragleave.prevent="dragover = false"
-    @drop.prevent="$event => {
-      dragover = false
-      if (!$event.dataTransfer?.files) return
-      onIncomeFiles($event.dataTransfer?.files)
-    }"
+    @drop.prevent="
+      ($event) => {
+        dragover = false
+        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'"
-              class="text-neutral-500 dark:text-neutral-400"/>
+        <Icon
+          :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="() => {
-            selectedFiles = []
-            inputRef!.value = ''
-          }"
+          @click.stop="
+            () => {
+              selectedFiles = []
+              inputRef!.value = ''
+            }
+          "
         >
-          <Icon name="i-tabler-x"/>
+          <Icon name="i-tabler-x" />
         </UButton>
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

app/components/uni/Icon/CircleError.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    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"
+        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>

app/components/uni/Icon/CircleInfo.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    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>
+  </svg>
+</template>

app/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">
-    <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
+  <svg
+    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"
-        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>
+      <path
+        fill="currentColor"
+        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>
+</template>

app/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">
-    <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
+  <svg
+    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"
-        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>
+      <path
+        fill="currentColor"
+        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>
+</template>

app/components/uni/Icon/Spinner.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    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>
+    <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>

app/components/uni/Input/index.vue

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

app/components/uni/Message/Provider.vue

@@ -1,24 +1,32 @@
 <script lang="ts" setup>
-
-import type {Message, MessageApi, MessageProviderApi, MessageType} from "~/components/uni/Message/index";
+import type {
+  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 {max} = props
+const createMessage = (
+  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 {

app/components/uni/Message/index.d.ts

@@ -17,4 +17,4 @@ export type MessageApi = {
   warning: (content: string, duration?: number) => void
   error: (content: string, duration?: number) => void
   destroyAll: () => void
-}
+}

app/components/uni/Message/index.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type {
+  Message,
+  MessageProviderApi,
+} from '~/components/uni/Message/index'
+
+const providerApi = inject<MessageProviderApi>('uni-message-provider')
+
+const props = defineProps({
+  message: {
+    require: true,
+    type: Object,
+  },
+})
+
+const message = ref<Message>(props.message as Message)
+
+onMounted(() => {
+  setTimeout(() => {
+    providerApi?.destroy(message.value.id)
+  }, message.value?.duration || 3000)
+})
+</script>
+
+<template>
+  <div
+    class="message"
+    :class="{
+      '!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
+      '!text-emerald-500 !border-emerald-400 !bg-emerald-50':
+        message.type === 'success',
+      '!text-orange-500 !border-orange-400 !bg-orange-50':
+        message.type === 'warning',
+      '!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
+      [message.type]: message.type,
+    }"
+  >
+    <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>
+  </div>
+</template>
+
+<style scoped>
+.message {
+  min-width: 80px;
+  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, 0.2);
+}
+
+.message.success {
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
+}
+
+.message.warning {
+  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
+}
+
+.message.error {
+  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
+}
+</style>

app/components/uni/Select/index.d.ts

@@ -3,4 +3,4 @@ type SelectItem = {
   value: string
   icon?: string
   disabled?: boolean
-}
+}

app/components/uni/Select/index.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { computed, type PropType } from 'vue'
+
+const emit = defineEmits(['input', 'change', 'update:modelValue'])
+const props = defineProps({
+  label: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  modelValue: {
+    type: [String, Number],
+    required: false,
+  },
+  items: {
+    type: Array as PropType<SelectItem[]>,
+    required: true,
+  },
+  justify: {
+    type: String as PropType<'start' | 'end'>,
+    required: false,
+    default: 'end',
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  align: {
+    type: String as PropType<'bottom' | 'top'>,
+    required: false,
+    default: 'bottom',
+  },
+})
+
+const selectWrapperRef = ref()
+const selectRef = ref()
+const optionsRef = ref()
+
+const optionsAlign = computed(() => {
+  switch (props.align) {
+    case 'bottom':
+      return 'top-full mt-2'
+    case 'top':
+      return 'bottom-full mb-2'
+  }
+})
+const hasAnyIcon = computed(() => props.items.some((item) => item.icon))
+const selectedItem = computed(
+  () =>
+    props.items.find((item) => item.value === props.modelValue) as SelectItem
+)
+const optionsExpanded = ref(false)
+const selectedIconFlag = ref(true)
+
+const handleSelectClick = () => {
+  optionsExpanded.value = !optionsExpanded.value
+}
+const handleOptionSelect = (option: SelectItem) => {
+  emit('input', option.value)
+  emit('change', option.value)
+  emit('update:modelValue', option.value)
+  selectedIconFlag.value = false
+  nextTick(() => {
+    selectedIconFlag.value = true
+  })
+}
+
+onMounted(() => {
+  selectRef.value.ownerDocument.addEventListener(
+    'click',
+    (e: { target: any }) => {
+      if (optionsExpanded && !selectRef?.value?.contains(e.target)) {
+        optionsExpanded.value = false
+      }
+    }
+  )
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col space-y-1"
+    :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"
+    >
+      <button
+        class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 shadow-sm"
+        :class="{
+          '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"
+      >
+        <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>
+        </Transition>
+        <Icon
+          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 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,
+        }"
+        ref="optionsRef"
+      >
+        <div
+          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"
+          v-for="(option, index) in items"
+          :key="index"
+          :class="{
+            '!bg-neutral-200 dark:!bg-neutral-700 hover:!bg-neutral-200 dark:hover:!bg-neutral-700':
+              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>
+  </div>
+</template>
+
+<style scoped>
+.select-item-enter-active,
+.select-item-leave-active {
+  transition: all 0.15s ease;
+}
+
+.select-item-enter-from,
+.select-item-leave-to {
+  opacity: 0.5;
+  filter: blur(2px);
+}
+</style>

app/components/uni/TextArea/index.vue

@@ -0,0 +1,136 @@
+import { textarea } from '@nuxt/ui';
+<script lang="ts" setup>
+const emit = defineEmits(['input', 'change', 'update:modelValue'])
+const props = defineProps({
+  label: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  justify: {
+    type: String as PropType<'start' | 'end'>,
+    required: false,
+    default: 'end',
+  },
+  pattern: {
+    type: [String, RegExp],
+    required: false,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  rows: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  minRows: {
+    type: Number,
+    required: false,
+  },
+})
+
+const textAreaRef = ref()
+const inputValue = ref(props.modelValue)
+const isError = ref(false)
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    inputValue.value = value
+    if (props.pattern && value) {
+      const pattern =
+        typeof props.pattern === 'string'
+          ? 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
+    isError.value = !pattern.test(value)
+    pattern.lastIndex = 0
+    inputValue.value = value
+    if (isError.value) return
+  }
+
+  inputValue.value = value
+  isError.value = false
+
+  emit('update:modelValue', e.target.value)
+  emit('input', e)
+}
+
+const autosize = (e: any) => {
+  const el = e?.target ? e.target : e
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
+}
+
+onMounted(() => {
+  if (props.minRows) {
+    const textarea = textAreaRef.value
+    textarea?.addEventListener('keydown', autosize)
+    textarea?.addEventListener('input', autosize)
+    textarea?.addEventListener('focus', autosize)
+    autosize(textarea)
+  }
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col space-y-1"
+    :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 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"
+        :rows="minRows || rows"
+        ref="textAreaRef"
+        :class="{
+          '!border-red-500': isError,
+          '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>
+
+<style scoped></style>

app/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) => {
-  checked.value = value
-})
+watch(
+  () => 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="{
+    class="relative flex items-center rounded-lg bg-neutral-100 dark:bg-neutral-800 shadow-inner transition ease-in-out group outline-none"
+    :class="{
       '!bg-green-400 dark:!bg-green-400/50': checked,
       [buttonSizeClass]: buttonSizeClass,
-      [buttonPaddingClass]: buttonPaddingClass
-    }" @click="handleCheck">
+      [buttonPaddingClass]: buttonPaddingClass,
+    }"
+    @click="handleCheck"
+  >
     <span
-        class="aspect-[1/1] translate-x-0 transition ease-in-out bg-white dark:bg-black rounded-md shadow duration-300 group-active:scale-90"
-        :class="{
-      '!shadow-lg': checked,
-      'group-active:translate-x-3 group-active:duration-500': !checked,
-      [bulletSizeClass]: bulletSizeClass,
-      [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">
-          <slot v-if="checked" name="on-icon"/>
-          <slot v-else name="off-icon"/>
+      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="{
+        '!shadow-lg': checked,
+        'group-active:translate-x-3 group-active:duration-500': !checked,
+        [bulletSizeClass]: bulletSizeClass,
+        [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"
+        >
+          <slot
+            v-if="checked"
+            name="on-icon"
+          />
+          <slot
+            v-else
+            name="off-icon"
+          />
         </Transition>
       </span>
     </span>
@@ -130,4 +148,4 @@ watch(() => props.modelValue, (value) => {
   opacity: 0;
   transform: scale(0.5);
 }
-</style>
+</style>

app/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 {
@@ -25,4 +27,4 @@ export const fetchCourseSubtitleUrl = async (course: resp.gen.CourseGenItem) =>
   } catch (err) {
     return course.subtitle_url
   }
-}
+}

app/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)
-}
+}

app/composables/useDefer.ts

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

app/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

app/composables/useFetchWrapped.ts

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

app/composables/useFormPayload.ts

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

app/composables/useHistory.ts

@@ -0,0 +1,32 @@
+import type { ResultBlockMeta } from '~/components/aigc/drawing'
+import type { ChatSession } from '~/typings/llm'
+
+export interface HistoryItem {
+  fid: string
+  data_id?: string
+  prompt: string
+  meta: ResultBlockMeta
+  images?: string[]
+}
+
+export const useHistory = defineStore(
+  'xsh_assistant_aigc_history',
+  () => {
+    const text2img = ref<HistoryItem[]>([])
+    const chatSessions = ref<ChatSession[]>([])
+    const setChatSessions = (sessions: ChatSession[]) => {
+      chatSessions.value = sessions
+    }
+
+    return {
+      text2img,
+      chatSessions,
+      setChatSessions,
+    }
+  },
+  {
+    persist: {
+      storage: piniaPluginPersistedstate.localStorage(),
+    },
+  }
+)

app/composables/useLLM.ts

@@ -0,0 +1,50 @@
+import {
+  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) => {
+    const { modelTag } = options
+    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) => ({
+            role: c.role,
+            content: c.content,
+          }))
+      ),
+    })
+      .then((res) => {
+        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')
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })

app/composables/useLoginState.ts

@@ -0,0 +1,79 @@
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
+
+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) => {
+        if (!token.value) return resolve(false)
+        useFetchWrapped<AuthedRequest, BaseResponse<resp.user.CheckSession>>(
+          'App.User_User.CheckSession',
+          {
+            token: token.value,
+            user_id: user.value.id,
+          }
+        )
+          .then((res) => {
+            if (res.ret !== 200) {
+              resolve(false)
+              return
+            }
+            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) => {
+        if (!token.value) return reject('token is empty')
+        useFetchWrapped<AuthedRequest, BaseResponse<resp.user.Profile>>(
+          'App.User_User.Profile',
+          {
+            token: token.value,
+            user_id: user.value.id,
+          }
+        )
+          .then((res) => {
+            if (res.ret !== 200) {
+              reject(res.msg || '未知错误')
+              return
+            }
+            user.value = res.data.profile
+            resolve(res.data.profile)
+          })
+          .catch((err) => reject(err || '未知错误'))
+      })
+    }
+
+    const logout = () =>
+      new Promise<void>((resolve) => {
+        token.value = null
+        user.value = {} as UserSchema
+        is_logged_in.value = false
+        resolve()
+      })
+
+    return {
+      is_logged_in,
+      token,
+      user,
+      checkSession,
+      updateProfile,
+      logout,
+    }
+  },
+  {
+    persist: {
+      key: 'xsh_assistant_persisted_state',
+      storage: piniaPluginPersistedstate.localStorage(),
+      pick: ['is_logged_in', 'token', 'user'],
+    },
+  }
+)

app/composables/useTourState.ts

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

app/composables/useVideoBackgroundCompositing.ts

@@ -51,7 +51,7 @@ const calculateScaledDimensions = (
   return { width: finalWidth, height: targetHeight }
 }
 
-export type CompositingPhase = 
+export type CompositingPhase =
   | 'loading'
   | 'analyzing'
   | 'preparing'
@@ -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(
-      backgroundData
-    )
+    const { width: bgWidth, height: bgHeight } =
+      await getImageDimensions(backgroundData)
     console.log(
       `[Compositing] Background image dimensions: ${bgWidth}x${bgHeight}`
     )

app/composables/useVideoSubtitleEmbedding.ts

@@ -3,28 +3,28 @@ import {
   EmbedSubtitlesClip,
   MP4Clip,
   OffscreenSprite,
-} from "@webav/av-cliper";
+} from '@webav/av-cliper'
 
 export interface SubtitleEmbeddingOptions {
-  color?: string;
-  textBgColor?: string | null;
-  type?: "srt";
-  fontFamily?: string;
-  fontSize?: number;
-  letterSpacing?: string | null;
-  bottomOffset?: number;
-  strokeStyle?: string;
-  lineWidth?: number | null;
-  lineCap?: CanvasLineCap | null;
-  lineJoin?: CanvasLineJoin | null;
+  color?: string
+  textBgColor?: string | null
+  type?: 'srt'
+  fontFamily?: string
+  fontSize?: number
+  letterSpacing?: string | null
+  bottomOffset?: number
+  strokeStyle?: string
+  lineWidth?: number | null
+  lineCap?: CanvasLineCap | null
+  lineJoin?: CanvasLineJoin | null
   textShadow?: {
-    offsetX: number;
-    offsetY: number;
-    blur: number;
-    color: string;
-  };
-  videoWidth?: number;
-  videoHeight?: number;
+    offsetX: number
+    offsetY: number
+    blur: number
+    color: string
+  }
+  videoWidth?: number
+  videoHeight?: number
 }
 
 export const useVideoSubtitleEmbedding = async (
@@ -36,18 +36,18 @@ export const useVideoSubtitleEmbedding = async (
     options = {
       videoWidth: 1920,
       videoHeight: 1080,
-    };
+    }
   }
 
   console.log(`video clip: ${videoUrl}`)
-  
+
   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(srtSprite);
+  await combinator.addSprite(videoSprite)
+  await combinator.addSprite(srtSprite)
 
   const srcBlob = URL.createObjectURL(
     await new Response(combinator.output()).blob()
-  );
+  )
 
-  return srcBlob;
-};
+  return srcBlob
+}

app/layouts/default.vue

@@ -135,20 +135,20 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="relative grid w-full min-h-screen">
+  <div class="relative grid min-h-screen w-full">
     <header>
       <h1 class="inline-flex flex-col">
-        <span class="text-lg text-neutral-600 dark:text-neutral-300 font-bold">
+        <span class="text-lg font-bold text-neutral-600 dark:text-neutral-300">
           AIGC 微课视频研创平台
         </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
@@ -198,7 +198,7 @@ onMounted(async () => {
                   </UBadge>
                 </p>
                 <p
-                  class="truncate whitespace-nowrap max-w-40 font-medium text-gray-900 dark:text-white"
+                  class="max-w-40 truncate whitespace-nowrap font-medium text-gray-900 dark:text-white"
                 >
                   {{ loginState.user?.username }}
                 </p>
@@ -208,7 +208,7 @@ onMounted(async () => {
               <span class="truncate">{{ item.label }}</span>
               <UIcon
                 :name="item.icon"
-                class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"
+                class="ms-auto size-4 flex-shrink-0 text-gray-400 dark:text-gray-500"
               />
             </template>
           </UDropdown>
@@ -230,7 +230,7 @@ onMounted(async () => {
 
 <style>
 body {
-  @apply bg-neutral-50 dark:bg-neutral-950 bg-fixed;
+  @apply bg-neutral-50 bg-fixed dark:bg-neutral-950;
   /* @apply bg-[url('~/assets/background-pattern.svg')] dark:bg-[url('~/assets/background-pattern-dark.svg')]; */
 }
 
@@ -271,10 +271,10 @@ body {
 
 <style scoped>
 header {
-  @apply fixed inset-x-0 h-16 bg-white border-b z-30;
-  @apply dark:bg-neutral-900 dark:border-neutral-800;
+  @apply fixed inset-x-0 z-30 h-16 border-b bg-white;
+  @apply dark:border-neutral-800 dark:bg-neutral-900;
   @apply flex flex-row items-center justify-between px-4;
-  @apply bg-opacity-50 dark:bg-opacity-50 backdrop-blur-3xl backdrop-saturate-150;
+  @apply bg-opacity-50 backdrop-blur-3xl backdrop-saturate-150 dark:bg-opacity-50;
 }
 
 main {
@@ -282,8 +282,8 @@ main {
 }
 
 footer {
-  @apply h-16 bg-white border-t z-30;
-  @apply dark:bg-neutral-900 dark:border-neutral-800;
+  @apply z-30 h-16 border-t bg-white;
+  @apply dark:border-neutral-800 dark:bg-neutral-900;
   @apply flex flex-row items-center justify-between px-4;
 }
 </style>

app/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 ? {
-        ...s,
-        last_input: user_input.value,
-      } : s))
+      setChatSessions(
+        chatSessions.value.map((s) =>
+          s.id === currentSessionId.value
+            ? {
+                ...s,
+                last_input: user_input.value,
+              }
+            : s
+        )
+      )
       user_input.value = ''
       // 切换到指定 ID 会话
       currentSessionId.value = chatSessionId
       // 恢复输入
       user_input.value = getSessionCopyById(chatSessionId)?.last_input || ''
       // 清除已恢复的输入
-      setChatSessions(chatSessions.value.map(s => s.id === chatSessionId ? {
-        ...s,
-        last_input: '',
-      } : s))
-    } else { // 切换到第一个会话
+      setChatSessions(
+        chatSessions.value.map((s) =>
+          s.id === chatSessionId
+            ? {
+                ...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 ? {
-    id: sessionId,
-    subject: '新对话',
-    messages: [],
-    create_at: dayjs().unix(),
-    assistant,
-  } : {
-    id: sessionId,
-    subject: '新对话',
-    messages: [],
-    create_at: dayjs().unix(),
-  }
+  const newChat = !!assistant
+    ? {
+        id: sessionId,
+        subject: '新对话',
+        messages: [],
+        create_at: dayjs().unix(),
+        assistant,
+      }
+    : {
+        id: sessionId,
+        subject: '新对话',
+        messages: [],
+        create_at: dayjs().unix(),
+      }
   // 插入新会话数据
-  setChatSessions([
-    newChat,
-    ...chatSessions.value,
-  ])
+  setChatSessions([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 ? {
-    ...s,
-    messages: [
-      ...s.messages,
-      message,
-    ],
-  } : s))
+  setChatSessions(
+    chatSessions.value.map((s) =>
+      s.id === currentSessionId.value
+        ? {
+            ...s,
+            messages: [...s.messages, message],
+          }
+        : s
+    )
+  )
   scrollToMessageListBottom()
   return message.id
 }
 
-const getMessages = () => getSessionCopyById(currentSessionId.value!)?.messages || []
+const getMessages = () =>
+  getSessionCopyById(currentSessionId.value!)?.messages || []
 
 const modifyMessageContent = (
-    messageId: ChatMessageId,
-    content: string,
-    interrupted: boolean = false,
-    updateTime: boolean = true,
+  messageId: ChatMessageId,
+  content: string,
+  interrupted: boolean = false,
+  updateTime: boolean = true
 ) => {
-  setChatSessions(chatSessions.value.map(s => s.id === currentSessionId.value ? {
-    ...s,
-    messages: s.messages.map(m => m.id === messageId ? {
-      ...m,
-      content,
-      interrupted,
-      create_at: updateTime ? dayjs().unix() : m.create_at,
-    } : m),
-  } : s))
+  setChatSessions(
+    chatSessions.value.map((s) =>
+      s.id === currentSessionId.value
+        ? {
+            ...s,
+            messages: s.messages.map((m) =>
+              m.id === messageId
+                ? {
+                    ...m,
+                    content,
+                    interrupted,
+                    create_at: updateTime ? dayjs().unix() : m.create_at,
+                  }
+                : m
+            ),
+          }
+        : s
+    )
+  )
   scrollToMessageListBottom()
 }
 
@@ -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]
-               shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
-        :class="{'translate-x-0': showSidebar}"
+      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px] shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
+      :class="{ 'translate-x-0': showSidebar }"
     >
       <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
         <!-- list -->
@@ -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">
-                  <Icon name="i-tabler-messages" class="text-2xl"/>
+                <div
+                  class="text-center text-neutral-400 dark:text-neutral-500 py-4 flex flex-col items-center gap-2"
+                >
+                  <Icon
+                    name="i-tabler-messages"
+                    class="text-2xl"
+                  />
                   <span>没有会话</span>
                 </div>
               </div>
               <ChatItem
-                  v-for="session in chatSessions"
-                  :chat-session="session" :key="session.id"
-                  :active="session.id === currentSessionId"
-                  @click="selectCurrentSessionId(session.id)"
-                  @remove="() => {
-                  chatSessions.splice(chatSessions.findIndex(s => s.id === session.id), 1)
-                  session.id === currentSessionId && selectCurrentSessionId()
-                }"
+                v-for="session in chatSessions"
+                :chat-session="session"
+                :key="session.id"
+                :active="session.id === currentSessionId"
+                @click="selectCurrentSessionId(session.id)"
+                @remove="
+                  () => {
+                    chatSessions.splice(
+                      chatSessions.findIndex((s) => s.id === session.id),
+                      1
+                    )
+                    session.id === currentSessionId && selectCurrentSessionId()
+                  }
+                "
               />
             </TransitionGroup>
           </ClientOnly>
@@ -289,10 +334,10 @@ onMounted(() => {
         <div></div>
         <div>
           <UButton
-              color="white"
-              variant="solid"
-              icon="i-tabler-message-circle-plus"
-              @click="handleClickCreateSession"
+            color="white"
+            variant="solid"
+            icon="i-tabler-message-circle-plus"
+            @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 name="message" mode="out-in">
-        <div v-if="!loginState.is_logged_in" class="w-full h-full">
-          <div class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
-            <Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
-            <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
-            <UButton class="mt-2 font-bold" color="black" variant="solid" size="xs"
-                     @click="modal.open(ModalAuthentication)">
+      <Transition
+        name="message"
+        mode="out-in"
+      >
+        <div
+          v-if="!loginState.is_logged_in"
+          class="w-full h-full"
+        >
+          <div
+            class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
+          >
+            <Icon
+              name="i-tabler-user-circle"
+              class="text-7xl text-neutral-300 dark:text-neutral-700"
+            />
+            <p class="text-sm text-neutral-500 dark:text-neutral-400">
+              请登录后使用
+            </p>
+            <UButton
+              class="mt-2 font-bold"
+              color="black"
+              variant="solid"
+              size="xs"
+              @click="modal.open(ModalAuthentication)"
+            >
               登录
             </UButton>
           </div>
         </div>
         <NewSessionScreen
-            v-else-if="modals.newSessionScreen || getSessionCopyById(currentSessionId!) === undefined"
-            :non-back="!getSessionCopyById(currentSessionId!)"
-            @select="createSession"
-            @cancel="modals.newSessionScreen = false"
+          v-else-if="
+            modals.newSessionScreen ||
+            getSessionCopyById(currentSessionId!) === undefined
+          "
+          :non-back="!getSessionCopyById(currentSessionId!)"
+          @select="createSession"
+          @cancel="modals.newSessionScreen = false"
         />
         <div
-            v-else
-            class="w-full h-full flex flex-col"
+          v-else
+          class="w-full h-full flex flex-col"
         >
           <div
-              class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2">
+            class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2"
+          >
             <UButton
-                class="md:hidden"
-                color="black"
-                variant="ghost"
-                icon="i-tabler-menu-2"
-                @click="showSidebar = !showSidebar"
-            >
-            </UButton>
-            <h1 class="font-medium">{{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}</h1>
+              class="md:hidden"
+              color="black"
+              variant="ghost"
+              icon="i-tabler-menu-2"
+              @click="showSidebar = !showSidebar"
+            ></UButton>
+            <h1 class="font-medium">
+              {{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}
+            </h1>
           </div>
-          <div ref="messagesWrapperRef" class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
+          <div
+            ref="messagesWrapperRef"
+            class="flex-1 flex flex-col overflow-auto overflow-x-hidden"
+          >
             <div class="flex flex-col gap-8 px-4 py-8">
               <TransitionGroup name="message">
                 <Message
-                    v-for="message in getMessages() || []"
-                    :message="message"
-                    :key="message.id"
+                  v-for="message in getMessages() || []"
+                  :message="message"
+                  :key="message.id"
                 />
               </TransitionGroup>
             </div>
           </div>
           <ClientOnly>
             <div
-                class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50">
-              <div class="flex items-center gap-2 overflow-auto overflow-y-hidden">
-                <button class="chat-option-btn" @click="modals.modelSelect = true">
-                  <Icon name="tabler:box"/>
+              class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50"
+            >
+              <div
+                class="flex items-center gap-2 overflow-auto overflow-y-hidden"
+              >
+                <button
+                  class="chat-option-btn"
+                  @click="modals.modelSelect = true"
+                >
+                  <Icon name="tabler:box" />
                   <span class="text-xs">
-                    {{ llmModels.find(m => m.tag === currentModel)?.name.toUpperCase() || '模型' }}
+                    {{
+                      llmModels
+                        .find((m) => m.tag === currentModel)
+                        ?.name.toUpperCase() || '模型'
+                    }}
                   </span>
                 </button>
                 <button
-                    v-if="currentAssistant?.tpl_name"
-                    class="chat-option-btn"
+                  v-if="currentAssistant?.tpl_name"
+                  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"
-                    size="lg"
-                    autoresize
-                    :rows="5"
-                    :maxrows="12"
-                    class="font-sans"
-                    placeholder="Enter 发送, Ctrl + Enter 换行"
-                    @keydown.ctrl.enter="user_input += '\n'"
-                    @keydown.enter.prevent="handleClickSend"
+                  v-model="user_input"
+                  size="lg"
+                  autoresize
+                  :rows="5"
+                  :maxrows="12"
+                  class="font-sans"
+                  placeholder="Enter 发送, Ctrl + Enter 换行"
+                  @keydown.ctrl.enter="user_input += '\n'"
+                  @keydown.enter.prevent="handleClickSend"
                 />
                 <UButton
-                    color="black"
-                    variant="solid"
-                    icon="i-tabler-send-2"
-                    class="absolute bottom-2.5 right-3"
-                    @click.stop="handleClickSend"
+                  color="black"
+                  variant="solid"
+                  icon="i-tabler-send-2"
+                  class="absolute bottom-2.5 right-3"
+                  @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"
-              :key="index"
-              @click="currentModel = llm.tag"
-              class="flex flex-col gap-2 justify-center items-center w-full aspect-[1/1] border-2 rounded-xl cursor-pointer transition duration-150 select-none"
-              :class="llm.tag === currentModel ? 'border-primary shadow-xl bg-primary text-white' : 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'"
+            v-for="(llm, index) in llmModels"
+            :key="index"
+            @click="currentModel = llm.tag"
+            class="flex flex-col gap-2 justify-center items-center w-full aspect-[1/1] border-2 rounded-xl cursor-pointer transition duration-150 select-none"
+            :class="
+              llm.tag === currentModel
+                ? 'border-primary shadow-xl bg-primary text-white'
+                : 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'
+            "
           >
-            <Icon v-if="llm?.icon" :name="llm.icon" class="text-4xl opacity-80"/>
+            <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">
-            <UButton>
-              确定
-            </UButton>
+          <div
+            class="flex justify-end items-center"
+            @click="modals.modelSelect = false"
+          >
+            <UButton>确定</UButton>
           </div>
         </template>
       </UCard>
     </UModal>
-
   </div>
 </template>
 
@@ -460,4 +551,4 @@ onMounted(() => {
   @apply bg-white border border-neutral-300 shadow-sm hover:shadow-card;
   @apply dark:bg-neutral-800 dark:border-neutral-600;
 }
-</style>
+</style>

app/pages/aigc/draw/index.vue

@@ -0,0 +1,557 @@
+<script lang="ts" setup>
+import OptionBlock from '~/components/aigc/drawing/OptionBlock.vue'
+import ResultBlock from '~/components/aigc/drawing/ResultBlock.vue'
+import { useLoginState } from '~/composables/useLoginState'
+import ModalAuthentication from '~/components/ModalAuthentication.vue'
+import { type InferType, number, object, string } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+import RatioSelector from '~/components/aigc/RatioSelector.vue'
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
+import type { ResultBlockMeta } from '~/components/aigc/drawing'
+import { useHistory } from '~/composables/useHistory'
+import { del, set } from 'idb-keyval'
+import ReferenceFigureSelector from '~/components/aigc/ReferenceFigureSelector.vue'
+
+useSeoMeta({
+  title: '绘画',
+})
+
+const toast = useToast()
+const modal = useModal()
+const dayjs = useDayjs()
+const history = useHistory()
+const loginState = useLoginState()
+
+const leftSection = ref<HTMLElement | null>(null)
+const leftHandler = ref<HTMLElement | null>(null)
+const showSidebar = ref(false)
+
+const generating = ref(false)
+
+const handle_stick_mousedown = (
+  e: MouseEvent,
+  min: number = 240,
+  max: number = 400
+) => {
+  const handler = leftHandler.value
+  if (handler) {
+    const startX = e.clientX
+    const startWidth = handler.parentElement?.offsetWidth || 0
+    const handle_mousemove = (e: MouseEvent) => {
+      let newWidth = startWidth + e.clientX - startX
+      if (newWidth < min || newWidth > max) {
+        newWidth = Math.min(Math.max(newWidth, min), max)
+      }
+      handler.parentElement!.style.width = `${newWidth}px`
+    }
+    const handle_mouseup = () => {
+      leftSection.value?.classList.add('transition-all')
+      leftHandler.value?.lastElementChild?.classList.remove(
+        'bg-indigo-300',
+        'dark:bg-indigo-700',
+        'w-[3px]'
+      )
+      window.removeEventListener('mousemove', handle_mousemove)
+      window.removeEventListener('mouseup', handle_mouseup)
+    }
+    leftSection.value?.classList.remove('transition-all')
+    leftHandler.value?.lastElementChild?.classList.add(
+      'bg-indigo-300',
+      'dark:bg-indigo-700',
+      'w-[3px]'
+    )
+    window.addEventListener('mousemove', handle_mousemove)
+    window.addEventListener('mouseup', handle_mouseup)
+  }
+}
+
+const defaultRatios = [
+  {
+    ratio: '1:1',
+    value: '768:768',
+  },
+  {
+    ratio: '4:3',
+    value: '1024:768',
+  },
+  {
+    ratio: '3:4',
+    value: '768:1024',
+  },
+]
+
+interface StyleItem {
+  label: string
+  value: number
+  avatar?: { src: string }
+}
+
+const defaultStyles: StyleItem[] = [
+  {
+    label: '通用写实风格',
+    value: 401,
+  },
+  {
+    label: '日系动漫',
+    value: 201,
+  },
+  {
+    label: '科幻风格',
+    value: 114,
+  },
+  {
+    label: '怪兽风格',
+    value: 202,
+  },
+  {
+    label: '唯美古风',
+    value: 203,
+  },
+  {
+    label: '复古动漫',
+    value: 204,
+  },
+  {
+    label: '游戏卡通手绘',
+    value: 301,
+  },
+  {
+    label: '水墨画',
+    value: 101,
+  },
+  {
+    label: '概念艺术',
+    value: 102,
+  },
+  {
+    label: '水彩画',
+    value: 104,
+  },
+  {
+    label: '像素画',
+    value: 105,
+  },
+  {
+    label: '厚涂风格',
+    value: 106,
+  },
+  {
+    label: '插图',
+    value: 107,
+  },
+  {
+    label: '剪纸风格',
+    value: 108,
+  },
+  {
+    label: '印象派',
+    value: 119,
+  },
+  {
+    label: '印象派（莫奈）',
+    value: 109,
+  },
+  {
+    label: '油画',
+    value: 103,
+  },
+  {
+    label: '油画（梵高）',
+    value: 118,
+  },
+  {
+    label: '古典肖像画',
+    value: 111,
+  },
+  {
+    label: '黑白素描画',
+    value: 112,
+  },
+  {
+    label: '赛博朋克',
+    value: 113,
+  },
+  {
+    label: '暗黑风格',
+    value: 115,
+  },
+  {
+    label: '蒸汽波',
+    value: 117,
+  },
+  {
+    label: '2.5D',
+    value: 110,
+  },
+  {
+    label: '3D',
+    value: 116,
+  },
+]
+const img2imgStyles: StyleItem[] = [
+  {
+    label: '水彩画',
+    value: 106,
+  },
+  {
+    label: '2.5D',
+    value: 110,
+  },
+  {
+    label: '日系动漫',
+    value: 201,
+  },
+  {
+    label: '美系动漫',
+    value: 202,
+  },
+  {
+    label: '唯美古风',
+    value: 203,
+  },
+]
+
+const defaultFormSchema = object({
+  prompt: string().required('请输入提示词'),
+  negative_prompt: string(),
+  resolution: string().required('请选择分辨率'),
+  styles: object<StyleItem>({
+    label: string(),
+    value: number(),
+  }).required('请选择风格'),
+  file: string().nullable(),
+})
+
+type DefaultFormSchema = InferType<typeof defaultFormSchema>
+
+const defaultFormState = reactive({
+  prompt: '',
+  negative_prompt: '',
+  resolution: '1024:768',
+  styles: defaultStyles.find((item) => item.value === 401),
+  file: null,
+})
+watch(
+  () => defaultFormState.file,
+  (newVal) => {
+    if (newVal) {
+      defaultFormState.styles = img2imgStyles[0]
+    } else {
+      defaultFormState.styles = defaultStyles.find((item) => item.value === 401)
+    }
+  }
+)
+
+const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
+  if (!loginState.is_logged_in) {
+    modal.open(ModalAuthentication)
+    return
+  }
+  generating.value = true
+  const styleItem = event.data.styles as StyleItem
+  if (!event.data.file) delete event.data.file
+  // generate a uuid
+  const fid = Math.random().toString(36).substring(2)
+  const meta: ResultBlockMeta = {
+    cost: '1000',
+    modal: '混元大模型',
+    style: styleItem.label,
+    ratio: event.data.resolution,
+    datetime: dayjs().unix(),
+    type: event.data.file ? '智能图生图' : '智能文生图',
+  }
+  history.text2img.unshift({
+    fid,
+    meta,
+    prompt: event.data.prompt,
+  })
+  useFetchWrapped<
+    (HunYuan.Text2Img.req | HunYuan.Img2Img.req) & AuthedRequest,
+    BaseResponse<HunYuan.resp>
+  >(
+    event.data.file
+      ? 'App.Assistant_HunYuan.TenImgToImg'
+      : 'App.Assistant_HunYuan.TenTextToImg',
+    {
+      token: loginState.token as string,
+      user_id: loginState.user.id,
+      device_id: 'web',
+      ...event.data,
+      styles: styleItem.value,
+    }
+  )
+    .then((res) => {
+      if (res.ret !== 200) {
+        toast.add({
+          title: '生成失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        history.text2img = history.text2img.filter((item) => item.fid !== fid)
+        return
+      }
+      history.text2img = history.text2img.map((item) => {
+        if (item.fid === fid) {
+          set(`${item.fid}`, [
+            `data:image/png;base64,${res.data.request_image}`,
+          ])
+          item.meta = {
+            ...item.meta,
+            id: res.data.data_id as string,
+          }
+        }
+        return item
+      })
+    })
+    .catch((err) => {
+      toast.add({
+        title: '生成失败',
+        description: err.msg || '网络错误',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+    })
+    .finally(() => {
+      generating.value = false
+    })
+}
+</script>
+
+<template>
+  <div class="w-full flex relative">
+    <div
+      ref="leftSection"
+      :class="{ 'translate-x-0': showSidebar }"
+      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
+      style="width: 320px"
+    >
+      <div
+        ref="leftHandler"
+        class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
+        @dblclick="leftSection?.style.setProperty('width', '320px')"
+        @mousedown.prevent="handle_stick_mousedown"
+      >
+        <span
+          class="w-[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"
+      >
+        <UButton
+          color="black"
+          icon="i-tabler-brush"
+          size="lg"
+          square
+          @click="showSidebar = !showSidebar"
+        ></UButton>
+      </div>
+      <div class="h-full flex flex-col overflow-y-auto">
+        <UForm
+          :schema="defaultFormSchema"
+          :state="defaultFormState"
+          @submit="onDefaultFormSubmit"
+        >
+          <div class="flex flex-col gap-2 p-4 pb-28">
+            <OptionBlock
+              comment="Prompts"
+              icon="i-tabler-article"
+              label="提示词"
+            >
+              <UFormGroup name="prompt">
+                <UTextarea
+                  v-model="defaultFormState.prompt"
+                  :rows="2"
+                  autoresize
+                  placeholder="请输入提示词，每个提示词之间用英文逗号隔开"
+                  resize
+                />
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock
+              comment="Negative Prompts"
+              icon="i-tabler-article-off"
+              label="负面提示词"
+            >
+              <UFormGroup name="negative_prompt">
+                <UTextarea
+                  v-model="defaultFormState.negative_prompt"
+                  :rows="2"
+                  autoresize
+                  placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
+                  resize
+                />
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock
+              icon="i-tabler-library-photo"
+              label="参考图片"
+            >
+              <UFormGroup name="input_image">
+                <ReferenceFigureSelector
+                  :value="defaultFormState.file"
+                  text="选择参考图片"
+                  text-on-select="已选择参考图"
+                  @update="
+                    (file) => {
+                      defaultFormState.file = file
+                    }
+                  "
+                />
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock
+              icon="i-tabler-photo-hexagon"
+              label="图片风格"
+            >
+              <UFormGroup name="styles">
+                <USelectMenu
+                  v-model="defaultFormState.styles"
+                  :options="
+                    defaultFormState.file ? img2imgStyles : defaultStyles
+                  "
+                ></USelectMenu>
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock
+              icon="i-tabler-article-off"
+              label="图片比例"
+            >
+              <UFormGroup name="resolution">
+                <RatioSelector
+                  v-model="defaultFormState.resolution"
+                  :ratios="defaultRatios"
+                />
+              </UFormGroup>
+            </OptionBlock>
+          </div>
+          <div
+            class="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2 bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400 dark:border-neutral-700"
+          >
+            <UButton
+              :loading="generating"
+              block
+              class="font-bold"
+              color="indigo"
+              size="lg"
+              type="submit"
+            >
+              {{ generating ? '生成中' : '生成' }}
+            </UButton>
+            <p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
+              生成即代表您同意
+              <a
+                class="underline underline-offset-2"
+                href="#"
+                target="_blank"
+              >
+                用户许可协议
+              </a>
+            </p>
+          </div>
+        </UForm>
+      </div>
+    </div>
+    <ClientOnly>
+      <div
+        class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto"
+      >
+        <div
+          v-if="!loginState.is_logged_in"
+          class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
+        >
+          <Icon
+            class="text-7xl text-neutral-300 dark:text-neutral-700"
+            name="i-tabler-user-circle"
+          />
+          <p class="text-sm text-neutral-500 dark:text-neutral-400">
+            请登录后使用
+          </p>
+          <UButton
+            class="mt-2 font-bold"
+            color="black"
+            size="xs"
+            variant="solid"
+            @click="modal.open(ModalAuthentication)"
+          >
+            登录
+          </UButton>
+        </div>
+        <div
+          v-else-if="history.text2img.length === 0"
+          class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
+        >
+          <Icon
+            class="text-7xl text-neutral-300 dark:text-neutral-700"
+            name="i-tabler-photo-hexagon"
+          />
+          <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
+        </div>
+        <ResultBlock
+          v-for="(result, k) in history.text2img"
+          v-else
+          :key="result.fid"
+          :fid="result.fid"
+          :meta="result.meta"
+          :prompt="result.prompt"
+          @use-reference="
+            (file) => {
+              defaultFormState.file = file
+            }
+          "
+        >
+          <template #header-right>
+            <UPopover overlay>
+              <UButton
+                color="black"
+                icon="i-tabler-trash"
+                size="xs"
+                variant="ghost"
+              ></UButton>
+              <template #panel="{ close }">
+                <div class="p-4 flex flex-col gap-4">
+                  <h2 class="text-sm">删除后无法恢复，确定删除？</h2>
+                  <div class="flex items-center justify-end gap-2">
+                    <UButton
+                      class="font-bold"
+                      color="gray"
+                      size="xs"
+                      @click="close"
+                    >
+                      取消
+                    </UButton>
+                    <UButton
+                      class="font-bold"
+                      color="red"
+                      size="xs"
+                      @click="
+                        () => {
+                          history.text2img.splice(k, 1)
+                          del(result.fid)
+                          close()
+                        }
+                      "
+                    >
+                      仍然删除
+                    </UButton>
+                  </div>
+                </div>
+              </template>
+            </UPopover>
+          </template>
+        </ResultBlock>
+        <div
+          class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600"
+        >
+          <UIcon name="i-tabler-info-triangle" />
+          <p class="text-xs font-bold">
+            所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地
+          </p>
+        </div>
+      </div>
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped></style>

app/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"

app/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: '智能生成',
@@ -58,11 +58,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-full flex relative">
+  <div class="relative flex w-full">
     <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] border-r border-neutral-200 dark:border-neutral-700 transition-all duration-300 ease-out"
+      class="absolute z-10 flex h-[calc(100vh-4rem)] w-full -translate-x-full flex-col border-r border-neutral-200 bg-neutral-100 p-4 transition-all duration-300 ease-out md:sticky md:w-[300px] md:translate-x-0 dark:border-neutral-700 dark:bg-neutral-900"
     >
-      <div class="flex flex-col flex-1 overflow-auto overflow-x-hidden">
+      <div class="flex flex-1 flex-col overflow-auto overflow-x-hidden">
         <div class="flex flex-col gap-1">
           <ClientOnly>
             <NavItem
@@ -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>
@@ -101,7 +107,7 @@ onMounted(() => {
 
 .subpage-enter-from,
 .subpage-leave-to {
-  @apply opacity-0 translate-x-4;
+  @apply translate-x-4 opacity-0;
 }
 
 .loading-screen-leave-active {

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

@@ -106,13 +106,13 @@ const isProcessing = ref(false)
 // 处理训练素材：录入系统数字人并分配给用户
 const handleProcessTrain = (item: DigitalHumanTrainItem) => {
   currentTrainItem.value = item
-  
+
   // 预填充表单数据
   processFormState.name = item.dh_name
   processFormState.model_id = undefined
   processFormState.description = `基于${item.organization}提交的训练素材创建`
   processFormState.type = 2
-  
+
   isProcessModalOpen.value = true
 }
 
@@ -147,9 +147,11 @@ 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) {
     toast.add({
       title: '请上传数字人预览图',
@@ -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,38 +303,42 @@ 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
   video.controls = true
   video.className = 'w-full max-h-[60vh]'
-  
+
   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)
   }
-  
+
   videoContainer.appendChild(titleElement)
   videoContainer.appendChild(video)
   videoContainer.appendChild(closeButton)
   videoModal.appendChild(videoContainer)
-  
+
   videoModal.onclick = (e) => {
     if (e.target === videoModal) {
       document.body.removeChild(videoModal)
     }
   }
-  
+
   document.body.appendChild(videoModal)
 }
 </script>
@@ -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>
@@ -571,4 +585,4 @@ const previewVideo = (videoUrl: string, title: string) => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped></style>

app/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-green-600 dark:text-green-400': page.color === 'green',
+                    'text-amber-600 dark:text-amber-400':
+                      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>
@@ -107,4 +118,4 @@ const navigateToPage = (path: string) => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped></style>

app/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
 
   // 预填充表单数据
@@ -157,7 +163,7 @@ const handleProcessTitles = (item: TitlesTemplate & { user_id?: number; to_user_
   processFormState.opening_file = item.opening_file || ''
   processFormState.ending_url = item.ending_url || ''
   processFormState.ending_file = item.ending_file || ''
-  
+
   openingVideoFile.value = null
   openingCoverFile.value = null
   endingVideoFile.value = null
@@ -196,10 +202,10 @@ const handleOpeningVideoUpload = async (files: FileList) => {
   try {
     isUploadingOpeningVideo.value = true
     openingVideoFile.value = file
-    
+
     const uploadUrl = await useFileGo(file, 'material')
     processFormState.opening_file = uploadUrl
-    
+
     toast.add({
       title: '片头视频上传成功',
       color: 'green',
@@ -248,10 +254,10 @@ const handleOpeningCoverUpload = async (files: FileList) => {
   try {
     isUploadingOpeningCover.value = true
     openingCoverFile.value = file
-    
+
     const uploadUrl = await useFileGo(file, 'material')
     processFormState.opening_url = uploadUrl
-    
+
     toast.add({
       title: '片头封面上传成功',
       color: 'green',
@@ -300,10 +306,10 @@ const handleEndingVideoUpload = async (files: FileList) => {
   try {
     isUploadingEndingVideo.value = true
     endingVideoFile.value = file
-    
+
     const uploadUrl = await useFileGo(file, 'material')
     processFormState.ending_file = uploadUrl
-    
+
     toast.add({
       title: '片尾视频上传成功',
       color: 'green',
@@ -352,10 +358,10 @@ const handleEndingCoverUpload = async (files: FileList) => {
   try {
     isUploadingEndingCover.value = true
     endingCoverFile.value = file
-    
+
     const uploadUrl = await useFileGo(file, 'material')
     processFormState.ending_url = uploadUrl
-    
+
     toast.add({
       title: '片尾封面上传成功',
       color: 'green',
@@ -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,12 +464,14 @@ 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<
-      { 
+      {
         to_user_id: number
-        user_title_id: number 
+        user_title_id: number
       } & AuthedRequest,
       BaseResponse<{ code: 0 | 1 }>
     >('App.User_UserTitles.DeleteConn', {
@@ -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>

app/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
-                    userBalanceEditing = true
-                    userBalanceState.request_type = row.tag
-                    userBalanceState.expire_time =
-                      getBalanceByTag(row.tag)!.expire_time * 1000
-                    userBalanceState.remain_count = getBalanceByTag(row.tag)!.remain_count
-                  }
-                "
+                    () => {
+                      isActivateBalance = false
+                      userBalanceEditing = true
+                      userBalanceState.request_type = row.tag
+                      userBalanceState.expire_time =
+                        getBalanceByTag(row.tag)!.expire_time * 1000
+                      userBalanceState.remain_count = getBalanceByTag(
+                        row.tag
+                      )!.remain_count
+                    }
+                  "
                 >
                   更新
                 </UButton>
@@ -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>

app/pages/generation/course.vue

@@ -11,22 +11,21 @@ const loginState = useLoginState()
 const deletePending = ref(false)
 const page = ref(1)
 
-const {
-  data: courseList,
-  refresh: refreshCourseList,
-} = useAsyncData(
-  () => useFetchWrapped<
-    req.gen.CourseGenList & AuthedRequest,
-    BaseResponse<PagedData<resp.gen.CourseGenItem>>
-  >('App.Digital_Convert.GetList', {
-    token: loginState.token!,
-    user_id: loginState.user.id,
-    to_user_id: loginState.user.id,
-    page: page.value,
-    perpage: 15,
-  }), {
+const { data: courseList, refresh: refreshCourseList } = useAsyncData(
+  () =>
+    useFetchWrapped<
+      req.gen.CourseGenList & AuthedRequest,
+      BaseResponse<PagedData<resp.gen.CourseGenItem>>
+    >('App.Digital_Convert.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      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.height = `${ el.offsetHeight }px`
+  el.style.width = `${el.offsetWidth}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="() => {
-              if (!loginState.is_logged_in) {
-                modal.open(ModalAuthentication)
-                return
+            @click="
+              () => {
+                if (!loginState.is_logged_in) {
+                  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"/>
-        <p class="text-sm text-neutral-500 dark:text-neutral-400">
-          没有记录
-        </p>
+        <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>
-      <div 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">
+      <div
+        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>
+<style scoped></style>

app/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 {
-  data: videoList,
-  refresh: refreshVideoList,
-} = useAsyncData(
-  () => useFetchWrapped<
-    req.gen.GBVideoList & AuthedRequest,
-    BaseResponse<PagedData<GBVideoItem>>
-  >('App.Digital_VideoTask.GetList', {
-    token: loginState.token!,
-    user_id: loginState.user.id,
-    to_user_id: loginState.user.id,
-    page: page.value,
-    perpage: pageCount.value,
-    title: debounceSearch.value,
-  }), {
+const { data: videoList, refresh: refreshVideoList } = useAsyncData(
+  () =>
+    useFetchWrapped<
+      req.gen.GBVideoList & AuthedRequest,
+      BaseResponse<PagedData<GBVideoItem>>
+    >('App.Digital_VideoTask.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: page.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.height = `${ el.offsetHeight }px`
+  el.style.width = `${el.offsetWidth}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"/>
-        <p class="text-sm text-neutral-500 dark:text-neutral-400">
-          没有记录
-        </p>
+        <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>
       <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>
+<style scoped></style>

app/pages/generation/materials.vue

@@ -23,21 +23,21 @@ const {
   status: systemTitlesTemplateStatus,
   refresh: refreshSystemTitlesTemplate,
 } = useAsyncData(
-    'systemTitlesTemplate',
-    () =>
-      useFetchWrapped<
-        PagedDataRequest & AuthedRequest,
-        BaseResponse<PagedData<TitlesTemplate>>
-      >('App.Digital_Titles.GetList', {
-        token: loginState.token!,
-        user_id: loginState.user.id,
-        page: systemPagination.page,
-        perpage: systemPagination.pageSize,
-      }),
-    {
-      watch: [systemPagination],
-    }
-  )
+  'systemTitlesTemplate',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest,
+      BaseResponse<PagedData<TitlesTemplate>>
+    >('App.Digital_Titles.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      page: systemPagination.page,
+      perpage: systemPagination.pageSize,
+    }),
+  {
+    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>
-        <UButton
-          color="amber"
-          icon="tabler:plus"
-          variant="soft"
-          v-if="loginState.user.auth_code === 2"
-          @click="isCreateSystemTitlesSlideActive = true"
-        >
-          创建模板
-        </UButton>
-      </template>
-    </BubbleTitle>
+        <template #action>
+          <UButton
+            color="amber"
+            icon="tabler:plus"
+            variant="soft"
+            v-if="loginState.user.auth_code === 2"
+            @click="isCreateSystemTitlesSlideActive = true"
+          >
+            创建模板
+          </UButton>
+        </template>
+      </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"

app/pages/index.vue

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

app/pages/user/authenticate.vue

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

app/typings/llm.ts

@@ -1,10 +1,7 @@
 export type ChatSessionId = string
 export type ChatMessageId = string
 
-export type ModelTag =
-  'spark1_5' |
-  'spark3_0' |
-  'spark3_5'
+export type ModelTag = 'spark1_5' | 'spark3_0' | 'spark3_5'
 
 export interface LLMModal {
   tag: ModelTag
@@ -15,17 +12,17 @@ export interface LLMModal {
 }
 
 export interface Assistant {
-  id: number;
-  user_id: number;
-  create_time: number;
-  tpl_name: string;
-  types: string;
-  des: string;
-  input_tpl: string;
-  role: string;
-  target: string;
-  style: string;
-  demand: string;
+  id: number
+  user_id: number
+  create_time: number
+  tpl_name: string
+  types: string
+  des: string
+  input_tpl: string
+  role: string
+  target: string
+  style: 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',
   },
 ])
 

components/Icon/MessageResponding.vue

@@ -1,52 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-    <circle cx="4" cy="12" r="0" fill="currentColor">
-      <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">
-      <animate fill="freeze" attributeName="cx" begin="0;svgSpinners3DotsMove1.end" 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">
-      <animate fill="freeze" attributeName="cx" begin="0;svgSpinners3DotsMove1.end" 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">
-      <animate id="svgSpinners3DotsMove6" fill="freeze" attributeName="r" 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/Markdown.vue

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