super/crawler-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
crawler-plugin/docs/specs/13-admin-html-visual-alignment.md
T

8.1 KiB
Raw Permalink Blame History

13 AdminHtml 观感与交互对齐（蓝白浅色）Spec

状态（task-283）：对齐工作已全部完成，本 spec 所引用的基线文件（backend/web_source/admin.html、backend/static/admin.js、admin-interactions.js 及 Java 侧 static 副本）已按 spec 11 阶段 5 删除；历史内容保留于 git 中（git log -- backend/web_source/admin.html 可查），本 spec 作为过程记录不再可逐行对照。

模块职责

让 admin-frontend-vue（Vue3 + Element Plus 后台 SPA）的壳层与 15 个业务页面在观感与交互上对齐旧 Flask 后台 backend/web_source/admin.html 的现行「蓝白浅色」皮肤与 backend/static/admin.js / admin-interactions.js 的交互文案，实现从旧后台切换到新后台时用户无感。DuplicateCheckPage（店铺撞款监控，menuKey admin_shop_data_duplicate_check）为例外页：保留其自身设计，本次不比对、不修改。

依赖关系

  • 上游（冻结参照，禁止改动）：
    • backend/web_source/admin.html —— 面板 markup + CSS（4 代主题纵向堆叠，最终生效 = 末层 L4477-4830「蓝白色调」亮色皮肤）
    • backend/static/admin.js（7206 行）—— 各面板交互与用户可见文案
    • backend/static/admin-interactions.js（333 行）—— 全局确认框/Toast/按钮 title 语义
    • Java 侧镜像副本 backend-java/src/main/resources/static/admin.html + static/static/admin.*
  • 下游：admin-frontend-vue（src/layout、src/styles、src/pages/、src/components/、src/api 适配、tests/task-NNN.test.ts、e2e/）。
  • 例外页：src/pages/tasks/DuplicateCheckPage.vue 不改。

基线：admin.html 蓝白浅色皮肤（对齐目标值）

最终生效 token（admin.html L4478 :root）：

  • 主色 #4f78a5，主色强 #2f5d8b，主色浅 #e7f0f8，按钮渐变 #5f85ad→#4f78a5
  • 内容底 #f4f7fb（body 叠加两团淡蓝 radial 晕染），卡片白、卡片抬升 #f9fbfd
  • 浅色侧栏 #f8fbfe→#edf3f9（渐变），侧栏文字 #536a81
  • 边框 #d8e3ee（强 #b7c9db）、文字 #24384d / 次 #5b6f83 / 弱 #8293a5
  • danger #b35f6a（渐变 #c06d77→#b35f6a）、success #4e806d、warning #a8793e
  • radius 14px（卡片/按钮），9px（控件）；卡片阴影 0 1px 2px rgba(39,67,94,.04),0 14px 30px -24px rgba(39,67,94,.28)

壳层密度：侧栏 252px（折叠 64px）、顶栏 76px（sticky 半透明白 blur8）、菜单项 min-height 42px、品牌 mark 36px、内容 padding 30px 32px 56px、kicker 10px/700 + 面包屑 + 页题 18px/650、角色胶囊（#2f5d8b/#e6f0f8/#bfd1e2）。

组件观感基线（详见 plan/任务 241-248 展开）：

  • 按钮 .btn（渐变蓝、min-height42、shadow）、.btn-secondary、.btn-danger、.btn-sm（行内 36px）
  • 表单 .form-group label 上置、控件 min-height42、focus 蓝 ring 0 0 0 3px rgba(95,133,173,.16)
  • 表格 .table-scroll：外框 1px #dbe5ee radius10、th #edf4fa 12.5px/600、td 13.5px、hover #f1f7fb、无斑马
  • 分页：非数字页码「共 N 条 · 上一页 · 第 x / y 页 · 下一页 · 跳至[ ] 跳转」
  • 弹窗 .modal（radius14、width min(920px,…)）、右侧 .drawer（min(460px,…)）三段式；撞款锚点抽屉除外
  • Toast 右上角（成功绿/错误红/信息蓝前徽）；二次确认（遮罩 blur + 橙底感叹图标 + [取消][确认删除]）；顶部 3px 进度条 + 右上「请求处理中...」
  • 空态 .empty-tip、行内 暂无 X；面板头统一「h3 与操作按钮同行」

面板 ↔ Vue 页面映射（权威，以 Vue menuKey 为准）

