refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { object, string, number } from 'yup'
-import type { FormSubmitEvent } from '#ui/types'
+import type { FormSubmitEvent, TableColumn } from '#ui/types'
 
 useHead({
   title: '数字人定制管理 | 管理员',
@@ -40,38 +40,38 @@ const {
 const trainList = computed(() => trainListResp.value?.data.items || [])
 
 // 表格列定义
-const columns = [
+const columns: TableColumn<DigitalHumanTrainItem>[] = [
   {
-    key: 'id',
-    label: 'ID',
+    accessorKey: 'id',
+    header: 'ID',
   },
   {
-    key: 'dh_name',
-    label: '数字人名称',
+    accessorKey: 'dh_name',
+    header: '数字人名称',
   },
   {
-    key: 'organization',
-    label: '单位名称',
+    accessorKey: 'organization',
+    header: '单位名称',
   },
   {
-    key: 'user_id',
-    label: '用户ID',
+    accessorKey: 'user_id',
+    header: '用户ID',
   },
   {
-    key: 'create_time',
-    label: '创建时间',
+    accessorKey: 'create_time',
+    header: '创建时间',
   },
   {
-    key: 'video_url',
-    label: '数字人视频',
+    accessorKey: 'video_url',
+    header: '数字人视频',
   },
   {
-    key: 'auth_video_url',
-    label: '授权视频',
+    accessorKey: 'auth_video_url',
+    header: '授权视频',
   },
   {
-    key: 'actions',
-    label: '操作',
+    accessorKey: 'actions',
+    header: '操作',
   },
 ]
 
@@ -126,7 +126,7 @@ const handleAvatarUpload = (files: FileList) => {
     toast.add({
       title: '文件格式错误',
       description: '请上传图片文件',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -137,7 +137,7 @@ const handleAvatarUpload = (files: FileList) => {
     toast.add({
       title: '文件过大',
       description: '图片文件大小不能超过10MB',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -155,7 +155,7 @@ const onProcessSubmit = async (
   if (!avatarFile.value) {
     toast.add({
       title: '请上传数字人预览图',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -225,7 +225,7 @@ const onProcessSubmit = async (
           ? `，失败 ${createUserResult.data.failed} 个`
           : ''
       }`,
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
 
@@ -250,7 +250,7 @@ const onProcessSubmit = async (
     toast.add({
       title: '录入失败',
       description: errorMessage,
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   } finally {
@@ -274,7 +274,7 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
       toast.add({
         title: '删除成功',
         description: '定制记录已删除',
-        color: 'green',
+        color: 'success',
         icon: 'i-tabler-check',
       })
       await refreshTrainList()
@@ -288,7 +288,7 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
     toast.add({
       title: '删除失败',
       description: errorMessage,
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   }
@@ -304,7 +304,7 @@ 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'
+    'fixed inset-0 z-50 flex items-center justify-center bg-black/50'
 
   const videoContainer = document.createElement('div')
   videoContainer.className =
@@ -323,7 +323,7 @@ const previewVideo = (videoUrl: string, title: string) => {
   const closeButton = document.createElement('button')
   closeButton.textContent = '关闭'
   closeButton.className =
-    'mt-4 px-4 py-2 bg-gray-500 text-white rounded-sm hover:bg-gray-600'
+    'mt-4 px-4 py-2 bg-gray-500 text-white rounded-xs hover:bg-gray-600'
   closeButton.onclick = () => {
     document.body.removeChild(videoModal)
   }
@@ -352,11 +352,11 @@ const previewVideo = (videoUrl: string, title: string) => {
       >
         <template #action>
           <UButton
-            color="gray"
+            color="neutral"
             variant="soft"
             icon="i-tabler-refresh"
             label="刷新"
-            @click="refreshTrainList"
+            @click="() => refreshTrainList()"
           />
         </template>
       </BubbleTitle>
@@ -374,77 +374,80 @@ const previewVideo = (videoUrl: string, title: string) => {
 
       <div class="flex flex-col gap-4">
         <UTable
-          :rows="trainList"
+          :data="trainList"
           :columns="columns"
           :loading="trainListStatus === 'pending'"
-          :progress="{ color: 'amber', animation: 'carousel' }"
-          class="border dark:border-neutral-800 rounded-md"
+          loading-color="warning"
+          loading-animation="carousel"
+          class="rounded-md border dark:border-neutral-800"
         >
-          <template #create_time-data="{ row }">
-            <span class="text-sm">{{ formatTime(row.create_time) }}</span>
+          <template #create_time-cell="{ row }">
+            <span class="text-sm">
+              {{ formatTime(row.original.create_time) }}
+            </span>
           </template>
 
-          <template #video_url-data="{ row }">
+          <template #video_url-cell="{ row }">
             <div class="flex gap-2">
               <UButton
-                color="blue"
+                color="info"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-download"
-                :to="row.video_url"
+                :to="row.original.video_url"
                 target="_blank"
                 label="下载"
               />
               <UButton
-                color="green"
+                color="success"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-eye"
                 label="预览"
-                @click="previewVideo(row.video_url, '数字人视频')"
+                @click="previewVideo(row.original.video_url, '数字人视频')"
               />
             </div>
           </template>
 
-          <template #auth_video_url-data="{ row }">
+          <template #auth_video_url-cell="{ row }">
             <div class="flex gap-2">
               <UButton
-                color="blue"
+                color="info"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-download"
-                :to="row.auth_video_url"
+                :to="row.original.auth_video_url"
                 target="_blank"
                 label="下载"
               />
               <UButton
-                color="green"
+                color="success"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-eye"
                 label="预览"
-                @click="previewVideo(row.auth_video_url, '授权视频')"
+                @click="previewVideo(row.original.auth_video_url, '授权视频')"
               />
             </div>
           </template>
 
-          <template #actions-data="{ row }">
+          <template #actions-cell="{ row }">
             <div class="flex gap-2">
               <UButton
-                color="amber"
+                color="warning"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-user-cog"
                 label="录入"
-                @click="handleProcessTrain(row)"
+                @click="handleProcessTrain(row.original)"
               />
               <UButton
-                color="red"
+                color="error"
                 variant="soft"
                 size="xs"
                 icon="i-tabler-trash"
                 label="删除"
-                @click="handleDeleteTrain(row)"
+                @click="handleDeleteTrain(row.original)"
               />
             </div>
           </template>
@@ -452,7 +455,7 @@ const previewVideo = (videoUrl: string, title: string) => {
 
         <div class="flex justify-end">
           <UPagination
-            v-model="pagination.page"
+            v-model:page="pagination.page"
             :max="9"
             :page-count="pagination.pageSize"
             :total="trainListResp?.data.total || 0"
@@ -462,125 +465,127 @@ const previewVideo = (videoUrl: string, title: string) => {
     </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"
+    <USlideover v-model:open="isProcessModalOpen">
+      <template #content>
+        <UCard
+          :ui="{
+            body: 'flex-1',
+          }"
+          class="flex flex-1 flex-col"
         >
-          <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">
+          <template #header>
             <UButton
-              type="button"
-              color="gray"
-              variant="soft"
+              class="absolute end-5 top-5 z-10 flex"
+              color="neutral"
+              variant="ghost"
+              icon="i-tabler-x"
+              padded
+              size="sm"
+              square
               @click="isProcessModalOpen = false"
+            />
+            <div>
+              <h3 class="text-lg font-semibold">录入数字人</h3>
+              <p class="mt-1 text-sm text-gray-500">
+                为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
+                {{ currentTrainItem?.user_id }}
+              </p>
+            </div>
+          </template>
+
+          <UForm
+            class="space-y-4"
+            :schema="processFormSchema"
+            :state="processFormState"
+            @submit="onProcessSubmit"
+          >
+            <UFormField
+              label="名称"
+              name="name"
             >
-              取消
-            </UButton>
-            <UButton
-              type="submit"
-              color="primary"
-              :loading="isProcessing"
-              :disabled="isProcessing"
+              <UInput v-model="processFormState.name" />
+            </UFormField>
+
+            <UFormField
+              label="数字人ID"
+              name="model_id"
+              description="请输入五位数字人ID"
             >
-              {{ isProcessing ? '录入中...' : '录入并分配' }}
-            </UButton>
-          </div>
-        </UForm>
-      </UCard>
+              <UInput
+                v-model="processFormState.model_id"
+                type="number"
+                placeholder="请输入数字人ID"
+              />
+            </UFormField>
+
+            <UFormField
+              label="描述"
+              name="description"
+            >
+              <UTextarea
+                v-model="processFormState.description"
+                :rows="3"
+              />
+            </UFormField>
+
+            <UFormField
+              label="供应商类型"
+              name="type"
+            >
+              <USelectMenu
+                v-model="processFormState.type"
+                value-attribute="value"
+                :options="sourceTypeList"
+              />
+            </UFormField>
+
+            <UFormField
+              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>
+            </UFormField>
+
+            <div class="flex justify-end gap-2 pt-4">
+              <UButton
+                type="button"
+                color="neutral"
+                variant="soft"
+                @click="isProcessModalOpen = false"
+              >
+                取消
+              </UButton>
+              <UButton
+                type="submit"
+                color="primary"
+                :loading="isProcessing"
+                :disabled="isProcessing"
+              >
+                {{ isProcessing ? '录入中...' : '录入并分配' }}
+              </UButton>
+            </div>
+          </UForm>
+        </UCard>
+      </template>
     </USlideover>
   </div>
 </template>

app/pages/generation/admin/index.vue

@@ -54,7 +54,7 @@ const navigateToPage = (path: string) => {
     </div>
 
     <div class="p-4">
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
         <div
           v-for="page in adminPages"
           :key="page.path"
@@ -62,14 +62,11 @@ const navigateToPage = (path: string) => {
           @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',
-            }"
+            class="transition-all duration-200 hover:shadow-lg group-hover:scale-105"
           >
-            <div class="flex flex-col items-center text-center p-6">
+            <div class="flex flex-col items-center p-6 text-center">
               <div
-                class="w-16 h-16 rounded-full flex items-center justify-center mb-4 transition-colors"
+                class="mb-4 flex h-16 w-16 items-center justify-center rounded-full 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',
@@ -78,7 +75,7 @@ const navigateToPage = (path: string) => {
               >
                 <UIcon
                   :name="page.icon"
-                  class="w-8 h-8"
+                  class="h-8 w-8"
                   :class="{
                     'text-blue-600 dark:text-blue-400': page.color === 'blue',
                     'text-amber-600 dark:text-amber-400':
@@ -90,24 +87,24 @@ const navigateToPage = (path: string) => {
               </div>
 
               <h3
-                class="text-lg font-semibold text-gray-900 dark:text-white mb-2"
+                class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
               >
                 {{ page.title }}
               </h3>
 
               <p
-                class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed"
+                class="text-sm leading-relaxed text-gray-600 dark:text-gray-400"
               >
                 {{ 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"
+                class="mt-4 flex items-center text-sm text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300"
               >
                 <span>进入管理</span>
                 <UIcon
                   name="i-heroicons-arrow-right"
-                  class="ml-1 w-4 h-4"
+                  class="ml-1 h-4 w-4"
                 />
               </div>
             </div>