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

<template>
  <div
    v-if="visibleCells.length > 0"
    class="tiles-view"
    :class="{ 'tiles-view--dense': props.cells.length > 4 }"
  >
    <div
      v-for="cell in visibleCells"
      :key="cell.key"
      class="tile"
      :class="{
        'tile--good': cell.trendTone === 'good',
        'tile--warn': cell.trendTone === 'warn',
        'tile--bad': cell.trendTone === 'bad',
        'tile--stale': cell.stale,
      }"
    >
      <span class="tile__accent" aria-hidden="true"></span>
      <div class="tile__body">
        <el-tooltip
          v-if="cell.formulaText"
          placement="top"
          :show-after="200"
          :content="cell.formulaText"
        >
          <div class="tile__label tile__label--formula">{{ cell.label }}</div>
        </el-tooltip>
        <div v-else class="tile__label">{{ cell.label }}</div>
        <div class="tile__target">
          目标值: <span class="tile__target-val">{{ cell.targetDisplay || '—' }}</span>
        </div>
        <div class="tile__main">
          <span class="tile__value" :class="{ 'tile__value--status': cell.valueKind === 'status' }">{{ cell.value }}</span>
          <span v-if="cell.unit" class="tile__unit">{{ cell.unit }}</span>
        </div>
        <div v-if="cell.asOfText" class="tile__asof" :title="cell.staleHint || cell.asOfText">{{ cell.asOfText }}</div>
        <div v-if="cell.latestText" class="tile__asof">{{ cell.latestText }}</div>
        <div v-if="cell.policyText" class="tile__asof">{{ cell.policyText }}</div>
      </div>
    </div>
    <div v-if="overflowCount > 0" class="tiles-view__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 },
})

/**
 * 上限与 card_grid 对齐：<=4 走 2x2 大卡；>4 自动进 dense（2x4 = 8 格），
 * 超出部分显示 +N 徽标，避免挤压与溢出。
 */
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>
.tiles-view {
  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: 10px;
  align-content: stretch;
  overflow: hidden;
}

.tiles-view--dense {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tile {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(51, 65, 85, 0.45);
  border-radius: 8px;
  overflow: hidden;
  /* 容器查询单位 cqi 让大数字字号随 tile 宽度自适应，避免窄 tile 下数字溢出压到左侧标签 */
  container-type: inline-size;
  --tile-accent: #64748b;
}

.tile--good {
  --tile-accent: #22c55e;
}

.tile--warn {
  --tile-accent: #eab308;
}

.tile--bad {
  --tile-accent: #ef4444;
}

.tile__accent {
  flex: 0 0 4px;
  background: var(--tile-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--tile-accent) 55%, transparent);
}

.tile__body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 10px 12px;
  text-align: center;
}

.tile__label {
  font-size: 12px;
  font-weight: 500;
  color: #cbd5e1;
  line-height: 1.25;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

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

.tile__target {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.25;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tile__target-val {
  color: #cbd5e1;
  font-weight: 500;
}

.tile__main {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.tile__value {
  /* 18cqi = tile 宽度的 18%，窄 tile 自动缩小；垂直布局无横向挤压，允许更大字号 */
  font-size: clamp(18px, 18cqi, 30px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

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

.tile__unit {
  font-size: clamp(10px, 7cqi, 13px);
  color: #e2e8f0;
  font-weight: 500;
  white-space: nowrap;
}

.tile__asof {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.3;
}

.tile--stale {
  opacity: 0.55;
}

.tiles-view--dense .tile__body {
  gap: 2px;
  padding: 6px 8px 8px;
}

.tiles-view--dense .tile__value {
  font-size: clamp(14px, 15cqi, 20px);
}

.tiles-view--dense .tile__unit {
  font-size: clamp(9px, 6cqi, 11px);
}

.tiles-view--dense .tile__label {
  font-size: 11px;
}

.tiles-view--dense .tile__target {
  font-size: 10px;
}

.tiles-view--dense .tile__main {
  margin-top: 2px;
}

.tiles-view__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>