From cfbf4ad2b4450fb35ec428cf16d61d196772739c Mon Sep 17 00:00:00 2001
From: zikai <1621362626@qq.com>
Date: Mon, 27 Jul 2026 17:37:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20PDF=20=E9=A1=B5=E7=AD=BE=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

窄屏（≤768px，与宿主 zMainPage 断点一致）优化：
- JobList 表格转卡片式：文件名为标题，大小/时间降为次要行（带列名前缀），
  状态与操作独占一行，避免横向滚动；表头隐藏
- Uploader 拖拽区缩小（padding 40->24、min-height 160->120），移动端无拖拽语义
- 按钮触控目标加大（padding 5->8、font 0.85->0.9），符合移动端可点击区建议
- 统一断点为 768px（原 JobList 用 640px，与宿主不一致）
---
 src/components/JobList.vue  | 29 ++++++++++++++++++++++++-----
 src/components/Uploader.vue |  8 ++++++++
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/JobList.vue b/src/components/JobList.vue
index 934bc07..ad01e71 100644
--- a/src/components/JobList.vue
+++ b/src/components/JobList.vue
@@ -66,7 +66,7 @@ function onDelete(job) {
       <tbody>
         <tr v-for="j in items" :key="j.id">
           <td class="col-name">{{ j.source_filename }}</td>
-          <td class="col-size zpdf-mono">{{ fmtBytes(j.source_size) }}</td>
+          <td class="col-size zpdf-mono" :data-label="t('job.size')">{{ fmtBytes(j.source_size) }}</td>
           <td class="col-status">
             <span v-if="j.status === 'done' || j.status === 'failed'" :class="statusClass(j)">
               {{ statusText(j) }}
@@ -78,7 +78,7 @@ function onDelete(job) {
               </span>
             </span>
           </td>
-          <td class="col-time zpdf-muted">{{ fmtTime(j.created_at) }}</td>
+          <td class="col-time zpdf-muted" :data-label="t('job.created')">{{ fmtTime(j.created_at) }}</td>
           <td class="col-act">
             <a
               v-if="j.status === 'done'"
@@ -157,8 +157,27 @@ function onDelete(job) {
 }
 .zpdf-bar--sm { display: inline-block; width: 90px; vertical-align: middle; height: 6px; }
 
-@media (max-width: 640px) {
-  .zpdf-table th, .zpdf-table td { padding: 8px 6px; }
-  .zpdf-table .col-time { font-size: 0.78em; }
+@media (max-width: 768px) {
+  /* 窄屏：表格转卡片式，避免横向滚动。每行展示文件名（主）+ 状态（次）+ 操作 */
+  .zpdf-table, .zpdf-table thead, .zpdf-table tbody, .zpdf-table tr, .zpdf-table th, .zpdf-table td {
+    display: block; width: 100%;
+  }
+  .zpdf-table thead { display: none; } /* 卡片模式无需表头 */
+  .zpdf-table tr {
+    padding: 12px; border-bottom: 1px solid var(--border);
+  }
+  .zpdf-table tbody tr:hover td { background: transparent; }
+  .zpdf-table td {
+    padding: 4px 0; border-bottom: none; text-align: left;
+  }
+  /* 文件名为卡片标题，其余为次要行 */
+  .zpdf-table .col-name { font-size: 1em; margin-bottom: 4px; }
+  .zpdf-table .col-size::before { content: attr(data-label) " "; color: var(--text-tertiary); font-size: 0.82em; }
+  .zpdf-table .col-time::before { content: attr(data-label) " "; color: var(--text-tertiary); font-size: 0.82em; }
+  .zpdf-table .col-status { margin: 6px 0; }
+  .zpdf-table .col-act { margin-top: 8px; text-align: left; }
+  .zpdf-table .col-act .zpdf-btn { margin-left: 0; margin-right: 8px; }
+  /* 移动端触控目标加大 */
+  .zpdf-btn--sm { padding: 8px 16px; font-size: 0.9em; }
 }
 </style>
diff --git a/src/components/Uploader.vue b/src/components/Uploader.vue
index 6f73487..f94930c 100644
--- a/src/components/Uploader.vue
+++ b/src/components/Uploader.vue
@@ -128,4 +128,12 @@ async function handle(file) {
   margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm);
   background: var(--danger-weak); color: var(--danger); font-size: 0.88em;
 }
+
+@media (max-width: 768px) {
+  /* 移动端无拖拽语义，缩小拖拽区节省首屏；触控目标加大 */
+  .zpdf-dropzone { padding: 24px 16px; min-height: 120px; gap: 8px; }
+  .zpdf-dropzone__hint { font-size: 0.9em; }
+  .zpdf-btn { padding: 10px 22px; font-size: 1em; }
+  .zpdf-upload-progress__name { font-size: 0.85em; }
+}
 </style>