diff --git a/docs/统计数据口径差异分析.md b/docs/统计数据口径差异分析.md
new file mode 100644
index 0000000..125973b
--- /dev/null
+++ b/docs/统计数据口径差异分析.md
@@ -0,0 +1,202 @@
+# 设备统计页数据口径差异分析
+
+> 排查日期：2026-09-17 19:00–19:10（页面 `http://localhost:8888/#/base/data/index`，admin 账号实测）
+> 结论先行：**页面上的"设备总数 323"、"设备 (39)"、"通道 (461)"三个数字来自三个不同的统计口径，彼此本就不会相等**。323 = 相机通道 311 + 门禁设备 8 + 道闸设备 4（通道数与设备数混加）；39 = 设备表全量设备；461 = 编码/出入口两类设备名下全部通道。此外还发现在线率整数化失真、设备在线状态为 NULL 的"三不管"记录、区域排行总数与在线/离线之和不等等问题，详见下文。
+
+---
+
+## 一、实测数据快照
+
+### 1.1 页面展示值
+
+| 位置 | 展示值 |
+|---|---|
+| KPI 设备总数 | **323 台** |
+| KPI 在线设备 / 离线设备 | 83 台 / 237 台 |
+| KPI 总体在线率 | 26.00% |
+| KPI 今日告警 / 累计 | 0 条 / 6,406 条 |
+| 饼图（设备分类占比） | 监控 311、门禁 8、闸道 4（合计 323，与 KPI 自洽） |
+| 柱图（分类运行状态） | 监控 78/230、门禁 4/4、闸道 1/3（在线/离线） |
+| 区域设备排行 TOP5 | 教学楼 69、南门 15、办公楼 12、三营 12、1连 11（合计 119） |
+| 明细表 Tab | **设备 (39)**、**通道 (461)** |
+| 在线率趋势（近 7 日） | 仅 5 个数据点（09-11~09-14、09-17），全部 26 |
+
+### 1.2 接口原始值（浏览器内直接调用后端）
+
+`GET /admin/total/plan/total-device`（KPI 与饼图来源）：
+
+| 分类 | total | online | offline | onlineRate |
+|---|---|---|---|---|
+| 监控设备 camera | 311 | 78 | 230 | 25 |
+| 门禁设备 door | 8 | 4 | 4 | 50 |
+| 闸道设备 gate | 4 | 1 | 3 | 25 |
+| 合计 total | 323 | 83 | 237 | 26 |
+
+`POST /admin/deviceManage/page`（设备 Tab 来源）：**total = 39**，分类分布：
+
+| device_category | 台数 | 在线/离线/状态NULL |
+|---|---|---|
+| 1 编码设备 | 21 | 7 / 12 / **2（is_online 为 NULL）** |
+| 5 | 4 | 4 / 0 / 0 |
+| 8 门禁设备 | 8 | 4 / 4 / 0 |
+| 35 出入口(道闸) | 4 | 1 / 3 / 0 |
+| 93 | 1 | 0 / 1 / 0 |
+| 992 | 1 | 0 / 1 / 0 |
+
+`POST /admin/deviceChannel/cameraPage`（通道 Tab 来源）：**total = 461**（在线 139 / 离线 319）。
+
+全量通道 `GET /admin/deviceChannel/page`：**total = 481**，按"所属设备分类 × 通道 unit_type"矩阵：
+
+| 设备分类 \ unit_type | 1(相机) | 3 | 4 | 7 | 14 | 16 | 小计 |
+|---|---|---|---|---|---|---|---|
+| 1 编码设备（21 台） | 295 | 120 | 34 | – | – | – | 449 |
+| 5（4 台） | 4 | – | – | – | – | – | 4 |
+| 8 门禁（8 台） | 8 | – | – | 8 | – | – | 16 |
+| 35 道闸（4 台） | 4 | – | – | – | 4 | 4 | 12 |
+| 93 / 992 | – | – | – | – | – | – | 0 |
+| **合计** | **311** | 120 | 34 | 8 | 4 | 4 | **481** |
+
+---
+
+## 二、为什么对不上：逐条解释
+
+### 2.1 「设备总数 323」vs「设备 (39)」——统计对象完全不同
+
+323 的构成（`TotalServiceImpl.totalDevice()`，jhkj-upms-biz `service/impl/total/TotalServiceImpl.java:168-253`）：
+
+```
+323 = 311（"监控设备"）+ 8（门禁设备）+ 4（道闸设备）
+```
+
+关键在于 **311 不是设备数，是通道数**。两条统计 SQL（`DeviceManageMapper.xml`）：
+
+- 门禁/道闸走 `countByType`（xml:108）：按 `device_manage.device_category`（8/35）分组数**设备**；
+- 监控走 `countChannelByUnitType`（xml:137）：`device_channel inner join device_manage`，按 **`device_channel.unit_type = '1'`** 分组数**通道**，且**不限制设备分类**。
+
+矩阵证实：311 = 编码设备的 295 条 + 分类5 设备的 4 条 + **门禁设备的 8 条** + **道闸设备的 4 条** unit_type=1 通道。
+
+所以"设备总数"实际是「全库相机类通道数 + 门禁设备数 + 道闸设备数」的混合求和，并且**门禁/道闸设备的相机通道同时被计入"监控 311"和各自的设备数（8/4），存在交叉重复**。
+
+而设备 Tab 的 39 是 `deviceManage/page` 对 `device_manage` 表全量分页（whereA 仅 `del_flag='0'`，`DeviceManageMapper.xml:33`），覆盖 6 种分类，其中**分类 5（4 台）、93、992 根本不在 KPI 统计范围内**。两个数字从定义上就不可能相等。
+
+### 2.2 「监控 311」vs「通道 (461)」——两个交叉的通道集合
+
+- 通道 Tab（`deviceChannel/cameraPage`）= `deviceCategoryList = ["1","35"]` 的设备名下**全部** 481 通道中的 461 条（449+12，`DhConstant.CAMERA_CATEGORY_LIST`，Controller 强制注入）；
+- KPI 监控 = 全部分类设备的 **unit_type=1** 通道 311 条。
+
+两集合的交集是 299（编码设备的 295 + 道闸设备的 4）：通道 Tab 里多出 162 条非相机通道（unit_type 3/4/14/16），监控 311 里多出 12 条属于门禁（8）/分类5（4）设备的相机通道——这些设备的通道**不会出现在通道 Tab**（cameraPage 限定 1/35 分类设备）。
+
+在线数同理：KPI 在线 83 中的 78 是"unit_type=1 通道中所属设备在线的条数"；通道 Tab 在线 139 是"1/35 分类设备的通道中所属设备在线的条数"。集合不同，数字自然不同。
+
+### 2.3 下钻点击数字与结果不一致——口径差异的直接体验
+
+- 点击 KPI「在线设备 83」→ 设备 Tab 筛 `isOnline='1'` → 实际命中 **16 台**设备（7+4+4+1）：83 里混着 78 条通道计数；
+- 点击饼图「监控设备 311」→ 设备 Tab 筛 `deviceCategory='1'` → 实际命中 **21 台**设备：311 是通道数、21 是设备数；
+- 点击 KPI「设备总数 323」→ 清空筛选 → **39 台**：323 本身是混合口径。
+
+这是前端下钻功能"正确执行了筛选"，但卡片数字与列表口径不匹配造成的困惑。
+
+### 2.4 在线/离线之和 ≠ 总数——`is_online` 为 NULL 的设备
+
+`countChannelByUnitType` 中 total=`count(*)`，online/offline=`sum(if(is_online='0'/'1'))`。当设备 `is_online` 为 NULL 时既不进 online 也不进 offline：
+
+- 监控：78+230=308 ≠ 311，差 3 条（属于 2 台 is_online=NULL 的编码设备）；
+- 通道 Tab：139+319=458 ≠ 461，同样差 3 条；
+- 设备表实测有 2 台分类 1 设备 `is_online=NULL`；设备明细表在线状态列把 NULL 渲染为"离线"（前端 `String(row.isOnline)==='1'` 判断），与统计口径又差一层。
+
+### 2.5 在线率 26.00% 失真——先除后乘的精度丢失
+
+`TotalServiceImpl.java:244`（分类内 181/194/212 同）：
+
+```java
+online.divide(total, 2, HALF_UP).multiply(100)   // 83/323=0.2570 → 取2位=0.26 → 26.00
+```
+
+真实值 83/323 = **25.70%**，因先保留 2 位小数再乘 100，所有在线率被整数化（监控 25.08%→25%、门禁 50%、道闸 25%）。趋势图 26% 同源。
+
+### 2.6 区域排行总数 ≠ 在线 + 离线，且与其他数字都不可比
+
+`cameraAreaTotalDevice`（`DeviceManageMapper.xml:152`）：
+
+- `totalCount = count(area_house_device.id)` —— 数的是**安装点位记录**，安装记录若未关联到有效通道/设备（left join 链断裂），只计入总数：教学楼 69 vs 41+4=45、南门 15 vs 0+11=11；
+- 同一通道安装到多个楼栋会重复计数；
+- 只统计"已安装到区域房屋"的通道：TOP5 合计 119，与 461/481/311 均无对齐关系；未安装通道（明细里大量"未安装"）完全不进区域统计。
+
+### 2.7 在线率趋势缺点
+
+近 7 日只有 5 个点（09-15、09-16 缺失）。趋势来自 `device_online` 快照表（`deviceOfflineRate → deviceOnlineMapper.countByTime`），这两天无快照记录，前端未补点。
+
+### 2.8 告警数据自洽（非口径问题）
+
+今日 0、近 7 日趋势全 0、最新 6 条告警时间为 2026-08-31（云存储设备）——累计 6406 条均为历史数据，当日无新增，三个数字相互一致，无问题。
+
+---
+
+## 三、口径速查表
+
+| 页面指标 | 来源接口 | 统计对象 | 实测值 |
+|---|---|---|---|
+| KPI 设备总数 | `GET /total/plan/total-device` | unit_type=1 通道(311) + 分类8设备(8) + 分类35设备(4) | 323 |
+| KPI 在线/离线 | 同上求和 | 混合口径，NULL 状态不计入 | 83 / 237 |
+| KPI 在线率 | 同上计算 | 先除(保留2位)后乘100，整数化 | 26(实际25.70) |
+| 饼图·监控 | total-device.camera | 全部分类设备的 unit_type=1 通道 | 311 |
+| 饼图·门禁/道闸 | total-device.door/gate | 分类 8 / 35 设备 | 8 / 4 |
+| 设备 Tab | `POST /deviceManage/page` | device_manage 全量（6 种分类） | 39 |
+| 通道 Tab | `POST /deviceChannel/cameraPage` | 分类 1/35 设备的全部通道 | 461 |
+| 区域排行 | `GET /total/plan/camera-area-total-device` | area_house_device 安装记录（可重复） | TOP5 合计 119 |
+| 在线率趋势 | `POST /total/plan/device-offline-rate` | device_online 按日快照 | 5 点，均 26 |
+
+---
+
+## 四、对齐建议（未实施，供决策）
+
+1. **统一"设备"口径（根本解法）**：`totalDevice()` 的监控改为按 `device_category='1'` 数设备（与门禁/道闸一致），需要通道规模时单独提供"监控通道 N 路"指标；这样 KPI 三分类相加 = 设备 Tab 中分类 1/8/35 的设备数，下钻点击数字与结果一致。
+2. **明确未覆盖分类**：分类 5/93/992 要么纳入统计（并入总数或单列"其他"），要么在页面注明"统计范围为监控/门禁/道闸三类"。
+3. **消除交叉重复**：监控通道统计限定设备分类（如仅编码设备），避免门禁/道闸设备的相机通道同时计入两个分类。
+4. **修正在线率精度**：改为 `online.multiply(100).divide(total, 2, HALF_UP)`（先乘后除）。
+5. **处理 `is_online` NULL**：统计 SQL 与列表渲染统一口径（NULL 计入离线或单列"未知"，二选一）。
+6. **区域排行**：`count(distinct 有效通道)` 替代 `count(hd.id)`，并过滤 join 断裂记录，使 总数 = 在线 + 离线。
+7. **趋势补点**：前端对缺失日期补 0 或空值断点提示，后端可补齐每日快照。
+
+---
+
+## 五、修复记录（2026-09-17 已实施并验证）
+
+按第四节建议完成统一，实测页面数据：
+
+| 指标 | 修复前 | 修复后 |
+|---|---|---|
+| KPI 设备总数 | 323（通道+设备混加） | **39**（= 设备 Tab 总数） |
+| 在线/离线 | 83/237（含 3 条 NULL 不计） | **16/23**（NULL 归离线，16+23=39） |
+| 总体在线率 | 26.00%（整数化失真） | **41.03%**（先乘后除） |
+| 饼图 | 监控311（通道口径） | 监控21/门禁8/道闸4/**其他6**，新增"监控通道 295 路"副指标 |
+| 区域排行 | 教学楼 69（重复计数） | 教学楼 28，每行 总=在线+离线 |
+| 趋势图 | 缺 09-15/16 两点 | 按日期序列补空点，缺失日断点显示 |
+
+改动清单：后端 `TotalServiceImpl`（设备口径+calcOnlineRate 先乘后除）、`TotalDeviceVo`（+other/channel）、`DeviceOnlineServiceImpl`（快照总量含其他分类）、`DeviceManageMapper.xml`（NULL 归离线、区域排行 count(distinct channel) 重写）、`DeviceCameraAreaCountVo`（+areaId）；前端 `deviceStatistics.ts`（类型）、`base/data/index.vue`（饼图含其他/监控通道副指标/趋势补点）。
+
+已知事项：
+- 历史趋势快照仍是旧口径（25.7%），自修复后每日快照起写入新口径（41.03%），趋势图会出现一次台阶，属预期；
+- "其他设备"饼图扇区无下钻（聚合分类无单一 deviceCategory 值），点击不生效属预期。
+
+补充优化（同日）：
+- 趋势图"今天"的数据点以实时统计为准（快照每日定时写入、按天覆盖），避免 header 实时值与图上当天快照不一致；摘要改用"当前在线率"；
+- 分类运行状态的 tooltip 与摘要文案补充各类在线率（监控/门禁/道闸/其他）；
+- 手动触发过一次 `GET /device-online/task/device-onlone-total` 将当天旧口径快照（25.7%）覆盖为新口径（41.03%）。
+
+快照刷新机制调整（同日晚，替代最初误加的 upms 内 @Scheduled 方案——**全工程调度统一在 jhkj-daemon-quartz 微服务，不得在业务服务里再加定时任务**）：
+- 新增 `DeviceOnlineService.refreshTodaySnapshotQuietly()`（静默吞异常版 `taskDeviceOnloneTotal`）；
+- 在 `ThirdDhDeviceServiceImpl` 的设备/通道变更入口尾部触发：`syncDhDevice`、`syncDhDeviceChannel`、`delDevice`、`syncPlatform`、`deleteLocalExtraDevices`、`syncMissingChannels`、`deleteLocalExtraChannels`（`syncMissingDevices` 内部经 `syncDhDeviceChannel` 已覆盖）；
+- 大华"设备管理 crud"事件回调（deviceManageCrudCallback）路径全部经由上述入口，天然覆盖——即设备/通道同步或事件发生时，当天快照随之刷新，趋势"当天"点与实时偏差缩小到"距上次同步"；外部调度漏跑导致断点的风险仅剩"当天完全无同步且无事件"；
+- 前端趋势折线 `connectNulls: true`：历史缺失日视觉连续（悬停仍提示"无快照"）。
+
+## 附：关键代码位置
+
+| 逻辑 | 文件 |
+|---|---|
+| 设备总览统计 | `jh-military-service/jhkj-upms/jhkj-upms-biz/.../service/impl/total/TotalServiceImpl.java:168-253` |
+| 分类设备统计 SQL | `.../resources/mapper/device/DeviceManageMapper.xml` `countByType`(108)、`countChannelByUnitType`(137) |
+| 区域统计 SQL | 同上 `cameraAreaTotalDevice`(152) |
+| 设备分页 | 同上 `pageList`(73)/`whereA`(33)；Controller `DeviceManageController.java:67-71` |
+| 通道分页（Tab） | `DeviceChannelController.java:90-97`（强制 `CAMERA_CATEGORY_LIST=["1","35"]`，`DhConstant.java:7`） |
+| 在线率趋势 | `TotalServiceImpl.deviceOfflineRate`(259) → `deviceOnlineMapper.countByTime` |
diff --git a/src/api/device/deviceStatistics.ts b/src/api/device/deviceStatistics.ts
index 011785e..932495a 100644
--- a/src/api/device/deviceStatistics.ts
+++ b/src/api/device/deviceStatistics.ts
@@ -13,13 +13,15 @@ export interface DeviceStatusDetail {
 }
 
 /**
- * 设备总览统计，分别包含总量、监控、门禁和道闸数据。
+ * 设备总览统计，分别包含总量、监控、门禁、道闸、其他分类和监控通道数据。
  */
 export interface DeviceTotalData {
   total: DeviceStatusDetail;
   camera: DeviceStatusDetail;
   door: DeviceStatusDetail;
   gate: DeviceStatusDetail;
+  other?: DeviceStatusDetail;
+  channel?: DeviceStatusDetail;
 }
 
 /**
@@ -34,6 +36,7 @@ export interface DeviceOnlineTrendItem {
  * 区域设备数量统计。
  */
 export interface AreaDeviceStatisticsItem {
+  areaId?: string;
   areaName: string;
   totalCount: number | string;
   onlineCount: number | string;
diff --git a/src/components/AccessDirection/Legend.vue b/src/components/AccessDirection/Legend.vue
new file mode 100644
index 0000000..47504ef
--- /dev/null
+++ b/src/components/AccessDirection/Legend.vue
@@ -0,0 +1,11 @@
+<template>
+	<div class="access-direction-legend" role="group" aria-label="通行方向行底色说明">
+		<span class="access-direction-legend__title">通行方向</span>
+		<span class="access-direction-legend__item access-direction-legend__item--in">
+			<span class="access-direction-legend__swatch" aria-hidden="true" />进入
+		</span>
+		<span class="access-direction-legend__item access-direction-legend__item--out">
+			<span class="access-direction-legend__swatch" aria-hidden="true" />外出
+		</span>
+	</div>
+</template>
diff --git a/src/components/AccessDirection/Tag.vue b/src/components/AccessDirection/Tag.vue
new file mode 100644
index 0000000..98ae297
--- /dev/null
+++ b/src/components/AccessDirection/Tag.vue
@@ -0,0 +1,33 @@
+<template>
+	<span class="access-direction-tag" :class="`access-direction-tag--${direction}`">
+		<svg v-if="direction !== 'neutral'" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+			<path v-if="direction === 'in'" d="M12 4 4 12M4 5v7h7" />
+			<path v-else d="m4 12 8-8M5 4h7v7" />
+		</svg>
+		{{ directionLabel }}
+	</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getAccessDirection, type AccessRecordKind } from '/@/utils/accessDirection';
+
+const props = withDefaults(
+	defineProps<{
+		kind: AccessRecordKind;
+		value?: string | number | null;
+		label?: string;
+		options?: { value: string | number; label: string }[];
+	}>(),
+	{ options: () => [] }
+);
+
+const direction = computed(() => getAccessDirection(props.value, props.kind));
+const directionLabel = computed(() => {
+	const option = props.options.find((item) => String(item.value) === String(props.value));
+	if (props.label || option?.label) return props.label || option?.label;
+	if (direction.value === 'in') return props.kind === 'door' ? '进门' : '进入';
+	if (direction.value === 'out') return props.kind === 'door' ? '出门' : '外出';
+	return props.kind === 'door' && String(props.value) === '3' ? '进出门' : '未知方向';
+});
+</script>
diff --git a/src/components/rtsp-plugin-video/lib/videoPlayer.js b/src/components/rtsp-plugin-video/lib/videoPlayer.js
index 75e9f85..e433455 100644
--- a/src/components/rtsp-plugin-video/lib/videoPlayer.js
+++ b/src/components/rtsp-plugin-video/lib/videoPlayer.js
@@ -418,6 +418,7 @@
             let _isSupport = isSupport()
             for (let key in window.dhPlayerControl.videoList) {
                 let currentThis = window.dhPlayerControl.videoList[key]
+                if (currentThis.disposed) continue
                 currentThis.send({
                     method: 'common.version',
                     info: {},
@@ -430,12 +431,15 @@
                             let interval = setInterval(() => {
                                 if (window.dhPlayerControl.loginFlag !== "LOGIN_PENDING") {
                                     clearInterval(interval)
+                                    currentThis.loginWaitTimer = null
                                     resolve()
                                 }
 
                             }, 300)
+                            currentThis.loginWaitTimer = interval
                         })
                         p.then(() => {
+                            if (currentThis.disposed) return
                             currentThis.create()
                             window.isResetConnect = currentThis.setting.isResetConnect
                         })
@@ -1403,6 +1407,8 @@
         },
         //发送消息
         send: function (option, callBack) {
+            // dispose 后只允许销毁命令，拦住晚到的播放、重连和位置刷新回调。
+            if (this.disposed && option.method !== 'window.destroy') return
             option.session = window.dhPlayerControl.wsSession
             option.id = window.dhPlayerControl.wsConnectCount++
             if (option.info) {
@@ -1425,6 +1431,7 @@
 
         // 创建视频窗口
         create: function () {
+            if (this.disposed) return
             var zoom = detectZoom()
             var rect = getRect.call(this)
             for (let i in rect) {
@@ -1447,6 +1454,7 @@
             var that = this
             this.setLanguage() // 设置语言
             this.destroy().then(() => {
+                if (this.disposed) return
                 this.send(
                     {
                         method: 'window.create',
@@ -1454,11 +1462,18 @@
                     },
                     {
                         onSuccess: function (data) {
-                            that.status = "created"
                             let dom = document.querySelector(`#${that.setting.videoId}`)
-                            if (!dom) {
+                            // 创建回包可能晚于卸载；此时不能丢弃句柄，也不能覆盖同 ID 的新实例。
+                            if (that.disposed || !dom || window.dhPlayerControl.videoList[that.setting.videoId] !== that) {
+                                if (data.data && typeof data.data.hwnd === 'number') {
+                                    that.send({
+                                        method: 'window.destroy',
+                                        info: { hwnd: data.data.hwnd, isRefresh: false }
+                                    })
+                                }
                                 return
                             }
+                            that.status = "created"
                             if (data.data && typeof data.data.hwnd === 'number') {
                                 var hwnd = data.data.hwnd
                                 console.log(`${[0, 2].includes(that.setting.windowType) ? '实时预览窗口' : '录像回放窗口'}创建成功 hwnd: ${hwnd}\n插件版本: ${window.dhPlayerControl.DHPlayerVersion}`);
@@ -1502,12 +1517,13 @@
                             }
                         },
                         onError: function () {
+                            if (that.disposed) return
                             // 断开连接
                             socketClose();
                             // 重连
-                            let socketTimer = setTimeout(() => {
-                                socketOpen();
-                                clearTimeout(socketTimer)
+                            that.reconnectTimer = setTimeout(() => {
+                                if (!that.disposed) socketOpen();
+                                clearTimeout(that.reconnectTimer)
                             }, 3000)
                             // that.setting.createError && that.setting.createError({
                             //     code: 1006,
@@ -1572,6 +1588,7 @@
         },
         //刷新窗口位置
         handleAdjust: function () {
+            if (this.disposed) return
             var _this = this
             // 每帧执行一次，减少DHplayer延时
             !this.setting.stopRefresh && this.changePosition()
@@ -1640,6 +1657,44 @@
             })
         },
 
+        /**
+         * 终止当前实例，用于组件卸载。destroy 仍供 create 内部重建使用。
+         * 直接发送当前句柄的销毁命令，不等待原生回包、不关闭其他播放器共享的 WebSocket。
+         */
+        dispose: function () {
+            if (this.disposed) return
+            const hwnd = this.setting.hwnd
+            try {
+                this.hide()
+            } finally {
+                this.disposed = true
+                this.status = 'disposed'
+                this.setting.stopRefresh = true
+                clearTimeout(this.setting.socketTimer)
+                clearTimeout(this.reconnectTimer)
+                clearTimeout(this.setting.notifyrealmonitorTimeout)
+                clearInterval(this.loginWaitTimer)
+                window.cancelAnimationFrame(this.setting.refreshTimer)
+                document.removeEventListener('click', this.setTopBind)
+                window.removeEventListener('beforeunload', this.onbeforeunloadBind)
+                document.removeEventListener('visibilitychange', this.visibilitychangeBind, true)
+                try {
+                    if (typeof hwnd === 'number') {
+                        this.send({ method: 'window.destroy', info: { hwnd, isRefresh: false } })
+                    }
+                } finally {
+                    if (window.dhPlayerControl.videoList[this.setting.videoId] === this) {
+                        delete window.dhPlayerControl.videoList[this.setting.videoId]
+                    }
+                    if (window.dhPlayerControl.hwndList[hwnd] === this.setting.videoId) {
+                        delete window.dhPlayerControl.hwndList[hwnd]
+                    }
+                    this.setting.hwnd = ''
+                    this.setting.channelList = []
+                }
+            }
+        },
+
         // 终止进程
         killDHPlayer: function () {
             this.send({
@@ -2346,6 +2401,7 @@
         },
         //显示视频
         show: function () {
+            if (this.disposed || this.setting.visible === false) return
             var that = this
             if (typeof this.setting.hwnd !== 'number' || this.setting.show) {
                 return
@@ -2777,6 +2833,7 @@
             }
         },
         initPlayer: function () {
+            if (this.disposed) return
             let hwnd = ''
             if (window.dhPlayerControl.videoList[this.setting.videoId]) {
                 hwnd = window.dhPlayerControl.videoList[this.setting.videoId].setting.hwnd
diff --git a/src/components/rtsp-plugin-video/video-plugin.vue b/src/components/rtsp-plugin-video/video-plugin.vue
index b7c5041..e30eeeb 100644
--- a/src/components/rtsp-plugin-video/video-plugin.vue
+++ b/src/components/rtsp-plugin-video/video-plugin.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="video-container" :class="{ 'preview-mode': currentWindowType === 0 }">
     <div v-if="loading" class="loading-mask">正在初始化...</div>
-    <div id="video-plugin-preview-0" class="pane" />
-    <div id="video-plugin-preview-3" class="pane" />
-    <div id="video-plugin-preview-7" class="pane" />
+    <div :id="getContainerId(0)" class="pane" />
+    <div :id="getContainerId(3)" class="pane" />
+    <div :id="getContainerId(7)" class="pane" />
     <div v-if="pageTotal > 1 && showBar && currentWindowType != 0" style="width: 100%; height: 40px;"></div>
     <div v-if="pageTotal > 1 && showBar" :style="videoPageStyle" class="video-container-page">
       <el-pagination class="video-pager" :current-page="pageCurrent" :page-size="pageSize" :total="pageTotal"
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, computed, defineEmits } from "vue"
+import { onMounted, onBeforeUnmount, onActivated, onDeactivated, ref, reactive, computed, watch, nextTick, getCurrentInstance, defineAsyncComponent } from "vue"
 import { ElMessage } from "element-plus";
 import dayjs from "dayjs"
 
@@ -34,16 +34,21 @@ const TAG = "|视频预览|"
 
 let VIDEO_PLAYER = null
 const currentWindowType = ref(null)
-let isReady = false
-/** @type {Array<() => void>} */
-let readyQueue = []
+const instanceId = getCurrentInstance().uid
+let generation = 0
+let isUnmounted = false
+let isActivated = true
+let requestedVisible = true
 let lastRealRequest = null
 let lastPlaybackRequest = null
 const realFallbackAttempted = new Set()
 const players = new Map()
 const isReadyByType = new Map()
-const readyWaitersByType = new Map()
 const initPromisesByType = new Map()
+const initResolversByType = new Map()
+const readyTimers = new Set()
+const closingPlayers = new Map()
+let pendingClose = Promise.resolve()
 let latestRealToken = 0
 let latestPlaybackToken = 0
 const loading = ref(false)
@@ -105,20 +110,12 @@ function onCurrentChange(val) {
   })
 }
 
-function waitForReady(type = props.windowType) {
-  return new Promise((resolve) => {
-    if (isReadyByType.get(type)) {
-      resolve()
-      return
-    }
-    const arr = readyWaitersByType.get(type) || []
-    arr.push(resolve)
-    readyWaitersByType.set(type, arr)
-  })
+function canUsePlayer() {
+  return !isUnmounted && isActivated && props.active
 }
 
 function getContainerId(type) {
-  return `video-plugin-preview-${type}`
+  return `video-plugin-${instanceId}-${type}`
 }
 
 function getDivisionByCount(count) {
@@ -145,14 +142,14 @@ function clampByDivision(list) {
   return list
 }
 
-function applyDivisionByCount(count) {
+function applyDivisionByCount(count, player = VIDEO_PLAYER) {
   if (!props.autoApplyDivision) return
-  if (!VIDEO_PLAYER?.changeDivision) return
+  if (!player?.changeDivision) return
   const nextDivision = getDivisionByCount(count)
-  const currentDivision = Number(VIDEO_PLAYER?.setting?.division)
+  const currentDivision = Number(player?.setting?.division)
   pageSize.value = nextDivision
   if (currentDivision === nextDivision) return
-  VIDEO_PLAYER.changeDivision(nextDivision)
+  player.changeDivision(nextDivision)
 }
 
 function getRealFallbackKey(info) {
@@ -193,20 +190,29 @@ function buildPlaybackSignature(list) {
   }).join(";")
 }
 
-/**
- * 清空就绪队列并执行
- */
-function flushReadyQueue() {
-  const tasks = readyQueue.splice(0)
-  tasks.forEach((fn) => {
-    try {
-      fn()
-    } catch (e) {
-      console.log(TAG, "就绪队列任务执行失败,err:", e)
-    }
+function activatePlayer(type, player) {
+  VIDEO_PLAYER = player
+  currentWindowType.value = type
+  setActiveContainer(type)
+  players.forEach((item, itemType) => {
+    const visible = itemType === type && canUsePlayer() && requestedVisible && !document.hidden
+    if (item.setting) item.setting.visible = visible
+    if (visible) item.show?.()
+    else item.hide?.()
   })
 }
 
+function disposePlayer(player) {
+  if (!player) return
+  try { player.hide?.() } catch (e) { console.log(TAG, "隐藏播放器失败,err:", e) }
+  try {
+    const result = player.dispose ? player.dispose() : player.destroy?.()
+    Promise.resolve(result).catch((e) => console.log(TAG, "销毁播放器失败,err:", e))
+  } catch (e) {
+    console.log(TAG, "销毁播放器失败,err:", e)
+  }
+}
+
 /**
  * 登录信息
  * @typedef {Object} LoginInfo
@@ -245,6 +251,8 @@ function flushReadyQueue() {
  * - 提供登录信息与播放器基础参数，支持父组件通过 ref 调用预览与回放方法
  */
 const props = defineProps({
+  /** 弹窗在离场动画结束前就会停用播放器，阻止晚到的查询重新开流。 */
+  active: { type: Boolean, default: true },
   /** 是否展示云台 */
   visibleYt: { type: Boolean, default: true },
   /** 播放器类型：0-实时预览，3-录像回放，7-录像回放（支持倒放） */
@@ -269,38 +277,56 @@ const props = defineProps({
  * 初始化播放器
  * @param {0|3|7} [type=props.windowType] 播放器类型（0预览/3回放/7回放支持倒放）
  */
-async function initVideoPlayer(type = props.windowType) {
-  if (players.has(type)) {
-    VIDEO_PLAYER = players.get(type)
-    currentWindowType.value = type
-    isReady = !!isReadyByType.get(type)
-    setActiveContainer(type)
-    if (isReady) flushReadyQueue()
-    return
+function initVideoPlayer(type = props.windowType) {
+  if (!canUsePlayer()) return Promise.resolve(null)
+  currentWindowType.value = type
+  setActiveContainer(type)
+  players.forEach((item, itemType) => {
+    if (itemType !== type) {
+      if (item.setting) item.setting.visible = false
+      item.hide?.()
+    }
+  })
+  if (players.has(type) && isReadyByType.get(type)) {
+    const player = players.get(type)
+    activatePlayer(type, player)
+    return Promise.resolve(player)
   }
   if (initPromisesByType.get(type)) {
     return initPromisesByType.get(type)
   }
+  const myGeneration = generation
+  let player = null
+  let failed = false
+  let resolveInit
+  const pending = new Promise((resolve) => { resolveInit = resolve })
+  // 必须在查询配置之前占位，避免同时调用时创建出多个原生窗口。
+  initPromisesByType.set(type, pending)
+  const settle = (value) => {
+    if (initPromisesByType.get(type) === pending) {
+      initPromisesByType.delete(type)
+      initResolversByType.delete(type)
+    }
+    resolveInit(value)
+  }
+  initResolversByType.set(type, settle)
+  const isCurrent = () => canUsePlayer() && generation === myGeneration && !failed
   loading.value = true
-  // 查询配置
-  const { data: setting, code: settingCode } = await settingApi.getObj()
-  if (settingCode != 0) {
-    ElMessage.error("查询配置失败")
-    loading.value = false
-    return Promise.resolve()
-  }
-  const dhIccSetting = setting.dhIccSetting
-  try {
-    // 若已有缓存实例，直接复用并切换容器
-  } catch (e) {
-    console.log(TAG, "旧播放器销毁失败,err:", e)
-  }
-  isReady = false
-  isReadyByType.set(type, false)
-  setActiveContainer(type)
-  const p = new Promise((resolve) => {
-    VIDEO_PLAYER = new window.VideoPlayer({
+  const initialize = async () => {
+    const { data: setting, code: settingCode } = await settingApi.getObj()
+    if (!isCurrent()) return settle(null)
+    if (settingCode != 0 || !setting?.dhIccSetting) {
+      ElMessage.error("查询配置失败")
+      loading.value = false
+      return settle(null)
+    }
+    const dhIccSetting = setting.dhIccSetting
+    await nextTick()
+    if (!isCurrent()) return settle(null)
+    isReadyByType.set(type, false)
+    player = new window.VideoPlayer({
       videoId: getContainerId(type),
+      visible: currentWindowType.value === type && requestedVisible && !document.hidden,
       // 播放器类型：0-实时预览，3-录像回放，7-录像回放（支持倒放）
       windowType: type,
       // zh-中文 en-英文
@@ -333,31 +359,34 @@ async function initVideoPlayer(type = props.windowType) {
       parentIframeShieldClass: [],
       // 创建播放器成功回调
       createSuccess: (versionInfo) => {
+        if (!isCurrent()) return
         // 该回调触发后，我们可以进行实时预览/录像回放等操作
         console.log(TAG, "创建播放器成功,versionInfo:", versionInfo)
-        isReady = true
         isReadyByType.set(type, true)
-        setTimeout(() => {
-          flushReadyQueue()
-          const waiters = readyWaitersByType.get(type) || []
-          waiters.forEach((fn) => {
-            try { fn() } catch (_) { }
-          })
-          readyWaitersByType.delete(type)
+        const timer = setTimeout(() => {
+          readyTimers.delete(timer)
+          if (!isCurrent()) return settle(null)
+          if (currentWindowType.value === type) activatePlayer(type, player)
+          else player.hide?.()
           loading.value = false
-          resolve(null)
+          settle(player)
         }, 500)
+        readyTimers.add(timer)
       },
       // 创建播放器失败回调
       createError: (err) => {
+        if (!isCurrent()) return
+        failed = true
         console.log(TAG, "创建播放器失败,err:", err)
-        isReady = false
         isReadyByType.set(type, false)
+        if (players.get(type) === player) players.delete(type)
+        if (VIDEO_PLAYER === player) VIDEO_PLAYER = null
+        disposePlayer(player)
         if ([1001].includes(err.code)) {
           ElMessage.error(err.message)
         }
         loading.value = false
-        resolve(null)
+        settle(null)
       },
       // 插件公共回调
       dhPlayerMessage: (info, err) => {
@@ -371,6 +400,7 @@ async function initVideoPlayer(type = props.windowType) {
       },
       // 实时预览失败回调
       realError: (info, err) => {
+        if (!isCurrent() || players.get(type) !== player || currentWindowType.value !== 0 || !lastRealRequest) return
         console.log(TAG, "实时预览失败,info:", info, "err:", err)
         if ([204, 408, 10705].includes(err.code)) {
           try {
@@ -392,7 +422,7 @@ async function initVideoPlayer(type = props.windowType) {
             nextList[index] = fallbackItem
             lastRealRequest = nextList
             console.log(TAG, "辅码流不可用,自动切换主码流重试", fallbackItem)
-            VIDEO_PLAYER.startReal([fallbackItem])
+            player.startReal([fallbackItem])
           } catch (e) {
             console.log(TAG, "自动切换主码流失败,err:", e)
           }
@@ -420,23 +450,27 @@ async function initVideoPlayer(type = props.windowType) {
       },
       // 抓图成功回调
       snapshotSuccess: ({ base64Url, path }, info) => {
+        if (!isCurrent()) return
         console.log(TAG, "抓图成功,base64Url:", base64Url, "path:", path, "info:", info)
         // 可选：保存图片到本地（演示示例）
         saveSnapshot(base64Url, `${info.channelName}-抓图-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.jpg`)
       },
       // 录制视频成功回调
       videoDownloadSuccess: (path, info) => {
+        if (!isCurrent()) return
         console.log(TAG, "录制视频成功,path:", path, "info:", info)
         // 可选：保存视频到本地（演示示例）
         saveVideo(path, `${info.channelName}-录像-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.mp4`)
       },
       // 关闭视频窗口回调
       closeWindowSuccess: ({ isAll, snum, channelList }) => {
+        if (!isCurrent() || VIDEO_PLAYER !== player) return
         console.log(TAG, "关闭视频窗口,isAll:", isAll, "snum:", snum, "channelList:", channelList)
         emitSetting()
       },
       // 鼠标单击窗口回调
       clickWindow: (snum) => {
+        if (!isCurrent() || VIDEO_PLAYER !== player) return
         console.log(TAG, "鼠标单击窗口,snum:", snum)
         currentSnum = snum
         emitSetting()
@@ -452,35 +486,33 @@ async function initVideoPlayer(type = props.windowType) {
       },
       // rtsp 流下载录像成功回调
       downloadRecordSuccess: (info) => {
+        if (!isCurrent()) return
         console.log(TAG, "RTSP录像下载成功,info:", info)
         ElMessage.success(info.message)
       },
       // rtsp 流下载录像失败回调
       downloadRecordError: (info, err) => {
+        if (!isCurrent()) return
         console.log(TAG, "RTSP录像下载失败,info:", info, "err:", err)
         ElMessage.error("RTSP录像下载失败")
       }
     })
-    currentWindowType.value = type
-    players.set(type, VIDEO_PLAYER)
+    if (!isCurrent()) {
+      disposePlayer(player)
+      return settle(null)
+    }
+    players.set(type, player)
+    if (currentWindowType.value === type) VIDEO_PLAYER = player
     console.log(TAG, "播放器已初始化,windowType:", type)
-  })
-  initPromisesByType.set(type, p)
-  await p.finally(() => initPromisesByType.delete(type))
-}
-
-/**
- * 确保播放器类型与目标一致，不一致则重新创建
- * @param {0|3|7} target 目标类型
- * @returns {boolean} 是否发生重新创建
- */
-function ensureWindowType(target) {
-  if (currentWindowType.value !== target) {
-    console.log(TAG, "检测到窗口类型不一致,当前:", currentWindowType.value, "目标:", target, "正在重新创建")
-    initVideoPlayer(target)
-    return true
   }
-  return false
+  initialize().catch((e) => {
+    if (myGeneration !== generation) return settle(null)
+    disposePlayer(player)
+    loading.value = false
+    console.log(TAG, "初始化播放器失败,err:", e)
+    settle(null)
+  })
+  return pending
 }
 
 /**
@@ -488,22 +520,19 @@ function ensureWindowType(target) {
  * @param {RealOptions[]} channels 播放参数数组
  */
 async function startReal(channels) {
+  if (!canUsePlayer() || !Array.isArray(channels)) return
+  if (!channels.length) return closeVideo()
   channels = clampByDivision(channels)
   const myToken = ++latestRealToken
-  if (!VIDEO_PLAYER) {
-    initVideoPlayer(0)
-  } else {
-    ensureWindowType(0)
-  }
+  ++latestPlaybackToken
   lastRealRequest = channels
   realFallbackAttempted.clear()
   const showBtn = ["BTN_STREAM", "BTN_VOICE", "BTN_TALK", "BTN_RECORD", "BTN_PIC", "BTN_ENLARGE"]
   loading.value = true
-  await waitForReady(0)
-  if (myToken !== latestRealToken) {
-    loading.value = false
-    return
-  }
+  const player = await initVideoPlayer(0)
+  await pendingClose
+  if (!player || !canUsePlayer() || !requestedVisible || document.hidden || myToken !== latestRealToken) return
+  activatePlayer(0, player)
   const now = Date.now()
   const signature = buildRealSignature(channels)
   if (signature && signature === lastRealSignature && now - lastRealStartAt < REAL_RESTART_GUARD_MS) {
@@ -512,11 +541,11 @@ async function startReal(channels) {
   }
   lastRealSignature = signature
   lastRealStartAt = now
-  applyDivisionByCount(Array.isArray(channels) ? channels.length : 1)
+  applyDivisionByCount(channels.length, player)
   console.log(TAG, "开始实时预览,channels:", channels)
-  VIDEO_PLAYER.startReal(channels)
+  player.startReal(channels)
   for (let i = 0; i < channels.length; i++) {
-    VIDEO_PLAYER.setTabControlBtn(showBtn, i)
+    player.setTabControlBtn(showBtn, i)
   }
   loading.value = false
 }
@@ -526,20 +555,17 @@ async function startReal(channels) {
  * @param {PlaybackOptions[]} items 回放参数数组
  */
 async function startPlayback(items) {
+  if (!canUsePlayer() || !Array.isArray(items)) return
+  if (!items.length) return closeVideo()
   items = clampByDivision(items)
   const myToken = ++latestPlaybackToken
-  if (!VIDEO_PLAYER) {
-    initVideoPlayer(3)
-  } else {
-    ensureWindowType(3)
-  }
+  ++latestRealToken
   lastPlaybackRequest = items
   loading.value = true
-  await waitForReady(3)
-  if (myToken !== latestPlaybackToken) {
-    loading.value = false
-    return
-  }
+  const player = await initVideoPlayer(3)
+  await pendingClose
+  if (!player || !canUsePlayer() || !requestedVisible || document.hidden || myToken !== latestPlaybackToken) return
+  activatePlayer(3, player)
   const now = Date.now()
   const signature = buildPlaybackSignature(items)
   if (signature && signature === lastPlaybackSignature && now - lastPlaybackStartAt < REAL_RESTART_GUARD_MS) {
@@ -548,14 +574,14 @@ async function startPlayback(items) {
   }
   lastPlaybackSignature = signature
   lastPlaybackStartAt = now
-  applyDivisionByCount(Array.isArray(items) ? items.length : 1)
+  applyDivisionByCount(items.length, player)
   console.log(TAG, "开始录像回放,items:", items)
   // try {
   //   await closeVideo()
   // } catch (e) {
   //   console.log(TAG, "开始回放前关闭旧视频失败,err:", e)
   // }
-  VIDEO_PLAYER.startPlayback(items)
+  player.startPlayback(items)
   loading.value = false
 }
 
@@ -564,21 +590,23 @@ async function startPlayback(items) {
  * @param {boolean} visible 是否显示
  */
 function updateVisible(visible) {
-  if (!VIDEO_PLAYER) return
-  try {
-    if (visible) VIDEO_PLAYER.show?.()
-    else VIDEO_PLAYER.hide?.()
-    console.log(TAG, "更新可见性,visible:", VIDEO_PLAYER.setting)
-  } catch (e) {
-    console.log(TAG, "更新可见性失败,err:", e)
-  }
+  requestedVisible = !!visible
+  players.forEach((player, type) => {
+    const show = requestedVisible && canUsePlayer() && !document.hidden && type === currentWindowType.value
+    if (player.setting) player.setting.visible = show
+    if (show) player.show?.()
+    else player.hide?.()
+  })
 }
 
 async function handleVisibilityChange() {
+  if (!canUsePlayer() || !requestedVisible) return
   if (document.hidden) {
+    ++latestRealToken
+    ++latestPlaybackToken
     if (!VIDEO_PLAYER) return
     if (currentWindowType.value === 0 && Array.isArray(lastRealRequest) && lastRealRequest.length) {
-      VIDEO_PLAYER.closeVideo?.()
+      stopOwnedPlayers()
     }
     if ((currentWindowType.value === 3 || currentWindowType.value === 7) && Array.isArray(lastPlaybackRequest)) {
       lastPlaybackRequest.forEach((item) => {
@@ -592,11 +620,9 @@ async function handleVisibilityChange() {
     if (!VIDEO_PLAYER) return
     VIDEO_PLAYER.show?.()
     if (currentWindowType.value === 0 && Array.isArray(lastRealRequest) && lastRealRequest.length) {
-      await waitForReady(0)
       await startReal(lastRealRequest)
     }
     if ((currentWindowType.value === 3 || currentWindowType.value === 7) && Array.isArray(lastPlaybackRequest)) {
-      await waitForReady(currentWindowType.value)
       lastPlaybackRequest.forEach((item) => {
         if (item && typeof item.snum === "number") {
           VIDEO_PLAYER.controlPlayback?.({ snum: item.snum, state: 1 })
@@ -704,34 +730,80 @@ function saveVideo(path, filename) {
   }
 }
 
-async function closeVideo() {
-  try {
-    if (VIDEO_PLAYER?.closeVideo) {
-      await Promise.resolve().then(() => VIDEO_PLAYER.closeVideo())
+function stopOwnedPlayers() {
+  const owned = new Set(players.values())
+  if (VIDEO_PLAYER) owned.add(VIDEO_PLAYER)
+  const tasks = [...owned].map((player) => {
+    if (closingPlayers.has(player)) return closingPlayers.get(player)
+    let result
+    try {
+      // 同步发出关闭命令，各个实例分别处理，避免一个窗口不回包卡住其他窗口。
+      result = player.closeVideo?.()
+    } catch (e) {
+      console.log(TAG, "关闭播放失败,err:", e)
     }
-    for (const p of players.values()) {
-      try {
-        if (p?.closeVideo) {
-          await Promise.resolve().then(() => p.closeVideo())
-        }
-      } catch (e) {
-        console.log(TAG, "清空播放列表失败,err:", e)
-      }
-    }
-    console.log(TAG, "关闭播放列表成功")
-  } catch (e) {
-    console.log(TAG, "关闭播放失败,err:", e)
+    const task = Promise.resolve(result).catch((e) => {
+      console.log(TAG, "关闭播放失败,err:", e)
+    }).then(() => {
+      if (player.setting) player.setting.channelList = []
+      if (closingPlayers.get(player) === task) closingPlayers.delete(player)
+    })
+    closingPlayers.set(player, task)
+    return task
+  })
+  pendingClose = Promise.all(tasks).then(() => undefined)
+  return pendingClose
+}
+
+function closeVideo() {
+  ++latestRealToken
+  ++latestPlaybackToken
+  lastRealRequest = null
+  lastPlaybackRequest = null
+  lastRealSignature = ""
+  lastPlaybackSignature = ""
+  realFallbackAttempted.clear()
+  loading.value = false
+  ytRef.value?.close?.()
+  return stopOwnedPlayers()
+}
+
+function destroy(preserveRequests = false) {
+  ++generation
+  ++latestRealToken
+  ++latestPlaybackToken
+  readyTimers.forEach(clearTimeout)
+  readyTimers.clear()
+  initResolversByType.forEach((resolve) => resolve(null))
+  initResolversByType.clear()
+  initPromisesByType.clear()
+  isReadyByType.clear()
+  closingPlayers.clear()
+  pendingClose = Promise.resolve()
+  lastRealSignature = ""
+  lastPlaybackSignature = ""
+  realFallbackAttempted.clear()
+  loading.value = false
+  ytRef.value?.close?.()
+  const owned = new Set(players.values())
+  if (VIDEO_PLAYER) owned.add(VIDEO_PLAYER)
+  players.clear()
+  VIDEO_PLAYER = null
+  if (!preserveRequests) {
+    lastRealRequest = null
+    lastPlaybackRequest = null
+    currentWindowType.value = null
+    pageTotal.value = 0
   }
+  owned.forEach(disposePlayer)
 }
 
 function setTotal(total) {
-  if (total > 0) {
-    pageTotal.value = total
-    console.log(TAG, "设置视频总数,total:", total)
-  }
+  pageTotal.value = Math.max(0, Number(total) || 0)
 }
 
 function emitSetting() {
+  if (!VIDEO_PLAYER || !canUsePlayer()) return
   emit("changeSetting", {
     ...VIDEO_PLAYER.setting,
     currentSnum,
@@ -747,6 +819,7 @@ function clickWindowCallback() {
 /* ************************************* start 云台相关 start ************************************* */
 
 function visibleYt() {
+  if (!VIDEO_PLAYER || !canUsePlayer()) return
   console.log("VIDEO_PLAYER:", VIDEO_PLAYER.setting);
   console.log("currentSnum:", currentSnum);
   if (currentSnum !== null && currentSnum !== undefined) {
@@ -768,6 +841,7 @@ function visibleYt() {
 }
 
 const updateYtChannel = () => {
+  if (!VIDEO_PLAYER || !canUsePlayer()) return
   if (!ytRef.value?.isVisible) {
     return
   }
@@ -792,23 +866,29 @@ onMounted(() => {
   document.addEventListener("visibilitychange", handleVisibilityChange)
 })
 
-onUnmounted(() => {
-  try {
-    document.removeEventListener("visibilitychange", handleVisibilityChange)
-    VIDEO_PLAYER?.closeVideo?.()
-    VIDEO_PLAYER?.hide?.()
-    // VIDEO_PLAYER?.destroy?.()
-    players.forEach((p) => {
-      try { p?.closeVideo?.() } catch (e) { console.log(TAG, "清空播放列表失败,err:", e) }
-      try { p?.hide?.() } catch (e) { console.log(TAG, "隐藏缓存播放器失败,err:", e) }
-      // try { p?.destroy?.() } catch (e) { console.log(TAG, "销毁缓存播放器失败,err:", e) }
-    })
-    console.log(TAG, "组件卸载,已隐藏播放器与缓存")
-  } catch (e) {
-    console.log(TAG, "隐藏播放器或缓存失败,err:", e)
-  }
+onBeforeUnmount(() => {
+  isUnmounted = true
+  document.removeEventListener("visibilitychange", handleVisibilityChange)
+  destroy()
 })
 
+onDeactivated(() => {
+  isActivated = false
+  destroy(true)
+})
+
+onActivated(() => {
+  if (isActivated) return
+  isActivated = true
+  if (!props.active || !requestedVisible) return
+  if (currentWindowType.value === 0 && lastRealRequest?.length) startReal(lastRealRequest)
+  else if (lastPlaybackRequest?.length) startPlayback(lastPlaybackRequest)
+})
+
+watch(() => props.active, (active) => {
+  if (!active) destroy()
+}, { flush: 'sync' })
+
 // 暴露方法给父组件，通过 ref 调用
 defineExpose({
   initVideoPlayer,
@@ -816,21 +896,22 @@ defineExpose({
   startPlayback,
   updateVisible,
   closeVideo,
+  destroy: () => destroy(),
   setTotal,
 })
 </script>
 
 <style scoped>
-.video-container {
-  /* 原生插件按此节点的实际矩形创建窗口，宽度变化时由比例计算高度。 */
-  flex: 0 1 auto;
+.video-container {
+  /* 原生插件按此节点的实际矩形创建窗口，宽度变化时由比例计算高度。 */
+  flex: 0 1 auto;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
-  min-width: 0;
+  min-width: 0;
   height: auto;
   aspect-ratio: 16 / 9;
   position: relative;
diff --git a/src/theme/access-record.scss b/src/theme/access-record.scss
new file mode 100644
index 0000000..0d56fa0
--- /dev/null
+++ b/src/theme/access-record.scss
@@ -0,0 +1,160 @@
+// 通行方向独立于成功/失败、报警状态，所有人员和车辆表格共用同一组颜色。
+:root {
+	--access-in-bg: #eef9f5;
+	--access-in-hover-bg: #dff2e9;
+	--access-in-active-bg: #cfe9dd;
+	--access-in-accent: #16745b;
+	--access-in-tag-bg: #dff2e9;
+	--access-in-tag-border: #badfce;
+	--access-out-bg: #eff5ff;
+	--access-out-hover-bg: #e0ecff;
+	--access-out-active-bg: #d2e3fc;
+	--access-out-accent: #315fa8;
+	--access-out-tag-bg: #e3edfc;
+	--access-out-tag-border: #c4d7f4;
+}
+
+[data-theme='dark'] {
+	--access-in-bg: #19352f;
+	--access-in-hover-bg: #21473d;
+	--access-in-active-bg: #2b584a;
+	--access-in-accent: #91dfbd;
+	--access-in-tag-bg: #21473d;
+	--access-in-tag-border: #3b725d;
+	--access-out-bg: #20324b;
+	--access-out-hover-bg: #29415f;
+	--access-out-active-bg: #324f73;
+	--access-out-accent: #a8caff;
+	--access-out-tag-bg: #29415f;
+	--access-out-tag-border: #49698f;
+}
+
+.el-table.access-record-table {
+	.el-table__body > tbody > tr {
+		&.access-record-row--in {
+			--access-row-bg: var(--access-in-bg);
+			--access-row-hover-bg: var(--access-in-hover-bg);
+			--access-row-active-bg: var(--access-in-active-bg);
+			--access-row-accent: var(--access-in-accent);
+		}
+
+		&.access-record-row--out {
+			--access-row-bg: var(--access-out-bg);
+			--access-row-hover-bg: var(--access-out-hover-bg);
+			--access-row-active-bg: var(--access-out-active-bg);
+			--access-row-accent: var(--access-out-accent);
+		}
+
+		// 背景落在单元格上，兼容固定列和条纹；子表格按各自记录独立着色。
+		&.access-record-row--in,
+		&.access-record-row--out {
+			> td.el-table__cell {
+				background-color: var(--access-row-bg);
+			}
+
+			> td.el-table__cell:first-child {
+				box-shadow: inset 3px 0 0 var(--access-row-accent);
+			}
+
+			&:hover > td.el-table__cell,
+			&.hover-row > td.el-table__cell {
+				background-color: var(--access-row-hover-bg);
+			}
+
+			&.current-row > td.el-table__cell {
+				background-color: var(--access-row-active-bg);
+			}
+		}
+	}
+}
+
+.access-direction-legend {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px 20px;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 10px 12px;
+	border: 1px solid var(--el-border-color-lighter);
+	border-bottom: 0;
+	border-radius: 6px 6px 0 0;
+	background: var(--el-bg-color);
+	color: var(--el-text-color-regular);
+	font-size: 12px;
+	line-height: 20px;
+
+	&__title {
+		color: var(--el-text-color-primary);
+		font-weight: 600;
+	}
+
+	&__item {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		white-space: nowrap;
+	}
+
+	&__swatch {
+		width: 16px;
+		height: 12px;
+		border: 1px solid var(--access-out-tag-border);
+		border-left: 3px solid var(--access-out-accent);
+		border-radius: 3px;
+		background: var(--access-out-bg);
+	}
+
+	&__item--in &__swatch {
+		border-color: var(--access-in-tag-border);
+		border-left-color: var(--access-in-accent);
+		background: var(--access-in-bg);
+	}
+}
+
+.access-direction-tag {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	box-sizing: border-box;
+	min-height: 26px;
+	padding: 2px 8px;
+	border: 1px solid var(--el-border-color);
+	border-radius: 5px;
+	background: var(--el-fill-color-light);
+	color: var(--el-text-color-regular);
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 20px;
+	white-space: nowrap;
+	vertical-align: middle;
+
+	&--in {
+		border-color: var(--access-in-tag-border);
+		background: var(--access-in-tag-bg);
+		color: var(--access-in-accent);
+	}
+
+	&--out {
+		border-color: var(--access-out-tag-border);
+		background: var(--access-out-tag-bg);
+		color: var(--access-out-accent);
+	}
+
+	svg {
+		flex: none;
+		width: 14px;
+		height: 14px;
+		stroke: currentColor;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		stroke-width: 1.5;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.el-table.access-record-table .el-table__body td.el-table__cell {
+		transition: none;
+	}
+}
diff --git a/src/theme/index.scss b/src/theme/index.scss
index fe2818a..053cf6f 100644
--- a/src/theme/index.scss
+++ b/src/theme/index.scss
@@ -6,3 +6,4 @@
 @import './waves.scss';
 @import './dark.scss';
 @import './login.scss';
+@import './access-record.scss';
diff --git a/src/utils/accessDirection.ts b/src/utils/accessDirection.ts
new file mode 100644
index 0000000..d1389da
--- /dev/null
+++ b/src/utils/accessDirection.ts
@@ -0,0 +1,24 @@
+export type AccessRecordKind = 'door' | 'car' | 'gate';
+export type AccessDirection = 'in' | 'out' | 'neutral';
+
+const directionCodes: Record<AccessRecordKind, Record<string, AccessDirection>> = {
+	door: { '1': 'in', '2': 'out' },
+	car: { '8': 'in', '9': 'out' },
+	gate: { '1': 'in', enter: 'in', in: 'in', '2': 'out', exit: 'out', out: 'out' },
+};
+
+// 门禁、过车抓拍和开关闸记录使用不同的方向编码；未知或双向记录保持中性。
+export function getAccessDirection(value: unknown, kind: AccessRecordKind): AccessDirection {
+	if (typeof value !== 'string' && typeof value !== 'number') return 'neutral';
+	const code = String(value).trim();
+	return Object.prototype.hasOwnProperty.call(directionCodes[kind], code) ? directionCodes[kind][code] : 'neutral';
+}
+
+function rowClassName(value: unknown, kind: AccessRecordKind): string {
+	const direction = getAccessDirection(value, kind);
+	return direction === 'neutral' ? '' : `access-record-row--${direction}`;
+}
+
+export const doorRecordRowClassName = ({ row }: { row: { enterOrExit?: unknown } }) => rowClassName(row.enterOrExit, 'door');
+export const carRecordRowClassName = ({ row }: { row: { carDirect?: unknown } }) => rowClassName(row.carDirect, 'car');
+export const gateOperationRowClassName = ({ row }: { row: { carDirect?: unknown } }) => rowClassName(row.carDirect, 'gate');
diff --git a/src/views/base/data/index.vue b/src/views/base/data/index.vue
index 1bd5bd6..9cac7e8 100644
--- a/src/views/base/data/index.vue
+++ b/src/views/base/data/index.vue
@@ -44,7 +44,12 @@
         </div>
 
         <section class="kpi-grid" aria-label="设备核心指标" v-loading="dashboardLoading">
-          <article v-for="item in kpiCards" :key="item.key" class="kpi-card" :class="`kpi-card--${item.tone}`">
+          <component :is="item.clickable ? 'button' : 'article'" v-for="item in kpiCards" :key="item.key"
+            :type="item.clickable ? 'button' : undefined" class="kpi-card"
+            :class="[`kpi-card--${item.tone}`, { 'kpi-card--clickable': item.clickable, 'kpi-card--active': item.drill && activeDrill?.key === item.drill.key }]"
+            :aria-pressed="item.drill ? String(activeDrill?.key === item.drill.key) : undefined"
+            @click="handleKpiClick(item)">
+            <span v-if="item.drill && activeDrill?.key === item.drill.key" class="kpi-card__drill-tag">筛选中</span>
             <div class="kpi-card__icon" aria-hidden="true">
               <el-icon>
                 <component :is="item.icon" />
@@ -58,7 +63,7 @@
               </div>
               <small>{{ item.description }}</small>
             </div>
-          </article>
+          </component>
         </section>
 
         <section class="charts-grid" aria-label="设备统计图表">
@@ -66,9 +71,11 @@
             <header class="panel-header">
               <div>
                 <h2>设备分类占比</h2>
-                <p>监控、门禁与道闸设备构成</p>
+                <p>监控、门禁、道闸与其他分类设备构成</p>
               </div>
-              <el-tag type="info" effect="plain">当前</el-tag>
+              <el-tooltip content="编码设备名下的相机通道数量，不占用设备总数" placement="top">
+                <el-tag type="info" effect="plain">监控通道 {{ formatNumber(deviceTotal.channel?.total || 0) }} 路</el-tag>
+              </el-tooltip>
             </header>
             <div ref="distributionChartRef" class="chart-canvas" role="img" :aria-label="distributionSummary"></div>
             <p class="chart-summary">{{ distributionSummary }}</p>
@@ -163,79 +170,199 @@
           </div>
         </section>
 
-        <section class="data-panel device-table-panel" aria-labelledby="device-list-title">
-          <header class="panel-header panel-header--table">
+        <section ref="deviceTablePanelRef" class="data-panel device-table-panel" aria-labelledby="device-list-title">
+          <header class="panel-header panel-header--table device-panel-header">
             <div>
               <h2 id="device-list-title">全部设备运行明细</h2>
-              <p>统计范围内所有设备的连接、同步和归属信息</p>
+              <p>所有设备与通道的连接、同步和归属信息，点击指标或图表可快速筛选</p>
             </div>
-            <span class="table-total">共 {{ formatNumber(deviceState.pagination?.total || 0) }} 台</span>
+            <el-tag v-if="activeDrill" class="drill-tag" closable effect="light" type="primary"
+              @close="clearDrillFilters">
+              筛选中：{{ activeDrill.label }}
+            </el-tag>
+            <!-- 设备/通道视图切换(仅作分段控制器，内容由下方 v-show 控制渲染) -->
+            <el-tabs v-model="activeTab" class="device-panel-tabs">
+              <el-tab-pane :label="deviceTabLabel" name="device" />
+              <el-tab-pane :label="channelTabLabel" name="channel" />
+            </el-tabs>
           </header>
 
-          <el-form ref="deviceQueryRef" :model="deviceState.queryForm" :inline="true" class="device-filters"
-            @keyup.enter="handleDeviceSearch">
-            <el-form-item label="设备名称" prop="deviceName">
-              <el-input v-model="deviceState.queryForm.deviceName" clearable placeholder="请输入设备名称" />
-            </el-form-item>
-            <el-form-item label="设备类型" prop="deviceCategory">
-              <dict-select v-model="deviceState.queryForm.deviceCategory" :options="device_category" clearable
-                placeholder="请选择设备类型" />
-            </el-form-item>
-            <el-form-item label="在线状态" prop="isOnline">
-              <dict-select v-model="deviceState.queryForm.isOnline" :options="is_nline" clearable
-                placeholder="请选择在线状态" />
-            </el-form-item>
-            <el-form-item class="device-filters__actions">
-              <el-button type="primary" :icon="Search" @click="handleDeviceSearch">查询</el-button>
-              <el-button :icon="RefreshLeft" @click="resetDeviceQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
+          <!-- 设备视图 -->
+          <div v-show="isDevicePaneVisible">
+            <el-form ref="deviceQueryRef" :model="deviceState.queryForm" :inline="true" class="device-filters"
+              @keyup.enter="handleDeviceSearch">
+              <el-form-item label="设备名称" prop="deviceName">
+                <el-input v-model="deviceState.queryForm.deviceName" clearable placeholder="请输入设备名称" />
+              </el-form-item>
+              <el-form-item label="设备类型" prop="deviceCategory">
+                <dict-select v-model="deviceState.queryForm.deviceCategory" :options="device_category" clearable
+                  placeholder="请选择设备类型" />
+              </el-form-item>
+              <el-form-item label="在线状态" prop="isOnline">
+                <dict-select v-model="deviceState.queryForm.isOnline" :options="is_nline" clearable
+                  placeholder="请选择在线状态" />
+              </el-form-item>
+              <el-form-item label="同步状态" prop="isSync">
+                <dict-select v-model="deviceState.queryForm.isSync" :options="is_sync" clearable
+                  placeholder="请选择同步状态" />
+              </el-form-item>
+              <el-form-item class="device-filters__actions">
+                <el-button type="primary" :icon="Search" @click="handleDeviceSearch">查询</el-button>
+                <el-button :icon="RefreshLeft" @click="resetDeviceQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
 
-          <div class="table-scroll">
-            <el-table :data="deviceState.dataList" v-loading="deviceState.loading" border empty-text="暂无设备数据"
-              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-              @sort-change="sortChangeHandle">
-              <el-table-column type="index" label="#" width="60" />
-              <el-table-column prop="deviceCode" label="设备编码" min-width="150" show-overflow-tooltip />
-              <el-table-column prop="deviceName" label="设备名称" min-width="170" show-overflow-tooltip />
-              <el-table-column prop="deviceCategory" label="设备类型" min-width="140">
-                <template #default="{ row }">
-                  <dict-tag :options="device_category" :value="row.deviceCategory" />
-                </template>
-              </el-table-column>
-              <el-table-column prop="deviceManufacturer" label="厂商类型" min-width="140">
-                <template #default="{ row }">
-                  <dict-tag :options="dh_device_manufacturer" :value="row.deviceManufacturer" />
-                </template>
-              </el-table-column>
-              <el-table-column prop="orgName" label="所属组织" min-width="170" show-overflow-tooltip>
-                <template #default="{ row }">{{ row.orgName || "--" }}</template>
-              </el-table-column>
-              <el-table-column prop="isOnline" label="在线状态" min-width="120">
-                <template #default="{ row }">
-                  <tag-online :isOnline="String(row.isOnline) === '1'" />
-                </template>
-              </el-table-column>
-              <el-table-column prop="isSync" label="同步状态" min-width="130">
-                <template #default="{ row }">
-                  <tag-sync :isSync="String(row.isSync) === '1'" />
-                </template>
-              </el-table-column>
-              <el-table-column prop="offlineReason" label="离线原因" min-width="180" show-overflow-tooltip>
-                <template #default="{ row }">{{ row.offlineReason || "--" }}</template>
-              </el-table-column>
-            </el-table>
+            <div class="table-scroll">
+              <el-table :data="deviceState.dataList" v-loading="deviceState.loading" border empty-text="暂无设备数据"
+                :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+                @sort-change="sortChangeHandle">
+                <el-table-column type="index" label="#" width="60" />
+                <el-table-column prop="deviceCode" label="设备编码" min-width="150" show-overflow-tooltip />
+                <el-table-column prop="deviceName" label="设备名称" min-width="170" show-overflow-tooltip />
+                <el-table-column prop="deviceCategory" label="设备类型" min-width="140">
+                  <template #default="{ row }">
+                    <dict-tag :options="device_category" :value="row.deviceCategory" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="deviceManufacturer" label="厂商类型" min-width="140">
+                  <template #default="{ row }">
+                    <dict-tag :options="dh_device_manufacturer" :value="row.deviceManufacturer" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="orgName" label="所属组织" min-width="170" show-overflow-tooltip>
+                  <template #default="{ row }">{{ row.orgName || "--" }}</template>
+                </el-table-column>
+                <el-table-column prop="isOnline" label="在线状态" min-width="120">
+                  <template #default="{ row }">
+                    <tag-online :isOnline="String(row.isOnline) === '1'" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="isSync" label="同步状态" min-width="130">
+                  <template #default="{ row }">
+                    <tag-sync :isSync="String(row.isSync) === '1'" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="offlineReason" label="离线原因" min-width="180" show-overflow-tooltip>
+                  <template #default="{ row }">{{ row.offlineReason || "--" }}</template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+              v-bind="deviceState.pagination" />
+          </div>
+
+          <!-- 通道视图(首次切换时才渲染并加载) -->
+          <div v-if="channelInited" v-show="isChannelPaneVisible">
+            <el-form ref="channelQueryRef" :model="channelState.queryForm" :inline="true" class="device-filters"
+              @keyup.enter="handleChannelSearch">
+              <el-form-item label="通道名称" prop="channelName">
+                <el-input v-model="channelState.queryForm.channelName" clearable placeholder="请输入通道名称" />
+              </el-form-item>
+              <el-form-item label="所属设备" prop="deviceName">
+                <el-input v-model="channelState.queryForm.deviceName" clearable placeholder="请输入设备名" />
+              </el-form-item>
+              <el-form-item label="在线状态" prop="isOnline">
+                <dict-select v-model="channelState.queryForm.isOnline" :options="is_nline" clearable
+                  placeholder="请选择在线状态" />
+              </el-form-item>
+              <el-form-item label="同步状态" prop="isSync">
+                <dict-select v-model="channelState.queryForm.isSync" :options="is_sync" clearable
+                  placeholder="请选择同步状态" />
+              </el-form-item>
+              <el-form-item class="device-filters__actions">
+                <el-button type="primary" :icon="Search" @click="handleChannelSearch">查询</el-button>
+                <el-button :icon="RefreshLeft" @click="resetChannelQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <div class="channel-toolbar">
+              <el-button plain :disabled="channelMultiple" icon="Delete" type="primary"
+                v-auth="'admin_deviceChannel_del'" @click="handleChannelDelete(channelSelectObjs)">
+                批量删除
+              </el-button>
+            </div>
+
+            <div class="table-scroll">
+              <el-table :data="channelState.dataList" v-loading="channelState.loading" border empty-text="暂无通道数据"
+                :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+                @selection-change="channelSelectionChangHandle">
+                <el-table-column type="selection" width="40" align="center" />
+                <el-table-column type="index" label="#" width="60" />
+                <el-table-column prop="channelCode" label="通道编码" min-width="180" show-overflow-tooltip />
+                <el-table-column prop="channelName" label="通道名称" min-width="180" show-overflow-tooltip />
+                <el-table-column prop="deviceName" label="所属设备" min-width="150" show-overflow-tooltip />
+                <el-table-column prop="cameraType" label="摄像头类型" min-width="120">
+                  <template #default="{ row }">
+                    <dict-tag v-if="row.cameraType" :options="camera_type" :value="row.cameraType" />
+                    <el-tag type="danger" v-else>未知</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="capability" label="通道能力" min-width="200">
+                  <template #default="{ row }">
+                    <div class="channel-capability-tags">
+                      <el-tag v-for="(v, i) in parseDeviceCapability(row.capability)" :key="i">
+                        {{ v }}
+                      </el-tag>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="installLocation" label="当前所在位置" min-width="180">
+                  <template #default="{ row }">
+                    <div class="color-success" v-if="row.installLocation">{{ row.installLocation }}</div>
+                    <div class="color-danger" v-else>未安装</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="isOnline" label="在线状态" min-width="120">
+                  <template #default="{ row }">
+                    <tag-online :isOnline="String(row.isOnline) === '1'" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="isSync" label="同步状态" min-width="130">
+                  <template #default="{ row }">
+                    <tag-sync :isSync="String(row.isSync) === '1'" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" fixed="right" width="240">
+                  <template #default="{ row }">
+                    <div class="grid grid-cols-3 gap-2 w-full">
+                      <el-button style="margin: 0;" class="!ml-0 w-full" icon="VideoPlay" text type="primary"
+                        @click="previewVideoRef.openDialog('channel', row.channelCode)">
+                        预览
+                      </el-button>
+                      <el-button style="margin: 0;" class="!ml-0 w-full" icon="VideoCamera" text type="primary"
+                        @click="replayVideoRef.openDialog('channel', row.channelCode)">
+                        回放
+                      </el-button>
+                      <el-button style="margin: 0;" class="!ml-0 w-full" icon="edit-pen" text type="primary"
+                        v-auth="'admin_deviceChannel_edit'"
+                        @click="channelFormDialogRef.openDialog(row.id, row.deviceCode)">
+                        编辑
+                      </el-button>
+                      <el-button style="margin: 0;" class="!ml-0 w-full" icon="delete" text type="primary"
+                        v-auth="'admin_deviceChannel_del'" @click="handleChannelDelete([row.id])">
+                        删除
+                      </el-button>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <pagination @size-change="channelSizeChangeHandle" @current-change="channelCurrentChangeHandle"
+              v-bind="channelState.pagination" />
           </div>
-          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
-            v-bind="deviceState.pagination" />
         </section>
+
+        <!-- 通道行操作弹窗：编辑/预览/回放，复用设备管理组件保持操作一致 -->
+        <device-channer-form ref="channelFormDialogRef" @refresh="handleChannelRefreshed" />
+        <preview-video-dialog ref="previewVideoRef" />
+        <replay-video-dialog ref="replayVideoRef" />
       </main>
     </div>
   </div>
 </template>
 
 <script setup lang="ts" name="baseData">
-import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
+import { computed, defineAsyncComponent, markRaw, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
 import type { Component, Ref } from "vue";
 // 统计图表统一使用 ECharts 实例，便于集中处理缩放与资源释放。
 import * as echarts from "echarts";
@@ -255,8 +382,10 @@ import {
 import type { FormInstance } from "element-plus";
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { useDict } from "/@/hooks/dict";
-import { useMessage } from "/@/hooks/message";
+import { useMessage, useMessageBox } from "/@/hooks/message";
 import { fetchList as fetchDeviceList } from "/@/api/device/deviceManage";
+import { cameraChannelPage, delObjs as delChannelObjs } from "/@/api/device/deviceChannel";
+import { parseDeviceCapability } from "/@/utils/dispose";
 import {
   AreaDeviceStatisticsItem,
   DeviceAlarmSummaryItem,
@@ -276,6 +405,18 @@ import {
 type RangeValue = "week" | "month" | "year";
 type ChartKey = "distribution" | "status" | "online" | "area" | "alarm";
 
+/**
+ * 点击指标/图表下钻到设备明细表的筛选配置。
+ */
+interface DeviceDrill {
+  key: string;
+  label: string;
+  filters: {
+    deviceCategory?: string;
+    isOnline?: string;
+  };
+}
+
 interface KpiCard {
   key: string;
   label: string;
@@ -284,15 +425,25 @@ interface KpiCard {
   description: string;
   tone: "primary" | "success" | "danger" | "warning" | "info";
   icon: Component;
+  clickable: boolean;
+  drill?: DeviceDrill;
+  action?: "alarm";
 }
 
 const router = useRouter();
 const message = useMessage();
 
+// 通道视图复用设备管理的编辑与视频弹窗，保持两个页面操作一致。
+const DeviceChannerForm = defineAsyncComponent(() => import("/@/views/device/detail/components/device-channer-form.vue"));
+const PreviewVideoDialog = defineAsyncComponent(() => import("/@/views/device/components/preview-video/preview-video-dialog.vue"));
+const ReplayVideoDialog = defineAsyncComponent(() => import("/@/views/device/components/replay-video/replay-video-dialog.vue"));
+
 // 页面使用现有字典组件，保证统计页与设备管理页的状态口径一致。
-const { device_category, is_nline, dh_device_manufacturer, alarm_type, handle_stat } = useDict(
+const { device_category, is_nline, is_sync, camera_type, dh_device_manufacturer, alarm_type, handle_stat } = useDict(
   "device_category",
   "is_nline",
+  "is_sync",
+  "camera_type",
   "dh_device_manufacturer",
   "alarm_type",
   "handle_stat"
@@ -330,6 +481,8 @@ const deviceTotal = ref<DeviceTotalData>({
   camera: createEmptyDetail(),
   door: createEmptyDetail(),
   gate: createEmptyDetail(),
+  other: createEmptyDetail(),
+  channel: createEmptyDetail(),
 });
 
 const alarmTotal = ref<DeviceAlarmTotalData>({
@@ -339,12 +492,14 @@ const alarmTotal = ref<DeviceAlarmTotalData>({
 
 // 设备明细表继续使用项目统一的 useTable，保留分页、排序和加载反馈。
 const deviceQueryRef = ref<FormInstance>();
+const deviceTablePanelRef = ref<HTMLElement | null>(null);
 const deviceState: BasicTableProps = reactive<BasicTableProps>({
   createdIsNeed: false,
   queryForm: {
     deviceName: "",
     deviceCategory: "",
     isOnline: "",
+    isSync: "",
   },
   pagination: {
     current: 1,
@@ -364,6 +519,61 @@ const {
   tableStyle,
 } = useTable(deviceState);
 
+/* ------------------------- 通道视图(复刻 camera-list 的 Tab 模式) ------------------------- */
+const channelQueryRef = ref<FormInstance>();
+const channelFormDialogRef = ref();
+const previewVideoRef = ref();
+const replayVideoRef = ref();
+const activeTab = ref<"device" | "channel">("device");
+// 首次切换到通道 Tab 后才渲染内容，dirty 标记轮询刷新后待重新加载
+const channelInited = ref(false);
+const channelDirty = ref(true);
+const channelSelectObjs = ref<string[]>([]);
+const channelMultiple = ref(true);
+
+const channelState: BasicTableProps = reactive<BasicTableProps>({
+  createdIsNeed: false,
+  queryForm: {
+    channelName: "",
+    deviceName: "",
+    isOnline: "",
+    isSync: "",
+    installLocation: true,
+  },
+  pagination: {
+    current: 1,
+    size: 10,
+    total: 0,
+    pageSizes: [10, 20, 50, 100],
+    layout: "total, sizes, prev, pager, next, jumper",
+  },
+  pageList: cameraChannelPage,
+});
+
+const {
+  getDataList: getChannelDataList,
+  currentChangeHandle: channelCurrentChangeHandle,
+  sizeChangeHandle: channelSizeChangeHandle,
+} = useTable(channelState);
+
+const isDevicePaneVisible = computed(() => activeTab.value === "device");
+const isChannelPaneVisible = computed(() => activeTab.value === "channel");
+const deviceTabLabel = computed(() => `设备 (${formatNumber(deviceState.pagination?.total || 0)})`);
+const channelTabLabel = computed(() => (channelInited.value ? `通道 (${formatNumber(channelState.pagination?.total || 0)})` : "通道"));
+
+watch(activeTab, (tab) => {
+  if (tab !== "channel") return;
+  channelInited.value = true;
+  if (channelDirty.value) {
+    channelDirty.value = false;
+    getChannelDataList();
+  }
+});
+
+/* ------------------------- 点击下钻状态 ------------------------- */
+// 记录当前由 KPI 卡片/图表写入的下钻筛选，用于卡片高亮、筛选标签展示与再次点击取消。
+const activeDrill = ref<{ key: string; label: string } | null>(null);
+
 const distributionChartRef = ref<HTMLDivElement | null>(null);
 const statusChartRef = ref<HTMLDivElement | null>(null);
 const onlineChartRef = ref<HTMLDivElement | null>(null);
@@ -399,27 +609,33 @@ const kpiCards = computed<KpiCard[]>(() => [
     label: "设备总数",
     value: formatNumber(deviceTotal.value.total.total),
     suffix: "台",
-    description: "当前纳管设备总量",
+    description: "点击查看全部设备明细",
     tone: "primary",
     icon: markRaw(Monitor),
+    clickable: true,
+    drill: { key: "kpi-total", label: "全部设备", filters: {} },
   },
   {
     key: "online",
     label: "在线设备",
     value: formatNumber(deviceTotal.value.total.online),
     suffix: "台",
-    description: "连接状态正常",
+    description: "点击筛选在线设备",
     tone: "success",
     icon: markRaw(CircleCheck),
+    clickable: true,
+    drill: { key: "kpi-online", label: "在线设备", filters: { isOnline: "1" } },
   },
   {
     key: "offline",
     label: "离线设备",
     value: formatNumber(deviceTotal.value.total.offline),
     suffix: "台",
-    description: "需要关注或排查",
+    description: "点击筛选离线设备",
     tone: "danger",
     icon: markRaw(CircleClose),
+    clickable: true,
+    drill: { key: "kpi-offline", label: "离线设备", filters: { isOnline: "0" } },
   },
   {
     key: "rate",
@@ -429,41 +645,78 @@ const kpiCards = computed<KpiCard[]>(() => [
     description: "在线设备占比",
     tone: "info",
     icon: markRaw(DataLine),
+    clickable: false,
   },
   {
     key: "alarm",
     label: "今日告警",
     value: formatNumber(alarmTotal.value.todayAlarmCount),
     suffix: "条",
-    description: `累计 ${formatNumber(alarmTotal.value.alarmCount)} 条`,
+    description: `累计 ${formatNumber(alarmTotal.value.alarmCount)} 条，点击查看告警记录`,
     tone: "warning",
     icon: markRaw(Bell),
+    clickable: true,
+    action: "alarm",
   },
 ]);
 
-const categoryDetails = computed(() => [
-  { name: deviceTotal.value.camera.deviceName || "监控设备", value: deviceTotal.value.camera },
-  { name: deviceTotal.value.door.deviceName || "门禁设备", value: deviceTotal.value.door },
-  { name: deviceTotal.value.gate.deviceName || "道闸设备", value: deviceTotal.value.gate },
-]);
+// 分类明细统一采用设备口径(与设备列表一致)，无设备的分类不参与图表展示。
+const categoryDetails = computed(() =>
+  [
+    { name: deviceTotal.value.camera.deviceName || "监控设备", value: deviceTotal.value.camera },
+    { name: deviceTotal.value.door.deviceName || "门禁设备", value: deviceTotal.value.door },
+    { name: deviceTotal.value.gate.deviceName || "道闸设备", value: deviceTotal.value.gate },
+    { name: deviceTotal.value.other.deviceName || "其他设备", value: deviceTotal.value.other },
+  ].filter((item) => Number(item.value.total) > 0)
+);
 
 const distributionSummary = computed(() => {
   const content = categoryDetails.value.map((item) => `${item.name}${formatNumber(item.value.total)}台`).join("，");
-  return `设备分类占比：${content || "暂无数据"}。`;
+  const channelTotal = formatNumber(deviceTotal.value.channel?.total || 0);
+  return `设备分类占比：${content || "暂无数据"}。监控通道共 ${channelTotal} 路。`;
 });
 
 const statusSummary = computed(() => {
   const content = categoryDetails.value
-    .map((item) => `${item.name}在线${formatNumber(item.value.online)}台、离线${formatNumber(item.value.offline)}台`)
+    .map((item) => `${item.name}在线${formatNumber(item.value.online)}台、离线${formatNumber(item.value.offline)}台（在线率${formatPercent(item.value.onlineRate)}）`)
     .join("；");
   return `分类运行状态：${content || "暂无数据"}。`;
 });
 
+/**
+ * 按当前时间范围的完整日期序列补齐趋势数据，缺失日期记为 null，
+ * ECharts 折线对 null 显示断点，避免横轴日期缺失造成"数据连续"的误导。
+ */
+const onlineTrendDisplayList = computed<Array<{ recordTime: string; onlineDeviceTotalRate: number | null }>>(() => {
+  const list = onlineTrendList.value;
+  if (!list.length) return [];
+  const end = dayjs().endOf("day");
+  const start =
+    selectedRange.value === "month"
+      ? dayjs().startOf("month")
+      : selectedRange.value === "year"
+        ? dayjs().startOf("year")
+        : dayjs().subtract(6, "day").startOf("day");
+  const rateMap = new Map(list.map((item) => [dayjs(item.recordTime).format("YYYY-MM-DD"), Number(item.onlineDeviceTotalRate ?? 0)]));
+  const todayKey = dayjs().format("YYYY-MM-DD");
+  const realtimeRate = Number(deviceTotal.value.total.onlineRate || 0);
+  const display: Array<{ recordTime: string; onlineDeviceTotalRate: number | null }> = [];
+  for (let cursor = start; cursor.isBefore(end); cursor = cursor.add(1, "day")) {
+    const key = cursor.format("YYYY-MM-DD");
+    // 当天的快照由定时任务每日写入，当天以实时统计为准，次日起由快照接管。
+    if (key === todayKey) {
+      display.push({ recordTime: key, onlineDeviceTotalRate: realtimeRate });
+      continue;
+    }
+    display.push({ recordTime: key, onlineDeviceTotalRate: rateMap.has(key) ? rateMap.get(key)! : null });
+  }
+  return display;
+});
+
 const onlineTrendSummary = computed(() => {
   if (!onlineTrendList.value.length) return `${activeRangeLabel.value}暂无设备在线率趋势数据。`;
-  const latest = onlineTrendList.value[onlineTrendList.value.length - 1];
-  return `${activeRangeLabel.value}设备在线率趋势，共${onlineTrendList.value.length}个数据点，最新在线率为${formatPercent(
-    latest.onlineDeviceTotalRate
+  return `${activeRangeLabel.value}设备在线率趋势，共${onlineTrendList.value.length}个快照日，当前在线率为${formatPercent(
+    deviceTotal.value.total.onlineRate
   )}。`;
 });
 
@@ -497,6 +750,8 @@ const normalizeDeviceTotal = (data?: Partial<DeviceTotalData>) => ({
   camera: normalizeDetail(data?.camera),
   door: normalizeDetail(data?.door),
   gate: normalizeDetail(data?.gate),
+  other: normalizeDetail(data?.other),
+  channel: normalizeDetail(data?.channel),
 });
 
 /**
@@ -523,9 +778,51 @@ const chartColors = {
   grid: "#e2e8f0",
 };
 
+/**
+ * 分类占比/分类状态图表点击后，按分类(与在线状态)下钻设备明细表。
+ */
+const handleCategoryChartClick = (key: "distribution" | "status", params: any) => {
+  const detail = categoryDetails.value.find((item) => item.name === params?.name);
+  if (!detail?.value.deviceCategory) return;
+  const isOnline = key === "status" ? (params.seriesName === "在线" ? "1" : "0") : undefined;
+  const filters: DeviceDrill["filters"] = { deviceCategory: detail.value.deviceCategory };
+  if (isOnline !== undefined) filters.isOnline = isOnline;
+  applyDeviceDrill({
+    key: `${key}-${detail.value.deviceCategory}-${isOnline ?? "all"}`,
+    label: isOnline !== undefined ? `${detail.name} · ${params.seriesName}` : detail.name,
+    filters,
+  });
+};
+
+/**
+ * 可下钻图表绑定点击与指针反馈：悬停可点元素时显示手型，点击触发筛选或跳转。
+ */
+const bindChartInteractions = (key: ChartKey, instance: ECharts) => {
+  const interactive = key === "distribution" || key === "status" || key === "alarm";
+  if (!interactive) return;
+
+  instance.getZr().on("mousemove", (event: any) => {
+    instance.getZr().setDefaultCursor(event?.target ? "pointer" : "default");
+  });
+  instance.getZr().on("globalout", () => instance.getZr().setDefaultCursor("default"));
+
+  if (key === "alarm") {
+    // 告警趋势无对应设备筛选，点击数据点按当天跳转告警记录页。
+    instance.on("click", (params: any) => {
+      if (params?.name) navigateToAlarmPage({ alarmDate: params.name } as DeviceAlarmSummaryItem);
+    });
+  } else {
+    instance.on("click", (params: any) => handleCategoryChartClick(key, params));
+  }
+};
+
 const getChartInstance = (key: ChartKey, element: HTMLDivElement | null) => {
   if (!element) return undefined;
-  if (!chartInstances[key]) chartInstances[key] = markRaw(echarts.init(element));
+  if (!chartInstances[key]) {
+    const instance = markRaw(echarts.init(element));
+    chartInstances[key] = instance;
+    bindChartInteractions(key, instance);
+  }
   return chartInstances[key];
 };
 
@@ -574,9 +871,9 @@ const renderDistributionChart = () => {
   setChartOption("distribution", distributionChartRef, {
     animation: !reduceMotion.value,
     animationDuration: 280,
-    color: [chartColors.primary, chartColors.success, chartColors.warning],
+    color: [chartColors.primary, chartColors.success, chartColors.warning, chartColors.muted],
     aria: { enabled: true, decal: { show: true } },
-    tooltip: { ...commonTooltip, trigger: "item", formatter: "{b}<br/>数量：{c} 台<br/>占比：{d}%" },
+    tooltip: { ...commonTooltip, trigger: "item", formatter: "{b}<br/>数量：{c} 台<br/>占比：{d}%<br/><span style=\"color:#909399\">点击筛选设备明细</span>" },
     legend: {
       bottom: 0,
       left: "center",
@@ -630,7 +927,18 @@ const renderStatusChart = () => {
     animation: !reduceMotion.value,
     animationDuration: 280,
     aria: { enabled: true, decal: { show: true } },
-    tooltip: { ...commonTooltip, trigger: "axis", axisPointer: { type: "shadow" } },
+    tooltip: {
+      ...commonTooltip,
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      formatter: (params: any) => {
+        const list = Array.isArray(params) ? params : [params];
+        const rows = list.map((p: any) => `${p.marker}${p.seriesName}：${p.value} 台`).join("<br/>");
+        const detail = categoryDetails.value.find((item) => item.name === list[0]?.axisValue);
+        const rateLine = detail ? `<br/>在线率：${formatPercent(detail.value.onlineRate)}` : "";
+        return `${list[0]?.axisValue ?? ""}<br/>${rows}${rateLine}<br/><span style="color:#909399">点击筛选设备明细</span>`;
+      },
+    },
     legend: {
       top: 0,
       right: 0,
@@ -687,6 +995,7 @@ const renderOnlineTrendChart = () => {
     return;
   }
 
+  const trendList = onlineTrendDisplayList.value;
   setChartOption("online", onlineChartRef, {
     animation: !reduceMotion.value,
     animationDuration: 280,
@@ -694,7 +1003,7 @@ const renderOnlineTrendChart = () => {
     tooltip: {
       ...commonTooltip,
       trigger: "axis",
-      valueFormatter: (value: any) => `${Number(value).toFixed(2)}%`,
+      valueFormatter: (value: any) => (value == null ? "无快照" : `${Number(value).toFixed(2)}%`),
       axisPointer: { type: "line", lineStyle: { color: chartColors.secondary, type: "dashed" } },
     },
     legend: {
@@ -709,7 +1018,7 @@ const renderOnlineTrendChart = () => {
     xAxis: {
       type: "category",
       boundaryGap: false,
-      data: onlineTrendList.value.map((item) => item.recordTime),
+      data: trendList.map((item) => item.recordTime),
       axisLine: { lineStyle: { color: chartColors.grid } },
       axisTick: { show: false },
       axisLabel: { color: chartColors.muted, hideOverlap: true },
@@ -728,10 +1037,12 @@ const renderOnlineTrendChart = () => {
         name: "设备在线率",
         type: "line",
         smooth: true,
-        showSymbol: onlineTrendList.value.length <= 31,
+        // 缺失快照的日期视觉上连续，悬停仍以"无快照"提示
+        connectNulls: true,
+        showSymbol: trendList.length <= 31,
         symbol: "circle",
         symbolSize: 7,
-        data: onlineTrendList.value.map((item) => Number(item.onlineDeviceTotalRate || 0)),
+        data: trendList.map((item) => item.onlineDeviceTotalRate),
         lineStyle: { color: chartColors.primary, width: 3 },
         itemStyle: { color: chartColors.primary, borderColor: "#ffffff", borderWidth: 2 },
         areaStyle: {
@@ -824,7 +1135,15 @@ const renderAlarmTrendChart = () => {
     animation: !reduceMotion.value,
     animationDuration: 280,
     aria: { enabled: true },
-    tooltip: { ...commonTooltip, trigger: "axis", valueFormatter: (value: any) => `${value} 条` },
+    tooltip: {
+      ...commonTooltip,
+      trigger: "axis",
+      formatter: (params: any) => {
+        const list = Array.isArray(params) ? params : [params];
+        const rows = list.map((p: any) => `${p.marker}${p.seriesName}：${p.value} 条`).join("<br/>");
+        return `${list[0]?.axisValue ?? ""}<br/>${rows}<br/><span style="color:#909399">点击查看当日告警</span>`;
+      },
+    },
     legend: {
       top: 0,
       right: 0,
@@ -949,7 +1268,17 @@ const refreshDashboard = async (includeDeviceTable = true) => {
   try {
     const [statisticsErrors, alarmErrors] = await Promise.all([loadStatistics(), loadAlarmSummary()]);
     if (isUnmounted) return;
-    if (includeDeviceTable && !deviceState.loading) await getDeviceDataList(false);
+    if (includeDeviceTable) {
+      if (!deviceState.loading) await getDeviceDataList(false);
+      // 通道视图惰性加载：激活时随轮询刷新，未激活则置脏待切换时刷新。
+      if (channelInited.value) {
+        if (activeTab.value === "channel") {
+          if (!channelState.loading) await getChannelDataList(false);
+        } else {
+          channelDirty.value = true;
+        }
+      }
+    }
     moduleErrors.value = [...statisticsErrors, ...alarmErrors];
     lastUpdated.value = dayjs().format("HH:mm:ss");
   } finally {
@@ -969,7 +1298,59 @@ const handleRangeChange = () => {
   refreshDashboard(false);
 };
 
+/**
+ * 应用下钻筛选到设备明细表：切换到设备视图、写入筛选、回到第一页并滚动定位；
+ * 再次点击同一来源则取消筛选。手动输入的设备名称等条件保留。
+ */
+const applyDeviceDrill = async (drill: DeviceDrill) => {
+  const isToggleOff = activeDrill.value?.key === drill.key;
+  activeTab.value = "device";
+
+  if (!isToggleOff && drill.key === "kpi-total") {
+    // “设备总数”视为查看全部：清空设备视图的全部筛选条件。
+    deviceQueryRef.value?.resetFields();
+    Object.assign(deviceState.queryForm, { deviceName: "", deviceCategory: "", isOnline: "", isSync: "" });
+  } else {
+    Object.assign(deviceState.queryForm, { deviceCategory: "", isOnline: "" }, isToggleOff ? {} : drill.filters);
+  }
+
+  activeDrill.value = isToggleOff ? null : { key: drill.key, label: drill.label };
+  await getDeviceDataList();
+  scrollToDeviceTable();
+};
+
+const handleKpiClick = (item: KpiCard) => {
+  if (!item.clickable) return;
+  if (item.action === "alarm") {
+    navigateToAlarmPage();
+    return;
+  }
+  if (item.drill) applyDeviceDrill(item.drill);
+};
+
+/**
+ * 关闭明细表头部的下钻筛选标签：仅清除下钻写入的分类/在线状态。
+ */
+const clearDrillFilters = () => {
+  Object.assign(deviceState.queryForm, { deviceCategory: "", isOnline: "" });
+  activeDrill.value = null;
+  getDeviceDataList();
+};
+
+/**
+ * 下钻后滚动定位到设备明细表，遵循系统减弱动态效果偏好。
+ */
+const scrollToDeviceTable = () => {
+  nextTick(() => {
+    deviceTablePanelRef.value?.scrollIntoView({
+      behavior: reduceMotion.value ? "auto" : "smooth",
+      block: "start",
+    });
+  });
+};
+
 const handleDeviceSearch = () => {
+  activeDrill.value = null;
   getDeviceDataList();
 };
 
@@ -979,10 +1360,59 @@ const resetDeviceQuery = () => {
     deviceName: "",
     deviceCategory: "",
     isOnline: "",
+    isSync: "",
   });
+  activeDrill.value = null;
   getDeviceDataList();
 };
 
+/* ------------------------- 通道视图查询与操作 ------------------------- */
+const handleChannelSearch = () => {
+  getChannelDataList();
+};
+
+const resetChannelQuery = () => {
+  channelQueryRef.value?.resetFields();
+  Object.assign(channelState.queryForm, {
+    channelName: "",
+    deviceName: "",
+    isOnline: "",
+    isSync: "",
+  });
+  getChannelDataList();
+};
+
+const channelSelectionChangHandle = (objs: { id: string }[]) => {
+  channelSelectObjs.value = objs.map(({ id }) => id);
+  channelMultiple.value = !objs.length;
+};
+
+const handleChannelRefreshed = () => {
+  getChannelDataList(false);
+};
+
+const handleChannelDelete = async (ids: string[]) => {
+  if (!ids.length) {
+    message.warning("请先选择要删除的通道");
+    return;
+  }
+  try {
+    await useMessageBox().confirm("此操作将永久删除");
+  } catch {
+    return;
+  }
+
+  try {
+    await delChannelObjs(ids);
+    channelSelectObjs.value = [];
+    channelMultiple.value = true;
+    getChannelDataList(false);
+    message.success("删除成功");
+  } catch (err: any) {
+    message.error(err.msg);
+  }
+};
+
 /**
  * 跳转告警记录页时携带可用筛选条件，保持普通后台布局。
  */
@@ -1334,6 +1764,48 @@ onBeforeUnmount(() => {
   color: var(--dashboard-info);
 }
 
+/* 可点击的指标卡：button 元素重置默认样式并提供完整交互态。 */
+.kpi-card--clickable {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+
+  &:hover {
+    border-color: #93c5fd;
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--dashboard-primary);
+    outline-offset: 2px;
+  }
+}
+
+.kpi-card--active {
+  border-color: currentColor;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
+}
+
+/* 下钻筛选生效标记：颜色之外同时提供文字标识。 */
+.kpi-card__drill-tag {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  z-index: 1;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: currentColor;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 16px;
+}
+
 .charts-grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -1385,8 +1857,25 @@ onBeforeUnmount(() => {
   min-height: 72px;
 }
 
-.panel-header__metric,
-.table-total {
+.device-panel-header {
+  flex-wrap: wrap;
+  row-gap: 8px;
+}
+
+/* 设备/通道分段切换器：仅作视图切换，内容区由 v-show 控制。 */
+.device-panel-tabs {
+  margin: 0;
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+  }
+
+  :deep(.el-tabs__nav-wrap::after) {
+    height: 1px;
+  }
+}
+
+.panel-header__metric {
   color: var(--dashboard-primary);
   font-size: 13px;
   font-weight: 600;
@@ -1448,6 +1937,20 @@ onBeforeUnmount(() => {
   min-width: auto !important;
 }
 
+.channel-toolbar {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px 0;
+}
+
+.channel-capability-tags {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+
 .device-table-panel :deep(.pagination-container) {
   padding: 12px 16px;
 }
@@ -1518,6 +2021,10 @@ onBeforeUnmount(() => {
     align-items: flex-start;
   }
 
+  .device-panel-header .device-panel-tabs {
+    width: 100%;
+  }
+
   .device-filters {
     display: block;
 
@@ -1573,8 +2080,10 @@ onBeforeUnmount(() => {
 @media (prefers-reduced-motion: reduce) {
 
   .kpi-card,
+  .kpi-card--clickable:active,
   .clickable-table :deep(.el-table__row) {
     transition: none;
+    transform: none;
   }
 }
 </style>
diff --git a/src/views/car/carAlarm/index.vue b/src/views/car/carAlarm/index.vue
index ee83a3b..0a3eb58 100644
--- a/src/views/car/carAlarm/index.vue
+++ b/src/views/car/carAlarm/index.vue
@@ -36,9 +36,10 @@
                         @queryTable="getDataList"></right-toolbar>
                 </div>
             </el-row>
-            <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            <AccessDirectionLegend />
+            <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
                 :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-                @sort-change="sortChangeHandle">
+                @sort-change="sortChangeHandle" :row-class-name="carRecordRowClassName">
                 <el-table-column v-if="false" type="selection" width="40" align="center" />
                 <el-table-column type="index" label="#" width="80" />
 
@@ -69,7 +70,7 @@
                 <el-table-column label="车辆信息">
                     <el-table-column prop="carDirect" width="120" label="行车方向">
                         <template #default="{ row }">
-                            <dict-tag :options="dh_car_direct" :value="row.carDirect" />
+                            <AccessDirectionTag kind="car" :options="dh_car_direct" :value="row.carDirect" />
                         </template>
                     </el-table-column>
                     <el-table-column prop="carColor" width="120" label="车辆颜色">
@@ -167,6 +168,9 @@
 </template>
 
 <script setup lang="ts" name="carAlarm">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { carRecordRowClassName } from '/@/utils/accessDirection';
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { useDict } from '/@/hooks/dict';
 import { parseTime } from "/@/utils/formatTime"
@@ -314,4 +318,4 @@ async function recoverPlaybackVideo(row: any) {
     display: inline-block;
     filter: blur(3px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/car/carRecord/index.vue b/src/views/car/carRecord/index.vue
index 65fefb3..70dd787 100644
--- a/src/views/car/carRecord/index.vue
+++ b/src/views/car/carRecord/index.vue
@@ -49,7 +49,8 @@
         <el-tab-pane label="过车数据" name="records" />
         <el-tab-pane label="清理数据" name="cleaned" />
       </el-tabs>
-      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+      <AccessDirectionLegend />
+      <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
         :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
         @sort-change="sortChangeHandle" row-key="id" :row-class-name="tableRowClassName">
         <el-table-column v-if="activeTab === 'cleaned'" type="expand" width="64" label="详情">
@@ -60,12 +61,12 @@
                 <el-tag type="success" size="small">已保留</el-tag>
               </div>
               <el-table :data="[row.retainedRecord]" size="small" border :cell-style="tableStyle.cellStyle"
-                :header-cell-style="tableStyle.headerCellStyle" class="retained-record-table">
+                :header-cell-style="tableStyle.headerCellStyle" class="retained-record-table access-record-table" :row-class-name="carRecordRowClassName">
                 <el-table-column prop="id" min-width="190" label="记录ID" />
                 <el-table-column prop="capTime" min-width="180" label="抓拍时间" />
                 <el-table-column width="120" label="行车方向">
                   <template #default="{ row: retainedRow }">
-                    <dict-tag :options="dh_car_direct" :value="retainedRow.carDirect" />
+                    <AccessDirectionTag kind="car" :options="dh_car_direct" :value="retainedRow.carDirect" />
                   </template>
                 </el-table-column>
                 <el-table-column min-width="180" label="车牌号码">
@@ -123,7 +124,7 @@
         <el-table-column label="车辆信息">
           <el-table-column prop="carDirect" width="120" label="行车方向">
             <template #default="{ row }">
-              <dict-tag :options="dh_car_direct" :value="row.carDirect" />
+              <AccessDirectionTag kind="car" :options="dh_car_direct" :value="row.carDirect" />
             </template>
           </el-table-column>
           <el-table-column prop="strobeState" width="130" label="自动开闸结果">
@@ -211,6 +212,9 @@
 </template>
 
 <script setup lang="ts" name="systemCarRecord">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { carRecordRowClassName } from '/@/utils/accessDirection';
 import { ElLoading } from 'element-plus'
 
 import { BasicTableProps, useTable } from "/@/hooks/table";
@@ -282,7 +286,8 @@ const handleTabChange = () => {
 }
 
 const tableRowClassName = ({ row }: { row: any }) => {
-  return activeTab.value === 'cleaned' && !row.retainedRecord ? 'no-retained-record' : ''
+  return [carRecordRowClassName({ row }), activeTab.value === 'cleaned' && !row.retainedRecord ? 'no-retained-record' : '']
+    .filter(Boolean).join(' ')
 }
 
 const exportExcel = () => {
diff --git a/src/views/car/carTimes/carTimesTableDialog.vue b/src/views/car/carTimes/carTimesTableDialog.vue
index 5d16b39..f54b103 100644
--- a/src/views/car/carTimes/carTimesTableDialog.vue
+++ b/src/views/car/carTimes/carTimesTableDialog.vue
@@ -14,9 +14,10 @@
                 </el-form-item>
             </el-form>
         </el-row>
-        <el-table :data="state.dataList" v-loading="state.loading" height="50vh" border
+        <AccessDirectionLegend />
+        <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" height="50vh" border
             :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-            @sort-change="sortChangeHandle">
+            @sort-change="sortChangeHandle" :row-class-name="carRecordRowClassName">
             <el-table-column type="selection" width="40" align="center" />
             <el-table-column type="index" label="#" width="80" />
 
@@ -25,7 +26,7 @@
             <el-table-column label="车辆信息">
                 <el-table-column prop="carDirect" width="120" label="行车方向">
                     <template #default="{ row }">
-                        <dict-tag :options="dh_car_direct" :value="row.carDirect" />
+                        <AccessDirectionTag kind="car" :options="dh_car_direct" :value="row.carDirect" />
                     </template>
                 </el-table-column>
                 <el-table-column prop="carColor" width="120" label="车辆颜色">
@@ -107,6 +108,9 @@
 </template>
 
 <script setup lang="ts" name="carTimesTableDialog">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { carRecordRowClassName } from '/@/utils/accessDirection';
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { useDict } from '/@/hooks/dict';
 
@@ -168,4 +172,4 @@ function openDialog(row: any) {
 
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped></style>
diff --git a/src/views/car/components/carTableDialog.vue b/src/views/car/components/carTableDialog.vue
index 573543d..6e8ed8f 100644
--- a/src/views/car/components/carTableDialog.vue
+++ b/src/views/car/components/carTableDialog.vue
@@ -24,9 +24,10 @@
                     <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
                 </el-form-item>
 
-                <el-table :data="state.dataList" v-loading="state.loading" height="50vh" border
+                <AccessDirectionLegend />
+                <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" height="50vh" border
                     :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-                    @sort-change="sortChangeHandle">
+                    @sort-change="sortChangeHandle" :row-class-name="carRecordRowClassName">
                     <el-table-column prop="capTime" label="抓拍时间" min-width="180" />
                     <el-table-column prop="personCode" min-width="120" label="异常出入类型">
                         <template #default="{ row }">
@@ -41,7 +42,7 @@
                     <el-table-column label="车辆信息">
                         <el-table-column prop="carDirect" width="120" label="行车方向">
                             <template #default="{ row }">
-                                <dict-tag :options="dh_car_direct" :value="row.carDirect" />
+                                <AccessDirectionTag kind="car" :options="dh_car_direct" :value="row.carDirect" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="carColor" width="120" label="车辆颜色">
@@ -116,6 +117,9 @@
 </template>
 
 <script setup lang="ts" name="doorTimesTableDialog">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { carRecordRowClassName } from '/@/utils/accessDirection';
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { useDict } from '/@/hooks/dict';
 import { parseTime } from "/@/utils/formatTime"
@@ -170,4 +174,4 @@ function openDialog(query: any) {
     getDataList();
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/collection/car/components/gate-operation-list.vue b/src/views/collection/car/components/gate-operation-list.vue
index cde5104..a5ba375 100644
--- a/src/views/collection/car/components/gate-operation-list.vue
+++ b/src/views/collection/car/components/gate-operation-list.vue
@@ -22,11 +22,16 @@
         <el-button icon="Download" @click="exportList">导出</el-button>
       </el-form-item>
     </el-form>
-    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-      :header-cell-style="tableStyle.headerCellStyle">
+    <AccessDirectionLegend />
+    <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+      :header-cell-style="tableStyle.headerCellStyle" :row-class-name="gateOperationRowClassName">
       <el-table-column type="index" label="#" width="60" />
       <el-table-column prop="devName" label="道闸设备" min-width="160" show-overflow-tooltip />
-      <el-table-column prop="carDirectStr" label="方向" width="100" />
+      <el-table-column prop="carDirectStr" label="方向" width="100">
+        <template #default="{ row }">
+          <AccessDirectionTag kind="gate" :value="row.carDirect" :label="row.carDirectStr" />
+        </template>
+      </el-table-column>
       <el-table-column prop="capDateStr" label="操作时间" width="180" />
       <el-table-column prop="operatorName" label="操作人" min-width="110" />
       <el-table-column prop="carNum" label="车牌号" min-width="120">
@@ -46,6 +51,9 @@
 </template>
 
 <script setup lang="ts" name="GateOperationList">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { gateOperationRowClassName } from '/@/utils/accessDirection';
 import dayjs from "dayjs";
 import * as GateApi from "/@/api/collection/gate";
 import { BasicTableProps, useTable } from "/@/hooks/table";
diff --git a/src/views/collection/door/components/door-record-list.vue b/src/views/collection/door/components/door-record-list.vue
index 9cb7a98..0522a15 100644
--- a/src/views/collection/door/components/door-record-list.vue
+++ b/src/views/collection/door/components/door-record-list.vue
@@ -37,8 +37,9 @@
       </el-form-item>
     </el-form>
 
-    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-      :header-cell-style="tableStyle.headerCellStyle">
+    <AccessDirectionLegend />
+    <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+      :header-cell-style="tableStyle.headerCellStyle" :row-class-name="doorRecordRowClassName">
       <el-table-column type="index" label="#" width="60" />
       <el-table-column prop="swingTime" label="发生时间" width="180" />
       <el-table-column label="识别状态" width="120">
@@ -56,7 +57,7 @@
       </el-table-column>
       <el-table-column prop="deptName" label="部门" min-width="130" show-overflow-tooltip />
       <el-table-column prop="enterOrExit" label="进出方向" width="110">
-        <template #default="{ row }"><dict-tag :options="dh_enter_or_exit" :value="row.enterOrExit" /></template>
+        <template #default="{ row }"><AccessDirectionTag kind="door" :options="dh_enter_or_exit" :value="row.enterOrExit" /></template>
       </el-table-column>
       <el-table-column prop="deviceName" label="门禁设备" min-width="140" show-overflow-tooltip />
       <el-table-column prop="channelName" label="门禁通道" min-width="140" show-overflow-tooltip />
@@ -81,6 +82,9 @@
 </template>
 
 <script setup lang="ts" name="DoorCollectionRecordList">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { doorRecordRowClassName } from '/@/utils/accessDirection';
 import { h } from "vue";
 import { ElTag } from "element-plus";
 import * as DoorRecordApi from "/@/api/door/doorRecord";
diff --git a/src/views/device/components/preview-video/preview-video-dialog.vue b/src/views/device/components/preview-video/preview-video-dialog.vue
index d92955c..1e9f1e1 100644
--- a/src/views/device/components/preview-video/preview-video-dialog.vue
+++ b/src/views/device/components/preview-video/preview-video-dialog.vue
@@ -15,7 +15,7 @@
                 </el-tree>
             </div>
             <div class="dialog-video-player">
-                <RtspPluginVideo ref="previewVideoRef" @changePage="videoChangePage" />
+                <RtspPluginVideo ref="previewVideoRef" :active="state.dialogVisible" @changePage="videoChangePage" />
             </div>
         </div>
         <template #footer>
@@ -34,6 +34,7 @@ import * as DeviceManageApi from "/@/api/device/deviceManage"
 import * as DeviceChannelApi from "/@/api/device/deviceChannel"
 
 const previewVideoRef = ref()
+let requestSequence = 0
 
 const state = reactive<any>({
     dialogVisible: false,
@@ -56,18 +57,22 @@ const channel = reactive<any>({
 
 
 const handleClose = () => {
+    ++requestSequence
     state.dialogVisible = false
+    previewVideoRef.value?.destroy?.()
 }
 
 // 打开弹窗
 const openDialog = async (type: string, code: string) => {
     if (!type || !code) return
+    const requestId = ++requestSequence
     state.type = type
     state.code = code
     state.dialogVisible = true
     if (state.type === "device") {
         // 获取deviceManage信息
         await getdeviceManageData(code)
+        if (requestId !== requestSequence || !state.dialogVisible) return
         await getDeviceChannelList()
         return
     }
@@ -78,6 +83,7 @@ const openDialog = async (type: string, code: string) => {
 };
 
 const videoChangePage = async ({ current, size }: any) => {
+    const requestId = requestSequence
     state.current = current
     state.size = size
     console.log("state:", state);
@@ -99,6 +105,7 @@ const videoChangePage = async ({ current, size }: any) => {
         snum: idx
     }))
     await previewVideoRef.value?.closeVideo()
+    if (requestId !== requestSequence || !state.dialogVisible) return
     previewVideoRef.value?.setTotal(channelList.length)
     previewVideoRef.value?.startReal(pageList)
 }
@@ -143,10 +150,12 @@ const handleNodeClick = (e: any) => {
 
 // 初始化表单数据
 const getdeviceManageData = async (id: string) => {
+    const requestId = requestSequence
     // 获取数据
     state.loading = true
     try {
         const { data, code } = await DeviceManageApi.getObj(id)
+        if (requestId !== requestSequence || !state.dialogVisible) return
         if (code != 0) throw new Error()
         Object.assign(detail, data)
     } catch (error: any) {
@@ -159,6 +168,7 @@ const getdeviceManageData = async (id: string) => {
 
 // 查询通道树
 const getDeviceChannelList = async () => {
+    const requestId = requestSequence
     state.treeLoading = true
     try {
         const _data: any = {}
@@ -169,6 +179,7 @@ const getDeviceChannelList = async () => {
             _data.channelCode = state.code
         }
         const { data, code } = await DeviceChannelApi.list(_data)
+        if (requestId !== requestSequence || !state.dialogVisible) return
         if (code != 0) throw new Error()
         channel.treeList = data
         channel.list = data
diff --git a/src/views/device/components/replay-video/replay-video-dialog.vue b/src/views/device/components/replay-video/replay-video-dialog.vue
index 38a5284..1a67776 100644
--- a/src/views/device/components/replay-video/replay-video-dialog.vue
+++ b/src/views/device/components/replay-video/replay-video-dialog.vue
@@ -36,7 +36,7 @@
                     </el-form-item>
                 </el-form>
                 <div class="dialog-video-player">
-                    <RtspPluginVideo ref="replayVideoRef" @changePage="videoChangePage" />
+                    <RtspPluginVideo ref="replayVideoRef" :active="state.dialogVisible" @changePage="videoChangePage" />
                 </div>
             </div>
         </div>
@@ -64,6 +64,7 @@ const { dh_replay_source, dh_video_stream_type } = useDict("dh_replay_source", "
 let replayVideo: any = null
 
 const replayVideoRef = ref()
+let requestSequence = 0
 
 const state = reactive<any>({
     startTimestamp: null,
@@ -126,21 +127,26 @@ const openDialog = async (type: string, code: string, timeRange?: { startTime: s
 }
 
 const doSearch = async () => {
+    const requestId = ++requestSequence
     // 确保接口查询与播放器时间戳一致
     syncTimestampsFromQuery()
     // 设备详情
     if (state.type === "device") {
         await getdeviceManageData(state.code);
+        if (requestId !== requestSequence || !state.dialogVisible) return
     }
     // 设备通道详情
     await getDeviceChannelList(state.code)
 }
 
 const handleClose = () => {
+    ++requestSequence
     state.dialogVisible = false
+    replayVideoRef.value?.destroy?.()
 }
 
 const videoChangePage = async ({ current, size }: any) => {
+    const requestId = requestSequence
     state.current = current
     state.size = size
     console.log("state:", state);
@@ -168,6 +174,7 @@ const videoChangePage = async ({ current, size }: any) => {
         snum: idx
     }))
     await replayVideoRef.value?.closeVideo()
+    if (requestId !== requestSequence || !state.dialogVisible) return
     replayVideoRef.value?.setTotal(channelList.length)
     replayVideoRef.value?.startPlayback(pageList)
 }
@@ -222,10 +229,12 @@ const handleNodeClick = (e: any) => {
 
 // 初始化表单数据
 const getdeviceManageData = async (deviceCode: string) => {
+    const requestId = requestSequence
     // 获取数据
     state.loading = true
     try {
         const { data, code } = await DeviceManageApi.getByCode({ code: deviceCode })
+        if (requestId !== requestSequence || !state.dialogVisible) return
         if (code != 0) throw new Error()
         Object.assign(detail, data)
     } catch (error: any) {
@@ -238,6 +247,7 @@ const getdeviceManageData = async (deviceCode: string) => {
 
 // 查询通道列表
 const getDeviceChannelList = async (codeStr: any) => {
+    const requestId = requestSequence
     state.treeLoading = true
     try {
         const _data: any = {}
@@ -251,6 +261,7 @@ const getDeviceChannelList = async (codeStr: any) => {
             _data.playbackGroupChannelCode = codeStr
         }
         const { data, code } = await DeviceChannelApi.list(_data)
+        if (requestId !== requestSequence || !state.dialogVisible) return
         if (code != 0) throw new Error()
         if (!data || !data.length) {
             useMessage().error("查询不到设备通道")
diff --git a/src/views/device/components/useVideoDialog.ts b/src/views/device/components/useVideoDialog.ts
new file mode 100644
index 0000000..e5cecac
--- /dev/null
+++ b/src/views/device/components/useVideoDialog.ts
@@ -0,0 +1,179 @@
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue';
+import * as DeviceManageApi from '/@/api/device/deviceManage';
+import * as DeviceChannelApi from '/@/api/device/deviceChannel';
+import { useMessage } from '/@/hooks/message';
+
+export interface VideoChannel {
+	channelCode: string;
+	channelName?: string;
+	channelSeq?: string | number;
+	deviceName?: string;
+}
+
+export type ChannelSelectionMode = 'single' | 'multiple';
+interface VideoDialogOptions {
+	mode: 'preview' | 'replay';
+	getPlayOptions: () => Record<string, string | number> | null;
+}
+interface DialogPlayer {
+	startReal: (channels: Record<string, unknown>[]) => Promise<void>;
+	startPlayback: (channels: Record<string, unknown>[]) => Promise<void>;
+	closeVideo: () => Promise<void>;
+	destroy?: () => void;
+	updateVisible: (visible: boolean) => void;
+}
+
+export function useVideoDialog(options: VideoDialogOptions) {
+	const dialogVisible = ref(false);
+	const loading = ref(false);
+	const loadError = ref('');
+	const channels = ref<VideoChannel[]>([]);
+	const selectedCodes = ref<string[]>([]);
+	const playingCodes = ref<string[]>([]);
+	const selectionMode = ref<ChannelSelectionMode>('single');
+	const playerRef = ref<DialogPlayer>();
+	const deviceName = ref('');
+	const currentPage = ref(1);
+	const pageSize = 16;
+	const divisionOptions = [1, 4, 9, 16];
+	let sourceType = '';
+	let sourceCode = '';
+	let session = 0;
+	let playRequest = 0;
+	let appliedOptions: Record<string, string | number> = {};
+
+	const playingChannels = computed(() => {
+		const codes = new Set(playingCodes.value);
+		return channels.value.filter((channel) => codes.has(channel.channelCode));
+	});
+	const pageChannels = computed(() => playingChannels.value.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize));
+	const division = computed(() => divisionOptions.find((count) => count >= pageChannels.value.length) || pageSize);
+	const playingSummary = computed(() => {
+		if (!playingChannels.value.length) return '尚未选择播放通道';
+		if (playingChannels.value.length === 1) return playingChannels.value[0].channelName || '未命名通道';
+		const summary = `共 ${playingChannels.value.length} 个通道`;
+		return playingChannels.value.length > pageSize ? `${summary} · 当前第 ${(currentPage.value - 1) * pageSize + 1}–${Math.min(currentPage.value * pageSize, playingChannels.value.length)} 路` : summary;
+	});
+
+	async function playPage() {
+		const request = ++playRequest;
+		const activeSession = session;
+		const list = pageChannels.value.map((channel, snum) => ({
+			...appliedOptions,
+			channelId: channel.channelCode,
+			channelName: channel.channelName,
+			snum,
+		}));
+		await nextTick();
+		const player = playerRef.value;
+		if (!player || !dialogVisible.value || request !== playRequest) return;
+		try {
+			// 切换前清空旧窗口，避免取消选择的通道继续播放。
+			await player.closeVideo();
+			if (!dialogVisible.value || activeSession !== session || request !== playRequest || player !== playerRef.value) return;
+			if (options.mode === 'preview') await player.startReal(list);
+			else await player.startPlayback(list);
+		} catch {
+			if (dialogVisible.value && request === playRequest) useMessage().error('视频播放失败，请重试');
+		}
+	}
+
+	async function playSelected() {
+		if (loading.value || !selectedCodes.value.length) return;
+		const nextOptions = options.getPlayOptions();
+		if (!nextOptions) return;
+		// 翻页沿用本次筛选快照，不受尚未提交的表单修改影响。
+		appliedOptions = { ...nextOptions };
+		playingCodes.value = [...selectedCodes.value];
+		currentPage.value = 1;
+		await playPage();
+	}
+
+	function changeSelection(codes: string[]) {
+		const available = new Set(channels.value.map((channel) => channel.channelCode));
+		selectedCodes.value = [...new Set(codes)].filter((code) => available.has(code));
+		if (selectionMode.value === 'single') {
+			selectedCodes.value = selectedCodes.value.slice(0, 1);
+			void playSelected();
+		}
+	}
+
+	function changeSelectionMode(mode: ChannelSelectionMode) {
+		selectionMode.value = mode;
+		if (mode === 'single') {
+			selectedCodes.value = [selectedCodes.value[0] || playingCodes.value[0] || channels.value[0]?.channelCode].filter(Boolean);
+			void playSelected();
+		}
+	}
+
+	async function changePage(page: number) {
+		currentPage.value = Math.max(1, Math.min(page, Math.ceil(playingChannels.value.length / pageSize) || 1));
+		await playPage();
+	}
+
+	function closeDialog() {
+		++session;
+		++playRequest;
+		dialogVisible.value = false;
+		loading.value = false;
+		playerRef.value?.updateVisible(false);
+		if (playerRef.value?.destroy) playerRef.value.destroy();
+		else void playerRef.value?.closeVideo();
+	}
+
+	async function openDialog(type: string, code: string) {
+		if (!type || !code) return;
+		closeDialog();
+		const activeSession = ++session;
+		sourceType = type;
+		sourceCode = code;
+		channels.value = [];
+		selectedCodes.value = [];
+		playingCodes.value = [];
+		deviceName.value = '';
+		loadError.value = '';
+		selectionMode.value = 'single';
+		currentPage.value = 1;
+		dialogVisible.value = true;
+		loading.value = true;
+		try {
+			const query: Record<string, string> = {};
+			if (type === 'device') {
+				// 预览入口传设备 ID，回放入口传设备编码。
+				const result = options.mode === 'preview' ? await DeviceManageApi.getObj(code) : await DeviceManageApi.getByCode({ code });
+				if (activeSession !== session) return;
+				if (result.code != 0 || !result.data?.deviceCode) throw new Error('获取设备信息失败');
+				query.deviceCode = result.data.deviceCode;
+				deviceName.value = result.data.deviceName || '';
+			} else if (type === 'channel') query.channelCode = code;
+			else if (type === 'playbackGroup') query.playbackGroupChannelCode = code;
+			else throw new Error('不支持的视频来源');
+			const result = await DeviceChannelApi.list(query);
+			if (activeSession !== session) return;
+			if (result.code != 0) throw new Error('加载通道失败，请重试');
+			const seen = new Set<string>();
+			channels.value = (Array.isArray(result.data) ? result.data : []).filter((channel: VideoChannel) => {
+				const channelCode = channel.channelCode == null ? '' : String(channel.channelCode);
+				if (!channelCode || seen.has(channelCode)) return false;
+				seen.add(channelCode);
+				return true;
+			}).map((channel: VideoChannel) => ({ ...channel, channelCode: String(channel.channelCode) }));
+			deviceName.value ||= channels.value[0]?.deviceName || (type === 'playbackGroup' ? '回放分组' : '设备视频');
+			selectedCodes.value = channels.value.slice(0, 1).map((channel) => channel.channelCode);
+		} catch (error) {
+			if (activeSession === session) loadError.value = error instanceof Error ? error.message : '加载通道失败，请重试';
+		} finally {
+			if (activeSession === session) loading.value = false;
+		}
+		if (activeSession === session && dialogVisible.value) void playSelected();
+	}
+
+	onBeforeUnmount(closeDialog);
+
+	return {
+		dialogVisible, channels, selectedCodes, selectionMode, loading, loadError, playingCodes, playingChannels,
+		deviceName, playerRef, currentPage, pageSize, division, divisionOptions, playingSummary,
+		openDialog, closeDialog, changeSelection, changeSelectionMode, playSelected, changePage,
+		reloadChannels: () => openDialog(sourceType, sourceCode),
+	};
+}
diff --git a/src/views/device/components/video-channel-panel.vue b/src/views/device/components/video-channel-panel.vue
new file mode 100644
index 0000000..ff286aa
--- /dev/null
+++ b/src/views/device/components/video-channel-panel.vue
@@ -0,0 +1,169 @@
+<template>
+	<aside class="video-channel-panel" aria-label="通道选择">
+		<div class="video-channel-panel__heading"><h3>通道列表</h3><span>{{ channels.length }}</span></div>
+		<div class="video-channel-panel__tools">
+			<el-input v-model="keyword" placeholder="搜索通道 / 设备" aria-label="搜索通道或设备" :prefix-icon="Search" clearable :disabled="loading" />
+			<el-radio-group class="video-channel-panel__mode" :model-value="mode" aria-label="通道选择方式" :disabled="loading" @update:model-value="emit('update:mode', $event as ChannelSelectionMode)">
+				<el-radio-button label="single">单选</el-radio-button>
+				<el-radio-button label="multiple">多选</el-radio-button>
+			</el-radio-group>
+			<div class="video-channel-panel__bulk">
+				<span>{{ keyword ? `找到 ${filteredChannels.length} 个通道` : mode === 'single' ? '选择后直接播放' : '勾选通道后统一播放' }}</span>
+				<div v-if="mode === 'multiple'">
+					<el-button link type="primary" :disabled="loading || !filteredChannels.length" @click="selectAll">{{ keyword ? '全选结果' : '全选' }}</el-button>
+					<el-button link :disabled="loading || !modelValue.length" @click="emit('update:modelValue', [])">清空</el-button>
+				</div>
+			</div>
+		</div>
+		<div v-loading="loading" class="video-channel-panel__list" :role="mode === 'single' ? 'radiogroup' : 'group'" aria-label="可选通道" :aria-busy="loading">
+			<label v-for="channel in filteredChannels" :key="channel.channelCode" class="video-channel-row" :class="{ 'is-selected': modelValue.includes(channel.channelCode) }">
+				<input :type="mode === 'single' ? 'radio' : 'checkbox'" :name="inputName" :value="channel.channelCode" :checked="modelValue.includes(channel.channelCode)" :disabled="loading" @change="toggleChannel(channel.channelCode, ($event.target as HTMLInputElement).checked)" />
+				<span class="video-channel-row__icon"><el-icon aria-hidden="true"><VideoCamera /></el-icon></span>
+				<span class="video-channel-row__text">
+					<strong :title="channel.channelName || '未命名通道'">{{ channel.channelName || '未命名通道' }}</strong>
+					<span :title="channel.deviceName">通道 {{ channel.channelSeq ?? '—' }}<template v-if="channel.deviceName"> · {{ channel.deviceName }}</template></span>
+				</span>
+				<span v-if="playingCodes.includes(channel.channelCode)" class="video-channel-row__current">当前</span>
+			</label>
+			<div v-if="!loading && !filteredChannels.length" class="video-channel-panel__empty">
+				<el-icon aria-hidden="true"><Search v-if="keyword" /><VideoCamera v-else /></el-icon>
+				<span>{{ error || (keyword ? '未找到匹配通道' : '暂无可用通道') }}</span>
+				<el-button v-if="error" link type="primary" @click="emit('retry')">重新加载</el-button>
+			</div>
+		</div>
+		<div class="video-channel-panel__footer">
+			<div class="video-channel-panel__selection" aria-live="polite"><span>已选 <strong>{{ modelValue.length }}</strong> 个通道</span><span v-if="hasChanges" class="video-channel-panel__pending">待播放</span></div>
+			<el-button v-if="mode === 'multiple'" type="primary" :icon="VideoPlay" :disabled="loading || !modelValue.length" @click="emit('play')">播放所选</el-button>
+		</div>
+	</aside>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref } from 'vue';
+import { Search, VideoCamera, VideoPlay } from '@element-plus/icons-vue';
+import type { ChannelSelectionMode, VideoChannel } from './useVideoDialog';
+
+const props = defineProps<{
+	channels: VideoChannel[];
+	modelValue: string[];
+	mode: ChannelSelectionMode;
+	loading: boolean;
+	playingCodes: string[];
+	error?: string;
+}>();
+const emit = defineEmits<{
+	(event: 'update:modelValue', codes: string[]): void;
+	(event: 'update:mode', mode: ChannelSelectionMode): void;
+	(event: 'play'): void;
+	(event: 'retry'): void;
+}>();
+const keyword = ref('');
+const inputName = `video-channel-${getCurrentInstance()?.uid}`;
+const filteredChannels = computed(() => {
+	const query = keyword.value.trim().toLowerCase();
+	return props.channels.filter((channel) => [channel.channelName, channel.channelSeq, channel.deviceName, channel.channelCode].join(' ').toLowerCase().includes(query));
+});
+const hasChanges = computed(() => props.mode === 'multiple' && (props.modelValue.length !== props.playingCodes.length || props.modelValue.some((code) => !props.playingCodes.includes(code))));
+const toggleChannel = (code: string, checked: boolean) => {
+	if (props.mode === 'single') emit('update:modelValue', [code]);
+	else emit('update:modelValue', checked ? [...new Set([...props.modelValue, code])] : props.modelValue.filter((value) => value !== code));
+};
+const selectAll = () => emit('update:modelValue', [...new Set([...props.modelValue, ...filteredChannels.value.map((channel) => channel.channelCode)])]);
+</script>
+
+<style scoped lang="scss">
+.video-channel-panel {
+	width: 260px;
+	flex: 0 0 260px;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	background: var(--el-bg-color);
+	border: 1px solid var(--el-border-color-light);
+	border-radius: 8px;
+	overflow: hidden;
+
+	&__heading {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 18px 16px 14px;
+		h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--el-text-color-primary); }
+		> span { padding: 1px 7px; border-radius: 4px; background: var(--el-fill-color); color: var(--el-text-color-regular); font-size: 12px; }
+	}
+	&__tools { padding: 0 12px; }
+	&__mode {
+		display: flex;
+		width: 100%;
+		margin-top: 12px;
+		:deep(.el-radio-button) { flex: 1; }
+		:deep(.el-radio-button__inner) { width: 100%; }
+	}
+	&__bulk {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 4px;
+		min-height: 42px;
+		font-size: 12px;
+		color: var(--el-text-color-regular);
+		.el-button { font-size: 12px; }
+		.el-button + .el-button { margin-left: 8px; }
+	}
+	&__list { flex: 1; min-height: 100px; padding: 0 8px 8px; overflow-y: auto; scrollbar-width: thin; }
+	&__empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 12px;
+		padding: 36px 8px;
+		font-size: 13px;
+		color: var(--el-text-color-regular);
+		> .el-icon { font-size: 28px; color: var(--el-text-color-secondary); }
+	}
+	&__footer { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--el-border-color-lighter); }
+	&__selection { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--el-text-color-regular); font-size: 12px; strong { color: var(--el-color-primary); font-weight: 600; } }
+	&__pending { color: var(--el-color-primary); }
+}
+
+.video-channel-row {
+	display: flex;
+	align-items: center;
+	gap: 9px;
+	min-height: 66px;
+	padding: 10px 8px;
+	margin-bottom: 4px;
+	border: 1px solid transparent;
+	border-radius: 6px;
+	cursor: pointer;
+	transition: background-color 150ms ease, border-color 150ms ease;
+	&:hover { background: var(--el-fill-color-light); }
+	&.is-selected { background: var(--el-color-primary-light-9); border-color: var(--el-color-primary-light-7); }
+	&:has(input:focus-visible) { outline: 2px solid var(--el-color-primary) !important; outline-offset: -2px; }
+	input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; accent-color: var(--el-color-primary); cursor: pointer; }
+	&__icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; color: var(--el-text-color-secondary); background: var(--el-fill-color-light); border-radius: 5px; }
+	&.is-selected &__icon { color: var(--el-color-primary); background: var(--el-color-primary-light-8); }
+	&__text {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		strong, > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+		strong { font-size: 13px; font-weight: 500; color: var(--el-text-color-primary); }
+		> span { font-size: 11px; color: var(--el-text-color-regular); }
+	}
+	&__current { font-size: 11px; color: var(--el-color-primary); white-space: nowrap; }
+}
+
+@media (max-width: 1100px) {
+	.video-channel-panel { width: 232px; flex-basis: 232px; }
+}
+@media (max-width: 700px) {
+	.video-channel-panel { width: 100%; flex-basis: auto; max-height: 290px; &__heading { padding-top: 12px; } &__list { min-height: 68px; } &__footer { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 16px; } }
+	.video-channel-row { min-height: 58px; }
+}
+@media (prefers-reduced-motion: reduce) {
+	.video-channel-row { transition: none; }
+}
+</style>
diff --git a/src/views/device/components/video-dialog.scss b/src/views/device/components/video-dialog.scss
new file mode 100644
index 0000000..4b9174e
--- /dev/null
+++ b/src/views/device/components/video-dialog.scss
@@ -0,0 +1,92 @@
+// 限定到视频弹窗，覆盖项目弹窗的全局滚动与高度规则。
+.el-overlay .el-overlay-dialog .el-dialog.device-video-dialog {
+	--device-video-stage-bg: #111820;
+	--device-video-stage-text: #aebaca;
+	display: flex;
+	flex-direction: column;
+	max-width: 1560px;
+	height: min(860px, calc(100vh - 48px));
+	height: min(860px, calc(100dvh - 48px));
+	border-radius: 12px;
+
+	.el-dialog__header { flex: 0 0 auto; padding: 18px 24px; margin: 0; border-bottom: 1px solid var(--el-border-color-lighter); }
+	.el-dialog__headerbtn { top: 12px; right: 16px; width: 40px; height: 40px; &:focus-visible { outline: 2px solid var(--el-color-primary) !important; outline-offset: -4px; } }
+	.el-dialog__body { display: flex; flex: 1; min-height: 0; max-height: none !important; padding: 16px !important; overflow: hidden; background: var(--el-fill-color-lighter); }
+	.el-dialog__footer { flex: 0 0 auto; padding: 12px 20px; border-top: 1px solid var(--el-border-color-lighter); }
+	.el-button:focus-visible, .el-radio-button:has(input:focus-visible) .el-radio-button__inner { outline: 2px solid var(--el-color-primary) !important; outline-offset: 2px; }
+	.el-input__wrapper:focus-within, .el-select .el-input.is-focus .el-input__wrapper { box-shadow: 0 0 0 2px var(--el-color-primary) inset; }
+
+	.device-video-heading { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 40px; h2 { margin: 0; white-space: nowrap; line-height: 28px; } }
+	.device-video-heading__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; color: var(--el-color-primary); background: var(--el-color-primary-light-9); font-size: 18px; }
+	.device-video-heading__device { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--el-text-color-regular); border-left: 1px solid var(--el-border-color); padding-left: 12px; }
+	.device-video-layout { display: flex; width: 100%; min-height: 0; min-width: 0; gap: 16px; }
+	.device-video-workspace { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--el-bg-color); border: 1px solid var(--el-border-color-light); border-radius: 8px; }
+	.device-video-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; min-height: 48px; padding: 10px 16px; border-bottom: 1px solid var(--el-border-color-lighter); }
+	.device-video-toolbar__title { display: flex; align-items: center; gap: 8px; color: var(--el-text-color-primary); font-weight: 500; .el-icon { color: var(--el-text-color-regular); font-size: 16px; } }
+	.device-video-toolbar__meta { color: var(--el-text-color-regular); font-size: 12px; white-space: nowrap; }
+	.device-video-stage {
+		display: flex;
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+		min-width: 0;
+		min-height: 0;
+		overflow: hidden;
+		background: var(--device-video-stage-bg);
+		container-type: size;
+		.video-container {
+			flex: 0 0 auto;
+			width: 100%;
+			max-height: 100%;
+			// 原生插件取实际 DOM 尺寸，保持 16:9 且不超出可用高度。
+			@supports (width: 1cqh) { width: min(100cqw, calc(100cqh * 16 / 9)); }
+			background: var(--device-video-stage-bg);
+		}
+		.loading-mask { display: grid; place-items: center; background: var(--device-video-stage-bg); color: var(--device-video-stage-text); font-size: 13px; }
+	}
+	.device-video-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; text-align: center; color: var(--device-video-stage-text); > .el-icon { margin-bottom: 8px; font-size: 40px; } strong { color: #e4ebf3; font-size: 15px; font-weight: 500; } span { font-size: 13px; } }
+	.device-video-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; min-height: 42px; padding: 7px 16px; color: var(--el-text-color-regular); font-size: 12px; > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
+	.device-video-query {
+		display: grid;
+		grid-template-columns: minmax(330px, 1fr) minmax(100px, 132px) minmax(100px, 132px) auto;
+		gap: 12px;
+		align-items: end;
+		flex: 0 0 auto;
+		padding: 16px;
+		border-bottom: 1px solid var(--el-border-color-lighter);
+		.el-form-item { min-width: 0; margin: 0; }
+		.el-form-item__label { padding: 0; margin-bottom: 6px; font-size: 12px; line-height: 18px; }
+		.el-form-item__content { min-width: 0; }
+		.el-date-editor, .el-select { width: 100%; min-width: 0; }
+		.el-date-editor .el-range-input { font-size: 12px; }
+		.el-date-editor .el-range-separator { flex: 0 0 20px; font-size: 12px; }
+		> .el-button { margin: 0; }
+	}
+	.device-video-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; > span { color: var(--el-text-color-regular); font-size: 12px; text-align: left; } }
+}
+
+@media (max-width: 1250px) {
+	.el-overlay .el-overlay-dialog .el-dialog.device-video-dialog .device-video-query { grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) auto; .device-video-query__date { grid-column: 1 / -1; } }
+}
+@media (max-width: 700px) {
+	.el-overlay .el-overlay-dialog .el-dialog.device-video-dialog {
+		width: calc(100% - 16px) !important;
+		height: calc(100vh - 16px);
+		height: calc(100dvh - 16px);
+		.el-dialog__header { padding: 12px 16px; }
+		.el-dialog__body { padding: 8px !important; overflow-y: auto; }
+		.el-dialog__footer { padding: 10px 16px; }
+		.device-video-heading { gap: 8px; }
+		.device-video-heading__device { padding-left: 8px; font-size: 12px; }
+		.device-video-layout { flex-direction: column; gap: 8px; min-height: min-content; }
+		.device-video-workspace { flex: 0 0 auto; min-height: 330px; overflow: visible; }
+		.device-video-stage { flex: 0 0 auto; height: auto; min-height: 180px; aspect-ratio: 16 / 9; }
+		.device-video-query { padding: 12px; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); > .el-button { grid-column: 1 / -1; } }
+		.device-video-toolbar, .device-video-status { padding-left: 12px; padding-right: 12px; }
+		.device-video-footer > span { max-width: 75%; line-height: 18px; }
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.el-dialog.device-video-dialog { --el-transition-duration: 0s; .el-dialog__close { transition: none !important; } }
+}
diff --git a/src/views/device/deviceGroupPlay/index.vue b/src/views/device/deviceGroupPlay/index.vue
index ba7ad7f..298bd99 100644
--- a/src/views/device/deviceGroupPlay/index.vue
+++ b/src/views/device/deviceGroupPlay/index.vue
@@ -64,6 +64,12 @@ const replayVideoRef = ref()
 const queryRef = ref()
 
 const videoLoading = ref(false)
+let requestSequence = 0
+let pageActive = true
+
+onActivated(() => { pageActive = true })
+onDeactivated(() => { pageActive = false; ++requestSequence; videoLoading.value = false })
+onBeforeUnmount(() => { pageActive = false; ++requestSequence })
 
 const divisionSettingList = ref([9])
 
@@ -104,7 +110,12 @@ onMounted(() => {
 
 // 树节点选择时
 const handleGetSelectNode = async (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean, selectMap: any) => {
-    if (!checkedTreeNodes || !checkedTreeNodes.length) return
+    if (!checkedTreeNodes || !checkedTreeNodes.length) {
+        state.channelCodeList = []
+        state.deviceTreeMap = []
+        await destroy()
+        return
+    }
     const list = checkedTreeNodes.filter((v: any) => v.deep == 2).map((v: any) => v.code)
     if (!list || !list.length) {
         await destroy()
@@ -126,9 +137,13 @@ const videoChangePage = ({ current, size }: any) => {
 }
 
 function init(type: string) {
+    const requestId = ++requestSequence
+    const isCurrent = () => pageActive && requestId === requestSequence && state.currentTab === type
     nextTick(async () => {
+        if (!isCurrent()) return
         videoLoading.value = true
         await new Promise(resolve => setTimeout(resolve, 500))
+        if (!isCurrent()) return
         // 查询通道列表
         let channelRecords = []
         let total = 0
@@ -147,6 +162,7 @@ function init(type: string) {
         } catch (error) {
             console.log("分组播放意外的错误error:", error);
         }
+        if (!isCurrent()) return
         switch (type) {
             case 'PREVIEW':
                 const doorChannelList: any[] = []
@@ -161,7 +177,8 @@ function init(type: string) {
                     })
                 }
                 state.windowNum = doorChannelList.length > 9 ? 9 : doorChannelList.length
-                previewVideoRef?.value?.closeVideo()
+                await previewVideoRef?.value?.closeVideo()
+                if (!isCurrent()) return
                 previewVideoRef?.value?.setTotal(total)
                 previewVideoRef.value?.startReal([...doorChannelList])
                 break;
@@ -183,7 +200,8 @@ function init(type: string) {
                     })
                 }
                 state.windowNum = replayChannelList.length > 9 ? 9 : replayChannelList.length
-                replayVideoRef?.value?.closeVideo()
+                await replayVideoRef?.value?.closeVideo()
+                if (!isCurrent()) return
                 replayVideoRef?.value?.setTotal(total)
                 replayVideoRef.value?.startPlayback([...replayChannelList])
                 break;
@@ -193,13 +211,16 @@ function init(type: string) {
 }
 
 async function destroy() {
+    ++requestSequence
     videoLoading.value = true
-    await new Promise(resolve => setTimeout(resolve, 500))
     try {
-        previewVideoRef.value.destroy()
-        replayVideoRef.value.destroy()
+        await Promise.allSettled([
+            previewVideoRef.value?.destroy?.(),
+            replayVideoRef.value?.destroy?.()
+        ])
     } catch (error) {
         console.log("销毁视频失败", error);
+    } finally {
         videoLoading.value = false
     }
 }
@@ -285,4 +306,4 @@ function getDefaultDateRange() {
     width: 100%;
     height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/door/components/doorTableDialog.vue b/src/views/door/components/doorTableDialog.vue
index 48a4480..bcc18dc 100644
--- a/src/views/door/components/doorTableDialog.vue
+++ b/src/views/door/components/doorTableDialog.vue
@@ -31,9 +31,10 @@
                     <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
                 </el-form-item>
 
-                <el-table :data="state.dataList" v-loading="state.loading" height="50vh" border
+                <AccessDirectionLegend />
+                <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" height="50vh" border
                     :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-                    @sort-change="sortChangeHandle">
+                    @sort-change="sortChangeHandle" :row-class-name="doorRecordRowClassName">
                     <el-table-column prop="swingTime" label="抓拍时间" min-width="180" />
                     <el-table-column prop="personCode" min-width="120" label="异常出入类型">
                         <template #default="{ row }">
@@ -73,7 +74,7 @@
                     </el-table-column>
                     <el-table-column prop="enterOrExit" min-width="100" label="进出门类型">
                         <template #default="{ row }">
-                            <dict-tag :options="dh_enter_or_exit" :value="row.enterOrExit" />
+                            <AccessDirectionTag kind="door" :options="dh_enter_or_exit" :value="row.enterOrExit" />
                         </template>
                     </el-table-column>
                     <el-table-column prop="openResult" min-width="100" label="开门结果">
@@ -105,6 +106,9 @@
 </template>
 
 <script setup lang="ts" name="doorTimesTableDialog">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { doorRecordRowClassName } from '/@/utils/accessDirection';
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { useDict } from '/@/hooks/dict';
 import { parseTime } from "/@/utils/formatTime"
@@ -159,4 +163,4 @@ function openDialog(query: any) {
     getDataList();
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/door/doorAlarm/index.vue b/src/views/door/doorAlarm/index.vue
index 04f1c98..ef009d6 100644
--- a/src/views/door/doorAlarm/index.vue
+++ b/src/views/door/doorAlarm/index.vue
@@ -33,9 +33,10 @@
                     </el-form-item>
                 </el-form>
             </el-row>
-            <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            <AccessDirectionLegend />
+            <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
                 :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-                @sort-change="sortChangeHandle">
+                @sort-change="sortChangeHandle" :row-class-name="doorRecordRowClassName">
                 <el-table-column type="selection" width="40" align="center" />
                 <el-table-column type="index" label="#" width="80" />
 
@@ -130,7 +131,7 @@
                 </el-table-column>
                 <el-table-column prop="enterOrExit" min-width="100" label="进出门类型">
                     <template #default="{ row }">
-                        <dict-tag :options="dh_enter_or_exit" :value="row.enterOrExit" />
+                        <AccessDirectionTag kind="door" :options="dh_enter_or_exit" :value="row.enterOrExit" />
                     </template>
                 </el-table-column>
                 <el-table-column prop="openResult" min-width="100" label="开门结果">
@@ -197,6 +198,9 @@
 </template>
 
 <script setup lang="ts" name="doorAlarm">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { doorRecordRowClassName } from '/@/utils/accessDirection';
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { useDict } from '/@/hooks/dict';
 import { parseTime } from "/@/utils/formatTime"
@@ -347,4 +351,4 @@ async function recoverPlaybackVideo(row: any) {
     display: inline-block;
     filter: blur(3px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/door/doorRecord/index.vue b/src/views/door/doorRecord/index.vue
index b2712c9..6565236 100644
--- a/src/views/door/doorRecord/index.vue
+++ b/src/views/door/doorRecord/index.vue
@@ -45,7 +45,8 @@
         <el-tab-pane label="门禁数据" name="records" />
         <el-tab-pane label="清理数据" name="cleaned" />
       </el-tabs>
-      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+      <AccessDirectionLegend />
+      <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
         :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
         @sort-change="sortChangeHandle" row-key="id" :row-class-name="tableRowClassName">
         <el-table-column v-if="activeTab === 'cleaned'" type="expand" width="64" label="详情">
@@ -56,7 +57,7 @@
                 <el-tag type="success" size="small">已保留</el-tag>
               </div>
               <el-table :data="[row.retainedRecord]" size="small" border :cell-style="tableStyle.cellStyle"
-                :header-cell-style="tableStyle.headerCellStyle" class="retained-record-table">
+                :header-cell-style="tableStyle.headerCellStyle" class="retained-record-table access-record-table" :row-class-name="doorRecordRowClassName">
                 <el-table-column prop="id" min-width="190" label="记录ID" />
                 <el-table-column prop="swingTime" min-width="180" label="刷卡时间" />
                 <el-table-column prop="personCode" min-width="120" label="人员编号">
@@ -72,7 +73,7 @@
                 <el-table-column prop="deptName" min-width="140" label="部门名称" show-overflow-tooltip />
                 <el-table-column prop="enterOrExit" min-width="120" label="进出门类型">
                   <template #default="{ row: retainedRow }">
-                    <dict-tag :options="dh_enter_or_exit" :value="retainedRow.enterOrExit" />
+                    <AccessDirectionTag kind="door" :options="dh_enter_or_exit" :value="retainedRow.enterOrExit" />
                   </template>
                 </el-table-column>
                 <el-table-column prop="openResult" min-width="100" label="开门结果">
@@ -172,7 +173,7 @@
 
         <el-table-column prop="enterOrExit" min-width="100" label="进出门类型">
           <template #default="{ row }">
-            <dict-tag :options="dh_enter_or_exit" :value="row.enterOrExit" />
+            <AccessDirectionTag kind="door" :options="dh_enter_or_exit" :value="row.enterOrExit" />
           </template>
         </el-table-column>
         <el-table-column prop="openResult" min-width="100" label="开门结果">
@@ -218,6 +219,9 @@
 </template>
 
 <script setup lang="ts" name="systemDoorRecord">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { doorRecordRowClassName } from '/@/utils/accessDirection';
 import { ElLoading } from 'element-plus'
 
 import { BasicTableProps, useTable } from "/@/hooks/table";
@@ -279,7 +283,8 @@ const handleTabChange = () => {
 }
 
 const tableRowClassName = ({ row }: { row: any }) => {
-  return activeTab.value === 'cleaned' && !row.retainedRecord ? 'no-retained-record' : ''
+  return [doorRecordRowClassName({ row }), activeTab.value === 'cleaned' && !row.retainedRecord ? 'no-retained-record' : '']
+    .filter(Boolean).join(' ')
 }
 
 onBeforeMount(() => {
diff --git a/src/views/duty/dutyPlan/components/activity-feed.vue b/src/views/duty/dutyPlan/components/activity-feed.vue
new file mode 100644
index 0000000..6135590
--- /dev/null
+++ b/src/views/duty/dutyPlan/components/activity-feed.vue
@@ -0,0 +1,180 @@
+<template>
+	<div v-loading="loading" class="activity-feed" role="list" :aria-label="emptyText.replace('暂无', '')" tabindex="0">
+		<article v-for="(record, index) in records" :key="record.id ?? index" class="activity-feed__item" role="listitem">
+			<el-image class="activity-feed__image" :src="recordImage(record)" fit="cover" :alt="kind === 'door' ? '人员抓拍' : '车辆抓拍'" lazy>
+				<template #error>
+					<div class="activity-feed__placeholder" aria-hidden="true">
+						<el-icon><User v-if="kind === 'door'" /><Van v-else /></el-icon>
+					</div>
+				</template>
+			</el-image>
+			<div class="activity-feed__content">
+				<div class="activity-feed__headline">
+					<span class="activity-feed__name" :title="recordTitle(record)">{{ recordTitle(record) }}</span>
+					<AccessDirectionTag v-if="recordDirection(record) != null" :kind="kind" :value="recordDirection(record)" />
+				</div>
+				<span class="activity-feed__location" :title="recordLocation(record)">{{ recordLocation(record) }}</span>
+				<time class="activity-feed__time" :datetime="recordTime(record)?.replace(' ', 'T')">{{ recordTime(record) || '时间未知' }}</time>
+			</div>
+		</article>
+		<el-empty v-if="!loading && !records.length" :image-size="52" :description="emptyText" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { User, Van } from '@element-plus/icons-vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { paseSingleImage } from '/@/utils/image';
+
+interface ActivityRecord {
+	id?: string | number;
+	personName?: string;
+	carNum?: string;
+	channelName?: string;
+	devChnName?: string;
+	swingTime?: string;
+	capTime?: string;
+	parseRecordImage?: string;
+	parseCarImgUrl?: string;
+	enterOrExit?: string | number | null;
+	carDirect?: string | number | null;
+}
+
+const props = withDefaults(
+	defineProps<{
+		kind: 'door' | 'car';
+		records?: ActivityRecord[];
+		loading?: boolean;
+		emptyText?: string;
+	}>(),
+	{
+		records: () => [],
+		loading: false,
+		emptyText: '暂无通行记录',
+	}
+);
+
+const recordTitle = (record: ActivityRecord) => (props.kind === 'door' ? record.personName || '未识别人员' : record.carNum || '未知车牌');
+const recordLocation = (record: ActivityRecord) => (props.kind === 'door' ? record.channelName : record.devChnName) || '位置未知';
+const recordTime = (record: ActivityRecord) => (props.kind === 'door' ? record.swingTime : record.capTime);
+const recordDirection = (record: ActivityRecord) => (props.kind === 'door' ? record.enterOrExit : record.carDirect);
+const recordImage = (record: ActivityRecord) => paseSingleImage((props.kind === 'door' ? record.parseRecordImage : record.parseCarImgUrl) || '');
+</script>
+
+<style lang="scss" scoped>
+.activity-feed {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	padding: 0 12px;
+	overscroll-behavior: contain;
+	scrollbar-width: thin;
+	scrollbar-color: var(--el-border-color) transparent;
+
+	&:focus-visible {
+		outline: 2px solid var(--el-color-primary) !important;
+		outline-offset: -2px;
+	}
+
+	&::-webkit-scrollbar {
+		width: 4px;
+	}
+	&::-webkit-scrollbar-thumb {
+		border-radius: 4px;
+		background: var(--el-border-color);
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		min-width: 0;
+		padding: 12px 0;
+		border-bottom: 1px solid var(--el-border-color-lighter);
+
+		&:last-of-type {
+			border-bottom: 0;
+		}
+	}
+
+	&__image {
+		flex: none;
+		width: 48px;
+		height: 48px;
+		overflow: hidden;
+		border: 1px solid var(--el-border-color-lighter);
+		border-radius: 6px;
+		background: var(--el-fill-color-light);
+	}
+
+	&__placeholder {
+		display: grid;
+		width: 100%;
+		height: 100%;
+		place-items: center;
+		color: var(--el-text-color-secondary);
+		font-size: 22px;
+	}
+
+	&__content {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: 3px;
+		min-width: 0;
+	}
+
+	&__headline {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		min-width: 0;
+	}
+
+	&__name,
+	&__location {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__name {
+		flex: 1;
+		color: var(--el-text-color-primary);
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 24px;
+	}
+
+	&__location,
+	&__time {
+		color: var(--el-text-color-regular);
+		font-size: 12px;
+		line-height: 18px;
+	}
+
+	&__time {
+		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
+	}
+
+	:deep(.access-direction-tag) {
+		flex: none;
+		min-height: 22px;
+		padding: 0 5px;
+		font-size: 11px;
+	}
+
+	:deep(.el-empty) {
+		min-height: 160px;
+
+		.el-empty__description {
+			margin-top: 12px;
+		}
+		p {
+			color: var(--el-text-color-regular);
+			font-size: 12px;
+		}
+	}
+}
+</style>
diff --git a/src/views/duty/dutyPlan/components/army-car-list.vue b/src/views/duty/dutyPlan/components/army-car-list.vue
index 69e7a34..93cd43e 100644
--- a/src/views/duty/dutyPlan/components/army-car-list.vue
+++ b/src/views/duty/dutyPlan/components/army-car-list.vue
@@ -1,199 +1,196 @@
 <!-- 车辆信息 -->
 <template>
-    <div class="h-full flex flex-col">
-        <com-title title="过军车数据">
-            <div class="flex-1 flex justify-center cursor-pointer" @click="handleTodayClick">
-                <span>昨日过军车{{ total.yesterday }}次</span>
-            </div>
-            <div class="flex items-center justify-center cursor-pointer" @click="handleMoreClick">
-                <span>查看更多</span>
-                <el-icon>
-                    <ArrowRightBold />
-                </el-icon>
-            </div>
-        </com-title>
-        <div v-if="false">
-            <el-date-picker v-model="timer.queryParams.capTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-                type="datetimerange" @change="handleChange" :disabledDate="disabledDate" />
-        </div>
-        <div class="flex-1 overflow-hidden flex flex-col">
-            <div class="h-[5px]" />
-            <div class="overflow-y-scroll flex-1">
-                <div v-for="v in timer.data.records" :key="v.id" class="container flex items-center gap-2 mb-[5px]">
-                    <el-image class="w-[55px] h-[55px] rounded-[2px]" :src="paseSingleImage(v.parseCarImgUrl)"
-                        fit="cover" />
-                    <div class="flex-1 flex flex-col">
-                        <div class="container-content">
-                            <span>车牌号:</span>
-                            <span>{{ v.carNum }}</span>
-                        </div>
-                        <div class="container-content">
-                            <span>位置:</span>
-                            <span>{{ v.devChnName }}</span>
-                        </div>
-                        <div class="container-content">
-                            <span>抓拍时间:</span>
-                            <span>{{ v.capTime }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div v-if="false" class="pb-[5px] flex justify-center items-center">
-                <el-pagination size="small" :page-sizes="[20]" :page-size="20" background layout="prev, pager, next"
-                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="timer.data.total" />
-            </div>
-        </div>
-    </div>
+	<section class="duty-panel duty-army-records">
+		<com-title title="军车通行">
+			<el-button class="duty-panel__more" text size="small" @click="handleMoreClick">
+				更多<el-icon aria-hidden="true"><ArrowRightBold /></el-icon>
+			</el-button>
+		</com-title>
+		<div class="duty-summary">
+			<button class="duty-summary__today" type="button" @click="handleTodayClick" aria-label="查看今日军车通行记录">
+				今日 <strong>{{ total.today }}</strong
+				><span>次</span>
+			</button>
+			<span class="duty-summary__yesterday"
+				>昨日 <strong>{{ total.yesterday }}</strong
+				><span>次</span></span
+			>
+		</div>
+		<ActivityFeed kind="car" :records="timer.data.records" :loading="loading" empty-text="暂无军车通行记录" />
+	</section>
 </template>
 
-<script setup lang="ts" name="carList">
+<script setup lang="ts" name="armyCarList">
+import ActivityFeed from './activity-feed.vue';
 import { dayjs } from 'element-plus';
 
-import * as carApi from "/@/api/car/carRecord"
+import * as carApi from '/@/api/car/carRecord';
 
-import { simplePoll } from "/@/utils/poll"
-import { paseSingleImage } from "/@/utils/image"
+import { simplePoll } from '/@/utils/poll';
 
-const { push } = useRouter()
+const loading = ref(true);
+
+const { push } = useRouter();
 
 const comTitle = defineAsyncComponent(() => import('./com-title.vue'));
 
 const timer = reactive<any>({
-    initial: null,
-    interval: 30 * 1000,
-    data: {
-        records: [],
-        total: 0
-    },
-    queryParams: {
-        current: 1,
-        size: 100,
-        isArmyCar: "1",
-        capTimeList: []
-    }
-})
+	initial: null,
+	interval: 30 * 1000,
+	data: {
+		records: [],
+		total: 0,
+	},
+	queryParams: {
+		current: 1,
+		size: 100,
+		isArmyCar: '1',
+		capTimeList: [],
+	},
+});
 
 const total = ref<any>({
-    today: 0,
-    yesterday: 0
-})
+	today: 0,
+	yesterday: 0,
+});
 
 onMounted(() => {
-    initListPoll()
-    getTotal()
-})
+	initListPoll();
+	getTotal();
+});
 
 onUnmounted(() => {
-    timer.initial.destroy()
-    timer.initial = null
-})
+	timer.initial.destroy();
+	timer.initial = null;
+});
 
 // 查看更多
 const handleMoreClick = () => {
-    const params = {
-        isArmyCar: "1",
-    }
-    push({ path: "/car/carRecord/index", query: { data: JSON.stringify(params) } })
-}
+	const params = {
+		isArmyCar: '1',
+	};
+	push({
+		path: '/car/carRecord/index',
+		query: { data: JSON.stringify(params) },
+	});
+};
 
 const handleTodayClick = () => {
-    const params = {
-        capTimeList: [
-            dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
-            dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-        ],
-        isArmyCar: "1"
-    }
-    push({ path: "/car/carRecord/index", query: { data: JSON.stringify(params) } })
-}
+	const params = {
+		capTimeList: [dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')],
+		isArmyCar: '1',
+	};
+	push({
+		path: '/car/carRecord/index',
+		query: { data: JSON.stringify(params) },
+	});
+};
 
 const handleSizeChange = (val: number) => {
-    timer.queryParams.current = 1
-    timer.queryParams.size = val
-    timer.initial.executeOnce()
-}
+	timer.queryParams.current = 1;
+	timer.queryParams.size = val;
+	timer.initial.executeOnce();
+};
 
 const handleCurrentChange = (val: number) => {
-    timer.queryParams.current = val
-    timer.initial.executeOnce()
-}
+	timer.queryParams.current = val;
+	timer.initial.executeOnce();
+};
 
 const handleChange = () => {
-    handleCurrentChange(1)
-}
+	handleCurrentChange(1);
+};
 
 // 限制日期选择范围为昨天和今天
 function disabledDate(time: Date) {
-    const today = new Date()
-    today.setHours(0, 0, 0, 0)
-    const yesterday = new Date(today)
-    yesterday.setDate(yesterday.getDate() - 1)
-    const tomorrow = new Date(today)
-    tomorrow.setDate(tomorrow.getDate() + 1)
-    // 只允许选择昨天和今天
-    return time.getTime() < yesterday.getTime() || time.getTime() >= tomorrow.getTime()
+	const today = new Date();
+	today.setHours(0, 0, 0, 0);
+	const yesterday = new Date(today);
+	yesterday.setDate(yesterday.getDate() - 1);
+	const tomorrow = new Date(today);
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	// 只允许选择昨天和今天
+	return time.getTime() < yesterday.getTime() || time.getTime() >= tomorrow.getTime();
 }
 
 const getTotal = async () => {
-    try {
-        const _params = {}
-        const { code, data } = await carApi.armyCarCountByDateType({ ..._params });
-        if (code != 0) throw new Error("code!=0")
-        console.log("军车出车次数(根据时间类型):", data);
-        if (!data) return
-        const today = data.find((v: any) => v.dateType == 'TODAY')
-        const yesterday = data.find((v: any) => v.dateType == 'YESTERDAY')
-        total.value = {
-            today: today?.timeCount || 0,
-            yesterday: yesterday?.timeCount || 0
-        }
-    } catch (error) {
-        console.error("|军车出车次数(根据时间类型)|意外的错误:", error);
-    }
-}
+	try {
+		const _params = {};
+		const { code, data } = await carApi.armyCarCountByDateType({ ..._params });
+		if (code != 0) throw new Error('code!=0');
+		console.log('军车出车次数(根据时间类型):', data);
+		if (!data) return;
+		const today = data.find((v: any) => v.dateType == 'TODAY');
+		const yesterday = data.find((v: any) => v.dateType == 'YESTERDAY');
+		total.value = {
+			today: today?.timeCount || 0,
+			yesterday: yesterday?.timeCount || 0,
+		};
+	} catch (error) {
+		console.error('|军车出车次数(根据时间类型)|意外的错误:', error);
+	}
+};
 
 // 过车列表
 const initListPoll = () => {
-    timer.initial = simplePoll(async () => {
-        try {
-            const { code, data } = await carApi.totalPage({ ...timer.queryParams });
-            if (code != 0) throw new Error("code!=0")
-            console.log("过车列表:", data);
-            if (!data || !data.records) return
-            timer.data.records = data.records
-            timer.data.total = data.total
-            console.log("timer.data.total:", timer.data.total);
-
-        } catch (error) {
-            console.error("|过车列表|意外的错误:", error);
-        }
-    }, timer.interval);
-}
-
+	timer.initial = simplePoll(async () => {
+		try {
+			const { code, data } = await carApi.totalPage({ ...timer.queryParams });
+			if (code != 0) throw new Error('code!=0');
+			console.log('过车列表:', data);
+			if (!data || !data.records) return;
+			timer.data.records = data.records;
+			timer.data.total = data.total;
+			console.log('timer.data.total:', timer.data.total);
+		} catch (error) {
+			console.error('|过车列表|意外的错误:', error);
+		} finally {
+			loading.value = false;
+		}
+	}, timer.interval);
+};
 </script>
 
 <style lang="scss" scoped>
-.container {
-    padding: 4px 6px;
-    background-color: white;
-    box-shadow: 0px 4px 13px -2px rgba(210, 210, 210, 0.5);
-    border-radius: 6px;
+.duty-summary {
+	display: flex;
+	flex: none;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 10px 14px;
+	border-bottom: 1px solid var(--el-border-color-lighter);
+	color: var(--el-text-color-regular);
+	font-size: 12px;
 
-    .container-content {
-        display: flex;
-        align-items: center;
+	&__today,
+	&__yesterday {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 4px;
+	}
 
-        span {
-            display: inline-block;
-        }
+	&__today {
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
 
-        span:nth-child(1) {
-            min-width: 70px;
-        }
+		&:hover {
+			color: var(--el-color-primary);
+		}
+		strong {
+			color: var(--el-color-primary);
+		}
+	}
 
-        span:nth-child(2) {
-            flex: 1;
-        }
-    }
+	strong {
+		color: var(--el-text-color-primary);
+		font-size: 17px;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/duty/dutyPlan/components/car-list.vue b/src/views/duty/dutyPlan/components/car-list.vue
index 210250c..9fe136d 100644
--- a/src/views/duty/dutyPlan/components/car-list.vue
+++ b/src/views/duty/dutyPlan/components/car-list.vue
@@ -1,185 +1,143 @@
 <!-- 车辆信息 -->
 <template>
-    <div class="h-full flex flex-col">
-        <com-title title="过车数据">
-            <div class="flex items-center justify-center cursor-pointer" @click="handleMoreClick">
-                <span>查看更多</span>
-                <el-icon>
-                    <ArrowRightBold />
-                </el-icon>
-            </div>
-        </com-title>
-        <div v-if="false">
-            <el-date-picker v-model="timer.queryParams.capTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-                type="datetimerange" @change="handleChange" :disabledDate="disabledDate" />
-        </div>
-        <div class="flex-1 overflow-hidden flex flex-col">
-            <div class="h-[5px]" />
-            <div class="overflow-y-scroll flex-1">
-                <div v-for="v in timer.data.records" :key="v.id" class="container flex items-center gap-2 mb-[5px]">
-                    <el-image class="w-[55px] h-[55px] rounded-[2px]" :src="paseSingleImage(v.parseCarImgUrl)"
-                        fit="cover" />
-                    <div class="flex-1 flex flex-col">
-                        <div class="container-content">
-                            <span>车牌号:</span>
-                            <span>{{ v.carNum }}</span>
-                        </div>
-                        <div class="container-content">
-                            <span>位置:</span>
-                            <span>{{ v.devChnName }}</span>
-                        </div>
-                        <div class="container-content">
-                            <span>抓拍时间:</span>
-                            <span>{{ v.capTime }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="pb-[5px] flex justify-center items-center">
-                <el-pagination size="small" :page-sizes="[20]" :page-size="20" background layout="prev, pager, next"
-                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="timer.data.total" />
-            </div>
-        </div>
-    </div>
+	<section class="duty-panel duty-car-records">
+		<com-title title="车辆通行">
+			<el-button class="duty-panel__more" text size="small" @click="handleMoreClick">
+				更多<el-icon aria-hidden="true"><ArrowRightBold /></el-icon>
+			</el-button>
+		</com-title>
+		<ActivityFeed kind="car" :records="timer.data.records" :loading="loading" empty-text="暂无车辆通行记录" />
+		<footer v-if="timer.data.total > timer.queryParams.size" class="duty-record-footer">
+			<el-pagination
+				small
+				:pager-count="5"
+				:page-size="timer.queryParams.size"
+				:current-page="timer.queryParams.current"
+				layout="prev, pager, next"
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				:total="timer.data.total"
+			/>
+		</footer>
+	</section>
 </template>
 
 <script setup lang="ts" name="carList">
+import ActivityFeed from './activity-feed.vue';
 import { dayjs } from 'element-plus';
 
-import * as carApi from "/@/api/car/carRecord"
+import * as carApi from '/@/api/car/carRecord';
 
-import { simplePoll } from "/@/utils/poll"
-import { paseSingleImage } from "/@/utils/image"
+import { simplePoll } from '/@/utils/poll';
 
-const { push } = useRouter()
+const loading = ref(true);
+
+const { push } = useRouter();
 
 const comTitle = defineAsyncComponent(() => import('./com-title.vue'));
 
 const timer = reactive<any>({
-    initial: null,
-    interval: 30 * 1000,
-    data: {
-        records: [],
-        total: 0
-    },
-    queryParams: {
-        current: 1,
-        size: 20,
-        isArmyCar: "0",
-        capTimeList: []
-    }
-})
+	initial: null,
+	interval: 30 * 1000,
+	data: {
+		records: [],
+		total: 0,
+	},
+	queryParams: {
+		current: 1,
+		size: 20,
+		isArmyCar: '0',
+		capTimeList: [],
+	},
+});
 
 const total = ref<any>({
-    today: 0,
-    yesterday: 0
-})
+	today: 0,
+	yesterday: 0,
+});
 
 onMounted(() => {
-    initListPoll()
-    // getTotal()
-})
+	initListPoll();
+	// getTotal()
+});
 
 onUnmounted(() => {
-    timer.initial.destroy()
-    timer.initial = null
-})
+	timer.initial.destroy();
+	timer.initial = null;
+});
 
 // 查看更多
 const handleMoreClick = () => {
-    const params = {
-        isArmyCar: "0",
-    }
-    push({ path: "/car/carRecord/index", query: { data: JSON.stringify(params) } })
-}
+	const params = {
+		isArmyCar: '0',
+	};
+	push({
+		path: '/car/carRecord/index',
+		query: { data: JSON.stringify(params) },
+	});
+};
 
 const handleSizeChange = (val: number) => {
-    timer.queryParams.current = 1
-    timer.queryParams.size = val
-    timer.initial.executeOnce()
-}
+	timer.queryParams.current = 1;
+	timer.queryParams.size = val;
+	timer.initial.executeOnce();
+};
 
 const handleCurrentChange = (val: number) => {
-    timer.queryParams.current = val
-    timer.initial.executeOnce()
-}
+	timer.queryParams.current = val;
+	timer.initial.executeOnce();
+};
 
 const handleChange = () => {
-    handleCurrentChange(1)
-}
+	handleCurrentChange(1);
+};
 
 // 限制日期选择范围为昨天和今天
 function disabledDate(time: Date) {
-    const today = new Date()
-    today.setHours(0, 0, 0, 0)
-    const yesterday = new Date(today)
-    yesterday.setDate(yesterday.getDate() - 1)
-    const tomorrow = new Date(today)
-    tomorrow.setDate(tomorrow.getDate() + 1)
-    // 只允许选择昨天和今天
-    return time.getTime() < yesterday.getTime() || time.getTime() >= tomorrow.getTime()
+	const today = new Date();
+	today.setHours(0, 0, 0, 0);
+	const yesterday = new Date(today);
+	yesterday.setDate(yesterday.getDate() - 1);
+	const tomorrow = new Date(today);
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	// 只允许选择昨天和今天
+	return time.getTime() < yesterday.getTime() || time.getTime() >= tomorrow.getTime();
 }
 
 const getTotal = async () => {
-    try {
-        const _params = {}
-        const { code, data } = await carApi.armyCarCountByDateType({ ..._params });
-        if (code != 0) throw new Error("code!=0")
-        console.log("军车出车次数(根据时间类型):", data);
-        if (!data) return
-        const today = data.find((v: any) => v.dateType == 'TODAY')
-        const yesterday = data.find((v: any) => v.dateType == 'YESTERDAY')
-        total.value = {
-            today: today?.timeCount || 0,
-            yesterday: yesterday?.timeCount || 0
-        }
-    } catch (error) {
-        console.error("|军车出车次数(根据时间类型)|意外的错误:", error);
-    }
-}
+	try {
+		const _params = {};
+		const { code, data } = await carApi.armyCarCountByDateType({ ..._params });
+		if (code != 0) throw new Error('code!=0');
+		console.log('军车出车次数(根据时间类型):', data);
+		if (!data) return;
+		const today = data.find((v: any) => v.dateType == 'TODAY');
+		const yesterday = data.find((v: any) => v.dateType == 'YESTERDAY');
+		total.value = {
+			today: today?.timeCount || 0,
+			yesterday: yesterday?.timeCount || 0,
+		};
+	} catch (error) {
+		console.error('|军车出车次数(根据时间类型)|意外的错误:', error);
+	}
+};
 
 // 过车列表
 const initListPoll = () => {
-    timer.initial = simplePoll(async () => {
-        try {
-            const { code, data } = await carApi.totalPage({ ...timer.queryParams });
-            if (code != 0) throw new Error("code!=0")
-            console.log("过车列表:", data);
-            if (!data || !data.records) return
-            timer.data.records = data.records
-            timer.data.total = data.total
-            console.log("timer.data.total:", timer.data.total);
-
-        } catch (error) {
-            console.error("|过车列表|意外的错误:", error);
-        }
-    }, timer.interval);
-}
-
+	timer.initial = simplePoll(async () => {
+		try {
+			const { code, data } = await carApi.totalPage({ ...timer.queryParams });
+			if (code != 0) throw new Error('code!=0');
+			console.log('过车列表:', data);
+			if (!data || !data.records) return;
+			timer.data.records = data.records;
+			timer.data.total = data.total;
+			console.log('timer.data.total:', timer.data.total);
+		} catch (error) {
+			console.error('|过车列表|意外的错误:', error);
+		} finally {
+			loading.value = false;
+		}
+	}, timer.interval);
+};
 </script>
-
-<style lang="scss" scoped>
-.container {
-    padding: 4px 6px;
-    background-color: white;
-    box-shadow: 0px 4px 13px -2px rgba(210, 210, 210, 0.5);
-    border-radius: 6px;
-
-    .container-content {
-        display: flex;
-        align-items: center;
-
-        span {
-            display: inline-block;
-        }
-
-        span:nth-child(1) {
-            min-width: 70px;
-        }
-
-        span:nth-child(2) {
-            flex: 1;
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/duty/dutyPlan/components/com-title.vue b/src/views/duty/dutyPlan/components/com-title.vue
index 0eb7918..8167361 100644
--- a/src/views/duty/dutyPlan/components/com-title.vue
+++ b/src/views/duty/dutyPlan/components/com-title.vue
@@ -1,41 +1,59 @@
 <template>
-    <div class="title">
-        <div class="title-text" :class="props.titleDirection == 'left' ? 'justify-start' : 'justify-end'">
-            <span>{{ props.title }}</span>
-        </div>
-        <div class="flex-1 h-full flex items-center justify-end">
-            <slot></slot>
-        </div>
-    </div>
+	<header class="duty-panel-heading">
+		<h2 class="duty-panel-heading__title" :class="{ 'is-right': props.titleDirection === 'right' }">
+			{{ props.title }}
+		</h2>
+		<div v-if="$slots.default" class="duty-panel-heading__actions">
+			<slot />
+		</div>
+	</header>
 </template>
 
 <script setup lang="ts" name="comTitle">
-
 type Props = {
-    title: string
-    titleDirection: "left" | "right"
-}
+	title: string;
+	titleDirection?: 'left' | 'right';
+};
 
 const props = withDefaults(defineProps<Props>(), {
-    title: "标题",
-    titleDirection: "left"
-})
-
+	title: '标题',
+	titleDirection: 'left',
+});
 </script>
 
 <style lang="scss" scoped>
-.title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 35px;
+.duty-panel-heading {
+	display: flex;
+	flex: none;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px 12px;
+	min-height: 52px;
+	padding: 10px 14px;
+	border-bottom: 1px solid var(--el-border-color-lighter);
 
-    &-text {
-        display: flex;
-        padding: 0 10px;
-        font-size: 18px;
-        font-weight: bold;
-        color: #577cf7;
-    }
+	&__title {
+		min-width: 0;
+		margin: 0;
+		color: var(--el-text-color-primary);
+		font-size: 15px;
+		font-weight: 600;
+		line-height: 24px;
+
+		&.is-right {
+			text-align: right;
+		}
+	}
+
+	&__actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 8px;
+		min-width: 0;
+		max-width: 100%;
+	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/duty/dutyPlan/components/door-list.vue b/src/views/duty/dutyPlan/components/door-list.vue
index 51513fd..ff394a6 100644
--- a/src/views/duty/dutyPlan/components/door-list.vue
+++ b/src/views/duty/dutyPlan/components/door-list.vue
@@ -1,155 +1,124 @@
 <!-- 车辆信息 -->
 <template>
-    <div class="h-full flex flex-col">
-        <com-title title="过人数据">
-            <div class="flex items-center justify-center cursor-pointer" @click="handleMoreClick">
-                <span>查看更多</span>
-                <el-icon>
-                    <ArrowRightBold />
-                </el-icon>
-            </div>
-        </com-title>
-        <div>
-            <el-date-picker v-model="timer.queryParams.swingTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-                type="datetimerange" @change="handleChange" :disabledDate="disabledDate" />
-        </div>
-        <div class="flex-1 overflow-hidden flex flex-col">
-            <div class="h-[5px]" />
-            <div class="overflow-y-scroll flex-1">
-                <div v-for="v in timer.data.records" :key="v.id"
-                    class="container flex items-center gap-2 mb-[5px] overflow-y-scroll">
-                    <el-image class="w-[55px] h-[55px] rounded-[2px]" :src="paseSingleImage(v.parseRecordImage)"
-                        fit="cover" />
-                    <div class="flex-1 flex flex-col">
-                        <div class="container-content">
-                            <span>人员</span>
-                            <span>{{ v.personName }}</span>
-                        </div>
-                        <div class="container-content">
-                            <span>位置</span>
-                            <span>{{ v.channelName }}</span>
-                        </div>
-                        <div class="container-content">
-                            <span>抓拍时间</span>
-                            <span>{{ v.swingTime }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="pb-[5px] flex justify-center items-center">
-                <el-pagination size="small" :page-sizes="[20]" :page-size="20" background layout="prev, pager, next"
-                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="timer.data.total" />
-            </div>
-        </div>
-    </div>
+	<section class="duty-panel duty-person-records">
+		<com-title title="人员通行">
+			<el-button class="duty-panel__more" text size="small" @click="handleMoreClick">
+				更多<el-icon aria-hidden="true"><ArrowRightBold /></el-icon>
+			</el-button>
+		</com-title>
+		<div class="duty-record-filter">
+			<el-date-picker
+				v-model="timer.queryParams.swingTimeList"
+				value-format="YYYY-MM-DD HH:mm:ss"
+				format="MM-DD HH:mm"
+				type="datetimerange"
+				size="small"
+				start-placeholder="开始时间"
+				end-placeholder="结束时间"
+				range-separator="至"
+				aria-label="筛选人员通行时间"
+				@change="handleChange"
+				:disabled-date="disabledDate"
+			/>
+		</div>
+		<ActivityFeed kind="door" :records="timer.data.records" :loading="loading" empty-text="暂无人员通行记录" />
+		<footer v-if="timer.data.total > timer.queryParams.size" class="duty-record-footer">
+			<el-pagination
+				small
+				:pager-count="5"
+				:page-size="timer.queryParams.size"
+				:current-page="timer.queryParams.current"
+				layout="prev, pager, next"
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				:total="timer.data.total"
+			/>
+		</footer>
+	</section>
 </template>
 
-<script setup lang="ts" name="carList">
-import * as doorApi from "/@/api/door/doorRecord"
+<script setup lang="ts" name="doorList">
+import ActivityFeed from './activity-feed.vue';
+import * as doorApi from '/@/api/door/doorRecord';
 
-import { simplePoll } from "/@/utils/poll"
-import { paseSingleImage } from "/@/utils/image"
+import { simplePoll } from '/@/utils/poll';
 
-const { push } = useRouter()
+const loading = ref(true);
+
+const { push } = useRouter();
 
 const comTitle = defineAsyncComponent(() => import('./com-title.vue'));
 
 const timer = reactive<any>({
-    initial: null,
-    interval: 10 * 1000,
-    data: {
-        records: [],
-        total: 20
-    },
-    queryParams: {
-        swingTimeList: [],
-        current: 1,
-        size: 20
-    }
-})
+	initial: null,
+	interval: 10 * 1000,
+	data: {
+		records: [],
+		total: 20,
+	},
+	queryParams: {
+		swingTimeList: [],
+		current: 1,
+		size: 20,
+	},
+});
 
 onMounted(() => {
-    initListPoll()
-})
+	initListPoll();
+});
 
 onUnmounted(() => {
-    timer.initial.destroy()
-    timer.initial = null
-})
+	timer.initial.destroy();
+	timer.initial = null;
+});
 
 // 查看更多
 const handleMoreClick = () => {
-    push({ path: "/door/doorRecord/index" })
-}
+	push({ path: '/door/doorRecord/index' });
+};
 
 const handleSizeChange = (val: number) => {
-    timer.queryParams.current = 1
-    timer.queryParams.size = val
-    timer.initial.executeOnce()
-}
+	timer.queryParams.current = 1;
+	timer.queryParams.size = val;
+	timer.initial.executeOnce();
+};
 
 const handleChange = () => {
-    handleCurrentChange(1)
-}
+	handleCurrentChange(1);
+};
 
 const handleCurrentChange = (val: number) => {
-    timer.queryParams.current = val
-    timer.initial.executeOnce()
-}
+	timer.queryParams.current = val;
+	timer.initial.executeOnce();
+};
 
 // 限制日期选择范围为昨天和今天
 function disabledDate(time: Date) {
-    const today = new Date()
-    today.setHours(0, 0, 0, 0)
-    const yesterday = new Date(today)
-    yesterday.setDate(yesterday.getDate() - 1)
-    const tomorrow = new Date(today)
-    tomorrow.setDate(tomorrow.getDate() + 1)
-    // 只允许选择昨天和今天
-    return time.getTime() < yesterday.getTime() || time.getTime() >= tomorrow.getTime()
+	const today = new Date();
+	today.setHours(0, 0, 0, 0);
+	const yesterday = new Date(today);
+	yesterday.setDate(yesterday.getDate() - 1);
+	const tomorrow = new Date(today);
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	// 只允许选择昨天和今天
+	return time.getTime() < yesterday.getTime() || time.getTime() >= tomorrow.getTime();
 }
 
 // 过人数据
 const initListPoll = () => {
-    timer.initial = simplePoll(async () => {
-        try {
-            const { code, data } = await doorApi.totalPage({ ...timer.queryParams });
-            if (code != 0) throw new Error("code!=0")
-            console.log("过人数据:", data);
-            if (!data || !data.records) return
-            timer.data.records = data.records
-            timer.data.total = data.total
-        } catch (error) {
-            console.error("|过人数据|意外的错误:", error);
-        }
-    }, timer.interval);
-}
-
-
+	timer.initial = simplePoll(async () => {
+		try {
+			const { code, data } = await doorApi.totalPage({ ...timer.queryParams });
+			if (code != 0) throw new Error('code!=0');
+			console.log('过人数据:', data);
+			if (!data || !data.records) return;
+			timer.data.records = data.records;
+			timer.data.total = data.total;
+		} catch (error) {
+			console.error('|过人数据|意外的错误:', error);
+		} finally {
+			loading.value = false;
+		}
+	}, timer.interval);
+};
 </script>
-
-<style lang="scss" scoped>
-.container {
-    padding: 4px 6px;
-    background-color: white;
-    box-shadow: 0px 4px 13px -2px rgba(210, 210, 210, 0.5);
-    border-radius: 6px;
-
-    .container-content {
-        display: flex;
-        align-items: center;
-
-        span {
-            display: inline-block;
-        }
-
-        span:nth-child(1) {
-            min-width: 70px;
-        }
-
-        span:nth-child(2) {
-            flex: 1;
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/duty/dutyPlan/components/duty-table.vue b/src/views/duty/dutyPlan/components/duty-table.vue
index 2984913..10d23c1 100644
--- a/src/views/duty/dutyPlan/components/duty-table.vue
+++ b/src/views/duty/dutyPlan/components/duty-table.vue
@@ -1,154 +1,176 @@
 <!-- 排班视图 -->
 <template>
-    <div class="w-full h-full flex flex-col">
-        <com-title title="基地周值班表">
-            <select-duty v-model="refreshForm.dutyId" autoFirst style="width: 250px;" />
-        </com-title>
-        <el-table v-if="tableHeaderList && tableHeaderList.length" style="padding-top: 10px;" :data="disposeDataList"
-            v-loading="state.loading" border
-            :cell-style="{ ...tableStyle.cellStyle, fontSize: '14px', padding: '8px 0 !important' }"
-            :header-cell-style="{ ...tableStyle.headerCellStyle, fontSize: '12px', padding: '8px 0 !important' }"
-            @sort-change="sortChangeHandle">
-            <el-table-column v-for="(v, i) in tableHeaderList" :width="getWidth(v)" :prop="v.prop" :label="v.label">
-                <el-table-column v-if="v.children && v.children.length" v-for="(v2, i2) in v.children" :prop="v2.prop"
-                    :label="v2.label" />
-            </el-table-column>
-        </el-table>
-        <el-empty class="w-full h-full flex justify-center items-center" v-else description="暂无排班数据" />
-    </div>
+	<section class="duty-panel duty-roster">
+		<com-title title="基地周值班表">
+			<div class="duty-panel__select">
+				<select-duty v-model="refreshForm.dutyId" autoFirst aria-label="选择值班计划" />
+			</div>
+		</com-title>
+		<div class="duty-panel__body duty-roster__body" v-loading="state.loading">
+			<el-table
+				v-if="tableHeaderList.length"
+				class="duty-roster__table"
+				:data="disposeDataList"
+				height="100%"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@sort-change="sortChangeHandle"
+			>
+				<el-table-column
+					v-for="(v, i) in tableHeaderList"
+					:key="v.prop || v.label"
+					:min-width="i === 0 ? 112 : 96"
+					:fixed="i === 0 ? 'left' : false"
+					:prop="v.prop"
+					:label="v.label"
+					show-overflow-tooltip
+				>
+					<el-table-column
+						v-if="v.children && v.children.length"
+						v-for="v2 in v.children"
+						:key="v2.prop"
+						:prop="v2.prop"
+						:label="v2.label"
+						min-width="88"
+						show-overflow-tooltip
+					/>
+				</el-table-column>
+			</el-table>
+			<el-empty v-else :image-size="64" description="暂无排班数据" />
+		</div>
+	</section>
 </template>
 
 <script setup lang="ts" name="dutyTable">
-import { BasicTableProps, useTable } from "/@/hooks/table";
+import { BasicTableProps, useTable } from '/@/hooks/table';
 
-import * as sysDutyApi from "/@/api/sys/sysDuty";
-import * as sysDutyItemApi from "/@/api/sys/sysDutyItem";
+import * as sysDutyApi from '/@/api/sys/sysDuty';
+import * as sysDutyItemApi from '/@/api/sys/sysDutyItem';
 
 const comTitle = defineAsyncComponent(() => import('./com-title.vue'));
 
-const tableHeaderList = ref<Array<{
-    prop: string,
-    label: string,
-    children: Array<{
-        prop: string,
-        label: string,
-    }>
-}>>([])
+const tableHeaderList = ref<
+	Array<{
+		prop: string;
+		label: string;
+		children: Array<{
+			prop: string;
+			label: string;
+		}>;
+	}>
+>([]);
 
 const refreshForm = reactive<any>({
-    dutyId: ""
-})
+	dutyId: '',
+});
 
-const detail = reactive<any>({})
+const detail = reactive<any>({});
 
-const disposeDataList = ref<any>([])
+const disposeDataList = ref<any>([]);
 
 const state: BasicTableProps = reactive<BasicTableProps>({
-    createdIsNeed: false,
-    queryForm: {
-        dutyId: ""
-    },
-    pageList: sysDutyItemApi.fetchList
-})
+	createdIsNeed: false,
+	queryForm: {
+		dutyId: '',
+	},
+	pageList: sysDutyItemApi.fetchList,
+});
 
 //  table hook
-const {
-    getDataList,
-    currentChangeHandle,
-    sizeChangeHandle,
-    sortChangeHandle,
-    downBlobFile,
-    tableStyle
-} = useTable(state)
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);
 
 watch(
-    () => refreshForm.dutyId,
-    (newVal, oldValue) => {
-        if (newVal == oldValue) return
-        refresh(newVal)
-    },
-)
-
-const getWidth = (v: any) => {
-    if (v.children && v.children.length) {
-        return 10
-    }
-    return 100
-}
+	() => refreshForm.dutyId,
+	(newVal, oldValue) => {
+		if (newVal == oldValue) return;
+		refresh(newVal);
+	}
+);
 
 const refresh = async (id: string) => {
-    state.queryForm.dutyId = id
-    if (!id) return
-    await getsysDutyData(id)
-    await getDataList()
-    const _list: Array<any> = []
-    if (state.dataList && state.dataList.length) {
-        for (const v of state.dataList) {
-            if (!v.rowJson || !v.rowJson.length) continue
-            const _obj: any = {}
-            for (const item of v.rowJson) {
-                _obj[item.key] = item.content
-            }
-            _list.push(_obj)
-        }
-    }
-    disposeDataList.value = _list
-}
+	state.queryForm.dutyId = id;
+	if (!id) return;
+	await getsysDutyData(id);
+	await getDataList();
+	const _list: Array<any> = [];
+	if (state.dataList && state.dataList.length) {
+		for (const v of state.dataList) {
+			if (!v.rowJson || !v.rowJson.length) continue;
+			const _obj: any = {};
+			for (const item of v.rowJson) {
+				_obj[item.key] = item.content;
+			}
+			_list.push(_obj);
+		}
+	}
+	disposeDataList.value = _list;
+};
 
 // 初始化表单数据
 const getsysDutyData = async (id: string) => {
-    // 获取数据
-    try {
-        const { data } = await sysDutyApi.getObj(id)
-        Object.assign(detail, data)
-        const _tableHeaderList: Array<{
-            prop: string,
-            label: string,
-            children: []
-        }> = []
-        if (data && data.configJson && data.configJson.length) {
-            for (let index = 0; index < data.configJson.length; index++) {
-                const element = data.configJson[index];
-                if (!element) continue
-                const isExist = _tableHeaderList.some(v => v.label == element.mainLabel)
-                if (isExist) continue
-                const entity = {
-                    prop: element.key,
-                    label: element.mainLabel,
-                    children: []
-                }
-                const children = data.configJson.filter((v: any) => v.mainLabel == element.mainLabel) ?? []
-                if (children.length >= 2) {
-                    entity.prop = ""
-                    entity.children = children.map((v: any) => {
-                        return {
-                            prop: v.key,
-                            label: v.subLabel,
-                        }
-                    })
-                }
-                _tableHeaderList.push(entity as any)
-            }
-        }
-        tableHeaderList.value = _tableHeaderList
-        console.log("tableHeaderList:", tableHeaderList.value);
-    } catch (error) {
-        console.log("|初始化表单数据|意外的错误:", error);
-    }
+	// 获取数据
+	try {
+		const { data } = await sysDutyApi.getObj(id);
+		Object.assign(detail, data);
+		const _tableHeaderList: Array<{
+			prop: string;
+			label: string;
+			children: [];
+		}> = [];
+		if (data && data.configJson && data.configJson.length) {
+			for (let index = 0; index < data.configJson.length; index++) {
+				const element = data.configJson[index];
+				if (!element) continue;
+				const isExist = _tableHeaderList.some((v) => v.label == element.mainLabel);
+				if (isExist) continue;
+				const entity = {
+					prop: element.key,
+					label: element.mainLabel,
+					children: [],
+				};
+				const children = data.configJson.filter((v: any) => v.mainLabel == element.mainLabel) ?? [];
+				if (children.length >= 2) {
+					entity.prop = '';
+					entity.children = children.map((v: any) => {
+						return {
+							prop: v.key,
+							label: v.subLabel,
+						};
+					});
+				}
+				_tableHeaderList.push(entity as any);
+			}
+		}
+		tableHeaderList.value = _tableHeaderList;
+		console.log('tableHeaderList:', tableHeaderList.value);
+	} catch (error) {
+		console.log('|初始化表单数据|意外的错误:', error);
+	}
 };
-
 </script>
 
-<style lang="scss">
-.el-cell {
-    padding: 0 !important;
-    background: red !important;
+<style lang="scss" scoped>
+.duty-roster__body {
+	overflow: hidden;
 }
 
-.el-table__cell {
-    :deep(.el-cell) {
-        padding: 0 !important;
-        background: red !important;
-    }
+.duty-roster__table {
+	--el-table-border-color: var(--el-border-color-lighter);
+	font-size: 13px;
+
+	:deep(.el-table__cell) {
+		padding: 8px 0;
+	}
+
+	:deep(th.el-table__cell) {
+		font-size: 12px;
+		font-weight: 600;
+	}
+
+	:deep(.cell) {
+		padding: 0 10px;
+		line-height: 20px;
+	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/duty/dutyPlan/components/video-pay.vue b/src/views/duty/dutyPlan/components/video-pay.vue
index 808d3cb..1488848 100644
--- a/src/views/duty/dutyPlan/components/video-pay.vue
+++ b/src/views/duty/dutyPlan/components/video-pay.vue
@@ -1,69 +1,99 @@
 <!-- 视频预览 -->
 <template>
-    <div class="w-full h-full flex flex-col pt-[10px]">
-        <com-title title="监控预览">
-            <select-device-tree v-model="refreshForm.dutyId" autoFirst style="width: 250px;" @change="groupChange" />
-        </com-title>
-        <div class="h-[10px]" />
-        <RtspPluginVideo ref="rtspPluginVideoRef" />
-    </div>
+	<section class="duty-panel duty-video">
+		<com-title title="监控预览">
+			<div class="duty-panel__select">
+				<select-device-tree v-model="refreshForm.dutyId" autoFirst aria-label="选择监控分组" @change="groupChange" />
+			</div>
+		</com-title>
+		<div class="duty-panel__body duty-video__body">
+			<div class="duty-video__frame">
+				<RtspPluginVideo ref="rtspPluginVideoRef" />
+			</div>
+		</div>
+	</section>
 </template>
 
 <script setup lang="ts" name="videoPay">
-import * as deviceChannelApi from "/@/api/device/deviceChannel"
+import * as deviceChannelApi from '/@/api/device/deviceChannel';
 
 const comTitle = defineAsyncComponent(() => import('./com-title.vue'));
 
 const refreshForm = reactive<any>({
-    dutyId: null,
-    groupIdList: [],
-    deviceTreeMap: [],
-    deviceChannelCodeList: []
-})
-
-const rtspPluginVideoRef = ref<any>(null)
+	dutyId: null,
+	groupIdList: [],
+	deviceTreeMap: [],
+	deviceChannelCodeList: [],
+});
 
+const rtspPluginVideoRef = ref<any>(null);
+let requestSequence = 0;
+let pageActive = true;
+onActivated(() => { pageActive = true; });
+onDeactivated(() => { pageActive = false; ++requestSequence; });
+onBeforeUnmount(() => { pageActive = false; ++requestSequence; });
 
 const refreshVideo = async () => {
-    // 查询通道列表
-    try {
-        const _params = {
-            current: 1,
-            size: 64,
-            deviceTreeMap: refreshForm.deviceTreeMap ?? null
-        }
-        let { code, data } = await deviceChannelApi.getChannelPage(_params);
-        if (code != 0) throw new Error("")
-        if (data.records && data.records.length) {
-            const channelList = []
-            for (let index = 0; index < data.records.length; index++) {
-                const element = data.records[index];
-                channelList.push({
-                    channelId: element.channelCode,
-                    channelName: element.channelName,
-                    snum: index,
-                    // 默认辅码流
-                    streamType: 2
-                })
-            }
-            rtspPluginVideoRef.value?.startReal(channelList)
-        }
-    } catch (error) {
-        console.log("分组播放意外的错误error:", error);
-    }
-}
+	const requestId = ++requestSequence;
+	// 查询通道列表
+	try {
+		const _params = {
+			current: 1,
+			size: 64,
+			deviceTreeMap: refreshForm.deviceTreeMap ?? null,
+		};
+		let { code, data } = await deviceChannelApi.getChannelPage(_params);
+		if (!pageActive || requestId !== requestSequence) return;
+		if (code != 0) throw new Error('');
+		if (data.records && data.records.length) {
+			const channelList = [];
+			for (let index = 0; index < data.records.length; index++) {
+				const element = data.records[index];
+				channelList.push({
+					channelId: element.channelCode,
+					channelName: element.channelName,
+					snum: index,
+					// 默认辅码流
+					streamType: 2,
+				});
+			}
+			rtspPluginVideoRef.value?.startReal(channelList);
+		}
+	} catch (error) {
+		console.log('分组播放意外的错误error:', error);
+	}
+};
 
 const groupChange = (e: any) => {
-    if (!e) return
-    const [groupIds, channelCodes, parentChildGroup] = e
-    if (!groupIds.length && !channelCodes.length) {
-        return
-    }
-    refreshForm.groupIdList = groupIds
-    refreshForm.deviceChannelCodeList = channelCodes
-    refreshForm.deviceTreeMap = parentChildGroup
-    refreshVideo()
-}
+	const [groupIds, channelCodes, parentChildGroup] = e || [[], [], []];
+	if (!groupIds.length && !channelCodes.length) {
+		++requestSequence;
+		refreshForm.groupIdList = [];
+		refreshForm.deviceChannelCodeList = [];
+		refreshForm.deviceTreeMap = [];
+		rtspPluginVideoRef.value?.destroy?.();
+		return;
+	}
+	refreshForm.groupIdList = groupIds;
+	refreshForm.deviceChannelCodeList = channelCodes;
+	refreshForm.deviceTreeMap = parentChildGroup;
+	refreshVideo();
+};
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.duty-video__body,
+.duty-video__frame {
+	display: flex;
+	min-height: 0;
+}
+
+.duty-video__frame {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 6px;
+	background: #20262e;
+}
+</style>
diff --git a/src/views/duty/dutyPlan/index.vue b/src/views/duty/dutyPlan/index.vue
index 2af5ffc..90840ba 100644
--- a/src/views/duty/dutyPlan/index.vue
+++ b/src/views/duty/dutyPlan/index.vue
@@ -1,25 +1,18 @@
-<!-- 值班类型 -->
+<!-- 排班工作台 -->
 <template>
-    <div class="layout-padding">
-        <el-container>
-            <el-aside class="aside flex flex-col">
-                <army-car-list class="flex-1 overflow-hidden" />
-                <car-list class="flex-1 overflow-hidden" />
-            </el-aside>
-            <el-container>
-                <el-header class="header">
-                    <duty-table />
-                </el-header>
-                <el-main class="main">
-                    <video-pay />
-                </el-main>
-            </el-container>
-            <el-aside class="aside">
-                <door-list />
-            </el-aside>
-        </el-container>
-    </div>
-
+	<div class="layout-padding duty-workbench">
+		<div class="duty-workbench__grid">
+			<aside class="duty-workbench__vehicles" aria-label="车辆通行记录">
+				<army-car-list />
+				<car-list />
+			</aside>
+			<main class="duty-workbench__main" aria-label="值班安排与监控">
+				<duty-table />
+				<video-pay />
+			</main>
+			<door-list class="duty-workbench__people" />
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts" name="dutyPlan">
@@ -34,42 +27,182 @@ const VideoPay = defineAsyncComponent(() => import('./components/video-pay.vue')
 const stores = useTagsViewRoutes();
 
 onMounted(() => {
-    const query: any = useRoute().query
-    if (query && query.action == 'login') {
-        nextTick(() => {
-            stores.setCurrenFullscreen(true)
-        })
-    }
-})
+	const query: any = useRoute().query;
+	if (query && query.action == 'login') {
+		nextTick(() => {
+			stores.setCurrenFullscreen(true);
+		});
+	}
+});
 
 onBeforeUnmount(() => {
-    stores.setCurrenFullscreen(false)
-})
-
-
+	stores.setCurrenFullscreen(false);
+});
 </script>
 
 <style lang="scss" scoped>
-.el-container {
-    width: 100%;
-    height: 100%;
+.duty-workbench {
+	width: 100%;
+	min-height: 0;
+	padding: 12px !important;
+	background: var(--next-bg-main-color);
+
+	&__grid {
+		display: grid;
+		grid-template-columns: minmax(232px, 0.9fr) minmax(380px, 2.6fr) minmax(248px, 1fr);
+		gap: 12px;
+		height: 100%;
+		min-height: 0;
+	}
+
+	&__vehicles,
+	&__main {
+		display: grid;
+		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+		gap: 12px;
+		min-width: 0;
+		min-height: 0;
+	}
+
+	&__main {
+		grid-template-rows: minmax(0, 0.95fr) minmax(0, 1fr);
+	}
+
+	:deep(.duty-panel) {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		min-height: 0;
+		overflow: hidden;
+		border: 1px solid var(--el-border-color-light);
+		border-radius: 8px;
+		background: var(--el-bg-color);
+	}
+
+	:deep(.duty-panel__body) {
+		flex: 1;
+		min-width: 0;
+		min-height: 0;
+		padding: 12px;
+	}
+
+	:deep(.duty-panel__more.el-button) {
+		height: 28px;
+		margin: 0;
+		padding: 0 4px;
+		color: var(--el-text-color-regular);
+		font-size: 12px;
+
+		&:hover {
+			color: var(--el-color-primary);
+			background: var(--el-fill-color-light);
+		}
+
+		.el-icon {
+			margin-left: 2px;
+			font-size: 12px;
+		}
+	}
+
+	:deep(.duty-panel__select) {
+		width: 200px;
+		max-width: 100%;
+	}
+
+	:deep(.duty-record-filter) {
+		flex: none;
+		padding: 10px 12px 0;
+
+		.el-date-editor {
+			width: 100%;
+			min-width: 0;
+		}
+
+		.el-range-input {
+			min-width: 0;
+			font-size: 12px;
+		}
+
+		.el-range-separator {
+			flex: none;
+			padding: 0 2px;
+			font-size: 12px;
+		}
+	}
+
+	:deep(.duty-record-footer) {
+		display: flex;
+		flex: none;
+		justify-content: center;
+		padding: 10px 8px;
+		border-top: 1px solid var(--el-border-color-lighter);
+
+		.el-pagination {
+			--el-pagination-button-width: 24px;
+			--el-pagination-button-height: 26px;
+			--el-pagination-font-size: 12px;
+		}
+
+		.el-pager li,
+		.btn-prev,
+		.btn-next {
+			min-width: 24px;
+			margin: 0 1px;
+		}
+	}
+
+	:deep(button:focus-visible),
+	:deep(.el-select:focus-within) {
+		outline: 2px solid var(--el-color-primary) !important;
+		outline-offset: 2px;
+	}
 }
 
-.aside {
-    width: 18%;
-    height: 100%;
-    overflow: hidden;
+@media (max-width: 1280px) {
+	.duty-workbench {
+		overflow: auto;
+
+		&__grid {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			grid-template-rows: minmax(660px, calc(100vh - 130px)) 560px;
+			height: auto;
+		}
+
+		&__main {
+			grid-column: 1 / -1;
+			grid-row: 1;
+		}
+
+		&__vehicles {
+			grid-column: 1;
+			grid-row: 2;
+		}
+
+		&__people {
+			grid-column: 2;
+			grid-row: 2;
+		}
+	}
 }
 
-.header {
-    width: 100%;
-    height: 50%;
-    padding: 0 10px;
-}
+@media (max-width: 760px) {
+	.duty-workbench {
+		padding: 10px !important;
 
-.main {
-    width: 100%;
-    height: 50%;
-    padding: 0 10px;
+		&__grid {
+			grid-template-columns: minmax(0, 1fr);
+			grid-template-rows: 720px 680px 560px;
+			gap: 10px;
+		}
+
+		&__vehicles,
+		&__people {
+			grid-column: 1;
+		}
+
+		&__people {
+			grid-row: 3;
+		}
+	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/report/car/index.vue b/src/views/report/car/index.vue
index 71e5371..ec7edf1 100644
--- a/src/views/report/car/index.vue
+++ b/src/views/report/car/index.vue
@@ -38,9 +38,10 @@
                 </div>
             </el-row>
 
-            <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            <AccessDirectionLegend />
+            <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
                 :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-                @sort-change="sortChangeHandle">
+                @sort-change="sortChangeHandle" :row-class-name="carRecordRowClassName">
                 <el-table-column type="index" label="#" width="80" />
                 <el-table-column v-if="columnSetting['alarmList'].visible" min-width="100"
                     :label="columnSetting['alarmList'].label">
@@ -63,7 +64,7 @@
                 <el-table-column v-if="columnSetting['carDirect'].visible" prop="carNum" min-width="100"
                     :label="columnSetting['carDirect'].label">
                     <template #default="{ row }">
-                        <dict-tag :options="dh_car_direct" :value="row.carDirect" />
+                        <AccessDirectionTag kind="car" :options="dh_car_direct" :value="row.carDirect" />
                     </template>
                 </el-table-column>
                 <el-table-column v-if="columnSetting['carColor'].visible" prop="enterMode" min-width="100"
@@ -120,6 +121,9 @@
 </template>
 
 <script setup lang="ts" name="reportCar">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { carRecordRowClassName } from '/@/utils/accessDirection';
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { parseTime } from "/@/utils/formatTime"
 import { useDict } from '/@/hooks/dict';
@@ -249,4 +253,4 @@ function getDictByValue(value: any, tag: any) {
 
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped></style>
diff --git a/src/views/report/door/index.vue b/src/views/report/door/index.vue
index dd894c3..0cedf0f 100644
--- a/src/views/report/door/index.vue
+++ b/src/views/report/door/index.vue
@@ -45,9 +45,10 @@
                     </right-toolbar>
                 </div>
             </el-row>
-            <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            <AccessDirectionLegend />
+            <el-table class="access-record-table" :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
                 :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-                @sort-change="sortChangeHandle">
+                @sort-change="sortChangeHandle" :row-class-name="doorRecordRowClassName">
                 <el-table-column v-if="false" type="selection" width="40" align="center" />
                 <el-table-column type="index" label="#" width="80" />
                 <el-table-column v-if="columnSetting['alarmList'].visible" min-width="100"
@@ -137,7 +138,7 @@
                 <el-table-column v-if="columnSetting['enterOrExit'].visible" prop="enterOrExit" min-width="100"
                     :label="columnSetting['enterOrExit'].label">
                     <template #default="{ row }">
-                        <dict-tag :options="dh_enter_or_exit" :value="row.enterOrExit" />
+                        <AccessDirectionTag kind="door" :options="dh_enter_or_exit" :value="row.enterOrExit" />
                     </template>
                 </el-table-column>
                 <el-table-column v-if="columnSetting['openResult'].visible" prop="openResult" min-width="100"
@@ -174,6 +175,9 @@
 </template>
 
 <script setup lang="ts" name="reportDoor">
+import AccessDirectionLegend from '/@/components/AccessDirection/Legend.vue';
+import AccessDirectionTag from '/@/components/AccessDirection/Tag.vue';
+import { doorRecordRowClassName } from '/@/utils/accessDirection';
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { useDict } from '/@/hooks/dict';
 import { parseTime } from "/@/utils/formatTime"
@@ -315,4 +319,4 @@ function getDictByValue(value: any, tag: any) {
 }
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped></style>
diff --git a/tests/video-plugin.lifecycle.test.ts b/tests/video-plugin.lifecycle.test.ts
new file mode 100644
index 0000000..a9c0899
--- /dev/null
+++ b/tests/video-plugin.lifecycle.test.ts
@@ -0,0 +1,266 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount, type VueWrapper } from '@vue/test-utils';
+import { KeepAlive, defineComponent, h, nextTick, ref } from 'vue';
+import VideoPlugin from '../src/components/rtsp-plugin-video/video-plugin.vue';
+
+const mocks = vi.hoisted(() => ({ getSetting: vi.fn() }));
+vi.mock('../src/components/rtsp-plugin-video/lib/videoPlayer', () => ({}));
+vi.mock('../src/api/com/comDhSetting', () => ({ getObj: mocks.getSetting }));
+vi.mock('element-plus', () => ({ ElMessage: { error: vi.fn(), success: vi.fn(), warning: vi.fn() } }));
+
+function deferred<T = void>() {
+	let resolve!: (value: T) => void;
+	let reject!: (error: Error) => void;
+	const promise = new Promise<T>((res, rej) => { resolve = res; reject = rej; });
+	return { promise, resolve, reject };
+}
+
+const instances: MockPlayer[] = [];
+class MockPlayer {
+	setting: any;
+	disposed = false;
+	ready = false;
+	closeVideo = vi.fn(() => Promise.resolve());
+	dispose = vi.fn(() => { this.disposed = true; });
+	hide = vi.fn();
+	show = vi.fn();
+	startReal = vi.fn((items) => { this.setting.channelList = items; });
+	startPlayback = vi.fn((items) => { this.setting.channelList = items; });
+	controlPlayback = vi.fn();
+	setTabControlBtn = vi.fn();
+	changeDivision = vi.fn((division) => { this.setting.division = division; });
+	constructor(public options: any) {
+		this.setting = { ...options, hwnd: instances.length + 10, channelList: [] };
+		instances.push(this);
+	}
+}
+
+const wrappers: VueWrapper[] = [];
+const mountOptions = {
+	attachTo: document.body,
+	global: { stubs: { Yt: true, 'el-pagination': true, 'el-icon': true }, directives: { loading: () => undefined } },
+};
+function createPlayer(props = {}) {
+	const wrapper = mount(VideoPlugin, { ...mountOptions, props });
+	wrappers.push(wrapper);
+	return wrapper;
+}
+const channels = (name = 'camera-a') => [{ channelId: name, snum: 0, streamType: 2 }];
+const playback = () => [{ ...channels()[0], startTime: '2026-10-27 08:00:00', endTime: '2026-10-27 09:00:00' }];
+async function ready(player: MockPlayer) {
+	player.ready = true;
+	player.options.createSuccess({});
+	await vi.advanceTimersByTimeAsync(500);
+}
+async function play(wrapper: VueWrapper, mode = 'real') {
+	const task = mode === 'real' ? wrapper.vm.startReal(channels()) : wrapper.vm.startPlayback(playback());
+	await vi.advanceTimersByTimeAsync(0);
+	const player = instances.at(-1)!;
+	if (!player.ready) await ready(player);
+	await task;
+	return player;
+}
+
+beforeEach(() => {
+	vi.useFakeTimers();
+	vi.spyOn(console, 'log').mockImplementation(() => undefined);
+	Object.defineProperty(document, 'hidden', { configurable: true, value: false });
+	(window as any).VideoPlayer = MockPlayer;
+	instances.length = 0;
+	mocks.getSetting.mockReset().mockResolvedValue({ code: 0, data: { dhIccSetting: {} } });
+});
+afterEach(() => {
+	wrappers.splice(0).forEach((wrapper) => wrapper.unmount());
+	vi.clearAllTimers();
+	vi.useRealTimers();
+	document.body.innerHTML = '';
+});
+
+describe('原生播放器组件的关闭时序', () => {
+	it('正常实时预览和回放仍调用对应 SDK 接口', async () => {
+		const wrapper = createPlayer();
+		const real = await play(wrapper);
+		expect(real.startReal).toHaveBeenCalledWith(channels());
+		const replay = await play(wrapper, 'playback');
+		expect(replay.startPlayback).toHaveBeenCalledWith(playback());
+		wrapper.vm.destroy();
+		expect(real.dispose).toHaveBeenCalledTimes(1);
+		expect(replay.dispose).toHaveBeenCalledTimes(1);
+	});
+
+	it('同类型并发初始化只查询和构造一次，只执行最后一次播放请求', async () => {
+		const wrapper = createPlayer();
+		const first = wrapper.vm.startReal(channels('first'));
+		const last = wrapper.vm.startReal(channels('last'));
+		await vi.advanceTimersByTimeAsync(0);
+		expect(mocks.getSetting).toHaveBeenCalledTimes(1);
+		expect(instances).toHaveLength(1);
+		await ready(instances[0]);
+		await Promise.all([first, last]);
+		expect(instances[0].startReal).toHaveBeenCalledTimes(1);
+		expect(instances[0].startReal).toHaveBeenCalledWith(channels('last'));
+	});
+
+	it('配置请求返回之前卸载，不再构造播放器', async () => {
+		const config = deferred<any>();
+		mocks.getSetting.mockReturnValue(config.promise);
+		const wrapper = createPlayer();
+		const task = wrapper.vm.startReal(channels());
+		wrapper.unmount();
+		config.resolve({ code: 0, data: { dhIccSetting: {} } });
+		await vi.advanceTimersByTimeAsync(0);
+		await task;
+		expect(instances).toHaveLength(0);
+	});
+
+	it('原生创建回包晚于卸载，不恢复已取消的播放', async () => {
+		const wrapper = createPlayer();
+		const task = wrapper.vm.startReal(channels());
+		await vi.advanceTimersByTimeAsync(0);
+		const player = instances[0];
+		wrapper.unmount();
+		await ready(player);
+		await task;
+		expect(player.dispose).toHaveBeenCalledTimes(1);
+		expect(player.startReal).not.toHaveBeenCalled();
+	});
+
+	it('创建成功后的 500ms 延迟也能被卸载取消', async () => {
+		const wrapper = createPlayer();
+		const task = wrapper.vm.startReal(channels());
+		await vi.advanceTimersByTimeAsync(0);
+		const player = instances[0];
+		player.options.createSuccess({});
+		wrapper.unmount();
+		await vi.advanceTimersByTimeAsync(1000);
+		await task;
+		expect(player.startReal).not.toHaveBeenCalled();
+	});
+
+	it('软关闭会取消等待中的播放，切回浏览器也不会自行恢复', async () => {
+		const wrapper = createPlayer();
+		const task = wrapper.vm.startReal(channels());
+		await vi.advanceTimersByTimeAsync(0);
+		const player = instances[0];
+		await wrapper.vm.closeVideo();
+		await ready(player);
+		await task;
+		document.dispatchEvent(new Event('visibilitychange'));
+		await vi.advanceTimersByTimeAsync(0);
+		expect(player.startReal).not.toHaveBeenCalled();
+	});
+
+	it('未 await 的关闭也会在新播放前等待旧 SDK 关闭确认', async () => {
+		const wrapper = createPlayer();
+		const player = await play(wrapper);
+		const closed = deferred();
+		player.closeVideo.mockReturnValue(closed.promise);
+		const closeTask = wrapper.vm.closeVideo();
+		const playTask = wrapper.vm.startReal(channels('next'));
+		await vi.advanceTimersByTimeAsync(0);
+		expect(player.startReal).toHaveBeenCalledTimes(1);
+		closed.resolve();
+		await Promise.all([closeTask, playTask]);
+		expect(player.startReal).toHaveBeenLastCalledWith(channels('next'));
+	});
+
+	it('同时关闭多个缓存实例，单个 SDK 不回包也不妨碍销毁其他窗口', async () => {
+		const wrapper = createPlayer();
+		const real = await play(wrapper);
+		const replay = await play(wrapper, 'playback');
+		const closed = deferred();
+		real.closeVideo.mockReturnValue(closed.promise);
+		const closing = wrapper.vm.closeVideo();
+		expect(real.closeVideo).toHaveBeenCalledTimes(1);
+		expect(replay.closeVideo).toHaveBeenCalledTimes(1);
+		wrapper.vm.destroy();
+		expect(real.dispose).toHaveBeenCalledTimes(1);
+		expect(replay.dispose).toHaveBeenCalledTimes(1);
+		closed.resolve();
+		await closing;
+	});
+
+	it('重叠关闭不会重复给同一实例发送关闭指令', async () => {
+		const wrapper = createPlayer();
+		const player = await play(wrapper);
+		const closed = deferred();
+		player.closeVideo.mockReturnValue(closed.promise);
+		const first = wrapper.vm.closeVideo();
+		const second = wrapper.vm.closeVideo();
+		expect(player.closeVideo).toHaveBeenCalledTimes(1);
+		closed.resolve();
+		await Promise.all([first, second]);
+	});
+
+	it('两个组件的容器 ID 不重叠，关闭其中一个不会销毁另一个', async () => {
+		const first = createPlayer();
+		const second = createPlayer();
+		const a = await play(first);
+		const b = await play(second);
+		expect(a.options.videoId).not.toEqual(b.options.videoId);
+		first.unmount();
+		expect(a.dispose).toHaveBeenCalledTimes(1);
+		expect(b.dispose).not.toHaveBeenCalled();
+		expect(document.getElementById(b.options.videoId)).not.toBeNull();
+	});
+
+	it('配置请求失败时播放 Promise 正常结束，之后可重新初始化', async () => {
+		mocks.getSetting.mockRejectedValueOnce(new Error('configuration unavailable'));
+		const wrapper = createPlayer();
+		await wrapper.vm.startReal(channels());
+		expect(instances).toHaveLength(0);
+		const player = await play(wrapper);
+		expect(player.startReal).toHaveBeenCalledTimes(1);
+	});
+
+	it('SDK 创建失败会清掉失败实例，允许重新打开', async () => {
+		const wrapper = createPlayer();
+		const task = wrapper.vm.startReal(channels());
+		await vi.advanceTimersByTimeAsync(0);
+		instances[0].options.createError({ code: 1001, message: 'not installed' });
+		await task;
+		expect(instances[0].dispose).toHaveBeenCalledTimes(1);
+		const replacement = await play(wrapper);
+		expect(instances).toHaveLength(2);
+		expect(replacement.startReal).toHaveBeenCalledTimes(1);
+	});
+
+	it('弹窗 active=false 会立即销毁，离场期间的晚到播放调用被忽略', async () => {
+		const wrapper = createPlayer();
+		const player = await play(wrapper);
+		await wrapper.setProps({ active: false });
+		expect(player.dispose).toHaveBeenCalledTimes(1);
+		await wrapper.vm.startReal(channels('late-response'));
+		expect(instances).toHaveLength(1);
+		await wrapper.setProps({ active: true });
+		const replacement = await play(wrapper);
+		expect(instances).toHaveLength(2);
+		expect(replacement.startReal).toHaveBeenCalledTimes(1);
+	});
+
+	it('销毁后晚到的错误回调不会触发主码流重试', async () => {
+		const wrapper = createPlayer();
+		const player = await play(wrapper);
+		wrapper.vm.destroy();
+		player.options.realError(channels()[0], { code: 408 });
+		expect(player.startReal).toHaveBeenCalledTimes(1);
+	});
+
+	it('KeepAlive 停用时销毁窗口，重新激活时只重建当前播放', async () => {
+		const visible = ref(true);
+		const host = mount(defineComponent({ render: () => h(KeepAlive, {}, () => visible.value ? h(VideoPlugin) : null) }), mountOptions);
+		wrappers.push(host);
+		const child = host.findComponent(VideoPlugin);
+		const oldPlayer = await play(child);
+		visible.value = false;
+		await nextTick();
+		expect(oldPlayer.dispose).toHaveBeenCalledTimes(1);
+		await child.vm.startReal(channels('inactive'));
+		expect(instances).toHaveLength(1);
+		visible.value = true;
+		await nextTick();
+		await vi.advanceTimersByTimeAsync(0);
+		await ready(instances[1]);
+		expect(instances[1].startReal).toHaveBeenCalledWith(channels());
+	});
+});
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..b86f679
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+	plugins: [vue(), AutoImport({ imports: ['vue', 'vue-router', 'pinia'], dts: false })],
+	resolve: { alias: { '/@': resolve(__dirname, 'src') } },
+	test: { environment: 'jsdom', include: ['tests/**/*.test.{js,ts}'], restoreMocks: true },
+});