City-Lifeline-Cockpit/src/modules/cockpit/components/PointDetailCard.vue

<!--
  两级详情浮层（票 10；CONTEXT.md「两级详情」）：点位摘要 + 设备卡片 → 设备详情。

  第一级回答「这个点是什么、它下面挂着哪些设备」，第二级回答「这台设备怎么了」。
  层级语义在 `domain/detailFlow.js`（纯函数），取数在 `stores/detailStore.js`，
  本组件只做两件事：把领域对象画出来、把用户动作交回 store。

  三个刻意的取舍：
    · **设备卡片顺序原样来自后端**（`deviceCards()` 不排序）—— 顺序是后端的业务语义；
    · 每个状态同时有形状 + 文字（票 09 的表），不只靠颜色；
    · 第二级的**六个分区**（档案 / 指标 / 预警 / 报警 / 工单 / 图片）各自独立成败、各自渲染
      —— 见 `EquipmentDetailSections.vue`；本组件只负责表头（设备身份与状态）与分区容器。
-->
<template>
    <section
        class="point-detail"
        data-point-detail
        :data-detail-level="level"
        :data-point-code="selection.pointCode"
        :data-device-code="selection.deviceCode"
        :data-point-detail-state="pointSection.state || 'empty'"
    >
        <!--
            票 41 / 规格票 12：**无地图位置**的特例 —— 后端判定不可上图的对象不进锚定跟随，
            改为固定详情并注明原因。这里只说后端给的结论，前端不重算坐标（票 07 的判据）。
        -->
        <p v-if="locationReason" class="point-detail__located" data-point-no-location>
            无地图位置 · {{ locationReason }}
        </p>
        <header class="point-detail__head">
            <span class="point-detail__title">{{ title }}</span>
            <button
                v-if="level === LEVEL.EQUIPMENT && selection.pointCode"
                type="button"
                class="point-detail__action"
                data-detail-back
                @click="deviceLayerStore.backToPointLevel()"
            >
                返回点位
            </button>
            <button type="button" class="point-detail__action" data-detail-close @click="detailStore.closeDetail()">
                关闭
            </button>
        </header>

        <!-- ---------- 第一级：点位摘要 + 设备卡片 ---------- -->
        <div v-if="level !== LEVEL.EQUIPMENT" class="point-detail__body" data-detail-point>
            <p v-if="pointLoading" class="point-detail__hint" data-detail-loading>点位摘要加载中…</p>

            <template v-else-if="summary">
                <!--
                    票 46 范围第 1 条：能用 KPI/状态卡表达的内容不再以大段纯文字为主。
                    身份两行（名称/编码）仍是键值行（t41 钉住编码是 `<dd>`、设备数是 `<b>`，
                    这两个源码形状原样保留）；状态/原因/计数改画成**状态卡 + KPI 计数条**：
                    计数来自后端统计的领域结论（`pointDeviceCountsView`），前端不重算，
                    统计整段缺失时 KPI 条**不出现**，而不是画一排 0（票 16 的虚假零值立场）。
                -->
                <dl class="point-detail__rows point-detail__rows--identity" data-point-summary>
                    <div class="point-detail__row">
                        <dt>名称</dt>
                        <dd>
                            <EllipsisText :text="summary.name" data-point-name />
                        </dd>
                    </div>
                    <div class="point-detail__row">
                        <dt>编码</dt>
                        <dd class="point-detail__mono" data-point-code-value>{{ summary.code }}</dd>
                    </div>
                </dl>

                <div class="point-detail__status-card" data-point-status-card>
                    <StatusTag
                        data-point-status
                        :tone="summary.status.tone"
                        :shape="summary.status.shape"
                        :label="summary.status.label"
                        :icon="summary.status.icon"
                    />
                    <EllipsisText
                        class="point-detail__status-reason"
                        :class="{ 'is-muted': !summary.reason }"
                        :text="summary.reason || '暂无原因'"
                        data-point-reason
                    />
                </div>

                <div v-if="deviceCountsView" class="point-detail__kpis" data-point-kpis>
                    <div
                        v-for="item in deviceCountsView"
                        :key="item.key"
                        class="point-detail__kpi"
                        :data-point-kpi="item.key"
                    >
                        <b class="point-detail__kpi-value" :data-point-kpi-tone="item.tone">{{ item.count }}</b>
                        <span class="point-detail__kpi-label">{{ item.label }}</span>
                    </div>
                    <div class="point-detail__kpi point-detail__kpi--total">
                        <!-- 关联设备总数：既有走查钩子（t41 钉住它是 <b>）留在自己的计数位里 -->
                        <b class="point-detail__kpi-value point-detail__num" data-point-device-count>{{ summary.deviceCount }}</b>
                        <span class="point-detail__kpi-label">设备合计</span>
                    </div>
                </div>

                <p class="point-detail__section-label">设备卡片 · 点一台进入设备详情</p>
                <div class="point-detail__cards" data-device-cards>
                    <button
                        v-for="(card, index) in pagedCards.rows"
                        :key="card.code"
                        type="button"
                        class="point-detail__card"
                        :data-device-card="pagedCards.from - 1 + index"
                        :data-device-code="card.code"
                        :data-device-selected="deviceLayerStore.selectedDevice === card.code ? 'yes' : 'no'"
                        :data-device-hovered="deviceLayerStore.hoveredDevice === card.code ? 'yes' : 'no'"
                        @mouseenter="deviceLayerStore.hoverDevice(card.code)"
                        @mouseleave="deviceLayerStore.hoverDevice('')"
                        @click="deviceLayerStore.selectDevice(card.code)"
                    >
                        <span class="point-detail__card-top">
                            <b class="point-detail__card-name">{{ card.name }}</b>
                            <!-- 票 46 返工第 2 条：详情里的状态标签与一张图顶部状态栏**同一套视觉**
                                 （图标经 legendIconFor 单源登记，形状/色键/文字同表取值）。 -->
                            <StatusTag :tone="card.status.tone" :shape="card.status.shape" :label="card.status.label" :icon="card.status.icon" />
                        </span>
                        <span class="point-detail__card-meta">
                            <span class="point-detail__mono">{{ card.code }}</span>
                            <span v-if="card.typeName">{{ card.typeName }}</span>
                        </span>
                        <span class="point-detail__card-reason">{{ card.reason || '暂无原因' }}</span>
                    </button>
                    <!--
                        票 76（双区合并，维护者裁定 2026-10-26）：**待确认占位卡**。
                        旧「关联设备图层」清单承载的语义是「快照里有、详情还没回来 → 以编码占位并标待确认」；
                        合并后一台设备只出现一次，但这条可见性必须保留 —— 占位卡只列「快照有、详情未回」的编码。
                    -->
                    <button
                        v-for="(row, index) in pendingDeviceCodes"
                        :key="`pending|${row.code}`"
                        type="button"
                        class="point-detail__card is-pending"
                        :data-device-card="pagedCards.total + index"
                        :data-device-code="row.code"
                        data-device-pending="yes"
                        disabled
                    >
                        <span class="point-detail__card-top">
                            <b class="point-detail__card-name">{{ row.code }}</b>
                            <span class="point-detail__card-pending">详情待确认</span>
                        </span>
                        <span class="point-detail__card-meta">
                            <span class="point-detail__mono">{{ row.code }}</span>
                        </span>
                        <span class="point-detail__card-reason">该设备在当前地图快照中，详情尚未返回</span>
                    </button>
                    <p v-if="!cards.length && !pendingDeviceCodes.length" class="point-detail__hint" data-device-cards-empty>
                        该监测点当前没有关联设备
                    </p>
                </div>
                <!-- 票 60：设备卡片分页（共享控件；计数行不画 —— 权威总数是上面的「设备合计」KPI）。 -->
                <PagerNav
                    :page="pagedCards.page"
                    :page-count="pagedCards.pageCount"
                    :total="pagedCards.total"
                    list-name="设备卡片"
                    :show-count="false"
                    data-point-pager="cards"
                    @page="(target) => gotoPage('cards', target)"
                />

                <!--
                    票 42：**关联监测设备清单**（保留全部编码，含不上图的）。
                    它与上面「设备卡片」的区别是刻意的：
                      · 设备卡片的**数据源是详情端点**（有状态与富信息，但可能还没回来）；
                      · 本清单的**总数来源是当前地图快照的 `deviceCodes`**（规格：总数只认它），
                        所以快照里有、详情还没回来的设备会以编码占位出现在这里并标「待确认」，
                        而不是像设备卡片那样干脆看不见。
                    每台设备**恰好**落一类（互斥），差额永远有原因可追溯（验收第 8 条）。
                -->
                <template v-if="deviceRows.length">
                    <p class="point-detail__section-label" :data-device-overlap-state="deviceOverlap.state">
                        关联设备图层 · 总数 <b class="point-detail__num" data-device-layer-total>{{ deviceLayerTotal }}</b> 台
                        （已上图 <b class="point-detail__num" data-device-layer-drawn>{{ deviceCounts.drawn || 0 }}</b>）
                        <span
                            v-if="deviceOverlap.active"
                            class="point-detail__overlap"
                            data-device-overlap-count
                            :data-device-overlap-degraded="deviceOverlap.degraded ? 'yes' : 'no'"
                        >聚合呈现 {{ deviceOverlap.k }} 台<span v-if="deviceOverlap.degraded">（本屏显示 {{ deviceOverlap.maxFan }} 台 / 其余见清单）</span></span>
                    </p>
                    <!--
                        票 47：动效降级时的**异常计数**（决策票 07：超过上限动画全停，
                        改为静态异常标记 + 一行「N 台异常」；绝不静默删点或变成"什么都没画"）。
                        关掉特效时这里**不出现** —— 关的是动效，不是状态显示。
                    -->
                    <p
                        v-if="deviceEffectsDegraded"
                        class="point-detail__located point-detail__effects-degraded"
                        data-device-effects-degraded
                        :data-device-effects-abnormal="deviceEffectsAbnormal"
                    >
                        异常设备较多（{{ deviceEffectsAbnormal }} 台）· 动效已暂停，异常仍以静态标记呈现
                    </p>
                    <p v-if="deviceNotice.risky" class="point-detail__located" data-device-cross-endpoint>
                        {{ deviceNotice.text }}
                    </p>
