pms-iot-vue/src/views/oli-connection/monitoring/detail.vue

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { IotDeviceApi } from '@/api/pms/device'
import {
  Odometer,
  CircleCheckFilled,
  CircleCloseFilled,
  DataLine,
  TrendCharts
} from '@element-plus/icons-vue'
import { AnimatedCountTo } from '@/components/AnimatedCountTo'
import { neonColors } from '@/utils/td-color'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { cancelAllRequests, IotStatApi } from '@/api/pms/stat'
import { useSocketBus } from '@/utils/useSocketBus'
import { rangeShortcuts } from '@/utils/formatTime'

const { query } = useRoute()

const data = ref({
  deviceCode: query.code || '',
  deviceName: query.name || '',
  lastInlineTime: query.time || '',
  ifInline: query.ifInline === '3',
  dept: query.dept || '',
  vehicle: query.vehicle || '',
  carOnline: query.carOnline === 'true'
})

const { open: connect, onAny, close } = useSocketBus(data.value.deviceCode as string)

onAny((msg) => {
  if (!Array.isArray(msg) || msg.length === 0) return

  const valueMap = new Map<string, number>()

  for (const item of msg) {
    const { identity, modelName, readTime, logValue } = item

    const value = logValue ? Number(logValue) : 0

    if (identity) {
      valueMap.set(identity, value)
    }

    if (modelName && chartData.value[modelName]) {
      chartData.value[modelName].push({
        ts: dayjs(readTime).valueOf(),
        value
      })

      updateSingleSeries(modelName)
    }
  }

  const updateDimensions = (list) => {
    list.forEach((item) => {
      const v = valueMap.get(item.identifier)
      if (v !== undefined) {
        item.value = v
      }
    })
  }

  updateDimensions(dimensions.value)
  updateDimensions(gatewayDimensions.value)
  updateDimensions(carDimensions.value)

  // 3️⃣ 统一一次调用
  genderIntervalArr()
})

function hexToRgba(hex: string, alpha: number) {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)
  return `rgba(${r}, ${g}, ${b}, ${alpha})`
}

interface HeaderItem {
  label: string
  key: keyof typeof data.value
  judgment?: boolean
}

const headerCenterContent: HeaderItem[] = [
  { label: '设备名称', key: 'deviceName' },
  { label: '所属部门', key: 'dept' },
  { label: '车牌号码', key: 'vehicle', judgment: true },
  { label: '最后上报时间', key: 'lastInlineTime' }
]

const tagProps = { size: 'default', round: true } as const

const headerTagContent: HeaderItem[] = [
  { label: '网关', key: 'ifInline' },
  { label: '北斗', key: 'carOnline', judgment: true }
]

interface Dimensions {
  identifier: string
  name: string
  value: string | number
  color: string
  bgHover: string
  bgActive: string
  response?: boolean
}

const dimensions = ref<Dimensions[]>([])
const gatewayDimensions = ref<Dimensions[]>([])
const carDimensions = ref<Dimensions[]>([])

const dimensionsContent = computed(() => [
  {
    label: '网关数采',
    icon: DataLine,
    value: gatewayDimensions.value,
    countColor: 'text-blue-600',
    countBg: 'bg-blue-50'
  },
  {
    label: '中航北斗',
    icon: TrendCharts,
    value: carDimensions.value,
    countColor: 'text-indigo-600',
    countBg: 'bg-indigo-50',
    judgment: true
  }
])

const disabledDimensions = ref<string[]>(['online', 'vehicle_name'])
const selectedDimension = ref<Record<string, boolean>>({})
const dimensionLoading = ref(false)

