refactor: 整理页面的目录结构

feat: 系统设置面板的交互权限
feat: 系统日志板块的交互权限
2026-01-13 13:51:25 +08:00 · 2026-01-13 13:51:25 +08:00 · 2026-01-13 13:51:25 +08:00 · 2026-01-13 13:51:25 +08:00 · 2026-01-13 13:51:25 +08:00 · 2026-01-13 13:51:25 +08:00
66 changed files with 761 additions and 1498 deletions
--- a/.env
+++ b/.env
@@ -19,7 +19,7 @@ VITE_LAMP_PASSWORD = fjoc(1KHP(Ls&Bje)C
 VITE_LAMP_AUTHORIZATION = Y3VlZGVzX2FkbWluOmN1ZWRlc19hZG1pbl9zZWNyZXQ=

 # 当需要重置localStorage时, 修改此变量
-VITE_STORAGE_VERSION = 5
+VITE_STORAGE_VERSION = 3

 # 调试码
 VITE_DEBUG_CODE = ndm_debug
--- a/.trae/documents/网络设备管理平台用户手册.md
+++ b/.trae/documents/网络设备管理平台用户手册.md
@@ -1,327 +0,0 @@
-# 网络设备管理平台用户手册
-
-## 1. 平台概述与基础操作
-
-### 1.1 平台简介
-
-网络设备管理平台（以下简称为“平台”）是专为地铁线路运管中心设计的综合性管理系统。本平台旨在对车站内的各类网络设备进行集中监测、数据查看、运行状态监控及异常告警管理，并提供数据分析与统计功能。
-
-**支持管理的设备类型包括：**
-
- 摄像机
- 网络录像机
- 交换机
- 解码器
- 智能安防箱
- 媒体服务器
- 视频服务器
- 网络键盘
- 报警主机
-
-### 1.2 登录与退出
-
-**登录平台：**
-
-1. 在浏览器地址栏输入平台访问地址。
-2. 进入登录页面后，输入您的 **账号** 和 **密码**。
-3. 点击“登录”按钮。
-4. 登录成功后，平台将默认跳转至 **车站状态模块 (首页)**。
-
-**退出登录：**
-
-1. 在平台任意页面的 **顶部区域** 右侧，找到显示您昵称的用户按钮。
-2. 将鼠标悬停或点击该按钮，在下拉菜单中选择 **“退出登录”**。
-3. 平台将安全退出您的账号并返回登录页面。
-
-### 1.3 界面概览
-
-登录后，平台主界面主要由以下四个区域组成：
-
-**1. 顶部区域**
-
-位于页面最上方，包含：
-
- **平台标题**：点击可快速返回首页。
- **用户信息**：显示当前登录用户昵称及退出入口。
- **设置按钮**：点击可打开设置面板。
-
-**2. 侧边菜单**
-
-位于页面左侧，提供各功能模块的导航入口：
-
- **车站状态**：全线车站设备运行概览 (首页)。
- **设备诊断**：深入查看具体设备的详细运行参数。
- **设备告警**：
-  - **设备告警记录**：查询历史告警记录。
-  - **告警忽略管理**：管理忽略设备。
- **系统日志**：
-  - **视频平台日志**：审计视频平台操作。
-  - **上级调用日志**：审计上级调用指令。
- **权限管理**：用户与权限配置（仅超级管理员可见）。
-
-**3. 底部状态栏**
-
-位于页面最下方，主要用于 **未读告警提示**。当有新的设备告警产生时，此处的铃铛图标会显示红色未读数量徽标，点击可快速跳转至告警记录页面。
-
-**4. 设置面板**
-
-点击顶部区域的“设置”图标（⚙️）即可打开，包含：
-
- **通用设置**：
-  - **主题**：切换深色/浅色模式，适应不同光照环境。
-  - **布局**：折叠/展开左侧菜单；调整 **车站卡片矩阵** 的显示列数（1-10列）。
- **业务设置**：
-  - **告警策略**：配置告警截图保留天数等（详见第4章，仅限特定权限人员可见）。
-
-### 1.4 权限与界面差异说明
-
-本平台采用严格的权限控制机制，您的账号权限将直接决定您能看到的内容和能执行的操作。
-
-**1. 查看权限**
-
- **影响范围**：决定您能看到哪些车站。
- **界面表现**：如果您没有某车站的查看权限，该车站在 **车站卡片矩阵**、设备树以及所有查询筛选器中都将 **完全不可见**。
-
-**2. 操作权限**
-
- **影响范围**：决定您能否对设备进行配置、控制或管理。
- **界面表现**：如果您没有某车站的操作权限，相关的 **功能按钮**（如“设备配置”、“同步数据”、“告警确认”等）将 **自动隐藏** 或 **变为不可用状态**。
-
-> **提示**：如果您发现找不到某个车站或缺少某个功能按钮，请联系管理员确认您是否拥有相应的权限。
-
-## 2. 车站状态模块 (首页)
-
-车站状态模块是用户登录后的默认页面，以 **车站卡片矩阵** 的形式展示全线各车站的设备整体运行状态。
-
-### 2.1 车站卡片解读
-
-每个卡片代表一个车站，直观展示该站的关键运行指标：
-
-**1. 基础信息**
-
- **车站名称**：显示车站名称。
- **在线状态**：右上角的标签显示该车站服务器当前的在线/离线状态。
-
-**2. 统计数据**
-
- **设备概览**：显示“设备总数”，以及通过颜色区分的“在线设备数”（绿色）和“离线设备数”（红色）。
- **告警概览**：显示“今日告警总数”，若有告警则以醒目颜色提示。
-
-**3. 交互操作**
-
- **更多菜单**（点击卡片右上角的垂直三点图标）：
-  - **视频平台**：跳转至该车站对应的第三方视频管理平台。
-  - **设备配置**：打开参数配置窗口。_(注：仅当拥有该车站“操作权限”且车站在线时显示)_
- **查看设备详情**：点击设备概览区域右侧的 **详情按钮**（水平三点图标），弹出 **设备详情窗口**，展示该车站的设备树结构（支持进一步跳转至诊断页面）。
- **查看告警详情**：点击告警概览区域右侧的 **详情按钮**（水平三点图标），弹出 **告警详情窗口**，展示该车站当日的告警列表。
-
-### 2.2 操作栏
-
-位于页面顶部的工具栏，提供对多个车站的批量管理功能。
-
-**1. 功能按钮与权限**
-
- **导出设备状态 / 导出录像诊断**：_(需查看权限)_ 仅可选择您拥有“查看权限”的车站进行数据导出。
- **同步摄像机 / 同步录像机通道**：_(需操作权限)_ 仅可选择您拥有“操作权限”的车站进行数据同步。
-
-**2. 操作流程**
-
-1. 点击操作栏中的任一功能按钮（例如“同步摄像机”）。
-2. 此时进入**多选模式**，所有车站卡片上会出现复选框。_(注：系统会自动根据当前操作所需的权限，禁用无权操作的车站复选框)_
-3. 勾选您需要操作的车站，或勾选顶部的“全选”框。
-4. 点击操作栏右侧出现的 **“确定”** 按钮执行操作：
-   - **对于导出类操作**：平台将弹出预览窗口，您可在确认数据无误后点击下载 Excel 文件。
-   - **对于同步类操作**：平台将直接在后台启动同步任务，任务完成后，页面右上角会弹出通知提示成功或失败的数量。
-
-### 2.3 单站详情与配置
-
-除了查看概览，您还可以对单个车站进行更细致的管理。
-
-**1. 设备列表详情**
-
-在设备详情窗口中，您可以浏览该车站下的所有设备。点击任意设备节点，可直接跳转至 **设备诊断页面** 查看该设备的详细指标。
-
-**2. 参数配置** _(需操作权限)_
-
-通过右上角菜单进入“设备配置”，您可以：
-
- **阈值配置**：设置交换机、服务器、录像机等设备的运行指标告警阈值（如 CPU 占用率、温度上限等）。
- **计划任务**：设置显示器等设备的自动亮屏和息屏计划。
-
-## 3. 设备诊断模块
-
-设备诊断模块用于查看和分析具体设备的详细运行状态。您可以通过侧边菜单的 **“设备诊断”** 进入，或从 **车站状态模块** 的设备详情、告警记录页面跳转进入（告警跳转详见第4章）。
-
-### 3.1 设备树 (侧边栏)
-
-位于页面左侧，以树形结构展示全线所有车站及其下属设备。
-
-**1. 搜索与筛选**
-
- **搜索框**：输入设备名称、设备 ID 或 IP 地址，可实时过滤设备树节点。
- **状态筛选**：点击单选框，可快速筛选 **“全部 / 在线 / 离线”** 设备。
-
-**2. 设备树交互**
-
- **展开与选择**：按 **“车站 -> 设备类型 -> 具体设备”** 的层级展开，点击设备节点即可在右侧查看详情。
- **右键菜单管理** _(需操作权限)_：
-  - **在车站节点上右键**：
-    - **导入设备**：批量导入设备数据。
-    - **导出设备**：导出该车站的设备清单。
-  - **在设备节点上右键**：
-    - **删除设备**：将该设备从平台中移除。
-
-### 3.2 诊断详情页结构
-
-选中设备后，右侧区域将展示该设备的详细信息。
-
-**1. 功能标签页**
-
- **当前诊断**：展示设备实时的运行数据（默认视图）。头部信息栏和详细诊断指标均包含在此标签页中。
- **历史诊断**：以图表形式展示设备的历史健康度或关键指标变化趋势。
- **修改设备**：_(需操作权限)_ 编辑设备的基础信息（如名称、安装位置等）。
-
-**2. 头部信息栏 (位于“当前诊断”标签页顶部)**
-
- **基础状态**：展示设备名称、IP 地址、在线/离线状态。
- **关联操作**：
-  - **上游设备跳转**：如果设备有上游节点（如摄像机连接的交换机），点击可直接跳转查看上游设备。
-  - **管理入口**：点击 **“管理”** 按钮，可直接打开该设备自身的 Web 管理后台（如摄像机的 Web 配置页面）。
-
-### 3.3 下游设备配置 (需操作权限)
-
-对于交换机和智能安防箱，平台支持将其端口或电路与下游设备（如摄像机）进行关联，以便建立网络拓扑关系。
-
- **交换机配置**：在“当前诊断”的端口列表中，**右键点击**任意端口，选择 **“关联设备”**，可将该端口与下游设备绑定；若需解绑，右键选择 **“解除关联”** 即可。
- **智能安防箱配置**：在电路列表中，**右键点击**电路卡片，选择 **“关联设备”** 或 **“解除关联”** 进行配置。
-
-### 3.4 设备诊断指标概览
-
-根据设备类型的不同，“当前诊断”标签页将展示不同的关键指标。以下列举几种典型设备的展示重点：
-
- **交换机 / 服务器 / 录像机**：侧重硬件资源监控，展示 CPU、内存、磁盘等使用率仪表盘，以及端口流量或通道录像状态。
- **摄像机 / 报警主机**：侧重基础配置展示，如制造商、固件版本、序列号、ONVIF/GB28181 协议配置等。
- **解码器 / 智能安防箱**：兼具硬件状态（如温度、风扇转速）与业务配置（如通道状态）的展示。
-
-## 4. 设备告警模块
-
-设备告警模块是运维人员处理设备异常的核心区域，包含告警记录查询、确认、忽略以及策略配置等功能。
-
-### 4.1 设备告警记录
-
-通过侧边菜单选择 **“设备告警” -> “设备告警记录”** 进入。
-
-**1. 筛选查询**
-顶部查询栏提供多维度的组合筛选功能，帮助您快速定位特定告警：
-
- **车站**：选择查询范围（仅显示您拥有“查看权限”的车站）。
- **设备类型/名称**：按设备属性精确查找。
- **告警属性**：按告警类型、级别（严重/紧急/一般等）、恢复状态（已恢复/未恢复）及确认状态进行筛选。
- **时间范围**：选择告警发生的起止时间。
-
-**2. 列表操作**
-
- **告警确认** _(需操作权限)_：对于“未确认”的告警，点击操作列的 **“确认”** 按钮进行处理。确认后，系统将记录确认人及时间，且该按钮变为不可点击状态。
- **忽略设备** _(需操作权限)_：若某设备频繁误报，点击 **“忽略设备”** 将其加入忽略名单。被忽略的设备将不再产生新告警，直到被手动恢复。
- **跳转诊断**：点击列表中的设备名称，可直接跳转至该设备的诊断详情页。
-
-**3. 数据导出**
-
-点击页面右上角的 **“导出”** 按钮，可将当前筛选条件下的所有告警记录导出为 Excel 报表，便于线下归档与分析。
-
-### 4.2 告警忽略管理
-
-通过侧边菜单选择 **“设备告警” -> “告警忽略管理”** 进入。
-
-**1. 列表查看**
-
-展示所有当前处于“忽略状态”的设备列表，包含忽略时间、所属车站及设备信息。
-
-**2. 取消忽略 (需操作权限)**
-
-若需恢复对某设备的监控，点击操作列的 **“取消忽略”** 按钮。恢复后，该设备产生的新异常将重新触发告警。
-
-### 4.3 告警策略配置 (系统设置)
-
-部分高级告警策略需在全局设置中进行配置。
-
-**1. 入口与权限**
-
- **入口**：点击顶部区域的“设置”图标，在设置面板中找到“告警”板块。
- **权限要求**：此板块仅对 **OCC (控制中心) 车站** 的操作员可见。
-
-**2. 配置项**
-
- **告警画面截图保留天数**：设置系统自动抓取的告警截图的存储期限（1-15天）。过期截图将被自动清理以释放存储空间。
- **自动获取告警画面截图**：开启/关闭告警触发时的自动截图功能。
-
-## 5. 系统日志模块
-
-系统日志模块用于审计和追踪系统内的关键操作记录。
-
-### 5.1 视频平台日志
-
-通过侧边菜单选择 **“系统日志” -> “视频平台日志”** 进入。此模块主要记录平台与第三方视频管理系统之间的交互操作。
-
-**1. 查询功能**
-
- **车站筛选**：仅显示您拥有“查看权限”的车站日志。
- **操作类型**：筛选具体的交互指令类型（如“获取流地址”、“云台控制”等）。
- **时间范围**：按发生时间段进行精确检索。
-
-**2. 数据导出**
-
-支持将查询结果导出为 Excel 文件，用于故障排查或安全审计。
-
-### 5.2 上级调用日志
-
-通过侧边菜单选择 **“系统日志” -> “上级调用日志”** 进入。此模块记录上级系统（如公安或市级平台）调用本平台资源的请求记录。
-
-**1. 查询功能**
-
- **车站筛选**：选择日志所属的车站范围。
- **调用类型**：筛选具体的调用指令（如“视频点播”、“录像回放”等）。
- **时间范围**：选择日志记录的时间段。
-
-**2. 数据导出**
-
-同样支持将查询结果导出，以便统计上级单位的调用频率和资源使用情况。
-
-## 6. 权限管理模块
-
-**(注：本模块仅对“超级管理员”可见，普通用户无法访问)**
-
-权限管理模块用于配置系统用户及其对各车站的访问和操作权限。
-
-### 6.1 用户列表管理
-
-通过侧边菜单选择 **“权限管理”** 进入。
-
-**1. 用户查找**
-
- **搜索**：在顶部搜索框输入 **用户名**，可快速定位目标用户。
- **重置**：点击重置按钮清空搜索条件，显示所有用户。
-
-**2. 列表信息**
-
-展示系统内所有注册用户的基本信息，包括账号、姓名等。
-
-### 6.2 权限配置
-
-点击用户列表右侧的 **“配置权限”** 按钮，进入该用户的权限分配界面。界面以矩阵形式展示，直观易懂。
-
-**1. 权限矩阵解读**
-
- **行（车站）**：每一行代表一条线路上的具体车站。
- **列（权限类型）**：
-  - **查看**：决定用户能否看到该车站的数据。
-  - **操作**：决定用户能否对该车站设备进行控制或修改配置。
-
-**2. 批量操作技巧**
-
- **全选/反选**：点击表头的复选框，可一键授予或取消所有车站的某项权限。
- **单站全权**：点击某一行车站名称前的复选框（如有），可一键授予该车站的所有权限。
-
-**3. 特殊规则说明**
-
-**重要提示**：如果未给某用户勾选任何权限（即所有复选框均为空），平台默认该用户拥有 **超级管理员权限**，可访问所有车站并执行所有操作。请务必谨慎配置。
--- a/.trae/documents/网络设备管理平台用户手册编写计划.md
+++ b/.trae/documents/网络设备管理平台用户手册编写计划.md
@@ -1,185 +0,0 @@
-# 《网络设备管理平台用户手册》编写计划
-
-本计划已根据权限系统的实际逻辑（VIEW/OPERATION）进行了调整，将在各章节中明确体现权限对界面和功能的影响。
-
-## 阶段一：准备与入门
-
-1. **平台简介**：平台用途与设备支持范围。
-2. **登录与注销**：账号登录流程、退出操作。
-3. **界面概览**：
-
-   * **顶部区域 (Header)**：展示平台标题、当前用户信息及设置入口。
-
-   * **侧边菜单 (Sider)**：功能模块导航。
-
-   * **底部状态栏 (Footer)**：未读告警通知提示。
-
-   * **设置面板**：
-
-     * **通用设置**：主题切换（深色模式）、布局调整（菜单折叠、车站列数）。
-
-     * **业务设置**：告警策略配置（详见阶段四）。
-4. **权限与界面差异说明（新增）**：
-
-   * 解释“查看权限”如何决定车站列表的显示（无权限则不显示）。
-
-   * 解释“操作权限”如何决定功能按钮的显隐（无权限则隐藏配置入口）。
-
-## 阶段二：首页 - 车站状态监控
-
-**涉及模块**：`Station Status` (首页)
-
-1. **车站卡片解读**
-
-   * **基础信息**：车站名称、在线/离线状态。
-
-   * **统计数据**：设备总数/在线数/离线数、今日告警总数。
-
-   * **交互操作**：
-
-     * **右上角更多菜单**：
-
-       * **视频平台**：跳转至视频管理平台。
-
-       * **设备配置**：打开参数配置窗口 **(注：仅当拥有该车站“操作权限”且车站在线时显示)**。
-
-     * **设备详情入口**：点击“设备总数”区域，弹出设备树模态框（可进一步跳转诊断页）。
-
-     * **告警详情入口**：点击“告警总数”区域，弹出告警列表模态框。
-2. **操作栏 (Batch Actions)**
-
-   * **功能按钮与权限差异**：
-
-     * **导出设备状态 / 导出录像诊断**：**(需查看权限)** 仅可选择拥有“查看权限”的车站进行导出。
-
-     * **同步摄像机 / 同步录像机通道**：**(需操作权限)** 仅可选择拥有“操作权限”的车站进行同步。
-
-   \*- **操作流程**：
-
-   1. 点击操作栏中的任一功能按钮（如“同步摄像机”）。
-   2. 此时车站卡片上会出现复选框，且仅有权限的车站可选。
-   3. 勾选需要操作的车站（支持“全选”）。
-   4. 点击操作栏右侧出现的“确定”按钮：
-
-      * **导出类操作**：系统将弹出预览窗口，您可在窗口中确认数据并下载 Excel 文件。
-
-      * **同步类操作**：系统将直接在后台启动同步任务，任务完成后右上角会弹出结果通知（成功/失败数量）。
-3. **单站详情与配置**
-
-   * **设备列表详情**：展示设备树，点击可跳转诊断页。
-
-   * **告警列表详情**。
-
-   * **参数配置**：配置阈值与计划任务 **(需操作权限)**。
-
-## 阶段三：设备诊断模块
-
-**涉及模块**：`Device Diagnosis`
-
-1. **设备树（侧边栏）**
-
-   * **数据范围**：说明仅展示拥有“查看权限”的车站及其下属设备。
-
-   * **搜索与筛选**：按名称/IP搜索，按状态筛选。
-
-   * **树形交互**：
-
-     * **展开与选择**：按“车站 -> 设备类型 -> 具体设备”层级展开与选择。
-
-     * **右键菜单管理**：**(需操作权限)**
-
-       * **车站节点右键**：支持 **导入设备**、**导出设备**。
-
-       * **设备节点右键**：支持 **删除设备**。
-2. **诊断详情页结构**
-
-   * **头部信息栏**：状态、IP、关联跳转、Web管理入口。
-
-   * **功能标签页**：
-
-     * **当前诊断**：实时数据展示。
-
-     * **历史诊断**：历史趋势查看。
-
-     * **修改设备**：编辑设备信息 **(注：仅对拥有“操作权限”的用户可见)**。
-3. **特定设备诊断指标**
-   - **分类描述策略**：
-     - **性能类设备**（如交换机、服务器、NVR）：侧重硬件监控，展示CPU/内存使用率仪表盘、端口状态、磁盘健康度等。
-       - **(补充) 下游设备关联配置**：
-         - **交换机**：右键点击端口 -> 关联设备（如摄像机）。
-         - **安防箱**：右键点击电路 -> 关联设备。
-         - **操作权限要求**：**(需操作权限)**。
-     - **信息类设备**（如摄像机、报警主机）：侧重参数展示，展示制造商、固件版本、协议配置等静态属性。
-
-## 阶段四：告警管理模块
-
-**涉及模块**：`Alarm`
-
-1. **子模块：告警记录 (Alarm Log)**
-
-   * **筛选查询**：
-
-     * 组合筛选：车站（受查看权限限制）、设备类型、设备名称、告警类型、级别、状态、时间。
-
-   * **列表操作**：
-
-     * **告警确认**：点击“确认”按钮处理告警 **(注：需拥有该车站的操作权限，否则按钮禁用/隐藏)**。
-
-     * **忽略设备**：将设备加入忽略列表 **(需操作权限)**。
-
-   * **数据导出**：导出Excel报表。
-
-2. **子模块：告警忽略 (Alarm Ignore)**
-
-   * **列表查看**：查看被忽略的设备记录。
-
-   * **取消忽略**：点击恢复监控 **(注：需拥有操作权限)**。
-
-3. **告警策略配置 (系统设置)**
-
-   * **配置入口**：通过顶部导航栏“设置”按钮进入。
-
-   * **配置项**：告警画面截图保留天数、自动获取截图开关。
-
-   * **权限要求**：**(注：仅对 OCC 车站的操作员可见)**。
-
-## 阶段五：日志管理模块
-
-**涉及模块**：`Log`
-
-1. **子模块：上级调用日志 (Call Log)**
-
-   * **查询**：筛选车站（受查看权限限制）、日志类型（如视频点播、云台指令）、时间范围。
-
-   * **导出**：导出查询结果。
-
-2. **子模块：视频平台日志 (Vimp Log)**
-
-   * **查询**：筛选车站（受查看权限限制）、内部操作类型、时间范围。
-
-   * **导出**：导出查询结果。
-
-## 阶段六：权限管理模块
-
-**涉及模块**：`Permission`
-
-**(注：本模块仅对“超级管理员”可见，普通用户无法访问)**
-
-1. **用户列表管理**
-
-   * **搜索**：通过真实姓名查找用户。
-
-   * **重置**：清空搜索条件。
-
-2. **权限配置 (Permission Config)**
-
-   * **矩阵式界面**：
-
-     * **行**：对应各个车站。
-
-     * **列**：对应具体权限类型（如查看、操作）。
-
-   * **批量操作**：支持整行（单站全权）或整列（全站某权）一键勾选。
-
-   * **特殊规则说明**：若未给用户勾选任何权限，平台默认该用户拥有**所有权限**（超级管理员模式）。
-
--- a/README.md
+++ b/README.md
@@ -39,3 +39,19 @@ pnpm build
 ```

 在执行 `pnpm build` 之前，你可以在 `package.json` 中修改 `version` 字段，将其设置为你期望的版本号，构建完成后，项目的根目录中除了 `dist` 目录外，还会生成三个压缩包，文件名的格式统一为 `ndm-web-platform_v<version>_<datetime>`，文件格式则分别为 `zip`、`tar`、`tar.gz`。
+
+## 调试模式
+
+在调试模式中，用户可以查看设备的原始诊断数据，也可以对轮询器进行控制，或者启用离线开发模式，系统不会自动调用一些主动触发的请求。
+
+### 开启调试模式
+
+在非登录页的任意页面中，使用键盘组合键 `Ctrl+Alt+D`，系统会弹出一个输入框，输入环境变量 `.env` 中的 `VITE_DEBUG_CODE` 对应的值即可开启调试模式，如需关闭调试模式，再次使用上述组合键并点击 `确认` 按钮即可。
+
+注意调试模式与其内部的功能之间没有联动关系，例如在开启调试模式后可以关闭轮询或者启用离线开发模式，但是在关闭调试模式后，轮询不会重新被开启，离线开发模式也不会被关闭，因此在关闭离线开发模式前，请务必确保系统处于正确的运行状态下。
+
+### 关于离线开发模式
+
+由于离线开发模式涉及到登录操作，因此项目中将离线开发模式暴露到了全局变量 `window.$offlineDev` 中，允许在登录页中直接开启离线开发模式。
+
+如果你第一次启动这个项目，系统在正常情况下会先跳转至登录页，此时如果希望开启离线模式，可以直接打开浏览器的开发者工具，在控制台输入 `window.$offlineDev.value = true` 即可，系统会直接跳转到首页。
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,10 +7,10 @@ import { dateZhCN, NConfigProvider, NDialogProvider, NLoadingBarProvider, NMessa
 import { storeToRefs } from 'pinia';

 const settingStore = useSettingStore();
-const { themeMode, mockUser } = storeToRefs(settingStore);
+const { themeMode, offlineDev } = storeToRefs(settingStore);

 // 允许通过控制台启用离线开发模式 (登录页适用)
-window.$mockUser = mockUser;
+window.$offlineDev = offlineDev;

 useVersionCheckQuery();
 </script>
--- a/src/apis/model/biz/entity/index.ts
+++ b/src/apis/model/biz/entity/index.ts
@@ -1,5 +1,5 @@
 import type { Nullable, Optional } from '@/types';
-import type { ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO } from '../../schema';
+import type { ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO } from '../../types';
 import type { NdmAlarmHost } from './alarm';
 import type { NdmSecurityBox, NdmSwitch } from './other';
 import type { NdmNvr } from './storage';
--- a/src/apis/model/index.ts
+++ b/src/apis/model/index.ts
@@ -1,5 +1,5 @@
 export * from './base';
 export * from './biz';
 export * from './common';
-export * from './schema';
 export * from './system';
+export * from './types';
--- a/src/apis/model/schema/index.ts
+++ b/src/apis/model/schema/index.ts
--- a/src/apis/model/schema/model.ts
+++ b/src/apis/model/schema/model.ts
--- a/src/apis/model/schema/page.ts
+++ b/src/apis/model/schema/page.ts
--- a/src/apis/model/schema/reduce.ts
+++ b/src/apis/model/schema/reduce.ts
--- a/src/apis/request/biz/log/ndm-record-check.ts
+++ b/src/apis/request/biz/log/ndm-record-check.ts
@@ -48,13 +48,3 @@ export const reloadAllRecordCheckApi = async (dayOffset: number, options?: { sta
  if (!data) throw new Error(`${data}`);
  return data;
 };
-
-export const batchExportRecordCheckApi = async (params: { checkDuration: number; gapSeconds: number; stationCode: Station['code'][] }, options?: { signal?: AbortSignal }) => {
-  const { signal } = options ?? {};
-  const { checkDuration, gapSeconds, stationCode } = params;
-  const client = userClient;
-  const endpoint = `/api/ndm/ndmRecordCheck/batchExportByTemplate`;
-  const resp = await client.post<Blob>(endpoint, { checkDuration, gapSeconds, stationCode }, { responseType: 'blob', retRaw: true, signal });
-  const data = unwrapResponse(resp);
-  return data;
-};
--- a/src/apis/request/biz/other/ndm-permission.ts
+++ b/src/apis/request/biz/other/ndm-permission.ts
@@ -71,13 +71,3 @@ export const deletePermissionApi = async (ids: string[], options?: { stationCode
  const result = unwrapResponse(resp);
  return result;
 };
-
-export const modifyPermissionApi = async (params: { employeeId: string; saveList: NdmPermissionSaveVO[]; removeList: string[] }, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
-  const { stationCode, signal } = options ?? {};
-  const client = stationCode ? ndmClient : userClient;
-  const prefix = stationCode ? `/${stationCode}` : '';
-  const endpoint = `${prefix}/api/ndm/ndmPermission/modify`;
-  const resp = await client.post<boolean>(endpoint, params, { signal });
-  const result = unwrapResponse(resp);
-  return result;
-};
--- a/src/components/device/device-card/components/current-diag/nvr-record-card.vue
+++ b/src/components/device/device-card/components/current-diag/nvr-record-card.vue
@@ -1,58 +1,34 @@
 <script setup lang="ts">
-import { getChannelListApi, getRecordCheckApi, reloadAllRecordCheckApi, reloadRecordCheckApi, type NdmNvrResultVO, type RecordItem, type Station } from '@/apis';
+import { getChannelListApi, getRecordCheckApi, reloadAllRecordCheckApi, reloadRecordCheckApi, type NdmNvrResultVO, type NdmRecordCheck, type RecordItem, type Station } from '@/apis';
 import { exportRecordDiagCsv, transformRecordChecks } from '@/helpers';
-import { useSettingStore } from '@/stores';
+import { useStationStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
+import { useMutation } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
 import dayjs from 'dayjs';
 import { DownloadIcon, RotateCwIcon } from 'lucide-vue-next';
 import { NButton, NCard, NFlex, NIcon, NPagination, NPopconfirm, NPopover, NRadioButton, NRadioGroup, NTooltip, useThemeVars } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, onBeforeUnmount, ref, toRefs, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';

 const props = defineProps<{
  ndmDevice: NdmNvrResultVO;
  station: Station;
 }>();

-const settingStore = useSettingStore();
-const { activeRequests } = storeToRefs(settingStore);
-
 const themeVars = useThemeVars();

-const queryClient = useQueryClient();
+const stationStore = useStationStore();
+const { stations } = storeToRefs(stationStore);

 const { ndmDevice, station } = toRefs(props);

+const recordChecks = ref<NdmRecordCheck[]>([]);
+
 const lossInput = ref<number>(0);

-const abortController = ref<AbortController>(new AbortController());
-
-const NVR_RECORD_CHECK_KEY = 'nvr_record_check_query';
-
-const {
-  data: recordChecks,
-  isFetching: loading,
-  refetch: refetchRecordChecks,
-} = useQuery({
-  queryKey: computed(() => [NVR_RECORD_CHECK_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
-  enabled: computed(() => activeRequests.value),
-  refetchInterval: 30 * 1000,
-  gcTime: 0,
-  queryFn: async ({ signal }) => {
-    const checks = await getRecordCheckApi(ndmDevice.value, 90, [], { stationCode: station.value.code, signal });
-    return checks;
-  },
-});
-watch(activeRequests, (active) => {
-  if (!active) {
-    queryClient.cancelQueries({ queryKey: [NVR_RECORD_CHECK_KEY] });
-  }
-});
-
 const recordDiags = computed(() => {
-  return transformRecordChecks(recordChecks.value ?? []).filter((recordDiag) => {
+  return transformRecordChecks(recordChecks.value).filter((recordDiag) => {
    if (lossInput.value === 0) {
      return true;
    } else if (lossInput.value === 1) {
@@ -64,6 +40,26 @@ const recordDiags = computed(() => {
  });
 });

+const abortController = ref<AbortController>(new AbortController());
+
+const { mutate: getRecordCheckByParentId, isPending: loading } = useMutation({
+  mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+    const checks = await getRecordCheckApi(ndmDevice.value, 90, [], { stationCode: station.value.code, signal: abortController.value.signal });
+    return checks;
+  },
+  onSuccess: (checks) => {
+    recordChecks.value = checks;
+  },
+  onError: (error) => {
+    if (isCancel(error)) return;
+    console.error(error);
+    const errorFeedback = parseErrorFeedback(error);
+    window.$message.error(errorFeedback);
+  },
+});
+
 const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
  mutationFn: async () => {
    abortController.value.abort();
@@ -82,7 +78,9 @@ const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
 });

 const onExportRecordCheck = () => {
-  exportRecordDiagCsv(recordDiags.value, station.value.name);
+  const code = station.value.code;
+  const stationName = stations.value.find((station) => station.code === code)?.name ?? '';
+  exportRecordDiagCsv(recordDiags.value, stationName);
 };

 const page = ref(1);
@@ -123,7 +121,7 @@ const { mutate: reloadRecordCheckByGbId } = useMutation({
    }
  },
  onSuccess: () => {
-    refetchRecordChecks();
+    getRecordCheckByParentId();
  },
  onError: (error) => {
    if (isCancel(error)) return;
@@ -133,6 +131,20 @@ const { mutate: reloadRecordCheckByGbId } = useMutation({
  },
 });

+onMounted(() => {
+  getRecordCheckByParentId();
+});
+
+watch(
+  () => ndmDevice.value.id,
+  (devieDbId) => {
+    if (devieDbId) {
+      recordChecks.value = [];
+      getRecordCheckByParentId();
+    }
+  },
+);
+
 onBeforeUnmount(() => {
  abortController.value.abort();
 });
@@ -157,7 +169,7 @@ onBeforeUnmount(() => {
      <NFlex>
        <NTooltip trigger="hover">
          <template #trigger>
-            <NButton size="small" quaternary circle :loading="loading" @click="() => refetchRecordChecks()">
+            <NButton size="small" quaternary circle :loading="loading" @click="() => getRecordCheckByParentId()">
              <template #icon>
                <NIcon :component="RotateCwIcon" />
              </template>
--- a/src/components/device/device-card/components/current-diag/security-box-circuit-card.vue
+++ b/src/components/device/device-card/components/current-diag/security-box-circuit-card.vue
@@ -13,9 +13,7 @@ import {
  type Station,
 } from '@/apis';
 import { SecurityBoxCircuitLinkModal } from '@/components';
-import { usePermission } from '@/composables';
 import { SELECT_DEVICE_FN_INJECTION_KEY } from '@/constants';
-import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { useDeviceStore, useSettingStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
@@ -40,9 +38,7 @@ const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);

 const settingStore = useSettingStore();
-const { useLocalDB } = storeToRefs(settingStore);
-
-const { hasPermission } = usePermission();
+const { offlineDev } = storeToRefs(settingStore);

 const { ndmDevice, station, circuits } = toRefs(props);

@@ -227,7 +223,6 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
 const onContextmenu = (payload: PointerEvent, circuitIndex: number) => {
  payload.stopPropagation();
  payload.preventDefault();
-  if (!hasPermission(station.value.code, PERMISSION_TYPE_LITERALS.OPERATION)) return;
  const { clientX, clientY } = payload;
  contextmenu.value = { x: clientX, y: clientY, circuitIndex };
  showContextmenu.value = true;
@@ -263,8 +258,8 @@ const { mutate: unlinkDevice } = useMutation({
    delete modifiedUpperLinkDescription.downstream?.[circuitIndex];
    modifiedUpperDevice.linkDescription = JSON.stringify(modifiedUpperLinkDescription);

-    // 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
-    if (useLocalDB.value) {
+    // 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
+    if (offlineDev.value) {
      return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
    }
    const stationCode = station.value.code;
--- a/src/components/device/device-card/components/current-diag/security-box-circuit-link-modal.vue
+++ b/src/components/device/device-card/components/current-diag/security-box-circuit-link-modal.vue
@@ -23,7 +23,7 @@ const show = defineModel<boolean>('show', { default: false });
 const deviceStore = useDeviceStore();

 const settingStore = useSettingStore();
-const { useLocalDB } = storeToRefs(settingStore);
+const { offlineDev } = storeToRefs(settingStore);

 const { ndmDevice, station, circuitIndex } = toRefs(props);

@@ -150,8 +150,8 @@ const { mutate: linkPortToDevice, isPending: linking } = useMutation({
    }
    modifiedLowerDevice.linkDescription = JSON.stringify(modifiedLowerDeviceLinkDescription);

-    // 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
-    if (useLocalDB.value) {
+    // 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
+    if (offlineDev.value) {
      return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
    }
    const stationCode = station.value.code;
--- a/src/components/device/device-card/components/current-diag/switch-port-card.vue
+++ b/src/components/device/device-card/components/current-diag/switch-port-card.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { detailDeviceApi, updateDeviceApi, type LinkDescription, type NdmDeviceResultVO, type NdmSwitchLinkDescription, type NdmSwitchPortInfo, type NdmSwitchResultVO, type Station } from '@/apis';
 import { SwitchPortLinkModal } from '@/components';
-import { usePermission } from '@/composables';
 import { SELECT_DEVICE_FN_INJECTION_KEY } from '@/constants';
-import { PERMISSION_TYPE_LITERALS } from '@/enums';
 import { getPortStatusValue, transformPortSpeed } from '@/helpers';
 import { useDeviceStore, useSettingStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
@@ -27,9 +25,7 @@ const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);

 const settingStore = useSettingStore();
-const { useLocalDB } = storeToRefs(settingStore);
-
-const { hasPermission } = usePermission();
+const { offlineDev } = storeToRefs(settingStore);

 const { ndmDevice, station, ports } = toRefs(props);

@@ -176,7 +172,6 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
 const onContextmenu = (payload: PointerEvent, port: NdmSwitchPortInfo) => {
  payload.stopPropagation();
  payload.preventDefault();
-  if (!hasPermission(station.value.code, PERMISSION_TYPE_LITERALS.OPERATION)) return;
  const { clientX, clientY } = payload;
  contextmenu.value = { x: clientX, y: clientY, port };
  showContextmenu.value = true;
@@ -213,8 +208,8 @@ const { mutate: unlinkDevice } = useMutation({
    delete modifiedUpperLinkDescription.downstream?.[port.portName];
    modifiedUpperDevice.linkDescription = JSON.stringify(modifiedUpperLinkDescription);

-    // 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
-    if (useLocalDB.value) {
+    // 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
+    if (offlineDev.value) {
      return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
    }
    const stationCode = station.value.code;
--- a/src/components/device/device-card/components/current-diag/switch-port-link-modal.vue
+++ b/src/components/device/device-card/components/current-diag/switch-port-link-modal.vue
@@ -32,7 +32,7 @@ const show = defineModel<boolean>('show', { default: false });
 const deviceStore = useDeviceStore();

 const settingStore = useSettingStore();
-const { useLocalDB } = storeToRefs(settingStore);
+const { offlineDev } = storeToRefs(settingStore);

 const { ndmDevice, station, port } = toRefs(props);

@@ -160,8 +160,8 @@ const { mutate: linkPortToDevice, isPending: linking } = useMutation({
    }
    modifiedLowerDevice.linkDescription = JSON.stringify(modifiedLowerDeviceLinkDescription);

-    // 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
-    if (useLocalDB.value) {
+    // 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
+    if (offlineDev.value) {
      return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
    }
    const stationCode = station.value.code;
--- a/src/components/device/device-card/ndm-alarm-host/alarm-host-card.vue
+++ b/src/components/device/device-card/ndm-alarm-host/alarm-host-card.vue
@@ -18,7 +18,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { showDeviceRawData } = storeToRefs(settingStore);
+const { debugModeEnabled } = storeToRefs(settingStore);

 const { hasPermission } = usePermission();

@@ -35,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
+watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
 });
@@ -50,7 +50,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
-        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
+        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-camera/camera-card.vue
+++ b/src/components/device/device-card/ndm-camera/camera-card.vue
@@ -18,7 +18,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { showDeviceRawData } = storeToRefs(settingStore);
+const { debugModeEnabled } = storeToRefs(settingStore);

 const { hasPermission } = usePermission();

@@ -35,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
+watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
 });
@@ -50,7 +50,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
-        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
+        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-camera/camera-current-diag.vue
+++ b/src/components/device/device-card/ndm-camera/camera-current-diag.vue
@@ -31,7 +31,7 @@ const props = defineProps<{
 }>();

 const settingStore = useSettingStore();
-const { activeRequests } = storeToRefs(settingStore);
+const { offlineDev } = storeToRefs(settingStore);

 const queryClient = useQueryClient();

@@ -49,7 +49,7 @@ const QUERY_KEY = 'camera-installation-area-query';

 const { data: installationArea } = useQuery({
  queryKey: computed(() => [QUERY_KEY, ndmDevice.value.gbCode, station.value.code]),
-  enabled: computed(() => activeRequests.value),
+  enabled: computed(() => !offlineDev.value),
  gcTime: 0,
  queryFn: async ({ signal }) => {
    const UNKNOWN_NAME = '-';
@@ -107,8 +107,8 @@ const { data: installationArea } = useQuery({
    return `${tier1Area.name}-${tier2Area.name}`;
  },
 });
-watch(activeRequests, (active) => {
-  if (!active) {
+watch(offlineDev, (offline) => {
+  if (offline) {
    queryClient.cancelQueries({ queryKey: [QUERY_KEY] });
  }
 });
--- a/src/components/device/device-card/ndm-decoder/decoder-card.vue
+++ b/src/components/device/device-card/ndm-decoder/decoder-card.vue
@@ -18,7 +18,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { showDeviceRawData } = storeToRefs(settingStore);
+const { debugModeEnabled } = storeToRefs(settingStore);

 const { hasPermission } = usePermission();

@@ -35,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
+watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
 });
@@ -50,7 +50,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
-        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
+        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-keyboard/keyboard-card.vue
+++ b/src/components/device/device-card/ndm-keyboard/keyboard-card.vue
@@ -18,7 +18,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { showDeviceRawData } = storeToRefs(settingStore);
+const { debugModeEnabled } = storeToRefs(settingStore);

 const { hasPermission } = usePermission();

@@ -35,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
+watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
 });
@@ -50,7 +50,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
-        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
+        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-nvr/nvr-card.vue
+++ b/src/components/device/device-card/ndm-nvr/nvr-card.vue
@@ -18,7 +18,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { showDeviceRawData } = storeToRefs(settingStore);
+const { debugModeEnabled } = storeToRefs(settingStore);

 const { hasPermission } = usePermission();

@@ -35,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
+watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
 });
@@ -50,7 +50,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
-        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
+        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-nvr/nvr-current-diag.vue
+++ b/src/components/device/device-card/ndm-nvr/nvr-current-diag.vue
@@ -45,7 +45,7 @@ const diskArray = computed(() => lastDiagInfo.value?.info?.groupInfoList);
  <NFlex vertical>
    <DeviceHeaderCard :ndm-device="ndmDevice" :station="station" />
    <DeviceCommonCard :common-info="commonInfo" />
-    <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
+    <DeviceHardwareCard v-if="!isNvrCluster(ndmDevice)" :cpu-usage="cpuUsage" :mem-usage="memUsage" />
    <NvrDiskCard :disk-health="diskHealth" :disk-array="diskArray" />
    <NvrRecordCard v-if="isNvrCluster(ndmDevice)" :ndm-device="ndmDevice" :station="station" />
  </NFlex>
--- a/src/components/device/device-card/ndm-security-box/security-box-card.vue
+++ b/src/components/device/device-card/ndm-security-box/security-box-card.vue
@@ -18,7 +18,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { showDeviceRawData } = storeToRefs(settingStore);
+const { debugModeEnabled } = storeToRefs(settingStore);

 const { hasPermission } = usePermission();

@@ -35,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
+watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
 });
@@ -50,7 +50,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
-        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
+        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-server/server-alive.vue
+++ b/src/components/device/device-card/ndm-server/server-alive.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 }>();

 const settingStore = useSettingStore();
-const { activeRequests } = storeToRefs(settingStore);
+const { offlineDev } = storeToRefs(settingStore);

 const queryClient = useQueryClient();

@@ -25,7 +25,7 @@ const MEDIA_SERVER_ALIVE_QUERY_KEY = 'media-server-alive-query';
 const VIDEO_SERVER_ALIVE_QUERY_KEY = 'video-server-alive-query';
 const { data: isMediaServerAlive } = useQuery({
  queryKey: computed(() => [MEDIA_SERVER_ALIVE_QUERY_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
-  enabled: computed(() => activeRequests.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmMediaServer),
+  enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmMediaServer),
  refetchInterval: 30 * 1000,
  gcTime: 0,
  queryFn: async ({ signal }) => {
@@ -35,15 +35,15 @@ const { data: isMediaServerAlive } = useQuery({
 });
 const { data: isSipServerAlive } = useQuery({
  queryKey: computed(() => [VIDEO_SERVER_ALIVE_QUERY_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
-  enabled: computed(() => activeRequests.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmVideoServer),
+  enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmVideoServer),
  refetchInterval: 30 * 1000,
  gcTime: 0,
  queryFn: async ({ signal }) => {
    return await isSipServerAliveApi({ stationCode: station.value.code, signal });
  },
 });
-watch(activeRequests, (active) => {
-  if (!active) {
+watch(offlineDev, (offline) => {
+  if (offline) {
    queryClient.cancelQueries({ queryKey: [MEDIA_SERVER_ALIVE_QUERY_KEY] });
    queryClient.cancelQueries({ queryKey: [VIDEO_SERVER_ALIVE_QUERY_KEY] });
  }
@@ -56,7 +56,7 @@ watch(activeRequests, (active) => {
      <span>服务状态</span>
    </template>
    <template #default>
-      <template v-if="!activeRequests">
+      <template v-if="offlineDev">
        <span>-</span>
      </template>
      <template v-else>
--- a/src/components/device/device-card/ndm-server/server-card.vue
+++ b/src/components/device/device-card/ndm-server/server-card.vue
@@ -18,7 +18,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { showDeviceRawData } = storeToRefs(settingStore);
+const { debugModeEnabled } = storeToRefs(settingStore);

 const { hasPermission } = usePermission();

@@ -35,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
+watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
 });
@@ -50,7 +50,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
-        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
+        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-server/server-stream-push.vue
+++ b/src/components/device/device-card/ndm-server/server-stream-push.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 }>();

 const settingStore = useSettingStore();
-const { activeRequests } = storeToRefs(settingStore);
+const { offlineDev } = storeToRefs(settingStore);

 const queryClient = useQueryClient();

@@ -27,7 +27,7 @@ const SERVER_STREAM_PUSH_KEY = 'server-stream-push-query';

 const { data: streamPushes } = useQuery({
  queryKey: computed(() => [SERVER_STREAM_PUSH_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
-  enabled: computed(() => activeRequests.value && showCard.value),
+  enabled: computed(() => !offlineDev.value && showCard.value),
  refetchInterval: 30 * 1000,
  gcTime: 0,
  queryFn: async ({ signal }) => {
@@ -35,8 +35,8 @@ const { data: streamPushes } = useQuery({
    return streamPushes;
  },
 });
-watch(activeRequests, (active) => {
-  if (!active) {
+watch(offlineDev, (offline) => {
+  if (offline) {
    queryClient.cancelQueries({ queryKey: [SERVER_STREAM_PUSH_KEY] });
  }
 });
@@ -70,7 +70,7 @@ const streamPushStat = computed(() => {
      <span>推流统计</span>
    </template>
    <template #default>
-      <template v-if="!activeRequests">
+      <template v-if="offlineDev">
        <span>-</span>
      </template>
      <template v-else>
--- a/src/components/device/device-card/ndm-switch/switch-card.vue
+++ b/src/components/device/device-card/ndm-switch/switch-card.vue
@@ -18,8 +18,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { showDeviceRawData } = storeToRefs(settingStore);
-
+const { debugModeEnabled } = storeToRefs(settingStore);
 const { hasPermission } = usePermission();

 const { ndmDevice, station } = toRefs(props);
@@ -35,8 +34,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
+watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
 });
@@ -50,7 +49,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
-        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
+        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-tree/device-tree.vue
+++ b/src/components/device/device-tree/device-tree.vue
@@ -4,7 +4,7 @@ import { useDeviceTree, usePermission, type UseDeviceTreeReturn } from '@/compos
 import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType, PERMISSION_TYPE_LITERALS } from '@/enums';
 import { isNvrCluster } from '@/helpers';
 import { useDeviceStore, usePermissionStore } from '@/stores';
-import { watchDebounced, watchImmediate } from '@vueuse/core';
+import { watchImmediate } from '@vueuse/core';
 import destr from 'destr';
 import { isFunction } from 'es-toolkit';
 import {
@@ -27,7 +27,7 @@ import {
  type TreeProps,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, h, nextTick, onBeforeUnmount, onMounted, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
+import { computed, h, nextTick, onBeforeUnmount, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';

 const props = defineProps<{
  /**
@@ -67,15 +67,15 @@ const {
  selectedStationCode,
  selectedDeviceType,
  selectedDevice,
-  syncFromRoute,
-  syncToRoute,
  selectDevice,
  // 设备管理
  exportDevice,
  exportDeviceTemplate,
  importDevice,
  deleteDevice,
-} = useDeviceTree();
+} = useDeviceTree({
+  syncRoute: computed(() => !!syncRoute.value),
+});

 // 将 `selectDevice` 函数暴露给父组件
 emit('exposeSelectDeviceFn', selectDevice);
@@ -91,7 +91,6 @@ const onSelectDevice = (device: NdmDeviceResultVO, stationCode: Station['code'])

 const permissionStore = usePermissionStore();
 const stations = computed(() => permissionStore.stations.VIEW ?? []);
-
 const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);

@@ -484,38 +483,11 @@ const onLocateDeviceTree = async () => {

  animated.value = true;
 };
-
-// 当选择的设备发生变化时，定位设备树，并同步选中状态到路由参数
+// 渲染全线设备树时，当选择的设备发生变化，则定位设备树
 // 暂时不考虑多次执行的问题，因为当选择的设备在设备树视口内时，不会发生滚动
-watch(selectedDevice, async (newDevice, oldDevice) => {
+watch(selectedDevice, async () => {
  if (!!station.value) return;
-  if (newDevice?.id === oldDevice?.id) return;
-  // console.log('selectedDevice changed');
-  onLocateDeviceTree();
-  syncToRoute();
-});
-
-// 当全线设备发生变化时，从路由参数同步选中状态
-// 但lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
-// 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
-watchDebounced(
-  lineDevices,
-  (newLineDevices) => {
-    if (syncRoute.value) {
-      // console.log('lineDevices changed');
-      syncFromRoute(newLineDevices);
-    }
-  },
-  {
-    debounce: 500,
-    deep: true,
-  },
-);
-
-onMounted(() => {
-  if (syncRoute.value) {
-    syncFromRoute(lineDevices.value);
-  }
+  await onLocateDeviceTree();
 });
 </script>

--- a/src/components/global/settings-drawer/settings-drawer.vue
+++ b/src/components/global/settings-drawer/settings-drawer.vue
@@ -4,7 +4,7 @@ import { ThemeSwitch } from '@/components';
 import { usePermission } from '@/composables';
 import { NDM_ALARM_STORE_ID, NDM_DEVICE_STORE_ID, NDM_STATION_STORE_ID } from '@/constants';
 import { PERMISSION_TYPE_LITERALS } from '@/enums';
-import { useSettingStore, useStationStore } from '@/stores';
+import { usePollingStore, useSettingStore, useStationStore } from '@/stores';
 import { downloadByData, getAppEnvConfig, parseErrorFeedback, sleep } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { useEventListener } from '@vueuse/core';
@@ -25,7 +25,7 @@ const { stations } = storeToRefs(stationStore);
 const occStation = computed(() => stations.value.find((station) => !!station.occ));

 const settingsStore = useSettingStore();
-const { menuCollpased, stationGridCols, debugMode, showDeviceRawData, pollingStations, activeRequests, subscribeMessages, mockUser, useLocalDB } = storeToRefs(settingsStore);
+const { menuCollpased, stationGridCols, debugModeEnabled, offlineDev } = storeToRefs(settingsStore);

 const { hasPermission } = usePermission();

@@ -132,11 +132,11 @@ const enableDebugMode = () => {
    return;
  }
  showDebugCodeModal.value = false;
-  debugMode.value = true;
+  settingsStore.enableDebugMode();
 };
 const disableDebugMode = () => {
  showDebugCodeModal.value = false;
-  debugMode.value = false;
+  settingsStore.disableDebugMode();
 };
 useEventListener('keydown', (event) => {
  const { ctrlKey, altKey, code } = event;
@@ -147,18 +147,28 @@ useEventListener('keydown', (event) => {

 const expectToShowDebugCodeInput = ref(false);
 const onModalAfterEnter = () => {
-  expectToShowDebugCodeInput.value = !debugMode.value;
+  expectToShowDebugCodeInput.value = !debugModeEnabled.value;
 };
 const onModalAfterLeave = () => {
  expectToShowDebugCodeInput.value = false;
  debugCode.value = '';
 };

+const pollingStore = usePollingStore();
+const { pollingEnabled } = storeToRefs(pollingStore);
+const onPollingEnabledUpdate = (enabled: boolean) => {
+  if (enabled) {
+    pollingStore.startPolling();
+  } else {
+    pollingStore.stopPolling();
+  }
+};
+
 type IndexedDbStoreId = typeof NDM_STATION_STORE_ID | typeof NDM_DEVICE_STORE_ID | typeof NDM_ALARM_STORE_ID;
 type IndexedDbStoreStates = {
  [NDM_STATION_STORE_ID]: { stations: Station[] };
  [NDM_DEVICE_STORE_ID]: { lineDevices: LineDevices };
-  [NDM_ALARM_STORE_ID]: { lineAlarms: LineAlarms };
+  [NDM_ALARM_STORE_ID]: { lineAlarms: LineAlarms; unreadLineAlarms: LineAlarms };
 };
 const exportFromIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options?: { errorMsg?: string }) => {
  const { errorMsg } = options ?? {};
@@ -171,9 +181,8 @@ const exportFromIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, optio
 };
 const importToIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options?: { successMsg?: string; errorMsg?: string }) => {
  const { successMsg, errorMsg } = options ?? {};
-  pollingStations.value = false;
-  activeRequests.value = false;
-  subscribeMessages.value = false;
+  pollingStore.stopPolling();
+  offlineDev.value = true;
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = '.json';
@@ -196,9 +205,8 @@ const importToIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options
  };
 };
 const deleteFromIndexedDB = async (storeId: IndexedDbStoreId) => {
-  pollingStations.value = false;
-  activeRequests.value = false;
-  subscribeMessages.value = false;
+  pollingStore.stopPolling();
+  offlineDev.value = true;
  await localforage.removeItem(storeId).catch((error) => {
    window.$message.error(`${error}`);
    return;
@@ -267,8 +275,8 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
  }
 };

-watch([activeRequests, show], ([active, entered]) => {
-  if (!active) return;
+watch([offlineDev, show], ([offline, entered]) => {
+  if (!offline) {
    if (entered) {
      getRetentionDays();
      getSnapStatus();
@@ -276,6 +284,7 @@ watch([activeRequests, show], ([active, entered]) => {
      abortControllers.value.retentionDays.abort();
      abortControllers.value.snapStatus.abort();
    }
+  }
 });
 const onDrawerAfterEnter = () => {
  getVersionInfo();
@@ -325,33 +334,15 @@ const onDrawerAfterLeave = () => {
          </NFormItem>
        </template>

-        <template v-if="debugMode">
+        <template v-if="debugModeEnabled">
          <NDivider title-placement="center">调试</NDivider>
-          <NFormItem label="调试模式" label-placement="left">
-            <NSwitch size="small" v-model:value="debugMode" />
+          <NFormItem label="启用轮询" label-placement="left">
+            <NSwitch size="small" :value="pollingEnabled" @update:value="onPollingEnabledUpdate" />
          </NFormItem>
-          <NDivider title-placement="left" dashed>数据设置</NDivider>
-          <NFormItem label="显示设备原始数据" label-placement="left">
-            <NSwitch size="small" v-model:value="showDeviceRawData" />
+          <NFormItem label="离线开发" label-placement="left">
+            <NSwitch size="small" v-model:value="offlineDev" />
          </NFormItem>
-          <NDivider title-placement="left" dashed>网络设置</NDivider>
-          <NFormItem label="轮询车站" label-placement="left">
-            <NSwitch size="small" v-model:value="pollingStations" />
-          </NFormItem>
-          <NFormItem label="主动请求" label-placement="left">
-            <NSwitch size="small" v-model:value="activeRequests" />
-          </NFormItem>
-          <NFormItem label="订阅消息" label-placement="left">
-            <NSwitch size="small" v-model:value="subscribeMessages" />
-          </NFormItem>
-          <NFormItem label="模拟用户" label-placement="left">
-            <NSwitch size="small" v-model:value="mockUser" />
-          </NFormItem>
-          <NDivider title-placement="left" dashed>数据库设置</NDivider>
-          <NFormItem label="直接操作本地数据库" label-placement="left">
-            <NSwitch size="small" v-model:value="useLocalDB" />
-          </NFormItem>
-          <NFormItem label="数据操作" label-placement="left">
+          <NFormItem label="本地数据库" label-placement="left">
            <NFlex>
              <NDropdown trigger="click" :options="exportDropdownOptions" @select="onSelectDropdownOption">
                <NButton secondary size="small">
@@ -391,7 +382,7 @@ const onDrawerAfterLeave = () => {

  <NModal v-model:show="showDebugCodeModal" preset="dialog" type="info" @after-enter="onModalAfterEnter" @after-leave="onModalAfterLeave">
    <template #header>
-      <NText v-if="!debugMode">请输入调试码</NText>
+      <NText v-if="!debugModeEnabled">请输入调试码</NText>
      <NText v-else>确认关闭调试模式</NText>
    </template>
    <template #default>
@@ -399,7 +390,7 @@ const onDrawerAfterLeave = () => {
    </template>
    <template #action>
      <NButton @click="showDebugCodeModal = false">取消</NButton>
-      <NButton v-if="!debugMode" type="primary" @click="enableDebugMode">启用</NButton>
+      <NButton v-if="!debugModeEnabled" type="primary" @click="enableDebugMode">启用</NButton>
      <NButton v-else type="primary" @click="disableDebugMode">确认</NButton>
    </template>
  </NModal>
--- a/src/components/global/theme-switch/theme-switch.vue
+++ b/src/components/global/theme-switch/theme-switch.vue
@@ -5,14 +5,14 @@ import { storeToRefs } from 'pinia';
 import type { ComponentInstance } from 'vue';

 const settingsStore = useSettingStore();
-const { darkMode } = storeToRefs(settingsStore);
+const { darkThemeEnabled } = storeToRefs(settingsStore);

 // 使外部能够获取NSwitch的类型提示
 defineExpose({} as ComponentInstance<typeof NSwitch>);
 </script>

 <template>
-  <NSwitch v-model:value="darkMode">
+  <NSwitch v-model:value="darkThemeEnabled">
    <template #unchecked-icon>
      <NIcon>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
--- a/src/components/permission/index.ts
+++ b/src/components/permission/index.ts
@@ -1,6 +1 @@
-import type { ComponentInstance } from 'vue';
-import PermissionConfigModal from './permission-config-modal.vue';
-
-export type PermissionConfigModalProps = ComponentInstance<typeof PermissionConfigModal>['$props'];
-
-export { PermissionConfigModal };
+export * from './permission-config-modal';
--- a/src/components/permission/permission-config-modal.vue
+++ b/src/components/permission/permission-config-modal.vue
@@ -1,302 +0,0 @@
-<script setup lang="ts">
-import { detailBaseEmployeeApi, modifyPermissionApi, pagePermissionApi, type BaseEmployeeResultVO, type NdmPermissionResultVO, type NdmPermissionSaveVO, type Station } from '@/apis';
-import { PERMISSION_TYPE_LITERALS, PERMISSION_TYPE_NAMES, type PermissionType } from '@/enums';
-import { useStationStore } from '@/stores';
-import { parseErrorFeedback } from '@/utils';
-import { useMutation } from '@tanstack/vue-query';
-import { objectEntries } from '@vueuse/core';
-import { isCancel } from 'axios';
-import { cloneDeep } from 'es-toolkit';
-import { NButton, NCheckbox, NDataTable, NFlex, NModal, NText, type DataTableColumn, type DataTableColumns } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, h, ref, toRefs } from 'vue';
-
-type NdmPermissionSaveOrResultVO = NdmPermissionSaveVO | NdmPermissionResultVO;
-
-const props = defineProps<{
-  employeeId?: string;
-}>();
-
-const stationStore = useStationStore();
-const { stations } = storeToRefs(stationStore);
-
-const show = defineModel<boolean>('show', { default: false });
-
-const { employeeId } = toRefs(props);
-
-const abortController = ref<AbortController>(new AbortController());
-
-const employee = ref<BaseEmployeeResultVO>();
-const { mutateAsync: getEmployeeAsync } = useMutation({
-  mutationFn: async () => {
-    abortController.value.abort();
-    abortController.value = new AbortController();
-
-    if (!employeeId.value) return;
-
-    const signal = abortController.value.signal;
-
-    const data = await detailBaseEmployeeApi(employeeId.value, { signal });
-    return data;
-  },
-  onSuccess: (data) => {
-    if (!data) return;
-    employee.value = data;
-  },
-  onError: (error) => {
-    if (isCancel(error)) return;
-    console.error(error);
-    const errorFeedback = parseErrorFeedback(error);
-    window.$message.error(errorFeedback);
-  },
-});
-
-// 从后端获取的原始权限列表
-const originalList = ref<NdmPermissionResultVO[]>([]);
-// 当前用户配置的权限列表
-const currentList = ref<NdmPermissionSaveOrResultVO[]>([]);
-
-const { mutate: getPermissions, isPending: permissionsLoading } = useMutation({
-  mutationFn: async () => {
-    if (!employeeId.value) throw new Error('员工ID不能为空');
-
-    abortController.value.abort();
-    abortController.value = new AbortController();
-
-    const signal = abortController.value.signal;
-
-    const data = await pagePermissionApi(
-      {
-        model: {
-          employeeId: employeeId.value,
-        },
-        current: 1,
-        size: Object.keys(PERMISSION_TYPE_LITERALS).length * stations.value.length,
-      },
-      { signal },
-    );
-
-    return data;
-  },
-  onSuccess: (data) => {
-    if (!data) return;
-    const { records } = data;
-    originalList.value = cloneDeep(records);
-    currentList.value = cloneDeep(records);
-  },
-  onError: (error) => {
-    if (isCancel(error)) return;
-    console.error(error);
-    const errorFeedback = parseErrorFeedback(error);
-    window.$message.error(errorFeedback);
-  },
-});
-
-const onUpdatePermissionChecked = (checked: boolean, stationCode: Station['code'], permissionType: PermissionType) => {
-  if (!employeeId.value) return;
-  if (checked) {
-    const existed = currentList.value.some((permission) => permission.stationCode === stationCode && permission.type === permissionType);
-    if (!existed) {
-      const saveVO: NdmPermissionSaveVO = {
-        employeeId: employeeId.value,
-        stationCode,
-        type: permissionType,
-      };
-      currentList.value.push(saveVO);
-    }
-  } else {
-    const index = currentList.value.findIndex((permission) => permission.stationCode === stationCode && permission.type === permissionType);
-    if (index !== -1) {
-      currentList.value.splice(index, 1);
-    }
-  }
-};
-
-const tableColumns = computed<DataTableColumns<Station>>(() => {
-  return [
-    {
-      title: () => {
-        const permissionCount = currentList.value.length;
-        const permissionTypeCount = objectEntries(PERMISSION_TYPE_LITERALS).length;
-        const checked = permissionCount === stations.value.length * permissionTypeCount;
-        const indeterminate = permissionCount > 0 && permissionCount < stations.value.length * permissionTypeCount;
-        return h(NCheckbox, {
-          checked,
-          indeterminate,
-          onUpdateChecked: (checked) => {
-            objectEntries(PERMISSION_TYPE_LITERALS).forEach(([permissionType]) => {
-              stations.value.forEach((station) => {
-                onUpdatePermissionChecked(checked, station.code, permissionType);
-              });
-            });
-          },
-        });
-      },
-      key: 'row-check',
-      align: 'center',
-      width: 60,
-      fixed: 'left',
-      render: (rowData) => {
-        const { code: stationCode } = rowData;
-        const permissionTypeCount = objectEntries(PERMISSION_TYPE_LITERALS).length;
-        const stationCheckedPermissions = currentList.value.filter((permission) => permission.stationCode === stationCode);
-        const checked = stationCheckedPermissions.length === permissionTypeCount;
-        const indeterminate = stationCheckedPermissions.length > 0 && stationCheckedPermissions.length < permissionTypeCount;
-        return h(NCheckbox, {
-          checked,
-          indeterminate,
-          onUpdateChecked: (checked) => {
-            objectEntries(PERMISSION_TYPE_LITERALS).forEach(([permissionType]) => {
-              onUpdatePermissionChecked(checked, stationCode, permissionType);
-            });
-          },
-        });
-      },
-    },
-    { title: '车站编号', key: 'code', align: 'center', width: 120 },
-    { title: '车站名称', key: 'name', align: 'center', width: 360 },
-    // 「权限」列
-    ...objectEntries(PERMISSION_TYPE_NAMES).map<DataTableColumn<Station>>(([permissionType, title]) => ({
-      title: () => {
-        const permissionCount = currentList.value.filter((permission) => permission.type === permissionType).length;
-        const checked = permissionCount === stations.value.length;
-        const indeterminate = permissionCount > 0 && permissionCount < stations.value.length;
-        return h(
-          NFlex,
-          {
-            justify: 'center',
-            align: 'center',
-          },
-          {
-            default: () => [
-              h(NCheckbox, {
-                checked,
-                indeterminate,
-                onUpdateChecked: (checked) => {
-                  stations.value.forEach((station) => {
-                    onUpdatePermissionChecked(checked, station.code, permissionType);
-                  });
-                },
-              }),
-              h('span', title),
-            ],
-          },
-        );
-      },
-      key: permissionType,
-      align: 'center',
-      render: (rowData) => {
-        const { code: stationCode } = rowData;
-        return h(NCheckbox, {
-          checked: currentList.value.some((permission) => permission.stationCode === stationCode && permission.type === permissionType),
-          onUpdateChecked: (checked) => onUpdatePermissionChecked(checked, stationCode, permissionType),
-        });
-      },
-    })),
-  ];
-});
-
-const { mutate: savePermissions, isPending: permissionsSaving } = useMutation({
-  mutationFn: async () => {
-    if (!employeeId.value) throw new Error('员工ID不能为空');
-
-    abortController.value.abort();
-    abortController.value = new AbortController();
-
-    const signal = abortController.value.signal;
-
-    // 执行diff计算，生成需要保存的权限列表和需要删除的权限ID列表
-    const saveList: NdmPermissionSaveVO[] = [];
-    const removeList: string[] = [];
-    // 遍历当前状态，如果权限不在原始权限列表中，说明是需要新增的权限
-    currentList.value.forEach((permission) => {
-      const { stationCode, type } = permission;
-      if (!stationCode || !type) return;
-      if (!originalList.value.some((permission) => permission.stationCode === stationCode && permission.type === type)) {
-        saveList.push({
-          employeeId: employeeId.value,
-          stationCode,
-          type,
-        });
-      }
-    });
-    // 遍历原始状态，如果权限不在当前状态中，说明是需要删除的权限
-    originalList.value.forEach((permission) => {
-      const { id, stationCode, type } = permission;
-      if (!id) return;
-      if (!currentList.value.some((permission) => permission.stationCode === stationCode && permission.type === type)) {
-        removeList.push(id);
-      }
-    });
-
-    await modifyPermissionApi(
-      {
-        employeeId: employeeId.value,
-        saveList,
-        removeList,
-      },
-      {
-        signal,
-      },
-    );
-  },
-  onSuccess: () => {
-    window.$message.success('权限配置保存成功');
-    getPermissions();
-  },
-  onError: (error) => {
-    if (isCancel(error)) return;
-    console.error(error);
-    const errorFeedback = parseErrorFeedback(error);
-    window.$message.error(errorFeedback);
-  },
-});
-
-const onAfterEnter = () => {
-  getEmployeeAsync().then(() => getPermissions());
-};
-
-const onAfterLeave = () => {
-  employee.value = undefined;
-  originalList.value = [];
-  currentList.value = [];
-};
-
-const onClose = () => {
-  abortController.value.abort();
-  show.value = false;
-};
-</script>
-
-<template>
-  <NModal
-    v-model:show="show"
-    preset="card"
-    style="width: 100vw; height: 100vh"
-    :content-style="{ height: '100%', overflow: 'hidden' }"
-    :close-on-esc="false"
-    :mask-closable="false"
-    :auto-focus="false"
-    @after-enter="onAfterEnter"
-    @after-leave="onAfterLeave"
-    @close="onClose"
-  >
-    <template #header>
-      <span>{{ `配置权限 - ${employee?.realName ?? ''}` }}</span>
-    </template>
-    <template #default>
-      <NDataTable flex-height style="height: 100%" :columns="tableColumns" :data="stations" :loading="permissionsLoading" :single-line="false" />
-    </template>
-    <template #footer>
-      <NText depth="3" style="font-size: smaller">*未勾选任何权限的用户将被认为拥有所有权限</NText>
-    </template>
-    <template #action>
-      <NFlex justify="end">
-        <NButton size="small" @click="onClose">取消</NButton>
-        <NButton type="primary" size="small" :loading="permissionsSaving" @click="() => savePermissions()">保存</NButton>
-      </NFlex>
-    </template>
-  </NModal>
-</template>
-
-<style scoped lang="scss"></style>
--- a/src/components/permission/permission-config-modal/index.ts
+++ b/src/components/permission/permission-config-modal/index.ts
@@ -0,0 +1,6 @@
+import type { ComponentInstance } from 'vue';
+import PermissionConfigModal from './permission-config-modal.vue';
+
+export type PermissionConfigModalProps = ComponentInstance<typeof PermissionConfigModal>['$props'];
+
+export { PermissionConfigModal };
--- a/src/components/permission/permission-config-modal/permission-config-modal.vue
+++ b/src/components/permission/permission-config-modal/permission-config-modal.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import {
+  deletePermissionApi,
+  detailBaseEmployeeApi,
+  pagePermissionApi,
+  savePermissionApi,
+  type BaseEmployeeResultVO,
+  type NdmPermissionResultVO,
+  type NdmPermissionSaveVO,
+  type Station,
+} from '@/apis';
+import { PERMISSION_TYPE_NAMES, type PermissionType } from '@/enums';
+import { useStationStore } from '@/stores';
+import { parseErrorFeedback } from '@/utils';
+import { useMutation } from '@tanstack/vue-query';
+import { objectEntries } from '@vueuse/core';
+import { isCancel } from 'axios';
+import { cloneDeep, groupBy } from 'es-toolkit';
+import { NButton, NCheckbox, NDataTable, NFlex, NModal, NText, type DataTableColumn, type DataTableColumns } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { computed, h, ref, toRefs } from 'vue';
+
+/**
+ * 为避免修改权限记录而带来复杂的状态管理，引入 `action` 字段
+ *
+ * - `save`：新增权限
+ * - `delete`：删除权限
+ *
+ * 修改权限的过程中会对本地的权限列表进行修改：
+ * - 当勾选权限时，在本地新增一条权限，`action` 为 `save`
+ * - 当取消勾选权限时，如果该权限来自服务器，则将`action` 改为 `delete`，否则直接删除权限记录
+ *
+ * 最后，保存权限时，只需要遍历本地权限列表：
+ * - 如果 `action` 为 `save`，则调用 `savePermissionApi` 新增权限
+ * - 如果 `action` 为 `delete`，则调用 `deletePermissionApi` 删除权限
+ */
+type PermissionAction = 'save' | 'delete';
+
+type NdmPermissionSaveOrResultVO = NdmPermissionSaveVO | NdmPermissionResultVO;
+
+type NdmPermissionExtendedSaveVO = NdmPermissionSaveVO & { action?: PermissionAction };
+
+type NdmPermissionExtendedResultVO = NdmPermissionResultVO & { action?: PermissionAction };
+
+type NdmPermissionExtendedSaveOrResultVO = NdmPermissionExtendedSaveVO | NdmPermissionExtendedResultVO;
+
+const omitActionField = (extendedSaveOrResultVO: NdmPermissionExtendedSaveOrResultVO) => {
+  const copy = cloneDeep(extendedSaveOrResultVO);
+  delete copy.action;
+  const saveOrResultVO = copy as NdmPermissionSaveOrResultVO;
+  return saveOrResultVO;
+};
+
+const isSaveVO = (saveOrResultVO: NdmPermissionSaveOrResultVO): saveOrResultVO is NdmPermissionSaveVO => {
+  return !('id' in saveOrResultVO);
+};
+
+const isResultVO = (saveOrResultVO: NdmPermissionSaveOrResultVO): saveOrResultVO is NdmPermissionResultVO => {
+  return 'id' in saveOrResultVO;
+};
+
+const props = defineProps<{
+  employeeId?: string;
+}>();
+
+const stationStore = useStationStore();
+const { stations } = storeToRefs(stationStore);
+
+const show = defineModel<boolean>('show', { default: false });
+
+const { employeeId } = toRefs(props);
+
+const abortController = ref<AbortController>(new AbortController());
+
+const employee = ref<BaseEmployeeResultVO>();
+const { mutateAsync: getEmployeeAsync } = useMutation({
+  mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
+    if (!employeeId.value) return;
+
+    const signal = abortController.value.signal;
+
+    const data = await detailBaseEmployeeApi(employeeId.value, { signal });
+    return data;
+  },
+  onSuccess: (data) => {
+    if (!data) return;
+    employee.value = data;
+  },
+  onError: (error) => {
+    if (isCancel(error)) return;
+    console.error(error);
+    const errorFeedback = parseErrorFeedback(error);
+    window.$message.error(errorFeedback);
+  },
+});
+
+const permissions = ref<Record<Station['code'], NdmPermissionExtendedSaveOrResultVO[]>>({});
+const { mutate: getPermissions, isPending: permissionsLoading } = useMutation({
+  mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
+    if (!employeeId.value) return;
+
+    const signal = abortController.value.signal;
+
+    const data = await pagePermissionApi(
+      {
+        model: {
+          employeeId: employeeId.value,
+        },
+        extra: {},
+        current: 1,
+        size: Object.keys(PERMISSION_TYPE_NAMES).length * stations.value.length,
+        sort: 'id',
+        order: 'ascending',
+      },
+      { signal },
+    );
+
+    return data;
+  },
+  onSuccess: (data) => {
+    if (!data) return;
+    const { records } = data;
+    permissions.value = groupBy(records, (record) => record.stationCode ?? '');
+  },
+  onError: (error) => {
+    if (isCancel(error)) return;
+    console.error(error);
+    const errorFeedback = parseErrorFeedback(error);
+    window.$message.error(errorFeedback);
+  },
+});
+
+const onUpdatePermissionChecked = (checked: boolean, stationCode: Station['code'], permissionType: PermissionType) => {
+  if (!employeeId.value) return;
+  if (checked) {
+    // 勾选时，新增一条权限记录，`action` 为 `save`
+    if (!permissions.value[stationCode]) permissions.value[stationCode] = [];
+    permissions.value[stationCode].push({ employeeId: employeeId.value, stationCode, type: permissionType, action: 'save' });
+  } else {
+    if (!permissions.value[stationCode]) return;
+    // 取消勾选时，先找到所有该类型的权限并遍历，
+    // 如果权限来自数据库（即有 `id` 字段），则将其 `action` 设为 `delete`，
+    // 否则直接从权限记录中移除
+    const targets = permissions.value[stationCode].filter((permission) => permission.type === permissionType);
+    for (const permission of targets) {
+      if (isResultVO(permission)) {
+        permission.action = 'delete';
+      } else {
+        permissions.value[stationCode].splice(permissions.value[stationCode].indexOf(permission), 1);
+      }
+    }
+  }
+};
+
+const tableColumns = computed<DataTableColumns<Station>>(() => {
+  return [
+    { title: '车站编号', key: 'code', align: 'center', width: 120 },
+    { title: '车站名称', key: 'name', align: 'center', width: 360 },
+    // 「权限」列
+    ...objectEntries(PERMISSION_TYPE_NAMES).map<DataTableColumn<Station>>(([permissionType, title]) => ({
+      title: title,
+      key: permissionType,
+      align: 'center',
+      render: (rowData) => {
+        const { code: stationCode } = rowData;
+        return h(NCheckbox, {
+          // 如果权限记录中存在该权限且 `action` 不为 `delete`，则处于勾选状态
+          checked: !!(permissions.value[stationCode] ?? []).find((permission) => permission.type === permissionType && permission.action !== 'delete'),
+          // 改变勾选状态
+          onUpdateChecked: (checked) => onUpdatePermissionChecked(checked, stationCode, permissionType),
+        });
+      },
+    })),
+  ];
+});
+
+const { mutate: savePermissions, isPending: permissionsSaving } = useMutation({
+  mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
+    const signal = abortController.value.signal;
+
+    // 遍历所有的权限记录，根据 `action` 进行保存或删除
+    for (const stationPermissions of Object.values(permissions.value)) {
+      for (const permission of stationPermissions) {
+        const saveOrResultVO = omitActionField(permission);
+        if (permission.action === 'save' && isSaveVO(saveOrResultVO)) {
+          await savePermissionApi(saveOrResultVO, { signal });
+        }
+        if (permission.action === 'delete' && isResultVO(saveOrResultVO)) {
+          const id = saveOrResultVO.id;
+          if (!id) continue;
+          await deletePermissionApi([id], { signal });
+        }
+      }
+    }
+  },
+  onSuccess: () => {
+    window.$message.success('权限配置保存成功');
+    getPermissions();
+  },
+  onError: (error) => {
+    if (isCancel(error)) return;
+    console.error(error);
+    const errorFeedback = parseErrorFeedback(error);
+    window.$message.error(errorFeedback);
+  },
+});
+
+const onAfterEnter = () => {
+  getEmployeeAsync().then(() => getPermissions());
+};
+
+const onAfterLeave = () => {
+  employee.value = undefined;
+  permissions.value = {};
+};
+
+const onClose = () => {
+  abortController.value.abort();
+  show.value = false;
+};
+</script>
+
+<template>
+  <NModal
+    v-model:show="show"
+    preset="card"
+    style="width: 100vw; height: 100vh"
+    :content-style="{ height: '100%', overflow: 'hidden' }"
+    :close-on-esc="false"
+    :mask-closable="false"
+    :auto-focus="false"
+    @after-enter="onAfterEnter"
+    @after-leave="onAfterLeave"
+    @close="onClose"
+  >
+    <template #header>
+      <span>{{ `配置权限 - ${employee?.realName ?? ''}` }}</span>
+    </template>
+    <template #default>
+      <NDataTable flex-height style="height: 100%" :columns="tableColumns" :data="stations" :loading="permissionsLoading" :single-line="false" />
+    </template>
+    <template #footer>
+      <NText depth="3" style="font-size: smaller">*未勾选任何权限的用户将被认为拥有所有权限</NText>
+    </template>
+    <template #action>
+      <NFlex justify="end">
+        <NButton size="small" @click="onClose">取消</NButton>
+        <NButton type="primary" size="small" :loading="permissionsSaving" @click="() => savePermissions()">保存</NButton>
+      </NFlex>
+    </template>
+  </NModal>
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/components/station/record-check-export-modal/record-check-export-modal.vue
+++ b/src/components/station/record-check-export-modal/record-check-export-modal.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { batchExportRecordCheckApi, getRecordCheckApi, pageDefParameterApi, type NdmNvrResultVO, type Station } from '@/apis';
+import { getRecordCheckApi, type NdmNvrResultVO, type Station } from '@/apis';
 import { exportRecordDiagCsv, isNvrCluster, transformRecordChecks } from '@/helpers';
 import { useDeviceStore } from '@/stores';
-import { downloadByData, parseErrorFeedback } from '@/utils';
+import { parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
-import dayjs from 'dayjs';
-import { NButton, NFlex, NGrid, NGridItem, NModal, NScrollbar, NSpin } from 'naive-ui';
+import { NButton, NGrid, NGridItem, NModal, NScrollbar, NSpin } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { computed, ref, toRefs } from 'vue';

@@ -61,10 +60,7 @@ const { mutate: exportRecordDiags, isPending: exporting } = useMutation({
    return checks;
  },
  onSuccess: (checks, { stationCode }) => {
-    if (!checks || checks.length === 0) {
-      window.$message.info(`没有录像诊断数据`);
-      return;
-    }
+    if (!checks || checks.length === 0) return;
    const recordDiags = transformRecordChecks(checks);
    exportRecordDiagCsv(recordDiags, nvrClusterRecord.value[stationCode]?.stationName ?? '');
  },
@@ -76,48 +72,7 @@ const { mutate: exportRecordDiags, isPending: exporting } = useMutation({
  },
 });

-const { mutate: batchExportRecordCheck, isPending: batchExporting } = useMutation({
-  mutationFn: async () => {
-    const { records = [] } = await pageDefParameterApi({
-      model: {
-        key: 'NVR_GAP_SECONDS',
-      },
-      extra: {},
-      current: 1,
-      size: 1,
-      sort: 'id',
-      order: 'descending',
-    });
-    const gapSeconds = parseInt(records.at(0)?.value ?? '5');
-
-    window.$message.info('导出耗时较长，请耐心等待...');
-
-    const data = await batchExportRecordCheckApi(
-      {
-        checkDuration: 90,
-        gapSeconds,
-        stationCode: stations.value.map((station) => station.code),
-      },
-      {
-        signal: abortController.value.signal,
-      },
-    );
-    return data;
-  },
-  onSuccess: (data) => {
-    const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
-    downloadByData(data, `录像缺失记录_${time}.xlsx`);
-  },
-  onError: (error) => {
-    if (isCancel(error)) return;
-    console.error(error);
-    const errorFeedback = parseErrorFeedback(error);
-    window.$message.error(errorFeedback);
-  },
-});
-
 const onAfterLeave = () => {
-  abortController.value.abort();
  emit('afterLeave');
 };
 </script>
@@ -137,11 +92,6 @@ const onAfterLeave = () => {
        </NSpin>
      </NScrollbar>
    </template>
-    <template #action>
-      <NFlex justify="flex-end" align="center">
-        <NButton secondary :loading="batchExporting" @click="() => batchExportRecordCheck()">导出全部</NButton>
-      </NFlex>
-    </template>
  </NModal>
 </template>

--- a/src/components/station/sync-camera-result-modal/sync-camera-result-modal.vue
+++ b/src/components/station/sync-camera-result-modal/sync-camera-result-modal.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { Station, SyncCameraResult } from '@/apis';
-import { usePermissionStore } from '@/stores';
+import { useStationStore } from '@/stores';
 import { watchDebounced } from '@vueuse/core';
 import { EditIcon, PlusCircleIcon, Trash2Icon } from 'lucide-vue-next';
 import { NFlex, NIcon, NList, NListItem, NModal, NScrollbar, NStatistic, NText, NThing } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { computed, ref, toRefs } from 'vue';

 const props = defineProps<{
@@ -14,8 +15,8 @@ const emit = defineEmits<{
  afterLeave: [];
 }>();

-const permissionStore = usePermissionStore();
-const stations = computed(() => permissionStore.stations.VIEW ?? []);
+const stationStore = useStationStore();
+const { stations } = storeToRefs(stationStore);

 const { syncCameraResult } = toRefs(props);

--- a/src/composables/device/use-device-selection.ts
+++ b/src/composables/device/use-device-selection.ts
@@ -1,33 +1,39 @@
 import type { LineDevices, NdmDeviceResultVO, Station } from '@/apis';
 import { tryGetDeviceType, type DeviceType } from '@/enums';
-import { ref } from 'vue';
+import { useDeviceStore } from '@/stores';
+import { watchDebounced } from '@vueuse/core';
+import { storeToRefs } from 'pinia';
+import { onMounted, ref, toValue, watch, type MaybeRefOrGetter } from 'vue';
 import { useRoute, useRouter } from 'vue-router';

-export const useDeviceSelection = () => {
+export const useDeviceSelection = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
+  const { syncRoute } = options ?? {};
+
  const route = useRoute();
  const router = useRouter();

+  const deviceStore = useDeviceStore();
+  const { lineDevices } = storeToRefs(deviceStore);
+
  const selectedStationCode = ref<Station['code']>();
  const selectedDeviceType = ref<DeviceType>();
  const selectedDevice = ref<NdmDeviceResultVO>();

-  // 从路由参数同步选中的车站、设备类型以及设备
-  const syncFromRoute = (lineDevices: LineDevices) => {
-    // console.log('sync from route');
-    const { stationCode: routeStationCode, deviceType: routeDeviceType, deviceDbId: routeDeviceDbId } = route.query;
-    if (routeStationCode) {
-      selectedStationCode.value = routeStationCode as Station['code'];
+  const initFromRoute = (lineDevices: LineDevices) => {
+    const { stationCode, deviceType, deviceDbId } = route.query;
+    if (stationCode) {
+      selectedStationCode.value = stationCode as Station['code'];
    }
-    if (routeDeviceType) {
-      selectedDeviceType.value = routeDeviceType as DeviceType;
+    if (deviceType) {
+      selectedDeviceType.value = deviceType as DeviceType;
    }
-    if (routeDeviceDbId && selectedStationCode.value && selectedDeviceType.value) {
-      const selectedDeviceDbId = routeDeviceDbId as string;
+    if (deviceDbId && selectedStationCode.value && selectedDeviceType.value) {
+      const selectedDeviceDbId = deviceDbId as string;
      const stationDevices = lineDevices[selectedStationCode.value];
      if (stationDevices) {
-        const classifiedDevices = stationDevices[selectedDeviceType.value];
-        if (classifiedDevices) {
-          const device = classifiedDevices.find((device) => device.id === selectedDeviceDbId);
+        const devices = stationDevices[selectedDeviceType.value];
+        if (devices) {
+          const device = devices.find((device) => device.id === selectedDeviceDbId);
          if (device) {
            selectedDevice.value = device;
          }
@@ -45,9 +51,7 @@ export const useDeviceSelection = () => {
    }
  };

-  // 将选中的车站、设备类型以及设备ID同步到路由参数
  const syncToRoute = () => {
-    // console.log('sync to route');
    const query = { ...route.query };
    // 当选中的设备发生变化时，删除fromPage参数
    if (selectedDevice.value?.id && route.query.deviceDbId !== selectedDevice.value.id) {
@@ -65,13 +69,39 @@ export const useDeviceSelection = () => {
    router.replace({ query });
  };

+  watch(selectedDevice, () => {
+    if (toValue(syncRoute)) {
+      syncToRoute();
+    }
+  });
+
+  // lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
+  // 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
+  watchDebounced(
+    lineDevices,
+    (newLineDevices) => {
+      if (toValue(syncRoute)) {
+        initFromRoute(newLineDevices);
+      }
+    },
+    {
+      debounce: 500,
+      deep: true,
+    },
+  );
+
+  onMounted(() => {
+    if (toValue(syncRoute)) {
+      initFromRoute(lineDevices.value);
+    }
+  });
+
  return {
    selectedStationCode,
    selectedDeviceType,
    selectedDevice,

-    syncFromRoute,
-    syncToRoute,
+    initFromRoute,
    selectDevice,
  };
 };
--- a/src/composables/device/use-device-tree.ts
+++ b/src/composables/device/use-device-tree.ts
@@ -1,8 +1,11 @@
+import type { MaybeRefOrGetter } from 'vue';
 import { useDeviceManagement } from './use-device-management';
 import { useDeviceSelection } from './use-device-selection';

-export const useDeviceTree = () => {
-  const deviceSelection = useDeviceSelection();
+export const useDeviceTree = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
+  const { syncRoute } = options ?? {};
+
+  const deviceSelection = useDeviceSelection({ syncRoute });
  const deviceManagement = useDeviceManagement();

  return {
--- a/src/composables/permission/use-permission.ts
+++ b/src/composables/permission/use-permission.ts
@@ -1,10 +1,11 @@
+import type { Station } from '@/apis';
 import type { PermissionType } from '@/enums';
 import { usePermissionStore } from '@/stores';

 export const usePermission = () => {
  const permissionStore = usePermissionStore();

-  const hasPermission = (stationCode: string, permissionType: PermissionType) => {
+  const hasPermission = (stationCode: Station['code'], permissionType: PermissionType) => {
    return !!permissionStore.permissions[stationCode]?.includes(permissionType);
  };

--- a/src/composables/query/index.ts
+++ b/src/composables/query/index.ts
@@ -1,6 +1,6 @@
 export * from './use-line-alarms-query';
 export * from './use-line-devices-query';
 export * from './use-line-stations-query';
-export * from './use-user-permission-query';
+export * from './use-user-permissions-query';
 export * from './use-verify-user-query';
 export * from './use-version-check-query';
--- a/src/composables/query/use-line-alarms-query.ts
+++ b/src/composables/query/use-line-alarms-query.ts
@@ -1,11 +1,12 @@
 import { initStationAlarms, pageDeviceAlarmLogApi, type Station } from '@/apis';
 import { LINE_ALARMS_QUERY_KEY, STATION_ALARMS_MUTATION_KEY } from '@/constants';
 import { tryGetDeviceType } from '@/enums';
-import { useAlarmStore, usePermissionStore } from '@/stores';
+import { useAlarmStore, useStationStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
 import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
 import dayjs from 'dayjs';
+import { storeToRefs } from 'pinia';
 import { computed } from 'vue';

 export const useStationAlarmsMutation = () => {
@@ -55,8 +56,8 @@ export const useStationAlarmsMutation = () => {
      alarmStore.setStationAlarms(station.code, stationAlarms);
    },
    onError: (error) => {
-      if (isCancel(error) || error instanceof CancelledError) return;
      console.error(error);
+      if (isCancel(error) || error instanceof CancelledError) return;
      const errorFeedback = parseErrorFeedback(error);
      window.$message.error(errorFeedback);
    },
@@ -68,22 +69,19 @@ export const useStationAlarmsMutation = () => {
 * @see [use-line-stations-query.ts](./use-line-stations-query.ts)
 */
 export const useLineAlarmsQuery = () => {
-  const permissionStore = usePermissionStore();
-  const stations = computed(() => permissionStore.stations.VIEW ?? []);
-
+  const stationStore = useStationStore();
+  const { stations } = storeToRefs(stationStore);
  const { mutateAsync: getStationAlarms } = useStationAlarmsMutation();

  return useQuery({
    queryKey: computed(() => [LINE_ALARMS_QUERY_KEY]),
    enabled: false,
    queryFn: async ({ signal }) => {
-      const startTime = performance.now();
+      console.time(LINE_ALARMS_QUERY_KEY);
      for (const station of stations.value) {
        await getStationAlarms({ station, signal }).catch(() => {});
      }
-      const endTime = performance.now();
-      console.log(`${LINE_ALARMS_QUERY_KEY}: ${endTime - startTime} ms`);
-
+      console.timeEnd(LINE_ALARMS_QUERY_KEY);
      return null;
    },
  });
--- a/src/composables/query/use-line-devices-query.ts
+++ b/src/composables/query/use-line-devices-query.ts
@@ -1,9 +1,10 @@
 import { getAllDevicesApi, initStationDevices, type Station } from '@/apis';
 import { LINE_DEVICES_QUERY_KEY, STATION_DEVICES_MUTATION_KEY } from '@/constants';
-import { useDeviceStore, usePermissionStore } from '@/stores';
+import { useDeviceStore, useStationStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
 import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
+import { storeToRefs } from 'pinia';
 import { computed } from 'vue';

 export const useStationDevicesMutation = () => {
@@ -22,8 +23,8 @@ export const useStationDevicesMutation = () => {
      deviceStore.setStationDevices(station.code, devices);
    },
    onError: (error) => {
-      if (isCancel(error) || error instanceof CancelledError) return;
      console.error(error);
+      if (isCancel(error) || error instanceof CancelledError) return;
      const errorFeedback = parseErrorFeedback(error);
      window.$message.error(errorFeedback);
    },
@@ -35,22 +36,19 @@ export const useStationDevicesMutation = () => {
 * @see [use-line-stations-query.ts](./use-line-stations-query.ts)
 */
 export const useLineDevicesQuery = () => {
-  const permissionStore = usePermissionStore();
-  const stations = computed(() => permissionStore.stations.VIEW ?? []);
-
+  const stationStore = useStationStore();
+  const { stations } = storeToRefs(stationStore);
  const { mutateAsync: getStationDevices } = useStationDevicesMutation();

  return useQuery({
    queryKey: computed(() => [LINE_DEVICES_QUERY_KEY]),
    enabled: false,
    queryFn: async ({ signal }) => {
-      const startTime = performance.now();
+      console.time(LINE_DEVICES_QUERY_KEY);
      for (const station of stations.value) {
        await getStationDevices({ station, signal }).catch(() => {});
      }
-      const endTime = performance.now();
-      console.log(`${LINE_DEVICES_QUERY_KEY}: ${endTime - startTime} ms`);
-
+      console.timeEnd(LINE_DEVICES_QUERY_KEY);
      return null;
    },
  });
--- a/src/composables/query/use-line-stations-query.ts
+++ b/src/composables/query/use-line-stations-query.ts
@@ -1,12 +1,14 @@
 import { batchVerifyApi, type Station } from '@/apis';
 import { LINE_STATIONS_MUTATION_KEY, LINE_STATIONS_QUERY_KEY } from '@/constants';
-import { useSettingStore, useStationStore } from '@/stores';
+import { usePollingStore, useStationStore } from '@/stores';
 import { getAppEnvConfig, parseErrorFeedback } from '@/utils';
 import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import axios, { isCancel } from 'axios';
 import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
+import { useLineDevicesQuery } from './use-line-devices-query';
+import { useLineAlarmsQuery } from './use-line-alarms-query';

 export const useLineStationsMutation = () => {
  const stationStore = useStationStore();
@@ -34,8 +36,8 @@ export const useLineStationsMutation = () => {
      stationStore.setStations(stations);
    },
    onError: (error) => {
-      if (isCancel(error) || error instanceof CancelledError) return;
      console.error(error);
+      if (isCancel(error) || error instanceof CancelledError) return;
      const errorFeedback = parseErrorFeedback(error);
      window.$message.error(errorFeedback);
    },
@@ -43,21 +45,28 @@ export const useLineStationsMutation = () => {
 };

 export const useLineStationsQuery = () => {
-  const settingStore = useSettingStore();
-  const { pollingStations } = storeToRefs(settingStore);
+  const pollingStore = usePollingStore();
+  const { pollingEnabled } = storeToRefs(pollingStore);
  const { requestInterval } = getAppEnvConfig();
  const { mutateAsync: getLineStations } = useLineStationsMutation();
+  const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
+  const { refetch: refetchLineAlarmsQuery } = useLineAlarmsQuery();

  return useQuery({
    queryKey: computed(() => [LINE_STATIONS_QUERY_KEY]),
-    enabled: computed(() => pollingStations.value),
+    enabled: computed(() => pollingEnabled.value),
    refetchInterval: requestInterval * 1000,
    staleTime: (requestInterval * 1000) / 2,
    queryFn: async ({ signal }) => {
-      const startTime = performance.now();
+      console.time(LINE_STATIONS_QUERY_KEY);
      await getLineStations({ signal }).catch(() => {});
-      const endTime = performance.now();
-      console.log(`${LINE_STATIONS_QUERY_KEY}: ${endTime - startTime} ms`);
+      console.timeEnd(LINE_STATIONS_QUERY_KEY);
+
+      if (!pollingEnabled.value) return null;
+      await refetchLineDevicesQuery();
+
+      if (!pollingEnabled.value) return null;
+      await refetchLineAlarmsQuery();

      return null;
    },
--- a/src/composables/query/use-user-permission-query.ts
+++ b/src/composables/query/use-user-permission-query.ts
@@ -1,67 +0,0 @@
-import { useLineDevicesQuery } from './use-line-devices-query';
-import { useLineAlarmsQuery } from './use-line-alarms-query';
-import { pagePermissionApi } from '@/apis';
-import { USER_PERMISSION_QUERY_KEY } from '@/constants';
-import { PERMISSION_TYPE_LITERALS } from '@/enums';
-import { usePermissionStore, useSettingStore, useStationStore, useUserStore } from '@/stores';
-import { useQuery } from '@tanstack/vue-query';
-import { storeToRefs } from 'pinia';
-import { computed, watch } from 'vue';
-import { useLineStationsQuery } from './use-line-stations-query';
-
-export const useUserPermissionQuery = () => {
-  const settingStore = useSettingStore();
-  const { pollingStations, activeRequests } = storeToRefs(settingStore);
-
-  const userStore = useUserStore();
-  const { userInfo } = storeToRefs(userStore);
-
-  const stationStore = useStationStore();
-  const { stations } = storeToRefs(stationStore);
-
-  const permissionStore = usePermissionStore();
-  const { permissions } = storeToRefs(permissionStore);
-
-  const { dataUpdatedAt: stationsUpdatedTime } = useLineStationsQuery();
-  const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
-  const { refetch: refetchLineAlarmsQuery } = useLineAlarmsQuery();
-
-  watch([permissions, stationsUpdatedTime], async ([newPermissions, newUpdatedTime], [oldPermissions, oldUpdatedTime]) => {
-    const newPermissionsJson = JSON.stringify(newPermissions);
-    const oldPermissionsJson = JSON.stringify(oldPermissions);
-    if (newPermissionsJson === oldPermissionsJson && newUpdatedTime === oldUpdatedTime) return;
-    // 设备查询和告警查询依赖pollingEnabdled
-    // 当关闭轮询时，只会取消当前正在执行的查询，
-    // 所以如果在关闭轮询时refetch还未执行，那么这一次取消就是无效的，refetch依然会执行，
-    // 所以在每个refetch被调用前都需要检查pollingEnabled，否则就可能会取消失败
-    if (!pollingStations.value) return;
-    await refetchLineDevicesQuery();
-    if (!pollingStations.value) return;
-    await refetchLineAlarmsQuery();
-  });
-
-  return useQuery({
-    queryKey: computed(() => [USER_PERMISSION_QUERY_KEY]),
-    // 启用【车站轮询】或【主动请求】时，都认为查询被启用
-    enabled: computed(() => (pollingStations.value || activeRequests.value) && userInfo.value?.['employeeId'] && stations.value.length > 0),
-    // 当启用【车站轮询】时，刷新间隔为10秒，缓存时间为5秒
-    refetchInterval: computed(() => (pollingStations.value ? 10 * 1000 : undefined)),
-    staleTime: computed(() => (pollingStations.value ? 5 * 1000 : undefined)),
-    queryFn: async ({ signal }) => {
-      const { records } = await pagePermissionApi(
-        {
-          model: {
-            employeeId: userInfo.value['employeeId'],
-          },
-          current: 1,
-          size: Object.keys(PERMISSION_TYPE_LITERALS).length * stations.value.length,
-        },
-        {
-          signal,
-        },
-      );
-      permissionStore.setPermRecords(records);
-      return null;
-    },
-  });
-};
--- a/src/composables/query/use-user-permissions-query.ts
+++ b/src/composables/query/use-user-permissions-query.ts
@@ -0,0 +1,55 @@
+import { pagePermissionApi } from '@/apis';
+import { USER_PERMISSIONS_QUERY_KEY } from '@/constants';
+import { PERMISSION_TYPE_NAMES } from '@/enums';
+import { usePermissionStore, useSettingStore, useStationStore, useUserStore } from '@/stores';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { storeToRefs } from 'pinia';
+import { computed, watch } from 'vue';
+
+export const useUserPermissionsQuery = () => {
+  const queryClient = useQueryClient();
+
+  const settingStore = useSettingStore();
+  const { offlineDev } = storeToRefs(settingStore);
+
+  const stationStore = useStationStore();
+  const { stations } = storeToRefs(stationStore);
+  const userStore = useUserStore();
+  const { userInfo } = storeToRefs(userStore);
+  const permissionStore = usePermissionStore();
+
+  watch(offlineDev, (offline) => {
+    if (offline) {
+      queryClient.cancelQueries({ queryKey: [USER_PERMISSIONS_QUERY_KEY] });
+    }
+  });
+
+  return useQuery({
+    queryKey: computed(() => [USER_PERMISSIONS_QUERY_KEY]),
+    enabled: computed(() => !offlineDev.value),
+    refetchInterval: 10 * 1000,
+    queryFn: async ({ signal }) => {
+      const { employeeId } = userInfo.value ?? {};
+      if (!employeeId) return null;
+
+      const { records } = await pagePermissionApi(
+        {
+          model: {
+            employeeId,
+          },
+          extra: {},
+          current: 1,
+          size: Object.keys(PERMISSION_TYPE_NAMES).length * stations.value.length,
+          sort: 'id',
+          order: 'ascending',
+        },
+        {
+          signal,
+        },
+      );
+      permissionStore.setPermRecords(records);
+
+      return null;
+    },
+  });
+};
--- a/src/composables/query/use-verify-user-query.ts
+++ b/src/composables/query/use-verify-user-query.ts
@@ -8,17 +8,17 @@ import { computed, watch } from 'vue';
 export const useVerifyUserQuery = () => {
  const queryClient = useQueryClient();
  const settingStore = useSettingStore();
-  const { activeRequests } = storeToRefs(settingStore);
+  const { offlineDev } = storeToRefs(settingStore);

-  watch(activeRequests, (active) => {
-    if (!active) {
+  watch(offlineDev, (offline) => {
+    if (offline) {
      queryClient.cancelQueries({ queryKey: [VERIFY_USER_QUERY_KEY] });
    }
  });

  return useQuery({
    queryKey: [VERIFY_USER_QUERY_KEY],
-    enabled: computed(() => activeRequests.value),
+    enabled: computed(() => !offlineDev.value),
    refetchInterval: 10 * 1000,
    queryFn: async ({ signal }) => {
      await verifyApi({ signal });
--- a/src/composables/station/use-batch-actions.ts
+++ b/src/composables/station/use-batch-actions.ts
@@ -1,8 +1,6 @@
 import { usePermission } from '../permission';
 import { type Station } from '@/apis';
 import { PERMISSION_TYPE_LITERALS, type PermissionType } from '@/enums';
-import { objectEntries } from '@vueuse/core';
-import type { CheckboxProps } from 'naive-ui';
 import { computed, ref, watch, type Ref } from 'vue';

 type BatchActionKey = 'export-icmp' | 'export-record' | 'sync-camera' | 'sync-nvr';
@@ -62,21 +60,6 @@ export const useBatchActions = (stations: Ref<Station[]>, abortController?: Ref<

  const stationSelection = ref<Record<Station['code'], boolean>>({});

-  const selectionProps = computed<CheckboxProps>(() => {
-    const selectableStationsLength = selectableStations.value.length;
-    const selectedStationsLength = objectEntries(stationSelection.value).filter(([, selected]) => selected).length;
-
-    const disabled = selectableStationsLength === 0;
-    const checked = selectableStationsLength > 0 && selectedStationsLength === selectableStationsLength;
-    const indeterminate = selectableStationsLength > 0 && selectedStationsLength > 0 && selectedStationsLength < selectableStationsLength;
-
-    return {
-      disabled,
-      checked,
-      indeterminate,
-    };
-  });
-
  const toggleSelectAction = (action: BatchAction) => {
    batchActions.value.forEach((batchAction) => {
      if (batchAction.key === action.key) {
@@ -128,8 +111,6 @@ export const useBatchActions = (stations: Ref<Station[]>, abortController?: Ref<
    selectableStations,
    stationSelection,

-    selectionProps,
-
    toggleSelectAction,
    toggleSelectAllStations,

--- a/src/composables/stomp/use-stomp-client.ts
+++ b/src/composables/stomp/use-stomp-client.ts
@@ -1,12 +1,12 @@
 import type { NdmDeviceAlarmLogResultVO, Station, SyncCameraResult } from '@/apis';
-import { ALARM_TOPIC, PERMISSION_TOPIC, SYNC_CAMERA_STATUS_TOPIC } from '@/constants';
-import { useSettingStore, useStationStore, useUnreadStore, useUserStore } from '@/stores';
+import { ALARM_TOPIC, SYNC_CAMERA_STATUS_TOPIC } from '@/constants';
+import { useAlarmStore, useSettingStore, useStationStore } from '@/stores';
 import { Client } from '@stomp/stompjs';
 import { watchDebounced } from '@vueuse/core';
 import destr from 'destr';
 import { storeToRefs } from 'pinia';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { useStationAlarmsMutation, useUserPermissionQuery } from '../query';
+import { useStationAlarmsMutation } from '../query';

 const getBrokerUrl = () => {
  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -19,17 +19,11 @@ const getBrokerUrl = () => {
 export const useStompClient = () => {
  const stationStore = useStationStore();
  const { stations } = storeToRefs(stationStore);
-
-  const unreadStore = useUnreadStore();
-  const { unreadLineAlarms } = storeToRefs(unreadStore);
-
+  const alarmStore = useAlarmStore();
+  const { unreadLineAlarms } = storeToRefs(alarmStore);
  const settingStore = useSettingStore();
-  const { subscribeMessages } = storeToRefs(settingStore);
+  const { offlineDev } = storeToRefs(settingStore);

-  const userStore = useUserStore();
-  const { userInfo } = storeToRefs(userStore);
-
-  const { refetch: refetchUserPermissionQuery } = useUserPermissionQuery();
  const { mutate: refreshStationAlarms } = useStationAlarmsMutation();

  const stompClient = ref<Client | null>(null);
@@ -46,16 +40,10 @@ export const useStompClient = () => {
        console.log('Stomp连接成功');
        stompClient.value?.subscribe(ALARM_TOPIC, (message) => {
          const alarm = destr<NdmDeviceAlarmLogResultVO>(message.body);
-          const { alarmCategory, stationCode } = alarm;
-          if (alarmCategory === '1' && !!stations.value.find((station) => station.code === stationCode)) {
-            unreadStore.pushUnreadAlarm(alarm);
+          if (alarm.alarmCategory === '1') {
+            alarmStore.pushUnreadAlarm(alarm);
          }
        });
-        stompClient.value?.subscribe(PERMISSION_TOPIC, (message) => {
-          const employeeId = destr<string>(message.body);
-          if (userInfo.value?.['employeeId'] !== employeeId) return;
-          refetchUserPermissionQuery();
-        });
        stompClient.value?.subscribe(SYNC_CAMERA_STATUS_TOPIC, (message) => {
          const { stationCode, startTime, endTime, insertList, updateList, deleteList } = destr<SyncCameraResult>(message.body);
          syncCameraResult.value[stationCode] = { stationCode, startTime, endTime, insertList, updateList, deleteList };
@@ -64,7 +52,6 @@ export const useStompClient = () => {
      onDisconnect: () => {
        console.log('Stomp连接断开');
        stompClient.value?.unsubscribe(ALARM_TOPIC);
-        stompClient.value?.unsubscribe(PERMISSION_TOPIC);
        stompClient.value?.unsubscribe(SYNC_CAMERA_STATUS_TOPIC);
      },
      onStompError: (frame) => {
@@ -76,7 +63,7 @@ export const useStompClient = () => {
        window.$message.error('WebSocket错误');
      },
    });
-    if (subscribeMessages.value) {
+    if (!offlineDev.value) {
      stompClient.value.activate();
    }
  });
@@ -86,11 +73,11 @@ export const useStompClient = () => {
    stompClient.value = null;
  });

-  watch(subscribeMessages, (subscribe) => {
-    if (subscribe) {
-      stompClient.value?.activate();
-    } else {
+  watch(offlineDev, (offline) => {
+    if (offline) {
      stompClient.value?.deactivate();
+    } else {
+      stompClient.value?.activate();
    }
  });

@@ -100,8 +87,8 @@ export const useStompClient = () => {
  watchDebounced(
    () => Object.entries(unreadLineAlarms.value).map(([stationCode, stationAlarms]) => ({ stationCode, count: stationAlarms['unclassified'].length })),
    (newValue, oldValue) => {
-      // 关闭消息订阅时，跳过处理
-      if (!subscribeMessages.value) return;
+      // 启用离线模式时，跳过处理
+      if (offlineDev.value) return;
      if (newValue.length === 0) return;
      const codes: Station['code'][] = [];
      newValue.forEach(({ stationCode, count }) => {
--- a/src/constants/query.ts
+++ b/src/constants/query.ts
@@ -1,6 +1,6 @@
 export const LINE_ALARMS_QUERY_KEY = 'line-alarms';
 export const LINE_DEVICES_QUERY_KEY = 'line-devices';
 export const LINE_STATIONS_QUERY_KEY = 'line-stations';
-export const USER_PERMISSION_QUERY_KEY = 'user-permission';
+export const USER_PERMISSIONS_QUERY_KEY = 'user-permissions';
 export const VERIFY_USER_QUERY_KEY = 'verify-user';
 export const VERSION_CHECK_QUERY_KEY = 'version-check';
--- a/src/constants/stomp.ts
+++ b/src/constants/stomp.ts
@@ -1,3 +1,3 @@
 export const ALARM_TOPIC = '/topic/deviceAlarm';
-export const PERMISSION_TOPIC = '/topic/permission';
+
 export const SYNC_CAMERA_STATUS_TOPIC = '/topic/syncCameraStatus';
--- a/src/constants/store.ts
+++ b/src/constants/store.ts
@@ -4,5 +4,4 @@ export const NDM_PERMISSION_STORE_ID = 'ndm-permission-store';
 export const NDM_POLLIING_STORE_ID = 'ndm-polling-store';
 export const NDM_SETTING_STORE_ID = 'ndm-setting-store';
 export const NDM_STATION_STORE_ID = 'ndm-station-store';
-export const NDM_UNREAD_STORE_ID = 'ndm-unread-store';
 export const NDM_USER_STORE_ID = 'ndm-user-store';
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -7,6 +7,6 @@ declare global {
    $loadingBar: ReturnType<typeof useLoadingBar>;
    $message: ReturnType<typeof useMessage>;
    $notification: ReturnType<typeof useNotification>;
-    $mockUser: Ref<boolean>;
+    $offlineDev: Ref<boolean>;
  }
 }
--- a/src/layouts/app-layout.vue
+++ b/src/layouts/app-layout.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { SettingsDrawer, SyncCameraResultModal } from '@/components';
-import { useLineStationsQuery, useStompClient, useUserPermissionQuery, useVerifyUserQuery } from '@/composables';
+import { useLineStationsQuery, useStompClient, useUserPermissionsQuery, useVerifyUserQuery } from '@/composables';
 import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_MUTATION_KEY, LINE_STATIONS_QUERY_KEY, STATION_ALARMS_MUTATION_KEY, STATION_DEVICES_MUTATION_KEY } from '@/constants';
-import { useSettingStore, useUnreadStore, useUserStore } from '@/stores';
-import { useIsFetching, useIsMutating } from '@tanstack/vue-query';
-import { ChevronDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ComputerIcon, KeyRoundIcon, LogOutIcon, LogsIcon, MapPinIcon, SettingsIcon, SirenIcon } from 'lucide-vue-next';
+import { useAlarmStore, useSettingStore, useUserStore } from '@/stores';
+import { parseErrorFeedback } from '@/utils';
+import { useIsFetching, useIsMutating, useMutation } from '@tanstack/vue-query';
+import { isCancel } from 'axios';
+import { ChevronDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ComputerIcon, KeyIcon, LogOutIcon, LogsIcon, MapPinIcon, SettingsIcon, SirenIcon } from 'lucide-vue-next';
 import {
  NBadge,
  NButton,
@@ -22,26 +24,26 @@ import {
  type MenuOption,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, h, ref, type Component, type VNode } from 'vue';
+import { computed, h, ref, watchEffect, type Component, type VNode } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';

 const route = useRoute();
 const router = useRouter();

 const userStore = useUserStore();
-const { userInfo, isLamp } = storeToRefs(userStore);
+const { userInfo } = storeToRefs(userStore);

-const unreadStore = useUnreadStore();
-const { unreadAlarmCount } = storeToRefs(unreadStore);
+const alarmStore = useAlarmStore();
+const { unreadAlarmCount } = storeToRefs(alarmStore);

 const settingStore = useSettingStore();
-const { menuCollpased } = storeToRefs(settingStore);
+const { menuCollpased, offlineDev } = storeToRefs(settingStore);

 const { syncCameraResult, afterCheckSyncCameraResult } = useStompClient();

 useVerifyUserQuery();
 useLineStationsQuery();
-useUserPermissionQuery();
+useUserPermissionsQuery();

 // 全局loading状态依赖于轮询query的queryKey以及相关的mutationKey
 const queryingCount = useIsFetching({
@@ -64,7 +66,7 @@ const onToggleMenuCollapsed = () => {
  menuCollpased.value = !menuCollpased.value;
 };

-const menuOptions = computed<MenuOption[]>(() => [
+const menuOptions: MenuOption[] = [
  {
    label: () => h(RouterLink, { to: '/station' }, { default: () => '车站状态' }),
    key: '/station',
@@ -108,10 +110,10 @@ const menuOptions = computed<MenuOption[]>(() => [
  {
    label: () => h(RouterLink, { to: '/permission' }, { default: () => '权限管理' }),
    key: '/permission',
-    show: isLamp.value,
-    icon: renderIcon(KeyRoundIcon),
+    show: userStore.isLamp,
+    icon: renderIcon(KeyIcon),
  },
-]);
+];

 const dropdownOptions: DropdownOption[] = [
  {
@@ -146,12 +148,33 @@ const routeToRoot = () => {
 };

 const routeToAlarmPage = () => {
-  unreadStore.clearUnreadAlarms();
+  alarmStore.clearUnreadAlarms();
  if (route.path !== '/alarm/alarm-log') {
    router.push({ path: '/alarm/alarm-log' });
  }
 };

+const { mutate: getUserInfo } = useMutation({
+  mutationFn: async (params?: { signal?: AbortSignal }) => {
+    const { signal } = params ?? {};
+    await userStore.userGetInfo({ signal });
+  },
+  onError: (error) => {
+    if (isCancel(error)) return;
+    console.error(error);
+    const errorFeedback = parseErrorFeedback(error);
+    window.$message.error(errorFeedback);
+  },
+});
+
+// 判断是否为离线开发模式 决定是否自动发送获取用户信息请求
+watchEffect((onCleanup) => {
+  if (offlineDev.value) return;
+  const abortController = new AbortController();
+  getUserInfo({ signal: abortController.signal });
+  onCleanup(() => abortController.abort());
+});
+
 function renderIcon(icon: Component): () => VNode {
  return () => h(NIcon, null, { default: () => h(icon) });
 }
--- a/src/pages/alarm/alarm-ignore-page.vue
+++ b/src/pages/alarm/alarm-ignore-page.vue
@@ -46,7 +46,8 @@ interface SearchFields extends PageQueryExtra<NdmCameraIgnore> {
  stationCode?: Station['code'];
  // deviceId_like?: string;
 }
-
+const deviceStore = useDeviceStore();
+const { lineDevices } = storeToRefs(deviceStore);
 const permissionStore = usePermissionStore();
 const { permissions } = storeToRefs(permissionStore);

@@ -54,9 +55,6 @@ const { hasPermission } = usePermission();

 const stations = computed(() => permissionStore.stations.VIEW ?? []);

-const deviceStore = useDeviceStore();
-const { lineDevices } = storeToRefs(deviceStore);
-
 const stationSelectOptions = computed<SelectOption[]>(() => {
  return stations.value.map((station) => ({
    label: station.name,
--- a/src/pages/alarm/alarm-log-page.vue
+++ b/src/pages/alarm/alarm-log-page.vue
@@ -3,7 +3,7 @@ import { exportDeviceAlarmLogApi, pageDeviceAlarmLogApi, type NdmDeviceAlarmLog,
 import { useAlarmActionColumn, useCameraSnapColumn } from '@/composables';
 import { ALARM_TYPES, DEVICE_TYPE_CODES, DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, FAULT_LEVELS, tryGetDeviceType, type DeviceType } from '@/enums';
 import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/helpers';
-import { useDeviceStore, usePermissionStore, useUnreadStore } from '@/stores';
+import { useAlarmStore, useDeviceStore, usePermissionStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { watchDebounced } from '@vueuse/core';
@@ -37,24 +37,20 @@ interface SearchFields extends PageQueryExtra<NdmDeviceAlarmLog> {
  alarmType_in: string[];
  faultLevel_in: string[];
  alarmDate: [number, number];
-  alarmCategory: string;
-  alarmConfirm: string;
 }

 const route = useRoute();
 const router = useRouter();

+const deviceStore = useDeviceStore();
+const { lineDevices } = storeToRefs(deviceStore);
+const alarmStore = useAlarmStore();
+const { unreadAlarmCount } = storeToRefs(alarmStore);
 const permissionStore = usePermissionStore();
 const { permissions } = storeToRefs(permissionStore);

 const stations = computed(() => permissionStore.stations.VIEW ?? []);

-const deviceStore = useDeviceStore();
-const { lineDevices } = storeToRefs(deviceStore);
-
-const unreadStore = useUnreadStore();
-const { unreadAlarmCount } = storeToRefs(unreadStore);
-
 const stationSelectOptions = computed<SelectOption[]>(() => {
  return stations.value.map((station) => ({
    label: station.name,
@@ -117,8 +113,6 @@ const searchFields = ref<SearchFields>({
  alarmType_in: [],
  faultLevel_in: [],
  alarmDate: [dayjs().startOf('date').valueOf(), dayjs().endOf('date').valueOf()],
-  alarmCategory: '',
-  alarmConfirm: '',
 });
 const resetSearchFields = () => {
  searchFields.value = {
@@ -128,8 +122,6 @@ const resetSearchFields = () => {
    alarmType_in: [],
    faultLevel_in: [],
    alarmDate: [dayjs().startOf('date').valueOf(), dayjs().endOf('date').valueOf()],
-    alarmCategory: '',
-    alarmConfirm: '',
  };
 };
 const getExtraFields = (): PageQueryExtra<NdmDeviceAlarmLog> => {
@@ -244,10 +236,7 @@ const { mutate: getTableData, isPending: tableLoading } = useMutation({

    const res = await pageDeviceAlarmLogApi(
      {
-        model: {
-          alarmCategory: searchFields.value.alarmCategory || undefined,
-          alarmConfirm: searchFields.value.alarmConfirm || undefined,
-        },
+        model: {},
        extra: getExtraFields(),
        current: pagination.page ?? 1,
        size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
@@ -355,28 +344,6 @@ onBeforeUnmount(() => {
        <NFormItemGi span="1" label="告警级别" label-placement="left">
          <NSelect multiple clearable placeholder="请选择告警级别" v-model:value="searchFields.faultLevel_in" :options="faultLevelSelectOptions" />
        </NFormItemGi>
-        <NFormItemGi span="1" label="恢复状态" label-placement="left">
-          <NSelect
-            clearable
-            placeholder="请选择恢复状态"
-            v-model:value="searchFields.alarmCategory"
-            :options="[
-              { label: '未恢复', value: '1' },
-              { label: '已恢复', value: '2' },
-            ]"
-          />
-        </NFormItemGi>
-        <NFormItemGi span="1" label="确认状态" label-placement="left">
-          <NSelect
-            clearable
-            placeholder="请选择确认状态"
-            v-model:value="searchFields.alarmConfirm"
-            :options="[
-              { label: '未确认', value: '2' },
-              { label: '已确认', value: '1' },
-            ]"
-          />
-        </NFormItemGi>
        <NFormItemGi span="1" label="告警时间" label-placement="left">
          <NDatePicker v-model:value="searchFields.alarmDate" type="datetimerange" />
        </NFormItemGi>
--- a/src/pages/device/device-page.vue
+++ b/src/pages/device/device-page.vue
@@ -8,6 +8,7 @@ import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui';
 import { computed, provide, ref } from 'vue';

 const permissionStore = usePermissionStore();
+
 const stations = computed(() => permissionStore.stations.VIEW ?? []);

 const selectedStation = ref<Station>();
--- a/src/pages/login/login-page.vue
+++ b/src/pages/login/login-page.vue
@@ -22,7 +22,8 @@ const { mutate: login, isPending: loading } = useMutation({
  mutationFn: async (params: LoginParams) => {
    const userStore = useUserStore();
    await userStore.userLogin(params);
-    await userStore.userGetInfo();
+    const [err] = await userClient.post<void>(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000 });
+    if (err) throw err;
  },
  onSuccess: () => {
    window.$message.success('登录成功');
--- a/src/pages/station/station-page.vue
+++ b/src/pages/station/station-page.vue
@@ -4,48 +4,27 @@ import { AlarmDetailModal, DeviceDetailModal, DeviceParamConfigModal, IcmpExport
 import { useBatchActions, useLineDevicesQuery } from '@/composables';
 import { useAlarmStore, useDeviceStore, usePermissionStore, useSettingStore } from '@/stores';
 import { useMutation } from '@tanstack/vue-query';
-import { useElementSize } from '@vueuse/core';
 import { isCancel } from 'axios';
 import { NButton, NButtonGroup, NCheckbox, NFlex, NGrid, NGridItem, NScrollbar } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, ref, useTemplateRef } from 'vue';
+import { computed, ref } from 'vue';

 const settingStore = useSettingStore();
-const { stationGridCols } = storeToRefs(settingStore);
-
-const permissionStore = usePermissionStore();
-const stations = computed(() => permissionStore.stations.VIEW ?? []);
-
+const { stationGridCols: stationGridColumns } = storeToRefs(settingStore);
 const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);
-
 const alarmStore = useAlarmStore();
 const { lineAlarms } = storeToRefs(alarmStore);
+const permissionStore = usePermissionStore();

-const STATION_CARD_MIN_WIDTH = 230;
-const STATION_GRID_PADDING = 8;
-const STATION_GRID_GAP = 6;
-const STATION_GRID_REF_NAME = 'stationGridRef';
-const stationGridRef = useTemplateRef<HTMLDivElement>(STATION_GRID_REF_NAME);
-const { width: stationGridWidth } = useElementSize(stationGridRef);
-// 计算合适的车站布局列数
-const actualStationGridColumns = computed(() => {
-  const currentStationCardWidth = (stationGridWidth.value - STATION_GRID_PADDING * 2 - (stationGridCols.value - 1) * STATION_GRID_GAP) / stationGridCols.value;
-  // 当卡片宽度大于最小宽度时，说明用户的设置没有问题，直接返回列数
-  if (currentStationCardWidth > STATION_CARD_MIN_WIDTH) return stationGridCols.value;
-  // 否则，说明用户的设置不合适，需要根据当前布局宽度重新计算列数
-  return Math.floor((stationGridWidth.value - STATION_GRID_PADDING * 2 + STATION_GRID_GAP) / STATION_CARD_MIN_WIDTH);
-});
+const stations = computed(() => permissionStore.stations.VIEW ?? []);

 const showIcmpExportModal = ref(false);
 const showRecordCheckExportModal = ref(false);

 const abortController = ref(new AbortController());

-const { batchActions, selectedAction, selectableStations, stationSelection, selectionProps, toggleSelectAction, toggleSelectAllStations, confirmAction, cancelAction } = useBatchActions(
-  stations,
-  abortController,
-);
+const { batchActions, selectedAction, selectableStations, stationSelection, toggleSelectAction, toggleSelectAllStations, confirmAction, cancelAction } = useBatchActions(stations, abortController);

 const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();

@@ -81,7 +60,7 @@ const { mutate: syncCamera, isPending: cameraSyncing } = useMutation({
    window.$notification.info({
      title: '摄像机同步结果',
      content: notices.join('，'),
-      duration: 10000,
+      duration: 3000,
    });
    if (successRequests.length > 0) {
      // 摄像机同步后，需要重新查询一次设备
@@ -123,7 +102,7 @@ const { mutate: syncNvrChannels, isPending: nvrChannelsSyncing } = useMutation({
    window.$notification.info({
      title: '录像机通道同步结果',
      content: notices.join('，'),
-      duration: 10000,
+      duration: 3000,
    });
    cancelAction();
  },
@@ -173,22 +152,21 @@ const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
 <template>
  <NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
    <!-- 工具栏 -->
-    <NFlex align="center" :style="{ padding: `${STATION_GRID_PADDING}px ${STATION_GRID_PADDING}px 0 ${STATION_GRID_PADDING}px` }">
+    <NFlex align="center" style="padding: 8px 8px 0 8px">
      <NButtonGroup>
        <template v-for="batchAction in batchActions" :key="batchAction.key">
          <NButton :secondary="!batchAction.active" :focusable="false" @click="() => toggleSelectAction(batchAction)">{{ batchAction.label }}</NButton>
        </template>
      </NButtonGroup>
      <template v-if="selectedAction">
-        <NCheckbox label="全选" :disabled="selectionProps.disabled" :checked="selectionProps.checked" :indeterminate="selectionProps.indeterminate" @update:checked="toggleSelectAllStations" />
+        <NCheckbox label="全选" :checked="selectableStations.length === Object.keys(stationSelection).length" @update:checked="toggleSelectAllStations" />
        <NButton tertiary size="small" type="primary" :focusable="false" :loading="confirming" @click="onClickConfirmAction">确定</NButton>
        <NButton tertiary size="small" type="tertiary" :focusable="false" @click="cancelAction">取消</NButton>
      </template>
    </NFlex>

    <!-- 车站 -->
-    <div :ref="STATION_GRID_REF_NAME">
-      <NGrid :cols="actualStationGridColumns" :x-gap="STATION_GRID_GAP" :y-gap="STATION_GRID_GAP" :style="{ padding: `${STATION_GRID_PADDING}px` }">
+    <NGrid :cols="stationGridColumns" :x-gap="6" :y-gap="6" style="padding: 8px">
      <NGridItem v-for="station in stations" :key="station.code">
        <StationCard
          :station="station"
@@ -201,7 +179,6 @@ const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
        />
      </NGridItem>
    </NGrid>
-    </div>
  </NScrollbar>

  <IcmpExportModal v-model:show="showIcmpExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="cancelAction" />
--- a/src/stores/alarm.ts
+++ b/src/stores/alarm.ts
@@ -1,7 +1,8 @@
-import { type LineAlarms, type Station, type StationAlarms } from '@/apis';
+import { initStationAlarms, type LineAlarms, type NdmDeviceAlarmLogResultVO, type Station, type StationAlarms } from '@/apis';
 import { NDM_ALARM_STORE_ID } from '@/constants';
+import { tryGetDeviceType } from '@/enums';
 import { defineStore } from 'pinia';
-import { shallowRef, triggerRef } from 'vue';
+import { computed, shallowRef, triggerRef } from 'vue';

 export const useAlarmStore = defineStore(
  NDM_ALARM_STORE_ID,
@@ -17,10 +18,42 @@ export const useAlarmStore = defineStore(
      triggerRef(lineAlarms);
    };

+    // 全线所有车站的未读告警 (来自stomp订阅)
+    const unreadLineAlarms = shallowRef<LineAlarms>({});
+    const unreadAlarmCount = computed(() => {
+      let count = 0;
+      Object.values(unreadLineAlarms.value).forEach((stationAlarms) => {
+        count += stationAlarms['unclassified'].length;
+      });
+      return count;
+    });
+    const pushUnreadAlarm = (alarm: NdmDeviceAlarmLogResultVO) => {
+      const stationCode = alarm.stationCode;
+      if (!stationCode) return;
+      if (!unreadLineAlarms.value[stationCode]) {
+        unreadLineAlarms.value[stationCode] = initStationAlarms();
+      }
+      const deviceType = tryGetDeviceType(alarm.deviceType);
+      if (!deviceType) return;
+      const stationAlarms = unreadLineAlarms.value[stationCode];
+      stationAlarms[deviceType].push(alarm);
+      stationAlarms['unclassified'].push(alarm);
+      triggerRef(unreadLineAlarms);
+    };
+    const clearUnreadAlarms = () => {
+      unreadLineAlarms.value = {};
+      triggerRef(unreadLineAlarms);
+    };
+
    return {
      lineAlarms,
      setLineAlarms,
      setStationAlarms,
+
+      unreadLineAlarms,
+      unreadAlarmCount,
+      pushUnreadAlarm,
+      clearUnreadAlarms,
    };
  },
  {
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -1,7 +1,7 @@
 export * from './alarm';
 export * from './device';
 export * from './permission';
+export * from './polling';
 export * from './setting';
 export * from './station';
-export * from './unread';
 export * from './user';
--- a/src/stores/permission.ts
+++ b/src/stores/permission.ts
@@ -11,27 +11,22 @@ type Permissions = Record<Station['code'], PermissionType[]>;
 export const usePermissionStore = defineStore(
  NDM_PERMISSION_STORE_ID,
  () => {
-    const stationStore = useStationStore();
-
-    const permissionRecords = ref<NdmPermissionResultVO[] | null>(null);
+    const permRecords = ref<NdmPermissionResultVO[]>([]);

    const permissions = computed<Permissions>(() => {
+      const stationStore = useStationStore();
+
      const result: Permissions = {};

-      const records = permissionRecords.value;
-
-      // 如果权限记录不存在，则不做权限配置
-      if (!records) return result;
-
      // 如果该用户没有任何权限记录，则开放所有权限，否则根据记录配置权限
-      if (records.length === 0) {
+      if (permRecords.value.length === 0) {
        stationStore.stations.forEach((station) => {
          result[station.code] = [...objectEntries(PERMISSION_TYPE_NAMES).map(([permType]) => permType)];
        });
      } else {
        stationStore.stations.forEach((station) => {
          result[station.code] = [];
-          const stationPermRecords = records.filter((record) => record.stationCode === station.code);
+          const stationPermRecords = permRecords.value.filter((record) => record.stationCode === station.code);
          if (stationPermRecords.length === 0) return;
          stationPermRecords.forEach(({ type: permType }) => {
            if (!permType) return;
@@ -45,6 +40,7 @@ export const usePermissionStore = defineStore(

    // 按权限对车站进行分类
    const stations = computed(() => {
+      const stationStore = useStationStore();
      const result: Partial<Record<PermissionType, Station[]>> = {};
      // 按原始的车站顺序进行遍历，保持显示顺序不变
      stationStore.stations.forEach((station) => {
@@ -59,11 +55,11 @@ export const usePermissionStore = defineStore(
    });

    const setPermRecords = (records: NdmPermissionResultVO[]) => {
-      permissionRecords.value = records;
+      permRecords.value = records;
    };

    return {
-      permissionRecords,
+      permRecords,

      permissions,
      stations,
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -1,71 +1,36 @@
-import { useUserStore } from './user';
-import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_QUERY_KEY, NDM_SETTING_STORE_ID } from '@/constants';
-import router from '@/router';
-import { useQueryClient } from '@tanstack/vue-query';
+import { NDM_SETTING_STORE_ID } from '@/constants';
 import { darkTheme, lightTheme } from 'naive-ui';
 import { defineStore } from 'pinia';
 import { computed, ref, watch } from 'vue';
+import { useUserStore } from './user';
+import router from '@/router';

 export const useSettingStore = defineStore(
  NDM_SETTING_STORE_ID,
  () => {
-    const queryClient = useQueryClient();
-
-    // 主题设置
-    const darkMode = ref(true);
+    const darkThemeEnabled = ref(true);
    const themeMode = computed(() => {
-      return darkMode.value ? darkTheme : lightTheme;
+      return darkThemeEnabled.value ? darkTheme : lightTheme;
    });

-    // 布局设置
    const menuCollpased = ref(false);
+
    const stationGridCols = ref(6);

-    // 调试模式
-    const debugMode = ref(false);
-    /* 数据设置 */
-    // 显示设备原始数据
-    const showDeviceRawData = ref(false);
-    /* 网络设置 */
-    // 轮询车站
-    const pollingStations = ref(true);
-    // 主动请求
-    const activeRequests = ref(true);
-    // 订阅消息
-    const subscribeMessages = ref(true);
-    // 模拟用户
-    const mockUser = ref(false);
-    /* 数据库设置 */
-    // 使用本地数据库
-    const useLocalDB = ref(false);
+    const debugModeEnabled = ref(false);
+    const enableDebugMode = () => {
+      debugModeEnabled.value = true;
+    };
+    const disableDebugMode = () => {
+      debugModeEnabled.value = false;
+    };

-    watch(debugMode, (newValue, oldValue) => {
-      // 监听关闭调试模式
-      if (oldValue && !newValue) {
-        showDeviceRawData.value = false;
-        pollingStations.value = true;
-        activeRequests.value = true;
-        subscribeMessages.value = false;
-        mockUser.value = false;
-      }
-    });
-
-    watch(pollingStations, (newValue, oldValue) => {
-      // 监听关闭车站轮询
-      if (oldValue && !newValue) {
-        queryClient.cancelQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
-        queryClient.cancelQueries({ queryKey: [LINE_DEVICES_QUERY_KEY] });
-        queryClient.cancelQueries({ queryKey: [LINE_ALARMS_QUERY_KEY] });
-        queryClient.invalidateQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
-        queryClient.invalidateQueries({ queryKey: [LINE_DEVICES_QUERY_KEY] });
-        queryClient.invalidateQueries({ queryKey: [LINE_ALARMS_QUERY_KEY] });
-      }
-    });
-
-    watch(mockUser, (newValue, oldValue) => {
-      // 监听启用模拟用户
+    // 离线开发模式
+    // 控制 版本轮询 stomp连接 app-layout中的自动getUserInfo
+    const offlineDev = ref(false);
+    watch(offlineDev, (newValue, oldValue) => {
+      // 如果启用离线开发模式且当前未登录 自动填写token以绕过路由守卫并跳过登录页
      if (!oldValue && newValue) {
-        // 如果启当前未登录，填写token以绕过路由守卫
        const userStore = useUserStore();
        if (!userStore.userLoginResult) {
          userStore.userLoginResult = {
@@ -77,11 +42,9 @@ export const useSettingStore = defineStore(
            expiration: '',
          };
        }
-        // 如果token为空，填写token
        if (!userStore.userLoginResult.token) {
          userStore.userLoginResult.token = 'test';
        }
-        // 如果用户信息为空，填写用户信息
        if (!userStore.userInfo) {
          userStore.userInfo = {
            id: '2',
@@ -92,42 +55,35 @@ export const useSettingStore = defineStore(
            tenantId: '1',
          };
        }
-        // 如果当前路由为登录页，跳转到首页
        if (router.currentRoute.value.path === '/login') {
          router.push({ path: '/' });
        }
-        // 开启模拟用户时，也开启调试模式，但关闭其他的网络设置
-        debugMode.value = true;
-        pollingStations.value = false;
-        activeRequests.value = false;
-        subscribeMessages.value = false;
      }
    });

    return {
-      darkMode,
+      darkThemeEnabled,
      themeMode,

      menuCollpased,
+
      stationGridCols,

-      debugMode,
-      showDeviceRawData,
-      pollingStations,
-      activeRequests,
-      subscribeMessages,
-      mockUser,
-      useLocalDB,
+      debugModeEnabled,
+      enableDebugMode,
+      disableDebugMode,
+
+      offlineDev,
    };
  },
  {
    persist: [
      {
-        omit: ['showDeviceRawData'],
+        omit: ['debugModeEnabled'],
        storage: window.localStorage,
      },
      {
-        pick: ['showDeviceRawData'],
+        pick: ['debugModeEnabled'],
        storage: window.sessionStorage,
      },
    ],
--- a/src/stores/unread.ts
+++ b/src/stores/unread.ts
@@ -1,44 +0,0 @@
-import { initStationAlarms, type LineAlarms, type NdmDeviceAlarmLogResultVO } from '@/apis';
-import { NDM_UNREAD_STORE_ID } from '@/constants';
-import { tryGetDeviceType } from '@/enums';
-import { defineStore } from 'pinia';
-import { computed, shallowRef, triggerRef } from 'vue';
-
-export const useUnreadStore = defineStore(NDM_UNREAD_STORE_ID, () => {
-  // 全线所有车站的未读告警 (来自stomp订阅)
-  const unreadLineAlarms = shallowRef<LineAlarms>({});
-  const unreadAlarmCount = computed(() => {
-    let count = 0;
-    Object.values(unreadLineAlarms.value).forEach((stationAlarms) => {
-      count += stationAlarms['unclassified'].length;
-    });
-    return count;
-  });
-
-  const pushUnreadAlarm = (alarm: NdmDeviceAlarmLogResultVO) => {
-    const stationCode = alarm.stationCode;
-    if (!stationCode) return;
-    if (!unreadLineAlarms.value[stationCode]) {
-      unreadLineAlarms.value[stationCode] = initStationAlarms();
-    }
-    const deviceType = tryGetDeviceType(alarm.deviceType);
-    if (!deviceType) return;
-    const stationAlarms = unreadLineAlarms.value[stationCode];
-    stationAlarms[deviceType].push(alarm);
-    stationAlarms['unclassified'].push(alarm);
-    triggerRef(unreadLineAlarms);
-  };
-
-  const clearUnreadAlarms = () => {
-    unreadLineAlarms.value = {};
-    triggerRef(unreadLineAlarms);
-  };
-
-  return {
-    unreadLineAlarms,
-    unreadAlarmCount,
-
-    pushUnreadAlarm,
-    clearUnreadAlarms,
-  };
-});
Author	SHA1	Message	Date
yangsy	309f83cf1f	refactor: 整理页面的目录结构	2026-01-13 13:51:25 +08:00
yangsy	8737613567	feat: 系统设置面板的交互权限	2026-01-13 13:51:25 +08:00
yangsy	22aafb8da4	feat: 系统日志板块的交互权限	2026-01-13 13:51:25 +08:00
yangsy	0072407be5	feat: 设备告警板块的交互权限	2026-01-13 13:51:25 +08:00
yangsy	25f873de7e	feat: 设备诊断页面的交互权限	2026-01-13 13:51:25 +08:00
yangsy	22fb44c914	feat: 车站状态页面的交互权限	2026-01-13 13:51:25 +08:00
yangsy	21f86e33b6	feat: 定时更新用户权限	2026-01-13 13:51:25 +08:00
yangsy	4371f8b38c	feat: 添加权限状态管理	2026-01-13 13:51:25 +08:00
yangsy	62a9a7bc1e	feat: 添加权限配置页面	2026-01-13 13:51:25 +08:00
yangsy	9d06c8e131	feat: 对接权限相关API接口	2026-01-13 13:51:25 +08:00