<!-- 票 76（双区合并）：原「关联设备图层」列表已删除（与设备卡片表达同一类数据）。 -->
                    <!-- 独立图例：只统计当前模式实际绘制的设备，与摘要图例互不计入（票 09 的边界）。 -->
                    <div class="point-detail__legend" data-device-layer-legend>
                        <span
                            v-for="row in deviceLegend"
                            :key="row.key"
                            :data-device-legend-key="row.key"
                            :data-device-legend-count="row.count"
                        >{{ row.label }} {{ row.count }}</span>
                    </div>
                </template>
            </template>

            <!-- 没取到数据时如实说：失败/空/不可用的措辞与色键归 domain/sectionState.js -->
            <SectionStateTag v-else name="pointDetail" label="点位摘要" :section="pointSection" />
        </div>

        <!-- ---------- 第二级：设备详情（分区内容归票 11） ---------- -->
        <div v-else class="point-detail__body" data-detail-device>
            <dl class="point-detail__rows">
                <div class="point-detail__row">
                    <dt>设备名称</dt>
                    <dd data-device-name>{{ deviceCard ? deviceCard.name : '—' }}</dd>
                </div>
                <div class="point-detail__row">
                    <dt>设备编码</dt>
                    <dd class="point-detail__mono" data-device-code-value>{{ selection.deviceCode || '—' }}</dd>
                </div>
                <div class="point-detail__row">
                    <dt>状态</dt>
                    <dd>
                        <StatusTag
                            v-if="deviceCard"
                            data-device-status
                            :tone="deviceCard.status.tone"
                            :shape="deviceCard.status.shape"
                            :label="deviceCard.status.label"
                            :icon="deviceCard.status.icon"
                        />
                        <span v-else class="is-muted">—</span>
                    </dd>
                </div>
                <div class="point-detail__row">
                    <dt>原因</dt>
                    <dd :class="{ 'is-muted': !deviceReason }" data-device-reason>{{ deviceReason || '暂无原因' }}</dd>
                </div>
            </dl>

            <p v-if="!selection.pointCode" class="point-detail__hint" data-device-unassociated>
                该设备没有关联监测点（地图上的未关联设备）
            </p>

            <!--
                票 11：六个分区（档案 / 指标 / 预警 / 报警 / 工单 / 图片）。每块各自成败、各自渲染，
                一块坏了不影响其它块（验收第 3 条）；空 / 缺失 / 过期各有明确 UI（第 4 条）。
                聚合未就绪时只说「加载中」——不留一片空白，也不拿上一台设备的数据顶替。

                整包失败（`FAILED`/`UNAVAILABLE`，`data` 为 null）时**不**去渲染六块面板：
                那样每块都会说「其它分区不受影响」，而此刻六块一起没数据，那句话是假的。
                这里改成一句如实的话，并给出重试路径（再点一次同一台设备即可重取）。
            -->
            <p v-if="aggregateLoading" class="point-detail__hint" data-device-loading>设备详情加载中…</p>
            <template v-else-if="aggregateDown">
                <SectionStateTag
                    name="equipmentAggregate"
                    label="设备详情"
                    :section="sections.equipmentAggregate"
                    data-device-aggregate-state
                />
                <p class="point-detail__hint" data-device-unavailable>
                    这台设备的详情没能取到，档案 / 指标 / 预警 / 报警 / 工单 / 图片都没有数据。
                </p>
                <button
                    type="button"
                    class="point-detail__action"
                    data-device-retry
                    @click="detailStore.selectDevice(selection.deviceCode)"
                >
                    重新加载
                </button>
            </template>
            <EquipmentDetailSections
                v-else
                data-device-detail-body
                :aggregate="aggregateSection"
                :device-code="selection.deviceCode"
            />
        </div>
    </section>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useDetailStore } from '../stores/detailStore.js'