async function loadDimensions() {
  if (!query.id) return
  dimensionLoading.value = true
  try {
    const gateway = (((await IotDeviceApi.getIotDeviceTds(Number(query.id))) as any[]) ?? [])
      .sort((a, b) => b.modelOrder - a.modelOrder)
      .map((item) => ({
        identifier: item.identifier,
        name: item.modelName,
        value: item.value,
        response: false
      }))

    const car = (((await IotDeviceApi.getIotDeviceZHBDTds(Number(query.id))) as any[]) ?? [])
      .sort((a, b) => b.modelOrder - a.modelOrder)
      .map((item) => ({
        identifier: item.identifier,
        name: item.modelName,
        value: item.value,
        response: false
      }))

    // 合并并分配霓虹色
    dimensions.value = [...gateway, ...car]
      .filter((item) => !disabledDimensions.value.includes(item.identifier))
      .map((item, index) => {
        const color = neonColors[index]

        return {
          ...item,
          color: color,
          bgHover: hexToRgba(color, 0.08),
          bgActive: hexToRgba(color, 0.12)
        }
      })

    gatewayDimensions.value = dimensions.value.filter((d) =>
      gateway.some((g) => g.identifier === d.identifier)
    )
    carDimensions.value = dimensions.value.filter((d) =>
      car.some((c) => c.identifier === d.identifier)
    )

    selectedDimension.value = Object.fromEntries(dimensions.value.map((item) => [item.name, false]))
    if (dimensions.value.length > 0) {
      selectedDimension.value[dimensions.value[0].name] = true
    }
  } catch (e) {
    console.error(e)
  } finally {
    dimensionLoading.value = false
  }
}

// async function updateDimensionValues() {
//   if (!query.id) return

//   try {
//     // 1. 并行获取最新数据
//     const [gatewayRes, carRes] = await Promise.all([
//       IotDeviceApi.getIotDeviceTds(Number(query.id)),
//       IotDeviceApi.getIotDeviceZHBDTds(Number(query.id))
//     ])

//     // 2. 创建一个 Map 用于快速查找 (Identifier -> Value)
//     // 这样可以将复杂度从 O(N*M) 降低到 O(N)
//     const newValueMap = new Map<string, any>()

//     const addToMap = (data: any[]) => {
//       if (!data) return
//       data.forEach((item) => {
//         if (item.identifier) {
//           newValueMap.set(item.identifier, item.value)
//         }
//       })
//     }

//     addToMap(gatewayRes as any[])
//     addToMap(carRes as any[])

//     // 3. 更新 dimensions.value (保留了之前的 color 和其他属性)
//     dimensions.value.forEach((item) => {
//       if (newValueMap.has(item.identifier)) {
//         item.value = newValueMap.get(item.identifier)
//       }
//     })

//     // 4. 如果还需要同步更新 gatewayDimensions 和 carDimensions
//     // (假设这些是引用类型，如果它们引用的是同一个对象，上面更新 dimensions 时可能已经同步了。
//     // 如果它们是独立的对象数组，则需要显式更新)

//     // 更新 Gateway 原始列表
//     gatewayDimensions.value.forEach((item) => {
//       if (newValueMap.has(item.identifier)) {
//         item.value = newValueMap.get(item.identifier)
//       }
//     })

//     // 更新 Car 原始列表
//     carDimensions.value.forEach((item) => {
//       if (newValueMap.has(item.identifier)) {
//         item.value = newValueMap.get(item.identifier)
//       }
//     })
//   } catch (error) {
//     console.error('Failed to update dimension values:', error)
//   }
// }

const selectedDate = ref<string[]>([
  dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss'),
  dayjs().format('YYYY-MM-DD HH:mm:ss')
])

interface ChartData {
  [key: Dimensions['name']]: { ts: number; value: number }[]
}

const chartData = ref<ChartData>({})

let intervalArr = ref<number[]>([])
let maxInterval = ref(0)
let minInterval = ref(0)

const chartRef = ref<HTMLDivElement | null>(null)
let chart: echarts.ECharts | null = null

// const genderIntervalArrDebounce = useDebounceFn(
//   (init: boolean = false) => genderIntervalArr(init),
//   300
// )

function genderIntervalArr(init: boolean = false) {
  const values: number[] = []

  for (const [key, value] of Object.entries(selectedDimension.value)) {
    if (value) {
      values.push(...(chartData.value[key]?.map((item) => item.value) ?? []))
    }
  }

  const maxVal = values.length === 0 ? 10000 : Math.max(...values)
  const minVal = values.length === 0 ? 0 : Math.min(...values) > 0 ? 0 : Math.min(...values)

  const maxDigits = (Math.floor(maxVal) + '').length
  const minDigits = minVal === 0 ? 0 : (Math.floor(Math.abs(minVal)) + '').length

  const interval = Math.max(maxDigits, minDigits)

  maxInterval.value = interval
  minInterval.value = minDigits

  intervalArr.value = [0]
  for (let i = 1; i <= interval; i++) {
    intervalArr.value.push(Math.pow(10, i))
  }

  if (!init) {
    chart?.setOption({
      yAxis: {
        min: -minInterval.value,
        max: maxInterval.value
      }
    })
  }
}

