lhbfx/docs/UI设计说明.md

# 顶级游资监控系统 UI 设计说明

## 1. 设计目标

本系统的 UI 目标不是做成普通后台表格，而是做成一套“交易指挥台”风格的专业监控界面，突出以下感受：

1. 先看到风险，再看到机会。
2. 先看到游资状态，再看到股票细节。
3. 重点信息高亮，次要信息收起。
4. 图表和列表联动，减少来回跳转成本。

## 2. 视觉方向

### 2.1 整体风格
采用“深色专业交易终端”风格，强调稳重、克制、强信号感。

关键词：

1. 深色背景
2. 琥珀金高亮
3. 红绿状态强对比
4. 高密度但有秩序
5. 接近盘面终端而不是通用管理后台

### 2.2 视觉气质
界面应接近“机构交易看板 + 作战态势图”的感觉：

1. 首页像总控台。
2. 游资页像资金操盘面板。
3. 个股页像单票作战图。
4. 预警页像风险雷达。

## 3. 设计系统

### 3.1 色彩规范

建议主色变量：

1. `--bg-main: #0d1117`
2. `--bg-panel: #141a22`
3. `--bg-soft: #1a2330`
4. `--text-main: #f3efe6`
5. `--text-sub: #9aa6b2`
6. `--accent-gold: #d6a85f`
7. `--accent-blue: #53b7ff`
8. `--rise-red: #ff5b57`
9. `--fall-green: #2fbf71`
10. `--warning-orange: #ff9f43`
11. `--danger-red: #ff4d4f`

配色原则：

1. 金色用于游资身份、高价值信号、核心标题。
2. 红色用于涨幅、买入点、高风险预警。
3. 绿色用于下跌、风险释放、冷却状态。
4. 蓝色用于辅助图层、详情跳转、次级信息。
5. 不使用花哨渐变，重点靠对比和层次建立专业感。

### 3.2 字体规范

建议中文字体组合：

1. 标题字体：`优设标题黑` 或 `阿里妈妈方圆体`
2. 正文字体：`思源黑体`
3. 数字字体：`DIN Alternate` 或 `Bahnschrift`

规则：

1. 大标题有牌面感。
2. 表格数字必须整齐、易比对。
3. 财务和金额信息使用等宽或接近等宽数字字体。

### 3.3 圆角与阴影

建议风格：

1. 卡片圆角 14px
2. 图表容器圆角 18px
3. 不做悬浮发光，改用轻阴影和描边
4. 核心卡片可加细金色描边

### 3.4 间距规范

建议：

1. 页面外边距 24px
2. 卡片内边距 16px / 20px
3. 模块间距 16px
4. 标题与内容间距 12px

## 4. 页面结构

## 4.1 首页：总控台

### 4.1.1 页面目标
首页用于盘后快速总览，不展开细节，核心是“今天要先处理什么”。

### 4.1.2 页面布局
建议采用 `12 栏栅格 + 多卡片拼接` 布局。

从上到下结构：

1. 顶部状态栏
2. 核心指标卡
3. 今日预警区
4. 今日机会区
5. 三大游资动态概览
6. 最近异动股票列表

### 4.1.3 顶部状态栏
展示：

1. 当前交易日
2. 数据更新时间
3. 龙虎榜采集状态
4. 预警数量
5. 系统运行状态

样式建议：

1. 顶栏高度 64px
2. 左侧产品名，右侧状态标签
3. 状态标签用胶囊标签样式

### 4.1.4 核心指标卡
建议 4 张卡横排：

1. 今日卖出预警数
2. 今日慢流出观察数
3. 今日共振标的数
4. 今日可关注标的数

卡片规则：

1. 卖出预警卡用红色强调
2. 慢流出用橙色强调
3. 共振用金色强调
4. 可关注用蓝色强调

### 4.1.5 今日预警区
建议放在首页第一视觉区。

模块结构：

1. 区域标题：`今日高优先级预警`
2. 左侧预警列表
3. 右侧预警详情摘要

列表字段：

