前端体验升级专项：驾驶舱T型Hero+趋势折线+播报轮播、图谱骨架屏与右键菜单、双雷达图、主色#1890FF统一、空状态补齐、移除调试探针

webui/index.html

@@ -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=20260819">
+  <link rel="stylesheet" href="/static/style.css?v=20260827">
 </head>
 <body>
   <!-- ============ 顶部栏 56px ============ -->
@@ -81,6 +81,9 @@
 
       <!-- ======== 人才能力变化指挥台（数据驾驶舱） ======== -->
       <section id="view-dashboard" class="view active">
+        <!-- Hero 指标区（紧贴导航）：有效 JD / 独立企业 / 技能演化事件 / 人工复核率，数字滚动 -->
+        <div class="hero-kpis" id="metric-cards"></div>
+        <!-- 弱化的结论行：本期最重要变化一句话 + 图谱规模小字 -->
         <div class="card cmd-hero">
           <div class="cmd-hero-main">
             <h2 id="cmd-title">人才能力变化概览</h2>
@@ -93,18 +96,37 @@
             <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="grid-2 cmd-main">
           <div class="card">
             <div class="card-head">
-              <h3>近 8 季度变化事件流（全岗位）</h3>
-              <span class="text-weak text-aux">点击柱段进入该季度演化详情</span>
+              <h3>人才能力变化趋势</h3>
+              <span class="text-weak text-aux">近 8 季度 · 悬停看明细 · 点击定位岗位</span>
             </div>
-            <div class="card-body">
-              <canvas id="trend-canvas" height="220"></canvas>
+            <div class="card-body trend-wrap">
+              <canvas id="trend-canvas" height="240"></canvas>
+              <div class="trend-tip hidden" id="trend-tip"></div>
               <div class="stack-legend" id="cmd-stack-legend"></div>
             </div>
           </div>
+          <div class="card">
+            <div class="card-head">
+              <h3>岗位能力更替（全岗位 · 近 4 季度）</h3>
+              <span class="text-weak text-aux">旧核心 → 持续 → 新核心</span>
+            </div>
+            <div class="card-body" id="cmd-replace"><div class="empty small">统计中…</div></div>
+          </div>
+        </div>
+        <!-- 变化播报：卡片翻页轮播（3 秒淡入淡出，悬停暂停，点击跳演化页） -->
+        <div class="card cmd-bcast-card">
+          <div class="card-head">
+            <h3>变化播报</h3>
+            <span class="text-weak text-aux">自动轮播 · 悬停暂停 · 点击跳转演化详情</span>
+          </div>
+          <div class="card-body"><div class="bcast-carousel" id="activity-feed"></div></div>
+        </div>
+        <!-- 下移一层：可信度 + 待办行动 -->
+        <div class="grid-2">
           <div class="card">
             <div class="card-head">
               <h3>数据可信度</h3>
@@ -112,12 +134,6 @@
             </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-body feed" id="activity-feed"></div>
-          </div>
           <div class="card">
             <div class="card-head">
               <h3>待办行动</h3>
@@ -266,8 +282,21 @@
               <div class="gc-chips" id="gc-chips"><span class="text-weak text-aux">—</span></div>
             </div>
 
+            <!-- 节点右键菜单（CSS 定位 DOM，点空白关闭） -->
+            <div class="ctx-menu hidden" id="ctx-menu"></div>
+
+            <!-- 图谱加载骨架屏：节点/连线占位 + shimmer 扫光，布局完成即消失 -->
             <div class="graph-loading" id="graph-loading">
-              <div class="skeleton-graph"></div>
+              <div class="sk-graph" aria-hidden="true">
+                <span class="sk-edge sk-e1"></span><span class="sk-edge sk-e2"></span>
+                <span class="sk-edge sk-e3"></span><span class="sk-edge sk-e4"></span>
+                <span class="sk-edge sk-e5"></span><span class="sk-edge sk-e6"></span>
+                <span class="sk-node sk-center"></span>
+                <span class="sk-node sk-n1"></span><span class="sk-node sk-n2"></span>
+                <span class="sk-node sk-n3"></span><span class="sk-node sk-n4"></span>
+                <span class="sk-node sk-sq sk-n5"></span><span class="sk-node sk-sq sk-n6"></span>
+                <span class="sk-node sk-sq sk-n7"></span>
+              </div>
               <div class="text-weak">图谱布局计算中…</div>
             </div>
           </div>
@@ -466,6 +495,10 @@
                       <div class="match-verdict" id="match-verdict"></div>
                       <div class="match-advice" id="match-advice"></div>
                       <canvas id="radar-canvas" width="340" height="280"></canvas>
+                      <div class="radar-legend">
+                        <span><i class="rl-line"></i>岗位基准（四维 100%）</span>
+                        <span><i class="rl-line dashed"></i>候选人得分</span>
+                      </div>
                     </div>
                     <div class="mrg-right">
                       <div class="hit-miss">
@@ -631,7 +664,7 @@
     <button class="btn btn-text btn-sm" id="tour-exit">退出</button>
   </div>
 
-  <script src="/static/app.js?v=20260819"></script>
-  <script src="/static/graph.js?v=20260819"></script>
+  <script src="/static/app.js?v=20260827"></script>
+  <script src="/static/graph.js?v=20260827"></script>
 </body>
 </html>