修改前端页面
This commit is contained in:
zlt
parent
a941032c24
commit
f522b4110e
|
|
@ -0,0 +1,164 @@
|
|||
# 页面文案普查与白话对照表
|
||||
|
||||
配套样张：`docs/ui_mockup_trader_v2.html`（已按本表改过一遍文案）。
|
||||
本表列的是**正式代码里还没改**的地方，是下一步动 `index.html` 时的清单。
|
||||
|
||||
对象：`app/web/static/index.html` 的**交易员视图**全部可见文字。
|
||||
判据来自项目输出风格 `.claude/output-styles/readable-chinese.md` 的第三、四条：
|
||||
不自造缩写和代号，术语第一次出现先用一句白话解释它是什么。
|
||||
|
||||
处理方式分三种：
|
||||
|
||||
- **换掉**：这个词没有保留价值，直接换成白话。
|
||||
- **保留加解释**：它是项目里的正式概念，换了反而对不上文档，保留原词但挂一个「?」气泡。
|
||||
- **留待议**：运维视图专用，交易员看不到，这轮不动。
|
||||
|
||||
---
|
||||
|
||||
## 一、必须换掉的词（共 24 处）
|
||||
|
||||
| 原文 | 出现在 | 换成 | 为什么 |
|
||||
|---|---|---|---|
|
||||
| 策略买开腿 / 买入腿 | 顶部宏观提示、宏观告警条 | 策略里的买入动作 | 「腿」是期权和对冲交易的说法，这里只是买和卖两个方向，用不上 |
|
||||
| 平回 | 策略状态、恢复买入确认框 | 把当天买的那部分卖回去 | 「平回」要读者自己补全语境 |
|
||||
| 规则闸 | 评审账本、提议说明 | 合规检查 | 页面别处已经把 `rule` 译成「合规检查」，两处不一致 |
|
||||
| 研判闸 | 提示、降级说明 | 决策系统复核 | 「闸」是内部叫法，「复核」是它实际做的事 |
|
||||
| 偏热闸 | 宏观告警条 | 大盘偏热时的买入限制 | 同上 |
|
||||
| 闸门通过 | 自主档位气泡 | 各项检查通过 | 同上 |
|
||||
| 置信 0.72 | 风控卖出、择时入场 | 把握 0.72（满分 1） | 「置信」是统计术语，且没写满分是多少 |
|
||||
| 陈旧 | 告警条、信号行 | 已过时 | 「陈旧」像在说数据坏了，实际只是超过时效 |
|
||||
| 摊薄成本 | 持仓表、账本 | 平均成本 | 就是各批买入价的加权平均 |
|
||||
| 日QRS对称 | 信号面板、信号速览 | 日线形态 | QRS 是上游内部代号，页面上没有任何地方解释过 |
|
||||
| mtf 资金异动 | 信号面板 | 盘中资金异动 | mtf 是决策系统的模块名，交易员不需要知道 |
|
||||
| mtf 实况分 | 信号面板 | 盘中实况评分 | 同上 |
|
||||
| 多源升级 | 信号面板、告警分类 | 多源同时报警 | 「升级」指的是级别自动提高，字面看不出来 |
|
||||
| 横截面异动 z_dd | 资金异动说明 | 这只票今天的资金进出，比全市场同期偏离多少 | 统计术语加变量名，双重不可读 |
|
||||
| 出手 / 分日出手 | 提议说明、组合操作 | 下单 / 分几天下单 | 「出手」在别处又指执行一轮，一词两义 |
|
||||
| 收口 / 窗口收口 | 运维按钮、择时说明 | 窗口到点收尾 | 生造词 |
|
||||
| 兜底 | 停牌提示、网格说明 | 用……代替 / 保底拦一道 | 每处含义不同，要分别改写 |
|
||||
| 降级 | 决策系统不可用提示 | 退回到需要你确认 | 「降级」看不出退到哪 |
|
||||
| 留痕 | 操作日志说明 | 留下记录 | 生造词 |
|
||||
| 落表 / 落库 | 提议说明、运维 | 记进数据库 | 内部黑话 |
|
||||
| 口径 | 多处注释与提示 | 算法 / 统计方式 | 行业黑话 |
|
||||
| 传导档 | 候选表列名 | 受益层级 | 「传导」指主题传导，字面读不出 |
|
||||
| 一手 | 网格与建仓说明 | 一手（100 股） | 加个括号就够 |
|
||||
| 熔断 | 做T方案说明 | 亏到设定线就当天停手 | 「熔断」是交易所机制，这里是内部风控 |
|
||||
|
||||
---
|
||||
|
||||
## 二、保留原词，加一句白话解释（共 8 个）
|
||||
|
||||
这些是项目设计文档里的正式概念，换掉会让页面和文档对不上。做法是保留词，
|
||||
在它第一次出现的地方挂一个「?」气泡。
|
||||
|
||||
| 词 | 气泡里的话 |
|
||||
|---|---|
|
||||
| 安全垫 | 现在的浮盈够不够厚，够不够扛一次回撤。厚垫＝赚得多，可以考虑加仓；薄垫＝刚开始赚；浮亏无垫＝还在亏，不加仓。 |
|
||||
| 自主档位 | 系统能自己做主到什么程度。全自动＝各项检查通过就直接下单；只提议＝先在「等我拍板」问过你；暂停＝系统不自己动。 |
|
||||
| 做T | 当天买、当天卖同一只票，赚中间的差价，收盘时持仓数量回到原样。 |
|
||||
| 网格 | 在一个价格区间里，每跌一档买一份、每涨一档卖一份。 |
|
||||
| 跟踪止盈 | 股价创新高就把止盈线往上抬，从高点回落到设定比例就卖。只卖不买。 |
|
||||
| 择时 | 挑时间点下单。系统每天有允许下单的时间段，不是随到随下。 |
|
||||
| 日线形态 | 决策系统的日线形态指标（内部代号 QRS），看多方和空方的力量是否对称。 |
|
||||
| 大盘冷热 | 看整个市场是偏热还是偏冷，用来决定要不要整体加仓或减仓。偏热时系统会自己停掉新买入。 |
|
||||
|
||||
---
|
||||
|
||||
## 三、批次名与动作名，改成能读懂的说法
|
||||
|
||||
这两组词在持仓展开、账本、消息栏里到处出现，值得统一。
|
||||
|
||||
| 代码里的名字 | 现在显示 | 改成 |
|
||||
|---|---|---|
|
||||
| BASE | 底仓 | 首批 |
|
||||
| FILL | 回踩补足 | 回落补足 |
|
||||
| ADD | 盈利加仓 | 盈利加仓（不改，本来就通顺） |
|
||||
| DCA | 浮亏补仓 / 补仓 | 浮亏补仓（不改） |
|
||||
| TRIM | 保垫减仓 | 保盈减仓 |
|
||||
| T0 | 做T仓 | 做T仓（保留，挂气泡） |
|
||||
| RECON | 对账调整 | 对账修正 |
|
||||
| realized_pnl | 已实现 | 已落袋 |
|
||||
|
||||
---
|
||||
|
||||
## 四、几句整段重写
|
||||
|
||||
原句和改后的句子放在一起，方便你判断改得对不对。
|
||||
|
||||
**顶部宏观提示**
|
||||
|
||||
- 原：宏观偏热闸生效中 —— 系统自主买入与策略买开腿已暂停（你的命令不受影响）
|
||||
- 改：大盘偏热，系统已经暂停两件事：它自己发起的买入，以及策略里的买入动作。卖出不受影响，你自己下的命令也不受影响。
|
||||
|
||||
**策略被风控停买**
|
||||
|
||||
- 原：决策系统风控：资金异动（卖出/平回不受影响；确认无碍点右侧「恢复买入」）
|
||||
- 改：决策系统发现资金异动，已经把这个策略的买入停掉。卖出照常，当天做T买的那部分也照常卖回去。确认没问题就点「恢复买入」。
|
||||
|
||||
**持仓下一步 · 浮亏中**
|
||||
|
||||
- 原：浮亏中，跌到评估档会考虑补仓（深档需你确认）
|
||||
- 改：还在亏。跌到设定的补仓线会考虑补仓；亏得更深的那一档要你点头才补。
|
||||
|
||||
**自动挂载执行状态**
|
||||
|
||||
- 原：今日自动挂载已于 11:51 执行：查 0 只 · 挂载 0 · 接力 0 · 停买 0 · 被挡 0 · 跳过 1
|
||||
- 改：自动挂方案今天 11:51 跑过一轮：检查 0 只，新挂 0，换方案 0，停买 0，被挡 0，跳过 1。
|
||||
|
||||
**做T方案说明**
|
||||
|
||||
- 原：回落近支撑→买、按目标价差高卖（正T）；近压力或滞涨→卖存量、低买回（反T）。当日 ≤ 3 次，14:50 强制平回，单票 / 全局当日T亏熔断。
|
||||
- 改：两种做法。一是先买后卖：股价回落到支撑位附近买入，涨到目标价差再卖掉。二是先卖后买：股价冲到压力位或者涨不动了，先卖掉一部分，跌下来再买回来。每天最多做 3 次，14:50 之前一定把当天买卖的部分平掉。单只票或者全天做T亏到设定线，当天就不再做了。
|
||||
|
||||
**暂停买入**
|
||||
|
||||
- 原：停止一切新增买入并撤销在途买入指令；卖出与止损不受影响。
|
||||
- 改：停掉所有新的买入，并撤掉已经挂出去、还没成交的买单。卖出和止损照常。
|
||||
|
||||
**一键清仓**
|
||||
|
||||
- 原：全部持仓按最快节奏卖出、不做择时优化。紧急离场用，需二次确认。
|
||||
- 改：紧急离场用：全部持仓按最快速度卖出，不再挑时间点。要确认两次。
|
||||
|
||||
**告警时效**
|
||||
|
||||
- 原：超过告警时间窗, 已置灰标注为陈旧
|
||||
- 改：超过设定的时效还没有新的同类信号盖过它，已置灰标为已过时。不隐藏，只是提醒你别再当新消息看。
|
||||
|
||||
---
|
||||
|
||||
## 五、留待议：运维视图
|
||||
|
||||
运维视图（页面右上角切到「运维」）里还有一批更深的词：水位、序号倒挂、
|
||||
出手一跳、榜尾噪音闸、名册指纹、白名单档位、核销均价、在途指令、终态、
|
||||
资金敞口。它们面向的是维护这套系统的人，不是交易员，而且大多和
|
||||
`QMT_WS_PROTOCOL.md` 里的名字一一对应，改了反而对不上文档。
|
||||
|
||||
建议这轮不动，等交易员视图定稿之后单独再看。你要是也想一起改，说一声。
|
||||
|
||||
---
|
||||
|
||||
## 六、怎么验证（在你的 Mac 上跑）
|
||||
|
||||
改完之后，这条命令会把交易员视图里还剩下的可疑词列出来，行数应为 0：
|
||||
|
||||
```
|
||||
cd /Users/baobao/Documents/work/project/tradingSystem && \
|
||||
sed -n '285,990p' app/web/static/index.html | \
|
||||
grep -c "买开腿\|买入腿\|平回\|规则闸\|研判闸\|偏热闸\|置信\|陈旧\|摊薄\|QRS\|mtf\|多源升级\|z_dd\|出手\|收口\|留痕\|落表\|落库\|口径\|传导档\|熔断"
|
||||
```
|
||||
|
||||
预期读数：`0`。
|
||||
|
||||
我刚在你的机器上跑过这条命令，改之前的读数是 **19**。改完之后应该变成 0。
|
||||
|
||||
保留下来的词（安全垫、自主档位、做T、网格、跟踪止盈、择时、日线形态、大盘冷热）
|
||||
不在这条命令的清单里，它们该留着，只是每个都得配一句解释。检查解释配齐了没有，
|
||||
用这条：
|
||||
|
||||
```
|
||||
cd /Users/baobao/Documents/work/project/tradingSystem && \
|
||||
sed -n '285,990p' app/web/static/index.html | grep -c 'class="help"'
|
||||
```
|
||||
|
||||
预期读数：**不少于 8**。
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
# 交易员页面改版方案 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。** 和现在的级别筛选保持一致：
|
||||
普通刷新保留，关掉标签页重开就回默认。免得某天你折叠了左栏，过一周回来忘了它还在那儿。
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,747 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>PMS 交易员工作台 · 改版样张 v2</title>
|
||||
<style>
|
||||
:root{
|
||||
--plane:#f4f5f2; --surface:#ffffff; --surface-2:#fafaf8; --ink:#141412; --ink-2:#54534f; --muted:#8a8882;
|
||||
--hair:#e7e6df; --accent:#2a78d6; --accent-weak:#ecf3fd;
|
||||
--up:#d5342f; --up-weak:#fbeceb; --down:#158a4c; --down-weak:#e7f4ec;
|
||||
--warn:#9a6a00; --warn-weak:#fbf1d6; --stop:#b4552b; --stop-weak:#fbeadf;
|
||||
--shadow:0 1px 2px rgba(17,17,16,.04),0 2px 8px rgba(17,17,16,.045);
|
||||
--shadow-lift:0 12px 38px rgba(17,17,16,.18),0 2px 8px rgba(17,17,16,.08);
|
||||
/* 三栏宽度：停靠模式的常驻宽 / 窄条宽 */
|
||||
--rail-w:302px; --rail-w-r:334px; --strip-w:40px; --main-min:660px;
|
||||
}
|
||||
*{box-sizing:border-box;}
|
||||
body{margin:0;background:var(--plane);color:var(--ink);
|
||||
font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
|
||||
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;}
|
||||
.muted{color:var(--muted);font-size:12.5px;}
|
||||
.spacer{flex:1;}
|
||||
.clr-up{color:var(--up);} .clr-down{color:var(--down);}
|
||||
button{font-family:inherit;}
|
||||
|
||||
/* 术语气泡：第一次出现的词，鼠标停上去给一句白话 */
|
||||
.help{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;
|
||||
border:1px solid var(--muted);color:var(--muted);font-size:9.5px;cursor:help;position:relative;font-weight:600;margin-left:3px;vertical-align:middle;flex:none;}
|
||||
.help:hover{border-color:var(--accent);color:var(--accent);}
|
||||
.help:hover::after{content:attr(data-tip);position:absolute;left:-6px;top:150%;width:268px;background:var(--ink);color:#fff;
|
||||
font-size:12px;font-weight:400;line-height:1.6;padding:8px 11px;border-radius:8px;z-index:200;box-shadow:0 6px 22px rgba(0,0,0,.26);text-align:left;}
|
||||
|
||||
/* ─────────── 顶栏 ─────────── */
|
||||
.hd{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
|
||||
padding:9px 16px;background:rgba(244,245,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);}
|
||||
.hd h1{font-size:15px;margin:0;font-weight:680;letter-spacing:.2px;}
|
||||
.hd .ver{color:var(--muted);font-size:12px;font-weight:400;margin-left:6px;}
|
||||
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:560;padding:3px 9px;border-radius:999px;white-space:nowrap;}
|
||||
.chip .dot{width:6px;height:6px;border-radius:50%;flex:none;}
|
||||
.chip.ok{background:var(--accent-weak);color:var(--accent);} .chip.ok .dot{background:var(--accent);}
|
||||
.chip.warn{background:var(--warn-weak);color:var(--warn);} .chip.warn .dot{background:var(--warn);}
|
||||
.chip.idle{background:rgba(138,136,130,.15);color:var(--ink-2);} .chip.idle .dot{background:var(--muted);}
|
||||
.seg{display:inline-flex;border:1px solid var(--hair);border-radius:8px;overflow:hidden;background:var(--surface);}
|
||||
.seg button{border:0;background:transparent;color:var(--ink-2);padding:5px 12px;font-size:13px;cursor:pointer;}
|
||||
.seg button.on{background:var(--accent);color:#fff;}
|
||||
.tbtn{border:1px solid var(--hair);background:var(--surface);color:var(--ink);border-radius:8px;padding:5px 11px;font-size:13px;cursor:pointer;font-weight:520;}
|
||||
.tbtn:hover{border-color:var(--accent);color:var(--accent);}
|
||||
.tbtn.pri{background:var(--accent);border-color:var(--accent);color:#fff;}
|
||||
.tbtn.sm{padding:3px 9px;font-size:12.5px;}
|
||||
.tbtn.danger{color:var(--stop);} .tbtn.danger:hover{border-color:var(--stop);color:var(--stop);}
|
||||
/* 顶栏不许掉成两行：宽度不够时按重要性从低到高依次收起，而不是换行 */
|
||||
@media(max-width:1560px){.hd .ver{display:none;}}
|
||||
@media(max-width:1400px){.hd .hd-refresh-at{display:none;}}
|
||||
@media(max-width:1240px){.hd .hd-macro{display:none;}}
|
||||
@media(max-width:1120px){.hd .hd-exec{display:none;} .hd .hd-plan .hd-plan-d{display:none;}}
|
||||
@media(max-width:1000px){.hd .hd-buy{display:none;} .hd .hd-report{display:none;}}
|
||||
|
||||
/* ─────────── 融合消息栏 ─────────── */
|
||||
.msgbar-wrap{position:sticky;top:47px;z-index:55;padding:8px 16px 0;background:linear-gradient(var(--plane) 82%,rgba(244,245,242,0));}
|
||||
.msgbar{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--hair);
|
||||
border-left:3px solid var(--accent);border-radius:12px;padding:7px 12px;box-shadow:var(--shadow);font-size:13px;position:relative;}
|
||||
.mb-label{font-weight:660;color:var(--ink-2);white-space:nowrap;display:flex;align-items:center;gap:6px;}
|
||||
.mb-label .bell{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);}
|
||||
.mb-tabs{display:flex;gap:5px;}
|
||||
.mb-tab{font-size:11.5px;font-weight:560;padding:2px 9px;border-radius:999px;cursor:pointer;border:1px solid transparent;
|
||||
background:var(--surface-2);color:var(--ink-2);user-select:none;white-space:nowrap;}
|
||||
.mb-tab .n{opacity:.62;margin-left:3px;}
|
||||
.mb-tab.on{background:var(--accent-weak);color:var(--accent);border-color:#cfe1f8;}
|
||||
.mb-latest{flex:1;min-width:0;display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap;}
|
||||
.mb-latest .txt{overflow:hidden;text-overflow:ellipsis;}
|
||||
.mb-more{flex:none;color:var(--accent);font-size:12.5px;font-weight:560;cursor:pointer;background:none;border:0;padding:3px 2px;white-space:nowrap;}
|
||||
.mb-sep{width:1px;height:15px;background:var(--hair);flex:none;}
|
||||
@media(max-width:1080px){.mb-tabs{display:none;} }
|
||||
@media(max-width:820px){.mb-latest .lvdot,.mb-latest .age{display:none;} }
|
||||
|
||||
.mb-panel{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--hair);
|
||||
border-radius:12px;box-shadow:var(--shadow-lift);padding:6px 0 4px;max-height:390px;overflow:auto;display:none;z-index:70;}
|
||||
.mb-panel.open{display:block;}
|
||||
.mb-panel .mb-tabs{display:flex;padding:6px 14px 8px;border-bottom:1px solid var(--hair);margin-bottom:2px;}
|
||||
.mb-day{font-size:11px;color:var(--muted);padding:7px 14px 4px;font-weight:600;letter-spacing:.3px;}
|
||||
.mb-row{display:flex;align-items:flex-start;gap:9px;padding:6px 14px;font-size:13px;}
|
||||
.mb-row:hover{background:var(--surface-2);}
|
||||
.mb-row .t{width:42px;flex:none;font-size:11.5px;color:var(--muted);padding-top:1px;}
|
||||
.kind{width:52px;flex:none;font-size:11px;font-weight:600;padding:1px 0;border-radius:5px;text-align:center;}
|
||||
.k-alert{background:var(--accent-weak);color:var(--accent);}
|
||||
.k-order{background:var(--down-weak);color:var(--down);}
|
||||
.k-prop{background:var(--warn-weak);color:var(--warn);}
|
||||
.k-strat{background:var(--stop-weak);color:var(--stop);}
|
||||
.mb-row .body{flex:1;min-width:0;}
|
||||
.mb-row .body .why{color:var(--ink-2);font-size:12px;margin-top:1px;line-height:1.5;}
|
||||
.mb-row .go{flex:none;font-size:11.5px;color:var(--accent);cursor:pointer;opacity:0;white-space:nowrap;}
|
||||
.mb-row:hover .go{opacity:1;}
|
||||
|
||||
/* ─────────── 三栏骨架 ─────────── */
|
||||
.shell{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;
|
||||
max-width:1860px;margin:0 auto;padding:10px 16px 46px;align-items:start;}
|
||||
.side{position:sticky;top:96px;align-self:start;transition:width .16s ease;}
|
||||
/* 默认（宽度不够）：两侧都是窄条。够宽了才由 dock-l / dock-r 展开成常驻栏。 */
|
||||
.side-l,.side-r{width:var(--strip-w);}
|
||||
body.dock-l:not(.l-fold) .side-l{width:var(--rail-w);}
|
||||
body.dock-r:not(.r-fold) .side-r{width:var(--rail-w-r);}
|
||||
|
||||
.rail{background:var(--surface);border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow);
|
||||
display:none;flex-direction:column;max-height:calc(100vh - 112px);overflow:hidden;}
|
||||
body.dock-l:not(.l-fold) #railL{display:flex;}
|
||||
body.dock-r:not(.r-fold) #railR{display:flex;}
|
||||
/* 打开成浮层 */
|
||||
.rail.open{display:flex;position:fixed;top:96px;bottom:18px;width:min(560px,88vw);max-height:none;
|
||||
z-index:90;box-shadow:var(--shadow-lift);}
|
||||
#railL.open{left:16px;} #railR.open{right:16px;}
|
||||
.scrim{position:fixed;inset:0;background:rgba(17,17,16,.3);z-index:85;display:none;}
|
||||
.scrim.on{display:block;}
|
||||
|
||||
.rail-h{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid var(--hair);flex:none;}
|
||||
.rail-h .ttl{font-size:13.5px;font-weight:660;white-space:nowrap;}
|
||||
.rail-h .cnt{font-size:11.5px;color:var(--muted);font-weight:500;white-space:nowrap;}
|
||||
.iconbtn{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:6px;
|
||||
width:22px;height:22px;line-height:1;font-size:12px;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;}
|
||||
.iconbtn:hover{background:var(--surface-2);color:var(--accent);border-color:var(--hair);}
|
||||
.rail-body{flex:1;overflow:auto;padding:9px 11px 12px;}
|
||||
.btn-close{display:none;}
|
||||
.rail.open .btn-close{display:inline-flex;}
|
||||
.rail.open .btn-fold,.rail.open .btn-pull{display:none;}
|
||||
|
||||
/* 窄条：手动收起和宽度不够，用的是同一块 */
|
||||
.strip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:var(--strip-w);min-height:150px;padding:14px 0;
|
||||
background:var(--surface);border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow);cursor:pointer;}
|
||||
.strip:hover{border-color:var(--accent);}
|
||||
body.dock-l:not(.l-fold) .side-l .strip{display:none;}
|
||||
body.dock-r:not(.r-fold) .side-r .strip{display:none;}
|
||||
.strip .vtxt{writing-mode:vertical-rl;font-size:12.5px;font-weight:620;color:var(--ink-2);letter-spacing:2px;white-space:nowrap;}
|
||||
.strip .badge{font-size:10.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:1px 5px;}
|
||||
.strip .arr{color:var(--muted);font-size:11px;}
|
||||
|
||||
/* ─────────── 中区 ─────────── */
|
||||
.main{min-width:0;container-type:inline-size;}
|
||||
.panel{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:14px 16px;margin-bottom:13px;box-shadow:var(--shadow);}
|
||||
.panel h3{margin:0 0 9px;font-size:14.5px;font-weight:660;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
|
||||
.panel h3 .n{color:var(--muted);font-size:12.5px;font-weight:500;}
|
||||
.sub2{color:var(--muted);font-size:12.5px;margin:-3px 0 10px;}
|
||||
|
||||
.metrics{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;margin-bottom:13px;}
|
||||
.m{background:var(--surface);border:1px solid var(--hair);border-radius:11px;padding:9px 11px;box-shadow:var(--shadow);min-width:0;}
|
||||
.m .k{color:var(--muted);font-size:11.5px;white-space:nowrap;display:flex;align-items:center;gap:1px;}
|
||||
.m .v{font-size:18px;font-weight:680;margin-top:3px;letter-spacing:-.2px;font-variant-numeric:tabular-nums;white-space:nowrap;}
|
||||
.m .v .s{font-size:12px;font-weight:500;color:var(--muted);}
|
||||
.m .v.up{color:var(--up);} .m .v.down{color:var(--down);}
|
||||
/* 按「中区自己的宽度」换行数，而不是按窗口宽度 —— 拉出侧栏时中区不变，格子也就不跳 */
|
||||
@container (max-width:1100px){.metrics{grid-template-columns:repeat(4,minmax(0,1fr));}}
|
||||
@container (max-width:560px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr));}}
|
||||
|
||||
.attn{border-left:3px solid var(--warn);background:var(--warn-weak);border-radius:10px;padding:8px 13px;margin-bottom:13px;font-size:12.5px;color:#6d4b00;line-height:1.6;}
|
||||
|
||||
/* 持仓表：自己横向滚动，操作列钉在右边 */
|
||||
.tscroll{overflow-x:auto;}
|
||||
.ptable{width:100%;min-width:940px;border-collapse:separate;border-spacing:0;font-size:13px;}
|
||||
.ptable th{font-size:12px;color:var(--muted);font-weight:560;text-align:left;padding:7px 8px;background:var(--surface-2);
|
||||
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);white-space:nowrap;}
|
||||
.ptable td{padding:8px;border-bottom:1px solid var(--hair);vertical-align:top;}
|
||||
.ptable tr:hover td{background:var(--surface-2);}
|
||||
.ptable .col-act{position:sticky;right:0;background:var(--surface);box-shadow:-9px 0 11px -11px rgba(17,17,16,.4);}
|
||||
.ptable tr:hover .col-act{background:var(--surface-2);}
|
||||
.ptable th.col-act{background:var(--surface-2);}
|
||||
.ptable .nmc{font-weight:640;}
|
||||
.ptable .code{color:var(--muted);font-size:11px;}
|
||||
.caret{color:var(--muted);cursor:pointer;user-select:none;font-size:10px;margin-right:4px;}
|
||||
.tagx{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:6px;white-space:nowrap;}
|
||||
.t-solid{background:var(--up-weak);color:var(--up);}
|
||||
.t-thin{background:var(--warn-weak);color:var(--warn);}
|
||||
.t-none{background:var(--down-weak);color:var(--down);}
|
||||
.actgrp{display:flex;gap:5px;align-items:center;}
|
||||
.expand-row td{background:var(--surface-2);padding:10px 14px;}
|
||||
.exp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;}
|
||||
.exp-h{font-size:12.5px;font-weight:640;color:var(--ink-2);margin-bottom:6px;}
|
||||
.exp-led{padding:4px 0;border-bottom:1px solid var(--hair);font-size:12.5px;}
|
||||
.exp-led:last-child{border-bottom:none;}
|
||||
|
||||
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--hair);margin-bottom:10px;flex-wrap:wrap;}
|
||||
.tabs button{border:0;background:none;padding:7px 12px;font-size:13.5px;color:var(--muted);font-weight:560;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
|
||||
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent);}
|
||||
.tabs button .n{font-size:11.5px;color:var(--muted);margin-left:3px;}
|
||||
|
||||
/* ─────────── 左栏 · 信号流 ─────────── */
|
||||
.railtabs{display:flex;gap:3px;margin-bottom:8px;background:var(--surface-2);border-radius:8px;padding:2px;}
|
||||
.railtabs button{flex:1;border:0;background:transparent;padding:5px 6px;font-size:12.5px;color:var(--ink-2);
|
||||
border-radius:6px;cursor:pointer;font-weight:560;}
|
||||
.railtabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);}
|
||||
.lvfilter{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;}
|
||||
.lvchip{font-size:11.5px;font-weight:560;padding:2px 9px;border-radius:999px;cursor:pointer;border:1px solid var(--hair);
|
||||
background:var(--surface-2);color:var(--ink-2);user-select:none;}
|
||||
.lvchip.off{color:var(--muted);opacity:.6;text-decoration:line-through;}
|
||||
.lvchip.on.strong{color:var(--accent);background:var(--accent-weak);border-color:#cfe1f8;}
|
||||
.lvchip.on.warn{color:var(--warn);background:var(--warn-weak);border-color:#f0e0b4;}
|
||||
.lvchip.on.held{color:var(--stop);background:var(--stop-weak);border-color:#f0d3c0;}
|
||||
.sigrow{display:flex;align-items:center;gap:6px;padding:5px 2px;border-bottom:1px dashed rgba(128,128,128,.16);font-size:12.5px;}
|
||||
.sigrow:last-child{border-bottom:none;}
|
||||
.sigrow .t{width:36px;flex:none;font-size:11px;color:var(--muted);}
|
||||
.sigrow .nm{font-weight:620;white-space:nowrap;}
|
||||
.sigrow .cat{color:var(--muted);font-size:11.5px;white-space:nowrap;}
|
||||
.sigrow .sp{flex:1;}
|
||||
.pin{font-size:10px;font-weight:700;color:var(--stop);background:var(--stop-weak);border-radius:4px;padding:0 4px;flex:none;}
|
||||
.lvdot{font-size:10.5px;font-weight:700;padding:0 5px;border-radius:4px;flex:none;white-space:nowrap;}
|
||||
.lv-strong{background:var(--accent-weak);color:var(--accent);}
|
||||
.lv-warn{background:var(--warn-weak);color:var(--warn);}
|
||||
.lv-info{background:rgba(138,136,130,.16);color:var(--ink-2);}
|
||||
.old{opacity:.5;}
|
||||
.srcgroup{border:1px solid var(--hair);border-radius:10px;margin-bottom:7px;overflow:hidden;background:var(--surface-2);}
|
||||
.srch{display:flex;align-items:center;gap:6px;padding:7px 10px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-2);}
|
||||
.srch .n{font-weight:500;color:var(--muted);font-size:11.5px;}
|
||||
.srcb{padding:2px 10px 8px;display:none;background:var(--surface);}
|
||||
.srcgroup.open .srcb{display:block;}
|
||||
.srcgroup.open .srch{border-bottom:1px solid var(--hair);}
|
||||
|
||||
/* ─────────── 右栏 ─────────── */
|
||||
.sect{border-bottom:1px solid var(--hair);padding:2px 0 9px;margin-bottom:9px;}
|
||||
.sect:last-child{border-bottom:none;}
|
||||
.secth{display:flex;align-items:center;gap:7px;padding:5px 0;cursor:pointer;font-size:13px;font-weight:640;}
|
||||
.secth .n{font-weight:500;color:var(--muted);font-size:11.5px;}
|
||||
.secth .car{margin-left:auto;color:var(--muted);font-size:10px;}
|
||||
.sectb{padding-top:4px;}
|
||||
.sect.closed .sectb{display:none;}
|
||||
.mini{border:1px solid var(--hair);border-radius:9px;padding:8px 10px;margin-bottom:6px;background:var(--surface-2);font-size:12.5px;}
|
||||
.mini .top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
|
||||
.mini .st{color:var(--ink-2);font-size:12px;margin-top:3px;line-height:1.5;}
|
||||
.oprow{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid var(--hair);}
|
||||
.oprow:last-child{border-bottom:none;}
|
||||
.oprow .d{font-size:11.5px;color:var(--ink-2);line-height:1.5;}
|
||||
.oprow .b{flex:none;width:92px;}
|
||||
.oprow .b .tbtn{width:100%;}
|
||||
|
||||
/* 模式指示（只在样张里，正式页面不要） */
|
||||
.modebadge{position:fixed;left:14px;bottom:14px;z-index:120;background:var(--ink);color:#fff;font-size:11.5px;
|
||||
padding:5px 11px;border-radius:999px;opacity:.82;font-family:ui-monospace,Menlo,monospace;}
|
||||
|
||||
.note{margin:26px auto 0;max-width:1160px;background:#fffdf5;border:1px dashed #e0d4a8;border-radius:12px;padding:14px 18px;font-size:12.5px;color:#6d5b2a;line-height:1.8;}
|
||||
.note b{color:#4a3d16;}
|
||||
.note ol{margin:7px 0 0;padding-left:20px;} .note li{margin:5px 0;}
|
||||
</style>
|
||||
</head>
|
||||
<body class="dock-l dock-r">
|
||||
|
||||
<div class="hd">
|
||||
<h1>PMS 持仓管理<span class="ver">v1.4.2 · 2026-08-26 11:55</span></h1>
|
||||
<span class="chip ok"><span class="dot"></span>盘中</span>
|
||||
<span class="chip ok hd-buy"><span class="dot"></span>买入 正常</span>
|
||||
<span class="chip ok hd-exec"><span class="dot"></span>执行 正常</span>
|
||||
<span class="chip ok"><span class="dot"></span>自主 全自动<span class="help" data-tip="系统能自己做主到什么程度。全自动＝各项检查通过就直接下单；只提议＝先在「等我拍板」问过你；暂停＝系统不自己动。">?</span></span>
|
||||
<span class="chip ok hd-plan"><span class="dot"></span>选股计划<span class="hd-plan-d"> 2026-08-26</span></span>
|
||||
<span class="chip idle hd-macro"><span class="dot"></span>大盘冷热 中性<span class="help" data-tip="看整个市场是偏热还是偏冷，用来决定要不要整体加仓或减仓。偏热时系统会自己停掉新买入。">?</span></span>
|
||||
<div class="spacer"></div>
|
||||
<div class="seg"><button class="on">交易员</button><button>运维</button></div>
|
||||
<button class="tbtn">选股计划</button>
|
||||
<button class="tbtn hd-report">日报</button>
|
||||
<span class="muted hd-refresh-at" style="font-size:11.5px">自动刷新 · 11:55:12</span>
|
||||
<button class="tbtn pri">刷新</button>
|
||||
</div>
|
||||
|
||||
<!-- ══════════ 融合消息栏 ══════════ -->
|
||||
<div class="msgbar-wrap">
|
||||
<div class="msgbar" id="msgbar">
|
||||
<span class="mb-label"><span class="bell"></span>消息</span>
|
||||
<div class="mb-tabs" data-role="tabs">
|
||||
<span class="mb-tab on" data-k="all">全部<span class="n">14</span></span>
|
||||
<span class="mb-tab" data-k="alert">行情告警<span class="n">8</span></span>
|
||||
<span class="mb-tab" data-k="order">系统下单<span class="n">4</span></span>
|
||||
<span class="mb-tab" data-k="prop">等我拍板<span class="n">0</span></span>
|
||||
<span class="mb-tab" data-k="strat">策略与风控<span class="n">2</span></span>
|
||||
</div>
|
||||
<span class="mb-sep"></span>
|
||||
<div class="mb-latest">
|
||||
<span class="mono muted" style="font-size:11.5px">11:16</span>
|
||||
<span class="kind k-alert" style="width:auto;padding:1px 6px">告警</span>
|
||||
<span class="txt"><b>唯捷创芯</b> <span class="muted mono" style="font-size:11px">688153.SH</span>
|
||||
<span class="clr-up">看涨</span> <span class="muted">资金流强度</span></span>
|
||||
<span class="lvdot lv-warn">警告</span>
|
||||
<span class="muted age" style="font-size:11.5px">39 分钟前</span>
|
||||
</div>
|
||||
<button class="mb-more" id="mbToggle">展开全部 ▾</button>
|
||||
|
||||
<div class="mb-panel" id="mbPanel">
|
||||
<div class="mb-tabs" data-role="tabs">
|
||||
<span class="mb-tab on" data-k="all">全部<span class="n">14</span></span>
|
||||
<span class="mb-tab" data-k="alert">行情告警<span class="n">8</span></span>
|
||||
<span class="mb-tab" data-k="order">系统下单<span class="n">4</span></span>
|
||||
<span class="mb-tab" data-k="prop">等我拍板<span class="n">0</span></span>
|
||||
<span class="mb-tab" data-k="strat">策略与风控<span class="n">2</span></span>
|
||||
</div>
|
||||
<div class="mb-day">今天 · 2026-08-26</div>
|
||||
|
||||
<div class="mb-row" data-k="strat"><span class="t mono">11:51</span><span class="kind k-strat">策略</span>
|
||||
<div class="body"><b>自动挂方案已跑过一轮</b> — 检查 0 只，新挂 0，换方案 0，停买 0，被挡 0，跳过 1
|
||||
<div class="why">跳过的是唯捷创芯：它已经有一个同类方案在跑，不重复挂。</div></div>
|
||||
<span class="go">去我的策略 ›</span></div>
|
||||
|
||||
<div class="mb-row" data-k="alert"><span class="t mono">11:16</span><span class="kind k-alert">告警</span>
|
||||
<div class="body"><b>唯捷创芯</b> <span class="muted mono" style="font-size:11px">688153.SH</span>
|
||||
<span class="clr-up">看涨</span> <span class="muted">资金流强度</span> <span class="lvdot lv-warn">警告</span></div>
|
||||
<span class="go">看信号 ›</span></div>
|
||||
|
||||
<div class="mb-row" data-k="order"><span class="t mono">10:58</span><span class="kind k-order">下单</span>
|
||||
<div class="body"><b>沐曦股份</b> <span class="muted mono" style="font-size:11px">688802.SH</span>
|
||||
<span style="color:var(--down);font-weight:600">系统建仓</span> 首批 100 股，成交价 647.53
|
||||
<div class="why">这只票分三批买，比例 50%、25%、25%。这是第一批，后两批要等股价回落到位再买。</div></div>
|
||||
<span class="go">看在办 ›</span></div>
|
||||
|
||||
<div class="mb-row" data-k="alert"><span class="t mono">10:52</span><span class="kind k-alert">告警</span>
|
||||
<div class="body"><b>中航光电</b> <span class="muted mono" style="font-size:11px">002179.SZ</span>
|
||||
<span class="clr-down">看跌</span> <span class="muted">资金分布</span> <span class="lvdot lv-strong">重要</span></div>
|
||||
<span class="go">看信号 ›</span></div>
|
||||
|
||||
<div class="mb-row" data-k="order"><span class="t mono">10:31</span><span class="kind k-order">下单</span>
|
||||
<div class="body"><b>沐曦股份</b> <span class="muted mono" style="font-size:11px">688802.SH</span>
|
||||
<span style="color:var(--down);font-weight:600">系统建仓</span> 已挂单 100 股，限价 648.00
|
||||
<div class="why">今天允许下单的时间段是 10:30 到 11:00。合规检查和决策系统复核都放行了。</div></div>
|
||||
<span class="go">看在办 ›</span></div>
|
||||
|
||||
<div class="mb-row" data-k="strat"><span class="t mono">09:52</span><span class="kind k-strat">风控</span>
|
||||
<div class="body"><b>天赐材料</b> <span class="muted mono" style="font-size:11px">002709.SZ</span>
|
||||
<span style="color:var(--stop);font-weight:600">决策系统建议卖出</span>，把握程度 0.72（满分 1）
|
||||
<div class="why">日内资金一直在流出，股价也跌破了前一个低点。这只票现在改成只卖不买，卖出和止损照常。</div></div>
|
||||
<span class="go">去处理 ›</span></div>
|
||||
|
||||
<div class="mb-row" data-k="order"><span class="t mono">09:41</span><span class="kind k-order">下单</span>
|
||||
<div class="body"><b>唯捷创芯</b> <span class="muted mono" style="font-size:11px">688153.SH</span>
|
||||
<span style="color:var(--down);font-weight:600">盈利加仓</span> 被合规检查挡下
|
||||
<div class="why">今天这只票的买入额度已经用完了，再买会超过单只股票的持仓上限。</div></div>
|
||||
<span class="go">看原因 ›</span></div>
|
||||
|
||||
<div class="mb-row" data-k="alert"><span class="t mono">09:30</span><span class="kind k-alert">告警</span>
|
||||
<div class="body"><b>中航光电</b> <span class="muted mono" style="font-size:11px">002179.SZ</span>
|
||||
<span class="clr-down">看跌</span> <span class="muted">日线形态</span> <span class="lvdot lv-warn">警告</span></div>
|
||||
<span class="go">看信号 ›</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scrim" id="scrim"></div>
|
||||
|
||||
<!-- ══════════ 三栏 ══════════ -->
|
||||
<div class="shell">
|
||||
|
||||
<!-- ── 左侧 ── -->
|
||||
<div class="side side-l">
|
||||
<div class="strip" onclick="openRail('l')">
|
||||
<span class="badge">8</span><span class="vtxt">信号流</span><span class="arr">▶</span>
|
||||
</div>
|
||||
<aside class="rail" id="railL">
|
||||
<div class="rail-h">
|
||||
<span class="ttl">信号流</span><span class="cnt">89 条 · 持仓 8</span>
|
||||
<div class="spacer"></div>
|
||||
<button class="iconbtn btn-pull" title="放大成浮层" onclick="openRail('l')">⤢</button>
|
||||
<button class="iconbtn btn-fold" title="收成窄条" onclick="foldRail('l')">◀</button>
|
||||
<button class="iconbtn btn-close" title="关闭（或按 Esc）" onclick="closeRail()">✕</button>
|
||||
</div>
|
||||
<div class="rail-body">
|
||||
<div class="railtabs">
|
||||
<button class="on" onclick="sigTab(this,'brief')">速览</button>
|
||||
<button onclick="sigTab(this,'src')">按来源</button>
|
||||
</div>
|
||||
|
||||
<div id="sig-brief">
|
||||
<div class="lvfilter">
|
||||
<span class="lvchip on held" onclick="tg(this)">只看持仓 8</span>
|
||||
<span class="lvchip on strong" onclick="tg(this)">重要 21</span>
|
||||
<span class="lvchip on warn" onclick="tg(this)">警告 47</span>
|
||||
<span class="lvchip off" onclick="tg(this)">提示 18</span>
|
||||
<span class="lvchip off" onclick="tg(this)">普通 3</span>
|
||||
</div>
|
||||
|
||||
<div class="sigrow"><span class="t mono">11:16</span><span class="pin">持仓</span><span class="nm">唯捷创芯</span>
|
||||
<span class="cat">资金流强度</span><span class="clr-up">看涨</span><span class="sp"></span><span class="lvdot lv-warn">警告</span></div>
|
||||
<div class="sigrow old"><span class="t mono">10:52</span><span class="pin">持仓</span><span class="nm">中航光电</span>
|
||||
<span class="cat">资金分布</span><span class="clr-down">看跌</span><span class="sp"></span><span class="lvdot lv-strong">重要</span></div>
|
||||
<div class="sigrow old"><span class="t mono">10:46</span><span class="pin">持仓</span><span class="nm">唯捷创芯</span>
|
||||
<span class="cat">资金流强度</span><span class="clr-up">看涨</span><span class="sp"></span><span class="lvdot lv-warn">警告</span></div>
|
||||
<div class="sigrow old"><span class="t mono">10:34</span><span class="pin">持仓</span><span class="nm">唯捷创芯</span>
|
||||
<span class="cat">资金流强度</span><span class="clr-up">看涨</span><span class="sp"></span><span class="lvdot lv-strong">重要</span></div>
|
||||
<div class="sigrow old"><span class="t mono">10:04</span><span class="pin">持仓</span><span class="nm">唯捷创芯</span>
|
||||
<span class="cat">资金流强度</span><span class="clr-up">看涨</span><span class="sp"></span><span class="lvdot lv-strong">重要</span></div>
|
||||
<div class="sigrow old"><span class="t mono">09:55</span><span class="pin">持仓</span><span class="nm">唯捷创芯</span>
|
||||
<span class="cat">资金流强度</span><span class="clr-up">看涨</span><span class="sp"></span><span class="lvdot lv-warn">警告</span></div>
|
||||
<div class="sigrow"><span class="t mono">09:52</span><span class="pin">持仓</span><span class="nm">天赐材料</span>
|
||||
<span class="cat">建议卖出</span><span class="clr-down">卖出</span><span class="sp"></span><span class="lvdot lv-strong">重要</span></div>
|
||||
<div class="sigrow old"><span class="t mono">09:30</span><span class="pin">持仓</span><span class="nm">中航光电</span>
|
||||
<span class="cat">日线形态</span><span class="clr-down">看跌</span><span class="sp"></span><span class="lvdot lv-warn">警告</span></div>
|
||||
|
||||
<div class="muted" style="margin:10px 0 5px;font-weight:600;font-size:11.5px;border-top:1px dashed var(--hair);padding-top:8px">
|
||||
没持仓的票 · 只列重要和警告</div>
|
||||
<div class="sigrow"><span class="t mono">11:22</span><span class="nm">寒武纪</span>
|
||||
<span class="cat">资金分布</span><span class="clr-up">看涨</span><span class="sp"></span><span class="lvdot lv-strong">重要</span></div>
|
||||
<div class="sigrow"><span class="t mono">11:09</span><span class="nm">拓荆科技</span>
|
||||
<span class="cat">多源同时报警</span><span class="clr-up">看涨</span><span class="sp"></span><span class="lvdot lv-strong">重要</span></div>
|
||||
<div class="sigrow"><span class="t mono">10:47</span><span class="nm">北方华创</span>
|
||||
<span class="cat">股价异动</span><span class="clr-down">看跌</span><span class="sp"></span><span class="lvdot lv-warn">警告</span></div>
|
||||
<div class="sigrow"><span class="t mono">10:12</span><span class="nm">中际旭创</span>
|
||||
<span class="cat">日线形态</span><span class="clr-up">看涨</span><span class="sp"></span><span class="lvdot lv-warn">警告</span></div>
|
||||
<div class="sigrow"><span class="t mono">09:47</span><span class="nm">澜起科技</span>
|
||||
<span class="cat">资金流强度</span><span class="clr-up">看涨</span><span class="sp"></span><span class="lvdot lv-warn">警告</span></div>
|
||||
<div class="muted" style="margin-top:9px;font-size:11.5px">灰掉的是已经过时的：超过设定的时效还没有新的同类信号盖过它。不隐藏，只是提醒你别再当新消息看。</div>
|
||||
</div>
|
||||
|
||||
<div id="sig-src" style="display:none">
|
||||
<div class="muted" style="margin-bottom:8px">这里就是原来的「完整信号中心」。点标题就地展开，不跳转、不滚动。</div>
|
||||
<div class="srcgroup open"><div class="srch" onclick="this.parentNode.classList.toggle('open')">
|
||||
▾ 盘中资金异动 <span class="n">· 12</span>
|
||||
<span class="help" data-tip="决策系统盘中模块给的：这只票今天的资金进出，和全市场同期比偏离得有多远。偏离越大，强度越高。">?</span></div>
|
||||
<div class="srcb">
|
||||
<div class="sigrow"><span class="nm">寒武纪</span><span class="clr-up">流入</span><span class="sp"></span>
|
||||
<span class="mono clr-up" style="font-weight:600">+2.31 亿</span><span class="lvdot lv-strong">极强</span></div>
|
||||
<div class="sigrow"><span class="nm">拓荆科技</span><span class="clr-up">流入</span><span class="sp"></span>
|
||||
<span class="mono clr-up" style="font-weight:600">+8712 万</span><span class="lvdot lv-warn">强</span></div>
|
||||
<div class="sigrow"><span class="nm">北方华创</span><span class="clr-down">流出</span><span class="sp"></span>
|
||||
<span class="mono clr-down" style="font-weight:600">-6240 万</span><span class="lvdot lv-info">显著</span></div>
|
||||
<div class="muted" style="margin-top:6px;font-size:11.5px">强度分四档：一般、显著、强、极强。鼠标停在行上能看到原始数值。</div>
|
||||
</div></div>
|
||||
<div class="srcgroup"><div class="srch" onclick="this.parentNode.classList.toggle('open')">▸ 盘中实况评分 · 关注与回避 <span class="n">· 28</span>
|
||||
<span class="help" data-tip="决策系统盘中模块给每只票打的实时分。分高的进关注名单，分低的进回避名单。">?</span></div>
|
||||
<div class="srcb"><div class="muted" style="padding:6px 0">关注 14 只 · 回避 14 只</div></div></div>
|
||||
<div class="srcgroup"><div class="srch" onclick="this.parentNode.classList.toggle('open')">▸ 决策系统 买入与卖出广播 <span class="n">· 6</span></div>
|
||||
<div class="srcb"><div class="muted" style="padding:6px 0">建议买入 4 只 · 建议卖出 2 只</div></div></div>
|
||||
<div class="srcgroup"><div class="srch" onclick="this.parentNode.classList.toggle('open')">▸ 日线形态 <span class="n">· 19</span>
|
||||
<span class="help" data-tip="决策系统的日线形态指标（内部代号 QRS），看多方和空方的力量是否对称。看涨表示多方占优。">?</span></div>
|
||||
<div class="srcb"><div class="muted" style="padding:6px 0">看涨 11 · 看跌 8</div></div></div>
|
||||
<div class="srcgroup"><div class="srch" onclick="this.parentNode.classList.toggle('open')">▸ 资金分布 <span class="n">· 15</span></div>
|
||||
<div class="srcb"><div class="muted" style="padding:6px 0">看涨 9 · 看跌 6</div></div></div>
|
||||
<div class="srcgroup"><div class="srch" onclick="this.parentNode.classList.toggle('open')">▸ 股价异动 <span class="n">· 9</span></div>
|
||||
<div class="srcb"><div class="muted" style="padding:6px 0">看涨 5 · 看跌 4</div></div></div>
|
||||
<div class="srcgroup"><div class="srch" onclick="this.parentNode.classList.toggle('open')">▸ 少见信号 <span class="n">· 1</span>
|
||||
<span class="help" data-tip="这几类平时不出现，出现了才要紧：建议卖出、多源同时报警、买入时机、资金流强度。">?</span></div>
|
||||
<div class="srcb"><div class="muted" style="padding:6px 0">今天只有「建议卖出」触发了 1 条。多源同时报警、买入时机、资金流强度今天还没触发。</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- ── 中区 ── -->
|
||||
<main class="main">
|
||||
|
||||
<div class="metrics">
|
||||
<div class="m"><div class="k">账户总资产</div><div class="v">1,966,758</div></div>
|
||||
<div class="m"><div class="k">可用资金</div><div class="v">3,247,815</div></div>
|
||||
<div class="m"><div class="k">持仓市值</div><div class="v">138,171</div></div>
|
||||
<div class="m"><div class="k">仓位</div><div class="v">6.91%<span class="s"> / 上限 70%</span></div></div>
|
||||
<div class="m"><div class="k">浮动盈亏</div><div class="v up">2,119<span class="s"> 1.56%</span></div></div>
|
||||
<div class="m"><div class="k">持仓只数</div><div class="v">4<span class="s"> / 上限 40</span></div></div>
|
||||
<div class="m"><div class="k">等我拍板</div><div class="v">0<span class="s"> 条</span></div></div>
|
||||
<div class="m"><div class="k">自主档位<span class="help" data-tip="系统能自己做主到什么程度。全自动＝各项检查通过就直接下单；只提议＝先在「等我拍板」问过你；暂停＝系统不自己动。">?</span></div>
|
||||
<div class="v" style="font-size:14px;padding-top:3px">全自动</div></div>
|
||||
</div>
|
||||
|
||||
<div class="attn"><b>需要注意</b> · 天赐材料已经连亏 2 天，决策系统建议卖出。这只票现在只卖不买，等你拍板。</div>
|
||||
|
||||
<div class="panel">
|
||||
<h3>我的持仓 <span class="n">· 4 只</span>
|
||||
<div class="spacer"></div>
|
||||
<button class="tbtn sm">按浮盈排序</button><button class="tbtn sm">导出</button></h3>
|
||||
<div class="sub2">安全垫<span class="help" data-tip="现在的浮盈够不够厚，够不够扛一次回撤。厚垫＝赚得多，可以考虑加仓；薄垫＝刚开始赚；浮亏无垫＝还在亏，不加仓。">?</span>
|
||||
看的是浮盈厚不厚：厚垫可以考虑加仓，薄垫先放着，浮亏无垫不加仓。</div>
|
||||
<div class="tscroll">
|
||||
<table class="ptable">
|
||||
<thead><tr>
|
||||
<th style="width:136px">股票</th>
|
||||
<th style="width:100px">现价 / 平均成本</th>
|
||||
<th style="width:84px">浮动盈亏</th>
|
||||
<th style="width:108px">市值 / 占总规模</th>
|
||||
<th style="width:118px">安全垫</th>
|
||||
<th style="width:126px">今天的信号</th>
|
||||
<th>状态 · 下一步</th>
|
||||
<th class="col-act" style="width:172px">操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="caret" onclick="exp(this)">▸</span><span class="nmc">中航光电</span><br>
|
||||
<span class="code mono" style="margin-left:14px">002179.SZ</span></td>
|
||||
<td class="mono">33.41<br><span class="muted">33.623</span></td>
|
||||
<td class="clr-down mono" style="font-weight:600">-0.63%</td>
|
||||
<td class="mono">40,092<br><span class="muted">2.00%</span></td>
|
||||
<td><span class="tagx t-none">浮亏无垫</span><div class="muted mono" style="margin-top:2px;white-space:nowrap">-0.63% · 连亏 2 日</div></td>
|
||||
<td><span class="muted">资金分布</span> <span class="clr-down">看跌</span><br>
|
||||
<span class="muted mono" style="font-size:11px">10:52 · 还有 1 条</span></td>
|
||||
<td><span class="chip idle" style="padding:1px 7px"><span class="dot"></span>持有中</span>
|
||||
<div class="muted" style="margin-top:3px">还在亏。跌到设定的补仓线会考虑补仓；亏得更深的那一档要你点头才补。</div></td>
|
||||
<td class="col-act"><div class="actgrp">
|
||||
<button class="tbtn sm">减仓</button><button class="tbtn sm danger">清仓</button><button class="tbtn sm" title="更多操作">⋯</button></div></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><span class="caret" onclick="exp(this)">▸</span><span class="nmc">天赐材料</span><br>
|
||||
<span class="code mono" style="margin-left:14px">002709.SZ</span></td>
|
||||
<td class="mono">37.01<br><span class="muted">39.649</span></td>
|
||||
<td class="clr-down mono" style="font-weight:600">-6.66%</td>
|
||||
<td class="mono">11,103<br><span class="muted">0.56%</span></td>
|
||||
<td><span class="tagx t-none">浮亏无垫</span><div class="muted mono" style="margin-top:2px;white-space:nowrap">-6.66% · 连亏 2 日</div></td>
|
||||
<td><span style="color:var(--stop);font-weight:600">建议卖出</span><br>
|
||||
<span class="muted mono" style="font-size:11px">09:52 · 把握 0.72</span></td>
|
||||
<td><span class="chip warn" style="padding:1px 7px"><span class="dot"></span>只卖不买</span>
|
||||
<div class="muted" style="margin-top:3px">决策系统建议卖出，等你拍板。这只票暂时不再买入，卖出和止损照常。</div></td>
|
||||
<td class="col-act"><div class="actgrp">
|
||||
<button class="tbtn sm">减仓</button><button class="tbtn sm danger">清仓</button><button class="tbtn sm" title="更多操作">⋯</button></div></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><span class="caret" onclick="exp(this)">▾</span><span class="nmc">唯捷创芯</span><br>
|
||||
<span class="code mono" style="margin-left:14px">688153.SH</span></td>
|
||||
<td class="mono">25.47<br><span class="muted">23.821</span></td>
|
||||
<td class="clr-up mono" style="font-weight:600">+6.92%</td>
|
||||
<td class="mono">20,376<br><span class="muted">1.02%</span></td>
|
||||
<td><span class="tagx t-solid">厚垫</span><div class="muted mono" style="margin-top:2px">6.92%</div></td>
|
||||
<td><span class="muted">资金流强度</span> <span class="clr-up">看涨</span><br>
|
||||
<span class="muted mono" style="font-size:11px">11:16 · 还有 4 条</span></td>
|
||||
<td><span class="chip idle" style="padding:1px 7px"><span class="dot"></span>持有中</span>
|
||||
<div class="muted" style="margin-top:3px">浮盈够厚，条件符合就会自动加仓。</div></td>
|
||||
<td class="col-act"><div class="actgrp">
|
||||
<button class="tbtn sm">减仓</button><button class="tbtn sm danger">清仓</button><button class="tbtn sm" title="更多操作">⋯</button></div></td>
|
||||
</tr>
|
||||
<tr class="expand-row"><td colspan="8">
|
||||
<div class="exp-grid">
|
||||
<div><div class="exp-h">分几批买进来的</div>
|
||||
<div class="exp-led"><span class="muted">首批</span> 还剩 500 股 · 买入价 23.10 · 08-19 · 已落袋 0</div>
|
||||
<div class="exp-led"><span class="muted">回落补足</span> 还剩 200 股 · 买入价 24.32 · 08-21 · 已落袋 0</div>
|
||||
<div class="exp-led"><span class="muted">盈利加仓</span> 还剩 100 股 · 买入价 25.05 · 08-25 · 已落袋 0</div></div>
|
||||
<div><div class="exp-h">这只票最近的记录</div>
|
||||
<div class="exp-led"><span class="muted mono">08-26 09:41</span> 合规检查驳回了盈利加仓 —— 今天这只票的买入额度用完了</div>
|
||||
<div class="exp-led"><span class="muted mono">08-25 10:12</span> 决策系统放行盈利加仓 —— 资金流强度连续看涨</div></div>
|
||||
</div></td></tr>
|
||||
|
||||
<tr>
|
||||
<td><span class="caret" onclick="exp(this)">▸</span><span class="nmc">沐曦股份</span><br>
|
||||
<span class="code mono" style="margin-left:14px">688802.SH</span></td>
|
||||
<td class="mono">666.00<br><span class="muted">647.53</span></td>
|
||||
<td class="clr-up mono" style="font-weight:600">+2.85%</td>
|
||||
<td class="mono">66,600<br><span class="muted">3.33%</span></td>
|
||||
<td><span class="tagx t-thin">薄垫</span><div class="muted mono" style="margin-top:2px">2.85%</div></td>
|
||||
<td class="muted">今天没有</td>
|
||||
<td><span class="chip ok" style="padding:1px 7px"><span class="dot"></span>建仓中</span>
|
||||
<div class="muted" style="margin-top:3px">分三批买，第一批已经买到，后两批等股价回落到位再买。</div></td>
|
||||
<td class="col-act"><div class="actgrp">
|
||||
<button class="tbtn sm">减仓</button><button class="tbtn sm danger">清仓</button><button class="tbtn sm" title="更多操作">⋯</button></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="muted" style="margin-top:8px">操作列钉在右边，表格横向再挤也不会被切掉。「⋯」里是：设止损价、设目标价、只卖不买、加入黑名单、挂交易方案。</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h3>今日在办</h3>
|
||||
<div class="sub2">今天下出去的买卖单，按进展分档。最后一档是今天考察过但没建仓的票，连原因一起摆出来。</div>
|
||||
<div class="tabs">
|
||||
<button class="on">还没成交<span class="n">1</span></button>
|
||||
<button>今日成交<span class="n">1</span></button>
|
||||
<button>已经结束<span class="n">0</span></button>
|
||||
<button>今天没建仓的<span class="n">3</span></button>
|
||||
</div>
|
||||
<div class="tscroll">
|
||||
<table class="ptable" style="min-width:760px">
|
||||
<thead><tr><th style="width:150px">股票</th><th style="width:130px">做什么</th>
|
||||
<th style="width:112px">下单量 / 已成交</th><th style="width:86px">限价</th><th>进展</th><th style="width:80px">操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="nmc">沐曦股份</span> <span class="code mono">688802.SH</span></td>
|
||||
<td>建新仓 · 买入</td><td class="mono">100 / 100</td><td class="mono">648.00</td>
|
||||
<td><span class="chip ok"><span class="dot"></span>已挂单，等成交</span></td>
|
||||
<td><button class="tbtn sm">撤单</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h3>今天发生了什么 <span class="n">· 23 条</span><div class="spacer"></div>
|
||||
<button class="tbtn sm">▾ 展开</button></h3>
|
||||
<div class="muted">系统的每一次判断，和你的每一次操作，合并成一条时间线。默认收起。</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ── 右侧 ── -->
|
||||
<div class="side side-r">
|
||||
<div class="strip" onclick="openRail('r')">
|
||||
<span class="arr">◀</span><span class="vtxt">待办与操作</span>
|
||||
</div>
|
||||
<aside class="rail" id="railR">
|
||||
<div class="rail-h">
|
||||
<button class="iconbtn btn-close" title="关闭（或按 Esc）" onclick="closeRail()">✕</button>
|
||||
<button class="iconbtn btn-fold" title="收成窄条" onclick="foldRail('r')">▶</button>
|
||||
<button class="iconbtn btn-pull" title="放大成浮层" onclick="openRail('r')">⤢</button>
|
||||
<div class="spacer"></div>
|
||||
<span class="ttl">待办与操作</span>
|
||||
</div>
|
||||
<div class="rail-body">
|
||||
|
||||
<div class="sect"><div class="secth" onclick="this.parentNode.classList.toggle('closed')">
|
||||
等我拍板 <span class="n">· 0 条</span><span class="car">▾</span></div>
|
||||
<div class="sectb"><div class="muted" style="padding:4px 0">现在没有要你确认的事。自主档位是「全自动」，检查通过系统就直接下单了。</div></div></div>
|
||||
|
||||
<div class="sect"><div class="secth" onclick="this.parentNode.classList.toggle('closed')">
|
||||
我的策略 <span class="n">· 5 个</span><span class="car">▾</span></div>
|
||||
<div class="sectb">
|
||||
<div class="muted" style="margin-bottom:6px">策略功能已开启 · 自动挂方案已开启 · 今天 11:51 跑过一轮</div>
|
||||
<div class="mini"><div class="top"><b>唯捷创芯</b> <span class="tagx t-solid">网格</span>
|
||||
<span class="spacer"></span><span class="chip ok" style="padding:1px 7px"><span class="dot"></span>运行中</span></div>
|
||||
<div class="st">在 23.0 到 27.5 之间，每跌 2% 买一份、每涨 2% 卖一份，已经成交 3 份。系统自动执行。</div></div>
|
||||
<div class="mini"><div class="top"><b>天赐材料</b> <span class="tagx t-thin">跟踪止盈</span>
|
||||
<span class="spacer"></span><span class="chip warn" style="padding:1px 7px"><span class="dot"></span>只卖不买</span></div>
|
||||
<div class="st">决策系统发现资金异动，已经把这个策略的买入停掉。卖出照常。确认没问题就点「恢复买入」。</div>
|
||||
<div style="margin-top:6px"><button class="tbtn sm">恢复买入</button><button class="tbtn sm">暂停整个策略</button></div></div>
|
||||
<div class="mini"><div class="top"><b>沐曦股份</b> <span class="tagx t-solid">做T<span class="help" data-tip="当天买、当天卖同一只票，赚中间的差价，收盘时持仓数量回到原样。">?</span></span>
|
||||
<span class="spacer"></span><span class="chip ok" style="padding:1px 7px"><span class="dot"></span>运行中</span></div>
|
||||
<div class="st">每轮拿两成持仓做，今天已经做了 0 次，最多 3 次。14:50 之前一定卖回去。</div></div>
|
||||
<button class="tbtn sm" style="width:100%">看全部 5 个 ›</button>
|
||||
</div></div>
|
||||
|
||||
<div class="sect"><div class="secth" onclick="this.parentNode.classList.toggle('closed')">
|
||||
系统在盯的候选 <span class="n">· 12 只</span><span class="car">▾</span></div>
|
||||
<div class="sectb">
|
||||
<div class="muted" style="margin-bottom:5px">今天选股计划里、系统还在盯着、可能会建仓的票。</div>
|
||||
<div class="sigrow"><span class="muted mono t">第1</span><span class="nm">寒武纪</span><span class="cat">算力</span>
|
||||
<span class="sp"></span><span class="lvdot lv-strong">准备建仓</span></div>
|
||||
<div class="sigrow"><span class="muted mono t">第2</span><span class="nm">拓荆科技</span><span class="cat">半导体设备</span>
|
||||
<span class="sp"></span><span class="lvdot lv-info">还在盯</span></div>
|
||||
<div class="sigrow"><span class="muted mono t">第3</span><span class="nm">中际旭创</span><span class="cat">光模块</span>
|
||||
<span class="sp"></span><span class="lvdot lv-info">还在盯</span></div>
|
||||
<button class="tbtn sm" style="width:100%;margin-top:6px">看全部候选 ›</button>
|
||||
</div></div>
|
||||
|
||||
<div class="sect"><div class="secth" onclick="this.parentNode.classList.toggle('closed')">
|
||||
整个组合的操作 <span class="car">▾</span></div>
|
||||
<div class="sectb">
|
||||
<div class="oprow"><span class="b"><button class="tbtn sm">暂停买入</button></span>
|
||||
<span class="d">停掉所有新的买入，并撤掉已经挂出去、还没成交的买单。卖出和止损照常。</span></div>
|
||||
<div class="oprow"><span class="b"><button class="tbtn sm">休假模式</button></span>
|
||||
<span class="d">系统的自动动作全部停下，只保留每天的对账和日报。</span></div>
|
||||
<div class="oprow"><span class="b"><button class="tbtn sm">调整仓位</button></span>
|
||||
<span class="d">现在仓位 6.91%，可用资金 3,247,815。填一个目标百分比，系统算出要买卖多少。</span></div>
|
||||
<div class="oprow"><span class="b"><button class="tbtn sm">清仓某行业</button></span>
|
||||
<span class="d">把某个行业的持仓全部卖掉，从下拉里选，不用手打。</span></div>
|
||||
<div class="oprow"><span class="b"><button class="tbtn sm danger">一键清仓</button></span>
|
||||
<span class="d">紧急离场用：全部持仓按最快速度卖出，不再挑时间点。要确认两次。</span></div>
|
||||
</div></div>
|
||||
|
||||
<div class="sect closed"><div class="secth" onclick="this.parentNode.classList.toggle('closed')">
|
||||
设置 <span class="car">▸</span></div>
|
||||
<div class="sectb"><div class="muted" style="padding:4px 0">资金与仓位的纪律、要不要补仓、自主档位。</div></div></div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<b>这一版改了两件事</b>
|
||||
<ol>
|
||||
<li><b>宽度不够时不再换行堆叠，改成三段式。</b> 临界值是按「主区要放得下持仓表」倒推出来的，不是拍脑袋定的：
|
||||
窗口 <b>≥1660 像素</b>，左右两栏都常驻；
|
||||
<b>1380 到 1659</b>，只让左边的信号流常驻，右栏收成 40 像素的窄条；
|
||||
<b><1380</b>，两栏都是窄条。
|
||||
窄条一直贴在主区两边看得见，点一下就从边上滑出浮层盖住主区，点旁边空白处或按 Esc 收回去。
|
||||
主区永远是一栏，任何宽度下都不会被挤成两行；真窄到放不下持仓表时，是表格自己横向滚动，操作列照样钉住。
|
||||
宽度够的时候你也可以手动点 ◀ ▶ 把某一栏收成窄条，再点窄条就展回来。
|
||||
右下角的小黑条告诉你现在是哪一段、窗口多宽——那只是给你看的，正式页面里没有。</li>
|
||||
<li><b>文案里的行话全换成白话。</b> 「策略买入腿已暂停」改成「这只票现在只卖不买」；「规则闸」改成「合规检查」；「研判闸」改成「决策系统复核」；「置信 0.72」改成「把握 0.72（满分 1）」；「日QRS对称」改成「日线形态」；「陈旧」改成「已过时」；「摊薄成本」改成「平均成本」。必须保留的项目术语（安全垫、自主档位、做T、日线形态）后面挂了一个「?」，鼠标停上去有一句白话解释。完整的对照表在 <b>UI_COPY_AUDIT.md</b>。</li>
|
||||
</ol>
|
||||
<div style="margin-top:9px">试一下：把浏览器窗口从最大慢慢拖窄，看它在 1660 和 1380 两处怎么换挡。</div>
|
||||
</div>
|
||||
|
||||
<div class="modebadge" id="modeBadge">停靠模式 · 1512px</div>
|
||||
|
||||
<script>
|
||||
// 两条临界宽度。算法：主区要放得下持仓表（940 像素）加面板内边距，
|
||||
// 再加上要常驻的侧栏宽度、栏间距和页面左右留白。
|
||||
// 两栏都常驻 = 972 + 302 + 334 + 26 + 32 = 1666 → 取 1660
|
||||
// 只常驻左栏 = 972 + 302 + 40 + 26 + 32 = 1372 → 取 1380
|
||||
const W_BOTH = 1660, W_LEFT = 1380;
|
||||
let openSide = null;
|
||||
|
||||
function applyMode(){
|
||||
const w = window.innerWidth;
|
||||
const dockL = w >= W_LEFT, dockR = w >= W_BOTH;
|
||||
document.body.classList.toggle('dock-l', dockL);
|
||||
document.body.classList.toggle('dock-r', dockR);
|
||||
const name = dockR ? '两栏都常驻' : (dockL ? '左栏常驻，右栏窄条' : '两栏都是窄条');
|
||||
document.getElementById('modeBadge').textContent = name + ' · ' + w + 'px';
|
||||
// 某一侧已经能常驻了，就不该还浮在上面
|
||||
if ((openSide === 'l' && dockL) || (openSide === 'r' && dockR)) closeRail();
|
||||
}
|
||||
window.addEventListener('resize', applyMode);
|
||||
applyMode();
|
||||
|
||||
function foldRail(side){
|
||||
document.body.classList.add(side === 'l' ? 'l-fold' : 'r-fold');
|
||||
}
|
||||
function openRail(side){
|
||||
const el = document.getElementById(side === 'l' ? 'railL' : 'railR');
|
||||
const foldKey = side === 'l' ? 'l-fold' : 'r-fold';
|
||||
const canDock = document.body.classList.contains(side === 'l' ? 'dock-l' : 'dock-r');
|
||||
// 宽度够、只是你手动收起来了：点一下直接展回常驻，不用浮层
|
||||
if (canDock && document.body.classList.contains(foldKey)){
|
||||
document.body.classList.remove(foldKey); return;
|
||||
}
|
||||
el.classList.add('open');
|
||||
document.getElementById('scrim').classList.add('on');
|
||||
openSide = side;
|
||||
}
|
||||
function closeRail(){
|
||||
document.querySelectorAll('.rail').forEach(r => r.classList.remove('open'));
|
||||
document.getElementById('scrim').classList.remove('on');
|
||||
openSide = null;
|
||||
}
|
||||
document.getElementById('scrim').onclick = closeRail;
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeRail(); });
|
||||
|
||||
function sigTab(btn, k){
|
||||
btn.parentNode.querySelectorAll('button').forEach(b => b.classList.remove('on'));
|
||||
btn.classList.add('on');
|
||||
document.getElementById('sig-brief').style.display = k === 'brief' ? '' : 'none';
|
||||
document.getElementById('sig-src').style.display = k === 'src' ? '' : 'none';
|
||||
}
|
||||
function tg(el){
|
||||
const on = el.classList.contains('on');
|
||||
el.classList.toggle('on', !on); el.classList.toggle('off', on);
|
||||
}
|
||||
function exp(el){
|
||||
const tr = el.closest('tr'), next = tr.nextElementSibling;
|
||||
if (next && next.classList.contains('expand-row')){
|
||||
next.style.display = (next.style.display === 'none') ? 'table-row' : 'none';
|
||||
el.textContent = next.style.display === 'none' ? '▸' : '▾';
|
||||
}
|
||||
}
|
||||
document.getElementById('mbToggle').onclick = function(){
|
||||
const p = document.getElementById('mbPanel');
|
||||
p.classList.toggle('open');
|
||||
this.textContent = p.classList.contains('open') ? '收起 ▴' : '展开全部 ▾';
|
||||
};
|
||||
document.querySelectorAll('.mb-tab').forEach(t => t.onclick = () => {
|
||||
const k = t.dataset.k;
|
||||
document.querySelectorAll('.mb-tab').forEach(x => x.classList.toggle('on', x.dataset.k === k));
|
||||
document.querySelectorAll('#mbPanel .mb-row').forEach(r => {
|
||||
r.style.display = (k === 'all' || r.dataset.k === k) ? '' : 'none';
|
||||
});
|
||||
const p = document.getElementById('mbPanel');
|
||||
p.classList.add('open');
|
||||
document.getElementById('mbToggle').textContent = '收起 ▴';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue