// frontend redesign proposal · v0.1
从「研究工具」
到 量化终端。
当前前端是合格的暗色后台——功能齐全，但视觉停留在 GitHub Dark 工具感，信息密度低、无命令面板、无归因深度。本提案把它重做成一台 科幻终端：荧光青 × 琥珀数据 × 多面板高密度，对标 Bloomberg / Wind 的终端 UX，QuantConnect 的分析深度。
[ 01 ]
现状诊断
cta_7a92d1f6 截图 · 功能骨架已齐 · 视觉与密度待升级
PAIN单列堆叠 · 信息密度低
11 个指标卡横排 + 6 张图纵向 el-card 堆叠，一屏只塞得下 1-2 张图。tokens.css 注释写着"高密度"，实现却是低密度——设计意图与实现的落差。
PAIN无命令面板 · 无快捷键
Bloomberg <GO>、Wind 键盘精灵、iFinD 代码简拼——三家顶级终端无一例外都有命令行式交互。当前全靠侧栏点选，power-user 效率为零。
GAP分析深度停在 P0 基线
缺月度收益热力图、Rolling Sharpe/Beta、回撤 Top5 标注、每日收益柱状图；指标卡缺胜率/盈亏比/换手率（11 项里只有 8 项）。归因（Brinson/Barra）完全空白。
GAP无导出 · 无对比 · 无选股闭环
所有数据表无 Excel/CSV 导出；无多回测对比页；无选股器（EQS→回测→归因是专业终端的产品灵魂，4 家终端都做闭环）。
BASE设计系统已变量化 ✅
--bg / --brand / --mono / --r-sm / --ease + 统一 echartsDark 主题（红涨绿跌）。科幻风改造主要落在 CSS 变量层 + 视觉叠加层，不用重写 Element Plus 组件。
BASE功能框架齐全 ✅
单标的 CTA 全链路（新建→进度→结果→历史）+ 组合回测 + 参数优化 + 因子分析 + 模拟盘 + 实盘模拟 + Dashboard。美化为主，功能查漏为辅。
[ 02 ]
视觉语言
深空黑 · 荧光青 · 琥珀 · 等宽数据
VOID#05080d
PANEL#0d141f
CYAN · 主强调#00e5ff
AMBER · 数据高亮#ffb000
UP · 红涨(A股)#ff4d5e
DOWN · 绿跌#2ee68a
DISPLAY · 终端标题终端化
BODY · 正文叙述量化研究台正文阅读
DATA · 等宽 tabular-nums+18.42%
规则数据全右对齐 · 等宽列对齐 · 直角/2px 圆角 · 几何角标代替 emoji · 1px 网格底 · 克制动效(扫描线/呼吸灯)
[ 03 ]
改造后 · 回测结果页
高保真 mockup · 多面板终端布局 · 非实现，视觉目标
cta_7a92d1f6│
DoubleMa·600519 贵州茅台·2023-01-01 ~ 2024-06-30·日线·基准 沪深300
● DONE · 1.8s
⌘K
核心指标
年化收益+18.42%
Sharpe1.34
Sortino1.71
最大回撤-9.80%
Alpha6.20%
Beta0.78
胜率54%
盈亏比1.82
换手率3.2x
PSR0.92
净值曲线 · 策略 / 基准 / 超额
策略
沪深300
超额
回撤水下图 · Top5 回撤期标注
回撤Top5
月度收益热力图 · 2023–2024正负
1
2
3
4
5
6
7
8
9
10
11
12
23
+3
-2
+6
+1
-3
+4
+7
-1
+2
-4
+3
+5
24
-3
+5
+2
-2
+4
+6
持仓 · 信号
600519
贵州茅台 · 多头
持仓400 股
成本1,685.20
现价1,722.50
浮盈+2.21%
暴露68.9%
▲ BUY2024-05-16 · 1,680
▼ SELL2024-06-20 · 1,722
▲ BUY2024-06-28 · 1,705
风险
VaR(95%)-2.1%
行业暴露食饮 69%
风格大盘·价值
TRADES ▸
BUY 600519 @1685 ×400
SELL 600519 @1702 ×400
BUY 600519 @1660 ×400
SELL 600519 @1688 ×400
BUY 600519 @1672 ×400
BUY 600519 @1685 ×400
SELL 600519 @1702 ×400
BUY 600519 @1660 ×400
SELL 600519 @1688 ×400
BUY 600519 @1672 ×400
// 上图为视觉目标 mockup（假数据）。一屏承载：10 指标 + 净值/基准/超额 + 回撤Top5 + 月度热力图 + 持仓信号 + 风险 + 交易滚动条 —— 信息密度对标 Wind/Choice 综合屏。
[ 04 ]
功能优先级
调研对照 · P0 立即补齐 / P1 差异化 / P2 长期
P0立即补齐1–2 周
- ◢科幻视觉层：CSS 变量换肤（深空黑/荧光青/琥珀）+ 网格底 + 信号灯 + tabular-nums，全站换肤不重构组件
- ◢Cmd+K 命令面板：代码/拼音/命令三模式，全局快捷入口
- ◢月度收益热力图：QuantConnect 标杆，全头部都有
- ◢回撤 Top5 标注 + 每日收益柱状图
- ◢补 3 指标：胜率 / 盈亏比 / 换手率
- ◢导出：所有表加 Excel/CSV 按钮
P1差异化体验1–2 月
- ◢多面板可拖拽布局：vue-grid-layout + 模板切换 + 联动
- ◢股票代码智能补全：代码/中文/拼音 fuzzy（米筐独占级体验）
- ◢选股→回测→归因闭环：选股器 + universe 透传
- ◢Crisis Events：2015股灾/2018贸易战/2020新冠/2024微盘崩期间表现
- ◢Rolling Sharpe/Beta（6M/12M 滚动）+ PSR 概率化夏普
P2长期 / 选型视定位
- ◢Brinson / Barra 归因：国内聚宽/优矿/Choice 杀手锏
- ◢无代码策略生成器：指标 + 风控可视化搭建
- ◢AI 策略助手：对话式开发 + 研报总结
- ◢社区 / 策略广场：热度榜 + 实体引用
- ◢Bar Replay 历史回放（TradingView 独占级）
[ 05 ]
终端 UX 精华落地
Bloomberg / Wind / iFinD / Choice 共识 · 7 条
01全局命令面板 ⌘K
Bloomberg <GO> / Wind 键盘精灵 / iFinD 简拼——三终端无一例外。三模式：600519切标的 · gzmt拼音 · bt/fac/opt路由。配合 vim 风格单键跳转。
SRC: Bloomberg · Wind · iFinD
02多面板可拖拽工作区
四面板 + Tabbed Panel + 布局保存（4 家终端都做）。预设模板：单策略深挖 / 多策略 2×2 对比 / 选股+回测 / 组合归因。面板间联动——点持仓高亮净值图买卖点。
SRC: Bloomberg · Wind · iFinD · Choice
03语义化色彩 · 颜色承载信息
严格 token：涨/跌/中性/预警/信息分层（项目已有红涨绿跌，补预警/信息色）。数字右对齐 + tabular-nums（Bloomberg 做得最彻底）。涨跌色三档可切换。
SRC: Bloomberg amber-on-black
04选股 → 回测 → 归因闭环
Bloomberg EQS→BTST→PORT / Wind EQS→EQBT→PMS。产品流灵魂：选股结果"送入回测"→结果页"因子归因"tab→统一 portfolio schema 跨模块透传。
SRC: 4 家专业终端共识
05数据密度 + 零摩擦导出
ag-Grid / TanStack Table：tabular-nums + 冻结表头 + 内联 sparkline（持仓行迷你净值）。所有表右上角"导出 Excel"（exceljs 前端生成多 sheet）。数字格式全平台统一。
SRC: Bloomberg XLTP · Wind =WSD() · iFinD
06实体引用 · 符号触发
编辑器/备注/讨论区：$SH600519$→股票卡片 · #DoubleMa#→策略聚合 · @因子:momentum_20d→因子详情。从股票页进新建回测自动填 universe。
SRC: 雪球
[ 06 ]
落地路线图
4 Sprint · 视觉先行 · 每步可验收
SPRINT 01
视觉层 · 设计系统
~ 1 周 · 低风险
- CSS 变量层换肤（深空黑/青/琥珀）
- 等宽数据字体 + 全局 tabular-nums
- 网格底 / 信号灯 / 扫描线 / 角标
- 不改组件结构，全站换肤
SPRINT 02
结果页重构 + P0 功能
~ 2 周
- 结果页转多面板终端布局
- 月度热力图 / 回撤 Top5 / 每日收益
- 补胜率/盈亏比/换手率指标
- Cmd+K 命令面板 + 表导出
SPRINT 03
P1 差异化
~ 4–6 周
- 多面板可拖拽 + 布局保存
- 股票智能补全（代码/中文/拼音）
- 选股→回测→归因闭环
- Crisis Events / Rolling / PSR
SPRINT 04
P2 选型
视定位
- Brinson / Barra 因子归因
- 无代码策略生成器
- AI 策略助手
- 社区 / 策略广场 / Bar Replay