# 交易员页面改版方案 V2

状态：**已落地**（2026-08-26）。改的是 `app/web/static/index.html`，备份在同目录 `index.html.bak-20260826`。

---

## 一、这次改版要买什么

一句话：**让交易员在盘中不用滚动页面就能完成一轮判断和出手。**

现在的页面把所有东西竖着排成一长条。信号在持仓下面，策略在信号下面，候选在最底下。
盘中要做一次判断，眼睛得上下跑好几趟。点「完整信号中心」还会把页面滚到底，
再想回持仓表又得滚回来。这就是你说的「非常啰嗦」。

改完之后要达到三条：

1. 一屏之内同时看得见信号、持仓、待办三样东西，不用滚动。
2. 系统自己做了什么（比如刚刚建了一笔仓），在页面最上面一条消息栏里能第一时间看到。
3. 持仓行里的操作按钮永远完整可见，不会被表格挤掉。

---

## 二、要做哪几件事

### 第 1 件：页面骨架改成三栏

中间主区的宽度**保持不变**，左右两栏落在现在空着的留白里。

- 左栏放**信号流**，宽 302 像素。
- 中间放**主工作区**，最宽 1160 像素，和现在差不多。
- 右栏放**待办与操作**，宽 334 像素。

左右两栏各有两个开关：

- **折叠**：缩成一条 42 像素的窄条，只剩竖排的标题和一个未读数字。再点一下拉回来。
- **拉出**：变成一块浮层盖在主区上面，宽 620 像素，后面压一层半透明遮罩。
  点遮罩就收回去。窄屏时拉出就是纯弹窗。

屏幕不够宽的时候，不换行、不堆叠，改成三段式。临界值是按「主区要放得下持仓表」
倒推出来的，不是拍脑袋定的：持仓表最小 940 像素，加面板内边距是 972 像素。

| 窗口宽度 | 左栏 | 右栏 | 由来 |
|---|---|---|---|
| 1660 像素以上 | 常驻 302 | 常驻 334 | 972 加 302 加 334 加栏间距 26 加页面留白 32 等于 1666 |
| 1380 到 1659 | 常驻 302 | 窄条 40 | 972 加 302 加 40 加 26 加 32 等于 1372 |
| 1380 以下 | 窄条 40 | 窄条 40 | 主区拿走剩下全部宽度 |

再窄到主区放不下持仓表时，是表格在自己的框里横向滚动，操作列照样钉住，
页面本身不会出现横向滚动条。

这样「宽度不动」和「左右折叠拉出」两件事同时成立：主区永远是那个宽度，
两栏要么在留白里，要么浮在上面，都不会把主区挤变形。

### 第 2 件：顶部换成融合消息栏

现在顶部那条叫「最新告警」，只播上游告警。改成一条**消息栏**，收四类消息，
按时间倒序混在一条流里：

| 类型 | 收什么 | 数据从哪来 |
|---|---|---|
| 告警 | 资金流强度、资金分布、日QRS对称、股价异动、多源升级 | 现有的 `/api/upstream-signals` |
| 下单 | 系统建仓、回踩补足、盈利加仓、浮亏补仓、保垫减仓、清仓，以及成交回报 | 现有的 `/api/instructions`，按状态变化取 |
| 提议 | 自主档位是「只提议」时新生成的待拍板条目 | 现有的 `/api/proposals` |
| 策略风控 | 自动挂载执行结果、网格换跟踪止盈、决策系统把某只票停买、命令被规则闸拦下 | 现有的 `/api/op-log` 与 `/api/ledger` |

栏子本身一行，显示最新一条。左边五个小胶囊按类型筛（全部 / 告警 / 下单 / 提议 / 策略风控），
右边「展开全部」**就地向下拉出一块面板**，不跳转、不滚动。面板里每行右侧有个「去处理 ›」，
点了才跳到对应位置。

这条栏子接管现在「最新告警」的位置，原来那条删掉。

### 第 3 件：信号搬进左栏，取消滚动跳转

左栏顶上两个页签：

- **速览**：一行一条。持仓票的信号置顶，标一个「持仓」小标签；下面才是非持仓的重要与警告级。
  上方一排筛选胶囊：只看持仓 / 重要 / 警告 / 提示 / 普通。
- **按来源**：就是现在的「完整信号中心」。七个来源做成可折叠的分组
  （mtf 资金异动、mtf 实况分、决策系统买卖、日QRS对称、资金分布、股价异动、事件信号），
  点标题就地展开。

页面底部原来那个「上游信号」大区**整块删掉**。「完整信号中心」这个按钮不再做滚动，
改成切到左栏的「按来源」页签。

### 第 4 件：右栏收待办与操作

从中间搬四块过去，每块可以单独收起：

- 等我拍板
- 我的策略（含自动挂载状态与预演）
- 系统在盯的候选
- 组合操作
- 设置

搬走之后，中间主区只剩四块：今日一览、需要注意、我的持仓、今日在办。

### 第 5 件：文案里的行话全换成白话

页面上「策略买入腿已暂停」这类词，交易员读不出是什么意思。已经做了一次全面普查，
24 个词要换掉，8 个项目术语保留但每个配一句白话解释，批次名和动作名统一改写。
清单在 `UI_COPY_AUDIT.md`，样张已经按那份清单改过一遍。

### 第 6 件：修持仓表的操作列

