AiDOPWarehouse/Web/src/views/dashboard/components/HomeCardGridView.vue

<template>
  <div
    v-if="visibleCells.length > 0"
    class="s4-kpi-grid"
    :class="{ 's4-kpi-grid--dense': props.cells.length > 4 }"
  >
    <div v-for="cell in visibleCells" :key="cell.key" class="s4-kpi-cell" :class="{ 's4-kpi-cell--stale': cell.stale }">
      <el-tooltip
        v-if="cell.formulaText"
        placement="top"
        :show-after="200"
        :content="cell.formulaText"
      >
        <div class="s4-kpi-label s4-kpi-label--formula" :title="cell.label">{{ cell.label }}</div>
      </el-tooltip>
      <div v-else class="s4-kpi-label" :title="cell.label">{{ cell.label }}</div>
      <div class="s4-kpi-body">
        <div class="s4-kpi-main">
          <div class="s4-kpi-value-row">
            <span class="s4-kpi-value" :class="{ 's4-kpi-value--status': cell.valueKind === 'status' }">{{ cell.value }}</span>
            <span v-if="cell.unit" class="s4-kpi-unit">{{ cell.unit }}</span>
          </div>
          <div v-if="cell.targetDisplay" class="s4-kpi-target">目标: {{ cell.targetDisplay }}</div>
          <div v-if="cell.asOfText" class="s4-kpi-asof" :title="cell.staleHint || cell.asOfText">{{ cell.asOfText }}</div>
          <div v-if="cell.latestText" class="s4-kpi-asof">{{ cell.latestText }}</div>
          <div v-if="cell.policyText" class="s4-kpi-asof">{{ cell.policyText }}</div>
        </div>
        <span
          class="s4-kpi-trend"
          :class="{
            's4-kpi-trend--good': cell.trendTone === 'good',
            's4-kpi-trend--warn': cell.trendTone === 'warn',
            's4-kpi-trend--bad': cell.trendTone === 'bad',
          }"
        >
          <span class="s4-kpi-trend__arrow" aria-hidden="true">{{
            cell.trendArrow === 'up' ? '▲' : cell.trendArrow === 'down' ? '▼' : '—'
          }}</span>
          {{ cell.trend }}
        </span>
      </div>
    </div>
    <div v-if="overflowCount > 0" class="s4-kpi-overflow" :title="`还有 ${overflowCount} 个指标未显示`">
      +{{ overflowCount }}
    </div>
  </div>
  <div v-else class="home-kpi-card__empty">
    <span v-if="loading">加载中…</span>
    <span v-else>暂无指标配置，点击卡片进入模块后到"运营指标建模"配置 L1 指标</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  moduleCode: { type: String, required: true },
  cells: { type: Array, required: true },
  loading: { type: Boolean, default: false },
})

const MAX_DENSE = 8
const MAX_NORMAL = 4

const visibleCells = computed(() => {
  const arr = Array.isArray(props.cells) ? props.cells : []
  const cap = arr.length > MAX_NORMAL ? MAX_DENSE : MAX_NORMAL
  return arr.slice(0, cap)
})

const overflowCount = computed(() => {
  const arr = Array.isArray(props.cells) ? props.cells : []
  const cap = arr.length > MAX_NORMAL ? MAX_DENSE : MAX_NORMAL
  return Math.max(0, arr.length - cap)
})
</script>

<style scoped>
.s4-kpi-grid {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 0;
  gap: 8px 12px;
  align-content: stretch;
  overflow: hidden;
}

.s4-kpi-grid--dense {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.s4-kpi-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 5px 8px;
  min-height: 0;
  min-width: 0;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 6px;
  border: 1px solid rgba(51, 65, 85, 0.35);
  overflow: hidden;
}

.s4-kpi-label {
  flex: 0 0 auto;
  min-height: 15px;
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.25;
  font-weight: 700;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.s4-kpi-label--formula {
  cursor: help;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.55);
}

.s4-kpi-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.s4-kpi-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.s4-kpi-value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
}

.s4-kpi-target {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.3;
}

.s4-kpi-asof {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.3;
}

.s4-kpi-cell--stale {
  opacity: 0.55;
}

.s4-kpi-value {
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.s4-kpi-grid--dense .s4-kpi-value {
  font-size: clamp(14px, 2.2vw, 18px);
}

.s4-kpi-value.s4-kpi-value--status {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.s4-kpi-unit {
  font-size: 11px;
  color: #e2e8f0;
  font-weight: 500;
}

.s4-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  align-self: center;
}

.s4-kpi-trend__arrow {
  font-size: 9px;
  line-height: 1;
  transform: translateY(0.5px);
}

.s4-kpi-trend--good {
  color: #4ade80;
}

.s4-kpi-trend--warn {
  color: #facc15;
}

.s4-kpi-trend--bad {
  color: #fb923c;
}

.s4-kpi-overflow {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(96, 165, 250, 0.55);
  border-radius: 10px;
  padding: 1px 6px;
  pointer-events: none;
  line-height: 1.2;
}

.home-kpi-card__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 11px;
  padding: 8px;
  text-align: center;
  line-height: 1.4;
}
</style>