73 lines
7.3 KiB
Markdown
73 lines
7.3 KiB
Markdown
# 15 亚马逊工具台 · PySide6 v2.0.4 视觉对齐与去线（迭代分析 Spec）
|
||
|
||
> 场景：现有项目迭代（step-1 场景 3，技术栈已固定为 Vue3 + Element Plus）。参考实现 = `reference/数富AI工具台_PySide6版_v2.0.4/源代码/shufuai_console_app_qt.py`（下称**参考**）。
|
||
>
|
||
> 用户已确认决策：①范围 = **逐项视觉对齐 + 去线**（现有真实业务表单不动）②去线目标 = **卡片悬浮边框线、页头竖分隔线、顶栏 tab 下划线**（时间线步骤连接线**保留**）③工具详情页：**中间旧表单区 + 右侧任务进度区保留现状，仅顶部/底部用参考界面**（即 Shell 头按参考改：去竖线、source 页加 Aliprice 按钮；底部 FooterBar 已与参考一致）
|
||
|
||
## 背景结论
|
||
|
||
前端 `amazon-console` 已复刻参考的功能层：首页（Hero/时间线/卡片墙）、顶栏、页脚、工具页壳（`AmazonToolPageShell`，17 个工具页已接入）、密钥设置（`BrandApiSecretSettingsButton` 已含三大密钥+保留时长+代理）、立即下载（已接 pywebview `save_workbench_zip`）。采集工作台（参考 `page_work`）已由 `collect-data` 真实功能页覆盖。
|
||
|
||
本次只处理**视觉差异**与**去线**，共 4 个模块。参考中的"演示表单/运行摘要侧栏"（`_render_params`、`summary_rows`）与密钥弹窗均**不重复实现**。
|
||
|
||
## 模块 A：首页 AmazonConsolePage.vue
|
||
|
||
| # | 前端现状（文件:行） | 参考实现（shufuai_console_app_qt.py:行） | 目标 |
|
||
|---|---|---|---|
|
||
| A1 | hero-pill 圆角胶囊 `.hero-pill{border-radius:999px;padding:5px 12px}`（294-303） | `pill` 直角：`padding:4px 12px`，无 border-radius（585-586） | 去掉圆角（border-radius:0）、padding 改 4px 12px |
|
||
| A2 | 工作流编号块 `.step-circle{width:36px;height:26px}`（537-546） | `circ` 36×38（778-781，QLabel 36×38） | 高度 26 → 38 |
|
||
| A3 | 步骤连接线 `.step-line{flex:1 1 auto;min-width:12px;margin:13px 2px 0;align-self:flex-start}`（563-569），模板 86 行 | `ln.setFixedSize(14,2)`（811-812），间距 6（802）+ 侧边 2（809） | 线改固定宽 14px（flex:none），垂直位置对齐参考；步骤间距约 6px 侧边 2px。**此线保留**（用户未勾选去掉） |
|
||
| A4 | 卡片悬浮 `.tool-card:hover{border-color:var(--gc)}`（603-606） | `_build_card` hover：边框 2px 变分类色（929-930） | **去线**：hover 时边框**不变色**（保持 #2A3344），只保留背景变亮 #323D52 + "打开工具→"变分类色加粗 + tag 实底白字。默认 2px #2A3344 静态边框保留 |
|
||
| A5 | 卡片 tag `.tool-tag{border-radius:3px}`（614-620） | `tag` border-radius:4px（903） | 圆角 3px → 4px |
|
||
| A6 | 重复 hover 规则：522-530（带 disabled 版）与 571-579（无 disabled 版）重复 | — | 合并清理为一条规则（保留 disabled 除外判定） |
|
||
|
||
其余确认已对齐、不再改动：hero 卡（340 宽、dots+42px 短线、下载按钮 base64+hover 变亮）、时间线面板（PANEL 底 + LINE 边框）、标题/badge/hint、卡片网格 4 列 gap 12、统计行、toast。参考固定宽 1162px / 固定高 174px / 卡片墙固定行高 187px 为 Qt 布局产物，前端响应式自适应**不强制对齐**。
|
||
|
||
## 模块 B：顶栏 AmazonTopBar.vue
|
||
|
||
| # | 前端现状 | 参考实现 | 目标 |
|
||
|---|---|---|---|
|
||
| B1 | tab hover 背景 `.cat-tab:hover{background:#232a3b}`（165-168） | `_tab_qss` 非激活 hover：`background:CARD3`（#3D4A63，392-395） | hover 背景 #232A3B → #3D4A63 |
|
||
| B2 | 激活 tab 下划线 `.cat-underline`（模板 22 行、样式 207-219） | tab 底部 3px 线（352-355），激活=分类色 | **去线**：模板与样式整块删除；激活态仅保留 CARD3 背景 + 白字 + badge 实色（现状即如此，无其它受影响的选中指示） |
|
||
|
||
其余已对齐：品牌（38×38 富）、tab 尺寸 140×38 圆角 10、badge 24×20（非激活 CARD2/#343F55、激活分类色白字）、右侧密钥按钮/帮助/AD admin、权限过滤逻辑（保留）。
|
||
|
||
## 模块 C：工具页壳 AmazonToolPageShell.vue
|
||
|
||
| # | 前端现状 | 参考实现 | 目标 |
|
||
|---|---|---|---|
|
||
| C1 | 页头竖分隔线 `.tool-head__sep`（模板 7 行、样式 85-90） | 参考无此分隔线（1113-1126 head 仅 back_btn+title+desc） | **去线**：模板与样式整块删除 |
|
||
| C2 | 头部无"Aliprice点击注册"按钮 | `tool_extra_link`：仅 `source`（货源查询）工具显示，TEAL 渐变按钮，点击打开 `https://www.aiprice.com/?ext_id=10100&channel=chrome_offline&platform=1688&version=4.0.5&browser=chrome&mv=3`（1137-1149、1228-1229） | 在壳头部标题描述下方新增该按钮：toolId === 'source' 时显示（对应 /new_web_source/similar-asin.html 页，即 BrandSimilarAsinTab 所在页），样式对齐参考（TEAL 渐变、白字、hover 变亮） |
|
||
| C3 | 头部 gap 18px（62-68） | back_btn 后间距约 10px（按钮自身 padding 6px 10px，无额外 spacing） | 可选微调为 10px |
|
||
|
||
其余已对齐：back 文案（返回分组列表+锚点）、标题 22px、desc 12px/700px、note 卡（#2E2414 底 #F8D8A8 字 #3A2A16 边框）。
|
||
|
||
## 模块 D：明确不动项
|
||
|
||
- 17 个工具页真实业务表单与右侧任务面板（真实接口,不作演示表单替换）
|
||
- 采集工作台功能（collect-data 已覆盖，参考 `page_work` 不新增页面）
|
||
- 密钥设置（`BrandApiSecretSettingsButton` 已覆盖参考弹窗全部字段）
|
||
- 立即下载（已接 `save_workbench_zip`，含 v2.0.4 的修复行为：搜索常见位置→未找到时手动选择→记住路径）
|
||
- 权限过滤（`filterGroupsByPermission`/`filterWorkflowByPermission`、置灰卡片）与页面 hash 锚点
|
||
- icons/ToolIcon（渐变底+白色图形已按参考像素级复刻）
|
||
|
||
## 实现顺序与依赖
|
||
|
||
1. 模块 D 无改动；先做模块 B（TopBar，独立、影响面小）→ 模块 C（Shell，影响 17 个页面统一外观）→ 模块 A（首页,差异最多）
|
||
2. 全部改动落在 `frontend-vue/src/pages/amazon/` 三个文件 + `tool-catalog.ts`（如需补充 source 相关标记则加）；无新增依赖、无接口变更
|
||
|
||
## 验证与客户端同步（必须）
|
||
|
||
1. `cd crawler-plugin/frontend-vue && npm run build`（vue-tsc 类型检查 + vite build）
|
||
2. 把 `new_web_source/` 下页面 HTML 拷贝到 `app_client/new_web_source/`，`new_web_source/assets/` 整体拷贝到 `app_client/assets/`（文件名带 hash，两边必须同步）
|
||
3. 桌面端 `python main.py` 打开工具台核对：A1-A6、B1-B2、C1-C2 逐项对照参考截图/运行效果；重点验证 hover 无彩色边框线、页头无竖线、tab 无下划线
|
||
4. 回归：17 个工具页壳头（无 sep、source 页有 Aliprice 按钮）、时间线连接线仍在、下载与密钥入口可用
|
||
5. 视用户需要再执行 `build_shufuai.bat` 打包 exe
|
||
|
||
## 注意事项
|
||
|
||
- 卡片 hover 去线后，`--gc` 变量仍被 `.tool-card:hover .tool-card-go` 与 tag 使用，**只删 border-color 规则，勿删 `--gc` 注入**（cardStyle 173-175）
|
||
- `.workflow-step:hover` 与 `.workflow-step:not(.workflow-step--disabled):hover` 重复规则清理时，保留 `--disabled` 例外（置灰步骤不响应 hover 填色）
|
||
- `AmazonTopBar` 的 `cat-underline` 删除后，`badgeStyle`/`createApp` 等不受影响；确认无其它页面单独使用该样式类
|
||
- 若后续用户接受"卡片完全无边框"，仅需再删默认 border 一行,spec 已按"保留静态边框、去悬浮变色"执行
|