feat: 员工画像雷达图浮窗改为点击维度触发，修复布局偏移

- 浮窗默认隐藏，点击雷达图维度后按角度计算显示对应加/扣分明细
- 再次点击同一维度收起，切换维度自动更新内容
- 面板改为 position:absolute 绝对定位，避免占用 flex 空间导致雷达图偏移
- 扣分贴左、加分贴右，chart-box 铺满全宽保证居中
- 行格式改为 level3Name ： score，面板标题显示维度名与合计
- 加入 panel-fade 过渡动画

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/views/portraitManagement/employeeProfile/index.vue

@@ -130,39 +130,44 @@
           <div class="card radar-card">
             <div class="sec-title">● 个人能力</div>
             <div class="radar-body">
-              <!-- 扣分明细浮窗 -->
-              <div class="score-panel deduct-panel">
-                <div class="panel-header deduct-header">
-                  扣分明细&nbsp;<span class="panel-total">合计 {{ deductTotal }}</span>
-                </div>
-                <div class="panel-list">
-                  <div v-for="(item, i) in deductList" :key="i" class="panel-row">
-                    <span class="p-dim">{{ item.dimensionName }}</span>
-                    <span class="p-name">{{ item.level2Name }}{{ item.level3Name ? '·'+item.level3Name : '' }}</span>
-                    <span class="p-score deduct-score">{{ item.totalScore }}</span>
+              <!-- 扣分明细浮窗（点击维度后显示，绝对定位左侧） -->
+              <transition name="panel-fade">
+                <div class="score-panel deduct-panel" v-if="activeDimName">
+                  <div class="panel-header deduct-header">
+                    扣分明细<span class="panel-dim-name">{{ activeDimName }}</span>
+                    <span class="panel-total">合计 {{ deductTotal }}</span>
+                  </div>
+                  <div class="panel-list">
+                    <div v-for="(item, i) in deductList" :key="i" class="panel-row">
+                      <span class="p-name">{{ item.level3Name || item.level2Name }}</span>
+                      <span class="p-score deduct-score">{{ item.totalScore }}</span>
+                    </div>
+                    <div v-if="!deductList.length" class="p-empty">暂无扣分记录</div>
                   </div>
-                  <div v-if="!deductList.length" class="p-empty">暂无扣分记录</div>
                 </div>
-              </div>
+              </transition>
 
               <!-- 雷达图 -->
               <div ref="abilityChart" class="chart-box"></div>
 
-              <!-- 加分明细浮窗 -->
-              <div class="score-panel add-panel">
-                <div class="panel-header add-header">
-                  加分明细&nbsp;<span class="panel-total">合计 {{ addTotal }}</span>
-                </div>
-                <div class="panel-list">
-                  <div v-for="(item, i) in addList" :key="i" class="panel-row">
-                    <span class="p-dim">{{ item.dimensionName }}</span>
-                    <span class="p-name">{{ item.level2Name }}{{ item.level3Name ? '·'+item.level3Name : '' }}</span>
-                    <span class="p-score add-score">+{{ item.totalScore }}</span>
+              <!-- 加分明细浮窗（点击维度后显示，绝对定位右侧） -->
+              <transition name="panel-fade">
+                <div class="score-panel add-panel" v-if="activeDimName">
+                  <div class="panel-header add-header">
+                    加分明细<span class="panel-dim-name">{{ activeDimName }}</span>
+                    <span class="panel-total">合计 {{ addTotal }}</span>
+                  </div>
+                  <div class="panel-list">
+                    <div v-for="(item, i) in addList" :key="i" class="panel-row">
+                      <span class="p-name">{{ item.level3Name || item.level2Name }}</span>
+                      <span class="p-score add-score">+{{ item.totalScore }}</span>
+                    </div>
+                    <div v-if="!addList.length" class="p-empty">暂无加分记录</div>
                   </div>
-                  <div v-if="!addList.length" class="p-empty">暂无加分记录</div>
                 </div>
-              </div>
+              </transition>
             </div>
+            <div class="radar-hint" v-if="!activeDimName">点击雷达图维度查看明细</div>
           </div>
         </div>
 
@@ -341,14 +346,18 @@ const positionList = computed(() => {
   return pos.split(/[,，、/]/).map(s => s.trim()).filter(Boolean)
 })
 