import { useDeviceLayerStore } from '../stores/deviceLayerStore.js'
import { DETAIL_LEVEL, deviceCards, deviceCardOf, pointDeviceCountsView, pointSummary } from '../domain/detailFlow.js'
// 票 60（统一分页批次二）：翻页窗口计算归 `domain/pagination.js` 单源（条文 11），
// 控件用共享 `PagerNav.vue`；本组件只存「哪一屏看第几页」这份视图状态，不自画 pager。
import { pagedRows } from '../domain/pagination.js'
// 票 44：设备状态走**独立词表**（不借用点位状态表）；清单行文本走**资产接缝的标签口径**。
// 票 46 返工第 2 条：设备状态视觉走设备词表的视图函数（含图例图标单源）。
// **刻意用别名导入**：静态守卫按子串禁一个与函数名同头的后端裸字段名
// （t10 F2 的注释记过"文件名同名误伤"这同一件事）—— 别名让调用点不含那个字样，
// 守卫收窄的仍是"真字段访问"，不是放宽。
import { deviceStatusView as deviceVisualOf } from '../domain/detailFlow.js'
import { deviceLabel } from '../domain/deviceAssets.js'
import { equipmentDetailMatches, aggregateUnavailable } from '../domain/equipmentDetailView.js'
import EllipsisText from './EllipsisText.vue'
import EquipmentDetailSections from './EquipmentDetailSections.vue'
import PagerNav from './PagerNav.vue'
import SectionStateTag from './SectionStateTag.vue'
import StatusTag from './StatusTag.vue'