问题是操作列宽度不够，三个按钮被切掉。改法有三处：

1. 操作列用 `position: sticky` 钉在表格右边，左侧加一道浅投影做分隔。表格再窄，
   这一列也在。
2. 「状态」和「下一步」两列合成一列，省出 84 像素给操作列。
3. 常用的「减仓」「清仓」留在外面，其余五个（设止损价、设目标价、冻结、
   加入黑名单、挂交易方案）收进一个「⋯」下拉。

---

## 三、改哪些文件

只动一个文件：`app/web/static/index.html`。

后端接口一个都不用改——四类消息用的都是页面已经在拉的接口，
只是在前端多做一次合并和排序。

改动分四段：

1. 样式段（第 11 到 196 行）：加三栏骨架、消息栏、左右栏、粘性操作列的样式。
2. 交易员视图段（第 285 到 990 行）：重排结构，删掉底部「上游信号」大区。
3. Vue 逻辑段（第 1658 行往后）：新增一个把四类消息合并排序的计算属性，
   新增左右栏折叠与拉出的状态，删掉 `openSigCenter` 里的滚动。
4. 折叠状态记在浏览器里（`sessionStorage`），刷新页面不丢。

---

## 四、怎么验证（在你的 Mac 上跑）

### 1. 先确认文件对不对

```
cd /Users/baobao/Documents/work/project/tradingSystem
wc -l app/web/static/index.html
ls -la app/web/static/index.html.bak-20260826
```

预期：新文件 **3111 行**；备份文件在，大小 184617 字节。

### 2. 交易员视图里不该再有行话

```
cd /Users/baobao/Documents/work/project/tradingSystem && python3 - <<'EOF'
import io
s = io.open('app/web/static/index.html', encoding='utf-8').read()
a = s.index('  <!-- ==================== 交易员视图')
b = s.index('  <div v-show="mode===\'ops\'" class="ops-wrap">')
blk = s[a:b]
bad = ["买开腿","买入腿","平回","规则闸","研判闸","偏热闸","置信","陈旧",
       "摊薄","多源升级","收口","留痕","落表","落库","口径","传导档","熔断"]
print('可疑词:', [(w, blk.count(w)) for w in bad if w in blk] or '0 处')
print('解释气泡:', blk.count('class="help"'), '个')
EOF
```

预期：`可疑词: 0 处`，`解释气泡: 9 个`。

### 3. 起服务看页面

```
cd /Users/baobao/Documents/work/project/tradingSystem
uvicorn app.web.main:app --reload --port 8000
```

然后浏览器打开 `http://127.0.0.1:8000/`，把窗口从最大慢慢拖窄。

预期：

- 窗口 **1680 像素以上**：左右两栏都常驻。
- **1380 到 1679**：只剩左边的信号流常驻，右栏收成 40 像素窄条。
- **1380 以下**：两栏都是窄条，点一下从边上滑出浮层，点空白处或按 Esc 收回。
- 任何宽度下页面都不出现横向滚动条，顶栏始终一行。
- 持仓表的「减仓 / 清仓 / ⋯」永远完整可见；窗口窄到放不下时，是表格自己横向滚动，操作列钉住不动。

### 4. 出问题怎么退回

```
cd /Users/baobao/Documents/work/project/tradingSystem
cp app/web/static/index.html.bak-20260826 app/web/static/index.html
```

前端是纯静态文件，覆盖回去刷新浏览器就恢复原样，不用重启服务，也不涉及数据库。

---

## 五、这次改动的自测记录

改完之后在无头浏览器里用假接口跑过一遍，结果：

| 检查项 | 结果 |
|---|---|
| Vue 挂载、控制台报错 | 挂载正常，无报错、无 Vue 警告 |
| 四类消息合并 | 12 条：行情告警 6、系统下单 2、等我拍板 0、策略与风控 4 |
| 持仓表渲染 | 4 行，操作列钉住，与邻列 0 重叠（1380 像素以上） |
| 信号流「按来源」 | 7 个分组，展开有内容 |
| 各宽度页面横向溢出 | 1920 / 1680 / 1500 / 1380 / 1280 / 1024 全部为 0 |
| 顶栏高度 | 各宽度都是 52 像素，一行 |
| 左栏收起再展开 | 收起变窄条，点窄条展回常驻 |
| 右栏浮层 | 打开正常，遮罩正常 |
| 运维视图 | 仍是 1280 居中，5 个页签都在 |

## 附录（可不读）：几个取舍的理由

**为什么不把主区也拉宽。** 你选了「宽度不动」。表格拉太宽以后，一行里最左边的股票名
和最右边的操作按钮离得太远，眼睛要横着扫，反而更累。主区固定宽度，多出来的横向空间
给两栏用，是更划算的分法。

**为什么消息栏不用弹窗。** 弹窗会挡住下面的内容，而且要多点一次关掉。就地下拉的面板
高度受控（最多 390 像素），下面的持仓表还看得见一部分，扫一眼就能收起来。

**为什么信号放左边。** 中文从左往右读，判断在前、动手在后。信号是判断的输入，
放左边；待办与操作是动手，放右边。这和交易员的工作顺序一致。

**折叠状态为什么记在 sessionStorage 而不是 localStorage。** 和现在的级别筛选保持一致：
普通刷新保留，关掉标签页重开就回默认。免得某天你折叠了左栏，过一周回来忘了它还在那儿。