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（渐变底+白色图形已按参考像素级复刻）

实现顺序与依赖

模块 D 无改动；先做模块 B（TopBar，独立、影响面小）→ 模块 C（Shell，影响 17 个页面统一外观）→ 模块 A（首页,差异最多）
全部改动落在 frontend-vue/src/pages/amazon/ 三个文件 + tool-catalog.ts（如需补充 source 相关标记则加）；无新增依赖、无接口变更

验证与客户端同步（必须）

cd crawler-plugin/frontend-vue && npm run build（vue-tsc 类型检查 + vite build）
把 new_web_source/ 下页面 HTML 拷贝到 app_client/new_web_source/，new_web_source/assets/ 整体拷贝到 app_client/assets/（文件名带 hash，两边必须同步）
桌面端 python main.py 打开工具台核对：A1-A6、B1-B2、C1-C2 逐项对照参考截图/运行效果；重点验证 hover 无彩色边框线、页头无竖线、tab 无下划线
回归：17 个工具页壳头（无 sep、source 页有 Aliprice 按钮）、时间线连接线仍在、下载与密钥入口可用
视用户需要再执行 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 已按"保留静态边框、去悬浮变色"执行

7.3 KiB Raw Permalink Blame History Unescape Escape