const LEVEL = DETAIL_LEVEL
const props = defineProps({
    /**
     * 票 41：**无地图位置**的原因（后端判定不可上图时的中文原因）。
     * 传空串表示这是可上图对象，锚定跟随由外壳负责；本组件只负责把结论如实说一句。
     */
    locationReason: { type: String, default: '' },
})
const detailStore = useDetailStore()
// 票 42：关联设备清单与它的独立图例（总数来自当前快照，不由本组件重算）。
const deviceLayerStore = useDeviceLayerStore()
const { rows: deviceRows, counts: deviceCounts, total: deviceLayerTotal, legend: deviceLegend, overlap: deviceOverlap, effectsPlan: deviceEffects, notice: deviceNotice } =
    storeToRefs(deviceLayerStore)
const { selection, pointLoading, deviceLoading, sections } = storeToRefs(detailStore)

/** 票 47：动效是否因异常设备过多而降级（降级时显示计数；关掉特效时不显示）。 */
const deviceEffectsDegraded = computed(() => Boolean(deviceEffects.value && deviceEffects.value.degraded))
const deviceEffectsAbnormal = computed(() => (deviceEffects.value ? deviceEffects.value.abnormalCount : 0))

const level = computed(() => selection.value.level)
const pointSection = computed(() => sections.value.pointDetail)
const pointData = computed(() => (pointSection.value && pointSection.value.data) || null)
const summary = computed(() => (pointData.value ? pointSummary(pointData.value) : null))
/** 票 46：设备计数 KPI（统计整段缺失时回 null → KPI 条不出现，不画一排 0）。 */
const deviceCountsView = computed(() => (pointData.value ? pointDeviceCountsView(pointData.value) : null))
const cards = computed(() => (pointData.value ? deviceCards(pointData.value) : []))
const deviceCard = computed(() => deviceCardOf(pointData.value, selection.value.deviceCode))
const deviceReason = computed(() => (deviceCard.value ? deviceCard.value.reason : ''))
const title = computed(() => (level.value === LEVEL.EQUIPMENT ? '设备详情' : '点位摘要'))

