9.9 KiB

Raw Blame History

交易员页面改版方案 V2

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

一、这次改版要买什么

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

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

改完之后要达到三条：

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

二、要做哪几件事

第 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 件：修持仓表的操作列

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

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

三、改哪些文件

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

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

改动分四段：

样式段（第 11 到 196 行）：加三栏骨架、消息栏、左右栏、粘性操作列的样式。
交易员视图段（第 285 到 990 行）：重排结构，删掉底部「上游信号」大区。
Vue 逻辑段（第 1658 行往后）：新增一个把四类消息合并排序的计算属性，新增左右栏折叠与拉出的状态，删掉 openSigCenter 里的滚动。
折叠状态记在浏览器里（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。 和现在的级别筛选保持一致：普通刷新保留，关掉标签页重开就回默认。免得某天你折叠了左栏，过一周回来忘了它还在那儿。

9.9 KiB Raw Blame History Unescape Escape