align(数字人版本): 分页(前端20/页)、上传进度(正在上传N%)、状态三态(草稿/已发布/已废弃)、文件大小固定两位MB、说明50字截断、RELEASED恒显下载点击取链接、确认文案/按钮名/仅zip校验/弹窗描述对齐（对齐 admin.js loadDigitalHumanVersions/downloadDigitalHumanVersion/上传段）

admin-frontend-vue/src/pages/records/RecordsDigitalHumanVersionPage.vue

@@ -1,36 +1,53 @@
 <script setup lang="ts">
-/** 数字人版本管理页（module 13 task 261 对齐 admin panel-digital-human-version）。 */
+/** 数字人版本管理页（module 13 task 261 对齐 admin panel-digital-human-version；本轮补齐分页/三态/上传进度/下载语义）。 */
 import { formatDateTime } from '@/utils/datetime'
-import { formatFileSize } from './version-format.ts'
-import { md5Short } from './digitalhuman-format.ts'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   deleteDigitalHumanVersion,
+  fetchDigitalHumanDownloadUrl,
   fetchDigitalHumanVersions,
   releaseDigitalHumanVersion,
   setLatestDigitalHumanVersion,
   uploadDigitalHumanVersion,
 } from './digitalhuman-api.ts'
 import type { DigitalHumanVersion } from './digitalhuman-dto.ts'
+import {
+  digitalHumanChangelogShort,
+  digitalHumanDeleteConfirmText,
+  digitalHumanVersionFileSizeText,
+} from './digitalhuman-dto.ts'
 import { validateDigitalHumanUpload } from './digitalhuman-upload-model.ts'
 import { canReleaseDigitalHumanVersion, releaseDigitalHumanConfirmText } from './digitalhuman-release.ts'
 import { canSetLatestDigitalHumanVersion, setLatestDigitalHumanConfirmText } from './digitalhuman-latest.ts'
-import { digitalHumanStatusDisplay, latestBadgeText } from './digitalhuman-status-display.ts'
+import { digitalHumanStatusDisplay } from './digitalhuman-status-display.ts'
 
 const loading = ref(false)
 const items = ref<DigitalHumanVersion[]>([])
 
+/** 分页（对齐 admin.js:6311 pageSize=20 + 数字页码 + 跳转；Java 列表接口不分页，前端分页呈现）。 */
+const pageSize = 20
+const page = ref(1)
+const pagedItems = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return items.value.slice(start, start + pageSize)
+})
+
 const uploadVisible = ref(false)
 const uploading = ref(false)
+const uploadProgress = ref<number | null>(null)
 const form = ref({ version: '', file: null as { name?: string; size?: number } | null, changelog: '', minClientVersion: '' })
 
 const confirming = ref<string | null>(null)