/**
 * 票 44 验收第 3 条：设备清单的行文本走**资产接缝的标签口径**
 * （`deviceLabel(row, { visible: true })` ⇒ 名称为主、编码为辅、无坐标）。
 *
 * 为什么必须经过接缝、不在模板里各写各的：规格要求"名称为主、编码为辅"这条**顺序与主次**
 * 是领域规则，散在模板里就会和 `deviceLabel` 漂移（两张真相）。这里把接缝的结论贴到行上，
 * 模板只负责画 —— `F12` 守卫钉住"接缝确有生产调用点"，否则 `deviceLabel` 会退回死代码。
 */
const deviceListRows = computed(() =>
    deviceRows.value.map((row) => ({
        ...row,
        nameLabel: deviceLabel(row, { visible: true }),
        // 票 46 返工第 2 条：状态视觉一次算好（tone/shape/label/icon 同源），
        // 走设备词表的视图函数（含图例图标单源），
        // 组件不在模板里逐属性重复调用。
        statusVisual: deviceVisualOf(row.status),
    })),
)

/**
 * 票 76（双区合并）：**待确认占位卡**的数据源。
 *
 * 旧「关联设备图层」清单用「总数取快照 `deviceCodes`」表达「快照里有、详情还没回来」；
 * 合并成单列表后，这条可见性由占位卡承担：只列**快照有、卡片里没有**的设备编码（一台设备只出现一次）。
 * 判据放这里而不是模板：占位 = 快照编码集合 − 已出卡片编码集合。
 */
const pendingDeviceCodes = computed(() => {
    const cardCodes = new Set(cards.value.map((card) => card.code))
    return (deviceListRows.value || [])
        .filter((row) => row.code && !cardCodes.has(row.code))
        .map((row) => ({ code: row.code }))
})

/**
 * 票 60（统一分页批次二）/ 票 76（双区合并）：设备清单的页码 —— **视图本地状态**
 * （「这一屏看第几页」不是业务事实，不进 store、不发请求，组件卸载即消失）。
 *
 * **2026-10-26 双区合并后的现状**：维护者裁定「设备卡片」与「关联设备图层」表达同一类数据，
 * 合并为**单一清单**（设备卡片 + 待确认占位卡），因此这里只剩 `cards` 一个页码键；
 * `layer`／`unmatched` 两套页码随旧列表一起删除（不是漏改）。
 */
const pages = ref({ cards: 1 })

/** 某清单的窗口（`pagedRows` 单源：越界/脏页码夹回，空表也是 1 页）。 */
function pagedOf(key, rows) {
    return pagedRows(rows, pages.value[key])
}

const pagedCards = computed(() => pagedOf('cards', cards.value))

/**
 * 翻页唯一出口（与票 59 同款）：PagerNav 的前后页/页码直达/跳页都带**目标页码（1 起）**回来。
 * 这里只存状态、不另做夹取 —— 越界统一由 `pagedRows` 在下一帧渲染时夹回（条文 6）。
 */
function gotoPage(key, target) {
    pages.value = { ...pages.value, [key]: Number(target) || 1 }
}

/**
 * 复位触发器（条文 5/6）：换点位、换设备、返回第一级都把三处页码收回第 1 页
 * —— 留着就是拿 A 的窗口看 B。
 * 新鲜度/定时刷新**不动** `selection` 的这两个字段 ⇒ 不触发复位（停在第 3 页的人不会被弹回），
 * 数据变少导致的越界由 `pagedRows` 夹回最后一页。
 *
 * getter 收成**一个标量字符串**而不是数组（票 43 教训）：返回新数组的 getter 每次
 * `selection` 被替换（哪怕 pointCode/deviceCode 同值、例如重进同一张卡片）都会因引用不等
 * 而误触发复位；同值字符串才真正只在「换了谁」时变。
 */
watch(
    () => `${selection.value.pointCode}|${selection.value.deviceCode}`,
    () => {
        // 复位只回 `cards`：`layer`/`unmatched` 两套页码随双区合并一起删除（票 76）。
        pages.value = { cards: 1 }
    },
)

/** 未命中设备进详情：走同一选中入口，但**不联动镜头**（它没有上图，飞行没有目标）。 */
function selectUnmatchedDevice(row) {
    if (!row || !row.code) return
    deviceLayerStore.selectDevice(row.code, { fly: false })
}

