feat: add interactive campus workflow graph

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
lofyer
2026-08-24 20:15:38 +08:00
co-authored by factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
parent 8dff9847e3
commit 248078113c
7 changed files with 1733 additions and 209 deletions
+37 -17
View File
@@ -51,7 +51,7 @@
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M20 7h-9a4 4 0 0 0-4 4v1M4 17h9a4 4 0 0 0 4-4v-1M16 4l4 3-4 3M8 14l-4 3 4 3" />
</svg>
<span>闭环工作台</span>
<span>业务流程</span>
<span class="nav-dot"></span>
</button>
<button class="nav-item" data-view="profession" data-menu-key="profession">
@@ -218,13 +218,13 @@
</header>
<main class="main-content">
<!-- 校园业务闭环 -->
<section class="view" id="view-loop" data-title="闭环工作台">
<!-- 校园业务流程 -->
<section class="view" id="view-loop" data-title="业务流程">
<div class="page-heading heading-with-actions">
<div>
<div class="eyebrow"><span></span> CAMPUS CLOSED LOOP</div>
<h1>校园端业务闭环工作台</h1>
<p>从企业需求到下一周期复核,一条样板链按角色推进、按实体留痕、刷新后继续。</p>
<div class="eyebrow"><span></span> CAMPUS WORKFLOW</div>
<h1>企业需求到成效复核流程</h1>
<p>点击流程节点查看实体、责任人与输入输出;当前角色可在已解锁节点直接推进业务。</p>
</div>
<button class="button secondary" id="resetClosedLoop">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.34 5.66M20 4v7h-7" /></svg>
@@ -232,31 +232,51 @@
</button>
</div>
<div class="loop-identity-strip" id="loopIdentityStrip"></div>
<article class="panel loop-status-panel">
<div class="panel-header">
<div><span class="panel-kicker">INTERACTIVE WORKFLOW</span><h2>需求到复核流程图</h2></div>
<span class="version-badge" id="loopSchemaBadge">SCHEMA V2</span>
</div>
<div class="loop-flow-toolbar">
<div class="loop-flow-summary" id="loopFlowSummary"></div>
<button class="button tertiary" id="loopFocusCurrent">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8v8m-4-4h8M4 12a8 8 0 1 0 16 0 8 8 0 0 0-16 0Z" /></svg>
定位待办节点
</button>
</div>
<div class="loop-flow-scroll">
<div class="loop-flow-canvas">
<svg class="loop-flow-edges" id="loopFlowEdges" preserveAspectRatio="none" aria-hidden="true"></svg>
<div class="loop-flow-nodes" id="loopChain" role="group" aria-label="校园业务流程节点"></div>
</div>
</div>
<div class="loop-mobile-branches" id="loopMobileBranches" aria-label="流程回流关系"></div>
<div class="loop-flow-legend" aria-label="流程状态图例">
<span><i class="complete"></i>已完成</span>
<span><i class="current"></i>当前待办</span>
<span><i class="risk"></i>退回或整改</span>
<span><i class="locked"></i>前置未满足</span>
</div>
</article>
<div class="loop-layout">
<section class="loop-main">
<article class="panel loop-status-panel">
<div class="panel-header">
<div><span class="panel-kicker">实体状态链</span><h2>样板闭环进度</h2></div>
<span class="version-badge" id="loopSchemaBadge">SCHEMA V2</span>
</div>
<div class="loop-chain" id="loopChain"></div>
</article>
<article class="panel loop-detail-panel">
<div class="panel-header">
<div><span class="panel-kicker">业务实体</span><h2>关联对象与关键字段</h2></div>
<div><span class="panel-kicker" id="loopNodeKicker">NODE DETAIL</span><h2 id="loopNodeTitle">节点详情</h2></div>
<span class="status-badge" id="loopNodeStatus">待选择</span>
</div>
<div class="loop-entity-grid" id="loopEntityGrid"></div>
<div class="loop-node-detail" id="loopNodeDetail" aria-live="polite"></div>
</article>
<article class="panel loop-audit-panel">
<div class="panel-header">
<div><span class="panel-kicker">AUDIT EVENTS</span><h2>闭环审计事件</h2></div>
<div><span class="panel-kicker">AUDIT EVENTS</span><h2>流程审计事件</h2></div>
<span class="panel-count" id="loopAuditCount">0 条</span>
</div>
<div class="loop-audit-list" id="loopAuditList"></div>
</article>
</section>
<aside class="panel loop-action-panel">
<div class="panel-header"><div><span class="panel-kicker">ROLE ACTION</span><h2 id="loopRoleActionTitle">当前角色下一步</h2></div></div>
<div class="panel-header"><div><span class="panel-kicker">ROLE QUEUE</span><h2 id="loopRoleActionTitle">当前角色待办节点</h2></div></div>
<div class="loop-role-boundary" id="loopRoleBoundary"></div>
<div class="loop-action-list" id="loopActionList"></div>
</aside>