DM-ROW 接口文档

Appearance

开发工具与辅助功能 ​

**本文引用的文件** - [main.js](file://app/devicemate-app/main.js) - [directive/index.js](file://app/devicemate-app/directive/index.js) - [utils/common.js](file://app/devicemate-app/utils/common.js) - [utils/localstorage.js](file://app/devicemate-app/utils/localstorage.js) - [utils/dictMixins.js](file://app/devicemate-app/utils/dictMixins.js) - [utils/userMixins.js](file://app/devicemate-app/utils/userMixins.js) - [utils/upgrade/dialog.js](file://app/devicemate-app/utils/upgrade/dialog.js) - [utils/upgrade/upgrade.js](file://app/devicemate-app/utils/upgrade/upgrade.js) - [lib/nfc.js](file://app/devicemate-app/lib/nfc.js) - [locale/index.js](file://app/devicemate-app/locale/index.js) - [config/request.js](file://app/devicemate-app/config/request.js) - [config/index.js](file://app/devicemate-app/config/index.js)

目录 ​

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖关系分析
  7. 性能考量
  8. 故障排查指南
  9. 结论
  10. 附录

简介 ​

本文件面向 DeviceMate Vue.js 移动端应用（基于 uni-app）的开发团队，系统梳理项目中的开发工具与辅助功能，包括：

  • 工具函数与混入（Mixins）：加密、消息红点、版本升级、字典解析、用户权限与菜单处理等
  • 自定义指令：权限控制指令的注册与钩子使用
  • 国际化与本地存储：i18n 初始化与本地缓存封装
  • 网络请求层：统一拦截、头部注入、错误处理与加载提示
  • 原生能力集成：NFC 读写、升级弹窗与下载安装流程
  • Mock 与测试数据：仓库中未发现前端 Mock 文件，建议采用后端联调或本地服务模拟
  • 开发效率与质量：调试技巧、错误处理与性能优化建议

项目结构 ​

围绕“开发工具与辅助功能”的主题，相关目录与文件分布如下：

  • 应用入口与全局注册：main.js 中注册指令、国际化、全局组件与工具
  • 自定义指令：directive/index.js 提供权限指令
  • 工具函数与混入：utils 下的 common.js、localstorage.js、dictMixins.js、userMixins.js
  • 升级与弹窗：utils/upgrade/dialog.js、utils/upgrade/upgrade.js
  • NFC：lib/nfc.js
  • 国际化：locale/index.js
  • 请求封装：config/request.js、config/index.js
  • 本地存储：utils/localstorage.js

图表来源

章节来源

核心组件 ​

  • 自定义指令：权限指令用于根据用户菜单权限动态控制 DOM 显示
  • 工具函数：消息红点检测、版本升级弹窗与下载、RSA 加密
  • 混入（Mixins）：字典解析、用户权限与菜单处理、去重与分页
  • 国际化：i18n 初始化与语言切换
  • 本地存储：封装 JSON 的存取与清理
  • 网络请求：统一拦截、头部注入、错误处理与加载提示
  • 原生能力：NFC 读写、升级弹窗绘制与下载安装

章节来源

架构总览 ​

整体架构围绕“入口注册 + 工具层 + 原生能力”展开，通过全局注册与混入实现跨组件复用。

图表来源

详细组件分析 ​

自定义指令：权限控制 ​

  • 注册位置：入口文件中导入并注册指令
  • 指令行为：根据绑定值（权限码）与用户菜单列表比对，决定元素是否显示
  • 钩子使用：bind 钩子中执行判断与 DOM 控制
  • DOM 操作：通过样式隐藏而非移除节点，便于后续恢复

图表来源

章节来源

工具函数：消息红点与版本升级 ​

  • 消息红点：请求消息列表，若存在未读消息则在底部导航显示红点
  • 版本升级：拉取最新版本配置，比较版本号，触发升级弹窗；支持 Android APK 下载安装与 iOS App Store 跳转

图表来源

章节来源

工具函数：RSA 加密 ​

  • 使用公钥对敏感文本进行加密，用于安全传输
  • 公钥来自配置模块

图表来源

章节来源

混入（Mixins）：字典与用户 ​

  • 字典混入：提供获取字典列表与按值查找名称的方法
  • 用户混入：权限判断、菜单展示、去重与分页、菜单点击处理、角色信息加载、默认工厂选择

图表来源

章节来源

国际化与本地存储 ​

  • 国际化：根据系统语言初始化 i18n，挂载到 Vue 原型
  • 本地存储：封装 JSON 存取、删除与清空

图表来源

章节来源

网络请求封装 ​

  • 统一拦截：网络状态检查、加载提示、国际化头注入、时区头注入
  • 错误处理：非 200 统一 toast 提示，401 清理用户信息并跳转登录
  • 头部注入：Authorization、Locale、timeZone、Cache-Control
  • 过滤开关：支持自定义接口直通返回

图表来源

章节来源

原生能力：NFC 读写 ​

  • 生命周期事件：监听 newintent、pause、resume，控制前台调度系统
  • 读取流程：解析 NDEF 消息，提取 payload 并转换为字符串
  • 写入流程：构造 NdefRecord/NdefMessage，连接标签并写入或格式化
  • 结果提示：通过 toast 展示状态

图表来源

章节来源

依赖关系分析 ​

  • 入口依赖：main.js 依赖指令、国际化、请求封装与本地存储
  • 指令依赖：权限指令依赖用户信息与菜单列表
  • 工具依赖：通用工具依赖请求封装与本地存储；升级弹窗依赖升级下载；NFC 依赖原生 Android API
  • 请求封装：依赖国际化、本地存储与配置常量

图表来源

章节来源

性能考量 ​

  • 请求并发与加载：通过计数器控制 loading 显示与关闭，避免重复遮罩
  • 本地缓存：使用 JSON 序列化减少解析成本，批量清理时注意同步调用
  • 权限判断：递归遍历菜单树时避免深层嵌套导致的性能问题，必要时缓存用户权限集合
  • 升级弹窗：绘制复杂视图时尽量减少 DOM 操作次数，按钮点击区域计算一次即可
  • NFC：频繁轮询需谨慎，结合生命周期事件合理启停前台调度

故障排查指南 ​

  • 网络异常：检查网络状态变更回调与 toast 提示，确认接口超时与失败回调
  • 401 登录态失效：确认请求封装中的清理逻辑与跳转流程
  • 权限指令无效：检查用户信息与菜单列表是否正确注入，以及指令绑定值
  • 升级弹窗不显示：确认弹窗绘制与遮罩显示逻辑，检查按钮点击区域坐标计算
  • NFC 无法读写：检查设备是否支持 NFC、系统是否启用，以及前台调度是否正常启用/恢复

章节来源

结论 ​

本项目通过入口集中注册、工具函数与混入复用、原生能力封装与国际化支持，构建了清晰的开发工具与辅助功能体系。建议在后续迭代中补充前端 Mock 数据与 API 模拟方案，完善单元测试与集成测试，持续优化权限判断与请求拦截的性能与稳定性。

附录 ​

  • Mock 数据与 API 模拟：当前仓库未发现前端 Mock 文件，建议采用后端联调或本地服务模拟，以保障开发效率与测试覆盖
  • 开发效率与质量：建议统一使用 ESLint/Prettier，规范命名与注释；对关键流程增加日志与埋点；对权限与网络错误进行集中处理与提示