function hoverDeviceRow(row) {
    if (!row || row.placement !== 'drawn') return
    // 票 45：聚合行 → 三维聚合符号弱提示（store 查找分组并转发服务层）；普通行 → 轻放大设备点。
    if (deviceLayerStore.nudgeOverlapRow(row)) return
    deviceLayerStore.hoverDevice(row.code)
}

function leaveDeviceRow() {
    // 离开行：清除弱提示与普通 hover（两者都幂等，安全）。
    deviceLayerStore.clearOverlapNudge()
    deviceLayerStore.hoverDevice('')
}

/**
 * 第二级的聚合分区。**只认当前这台设备那一份**：
 * 换设备时请求还没回来，这里仍是上一台的载荷 —— 若直接传下去，界面就会把 A 的档案
 * 挂在 B 的表头下。不匹配时当"没数据"传（`equipmentPanels` 会给每块分区一条失败态，
 * 分区标签照常说话），配合 `aggregateLoading` 的加载提示，不会白屏也不会错画。
 */
const aggregateMatches = computed(() => equipmentDetailMatches(sections.value.equipmentAggregate, selection.value.deviceCode))
const aggregateSection = computed(() => (aggregateMatches.value ? sections.value.equipmentAggregate : null))
const aggregateLoading = computed(() => deviceLoading.value && !aggregateMatches.value)
/** 整包失败（六块一起没数据）：此时不该逐块说「其它分区不受影响」，那话是假的。 */
const aggregateDown = computed(() => aggregateUnavailable(sections.value.equipmentAggregate))
</script>

<style scoped>
.point-detail,
.point-detail *,
.point-detail *::before,
.point-detail *::after {
    box-sizing: border-box;
}

.point-detail {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--panel-line, rgba(1, 171, 234, 0.35));
    border-radius: calc(8 * var(--u, 1px));
    /* 2026-10-23 维护者要求：点位摘要/设备详情与两侧面板**同款三停渐变**
       （top 0.8 → mid 0.5 @26% → bot 0.82，与 CockpitPanel 逐值一致，磨砂 16px 同值）。
       此前先后试过纯渐变（偏实）与 mid 单值（无层次），定稿为两侧同款渐变。 */
    background: linear-gradient(
        180deg,
        var(--panel-top, rgba(2, 9, 27, 0.28)) 0%,
        var(--panel-mid, rgba(0, 53, 156, 0.2)) 26%,
        var(--panel-bot, rgba(0, 15, 52, 0.38)) 100%
    );
    backdrop-filter: blur(16px) saturate(115%);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    box-shadow: inset 0 1px 0 rgba(1, 171, 234, 0.14), var(--shadow, 0 18px 44px rgba(0, 0, 0, 0.55));
    color: var(--text-2, #88b7e8);
    font-size: var(--fs-caption, 10.5px);
    pointer-events: auto;
}

.point-detail__head {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: calc(32 * var(--u, 1px));
    padding: 0 var(--space-2, 8px);
    border-bottom: 1px solid rgba(1, 171, 234, 0.22);
    background: linear-gradient(90deg, var(--panel-mid, rgba(0, 53, 156, 0.2)) 0%, var(--panel-bot, rgba(0, 15, 52, 0.38)) 42%, transparent 78%);
}

.point-detail__title {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: calc(10 * var(--u, 1px));
    overflow: hidden;
    color: var(--text);
    font-size: var(--fs-title, 14.5px);
    font-weight: 700;
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 0 12px rgba(1, 171, 234, 0.6);
}

.point-detail__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: calc(4 * var(--u, 1px));
    height: calc(14 * var(--u, 1px));
    transform: translateY(-50%);
    background: linear-gradient(180deg, var(--cyan-hi), var(--cyan-d, #009de9));
    box-shadow: 0 0 10px var(--cyan, #01abea);
}

.point-detail__action {
    flex: none;
    padding: 1px var(--space-2, 8px);
    border: 1px solid rgba(1, 171, 234, 0.42);
    border-radius: calc(8 * var(--u, 1px));
    background: rgba(0, 20, 72, 0.6);
    color: var(--text-2);
    font: inherit;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
}

.point-detail__action:hover,
.point-detail__action:focus-visible {
    color: var(--text-strong);
    border-color: rgba(1, 171, 234, 0.75);
    outline: none;
}

.point-detail__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-2, 8px) calc(10 * var(--u, 1px)) calc(10 * var(--u, 1px));
    /* 2026-10-13：严格只竖向滚动（横向滚动条不出现；内容防裁靠 minmax(0,·) 行网格）。 */
    overflow-y: auto;
    overflow-x: hidden;
}