1. 股票名称
2. 游资名称
3. 预警类型
4. 当前价格
5. 当日涨跌幅
6. 预警等级
7. 建议动作

交互：

1. 点击一条预警，右侧同步展示摘要
2. 可直接跳入股票详情页

### 4.1.6 今日机会区
模块名称建议：`今日可关注`

展示字段：

1. 股票名称
2. 所属板块
3. 参与游资
4. 累计净额
5. 当前状态
6. 是否接近 5 日线 / Fib 支撑位
7. 风险等级

### 4.1.7 游资动态概览
展示三个游资的状态卡：

1. 章盟主
2. 炒股养家
3. 欢乐海岸

每张卡展示：

1. 今日参与股票数
2. 当前观察中股票数
3. 卖出预警数
4. 慢流出数
5. 主要参与板块

点击卡片进入游资详情页。

## 4.2 游资详情页

### 4.2.1 页面目标
用于查看某位游资最近到底做了哪些票，以及当前哪些票最值得盯。

### 4.2.2 页面结构
从上到下：

1. 游资头部信息卡
2. 近期参与股票列表
3. 板块分布区
4. 最近动作时间轴

### 4.2.3 游资头部信息卡
内容包括：

1. 游资名称
2. 风格标签
3. 核心席位
4. 活跃度
5. 当前预警数
6. 当前共振数

UI 表现：

1. 左侧大标题和标签
2. 右侧 3-4 个数字指标
3. 核心席位用标签云展示

### 4.2.4 近期参与股票列表
这是本页的主区块。

列表字段建议：

1. 股票代码
2. 股票名称
3. 所属板块
4. 最新股价
5. 当日涨跌幅
6. 总市值
7. 首次参与日期
8. 最近动作日期
9. 当日净额
10. 累计净额
11. 当前状态
12. 预警状态
13. 是否共振

列表样式建议：

1. 表头固定
2. 支持按列排序
3. 当前有预警的行使用弱红底
4. 共振行加金色左边条
5. 累计净额大的行字体加粗

### 4.2.5 板块分布区
展示该游资近期重点参与的板块。

推荐表现方式：

1. 横向热度条
2. 小型 treemap
3. 排名列表

展示字段：

1. 板块名称
2. 股票数量
3. 累计净额总和
4. 当前预警数

### 4.2.6 最近动作时间轴
显示最近 7-10 条动作：

1. 新建仓
2. 加仓
3. 卖出
4. 慢流出
5. 共振形成

形式建议：

1. 左侧时间
2. 中间状态点
3. 右侧动作文字

## 4.3 股票详情页

### 4.3.1 页面目标
用于看一只股票的“价格走势 + 龙虎榜参与 + 游资关系 + 当前风险”。

### 4.3.2 页面结构
建议采用左右结构：

1. 左侧主内容区占 8 栏
2. 右侧信息侧栏占 4 栏

### 4.3.3 左侧主内容区

#### A. 股票基础信息头部
展示：

1. 股票名称和代码
2. 所属行业
3. 所属概念板块
4. 最新股价
5. 当日涨跌幅
6. 总市值 / 流通市值
7. 当前状态

#### B. 主图：价格走势 + 龙虎榜买卖点
图上应展示：

1. K 线
2. 5 日线
3. 关键支撑位
4. 买入点红色标记
5. 卖出点蓝色标记
6. 成本区或成本线

交互要求：

1. 鼠标悬浮显示日期、价格、龙虎榜席位、净额
2. 可切换仅看章盟主 / 仅看欢乐海岸 / 看全部

#### C. 副图：累计净额柱状图
作用是让用户快速看到：

1. 是否持续加仓
2. 是否锁仓
3. 是否开始撤退

样式建议：

1. 正向净额用暖红
2. 负向净额用冷绿或深灰
3. 当前观察期用淡金色背景框

#### D. 龙虎榜整体参与图
这是股票页的核心差异化图表。

展示目标：

1. 看谁先进入
2. 看谁后续加仓
3. 看谁开始卖出
4. 看多游资是否形成接力

推荐图形：

