refactor(deps): migrate to nuxt v4

app/pages/aigc/chat/index.vue

@@ -0,0 +1,554 @@
+<script lang="ts" setup>
+import ChatItem from '~/components/aigc/chat/ChatItem.vue'
+import Message from '~/components/aigc/chat/Message.vue'
+import {
+  type Assistant,
+  type ChatMessage,
+  type ChatMessageId,
+  type ChatSession,
+  type ChatSessionId,
+  llmModels,
+  type ModelTag,
+} from '~/typings/llm'
+import { useHistory } from '~/composables/useHistory'
+import { uuidv4 } from '@uniiem/uuid'
+import { useLLM } from '~/composables/useLLM'
+import { trimObject } from '@uniiem/object-trim'
+import ModalAuthentication from '~/components/ModalAuthentication.vue'
+import NewSessionScreen from '~/components/aigc/chat/NewSessionScreen.vue'
+
+useSeoMeta({
+  title: '聊天',
+})
+
+const dayjs = useDayjs()
+const toast = useToast()
+const modal = useModal()
+const loginState = useLoginState()
+const historyStore = useHistory()
+const { chatSessions } = storeToRefs(historyStore)
+const { setChatSessions } = historyStore
+
+const currentSessionId = ref<ChatSessionId | null>(null)
+const messagesWrapperRef = ref<HTMLDivElement | null>(null)
+
+const showSidebar = ref(false)
+const user_input = ref('')
+const responding = ref(false)
+const currentModel = ref<ModelTag>('spark3_5')
+const currentAssistant = computed<Assistant | null>(
+  () => getSessionCopyById(currentSessionId.value || '')?.assistant || null
+)
+const modals = reactive({
+  modelSelect: false,
+  assistantSelect: false,
+  newSessionScreen: false,
+})
+
+/**
+ * 获取指定 ID 的会话数据
+ * @param chatSessionId
+ */
+const getSessionCopyById = (
+  chatSessionId: ChatSessionId
+): ChatSession | undefined =>
+  chatSessions.value.find((s) => s.id === chatSessionId)
+/**
+ * 切换当前会话
+ * @param chatSessionId 指定会话 ID，不传则切换到列表中第一个会话
+ */
+const selectCurrentSessionId = (chatSessionId?: ChatSessionId) => {
+  if (chatSessions.value.length > 0) {
+    if (chatSessionId) {
+      // 切换到指定 ID
+      // 保存当前输入并清空输入框
+      setChatSessions(
+        chatSessions.value.map((s) =>
+          s.id === currentSessionId.value
+            ? {
+                ...s,
+                last_input: user_input.value,
+              }
+            : s
+        )
+      )
+      user_input.value = ''
+      // 切换到指定 ID 会话
+      currentSessionId.value = chatSessionId
+      // 恢复输入
+      user_input.value = getSessionCopyById(chatSessionId)?.last_input || ''
+      // 清除已恢复的输入
+      setChatSessions(
+        chatSessions.value.map((s) =>
+          s.id === chatSessionId
+            ? {
+                ...s,
+                last_input: '',
+              }
+            : s
+        )
+      )
+    } else {
+      // 切换到第一个会话
+      currentSessionId.value = chatSessions.value[0].id
+    }
+  } else {
+    handleClickCreateSession()
+  }
+  nextTick(() => {
+    showSidebar.value = false
+    modals.newSessionScreen = false
+    scrollToMessageListBottom()
+  })
+}
+
+/**
+ * 创建新会话处理函数
+ * @param assistant 指定助手，不传或空值则不指定助手
+ */
+const createSession = (assistant: Assistant | null) => {
+  // 生成一个新的会话 ID
+  const sessionId = uuidv4()
+  // 新会话数据
+  const newChat = !!assistant
+    ? {
+        id: sessionId,
+        subject: '新对话',
+        messages: [],
+        create_at: dayjs().unix(),
+        assistant,
+      }
+    : {
+        id: sessionId,
+        subject: '新对话',
+        messages: [],
+        create_at: dayjs().unix(),
+      }
+  // 插入新会话数据
+  setChatSessions([newChat, ...chatSessions.value])
+  // 切换到新的会话
+  selectCurrentSessionId(sessionId)
+  // 关闭新建会话屏幕
+  modals.newSessionScreen = false
+  nextTick(() => {
+    if (!!currentAssistant.value) {
+      insetMessage({
+        id: uuidv4(),
+        role: 'system',
+        content: currentAssistant.value?.role || '',
+        preset: true,
+      })
+      insetMessage({
+        id: uuidv4(),
+        role: 'user',
+        content: `${currentAssistant.value?.target}，${currentAssistant.value?.demand}`,
+        preset: true,
+      })
+      insetMessage({
+        id: uuidv4(),
+        role: 'assistant',
+        content: currentAssistant.value?.input_tpl || '',
+        preset: true,
+      })
+    } else {
+      insetMessage({
+        id: uuidv4(),
+        role: 'assistant',
+        content: '你好，有什么可以帮助你的吗？',
+        preset: true,
+      })
+    }
+  })
+}
+
+/**
+ * 处理点击新建会话按钮事件
+ */
+const handleClickCreateSession = () => {
+  showSidebar.value = false
+  modals.newSessionScreen = true
+}
+
+/**
+ * 处理发送消息操作
+ * @param event
+ */
+const handleClickSend = (event: any) => {
+  if (!loginState.is_logged_in) {
+    modal.open(ModalAuthentication)
+    return
+  }
+  if (event.ctrlKey) {
+    return
+  }
+  if (responding.value) return
+  if (!user_input.value) return
+  if (!currentSessionId.value) {
+    toast.add({
+      title: '发送失败',
+      description: '请先选择一个会话',
+      color: 'red',
+      icon: 'i-tabler-circle-x',
+    })
+    return
+  }
+  // 插入用户消息
+  insetMessage({
+    id: uuidv4(),
+    role: 'user',
+    content: user_input.value,
+    create_at: dayjs().unix(),
+  })
+  user_input.value = ''
+  // 进入响应中状态
+  responding.value = true
+  // 插入空助手消息(加载状态)
+  const assistantReplyId = insetMessage({
+    id: uuidv4(),
+    role: 'assistant',
+    content: '',
+  })
+  // 请求模型回复
+  const trimmedMessages = trimObject(getMessages(), 2000, {
+    keys: ['content'],
+  })
+  useLLM(trimmedMessages, {
+    modelTag: currentModel.value,
+  })
+    .then((reply) => {
+      modifyMessageContent(assistantReplyId, reply)
+    })
+    .catch((err) => {
+      modifyMessageContent(assistantReplyId, err, true)
+    })
+    .finally(() => {
+      responding.value = false
+    })
+}
+
+const scrollToMessageListBottom = () => {
+  nextTick(() => {
+    messagesWrapperRef.value?.scrollTo({
+      top: messagesWrapperRef.value.scrollHeight,
+      behavior: 'smooth',
+    })
+  })
+}
+
+const insetMessage = (message: ChatMessage): ChatMessageId => {
+  setChatSessions(
+    chatSessions.value.map((s) =>
+      s.id === currentSessionId.value
+        ? {
+            ...s,
+            messages: [...s.messages, message],
+          }
+        : s
+    )
+  )
+  scrollToMessageListBottom()
+  return message.id
+}
+
+const getMessages = () =>
+  getSessionCopyById(currentSessionId.value!)?.messages || []
+
+const modifyMessageContent = (
+  messageId: ChatMessageId,
+  content: string,
+  interrupted: boolean = false,
+  updateTime: boolean = true
+) => {
+  setChatSessions(
+    chatSessions.value.map((s) =>
+      s.id === currentSessionId.value
+        ? {
+            ...s,
+            messages: s.messages.map((m) =>
+              m.id === messageId
+                ? {
+                    ...m,
+                    content,
+                    interrupted,
+                    create_at: updateTime ? dayjs().unix() : m.create_at,
+                  }
+                : m
+            ),
+          }
+        : s
+    )
+  )
+  scrollToMessageListBottom()
+}
+
+onMounted(() => {
+  // 切换到第一个会话, 没有会话会自动创建
+  selectCurrentSessionId()
+})
+</script>
+
+<template>
+  <div class="w-full flex relative">
+    <div
+      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px] shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
+      :class="{ 'translate-x-0': showSidebar }"
+    >
+      <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
+        <!-- list -->
+        <div class="flex flex-col gap-3 relative">
+          <!-- ClientOnly avoids hydrate exception -->
+          <ClientOnly>
+            <TransitionGroup name="chat-item">
+              <div v-if="chatSessions.length === 0">
+                <div
+                  class="text-center text-neutral-400 dark:text-neutral-500 py-4 flex flex-col items-center gap-2"
+                >
+                  <Icon
+                    name="i-tabler-messages"
+                    class="text-2xl"
+                  />
+                  <span>没有会话</span>
+                </div>
+              </div>
+              <ChatItem
+                v-for="session in chatSessions"
+                :chat-session="session"
+                :key="session.id"
+                :active="session.id === currentSessionId"
+                @click="selectCurrentSessionId(session.id)"
+                @remove="
+                  () => {
+                    chatSessions.splice(
+                      chatSessions.findIndex((s) => s.id === session.id),
+                      1
+                    )
+                    session.id === currentSessionId && selectCurrentSessionId()
+                  }
+                "
+              />
+            </TransitionGroup>
+          </ClientOnly>
+        </div>
+      </div>
+      <div class="pt-4 flex justify-between items-center">
+        <div></div>
+        <div>
+          <UButton
+            color="white"
+            variant="solid"
+            icon="i-tabler-message-circle-plus"
+            @click="handleClickCreateSession"
+          >
+            新建聊天
+          </UButton>
+        </div>
+      </div>
+    </div>
+    <div class="h-[calc(100vh-4rem)] flex-1 bg-white dark:bg-neutral-900">
+      <Transition
+        name="message"
+        mode="out-in"
+      >
+        <div
+          v-if="!loginState.is_logged_in"
+          class="w-full h-full"
+        >
+          <div
+            class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
+          >
+            <Icon
+              name="i-tabler-user-circle"
+              class="text-7xl text-neutral-300 dark:text-neutral-700"
+            />
+            <p class="text-sm text-neutral-500 dark:text-neutral-400">
+              请登录后使用
+            </p>
+            <UButton
+              class="mt-2 font-bold"
+              color="black"
+              variant="solid"
+              size="xs"
+              @click="modal.open(ModalAuthentication)"
+            >
+              登录
+            </UButton>
+          </div>
+        </div>
+        <NewSessionScreen
+          v-else-if="
+            modals.newSessionScreen ||
+            getSessionCopyById(currentSessionId!) === undefined
+          "
+          :non-back="!getSessionCopyById(currentSessionId!)"
+          @select="createSession"
+          @cancel="modals.newSessionScreen = false"
+        />
+        <div
+          v-else
+          class="w-full h-full flex flex-col"
+        >
+          <div
+            class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2"
+          >
+            <UButton
+              class="md:hidden"
+              color="black"
+              variant="ghost"
+              icon="i-tabler-menu-2"
+              @click="showSidebar = !showSidebar"
+            ></UButton>
+            <h1 class="font-medium">
+              {{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}
+            </h1>
+          </div>
+          <div
+            ref="messagesWrapperRef"
+            class="flex-1 flex flex-col overflow-auto overflow-x-hidden"
+          >
+            <div class="flex flex-col gap-8 px-4 py-8">
+              <TransitionGroup name="message">
+                <Message
+                  v-for="message in getMessages() || []"
+                  :message="message"
+                  :key="message.id"
+                />
+              </TransitionGroup>
+            </div>
+          </div>
+          <ClientOnly>
+            <div
+              class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50"
+            >
+              <div
+                class="flex items-center gap-2 overflow-auto overflow-y-hidden"
+              >
+                <button
+                  class="chat-option-btn"
+                  @click="modals.modelSelect = true"
+                >
+                  <Icon name="tabler:box" />
+                  <span class="text-xs">
+                    {{
+                      llmModels
+                        .find((m) => m.tag === currentModel)
+                        ?.name.toUpperCase() || '模型'
+                    }}
+                  </span>
+                </button>
+                <button
+                  v-if="currentAssistant?.tpl_name"
+                  class="chat-option-btn"
+                >
+                  <Icon name="tabler:robot-face" />
+                  <span class="text-xs">
+                    {{ currentAssistant.tpl_name }}
+                  </span>
+                </button>
+              </div>
+              <div class="relative">
+                <UTextarea
+                  v-model="user_input"
+                  size="lg"
+                  autoresize
+                  :rows="5"
+                  :maxrows="12"
+                  class="font-sans"
+                  placeholder="Enter 发送, Ctrl + Enter 换行"
+                  @keydown.ctrl.enter="user_input += '\n'"
+                  @keydown.enter.prevent="handleClickSend"
+                />
+                <UButton
+                  color="black"
+                  variant="solid"
+                  icon="i-tabler-send-2"
+                  class="absolute bottom-2.5 right-3"
+                  @click.stop="handleClickSend"
+                >
+                  发送
+                </UButton>
+              </div>
+            </div>
+          </ClientOnly>
+        </div>
+      </Transition>
+    </div>
+
+    <!-- Modals -->
+    <UModal v-model="modals.modelSelect">
+      <UCard>
+        <template #header>
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            选择大语言模型
+          </h3>
+        </template>
+        <div class="grid grid-cols-3 gap-4">
+          <div
+            v-for="(llm, index) in llmModels"
+            :key="index"
+            @click="currentModel = llm.tag"
+            class="flex flex-col gap-2 justify-center items-center w-full aspect-[1/1] border-2 rounded-xl cursor-pointer transition duration-150 select-none"
+            :class="
+              llm.tag === currentModel
+                ? 'border-primary shadow-xl bg-primary text-white'
+                : 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'
+            "
+          >
+            <Icon
+              v-if="llm?.icon"
+              :name="llm.icon"
+              class="text-4xl opacity-80"
+            />
+            <div class="flex flex-col gap-0.5 items-center">
+              <h1 class="font-bold drop-shadow opacity-90">
+                {{ llm.name || 'unknown' }}
+              </h1>
+              <p class="text-xs opacity-60">{{ llm.description }}</p>
+            </div>
+          </div>
+        </div>
+        <template #footer>
+          <div
+            class="flex justify-end items-center"
+            @click="modals.modelSelect = false"
+          >
+            <UButton>确定</UButton>
+          </div>
+        </template>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+
+<!--suppress CssUnusedSymbol -->
+<style scoped>
+.message-enter-active {
+  @apply transition duration-300;
+}
+
+.message-enter-from {
+  @apply translate-y-4 opacity-0;
+}
+
+.chat-item-move,
+.chat-item-enter-active,
+.chat-item-leave-active {
+  @apply transition-all duration-300;
+}
+
+.chat-item-enter-from,
+.chat-item-leave-to {
+  @apply opacity-0 scale-90;
+}
+
+.chat-item-leave-active {
+  @apply absolute inset-x-0;
+}
+
+.chat-option-btn {
+  @apply text-lg px-2 py-1.5 flex gap-1 justify-center items-center rounded-lg;
+  @apply bg-white border border-neutral-300 shadow-sm hover:shadow-card;
+  @apply dark:bg-neutral-800 dark:border-neutral-600;
+}
+</style>

app/pages/aigc/draw/index.vue

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

app/pages/aigc/navigation.vue

@@ -0,0 +1,292 @@
+<script lang="ts" setup>
+interface ToolCategory {
+  category: string
+  icon: string
+  links: ToolLink[]
+}
+
+interface ToolLink {
+  id: string
+  label: string
+  description: string
+  url: string
+  logo?: string
+  tags?: string[]
+}
+
+const toolCats = ref<ToolCategory[]>([
+  {
+    category: 'LLM 对话',
+    icon: 'tabler:message-circle',
+    links: [
+      {
+        id: 'deepseek',
+        label: 'DeepSeek',
+        description:
+          '深度求索人工智能基础技术研究有限公司(简称“深度求索”或“DeepSeek”)，成立于2023年，是一家专注于实现AGI的中国公司。',
+        url: 'https://chat.deepseek.com/',
+      },
+      {
+        id: 'doubao',
+        label: '豆包',
+        description:
+          '豆包网页版是一款抖音集团推出的在线 AI 助手，基于云雀模型构建的在线使用的多功能人工智能工具和免费 AI 聊天机器人。',
+        url: 'https://www.doubao.com/chat/',
+      },
+      {
+        id: 'kimi',
+        label: 'Kimi',
+        description:
+          'Kimi 是由月之暗面科技有限公司开发的智能聊天助手，旨在为用户提供高效、智能和友好的交流体验。作为一款先进的人工智能产品，Kimi 集成了多种功能和特点，使其能够满足用户在多种场景下的沟通需求。',
+        url: 'https://kimi.ai/',
+      },
+      {
+        id: 'chatglm',
+        label: '智谱清言',
+        description:
+          '智谱清言是一款基于人工智能技术的千亿参数对话模型，遵循中国政府的立场和社会主义价值观，提供多领域知识问答、信息检索、文本生成等服务。',
+        url: 'https://chatglm.cn/',
+      },
+      {
+        id: 'xiezuocat',
+        label: '秘塔写作猫',
+        description:
+          '一代 AI 写作伴侣，旨在帮助用户推敲用语、斟酌文法、改写文风，并提供实时同步翻译功能。它为用户创造了一个简洁的写作环境，并支持账号数据同步，使用户能够随时随地进行写作。',
+        url: 'https://xiezuocat.com/',
+      },
+      {
+        id: 'xinghuo',
+        label: '讯飞星火',
+        description:
+          '讯飞星火 AI 助手，高性能 AI 语言模型，具备多模态理解和生成能力，服务于企业服务、智能硬件、智慧政务、智慧金融、智慧生活和智慧医疗等多个领域。',
+        url: 'https://xinghuo.xfyun.cn/desk',
+      },
+    ],
+  },
+  {
+    category: 'AI 绘画',
+    icon: 'tabler:photo-edit',
+    links: [
+      {
+        id: 'jimeng',
+        label: '即梦 Dreamina',
+        description:
+          '即梦是一个功能丰富的 AI 创作工具，即梦 AI 通过理解和应用用户的创意输入，提供了从视频生成到 AI 绘画的一站式解决方案。',
+        url: 'https://jimeng.jianying.com/ai-tool/home',
+      },
+      {
+        id: 'doubao',
+        label: '豆包',
+        description:
+          '豆包网页版是一款抖音集团推出的在线 AI 助手，基于云雀模型构建的在线使用的多功能人工智能工具和免费 AI 聊天机器人。',
+        url: 'https://www.doubao.com/chat/',
+      },
+      {
+        id: 'huiwa',
+        label: '绘蛙',
+        description:
+          '帮助用户快速生成商业摄影图片和吸引人的文案。它专为满足小红书、电商和跨境电商等不同平台的内容创作需求而设计。',
+        url: 'https://www.ihuiwa.com/workspace/ai-image',
+        tags: ['需登录'],
+      },
+      {
+        id: 'abei',
+        label: '阿贝 AI 绘画',
+        description:
+          '用 AI 创作绘本，让孩子的创意有更多表现形式，让天马行空的想法更快实现；家长也可以把想讲的话在10分钟之内创作出一个绘本故事，讲给孩子听，让亲子间的互动更加紧密，更为和谐。',
+        url: 'https://abeiai.com/',
+        tags: ['需登录'],
+      },
+      {
+        id: 'hunyuan',
+        label: '腾讯混元生图',
+        description:
+          '为创新性的设计、故事讲述以及更多场景提供一种强大而灵活的解决方案。',
+        url: 'https://image.hunyuan.tencent.com/',
+        tags: ['需登录'],
+      },
+    ],
+  },
+  {
+    category: 'PPT 生成处理',
+    icon: 'tabler:file-text',
+    links: [
+      {
+        id: 'chatglm',
+        label: '清言 PPT',
+        description:
+          '智谱清言是一款基于人工智能技术的千亿参数对话模型，遵循中国政府的立场和社会主义价值观，提供多领域知识问答、信息检索、文本生成等服务。',
+        url: 'https://chatglm.cn/',
+        tags: ['需登录'],
+      },
+      {
+        id: 'aippt',
+        label: '博思 AIPPT',
+        description:
+          '博思 AIPPT 是一个强大的在线PPT辅助工具，它通过 AI 技术简化了 PPT 的创建过程，提高了制作效率，同时保证了演示文稿的专业性和吸引力。',
+        url: 'https://pptgo.cn/',
+        tags: ['需登录'],
+      },
+      {
+        id: 'gezhe',
+        label: '歌者 PPT',
+        description:
+          '一键智能生成，内置海量模板，支持在线编辑美化，轻松做出令人惊艳的 PPT',
+        url: 'https://gezhe.com/',
+        tags: ['需登录'],
+      },
+      {
+        id: 'wenku',
+        label: '百度文库助手',
+        description:
+          '智能PPT、智能创作、智能编辑、智能总结四大AI能力，全面提升文档生产力',
+        url: 'https://wenku.baidu.com/ndlaunch/browse/chat',
+      },
+      {
+        id: 'chatppt',
+        label: 'ChatPPT',
+        description:
+          'ChatPPT 是一个创新的 AI 驱动的 PPT 生成工具，它通过对话式交互和全流程 AI 创作，大幅简化了 PPT 的制作过程。',
+        url: 'https://www.chat-ppt.com/',
+        tags: ['需登录'],
+      },
+    ],
+  },
+  {
+    category: 'AI 视频生成',
+    icon: 'tabler:video',
+    links: [
+      {
+        id: 'keling',
+        label: '可灵',
+        description:
+          '可灵AI大模型是快手推出的一款创新的视频生成工具，它通过先进的AI技术，为用户提供了一个能够将创意快速转化为视频内容的平台。',
+        url: 'https://klingai.kuaishou.com/',
+      },
+      {
+        id: 'hailuo',
+        label: '海螺 AI 视频',
+        description:
+          '多功能的AI助手，通过提供视频创作、音乐创作、图像识别和文本写作等功能，帮助用户提升工作和学习的效率。它的智能化和高效率的特点，使其成为提升生产力的有力工具。',
+        url: 'https://hailuoai.com/video',
+      },
+      {
+        id: 'huiwa',
+        label: '绘蛙',
+        description:
+          '帮助用户快速生成商业摄影图片和吸引人的文案。它专为满足小红书、电商和跨境电商等不同平台的内容创作需求而设计。',
+        url: 'https://www.ihuiwa.com/workspace/ai-image',
+        tags: ['需登录'],
+      },
+      {
+        id: 'daydream',
+        label: '白日梦',
+        description:
+          '多功能AIGC视频内容创作平台，提供丰富的活动、角色库、创作支持和社区交流功能。它旨在为用户提供一个综合性的在线体验和创作空间，适合喜欢在线互动和创作的用户。',
+        url: 'https://aibrm.com/',
+      },
+    ],
+  },
+])
+
+const open = (url?: string | URL, target?: string, features?: string) => {
+  return window.open(url, target, features)
+}
+</script>
+
+<template>
+  <div
+    class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0 overflow-y-scroll"
+  >
+    <div class="container max-w-[1280px] mx-auto py-4 space-y-12">
+      <div
+        class="pattern w-full p-10 flex flex-col justify-center gap-3 items-center rounded-lg shadow-sm border border-gray-200 dark:border-neutral-700"
+      >
+        <h1 class="text-4xl font-bold text-center text-primary">AI 工具导航</h1>
+        <p>常用 AI 工具，一网打尽，常用常新</p>
+      </div>
+      <div class="w-full">
+        <div class="space-y-10">
+          <div
+            v-for="(cat, i) in toolCats"
+            class="space-y-4"
+            :key="i"
+          >
+            <h2 class="text-2xl font-bold text-primary flex items-center gap-2">
+              <UIcon
+                :name="cat.icon"
+                class="text-3xl"
+              />
+              <span>{{ cat.category }}</span>
+            </h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              <div
+                v-for="link in cat.links"
+                class="bg-white dark:bg-neutral-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-neutral-700 space-y-2 cursor-pointer hover:shadow-md transition-all duration-300"
+                :key="link.id"
+                @click="open(link.url)"
+              >
+                <div class="flex items-start gap-3">
+                  <img
+                    :src="link.logo || `/logo/${link.id}.png`"
+                    :alt="link.label"
+                    class="w-10 h-10 rounded-lg"
+                  />
+                  <div class="flex flex-col gap-1">
+                    <div class="flex items-center justify-between">
+                      <h3 class="text-xl font-bold flex-1">{{ link.label }}</h3>
+                      <div
+                        v-if="link.tags"
+                        class="flex items-center gap-2"
+                      >
+                        <UBadge
+                          v-for="(tag, i) in link.tags"
+                          color="teal"
+                          variant="subtle"
+                          size="xs"
+                          :key="i"
+                        >
+                          {{ tag }}
+                        </UBadge>
+                      </div>
+                    </div>
+
+                    <UPopover
+                      mode="hover"
+                      :popper="{ offsetDistance: 24 }"
+                    >
+                      <p
+                        class="text-sm text-gray-600 dark:text-gray-400 text-justify line-clamp-2"
+                      >
+                        {{ link.description }}
+                      </p>
+
+                      <template #panel>
+                        <div class="p-2">
+                          <p
+                            class="text-xs text-gray-600 dark:text-gray-400 text-justify max-w-md"
+                          >
+                            {{ link.description }}
+                          </p>
+                        </div>
+                      </template>
+                    </UPopover>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pattern {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Cellipse fill='none' stroke-width='1.6' stroke-opacity='0.2' id='a' rx='600' ry='450'/%3E%3C/defs%3E%3Cg style='transform-origin:center'%3E%3Cg transform='' style='transform-origin:center'%3E%3Cg transform='rotate(-160 0 0)' style='transform-origin:center'%3E%3Cg transform='translate(1000 750)'%3E%3Cuse stroke='%23FF008A' href='%23a' transform='rotate(-60 0 0) scale(0.4)'/%3E%3Cuse stroke='%23f30a8f' href='%23a' transform='rotate(-50 0 0) scale(0.5)'/%3E%3Cuse stroke='%23e81495' href='%23a' transform='rotate(-40 0 0) scale(0.6)'/%3E%3Cuse stroke='%23dc1f9a' href='%23a' transform='rotate(-30 0 0) scale(0.7)'/%3E%3Cuse stroke='%23d1299f' href='%23a' transform='rotate(-20 0 0) scale(0.8)'/%3E%3Cuse stroke='%23c533a5' href='%23a' transform='rotate(-10 0 0) scale(0.9)'/%3E%3Cuse stroke='%23b93daa' href='%23a' transform=''/%3E%3Cuse stroke='%23ae47af' href='%23a' transform='rotate(10 0 0) scale(1.1)'/%3E%3Cuse stroke='%23a251b5' href='%23a' transform='rotate(20 0 0) scale(1.2)'/%3E%3Cuse stroke='%23975cba' href='%23a' transform='rotate(30 0 0) scale(1.3)'/%3E%3Cuse stroke='%238b66bf' href='%23a' transform='rotate(40 0 0) scale(1.4)'/%3E%3Cuse stroke='%238070c5' href='%23a' transform='rotate(50 0 0) scale(1.5)'/%3E%3Cuse stroke='%23747aca' href='%23a' transform='rotate(60 0 0) scale(1.6)'/%3E%3Cuse stroke='%236884cf' href='%23a' transform='rotate(70 0 0) scale(1.7)'/%3E%3Cuse stroke='%235d8fd4' href='%23a' transform='rotate(80 0 0) scale(1.8)'/%3E%3Cuse stroke='%235199da' href='%23a' transform='rotate(90 0 0) scale(1.9)'/%3E%3Cuse stroke='%2346a3df' href='%23a' transform='rotate(100 0 0) scale(2)'/%3E%3Cuse stroke='%233aade4' href='%23a' transform='rotate(110 0 0) scale(2.1)'/%3E%3Cuse stroke='%232eb7ea' href='%23a' transform='rotate(120 0 0) scale(2.2)'/%3E%3Cuse stroke='%2323c1ef' href='%23a' transform='rotate(130 0 0) scale(2.3)'/%3E%3Cuse stroke='%2317ccf4' href='%23a' transform='rotate(140 0 0) scale(2.4)'/%3E%3Cuse stroke='%230cd6fa' href='%23a' transform='rotate(150 0 0) scale(2.5)'/%3E%3Cuse stroke='%2300E0FF' href='%23a' transform='rotate(160 0 0) scale(2.6)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+}
+</style>

app/pages/generation.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import NavItem from '~/components/aigc/nav/NavItem.vue'
+
+useSeoMeta({
+  title: '智能生成',
+})
+
+const navList = ref<
+  {
+    label: string
+    icon: string
+    to: string
+    admin?: boolean
+  }[]
+>([
+  {
+    label: '微课视频生成',
+    icon: 'tabler:presentation-analytics',
+    to: '/generation/course',
+  },
+  {
+    label: '绿幕视频生成',
+    icon: 'i-tabler-video',
+    to: '/generation/green-screen',
+  },
+  {
+    label: '数字讲师管理',
+    icon: 'tabler:user-screen',
+    to: '/generation/avatar-models',
+  },
+  {
+    label: '片头片尾模板',
+    icon: 'tabler:keyframes',
+    to: '/generation/materials',
+  },
+  {
+    label: 'PPT 模板库',
+    icon: 'tabler:file-type-ppt',
+    to: '/generation/ppt-templates',
+  },
+  {
+    label: '管理中心',
+    icon: 'tabler:home-cog',
+    to: '/generation/admin',
+    admin: true,
+  },
+])
+
+const route = useRoute()
+const router = useRouter()
+const loginState = useLoginState()
+
+onMounted(() => {
+  if (route.fullPath === '/generation') {
+    router.replace('/generation/course')
+  }
+})
+</script>
+
+<template>
+  <div class="w-full flex relative">
+    <div
+      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px] border-r border-neutral-200 dark:border-neutral-700 transition-all duration-300 ease-out"
+    >
+      <div class="flex flex-col flex-1 overflow-auto overflow-x-hidden">
+        <div class="flex flex-col gap-1">
+          <ClientOnly>
+            <NavItem
+              v-for="(item, i) in navList"
+              :key="i"
+              :icon="item.icon"
+              :label="item.label"
+              :to="item.to"
+              :admin="item.admin"
+              :hide="item.admin && loginState.user.auth_code !== 2"
+            />
+          </ClientOnly>
+        </div>
+      </div>
+    </div>
+
+    <LoginNeededContent
+      content-class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900"
+    >
+      <Transition
+        name="subpage"
+        mode="out-in"
+      >
+        <div>
+          <Suspense>
+            <NuxtPage
+              :page-key="route.fullPath"
+              keepalive
+            />
+          </Suspense>
+        </div>
+      </Transition>
+    </LoginNeededContent>
+  </div>
+</template>
+
+<style>
+.subpage-enter-active,
+.subpage-leave-active {
+  @apply transition-all duration-300;
+}
+
+.subpage-enter-from,
+.subpage-leave-to {
+  @apply opacity-0 translate-x-4;
+}
+
+.loading-screen-leave-active {
+  @apply transition-all duration-300;
+}
+
+.loading-screen-leave-to {
+  @apply opacity-0;
+}
+
+.card-move,
+.card-enter-active,
+.card-leave-active {
+  @apply transition-all duration-300;
+}
+
+.card-enter-from,
+.card-leave-to {
+  @apply opacity-0;
+}
+
+.card-leave-active {
+  @apply absolute;
+}
+</style>

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

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

app/pages/generation/admin/index.vue

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

app/pages/generation/admin/users.vue

@@ -0,0 +1,883 @@
+<script lang="ts" setup>
+const route = useRoute()
+const toast = useToast()
+const dayjs = useDayjs()
+const loginState = useLoginState()
+
+const systemServices: ServiceType[] = [
+  {
+    tag: 'PPTToVideo',
+    name: '微课视频(PPT驱动)',
+  },
+  {
+    tag: 'TextToVideo',
+    name: '绿幕视频(文字驱动)',
+  },
+  {
+    tag: 'SparkChat15',
+    name: '讯飞星火大模型 1.5',
+  },
+  {
+    tag: 'SparkChat30',
+    name: '讯飞星火大模型 3.0',
+  },
+  {
+    tag: 'SparkChat35',
+    name: '讯飞星火大模型 3.5',
+  },
+  {
+    tag: 'TenImgToImg',
+    name: '腾讯混元 - 图生图',
+  },
+  {
+    tag: 'TenTextToImg',
+    name: '腾讯混元 - 文生图',
+  },
+]
+
+const columns = [
+  {
+    key: 'id',
+    label: 'ID',
+    disabled: true,
+  },
+  {
+    key: 'avatar',
+    label: '头像',
+    disabled: true,
+  },
+  {
+    key: 'username',
+    label: '账户名/姓名',
+    disabled: true,
+  },
+  {
+    key: 'company',
+    label: '单位',
+  },
+  {
+    key: 'mobile',
+    label: '手机号',
+  },
+  {
+    key: 'sex',
+    label: '性别',
+  },
+  {
+    key: 'auth_code',
+    label: '角色',
+  },
+  {
+    key: 'actions',
+    label: '操作',
+  },
+]
+
+const selectedColumns = ref([
+  ...columns.filter((row) => {
+    return !['auth_code'].includes(row.key)
+  }),
+])
+const page = ref(1)
+const pageCount = ref(15)
+const state_filter = ref<'verified' | 'unverified'>('verified')
+const is_verified = ref(true)
+const viewingUser = ref<UserSchema | null>(null)
+const isSlideOpen = computed({
+  get: () => !!viewingUser.value,
+  set: () => (viewingUser.value = null),
+})
+
+watch([is_verified, pageCount], () => (page.value = 1))
+watch(
+  state_filter,
+  () => (is_verified.value = state_filter.value === 'verified')
+)
+
+const {
+  data: usersData,
+  refresh: refreshUsersData,
+  status: usersDataStatus,
+} = useAsyncData(
+  'systemUsers',
+  () =>
+    useFetchWrapped<
+      req.user.UserList & AuthedRequest,
+      BaseResponse<PagedData<UserSchema>>
+    >('App.User_User.ListUser', {
+      token: loginState.token!,
+      user_id: loginState.user.id!,
+      page: page.value,
+      perpage: pageCount.value,
+      is_verify: is_verified.value,
+    }),
+  {
+    watch: [page, pageCount, is_verified],
+    transform: (res) => {
+      res.data.items.unshift(loginState.user)
+      return res
+    },
+  }
+)
+
+const isDigitalSelectorOpen = ref(false)
+const dhPage = ref(1)
+const dhPageCount = ref(10)
+
+watch(dhPageCount, () => (dhPage.value = 1))
+
+onMounted(() => {
+  if (!!route.query?.unverified) {
+    state_filter.value = 'unverified'
+  }
+})
+
+const {
+  data: digitalHumansData,
+  refresh: refreshDigitalHumansData,
+  status: digitalHumansDataStatus,
+} = useAsyncData(
+  'currentUserDigitalHumans',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest,
+      BaseResponse<PagedData<DigitalHumanItem>>
+    >('App.User_UserDigital.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id!,
+      to_user_id: viewingUser.value?.id || 0,
+      page: dhPage.value,
+      perpage: dhPageCount.value,
+    }),
+  {
+    watch: [viewingUser, dhPage, dhPageCount],
+  }
+)
+
+const {
+  data: userBalances,
+  status: userBalancesStatus,
+  refresh: refreshUserBalances,
+} = useAsyncData(
+  'userServiceBalances',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest,
+      BaseResponse<PagedData<ServiceBalance>>
+    >('App.User_UserBalance.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: viewingUser.value?.id || 0,
+      page: 1,
+      perpage: 20,
+    }),
+  {
+    watch: [viewingUser],
+  }
+)
+
+const getBalanceByTag = (tag: ServiceTag): ServiceBalance | null => {
+  return (
+    userBalances?.value?.data.items.find((row) => row.request_type === tag) ||
+    null
+  )
+}
+
+const items = (row: UserSchema) => [
+  [
+    {
+      label: '服务和用量',
+      icon: 'tabler:server-cog',
+      click: () => openSlide(row),
+      disabled: row.auth_code === 0,
+    },
+  ],
+  [
+    {
+      disabled: row.id === loginState.user.id,
+      label: row.auth_code !== 0 ? '停用账号' : '启用账号',
+      icon: row.auth_code !== 0 ? 'tabler:cancel' : 'tabler:shield-check',
+      click: () => setUserStatus(row.id, row.auth_code === 0),
+    },
+  ],
+]
+
+const openSlide = (user: UserSchema) => {
+  viewingUser.value = user
+}
+
+const closeSlide = () => {
+  viewingUser.value = null
+}
+
+const onDigitalHumansSelected = (digitalHumans: DigitalHumanItem[]) => {
+  useFetchWrapped<
+    {
+      to_user_id: number
+      digital_human_array: number[]
+    } & AuthedRequest,
+    BaseResponse<{
+      total: number
+      success: number
+      failed: number
+    }>
+  >('App.User_UserDigital.CreateConnArr', {
+    token: loginState.token!,
+    user_id: loginState.user.id!,
+    to_user_id: viewingUser.value?.id || 0,
+    digital_human_array: digitalHumans.map(
+      (row) => row.id || row.digital_human_id || 0
+    ),
+  }).then((res) => {
+    if (res.ret === 200) {
+      toast.add({
+        title: '授权成功',
+        description: `成功授权 ${res.data.success} 个数字人${
+          res.data.failed ? `，失败 ${res.data.failed} 个` : ''
+        }`,
+        color: 'green',
+        icon: 'tabler:check',
+      })
+      refreshDigitalHumansData()
+    } else {
+      toast.add({
+        title: '授权失败',
+        description: res.msg || '未知错误',
+        color: 'red',
+        icon: 'tabler:alert-triangle',
+      })
+    }
+  })
+}
+
+const revokeDigitalHuman = (uid: number, digitalHumanId: number) => {
+  useFetchWrapped<
+    {
+      to_user_id: number
+      digital_human_id: number
+    } & AuthedRequest,
+    BaseResponse<{
+      code: number // 1: success, 0: failed
+    }>
+  >('App.User_UserDigital.DeleteConn', {
+    token: loginState.token!,
+    user_id: loginState.user.id!,
+    to_user_id: uid,
+    digital_human_id: digitalHumanId,
+  }).then((res) => {
+    if (res.ret === 200 && res.data.code === 1) {
+      toast.add({
+        title: '撤销成功',
+        description: '已撤销数字人授权',
+        color: 'green',
+        icon: 'tabler:check',
+      })
+      refreshDigitalHumansData()
+    } else {
+      toast.add({
+        title: '撤销失败',
+        description: res.msg || '未知错误',
+        color: 'red',
+        icon: 'tabler:alert-triangle',
+      })
+    }
+  })
+}
+
+const setUserStatus = (uid: number, is_verified: boolean) => {
+  useFetchWrapped<
+    {
+      to_user_id: number
+      is_verify: boolean
+    } & AuthedRequest,
+    BaseResponse<{
+      status: number // 1: success, 0: failed
+    }>
+  >('App.User_User.SetUserVerify', {
+    token: loginState.token!,
+    user_id: loginState.user.id!,
+    to_user_id: uid,
+    is_verify: is_verified,
+  }).then((res) => {
+    if (res.ret === 200 && res.data.status === 1) {
+      toast.add({
+        title: '操作成功',
+        description: `已${is_verified ? '启用' : '停用'}账号`,
+        color: 'green',
+        icon: is_verified ? 'tabler:shield-check' : 'tabler:cancel',
+      })
+      refreshUsersData()
+    } else {
+      toast.add({
+        title: '操作失败',
+        description: res.msg || '未知错误',
+        color: 'red',
+        icon: 'tabler:alert-triangle',
+      })
+    }
+  })
+}
+
+const userBalanceEditing = ref(false)
+const userBalanceState = reactive({
+  expire_time: dayjs().add(1, 'month').unix() * 1000,
+  remain_count: 1800,
+  request_type: '',
+})
+
+const isActivateBalance = ref(false)
+
+const isBalanceEditModalOpen = computed({
+  get: () => !!viewingUser && userBalanceEditing.value,
+  set: (val) => {
+    userBalanceEditing.value = val
+    if (!val) {
+      userBalanceState.expire_time = dayjs().add(1, 'month').unix() * 1000
+      userBalanceState.remain_count = 1800
+    }
+  },
+})
+
+const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
+  useFetchWrapped<
+    {
+      to_user_id: number
+      request_type: ServiceTag
+      expire_time: number
+      remain_count: number
+    } & AuthedRequest,
+    BaseResponse<{
+      code: number // 1: success, 0: failed
+      data_id?: number
+    }>
+  >(
+    isActivate ? 'App.User_UserBalance.Insert' : 'App.User_UserBalance.Update',
+    {
+      token: loginState.token!,
+      user_id: loginState.user.id!,
+      to_user_id: viewingUser.value?.id || 0,
+      request_type: tag,
+      expire_time: userBalanceState.expire_time / 1000,
+      remain_count: userBalanceState.remain_count,
+    }
+  )
+    .then((res) => {
+      if (res.ret === 200 && (res.data.code === 1 || !!res.data.data_id)) {
+        toast.add({
+          title: '操作成功',
+          description: `已${isActivate ? '开通' : '更新'}服务`,
+          color: 'green',
+          icon: 'tabler:check',
+        })
+      } else {
+        toast.add({
+          title: '操作失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'tabler:alert-triangle',
+        })
+      }
+    })
+    .catch((err) => {
+      toast.add({
+        title: '操作失败',
+        description: err.message || '未知错误',
+        color: 'red',
+        icon: 'tabler:alert-triangle',
+      })
+    })
+    .finally(() => {
+      refreshUserBalances()
+      isBalanceEditModalOpen.value = false
+    })
+}
+</script>
+
+<template>
+  <LoginNeededContent need-admin>
+    <div class="p-4">
+      <BubbleTitle
+        bubble-color="amber-500"
+        subtitle="User Management"
+        title="用户管理"
+      >
+        <template #action>
+          <UButton
+            color="amber"
+            icon="tabler:reload"
+            variant="soft"
+            @click="refreshUsersData"
+          >
+            刷新
+          </UButton>
+        </template>
+      </BubbleTitle>
+      <GradientDivider
+        line-gradient-from="amber"
+        line-gradient-to="amber"
+      />
+      <div>
+        <div class="flex justify-between items-center w-full py-3">
+          <div class="flex items-center gap-1.5">
+            <span class="text-sm leading-0">每页显示:</span>
+            <USelect
+              v-model="pageCount"
+              :options="[5, 10, 15, 20]"
+              class="me-2 w-20"
+              size="xs"
+            />
+          </div>
+
+          <div class="flex gap-1.5 items-center">
+            <USelectMenu
+              v-model="state_filter"
+              :options="[
+                {
+                  label: '正常账号',
+                  value: 'verified',
+                  icon: 'tabler:user-check',
+                },
+                {
+                  label: '停用账号',
+                  value: 'unverified',
+                  icon: 'tabler:user-cancel',
+                },
+              ]"
+              :ui-menu="{
+                width: 'w-fit',
+                option: { size: 'text-xs', icon: { base: 'w-4 h-4' } },
+              }"
+              size="xs"
+              value-attribute="value"
+            />
+            <USelectMenu
+              v-model="selectedColumns"
+              :options="columns.filter((row) => !['actions'].includes(row.key))"
+              :ui-menu="{
+                width: 'w-fit',
+                option: { size: 'text-xs', icon: { base: 'w-4 h-4' } },
+              }"
+              multiple
+            >
+              <UButton
+                color="gray"
+                icon="tabler:layout-columns"
+                size="xs"
+              >
+                显示列
+              </UButton>
+            </USelectMenu>
+          </div>
+        </div>
+        <UTable
+          :columns="selectedColumns"
+          :loading="usersDataStatus === 'pending'"
+          :progress="{ color: 'amber', animation: 'carousel' }"
+          :rows="usersData?.data.items"
+          class="border dark:border-neutral-800 rounded-md"
+        >
+          <template #username-data="{ row }">
+            <span
+              :class="{
+                'font-semibold text-amber-500': row.id === loginState.user.id,
+              }"
+            >
+              {{ row.username }}
+              <span class="text-xs">
+                {{ row.id === loginState.user.id ? ' (本账号)' : '' }}
+              </span>
+            </span>
+          </template>
+          <template #avatar-data="{ row }">
+            <UAvatar
+              :alt="row.username.toUpperCase()"
+              :src="row.avatar"
+              size="sm"
+            />
+          </template>
+          <template #sex-data="{ row }">
+            {{ row.sex === 0 ? '' : row.sex === 1 ? '男' : '女' }}
+          </template>
+          <template #actions-data="{ row }">
+            <UDropdown :items="items(row)">
+              <UButton
+                color="gray"
+                icon="tabler:dots"
+                variant="ghost"
+              />
+            </UDropdown>
+          </template>
+        </UTable>
+        <div class="flex justify-end py-3.5">
+          <UPagination
+            v-if="(usersData?.data.total || -1) > 0"
+            v-model="page"
+            :page-count="pageCount"
+            :total="usersData?.data.total || 0"
+          />
+        </div>
+      </div>
+    </div>
+    <USlideover
+      v-model="isSlideOpen"
+      :ui="{ width: 'w-screen max-w-3xl' }"
+    >
+      <UCard
+        :ui="{
+          body: { base: 'flex-1 overflow-y-auto' },
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+        class="flex flex-col overflow-hidden"
+      >
+        <template #header>
+          <UButton
+            class="flex absolute end-5 top-5 z-10"
+            color="gray"
+            icon="tabler:x"
+            padded
+            size="sm"
+            square
+            variant="ghost"
+            @click="closeSlide"
+          />
+          服务和用量管理
+          <p class="text-sm font-medium text-primary">
+            {{ viewingUser?.username }} (UID:{{ viewingUser?.id }})
+          </p>
+        </template>
+
+        <div class="">
+          <UDivider
+            label="服务用量管理"
+            class="mb-4"
+            :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
+          />
+
+          <div class="border dark:border-neutral-700 rounded-md">
+            <UTable
+              :columns="[
+                { key: 'service', label: '服务' },
+                { key: 'status', label: '状态' },
+                { key: 'create_time', label: '开通时间' },
+                { key: 'expire_time', label: '过期时间' },
+                { key: 'remain_count', label: '余量(秒)' },
+                { key: 'actions' },
+              ]"
+              :loading="userBalancesStatus === 'pending'"
+              :rows="[
+                ...systemServices,
+                // 如果 userBalances?.data.items 具有 systemServices 中没有的服务，则添加到列表中
+                ...(userBalances?.data.items
+                  .filter(
+                    (row) =>
+                      !systemServices.find((s) => s.tag === row.request_type)
+                  )
+                  .map((row) => ({
+                    tag: row.request_type,
+                    name: row.request_type,
+                  })) || []),
+              ]"
+            >
+              <template #service-data="{ row }: { row: ServiceType }">
+                {{
+                  systemServices.find((s) => s.tag === row.tag)?.name || row.tag
+                }}
+              </template>
+
+              <template #status-data="{ row }">
+                <UBadge
+                  v-if="!getBalanceByTag(row.tag)"
+                  color="gray"
+                  variant="solid"
+                  size="xs"
+                >
+                  未开通
+                </UBadge>
+                <UBadge
+                  v-else-if="
+                    getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
+                  "
+                  color="red"
+                  variant="subtle"
+                  size="xs"
+                >
+                  已过期
+                </UBadge>
+                <UBadge
+                  v-else
+                  color="green"
+                  variant="subtle"
+                  size="xs"
+                >
+                  生效中
+                </UBadge>
+              </template>
+
+              <template #create_time-data="{ row }">
+                <span class="text-xs">
+                  {{
+                    !!getBalanceByTag(row.tag)
+                      ? dayjs(
+                          getBalanceByTag(row.tag)!.create_time * 1000
+                        ).format('YYYY-MM-DD HH:mm:ss')
+                      : '未开通'
+                  }}
+                </span>
+              </template>
+
+              <template #expire_time-data="{ row }">
+                <span class="text-xs">
+                  {{
+                    !!getBalanceByTag(row.tag)
+                      ? dayjs(
+                          getBalanceByTag(row.tag)!.expire_time * 1000
+                        ).format('YYYY-MM-DD HH:mm:ss')
+                      : '未开通'
+                  }}
+                </span>
+              </template>
+
+              <template #remain_count-data="{ row }">
+                <span class="text-sm">
+                  {{ getBalanceByTag(row.tag)?.remain_count || 0 }}
+                </span>
+              </template>
+
+              <template #actions-data="{ row }">
+                <UButton
+                  v-if="!getBalanceByTag(row.tag)"
+                  color="green"
+                  icon="tabler:clock-check"
+                  size="xs"
+                  variant="soft"
+                  @click="
+                    () => {
+                      isActivateBalance = true
+                      userBalanceEditing = true
+                      userBalanceState.request_type = row.tag
+                    }
+                  "
+                >
+                  开通
+                </UButton>
+                <UButton
+                  v-else-if="
+                    getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
+                  "
+                  color="teal"
+                  icon="tabler:clock-plus"
+                  size="xs"
+                  variant="soft"
+                  @click="
+                    () => {
+                      isActivateBalance = false
+                      userBalanceEditing = true
+                      userBalanceState.request_type = row.tag
+                    }
+                  "
+                >
+                  延续
+                </UButton>
+                <UButton
+                  v-else
+                  color="sky"
+                  icon="tabler:rotate-clockwise"
+                  size="xs"
+                  variant="soft"
+                  @click="
+                    () => {
+                      isActivateBalance = false
+                      userBalanceEditing = true
+                      userBalanceState.request_type = row.tag
+                      userBalanceState.expire_time =
+                        getBalanceByTag(row.tag)!.expire_time * 1000
+                      userBalanceState.remain_count = getBalanceByTag(
+                        row.tag
+                      )!.remain_count
+                    }
+                  "
+                >
+                  更新
+                </UButton>
+              </template>
+            </UTable>
+
+            <UModal
+              v-model="isBalanceEditModalOpen"
+              :ui="{ width: 'w-xl' }"
+            >
+              <UCard
+                :ui="{
+                  ring: '',
+                  divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+                }"
+              >
+                <template #header>
+                  <!-- 为 {{ viewingUser!.username }}
+                <span class="text-primary">{{ isActivateBalance ? '开通' : '续期' }}</span>
+                服务：
+                {{
+                  systemServices.find(
+                    (s) => s.tag === userBalanceState.request_type
+                  )?.name || userBalanceState.request_type
+                }} -->
+                  <div class="flex justify-between items-center gap-1">
+                    <h1 class="text-sm font-medium">
+                      {{ isActivateBalance ? '开通' : '续期' }}
+                      {{
+                        systemServices.find(
+                          (s) => s.tag === userBalanceState.request_type
+                        )?.name || userBalanceState.request_type
+                      }}
+                      服务
+                    </h1>
+                    <p
+                      class="text-xs text-indigo-500 inline-flex items-center gap-1"
+                    >
+                      <UIcon
+                        name="tabler:user-circle"
+                        class="text-base"
+                      />
+                      {{ viewingUser!.username }}
+                    </p>
+                  </div>
+                </template>
+
+                <div class="flex justify-between gap-4">
+                  <UFormGroup
+                    label="到期时间"
+                    class="flex-1"
+                  >
+                    <UPopover :popper="{ placement: 'bottom-start' }">
+                      <UButton
+                        block
+                        variant="soft"
+                        icon="i-heroicons-calendar-days-20-solid"
+                        :label="
+                          dayjs(userBalanceState.expire_time).format(
+                            'YYYY-MM-DD HH:mm'
+                          )
+                        "
+                      />
+
+                      <template #panel="{ close }">
+                        <DatePicker
+                          v-model="userBalanceState.expire_time"
+                          locale="cn"
+                          mode="dateTime"
+                          title-position="left"
+                          is-required
+                          is24hr
+                          @close="close"
+                        />
+                      </template>
+                    </UPopover>
+                  </UFormGroup>
+                  <UFormGroup
+                    label="服务时长(秒)"
+                    class="flex-1"
+                  >
+                    <UInput v-model="userBalanceState.remain_count" />
+                  </UFormGroup>
+                </div>
+
+                <template #footer>
+                  <div class="flex items-center justify-end gap-2">
+                    <UButton
+                      color="gray"
+                      size="sm"
+                      variant="ghost"
+                      @click="isBalanceEditModalOpen = false"
+                    >
+                      取消
+                    </UButton>
+                    <UButton
+                      color="primary"
+                      icon="tabler:check"
+                      size="sm"
+                      @click="
+                        udpateBalance(
+                          userBalanceState.request_type as ServiceTag,
+                          isActivateBalance
+                        )
+                      "
+                    >
+                      {{ isActivateBalance ? '开通' : '续期' }}
+                    </UButton>
+                  </div>
+                </template>
+              </UCard>
+            </UModal>
+          </div>
+
+          <UDivider
+            label="数字人权限管理"
+            class="my-4"
+            :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
+          />
+
+          <div class="border dark:border-neutral-700 rounded-md">
+            <UTable
+              :columns="[
+                { key: 'name', label: '名称' },
+                { key: 'digital_human_id', label: '本地ID' },
+                { key: 'model_id', label: '上游ID' },
+                { key: 'actions' },
+              ]"
+              :loading="digitalHumansDataStatus === 'pending'"
+              :rows="digitalHumansData?.data.items"
+            >
+              <template #actions-data="{ row }">
+                <UButton
+                  color="gray"
+                  icon="tabler:cancel"
+                  size="xs"
+                  variant="ghost"
+                  @click="
+                    revokeDigitalHuman(
+                      viewingUser?.id || 0,
+                      row.digital_human_id
+                    )
+                  "
+                >
+                  撤销授权
+                </UButton>
+              </template>
+            </UTable>
+          </div>
+          <div class="flex justify-between py-3.5">
+            <UButton
+              icon="tabler:plus"
+              size="xs"
+              @click="isDigitalSelectorOpen = true"
+            >
+              新增授权
+            </UButton>
+            <UPagination
+              v-if="(digitalHumansData?.data.total || -1) > 0"
+              v-model="dhPage"
+              :page-count="dhPageCount"
+              :total="digitalHumansData?.data.total || 0"
+            />
+          </div>
+        </div>
+      </UCard>
+      <ModalDigitalHumanSelect
+        :disabled-digital-human-ids="
+          digitalHumansData?.data.items.map((d) => d.model_id)
+        "
+        :is-open="isDigitalSelectorOpen"
+        default-tab="system"
+        multiple
+        @close="isDigitalSelectorOpen = false"
+        @select="
+          (digitalHumans) =>
+            onDigitalHumansSelected(digitalHumans as DigitalHumanItem[])
+        "
+      />
+    </USlideover>
+  </LoginNeededContent>
+</template>
+
+<style scoped></style>

