本报告基于 V5 设计稿、参考截图 (A-E) 及新版开发环境的全量对比分析， 涵盖 7 大模块， 共发现 29 项待修复问题。 每项问题均附有标注截图，红框标示问题区域。点击状态标签可切换修复进度。
Priority Distribution
Issues by Module
Issue Type Radar
| 编号 | 优先级 | 模块 | 问题标题 | 类型 | 状态 |
|---|---|---|---|---|---|
| T-01 | P0 | 交易终端 | 三级 Tab 导航结构缺失 Three-level Tab Navigation Missing | 结构缺失 | |
| T-02 | P0 | 交易终端 | CONTRACT / SPOT 子标签与 DEMO 开关缺失 CONTRACT/SPOT Sub-tabs & DEMO Toggle Missing | 结构缺失 | |
| T-03 | P0 | 交易终端 | K 线图组件缺失 K-line Chart Component Missing | 功能缺失 | |
| T-04 | P0 | 交易终端 | 全仓/逐仓选择器缺失 Cross/Isolated Margin Selector Missing | 功能缺失 | |
| T-05 | P0 | 交易终端 | 杠杆倍数选择器缺失 Leverage Multiplier Selector Missing | 功能缺失 | |
| T-06 | P0 | 交易终端 | 持仓面板 (Positions) 缺失 Positions Panel Missing | 功能缺失 | |
| T-07 | P0 | 交易终端 | 盘前盘后交易页面 — 需完整构建 Pre/After-Hours Trading Page — Full Build | 整页缺失 | |
| T-08 | P0 | 交易终端 | 大宗交易页面 — 需完整构建 Block Trade Page — Full Build | 整页缺失 | |
| T-09 | P0 | 交易终端 | Bid/Ask 进度条缺失 Bid/Ask Progress Bar Missing | 功能缺失 | |
| T-10 | P0 | 交易终端 | GO LONG / SHORT SELLING 按钮缺失 GO LONG / SHORT SELLING Buttons Missing | 功能缺失 | |
| M-01 | P1 | 市场列表 | 通栏搜索框缺失 Full-width Search Bar Missing | 功能缺失 | |
| M-02 | P1 | 市场列表 | Crypto 筛选标签与设计稿不符 Crypto Filter Tabs Mismatch | 内容错误 | |
| M-03 | P1 | 市场列表 | 股票筛选标签使用中文 Equities Filter Tabs in Chinese | 内容错误 | |
| M-04 | P1 | 市场列表 | 列表图标使用字母缩写 List Logos Use Letter Abbreviations | 样式差异 | |
| M-05 | P1 | 市场列表 | 股票成交量数据全部为 0 Stock Volume Data All Showing 0 | 数据异常 | |
| D-01 | P2 | 首页仪表盘 | Top Movers 缺少迷你趋势图 Top Movers Missing Sparkline Charts | 样式差异 | |
| D-02 | P2 | 首页仪表盘 | 系统公告横幅不支持多条轮播 System Announcement Banner Non-scrollable | 交互缺失 | |
| D-03 | P2 | 首页仪表盘 | 持仓卡片 (Holding) 样式精调 Holding Card Style Refinement | 样式差异 | |
| A-01 | P2 | 资产页 | 全页像素级视觉校对 Full-page Pixel-perfect Visual Audit | 样式差异 | |
| A-02 | P2 | 资产页 | 底部操作栏视觉层级优化 Bottom Action Bar Visual Hierarchy | 交互缺失 | |
| P-01 | P2 | 个人中心 | 用户卡片缺少 KYC 等级和信用评分 User Card Missing KYC Level & Credit Score | 样式差异 | |
| P-02 | P2 | 个人中心 | 列表图标与设计稿不匹配 List Icons Mismatch with Design Spec | 样式差异 | |
| P-03 | P2 | 个人中心 | Dark Mode 开关缺失 Dark Mode Toggle Missing | 功能缺失 | |
| L-01 | P1 | 登录页 | Live / Paper 模式切换缺失 Live / Paper Mode Toggle Missing | 功能缺失 | |
| L-02 | P1 | 登录页 | 登录按钮文案不一致 Login Button Text Inconsistency | 内容错误 | |
| L-03 | P1 | 登录页 | 输入框标签文案不一致 Input Field Labels Inconsistency | 内容错误 | |
| K-01 | P1 | KYC认证 | KYC 认证页面与 V5 设计不匹配 KYC Page Layout Mismatch | 样式差异 | |
| K-02 | P1 | KYC认证 | KYC 等级标签与证书呈现缺失 KYC Level Badge & Certificate Display Missing | 功能缺失 | |
| K-03 | P1 | KYC认证 | 银行卡/支付方式页面样式偏差 Bank Card / Payment Methods Page Style Deviation | 样式差异 |
Pixel-perfect Adaptation with AI
使用 Claude Code 4.6 可以高效地将 V5 设计稿还原到像素级精度。以下是推荐的工作流程和提示词模板：
将 V5 设计稿截图、标注图和本报告中的对比图作为图片附件提供给 Claude。确保图片清晰，包含完整的 UI 元素。
使用下方的提示词模板，让 Claude 以资深前端工程师的角色进行像素级还原。
按照本报告的问题清单，逐项提供问题描述和截图，让 Claude 对比实现并修复差异。
你是一位资深前端工程师，专精于像素级 UI 还原。当前项目使用 Vue 3 + uni-app + SCSS 技术栈。 任务：根据提供的 V5 设计稿截图，将当前页面还原到与设计稿完全一致的视觉效果。 要求： 1. 精确匹配设计稿中的所有视觉细节：颜色值（从截图中提取精确的 hex 值）、间距、字体大小、行高、圆角、阴影、渐变 2. 使用 rem 单位，基准视口宽度 375px 3. 确保深色主题下的所有元素对比度和可读性 4. 实现响应式布局，在不同屏幕尺寸下保持设计比例 5. 注意底部导航栏（TabBar）的图标、文字、选中态颜色必须与设计稿一致 6. K 线图使用 lightweight-charts 库实现，配色参照设计稿 7. 所有列表项的左侧图标应使用真实的 crypto/stock logo，而非字母缩写 当前需要修复的问题：[粘贴本报告中的具体问题描述] 设计稿截图：[附上对应的 V5 设计稿图片] 当前实现截图：[附上当前页面截图] 请逐一对比差异，输出需要修改的文件路径和具体代码变更。