.point-detail__rows {
    display: grid;
    gap: calc(4 * var(--u, 1px));
    margin: 0;
}

/* 票 46：身份两行收紧成一组（状态与计数不再挤在同一张键值表里）。 */
.point-detail__rows--identity {
    gap: calc(2 * var(--u, 1px));
}

/*
    票 46：状态卡（状态标签 + 原因）与设备计数 KPI 条。
    色键只写 token 引用（与 StatusTag/PanelBlocks 同一口径，色值只在 tokens.css 声明一份）。
*/
.point-detail__status-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: calc(5 * var(--u, 1px));
    padding: calc(4 * var(--u, 1px)) var(--space-2, 8px);
    border: 1px solid rgba(1, 171, 234, 0.24);
    border-radius: calc(8 * var(--u, 1px));
    background: var(--inset, rgba(2, 10, 20, 0.55));
}

.point-detail__status-reason {
    flex: 1 1 120px;
    min-width: 0;
    color: var(--text-2, #88b7e8);
    font-size: var(--fs-caption, 10.5px);
}

.point-detail__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(56 * var(--u, 1px)), 1fr));
    gap: calc(4 * var(--u, 1px));
    margin-top: calc(4 * var(--u, 1px));
}

.point-detail__kpi {
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: calc(3 * var(--u, 1px)) calc(2 * var(--u, 1px));
    border: 1px solid rgba(1, 171, 234, 0.2);
    border-radius: calc(8 * var(--u, 1px));
    background: rgba(0, 20, 72, 0.4);
}

.point-detail__kpi--total {
    border-color: rgba(1, 171, 234, 0.42);
}

