RoyirinRosmontis/CareerNexus
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

答辩级 UI 改造：指挥台驾驶舱/证据地图/演化生命线/成长路线图/候选审核台

Browse Source 
- 驾驶舱改'人才能力变化指挥台'：变化事件流主图+可信度卡+行动卡+播报卡
- 图谱子图同心分层布局、技能变化角标、系统发现折叠入右栏、主操作收敛
- 演化页双 Tab（岗位报告/全岗位扫描）+ 能力生命线 Swimlane + 更替流
- 学习路径成长路线图：概要条/示范路线/预计投入/标记完成联动
- 新增候选审核台抽屉 + GET /api/stats/credibility
- 简历裸姓名/专硕提取修复（桌面真实简历验收通过）+ BGE-M3 加载提示
This commit is contained in:
RoyirinRosmontis
2026-08-19 12:14:39 +08:00
parent ac6d08cdf2
commit 0b198e9976
9 changed files with 1002 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/index.html
+112 -47
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CareerNexus 职联 · 岗位与能力图谱平台</title>
<link rel="stylesheet" href="/static/style.css?v=20260813">
<link rel="stylesheet" href="/static/style.css?v=20260819">
</head>
<body>
<!-- ============ 顶部栏 56px ============ -->
@@ -79,62 +79,104 @@
<!-- ============ 主内容区 ============ -->
<main class="content">
<!-- ======== 数据驾驶舱 ======== -->
<!-- ======== 人才能力变化指挥台（数据驾驶舱） ======== -->
<section id="view-dashboard" class="view active">
<div class="metric-grid" id="metric-cards"></div>
<div class="card cmd-hero">
<div class="cmd-hero-main">
<h2 id="cmd-title">人才能力变化概览</h2>
<div class="cmd-sub" id="cmd-sub">正在汇总本期变化…</div>
<div class="cmd-scale text-weak" id="cmd-scale"></div>
</div>
<div class="cmd-hero-actions">
<button class="btn btn-primary btn-sm" id="btn-cmd-report">查看本期报告</button>
<button class="btn btn-secondary btn-sm" id="btn-open-review-desk">候选审核台</button>
<button class="btn btn-secondary btn-sm" id="btn-import-jd">导入 JD 数据</button>
</div>
</div>
<div class="metric-grid cmd-kpis" id="metric-cards"></div>
<div class="grid-2">
<div class="card">
<div class="card-head">
<h3>近 12 个季度演化事件趋势</h3>
<span class="text-weak text-aux">按事件窗口统计</span>
<h3>近 8 季度变化事件流（全岗位）</h3>
<span class="text-weak text-aux">点击柱段进入该季度演化详情</span>
</div>
<div class="card-body">
<canvas id="trend-canvas" height="220"></canvas>
<div class="stack-legend" id="cmd-stack-legend"></div>
</div>
<div class="card-body"><canvas id="trend-canvas" height="220"></canvas></div>
</div>
<div class="card">
<div class="card-head">
<h3>任务与审核状态</h3>
<button class="btn btn-secondary btn-sm" id="btn-import-jd">导入 JD 数据</button>
</div>
<div class="card-body" id="task-table-wrap">
<table class="table" id="task-table">
<thead><tr><th>类型</th><th>对象</th><th>操作人</th><th>时间</th><th>结果</th></tr></thead>
<tbody></tbody>
</table>
<div class="empty small hidden" id="task-empty">暂无任务记录</div>
<h3>数据可信度</h3>
<span class="text-weak text-aux">多源交叉验证口径</span>
</div>
<div class="card-body" id="trust-card"><div class="empty small">统计中…</div></div>
</div>
</div>
<div class="grid-2">
<div class="card">
<div class="card-head"><h3>动态消息流</h3><span class="text-weak text-aux">点击可跳转</span></div>
<div class="card-head"><h3>变化播报</h3><span class="text-weak text-aux">点击跳转演化详情</span></div>
<div class="card-body feed" id="activity-feed"></div>
</div>
<div class="card">
<div class="card-head"><h3>待审核新岗位候选</h3><span class="badge badge-warning" id="pending-count">0 待办</span></div>
<div class="card-head">
<h3>待办行动</h3>
<span class="cmd-head-right">
<span class="badge badge-warning" id="pending-count">0 待办</span>
<button class="btn btn-text btn-sm" id="btn-open-review-desk-2">进入审核台</button>
</span>
</div>
<div class="card-body" id="pending-list"></div>
</div>
</div>
<div class="card cmd-ledger">
<div class="card-head">
<h3>任务与审核台账</h3>
<button class="btn btn-text btn-sm" id="btn-audit-toggle">展开台账</button>
</div>
<div class="card-body hidden" id="task-table-wrap">
<table class="table" id="task-table">
<thead><tr><th>类型</th><th>对象</th><th>操作人</th><th>时间</th><th>结果</th></tr></thead>
<tbody></tbody>
</table>
<div class="empty small hidden" id="task-empty">暂无任务记录</div>
</div>
</div>
</section>
<!-- ======== 全景图谱工作台 ======== -->
<section id="view-graph" class="view">
<div class="graph-header card">
<div class="graph-title">
<h2>岗位能力图谱工作台</h2>
<h2>岗位能力证据地图</h2>
<span class="tag tag-blue">演示模式</span>
<span class="tag tag-cyan">技能点级</span>
<span class="tag tag-green">审核已开启</span>
</div>
<div class="graph-actions">
<button class="btn btn-secondary" id="btn-save-view">
<svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>
保存视图</button>
<button class="btn btn-secondary" id="btn-share-graph">
<svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>
分享</button>
<button class="btn btn-primary" id="btn-export-graph">
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
导出图谱</button>
<button class="btn btn-secondary" id="btn-goto-evo">
<svg viewBox="0 0 24 24"><path d="M3 17l5.5-5.5 3.5 3.5L20 7"/><path d="M15 7h5v5"/></svg>
查看演化</button>
<button class="btn btn-secondary" id="btn-goto-evidence">
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>
查看证据</button>
<button class="btn btn-primary" id="btn-goto-match">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1" fill="currentColor"/></svg>
开始匹配</button>
<div class="more-wrap">
<button class="btn btn-secondary" id="btn-more-menu">更多 ▾</button>
<div class="more-menu hidden" id="more-menu">
<button class="more-item" id="btn-save-view">
<svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>
保存视图</button>
<button class="more-item" id="btn-share-graph">
<svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>
分享链接</button>
<button class="more-item" id="btn-export-graph">
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
导出图谱 PNG</button>
</div>
</div>
</div>
</div>
<div class="graph-body">
@@ -203,15 +245,7 @@
</div>
</div>
<!-- 右下：智能建议 -->
<div class="graph-suggest card" id="graph-suggest">
<div class="gs-head">
<svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-4 12.7V17a1 1 0 001 1h6a1 1 0 001-1v-2.3A7 7 0 0012 2z"/><path d="M9 21h6"/></svg>
智能建议
<button class="icon-btn sm" id="gs-toggle" title="收起/展开"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></button>
</div>
<div class="gs-list" id="gs-list"></div>
</div>
<!-- 右下：智能建议已移至右侧详情面板「系统发现」 -->
<!-- 底部：演化逻辑链 -->
<div class="graph-chain" id="graph-chain">
@@ -233,6 +267,11 @@
<p class="text-aux text-weak">支持拖拽平移 / 滚轮缩放 / 点击选中</p>
</div>
<div class="detail-body hidden" id="detail-body"></div>
<!-- 系统发现（原画布浮层「智能建议」移入此处，含采纳/忽略） -->
<details class="sys-findings" id="sys-findings" open>
<summary>系统发现（智能建议）</summary>
<div class="gs-list" id="gs-list"></div>
</details>
</aside>
</div>
</section>
@@ -252,10 +291,19 @@
</div>
</div>
<div class="card-body">
<!-- 全部岗位演化热力图 -->
<div class="evo-chart-title text-aux text-secondary">全部岗位演化热力图（每格 = 该季度演化事件数，点击行切换岗位）</div>
<div class="evo-heatmap" id="evo-heatmap"><div class="empty small">加载中…</div></div>
<!-- 二级 Tab：岗位报告（默认） / 全岗位扫描（热力图） -->
<div class="match-tabs" id="evo-tabs">
<button class="match-tab active" data-evotab="report">岗位报告</button>
<button class="match-tab" data-evotab="scan">全岗位扫描</button>
</div>
<div id="evo-tab-scan" class="hidden">
<!-- 全部岗位演化热力图：仅近 12 季度，无事件格子置为极浅色 -->
<div class="evo-chart-title text-aux text-secondary">全部岗位演化热力图 · 近 12 季度（每格 = 该季度演化事件数，点击行切换岗位并回到岗位报告）</div>
<div class="evo-heatmap" id="evo-heatmap"><div class="empty small">加载中…</div></div>
</div>
<div id="evo-tab-report">
<!-- 统计条 -->
<div class="evo-stats" id="evo-stats"></div>
@@ -263,6 +311,14 @@
<div class="evo-chart-title text-aux text-secondary">本期结论（最近两个季度）</div>
<div class="evo-summary" id="evo-summary"><div class="empty small">加载中…</div></div>
<!-- 能力生命线（Swimlane）：每个核心技能一行，线段=生效区间，圆点=变更事件 -->
<div class="evo-chart-title text-aux text-secondary">能力生命线（近 8 季度 · 按当前需求指数取 Top 12；线段 = 生效区间，圆点 = 变更事件）</div>
<div class="evo-gantt" id="evo-gantt"></div>
<!-- 能力更替流：旧核心 → 持续能力 → 新核心 -->
<div class="evo-chart-title text-aux text-secondary">能力更替流（旧核心 → 持续能力 → 新核心）</div>
<div class="evo-replace" id="evo-replace"></div>
<!-- 时点对比器 -->
<div class="evo-compare">
<div class="evo-compare-head">
@@ -282,10 +338,6 @@
<div class="evo-heat-wrap"><canvas id="evo-stack-canvas"></canvas></div>
<div class="stack-legend" id="stack-legend"></div>
<!-- 技能生命周期甘特图 -->
<div class="evo-chart-title text-aux text-secondary">技能生命周期（横条 = 技能在画像中的生效区间，圆点 = 变更事件）</div>
<div class="evo-gantt" id="evo-gantt"></div>
<!-- 热度走势（限高，默认近 8 个季度，纵轴为活跃技能关系数） -->
<div class="evo-chart-title text-aux text-secondary evo-heat-head">
<span>技能热度走势（纵轴：活跃技能关系数）</span>
@@ -296,9 +348,10 @@
</div>
<div class="evo-heat-wrap"><canvas id="evo-heat-canvas"></canvas></div>
<!-- 事件时间轴 -->
<div class="evo-chart-title text-aux text-secondary">演化事件时间轴（点击查看证据 JD）</div>
<!-- 本期变化卡：事件时间轴，每条含变化前后/支撑证据入口 -->
<div class="evo-chart-title text-aux text-secondary">本期变化卡（变化前 → 变化后 / 支撑 JD 数 / 点击查看证据原文）</div>
<div class="timeline" id="evo-timeline"></div>
</div>
</div>
</div>
</section>
@@ -538,6 +591,18 @@
</div>
<div class="toast-wrap" id="toast-wrap"></div>
<!-- 候选岗位审核台（右侧抽屉式二级界面） -->
<div class="drawer-mask hidden" id="review-desk-mask">
<aside class="drawer" id="review-desk" role="dialog" aria-modal="true">
<div class="drawer-head">
<h3>候选岗位审核台</h3>
<span class="text-weak text-aux">发现 → 证据 → 人工决策 → 自动入图</span>
<button class="icon-btn" id="review-desk-close" title="关闭"><svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
</div>
<div class="drawer-body" id="review-desk-body"></div>
</aside>
</div>
<!-- 评委演示导览浮动条（右上角固定） -->
<div class="tour-bar hidden" id="tour-bar">
<span class="tour-prog" id="tour-prog">演示 1/6</span>
@@ -550,7 +615,7 @@
<button class="btn btn-text btn-sm" id="tour-exit">退出</button>
</div>
<script src="/static/app.js?v=20260813"></script>
<script src="/static/graph.js?v=20260813"></script>
<script src="/static/app.js?v=20260819"></script>
<script src="/static/graph.js?v=20260819"></script>
</body>
</html>