refactor(deps): migrate to nuxt v4

app/components/BubbleTitle.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  subtitle: {
+    type: String,
+    required: false,
+  },
+  bubble: {
+    type: Boolean,
+    default: true,
+  },
+  bubbleColor: {
+    type: String,
+    default: 'primary-500',
+  },
+})
+</script>
+
+<template>
+  <div class="relative font-sans select-none flex justify-between items-center">
+    <div>
+      <h1
+        v-if="subtitle"
+        class="text-base text-neutral-300 dark:text-neutral-600 italic tracking-wide font-black leading-none"
+      >
+        {{ subtitle }}
+      </h1>
+
+      <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" />
+    </div>
+
+    <div
+      v-if="bubble"
+      :class="`bg-${bubbleColor}/50`"
+      class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full z-[0]"
+    ></div>
+  </div>
+</template>
+
+<style scoped></style>

app/components/DatePicker.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+// @ts-ignore
+import type {
+  DatePickerDate,
+  DatePickerRangeObject,
+} from 'v-calendar/dist/types/src/use/datePicker'
+import 'v-calendar/dist/style.css'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  modelValue: {
+    type: [Date, Object] as PropType<
+      DatePickerDate | DatePickerRangeObject | null
+    >,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  },
+})
+
+const attrs = {
+  transparent: true,
+  borderless: true,
+  color: 'primary',
+  'is-dark': { selector: 'html', darkClass: 'dark' },
+  'first-day-of-week': 2,
+}
+
+function onDayClick(_: any, event: MouseEvent): void {
+  const target = event.target as HTMLElement
+  target.blur()
+}
+</script>
+
+<template>
+  <VCalendarDatePicker
+    v-if="
+      date &&
+      (date as DatePickerRangeObject)?.start &&
+      (date as DatePickerRangeObject)?.end
+    "
+    v-model.range="date"
+    :columns="2"
+    v-bind="{ ...attrs, ...$attrs }"
+    @dayclick="onDayClick"
+  />
+  <VCalendarDatePicker
+    v-else
+    v-model="date"
+    v-bind="{ ...attrs, ...$attrs }"
+    @dayclick="onDayClick"
+  />
+</template>
+
+<style>
+:root {
+  --vc-gray-50: rgb(var(--color-gray-50));
+  --vc-gray-100: rgb(var(--color-gray-100));
+  --vc-gray-200: rgb(var(--color-gray-200));
+  --vc-gray-300: rgb(var(--color-gray-300));
+  --vc-gray-400: rgb(var(--color-gray-400));
+  --vc-gray-500: rgb(var(--color-gray-500));
+  --vc-gray-600: rgb(var(--color-gray-600));
+  --vc-gray-700: rgb(var(--color-gray-700));
+  --vc-gray-800: rgb(var(--color-gray-800));
+  --vc-gray-900: rgb(var(--color-gray-900));
+}
+
+.vc-primary {
+  --vc-accent-50: rgb(var(--color-primary-50));
+  --vc-accent-100: rgb(var(--color-primary-100));
+  --vc-accent-200: rgb(var(--color-primary-200));
+  --vc-accent-300: rgb(var(--color-primary-300));
+  --vc-accent-400: rgb(var(--color-primary-400));
+  --vc-accent-500: rgb(var(--color-primary-500));
+  --vc-accent-600: rgb(var(--color-primary-600));
+  --vc-accent-700: rgb(var(--color-primary-700));
+  --vc-accent-800: rgb(var(--color-primary-800));
+  --vc-accent-900: rgb(var(--color-primary-900));
+}
+
+.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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps({
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  lineGradientFrom: {
+    type: String,
+    default: 'primary',
+  },
+  lineGradientTo: {
+    type: String,
+    default: 'primary',
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="{
+      'w-full h-[1px]': !vertical,
+      'w-[1px] h-full': vertical,
+      [`from-${lineGradientFrom}-500/50`]: true,
+      [`to-${lineGradientTo}-300/50`]: true,
+    }"
+    class="bg-gradient-to-r rounded-full my-4"
+  ></div>
+</template>
+
+<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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps({
+  gradient: {
+    type: String,
+    default: '90deg, #FFC0CB 0%, #FFC0CB 100%',
+  },
+  aspect: {
+    type: String,
+    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),
+  }
+})
+</script>
+
+<template>
+  <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 }}
+      </h1>
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped>
+.gradient-background {
+  @apply rounded-lg;
+  @apply bg-gradient-to-r from-indigo-800 to-purple-600;
+}
+</style>

app/components/LoginNeededContent.vue