1. 时间轴泳道图

泳道设计：

1. 第一行：章盟主
2. 第二行：炒股养家
3. 第三行：欢乐海岸
4. 第四行：股价阶段标签

节点颜色：

1. 买入：红点
2. 加仓：金点
3. 卖出：蓝点
4. 慢流出：橙点

### 4.3.4 右侧信息侧栏

#### A. 当前预警卡
内容包括：

1. 是否卖出预警
2. 是否慢流出观察
3. 是否破位
4. 预警等级
5. 建议动作

#### B. 参与游资卡
展示参与该股的目标游资：

1. 游资名称
2. 当前状态
3. 累计净额
4. 最近动作时间

#### C. 财务状况摘要卡
展示：

1. PE / PB
2. 营收增速
3. 净利润增速
4. ROE
5. 资产负债率
6. 财务总结文案

#### D. 系统建议卡
建议分四种：

1. 可关注
2. 继续观察
3. 谨慎
4. 规避

## 4.4 预警与监控页

### 4.4.1 页面目标
把所有风险类信息单独集中，让用户快速处理。

### 4.4.2 页面结构
建议采用“三栏式”：

1. 左栏：预警筛选器
2. 中栏：预警列表
3. 右栏：预警详情

### 4.4.3 筛选器
支持按以下条件筛选：

1. 游资
2. 股票
3. 预警等级
4. 预警类型
5. 日期范围

### 4.4.4 预警列表字段

1. 时间
2. 股票名称
3. 游资
4. 预警类型
5. 等级
6. 当前价格
7. 当日涨跌幅
8. 建议动作

### 4.4.5 预警详情
展示：

1. 触发原因
2. 关联龙虎榜记录
3. 最近 5 个交易日动作摘要
4. 技术位置状态
5. 风险建议

## 5. 核心组件设计

### 5.1 状态标签
标签颜色建议：

1. 建仓：金色
2. 加仓：红色
3. 锁仓：深金色
4. 慢流出：橙色
5. 撤退：灰红色
6. 共振：亮金色

### 5.2 预警徽章
分三级：

1. 普通提醒：橙色描边
2. 重点预警：橙红实底
3. 高风险预警：纯红实底

### 5.3 数字卡
用于首页和头部概览。

要求：

1. 数值大
2. 标题小
3. 趋势箭头明确
4. 可点击进入详情

### 5.4 表格
本系统的表格不是普通后台表格，要更像交易终端：

1. 重点字段固定靠左
2. 金额字段右对齐
3. 涨跌幅颜色化
4. 预警状态直接可见
5. 行 hover 时显示更深底色

## 6. 动效建议

### 6.1 原则
动效要克制，不做花哨炫技，只服务于信息判断。

### 6.2 建议动效

1. 页面加载时卡片淡入上移
2. 高风险预警卡轻微闪烁
3. 表格 hover 行高亮
4. 图表切换时平滑过渡
5. 新预警出现时从右上角滑入

## 7. 响应式建议

### 7.1 桌面端
优先支持宽屏桌面，建议设计基准宽度 1440px。

### 7.2 笔记本端
在 1280px 左右时：

1. 首页改为两列布局
2. 股票详情右侧栏可折叠

### 7.3 移动端
移动端只建议保留轻量查看功能：

1. 预警列表
2. 游资列表
3. 股票基础信息
4. 简化图表

不建议移动端承载完整复杂图表分析。

## 8. 原型优先级

### 8.1 第一优先级

1. 首页总控台
2. 游资详情页
3. 股票详情页
4. 预警页

### 8.2 第二优先级

1. 财务摘要组件
2. 板块分布组件
3. 龙虎榜整体参与图

## 9. 交付建议

UI 第一阶段建议先输出以下内容：

1. 高保真首页
2. 高保真游资详情页
3. 高保真股票详情页
4. 高保真预警页
5. 一套颜色、字体、标签和卡片规范

如果进入前端实现阶段，建议优先做：

1. 首页 + 游资详情页联动
2. 股票详情页主图和副图
3. 预警页筛选与详情联动