function chartInit() {
  if (!chart) return

  chart.on('legendselectchanged', (params: any) => {
    selectedDimension.value = params.selected
  })

  window.addEventListener('resize', () => {
    if (chart) chart.resize()
  })
}

function render() {
  if (!chartRef.value) return

  if (!chart) chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })

  chartInit()

  genderIntervalArr(true)

  chart.setOption({
    animation: true,
    animationDuration: 200,
    animationEasing: 'linear',
    animationDurationUpdate: 200,
    animationEasingUpdate: 'linear',
    grid: {
      left: '6%',
      top: '5%',
      right: '6%',
      bottom: '12%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      formatter: (params) => {
        let d = `${params[0].axisValueLabel}<br>`
        const exist: string[] = []
        params = params.filter((el) => {
          if (exist.includes(el.seriesName)) return false
          exist.push(el.seriesName)
          return true
        })
        let item = params.map(
          (el) => `<div class="flex items-center justify-between mt-1">
            <span>${el.marker} ${el.seriesName}</span>
            <span>${el.value[2]?.toFixed(2)}</span>
          </div>`
        )

        return d + item.join('')
      }
    },
    xAxis: {
      type: 'time',
      axisLabel: {
        formatter: (v) => dayjs(v).format('YYYY-MM-DD\nHH:mm:ss'),
        rotate: 0,
        align: 'left'
      }
    },
    dataZoom: [
      { type: 'inside', xAxisIndex: 0 },
      { type: 'slider', xAxisIndex: 0 }
    ],
    yAxis: {
      type: 'value',
      min: -minInterval.value,
      max: maxInterval.value,
      interval: 1,
      axisLabel: {
        formatter: (v) => {
          const num = v === 0 ? 0 : v > 0 ? Math.pow(10, v) : -Math.pow(10, -v)

          return num.toLocaleString()
        }
      },
      show: false
    },
    legend: {
      data: dimensions.value.map((item) => item.name),
      selected: selectedDimension.value,
      show: false
    },
    // series: dimensions.value.map((item) => ({
    //   name: item.name,
    //   type: 'line',
    //   smooth: true,
    //   showSymbol: false,
    //   color: item.color,
    //   data: [] // 占位数组
    // }))
    series: dimensions.value.map((item) => ({
      name: item.name,
      type: 'line',

      smooth: 0.2,

      showSymbol: false,

      endLabel: {
        show: true,
        formatter: (params) => params.value[2]?.toFixed(2),
        offset: [6, 0],
        color: item.color,
        fontSize: 12
      },

      emphasis: {
        focus: 'series'
      },

      lineStyle: {
        width: 2
      },

      color: item.color,
      data: [] // 占位数组
    }))
  })
}

function mapData({ value, ts }) {
  if (value === null || value === undefined || value === 0) return [ts, 0, 0]

  const isPositive = value > 0
  const absItem = Math.abs(value)

  if (!intervalArr.value.length) return [ts, 0, value]

  const min_value = Math.max(...intervalArr.value.filter((v) => v <= absItem))
  const min_index = intervalArr.value.findIndex((v) => v === min_value)

  let denominator = 1
  if (min_index < intervalArr.value.length - 1) {
    denominator = intervalArr.value[min_index + 1] - intervalArr.value[min_index]
  } else {
    denominator = intervalArr.value[min_index] || 1
  }

  const new_value = (absItem - min_value) / denominator + min_index

  return [ts, isPositive ? new_value : -new_value, value]
}

function updateSingleSeries(name: string) {
  if (!chart) render()
  if (!chart) return

  const idx = dimensions.value.findIndex((item) => item.name === name)
  if (idx === -1) return

  const data = chartData.value[name].map((v) => mapData(v))

  chart.setOption({
    series: [{ name, data }]
  })
}

