feat: PDF 页签移动端兼容

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

README.md

@@ -1,6 +1,6 @@
 # zPDF_package - PDF 转换前端
 
-上传 epub 文件转为 PDF，显示转换进度，完成后下载。复用 [zTools2](https://git.zikai.wang/zikai/zTools2) 后端 API（`/api/pdf/*`）。便携式组件，可独立运行，亦可作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的子模块经 iframe 集成展示。
+上传 epub 文件转为 PDF，显示转换进度，完成后下载。复用 [zTools2](https://git.zikai.wang/zikai/zTools2) 后端 API（`/api/pdf/*`）。便携式组件，可独立运行，亦可作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的子模块经构建期组件 import 集成展示（像 [timeTableFix](https://git.zikai.wang/zikai/timeTableFix)）。
 
 ## 功能
 
@@ -22,7 +22,7 @@ zPDF_package/
 ├── .npmrc                      npmmirror 镜像加速
 ├── src/
 │   ├── main.js                 应用挂载（i18n + 全局样式）
-│   ├── App.vue                 便携式根组件（嵌入与独立两用）
+│   ├── App.vue                 便携式根组件（接受 :locale prop，独立/嵌入两用）
 │   ├── i18n/                   独立 vue-i18n 实例 + 中英 locale
 │   ├── composables/
 │   │   ├── usePdfApi.js        API 客户端 + 进度轮询状态机（可单测）
@@ -56,20 +56,11 @@ npm run build      # 构建到 dist/
 npm test           # 单元测试（20 项）
 ```
 
-> 开发时 `/api/pdf/*` 需指向 zTools2。可配 Vite 代理，或直接由 zTools2 托管 `dist/`。
+> 开发时 `/api/pdf/*` 需指向 zTools2。可配 Vite 代理；生产环境由 mainPage 同源反代到 zTools2，cookie 第一方生效。
-
-## 部署到 zTools2
-
-zTools2 的 `/pdf` 页面（`static/pdf.html` + `pdf.js`）为内置同款实现。如需用本项目的 Vue 构建产物替换：
-
-```bash
-cd zPDF_package && npm run build
-# 把 dist/ 部署到 zTools2 静态目录（如 static/pdf_app/），改 pdf.html 引用之
-```
 
 ## 嵌入 mainPage
 
-作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的 git submodule（`third_party/zPDF_package`），mainPage 用 iframe 嵌入 zTools2 托管的 `/pdf` 页面（同源，cookie 第一方生效，无需 CORS）。详见 mainPage 的 `docs/submodule-zPDF_package.md`。
+作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的 git submodule（`third_party/zPDF_package`），mainPage 在构建期直接 `import` 本项目的 `src/App.vue` 作为组件挂载（非 iframe，与 [timeTableFix](https://git.zikai.wang/zikai/timeTableFix) 同范式）：mainPage 侧 `src/modules/pdf/Pdf.vue` 套 `PageShell` 并透传 `:locale`；组件内 `usePdfApi.js` 同源 fetch `/api/pdf/*`，httpOnly cookie（`zk_pdf`）经反代第一方自动携带，无需 CORS。组件自身保持「无 host 依赖」：不持 `defineOptions({ name })`、不引 mainPage 的 i18n，仅靠 `:locale` prop 驱动自有 i18n 实例。详见 mainPage 的 `docs/submodule-zPDF_package.md`。
 
 ## 技术栈
 
@@ -84,5 +75,5 @@ cd zPDF_package && npm run build
 
 ## 了解更多
 
-- [嵌入 mainPage（iframe 同源集成）](../zMainPage/docs/submodule-zPDF_package.md)
+- [嵌入 mainPage（构建期组件 import）](../zMainPage/docs/submodule-zPDF_package.md)
 - 后端 API 与转换实现见 [zTools2](https://git.zikai.wang/zikai/zTools2) README

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
-  "description": "PDF 转换前端 -- 上传 epub 转 PDF、显示进度、下载；复用 zTools2 后端 API。便携式组件，可独立运行或经 mainPage iframe 集成。",
+  "description": "PDF 转换前端 -- 上传 epub 转 PDF、显示进度、下载；复用 zTools2 后端 API。便携式组件，可独立运行或经 mainPage 构建期组件 import 集成。",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/components/JobList.vue

@@ -34,8 +34,7 @@ function fmtTime(s) {
   return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
 }
 
-async function onDelete(job) {
+function onDelete(job) {
-  if (!confirm(t('job.deleteConfirm', { name: job.source_filename }))) return
   emit('delete', job)
 }
 </script>
@@ -67,7 +66,7 @@ async 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) }}
@@ -79,7 +78,7 @@ async 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'"
@@ -158,8 +157,27 @@ async function onDelete(job) {
 }
 .zpdf-bar--sm { display: inline-block; width: 90px; vertical-align: middle; height: 6px; }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
-  .zpdf-table th, .zpdf-table td { padding: 8px 6px; }
+  /* 窄屏：表格转卡片式，避免横向滚动。每行展示文件名（主）+ 状态（次）+ 操作 */
-  .zpdf-table .col-time { font-size: 0.78em; }
+  .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>

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>

src/i18n/locales/en.js

@@ -32,10 +32,7 @@ export default {
     statusConverting: 'Converting',
     statusPending: 'Queued',
     download: 'Download',
-    delete: 'Delete',
+    delete: 'Delete'
-    deleteConfirm: 'Delete "{name}"?\nIt will no longer be shown to you (admin can still see it; only admin hard-delete truly removes it).',
-    deleted: 'Deleted',
-    deleteFailed: 'Delete failed: {msg}'
   },
   refresh: 'Refresh'
 }

src/i18n/locales/zh-CN.js

@@ -31,10 +31,7 @@ export default {
     statusConverting: '转换中',
     statusPending: '排队中',
     download: '下载',
-    delete: '删除',
+    delete: '删除'
-    deleteConfirm: '确定删除「{name}」？\n删除后将不再显示（管理员仍可见，需管理员彻底删除才会清除）。',
-    deleted: '已删除',
-    deleteFailed: '删除失败：{msg}'
   },
   refresh: '刷新'
 }

vite.config.js

@@ -1,12 +1,23 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-// 便携式构建：base './' 使产物可被任意路径托管（含 zTools2 /static 与 mainPage iframe）。
+// 便携式构建：base './' 使产物可被任意路径托管（含 zTools2 /api/static 与 mainPage 组件 import）。
 // preview 开放 f.zikai.wang 便于线上预览校验。
+// dev 独立运行时，zTools2 所有入口（页面/静态/探针/WS/API）统一在 /api/ 下，
+// 一条 /api 代理即可覆盖 /api/pdf/* 与 /api/admin/pdf/*，保持同源调用语义。
 export default defineConfig({
   plugins: [vue()],
   base: './',
   preview: {
     allowedHosts: ['f.zikai.wang'],
   },
+  server: {
+    port: 5175,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:6867',
+        changeOrigin: true,
+      },
+    },
+  },
 })