XiaChangSong/BPOS-TMP-REPO
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

活动模块 L3 实例详情页:过程时间线为主角的主从布局;终止/编辑/删除收在最深层;L2 查看详情接入

Browse Source
This commit is contained in:
shanqin
2026-08-26 15:39:19 +08:00
parent a681ffe9f7
commit 99f021f964
6 changed files with 337 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/gov-shell.tsx
+4 -2
View File
@@ -25,7 +25,7 @@ import { useGovObjects, useGovTasks } from '@web-shared/gov/gov-api.ts';
import { domainShort, sortDomains } from '@web-shared/gov/domains.ts';
import { queryKeys } from './query.ts';
import { BlueprintHome } from '@features/gov-blueprint';
import { TasksHome, ActvPage, TaskLogPage, TaskPage, WfPage } from '@features/gov-task';
import { TasksHome, ActiPage, ActvPage, TaskLogPage, TaskPage, WfPage } from '@features/gov-task';
import { RunsHome } from '@features/gov-runs';
import { EmpPage, PeopleHome, RolePage } from '@features/gov-staff';
import { PkgPage, WorkflowsHome } from '@features/gov-process';
@@ -330,7 +330,9 @@ function Detail({ route, nav }: { route: Route; nav: Nav }) {
case 'act':
return <ActPage id={route.id} />;
case 'actd':
return <ActvPage id={route.id} />;
return <ActvPage id={route.id} nav={nav} />;
case 'acti':
return <ActiPage id={route.id} nav={nav} />;
case 'tool':
return <ToolPage id={route.id} />;
case 'obj':
apps/web/src/app/styles/console.css
+73
View File
@@ -635,6 +635,79 @@
@media (prefers-reduced-motion: reduce) {
.g-actvd > * { animation: none; }
}
/* ══ 实例详情 L3(2026-08-26,`.g-actid` 作用域)══
主从 2:1(DESIGN-SPEC §9):左「动作过程记录」是主角,右栏输入/输出是辅助;
业务色相从 L1/L2 接过来(--ah 只染页头图标块与文件图标块,一处记忆点) */
.g-actid { display: flex; flex-direction: column; gap: 16px; --ah: #3370ff; --ah-soft: #eaf1ff; }
.g-actid.h-teal { --ah: #0aa294; --ah-soft: #e0f5f3; }
.g-actid.h-amber { --ah: #d9730d; --ah-soft: #fdf0e0; }
.g-actid.h-violet { --ah: #7f3bf5; --ah-soft: #f1e9fe; }
/* 入场与 L2 同一节奏:自下而上淡入,60ms 逐段 stagger(深入一层,从下进场) */
.g-actid > * { animation: actvd-in .4s ease-out both; }
.g-actid > *:nth-child(2) { animation-delay: 60ms; }
.g-actid > *:nth-child(3) { animation-delay: 120ms; }
.g-actid > *:nth-child(4) { animation-delay: 180ms; }
.g-actid .g-dh-i { color: var(--ah); background: var(--ah-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ah) 18%, transparent); }
/* 状态丸翻转(终止)时弹出一次高亮 —— 变化要看得见 */
.g-actid .g-dh .chips > * { animation: actvd-pop .28s ease-out; }
/* 主从栅格:宽屏 2:1,≤1024 收单列(§14 降级路径) */
.g-actid-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.g-actid-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1024px) {
.g-actid-grid { grid-template-columns: 1fr; }
}
/* —— 动作过程记录:竖时间线 —— 轨(点+线)在左,内容在右;
状态色只进圆点与结果词(--tone 来自行上的 t-* 类),行面不上色 */
.g-actid .g-tl { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #dfe3ea; border-radius: 8px; overflow: hidden; }
.g-actid .g-tl-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px 14px; transition: background var(--t-fast); }
.g-actid .g-tl-row + .g-tl-row { border-top: 1px solid #eef1f5; }
.g-actid .g-tl-row:hover { background: #f7f9fc; }
.g-actid .g-tl-rail { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.g-actid .g-tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone, #c7cdd6); flex: none; }
/* 连接线向下探出 25px(下行上 padding 12 + 边框 1 + 本行下 padding 12),把时间线串成一条不间断的竖轨 */
.g-actid .g-tl-line { width: 1px; flex: 1; margin-top: 3px; margin-bottom: -25px; background: #dde2ea; }
/* 未到达:空心点 + 灰字 —— 「还没走到」与「走完了」要一眼分开 */
.g-actid .g-tl-row.pending .g-tl-dot { background: #fff; box-shadow: inset 0 0 0 2px #d8dee6; }
/* 当前步:呼吸环(全页唯一一处持续动效,§13 克制;reduced-motion 关掉) */
.g-actid .g-tl-row.current .g-tl-dot { animation: actid-pulse 1.6s ease-out infinite; }
@keyframes actid-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 35%, transparent); }
100% { box-shadow: 0 0 0 7px transparent; }
}
.g-actid .g-tl-c { min-width: 0; }
.g-actid .g-tl-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.g-actid .g-tl-h b { font-size: 13px; font-weight: 600; color: var(--ink); }
.g-actid .g-tl-by { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); }
.g-actid .g-tl-meta { margin-left: auto; font: 500 11px/1.6 var(--mono); color: var(--ink-4); }
.g-actid .g-tl-res { font-size: 11px; font-weight: 600; color: var(--tone-ink); }
.g-actid .g-tl-note { margin: 3px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.g-actid .g-tl-row.pending .g-tl-h b { font-weight: 500; color: var(--ink-4); }
.g-actid .g-tl-row.pending .g-tl-res { font-weight: 400; color: var(--ink-4); }
.g-actid .g-tl-row.pending .g-tl-note { color: var(--ink-4); }
/* —— 辅栏:输入(键值行)/ 输出(文件行)—— 白卡 1px 描边,与 L2 列表同表面 */
.g-actid .g-kv { background: #fff; border: 1px solid #dfe3ea; border-radius: 8px; padding: 4px 14px; }
.g-actid .g-kv-row { display: flex; gap: 12px; padding: 8px 0; }
.g-actid .g-kv-row + .g-kv-row { border-top: 1px solid #eef1f5; }
.g-actid .g-kv-row em { flex: none; width: 44px; padding-top: 1px; font-style: normal; font-size: 12px; color: var(--ink-4); }
.g-actid .g-kv-row b { font-weight: 500; font-size: 12.5px; line-height: 1.6; color: var(--ink); word-break: break-all; }
.g-actid .g-kv-note { padding: 8px 0; border-top: 1px solid #eef1f5; font-size: 11.5px; color: var(--ink-4); }
.g-actid .g-file { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #dfe3ea; border-radius: 8px; padding: 10px 14px; }
.g-actid .g-file-i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--ah-soft); color: var(--ah); }
.g-actid .g-file-n { min-width: 0; }
.g-actid .g-file-n b { display: block; font: 500 12px/1.4 var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-actid .g-file-n em { font-style: normal; font-size: 11px; color: var(--ink-4); }
.g-actid .g-file .g-rowbtn { margin-left: auto; flex: none; }
.g-actid .g-file-empty { background: #fff; border: 1px dashed #d8dee6; border-radius: 8px; padding: 18px 14px; text-align: center; font-size: 12px; color: var(--ink-4); }
@media (prefers-reduced-motion: reduce) {
.g-actid > * { animation: none; }
.g-actid .g-tl-row.current .g-tl-dot { animation: none; box-shadow: 0 0 0 3px var(--tone-soft); }
.g-actid .g-dh .chips > * { animation: none; }
}
.g-fcard .mbtn { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-4); cursor: pointer; }
.g-fcard .mbtn:hover, .g-fcard .mbtn.on { border-color: var(--cline); background: #f3f6fa; color: var(--ink); }
.g-fcard .mbtn.bad:hover { border-color: #e6c4c4; background: #fdf2f2; color: var(--danger); }