Просмотр исходного кода

fix(admin): Dashboard 热力图「高」标签补样式 + 键盘可达性收口(tabindex/aria/space 激活)

Agnes Agent 1 неделя назад
Родитель
Сommit
9dc1ccbf9c
1 измененных файлов с 21 добавлено и 2 удалено
  1. 21 2
      cfc-web/src/views/Dashboard.vue

+ 21 - 2
cfc-web/src/views/Dashboard.vue

@@ -33,10 +33,12 @@
         <div
           class="kpi-card"
           :class="{ 'is-clickable': card.click }"
-          role="button"
-          tabindex="0"
+          :role="card.click ? 'button' : null"
+          :tabindex="card.click ? 0 : -1"
+          :aria-label="card.click ? card.label : null"
           @click="card.click && goPath(card.click)"
           @keyup.enter="card.click && goPath(card.click)"
+          @keydown.space.prevent="card.click && goPath(card.click)"
         >
           <div class="kpi-card__icon" :class="'kpi-icon--' + card.color">
             <i :class="card.icon"></i>
@@ -99,6 +101,7 @@
           >
             <span class="heatmap__hour">{{ h }}</span>
             <span class="heatmap__value">{{ fmtDuration(v) }}</span>
+            <span v-if="v > 0 && Number(v) >= Number(dwellByHourPeak) * 0.6" class="heatmap__flag" aria-hidden="true">高</span>
           </div>
         </div>
         <div class="heatmap__axis">
@@ -232,8 +235,10 @@
         :key="act.label"
         role="button"
         tabindex="0"
+        :aria-label="act.label"
         @click="goPath(act.path)"
         @keyup.enter="goPath(act.path)"
+        @keydown.space.prevent="goPath(act.path)"
       >
         <div class="action-icon" :class="act.iconClass"><i :class="act.icon"></i></div>
         <div class="action-label">{{ act.label }}</div>
@@ -1016,6 +1021,7 @@ export default {
 .heatmap { padding: 8px 4px; }
 .heatmap__row { display: flex; gap: 3px; }
 .heatmap__cell {
+  position: relative;
   flex: 1;
   min-width: 0;
   height: 48px;
@@ -1029,6 +1035,19 @@ export default {
   overflow: hidden;
 }
 .heatmap__cell:hover { opacity: 0.88; }
+.heatmap__flag {
+  position: absolute;
+  top: 2px;
+  right: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 1px 3px;
+  border-radius: 4px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.28);
+  letter-spacing: 0.02em;
+}
 .heatmap__hour {
   font-size: 11px;
   font-weight: 600;