chore(deps): update deps

.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

@@ -0,0 +1,248 @@
+# XSH Assistant 编码指南
+
+## 项目概览
+
+**xsh-assistant** 是一个基于 Nuxt 3 的 AI 驱动内容生成平台，专注于数字内容创作（微课视频、虚拟讲师、绿幕合成等）。核心特性：
+
+- **前端框架**: Nuxt 3 + Vue 3 + TypeScript + Tailwind CSS + Radix Vue UI
+- **状态管理**: Pinia（带持久化）
+- **媒体处理**: FFmpeg WASM（客户端视频处理）、WebAV（视频剪辑）
+- **API 集成**: 统一的 `useFetchWrapped` 包装器，所有请求都通过 `API_BASE` 代理（`https://service1.fenshenzhike.com/`）
+- **部署模式**: SPA（SSR=false）
+
+## 核心架构模式
+
+### 1. Composables 设计（Pinia + 自定义 Composables）
+
+**状态管理采用分层设计**：
+
+```
+Pinia Stores（持久化状态）
+├── useLoginState: 用户认证、token、个人资料
+├── useHistory: AIGC 会话、聊天历史
+└── useTourState: 新手引导状态
+
+业务 Composables（无状态或短生命周期）
+├── useFetchWrapped: API 请求包装（自动添加 token、user_id）
+├── useLLM: LLM API 调用（Spark 模型集成）
+├── useFFmpeg: FFmpeg WASM 单例管理
+├── useVideoBackgroundCompositing: 视频合成（数字人+背景）
+├── useVideoSubtitleEmbedding: 字幕嵌入
+└── useDownload: 文件下载管理
+```
+
+**关键模式**：
+
+- **Pinia stores 必须是单一实例**，通过 `storeToRefs()` 获取响应式引用
+- **API 请求必须通过 `useFetchWrapped`** 来自动处理认证头（token/user_id）
+- **FFmpeg 采用单例模式**（`useFFmpeg()` 返回全局加载的实例），避免重复初始化
+
+### 2. API 请求模式
+
+所有 API 请求使用统一的 `useFetchWrapped` 包装器：
+
+```typescript
+// 基础签名
+useFetchWrapped<RequestType, ResponseType>(action: string, payload?: RequestType, options?: FetchOptions)
+
+// 请求格式示例（来自 useHistory）
+useFetchWrapped<AuthedRequest, BaseResponse<resp.xxx>>(
+  'App.User_User.CheckSession',  // action 作为查询参数 ?s=
+  { token: loginState.token, user_id: loginState.user.id, ...payload },
+  { method: 'POST' }  // 默认 POST
+)
+```
+
+**约定**：
+
+- **每个请求必须包含** `token` 和 `user_id`（来自 `useLoginState`）
+- **响应结构统一**: `BaseResponse<T>` 包含 `ret: number` 状态码和 `data: T` 数据
+- **API_BASE 在 `nuxt.config.ts` 中定义**，所有请求都相对于此 URL
+
+### 3. 媒体处理架构
+
+#### FFmpeg 初始化流程
+
+- **单例加载**: 首次调用 `useFFmpeg()` 时初始化，后续复用缓存的实例
+- **WASM 资源加载**: 从 CDN（`cdn.jsdelivr.net`）加载 FFmpeg core、wasm、worker
+- **错误恢复**: 调用 `cleanupFFmpeg()` 清理资源并重置单例
+
+#### 视频合成流程（核心用例）
+
+```
+输入: 透明通道视频 (WebM) + 背景图 (PNG/File)
+  ↓
+1. 获取背景图尺寸
+2. 计算等比缩放到 720P
+3. 加载文件到 FFmpeg vFS
+4. 执行 FFmpeg 滤镜链：
+   - 背景: scale → ${outputWidth}x${outputHeight}
+   - 视频: scale → ${outputWidth}x${outputHeight} (保留 alpha)
+   - overlay: 视频叠加到背景（format=auto）
+5. 使用 VP9 编码（支持 alpha）+ Opus 音频编码
+6. 返回 Blob → 可直接上传或本地预览
+```
+
+### 4. UI 组件架构
+
+#### 内置组件库（`components/uni/`）
+
+自定义包装组件，提供统一 API：
+
+- `UniButton`: 按钮 + loading 状态
+- `UniInput`/`UniTextArea`: 表单输入
+- `UniSelect`: 下拉选择
+- `UniMessage`: 全局消息通知（通过 provide/inject）
+- `UniCopyable`: 可复制文本
+
+**消息通知用法**：
+
+```typescript
+const toast = useToast() // Radix Vue 的 Toast（顶部通知）
+// 或从 provide 注入
+const messageApi = inject('uni-message')
+messageApi.success('操作成功')
+messageApi.error('操作失败', 5000)
+```
+
+#### Radix Vue + Nuxt UI 集成
+
+- 使用 Radix Vue for 基础组件（button, dialog, select）
+- Nuxt UI 用于高级组件 + 主题管理
+- **颜色方案**: primary='indigo', gray='neutral'，详见 `app.config.ts`
+
+### 5. 路由与页面结构
+
+**目录映射**：
+
+```
+pages/
+├── generation.vue (导航枢纽)
+└── aigc/
+    ├── chat/index.vue (聊天页，支持多 LLM 模型)
+    ├── draw/index.vue (绘图生成)
+    └── generation/
+        ├── course.vue (微课生成)
+        ├── green-screen.vue (绿幕视频)
+        ├── avatar-models.vue (数字讲师)
+        ├── materials.vue (片头片尾)
+        ├── ppt-templates.vue (PPT 库)
+        └── admin/ (管理功能)
+```
+
+**导航约定**：
+
+- `/generation` → 功能导航页面
+- `/aigc/chat` → 聊天/文本生成
+- `/generation/course` → 视频生成工作流
+- 所有生成功能都需要登录（ModalAuthentication 处理）
+
+## 开发工作流
+
+### 启动项目
+
+```bash
+ni                    # 安装依赖
+nr dev                # 启动 http://localhost:3000
+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])`
+4. 清理临时文件：`ffmpeg.deleteFile()`
+5. 使用 progress callback 通报处理进度
+
+**添加新的 UI 组件**：
+
+1. 创建在 `components/` 下（自动注册）
+2. 优先使用 Radix Vue + Nuxt UI（已集成）
+3. 使用 Tailwind CSS utility classes + `@apply` 指令
+4. 通过 `app.config.ts` 自定义 UI 主题
+
+## 项目特定的约定
+
+### 类型定义位置
+
+- **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 输出
+
+## 依赖与性能优化
+
+### 关键依赖
+
+- **@ffmpeg/ffmpeg@0.12.15**: WASM 视频处理（从 CDN 加载）
+- **@webav/av-cliper**: 客户端视频剪辑库
+- **markdown-it + highlight.js**: 内容渲染（支持代码高亮）
+- **date-fns/dayjs**: 时间处理（dayjs-nuxt 提供全局实例）
+- **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'
+```
+
+## 测试与调试
+
+- **开发服务器日志**: 浏览器控制台查看 FFmpeg、API、业务日志
+- **FFmpeg 调试**: `[FFmpeg]` 前缀的日志输出包含加载进度、命令执行信息
+- **状态调试**: Pinia DevTools（启用 `devtools: true`）
+- **样式调试**: Tailwind 配置在 `tailwind.config.ts`，按需自定义
+
+## 常见陷阱与解决方案
+
+| 问题               | 原因                | 解决方案                                                        |
+| ------------------ | ------------------- | --------------------------------------------------------------- |
+| API 请求 401       | 缺少 token 或已过期 | 检查 `useLoginState().token`，通过 ModalAuthentication 重新登录 |
+| FFmpeg 加载超时    | CDN 资源加载慢      | 检查网络，可切换到本地 `/public/assets/ffmpeg`                  |
+| 视频输出无声音     | 滤镜链未映射音频    | 确保 FFmpeg 命令包含 `-map '1:a?'` 映射音频轨道                 |
+| 组件未注册         | 文件位置错误        | 确保在 `components/` 目录下，子目录自动扁平化注册               |
+| Pinia 状态未持久化 | 未配置 persist 选项 | 在 store 返回语句后添加 persist 配置（参考 `useLoginState`）    |
+
+## 资源链接
+
+- [Nuxt 3 文档](https://nuxt.com/docs)
+- [Pinia 文档](https://pinia.vuejs.org)
+- [FFmpeg.wasm 文档](https://ffmpegwasm.netlify.app/)
+- [Radix Vue](https://www.radix-vue.com/)
+- [Nuxt UI 组件库](https://ui.nuxt.com/)：可使用 nuxt-ui MCP 工具

.node-version

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

.oxfmtrc.json

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

.oxlintrc.json

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

.vscode/extensions.json

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

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "oxc.fmt.configPath": ".oxfmtrc.json",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "always"
+  },
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "[typescript]": {
+    "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

@@ -0,0 +1,555 @@
+<script lang="ts" setup>
+import { object, string } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+
+const toast = useToast()
+const loginState = useLoginState()
+
+interface Props {
+  modelValue: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+
+// 表单状态
+const formState = reactive({
+  dh_name: '',
+  organization: '',
+})
+
+// 文件上传状态
+const videoFile = ref<File | null>(null)
+const authVideoFile = ref<File | null>(null)
+const isSubmitting = ref(false)
+
+// 上传进度状态
+const uploadProgress = reactive({
+  step: 0,
+  total: 3,
+  message: '',
+})
+
+// 表单验证
+const schema = object({
+  dh_name: string()
+    .required('请输入数字人名称')
+    .max(50, '数字人名称不能超过50个字符'),
+  organization: string()
+    .required('请输入单位名称')
+    .max(100, '单位名称不能超过100个字符'),
+})
+
+// 更新上传进度
+const updateProgress = (step: number, message: string) => {
+  uploadProgress.step = step
+  uploadProgress.message = message
+}
+
+// 处理数字人视频上传
+const handleVideoUpload = (files: FileList) => {
+  const file = files[0]
+  if (!file) return
+
+  // 验证文件类型
+  if (!['video/mp4', 'video/mov'].includes(file.type)) {
+    toast.add({
+      title: '文件格式错误',
+      description: '仅支持MP4和MOV格式的视频文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  // 验证文件大小 (1GB)
+  if (file.size > 1024 * 1024 * 1024) {
+    toast.add({
+      title: '文件过大',
+      description: '视频文件大小不能超过1GB',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  videoFile.value = file
+  toast.add({
+    title: '文件上传成功',
+    description: '数字人视频已选择',
+    color: 'green',
+    icon: 'i-tabler-check',
+  })
+}
+
+// 处理授权视频上传
+const handleAuthVideoUpload = (files: FileList) => {
+  const file = files[0]
+  if (!file) return
+
+  // 验证文件类型
+  if (!['video/mp4', 'video/mov'].includes(file.type)) {
+    toast.add({
+      title: '文件格式错误',
+      description: '仅支持MP4和MOV格式的视频文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  // 验证文件大小
+  if (file.size > 1024 * 1024 * 1024) {
+    toast.add({
+      title: '文件过大',
+      description: '视频文件大小不能超过1GB',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  authVideoFile.value = file
+  toast.add({
+    title: '文件上传成功',
+    description: '授权视频已选择',
+    color: 'green',
+    icon: 'i-tabler-check',
+  })
+}
+
+// 提交表单
+const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
+  // 验证文件是否已上传
+  if (!videoFile.value) {
+    toast.add({
+      title: '请上传数字人视频素材',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  if (!authVideoFile.value) {
+    toast.add({
+      title: '请上传形象授权视频',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  if (isSubmitting.value) return
+
+  try {
+    isSubmitting.value = true
+    updateProgress(0, '开始创建数字人...')
+
+    // 上传数字人视频素材
+    updateProgress(1, '上传数字人视频素材...')
+    const videoUrl = await useFileGo(videoFile.value, 'material')
+
+    // 上传形象授权视频
+    updateProgress(2, '上传形象授权视频...')
+    const authVideoUrl = await useFileGo(authVideoFile.value, 'material')
+
+    // 创建数字人定制记录
+    updateProgress(3, '创建数字人定制记录...')
+    const response = await useFetchWrapped<
+      {
+        user_id: number
+        dh_name: string
+        organization: string
+        video_url: string
+        auth_video_url: string
+      } & AuthedRequest,
+      BaseResponse<{ train_id: number }>
+    >('App.Digital_Train.Create', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      dh_name: event.data.dh_name,
+      organization: event.data.organization,
+      video_url: videoUrl,
+      auth_video_url: authVideoUrl,
+    })
+
+    if (response.ret === 200 && response.data.train_id) {
+      toast.add({
+        title: '数字人定制提交成功',
+        description: '您的数字人定制请求已提交，请等待管理员处理',
+        color: 'green',
+        icon: 'i-tabler-check',
+      })
+
+      // 重置表单
+      formState.dh_name = ''
+      formState.organization = ''
+      videoFile.value = null
+      authVideoFile.value = null
+      uploadProgress.step = 0
+      uploadProgress.message = ''
+
+      // 关闭弹窗
+      isOpen.value = false
+    } else {
+      throw new Error(response.msg || '创建失败')
+    }
+  } catch (error) {
+    console.error('数字人定制失败:', error)
+    const errorMessage =
+      error instanceof Error ? error.message : '数字人定制失败，请重试'
+    toast.add({
+      title: '提交失败',
+      description: errorMessage,
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  } finally {
+    isSubmitting.value = false
+    uploadProgress.step = 0
+    uploadProgress.message = ''
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  formState.dh_name = ''
+  formState.organization = ''
+  videoFile.value = null
+  authVideoFile.value = null
+  uploadProgress.step = 0
+  uploadProgress.message = ''
+}
+
+// 监听弹窗关闭事件，重置表单
+watch(isOpen, (newValue) => {
+  if (!newValue) {
+    resetForm()
+  }
+})
+
+// 显示授权文案弹窗
+const showAuthModal = ref(false)
+</script>
+
+<template>
+  <UModal
+    v-model="isOpen"
+    :ui="{ width: 'sm:max-w-6xl' }"
+  >
+    <UCard
+      :ui="{
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+      }"
+    >
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            数字人定制
+          </h3>
+          <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-x-mark-20-solid"
+            class="-my-1"
+            @click="isOpen = false"
+          />
+        </div>
+      </template>
+
+      <div class="grid grid-cols-7 gap-6">
+        <!-- 左侧表单 -->
+        <div class="col-span-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-800">
+          <UForm
+            :schema="schema"
+            :state="formState"
+            class="space-y-4"
+            @submit="onSubmit"
+          >
+            <!-- 数字人视频素材 -->
+            <UFormGroup
+              label="数字人视频素材"
+              required
+            >
+              <UniFileDnD
+                accept="video/mp4,video/mov"
+                class="h-36"
+                @change="handleVideoUpload"
+              >
+                <template #default>
+                  <div class="text-center">
+                    <UIcon
+                      name="i-heroicons-video-camera"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{ videoFile ? videoFile.name : '点击或拖拽上传视频' }}
+                      </span>
+                    </div>
+                    <p class="text-xs text-gray-500 mt-1">
+                      小于 1GB 的 mov/mp4 格式，比例 9:16，帧率 25FPS，分辨率
+                      1080P，时长 3-6 分钟
+                    </p>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormGroup>
+
+            <!-- 数字人名称 -->
+            <UFormGroup
+              label="数字人名称"
+              name="dh_name"
+              required
+            >
+              <UInput
+                v-model="formState.dh_name"
+                placeholder="请输入数字人名称"
+              />
+            </UFormGroup>
+
+            <!-- 单位名称 -->
+            <UFormGroup
+              label="单位名称"
+              name="organization"
+              required
+            >
+              <UInput
+                v-model="formState.organization"
+                placeholder="请输入单位名称"
+              />
+            </UFormGroup>
+
+            <!-- 形象授权视频 -->
+            <UFormGroup
+              label="形象授权视频"
+              required
+            >
+              <template #description>
+                <div class="flex items-center justify-between">
+                  <span class="text-xs text-gray-500">
+                    请确保本人进行形象授权视频录制，否则脸部比对将不通过导致制作失败
+                  </span>
+                  <UButton
+                    variant="link"
+                    size="xs"
+                    icon="i-heroicons-document-text"
+                    @click="showAuthModal = true"
+                  >
+                    授权文案
+                  </UButton>
+                </div>
+              </template>
+              <UniFileDnD
+                accept="video/mp4,video/mov"
+                class="h-36"
+                @change="handleAuthVideoUpload"
+              >
+                <template #default>
+                  <div class="text-center">
+                    <UIcon
+                      name="i-heroicons-shield-check"
+                      class="mx-auto h-12 w-12 text-gray-400"
+                    />
+                    <div class="mt-2">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{
+                          authVideoFile
+                            ? authVideoFile.name
+                            : '点击或拖拽上传授权视频'
+                        }}
+                      </span>
+                    </div>
+                  </div>
+                </template>
+              </UniFileDnD>
+            </UFormGroup>
+
+            <!-- 提交按钮 -->
+            <UButton
+              type="submit"
+              class="w-full"
+              :loading="isSubmitting"
+              :disabled="isSubmitting"
+              color="primary"
+            >
+              {{ isSubmitting ? '提交中...' : '确认提交' }}
+            </UButton>
+
+            <!-- 上传进度 -->
+            <div
+              v-if="isSubmitting"
+              class="mt-4 space-y-2"
+            >
+              <div class="flex justify-between text-sm">
+                <span>{{ uploadProgress.message }}</span>
+                <span>
+                  {{ uploadProgress.step }}/{{ uploadProgress.total }}
+                </span>
+              </div>
+              <UProgress
+                :value="(uploadProgress.step / uploadProgress.total) * 100"
+                color="primary"
+              />
+            </div>
+          </UForm>
+        </div>
+
+        <!-- 右侧教程和提示 -->
+        <div class="col-span-4 p-4 rounded-lg border dark:border-gray-700">
+          <div class="flex flex-col h-full gap-6">
+            <!-- 教程视频 -->
+            <div class="flex-1">
+              <h3
+                class="text-lg font-semibold mb-3 text-gray-800 dark:text-white flex items-center gap-2"
+              >
+                <UIcon
+                  name="i-heroicons-video-camera"
+                  class="h-5 w-5"
+                />
+                视频录制教程
+              </h3>
+              <div
+                class="w-full aspect-video border rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center"
+              >
+                <UIcon
+                  name="i-heroicons-video-camera"
+                  class="h-12 w-12 text-gray-400"
+                />
+              </div>
+            </div>
+
+            <!-- 联系方式 -->
+            <div
+              class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-700"
+            >
+              <div class="flex items-center gap-3">
+                <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-lg">
+                  <UIcon
+                    name="i-heroicons-chat-bubble-left-right"
+                    class="h-5 w-5 text-blue-600 dark:text-blue-400"
+                  />
+                </div>
+                <div>
+                  <p class="text-sm font-medium text-gray-800 dark:text-white">
+                    需要帮助？
+                  </p>
+                  <p class="text-sm text-gray-600 dark:text-gray-300">
+                    客服微信：
+                    <span class="font-mono text-blue-600 dark:text-blue-400">
+                      xxxxxx
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- 录制指南 -->
+            <div
+              class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 border border-amber-200 dark:border-amber-700"
+            >
+              <div class="flex items-start gap-3">
+                <div
+                  class="bg-amber-100 dark:bg-amber-900 p-2 rounded-lg mt-0.5"
+                >
+                  <UIcon
+                    name="i-heroicons-light-bulb"
+                    class="h-5 w-5 text-amber-600 dark:text-amber-400"
+                  />
+                </div>
+                <div class="flex-1">
+                  <h4
+                    class="text-sm font-semibold text-gray-800 dark:text-white mb-3"
+                  >
+                    录制注意事项
+                  </h4>
+                  <div class="space-y-2">
+                    <div class="flex items-center gap-2">
+                      <UIcon
+                        name="i-heroicons-sun"
+                        class="h-4 w-4 text-amber-500 mt-0.5 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>
+                    </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>
+                    </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>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </UCard>
+
+    <!-- 授权文案弹窗 -->
+    <UModal v-model="showAuthModal">
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+              授权视频文案
+            </h3>
+            <UButton
+              color="gray"
+              variant="ghost"
+              icon="i-heroicons-x-mark-20-solid"
+              class="-my-1"
+              @click="showAuthModal = false"
+            />
+          </div>
+        </template>
+
+        <div class="p-4">
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            请确保您是视频中人物的合法授权人，在授权视频中朗读以下文案：
+          </p>
+          <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
+            <p class="text-sm leading-relaxed text-gray-800 dark:text-gray-200">
+              我是在"AI智慧职教平台"定制上传视频的模特本人，我承诺已经按照平台规则进行合法授权，特此承诺。
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </UModal>
+  </UModal>
+</template>
+
+<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,10 +33,10 @@ const toast = useToast()
 const page = ref(1)
 
 const sourceTypeList = [
-  { label: 'TX', value: 1, color: 'blue' },
-  { label: 'XSH', value: 2, color: 'green' },
-  { label: 'GJ', value: 3, color: 'purple' },
-  { label: 'XB', value: 4, color: 'indigo' },
+  { 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' }, // 百度小冰
 ]
 // const sourceType = ref(sourceTypeList[0])
 

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

@@ -15,8 +15,16 @@ const creationPending = ref(false)
 const isDigitalSelectorOpen = ref(false)
 
 const createCourseSchema = object({
-  title: string().trim().min(4, '标题必须大于4个字符').max(20, '标题不能超过20个字符').required('请输入视频标题'),
-  content: string().trim().min(4, '内容必须大于4个字符').max(1000, '内容不能超过1000个字符').required('请输入驱动文本内容'),
+  title: string()
+    .trim()
+    .min(4, '标题必须大于4个字符')
+    .max(20, '标题不能超过20个字符')
+    .required('请输入视频标题'),
+  content: string()
+    .trim()
+    .min(4, '内容必须大于4个字符')
+    .max(1000, '内容不能超过1000个字符')
+    .required('请输入驱动文本内容'),
   digital_human_id: number().not([0], '请选择数字人'),
   source_type: number().default(0).required(),
   speed: number().default(1.0).min(0.5).max(1.5).required(),
@@ -31,40 +39,46 @@ const createCourseState = reactive({
   digital_human_id: 0,
   source_type: 0,
   speed: 1.0,
-  bg_img: undefined,
+  bg_img: '',
 })
 
 const selected_digital_human = ref<DigitalHumanItem | null>(null)
-const selected_bg_img = ref<File | undefined>();
+const selected_bg_img = ref<File | undefined>()
+const enableBackgroundCompositing = ref(false)
 
 watchEffect(() => {
   if (selected_digital_human.value) {
     // 2025.02.26 使用内部数字人 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
     createCourseState.source_type = selected_digital_human.value.type!
   }
 })
 
-const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSchema>) => {  
+watchEffect(() => {
+  // 根据背景合成开关更新 bg_img
+  createCourseState.bg_img = enableBackgroundCompositing.value
+    ? 'https://service1.fenshenzhike.com/default_background.png'
+    : ''
+})
+
+const onCreateCourseGreenSubmit = async (
+  event: FormSubmitEvent<CreateCourseSchema>
+) => {
   creationPending.value = true
 
-  let bgImgUrl = undefined
-
-  if (selected_bg_img.value) {
-    bgImgUrl = await useFileGo(selected_bg_img.value, 'tmp')
-  }
-
   let payload: {
-    token: string;
-    user_id: number;
-    title: string;
-    content: string;
-    digital_human_id: any;
-    speed: number;
-    device_id: string;
-    source_type: 1 | 2 | undefined;
-    bg_img?: string;
+    token: string
+    user_id: number
+    title: string
+    content: string
+    digital_human_id: any
+    speed: number
+    device_id: string
+    source_type: 1 | 2 | undefined
+    bg_img?: string
   } = {
     token: loginState.token!,
     user_id: loginState.user.id,
@@ -74,66 +88,60 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
     speed: 2 - event.data.speed,
     device_id: 'XSHAssistant Web',
     source_type: event.data.source_type as 1 | 2 | undefined,
+    bg_img: event.data.bg_img,
   }
 
-  if (selected_bg_img.value) {
-    if (!bgImgUrl) {
-      toast.add({
-        title: '上传失败',
-        description: '背景图片上传失败，请重试',
-        color: 'red',
-        icon: 'i-tabler-alert-triangle',
-      })
-      selected_bg_img.value = undefined
+  useFetchWrapped<
+    req.gen.GBVideoCreate & AuthedRequest,
+    BaseResponse<resp.gen.GBVideoCreate>
+  >('App.Digital_VideoTask.Create', payload)
+    .then((res) => {
+      if (!!res.data.task_id) {
+        toast.add({
+          title: '创建成功',
+          description: '视频已加入生成队列',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+        emit('success')
+        slide.close()
+      } else {
+        toast.add({
+          title: '创建失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+      creationPending.value = false
+    })
+    .catch((e) => {
       creationPending.value = false
-      return
-    }
-    payload = {
-      ...payload,
-      bg_img: bgImgUrl,
-    }
-  }
-
-  useFetchWrapped<req.gen.GBVideoCreate & AuthedRequest, BaseResponse<resp.gen.GBVideoCreate>>('App.Digital_VideoTask.Create', payload).then(res => {
-    if (!!res.data.task_id) {
-      toast.add({
-        title: '创建成功',
-        description: '视频已加入生成队列',
-        color: 'green',
-        icon: 'i-tabler-check',
-      })
-      emit('success')
-      slide.close()
-    } else {
       toast.add({
         title: '创建失败',
-        description: res.msg || '未知错误',
+        description: e.message || '未知错误',
         color: 'red',
         icon: 'i-tabler-alert-triangle',
       })
-    }
-    creationPending.value = false
-  }).catch(e => {
-    creationPending.value = false
-    toast.add({
-      title: '创建失败',
-      description: e.message || '未知错误',
-      color: 'red',
-      icon: 'i-tabler-alert-triangle',
     })
-  })
 }
 </script>
 
 <template>
   <USlideover prevent-close>
     <UCard
-      :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
+      :ui="{
+        body: { base: 'flex-1' },
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+      }"
       class="flex flex-col flex-1"
     >
       <template #header>
         <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
             新建绿幕视频
           </h3>
           <UButton
@@ -154,28 +162,52 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
         @submit="onCreateCourseGreenSubmit"
       >
         <div class="flex justify-between gap-2 *:flex-1">
-          <UFormGroup label="视频标题" name="title" required>
-            <UInput v-model="createCourseState.title" placeholder="请输入视频标题"/>
+          <UFormGroup
+            label="视频标题"
+            name="title"
+            required
+          >
+            <UInput
+              v-model="createCourseState.title"
+              placeholder="请输入视频标题"
+            />
           </UFormGroup>
         </div>
 
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          <UFormGroup label="数字人" name="digital_human_id" required>
+          <UFormGroup
+            label="数字人"
+            name="digital_human_id"
+            required
+          >
             <div
-              :class="{'shadow-inner': !!selected_digital_human}"
+              :class="{ 'shadow-inner': !!selected_digital_human }"
               class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
               @click="isDigitalSelectorOpen = true"
             >
               <div
-                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden">
-                <UIcon v-if="!selected_digital_human" class="text-2xl opacity-50" name="i-tabler-user-screen"/>
-                <NuxtImg v-else :src="selected_digital_human?.avatar"/>
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden"
+              >
+                <UIcon
+                  v-if="!selected_digital_human"
+                  class="text-2xl opacity-50"
+                  name="i-tabler-user-screen"
+                />
+                <NuxtImg
+                  v-else
+                  :src="selected_digital_human?.avatar"
+                />
               </div>
               <div class="flex flex-col text-neutral-400 text-sm font-medium">
-                <span :class="!!selected_digital_human ? 'text-neutral-600' : ''">{{
-                    selected_digital_human?.name || '点击选择数字人'
-                  }}</span>
-                <span v-if="selected_digital_human?.description" class="text-2xs">
+                <span
+                  :class="!!selected_digital_human ? 'text-neutral-600' : ''"
+                >
+                  {{ selected_digital_human?.name || '点击选择数字人' }}
+                </span>
+                <span
+                  v-if="selected_digital_human?.description"
+                  class="text-2xs"
+                >
                   {{ selected_digital_human?.description }}
                 </span>
               </div>
@@ -183,23 +215,44 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
           </UFormGroup>
         </div>
 
-        <UFormGroup label="背景图片" name="bg_img" help="可以上传图片作为视频背景，留空则为绿幕背景">
+        <!-- <UFormGroup label="背景图片" name="bg_img" help="可以上传图片作为视频背景，留空则为绿幕背景">
           <UInput type="file" accept="image/jpg,image/png" placeholder="选择背景图片" @change="selected_bg_img = $event?.[0] || undefined"/>
+        </UFormGroup> -->
+
+        <UFormGroup
+          label="驱动内容"
+          name="content"
+          required
+        >
+          <UTextarea
+            v-model="createCourseState.content"
+            :rows="6"
+            autoresize
+            placeholder="请输入驱动文本内容"
+          />
         </UFormGroup>
 
-        <UFormGroup label="驱动内容" name="content" required>
-          <!--          <template #help>-->
-          <!--            <p class="text-xs text-neutral-400">-->
-          <!--              仅支持 .pptx 格式-->
-          <!--            </p>-->
-          <!--          </template>-->
-          <UTextarea v-model="createCourseState.content" :rows="6" autoresize placeholder="请输入驱动文本内容"/>
+        <UFormGroup
+          label="启用背景合成"
+          name="bg_img"
+          help="开启后生成透明通道，可在视频生成完毕后选择自定义背景合成；关闭则使用绿幕背景。"
+        >
+          <UToggle v-model="enableBackgroundCompositing" />
         </UFormGroup>
 
-        <UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
+        <UAccordion
+          :items="[{ label: '高级选项' }]"
+          color="gray"
+          size="lg"
+        >
           <template #item>
-            <div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
-              <UFormGroup :label="`视频倍速：${createCourseState.speed}`" name="speed">
+            <div
+              class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6"
+            >
+              <UFormGroup
+                :label="`视频倍速：${createCourseState.speed}`"
+                name="speed"
+              >
                 <URange
                   v-model="createCourseState.speed"
                   :max="1.5"
@@ -237,13 +290,13 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
     <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>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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/CGTaskCard.client.vue

@@ -145,10 +145,24 @@ const copyTaskId = (extraMessage?: string) => {
 const isCombinationModalOpen = ref(false)
 const combinationState = ref<0 | 1 | undefined>(0)
 
-const onCombination = () => {
+const onCombination = async () => {
   isCombinationModalOpen.value = true
   combinationState.value = undefined
-  useVideoSubtitleEmbedding(props.course.video_url, props.course.subtitle_url)
+  const srtResponse = await (
+    await fetch(await fetchCourseSubtitleUrl(props.course))
+  ).blob()
+  if (!srtResponse) {
+    toast.add({
+      title: '获取字幕失败',
+      description: '无法获取字幕文件，请稍后重试',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+  const srtBlob = new Blob([srtResponse], { type: 'text/plain' })
+  const srtUrl = URL.createObjectURL(srtBlob)
+  useVideoSubtitleEmbedding(props.course.video_url, srtUrl)
     .then((src) => {
       startDownload(
         src,

app/components/aigc/generation/GBTaskCard.vue

@@ -0,0 +1,627 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  video: {
+    type: Object as PropType<GBVideoItem>,
+    required: true,
+  },
+})
+
+const emit = defineEmits({
+  delete: (video: GBVideoItem) => video,
+})
+
+const dayjs = useDayjs()
+const toast = useToast()
+
+const isFailed = computed(() => {
+  return props.video.progress === -1
+})
+const isPreviewModalOpen = ref(false)
+const isVideoBackgroundPreviewOpen = ref(false)
+const isFullContentOpen = ref(false)
+const downloadingState = reactive({
+  subtitle: 0,
+  video: 0,
+})
+
+// 背景选择相关状态
+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 combinatorError = ref<string>('')
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const compositedVideoBlob = ref<Blob | null>(null)
+
+// 阶段显示文本
+const phaseText = computed(() => {
+  const phaseMap: Record<typeof compositingPhase.value, string> = {
+    loading: '加载资源...',
+    analyzing: '分析图片...',
+    preparing: '准备合成...',
+    executing: '合成中...',
+    finalizing: '完成处理...',
+  }
+  return phaseMap[compositingPhase.value]
+})
+
+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({
+      title: '文件类型错误',
+      description: '请选择一个图片文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  selectedBackgroundFile.value = file
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    selectedBackgroundPreview.value = e.target?.result as string
+  }
+  reader.readAsDataURL(file)
+  combinatorError.value = ''
+  compositedVideoBlob.value = null
+}
+
+const composeBackgroundVideo = async () => {
+  if (!selectedBackgroundFile.value) {
+    toast.add({
+      title: '未选择图片',
+      description: '请先选择一个背景图片',
+      color: 'orange',
+      icon: 'i-tabler-alert-circle',
+    })
+    return
+  }
+
+  try {
+    isCombinatorLoading.value = true
+    compositingProgress.value = 0
+    combinatorError.value = ''
+
+    // 使用 FFmpeg WASM 进行视频背景合成
+    const resultBlob = await useVideoBackgroundCompositing(
+      props.video.video_alpha_url!,
+      selectedBackgroundFile.value,
+      {
+        onProgress: (info) => {
+          compositingProgress.value = info.progress
+          compositingPhase.value = info.phase
+        },
+      }
+    )
+
+    compositedVideoBlob.value = resultBlob
+
+    toast.add({
+      title: '合成成功',
+      description: '背景已成功合成，可预览或下载',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+  } catch (err: any) {
+    combinatorError.value = err.message || '合成失败，请重试'
+    toast.add({
+      title: '合成失败',
+      description: combinatorError.value,
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  } finally {
+    isCombinatorLoading.value = false
+  }
+}
+
+const downloadCompositedVideo = () => {
+  if (!compositedVideoBlob.value) return
+
+  const url = URL.createObjectURL(compositedVideoBlob.value)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `${props.video.title || props.video.task_id}_composited.mp4`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+const compositedVideoUrl = computed(() => {
+  return compositedVideoBlob.value
+    ? URL.createObjectURL(compositedVideoBlob.value)
+    : ''
+})
+
+const startDownload = (url: string, filename: string) => {
+  if (url.endsWith('.ass')) {
+    downloadingState.subtitle = 0
+  } else {
+    downloadingState.video = 0
+  }
+
+  const { download, progressEmitter } = useDownload(url, filename)
+
+  progressEmitter.on('progress', (progress) => {
+    if (url.endsWith('.ass')) {
+      downloadingState.subtitle = progress
+    } else {
+      downloadingState.video = progress
+    }
+    console.log(downloadingState)
+  })
+
+  progressEmitter.on('done', () => {
+    if (url.endsWith('.ass')) {
+      downloadingState.subtitle = 100
+    } else {
+      downloadingState.video = 100
+    }
+    toast.add({
+      title: '下载完成',
+      description: '资源下载已完成',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+  })
+
+  progressEmitter.on('error', (err) => {
+    if (url.endsWith('.ass')) {
+      downloadingState.subtitle = 0
+    } else {
+      downloadingState.video = 0
+    }
+    toast.add({
+      title: '下载失败',
+      description: err.message || '下载失败，未知错误',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  })
+
+  download()
+}
+</script>
+
+<template>
+  <div
+    class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden p-3"
+  >
+    <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>
+        </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"
+          />
+        </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"
+      >
+        <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>
+          </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>
+          </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>
+          </li>
+          <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="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
+            class="transition-all sm:opacity-0 sm:translate-x-4 sm:pointer-events-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto"
+            color="red"
+            icon="i-tabler-trash"
+            size="xs"
+            variant="soft"
+            @click="emit('delete', video)"
+          />
+          <UButtonGroup size="xs">
+            <UButton
+              :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'
+                )
+              "
+            />
+            <UDropdown
+              :items="[
+                [
+                  {
+                    label: '绿幕视频下载',
+                    icon: 'tabler:download',
+                    click: () => {
+                      startDownload(
+                        video.video_url!,
+                        (video.title || video.task_id) + '.mp4'
+                      )
+                    },
+                  },
+                  {
+                    label: '合成背景图片',
+                    icon: 'tabler:background',
+                    click: () => {
+                      isVideoBackgroundPreviewOpen = true
+                    },
+                    disabled: !video.video_alpha_url,
+                  },
+                ],
+              ]"
+            >
+              <UButton
+                :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"
+                variant="soft"
+              />
+            </UDropdown>
+          </UButtonGroup>
+        </div>
+      </div>
+    </div>
+    <!-- Full video content -->
+    <UModal v-model="isFullContentOpen">
+      <UCard
+        :ui="{
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+            >
+              {{ video.title || '无标题' }}
+              <span class="block text-xs text-primary">驱动内容</span>
+            </h3>
+            <UButton
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isFullContentOpen = false"
+            />
+          </div>
+        </template>
+
+        <div>
+          <article class="prose">
+            <p class="text-justify">{{ video.content }}</p>
+          </article>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="primary"
+              @click="isFullContentOpen = false"
+            >
+              关闭
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </UModal>
+    <UModal v-model="isPreviewModalOpen">
+      <UCard
+        :ui="{
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
+            >
+              <p>绿幕视频预览</p>
+              <p
+                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+              >
+                {{ video.title }}
+              </p>
+            </div>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isPreviewModalOpen = false"
+            />
+          </div>
+        </template>
+
+        <video
+          class="w-full rounded 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',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
+            >
+              <p>视频背景合成</p>
+              <p
+                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+              >
+                {{ video.title }}
+              </p>
+            </div>
+            <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 class="space-y-3">
+              <div class="text-sm font-medium text-gray-900 dark:text-white">
+                选择背景图片
+              </div>
+
+              <!-- 预览区域 -->
+              <!-- <div v-if="selectedBackgroundPreview" class="relative w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
+                <img :src="selectedBackgroundPreview" alt="背景预览" class="w-full h-full object-cover" />
+              </div>
+              <div v-else class="w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800 flex flex-col items-center justify-center gap-2">
+                <UIcon class="text-3xl text-neutral-400" name="tabler:photo" />
+                <span class="text-xs text-neutral-400">点击选择图片</span>
+              </div> -->
+
+              <!-- 文件输入 -->
+              <input
+                ref="fileInputRef"
+                type="file"
+                accept="image/*"
+                class="hidden"
+                @change="handleBackgroundFileSelect"
+              />
+
+              <!-- 选择按钮 -->
+              <UButton
+                block
+                color="primary"
+                icon="i-tabler-photo-plus"
+                label="选择图片"
+                variant="soft"
+                @click="fileInputRef?.click()"
+              />
+
+              <!-- 选中的文件名 -->
+              <div
+                v-if="selectedBackgroundFile"
+                class="text-xs text-neutral-500 dark:text-neutral-400"
+              >
+                已选择: {{ selectedBackgroundFile.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 错误提示 -->
+          <UAlert
+            v-if="combinatorError"
+            color="red"
+            icon="i-tabler-alert-triangle"
+            title="合成失败"
+            :description="combinatorError"
+          />
+
+          <!-- 合成进度 -->
+          <div
+            v-if="isCombinatorLoading"
+            class="space-y-2"
+          >
+            <div class="flex justify-between items-center">
+              <span class="text-sm font-medium text-gray-900 dark:text-white">
+                {{ phaseText }}
+              </span>
+              <span class="text-xs text-neutral-500">
+                {{ compositingProgress }}%
+              </span>
+            </div>
+            <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
+              class="w-full rounded-lg shadow bg-black"
+              controls
+              autoplay
+              muted
+              :src="compositedVideoUrl"
+            />
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="gray"
+              label="取消"
+              :disabled="isCombinatorLoading"
+              @click="isVideoBackgroundPreviewOpen = false"
+            />
+            <UButton
+              v-if="compositedVideoBlob"
+              color="gray"
+              label="重新选择"
+              @click="
+                () => {
+                  selectedBackgroundFile = null
+                  selectedBackgroundPreview = ''
+                  compositedVideoBlob = null
+                  combinatorError = ''
+                  isCombinatorLoading = false
+                }
+              "
+            />
+            <UButton
+              v-if="compositedVideoBlob"
+              color="green"
+              icon="i-tabler-download"
+              label="下载合成视频"
+              @click="downloadCompositedVideo"
+            />
+            <UButton
+              v-else
+              :disabled="!selectedBackgroundFile || isCombinatorLoading"
+              :loading="isCombinatorLoading"
+              color="primary"
+              icon="i-tabler-wand"
+              :label="isCombinatorLoading ? '合成中' : '开始合成'"
+              @click="composeBackgroundVideo"
+            />
+          </div>
+        </template>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+
+<style scoped></style>

app/components/aigc/generation/SRTEditor.vue

@@ -0,0 +1,623 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { encode } from '@monosky/base64'
+import { object, string, number, type InferType } from 'yup'
+
+interface Subtitle {
+  start: string
+  end: string
+  text: string
+  active?: boolean
+}
+
+const props = defineProps({
+  course: {
+    type: Object as PropType<resp.gen.CourseGenItem>,
+    required: true,
+  },
+})
+
+const dayjs = useDayjs()
+const toast = useToast()
+const loginState = useLoginState()
+
+const isDrawerActive = ref(false)
+const isLoading = ref(true)
+const isSaving = ref(false)
+const rawSrt = ref<string | null>(null)
+const subtitles = ref<Subtitle[]>([])
+const modified = ref(false)
+const isExporting = ref(false)
+
+const videoElement = ref<HTMLVideoElement | null>(null)
+
+const subtitleStyleSchema = object({
+  color: string().required(),
+  fontSize: number().required(),
+  effect: string().required(),
+  bottomOffset: number().required(),
+})
+type subtitleStyleSchema = InferType<typeof subtitleStyleSchema>
+
+const subtitleStyleState = reactive<subtitleStyleSchema>({
+  color: '#fff',
+  effect: 'shadow',
+  fontSize: 24,
+  bottomOffset: 12,
+})
+
+const loadSrt = async () => {
+  isLoading.value = true
+  try {
+    // const response = await fetch(props.course.subtitle_url)
+    const response = await fetch(await fetchCourseSubtitleUrl(props.course))
+    const text = await response.text()
+    rawSrt.value = text
+    parseSrt(text)
+  } catch (err) {
+    toast.add({
+      title: '加载字幕失败',
+      description: `${err}` || '未知错误',
+      color: 'red',
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const parseSrt = (srt: string) => {
+  const lines = srt.split(/\r?\n/)
+  const regex = /(\d{2}:\d{2}:\d{2},\d{3}) --> (\d{2}:\d{2}:\d{2},\d{3})/
+  let subtitle: Subtitle | null = null
+
+  lines.forEach((line) => {
+    if (/^\d+$/.test(line.trim())) return
+
+    const match = line.match(regex)
+    if (match) {
+      if (subtitle) {
+        subtitles.value.push(subtitle)
+      }
+      subtitle = {
+        start: match[1],
+        end: match[2],
+        text: '',
+      }
+    } else if (subtitle) {
+      subtitle.text += line.trim() ? line : ''
+    }
+  })
+
+  if (subtitle) {
+    subtitles.value.push(subtitle)
+  }
+}
+
+const generateSrt = () => {
+  return subtitles.value
+    .map((subtitle, index) => {
+      return `${index + 1}\n${subtitle.start} --> ${subtitle.end}\n${
+        subtitle.text
+      }\n`
+    })
+    .join('\n')
+}
+
+const formatTime = (time: string) => {
+  const parts = time.split(',')
+  const timeParts = parts[0].split(':')
+  return {
+    hours: parseInt(timeParts[0]),
+    minutes: parseInt(timeParts[1]),
+    seconds: parseInt(timeParts[2]),
+    milliseconds: parseInt(parts[1]),
+  }
+}
+
+const formatTimeToDayjs = (time: string) => {
+  const parts = time.split(',')
+  const timeParts = parts[0].split(':')
+  return dayjs()
+    .hour(parseInt(timeParts[0]))
+    .minute(parseInt(timeParts[1]))
+    .second(parseInt(timeParts[2]))
+    .millisecond(parseInt(parts[1]))
+}
+
+const syncSubtitles = () => {
+  if (!videoElement.value) return
+
+  const currentTime = videoElement.value.currentTime * 1000 // convert to milliseconds
+
+  subtitles.value.forEach((subtitle) => {
+    const start = formatTime(subtitle.start)
+    const end = formatTime(subtitle.end)
+
+    const startTime =
+      (start.hours * 3600 + start.minutes * 60 + start.seconds) * 1000 +
+      start.milliseconds
+    const endTime =
+      (end.hours * 3600 + end.minutes * 60 + end.seconds) * 1000 +
+      end.milliseconds
+
+    subtitle.active = currentTime >= startTime && currentTime <= endTime
+    // scroll active subtitle into view
+    if (subtitle.active) {
+      const element = document.getElementById(
+        `subtitle-${subtitles.value.indexOf(subtitle)}`
+      )!
+      const parent = element?.parentElement
+      // scroll element to the center of parent
+      parent?.scrollTo({
+        top: element.offsetTop,
+      })
+    }
+  })
+}
+
+const onSubtitleInputClick = (subtitle: Subtitle) => {
+  if (!videoElement.value) return
+  if (!subtitle.active) {
+    videoElement.value.currentTime =
+      formatTime(subtitle.start).hours * 3600 +
+      formatTime(subtitle.start).minutes * 60 +
+      formatTime(subtitle.start).seconds +
+      1
+  }
+  videoElement.value.pause()
+}
+
+const saveNewSubtitle = () => {
+  isSaving.value = true
+  const encodedSubtitle = encode(generateSrt())
+  useFetchWrapped<
+    req.gen.CourseSubtitleCreate & AuthedRequest,
+    BaseResponse<resp.gen.CourseSubtitleCreate>
+  >('App.Digital_VideoSubtitle.CreateFile', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    sub_type: 1,
+    sub_content: encodedSubtitle,
+    task_id: props.course?.task_id,
+  })
+    .then((_) => {
+      modified.value = false
+      toast.add({
+        color: 'green',
+        title: '字幕已保存',
+        description: '修改后的字幕文件已保存',
+      })
+    })
+    .finally(() => {
+      isSaving.value = false
+    })
+}
+
+const exportVideo = async () => {
+  isExporting.value = true
+  const srtResponse = await (
+    await fetch(await fetchCourseSubtitleUrl(props.course))
+  ).blob()
+  if (!srtResponse) {
+    toast.add({
+      title: '获取字幕失败',
+      description: '无法获取字幕文件，请稍后重试',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+  const srtBlob = new Blob([srtResponse], { type: 'text/plain' })
+  const srtUrl = URL.createObjectURL(srtBlob)
+  useVideoSubtitleEmbedding(props.course.video_url, srtUrl, {
+    color: subtitleStyleState.color,
+    fontSize: subtitleStyleState.fontSize,
+    textShadow:
+      subtitleStyleState.effect === 'shadow'
+        ? {
+            offsetX: 2,
+            offsetY: 2,
+            blur: 6,
+            color: 'rgba(0, 0, 0, 0.35)',
+          }
+        : {
+            offsetX: 0,
+            offsetY: 0,
+            blur: 0,
+            color: 'transparent',
+          },
+    strokeStyle: subtitleStyleState.effect === 'stroke' ? '#000 2px' : 'none',
+    bottomOffset: subtitleStyleState.bottomOffset,
+  })
+    .then((blobUrl) => {
+      const { download } = useDownload(blobUrl, 'combined_video.mp4')
+      download()
+    })
+    .finally(() => {
+      isExporting.value = false
+    })
+}
+
+onMounted(() => {
+  if (rawSrt.value) {
+    parseSrt(rawSrt.value)
+  }
+})
+
+defineExpose({
+  open() {
+    isDrawerActive.value = true
+    if (!rawSrt.value) loadSrt()
+  },
+  close() {
+    isDrawerActive.value = false
+  },
+})
+</script>
+
+<template>
+  <div>
+    <USlideover
+      v-model="isDrawerActive"
+      :prevent-close="modified"
+      :ui="{ width: 'max-w-lg' }"
+    >
+      <UCard
+        class="flex flex-col flex-1 overflow-hidden"
+        :ui="{
+          body: { base: 'overflow-auto flex-1' },
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <UButton
+            color="gray"
+            variant="ghost"
+            size="sm"
+            icon="tabler:x"
+            class="flex sm:hidden absolute end-5 top-5 z-10"
+            square
+            padded
+            @click="isDrawerActive = false"
+          />
+          <div class="flex flex-col">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+            >
+              字幕编辑器
+            </h3>
+            <h3
+              class="text-xs font-semibold text-blue-500"
+              v-if="course.title"
+            >
+              {{ course.title }}
+            </h3>
+          </div>
+        </template>
+
+        <div
+          v-if="isLoading"
+          class="flex justify-center items-center text-primary"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+          >
+            <defs>
+              <filter id="svgSpinnersGooeyBalls20">
+                <feGaussianBlur
+                  in="SourceGraphic"
+                  result="y"
+                  stdDeviation="1"
+                />
+                <feColorMatrix
+                  in="y"
+                  result="z"
+                  values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
+                />
+                <feBlend
+                  in="SourceGraphic"
+                  in2="z"
+                />
+              </filter>
+            </defs>
+            <g filter="url(#svgSpinnersGooeyBalls20)">
+              <circle
+                cx="5"
+                cy="12"
+                r="4"
+                fill="currentColor"
+              >
+                <animate
+                  attributeName="cx"
+                  calcMode="spline"
+                  dur="2s"
+                  keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                  repeatCount="indefinite"
+                  values="5;8;5"
+                />
+              </circle>
+              <circle
+                cx="19"
+                cy="12"
+                r="4"
+                fill="currentColor"
+              >
+                <animate
+                  attributeName="cx"
+                  calcMode="spline"
+                  dur="2s"
+                  keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                  repeatCount="indefinite"
+                  values="19;16;19"
+                />
+              </circle>
+              <animateTransform
+                attributeName="transform"
+                dur="0.75s"
+                repeatCount="indefinite"
+                type="rotate"
+                values="0 12 12;360 12 12"
+              />
+            </g>
+          </svg>
+        </div>
+        <div
+          v-else
+          class="flex flex-col h-full gap-2 overflow-hidden overscroll-y-none overshadow"
+        >
+          <div class="relative w-full aspect-video flex-1">
+            <div
+              class="absolute w-fit mx-auto inset-x-0 font-sans font-bold subtitle"
+              :class="{
+                stroke: subtitleStyleState.effect === 'stroke',
+              }"
+              :style="{
+                lineHeight: '1',
+                color: subtitleStyleState.color,
+                fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
+                bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
+                textShadow:
+                  subtitleStyleState.effect === 'shadow'
+                    ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
+                    : undefined,
+              }"
+            >
+              {{ subtitles.find((sub) => sub.active)?.text }}
+            </div>
+            <video
+              controls
+              ref="videoElement"
+              class="rounded"
+              style="-webkit-user-drag: none"
+              :src="course.video_url"
+              @timeupdate="syncSubtitles"
+            />
+          </div>
+          <UAccordion
+            :items="[{ label: '字幕选项' }]"
+            color="gray"
+            size="lg"
+          >
+            <template #item>
+              <div
+                class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6"
+              >
+                <div class="w-full flex flex-col justify-center">
+                  <div
+                    class="rounded-md w-full aspect-video relative overflow-hidden"
+                  >
+                    <img
+                      class="object-cover w-full h-full rounded-md"
+                      src="https://static-xsh.oss-cn-chengdu.aliyuncs.com/file/2024-08-04/9ed1e5c0133824f0bcf79d1ad9e9ecbb.png"
+                    />
+                    <span
+                      class="absolute font-sans font-bold bottom-0 left-1/2 transform -translate-x-1/2 subtitle"
+                      :class="{
+                        stroke: subtitleStyleState.effect === 'stroke',
+                      }"
+                      :style="{
+                        lineHeight: '1',
+                        color: subtitleStyleState.color,
+                        fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
+                        bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
+                        textShadow:
+                          subtitleStyleState.effect === 'shadow'
+                            ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
+                            : undefined,
+                      }"
+                    >
+                      字幕样式预览
+                    </span>
+                  </div>
+                  <span class="text-sm italic opacity-50">
+                    字幕预览仅供参考，以实际渲染效果为准
+                  </span>
+                </div>
+                <UForm
+                  :schema="subtitleStyleSchema"
+                  :state="subtitleStyleState"
+                  class="flex flex-col gap-4"
+                >
+                  <div class="flex gap-4">
+                    <UFormGroup
+                      label="字幕颜色"
+                      name="fontColor"
+                      class="w-full"
+                      size="xs"
+                    >
+                      <USelectMenu
+                        :options="[
+                          {
+                            label: '黑色',
+                            value: '#000',
+                          },
+                          {
+                            label: '白色',
+                            value: '#fff',
+                          },
+                        ]"
+                        option-attribute="label"
+                        value-attribute="value"
+                        v-model="subtitleStyleState.color"
+                      />
+                    </UFormGroup>
+                    <UFormGroup
+                      label="字幕效果"
+                      name="effect"
+                      class="w-full"
+                      size="xs"
+                    >
+                      <USelectMenu
+                        :options="[
+                          {
+                            label: '阴影',
+                            value: 'shadow',
+                          },
+                          {
+                            label: '描边',
+                            value: 'stroke',
+                          },
+                        ]"
+                        option-attribute="label"
+                        value-attribute="value"
+                        v-model="subtitleStyleState.effect"
+                      />
+                    </UFormGroup>
+                  </div>
+                  <UFormGroup
+                    :label="`字幕大小 ${subtitleStyleState.fontSize}px`"
+                    name="fontSize"
+                    size="xs"
+                  >
+                    <URange
+                      :max="64"
+                      :min="20"
+                      :step="2"
+                      size="sm"
+                      v-model="subtitleStyleState.fontSize"
+                    />
+                  </UFormGroup>
+                  <UFormGroup
+                    :label="`字幕偏移量 ${subtitleStyleState.bottomOffset}px`"
+                    name="offset"
+                    size="xs"
+                  >
+                    <URange
+                      :max="30"
+                      :min="0"
+                      :step="1"
+                      size="sm"
+                      v-model="subtitleStyleState.bottomOffset"
+                    />
+                  </UFormGroup>
+                </UForm>
+              </div>
+            </template>
+          </UAccordion>
+          <ul
+            class="flex-1 px-0.5 pb-[100%] overflow-y-auto space-y-0.5 scroll-smooth relative"
+          >
+            <li
+              v-for="(subtitle, index) in subtitles"
+              :key="index"
+              :id="'subtitle-' + index"
+            >
+              <div :class="{ 'text-primary': subtitle.active }">
+                <span class="text-xs font-medium opacity-60">
+                  {{ formatTimeToDayjs(subtitle.start).format('HH:mm:ss') }}
+                  -
+                  {{ formatTimeToDayjs(subtitle.end).format('HH:mm:ss') }}
+                  <span class="opacity-50">
+                    [{{
+                      formatTimeToDayjs(subtitle.end).diff(
+                        formatTimeToDayjs(subtitle.start),
+                        'second'
+                      )
+                    }}s]
+                  </span>
+                </span>
+                <UInput
+                  v-model="subtitle.text"
+                  class="w-full"
+                  placeholder="请输入字幕内容"
+                  :name="'subtitle-' + index"
+                  :autofocus="false"
+                  :color="subtitle.active ? 'primary' : undefined"
+                  @click="onSubtitleInputClick(subtitle)"
+                  @input="
+                    () => {
+                      if (!modified) modified = true
+                    }
+                  "
+                >
+                  <template #trailing>
+                    <UIcon
+                      v-show="subtitle.active"
+                      name="tabler:keyframe-align-vertical-filled"
+                    />
+                  </template>
+                </UInput>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end items-center gap-2">
+            <span
+              v-if="modified"
+              class="text-sm text-yellow-500 font-medium"
+            >
+              已更改但未保存
+            </span>
+            <UButton
+              :loading="isExporting"
+              variant="soft"
+              icon="i-tabler-file-export"
+              @click="exportVideo"
+            >
+              导出视频
+            </UButton>
+            <UButton
+              :disabled="isExporting || !modified"
+              :loading="isSaving"
+              icon="i-tabler-device-floppy"
+              @click="saveNewSubtitle"
+            >
+              保存{{ isSaving ? '中' : '' }}
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+
+<style scoped>
+.overshadow {
+  @apply relative;
+}
+
+.overshadow:after {
+  content: '';
+  inset: 80% 0 0;
+  position: absolute;
+  @apply bg-gradient-to-b from-transparent to-white dark:to-neutral-950 pointer-events-none;
+}
+
+.subtitle.stroke {
+  text-shadow:
+    1px 1px 0 #000,
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000;
+}
+
+.subtitle.shadow {
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+}
+</style>

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/useFFmpeg.ts

@@ -0,0 +1,103 @@
+import { FFmpeg } from '@ffmpeg/ffmpeg'
+import { toBlobURL } from '@ffmpeg/util'
+
+let ffmpegInstance: FFmpeg | null = null
+let loadPromise: Promise<FFmpeg> | null = null
+
+/**
+ * 获取或初始化 FFmpeg 实例（单例模式）
+ */
+export const useFFmpeg = async () => {
+  // 如果已经加载过，直接返回
+  if (ffmpegInstance && ffmpegInstance.loaded) {
+    return ffmpegInstance
+  }
+
+  // 如果正在加载中，等待加载完成
+  if (loadPromise) {
+    return loadPromise
+  }
+
+  loadPromise = initializeFFmpeg()
+  return loadPromise
+}
+
+async function initializeFFmpeg(enableMT: boolean = false): Promise<FFmpeg> {
+  try {
+    const ffmpeg = new FFmpeg()
+
+    ffmpeg.on('log', ({ message, type }) => {
+      console.log(`[ffmpeg - ${type}]`, message)
+    })
+
+    ffmpeg.on('progress', ({ progress, time }) => {
+      console.log(`[ffmpeg] P: ${(progress * 100).toFixed(2)}%, T: ${time}ms`)
+    })
+
+    const baseURL = enableMT
+      ? 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/esm'
+      : 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/esm'
+
+    const coreURL = await toBlobURL(
+      `${baseURL}/ffmpeg-core.js`,
+      'text/javascript'
+    )
+    const wasmURL = await toBlobURL(
+      `${baseURL}/ffmpeg-core.wasm`,
+      'application/wasm'
+    )
+
+    let loadPayload = {
+      coreURL,
+      wasmURL,
+    }
+
+    if (enableMT) {
+      const workerURL = await toBlobURL(
+        `${baseURL}/ffmpeg-core.worker.js`,
+        'text/javascript'
+      )
+      Object.assign(loadPayload, { workerURL })
+    }
+
+    const isLoaded = await ffmpeg.load(loadPayload)
+    console.log('[FFmpeg] FFmpeg 加载完成，isLoaded:', isLoaded)
+
+    ffmpegInstance = ffmpeg
+    loadPromise = null
+    return ffmpeg
+  } catch (error) {
+    console.error('[FFmpeg] 初始化失败:', error)
+    loadPromise = null
+    throw error
+  }
+}
+
+/**
+ * 清理 FFmpeg 资源
+ */
+export const cleanupFFmpeg = () => {
+  if (ffmpegInstance && ffmpegInstance.loaded) {
+    console.log('[FFmpeg] 清理 FFmpeg 资源...')
+    ffmpegInstance.terminate()
+    ffmpegInstance = null
+    loadPromise = null
+  }
+}
+
+/**
+ * 将 Blob/File 转换为 Uint8Array
+ */
+export const fileToUint8Array = async (
+  file: File | Blob
+): Promise<Uint8Array> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      const arrayBuffer = e.target?.result as ArrayBuffer
+      resolve(new Uint8Array(arrayBuffer))
+    }
+    reader.onerror = reject
+    reader.readAsArrayBuffer(file)
+  })
+}

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(),
+      paths: ['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(),
+      paths: ['tourState'],
+    },
+  }
+)

app/composables/useVideoBackgroundCombinator.ts

@@ -0,0 +1,6 @@
+/**
+ * 已废弃：使用 useVideoBackgroundCompositing 替代
+ * 该文件保留用于向后兼容
+ */
+
+export { useVideoBackgroundCompositing as useVideoBackgroundCombinator } from './useVideoBackgroundCompositing'

app/composables/useVideoBackgroundCompositing.ts

@@ -0,0 +1,165 @@
+import { fetchFile } from '@ffmpeg/util'
+import { useFFmpeg, fileToUint8Array } from './useFFmpeg'
+
+/**
+ * 获取图片的宽高信息
+ */
+const getImageDimensions = async (
+  imageData: Uint8Array
+): Promise<{ width: number; height: number }> => {
+  return new Promise((resolve, reject) => {
+    const blob = new Blob([imageData], { type: 'image/png' })
+    const url = URL.createObjectURL(blob)
+    const img = new Image()
+
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+      resolve({ width: img.width, height: img.height })
+    }
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error('Failed to load image'))
+    }
+
+    img.src = url
+  })
+}
+
+/**
+ * 计算等比缩放到720P的尺寸
+ * 720P 指高度为720，宽度按原宽高比计算
+ */
+const calculateScaledDimensions = (
+  width: number,
+  height: number
+): { width: number; height: number } => {
+  const targetHeight = 720
+
+  // 如果原始高度小于等于720，保持原始尺寸
+  if (height <= targetHeight) {
+    return { width, height }
+  }
+
+  // 计算缩放比例
+  const scale = targetHeight / height
+  const scaledWidth = Math.round(width * scale)
+
+  // 确保宽度为偶数（视频编码要求）
+  const finalWidth = scaledWidth % 2 === 0 ? scaledWidth : scaledWidth - 1
+
+  return { width: finalWidth, height: targetHeight }
+}
+
+export type CompositingPhase =
+  | 'loading'
+  | 'analyzing'
+  | 'preparing'
+  | 'executing'
+  | 'finalizing'
+
+export type CompositingProgressCallback = (info: {
+  progress: number
+  phase: CompositingPhase
+}) => void
+
+/**
+ * 使用 FFmpeg WASM 将透明通道的视频与背景图片进行合成
+ * @param videoUrl - WebM 视频 URL（带透明通道的数字人视频）
+ * @param backgroundImage - 背景图片（File 对象或 URL 字符串）
+ * @param options - 额外选项
+ * @returns 合成后的视频 Blob
+ */
+export const useVideoBackgroundCompositing = async (
+  videoUrl: string,
+  backgroundImage: File | string,
+  options?: {
+    onProgress?: CompositingProgressCallback
+  }
+) => {
+  const ffmpeg = await useFFmpeg()
+  const progressCallback = options?.onProgress
+
+  const videoFileName = 'input_video.webm'
+  const backgroundFileName = 'background.png'
+  const outputFileName = 'output.mp4'
+
+  try {
+    progressCallback?.({ progress: 10, phase: 'loading' })
+    const videoData = await fetchFile(videoUrl)
+    const backgroundData = await fetchFile(backgroundImage)
+
+    progressCallback?.({ progress: 15, phase: 'analyzing' })
+    const { width: bgWidth, height: bgHeight } =
+      await getImageDimensions(backgroundData)
+    console.log(
+      `[Compositing] Background image dimensions: ${bgWidth}x${bgHeight}`
+    )
+
+    const { width: outputWidth, height: outputHeight } =
+      calculateScaledDimensions(bgWidth, bgHeight)
+    console.log(
+      `[Compositing] Output dimensions: ${outputWidth}x${outputHeight}`
+    )
+
+    progressCallback?.({ progress: 20, phase: 'preparing' })
+
+    await ffmpeg.writeFile(videoFileName, videoData)
+    await ffmpeg.writeFile(backgroundFileName, backgroundData)
+
+    progressCallback?.({ progress: 25, phase: 'preparing' })
+
+    // HACK: 不明原因导致首次执行合成时会报 memory access out of bounds 错误，先执行一次空命令能够规避
+    await ffmpeg.exec(['-i', 'not-found'])
+
+    // 设置 progress 事件监听，映射 FFmpeg 进度到 30-95% 范围
+    const executingProgressHandler = ({ progress }: { progress: number }) => {
+      // progress 范围是 0-1，映射到 30-95
+      const mappedProgress = Math.round(30 + progress * 65)
+      progressCallback?.({ progress: mappedProgress, phase: 'executing' })
+    }
+    ffmpeg.on('progress', executingProgressHandler)
+
+    progressCallback?.({ progress: 30, phase: 'executing' })
+
+    // prettier-ignore
+    const exitCode = await ffmpeg.exec([
+      '-i', backgroundFileName,
+      '-c:v', 'libvpx-vp9',
+      '-i', videoFileName,
+      '-filter_complex', 'overlay=(W-w)/2:H-h',
+      '-c:v', 'libx264',
+      outputFileName
+    ])
+
+    ffmpeg.off('progress', executingProgressHandler)
+
+    if (exitCode !== 0) {
+      throw new Error(`FFmpeg command failed with exit code ${exitCode}`)
+    }
+
+    progressCallback?.({ progress: 95, phase: 'finalizing' })
+
+    const outputData = await ffmpeg.readFile(outputFileName)
+    let outputArray: Uint8Array
+    if (outputData instanceof Uint8Array) {
+      outputArray = outputData
+    } else if (typeof outputData === 'string') {
+      outputArray = new TextEncoder().encode(outputData)
+    } else {
+      outputArray = new Uint8Array(outputData as ArrayBufferLike)
+    }
+    const outputBlob = new Blob([outputArray], { type: 'video/mp4' })
+
+    progressCallback?.({ progress: 100, phase: 'finalizing' })
+
+    return outputBlob
+  } catch (error) {
+    console.error('Video compositing failed:', error)
+    throw error
+  } finally {
+    await ffmpeg.deleteFile(videoFileName)
+    await ffmpeg.deleteFile(backgroundFileName)
+    await ffmpeg.deleteFile(outputFileName)
+  }
+}

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

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

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: '智能生成',
@@ -39,9 +39,9 @@ const navList = ref<
     to: '/generation/ppt-templates',
   },
   {
-    label: '用户管理',
-    icon: 'tabler:users',
-    to: '/generation/admin/users',
+    label: '管理中心',
+    icon: 'tabler:home-cog',
+    to: '/generation/admin',
     admin: true,
   },
 ])
@@ -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>

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

@@ -0,0 +1,588 @@
+<script lang="ts" setup>
+import { object, string, number } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+
+useHead({
+  title: '数字人定制管理 | 管理员',
+})
+
+const toast = useToast()
+const loginState = useLoginState()
+
+// 定制记录列表
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+})
+
+const {
+  data: trainListResp,
+  status: trainListStatus,
+  refresh: refreshTrainList,
+} = useAsyncData(
+  'digital-train-list',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest,
+      BaseResponse<PagedData<DigitalHumanTrainItem>>
+    >('App.Digital_Train.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: pagination.page,
+      perpage: pagination.pageSize,
+    }),
+  {
+    watch: [pagination],
+  }
+)
+
+const trainList = computed(() => trainListResp.value?.data.items || [])
+
+// 表格列定义
+const columns = [
+  {
+    key: 'id',
+    label: 'ID',
+  },
+  {
+    key: 'dh_name',
+    label: '数字人名称',
+  },
+  {
+    key: 'organization',
+    label: '单位名称',
+  },
+  {
+    key: 'user_id',
+    label: '用户ID',
+  },
+  {
+    key: 'create_time',
+    label: '创建时间',
+  },
+  {
+    key: 'video_url',
+    label: '数字人视频',
+  },
+  {
+    key: 'auth_video_url',
+    label: '授权视频',
+  },
+  {
+    key: 'actions',
+    label: '操作',
+  },
+]
+
+// 录入数字人相关状态
+const isProcessModalOpen = ref(false)
+const currentTrainItem = ref<DigitalHumanTrainItem | null>(null)
+
+const processFormState = reactive({
+  name: '',
+  model_id: undefined as number | undefined,
+  description: '',
+  type: 2, // 默认为XSH自有
+})
+
+const processFormSchema = object({
+  name: string().required('请输入名称'),
+  model_id: number().required('请输入数字人ID'),
+  description: string().required('请输入描述'),
+  type: number().required('请选择类型'),
+})
+
+const sourceTypeList = [
+  { label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
+  { label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
+  { label: 'xsh_fh', value: 3, color: 'purple' }, // 硅基（泛化数字人）
+  { label: 'xsh_bb', value: 4, color: 'indigo' }, // 百度小冰
+]
+
+const avatarFile = ref<File | null>(null)
+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
+}
+
+// 处理文件上传
+const handleAvatarUpload = (files: FileList) => {
+  const file = files[0]
+  if (!file) return
+
+  // 验证文件类型
+  if (!file.type.startsWith('image/')) {
+    toast.add({
+      title: '文件格式错误',
+      description: '请上传图片文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  // 验证文件大小 (10MB)
+  if (file.size > 10 * 1024 * 1024) {
+    toast.add({
+      title: '文件过大',
+      description: '图片文件大小不能超过10MB',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  avatarFile.value = file
+}
+
+// 提交录入表单
+const onProcessSubmit = async (
+  event: FormSubmitEvent<typeof processFormState>
+) => {
+  if (!currentTrainItem.value) return
+
+  if (!avatarFile.value) {
+    toast.add({
+      title: '请上传数字人预览图',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  if (isProcessing.value) return
+
+  try {
+    isProcessing.value = true
+
+    // 1. 上传预览图
+    const avatarUrl = await useFileGo(avatarFile.value, 'material')
+
+    // 2. 创建系统数字人
+    const createSystemResult = await useFetchWrapped<
+      {
+        name: string
+        model_id: number
+        type: number
+        description: string
+        avatar: string
+      } & AuthedRequest,
+      BaseResponse<{ digital_human_id: number }>
+    >('App.Digital_Human.Create', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      name: event.data.name,
+      model_id: event.data.model_id!,
+      type: event.data.type,
+      description: event.data.description,
+      avatar: avatarUrl,
+    })
+
+    if (
+      createSystemResult.ret !== 200 ||
+      !createSystemResult.data.digital_human_id
+    ) {
+      throw new Error(createSystemResult.msg || '创建系统数字人失败')
+    }
+
+    // 3. 分配数字人给提交素材的用户
+    const createUserResult = await useFetchWrapped<
+      {
+        to_user_id: number
+        digital_human_array: number[]
+      } & AuthedRequest,
+      BaseResponse<{
+        total: number
+        success: number
+        failed: number
+      }>
+    >('App.User_UserDigital.CreateConnArr', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: currentTrainItem.value.user_id,
+      digital_human_array: [createSystemResult.data.digital_human_id],
+    })
+
+    if (createUserResult.ret !== 200 || createUserResult.data.success === 0) {
+      throw new Error(createUserResult.msg || '分配用户数字人失败')
+    }
+
+    toast.add({
+      title: '录入成功',
+      description: `数字人"${event.data.name}"已成功录入并分配给用户 ${currentTrainItem.value.user_id}${
+        createUserResult.data.failed
+          ? `，失败 ${createUserResult.data.failed} 个`
+          : ''
+      }`,
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+
+    // 删除定制记录
+    await handleDeleteTrain(currentTrainItem.value)
+
+    // 重置表单和状态
+    processFormState.name = ''
+    processFormState.model_id = undefined
+    processFormState.description = ''
+    processFormState.type = 2
+    avatarFile.value = null
+    currentTrainItem.value = null
+    isProcessModalOpen.value = false
+
+    // 刷新列表
+    await refreshTrainList()
+  } catch (error) {
+    console.error('录入数字人失败:', error)
+    const errorMessage =
+      error instanceof Error ? error.message : '录入失败，请重试'
+    toast.add({
+      title: '录入失败',
+      description: errorMessage,
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  } finally {
+    isProcessing.value = false
+  }
+}
+
+// 删除定制记录
+const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
+  try {
+    const result = await useFetchWrapped<
+      { train_id: number } & AuthedRequest,
+      BaseResponse<{ code: 0 | 1 }>
+    >('App.Digital_Train.Delete', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      train_id: item.id,
+    })
+
+    if (result.ret === 200 && result.data.code === 1) {
+      toast.add({
+        title: '删除成功',
+        description: '定制记录已删除',
+        color: 'green',
+        icon: 'i-tabler-check',
+      })
+      await refreshTrainList()
+    } else {
+      throw new Error(result.msg || '删除失败')
+    }
+  } catch (error) {
+    console.error('删除定制记录失败:', error)
+    const errorMessage =
+      error instanceof Error ? error.message : '删除失败，请重试'
+    toast.add({
+      title: '删除失败',
+      description: errorMessage,
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  }
+}
+
+// 格式化时间
+const formatTime = (timestamp: number) => {
+  return new Date(timestamp * 1000).toLocaleString('zh-CN')
+}
+
+// 预览视频
+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'
+
+  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'
+
+  const titleElement = document.createElement('h3')
+  titleElement.textContent = title
+  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.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>
+
+<template>
+  <div>
+    <div class="p-4 pb-0">
+      <BubbleTitle
+        title="数字人定制管理"
+        subtitle="Digital Human Training Management"
+      >
+        <template #action>
+          <UButton
+            color="gray"
+            variant="soft"
+            icon="i-tabler-refresh"
+            label="刷新"
+            @click="refreshTrainList"
+          />
+        </template>
+      </BubbleTitle>
+      <GradientDivider />
+    </div>
+
+    <div class="p-4">
+      <UAlert
+        v-if="loginState.user.auth_code === 2"
+        icon="i-tabler-user-shield"
+        title="管理员功能"
+        description="当前正在管理用户提交的数字人定制请求，仅管理员可见"
+        class="mb-4"
+      />
+
+      <div class="flex flex-col gap-4">
+        <UTable
+          :rows="trainList"
+          :columns="columns"
+          :loading="trainListStatus === 'pending'"
+          :progress="{ color: 'amber', animation: 'carousel' }"
+          class="border dark:border-neutral-800 rounded-md"
+        >
+          <template #create_time-data="{ row }">
+            <span class="text-sm">{{ formatTime(row.create_time) }}</span>
+          </template>
+
+          <template #video_url-data="{ row }">
+            <div class="flex gap-2">
+              <UButton
+                color="blue"
+                variant="soft"
+                size="xs"
+                icon="i-tabler-download"
+                :to="row.video_url"
+                target="_blank"
+                label="下载"
+              />
+              <UButton
+                color="green"
+                variant="soft"
+                size="xs"
+                icon="i-tabler-eye"
+                label="预览"
+                @click="previewVideo(row.video_url, '数字人视频')"
+              />
+            </div>
+          </template>
+
+          <template #auth_video_url-data="{ row }">
+            <div class="flex gap-2">
+              <UButton
+                color="blue"
+                variant="soft"
+                size="xs"
+                icon="i-tabler-download"
+                :to="row.auth_video_url"
+                target="_blank"
+                label="下载"
+              />
+              <UButton
+                color="green"
+                variant="soft"
+                size="xs"
+                icon="i-tabler-eye"
+                label="预览"
+                @click="previewVideo(row.auth_video_url, '授权视频')"
+              />
+            </div>
+          </template>
+
+          <template #actions-data="{ row }">
+            <div class="flex gap-2">
+              <UButton
+                color="amber"
+                variant="soft"
+                size="xs"
+                icon="i-tabler-user-cog"
+                label="录入"
+                @click="handleProcessTrain(row)"
+              />
+              <UButton
+                color="red"
+                variant="soft"
+                size="xs"
+                icon="i-tabler-trash"
+                label="删除"
+                @click="handleDeleteTrain(row)"
+              />
+            </div>
+          </template>
+        </UTable>
+
+        <div class="flex justify-end">
+          <UPagination
+            v-model="pagination.page"
+            :max="9"
+            :page-count="pagination.pageSize"
+            :total="trainListResp?.data.total || 0"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 录入数字人弹窗 -->
+    <USlideover v-model="isProcessModalOpen">
+      <UCard
+        :ui="{
+          body: { base: 'flex-1' },
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+        class="flex flex-col flex-1"
+      >
+        <template #header>
+          <UButton
+            class="flex absolute end-5 top-5 z-10"
+            color="gray"
+            icon="i-tabler-x"
+            padded
+            size="sm"
+            square
+            variant="ghost"
+            @click="isProcessModalOpen = false"
+          />
+          <div>
+            <h3 class="text-lg font-semibold">录入数字人</h3>
+            <p class="text-sm text-gray-500 mt-1">
+              为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
+              {{ currentTrainItem?.user_id }}
+            </p>
+          </div>
+        </template>
+
+        <UForm
+          class="space-y-4"
+          :schema="processFormSchema"
+          :state="processFormState"
+          @submit="onProcessSubmit"
+        >
+          <UFormGroup
+            label="名称"
+            name="name"
+          >
+            <UInput v-model="processFormState.name" />
+          </UFormGroup>
+
+          <UFormGroup
+            label="数字人ID"
+            name="model_id"
+            description="请输入五位数字人ID"
+          >
+            <UInput
+              v-model="processFormState.model_id"
+              type="number"
+              placeholder="请输入数字人ID"
+            />
+          </UFormGroup>
+
+          <UFormGroup
+            label="描述"
+            name="description"
+          >
+            <UTextarea
+              v-model="processFormState.description"
+              rows="3"
+            />
+          </UFormGroup>
+
+          <UFormGroup
+            label="供应商类型"
+            name="type"
+          >
+            <USelectMenu
+              v-model="processFormState.type"
+              value-attribute="value"
+              :options="sourceTypeList"
+            />
+          </UFormGroup>
+
+          <UFormGroup
+            label="数字人预览图"
+            required
+          >
+            <UniFileDnD
+              accept="image/png,image/jpeg,image/jpg"
+              @change="handleAvatarUpload"
+            >
+              <template #default>
+                <div class="text-center">
+                  <UIcon
+                    name="i-heroicons-photo"
+                    class="mx-auto h-12 w-12 text-gray-400"
+                  />
+                  <div class="mt-2">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                      {{ avatarFile ? avatarFile.name : '点击或拖拽上传图片' }}
+                    </span>
+                  </div>
+                </div>
+              </template>
+            </UniFileDnD>
+          </UFormGroup>
+
+          <div class="flex justify-end gap-2 pt-4">
+            <UButton
+              type="button"
+              color="gray"
+              variant="soft"
+              @click="isProcessModalOpen = false"
+            >
+              取消
+            </UButton>
+            <UButton
+              type="submit"
+              color="primary"
+              :loading="isProcessing"
+              :disabled="isProcessing"
+            >
+              {{ isProcessing ? '录入中...' : '录入并分配' }}
+            </UButton>
+          </div>
+        </UForm>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+
+<style scoped></style>

app/pages/generation/admin/index.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+const router = useRouter()
+const loginState = useLoginState()
+
+// 检查用户权限
+if (loginState.user.auth_code !== 2) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: '无权访问管理页面',
+  })
+}
+
+useHead({
+  title: '管理中心',
+})
+
+const adminPages = [
+  {
+    title: '用户管理',
+    description: '管理系统用户、权限和服务配额',
+    icon: 'i-tabler-users',
+    path: '/generation/admin/users',
+    color: 'blue',
+  },
+  {
+    title: '数字人定制管理',
+    description: '管理用户提交的数字人定制请求',
+    icon: 'i-tabler-user-cog',
+    path: '/generation/admin/digital-human-train',
+    color: 'amber',
+  },
+  {
+    title: '片头片尾管理',
+    description: '管理用户提交的片头片尾制作请求',
+    icon: 'i-tabler-movie',
+    path: '/generation/admin/materials',
+    color: 'green',
+  },
+]
+
+const navigateToPage = (path: string) => {
+  router.push(path)
+}
+</script>
+
+<template>
+  <div>
+    <div class="p-4 pb-0">
+      <BubbleTitle
+        title="管理中心"
+        subtitle="Administrator Panel"
+      />
+      <GradientDivider />
+    </div>
+
+    <div class="p-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div
+          v-for="page in adminPages"
+          :key="page.path"
+          class="group cursor-pointer"
+          @click="navigateToPage(page.path)"
+        >
+          <UCard
+            class="hover:shadow-lg transition-all duration-200 group-hover:scale-105"
+            :ui="{
+              ring: 'ring-1 ring-gray-200 dark:ring-gray-700 group-hover:ring-gray-300 dark:group-hover:ring-gray-600',
+            }"
+          >
+            <div class="flex flex-col items-center text-center p-6">
+              <div
+                class="w-16 h-16 rounded-full flex items-center justify-center mb-4 transition-colors"
+                :class="{
+                  'bg-blue-100 dark:bg-blue-900/30': page.color === 'blue',
+                  'bg-amber-100 dark:bg-amber-900/30': page.color === 'amber',
+                  'bg-green-100 dark:bg-green-900/30': page.color === 'green',
+                }"
+              >
+                <UIcon
+                  :name="page.icon"
+                  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',
+                  }"
+                />
+              </div>
+
+              <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"
+              >
+                {{ 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"
+              >
+                <span>进入管理</span>
+                <UIcon
+                  name="i-heroicons-arrow-right"
+                  class="ml-1 w-4 h-4"
+                />
+              </div>
+            </div>
+          </UCard>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

app/pages/generation/admin/users.vue

@@ -226,7 +226,7 @@ const onDigitalHumansSelected = (digitalHumans: DigitalHumanItem[]) => {
     user_id: loginState.user.id!,
     to_user_id: viewingUser.value?.id || 0,
     digital_human_array: digitalHumans.map(
-      (row) => row.id || row.digital_human_id
+      (row) => row.id || row.digital_human_id || 0
     ),
   }).then((res) => {
     if (res.ret === 200) {
@@ -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/avatar-models.vue

@@ -61,6 +61,25 @@ const {
   }
 )
 
+const {
+  data: avatarTrainList,
+  status: avatarTrainStatus,
+  refresh: refreshAvatarTrainList,
+} = useAsyncData(
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest,
+      BaseResponse<PagedData<DigitalHumanTrainItem>>
+    >('App.Digital_Train.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: 1,
+      perpage: 20,
+    }),
+  {}
+)
+
 const onSystemAvatarDelete = (row: DigitalHumanItem) => {
   useFetchWrapped<
     { digital_human_id: number } & AuthedRequest,
@@ -125,13 +144,14 @@ const columns = [
 ]
 
 const sourceTypeList = [
-  { label: 'TX', value: 1, color: 'blue' },
-  { label: 'XSH', value: 2, color: 'green' },
-  { label: 'GJ', value: 3, color: 'purple' },
-  { label: 'XB', value: 4, color: 'indigo' },
+  { 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' }, // 百度小冰
 ]
 
 const isCreateSlideOpen = ref(false)
+const isTrainCreatorOpen = ref(false)
 
 const createAvatarState = reactive({
   name: '',
@@ -230,13 +250,6 @@ const onAvatarUpload = async (files: FileList) => {
             :label="showSystemAvatar ? '显示用户数字人' : '显示系统数字人'"
             @click="showSystemAvatar = !showSystemAvatar"
           />
-          <UButton
-            v-if="loginState.user.auth_code === 2"
-            color="amber"
-            variant="soft"
-            label="创建数字人"
-            @click="isCreateSlideOpen = true"
-          />
           <UButton
             :icon="
               data_layout === 'grid'
@@ -248,6 +261,29 @@ const onAvatarUpload = async (files: FileList) => {
             @click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
             :label="data_layout === 'grid' ? '列表视图' : '宫格视图'"
           />
+          <UButton
+            v-if="loginState.user.auth_code === 2"
+            color="amber"
+            variant="soft"
+            icon="tabler:user-cog"
+            label="定制管理"
+            :to="'/generation/admin/digital-human-train'"
+          />
+          <UButton
+            color="blue"
+            variant="soft"
+            icon="tabler:user-plus"
+            label="定制数字人"
+            @click="isTrainCreatorOpen = true"
+          />
+          <UButton
+            v-if="loginState.user.auth_code === 2"
+            color="amber"
+            variant="soft"
+            icon="tabler:plus"
+            label="创建数字人"
+            @click="isCreateSlideOpen = true"
+          />
         </template>
       </BubbleTitle>
       <GradientDivider />
@@ -473,6 +509,9 @@ const onAvatarUpload = async (files: FileList) => {
         </UForm>
       </UCard>
     </USlideover>
+
+    <!-- 数字人定制对话框 -->
+    <DigitalHumanTrainCreator v-model="isTrainCreatorOpen" />
   </div>
 </template>
 

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

@@ -18,23 +18,26 @@ const userPagination = reactive({
   pageSize: 15,
 })
 
-const { data: systemTitlesTemplate, status: systemTitlesTemplateStatus } =
-  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],
-    }
-  )
+const {
+  data: systemTitlesTemplate,
+  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],
+  }
+)
 
 const {
   data: userTitlesTemplate,
@@ -85,7 +88,7 @@ const userTitlesState = reactive({
   title_id: 0,
   title: '',
   description: '',
-  remark: ''
+  remark: '',
 })
 
 const onUserTitlesRequest = (titles: TitlesTemplate) => {
@@ -93,6 +96,46 @@ const onUserTitlesRequest = (titles: TitlesTemplate) => {
   isUserTitlesRequestModalActive.value = true
 }
 
+const onSystemTitlesDelete = (titles: TitlesTemplate) => {
+  useFetchWrapped<
+    { title_id: number } & AuthedRequest,
+    BaseResponse<{ code: 0 | 1 }>
+  >('App.Digital_Titles.Delete', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    title_id: titles.id,
+  })
+    .then((res) => {
+      if (res.ret === 200 && res.data.code === 1) {
+        toast.add({
+          title: '删除成功',
+          description: '已删除系统片头模板',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .catch((error) => {
+      toast.add({
+        title: '删除失败',
+        description: error instanceof Error ? error.message : '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+    .finally(() => {
+      systemPagination.page = 1
+      refreshSystemTitlesTemplate()
+    })
+}
+
 const onUserTitlesDelete = (titles: TitlesTemplate) => {
   useFetchWrapped<
     Pick<req.gen.TitlesTemplateRequest, 'to_user_id'> & {
@@ -172,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">
@@ -205,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"
@@ -217,6 +262,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
           type="system"
           :key="titles.id"
           @user-titles-request="onUserTitlesRequest"
+          @system-titles-delete="onSystemTitlesDelete"
         />
       </div>
     </div>

app/pages/generation/ppt-templates.vue

@@ -15,7 +15,7 @@ const { data: pptCategories, refresh: refreshPPTCategories } = useAsyncData(
     useFetchWrapped<
       PagedDataRequest & AuthedRequest,
       BaseResponse<PagedData<PPTCategory>>
-    >('App.Digital_PowerPointCat.GetList', {
+    >('App.PowerPoint_Category.GetList', {
       token: loginState.token!,
       user_id: loginState.user.id,
       page: 1,
@@ -35,7 +35,7 @@ const { data: pptTemplates, refresh: refreshPptTemplates } = useAsyncData(
     useFetchWrapped<
       PagedDataRequest & { type: string | number } & AuthedRequest,
       BaseResponse<PagedData<PPTTemplate>>
-    >('App.Digital_PowerPoint.GetList', {
+    >('App.PowerPoint_SysPowerPoint.GetList', {
       token: loginState.token!,
       user_id: loginState.user.id,
       page: pagination.page,
@@ -87,7 +87,7 @@ const onCreateSubmit = (event: FormSubmitEvent<PPTCreateSchema>) => {
       file_url: string
     } & AuthedRequest,
     BaseResponse<{ powerpoint_id: number }>
-  >('App.Digital_PowerPoint.Create', {
+  >('App.PowerPoint_SysPowerPoint.Create', {
     token: loginState.token!,
     user_id: loginState.user.id,
     title: event.data.title,
@@ -127,7 +127,7 @@ const onCreateSubmit = (event: FormSubmitEvent<PPTCreateSchema>) => {
 }
 
 const onFileSelect = async (files: FileList, type: 'preview' | 'ppt') => {
-  const url = await useFileGo(files[0])
+  const url = await useFileGo(files[0], 'material')
   if (type === 'preview') {
     pptCreateState.preview_url = url
   } else {
@@ -145,7 +145,7 @@ const onDeletePPT = (ppt: PPTTemplate) => {
   useFetchWrapped<
     { powerpoint_id: number } & AuthedRequest,
     BaseResponse<{ code: number }>
-  >('App.Digital_PowerPoint.Delete', {
+  >('App.PowerPoint_SysPowerPoint.Delete', {
     token: loginState.token!,
     user_id: loginState.user.id,
     powerpoint_id: ppt.id,
@@ -185,7 +185,7 @@ const onCreateCat = () => {
     useFetchWrapped<
       { type: string } & AuthedRequest,
       BaseResponse<{ ppt_cat_id: number }>
-    >('App.Digital_PowerPointCat.Create', {
+    >('App.PowerPoint_SysPowerPoint.Create', {
       token: loginState.token!,
       user_id: loginState.user.id,
       type: createCatInput.value,
@@ -217,7 +217,7 @@ const onDeleteCat = (cat: PPTCategory) => {
   useFetchWrapped<
     { ppt_cat_id: number } & AuthedRequest,
     BaseResponse<{ code: number }>
-  >('App.Digital_PowerPointCat.Delete', {
+  >('App.PowerPoint_SysPowerPoint.Delete', {
     token: loginState.token!,
     user_id: loginState.user.id,
     ppt_cat_id: cat.id,
@@ -359,7 +359,7 @@ const onDeleteCat = (cat: PPTCategory) => {
 
         <div class="w-full flex justify-end">
           <UPagination
-            v-if="pptTemplates?.data.total > pagination.perpage"
+            v-if="(pptTemplates?.data.total || 0) > pagination.perpage"
             :total="pptTemplates?.data.total"
             :page-count="pagination.perpage"
             :max="9"

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({
@@ -341,12 +341,12 @@ onMounted(() => {
     .updateProfile()
     .then(() => {
       loginState.checkSession()
-      toast.add({
-        title: '登录成功',
-        description: `合作渠道认证成功`,
-        color: 'primary',
-        icon: 'i-tabler-login-2',
-      })
+      // toast.add({
+      //   title: '登录成功',
+      //   description: `合作渠道认证成功`,
+      //   color: 'primary',
+      //   icon: 'i-tabler-login-2',
+      // })
       router.replace('/')
     })
     .catch((err) => {

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>

components/aigc/RatioSelector.vue

@@ -1,82 +0,0 @@
-<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>

components/aigc/ReferenceFigureSelector.vue

@@ -1,127 +0,0 @@
-<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>

components/aigc/chat/NewSessionScreen.vue

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