const lastTsMap = ref<Record<Dimensions['name'], number>>({})

// async function fetchIncrementData() {
//   for (const item of dimensions.value) {
//     const { identifier, name } = item

//     const lastTs = lastTsMap.value[name]
//     if (!lastTs) continue

//     item.response = true

//     IotStatApi.getDeviceInfoChart(
//       data.value.deviceCode,
//       identifier,
//       dayjs(lastTs).format('YYYY-MM-DD HH:mm:ss'),
//       dayjs().format('YYYY-MM-DD HH:mm:ss')
//     )
//       .then((res) => {
//         if (!res.length) return

//         const sorted = res
//           .sort((a, b) => a.ts - b.ts)
//           .map((item) => ({ ts: item.ts, value: item.value }))
//         // push 到本地
//         chartData.value[name].push(...sorted)
//         // 更新 lastTs
//         lastTsMap.value[identifier] = sorted.at(-1).ts

//         // 更新图表
//         updateSingleSeries(name)
//       })
//       .finally(() => {
//         item.response = false
//       })
//   }
// }

// const timer = ref<NodeJS.Timeout | null>(null)

// function startAutoFetch() {
//   timer.value = setInterval(() => {
//     updateDimensionValues()
//     fetchIncrementData()
//   }, 10000)
// }

// function stopAutoFetch() {
//   cancelAllRequests()
//   if (timer.value) clearInterval(timer.value)
//   timer.value = null
// }

const chartLoading = ref(false)

async function initLoadChartData(real_time: boolean = true) {
  if (!dimensions.value.length) return

  chartData.value = Object.fromEntries(dimensions.value.map((item) => [item.name, []]))

  chartLoading.value = true

  dimensions.value = dimensions.value.map((item) => {
    item.response = true
    return item
  })

  for (const item of dimensions.value) {
    const { identifier, name } = item
    try {
      const res = await IotStatApi.getDeviceInfoChart(
        data.value.deviceCode,
        identifier,
        selectedDate.value[0],
        selectedDate.value[1]
      )

      const sorted = res
        .sort((a, b) => a.ts - b.ts)
        .map((item) => ({ ts: item.ts, value: item.value }))

      chartData.value[name] = sorted

      lastTsMap.value[name] = sorted.at(-1)?.ts ?? 0

      genderIntervalArr(true)

      updateSingleSeries(name)

      chartLoading.value = false

      // if (selectedDimension.value[name]) {
      //   genderIntervalArr()
      // }
    } finally {
      item.response = false
    }
  }

  if (real_time) {
    // startAutoFetch()
    connect()
  }
}

async function initfn(load: boolean = true, real_time: boolean = true) {
  if (load) await loadDimensions()
  render()
  initLoadChartData(real_time)
}

onMounted(() => {
  initfn()
})

function reset() {
  cancelAllRequests().then(() => {
    selectedDate.value = [
      dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss'),
      dayjs().format('YYYY-MM-DD HH:mm:ss')
    ]

    close()
    // stopAutoFetch()
    if (chart) chart.clear()
    initfn(false)
  })
}

function handleDateChange() {
  cancelAllRequests().then(() => {
    close()
    // stopAutoFetch()
    if (chart) chart.clear()
    initfn(false, false)
  })
}

function handleClickSpec(modelName: string) {
  selectedDimension.value[modelName] = !selectedDimension.value[modelName]
  chart?.setOption({
    legend: {
      selected: selectedDimension.value
    }
  })

  genderIntervalArr()

  if (selectedDimension.value[modelName]) {
    updateSingleSeries(modelName)
  }

  nextTick(() => {
    chart?.resize()
  })
}

const exportChart = () => {
  if (!chart) return
  let img = new Image()
  img.src = chart.getDataURL({
    type: 'png',
    pixelRatio: 1,
    backgroundColor: '#fff'
  })

  img.onload = function () {
    let canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    let ctx = canvas.getContext('2d')
    ctx?.drawImage(img, 0, 0)
    let dataURL = canvas.toDataURL('image/png')

    let a = document.createElement('a')

    let event = new MouseEvent('click')

    a.href = dataURL
    a.download = `${data.value.deviceName}-设备监控-${dayjs().format('YYYY-MM-DD HH:mm:ss')}.png`
    a.dispatchEvent(event)
  }
}