app/pages/generation/avatar-models.vue

@@ -0,0 +1,518 @@
+<script lang="ts" setup>
+import { number, object, string, type InferType } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+
+const toast = useToast()
+const loginState = useLoginState()
+
+const data_layout = ref<'grid' | 'list'>('grid')
+const pagination = reactive({
+  page: 1,
+  pageSize: 14,
+})
+const showSystemAvatar = ref(false)
+watchEffect(() => {
+  if (showSystemAvatar.value) {
+    data_layout.value = 'list'
+  }
+})
+
+const {
+  data: userAvatarList,
+  status: userAvatarStatus,
+  refresh: refreshUserAvatarList,
+} = 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: pagination.page,
+      perpage: pagination.pageSize,
+    }),
+  {
+    watch: [pagination, showSystemAvatar],
+  }
+)
+
+const {
+  data: systemAvatarList,
+  status: systemAvatarStatus,
+  refresh: refreshSystemAvatarList,
+} = useAsyncData(
+  'sys-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: pagination.page,
+      perpage: pagination.pageSize,
+    }),
+  {
+    watch: [pagination, showSystemAvatar],
+  }
+)
+
+const {
+  data: avatarTrainList,
+  status: avatarTrainStatus,
+  refresh: refreshAvatarTrainList,
+} = useAsyncData(
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest,
+      BaseResponse<PagedData<DigitalHumanTrainItem>>
+    >('App.Digital_Train.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: 1,
+      perpage: 20,
+    }),
+  {}
+)
+
+const onSystemAvatarDelete = (row: DigitalHumanItem) => {
+  useFetchWrapped<
+    { digital_human_id: number } & AuthedRequest,
+    BaseResponse<{ code: 0 | 1 }>
+  >('App.Digital_Human.Delete', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    digital_human_id: row.id!,
+  })
+    .then((res) => {
+      if (res.ret === 200 && res.data.code === 1) {
+        toast.add({
+          title: '删除成功',
+          description: '数字人已删除',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+        refreshSystemAvatarList()
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .catch(() => {
+      toast.add({
+        title: '删除失败',
+        description: '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+}
+
+const columns = [
+  {
+    key: 'avatar',
+    label: '图片',
+  },
+  {
+    key: 'name',
+    label: '名称',
+  },
+  {
+    key: 'model_id',
+    label: 'ID',
+  },
+  {
+    key: 'type',
+    label: '来源',
+  },
+  {
+    key: 'description',
+    label: '备注',
+  },
+  {
+    key: 'actions',
+  },
+]
+
+const sourceTypeList = [
+  { label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
+  { label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
+  { label: 'xsh_fh', value: 3, color: 'purple' }, // 硅基（泛化数字人）
+  { label: 'xsh_bb', value: 4, color: 'indigo' }, // 百度小冰
+]
+
+const isCreateSlideOpen = ref(false)
+const isTrainCreatorOpen = ref(false)
+
+const createAvatarState = reactive({
+  name: '',
+  description: '',
+  model_id: undefined,
+  avatar: '',
+  type: 2,
+})
+
+const createAvatarSchema = object({
+  name: string().required('请输入名称'),
+  description: string().required('请输入备注'),
+  model_id: number().required('请输入ID'),
+  avatar: string().required('请上传图片'),
+  type: number().required('请选择类型'),
+})
+
+type CreateAvatarSchema = InferType<typeof createAvatarSchema>
+
+const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
+  useFetchWrapped<
+    CreateAvatarSchema & AuthedRequest,
+    BaseResponse<{ digital_human_id: number }>
+  >('App.Digital_Human.Create', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    name: event.data.name,
+    description: event.data.description,
+    model_id: event.data.model_id,
+    avatar: createAvatarState.avatar,
+    type: event.data.type,
+  })
+    .then((res) => {
+      if (res.ret === 200 && res.data.digital_human_id) {
+        toast.add({
+          title: '创建成功',
+          description: '数字人已创建',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+        refreshSystemAvatarList()
+        showSystemAvatar.value = true
+        isCreateSlideOpen.value = false
+      } else {
+        toast.add({
+          title: '创建失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .catch(() => {
+      toast.add({
+        title: '创建失败',
+        description: '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+}
+
+const onAvatarUpload = async (files: FileList) => {
+  const file = files[0]
+  try {
+    const url = await useFileGo(file, 'material')
+    createAvatarState.avatar = url
+    toast.add({
+      title: '上传文件成功',
+      description: '文件已上传',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+  } catch {
+    toast.add({
+      title: '上传文件失败',
+      description: '请重试',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="h-full">
+    <div class="p-4 pb-0">
+      <BubbleTitle
+        title="数字讲师管理"
+        subtitle="Avatars"
+      >
+        <template #action>
+          <UButton
+            color="gray"
+            variant="soft"
+            :label="showSystemAvatar ? '显示用户数字人' : '显示系统数字人'"
+            @click="showSystemAvatar = !showSystemAvatar"
+          />
+          <UButton
+            :icon="
+              data_layout === 'grid'
+                ? 'tabler:layout-list'
+                : 'tabler:layout-grid'
+            "
+            variant="soft"
+            color="gray"
+            @click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
+            :label="data_layout === 'grid' ? '列表视图' : '宫格视图'"
+          />
+          <UButton
+            v-if="loginState.user.auth_code === 2"
+            color="amber"
+            variant="soft"
+            icon="tabler:user-cog"
+            label="定制管理"
+            :to="'/generation/admin/digital-human-train'"
+          />
+          <UButton
+            color="blue"
+            variant="soft"
+            icon="tabler:user-plus"
+            label="定制数字人"
+            @click="isTrainCreatorOpen = true"
+          />
+          <UButton
+            v-if="loginState.user.auth_code === 2"
+            color="amber"
+            variant="soft"
+            icon="tabler:plus"
+            label="创建数字人"
+            @click="isCreateSlideOpen = true"
+          />
+        </template>
+      </BubbleTitle>
+      <GradientDivider />
+    </div>
+    <div class="p-4">
+      <UAlert
+        v-if="showSystemAvatar && loginState.user.auth_code === 2"
+        icon="tabler:user-shield"
+        title="正在显示系统数字人"
+        description="当前正在显示和管理系统数字人，仅管理员可见"
+        class="mb-4"
+      />
+      <div
+        v-if="data_layout === 'grid'"
+        class="grid grid-cols-7 gap-4"
+      >
+        <div
+          v-for="(avatar, k) in showSystemAvatar
+            ? systemAvatarList?.data.items
+            : userAvatarList?.data.items"
+          :key="avatar.model_id || k"
+          class="relative rounded-lg shadow overflow-hidden w-full aspect-[9/16] group"
+        >
+          <NuxtImg
+            :src="avatar.avatar"
+            class="w-full h-full object-cover"
+          />
+          <div
+            class="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/50 to-transparent flex gap-2"
+          >
+            <UBadge
+              color="white"
+              variant="solid"
+              icon="tabler:user-screen"
+            >
+              {{ avatar.name }}
+            </UBadge>
+            <template
+              v-for="(t, i) in sourceTypeList"
+              :key="i"
+            >
+              <UBadge
+                v-if="t.value === avatar.type"
+                variant="subtle"
+                :color="t.color"
+                :label="t.label"
+              />
+            </template>
+          </div>
+          <div
+            class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity"
+          >
+            <UButtonGroup>
+              <UButton
+                color="black"
+                icon="tabler:download"
+                label="下载图片"
+                @click="
+                  () => {
+                    const { download } = useDownload(
+                      avatar.avatar,
+                      `数字人_${avatar.name}.png`
+                    )
+                    download()
+                  }
+                "
+              />
+            </UButtonGroup>
+            <span
+              class="text-xs font-medium text-neutral-400 dark:text-neutral-300 pt-4"
+            >
+              ID: {{ avatar.model_id }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <div class="flex flex-col gap-4">
+          <UTable
+            :rows="
+              showSystemAvatar
+                ? systemAvatarList?.data.items
+                : userAvatarList?.data.items
+            "
+            :columns="columns"
+            :loading="userAvatarStatus === 'pending'"
+            :progress="{ color: 'amber', animation: 'carousel' }"
+            class="border dark:border-neutral-800 rounded-md"
+          >
+            <template #avatar-data="{ row }">
+              <NuxtImg
+                :src="row.avatar"
+                class="h-16 aspect-[9/16] rounded-lg"
+              />
+            </template>
+            <template #type-data="{ row }">
+              <template
+                v-for="(t, i) in sourceTypeList"
+                :key="i"
+              >
+                <UBadge
+                  v-if="t.value === row.type"
+                  variant="subtle"
+                  :color="t.color"
+                  :label="t.label"
+                />
+              </template>
+            </template>
+            <template #actions-data="{ row }">
+              <div class="flex gap-2">
+                <UButton
+                  color="gray"
+                  icon="tabler:download"
+                  label="下载图片"
+                  variant="soft"
+                  size="xs"
+                  @click="
+                    () => {
+                      const { download } = useDownload(
+                        row.avatar,
+                        `数字人_${row.name}.png`
+                      )
+                      download()
+                    }
+                  "
+                />
+                <UButton
+                  color="red"
+                  icon="tabler:trash"
+                  label="删除"
+                  variant="soft"
+                  size="xs"
+                  @click="onSystemAvatarDelete(row)"
+                />
+              </div>
+            </template>
+          </UTable>
+        </div>
+      </div>
+      <div class="flex justify-end mt-4">
+        <UPagination
+          v-model="pagination.page"
+          :max="9"
+          :page-count="pagination.pageSize"
+          :total="userAvatarList?.data.total || 0"
+        />
+      </div>
+    </div>
+
+    <USlideover v-model="isCreateSlideOpen">
+      <UCard
+        :ui="{
+          body: { base: 'flex-1' },
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+        class="flex flex-col flex-1"
+      >
+        <template #header>
+          <UButton
+            class="flex absolute end-5 top-5 z-10"
+            color="gray"
+            icon="tabler:x"
+            padded
+            size="sm"
+            square
+            variant="ghost"
+            @click="isCreateSlideOpen = false"
+          />
+          创建系统数字人
+        </template>
+
+        <UForm
+          class="space-y-3"
+          :schema="createAvatarSchema"
+          :state="createAvatarState"
+          @submit="onCreateAvatarSubmit"
+        >
+          <UFormGroup
+            label="名称"
+            name="name"
+          >
+            <UInput v-model="createAvatarState.name" />
+          </UFormGroup>
+          <UFormGroup
+            label="备注"
+            name="description"
+          >
+            <UInput v-model="createAvatarState.description" />
+          </UFormGroup>
+          <UFormGroup
+            label="ID"
+            name="model_id"
+          >
+            <UInput v-model="createAvatarState.model_id" />
+          </UFormGroup>
+          <UFormGroup
+            label="图片"
+            name="avatar"
+          >
+            <UniFileDnD
+              accept="image/png,image/jpeg"
+              @change="onAvatarUpload"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="类型"
+            name="type"
+          >
+            <USelectMenu
+              v-model="createAvatarState.type"
+              value-attribute="value"
+              :options="sourceTypeList"
+            />
+          </UFormGroup>
+          <UFormGroup class="flex justify-end pt-4">
+            <UButton
+              type="submit"
+              color="primary"
+              label="创建"
+            />
+          </UFormGroup>
+        </UForm>
+      </UCard>
+    </USlideover>
+
+    <!-- 数字人定制对话框 -->
+    <DigitalHumanTrainCreator v-model="isTrainCreatorOpen" />
+  </div>
+</template>
+
+<style scoped></style>

app/pages/generation/course.vue

@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import ModalAuthentication from '~/components/ModalAuthentication.vue'
+import SlideCreateCourse from '~/components/SlideCreateCourse.vue'
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
+
+const toast = useToast()
+const modal = useModal()
+const slide = useSlideover()
+const loginState = useLoginState()
+
+const deletePending = ref(false)
+const page = ref(1)
+
+const { data: courseList, refresh: refreshCourseList } = useAsyncData(
+  () =>
+    useFetchWrapped<
+      req.gen.CourseGenList & AuthedRequest,
+      BaseResponse<PagedData<resp.gen.CourseGenItem>>
+    >('App.Digital_Convert.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: page.value,
+      perpage: 15,
+    }),
+  {
+    watch: [page],
+  }
+)
+
+const onCreateCourseClick = () => {
+  slide.open(SlideCreateCourse, {
+    onSuccess: () => {
+      refreshCourseList()
+    },
+  })
+}
+
+const onCourseDelete = (task_id: string) => {
+  if (!task_id) return
+  deletePending.value = true
+  useFetchWrapped<
+    req.gen.CourseGenDelete & AuthedRequest,
+    BaseResponse<resp.gen.CourseGenDelete>
+  >('App.Digital_Convert.Delete', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    to_user_id: loginState.user.id,
+    task_id,
+  })
+    .then((res) => {
+      if (res.ret === 200) {
+        toast.add({
+          title: '删除成功',
+          description: '已删除任务记录',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .finally(() => {
+      deletePending.value = false
+      refreshCourseList()
+    })
+}
+
+const beforeLeave = (el: any) => {
+  el.style.width = `${el.offsetWidth}px`
+  el.style.height = `${el.offsetHeight}px`
+}
+
+const leave = (el: any, done: Function) => {
+  el.style.position = 'absolute'
+  el.style.transition = 'none' // 取消过渡动画
+  el.style.opacity = 0 // 立即隐藏元素
+  done()
+}
+
+onMounted(() => {
+  const i = setInterval(refreshCourseList, 1000 * 5)
+  onBeforeUnmount(() => clearInterval(i))
+})
+</script>
+
+<template>
+  <div>
+    <div class="p-4 pb-0">
+      <BubbleTitle
+        subtitle="VIDEOS"
+        title="我的微课视频"
+      >
+        <template #action>
+          <UButton
+            :trailing="false"
+            color="primary"
+            icon="i-tabler-plus"
+            label="新建微课"
+            size="md"
+            variant="solid"
+            @click="
+              () => {
+                if (!loginState.is_logged_in) {
+                  modal.open(ModalAuthentication)
+                  return
+                }
+                onCreateCourseClick()
+              }
+            "
+          />
+        </template>
+      </BubbleTitle>
+      <GradientDivider />
+    </div>
+    <Transition name="loading-screen">
+      <div
+        v-if="courseList?.data.items.length === 0"
+        class="w-full py-20 flex flex-col justify-center items-center gap-2"
+      >
+        <Icon
+          class="text-7xl text-neutral-300 dark:text-neutral-700"
+          name="i-tabler-photo-hexagon"
+        />
+        <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
+      </div>
+      <div
+        v-else
+        class="p-4"
+      >
+        <div
+          class="relative grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5 gap-4"
+        >
+          <TransitionGroup
+            name="card"
+            @beforeLeave="beforeLeave"
+            @leave="leave"
+          >
+            <AigcGenerationCGTaskCard
+              v-for="(course, index) in courseList?.data.items"
+              :key="course.task_id || 'unknown' + index"
+              :course="course"
+              @delete="(task_id: string) => onCourseDelete(task_id)"
+            />
+          </TransitionGroup>
+        </div>
+        <div class="flex justify-end mt-4">
+          <UPagination
+            v-model="page"
+            :max="9"
+            :page-count="16"
+            :total="courseList?.data.total || 0"
+          />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped></style>

app/pages/generation/green-screen.vue

@@ -0,0 +1,215 @@
+<script lang="ts" setup>
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
+import GBTaskCard from '~/components/aigc/generation/GBTaskCard.vue'
+import { useTourState } from '~/composables/useTourState'
+import SlideCreateCourseGreen from '~/components/SlideCreateCourseGreen.vue'
+
+const route = useRoute()
+const slide = useSlideover()
+const toast = useToast()
+const loginState = useLoginState()
+const tourState = useTourState()
+
+const page = ref(1)
+const pageCount = ref(15)
+const searchInput = ref('')
+const debounceSearch = refDebounced(searchInput, 1000)
+
+watch(debounceSearch, () => (page.value = 1))
+
+const { data: videoList, refresh: refreshVideoList } = useAsyncData(
+  () =>
+    useFetchWrapped<
+      req.gen.GBVideoList & AuthedRequest,
+      BaseResponse<PagedData<GBVideoItem>>
+    >('App.Digital_VideoTask.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: page.value,
+      perpage: pageCount.value,
+      title: debounceSearch.value,
+    }),
+  {
+    watch: [page, pageCount, debounceSearch],
+  }
+)
+
+const onCreateCourseGreenClick = () => {
+  slide.open(SlideCreateCourseGreen, {
+    onSuccess: () => {
+      refreshVideoList()
+    },
+  })
+}
+
+const onCourseGreenDelete = (task: GBVideoItem) => {
+  if (!task.task_id) return
+  useFetchWrapped<
+    req.gen.GBVideoDelete & AuthedRequest,
+    BaseResponse<resp.gen.GBVideoDelete>
+  >('App.Digital_VideoTask.Delete', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    task_id: task.task_id,
+  }).then((res) => {
+    if (res.data.code === 1) {
+      refreshVideoList()
+      toast.add({
+        title: '删除成功',
+        description: '已删除任务记录',
+        color: 'green',
+        icon: 'i-tabler-check',
+      })
+    } else {
+      toast.add({
+        title: '删除失败',
+        description: res.msg || '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    }
+  })
+}
+
+const beforeLeave = (el: any) => {
+  el.style.width = `${el.offsetWidth}px`
+  el.style.height = `${el.offsetHeight}px`
+}
+
+const leave = (el: any, done: Function) => {
+  el.style.position = 'absolute'
+  el.style.transition = 'none' // 取消过渡动画
+  el.style.opacity = 0 // 立即隐藏元素
+  done()
+}
+
+onMounted(() => {
+  const i = setInterval(refreshVideoList, 1000 * 5)
+  onBeforeUnmount(() => clearInterval(i))
+
+  const driver = useDriver({
+    showProgress: true,
+    animate: true,
+    smoothScroll: true,
+    disableActiveInteraction: true,
+    popoverOffset: 12,
+    progressText: '{{current}} / {{total}}',
+    prevBtnText: '上一步',
+    nextBtnText: '下一步',
+    doneBtnText: '完成',
+    steps: [
+      {
+        element: '#button-create',
+        popover: {
+          title: '新建视频',
+          description: '点击这里开始新建绿幕视频',
+        },
+      },
+      {
+        element: '#input-search',
+        popover: {
+          title: '搜索生成记录',
+          description: '在这里输入视频标题，可以搜索符合条件的生成记录',
+        },
+      },
+    ],
+  })
+
+  tourState.autoDriveTour(route.fullPath, driver)
+})
+</script>
+
+<template>
+  <div class="h-full">
+    <div class="p-4 pb-0">
+      <BubbleTitle
+        :subtitle="!debounceSearch ? 'GB VIDEOS' : 'SEARCH...'"
+        :title="
+          !debounceSearch
+            ? '我的绿幕视频'
+            : `标题搜索：${debounceSearch.toLocaleUpperCase()}`
+        "
+      >
+        <template #action>
+          <UButtonGroup size="md">
+            <UInput
+              id="input-search"
+              v-model="searchInput"
+              :autofocus="false"
+              :ui="{ icon: { trailing: { pointer: '' } } }"
+              autocomplete="off"
+              placeholder="标题搜索"
+              variant="outline"
+            >
+              <template #trailing>
+                <UButton
+                  v-show="searchInput !== ''"
+                  :padded="false"
+                  color="gray"
+                  icon="i-tabler-x"
+                  variant="link"
+                  @click="searchInput = ''"
+                />
+              </template>
+            </UInput>
+          </UButtonGroup>
+          <UButton
+            id="button-create"
+            :trailing="false"
+            color="primary"
+            icon="i-tabler-plus"
+            label="新建"
+            size="md"
+            variant="solid"
+            @click="onCreateCourseGreenClick"
+          />
+        </template>
+      </BubbleTitle>
+      <GradientDivider />
+    </div>
+
+    <Transition name="loading-screen">
+      <div
+        v-if="videoList?.data.items.length === 0"
+        class="w-full py-20 flex flex-col justify-center items-center gap-2"
+      >
+        <Icon
+          class="text-7xl text-neutral-300 dark:text-neutral-700"
+          name="i-tabler-photo-hexagon"
+        />
+        <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
+      </div>
+      <div v-else>
+        <div class="p-4">
+          <div
+            class="relative grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5 gap-4"
+          >
+            <TransitionGroup
+              name="card"
+              @beforeLeave="beforeLeave"
+              @leave="leave"
+            >
+              <GBTaskCard
+                v-for="(v, i) in videoList?.data.items"
+                :key="v.task_id"
+                :video="v"
+                @delete="(v) => onCourseGreenDelete(v)"
+              />
+            </TransitionGroup>
+          </div>
+          <div class="flex justify-end mt-4">
+            <UPagination
+              v-model="page"
+              :max="9"
+              :page-count="pageCount"
+              :total="videoList?.data.total || 0"
+            />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped></style>

app/pages/generation/materials.vue

@@ -0,0 +1,424 @@
+<script lang="ts" setup>
+import type { FormSubmitEvent } from '#ui/types'
+import { number, object, string, type InferType } from 'yup'
+
+const loginState = useLoginState()
+const toast = useToast()
+
+const isCreateSystemTitlesSlideActive = ref(false)
+const isUserTitlesRequestModalActive = ref(false)
+
+const systemPagination = reactive({
+  page: 1,
+  pageSize: 15,
+})
+
+const userPagination = reactive({
+  page: 1,
+  pageSize: 15,
+})
+
+const {
+  data: systemTitlesTemplate,
+  status: systemTitlesTemplateStatus,
+  refresh: refreshSystemTitlesTemplate,
+} = useAsyncData(
+  'systemTitlesTemplate',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest,
+      BaseResponse<PagedData<TitlesTemplate>>
+    >('App.Digital_Titles.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      page: systemPagination.page,
+      perpage: systemPagination.pageSize,
+    }),
+  {
+    watch: [systemPagination],
+  }
+)
+
+const {
+  data: userTitlesTemplate,
+  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: userPagination.page,
+      perpage: userPagination.pageSize,
+      process_status: 1,
+    }),
+  {
+    watch: [userPagination],
+  }
+)
+
+const { data: userTitlesRequests, refresh: refreshUserTitlesRequests } =
+  useAsyncData('userTitlesTemplateRequests', () =>
+    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,
+      process_status: 0,
+    })
+  )
+
+const userTitlesSchema = object({
+  title_id: number().required().moreThan(0, '模板 ID 无效'),
+  title: string().required('请填写课程名称'),
+  description: string().required('请填写主讲人名字'),
+  remark: string().optional(),
+})
+
+type UserTitlesSchema = InferType<typeof userTitlesSchema>
+
+const userTitlesState = reactive({
+  title_id: 0,
+  title: '',
+  description: '',
+  remark: '',
+})
+
+const onUserTitlesRequest = (titles: TitlesTemplate) => {
+  userTitlesState.title_id = titles.id
+  isUserTitlesRequestModalActive.value = true
+}
+
+const onSystemTitlesDelete = (titles: TitlesTemplate) => {
+  useFetchWrapped<
+    { title_id: number } & AuthedRequest,
+    BaseResponse<{ code: 0 | 1 }>
+  >('App.Digital_Titles.Delete', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    title_id: titles.id,
+  })
+    .then((res) => {
+      if (res.ret === 200 && res.data.code === 1) {
+        toast.add({
+          title: '删除成功',
+          description: '已删除系统片头模板',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .catch((error) => {
+      toast.add({
+        title: '删除失败',
+        description: error instanceof Error ? error.message : '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+    .finally(() => {
+      systemPagination.page = 1
+      refreshSystemTitlesTemplate()
+    })
+}
+
+const onUserTitlesDelete = (titles: TitlesTemplate) => {
+  useFetchWrapped<
+    Pick<req.gen.TitlesTemplateRequest, 'to_user_id'> & {
+      user_title_id: number
+    } & AuthedRequest,
+    BaseResponse<any>
+  >('App.User_UserTitles.DeleteConn', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    to_user_id: loginState.user.id,
+    user_title_id: titles.id,
+  })
+    .then((res) => {
+      if (res.ret === 200) {
+        toast.add({
+          title: '删除成功',
+          description: '已删除片头素材',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .finally(() => {
+      userPagination.page = 1
+      refreshUserTitlesTemplate()
+    })
+}
+
+const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
+  useFetchWrapped<
+    req.gen.TitlesTemplateRequest & AuthedRequest,
+    BaseResponse<any>
+  >('App.User_UserTitles.CreateConn', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    to_user_id: loginState.user.id,
+    ...event.data,
+  })
+    .then((res) => {
+      if (res.ret === 200) {
+        userTitlesState.title = ''
+        userTitlesState.description = ''
+        toast.add({
+          title: '提交成功',
+          description: '已提交片头制作请求',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+      } else {
+        toast.add({
+          title: '提交失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .finally(() => {
+      isUserTitlesRequestModalActive.value = false
+      userPagination.page = 1
+      refreshUserTitlesRequests()
+    })
+}
+</script>
+
+<template>
+  <div class="h-full">
+    <div class="p-4 pb-0">
+      <BubbleTitle
+        title="片头片尾模版"
+        subtitle="Materials"
+      >
+        <template #action>
+          <UButton
+            color="amber"
+            icon="tabler:plus"
+            variant="soft"
+            v-if="loginState.user.auth_code === 2"
+            @click="isCreateSystemTitlesSlideActive = true"
+          >
+            创建模板
+          </UButton>
+        </template>
+      </BubbleTitle>
+      <GradientDivider />
+    </div>
+    <div class="p-4">
+      <div
+        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        v-if="systemTitlesTemplateStatus === 'pending'"
+      >
+        <USkeleton
+          class="w-full aspect-video"
+          v-for="i in systemPagination.pageSize"
+          :key="i"
+        />
+      </div>
+      <div
+        v-else-if="systemTitlesTemplate?.data.items.length === 0"
+        class="w-full py-20 flex flex-col justify-center items-center gap-2"
+      >
+        <Icon
+          class="text-7xl text-neutral-300 dark:text-neutral-700"
+          name="i-tabler-photo-hexagon"
+        />
+        <p class="text-sm text-neutral-500 dark:text-neutral-400">
+          暂时没有可用模板
+        </p>
+      </div>
+      <div
+        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        v-else
+      >
+        <AigcGenerationTitlesTemplate
+          v-for="titles in systemTitlesTemplate?.data.items"
+          :data="titles"
+          type="system"
+          :key="titles.id"
+          @user-titles-request="onUserTitlesRequest"
+          @system-titles-delete="onSystemTitlesDelete"
+        />
+      </div>
+    </div>
+    <div class="p-4 pb-0 pt-12">
+      <BubbleTitle
+        title="我的片头片尾"
+        :bubble="false"
+      ></BubbleTitle>
+      <GradientDivider />
+    </div>
+    <div class="p-4 pt-2">
+      <UAlert
+        v-if="userTitlesRequests?.data.total"
+        color="primary"
+        icon="tabler:info-circle"
+        variant="subtle"
+        class="mb-4"
+      >
+        <template #title>
+          有 {{ userTitlesRequests?.data.total }} 个片头正在制作中
+        </template>
+        <template #description>
+          <div class="flex gap-2">
+            <div
+              v-for="titles in userTitlesRequests?.data.items"
+              :key="titles.id"
+            >
+              <p>
+                {{ titles.title }}
+              </p>
+            </div>
+          </div>
+        </template>
+      </UAlert>
+      <div
+        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        v-if="userTitlesTemplateStatus === 'pending'"
+      >
+        <USkeleton
+          class="w-full aspect-video"
+          v-for="i in userPagination.pageSize"
+          :key="i"
+        />
+      </div>
+      <div
+        v-else-if="userTitlesTemplate?.data.items.length === 0"
+        class="w-full py-20 flex flex-col justify-center items-center gap-2"
+      >
+        <Icon
+          class="text-7xl text-neutral-300 dark:text-neutral-700"
+          name="i-tabler-photo-hexagon"
+        />
+        <p class="text-sm text-neutral-500 dark:text-neutral-400">
+          还没有使用过模板
+        </p>
+      </div>
+      <div
+        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        v-else
+      >
+        <AigcGenerationTitlesTemplate
+          v-for="titles in userTitlesTemplate?.data.items"
+          type="user"
+          :data="titles"
+          :key="titles.id"
+          @user-titles-delete="onUserTitlesDelete"
+        />
+      </div>
+    </div>
+
+    <UModal v-model="isUserTitlesRequestModalActive">
+      <UCard
+        :ui="{
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
+            >
+              <p>使用模板</p>
+            </div>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isUserTitlesRequestModalActive = false"
+            />
+          </div>
+        </template>
+
+        <div>
+          <UForm
+            class="space-y-4"
+            :schema="userTitlesSchema"
+            :state="userTitlesState"
+            @submit="onUserTitlesSubmit"
+          >
+            <UFormGroup
+              label="课程名称"
+              name="title"
+              required
+            >
+              <UInput v-model="userTitlesState.title" />
+            </UFormGroup>
+            <UFormGroup
+              label="主讲人"
+              name="description"
+              required
+            >
+              <UInput v-model="userTitlesState.description" />
+            </UFormGroup>
+            <UFormGroup
+              label="备注"
+              name="remark"
+              help="可选，可以在此处填写学校、单位等额外信息"
+            >
+              <UTextarea v-model="userTitlesState.remark" />
+            </UFormGroup>
+            <UFormGroup name="title_id">
+              <UInput
+                type="hidden"
+                v-model="userTitlesState.title_id"
+              />
+            </UFormGroup>
+
+            <UAlert
+              icon="tabler:info-circle"
+              color="primary"
+              variant="subtle"
+              title="片头片尾模板"
+              description="提交模板相应字段后，待工作人员制作好后即可使用"
+            />
+
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="primary"
+                variant="soft"
+                label="取消"
+                @click="isUserTitlesRequestModalActive = false"
+              />
+              <UButton
+                color="primary"
+                type="submit"
+              >
+                提交
+              </UButton>
+            </div>
+          </UForm>
+        </div>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+
+<style scoped></style>

app/pages/generation/ppt-templates.vue

@@ -0,0 +1,531 @@
+<script lang="ts" setup>
+import { number, object, string, type InferType } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+import dayjs from 'dayjs'
+
+const toast = useToast()
+const loginState = useLoginState()
+
+const isCreateSlideOpen = ref(false)
+const isCatSlideOpen = ref(false)
+
+const { data: pptCategories, refresh: refreshPPTCategories } = useAsyncData(
+  'pptCategories',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest,
+      BaseResponse<PagedData<PPTCategory>>
+    >('App.PowerPoint_Category.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      page: 1,
+      perpage: 20,
+    })
+)
+
+const selectedCat = ref<number>(0)
+const pagination = reactive({
+  page: 1,
+  perpage: 18,
+})
+
+const { data: pptTemplates, refresh: refreshPptTemplates } = useAsyncData(
+  'pptTemplates',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & { type: string | number } & AuthedRequest,
+      BaseResponse<PagedData<PPTTemplate>>
+    >('App.PowerPoint_SysPowerPoint.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      page: pagination.page,
+      perpage: pagination.perpage,
+      type: selectedCat.value === 0 ? '' : selectedCat.value,
+    }),
+  {
+    watch: [selectedCat, pagination],
+  }
+)
+
+const onDownloadClick = (ppt: PPTTemplate) => {
+  const { download } = useDownload(ppt.file_url, `${ppt.title}.pptx`)
+  download()
+}
+
+const pptCreateState = reactive({
+  title: '',
+  description: '',
+  type: 0,
+  preview_url: '',
+  file_url: '',
+})
+
+const pptCreateSchema = object({
+  title: string().required('模板标题不能为空'),
+  description: string().required('模板描述不能为空'),
+  type: number().notOneOf([0], '无效分类').required('请选择模板分类'),
+  preview_url: string().required('请上传预览图'),
+  file_url: string().required('请上传 PPT 文件'),
+})
+
+type PPTCreateSchema = InferType<typeof pptCreateSchema>
+
+const selectMenuOptions = computed(() => {
+  return pptCategories.value?.data.items.map((cat) => ({
+    label: cat.type,
+    value: cat.id,
+  }))
+})
+
+const onCreateSubmit = (event: FormSubmitEvent<PPTCreateSchema>) => {
+  useFetchWrapped<
+    {
+      title: string
+      description: string
+      type: number
+      preview_url: string
+      file_url: string
+    } & AuthedRequest,
+    BaseResponse<{ powerpoint_id: number }>
+  >('App.PowerPoint_SysPowerPoint.Create', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    title: event.data.title,
+    description: event.data.description,
+    type: event.data.type,
+    preview_url: event.data.preview_url,
+    file_url: event.data.file_url,
+  })
+    .then(async (res) => {
+      if (res.data.powerpoint_id) {
+        await refreshPPTCategories()
+        toast.add({
+          title: '创建成功',
+          description: '已加入模板库',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+        isCreateSlideOpen.value = false
+        refreshPptTemplates()
+        Object.assign(pptCreateState, {
+          title: '',
+          description: '',
+          type: 0,
+          preview_url: '',
+          file_url: '',
+        })
+      }
+    })
+    .catch(() => {
+      toast.add({
+        title: '创建失败',
+        description: '请检查输入是否正确',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+}
+
+const onFileSelect = async (files: FileList, type: 'preview' | 'ppt') => {
+  const url = await useFileGo(files[0], 'material')
+  if (type === 'preview') {
+    pptCreateState.preview_url = url
+  } else {
+    pptCreateState.file_url = url
+  }
+  toast.add({
+    title: '上传成功',
+    description: `已上传 ${type === 'preview' ? '预览图' : 'PPT 文件'}`,
+    color: 'green',
+    icon: 'i-tabler-check',
+  })
+}
+
+const onDeletePPT = (ppt: PPTTemplate) => {
+  useFetchWrapped<
+    { powerpoint_id: number } & AuthedRequest,
+    BaseResponse<{ code: number }>
+  >('App.PowerPoint_SysPowerPoint.Delete', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    powerpoint_id: ppt.id,
+  })
+    .then(async (res) => {
+      if (res.ret === 200 && res.data.code === 1) {
+        await refreshPptTemplates()
+        toast.add({
+          title: '删除成功',
+          description: '已删除模板',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .catch(() => {
+      toast.add({
+        title: '删除失败',
+        description: '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+}
+
+const createCatInput = ref('')
+
+const onCreateCat = () => {
+  if (createCatInput.value) {
+    useFetchWrapped<
+      { type: string } & AuthedRequest,
+      BaseResponse<{ ppt_cat_id: number }>
+    >('App.PowerPoint_SysPowerPoint.Create', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      type: createCatInput.value,
+    })
+      .then(async (res) => {
+        if (res.data.ppt_cat_id) {
+          await refreshPPTCategories()
+          toast.add({
+            title: '创建成功',
+            description: '已加入分类列表',
+            color: 'green',
+            icon: 'i-tabler-check',
+          })
+          createCatInput.value = ''
+        }
+      })
+      .catch(() => {
+        toast.add({
+          title: '创建失败',
+          description: '请检查输入是否正确',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      })
+  }
+}
+
+const onDeleteCat = (cat: PPTCategory) => {
+  useFetchWrapped<
+    { ppt_cat_id: number } & AuthedRequest,
+    BaseResponse<{ code: number }>
+  >('App.PowerPoint_SysPowerPoint.Delete', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    ppt_cat_id: cat.id,
+  })
+    .then(async (res) => {
+      if (res.ret === 200 && res.data.code === 1) {
+        await refreshPPTCategories()
+        toast.add({
+          title: '删除成功',
+          description: '已删除分类',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .catch(() => {
+      toast.add({
+        title: '删除失败',
+        description: '请检查输入是否正确',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+}
+</script>
+
+<template>
+  <div>
+    <div class="p-4 pb-0">
+      <BubbleTitle
+        title="PPT 模板库"
+        subtitle="Slide Templates"
+      >
+        <template #action>
+          <UButton
+            v-if="loginState.user.auth_code === 2"
+            label="分类管理"
+            color="amber"
+            variant="soft"
+            icon="tabler:grid"
+            @click="isCatSlideOpen = true"
+          />
+          <UButton
+            v-if="loginState.user.auth_code === 2"
+            label="创建模板"
+            color="amber"
+            variant="soft"
+            icon="tabler:plus"
+            @click="isCreateSlideOpen = true"
+          />
+        </template>
+      </BubbleTitle>
+      <GradientDivider />
+    </div>
+    <div class="p-4 pt-0">
+      <!-- cat selector -->
+      <div class="flex flex-wrap gap-2">
+        <div
+          v-for="cat in [
+            { id: 0, type: '全部' },
+            ...(pptCategories?.data.items || []),
+          ]"
+          @click="selectedCat = cat.id"
+          :key="cat.id"
+          :class="{
+            'bg-primary text-white': selectedCat === cat.id,
+            'bg-gray-100 text-gray-500': selectedCat !== cat.id,
+          }"
+          class="rounded-lg px-4 py-2 text-sm cursor-pointer"
+        >
+          {{ cat.type }}
+        </div>
+      </div>
+
+      <div class="space-y-4">
+        <div
+          v-if="pptTemplates?.data.items.length === 0"
+          class="w-full py-20 flex flex-col justify-center items-center gap-2"
+        >
+          <Icon
+            class="text-7xl text-neutral-300 dark:text-neutral-700"
+            name="i-tabler-photo-hexagon"
+          />
+          <p class="text-sm text-neutral-500 dark:text-neutral-400">
+            暂时没有可用模板
+          </p>
+        </div>
+        <div
+          v-else
+          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 mt-4"
+        >
+          <div
+            v-for="ppt in pptTemplates?.data.items"
+            :key="ppt.id"
+            class="relative bg-white rounded-lg shadow-md overflow-hidden"
+          >
+            <NuxtImg
+              :src="ppt.preview_url"
+              :alt="ppt.title"
+              class="w-full aspect-video object-cover"
+            />
+            <div
+              class="absolute inset-x-0 bottom-0 p-3 pt-6 flex justify-between items-end bg-gradient-to-t from-black/50 to-transparent"
+            >
+              <div class="space-y-0.5">
+                <h3 class="text-base font-bold text-white">{{ ppt.title }}</h3>
+                <p class="text-xs font-medium text-neutral-200">
+                  {{ ppt.description }}
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <!-- delete -->
+                <UButton
+                  v-if="loginState.user.auth_code === 2"
+                  size="sm"
+                  color="red"
+                  icon="tabler:trash"
+                  variant="soft"
+                  @click="onDeletePPT(ppt)"
+                />
+                <UButton
+                  label="下载"
+                  size="sm"
+                  color="primary"
+                  icon="tabler:download"
+                  @click="onDownloadClick(ppt)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="w-full flex justify-end">
+          <UPagination
+            v-if="(pptTemplates?.data.total || 0) > pagination.perpage"
+            :total="pptTemplates?.data.total"
+            :page-count="pagination.perpage"
+            :max="9"
+            v-model="pagination.page"
+          />
+        </div>
+      </div>
+    </div>
+
+    <USlideover v-model="isCreateSlideOpen">
+      <UCard
+        :ui="{
+          body: { base: 'flex-1' },
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+        class="flex flex-col flex-1"
+      >
+        <template #header>
+          <UButton
+            class="flex absolute end-5 top-5 z-10"
+            color="gray"
+            icon="tabler:x"
+            padded
+            size="sm"
+            square
+            variant="ghost"
+            @click="isCreateSlideOpen = false"
+          />
+          创建 PPT 模板
+        </template>
+
+        <UForm
+          class="space-y-4"
+          :schema="pptCreateSchema"
+          :state="pptCreateState"
+          @submit="onCreateSubmit"
+        >
+          <UFormGroup
+            label="模板标题"
+            name="title"
+          >
+            <UInput v-model="pptCreateState.title" />
+          </UFormGroup>
+          <UFormGroup
+            label="模板描述"
+            name="description"
+          >
+            <UTextarea v-model="pptCreateState.description" />
+          </UFormGroup>
+          <UFormGroup
+            label="模板分类"
+            name="type"
+          >
+            <USelectMenu
+              v-model="pptCreateState.type"
+              value-attribute="value"
+              option-attribute="label"
+              searchable
+              searchable-placeholder="搜索现有分类..."
+              :options="selectMenuOptions"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="预览图"
+            name="preview_url"
+          >
+            <UniFileDnD
+              @change="onFileSelect($event, 'preview')"
+              accept="image/png,image/jpeg"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="PPT 文件"
+            name="file_url"
+          >
+            <UniFileDnD
+              @change="onFileSelect($event, 'ppt')"
+              accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
+            />
+          </UFormGroup>
+
+          <div class="flex justify-end">
+            <UButton
+              label="创建"
+              color="primary"
+              type="submit"
+            />
+          </div>
+        </UForm>
+      </UCard>
+    </USlideover>
+    <USlideover v-model="isCatSlideOpen">
+      <UCard
+        :ui="{
+          body: { base: 'flex-1' },
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+        class="flex flex-col flex-1"
+      >
+        <template #header>
+          <UButton
+            class="flex absolute end-5 top-5 z-10"
+            color="gray"
+            icon="tabler:x"
+            padded
+            size="sm"
+            square
+            variant="ghost"
+            @click="isCatSlideOpen = false"
+          />
+          PPT 模板分类管理
+        </template>
+
+        <div class="space-y-4">
+          <UFormGroup label="创建分类">
+            <UButtonGroup
+              orientation="horizontal"
+              class="w-full"
+              size="lg"
+            >
+              <UInput
+                class="flex-1"
+                placeholder="分类名称"
+                v-model="createCatInput"
+              />
+              <UButton
+                icon="tabler:plus"
+                color="gray"
+                label="创建"
+                :disabled="!createCatInput"
+                @click="onCreateCat"
+              />
+            </UButtonGroup>
+          </UFormGroup>
+          <div class="border dark:border-neutral-700 rounded-md">
+            <UTable
+              :columns="[
+                { key: 'id', label: 'ID' },
+                { key: 'type', label: '分类' },
+                { key: 'create_time', label: '创建时间' },
+                { key: 'actions' },
+              ]"
+              :rows="pptCategories?.data.items"
+            >
+              <template #create_time-data="{ row }">
+                {{
+                  dayjs(row.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
+                }}
+              </template>
+              <template #actions-data="{ row }">
+                <UButton
+                  color="red"
+                  icon="tabler:trash"
+                  size="xs"
+                  variant="soft"
+                  @click="onDeleteCat(row)"
+                />
+              </template>
+            </UTable>
+          </div>
+        </div>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+
+<style scoped></style>

app/pages/index.vue

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

app/pages/profile.vue

@@ -0,0 +1,331 @@
+<script lang="ts" setup>
+import { number, object, string, ref as yref, type InferType } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+
+const toast = useToast()
+const route = useRoute()
+const router = useRouter()
+const loginState = useLoginState()
+
+const tabs = [
+  {
+    slot: 'info',
+    label: '基本资料',
+    icon: 'tabler:user-square-rounded',
+  },
+  {
+    slot: 'security',
+    label: '账号安全',
+    icon: 'tabler:shield-half-filled',
+  },
+]
+
+const currentTab = computed({
+  get() {
+    const index = tabs.findIndex((item) => item.slot === route.query.tab)
+    if (index === -1) {
+      return 0
+    }
+
+    return index
+  },
+  set(value) {
+    // Hash is specified here to prevent the page from scrolling to the top
+    router.replace({
+      query: { tab: tabs[value].slot },
+    })
+  },
+})
+
+const editProfileSchema = object({
+  username: string().required('请输入姓名'),
+  sex: number().required('请选择性别'),
+  company: string().required('请输入公司名称'),
+})
+
+type EditProfileSchema = InferType<typeof editProfileSchema>
+
+const editProfileState = reactive({
+  username: loginState.user?.username || '',
+  sex: loginState.user.sex || 0,
+  company: loginState.user?.company || '',
+})
+
+const isEditProfileModified = ref(false)
+
+const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
+  let payload: Partial<UserSchema> & AuthedRequest = {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    // 排除 username 字段，因为如果 username 未修改，后端会返回错误
+    ...Object.fromEntries(
+      Object.entries(event.data).filter(([key]) => key !== 'username')
+    ),
+  }
+
+  // 如果用户名有变化，需要额外传递 username 字段
+  if (event.data.username !== loginState.user.username) {
+    payload = {
+      ...payload,
+      username: event.data.username,
+    }
+  }
+
+  useFetchWrapped<Partial<UserSchema> & AuthedRequest, BaseResponse<{}>>(
+    'App.User_User.EditProfile',
+    payload
+  )
+    .then((res) => {
+      if (res.ret === 200) {
+        toast.add({
+          title: '个人资料已更新',
+          description: '您的个人资料已更新成功',
+          color: 'green',
+        })
+        loginState.updateProfile()
+        isEditProfileModified.value = false
+      } else {
+        toast.add({
+          title: '更新失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+        })
+      }
+    })
+    .catch((err) => {
+      toast.add({
+        title: '更新失败',
+        description: err.message || '未知错误',
+        color: 'red',
+      })
+    })
+}
+
+const changePasswordState = reactive({
+  old_password: '',
+  new_password: '',
+  confirm_password: '',
+})
+
+const changePasswordSchema = object({
+  old_password: string().required('请输入旧密码'),
+  new_password: string().required('请输入新密码').min(6, '密码长度至少为6位'),
+  confirm_password: string()
+    .required('请再次输入新密码')
+    .oneOf([yref('new_password')], '两次输入的密码不一致'),
+})
+
+type ChangePasswordSchema = InferType<typeof changePasswordSchema>
+
+const onChangePasswordSubmit = (
+  event: FormSubmitEvent<ChangePasswordSchema>
+) => {
+  useFetchWrapped<req.user.ChangePassword & AuthedRequest, BaseResponse<{}>>(
+    'App.User_User.ChangePassword',
+    {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      username: loginState.user.username,
+      old_password: event.data.old_password,
+      new_password: event.data.new_password,
+    }
+  )
+    .then((res) => {
+      if (res.ret === 200) {
+        toast.add({
+          title: '密码已修改',
+          description: '请重新登录',
+          color: 'green',
+        })
+        setTimeout(() => {
+          loginState.logout()
+          window.location.reload()
+        }, 2000)
+      } else {
+        toast.add({
+          title: '修改密码失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+        })
+      }
+    })
+    .catch((err) => {
+      toast.add({
+        title: '修改密码失败',
+        description: err.message || '未知错误',
+        color: 'red',
+      })
+    })
+}
+</script>
+
+<template>
+  <LoginNeededContent
+    content-class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0"
+  >
+    <div class="container max-w-[1280px] mx-auto pt-12 flex flex-col gap-12">
+      <h1 class="text-2xl font-medium inline-flex items-center gap-2">
+        <UIcon
+          name="line-md:person"
+          class="text-3xl"
+        />
+        <span>个人中心</span>
+      </h1>
+      <div class="flex flex-col gap-12">
+        <div class="flex items-center gap-4 px-1">
+          <UAvatar
+            size="xl"
+            icon="tabler:user"
+            :src="loginState.user?.avatar"
+            :alt="loginState.user?.nickname || loginState.user?.username"
+            :ui="{
+              rounded: 'rounded-xl',
+              size: {
+                huge: 'w-48 h-48 text-4xl',
+              },
+            }"
+          />
+          <div>
+            <h2 class="text-xl font-medium">
+              {{ loginState.user?.username }}
+              <span
+                v-if="loginState.user?.nickname"
+                class="text-neutral-500 dark:text-neutral-400"
+              >
+                ({{ loginState.user?.nickname }})
+              </span>
+            </h2>
+            <p class="text-sm text-neutral-500 dark:text-neutral-400">
+              {{ loginState.user?.company || '未填写公司' }}
+            </p>
+          </div>
+        </div>
+        <div>
+          <UTabs
+            v-model="currentTab"
+            :items="tabs"
+            orientation="vertical"
+            :ui="{
+              wrapper:
+                'w-full flex flex-col sm:flex-row items-start gap-4 sm:gap-16',
+              list: {
+                width: 'w-full sm:w-48 h-fit',
+                background: 'bg-transparent',
+                tab: { active: 'bg-neutral-100 dark:bg-neutral-700' },
+              },
+            }"
+          >
+            <template #info>
+              <div class="tab-content space-y-4">
+                <UForm
+                  class="max-w-96 space-y-6"
+                  :state="editProfileState"
+                  :schema="editProfileSchema"
+                  @submit="onEditProfileSubmit"
+                  @change="isEditProfileModified = true"
+                >
+                  <UFormGroup
+                    name="username"
+                    label="姓名"
+                    help="您的真实姓名，将用于登录系统"
+                    hint="账户名"
+                  >
+                    <UInput v-model="editProfileState.username" />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="mobile"
+                    label="手机号码"
+                    help="手机号作为登录和找回密码的凭证，暂不支持修改"
+                  >
+                    <UInput
+                      :placeholder="loginState.user?.mobile || 'nil'"
+                      disabled
+                    />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="sex"
+                    label="性别"
+                  >
+                    <USelect
+                      v-model="editProfileState.sex"
+                      :options="[
+                        { label: '男', value: 1 },
+                        { label: '女', value: 2 },
+                        { label: '保密', value: 0 },
+                      ]"
+                    />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="company"
+                    label="公司/学校/组织名称"
+                    help="您所在的公司或组织名称"
+                  >
+                    <UInput v-model="editProfileState.company" />
+                  </UFormGroup>
+
+                  <div>
+                    <UButton
+                      type="submit"
+                      :disabled="!isEditProfileModified"
+                    >
+                      保存更改
+                    </UButton>
+                  </div>
+                </UForm>
+              </div>
+            </template>
+            <template #security>
+              <div class="tab-content space-y-4">
+                <UForm
+                  class="max-w-96 space-y-6"
+                  :schema="changePasswordSchema"
+                  :state="changePasswordState"
+                  @submit="onChangePasswordSubmit"
+                >
+                  <UFormGroup
+                    name="old_password"
+                    label="旧密码"
+                  >
+                    <UInput
+                      type="password"
+                      v-model="changePasswordState.old_password"
+                    />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="new_password"
+                    label="新密码"
+                  >
+                    <UInput
+                      type="password"
+                      v-model="changePasswordState.new_password"
+                    />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="confirm_password"
+                    label="确认新密码"
+                  >
+                    <UInput
+                      type="password"
+                      v-model="changePasswordState.confirm_password"
+                    />
+                  </UFormGroup>
+
+                  <div>
+                    <UButton type="submit">修改密码</UButton>
+                  </div>
+                </UForm>
+                <!-- <UDivider /> -->
+              </div>
+            </template>
+          </UTabs>
+        </div>
+      </div>
+    </div>
+  </LoginNeededContent>
+</template>
+
+<style scoped>
+.tab-content {
+  @apply bg-neutral-50 dark:bg-neutral-800 rounded-lg p-6;
+}
+</style>

app/pages/user/authenticate.vue

@@ -0,0 +1,624 @@
+<script lang="ts" setup>
+import type { FormSubmitEvent } from '#ui/types'
+import { object, string, type InferType } from 'yup'
+
+definePageMeta({
+  layout: 'authenticate',
+  preventLoginCheck: true,
+})
+
+useSeoMeta({
+  title: '登录',
+})
+
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+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()
+          toast.add({
+            title: '登录成功',
+            description: `${loginState.user.username}, 欢迎回来`,
+            color: 'primary',
+            icon: 'i-tabler-login-2',
+          })
+          router.replace('/')
+        })
+        .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()
+          toast.add({
+            title: '登录成功',
+            description: `${loginState.user.username}, 欢迎回来`,
+            color: 'primary',
+            icon: 'i-tabler-login-2',
+          })
+          router.replace('/')
+        })
+        .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',
+      })
+    })
+}
+
+onMounted(() => {
+  const { token, user_id } = route.query
+  if (!token || !user_id) {
+    return
+  }
+  loginState.token = token.toString()
+  loginState.user.id = user_id as unknown as number
+  loginState
+    .updateProfile()
+    .then(() => {
+      loginState.checkSession()
+      // toast.add({
+      //   title: '登录成功',
+      //   description: `合作渠道认证成功`,
+      //   color: 'primary',
+      //   icon: 'i-tabler-login-2',
+      // })
+      router.replace('/')
+    })
+    .catch((err) => {
+      toast.add({
+        title: '认证失败',
+        description: err.msg || 'Token 或 UserID 无效',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+      router.replace('/')
+    })
+    .finally(() => {
+      final_loading.value = false
+    })
+})
+</script>
+
+<template>
+  <div class="w-full min-h-screen flex flex-col justify-center items-center">
+    <div class="flex flex-col items-center py-12 gap-2">
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
+        AIGC 微课视频研创平台
+      </h1>
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        请使用以下方式登录
+      </p>
+    </div>
+    <div class="flex flex-col items-center">
+      <UTabs
+        :items="items"
+        class="w-full sm:w-[400px]"
+        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"
+                  class="w-full overflow-hidden"
+                >
+                  <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 w-12 h-12 text-center rounded-lg"
+                      :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>
+    </div>
+    <div class="pt-4">
+      <UButton
+        color="gray"
+        variant="ghost"
+        class="!text-gray-500"
+        @click="
+          () => {
+            router.push('/user/register')
+          }
+        "
+      >
+        注册新账号
+      </UButton>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

app/pages/user/register.vue

@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { FormSubmitEvent } from '#ui/types'
+import { object, string, type InferType } from 'yup'
+
+definePageMeta({
+  layout: 'authenticate',
+})
+
+useSeoMeta({
+  title: '注册',
+})
+
+const router = useRouter()
+const toast = useToast()
+const loginState = useLoginState()
+
+const final_loading = ref(false)
+
+const registerState = reactive({
+  username: '',
+  password: '',
+  mobile: '',
+  company: '',
+})
+
+const registerSchema = object({
+  username: string().required('请输入用户名'),
+  password: string().required('请输入新密码').min(6, '密码长度至少为6位'),
+  mobile: string()
+    .required('请输入手机号')
+    .matches(/^1[3-9]\d{9}$/, '手机号格式不正确'),
+  company: string().required('请输入公司/单位名称'),
+})
+
+type RegisterSchema = InferType<typeof registerSchema>
+
+const onSubmit = (form: RegisterSchema) => {
+  final_loading.value = true
+  useFetchWrapped<Partial<UserSchema>, BaseResponse<{ user_id: number }>>(
+    'App.User_User.Register',
+    {
+      ...registerState,
+    }
+  ).then(
+    (res) => {
+      final_loading.value = false
+      if (res) {
+        toast.add({
+          title: '注册成功',
+          description: '请联系客服激活账号后登录',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+        router.push('/user/authenticate')
+      }
+    },
+    (err) => {
+      final_loading.value = false
+      toast.add({
+        title: '注册失败',
+        description: err.message || '注册失败，请稍后再试',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    }
+  )
+}
+</script>
+
+<template>
+  <div class="w-full min-h-screen flex flex-col justify-center items-center">
+    <div class="flex flex-col items-center py-12 gap-2">
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
+        AIGC 微课视频研创平台
+      </h1>
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">账号注册</p>
+    </div>
+    <div class="flex flex-col items-center">
+      <UCard
+        @submit.prevent="() => onSubmit(registerState)"
+        class="w-full sm:w-[400px]"
+      >
+        <!-- <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 class="space-y-3">
+          <UFormGroup
+            label="姓名"
+            name="username"
+            help="请使用姓名作为用户名，将用于登录"
+            required
+          >
+            <UInput
+              v-model="registerState.username"
+              :disabled="final_loading"
+              required
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="密码"
+            name="password"
+            required
+          >
+            <UInput
+              v-model="registerState.password"
+              :disabled="final_loading"
+              type="password"
+              required
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="手机号"
+            name="mobile"
+            required
+          >
+            <UInput
+              v-model="registerState.mobile"
+              :disabled="final_loading"
+              required
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="公司/单位"
+            name="company"
+            required
+          >
+            <UInput
+              v-model="registerState.company"
+              :disabled="final_loading"
+              required
+            />
+          </UFormGroup>
+        </div>
+
+        <template #footer>
+          <div class="flex items-center justify-between">
+            <UButton
+              type="submit"
+              color="black"
+              :loading="final_loading"
+            >
+              注册
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </div>
+    <div class="pt-4">
+      <UButton
+        color="gray"
+        variant="ghost"
+        class="!text-gray-500"
+        @click="
+          () => {
+            router.push('/user/authenticate')
+          }
+        "
+      >
+        已有账号，前往登录
+      </UButton>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>