+const activeDimName = ref(null)
+
 const scoreDetails = computed(() => portrait.value?.scoreDetails || [])
 
-const addList = computed(() =>
-  scoreDetails.value.filter(d => d.totalScore != null && Number(d.totalScore) > 0)
-)
-const deductList = computed(() =>
-  scoreDetails.value.filter(d => d.totalScore != null && Number(d.totalScore) < 0)
-)
+const addList = computed(() => {
+  const all = scoreDetails.value.filter(d => d.totalScore != null && Number(d.totalScore) > 0)
+  return activeDimName.value ? all.filter(d => d.dimensionName === activeDimName.value) : all
+})
+const deductList = computed(() => {
+  const all = scoreDetails.value.filter(d => d.totalScore != null && Number(d.totalScore) < 0)
+  return activeDimName.value ? all.filter(d => d.dimensionName === activeDimName.value) : all
+})
 const addTotal = computed(() => {
   const s = addList.value.reduce((acc, d) => acc + Number(d.totalScore), 0)
   return (s > 0 ? '+' : '') + s.toFixed(2)
@@ -388,7 +397,6 @@ const initChart = () => {
   const c = radarColor.value
   chart.setOption({
     radar: {
-      // 指标名显示加权前分值
       indicator: dims.map(d => ({ name: d.name + '\n' + d.score, max: 100 })),
       center: ['50%', '52%'],
       radius: '65%',
@@ -419,9 +427,29 @@ const initChart = () => {
     }],
     tooltip: { trigger: 'item' }
   })
+
+  // 点击雷达图按角度判断最近维度
+  chart.getZr().on('click', (event) => {
+    if (!dims.length) return
+    const el = abilityChart.value
+    const cx = el.offsetWidth * 0.5
+    const cy = el.offsetHeight * 0.52
+    const dx = event.offsetX - cx
+    const dy = event.offsetY - cy
+    let angle = Math.atan2(dx, -dy) * 180 / Math.PI
+    if (angle < 0) angle += 360
+    const step = 360 / dims.length
+    const idx = Math.round(angle / step) % dims.length
+    const name = dims[idx]?.name
+    if (!name) return
+    activeDimName.value = activeDimName.value === name ? null : name
+  })
 }
 
-watch(portrait, (val) => { if (val) nextTick(() => initChart()) })
+watch(portrait, (val) => {
+  activeDimName.value = null
+  if (val) nextTick(() => initChart())
+})
 
 const handleResize = () => { chart?.resize() }
 
@@ -775,7 +803,8 @@ onBeforeUnmount(() => {
   }
 
   .chart-box {
-    flex: 1;
+    width: 100%;
+    height: 100%;
     min-height: 400px;
   }
 }
@@ -943,24 +972,30 @@ onBeforeUnmount(() => {
 /* ── 雷达图主体（含两侧浮窗） ── */
 .radar-body {
   flex: 1;
-  display: flex;
-  gap: 8px;
+  position: relative;
   min-height: 0;
 }
 
-/* ── 加/扣分浮窗 ── */
+/* ── 加/扣分浮窗（绝对定位，叠在 chart 上方） ── */
 .score-panel {
+  position: absolute;
+  top: 0;
   width: 180px;
-  flex-shrink: 0;
+  max-height: 100%;
   display: flex;
   flex-direction: column;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid #e0e7f0;
   font-size: 12px;
-  background: #fff;
+  background: rgba(255,255,255,0.92);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  z-index: 10;
 }
 
+.deduct-panel { left: 0; }
+.add-panel    { right: 0; }
+
 .panel-header {
   padding: 6px 10px;
   font-size: 13px;
@@ -972,12 +1007,34 @@ onBeforeUnmount(() => {
 .deduct-header { background: rgba(254,233,232,1); color: #e03030; }
 .add-header    { background: rgba(206,248,228,1); color: #1a9944; }
 
+.panel-dim-name {
+  font-size: 11px;
+  font-weight: normal;
+  margin-left: 4px;
+  opacity: 0.8;
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .panel-total {
   font-size: 12px;
   font-weight: bold;
   margin-left: auto;
 }
 
+.radar-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #aaa;
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+
+.panel-fade-enter-active, .panel-fade-leave-active { transition: opacity 0.2s; }
+.panel-fade-enter-from, .panel-fade-leave-to       { opacity: 0; }
+
 .panel-list {
   flex: 1;
   overflow-y: auto;