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
co-authored by
factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
parent
8dff9847e3
commit
248078113c
+23
-6
@@ -15,8 +15,10 @@ python3 -m http.server 8080
|
||||
## 核心产品能力
|
||||
|
||||
- 校级供需决策总览、周期切换、专业搜索和七步产品导览
|
||||
- “企业需求 → 学校接收/分析快照 → 专业建议决策 → 任务/项目 → 执行证据 → 企业评价 → 校级验收 → 报告审批发布 → 数据使用反馈 → 下一周期复核”校园业务闭环
|
||||
- 闭环实体、角色动作、审批历史与审计事件使用 `localStorage` 持久化，支持刷新续办、Schema 迁移和样板重置
|
||||
- “企业需求 → 学校接收/分析快照 → 专业建议决策 → 任务/项目 → 执行证据 → 企业评价 → 校级验收 → 报告审批发布 → 数据使用反馈 → 成效复核”11 节点可交互业务流程图
|
||||
- 流程节点直接读取同一套业务实体和状态机，支持节点选择、输入输出、责任角色、关联 ID、当前待办定位及节点内办理
|
||||
- “需整改 → 补充证据”“验收退回 → 补充证据”“进入下一周期 → 企业需求”三类回流边与实际状态同步
|
||||
- 流程实体、角色动作、审批历史与审计事件使用 `localStorage` 持久化，支持刷新续办、Schema 迁移和样板重置
|
||||
- 技术接收同时强校验租户、包号、版本、交付记录数和完整 64 位 SHA-256；任一不一致只写失败审计，不推进回执或分析快照
|
||||
- 交付包记录数与分析样本量分开保存：样板包回执为 `2,846,320` 条，生成的校园分析快照为 `128,642` 条
|
||||
- 专业技能供需、岗位流向、薪资对标、课程技能映射与专业对比
|
||||
@@ -43,6 +45,20 @@ python3 -m http.server 8080
|
||||
- **校级数据**：来自学校实习、就业、教务等业务系统，数据权属归学校。
|
||||
- **企业数据**：由合作企业确认提交，按照合作协议限定使用范围。
|
||||
|
||||
## 可交互业务流程图
|
||||
|
||||
“业务流程”不是状态卡片列表，而是由节点和有向边构成的可操作流程：
|
||||
|
||||
- 11 个节点分别对应企业需求、分析快照、专业建议、任务、项目、证据、企业评价、校级验收、报告、使用反馈和成效复核；
|
||||
- 节点状态分为已完成、当前待办、退回/整改和前置未满足，流程完成度与当前责任角色实时计算；
|
||||
- 点击任一节点可查看节点输入、节点输出、关键字段、责任角色和关联实体；
|
||||
- 当前角色具备权限且前置条件满足时，可在节点详情直接办理；无权限时显示责任边界而非伪造可用按钮；
|
||||
- 企业评价需整改、校级验收退回和进入下一周期均使用独立回流边表达；
|
||||
- 桌面端显示完整流程拓扑，移动端转换为带连接线的纵向节点流程，并用三张可点击关系卡保留整改、退回与下一周期回流；
|
||||
- “进入下一周期”会归档上一周期报告，创建带 `previousVersionId` 的新需求、快照和回执版本，并清空新周期尚未产生的下游实体。
|
||||
|
||||
流程图只负责展示并调用现有状态机，不维护第二套演示状态。因此原有租户、SHA、记录数、证据冻结、独立审批和角色授权规则继续生效。
|
||||
|
||||
## 数据与报告依赖图谱
|
||||
|
||||
“数据资产”页提供两种追溯方向：
|
||||
@@ -78,6 +94,7 @@ python3 -m http.server 8080
|
||||
- 当前报告一经生成，支撑该版本的任务证据冻结；新增证据必须进入下一周期或重开新版本；
|
||||
- 阶段进度必须达到 100%，企业导师才能提交通过或整改评价；
|
||||
- 企业评价为“需整改”时，校级验收继续阻断，补充证据并重新评价后才可进入验收；
|
||||
- 就业侧最新反馈为“需补充”时，成效复核继续阻断；改为“可用”后才可复核，周期关闭后不再接受追加反馈；
|
||||
- 报告提交人不能批准或退回自己的提交，非校级管理者不显示报告审批与发布动作；
|
||||
- 报告正式发布前，就业老师不能登记使用反馈，下载和打印均明确标识非正式版。
|
||||
|
||||
@@ -102,7 +119,7 @@ python3 -m http.server 8080
|
||||
|
||||
## 开发与验收说明
|
||||
|
||||
- 闭环样板使用命名空间 `eduIndustry.campusClosedLoop.TENANT-HZVTC.v1`，当前 `schemaVersion=2`。页面“重置样板”会恢复种子；旧 V1 或不满足深层实体/历史数组不变量的损坏 V2 状态，均按安全策略失效并重建 V2 种子。
|
||||
- 业务流程样板沿用命名空间 `eduIndustry.campusClosedLoop.TENANT-HZVTC.v1`，当前 `schemaVersion=2`。页面“重置样板”会恢复种子；旧 V1 或不满足深层实体/历史数组不变量的损坏 V2 状态，均按安全策略失效并重建 V2 种子。
|
||||
- 为避免静态原型长期演示导致浏览器存储无界增长，审计、证据、反馈、自定义集合和实体历史采用明确保留上限；正式系统应改用服务端分页、归档和不可变审计存储。
|
||||
- 共享样板标识为租户 `TENANT-HZVTC`、厂商包 `EDU-PKG-20260823-01`、版本 `V2026.08.23`、学校回执 `RCT-HZVTC-20260823-01`。这些标识只用于本静态原型的业务链对照，不表示厂商端和校园端页面实时同步。
|
||||
- 当前前端不向外部服务发送请求，可直接在隔离网络运行。
|
||||
@@ -111,10 +128,10 @@ python3 -m http.server 8080
|
||||
- JavaScript 语法检查：`node --check app.js && node --check report-visuals.js`
|
||||
- 推荐桌面验收视口为 `1440 × 900`，移动验收视口为 `390 × 844`。
|
||||
|
||||
新增闭环预览：
|
||||
业务流程图预览：
|
||||
|
||||
- `preview-campus-closed-loop.png`
|
||||
- `preview-campus-closed-loop-mobile.png`
|
||||
- `preview-campus-workflow.png`
|
||||
- `preview-campus-workflow-mobile.png`
|
||||
|
||||
数据依赖图谱预览：
|
||||
|
||||
|
||||
+922
-106
File diff suppressed because it is too large
Load Diff
+719
-76
@@ -2255,6 +2255,10 @@ body textarea {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.app-shell .eyebrow {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.app-shell .main-content span,
|
||||
.app-shell .main-content em {
|
||||
font-size: 13px !important;
|
||||
@@ -2722,113 +2726,558 @@ body textarea {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loop-chain {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
.loop-status-panel {
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 96% 2%, rgba(198, 230, 111, 0.08), transparent 24%),
|
||||
white;
|
||||
}
|
||||
|
||||
.loop-stage {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: 36px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
padding: 13px;
|
||||
background: #f8faf8;
|
||||
border: 1px solid var(--line-soft);
|
||||
.loop-flow-toolbar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 18px 0 12px;
|
||||
padding: 10px;
|
||||
background: #f3f7f4;
|
||||
border: 1px solid #e1e9e3;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.loop-stage > i {
|
||||
.loop-flow-summary {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.loop-flow-summary > span {
|
||||
min-width: 0;
|
||||
padding: 9px 11px;
|
||||
background: white;
|
||||
border: 1px solid #e5ebe6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.loop-flow-summary small,
|
||||
.loop-flow-summary strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loop-flow-summary small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.loop-flow-summary strong {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-flow-toolbar > .button {
|
||||
align-self: stretch;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.loop-flow-scroll {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
background:
|
||||
linear-gradient(rgba(35, 107, 79, 0.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(35, 107, 79, 0.045) 1px, transparent 1px),
|
||||
#f7f9f7;
|
||||
background-size: 25px 25px;
|
||||
border: 1px solid #dce5df;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.loop-flow-canvas {
|
||||
--loop-canvas-width: 1000px;
|
||||
--loop-canvas-height: 600px;
|
||||
--loop-node-width: 170px;
|
||||
--loop-node-height: 130px;
|
||||
position: relative;
|
||||
width: var(--loop-canvas-width);
|
||||
min-width: var(--loop-canvas-width);
|
||||
height: var(--loop-canvas-height);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.loop-flow-edges,
|
||||
.loop-flow-nodes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.loop-flow-edges {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loop-flow-edge path {
|
||||
fill: none;
|
||||
stroke: #bdc9c2;
|
||||
stroke-width: 2;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.loop-flow-edge text {
|
||||
fill: #77867e;
|
||||
stroke: #f7f9f7;
|
||||
stroke-width: 5px;
|
||||
paint-order: stroke;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loop-flow-edge.complete path {
|
||||
stroke: var(--green);
|
||||
}
|
||||
|
||||
.loop-flow-edge.current path {
|
||||
stroke: #d69a31;
|
||||
stroke-dasharray: 7 5;
|
||||
}
|
||||
|
||||
.loop-flow-edge.risk path {
|
||||
stroke: #c76656;
|
||||
stroke-dasharray: 6 4;
|
||||
}
|
||||
|
||||
.loop-flow-edge.branch path {
|
||||
stroke: #96a69d;
|
||||
stroke-dasharray: 5 5;
|
||||
}
|
||||
|
||||
#loop-arrow-complete path {
|
||||
fill: var(--green);
|
||||
}
|
||||
|
||||
#loop-arrow-current path {
|
||||
fill: #d69a31;
|
||||
}
|
||||
|
||||
#loop-arrow-risk path {
|
||||
fill: #c76656;
|
||||
}
|
||||
|
||||
#loop-arrow-locked path,
|
||||
#loop-arrow-branch path {
|
||||
fill: #96a69d;
|
||||
}
|
||||
|
||||
.loop-flow-node {
|
||||
position: absolute;
|
||||
left: var(--loop-x);
|
||||
top: var(--loop-y);
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
width: var(--loop-node-width);
|
||||
height: var(--loop-node-height);
|
||||
grid-template-columns: 34px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
padding: 11px;
|
||||
color: var(--ink);
|
||||
background: white;
|
||||
border: 1px solid #dfe7e1;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 7px 20px rgba(24, 61, 46, 0.07);
|
||||
text-align: left;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.loop-flow-node:hover,
|
||||
.loop-flow-node:focus-visible {
|
||||
z-index: 3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 28px rgba(24, 61, 46, 0.14);
|
||||
}
|
||||
|
||||
.loop-flow-node.selected {
|
||||
z-index: 3;
|
||||
outline: 3px solid rgba(35, 135, 101, 0.16);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.loop-flow-node.complete {
|
||||
background: #f2f8f5;
|
||||
border-color: #a9d0ba;
|
||||
}
|
||||
|
||||
.loop-flow-node.complete.has-risk {
|
||||
background: #fff8f5;
|
||||
border-color: #d9a293;
|
||||
box-shadow: inset 0 3px #c76656;
|
||||
}
|
||||
|
||||
.loop-flow-node.current {
|
||||
background: #fffaf0;
|
||||
border-color: #ddac55;
|
||||
box-shadow: 0 9px 25px rgba(181, 124, 27, 0.16);
|
||||
}
|
||||
|
||||
.loop-flow-node.risk {
|
||||
background: #fff5f2;
|
||||
border-color: #db9b8c;
|
||||
box-shadow: 0 9px 25px rgba(173, 78, 69, 0.13);
|
||||
}
|
||||
|
||||
.loop-flow-node.locked {
|
||||
color: #66736c;
|
||||
background: #f6f8f6;
|
||||
border-style: dashed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.loop-flow-node.locked.has-risk {
|
||||
background: #fff8f5;
|
||||
border-color: #d9a293;
|
||||
}
|
||||
|
||||
.loop-flow-node-step {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
color: var(--green);
|
||||
background: #e7f3ed;
|
||||
color: #6f7e76;
|
||||
background: #e9eeeb;
|
||||
border-radius: 9px;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loop-stage.review > i {
|
||||
color: #916217;
|
||||
background: #fff6df;
|
||||
}
|
||||
|
||||
.loop-stage.risk > i {
|
||||
color: #ad4e45;
|
||||
background: #fff0ed;
|
||||
}
|
||||
|
||||
.loop-stage.done > i {
|
||||
.loop-flow-node.complete .loop-flow-node-step {
|
||||
color: white;
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.loop-stage span,
|
||||
.loop-stage small,
|
||||
.loop-stage strong,
|
||||
.loop-stage em {
|
||||
.loop-flow-node.complete.has-risk .loop-flow-node-step {
|
||||
background: #b95b4d;
|
||||
}
|
||||
|
||||
.loop-flow-node.current .loop-flow-node-step {
|
||||
color: #825813;
|
||||
background: #ffecc5;
|
||||
}
|
||||
|
||||
.loop-flow-node.risk .loop-flow-node-step {
|
||||
color: #a34e42;
|
||||
background: #ffe3dc;
|
||||
}
|
||||
|
||||
.loop-flow-node-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loop-flow-node-copy small,
|
||||
.loop-flow-node-copy strong,
|
||||
.loop-flow-node-copy em {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loop-stage small {
|
||||
.loop-flow-node-copy small {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.loop-stage strong {
|
||||
margin: 3px 0;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 13px;
|
||||
.loop-flow-node-copy strong {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.loop-stage em {
|
||||
color: var(--green-2);
|
||||
font-size: 13px;
|
||||
.loop-flow-node-copy em {
|
||||
overflow: hidden;
|
||||
color: var(--green);
|
||||
font-style: normal;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-entity-grid {
|
||||
.loop-flow-node.current .loop-flow-node-copy em {
|
||||
color: #9b6817;
|
||||
}
|
||||
|
||||
.loop-flow-node.complete.has-risk .loop-flow-node-copy em,
|
||||
.loop-flow-node.risk .loop-flow-node-copy em {
|
||||
color: #a34e42;
|
||||
}
|
||||
|
||||
.loop-flow-node.locked .loop-flow-node-copy em {
|
||||
color: #88948e;
|
||||
}
|
||||
|
||||
.loop-flow-node-owner {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 4px;
|
||||
padding-top: 7px;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid rgba(94, 113, 103, 0.14);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-flow-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.loop-mobile-branches {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loop-flow-legend > span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.loop-flow-legend i {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background: #f4f6f4;
|
||||
border: 2px dashed #aebbb4;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.loop-flow-legend i.complete {
|
||||
background: var(--green);
|
||||
border-color: var(--green);
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-flow-legend i.current {
|
||||
background: #fff2d5;
|
||||
border-color: #d59a31;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-flow-legend i.risk {
|
||||
background: #ffe5df;
|
||||
border-color: #c76656;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-node-detail {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.loop-node-hero {
|
||||
display: grid;
|
||||
grid-template-columns: 54px minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 13px;
|
||||
padding: 16px;
|
||||
color: #dcebe4;
|
||||
background:
|
||||
radial-gradient(circle at 92% 10%, rgba(198, 230, 111, 0.14), transparent 26%),
|
||||
linear-gradient(135deg, #173f33, #102e26);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.loop-node-hero.current {
|
||||
background:
|
||||
radial-gradient(circle at 92% 10%, rgba(255, 228, 167, 0.18), transparent 26%),
|
||||
linear-gradient(135deg, #4b3819, #2e281d);
|
||||
}
|
||||
|
||||
.loop-node-hero.risk {
|
||||
background:
|
||||
radial-gradient(circle at 92% 10%, rgba(255, 213, 202, 0.16), transparent 26%),
|
||||
linear-gradient(135deg, #543128, #33231f);
|
||||
}
|
||||
|
||||
.loop-node-hero.locked {
|
||||
color: #d7dfda;
|
||||
background: linear-gradient(135deg, #45534c, #303a35);
|
||||
}
|
||||
|
||||
.loop-node-hero-step {
|
||||
display: grid;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
place-items: center;
|
||||
color: #173f33;
|
||||
background: var(--lime);
|
||||
border-radius: 12px;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.loop-node-hero small,
|
||||
.loop-node-hero strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loop-node-hero small {
|
||||
color: #9db3aa;
|
||||
}
|
||||
|
||||
.loop-node-hero strong {
|
||||
margin-top: 5px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.loop-node-hero p {
|
||||
margin: 7px 0 0;
|
||||
color: #a8bdb4;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.loop-node-hero > em {
|
||||
padding: 6px 8px;
|
||||
color: var(--lime);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 7px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-node-io {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.loop-node-io article {
|
||||
padding: 12px;
|
||||
background: #f7faf8;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.loop-node-io span,
|
||||
.loop-node-io strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loop-node-io span {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.loop-node-io strong {
|
||||
margin-top: 6px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.loop-node-io > i {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #91a49a;
|
||||
}
|
||||
|
||||
.loop-node-io svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.loop-node-facts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.loop-entity-grid article {
|
||||
.loop-node-facts > span {
|
||||
min-width: 0;
|
||||
padding: 15px;
|
||||
background: #f9fbf9;
|
||||
padding: 11px;
|
||||
background: white;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 11px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.loop-entity-grid span,
|
||||
.loop-entity-grid strong,
|
||||
.loop-entity-grid small {
|
||||
.loop-node-facts small,
|
||||
.loop-node-facts strong {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.loop-entity-grid span {
|
||||
color: var(--green);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loop-entity-grid strong {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loop-entity-grid small {
|
||||
margin-top: 5px;
|
||||
.loop-node-facts small {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.loop-node-facts strong {
|
||||
margin-top: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.loop-node-relations {
|
||||
padding: 12px;
|
||||
background: #f6f8f6;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.loop-node-relations > span {
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loop-node-relations > div {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.loop-node-relations button {
|
||||
max-width: 100%;
|
||||
padding: 6px 8px;
|
||||
overflow: hidden;
|
||||
color: var(--green);
|
||||
background: white;
|
||||
border: 1px solid #cfdfd6;
|
||||
border-radius: 6px;
|
||||
font-family: "SFMono-Regular", Consolas, monospace;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.loop-node-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #edf7f1;
|
||||
border: 1px solid #d2e6da;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.loop-node-action.locked,
|
||||
.loop-node-action.readonly {
|
||||
background: #f6f8f6;
|
||||
border-color: var(--line-soft);
|
||||
}
|
||||
|
||||
.loop-node-action span,
|
||||
.loop-node-action strong,
|
||||
.loop-node-action small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loop-node-action small {
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.loop-role-boundary {
|
||||
@@ -2857,12 +3306,13 @@ body textarea {
|
||||
}
|
||||
|
||||
.loop-action-list > button {
|
||||
display: flex;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 13px;
|
||||
gap: 9px;
|
||||
padding: 11px;
|
||||
color: var(--ink);
|
||||
background: white;
|
||||
border: 1px solid var(--line-soft);
|
||||
@@ -2870,33 +3320,60 @@ body textarea {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.loop-action-list > button:not(:disabled):hover {
|
||||
background: #f3f9f6;
|
||||
border-color: #a9cfbb;
|
||||
}
|
||||
|
||||
.loop-action-list button:disabled {
|
||||
opacity: 0.58;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loop-action-list > button > i {
|
||||
display: grid;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
place-items: center;
|
||||
color: var(--green);
|
||||
background: var(--green-soft);
|
||||
border-radius: 8px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loop-action-list span,
|
||||
.loop-action-list strong,
|
||||
.loop-action-list small {
|
||||
.loop-action-list small,
|
||||
.loop-action-list em {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loop-action-list strong {
|
||||
margin-top: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loop-action-list small {
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.loop-action-list em {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
line-height: 1.45;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-action-list b {
|
||||
flex: 0 0 auto;
|
||||
color: var(--green);
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -3085,11 +3562,13 @@ body textarea {
|
||||
.loop-action-panel {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.loop-flow-summary {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.loop-chain,
|
||||
.loop-entity-grid,
|
||||
.loop-modal-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -3103,6 +3582,170 @@ body textarea {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loop-flow-toolbar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loop-flow-summary {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.loop-flow-toolbar > .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loop-flow-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.loop-flow-canvas {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.loop-flow-edges {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loop-flow-nodes {
|
||||
position: static;
|
||||
display: grid;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.loop-flow-node {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.loop-flow-node:not(:last-child)::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -14px;
|
||||
left: 28px;
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #9fb1a7;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.loop-flow-legend {
|
||||
gap: 8px 12px;
|
||||
}
|
||||
|
||||
.loop-mobile-branches {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button {
|
||||
display: grid;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 4px 8px;
|
||||
padding: 10px;
|
||||
color: var(--ink);
|
||||
background: #f7f9f7;
|
||||
border: 1px dashed #b9c6bf;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button.active.risk {
|
||||
background: #fff4f1;
|
||||
border-color: #cf7969;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button.active.cycle {
|
||||
background: #fff9ec;
|
||||
border-color: #d9a44a;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-mobile-branches span {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.loop-mobile-branches i,
|
||||
.loop-mobile-branches em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.loop-mobile-branches i {
|
||||
color: #8c9992;
|
||||
}
|
||||
|
||||
.loop-mobile-branches small {
|
||||
grid-column: 1 / -1;
|
||||
color: var(--muted);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.loop-mobile-branches em {
|
||||
align-self: start;
|
||||
color: var(--muted);
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button.active.risk em {
|
||||
color: #ad4e45;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button.active.cycle em {
|
||||
color: #956313;
|
||||
}
|
||||
|
||||
.loop-node-hero {
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.loop-node-hero-step {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.loop-node-hero > em {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.loop-node-io {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.loop-node-io > i {
|
||||
height: 14px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.loop-node-facts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.loop-node-action {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loop-node-action .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.report-approval-toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
|
||||
+37
-17
@@ -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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
Reference in New Issue
Block a user