pms-iot-vue/src/views/pms/device/monitor/TdDeviceInfo.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,
  Crop,
  FullScreen,
  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 { rangeShortcuts } from '@/utils/formatTime'
import { Dimensions, formatIotValue, HeaderItem } from '@/utils/useSocketBus'
import { useFullscreen } from '@vueuse/core'
import { snapdom } from '@zumer/snapdom'

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'
})

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})`
}

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 }
]

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) => {
        const { value, suffix, isText } = formatIotValue(item.value)
        return {
          identifier: item.identifier,
          name: item.modelName,
          value: value,
          suffix: suffix,
          isText: isText,
          response: false
        }
      })

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

    const rawList = [...gateway, ...car]

    const uniqueMap = new Map()

    rawList.forEach((item) => {
      const uniqueKey = `${item.identifier}|${item.name}`

      // if (!uniqueMap.has(uniqueKey)) {
      uniqueMap.set(uniqueKey, item)
      // }
    })

    dimensions.value = Array.from(uniqueMap.values()).map((item, index) => {
      const color = neonColors[index % neonColors.length]
      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))
    ])

    const newValueMap = new Map<string, { value: string; suffix?: string; isText?: boolean }>()

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

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

    dimensions.value.forEach((item) => {
      if (newValueMap.has(item.identifier)) {
        const { value, suffix, isText } = newValueMap.get(item.identifier) ?? {}
        item.value = value ?? ''
        item.suffix = suffix
        item.isText = isText
      }
    })

    gatewayDimensions.value.forEach((item) => {
      if (newValueMap.has(item.identifier)) {
        const { value, suffix, isText } = newValueMap.get(item.identifier) ?? {}
        item.value = value ?? ''
        item.suffix = suffix
        item.isText = isText
      }
    })

    carDimensions.value.forEach((item) => {
      if (newValueMap.has(item.identifier)) {
        const { value, suffix, isText } = newValueMap.get(item.identifier) ?? {}
        item.value = value ?? ''
        item.suffix = suffix
        item.isText = isText
      }
    })
  } catch (error) {
    console.error('Failed to update dimension values:', error)
  }
}

const selectedDate = ref<string[]>([
  ...rangeShortcuts[0].value().map((v) => dayjs(v).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: '5%',
      top: '5%',
      right: '5%',
      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: 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()
  }
}

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 = rangeShortcuts[0]
      .value()
      .map((v) => dayjs(v).format('YYYY-MM-DD HH:mm:ss'))

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

function handleDateChange() {
  cancelAllRequests().then(() => {
    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 downloadRef = ref(null)

const exportChart = async () => {
  try {
    if (!downloadRef.value) return

    const result = await snapdom(downloadRef.value, {
      scale: 2,
      backgroundColor: '#fff'
    })

    await result.download({
      filename: `${data.value.deviceName}-设备监控`,
      type: 'png'
    })
  } catch (error) {
    console.error(error)
    ElMessage.error('导出图表失败')
  }
}

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()

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

const targetArea = ref(null)

const { toggle, isFullscreen } = useFullscreen(targetArea)
</script>

<template>
  <div
    class="grid grid-rows-[80px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
  >
    <div
      class="rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0 bg-gradient-to-r from-blue-100 to-white"
    >
      <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>
    <div ref="targetArea" class="h-full min-h-0 relative">
      <div class="grid grid-cols-[260px_1fr] gap-4 h-full">
        <el-scrollbar
          class="rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden bg-gradient-to-b from-blue-100 to-white"
          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 bg-blue-100 z-10 flex justify-between items-center py-3 px-4 border-0 border-solid"
              >
                <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
                  :data-disabled="disabledDimensions.includes(item.identifier)"
                  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-transparent border-gray-300 transition-all duration-300 cursor-pointer select-none data-[disabled=true]:pointer-events-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-19">
                    <animated-count-to
                      v-if="!item.isText"
                      :value="Number(item.value)"
                      :duration="500"
                      :suffix="item.suffix"
                      class="text-lg font-bold font-mono tracking-tight text-slate-800"
                    />
                    <span v-else class="text-lg font-bold font-mono tracking-tight text-slate-800">
                      {{ item.value }}
                    </span>
                  </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="rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col bg-gradient-to-b from-blue-100 to-white"
        >
          <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"
              />
              <el-button
                size="default"
                :type="isFullscreen ? 'info' : 'primary'"
                :icon="isFullscreen ? Crop : FullScreen"
                @click="toggle"
              >
                {{ isFullscreen ? '退出全屏' : '全屏' }}
              </el-button>
            </div>
          </header>

          <div ref="downloadRef" 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-transparent 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 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:20px_20px]"
            >
              <div
                v-loading="chartLoading"
                element-loading-background="transparent"
                ref="chartRef"
                class="w-full h-full"
              >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

.sticky-title {
  position: sticky;
  top: 0;
}

.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%);
}

.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;
}

:fullscreen {
  padding: 16px;
  background-color: #fff;
}

/* 兼容写法 */
::backdrop {
  background-color: #fff;
}
</style>