# Stock Report UI System Draft（OpenClaw 适配版）

> 说明：本文件基于 `ui-ux-pro-max` 生成结果二次收口。
> 原工具给出的强项是：`Data-Dense Dashboard`、高信息密度、KPI + 图表 + 表格、筛选与 drill-down。
> 原工具给出的弱项是：会把部分页面误判成 landing / FAQ / testimonial 结构。
> 因此本草案保留其“仪表盘设计语言”，剔除不适合 A 股选股系统的营销页模式。

---

## 1. 产品定位

- 产品类型：A 股选股分析与执行支持工作台
- 核心目标：让用户在最短路径内完成“看盘 -> 判势 -> 看策略 -> 看候选 -> 看研究 -> 做复盘”
- 页面气质：专业、克制、直观、偏交易台 / 研究台，而非营销页
- 优先级：信息效率 > 装饰感 > 情绪化表达

---

## 2. 总体设计方向

### 推荐主风格
- 主风格：`Data-Dense Dashboard`
- 辅风格：`Executive Dashboard` + `Comparative Analysis`
- 不采用：Hero-Centric Landing、Testimonials、FAQ Landing、Sales CTA 导向结构

### 设计原则
- 单屏先给判断，再给解释
- 卡片标题尽量短，避免大段导语
- 图表、榜单、状态标签优先于说明文字
- 始终提供筛选、排序、对比、展开路径
- 六个核心页面共享同一套 token、卡片语义、状态色和交互反馈

---

## 3. 视觉系统

### 色彩策略
- 主色：深蓝灰 `#0F172A`
- 次色：石板蓝灰 `#1E293B`
- 强调色：上涨/通过/激活使用绿色 `#22C55E`
- 警示色：风险/回撤/异常使用橙红系
- 背景：默认浅色专业底（便于长时间阅读）
- 深色：仅用于夜间模式或局部高聚焦模块，不作为当前唯一默认

### 字体策略
- 不直接采用工具默认的 Google Fonts 外链
- 继续使用当前项目的本地中文优先字体栈
- 数字、代码、分值可局部采用等宽风格，但不全站切到 Fira Code

### 密度策略
- 默认中高信息密度
- 卡片 padding 收紧
- 关键指标卡优先横向排布
- 长段说明文一律压缩为短标签、状态句、注释或 tooltip

---

## 4. 全站框架

### 保留结构
- 左侧主导航：全局模块切换
- 顶部工具栏：日期、刷新、筛选、导出、状态提示
- 中间内容区：单页主题工作台

### 禁止回退的做法
- 页面内部再堆一层导航按钮
- 大块 marketing hero 文案
- testimonial / contact sales / login CTA 这类销售型结构
- 用视觉装饰抢占核心数据区

---

## 5. 六个核心页建议

### index
- 角色：总控台 / 每日入口
- 首屏必须有：市场环境、策略状态、执行摘要
- 推荐结构：三列总控带 + 关键异常/提醒 + 当日摘要
- 不要：窄栏单列 landing 式结构

### market-overview
- 角色：看势
- 首屏必须有：指数、广度、行业热度、主线轮动
- 推荐结构：市场温度 -> 结构热图 -> 主线榜单 -> 午盘/晨判补充
- 重点交互：hover 提示、排行切换、时间维度切换

### strategy-vs-market
- 角色：看策略是否激活
- 首屏必须有：激活状态、命中率、样本分布、环境匹配度
- 推荐结构：激活判定条 -> 对比图 -> 样本明细
- 适合：Comparative Analysis 语义

### decision-candidates
- 角色：看今天该做谁
- 首屏必须有：主攻 / 观察 / 回避 三分栏
- 推荐结构：候选列表 -> 执行指标 -> 风控与触发条件
- 重点：表格和卡片混合，而不是长摘要卡

### research-lab
- 角色：看因子 / 研究深挖
- 首屏必须有：研究对象、核心因子、近期表现、可信度
- 推荐结构：研究摘要 -> drill-down 图表 -> 明细表
- 重点：支持深钻，不做个性化 landing

### recommendation-review
- 角色：复盘
- 首屏必须有：命中情况、偏差来源、复盘标签、改进建议
- 推荐结构：结果对比 -> 偏差归因 -> 历史对照
- 重点：比较式分析，不做花哨 hero

---

## 6. 组件层规范

### 应强化的组件
- KPI 状态卡
- 排行榜卡
- 热度/强弱矩阵
- 可排序表格
- Drill-down 图表面板
- 风险标签与状态 pill
- Skeleton / loading / empty / error 统一态

### 应弱化的组件
- 大图大标题 hero
- 冗长副标题
- 无实际动作价值的装饰卡
- 站内跳转 CTA 卡

---

## 7. 交互规范

- 所有点击元素必须有 hover / focus / active 反馈
- 图表 hover 必须能读数
- 排序/筛选动作必须可见且可撤销
- 空态、异常态要告诉用户“为什么没有数据、下一步看哪里”
- 移动端优先保留核心判断，不强求桌面级全量图表

---

## 8. 下一步实施建议

1. 以后任何 UI 改版先读：
   - `design-system/stock-report/MASTER.md`
   - `design-system/stock-report/OPENCLAW_ADAPTED_DRAFT.md`
   - 对应页面的 `design-system/stock-report/pages/*.md`
2. 真正施工时，以本适配版为主，以 `ui-ux-pro-max` 原始输出为参考
3. 后续如继续重构，可把这份草案逐步沉淀为：
   - token 规范
   - 页面模板
   - 组件命名规范
   - 图表与状态标签规范