+const downloadingVersion = ref<string | null>(null)
 
 async function load() {
   loading.value = true
   try {
     items.value = (await fetchDigitalHumanVersions()).items
+    // 数据收缩后页码越界回钳。
+    const last = Math.max(Math.ceil(items.value.length / pageSize), 1)
+    if (page.value > last) page.value = last
   } catch (error) {
     ElMessage.error(error instanceof Error ? error.message : '版本列表加载失败')
   } finally {
@@ -49,14 +66,19 @@ async function submitUpload() {
     return
   }
   uploading.value = true
+  uploadProgress.value = 0
   const version = (form.value.version || '').trim()
   try {
     await uploadDigitalHumanVersion(
       { version, file: form.value.file, changelog: form.value.changelog, minClientVersion: form.value.minClientVersion },
       form.value.file?.name,
+      (percent) => {
+        uploadProgress.value = percent
+      },
     )
     ElMessage.success(`上传成功！版本：${version}（状态：草稿，请在列表中点击“发布”按钮）`)
     uploadVisible.value = false
+    uploadProgress.value = null
     form.value = { version: '', file: null, changelog: '', minClientVersion: '' }
     load()
   } catch (error) {
@@ -100,10 +122,33 @@ async function setLatest(row: DigitalHumanVersion) {
   }
 }
 
+/** 下载（对齐 admin.js downloadDigitalHumanVersion：RELEASED 恒显示，点击取链接并触发下载）。 */
+async function download(row: DigitalHumanVersion) {
+  if (!row.version) return
+  downloadingVersion.value = row.version
+  try {
+    const url = await fetchDigitalHumanDownloadUrl(row.version)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = `ShuFuDigitalHuman-${row.version}.zip`
+    anchor.target = '_blank'
+    anchor.rel = 'noopener'
+    document.body.appendChild(anchor)
+    anchor.click()
+    document.body.removeChild(anchor)
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '下载失败')
+  } finally {
+    downloadingVersion.value = null
+  }
+}
+
 async function remove(row: DigitalHumanVersion) {
+  const text = digitalHumanDeleteConfirmText(row.version)
+  if (!text) return
   confirming.value = row.version
   try {
-    await ElMessageBox.confirm(`确定删除数字人版本 ${row.version} 吗？此操作不可恢复。`, '删除版本', {
+    await ElMessageBox.confirm(text, '删除版本', {
       type: 'warning',
       confirmButtonText: '删除',
       cancelButtonText: '取消',
@@ -123,6 +168,10 @@ function canDelete(row: DigitalHumanVersion): boolean {
   return row.isLatest !== true
 }
 
+function statusOf(row: DigitalHumanVersion): { text: string; tag: 'info' | 'success' | 'danger' } {
+  return digitalHumanStatusDisplay(row.status)
+}
+
 onMounted(load)
 </script>
 
@@ -131,20 +180,20 @@ onMounted(load)
     <div class="page-heading">
       <div>
         <h2>数字人版本管理</h2>
-        <p>管理数字人客户端的草稿/已发布版本。</p>
+        <p>管理数字人客户端的草稿/已发布/已废弃版本。</p>
       </div>
       <div class="actions">
-        <el-button type="primary" @click="uploadVisible = true">上传数字人版本</el-button>
+        <el-button type="primary" @click="uploadVisible = true">上传（草稿状态）</el-button>
       </div>
     </div>
 
     <el-card shadow="never">
-      <el-table v-loading="loading" :data="items" stripe border empty-text="暂无数字人版本">
+      <el-table v-loading="loading" :data="pagedItems" stripe border empty-text="暂无数字人版本">
         <el-table-column prop="version" label="版本号" min-width="150" />
         <el-table-column label="状态" width="100">
           <template #default="{ row }">
-            <el-tag :type="(digitalHumanStatusDisplay((row as DigitalHumanVersion).status).tag as 'success' | 'info')" size="small">
-              {{ digitalHumanStatusDisplay((row as DigitalHumanVersion).status).text }}
+            <el-tag :type="statusOf(row as DigitalHumanVersion).tag" size="small">
+              {{ statusOf(row as DigitalHumanVersion).text }}
             </el-tag>
           </template>
         </el-table-column>
@@ -155,37 +204,51 @@ onMounted(load)
           </template>
         </el-table-column>
         <el-table-column label="文件大小" width="100">
-          <template #default="{ row }">{{ (row as DigitalHumanVersion).fileSize != null ? formatFileSize((row as DigitalHumanVersion).fileSize!) : '—' }}</template>
+          <template #default="{ row }">{{ digitalHumanVersionFileSizeText((row as DigitalHumanVersion).fileSize) }}</template>
         </el-table-column>
         <el-table-column label="MD5" width="130">
           <template #default="{ row }">
-            <span :title="(row as DigitalHumanVersion).md5 || ''">{{ md5Short((row as DigitalHumanVersion).md5) || '—' }}</span>
+            <span :title="(row as DigitalHumanVersion).md5 || ''">{{ (row as DigitalHumanVersion).md5 ? `${((row as DigitalHumanVersion).md5 || '').substring(0, 12)}...` : '—' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="更新说明" min-width="180">
+          <template #default="{ row }">
+            <span :title="(row as DigitalHumanVersion).changelog || ''">{{ digitalHumanChangelogShort((row as DigitalHumanVersion).changelog) }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="changelog" label="更新说明" min-width="180" show-overflow-tooltip />
         <el-table-column label="发布时间" min-width="170">
           <template #default="{ row }">{{ formatDateTime((row as DigitalHumanVersion).releasedAt) }}</template>
         </el-table-column>
-        <el-table-column label="操作" width="210" fixed="right">
+        <el-table-column label="操作" width="240" fixed="right">
           <template #default="{ row }">
             <el-button v-if="canReleaseDigitalHumanVersion((row as DigitalHumanVersion).status)" text type="warning" size="small" :loading="confirming === (row as DigitalHumanVersion).version" @click="release(row as DigitalHumanVersion)">发布</el-button>
-            <el-button v-if="!canReleaseDigitalHumanVersion((row as DigitalHumanVersion).status) && canSetLatestDigitalHumanVersion((row as DigitalHumanVersion).status) && !(row as DigitalHumanVersion).isLatest" text type="primary" size="small" :loading="confirming === (row as DigitalHumanVersion).version" @click="setLatest(row as DigitalHumanVersion)">设最新</el-button>
-            <el-button v-if="(row as DigitalHumanVersion).downloadUrl" text type="success" size="small">
-              <el-link type="success" :href="(row as DigitalHumanVersion).downloadUrl" target="_blank">下载</el-link>
-            </el-button>
+            <el-button v-if="!canReleaseDigitalHumanVersion((row as DigitalHumanVersion).status) && canSetLatestDigitalHumanVersion((row as DigitalHumanVersion).status) && !(row as DigitalHumanVersion).isLatest" text type="primary" size="small" :loading="confirming === (row as DigitalHumanVersion).version" @click="setLatest(row as DigitalHumanVersion)">设为最新</el-button>
+            <el-button v-if="canSetLatestDigitalHumanVersion((row as DigitalHumanVersion).status)" text type="success" size="small" :loading="downloadingVersion === (row as DigitalHumanVersion).version" @click="download(row as DigitalHumanVersion)">下载</el-button>
             <el-button v-if="canDelete(row as DigitalHumanVersion)" text type="danger" size="small" :loading="confirming === (row as DigitalHumanVersion).version" @click="remove(row as DigitalHumanVersion)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
+      <div class="table-footer">
+        <span>共 {{ items.length.toLocaleString() }} 条</span>
+        <el-pagination
+          background
+          layout="prev, pager, next, jumper"
+          :total="items.length"
+          :page-size="pageSize"
+          :current-page="page"
+          @current-change="(p: number) => { page = p }"
+        />
+      </div>
     </el-card>
 
     <el-dialog v-model="uploadVisible" title="上传数字人版本" width="560px">
+      <p class="upload-desc">上传数字人程序 ZIP 包，系统会自动计算 MD5 并存储到 OSS。上传后状态为草稿，需要手动发布。</p>
       <el-form label-width="110px">
         <el-form-item label="版本号" required>
           <el-input v-model="form.version" placeholder="如 1.0.2" />
         </el-form-item>
         <el-form-item label="压缩包" required>
-          <el-upload :auto-upload="false" :limit="1" accept=".zip,.rar,.7z" :on-change="(file: any) => onFileChange(file.raw)" :on-remove="() => (form.file = null)">
+          <el-upload :auto-upload="false" :limit="1" accept=".zip" :on-change="(file: any) => onFileChange(file.raw)" :on-remove="() => (form.file = null)">
             <el-button>选择文件</el-button>
           </el-upload>
           <div v-if="form.file" class="dim">{{ form.file.name }}</div>
@@ -196,10 +259,11 @@ onMounted(load)
         <el-form-item label="更新说明">
           <el-input v-model="form.changelog" type="textarea" :rows="3" placeholder="可选" />
         </el-form-item>
+        <el-alert v-if="uploading && uploadProgress != null" :title="`正在上传：${uploadProgress}%`" type="info" :closable="false" show-icon />
       </el-form>
       <template #footer>
         <el-button @click="uploadVisible = false">取消</el-button>
-        <el-button type="primary" :loading="uploading" @click="submitUpload">上传</el-button>
+        <el-button type="primary" :loading="uploading" @click="submitUpload">上传（草稿状态）</el-button>
       </template>
     </el-dialog>
   </div>
@@ -210,4 +274,7 @@ onMounted(load)
 .actions { display: flex; align-items: center; gap: 10px; }
 .dim { color: var(--el-text-color-secondary); font-size: 12px; }
 .star { color: #e6a23c; font-weight: 700; }
+.upload-desc { margin: 0 0 12px; color: var(--el-text-color-secondary); font-size: 12.5px; line-height: 1.6; }
+.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
+.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
 </style>