# 量化门户网页设计系统与页面架构

日期：2026-08-04（北京时间）

## 一、设计目标

门户不是营销页，而是“研究、模拟、准实盘执行、摩擦估算和成果审计”的统一工作台。视觉目标是信息密度高但不拥挤，层级明确，长时间查看不疲劳，并让“真实数据、模拟成交、真实订单”三种状态永远不会混淆。

## 二、视觉语言

- 深墨绿色背景、低亮度面板、荧光绿色状态色、琥珀色警告、红色风险。
- 中文正文使用无衬线字体；代码、时间、价格和状态使用等宽字体。
- 大标题负责建立页面重点，正文保持紧凑但保证行高。
- 卡片边缘统一圆润，表格和卡片保持水平垂直对齐，不使用倾斜容器。
- 边框低对比，只有活动状态、风险和关键数据使用高亮色。
- 所有金额、收益、回撤、时间和订单状态采用一致格式。

## 三、当前一级导航

固定顺序：

1. 总览
2. 实盘策略
3. 模拟策略
4. 实盘摩擦
5. 财经快讯
6. 成果档案

“模拟策略1”已经从当前门户删除；原“模拟策略2”统一改名为“模拟策略”。历史8765页面、源代码和成交账本只作为成果档案保存。

## 四、总览页

- 左侧为竖向门户目录，和顶部导航使用相同命名及顺序。
- 首屏核心动作只保留实盘策略、模拟策略和实盘摩擦。
- 右上行情卡片保持正向矩形、圆角和对齐，不使用旋转效果。
- 财经快讯采用更易读的中文字号和重要程度标签。
- 量化软件入口占主内容约70%，直接展示当前“模拟策略”的权益、持仓市值、回撤和可点击曲线。
- 曲线点击或键盘操作后显示横轴时间和纵轴权益值。
- 首页底部显示成果档案总数，并进入完整档案页。

## 五、实盘策略页

- 页面名称“实盘策略”表示真实策略的高拟真镜像和未来真实执行控制中心，不表示当前已经发送真实订单。
- 顶部持续显示真实资金订单为0、券商路由LOCKED和当前交易时段。
- 分区顺序：自动交易日调度、全量标的目录、双账户组合、研究证据治理、独立影子账户、十年滚动研究、券商比较、激活标的、执行流水线、风险和成交明细。
- 个股T+1与ETF T+0使用独立账户卡片，避免视觉上误认为共享资金。
- 排队、延迟、部分成交和撤单竞态以明确数值或范围展示，不声称拥有真实Level-2队列。
- 研究级公开行情、点时财务、Level-2/IOPV和真实成交回报分别显示连接状态。

## 六、模拟策略页

- 当前唯一模拟策略为风险管理型V2影子账户。
- 页面展示账户权益、收益、回撤、持仓、交易次数、60/180参数、日亏和回撤硬限制。
- 保留8765原版作为历史基线对照，但不再提供单独的“模拟策略1”导航入口。
- 权益图可交互查看时间和权益。
- 明示Alpaca IEX不是全美综合SIP，内部撮合不能复现全部实盘摩擦。

## 七、成果档案页

- 成果档案是本对话及后续对话的持续归档入口。
- 分为总索引、策略/脚本/完整源码、网页设计与架构、模拟账户、其他研究和说明。
- 每项显示类型、分类、标题、说明、大小、更新时间、详情和下载。
- `../outputs`中的所有文件自动公开同步。
- `app`、`components`、`worker`、`lib`、`research`、`scripts`、`tests`、部署配置和数据库结构自动逐文件归档。
- 新增脚本或页面文件不需要再次手工加入白名单。

## 八、响应式与可访问性

- 桌面端使用多列信息布局；中等屏幕降为两列；手机降为单列。
- 表格允许横向滚动，不压缩到不可读。
- 链接和按钮保持足够点击区域，图表支持键盘焦点。
- 状态不能只依赖颜色，同时配合文字：运行、等待、锁定、失败、未连接。
- 页面主要区域使用语义化标题、导航和`aria-label`。

## 九、数据与状态文案原则

- “真实公开行情”不等于“券商级可成交行情”。
- “实盘策略”不等于“已武装真实账户”。
- “模拟成交”不等于交易所成交回报。
- “研究通过”不等于允许真实下单。
- 所有收益展示必须同时能找到数据来源、时间范围、成本假设和风险边界。