.point-detail__kpi-value {
    font-family: var(--num, monospace);
    font-size: var(--fs-body, 13px);
    color: var(--text, #d7ecff);
}

/* 计数语义色：键来自设备词表的 tone（lv1..lv4 / point-offline），色值只在 token。 */
.point-detail__kpi-value[data-point-kpi-tone='lv1'] { color: var(--lv1, #ff3b52); }
.point-detail__kpi-value[data-point-kpi-tone='lv2'] { color: var(--lv2, #ffb020); }
.point-detail__kpi-value[data-point-kpi-tone='lv3'] { color: var(--lv3, #01abea); }
.point-detail__kpi-value[data-point-kpi-tone='lv4'] { color: var(--lv4, #27d17a); }
.point-detail__kpi-value[data-point-kpi-tone='point-offline'] { color: var(--point-offline, #5680b0); }

.point-detail__kpi-label {
    color: var(--muted, #5680b0);
    font-size: var(--fs-caption, 10.5px);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.point-detail__row {
    display: grid;
    grid-template-columns: calc(52 * var(--u, 1px)) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-2, 8px);
    padding: calc(2 * var(--u, 1px)) 0;
    border-bottom: 1px dashed rgba(1, 171, 234, 0.16);
}

.point-detail__row dt {
    color: var(--muted, #5680b0);
    letter-spacing: 0.06em;
}

.point-detail__row dd {
    margin: 0;
    color: var(--text, #d7ecff);
    word-break: break-word;
}

.point-detail__row dd.is-muted,
.is-muted {
    color: var(--muted, #5680b0);
}

.point-detail__mono {
    font-family: var(--num, monospace);
    letter-spacing: 0.04em;
}

.point-detail__num {
    color: var(--text);
    font-family: var(--num, monospace);
    font-size: var(--fs-body, 13px);
}

.point-detail__section-label {
    margin: var(--space-3, 12px) 0 var(--space-1, 4px);
    color: var(--muted, #5680b0);
    font-size: var(--fs-caption, 10.5px);
    letter-spacing: 0.08em;
}

.point-detail__cards {
    display: grid;
    gap: calc(5 * var(--u, 1px));
}

/* 设备卡片：整块可点（大屏用鼠标/触屏都够大），状态标签在右上。 */
.point-detail__card {
    display: grid;
    gap: calc(3 * var(--u, 1px));
    padding: calc(6 * var(--u, 1px)) var(--space-2, 8px);
    border: 1px solid rgba(1, 171, 234, 0.35);
    border-radius: calc(8 * var(--u, 1px));
    background: linear-gradient(180deg, rgba(0, 31, 92, 0.5), rgba(0, 15, 52, 0.7));
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s, background 0.16s, transform 0.16s;
}

.point-detail__card:hover,
.point-detail__card:focus-visible {
    border-color: rgba(1, 171, 234, 0.75);
    background: linear-gradient(180deg, rgba(0, 53, 156, 0.62), rgba(0, 15, 52, 0.8));
    outline: none;
}

.point-detail__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
}

.point-detail__card-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: var(--fs-body, 13px);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.point-detail__card-meta {
    display: flex;
    gap: var(--space-2, 8px);
    color: var(--muted, #5680b0);
    font-size: var(--fs-caption, 10.5px);
}

.point-detail__card-reason {
    color: var(--text-2, #88b7e8);
    font-size: var(--fs-caption, 10.5px);
}

.point-detail__hint {
    margin: 0;
    color: var(--muted, #5680b0);
    font-size: var(--fs-caption, 10.5px);
    letter-spacing: 0.04em;
}

/* 无地图位置的固定详情：一行如实说明（票 07 的中文原因直接透出，不换词、不省略）。 */
.point-detail__located {
    margin: 0;
    padding: calc(3 * var(--u, 1px)) var(--space-2, 8px);
    border-bottom: 1px solid rgba(1, 171, 234, 0.18);
    background: rgba(255, 176, 32, 0.08);
    color: var(--lv2, #ffb020);
    font-size: var(--fs-caption, 10.5px);
    letter-spacing: 0.04em;
}

/* 票 42：关联设备清单。保留全部设备，每行右侧标注**互斥归类**（已上图/无地图位置/模式隐藏/待确认）。 */
.point-detail__devices {
    display: grid;
    gap: calc(2 * var(--u, 1px));
    margin: 0;
    padding: 0;
    list-style: none;
}

.point-detail__device {
    display: grid;
    /* 票 44：**名称**占可伸缩的那一列（它才是会变长的自由文本），编码/状态/原因各自 auto。 */
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: baseline;
    gap: var(--space-2, 8px);
    padding: calc(2 * var(--u, 1px)) 0;
    border-bottom: 1px dashed rgba(1, 171, 234, 0.14);
}

.point-detail__device-code {
    flex: none;
    color: var(--muted, #5680b0);
}

.point-detail__device-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-2, #88b7e8);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.point-detail__device-placement {
    flex: none;
    color: var(--muted, #5680b0);
    font-size: var(--fs-caption, 10.5px);
    white-space: nowrap;
}

/* 票 44：资产降级说明（"正式图片素材未提供"等）。刻意低调 —— 地图上不该堆错误角标，
   这条只在详情里如实说一句（规格：默认地图不增加统一错误角标）。 */
.point-detail__device-asset {
    grid-column: 1 / -1;
    color: var(--muted, #5680b0);
    font-size: var(--fs-caption, 10.5px);
    opacity: 0.85;
}

/* 票 14：「另有 N 台」展开行与未命中设备。未命中仅视觉弱化、可交互（点进设备详情）。 */
.point-detail__more {
    border-bottom: 0;
}

.point-detail__more-btn {
    padding: 1px var(--space-2, 8px);
    border: 1px dashed rgba(1, 171, 234, 0.45);
    background: rgba(2, 9, 27, 0.5);
    color: var(--muted, #5680b0);
    font: inherit;
    font-size: var(--fs-caption, 10.5px);
    letter-spacing: 0.04em;
    cursor: pointer;
}

.point-detail__more-btn:hover,
.point-detail__more-btn:focus-visible {
    color: var(--text);
    border-color: rgba(1, 171, 234, 0.6);
    outline: none;
}

.point-detail__device.is-unmatched {
    opacity: 0.55;
}

.point-detail__device.is-unmatched:hover {
    opacity: 0.9;
    cursor: pointer;
}

.point-detail__overlap {
    color: var(--lv2, #ffb020);
    font-size: var(--fs-caption, 10.5px);
    white-space: nowrap;
}

/*
    票 60：清单里那层 pager 的容器不占栅格位（`display: contents`）。
    共享 PagerNav 在一页时整块不渲染，若这里是个普通 `<li>` 就会留下一条空行；
    而"一页不画控件"的判据必须只留在共享层一份，组件不再重复判 pageCount。
*/
.point-detail__pager {
    display: contents;
}

/* 设备图例与上面那条的归类文字同形，独立成一行（不挤进点位状态图例）。 */
.point-detail__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-top: calc(3 * var(--u, 1px));
    color: var(--muted, #5680b0);
    font-size: var(--fs-caption, 10.5px);
}
</style>