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

图谱可视化对标业内实践：枢纽技能按连接度大小编码、时序Timebar生长曲线柱图（点击跳转）、技术栈类别hull气泡轮廓、画布全屏、边悬停tooltip与点击直达JD证据、双击渐进披露（岗位子图/技能反查聚焦），修复gt-bar类名冲突，前端单测87例全过

Browse Source
This commit is contained in:
FinStab
2026-08-28 12:19:49 +08:00
parent 6d91df1a91
commit 6312dd5f4a
4 changed files with 272 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/style.css
+25 -4
View File
@@ -311,15 +311,36 @@ svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width:
.graph-actions { display: flex; gap: 8px; }
.graph-view-tabs { margin: 0 auto; }
/* 动态时序视图：画布顶部居中的季度时间轴 */
/* 动态时序视图：画布顶部居中的季度时间轴（含趋势柱图） */
.graph-timeline {
position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 10px; z-index: 6;
background: rgba(255,255,255,0.94); border: 1px solid var(--border); border-radius: 999px;
padding: 6px 14px; box-shadow: var(--shadow-pop);
display: flex; flex-direction: column; align-items: stretch; gap: 5px; z-index: 6;
background: rgba(255,255,255,0.94); border: 1px solid var(--border); border-radius: 16px;
padding: 8px 14px; box-shadow: var(--shadow-pop);
}
.gt-row { display: flex; align-items: center; gap: 10px; }
.graph-timeline input[type="range"] { width: 240px; accent-color: var(--primary); }
.gt-window { font-size: 12px; color: var(--text-1); font-weight: 600; white-space: nowrap; }
/* Timebar：每季度新增关系数迷你柱图，与滑块等宽对齐，点击跳转（类名加 b 前缀避免与学习路径甘特条 .gt-bar 冲突） */
.gtb-bars { display: flex; align-items: flex-end; gap: 2px; height: 20px; margin-left: 46px; width: 240px; }
.gtb-bar {
flex: 1; min-width: 3px; border-radius: 1.5px 1.5px 0 0; cursor: pointer;
background: rgba(24,144,255,0.22); transition: background .12s;
}
.gtb-bar:hover { background: rgba(24,144,255,0.5); }
.gtb-bar.active { background: var(--primary); }
/* 边悬停提示 */
.edge-tip {
position: absolute; z-index: 30; pointer-events: none; max-width: 280px;
background: rgba(29,33,41,0.92); color: #fff; border-radius: 6px;
font-size: 11px; line-height: 1.55; padding: 6px 10px; box-shadow: var(--shadow-pop);
}
.edge-tip .et-title { font-weight: 600; margin-bottom: 1px; }
.edge-tip .et-sub { color: rgba(255,255,255,0.72); }
/* 全屏演示模式 */
#graph-canvas-wrap:fullscreen { border-radius: 0; background: #fff; }
/* 图谱搜索定位（头部） */
.graph-search { position: relative; display: flex; align-items: center; }