XiaChangSong/JX-BPOS
1
0
Fork 0
forked from ChaiHao/BPOS-MVP
Code Pull Requests Activity

三面拆分⑫:UI 打磨 —— 补 10 枚缺失图标,蓝图改因果链,台账收成一个模块

Browse Source 
图标注册表缺 arrow-left-right/columns/table/tag 等 10 名,用到即渲染成空 SVG —— 补齐;
蓝图四库改真箭头相连的因果链节点卡(卡即入口,删重复的入库段);
驾驶舱终态分布改五色堆叠条;运营数据收成左轨一枚「台账」,域下沉为 2-3 字短名页签
(受理→寻源→定价→议价→替代→共享,按流程序),进模块自动落首域。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
ChaiHao
2026-07-27 22:02:49 +08:00
co-authored by Claude Fable 5
parent 4a19690389
commit 34e207c3e8
11 changed files with 266 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/styles/console.css
+32
View File
@@ -458,3 +458,35 @@
.g-dbpage button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.g-dbpage button:disabled { opacity: .35; cursor: default; }
.g-dbpage b { min-width: 36px; text-align: center; font-size: 11px; color: var(--ink-2); }
/* ═══════════ 三面补充(非原型)—— 蓝图因果链 / 终态堆叠条 / 数据域紧凑轨钮 ═══════════ */
/* 蓝图因果链:四库节点卡以真箭头相连 —— 箭头编码真实依赖(流程包→活动→工具→数据),节点即入口 */
.g-chain { display: flex; align-items: stretch; gap: 0; margin-bottom: 14px; }
.g-chain-node { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--card); border: 1px solid var(--cline); border-radius: 13px; box-shadow: var(--cshadow); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.g-chain-node:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 4px 14px -6px rgba(51, 112, 255, .35); }
.g-chain-node:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.g-chain-k { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.g-chain-k .ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--fill-2, #eef1f5); color: var(--ink-3); }
.g-chain-node.t-brand .ic { background: var(--brand-soft); color: var(--brand-deep); }
.g-chain-node.t-auto .ic { background: #e6f7f4; color: #0a6a64; }
.g-chain-node.t-collab .ic { background: #f0e9ff; color: #5b21cf; }
.g-chain-node.t-ok .ic { background: var(--ok-soft); color: var(--ok); }
.g-chain-v { font-size: 24px; font-weight: 800; font-family: var(--mono); letter-spacing: -.03em; line-height: 1; }
.g-chain-node.t-brand .g-chain-v { color: var(--brand-deep); }
.g-chain-node.t-auto .g-chain-v { color: #0a6a64; }
.g-chain-node.t-collab .g-chain-v { color: #5b21cf; }
.g-chain-node.t-ok .g-chain-v { color: var(--ok); }
.g-chain-h { font-size: 11px; line-height: 1.5; color: var(--ink-4); }
.g-chain-arr { flex: none; width: 26px; display: grid; place-items: center; color: var(--ink-4); }
@media (max-width: 1100px) {
.g-chain { flex-direction: column; }
.g-chain-arr { transform: rotate(90deg); width: auto; padding: 2px 0; }
}
/* 终态堆叠条:五终态五色一条,比例即信息 —— 装在 .g-kpi 卡里 */
.g-mixbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fill-2, #eef1f5); }
.g-mixbar i { display: block; min-width: 2px; }
.g-mixbar-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 10px; color: var(--ink-3); }
.g-mixbar-legend b { font-family: var(--mono); font-weight: 700; color: var(--ink-2); }
.g-mixbar-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; }