From 5b37e40db31120e7ee0008f09e03698ee8d3a0ed Mon Sep 17 00:00:00 2001
From: Quentin <quentin@noreply.localhost>
Date: Sun, 11 Oct 2026 19:09:51 +0800
Subject: [PATCH] =?UTF-8?q?refactor(BookDetail):=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E4=B8=8D=E7=A8=B3=E7=9A=84=20Arco=20=E5=AD=90=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20+=20=E8=87=AA=E5=AE=9E=E7=8E=B0=E7=AE=80=E6=B4=81?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 a-page-header/a-statistic/a-descriptions/a-list-item-meta
  (Arco 2.x 这些组件在 BookDetail 里有渲染问题)
- 顶部改用 a-card + flex 自定义布局
- 4 张统计卡用 div + 大数字
- 左侧目录改用 ul/li 自定义（避开 a-list slot 顺序坑）
- 右侧三 tab 保留 a-tabs，word/json 内用 div + a-button
---
 .../src/views/BookManage/BookDetail/index.vue | 507 ++++++++++--------
 1 file changed, 279 insertions(+), 228 deletions(-)

diff --git a/frontend/src/views/BookManage/BookDetail/index.vue b/frontend/src/views/BookManage/BookDetail/index.vue
index d51b495..2ff3ca3 100644
--- a/frontend/src/views/BookManage/BookDetail/index.vue
+++ b/frontend/src/views/BookManage/BookDetail/index.vue
@@ -5,8 +5,6 @@ import { getBook, type Book, retryFailed, softDeleteBook } from '@/api/book';
 import { getDocumentUrl } from '@/api/document';
 import { Message } from '@arco-design/web-vue';
 
-type FileKind = 'docx' | 'html' | 'json' | 'error_log';
-
 const route = useRoute();
 const router = useRouter();
 const bookId = Number(route.params.id);
@@ -16,23 +14,23 @@ const loading = ref(false);
 const selectedDocId = ref<string | null>(null);
 const activeTab = ref<'word' | 'html' | 'json'>('html');
 
