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

app/pages/generation/avatar-models.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { number, object, string, type InferType } from 'yup'
-import type { FormSubmitEvent } from '#ui/types'
+import type { FormSubmitEvent, TableColumn } from '#ui/types'
 
 const toast = useToast()
 const loginState = useLoginState()
@@ -94,7 +94,7 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
         toast.add({
           title: '删除成功',
           description: '数字人已删除',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
         refreshSystemAvatarList()
@@ -102,7 +102,7 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
         toast.add({
           title: '删除失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -111,43 +111,43 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
       toast.add({
         title: '删除失败',
         description: '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     })
 }
 
-const columns = [
+const columns: TableColumn<DigitalHumanItem>[] = [
   {
-    key: 'avatar',
-    label: '图片',
+    accessorKey: 'avatar',
+    header: '图片',
   },
   {
-    key: 'name',
-    label: '名称',
+    accessorKey: 'name',
+    header: '名称',
   },
   {
-    key: 'model_id',
-    label: 'ID',
+    accessorKey: 'model_id',
+    header: 'ID',
   },
   {
-    key: 'type',
-    label: '来源',
+    accessorKey: 'type',
+    header: '来源',
   },
   {
-    key: 'description',
-    label: '备注',
+    accessorKey: 'description',
+    header: '备注',
   },
   {
-    key: 'actions',
+    accessorKey: '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' }, // 百度小冰
+  { label: 'xsh_wm', value: 1, color: 'info' as const }, // 万木（腾讯）
+  { label: 'xsh_zy', value: 2, color: 'success' as const }, // XSH 自有
+  { label: 'xsh_fh', value: 3, color: 'warning' as const }, // 硅基（泛化数字人）
+  { label: 'xsh_bb', value: 4, color: 'primary' as const }, // 百度小冰
 ]
 
 const isCreateSlideOpen = ref(false)
@@ -189,7 +189,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
         toast.add({
           title: '创建成功',
           description: '数字人已创建',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
         refreshSystemAvatarList()
@@ -199,7 +199,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
         toast.add({
           title: '创建失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -208,7 +208,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
       toast.add({
         title: '创建失败',
         description: '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     })
@@ -216,20 +216,22 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
 
 const onAvatarUpload = async (files: FileList) => {
   const file = files[0]
+  if (!file) return
+
   try {
     const url = await useFileGo(file, 'material')
     createAvatarState.avatar = url
     toast.add({
       title: '上传文件成功',
       description: '文件已上传',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   } catch {
     toast.add({
       title: '上传文件失败',
       description: '请重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   }
@@ -245,7 +247,7 @@ const onAvatarUpload = async (files: FileList) => {
       >
         <template #action>
           <UButton
-            color="gray"
+            color="neutral"
             variant="soft"
             :label="showSystemAvatar ? '显示用户数字人' : '显示系统数字人'"
             @click="showSystemAvatar = !showSystemAvatar"
@@ -257,20 +259,20 @@ const onAvatarUpload = async (files: FileList) => {
                 : 'tabler:layout-grid'
             "
             variant="soft"
-            color="gray"
+            color="neutral"
             @click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
             :label="data_layout === 'grid' ? '列表视图' : '宫格视图'"
           />
           <UButton
             v-if="loginState.user.auth_code === 2"
-            color="amber"
+            color="warning"
             variant="soft"
             icon="tabler:user-cog"
             label="定制管理"
             :to="'/generation/admin/digital-human-train'"
           />
           <UButton
-            color="blue"
+            color="info"
             variant="soft"
             icon="tabler:user-plus"
             label="定制数字人"
@@ -278,7 +280,7 @@ const onAvatarUpload = async (files: FileList) => {
           />
           <UButton
             v-if="loginState.user.auth_code === 2"
-            color="amber"
+            color="warning"
             variant="soft"
             icon="tabler:plus"
             label="创建数字人"
@@ -305,18 +307,18 @@ const onAvatarUpload = async (files: FileList) => {
             ? systemAvatarList?.data.items
             : userAvatarList?.data.items"
           :key="avatar.model_id || k"
-          class="relative rounded-lg shadow-sm overflow-hidden w-full aspect-9/16 group"
+          class="shadow-xs aspect-9/16 group relative w-full overflow-hidden rounded-lg"
         >
           <NuxtImg
             :src="avatar.avatar"
-            class="w-full h-full object-cover"
+            class="h-full w-full object-cover"
           />
           <div
-            class="absolute inset-x-0 bottom-0 p-2 bg-linear-to-t from-black/50 to-transparent flex gap-2"
+            class="bg-linear-to-t absolute inset-x-0 bottom-0 flex gap-2 from-black/50 to-transparent p-2"
           >
             <UBadge
-              color="white"
-              variant="solid"
+              color="neutral"
+              variant="subtle"
               icon="tabler:user-screen"
             >
               {{ avatar.name }}
@@ -334,11 +336,11 @@ const onAvatarUpload = async (files: FileList) => {
             </template>
           </div>
           <div
-            class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
+            class="absolute inset-0 flex flex-col items-center justify-center bg-white/50 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 dark:bg-neutral-800/50"
           >
             <UButtonGroup>
               <UButton
-                color="black"
+                color="neutral"
                 icon="tabler:download"
                 label="下载图片"
                 @click="
@@ -353,7 +355,7 @@ const onAvatarUpload = async (files: FileList) => {
               />
             </UButtonGroup>
             <span
-              class="text-xs font-medium text-neutral-400 dark:text-neutral-300 pt-4"
+              class="pt-4 text-xs font-medium text-neutral-400 dark:text-neutral-300"
             >
               ID: {{ avatar.model_id }}
             </span>
@@ -363,39 +365,40 @@ const onAvatarUpload = async (files: FileList) => {
       <div v-else>
         <div class="flex flex-col gap-4">
           <UTable
-            :rows="
+            :data="
               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"
+            loading-color="warning"
+            loading-animation="carousel"
+            class="rounded-md border dark:border-neutral-800"
           >
-            <template #avatar-data="{ row }">
+            <template #avatar-cell="{ row }">
               <NuxtImg
-                :src="row.avatar"
-                class="h-16 aspect-9/16 rounded-lg"
+                :src="row.original.avatar"
+                class="h-16 w-auto rounded-lg object-contain"
               />
             </template>
-            <template #type-data="{ row }">
+            <template #type-cell="{ row }">
               <template
                 v-for="(t, i) in sourceTypeList"
                 :key="i"
               >
                 <UBadge
-                  v-if="t.value === row.type"
+                  v-if="t.value === row.original.type"
                   variant="subtle"
                   :color="t.color"
                   :label="t.label"
                 />
               </template>
             </template>
-            <template #actions-data="{ row }">
+            <template #actions-cell="{ row }">
               <div class="flex gap-2">
                 <UButton
-                  color="gray"
+                  color="neutral"
                   icon="tabler:download"
                   label="下载图片"
                   variant="soft"
@@ -403,29 +406,29 @@ const onAvatarUpload = async (files: FileList) => {
                   @click="
                     () => {
                       const { download } = useDownload(
-                        row.avatar,
-                        `数字人_${row.name}.png`
+                        row.original.avatar,
+                        `数字人_${row.original.name}.png`
                       )
                       download()
                     }
                   "
                 />
                 <UButton
-                  color="red"
+                  color="error"
                   icon="tabler:trash"
                   label="删除"
                   variant="soft"
                   size="xs"
-                  @click="onSystemAvatarDelete(row)"
+                  @click="onSystemAvatarDelete(row.original)"
                 />
               </div>
             </template>
           </UTable>
         </div>
       </div>
-      <div class="flex justify-end mt-4">
+      <div class="mt-4 flex justify-end">
         <UPagination
-          v-model="pagination.page"
+          v-model:page="pagination.page"
           :max="9"
           :page-count="pagination.pageSize"
           :total="userAvatarList?.data.total || 0"
@@ -433,81 +436,81 @@ const onAvatarUpload = async (files: FileList) => {
       </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"
+    <USlideover v-model:open="isCreateSlideOpen">
+      <template #content>
+        <UCard
+          :ui="{
+            body: 'flex-1',
+          }"
+          class="flex flex-1 flex-col"
         >
-          <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">
+          <template #header>
             <UButton
-              type="submit"
-              color="primary"
-              label="创建"
+              class="absolute end-5 top-5 z-10 flex"
+              color="neutral"
+              icon="tabler:x"
+              padded
+              size="sm"
+              square
+              variant="ghost"
+              @click="isCreateSlideOpen = false"
             />
-          </UFormGroup>
-        </UForm>
-      </UCard>
+            创建系统数字人
+          </template>
+
+          <UForm
+            class="space-y-3"
+            :schema="createAvatarSchema"
+            :state="createAvatarState"
+            @submit="onCreateAvatarSubmit"
+          >
+            <UFormField
+              label="名称"
+              name="name"
+            >
+              <UInput v-model="createAvatarState.name" />
+            </UFormField>
+            <UFormField
+              label="备注"
+              name="description"
+            >
+              <UInput v-model="createAvatarState.description" />
+            </UFormField>
+            <UFormField
+              label="ID"
+              name="model_id"
+            >
+              <UInput v-model="createAvatarState.model_id" />
+            </UFormField>
+            <UFormField
+              label="图片"
+              name="avatar"
+            >
+              <UniFileDnD
+                accept="image/png,image/jpeg"
+                @change="onAvatarUpload"
+              />
+            </UFormField>
+            <UFormField
+              label="类型"
+              name="type"
+            >
+              <USelectMenu
+                v-model="createAvatarState.type"
+                :items="sourceTypeList"
+                value-key="value"
+              />
+            </UFormField>
+            <UFormField class="flex justify-end pt-4">
+              <UButton
+                type="submit"
+                color="primary"
+                label="创建"
+              />
+            </UFormField>
+          </UForm>
+        </UCard>
+      </template>
     </USlideover>
 
     <!-- 数字人定制对话框 -->