admin.html panel admin 菜单名 Vue menuKey Vue 页面文件 业务命名差异/备注
panel-users 用户管理 admin_users account/UsersPage.vue —
panel-columns 菜单权限配置 admin_columns account/MenusPage.vue 列/交互以 admin 为准
panel-group-manage 分组管理 admin_group_manage account/GroupsPage.vue 需补编辑器+选人
panel-dedupe-total-data 去重数据汇总 admin_dedupe_total_data asin/DedupeRegistryPage.vue 需补导入/导出/筛选
panel-invalid-asin-data 品牌数据库 admin_invalid_asin_data asin/AsinInvalidPage.vue 同一 API /invalid-asin-data；Vue 用业务名「不符合ASIN数据」，保留
panel-query-asin 查询ASIN admin_query_asin asin/QueryAsinPage.vue 需补配置抽屉/导入
panel-product-categories 商品类目 admin_product_categories asin/ProductCategoryPage.vue 需补懒加载/导出/删除
panel-skip-price-asin 最低价ASIN设置 admin_skip_price_asin asin/SkipPricePage.vue 需补配置抽屉/导入
panel-shop-keys 店铺密钥管理 admin_shop_keys shop/ShopKeysPage.vue 白名单药丸/令牌语义
panel-shop-manage 店铺管理 admin_shop_manage shop/ShopManagePage.vue 凭证明文/眼睛实时读
panel-image-video-tasks 视频任务记录 admin_image_video_tasks tasks/ImageVideoTasksPage.vue 需改卡片网格+播放
panel-shop-data-crawl-tasks 店铺数据记录 admin_shop_data_crawl_tasks tasks/ShopDataTasksPage.vue 需改每店卡片网格
panel-shop-data-duplicate-check 店铺数据重复检查 admin_shop_data_duplicate_check tasks/DuplicateCheckPage.vue 例外页，不动
panel-history 生成记录 admin_history records/RecordsHistoryPage.vue 缩略图预览布局
panel-version 软件版本管理 admin_version records/RecordsSoftwareVersionPage.vue —
panel-digital-human-version 数字人版本管理 digital_human_version records/RecordsDigitalHumanVersionPage.vue 状态色/操作矩阵

对齐契约类别（每个任务按此过一遍）

  1. 观感：色板/尺寸/圆角/阴影 = 上节基线；页面结构 = 「面板头(h3+按钮同行) + 筛选条 + 表格/卡片 + 分页脚」。
  2. 交互逻辑：筛选字段与提交方式、行内操作按钮集、弹窗/抽屉表单字段与校验、导入/导出/轮询/等待态、空/错/loading 态 —— 与 admin.js 对应段一致。
  3. 用户可见文案：页头描述、按钮名、确认框文案（删除“X”…）、成功/错误提示 —— 对齐 admin。
  4. 复用优先：优先接线已存在但未进 UI 的孤儿 TS 模块（如 user-create/user-edit/user-menu-auth、dedupe-total-export/import、query-asin-/skip-price-、product-category-export、history-/version-/digitalhuman-、shop-、image-video-/shop-data-），再补缺口，避免重复造。
  5. 已知容忍项：业务命名差异（品牌数据库→不符合ASIN数据）、admin 分页无页码为历史不一致（Vue 保留跳页但观感统一）、登录页独立设计不纳入。

实现顺序

  1. A 换皮与共享基线（241-249）——先做，供后续页面直接受益。
  2. B account（250-253）→ C asin（254-258）→ D records（259-261）→ E shop（262-263）→ F tasks（264-267）。
  3. G 收尾（268-272）。

迁移边界

  • 改：admin-frontend-vue 内样式/布局/页面/共享组件/测试/e2e；主题单测随 token 翻转更新。
  • 不改：backend/web_source/admin.html、backend/static/admin.js、admin-interactions.js、Java 侧 static 副本；DuplicateCheckPage；Java 后端 API 契约（如遇后端缺口另开 Java 任务，不夹带）。
  • 每任务仅 stage 本任务改动文件；不覆盖工作树他人未提交改动。

风险与验收标准

级别 验收点 证据
P0 壳层与 15 页为蓝白浅色；颜色/尺寸对齐基线 截图对照 admin.html；tests 断言 token 与 CSS 变量
P0 页面交互与文案对齐（含补齐缺失交互）；无误导/死按钮 每页测试 + 真实交互
P1 换皮不引入对比度/无障碍回归（WCAG AA） theme 不变量测试
P1 响应式/折叠/空错态/loading 语义一致 e2e + 清单
P2 DuplicateCheckPage 与其余回归不受影响；全部旧提交不破坏 git diff 校验例外页不变；全量 test+build
P2 check_progress 闭合、总任务数 272 check_progress.py 退出 0
Reference in New Issue View Git Blame Copy Permalink