feat(management): 驾驶舱六组件——KPI卡/筛选栏/异常榜/下钻抽屉/口径抽屉/数据截至角标+时长比率格式化共享

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

yunkes/src/components/management/ManagementKpiCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-card shadow="never" class="kpi-card" :class="{ link: !!to }" @click="onClick">
+    <div class="kpi-label">{{ label }}</div>
+    <div class="kpi-value" :class="{ danger }">
+      {{ valueText }}<span v-if="unit && value !== null" class="kpi-unit">{{ unit }}</span>
+    </div>
+    <div v-if="hint" class="kpi-hint">{{ hint }}</div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+// 经营管理 KPI 卡:label 上小灰字 + 主值大号字(千分位/unit 后缀/danger 红)
+// + hint 下小灰字。to 存在时整卡可点(hover 手型)跳转——纯展示+导航,
+// 不取数。null 值语义(无样本)显 `--`,由父级决定传 null。
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps<{
+  label: string
+  value: number | null
+  unit?: string
+  hint?: string
+  to?: string
+  danger?: boolean
+}>()
+
+const router = useRouter()
+
+const valueText = computed(() => (props.value === null ? '--' : props.value.toLocaleString()))
+
+function onClick(): void {
+  if (props.to) router.push(props.to)
+}
+</script>
+
+<style scoped>
+.kpi-card.link {
+  cursor: pointer;
+}
+.kpi-label {
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+.kpi-value {
+  font-size: 26px;
+  font-weight: 600;
+  margin: 6px 0 2px;
+  color: var(--el-text-color-primary);
+}
+.kpi-value.danger {
+  color: var(--el-color-danger);
+}
+.kpi-unit {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--el-text-color-secondary);
+  margin-left: 2px;
+}
+.kpi-hint {
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+}
+</style>