-const selectedDoc = computed(() => {
-  if (!book.value || !selectedDocId.value) return null;
-  return book.value.documents.find((d) => d.doc_id === selectedDocId.value);
-});
-
-// 当前 tab 对应的 file_type
-const fileType: Record<typeof activeTab.value, FileKind> = {
+type FileKind = 'docx' | 'html' | 'json' | 'error_log';
+const fileTypeMap: Record<typeof activeTab.value, FileKind> = {
   word: 'docx',
   html: 'html',
   json: 'json',
 };
 
+const selectedDoc = computed(() => {
+  if (!book.value || !selectedDocId.value) return null;
+  return book.value.documents.find((d) => d.doc_id === selectedDocId.value);
+});
+
 const fileUrl = ref<string>('');
 const fileLoading = ref(false);
 
 const fetchFileUrl = async () => {
-  if (!selectedDoc.value || !activeTab.value) {
+  if (!selectedDoc.value) {
     fileUrl.value = '';
     return;
   }
@@ -40,9 +38,9 @@ const fetchFileUrl = async () => {
   try {
     const r = await getDocumentUrl(
       selectedDoc.value.doc_id,
-      fileType[activeTab.value],
+      fileTypeMap[activeTab.value],
     );
-    fileUrl.value = r.url;
+    fileUrl.value = r?.url ?? '';
   } catch (e) {
     fileUrl.value = '';
   } finally {
@@ -62,7 +60,7 @@ const fetchBook = async () => {
   }
 };
 
-watch([selectedDocId, activeTab], fetchFileUrl);
+watch([selectedDocId, activeTab], fetchFileUrl, { immediate: false });
 
 const onRetry = async () => {
   const r = await retryFailed(bookId);
@@ -82,21 +80,8 @@ const onDelete = async () => {
   }
 };
 
-const formatBytes = (n: number): string => {
-  if (!n) return '0 B';
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  return `${(n / 1024 / 1024).toFixed(2)} MB`;
-};
-
-const statusColor: Record<string, string> = {
-  pending: 'gray',
-  processing: 'arcoblue',
-  html_ready: 'green',
-  json_ready: 'green',
-  done: 'green',
-  failed: 'red',
-  partial: 'orange',
+const openInNewTab = (url: string) => {
+  window.open(url, '_blank');
 };
 
 const statusText: Record<string, string> = {
@@ -109,13 +94,14 @@ const statusText: Record<string, string> = {
   partial: '部分失败',
 };
 
-const docTypeColor: Record<string, string> = {
-  课时作业: 'arcoblue',
-  周末提升: 'purple',
-  阶段质量评估: 'orange',
-  期末质量评估: 'red',
-  answer: 'cyan',
-  unknown: 'gray',
+const statusColor: Record<string, string> = {
+  pending: 'gray',
+  processing: 'arcoblue',
+  html_ready: 'green',
+  json_ready: 'green',
+  failed: 'red',
+  partial: 'orange',
+  done: 'green',
 };
 
 const completionRate = computed(() => {
@@ -123,31 +109,31 @@ const completionRate = computed(() => {
   return Math.round((book.value.success_count / book.value.total_count) * 100);
 });
 
-const openInNewTab = (url: string) => {
-  window.open(url, '_blank');
-};
+const truncate = (s: string, len = 8) => (s ? `${s.slice(0, len)}…` : '');
 
 onMounted(fetchBook);
 </script>
 
 <template>
   <div class="book-detail">
-    <a-skeleton v-if="loading" :rows="6" />
+    <a-skeleton v-if="loading" :rows="8" />
+
     <template v-else-if="book">
       <!-- 顶部：标题 + 操作 -->
-      <a-page-header :title="book.name">
-        <template #subtitle>
-          <a-space>
-            <a-tag :color="statusColor[book.status]" size="medium">
-              {{ statusText[book.status] || book.status }}
-            </a-tag>
-            <span class="subtitle-id">ID: {{ book.id }}</span>
-            <span v-if="book.subject">· {{ book.subject }}</span>
-            <span v-if="book.grade">· {{ book.grade }}</span>
-            <span v-if="book.version">· {{ book.version }}</span>
-          </a-space>
-        </template>
-        <template #extra>
+      <a-card :bordered="false" class="header-card">
+        <div class="header-row">
+          <div class="header-info">
+            <div class="book-name">{{ book.name }}</div>
+            <div class="book-meta">
+              <a-tag :color="statusColor[book.status]" size="small">
+                {{ statusText[book.status] || book.status }}
+              </a-tag>
+              <span class="meta-text">ID: {{ book.id }}</span>
+              <span v-if="book.subject" class="meta-text">{{ book.subject }}</span>
+              <span v-if="book.grade" class="meta-text">{{ book.grade }}</span>
+              <span v-if="book.version" class="meta-text">{{ book.version }}</span>
+            </div>
+          </div>
           <a-space>
             <a-button
               v-if="book.failed_count > 0"
@@ -156,162 +142,106 @@ onMounted(fetchBook);
             >
               <icon-refresh /> 重试失败
             </a-button>
-            <a-popconfirm
-              content="确定软删该教辅？"
-              @ok="onDelete"
-            >
+            <a-popconfirm content="确定软删该教辅？" @ok="onDelete">
               <a-button size="small" status="danger">
                 <icon-delete /> 删除
               </a-button>
             </a-popconfirm>
           </a-space>
-        </template>
-      </a-page-header>
+        </div>
+      </a-card>
 
-      <!-- 元信息 + 进度 -->
-      <a-row :gutter="16" class="meta-row">
+      <!-- 4 张统计卡 -->
+      <a-row :gutter="16" class="stat-row">
         <a-col :span="6">
-          <a-card class="stat-card" :bordered="false">
-            <a-statistic
-              title="文档总数"
-              :value="book.total_count"
-            />
+          <a-card :bordered="false" class="stat-card">
+            <div class="stat-label">文档总数</div>
+            <div class="stat-value">{{ book.total_count }}</div>
           </a-card>
         </a-col>
         <a-col :span="6">
-          <a-card class="stat-card stat-success" :bordered="false">
-            <a-statistic title="成功" :value="book.success_count">
-              <template #suffix>
-                <icon-check-circle />
-              </template>
-            </a-statistic>
+          <a-card :bordered="false" class="stat-card stat-ok">
+            <div class="stat-label">成功</div>
+            <div class="stat-value">{{ book.success_count }}</div>
           </a-card>
         </a-col>
         <a-col :span="6">
-          <a-card class="stat-card stat-fail" :bordered="false">
-            <a-statistic title="失败" :value="book.failed_count">
-              <template #suffix>
-                <icon-close-circle v-if="book.failed_count" />
-              </template>
-            </a-statistic>
+          <a-card :bordered="false" class="stat-card stat-fail">
+            <div class="stat-label">失败</div>
+            <div class="stat-value">{{ book.failed_count }}</div>
           </a-card>
         </a-col>
         <a-col :span="6">
-          <a-card class="stat-card" :bordered="false">
-            <a-progress
-              :percent="completionRate"
-              :stroke-width="10"
-              :color="completionRate === 100 ? '#00b42a' : '#165dff'"
-            />
+          <a-card :bordered="false" class="stat-card">
             <div class="stat-label">完成率</div>
+            <div class="stat-value">{{ completionRate }}%</div>
+            <div class="progress-bar">
+              <div
+                class="progress-fill"
+                :style="{
+                  width: completionRate + '%',
+                  background: completionRate === 100 ? '#00b42a' : '#165dff',
+                }"
+              />
+            </div>
           </a-card>
         </a-col>
       </a-row>
 
-      <a-descriptions
-        :column="4"
-        class="meta-desc"
-        size="small"
-        :bordered="false"
-      >
-        <a-descriptions-item label="zip sha256">
-          <a-typography-text code :ellipsis="{ showTooltip: true }">
-            {{ book.zip_sha256 }}
-          </a-typography-text>
-        </a-descriptions-item>
-        <a-descriptions-item label="zip 大小">
-          {{ formatBytes(book.zip_size) }}
-        </a-descriptions-item>
-        <a-descriptions-item label="创建">
-          {{ book.created_at?.slice(0, 19).replace('T', ' ') }}
-        </a-descriptions-item>
-        <a-descriptions-item label="更新">
-          {{ book.updated_at?.slice(0, 19).replace('T', ' ') }}
-        </a-descriptions-item>
-      </a-descriptions>
-
       <!-- 左侧目录 + 右侧 Tabs -->
       <div class="detail-body">
         <a-card
-          class="doc-list-card"
-          title="文档目录"
           :bordered="false"
+          class="doc-list-card"
         >
           <template #title>
-            <a-space>
+            <div class="card-title">
               <icon-list />
-              <span>文档目录 ({{ book.documents.length }})</span>
-            </a-space>
+              <span>文档目录（{{ book.documents.length }}）</span>
+            </div>
           </template>
-          <a-scrollbar style="height: 600px; overflow: auto;">
+          <a-scrollbar style="height: 640px">
             <a-empty
               v-if="!book.documents.length"
               description="暂无文档"
             />
-            <a-list v-else size="small" :bordered="false">
-              <a-list-item
+            <ul v-else class="doc-list">
+              <li
                 v-for="(doc, idx) in book.documents"
                 :key="doc.doc_id"
-                :class="['doc-list-item', { active: selectedDocId === doc.doc_id }]"
+                :class="['doc-item', { active: selectedDocId === doc.doc_id }]"
                 @click="selectedDocId = doc.doc_id"
               >
-                <template #actions>
-                  <a-tag
-                    size="small"
-                    :color="statusColor[doc.status]"
-                  >
-                    {{ statusText[doc.status] || doc.status }}
-                  </a-tag>
-                </template>
-                <a-list-item-meta>
-                  <template #avatar>
-                    <a-avatar
-                      shape="square"
-                      :size="32"
-                      :style="{
-                        backgroundColor: 'var(--color-fill-light-1)',
-                        color: statusColor[doc.status] === 'red'
-                          ? '#f53f3f'
-                          : '#165dff',
-                      }"
-                    >
-                      <icon-file />
-                    </a-avatar>
-                  </template>
-                  <template #title>
-                    <a-typography-text
-                      :ellipsis="{ rows: 1, showTooltip: true }"
-                    >
-                      <span class="doc-num">{{ idx + 1 }}.</span>
-                      {{ doc.original_filename.replace('.docx', '') }}
-                    </a-typography-text>
-                  </template>
-                  <template #description>
-                    <a-space size="mini">
-                      <a-tag
-                        v-if="doc.doc_type"
-                        size="mini"
-                        :color="docTypeColor[doc.doc_type] || 'gray'"
-                      >
-                        {{ doc.doc_type }}
-                      </a-tag>
-                      <span class="doc-id">{{ doc.doc_id.slice(0, 8) }}</span>
-                    </a-space>
-                  </template>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
+                <div class="doc-item-main">
+                  <div class="doc-item-title">
+                    <span class="doc-num">{{ idx + 1 }}.</span>
+                    <span class="doc-name">{{ doc.original_filename.replace('.docx', '') }}</span>
+                  </div>
+                  <div class="doc-item-meta">
+                    <span class="doc-id">{{ truncate(doc.doc_id, 10) }}</span>
+                  </div>
+                </div>
+                <a-tag
+                  size="small"
+                  :color="statusColor[doc.status] || 'gray'"
+                >
+                  {{ statusText[doc.status] || doc.status }}
+                </a-tag>
+              </li>
+            </ul>
           </a-scrollbar>
         </a-card>
 
-        <a-card class="preview-card" :bordered="false">
+        <a-card :bordered="false" class="preview-card">
           <template #title>
-            <a-space>
+            <div class="card-title" v-if="selectedDoc">
               <icon-eye />
-              <span class="preview-title">
-                {{ selectedDoc?.original_filename || '请选择文档' }}
-              </span>
-            </a-space>
+              <span>{{ selectedDoc.original_filename }}</span>
+            </div>
+            <div class="card-title" v-else>
+              <icon-eye />
+              <span>请选择文档</span>
+            </div>
           </template>
           <template v-if="selectedDoc">
             <a-tabs v-model:active-key="activeTab" type="rounded-card">
@@ -320,25 +250,30 @@ onMounted(fetchBook);
                   <icon-file /> Word 源文件
                 </template>
                 <div class="preview-pane">
-                  <a-button
-                    v-if="fileUrl"
-                    type="primary"
-                    @click="openInNewTab(fileUrl)"
-                  >
-                    <icon-download /> 下载 .docx
-                  </a-button>
-                  <div v-if="fileUrl" class="preview-info">
-                    <a-typography-paragraph>
-                      Word 源文件不能直接预览，请下载后用 Word/WPS 打开。
-                    </a-typography-paragraph>
+                  <a-empty
+                    v-if="!fileUrl"
+                    description="文件未上传"
+                  />
+                  <div v-else class="file-info">
+                    <icon-file :size="48" style="color: #165dff" />
+                    <div class="file-text">
+                      <div class="file-title">Word 源文件</div>
+                      <div class="file-hint">docx 格式不能直接在浏览器中预览</div>
+                    </div>
+                    <a-button
+                      type="primary"
+                      size="large"
+                      @click="openInNewTab(fileUrl)"
+                    >
+                      <icon-download /> 下载 .docx
+                    </a-button>
                   </div>
-                  <a-empty v-else description="文件未上传" />
                 </div>
               </a-tab-pane>
 
               <a-tab-pane key="html">
                 <template #title>
-                  <icon-file /> HTML 预览
+                  <icon-code /> HTML 预览
                 </template>
                 <div class="preview-pane">
                   <a-spin v-if="fileLoading" tip="加载中..." />
@@ -357,7 +292,7 @@ onMounted(fetchBook);
 
               <a-tab-pane key="json">
                 <template #title>
-                  <icon-code /> JSON 结构
+                  <icon-storage /> JSON 结构
                 </template>
                 <div class="preview-pane">
                   <a-spin v-if="fileLoading" tip="加载中..." />
@@ -365,13 +300,20 @@ onMounted(fetchBook);
                     v-else-if="!fileUrl"
                     description="JSON 未生成"
                   />
-                  <a-button
-                    v-else
-                    type="primary"
-                    @click="openInNewTab(fileUrl)"
-                  >
-                    <icon-download /> 下载 .json
-                  </a-button>
+                  <div v-else class="file-info">
+                    <icon-code :size="48" style="color: #165dff" />
+                    <div class="file-text">
+                      <div class="file-title">JSON 结构数据</div>
+                      <div class="file-hint">点击下载查看完整的题目结构</div>
+                    </div>
+                    <a-button
+                      type="primary"
+                      size="large"
+                      @click="openInNewTab(fileUrl)"
+                    >
+                      <icon-download /> 下载 .json
+                    </a-button>
+                  </div>
                 </div>
               </a-tab-pane>
             </a-tabs>
@@ -380,6 +322,7 @@ onMounted(fetchBook);
         </a-card>
       </div>
     </template>
+
     <a-empty v-else description="教辅不存在或已删除" />
   </div>
 </template>
@@ -387,45 +330,86 @@ onMounted(fetchBook);
 <style scoped lang="less">
 .book-detail {
   padding: 16px;
+  background: var(--color-fill-1);
+  min-height: 100%;
 
-  .subtitle-id {
-    color: var(--color-text-3);
-    font-family: var(--font-family-mono);
+  .header-card {
+    margin-bottom: 16px;
   }
 
-  .meta-row {
-    margin-bottom: 12px;
+  .header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .header-info {
+    flex: 1;
+    min-width: 0;
+
+    .book-name {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--color-text-1);
+      margin-bottom: 8px;
+      word-break: break-all;
+    }
+
+    .book-meta {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .meta-text {
+      color: var(--color-text-3);
+      font-size: 13px;
+    }
+  }
+
+  .stat-row {
+    margin-bottom: 16px;
   }
 
   .stat-card {
     :deep(.arco-card-body) {
-      padding: 16px;
+      padding: 16px 20px;
     }
 
     .stat-label {
-      margin-top: 8px;
-      color: var(--color-text-3);
       font-size: 13px;
+      color: var(--color-text-3);
+      margin-bottom: 4px;
     }
 
-    &.stat-success {
-      :deep(.arco-statistic-value) {
-        color: #00b42a;
-      }
+    .stat-value {
+      font-size: 28px;
+      font-weight: 600;
+      color: var(--color-text-1);
+      line-height: 1.2;
     }
 
-    &.stat-fail {
-      :deep(.arco-statistic-value) {
-        color: #f53f3f;
-      }
+    .progress-bar {
+      margin-top: 8px;
+      height: 6px;
+      background: var(--color-fill-3);
+      border-radius: 3px;
+      overflow: hidden;
     }
-  }
 
-  .meta-desc {
-    margin-bottom: 16px;
-    padding: 12px 16px;
-    background: var(--color-fill-1);
-    border-radius: 4px;
+    .progress-fill {
+      height: 100%;
+      transition: width 0.3s;
+    }
+
+    &.stat-ok .stat-value {
+      color: #00b42a;
+    }
+
+    &.stat-fail .stat-value {
+      color: #f53f3f;
+    }
   }
 
   .detail-body {
@@ -434,56 +418,123 @@ onMounted(fetchBook);
     gap: 16px;
   }
 
-  .doc-list-card {
-    height: fit-content;
+  .card-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 15px;
+    font-weight: 500;
+  }
 
-    .doc-list-item {
-      cursor: pointer;
-      padding: 8px 12px;
+  .doc-list-card {
+    align-self: start;
+
+    .doc-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .doc-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 12px;
+      margin-bottom: 4px;
       border-radius: 4px;
-      transition: background 0.15s;
+      cursor: pointer;
+      transition: all 0.15s;
+      border: 1px solid transparent;
 
       &:hover {
         background: var(--color-fill-2);
       }
 
       &.active {
-        background: var(--color-primary-light-1);
+        background: rgb(var(--primary-1));
+        border-color: rgb(var(--primary-3));
 
-        :deep(.arco-list-item-meta-title) {
+        .doc-name {
           color: rgb(var(--primary-6));
+          font-weight: 500;
         }
       }
     }
 
+    .doc-item-main {
+      flex: 1;
+      min-width: 0;
+      margin-right: 8px;
+    }
+
+    .doc-item-title {
+      display: flex;
+      align-items: baseline;
+      gap: 4px;
+    }
+
     .doc-num {
       color: var(--color-text-3);
-      margin-right: 6px;
       font-family: var(--font-family-mono);
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+
+    .doc-name {
+      font-size: 13px;
+      color: var(--color-text-1);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .doc-item-meta {
+      margin-top: 2px;
+      font-size: 11px;
+      color: var(--color-text-4);
     }
 
     .doc-id {
-      color: var(--color-text-4);
       font-family: var(--font-family-mono);
-      font-size: 11px;
     }
   }
 
   .preview-card {
     min-height: 700px;
 
-    .preview-title {
-      font-weight: 500;
-    }
-
     .preview-pane {
       min-height: 600px;
-      padding: 12px;
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
-    .preview-info {
-      margin-top: 16px;
-      color: var(--color-text-3);
+    .file-info {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      padding: 32px;
+      background: var(--color-fill-1);
+      border-radius: 8px;
+      width: 100%;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    .file-text {
+      flex: 1;
+
+      .file-title {
+        font-size: 16px;
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+
+      .file-hint {
+        font-size: 13px;
+        color: var(--color-text-3);
+      }
     }
 
     .preview-iframe {