@@ -0,0 +1,60 @@
+<script setup lang="tsx">
+import ModalAuthentication from '~/components/ModalAuthentication.vue'
+
+const loginState = useLoginState()
+
+defineProps({
+  contentClass: {
+    type: String,
+    default: '',
+  },
+  needAdmin: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const modal = useModal()
+</script>
+
+<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"
+      />
+      <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="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>
+  </ClientOnly>
+</template>
+
+<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/ModalAuthentication.vue

@@ -0,0 +1,594 @@
+<script setup lang="ts">
+import { Label, PinInputInput, PinInputRoot } from 'radix-vue'
+import { object, string, type InferType } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
+
+const toast = useToast()
+const modal = useModal()
+const loginState = useLoginState()
+
+const sms_triggered = ref(false)
+const sms_sending = ref(false)
+const sms_counting_down = ref(0)
+const final_loading = ref(false)
+
+const items = [
+  {
+    key: 'sms',
+    label: '短信登录',
+    icon: 'i-tabler-message-2',
+    description: '使用短信验证码登录，未注册的账号将自动注册',
+  },
+  {
+    key: 'account',
+    label: '密码登录',
+    icon: 'i-tabler-key',
+    description: '使用已有账号和密码登录',
+  },
+  {
+    key: 'recovery',
+    label: '找回密码',
+    icon: 'i-tabler-lock',
+    description: '忘记密码时，可以通过手机号和验证码重置密码',
+  },
+]
+
+const currentTab = ref(0)
+
+const accountForm = reactive<req.user.Login>({ username: '', password: '' })
+const smsForm = reactive({ mobile: '', sms_code: [] })
+
+function onSubmit(form: req.user.Login) {
+  console.log('Submitted form:', form)
+  final_loading.value = true
+  useFetchWrapped<req.user.Login, BaseResponse<resp.user.Login>>(
+    'App.User_User.Login',
+    {
+      username: form.username,
+      password: form.password,
+    }
+  )
+    .then((res) => {
+      final_loading.value = false
+      if (res.ret !== 200) {
+        toast.add({
+          title: '登录失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      if (!res.data.is_login) {
+        toast.add({
+          title: '登录失败',
+          description: res.msg || '账号或密码错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      if (!res.data.token || !res.data.user_id) {
+        toast.add({
+          title: '登录失败',
+          description: res.msg || '无法获取登录状态',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      loginState.token = res.data.token
+      loginState.user.id = res.data.user_id
+      loginState
+        .updateProfile()
+        .then(() => {
+          loginState.checkSession()
+          modal.close()
+          toast.add({
+            title: '登录成功',
+            description: `${loginState.user.username}, 欢迎回来`,
+            color: 'primary',
+            icon: 'i-tabler-login-2',
+          })
+        })
+        .catch((err) => {
+          toast.add({
+            title: '登录失败',
+            description: err.msg || '网络错误',
+            color: 'red',
+            icon: 'i-tabler-circle-x',
+          })
+        })
+        .finally(() => {
+          final_loading.value = false
+        })
+    })
+    .catch((err) => {
+      toast.add({
+        title: '登录失败',
+        description: err.msg || '网络错误',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+    })
+}
+
+const obtainSmsCode = () => {
+  smsForm.sms_code = []
+  sms_sending.value = true
+
+  useFetchWrapped<req.user.SmsLogin, BaseResponse<resp.user.SmsLogin>>(
+    'App.User_User.MobileLogin',
+    {
+      mobile: smsForm.mobile,
+    }
+  )
+    .then((res) => {
+      if (res.ret !== 200) {
+        sms_sending.value = false
+        toast.add({
+          title: '验证码发送失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      sms_triggered.value = true
+      sms_sending.value = false
+      sms_counting_down.value = 60 // TODO: save timestamp to localstorage
+      toast.add({
+        title: '短信验证码已发送',
+        color: 'indigo',
+        icon: 'i-tabler-circle-check',
+      })
+      const interval = setInterval(() => {
+        sms_counting_down.value--
+        if (sms_counting_down.value <= 0) {
+          clearInterval(interval)
+        }
+      }, 1000)
+    })
+    .catch((err) => {
+      toast.add({
+        title: '验证码发送失败',
+        description: err.msg || '网络错误',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+    })
+}
+
+const handle_sms_verify = (e: string[]) => {
+  final_loading.value = true
+  useFetchWrapped<
+    req.user.SmsLoginVerify,
+    BaseResponse<resp.user.SmsLoginVerify>
+  >('App.User_User.MobileLoginVerify', {
+    mobile: smsForm.mobile,
+    sms_code: e.join(''),
+  })
+    .then((res) => {
+      if (res.ret !== 200) {
+        smsForm.sms_code = []
+        toast.add({
+          title: '登录失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      if (!res.data.token || !res.data.person_id) {
+        smsForm.sms_code = []
+        toast.add({
+          title: '登录失败',
+          description: res.msg || '无法获取登录状态',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      loginState.token = res.data.token
+      loginState.user.id = res.data.person_id
+      loginState
+        .updateProfile()
+        .then(() => {
+          loginState.checkSession()
+          modal.close()
+          toast.add({
+            title: '登录成功',
+            description: `${loginState.user.username}, 欢迎回来`,
+            color: 'primary',
+            icon: 'i-tabler-login-2',
+          })
+        })
+        .catch((err) => {
+          toast.add({
+            title: '登录失败',
+            description: err.msg || '网络错误',
+            color: 'red',
+            icon: 'i-tabler-circle-x',
+          })
+        })
+        .finally(() => {
+          final_loading.value = false
+        })
+    })
+    .finally(() => (final_loading.value = false))
+}
+
+const forgetPasswordState = reactive({
+  mobile: '',
+  sms_code: '',
+  password: '',
+})
+
+const forgetPasswordSchema = object({
+  mobile: string()
+    .required('请输入手机号')
+    .matches(/^1[3-9]\d{9}$/, '手机号格式不正确'),
+  sms_code: string().required('请输入验证码').length(4, '验证码长度为4位'),
+  password: string().required('请输入新密码').min(6, '密码长度至少为6位'),
+})
+
+type ForgetPasswordSchema = InferType<typeof forgetPasswordSchema>
+
+const obtainForgetSmsCode = () => {
+  forgetPasswordState.sms_code = ''
+  sms_sending.value = true
+
+  useFetchWrapped<req.user.SmsChangePasswordVerify, BaseResponse<{}>>(
+    'App.User_User.ForgotPasswordSms',
+    {
+      mobile: forgetPasswordState.mobile,
+    }
+  )
+    .then((res) => {
+      if (res.ret !== 200) {
+        sms_sending.value = false
+        toast.add({
+          title: '验证码发送失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      sms_triggered.value = true
+      sms_sending.value = false
+      sms_counting_down.value = 60 // TODO: save timestamp to localstorage
+      toast.add({
+        title: '短信验证码已发送',
+        color: 'indigo',
+        icon: 'i-tabler-circle-check',
+      })
+      const interval = setInterval(() => {
+        sms_counting_down.value--
+        if (sms_counting_down.value <= 0) {
+          clearInterval(interval)
+        }
+      }, 1000)
+    })
+    .catch((err) => {
+      toast.add({
+        title: '验证码发送失败',
+        description: err.msg || '网络错误',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+    })
+}
+
+const onForgetPasswordSubmit = (
+  event: FormSubmitEvent<ForgetPasswordSchema>
+) => {
+  final_loading.value = true
+  useFetchWrapped<req.user.SmsChangePassword, BaseResponse<{}>>(
+    'App.User_User.ForgotPassword',
+    {
+      mobile: event.data.mobile,
+      sms_code: event.data.sms_code,
+      new_password: event.data.password,
+    }
+  )
+    .then((res) => {
+      final_loading.value = false
+      if (res.ret !== 200) {
+        toast.add({
+          title: '重置密码失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      toast.add({
+        title: '重置密码成功',
+        description: '请您继续登录',
+        color: 'green',
+        icon: 'i-tabler-circle-check',
+      })
+      currentTab.value = 1
+    })
+    .catch((err) => {
+      toast.add({
+        title: '重置密码失败',
+        description: err.msg || '未知错误',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+    })
+}
+</script>
+
+<template>
+  <UModal prevent-close>
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            登录眩生花 AI 助手
+          </h3>
+          <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-x-mark-20-solid"
+            class="-my-1"
+            @click="modal.close()"
+          />
+        </div>
+      </template>
+
+      <UTabs
+        :items="items"
+        class="w-full"
+        v-model="currentTab"
+      >
+        <template #default="{ item, index, selected }">
+          <div class="flex items-center gap-2 relative truncate">
+            <span class="truncate">{{ item.label }}</span>
+            <span
+              v-if="selected"
+              class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400"
+            />
+          </div>
+        </template>
+        <template #item="{ item }">
+          <UCard @submit.prevent="() => onSubmit(accountForm)">
+            <template #header>
+              <p
+                class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+              >
+                {{ item.label }}
+              </p>
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                {{ item.description }}
+              </p>
+            </template>
+
+            <div
+              v-if="item.key === 'account'"
+              class="space-y-3"
+            >
+              <UFormGroup
+                label="用户名"
+                name="username"
+                required
+              >
+                <UInput
+                  v-model="accountForm.username"
+                  :disabled="final_loading"
+                  required
+                />
+              </UFormGroup>
+              <UFormGroup
+                label="密码"
+                name="password"
+                required
+              >
+                <UInput
+                  v-model="accountForm.password"
+                  :disabled="final_loading"
+                  type="password"
+                  required
+                />
+              </UFormGroup>
+            </div>
+
+            <div
+              v-else-if="item.key === 'sms'"
+              class="space-y-3"
+            >
+              <UFormGroup
+                label="手机号"
+                name="mobile"
+                required
+              >
+                <UButtonGroup class="w-full">
+                  <UInput
+                    v-model="smsForm.mobile"
+                    :disabled="final_loading"
+                    type="sms"
+                    class="w-full"
+                    required
+                  >
+                    <template #leading>
+                      <span class="text-gray-500 dark:text-gray-400 text-xs">
+                        +86
+                      </span>
+                    </template>
+                  </UInput>
+                  <UButton
+                    :label="
+                      sms_counting_down
+                        ? `${sms_counting_down}秒后重发`
+                        : '获取验证码'
+                    "
+                    @click="obtainSmsCode"
+                    :loading="sms_sending"
+                    :disabled="!!sms_counting_down || final_loading"
+                    class="text-xs font-bold"
+                    color="gray"
+                  />
+                </UButtonGroup>
+              </UFormGroup>
+              <Transition name="pin-root">
+                <div v-if="sms_triggered">
+                  <Label
+                    for="pin-input"
+                    class="pin-label"
+                  >
+                    验证码
+                  </Label>
+                  <PinInputRoot
+                    id="sms-input"
+                    v-model="smsForm.sms_code"
+                    :disabled="sms_sending || final_loading"
+                    placeholder="○"
+                    class="w-full flex gap-2 justify-between md:justify-start items-center mt-1"
+                    @complete="handle_sms_verify"
+                    type="number"
+                    otp
+                    required
+                  >
+                    <PinInputInput
+                      v-for="(id, index) in 4"
+                      :key="id"
+                      :index="index"
+                      class="pin-input"
+                      :autofocus="index === 0"
+                    />
+                  </PinInputRoot>
+                </div>
+              </Transition>
+            </div>
+
+            <div
+              v-if="item.key === 'recovery'"
+              class="space-y-3"
+            >
+              <UForm
+                class="space-y-3"
+                :schema="forgetPasswordSchema"
+                :state="forgetPasswordState"
+                @submit="onForgetPasswordSubmit"
+              >
+                <UFormGroup
+                  label="手机号"
+                  name="mobile"
+                  required
+                >
+                  <UButtonGroup class="w-full">
+                    <UInput
+                      v-model="forgetPasswordState.mobile"
+                      :disabled="final_loading"
+                      type="tel"
+                      class="w-full"
+                    >
+                      <template #leading>
+                        <span class="text-gray-500 dark:text-gray-400 text-xs">
+                          +86
+                        </span>
+                      </template>
+                    </UInput>
+                    <UButton
+                      :label="
+                        sms_counting_down
+                          ? `${sms_counting_down}秒后重发`
+                          : '获取验证码'
+                      "
+                      @click="obtainForgetSmsCode"
+                      :loading="sms_sending"
+                      :disabled="!!sms_counting_down"
+                      class="text-xs font-bold"
+                      color="gray"
+                    />
+                  </UButtonGroup>
+                </UFormGroup>
+                <UFormGroup
+                  label="验证码"
+                  name="sms_code"
+                  required
+                >
+                  <UInput
+                    v-model="forgetPasswordState.sms_code"
+                    type="sms"
+                    class="w-full"
+                    :disabled="final_loading"
+                  />
+                </UFormGroup>
+                <UFormGroup
+                  label="新密码"
+                  name="password"
+                  required
+                >
+                  <UInput
+                    v-model="forgetPasswordState.password"
+                    type="password"
+                    :disabled="final_loading"
+                  />
+                </UFormGroup>
+
+                <div>
+                  <UButton
+                    type="submit"
+                    :loading="final_loading"
+                  >
+                    重置密码
+                  </UButton>
+                </div>
+              </UForm>
+            </div>
+
+            <template
+              #footer
+              v-if="item.key === 'account'"
+            >
+              <div class="flex items-center justify-between">
+                <UButton
+                  type="submit"
+                  color="black"
+                  :loading="final_loading"
+                >
+                  登录
+                </UButton>
+                <UButton
+                  variant="link"
+                  color="gray"
+                  @click="currentTab = 2"
+                >
+                  忘记密码
+                </UButton>
+              </div>
+            </template>
+          </UCard>
+        </template>
+      </UTabs>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+.pin-root-enter-active,
+.pin-root-leave-active {
+  @apply transition duration-500;
+}
+
+.pin-root-enter-from,
+.pin-root-leave-to {
+  @apply opacity-0 -translate-y-2;
+}
+
+.pin-input {
+  @apply w-full md:w-16 aspect-square rounded text-center shadow caret-transparent;
+  @apply outline-0 ring-indigo-500 focus:ring font-bold;
+}
+
+.pin-label {
+  @apply block text-sm font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400;
+}
+</style>

app/components/ModalDigitalHumanSelect.vue

@@ -0,0 +1,317 @@
+<script lang="ts" setup>
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
+
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    required: false,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  disabledDigitalHumanIds: {
+    type: Array,
+    default: () => [],
+  },
+  defaultTab: {
+    type: String as PropType<'user' | 'system'>,
+    default: 'user',
+  },
+})
+
+const emit = defineEmits({
+  close: () => true,
+  select: (digitalHumans: DigitalHumanItem | DigitalHumanItem[]) =>
+    digitalHumans,
+})
+
+const loginState = useLoginState()
+const modal = useModal()
+const toast = useToast()
+
+const page = ref(1)
+
+const sourceTypeList = [
+  { label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
+  { label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
+  { label: 'xsh_fh', value: 3, color: 'purple' }, // 硅基（泛化数字人）
+  { label: 'xsh_bb', value: 4, color: 'indigo' }, // 百度小冰
+]
+// const sourceType = ref(sourceTypeList[0])
+
+const selectedDigitalHumans = ref<DigitalHumanItem[]>([])
+const handleSelectClick = (item: DigitalHumanItem) => {
+  // 如果点击的项目已经在已选列表中，则移除；否则添加
+  if (selectedDigitalHumans.value.includes(item)) {
+    selectedDigitalHumans.value = selectedDigitalHumans.value.filter(
+      (d) => d !== item
+    )
+  } else {
+    selectedDigitalHumans.value = props.multiple
+      ? [...selectedDigitalHumans.value, item]
+      : [item]
+  }
+}
+
+const handleClose = () => {
+  selectedDigitalHumans.value = []
+  if (props.isOpen) {
+    emit('close')
+  } else {
+    modal.close()
+  }
+}
+
+const handleSubmit = () => {
+  if (selectedDigitalHumans.value.length === 0) {
+    toast.add({
+      title: '请选择数字人',
+      description: '请至少选择一个数字人',
+      color: 'red',
+      icon: 'i-tabler-circle-x',
+    })
+    return
+  }
+  emit(
+    'select',
+    props.multiple
+      ? selectedDigitalHumans.value
+      : selectedDigitalHumans.value[0]
+  )
+  handleClose()
+  setTimeout(() => {
+    page.value = 1
+  }, 300)
+}
+
+const tabItems = [
+  {
+    key: 'user',
+    label: '我的数字人',
+    icon: 'i-tabler-user',
+  },
+]
+const tabIndex = ref(0)
+
+watch(tabIndex, () => {
+  page.value = 1
+})
+
+const { data: userDigitalList } = useAsyncData(
+  'user-digital-human',
+  () =>
+    useFetchWrapped<
+      req.gen.DigitalHumanList & AuthedRequest,
+      BaseResponse<PagedData<DigitalHumanItem>>
+    >('App.User_UserDigital.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: page.value,
+      perpage: 15,
+      // source_type: sourceType.value.value,
+    }),
+  {
+    watch: [page],
+  }
+)
+
+const { data: systemDigitalList } = useAsyncData(
+  'system-digital-human',
+  () =>
+    useFetchWrapped<
+      req.gen.DigitalHumanList & AuthedRequest,
+      BaseResponse<PagedData<DigitalHumanItem>>
+    >('App.Digital_Human.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: page.value,
+      perpage: 15,
+      // source_type: sourceType.value.value,
+    }),
+  {
+    watch: [page],
+  }
+)
+
+onMounted(() => {
+  if (loginState.user.auth_code === 2) {
+    tabItems.push({
+      key: 'system',
+      label: '系统数字人',
+      icon: 'i-tabler-user-star',
+    })
+    nextTick(() => {
+      tabIndex.value = tabItems.findIndex((i) => i.key === props.defaultTab)
+      console.log('tabIndex', tabIndex.value)
+    })
+  }
+})
+</script>
+
+<template>
+  <UModal
+    :model-value="isOpen"
+    :ui="{ width: 'w-full sm:max-w-3xl' }"
+    @close="handleClose"
+  >
+    <UCard
+      :ui="{
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+      }"
+    >
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            数字人选择器
+          </h3>
+          <UButton
+            class="-my-1"
+            color="gray"
+            icon="i-tabler-x"
+            variant="ghost"
+            @click="handleClose"
+          />
+        </div>
+      </template>
+
+      <UTabs
+        v-model="tabIndex"
+        :items="tabItems"
+      >
+        <template #item="{ item }">
+          <div class="w-full grid grid-cols-3 sm:grid-cols-5 gap-4">
+            <div
+              v-for="(d, i) in item.key === 'user'
+                ? userDigitalList?.data.items
+                : systemDigitalList?.data.items"
+              :key="`${item.key === 'user' ? 'user' : 'system'}-digital-${
+                d.model_id
+              }`"
+              :class="{
+                'border-primary shadow-md': selectedDigitalHumans.includes(d),
+                'border-neutral-200 dark:border-neutral-700':
+                  !selectedDigitalHumans.includes(d),
+              }"
+              class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white dark:bg-neutral-800 rounded-md border dark:border-2 cursor-pointer transition-all duration-150 select-none"
+              @click="
+                !disabledDigitalHumanIds.includes(d.model_id)
+                  ? handleSelectClick(d)
+                  : void 0
+              "
+            >
+              <div
+                v-if="disabledDigitalHumanIds.includes(d.model_id)"
+                class="absolute inset-0 bg-neutral-400 dark:bg-neutral-700 bg-opacity-50 dark:bg-opacity-50 cursor-not-allowed z-10"
+              ></div>
+              <div
+                :class="{ 'bg-primary-50': selectedDigitalHumans.includes(d) }"
+                class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-square object-cover overflow-hidden transition-all duration-150"
+              >
+                <NuxtImg
+                  :src="d.avatar"
+                  class="-translate-y-4"
+                />
+                <UIcon
+                  v-if="selectedDigitalHumans.includes(d)"
+                  class="absolute top-1 right-1 text-lg text-primary"
+                  name="i-tabler-check"
+                />
+                <UIcon
+                  v-if="disabledDigitalHumanIds.includes(d.model_id)"
+                  class="absolute top-1 right-1 text-lg text-red-500"
+                  name="tabler:user-off"
+                />
+                <template
+                  v-for="(t, i) in sourceTypeList"
+                  :key="i"
+                >
+                  <UBadge
+                    v-if="t.value === d.type"
+                    class="absolute bottom-1 right-1"
+                    size="xs"
+                    variant="subtle"
+                    :color="t.color"
+                    :label="t.label"
+                  />
+                </template>
+              </div>
+              <div class="w-full flex flex-col gap-1 px-2 pb-2">
+                <div class="flex justify-between items-center">
+                  <span
+                    class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1"
+                  >
+                    {{ d.name }}
+                  </span>
+                  <span
+                    class="text-xs text-neutral-300 dark:text-neutral-500 font-medium"
+                  >
+                    ID:{{ d.digital_human_id || d.id }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-between items-end">
+            <div class="flex items-center gap-2">
+              <!-- <span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium">
+                选择来源:
+              </span>
+              <USelectMenu
+                v-model="sourceType"
+                :options="sourceTypeList.map(i => ({ label: i.label, value: i.value }))"
+                @change="page = 1"
+              /> -->
+            </div>
+            <UPagination
+              v-if="
+                (item.key === 'user'
+                  ? userDigitalList?.data.total || 0
+                  : systemDigitalList?.data.total || 0) > 0
+              "
+              v-model="page"
+              :page-count="15"
+              :total="
+                item.key === 'user'
+                  ? userDigitalList?.data.total || 0
+                  : systemDigitalList?.data.total || 0
+              "
+              class="pt-4"
+            />
+          </div>
+        </template>
+      </UTabs>
+
+      <template #footer>
+        <div class="flex justify-between items-center">
+          <div>
+            <p class="text-xs font-medium opacity-50 select-none">
+              如果没有出现您的数字人，请联系管理员开通
+            </p>
+          </div>
+          <div class="flex items-center gap-4">
+            <UButton
+              color="gray"
+              label="取消"
+              variant="ghost"
+              @click="handleClose"
+            />
+            <UButton
+              color="primary"
+              label="选择"
+              variant="solid"
+              @click="handleSubmit"
+            />
+          </div>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped></style>

app/components/ModalVideoTitleSelect.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    required: false,
+  },
+})
+
+const emit = defineEmits({
+  close: () => true,
+  select: (titles: TitlesTemplate) => titles,
+})
+
+const toast = useToast()
+const modal = useModal()
+const loginState = useLoginState()
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 15,
+})
+const selectedTitle = ref<TitlesTemplate | null>(null)
+
+const {
+  data: userTitlesTemplate,
+  status: userTitlesTemplateStatus,
+  refresh: refreshUserTitlesTemplate,
+} = useAsyncData(
+  'userTitlesTemplate',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest & { process_status: 0 | 1 },
+      BaseResponse<PagedData<TitlesTemplate>>
+    >('App.User_UserTitles.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: pagination.page,
+      perpage: pagination.pageSize,
+      process_status: 1,
+    }),
+  {
+    watch: [pagination],
+  }
+)
+
+const handleClose = () => {
+  if (props.isOpen) {
+    emit('close')
+  } else {
+    modal.close()
+  }
+}
+
+const handleSubmit = () => {
+  if (!selectedTitle.value) {
+    toast.add({
+      title: '请选择片头',
+      description: '请选择一个片头',
+      color: 'red',
+      icon: 'i-tabler-circle-x',
+    })
+    return
+  }
+  emit('select', selectedTitle.value)
+  handleClose()
+}
+</script>
+
+<template>
+  <UModal
+    :model-value="isOpen"
+    :ui="{ width: 'w-full sm:max-w-3xl' }"
+    @close="handleClose"
+  >
+    <UCard
+      :ui="{
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+      }"
+    >
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            视频片头选择器
+          </h3>
+          <UButton
+            class="-my-1"
+            color="gray"
+            icon="i-tabler-x"
+            variant="ghost"
+            @click="handleClose"
+          />
+        </div>
+      </template>
+
+      <div>
+        <div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-4">
+          <div
+            v-for="(titles, i) in userTitlesTemplate?.data.items"
+            :key="`user-titles-${titles.id}`"
+            :class="{
+              'border-primary shadow-md': selectedTitle?.id === titles.id,
+              'border-neutral-200 dark:border-neutral-700':
+                selectedTitle?.id !== titles.id,
+            }"
+            class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white dark:bg-neutral-800 rounded-md border dark:border-2 cursor-pointer transition-all duration-150 select-none"
+            @click="selectedTitle = titles"
+          >
+            <div
+              :class="{
+                'bg-primary-50': selectedTitle?.id === titles.id,
+              }"
+              class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-video object-cover overflow-hidden transition-all duration-150"
+            >
+              <NuxtImg :src="titles.opening_url" />
+              <UIcon
+                v-if="selectedTitle?.id === titles.id"
+                class="absolute top-1 right-1 text-lg text-primary"
+                name="i-tabler-check"
+              />
+            </div>
+            <div class="w-full flex flex-col gap-1 px-2 pb-2">
+              <div class="flex justify-between items-center">
+                <span
+                  class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1"
+                >
+                  {{ titles.title }}
+                </span>
+                <span
+                  class="text-xs text-neutral-300 dark:text-neutral-500 font-medium"
+                >
+                  ID:{{ titles.id }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end">
+          <UPagination
+            v-if="(userTitlesTemplate?.data.total || 0) > 0"
+            v-model="pagination.page"
+            :page-count="pagination.pageSize"
+            :total="userTitlesTemplate?.data.total || 0"
+            class="pt-4"
+          />
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex justify-between items-center">
+          <div>
+            <p class="text-xs font-medium opacity-50 select-none">
+              如果此处没有您的片头，请在
+              <a
+                class="text-primary"
+                href="/generation/materials"
+                target="_blank"
+              >
+                片头模版库
+              </a>
+              页面确认已经制作完毕
+            </p>
+          </div>
+          <div class="flex items-center gap-4">
+            <UButton
+              color="gray"
+              label="取消"
+              variant="ghost"
+              @click="handleClose"
+            />
+            <UButton
+              color="primary"
+              label="选择"
+              variant="solid"
+              @click="handleSubmit"
+            />
+          </div>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped></style>

app/components/SlideCreateCourse.vue

@@ -0,0 +1,361 @@
+<script lang="ts" setup>
+import FileDnD from '~/components/uni/FileDnD/index.vue'
+import { type InferType, number, object, string } from 'yup'
+import ModalDigitalHumanSelect from '~/components/ModalDigitalHumanSelect.vue'
+import type { FormSubmitEvent } from '#ui/types'
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
+
+const emit = defineEmits(['success'])
+
+const slide = useSlideover()
+const toast = useToast()
+const loginState = useLoginState()
+
+const creationForm = ref<HTMLFormElement>()
+const creationPending = ref(false)
+const isDigitalSelectorOpen = ref(false)
+const isTitlesSelectorOpen = ref(false)
+
+const createCourseSchema = object({
+  task_title: string()
+    .trim()
+    .min(4, '标题必须大于4个字符')
+    .max(20, '标题不能超过20个字符')
+    .required('请输入微课标题'),
+  digital_human_id: number().not([0], '请选择数字人'),
+  opening_url: string().url().notRequired().default(''),
+  ending_url: string().url().notRequired().default(''),
+  gen_server: string().required(),
+  speed: number().default(1.0).min(0.5).max(1.5).required(),
+})
+
+type CreateCourseSchema = InferType<typeof createCourseSchema>
+
+const createCourseState = reactive({
+  task_title: undefined,
+  digital_human_id: 0,
+  opening_url: '',
+  ending_url: '',
+  gen_server: 'main',
+  speed: 1.0,
+})
+
+const selected_file = ref<File[] | null>(null)
+const selected_digital_human = ref<DigitalHumanItem | null>(null)
+const selected_titles = ref<TitlesTemplate | null>(null)
+
+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
+  }
+  if (selected_titles.value) {
+    createCourseState.opening_url = selected_titles.value.opening_file
+    createCourseState.ending_url = selected_titles.value.ending_file
+  }
+})
+
+const onCreateCourseSubmit = async (
+  event: FormSubmitEvent<CreateCourseSchema>
+) => {
+  if (!selected_file.value) {
+    toast.add({
+      title: '未选择文件',
+      description: '请先选择 PPTX 文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+  creationPending.value = true
+  // upload PPTX file
+  useFileGo(selected_file.value[0], 'ppt').then((url) => {
+    useFetchWrapped<
+      req.gen.CourseGenCreate & AuthedRequest,
+      BaseResponse<resp.gen.CourseGenCreate>
+    >('App.Digital_Convert.Create', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      task_title: event.data.task_title,
+      gen_server: event.data.gen_server as 'main' | 'standby1',
+      speed: event.data.speed,
+      ppt_url: url,
+      digital_human_id: event.data.digital_human_id,
+      custom_video: '[]',
+      opening_url: event.data.opening_url || '',
+      ending_url: event.data.opening_url || '',
+    })
+      .then((res) => {
+        if (res.data.record_status === 1) {
+          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
+        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',
+      }"
+      class="flex flex-col flex-1"
+    >
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            新建微课视频
+          </h3>
+          <UButton
+            class="-my-1"
+            color="gray"
+            icon="i-tabler-x"
+            variant="ghost"
+            @click="slide.close()"
+          />
+        </div>
+      </template>
+
+      <UForm
+        ref="creationForm"
+        :schema="createCourseSchema"
+        :state="createCourseState"
+        class="space-y-4"
+        @submit="onCreateCourseSubmit"
+      >
+        <div class="flex justify-between gap-2 *:flex-1">
+          <UFormGroup
+            label="微课标题"
+            name="task_title"
+            required
+          >
+            <UInput
+              v-model="createCourseState.task_title"
+              placeholder="请输入微课标题"
+            />
+          </UFormGroup>
+        </div>
+
+        <div class="grid grid-cols-2 gap-2">
+          <UFormGroup
+            label="数字人"
+            name="digital_human_id"
+            required
+          >
+            <div
+              :class="{ 'shadow-inner': !!selected_digital_human }"
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
+              @click="isDigitalSelectorOpen = true"
+            >
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden"
+              >
+                <UIcon
+                  v-if="!selected_digital_human"
+                  class="text-2xl opacity-50"
+                  name="i-tabler-user-screen"
+                />
+                <NuxtImg
+                  v-else
+                  :src="selected_digital_human?.avatar"
+                />
+              </div>
+              <div class="flex flex-col text-neutral-400 text-sm font-medium">
+                <span
+                  :class="!!selected_digital_human ? 'text-neutral-600' : ''"
+                >
+                  {{ selected_digital_human?.name || '点击选择数字人' }}
+                </span>
+                <span
+                  v-if="selected_digital_human?.description"
+                  class="text-2xs"
+                >
+                  {{ selected_digital_human?.description }}
+                </span>
+              </div>
+            </div>
+          </UFormGroup>
+          <UFormGroup
+            label="视频片头片尾"
+            name="opening"
+          >
+            <div
+              :class="{ 'shadow-inner': !!selected_titles }"
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
+              @click="isTitlesSelectorOpen = true"
+            >
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden"
+              >
+                <UIcon
+                  v-if="!selected_titles"
+                  class="text-2xl opacity-50"
+                  name="i-tabler-brackets-contain"
+                />
+                <NuxtImg
+                  v-else
+                  :src="selected_titles?.opening_url"
+                />
+              </div>
+              <div class="flex flex-col text-neutral-400 text-sm font-medium">
+                <span :class="!!selected_titles ? 'text-neutral-600' : ''">
+                  {{ selected_titles?.title || '点击选择片头' }}
+                </span>
+                <span
+                  v-if="selected_titles?.description"
+                  class="text-2xs"
+                >
+                  {{ selected_titles?.description }}
+                </span>
+              </div>
+            </div>
+          </UFormGroup>
+          <!-- <UFormGroup label="视频片头片尾" name="opening">
+            <div
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
+            >
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center">
+                <UIcon class="text-2xl opacity-50" name="i-tabler-brackets-contain"/>
+              </div>
+              <div class="flex flex-col text-neutral-400 text-sm font-medium">
+                <span>点击选择</span>
+              </div>
+            </div>
+          </UFormGroup> -->
+        </div>
+
+        <UFormGroup
+          label="PPT 文件"
+          required
+        >
+          <template #help>
+            <p class="text-xs text-neutral-400">仅支持 .pptx 格式</p>
+          </template>
+          <FileDnD
+            accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
+            @change="(file) => (selected_file = file)"
+          />
+        </UFormGroup>
+
+        <UAccordion
+          :items="[{ label: '高级选项' }]"
+          color="gray"
+          size="lg"
+        >
+          <template #item>
+            <div
+              class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6"
+            >
+              <UFormGroup
+                label="生成线路"
+                name="gen_server"
+              >
+                <USelectMenu
+                  v-model="createCourseState.gen_server"
+                  :options="[
+                    {
+                      label: '主线路',
+                      value: 'main',
+                    },
+                    {
+                      label: '备用线路',
+                      value: 'standby1',
+                    },
+                  ]"
+                  option-attribute="label"
+                  value-attribute="value"
+                />
+              </UFormGroup>
+              <UFormGroup
+                :label="`视频倍速：${createCourseState.speed}`"
+                name="speed"
+              >
+                <URange
+                  v-model="createCourseState.speed"
+                  :max="1.5"
+                  :min="0.5"
+                  :step="0.1"
+                  class="pt-4"
+                  size="sm"
+                />
+              </UFormGroup>
+            </div>
+          </template>
+        </UAccordion>
+      </UForm>
+
+      <template #footer>
+        <div class="flex justify-end space-x-4">
+          <UButton
+            color="gray"
+            label="取消"
+            size="lg"
+            variant="ghost"
+            @click="slide.close()"
+          />
+          <UButton
+            :loading="creationPending"
+            color="primary"
+            label="提交"
+            size="lg"
+            variant="solid"
+            @click="creationForm?.submit()"
+          />
+        </div>
+      </template>
+    </UCard>
+    <ModalDigitalHumanSelect
+      :is-open="isDigitalSelectorOpen"
+      @close="isDigitalSelectorOpen = false"
+      @select="
+        (digitalHumans) => {
+          selected_digital_human = digitalHumans as DigitalHumanItem
+        }
+      "
+    />
+    <ModalVideoTitleSelect
+      :is-open="isTitlesSelectorOpen"
+      @close="isTitlesSelectorOpen = false"
+      @select="
+        (titles) => {
+          selected_titles = titles as TitlesTemplate
+        }
+      "
+    />
+  </USlideover>
+</template>
+
+<style scoped></style>

app/components/SlideCreateCourseGreen.vue

@@ -0,0 +1,302 @@
+<script lang="ts" setup>
+import { type InferType, number, object, string } from 'yup'
+import ModalDigitalHumanSelect from '~/components/ModalDigitalHumanSelect.vue'
+import type { FormSubmitEvent } from '#ui/types'
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
+
+const emit = defineEmits(['success'])
+
+const slide = useSlideover()
+const toast = useToast()
+const loginState = useLoginState()
+
+const creationForm = ref<HTMLFormElement>()
+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('请输入驱动文本内容'),
+  digital_human_id: number().not([0], '请选择数字人'),
+  source_type: number().default(0).required(),
+  speed: number().default(1.0).min(0.5).max(1.5).required(),
+  bg_img: string().optional(),
+})
+
+type CreateCourseSchema = InferType<typeof createCourseSchema>
+
+const createCourseState = reactive({
+  title: undefined,
+  content: undefined,
+  digital_human_id: 0,
+  source_type: 0,
+  speed: 1.0,
+  bg_img: '',
+})
+
+const selected_digital_human = ref<DigitalHumanItem | null>(null)
+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
+    createCourseState.source_type = selected_digital_human.value.type!
+  }
+})
+
+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 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: loginState.token!,
+    user_id: loginState.user.id,
+    title: event.data.title,
+    content: event.data.content,
+    digital_human_id: event.data.digital_human_id,
+    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,
+  }
+
+  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
+      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',
+      }"
+      class="flex flex-col flex-1"
+    >
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            新建绿幕视频
+          </h3>
+          <UButton
+            class="-my-1"
+            color="gray"
+            icon="i-tabler-x"
+            variant="ghost"
+            @click="slide.close()"
+          />
+        </div>
+      </template>
+
+      <UForm
+        ref="creationForm"
+        :schema="createCourseSchema"
+        :state="createCourseState"
+        class="space-y-4"
+        @submit="onCreateCourseGreenSubmit"
+      >
+        <div class="flex justify-between gap-2 *:flex-1">
+          <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
+          >
+            <div
+              :class="{ 'shadow-inner': !!selected_digital_human }"
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
+              @click="isDigitalSelectorOpen = true"
+            >
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden"
+              >
+                <UIcon
+                  v-if="!selected_digital_human"
+                  class="text-2xl opacity-50"
+                  name="i-tabler-user-screen"
+                />
+                <NuxtImg
+                  v-else
+                  :src="selected_digital_human?.avatar"
+                />
+              </div>
+              <div class="flex flex-col text-neutral-400 text-sm font-medium">
+                <span
+                  :class="!!selected_digital_human ? 'text-neutral-600' : ''"
+                >
+                  {{ selected_digital_human?.name || '点击选择数字人' }}
+                </span>
+                <span
+                  v-if="selected_digital_human?.description"
+                  class="text-2xs"
+                >
+                  {{ selected_digital_human?.description }}
+                </span>
+              </div>
+            </div>
+          </UFormGroup>
+        </div>
+
+        <!-- <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="bg_img"
+          help="开启后生成透明通道，可在视频生成完毕后选择自定义背景合成；关闭则使用绿幕背景。"
+        >
+          <UToggle v-model="enableBackgroundCompositing" />
+        </UFormGroup>
+
+        <UAccordion
+          :items="[{ label: '高级选项' }]"
+          color="gray"
+          size="lg"
+        >
+          <template #item>
+            <div
+              class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6"
+            >
+              <UFormGroup
+                :label="`视频倍速：${createCourseState.speed}`"
+                name="speed"
+              >
+                <URange
+                  v-model="createCourseState.speed"
+                  :max="1.5"
+                  :min="0.5"
+                  :step="0.1"
+                  class="pt-4"
+                  size="sm"
+                />
+              </UFormGroup>
+            </div>
+          </template>
+        </UAccordion>
+      </UForm>
+
+      <template #footer>
+        <div class="flex justify-end space-x-4">
+          <UButton
+            color="gray"
+            label="取消"
+            size="lg"
+            variant="ghost"
+            @click="slide.close()"
+          />
+          <UButton
+            :loading="creationPending"
+            color="primary"
+            label="提交"
+            size="lg"
+            variant="solid"
+            @click="creationForm?.submit()"
+          />
+        </div>
+      </template>
+    </UCard>
+    <ModalDigitalHumanSelect
+      :is-open="isDigitalSelectorOpen"
+      @close="isDigitalSelectorOpen = false"
+      @select="
+        (digitalHumans) => {
+          selected_digital_human = digitalHumans as DigitalHumanItem
+        }
+      "
+    />
+  </USlideover>
+</template>
+
+<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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ChatSession } from '~/typings/llm'
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  chatSession: {
+    type: Object as PropType<ChatSession>,
+    required: true,
+  },
+})
+const emit = defineEmits<{
+  (e: 'remove', session: ChatSession): void
+}>()
+
+const dayjs = useDayjs()
+</script>
+
+<template>
+  <div
+    class="chat-card group"
+    :class="{ active: active }"
+    :title="chatSession.subject"
+  >
+    <div class="chat-card-title">
+      <Icon
+        v-if="!!chatSession.assistant"
+        name="i-tabler-masks-theater"
+        class="text-lg mr-1"
+      />
+      <span class="flex-1 text-ellipsis overflow-x-hidden">
+        {{
+          !!chatSession.assistant
+            ? chatSession.assistant.tpl_name
+            : chatSession.subject
+        }}
+      </span>
+    </div>
+    <div class="chat-card-meta">
+      <div>{{ chatSession.messages.length }}条对话</div>
+      <div>
+        {{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
+      </div>
+    </div>
+    <div
+      @click.stop="emit('remove', chatSession)"
+      class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
+    >
+      <Icon name="i-tabler-trash" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chat-card {
+  @apply flex flex-col gap-2 bg-white dark:bg-neutral-800 px-4 py-3 rounded-lg relative border-2 border-transparent shadow-card;
+  @apply transition-none duration-150 hover:bg-cyan-300/5;
+  @apply select-none;
+
+  &.active {
+    @apply border-cyan-500;
+  }
+
+  &-title {
+    @apply w-[calc(100%-16px)] inline-flex items-center text-sm font-medium text-ellipsis text-nowrap overflow-x-hidden;
+  }
+
+  &-meta {
+    @apply flex justify-between items-center text-xs text-neutral-400;
+  }
+
+  &-remove-btn {
+    @apply absolute top-0.5 right-0 md:opacity-0;
+    @apply transition duration-300 hover:text-red-400;
+    @apply cursor-pointer;
+  }
+}
+</style>

app/components/aigc/chat/Message.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ChatMessage } from '~/typings/llm'
+import MessageResponding from '~/components/Icon/MessageResponding.vue'
+
+const props = defineProps({
+  message: {
+    type: Object as PropType<ChatMessage>,
+    required: true,
+  },
+})
+
+const dayjs = useDayjs()
+
+const message_place_end = computed(() => props.message?.role !== 'assistant')
+const message_avatar = computed(() => {
+  switch (props.message?.role) {
+    case 'user':
+      return 'i-fluent-emoji-slightly-smiling-face'
+    case 'assistant':
+      return 'i-fluent-emoji-robot'
+    case 'system':
+      return 'i-fluent-emoji-receipt'
+  }
+})
+const message_background = computed(() => {
+  if (props.message?.interrupted) {
+    return 'bg-red-200/50 dark:bg-red-800/20 border-red-300 dark:!border-red-500/50'
+  }
+  switch (props.message?.role) {
+    case 'user':
+      return 'bg-primary-100 dark:bg-primary-800'
+    case 'assistant':
+    case 'system':
+      return 'bg-neutral-100 dark:bg-neutral-800'
+  }
+})
+</script>
+
+<template>
+  <div
+    class="chat"
+    :class="{ 'justify-end': message_place_end }"
+  >
+    <div
+      class="chat-inside"
+      :class="{ 'items-end': message_place_end }"
+    >
+      <div class="chat-inside-avatar">
+        <Icon
+          :name="message_avatar"
+          class="text-lg"
+        />
+      </div>
+      <div
+        class="flex flex-col"
+        :class="{ 'items-end': message_place_end }"
+      >
+        <Transition
+          mode="out-in"
+          name="message-content-change"
+        >
+          <div
+            class="chat-inside-content relative"
+            :class="message_background"
+            :key="message.content"
+          >
+            <div v-if="message.content">
+              <!-- TODO: 生成结果的代码添加复制按钮 -->
+              <Markdown :source="message.content" />
+            </div>
+            <span v-else>
+              <MessageResponding
+                class="text-xl text-neutral-500 dark:text-neutral-300 mx-2"
+              />
+            </span>
+          </div>
+        </Transition>
+        <div
+          v-if="message.preset"
+          class="chat-inside-extra"
+        >
+          预设消息
+        </div>
+        <div
+          v-else-if="message.create_at"
+          class="chat-inside-extra"
+        >
+          {{ dayjs(message.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chat {
+  @apply w-full flex;
+
+  &-inside {
+    @apply w-fit flex flex-col gap-2;
+    @apply md:max-w-[80%];
+
+    &-avatar {
+      @apply w-8 h-8 flex justify-center items-center rounded-xl;
+      @apply bg-white border shadow-card;
+      @apply dark:bg-neutral-800 dark:border-neutral-700;
+    }
+
+    &-content {
+      @apply px-2 py-2.5 rounded-xl text-sm w-fit;
+      @apply border dark:border-neutral-700;
+    }
+
+    &-extra {
+      @apply px-1 text-xs text-neutral-300 dark:text-neutral-700;
+    }
+  }
+}
+
+.message-content-change-enter-active,
+.message-content-change-leave-active {
+  @apply transition-all duration-300 overflow-hidden;
+}
+
+.message-content-change-enter-from {
+  @apply opacity-0 translate-y-4;
+}
+</style>

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

@@ -0,0 +1,9 @@
+export declare interface ResultBlockMeta {
+  modal?: string
+  cost?: string
+  ratio?: string
+  id?: string
+  style?: string
+  datetime?: number
+  type?: string
+}

app/components/aigc/generation/CGTaskCard.client.vue

@@ -0,0 +1,528 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { useDownload } from '~/composables/useDownload'
+import gsap from 'gsap'
+
+const toast = useToast()
+const loginState = useLoginState()
+const { metaSymbol } = useShortcuts()
+
+const srtEditor = ref()
+
+const props = defineProps({
+  course: {
+    type: Object as PropType<resp.gen.CourseGenItem>,
+    required: true,
+  },
+})
+const emit = defineEmits(['delete'])
+
+defineShortcuts({
+  p: {
+    handler: () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        isPreviewModalOpen.value = true
+      }
+    },
+  },
+  meta_d: {
+    handler: () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        srtEditor.value.open()
+        isDropdownOpen.value = false
+      }
+    },
+  },
+  meta_s: {
+    handler: async () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        await startDownload(
+          await fetchCourseSubtitleUrl(props.course),
+          `眩生花微课_${props.course.title}_${props.course.task_id}.srt`
+        )
+      }
+    },
+  },
+  delete: {
+    handler: () => {
+      if (isDropdownOpen.value) {
+        emit('delete', props.course.task_id)
+      }
+    },
+  },
+})
+
+const isDropdownOpen = ref(false)
+const isPreviewModalOpen = ref(false)
+
+const stateDisplay = computed(() => {
+  if (props.course.progress === -1)
+    return {
+      color: 'red',
+      text: '失败',
+    }
+  if (props.course.progress === 100)
+    return {
+      color: 'green',
+      text: '完成',
+    }
+  return {
+    color: 'blue',
+    text: !!props.course.progress
+      ? `${tweenedGenerateProgress.value.toFixed(0)}%`
+      : '队列中',
+  }
+})
+const isFailed = computed(() => props.course.progress === -1)
+const isDownloadable = computed(
+  () => !isFailed.value && props.course.progress === 100
+)
+
+const generateProgress = computed(() => {
+  return props.course.progress || 0
+})
+const tweenedGenerateProgress = ref(0)
+watch(
+  generateProgress,
+  (newValue) => {
+    gsap.to(tweenedGenerateProgress, {
+      duration: 5,
+      value: newValue,
+    })
+  },
+  {
+    immediate: true,
+  }
+)
+
+const downloadProgress = ref(0)
+
+const startDownload = async (url: string, filename: string) => {
+  downloadProgress.value = 0
+
+  const { download, progressEmitter } = useDownload(url, filename)
+
+  progressEmitter.on('done', () => {
+    downloadProgress.value = 100
+    toast.add({
+      title: '下载完成',
+      description: '资源下载已完成',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+  })
+
+  progressEmitter.on('progress', (progress) => {
+    downloadProgress.value = progress
+  })
+
+  progressEmitter.on('error', (err) => {
+    downloadProgress.value = 0
+    toast.add({
+      title: '下载失败',
+      description: err.message || '下载失败，未知错误',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  })
+
+  download()
+}
+
+const copyTaskId = (extraMessage?: string) => {
+  navigator.clipboard.writeText(
+    props.course.task_id + (extraMessage ? ` ${extraMessage}` : '')
+  )
+  toast.add({
+    title: '复制成功',
+    description: '已复制任务 ID',
+    color: 'green',
+    icon: 'i-tabler-check',
+  })
+}
+
+const isCombinationModalOpen = ref(false)
+const combinationState = ref<0 | 1 | undefined>(0)
+
+const onCombination = async () => {
+  isCombinationModalOpen.value = true
+  combinationState.value = undefined
+  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,
+        `眩生花微课_${props.course.title}_${props.course.task_id}_combinated.mp4`
+      )
+      combinationState.value = 1
+    })
+    .catch((err) => {
+      toast.add({
+        title: '嵌入字幕失败',
+        description: err.message || '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+      combinationState.value = 0
+    })
+    .finally(() => {
+      setTimeout(() => {
+        combinationState.value = 0
+        isCombinationModalOpen.value = false
+      }, 3000)
+    })
+}
+
+const onRetryClick = (course: resp.gen.CourseGenItem) => {
+  useFetchWrapped<
+    req.gen.CourseGenCreate & AuthedRequest,
+    BaseResponse<resp.gen.CourseGenCreate>
+  >('App.Digital_Convert.Create', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    task_title: course.title,
+    gen_server: 'main',
+    speed: 2 - course.speed,
+    ppt_url: course.ppt_url,
+    digital_human_id: course.digital_human_id,
+    custom_video: '[]',
+    opening_url: course.opening_url || '',
+    ending_url: course.opening_url || '',
+  }).then(
+    (res) => {
+      if (res.data.record_status === 1) {
+        toast.add({
+          title: '重试已提交',
+          description: '已加入生成队列',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+        // delete
+        emit('delete', course.task_id)
+      } else {
+        toast.add({
+          title: '提交重试失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    },
+    (err) => {
+      toast.add({
+        title: '提交重试失败',
+        description: err.message || '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    }
+  )
+}
+</script>
+
+<template>
+  <div
+    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden"
+  >
+    <div class="relative w-full aspect-video group">
+      <NuxtImg
+        class="w-full aspect-video object-cover pointer-events-none absolute inset-0"
+        v-if="!!course.video_cover"
+        :src="course.video_cover"
+        alt="image"
+        loading="lazy"
+      />
+      <div
+        v-else
+        class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern"
+      >
+        <Icon
+          v-if="isFailed"
+          class="text-white text-[64px] opacity-50"
+          name="i-tabler-alert-triangle"
+        />
+        <Icon
+          v-else
+          class="text-white text-[64px] animate-pulse"
+          name="i-tabler-photo-video"
+        />
+      </div>
+      <div class="absolute inset-2 flex justify-end items-start">
+        <UTooltip
+          :prevent="course.progress > -1"
+          :text="course.message || ''"
+        >
+          <UBadge
+            :color="stateDisplay.color"
+            :variant="isFailed ? 'solid' : 'subtle'"
+            class="shadow"
+            size="sm"
+          >
+            <Icon
+              v-if="isFailed"
+              class="text-base mr-0.5"
+              name="i-tabler-alert-triangle"
+            />
+            {{ stateDisplay.text }}
+          </UBadge>
+        </UTooltip>
+      </div>
+      <div
+        v-if="isDownloadable"
+        class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center opacity-0 group-hover:opacity-100 duration-300"
+      >
+        <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="px-2 pt-1 pb-2 flex justify-between">
+      <div class="flex-1 overflow-hidden pt-1">
+        <h1
+          :title="course.title"
+          class="inline-flex items-center text-sm font-medium overflow-hidden text-ellipsis text-nowrap"
+        >
+          <Icon
+            class="text-base"
+            name="i-tabler-book-2"
+          />
+          <span class="pl-0.5">{{ course.title }}</span>
+        </h1>
+        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
+          <span>
+            {{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
+          </span>
+          <button
+            v-if="course.task_id"
+            class="hover:text-primary font-medium"
+            tabindex="-1"
+            :title="course.task_id"
+            @click="
+              copyTaskId(
+                isFailed ? `\n\n${course.message}\n${course.ppt_url}` : ''
+              )
+            "
+          >
+            {{ isFailed ? '复制错误报告' : '复制 ID' }}
+          </button>
+        </p>
+      </div>
+      <div class="flex items-center gap-1">
+        <UButtonGroup>
+          <!-- <UButton
+            v-if="isFailed"
+            color="white"
+            :disabled="!isFailed"
+            label="重试"
+            leading-icon="i-tabler-refresh"
+            size="xs"
+            @click="onRetryClick(course)"
+          />
+          <UButton
+            v-else
+            color="white"
+            :disabled="!isDownloadable"
+            label="下载"
+            leading-icon="i-tabler-download"
+            size="xs"
+            @click="onCombination"
+          /> -->
+          <UButton
+            color="white"
+            :disabled="!isFailed && !isDownloadable"
+            :label="isFailed ? '重试' : isDownloadable ? '下载' : '生成中'"
+            :leading-icon="isFailed ? 'i-tabler-refresh' : 'i-tabler-download'"
+            size="xs"
+            @click="
+              () => {
+                if (isFailed) {
+                  onRetryClick(course)
+                } else {
+                  onCombination()
+                }
+              }
+            "
+          />
+          <!-- retry -->
+          <UDropdown
+            v-model:open="isDropdownOpen"
+            :items="[
+              [
+                {
+                  label: '下载原视频',
+                  icon: 'i-tabler-file-plus',
+                  disabled: !isDownloadable,
+                  click: () =>
+                    startDownload(
+                      course.video_url,
+                      `眩生花微课_${props.course.title}_${props.course.task_id}.mp4`
+                    ),
+                },
+                {
+                  label: '预览课程',
+                  icon: 'i-tabler-play',
+                  shortcuts: ['P'],
+                  disabled: !isDownloadable,
+                  click: () => (isPreviewModalOpen = true),
+                },
+                {
+                  label: '编辑字幕',
+                  icon: 'i-solar-subtitles-linear',
+                  shortcuts: [metaSymbol, 'D'],
+                  disabled: !isDownloadable,
+                  click: () => {
+                    srtEditor.open()
+                    isDropdownOpen = false
+                  },
+                },
+                {
+                  label: '下载字幕',
+                  icon: 'i-tabler-file-download',
+                  shortcuts: [metaSymbol, 'S'],
+                  disabled: !isDownloadable,
+                  click: async () => {
+                    await startDownload(
+                      await fetchCourseSubtitleUrl(course),
+                      `眩生花微课_${props.course.title}_${props.course.task_id}.srt`
+                    )
+                  },
+                },
+              ],
+              [
+                {
+                  label: '删除记录',
+                  icon: 'i-tabler-trash-x',
+                  shortcuts: ['Delete'],
+                  click: () => emit('delete', course.task_id),
+                },
+              ],
+            ]"
+            :popper="{ placement: 'bottom-end' }"
+          >
+            <UButton
+              :disabled="course.progress > 1 && course.progress < 100"
+              color="white"
+              size="xs"
+              trailing-icon="i-tabler-dots"
+            />
+          </UDropdown>
+        </UButtonGroup>
+      </div>
+    </div>
+    <UModal
+      v-model="isPreviewModalOpen"
+      :ui="{ width: 'w-full sm:max-w-4xl' }"
+    >
+      <UCard
+        :ui="{
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
+            >
+              <p>微课视频预览</p>
+              <p
+                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+              >
+                {{ course.title }}
+              </p>
+            </div>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isPreviewModalOpen = false"
+            />
+          </div>
+        </template>
+
+        <video
+          class="w-full rounded shadow"
+          controls
+          autoplay
+          :src="course.video_url"
+        />
+      </UCard>
+    </UModal>
+    <UModal v-model="isCombinationModalOpen">
+      <UCard
+        :ui="{
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
+            >
+              <p>嵌入视频字幕</p>
+              <p
+                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+              >
+                {{ course.title }}
+              </p>
+            </div>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isCombinationModalOpen = false"
+            />
+          </div>
+        </template>
+        <UProgress
+          animation="carousel"
+          :value="combinationState"
+          :max="['嵌入字幕中', '合并完成，开始下载']"
+        >
+          <template #step-0="{ step }">
+            <span class="inline-flex items-center gap-1 text-emerald-500">
+              <UIcon name="tabler:text-caption" />
+              {{ step }}
+            </span>
+          </template>
+
+          <template #step-1="{ step }">
+            <span class="inline-flex items-center gap-1 text-primary-500">
+              <UIcon name="tabler:paperclip" />
+              {{ step }}
+            </span>
+          </template>
+        </UProgress>
+      </UCard>
+    </UModal>
+    <AigcGenerationSRTEditor
+      ref="srtEditor"
+      :course="course"
+    />
+  </div>
+</template>
+
+<style scoped></style>

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/generation/TitlesTemplate.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+defineProps({
+  type: {
+    type: String as PropType<'system' | 'user'>,
+    required: true,
+  },
+  data: {
+    type: Object as PropType<TitlesTemplate>,
+    required: true,
+  },
+})
+
+const emit = defineEmits({
+  'user-titles-request': (_titles: TitlesTemplate) => true,
+  'user-titles-delete': (_titles: TitlesTemplate) => true,
+  'system-titles-delete': (_titles: TitlesTemplate) => true,
+})
+
+const loginState = useLoginState()
+
+const isPreviewModalOpen = ref(false)
+const previewVideoUrl = ref<string | null>(null)
+
+const previewVideo = (url: string) => {
+  previewVideoUrl.value = url
+  setTimeout(() => {
+    isPreviewModalOpen.value = true
+  }, 100)
+}
+
+const closePreview = () => {
+  isPreviewModalOpen.value = false
+  setTimeout(() => {
+    previewVideoUrl.value = null
+  }, 100)
+}
+</script>
+
+<template>
+  <div
+    class="relative w-full flex flex-col rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden shadow-none hover:shadow transition-shadow"
+  >
+    <div class="relative w-full aspect-[16/9] group">
+      <NuxtImg
+        placeholder
+        placeholder-class="w-full aspect-[16/9] object-cover bg-neutral-200 dark:bg-neutral-800"
+        class="object-cover relative"
+        :src="data.opening_url"
+      />
+      <div
+        class="absolute inset-0 bg-black/10 backdrop-blur-md opacity-0 group-hover:opacity-100 duration-300 flex flex-col gap-2 justify-center items-center"
+      >
+        <UButton
+          icon="tabler:play"
+          color="primary"
+          variant="soft"
+          label="预览片头"
+          @click="previewVideo(data.opening_file)"
+        />
+        <UButton
+          icon="tabler:play"
+          color="primary"
+          variant="soft"
+          label="预览片尾"
+          @click="previewVideo(data.ending_file)"
+        />
+      </div>
+    </div>
+    <div class="relative p-2 flex justify-between items-center gap-2">
+      <div class="flex-1">
+        <h1
+          class="text-base font-medium line-clamp-1"
+          :title="data.title"
+        >
+          {{ data.title }}
+        </h1>
+        <p class="text-xs font-medium text-gray-400">
+          {{ data.description }}
+        </p>
+      </div>
+      <div>
+        <UButtonGroup
+          size="xs"
+          v-if="type === 'system'"
+        >
+          <UButton
+            label="使用模板"
+            color="white"
+            @click="emit('user-titles-request', data)"
+          />
+          <!-- <UButton
+            icon="tabler:trash"
+            color="red"
+            @click="emit('system-titles-delete', data)"
+            v-if="loginState.user.auth_code === 2"
+          /> -->
+          <UPopover v-if="loginState.user.auth_code === 2">
+            <UButton
+              icon="tabler:trash"
+              color="red"
+            />
+
+            <template #panel="{ close }">
+              <div class="flex flex-col p-2 gap-2">
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  素材删除后不可恢复，确认删除？
+                </p>
+                <UButton
+                  class="w-fit"
+                  icon="tabler:trash"
+                  label="确认删除"
+                  color="red"
+                  size="xs"
+                  @click="emit('system-titles-delete', data)"
+                />
+              </div>
+            </template>
+          </UPopover>
+        </UButtonGroup>
+        <div v-if="type === 'user'">
+          <!-- <UButton
+            icon="tabler:trash"
+            label="删除素材"
+            variant="soft"
+            color="red"
+            @click="emit('user-titles-delete', data)"
+          /> -->
+          <UPopover>
+            <UButton
+              icon="tabler:trash"
+              label="删除素材"
+              variant="soft"
+              color="red"
+              size="xs"
+            />
+
+            <template #panel="{ close }">
+              <div class="flex flex-col p-2 gap-2">
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  素材删除后不可恢复，确认删除？
+                </p>
+                <UButton
+                  class="w-fit"
+                  icon="tabler:trash"
+                  label="确认删除"
+                  color="red"
+                  size="xs"
+                  @click="emit('user-titles-delete', data)"
+                />
+              </div>
+            </template>
+          </UPopover>
+        </div>
+      </div>
+    </div>
+
+    <UModal
+      v-model="isPreviewModalOpen"
+      :ui="{ width: 'w-full sm:max-w-4xl' }"
+    >
+      <UCard
+        :ui="{
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
+            >
+              <p>视频预览</p>
+            </div>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isPreviewModalOpen = false"
+            />
+          </div>
+        </template>
+
+        <video
+          v-if="previewVideoUrl"
+          class="w-full rounded shadow"
+          controls
+          autoplay
+          :src="previewVideoUrl"
+        ></video>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+
+<style scoped></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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+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()
+
+const active = computed(() => {
+  return route.path === props.to
+})
+
+const activeClass = computed(() => {
+  return props.admin ? 'bg-amber-500 text-white' : 'bg-primary text-white'
+})
+</script>
+
+<template>
+  <NuxtLink
+    v-if="!hide"
+    :class="{
+      [activeClass]: active,
+      'hover:bg-neutral-200 dark:hover:bg-neutral-800': !active,
+    }"
+    :to="to"
+    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"
+      />
+      <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"
+    />
+  </NuxtLink>
+</template>
+
+<style scoped></style>

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

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

app/components/uni/Button/index.vue

@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+const emit = defineEmits(['click'])
+const props = defineProps({
+  type: {
+    type: String as PropType<ButtonType>,
+    default: 'normal',
+  },
+  attrType: {
+    type: String as PropType<'button' | 'submit' | 'reset'>,
+    default: 'button',
+  },
+  size: {
+    type: String as PropType<ButtonSize>,
+    default: 'base',
+  },
+  block: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const buttonTypeClass = computed(() => {
+  let ret = `uni-button--normal`
+  if (props.type !== 'normal') ret += ` uni-button--${props.type}`
+  return ret
+})
+
+const buttonSizeClass = computed(() => {
+  return `uni-button--${props.size}`
+})
+
+const buttonIcon = computed(() => {
+  if (props.icon) return props.icon
+  return null
+})
+
+const handleClick = (e: any) => {
+  emit('click', e)
+}
+</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"
+  >
+    <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" />
+      </span>
+    </Transition>
+    <div
+      class="flex items-center whitespace-nowrap leading-snug"
+      :class="{ 'ml-2': buttonIcon || loading }"
+    >
+      <slot />
+    </div>
+  </button>
+</template>
+
+<style scoped>
+.icon-enter-active,
+.icon-leave-active {
+  transition: all 0.3s ease;
+}
+
+.icon-enter-from,
+.icon-leave-to {
+  opacity: 0;
+  width: 0;
+}
+
+.uni-button--normal {
+  @apply bg-neutral-50 hover:bg-neutral-100 active:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:active:bg-neutral-600;
+  @apply ring-neutral-200/50 dark:ring-neutral-800/50;
+  @apply border-neutral-300 dark:border-neutral-700;
+  @apply text-neutral-700 dark:text-neutral-300;
+}
+
+.uni-button--primary {
+  @apply text-blue-600 dark:text-blue-600;
+}
+
+.uni-button--danger {
+  @apply text-red-500 dark:text-red-500;
+}
+
+.uni-button--disabled {
+  @apply bg-neutral-100 dark:bg-neutral-900 hover:bg-neutral-100 hover:dark:bg-neutral-900;
+  @apply ring-transparent;
+  @apply border-transparent;
+  @apply text-neutral-400 dark:text-neutral-600;
+}
+
+.uni-button--base {
+  @apply text-base;
+  @apply px-4 py-2;
+}
+
+.uni-button--medium {
+  @apply text-sm;
+  @apply px-3 py-1.5;
+}
+
+.uni-button--small {
+  @apply text-sm;
+  @apply px-2 py-1;
+}
+</style>

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

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+const emit = defineEmits(['change'])
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '点击或拖拽文件到此处',
+  },
+  placeholderDragover: {
+    type: String,
+    default: '松开选择文件',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  accept: {
+    type: String,
+    default: '',
+  },
+})
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const dragover = ref(false)
+
+const selectedFiles = ref<File[]>([])
+
+const onIncomeFiles = (files?: FileList | null) => {
+  if (files && files.length > 0) {
+    let wantedFiles = Array.from(files).filter((file) => {
+      if (props.accept) {
+        const accept = props.accept.split(',').map((type) => type.trim())
+        return accept.includes(file.type)
+      }
+      return true
+    })
+    if (wantedFiles.length === 0) {
+      console.error('no acceptable file')
+      return
+    }
+    selectedFiles.value = props.multiple ? wantedFiles : [wantedFiles[0]]
+    emit('change', files)
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="{
+      '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"
+    @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)
+      }
+    "
+  >
+    <input
+      ref="inputRef"
+      :accept="accept"
+      :multiple="multiple"
+      class="hidden"
+      type="file"
+      @change="onIncomeFiles(inputRef?.files)"
+    />
+    <div
+      :class="{
+        'pb-6': selectedFiles.length > 0,
+      }"
+      class="w-full h-full flex flex-col justify-center items-center gap-2 transition-all"
+    >
+      <Icon
+        :name="dragover ? 'i-tabler-drag-drop' : 'i-tabler-upload'"
+        class="text-4xl text-neutral-400 dark:text-neutral-500"
+      />
+      <p class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+        {{ dragover ? '松开选择文件' : '点击或拖拽文件到此处' }}
+      </p>
+    </div>
+    <div
+      v-if="selectedFiles.length > 0"
+      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"
+        />
+        <p
+          :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(', ')
+          }}
+        </p>
+      </div>
+      <div>
+        <UButton
+          color="red"
+          size="xs"
+          square
+          variant="ghost"
+          @click.stop="
+            () => {
+              selectedFiles = []
+              inputRef!.value = ''
+            }
+          "
+        >
+          <Icon name="i-tabler-x" />
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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

@@ -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-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>

app/components/uni/Icon/CircleWarning.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="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>

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

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import type {
+  Message,
+  MessageApi,
+  MessageProviderApi,
+  MessageType,
+} from '~/components/uni/Message/index'
+
+const props = defineProps({
+  max: {
+    type: Number,
+    default: 5,
+  },
+})
+
+const nuxtApp = useNuxtApp()
+const messageList = ref<Message[]>([])
+
+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,
+  })
+  if (messageList.value.length > max) {
+    messageList.value.shift()
+  }
+}
+
+const providerApi: MessageProviderApi = {
+  destroy: (id: string) => {
+    messageList.value.splice(
+      messageList.value.findIndex((message) => message.id === id),
+      1
+    )
+  },
+}
+
+const api: MessageApi = {
+  info: (content: string, duration: number = 3000) => {
+    createMessage(content, 'info', duration)
+  },
+  success: (content: string, duration: number = 3000) => {
+    createMessage(content, 'success', duration)
+  },
+  warning: (content: string, duration: number = 3000) => {
+    createMessage(content, 'warning', duration)
+  },
+  error: (content: string, duration: number = 3000) => {
+    createMessage(content, 'error', duration)
+  },
+  destroyAll: function (): void {
+    throw new Error('Function not implemented.')
+  },
+}
+
+nuxtApp.vueApp.provide('uni-message-provider', providerApi)
+nuxtApp.vueApp.provide('uni-message', api)
+</script>
+
+<template>
+  <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"
+          />
+        </TransitionGroup>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style scoped>
+#message-provider .message-wrapper {
+  @apply z-[50000] fixed inset-0 flex flex-col items-center pointer-events-none;
+}
+
+.message-move,
+.message-leave-active {
+  transition: all 0.6s ease;
+}
+
+.message-enter-active {
+  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.message-enter-from {
+  filter: blur(2px);
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.message-leave-to {
+  filter: blur(6px);
+  opacity: 0;
+  transform: translateY(-20%);
+}
+
+.message-leave-active {
+  position: absolute;
+}
+</style>

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

@@ -0,0 +1,20 @@
+export type Message = {
+  id: string
+  content: string
+  type: MessageType
+  duration?: number
+}
+
+export type MessageType = 'success' | 'warning' | 'error' | 'info'
+
+export type MessageProviderApi = {
+  destroy: (id: string) => void
+}
+
+export type MessageApi = {
+  info: (content: string, duration?: number) => void
+  success: (content: string, duration?: number) => void
+  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

@@ -0,0 +1,6 @@
+type SelectItem = {
+  label: string
+  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

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const emit = defineEmits(['input', 'change', 'update:modelValue'])
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: false,
+  },
+  size: {
+    type: String as PropType<'sm' | 'md' | 'lg'>,
+    required: false,
+    default: 'md',
+  },
+  value: {
+    type: Boolean,
+    required: false,
+  },
+  onIcon: {
+    type: String,
+    required: false,
+  },
+  offIcon: {
+    type: String,
+    required: false,
+  },
+})
+
+const checked = ref(false)
+
+const buttonSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-6 w-10'
+    case 'md':
+      return 'h-8 w-14'
+    case 'lg':
+      return 'h-10 w-[calc(2.5rem/0.54)]'
+  }
+})
+
+const buttonPaddingClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'p-1'
+    case 'md':
+      return 'p-1'
+    case 'lg':
+      return 'p-1.5'
+  }
+})
+
+const bulletSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-4'
+    case 'md':
+      return 'h-6'
+    case 'lg':
+      return 'h-7'
+  }
+})
+
+const bulletTranslateClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'translate-x-4'
+    case 'md':
+      return 'translate-x-6'
+    case 'lg':
+      return 'translate-x-8'
+  }
+})
+
+const handleCheck = () => {
+  checked.value = !checked.value
+  emit('update:modelValue', checked.value)
+  emit('change', checked.value)
+  emit('input', checked.value)
+}
+
+onMounted(() => {
+  if (props.modelValue) {
+    checked.value = props.modelValue
+  } else if (props.value) {
+    checked.value = props.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="{
+      '!bg-green-400 dark:!bg-green-400/50': checked,
+      [buttonSizeClass]: buttonSizeClass,
+      [buttonPaddingClass]: buttonPaddingClass,
+    }"
+    @click="handleCheck"
+  >
+    <span
+      class="aspect-[1/1] translate-x-0 transition ease-in-out bg-white dark:bg-black rounded-md shadow duration-300 group-active:scale-90"
+      :class="{
+        '!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>
+  </button>
+</template>
+
+<style scoped>
+.icon-enter-active,
+.icon-leave-active {
+  transition: all 0.1s ease;
+}
+
+.icon-enter-from,
+.icon-leave-to {
+  opacity: 0;
+  transform: scale(0.5);
+}
+</style>