const maxmin = computed(() => {
  if (!dimensions.value.length) return []
  return dimensions.value
    .filter((v) => selectedDimension.value[v.name])
    .map((v) => ({
      name: v.name,
      color: v.color,
      bgHover: v.bgHover,
      max: Math.max(...(chartData.value[v.name]?.map((v) => v.value) ?? [])).toFixed(2),
      min: Math.min(...(chartData.value[v.name]?.map((v) => v.value) ?? [])).toFixed(2)
    }))
})

onUnmounted(() => {
  // stopAutoFetch()
  close()

  window.removeEventListener('resize', () => {
    if (chart) chart.resize()
  })
})
</script>

<template>
  <div
    class="grid grid-cols-[260px_1fr] grid-rows-[80px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
  >
    <div
      class="grid-col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0"
    >
      <div class="flex items-center gap-4">
        <div
          class="size-12 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center shadow-inner"
        >
          <el-icon :size="24"><Odometer /></el-icon>
        </div>
        <div>
          <div class="text-xs text-gray-400 font-medium tracking-wider">资产编码</div>
          <div class="text-xl font-bold font-mono text-gray-800">{{ data.deviceCode }}</div>
        </div>
      </div>
      <div class="flex-1 flex justify-center divide-x divide-gray-100">
        <template v-for="item in headerCenterContent" :key="item.key">
          <div
            class="px-8 flex flex-col items-center"
            v-if="item.judgment ? Boolean(query[item.key]) : true"
          >
            <span class="text-xs text-gray-400 mb-1">{{ item.label }}</span>
            <span class="font-semibold text-gray-700">{{ data[item.key] }}</span>
          </div>
        </template>
      </div>
      <div class="flex items-center gap-6">
        <template v-for="item in headerTagContent" :key="item.key">
          <div class="text-center" v-if="item.judgment ? Boolean(query[item.key]) : true">
            <div class="text-xs text-gray-400 mb-1">{{ item.label }}</div>
            <el-tag v-if="data[item.key]" type="success" v-bind="tagProps">
              <el-icon class="mr-1"><CircleCheckFilled /></el-icon>在线
            </el-tag>
            <el-tag v-else type="danger" v-bind="tagProps">
              <el-icon class="mr-1"><CircleCloseFilled /></el-icon>离线
            </el-tag>
          </div>
        </template>
      </div>
    </div>

    <el-scrollbar
      class="bg-white rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden"
      view-class="flex flex-col min-h-full"
      v-loading="dimensionLoading"
    >
      <template v-for="citem in dimensionsContent" :key="citem.label">
        <template v-if="citem.judgment ? Boolean(citem.value.length) : true">
          <div
            class="sticky-title z-88 bg-white/95 flex justify-between items-center py-3 px-4 border-0 border-solid border-b border-gray-50"
          >
            <span class="font-bold text-sm text-gray-700! flex items-center gap-2">
              <el-icon><component :is="citem.icon" /></el-icon>
              {{ citem.label }}
            </span>
            <span
              class="text-xs px-2 py-0.5 rounded-full font-mono"
              :class="[citem.countBg, citem.countColor]"
            >
              {{ citem.value.length }}
            </span>
          </div>

          <div class="px-3 pb-4 pt-2 space-y-3">
            <div
              v-for="item in citem.value"
              :key="item.identifier"
              @click="handleClickSpec(item.name)"
              class="dimension-card group relative p-3 rounded-lg border border-solid bg-white border-gray-200 transition-all duration-300 cursor-pointer select-none"
              :class="{ 'is-active': selectedDimension[item.name] }"
              :style="{
                '--theme-color': item.color,
                '--theme-bg-hover': item.bgHover,
                '--theme-bg-active': item.bgActive
              }"
            >
              <div class="flex justify-between items-center mb-1">
                <span
                  class="text-xs font-medium text-gray-500 transition-colors truncate pr-2 group-hover:text-[var(--theme-color)]"
                  :class="{ 'text-[var(--theme-color)]!': selectedDimension[item.name] }"
                >
                  {{ item.name }}
                </span>
                <div
                  class="size-2 rounded-full transition-all duration-300 shadow-sm"
                  :class="selectedDimension[item.name] ? 'scale-100' : 'scale-0'"
                  :style="{ backgroundColor: item.color, boxShadow: `0 0 6px ${item.color}` }"
                ></div>
              </div>

              <div class="flex items-baseline justify-between relative z-10">
                <animated-count-to
                  :value="Number(item.value)"
                  :duration="500"
                  class="text-lg font-bold font-mono tracking-tight text-slate-800"
                />
              </div>
              <div
                class="absolute left-0 top-3 bottom-3 w-1 rounded-r transition-all duration-300"
                :class="
                  selectedDimension[item.name]
                    ? 'opacity-100 shadow-[0_0_8px_currentColor]'
                    : 'opacity-0'
                "
                :style="{ backgroundColor: item.color, color: item.color }"
              >
              </div>
            </div>
          </div>
        </template>
      </template>
    </el-scrollbar>

    <div
      class="bg-white rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col"
    >
      <header class="flex items-center justify-between mb-4">
        <h3 class="flex items-center gap-2">
          <div class="i-material-symbols:area-chart-outline-rounded text-sky size-6" text-sky></div>
          数据趋势
        </h3>
        <div class="flex gap-4">
          <el-button type="primary" size="default" @click="exportChart">导出为图片</el-button>
          <el-button size="default" @click="reset">重置</el-button>
          <el-date-picker
            v-model="selectedDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            unlink-panels
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="rangeShortcuts"
            size="default"
            class="w-100!"
            placement="bottom-end"
            @change="handleDateChange"
          />
        </div>
      </header>

      <div class="flex flex-1">
        <div class="flex gap-1 select-none">
          <div
            v-for="item of maxmin"
            :key="item.name"
            :style="{
              '--theme-bg-hover': item.bgHover
            }"
            class="w-8 h-full flex flex-col items-center justify-between py-2 gap-1 rounded-full group relative bg-gray-50 border border-solid border-transparent transition-all duration-300 hover:bg-[var(--theme-bg-hover)] hover-border-gray-200 hover:shadow-md cursor-pointer active:scale-95"
            @click="handleClickSpec(item.name)"
          >
            <span class="[writing-mode:sideways-lr] text-xs text-gray-400">{{ item.max }}</span>
            <div
              class="flex-1 w-0.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity duration-300"
              :style="{ backgroundColor: item.color }"
            ></div>
            <span
              class="[writing-mode:sideways-lr] text-sm font-bold tracking-widest"
              :style="{ color: item.color }"
            >
              {{ item.name }}
            </span>
            <div
              class="flex-1 w-0.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity duration-300"
              :style="{ backgroundColor: item.color }"
            ></div>
            <span class="[writing-mode:sideways-lr] text-xs text-gray-400">{{ item.min }}</span>
          </div>
        </div>
        <div
          class="flex flex-1 min-w-0 bg-gray-50/30 rounded-lg border border-dashed border-gray-200 ml-2 relative overflow-hidden"
        >
          <div
            v-loading="chartLoading"
            element-loading-background="transparent"
            ref="chartRef"
            class="w-full h-full"
          >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Icon Fix */
:deep(.el-tag__content) {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Sticky Header */
.sticky-title {
  position: sticky;
  top: 0;
}

/*
  核心样式：霓虹卡片效果
  使用 CSS 变量实现动态颜色
*/

/* Hover 状态：背景微亮，边框变色 */
.dimension-card:hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-bg-active);
  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 5%);
}

/* Active 状态：背景更亮，边框为主题色，带轻微发光投影 */
.dimension-card.is-active {
  background-color: var(--theme-bg-active);
  border-color: var(--theme-color);
  box-shadow:
    0 0 0 1px var(--theme-bg-active),
    0 4px 12px -2px var(--theme-bg-active);
}

/* 滚动条美化 */
:deep(.el-scrollbar__bar.is-vertical) {
  right: 2px;
  width: 4px;
}

:deep(.el-scrollbar__thumb) {
  background-color: #cbd5e1;
  opacity: 0.6;
}

:deep(.el-scrollbar__thumb:hover) {
  background-color: #94a3b8;
  opacity: 1;
}
</style>