align(records·像素复刻): 软件版本(全量无分页同旧版)/数字人版本(三态色/最新★/操作矩阵/数字页码分页) 自绘复刻旧版；确认走原生 confirm 对齐旧版

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-/** 数字人版本管理页（module 13 task 261 对齐 admin panel-digital-human-version；本轮补齐分页/三态/上传进度/下载语义）。 */
+/** 数字人版本管理页 · 像素复刻旧版 admin.html panel-digital-human-version（自绘：面板头+上传、三态状态色、最新★、操作矩阵、数字页码分页）。
+ *   script 逻辑沿用现有 Vue 实现（确认文案/上传进度/下载取链接）；确认走原生 confirm 对齐旧版。 */
 import { formatDateTime } from '@/utils/datetime'
 import { computed, onMounted, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import {
   deleteDigitalHumanVersion,
   fetchDigitalHumanDownloadUrl,
@@ -32,6 +33,8 @@ const pagedItems = computed(() => {
   const start = (page.value - 1) * pageSize
   return items.value.slice(start, start + pageSize)
 })
+const totalPages = computed(() => Math.max(1, Math.ceil(items.value.length / pageSize)))
+const jumpPage = ref('')
 
 const uploadVisible = ref(false)
 const uploading = ref(false)
@@ -55,6 +58,20 @@ async function load() {
   }
 }
 
+function changePage(next: number): void {
+  if (next < 1 || next > totalPages.value) return
+  page.value = next
+}
+
+function goJump(): void {
+  const n = Number.parseInt(jumpPage.value, 10)
+  if (Number.isNaN(n)) {
+    ElMessage.warning('请输入页码')
+    return
+  }
+  changePage(Math.min(Math.max(n, 1), totalPages.value))
+}
+
 function onFileChange(file: File) {
   form.value.file = file
 }
@@ -91,14 +108,14 @@ async function submitUpload() {
 async function release(row: DigitalHumanVersion) {
   const text = releaseDigitalHumanConfirmText(row.version)
   if (!text) return
+  // 对齐旧版：原生 confirm。
+  if (!window.confirm(text)) return
   confirming.value = row.version
   try {
-    await ElMessageBox.confirm(text, '发布版本', { type: 'warning', confirmButtonText: '发布', cancelButtonText: '取消' })
     await releaseDigitalHumanVersion(row.version)
     ElMessage.success('已发布')
     load()
   } catch (error) {
-    if (error === 'cancel' || error === 'close') return
     ElMessage.error(error instanceof Error ? error.message : '发布失败')
   } finally {
     confirming.value = null
@@ -108,14 +125,13 @@ async function release(row: DigitalHumanVersion) {
 async function setLatest(row: DigitalHumanVersion) {
   const text = setLatestDigitalHumanConfirmText(row.version)
   if (!text) return
+  if (!window.confirm(text)) return
   confirming.value = row.version
   try {
-    await ElMessageBox.confirm(text, '设为最新', { type: 'warning', confirmButtonText: '设为最新', cancelButtonText: '取消' })
     await setLatestDigitalHumanVersion(row.version)
     ElMessage.success('已设为最新')
     load()
   } catch (error) {
-    if (error === 'cancel' || error === 'close') return
     ElMessage.error(error instanceof Error ? error.message : '操作失败')
   } finally {
     confirming.value = null
@@ -146,18 +162,13 @@ async function download(row: DigitalHumanVersion) {
 async function remove(row: DigitalHumanVersion) {
   const text = digitalHumanDeleteConfirmText(row.version)
   if (!text) return
+  if (!window.confirm(text)) return
   confirming.value = row.version
   try {
-    await ElMessageBox.confirm(text, '删除版本', {
-      type: 'warning',
-      confirmButtonText: '删除',
-      cancelButtonText: '取消',
-    })
     await deleteDigitalHumanVersion(row.version)
     ElMessage.success('删除成功')
     load()
   } catch (error) {
-    if (error === 'cancel' || error === 'close') return
     ElMessage.error(error instanceof Error ? error.message : '删除失败')
   } finally {
     confirming.value = null
@@ -176,70 +187,83 @@ onMounted(load)
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>数字人版本管理</h2>
-        <p>管理数字人客户端的草稿/已发布/已废弃版本。</p>
+  <div class="dh-view">
+    <section class="panel-box">
+      <div class="dh-head">
+        <h3>版本列表</h3>
+        <button class="btn" type="button" @click="uploadVisible = true">上传新版本</button>
       </div>
-    </div>
 
-    <el-card shadow="never">
-      <div class="table-toolbar">
-        <el-button type="primary" @click="uploadVisible = true">上传（草稿状态）</el-button>
+      <div class="table-scroll digital-human-version-table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 80px">版本号</th>
+              <th style="width: 60px">状态</th>
+              <th style="width: 60px">最新</th>
+              <th style="width: 80px">文件大小</th>
+              <th style="width: 120px">MD5</th>
+              <th>更新日志</th>
+              <th style="width: 140px">发布时间</th>
+              <th style="width: 240px">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="pagedItems.length">
+              <tr v-for="row in pagedItems" :key="row.version + row.id">
+                <td><span class="mono-cell">{{ row.version }}</span></td>
+                <td>
+                  <span class="st-pill" :class="`is-${statusOf(row).tag}`">{{ statusOf(row).text }}</span>
+                </td>
+                <td><span v-if="row.isLatest" class="star" title="最新版本">★</span><span v-else class="dim">—</span></td>
+                <td>{{ digitalHumanVersionFileSizeText(row.fileSize) }}</td>
+                <td><span :title="row.md5 || ''" class="mono-cell">{{ row.md5 ? `${row.md5.substring(0, 12)}...` : '—' }}</span></td>
+                <td>
+                  <span :title="row.changelog || ''" class="changelog-cell">{{ digitalHumanChangelogShort(row.changelog) }}</span>
+                </td>
+                <td>{{ formatDateTime(row.releasedAt) }}</td>
+                <td class="ops-cell">
+                  <button v-if="canReleaseDigitalHumanVersion(row.status)" class="btn btn-sm" type="button" :disabled="confirming === row.version" @click="release(row)">发布</button>
+                  <button
+                    v-if="!canReleaseDigitalHumanVersion(row.status) && canSetLatestDigitalHumanVersion(row.status) && !row.isLatest"
+                    class="btn btn-sm"
+                    type="button"
+                    :disabled="confirming === row.version"
+                    @click="setLatest(row)"
+                  >
+                    设为最新
+                  </button>
+                  <button v-if="canSetLatestDigitalHumanVersion(row.status)" class="btn btn-sm btn-secondary" type="button" :disabled="downloadingVersion === row.version" @click="download(row)">下载</button>
+                  <button v-if="canDelete(row)" class="btn btn-sm btn-danger" type="button" :disabled="confirming === row.version" @click="remove(row)">删除</button>
+                </td>
+              </tr>
+            </template>
+            <tr v-else-if="loading">
+              <td colspan="8" class="empty-tip">加载中...</td>
+            </tr>
+            <tr v-else>
+              <td colspan="8" class="empty-tip">暂无版本记录</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <el-table v-loading="loading" :data="pagedItems" stripe border empty-text="暂无数字人版本">
-        <el-table-column prop="version" label="版本号" min-width="150" />
-        <el-table-column label="状态" min-width="100">
-          <template #default="{ row }">
-            <el-tag :type="statusOf(row as DigitalHumanVersion).tag" size="small">
-              {{ statusOf(row as DigitalHumanVersion).text }}
-            </el-tag>
+
+      <div v-if="items.length > pageSize" class="pagination">
+        <button type="button" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
+        <span class="page-nums">
+          <template v-for="n in totalPages" :key="n">
+            <button type="button" class="num-page" :class="{ 'is-active': n === page }" @click="changePage(n)">{{ n }}</button>
           </template>
-        </el-table-column>
-        <el-table-column label="最新" min-width="60" align="center">
-          <template #default="{ row }">
-            <span v-if="(row as DigitalHumanVersion).isLatest" class="star" title="最新版本">★</span>
-            <span v-else>—</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="文件大小" min-width="100">
-          <template #default="{ row }">{{ digitalHumanVersionFileSizeText((row as DigitalHumanVersion).fileSize) }}</template>
-        </el-table-column>
-        <el-table-column label="MD5" min-width="130">
-          <template #default="{ row }">
-            <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 label="发布时间" min-width="170">
-          <template #default="{ row }">{{ formatDateTime((row as DigitalHumanVersion).releasedAt) }}</template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="240" fixed="right">
-          <template #default="{ row }">
-            <el-button v-if="canReleaseDigitalHumanVersion((row as DigitalHumanVersion).status)" 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" 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)" 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)" 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 }"
-        />
+        </span>
+        <button type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
+        <span class="page-jump">
+          跳至
+          <input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
+          页
+          <button type="button" @click="goJump">跳转</button>
+        </span>
       </div>
-    </el-card>
+    </section>
 
     <el-dialog v-model="uploadVisible" title="上传数字人版本" width="560px">
       <p class="upload-desc">上传数字人程序 ZIP 包，系统会自动计算 MD5 并存储到 OSS。上传后状态为草稿，需要手动发布。</p>
@@ -270,10 +294,239 @@ onMounted(load)
 </template>
 
 <style scoped>
-.page-heading { display: flex; justify-content: space-between; align-items: flex-start; }
-.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; }
+/* 像素复刻旧版 admin.html panel-digital-human-version（蓝白末层）。 */
+.dh-view {
+  font-family: inherit;
+  color: #24384d;
+}
+.panel-box {
+  width: 100%;
+  min-width: 0;
+  padding: 20px 22px 24px;
+  border: 1px solid #d8e3ee;
+  border-radius: 14px;
+  background: linear-gradient(145deg, #ffffff, #f9fbfd);
+  box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
+}
+h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+  color: #24384d;
+  letter-spacing: 0.2px;
+}
+.dh-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 9px 18px;
+  border: 1px solid #4f78a5;
+  border-radius: 9px;
+  background: linear-gradient(135deg, #5f85ad, #4f78a5);
+  color: #ffffff;
+  font-family: inherit;
+  font-size: 13.5px;
+  cursor: pointer;
+  box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
+  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
+}
+.btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #7094ba, #5d83ac);
+  box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
+}
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.btn-secondary {
+  background: #ffffff;
+  color: #5b6f83;
+  border-color: #c7d7e5;
+}
+.btn-secondary:hover:not(:disabled) {
+  color: #2f5d8b;
+  border-color: #95b1cb;
+  background: #edf5fb;
+}
+.btn-danger {
+  background: linear-gradient(135deg, #c06d77, #b35f6a);
+  border-color: #b35f6a;
+}
+.btn-danger:hover:not(:disabled) {
+  background: linear-gradient(135deg, #cb7c84, #b96570);
+}
+.btn-sm {
+  min-height: 36px;
+  padding: 7px 12px;
+}
+.table-scroll {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  border: 1px solid #dbe5ee;
+  border-radius: 10px;
+  background: #ffffff;
+}
+.table-scroll table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.digital-human-version-table-scroll > table {
+  min-width: 1120px;
+}
+.table-scroll th,
+.table-scroll td {
+  padding: 10px 12px;
+  text-align: left;
+  font-size: 13.5px;
+  line-height: 1.5;
+  border-bottom: 1px solid #e0e8ef;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.table-scroll th {
+  background: #edf4fa;
+  color: #4e6479;
+  border-bottom-color: #d5e1eb;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+.table-scroll tbody tr:hover td {
+  background: #f1f7fb;
+}
+.table-scroll tbody tr:last-child td {
+  border-bottom: 0;
+}
+.mono-cell {
+  font-family: "Cascadia Mono", Consolas, monospace;
+  font-size: 12.5px;
+}
+.st-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 1.7;
+  border: 1px solid transparent;
+}
+.st-pill.is-info {
+  color: #6b7280;
+  background: #f1f3f5;
+  border-color: #dfe3e8;
+}
+.st-pill.is-success {
+  color: #398a3f;
+  background: #eaf7ec;
+  border-color: #bfe3c5;
+}
+.st-pill.is-danger {
+  color: #b8454d;
+  background: #fbedee;
+  border-color: #ecc9cc;
+}
+.star {
+  color: #d64545;
+  font-weight: 700;
+}
+.changelog-cell {
+  display: block;
+  color: #5b6f83;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ops-cell {
+  white-space: nowrap;
+}
+.ops-cell .btn + .btn {
+  margin-left: 8px;
+}
+.empty-tip {
+  padding: 44px 24px;
+  text-align: center;
+  color: #8293a5;
+  font-size: 13.5px;
+}
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 18px;
+  color: #5b6f83;
+  font-size: 13px;
+}
+.pagination button {
+  min-height: 30px;
+  padding: 4px 12px;
+  border: 1px solid #c7d7e5;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #5b6f83;
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.pagination button:hover:not(:disabled) {
+  background: #edf5fb;
+  border-color: #95b1cb;
+  color: #2f5d8b;
+}
+.pagination button:disabled {
+  background: #eef3f7;
+  color: #9baaba;
+  cursor: not-allowed;
+}
+.page-nums {
+  display: inline-flex;
+  gap: 6px;
+}
+.num-page {
+  min-width: 30px;
+  padding: 4px 8px;
+}
+.num-page.is-active {
+  background: #2f5d8b;
+  border-color: #2f5d8b;
+  color: #ffffff;
+}
+.page-jump {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.page-jump input {
+  width: 56px;
+  min-height: 30px;
+  padding: 4px 8px;
+  border: 1px solid #cbd9e6;
+  border-radius: 8px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13px;
+  font-family: inherit;
+}
+.dim {
+  color: #8293a5;
+  font-size: 12px;
+}
+.upload-desc {
+  margin: 0 0 12px;
+  color: #5b6f83;
+  font-size: 12.5px;
+  line-height: 1.6;
+}
 </style>

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { formatDateTime } from '@/utils/datetime'
-/** 软件版本管理页：客户端版本列表 + 上传新版本（成功留驻弹窗含链接，对齐 admin panel-version）。 */
-import { computed, onMounted, ref } from 'vue'
+/** 软件版本管理页 · 像素复刻旧版 admin.html panel-version（自绘：面板头+上传新版本、版本列表、全量无分页同旧版）。
+ *   script 逻辑沿用现有 Vue 实现（上传弹窗成功留驻含链接）。 */
+import { onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { fetchSoftwareVersions, uploadSoftwareVersion } from './version-api.ts'
 import type { SoftwareVersionItem } from './version-dto.ts'
@@ -9,15 +10,6 @@ import { isNonEmptyVersion } from './version-dto.ts'
 
 const loading = ref(false)
 const items = ref<SoftwareVersionItem[]>([])
-// 客户端分页：全量拉取后按页切片展示。
-const page = ref(1)
-const pageSize = 10
-const total = computed(() => items.value.length)
-const pagedItems = computed(() => items.value.slice((page.value - 1) * pageSize, page.value * pageSize))
-
-function changePage(p: number) {
-  page.value = p
-}
 
 const uploadVisible = ref(false)
 const uploading = ref(false)
@@ -87,40 +79,48 @@ onMounted(load)
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>软件版本管理</h2>
-        <p>管理客户端更新包版本（用于 /api/version/latest 下发）。</p>
+  <div class="version-view">
+    <section class="panel-box">
+      <div class="version-head">
+        <h3>版本列表</h3>
+        <button class="btn" type="button" @click="openUpload">上传新版本</button>
       </div>
-    </div>
 
-    <el-card shadow="never">
-      <div class="table-toolbar">
-        <el-button type="primary" @click="openUpload">上传新版本</el-button>
+      <div class="table-scroll version-table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 120px">版本号</th>
+              <th>下载链接</th>
+              <th style="width: 160px">创建时间</th>
+              <th style="width: 120px">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="items.length">
+              <tr v-for="row in items" :key="row.version + row.id">
+                <td>{{ row.version }}</td>
+                <td>
+                  <a v-if="row.fileUrl" class="link-cell" :href="row.fileUrl" target="_blank" rel="noopener" :title="row.fileUrl">{{ row.fileUrl }}</a>
+                  <span v-else class="dim">—</span>
+                </td>
+                <td>{{ formatDateTime(row.createdAt) }}</td>
+                <td>
+                  <a v-if="row.fileUrl" class="btn btn-sm btn-secondary dl-btn" :href="row.fileUrl" download>下载</a>
+                  <span v-else class="dim">—</span>
+                </td>
+              </tr>
+            </template>
+            <tr v-else-if="loading">
+              <td colspan="4" class="empty-tip">加载中...</td>
+            </tr>
+            <tr v-else>
+              <td colspan="4" class="empty-tip">暂无版本记录</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <el-table v-loading="loading" :data="pagedItems" stripe border empty-text="暂无版本记录">
-        <el-table-column prop="version" label="版本号" min-width="180" />
-        <el-table-column label="下载链接" min-width="240">
-          <template #default="{ row }">
-            <a v-if="(row as SoftwareVersionItem).fileUrl" class="el-link el-link--primary" :href="(row as SoftwareVersionItem).fileUrl" target="_blank" rel="noopener">{{ (row as SoftwareVersionItem).fileUrl }}</a>
-            <span v-else class="dim">—</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" min-width="190">
-          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="90" fixed="right">
-          <template #default="{ row }">
-            <a v-if="(row as SoftwareVersionItem).fileUrl" class="el-link el-link--primary" :href="(row as SoftwareVersionItem).fileUrl" download>下载</a>
-            <span v-else class="dim">—</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="table-footer">
-        <el-pagination background layout="prev, pager, next, jumper" :total="total" :page-size="pageSize" :current-page="page" @current-change="changePage" />
-      </div>
-    </el-card>
+    </section>
 
     <el-dialog v-model="uploadVisible" title="上传新版本" width="520px">
       <p class="upload-desc">上传软件 ZIP 包，系统会自动计算 MD5 并存储到 OSS。</p>
@@ -146,10 +146,153 @@ onMounted(load)
 </template>
 
 <style scoped>
-.page-heading { display: flex; justify-content: space-between; align-items: flex-start; }
-.dim { color: var(--el-text-color-secondary); font-size: 12px; }
-.upload-desc { margin: 0 0 12px; color: var(--el-text-color-secondary); font-size: 12.5px; line-height: 1.6; }
-.zip-hint { margin: 4px 0 0; color: var(--el-text-color-secondary); font-size: 12px; }
-.upload-msg { margin-bottom: 8px; }
-.upload-msg :deep(.el-alert__title) { word-break: break-all; }
+/* 像素复刻旧版 admin.html panel-version（蓝白末层）。 */
+.version-view {
+  font-family: inherit;
+  color: #24384d;
+}
+.panel-box {
+  width: 100%;
+  min-width: 0;
+  padding: 20px 22px 24px;
+  border: 1px solid #d8e3ee;
+  border-radius: 14px;
+  background: linear-gradient(145deg, #ffffff, #f9fbfd);
+  box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
+}
+h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+  color: #24384d;
+  letter-spacing: 0.2px;
+}
+.version-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 9px 18px;
+  border: 1px solid #4f78a5;
+  border-radius: 9px;
+  background: linear-gradient(135deg, #5f85ad, #4f78a5);
+  color: #ffffff;
+  font-family: inherit;
+  font-size: 13.5px;
+  cursor: pointer;
+  box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
+  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
+}
+.btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #7094ba, #5d83ac);
+  box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
+}
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.btn-secondary {
+  background: #ffffff;
+  color: #5b6f83;
+  border-color: #c7d7e5;
+}
+.btn-secondary:hover:not(:disabled) {
+  color: #2f5d8b;
+  border-color: #95b1cb;
+  background: #edf5fb;
+}
+.btn-sm {
+  min-height: 36px;
+  padding: 7px 12px;
+}
+.table-scroll {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  border: 1px solid #dbe5ee;
+  border-radius: 10px;
+  background: #ffffff;
+}
+.table-scroll table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.version-table-scroll > table {
+  min-width: 760px;
+}
+.table-scroll th,
+.table-scroll td {
+  padding: 10px 12px;
+  text-align: left;
+  font-size: 13.5px;
+  line-height: 1.5;
+  border-bottom: 1px solid #e0e8ef;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.table-scroll th {
+  background: #edf4fa;
+  color: #4e6479;
+  border-bottom-color: #d5e1eb;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+.table-scroll tbody tr:hover td {
+  background: #f1f7fb;
+}
+.table-scroll tbody tr:last-child td {
+  border-bottom: 0;
+}
+.link-cell {
+  display: block;
+  color: #2f5d8b;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.link-cell:hover {
+  text-decoration: underline;
+}
+.dl-btn {
+  text-decoration: none;
+}
+.dim {
+  color: #8293a5;
+  font-size: 12px;
+}
+.empty-tip {
+  padding: 44px 24px;
+  text-align: center;
+  color: #8293a5;
+  font-size: 13.5px;
+}
+.upload-desc {
+  margin: 0 0 12px;
+  color: #5b6f83;
+  font-size: 12.5px;
+  line-height: 1.6;
+}
+.zip-hint {
+  margin: 4px 0 0;
+  color: #5b6f83;
+  font-size: 12px;
+}
+.upload-msg {
+  margin-bottom: 8px;
+}
+.upload-msg :deep(.el-alert__title) {
+  word-break: break-all;
+}
 </style>