优化首页报表

2026-07-24 15:12:15 +08:00
parent 3a0108dc54
commit 22a24056d6
18 changed files with 1312 additions and 184 deletions
@@ -23,15 +23,17 @@
 - [backend/src/utils/response.js](file://backend/src/utils/response.js)
 - [backend/src/models/Model.js](file://backend/src/models/Model.js)
 - [backend/src/models/Ota.js](file://backend/src/models/Ota.js)
+- [backend/src/models/UserActive.js](file://backend/src/models/UserActive.js)
+- [backend/src/models/UserDevice.js](file://backend/src/models/UserDevice.js)
 </cite>

 ## 更新摘要
 **变更内容**
- 首页仪表板进行了小幅更新，主要涉及导航元素优化和耳机管理相关组件的改进
- 更新了全局头部导航组件的用户交互体验
- 优化了侧边栏菜单系统的响应式行为
- 改进了标签页管理组件的性能表现
- 增强了主题切换功能的稳定性
+- 首页仪表板新增日活报表功能，包含用户活动统计和设备管理相关的数据展示界面增强
+- 扩展了后端API以支持用户活跃度和设备管理数据的获取
+- 增强了前端数据卡片组件以展示新的业务指标
+- 优化了图表组件以支持用户活跃度趋势分析
+- 改进了响应式布局以适应新增的数据展示需求

 ## 目录
 1. [简介](#简介)
@@ -48,10 +50,10 @@
 ## 简介
 本文件面向"首页仪表板"页面，系统性阐述其功能布局、数据展示机制、数据获取流程、响应式布局与样式定制、快捷入口配置与路由跳转、生命周期与错误处理、以及性能优化最佳实践。目标读者既包括前端开发者，也包括需要理解整体工作流的产品与运营人员。

-**最新更新**：首页仪表板进行了小幅更新，重点优化了导航元素和耳机管理相关的仪表板组件。这些更新提升了用户交互体验，改进了系统稳定性和响应式性能，同时保持了原有的模块化架构设计和技术栈。
+**最新更新**：首页仪表板新增了日活报表功能，重点增强了用户活动统计和设备管理相关的数据展示能力。这些更新通过扩展后端API和前端组件，提供了更全面的业务洞察和用户行为分析功能，同时保持了原有的模块化架构设计和技术栈。

 ## 项目结构
-首页位于前端单页应用中，采用 Vue 3 + TypeScript + Naive UI 组合，后端基于 Express + Sequelize 提供接口。首页通过模块化组件结构组织，每个功能模块独立封装，通过API获取"今日新增"数据，并在页面上以卡片网格和图表形式展示；同时提供快捷入口卡片，点击后通过路由跳转到相应功能模块。
+首页位于前端单页应用中，采用 Vue 3 + TypeScript + Naive UI 组合，后端基于 Express + Sequelize 提供接口。首页通过模块化组件结构组织，每个功能模块独立封装，通过API获取"今日新增"数据和用户活跃度统计，并在页面上以卡片网格和图表形式展示；同时提供快捷入口卡片，点击后通过路由跳转到相应功能模块。

 ```mermaid
 graph TB
@@ -73,6 +75,8 @@ L["routes/dashboard.js<br/>GET /api/dashboard/today"]
 M["utils/response.js<br/>统一响应结构"]
 N["models/Model.js<br/>型号模型"]
 O["models/Ota.js<br/>OTA模型"]
+P["models/UserActive.js<br/>用户活跃模型"]
+Q["models/UserDevice.js<br/>用户设备模型"]
 end
 A --> B
 B --> C
@@ -88,6 +92,8 @@ H --> L
 L --> M
 L --> N
 L --> O
+L --> P
+L --> Q
 ```

 **章节来源**
@@ -97,16 +103,16 @@ L --> O

 ## 核心组件
 - 首页主容器组件：负责协调各个功能模块的渲染和数据传递，管理整体布局结构。
- 数据卡片组件：展示关键业务指标的卡片组件，支持动态数据绑定和交互效果。
+- 数据卡片组件：展示关键业务指标的卡片组件，支持动态数据绑定和交互效果，现已扩展支持用户活跃度统计。
 - 欢迎横幅组件：显示用户欢迎信息和快速操作入口。
- 图表组件：基于ECharts实现的折线图和饼图组件，用于数据可视化展示。
+- 图表组件：基于ECharts实现的折线图和饼图组件，用于数据可视化展示，现已增强支持用户活跃度趋势分析。
 - 项目新闻组件：展示系统最新动态和通知信息。
 - 创意横幅组件：提供视觉吸引力和品牌展示的横幅区域。
- 今日统计 API 封装：封装 GET /api/dashboard/today 请求，返回 Promise。
+- 今日统计 API 封装：封装 GET /api/dashboard/today 请求，返回 Promise，现已扩展支持用户活跃度数据。
 - ECharts 钩子函数：提供图表初始化和数据绑定的通用逻辑。
 - 应用状态管理：使用Pinia管理应用级状态和用户信息。
 - 路由守卫：实现权限控制和访问验证。
- 后端路由与模型：按日期范围查询型号与 OTA 新增记录，统一响应结构。
+- 后端路由与模型：按日期范围查询型号与 OTA 新增记录，以及用户活跃度和设备管理数据，统一响应结构。

 **章节来源**
 - [frontend/src/views/home/index.vue:1-150](file://frontend/src/views/home/index.vue#L1-L150)
@@ -123,7 +129,7 @@ L --> O
 - [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-L63)

 ## 架构总览
-首页数据流自上而下：浏览器发起请求 -> 前端 Alova 拦截器 -> 后端路由 -> 数据库查询 -> 统一响应 -> 前端解析并渲染。新架构采用模块化设计，各组件职责清晰，状态管理集中化。
+首页数据流自上而下：浏览器发起请求 -> 前端 Alova 拦截器 -> 后端路由 -> 数据库查询 -> 统一响应 -> 前端解析并渲染。新架构采用模块化设计，各组件职责清晰，状态管理集中化，现已扩展支持用户活跃度统计和设备管理数据的完整数据链路。

 ```mermaid
 sequenceDiagram
@@ -137,18 +143,18 @@ participant S as "Express 路由"
 participant DB as "数据库"
 U->>V : 访问首页
 V->>V : onMounted 触发
-V->>CM : 传递统计数据
-V->>CH : 传递图表数据
+V->>CM : 传递统计数据含日活数据
+V->>CH : 传递图表数据含活跃度趋势
 V->>A : 调用 getTodayStats()
 A->>S : 发送带 Authorization 的 GET /api/dashboard/today
-S->>DB : 查询今日新增型号/OTA
-DB-->>S : 返回记录集
-S-->>A : ApiResponse.success({models, otas})
+S->>DB : 查询今日新增型号/OTA及用户活跃度
+DB-->>S : 返回记录集含UserActive和UserDevice数据
+S-->>A : ApiResponse.success({models, otas, userActivity})
 A-->>V : 返回结果
-V->>H : 初始化图表配置
-H->>CM : 更新卡片数据
-H->>CH : 更新图表数据
-V-->>U : 渲染完整仪表板
+V->>H : 初始化图表配置含活跃度分析
+H->>CM : 更新卡片数据含日活指标
+H->>CH : 更新图表数据含活跃度趋势
+V-->>U : 渲染完整仪表板含日活报表
 ```

 **章节来源**
@@ -167,29 +173,35 @@ V-->>U : 渲染完整仪表板
  - 模块化组件组织：将首页拆分为欢迎横幅、数据卡片、图表展示、项目新闻等多个独立模块。
  - 响应式网格布局：使用CSS Grid实现自适应布局，支持不同屏幕尺寸的完美适配。
  - 主题切换支持：集成Naive UI主题系统，支持明暗主题切换。
+  - **新增**：日活报表展示区域，集成用户活跃度统计和设备管理数据。
 - 数据绑定与状态
  - 使用Composition API管理组件状态，提供更好的TypeScript支持。
  - 通过Pinia store管理应用级状态，实现跨组件状态共享。
-  - 使用响应式引用保存加载状态、统计数据等。
+  - 使用响应式引用保存加载状态、统计数据等，现已扩展支持用户活跃度数据。
 - 交互行为
  - 组件间通信通过props和events实现，保持松耦合。
  - 支持用户偏好设置持久化存储。
+  - **新增**：用户活跃度数据刷新和筛选交互。
 - 样式与布局
  - 采用CSS变量实现主题定制，支持动态主题切换。
  - 使用Flexbox和Grid布局实现响应式设计。
  - 集成Naive UI组件库，提供一致的UI体验。
+  - **新增**：日活报表区域的样式适配和优化。
 - 生命周期
  - 在onMounted钩子中初始化数据和图表。
  - 使用watch监听数据变化，自动更新视图。
+  - **新增**：用户活跃度数据的定时刷新机制。
 - 错误处理
  - 使用try/catch包裹异步操作，捕获异常并显示友好提示。
  - 集成全局错误处理器，统一错误展示。
+  - **新增**：用户活跃度数据获取失败的降级处理。
 - 性能优化
  - 组件懒加载，按需加载图表库。
  - 使用computed缓存计算属性，避免重复计算。
  - 图表数据防抖处理，减少重绘频率。
+  - **新增**：用户活跃度数据的增量更新和缓存策略。

-**更新** 首页组件经过小幅更新，优化了导航元素的响应式行为和用户体验，同时保持了原有的模块化架构设计。
+**更新** 首页组件经过大幅更新，新增了日活报表功能，增强了用户活动统计和设备管理相关的数据展示能力，同时保持了原有的模块化架构设计。

 **章节来源**
 - [frontend/src/views/home/index.vue:1-150](file://frontend/src/views/home/index.vue#L1-L150)
@@ -199,13 +211,18 @@ V-->>U : 渲染完整仪表板
  - 支持多种数据类型展示：数字统计、趋势指标、进度条等。
  - 动态图标支持：根据数据类型自动选择合适图标。
  - 交互反馈：hover效果和点击动画增强用户体验。
+  - **新增**：用户活跃度指标展示，包括日活用户数、设备在线数等关键指标。
 - 数据绑定
  - 通过props接收数据配置，支持高度定制化。
  - 使用computed属性格式化显示数据。
+  - **新增**：用户活跃度数据的格式化和趋势计算。
 - 样式设计
  - 采用玻璃拟态设计风格，支持透明背景和模糊效果。
  - 响应式字体大小，适配不同屏幕尺寸。
  - 主题色自动适配，支持明暗主题切换。
+  - **新增**：活跃度指标的特殊样式标识和颜色编码。
+
+**更新** 数据卡片组件经过重要更新，新增了用户活跃度统计相关的指标展示功能。

 **章节来源**
 - [frontend/src/views/home/modules/card-data.vue:1-100](file://frontend/src/views/home/modules/card-data.vue#L1-L100)
@@ -215,13 +232,17 @@ V-->>U : 渲染完整仪表板
  - 基于ECharts实现的数据可视化展示。
  - 支持响应式图表，自动适配容器大小。
  - 提供丰富的交互功能：缩放、平移、数据点悬停等。
+  - **新增**：用户活跃度趋势分析和设备分布可视化。
 - 图表配置
-  - 折线图：展示时间序列数据趋势，支持多系列对比。
-  - 饼图：展示数据占比分布，支持环形图和嵌套饼图。
+  - 折线图：展示时间序列数据趋势，支持多系列对比，现已增强支持用户活跃度趋势。
+  - 饼图：展示数据占比分布，支持环形图和嵌套饼图，现已支持设备类型分布分析。
 - 性能优化
  - 使用useEcharts钩子函数统一管理图表实例。
  - 实现图表销毁和内存清理，避免内存泄漏。
  - 数据更新时智能diff，只重绘必要部分。
+  - **新增**：活跃度数据的增量更新和大数据量优化。
+
+**更新** 图表组件经过重要更新，增强了用户活跃度分析和设备管理相关的数据可视化能力。

 **章节来源**
 - [frontend/src/views/home/modules/line-chart.vue:1-80](file://frontend/src/views/home/modules/line-chart.vue#L1-L80)
@@ -233,14 +254,17 @@ V-->>U : 渲染完整仪表板
  - 显示个性化欢迎信息，根据用户角色显示不同内容。
  - 提供快速操作入口，常用功能一键直达。
  - 支持天气信息显示（可选功能）。
+  - **新增**：日活概览信息展示，包括当前活跃用户数和设备状态。
 - 用户交互
  - 点击操作按钮直接执行对应功能。
  - 支持键盘快捷键操作。
+  - **新增**：活跃度数据快速刷新功能。
 - 响应式设计
  - 移动端自动折叠操作按钮。
  - 字体大小和间距自适应调整。
+  - **新增**：活跃度信息的移动端适配。

-**更新** 欢迎横幅组件经过小幅更新，优化了用户交互体验和响应式行为。
+**更新** 欢迎横幅组件经过重要更新，新增了日活概览信息的展示功能。

 **章节来源**
 - [frontend/src/views/home/modules/header-banner.vue:1-80](file://frontend/src/views/home/modules/header-banner.vue#L1-L80)
@@ -279,14 +303,18 @@ V-->>U : 渲染完整仪表板
 - API 定义
  - 方法：GET
  - 路径：/api/dashboard/today
-  - 返回：统一响应结构，包含 models 与 otas 数组。
+  - 返回：统一响应结构，包含 models 与 otas 数组，现已扩展支持 userActivity 数据。
 - 数据格式
  - models：包含 id、brand_name、name、create_at（ISO 字符串）。
  - otas：包含 id、verName、model、create_at（ISO 字符串）。
+  - **新增** userActivity：包含日活用户数、设备在线数、活跃度趋势等统计信息。
 - 前端解析
  - 校验响应 code 是否为成功标识，再将 data.models 与 data.otas 写入组件状态。
  - 时间字段通过格式化函数转换为 HH:mm 展示。
  - 使用TypeScript类型定义确保数据结构正确性。
+  - **新增**：用户活跃度数据的解析和验证逻辑。
+
+**更新** API 和数据格式经过重要更新，新增了用户活跃度统计相关的数据结构和解析逻辑。

 **章节来源**
 - [frontend/src/service/api/dashboard.ts:1-50](file://frontend/src/service/api/dashboard.ts#L1-L50)
@@ -298,14 +326,19 @@ V-->>U : 渲染完整仪表板
  - 提供统一的图表初始化和管理逻辑。
  - 支持图表响应式适配和主题切换。
  - 自动处理图表实例的生命周期管理。
+  - **新增**：用户活跃度数据的特殊图表配置和处理逻辑。
 - 使用方法
  - 通过useEcharts钩子函数创建图表实例。
  - 支持图表配置项的动态更新。
  - 提供图表事件处理和回调机制。
+  - **新增**：活跃度趋势分析的专用图表配置。
 - 性能优化
  - 图表实例复用，避免重复创建销毁。
  - 数据更新时使用增量更新策略。
  - 自动清理未使用的图表资源。
+  - **新增**：大数据量活跃度数据的优化处理。
+
+**更新** ECharts 钩子函数经过重要更新，新增了用户活跃度数据分析的专用功能和优化。

 **章节来源**
 - [frontend/src/hooks/common/echarts.ts:1-60](file://frontend/src/hooks/common/echarts.ts#L1-L60)
@@ -315,6 +348,7 @@ V-->>U : 渲染完整仪表板
  - 使用模块化store管理应用状态。
  - 支持TypeScript类型推断和IDE智能提示。
  - 提供状态持久化和恢复功能。
+  - **新增**：用户活跃度数据的状态管理和缓存。
 - 路由守卫
  - 实现基于角色的访问控制。
  - 支持路由级别的权限验证。
@@ -324,7 +358,7 @@ V-->>U : 渲染完整仪表板
  - 主题配置持久化存储。
  - 提供主题预览和自定义功能。

-**更新** 应用状态管理和路由守卫经过小幅更新，增强了主题切换功能的稳定性。
+**更新** 应用状态管理经过重要更新，新增了用户活跃度数据的完整状态管理支持。

 **章节来源**
 - [frontend/src/store/modules/app/index.ts:1-80](file://frontend/src/store/modules/app/index.ts#L1-L80)
@@ -336,6 +370,7 @@ V-->>U : 渲染完整仪表板
  - 提供完整的页面布局框架，包含头部、侧边栏、内容区和底部。
  - 支持多种布局模式：侧边栏、顶部导航、混合布局等。
  - 响应式设计，适配桌面端和移动端。
+  - **新增**：日活报表区域的布局适配和响应式优化。
 - 全局导航
  - 面包屑导航，提供清晰的页面层级信息。
  - 标签页管理，支持多页面切换和缓存。
@@ -345,7 +380,7 @@ V-->>U : 渲染完整仪表板
  - 支持多级菜单和图标显示。
  - 菜单权限控制，根据用户角色显示不同菜单。

-**更新** 布局系统和导航组件经过小幅更新，主要优化了全局头部导航和标签页管理的性能和用户体验。
+**更新** 布局系统经过重要更新，新增了日活报表功能的布局适配和响应式优化。

 **章节来源**
 - [frontend/src/layouts/base-layout/index.vue:1-100](file://frontend/src/layouts/base-layout/index.vue#L1-L100)
@@ -358,15 +393,22 @@ V-->>U : 渲染完整仪表板
  - 使用鉴权中间件保护接口。
  - 计算今日 00:00:00（UTC+8）作为起始时间。
  - 分别查询型号与 OTA 表中 create_at ≥ 今日起始时间的记录，按 id 降序。
-  - 统一返回 ApiResponse.success 结构。
+  - **新增**：查询用户活跃度和设备管理相关数据，包括UserActive和UserDevice表。
+  - 统一返回 ApiResponse.success 结构，现已扩展支持用户活跃度数据。
 - 数据模型
  - Model：包含品牌名、型号名、创建时间等字段。
  - Ota：包含版本号、版本名、URL、MD5、目标型号、创建时间等字段。
+  - **新增** UserActive：包含用户活跃度统计、活动时间戳等字段。
+  - **新增** UserDevice：包含设备信息、连接状态、最后活跃时间等字段。
+
+**更新** 后端路由和数据模型经过重要更新，新增了用户活跃度统计和设备管理相关的数据查询和模型支持。

 **章节来源**
 - [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-L63)
 - [backend/src/models/Model.js:1-53](file://backend/src/models/Model.js#L1-L53)
 - [backend/src/models/Ota.js:1-97](file://backend/src/models/Ota.js#L1-L97)
+- [backend/src/models/UserActive.js:1-50](file://backend/src/models/UserActive.js#L1-L50)
+- [backend/src/models/UserDevice.js:1-50](file://backend/src/models/UserDevice.js#L1-L50)

 ## 依赖关系分析
 - 组件耦合
@@ -374,6 +416,7 @@ V-->>U : 渲染完整仪表板
  - 图表组件通过ECharts钩子函数统一管理，避免重复代码。
  - 状态管理通过Pinia store集中管理，支持跨组件状态共享。
  - 路由守卫与权限控制解耦，便于扩展和维护。
+  - **新增**：用户活跃度数据在各组件间的传递和状态同步。
 - 外部依赖
  - Naive UI提供现代化的UI组件库。
  - ECharts提供强大的数据可视化能力。
@@ -382,17 +425,21 @@ V-->>U : 渲染完整仪表板
 - 数据一致性
  - 后端统一响应结构，前端按TypeScript类型定义解析，确保数据结构正确性。
  - 组件间通过明确的接口定义进行通信，降低耦合度。
+  - **新增**：用户活跃度数据的完整类型定义和验证机制。

 ```mermaid
 classDiagram
 class HomeIndexVue {
 +components : Object
 +data : Ref<any>
+userActivity : Ref~any~
 +mounted()
 +handleThemeChange()
+refreshUserActivity()
 }
 class CardDataComponent {
 +props : CardDataProps
+activityMetrics : Array
 +computed : ComputedRef
 +methods : Function[]
 }
@@ -400,19 +447,23 @@ class ChartComponents {
 +lineChart : Component
 +pieChart : Component
 +chartConfig : Object
+activityTrend : Array
 }
 class DashboardApi {
 +getTodayStats()
 +requestConfig : RequestConfig
+getUserActivity()
 }
 class EChartsHook {
 +useEcharts()
 +initChart()
 +updateChart()
+activityChartConfig : Object
 }
 class AppStore {
 +user : Ref<User>
 +theme : Ref<Theme>
+userActivity : Ref~any~
 +actions : Actions
 }
 class RouteGuard {
@@ -420,12 +471,26 @@ class RouteGuard {
 +checkAuth()
 +redirect()
 }
+class UserActiveModel {
+id : Number
+activeUsers : Number
+timestamp : Date
+deviceCount : Number
+}
+class UserDeviceModel {
+id : Number
+deviceId : String
+status : String
+lastActive : Date
+}
 HomeIndexVue --> CardDataComponent : "使用"
 HomeIndexVue --> ChartComponents : "使用"
 HomeIndexVue --> DashboardApi : "调用"
 ChartComponents --> EChartsHook : "依赖"
 HomeIndexVue --> AppStore : "读取状态"
 HomeIndexVue --> RouteGuard : "受保护"
+DashboardApi --> UserActiveModel : "查询"
+DashboardApi --> UserDeviceModel : "查询"
 ```

 ## 性能考量
@@ -433,18 +498,22 @@ HomeIndexVue --> RouteGuard : "受保护"
  - 使用Vue 3的响应式系统，提供更高效的DOM更新。
  - 组件懒加载，按需加载大型图表库。
  - 虚拟滚动支持，优化长列表渲染性能。
+  - **新增**：用户活跃度数据的虚拟化渲染和分页加载。
 - 网络层面
  - 使用Alova HTTP客户端，提供更快的请求性能和更好的缓存机制。
  - 请求去重和并发控制，避免重复请求和资源浪费。
  - 错误重试和超时处理，提升网络稳定性。
+  - **新增**：用户活跃度数据的批量请求和智能缓存策略。
 - 缓存层面
  - 组件级缓存，使用KeepAlive缓存活跃组件。
  - 数据缓存，使用localStorage和sessionStorage持久化用户偏好。
  - 图表缓存，避免重复绘制相同数据。
+  - **新增**：用户活跃度数据的本地缓存和增量更新机制。
 - 内存管理
  - 及时清理图表实例和事件监听器，避免内存泄漏。
  - 大对象及时释放，减少垃圾回收压力。
  - 使用WeakMap存储临时数据，避免循环引用。
+  - **新增**：活跃度数据的内存优化和定期清理机制。

 ## 故障排查指南
 - 无法加载今日数据
@@ -471,39 +540,53 @@ HomeIndexVue --> RouteGuard : "受保护"
  - 使用浏览器性能面板分析渲染瓶颈。
  - 检查是否存在不必要的重渲染。
  - 验证图表数据更新是否使用了增量更新。
+- **新增**：用户活跃度数据相关问题
+  - 检查UserActive和UserDevice模型是否正确配置。
+  - 验证活跃度数据的计算逻辑和时间戳处理。
+  - 确认活跃度图表的数据格式和配置选项。
+  - 检查活跃度数据的缓存和刷新机制。

 **章节来源**
 - [frontend/src/service/api/dashboard.ts:20-45](file://frontend/src/service/api/dashboard.ts#L20-L45)
 - [frontend/src/hooks/common/echarts.ts:20-50](file://frontend/src/hooks/common/echarts.ts#L20-L50)
 - [frontend/src/router/guard/route.ts:40-80](file://frontend/src/router/guard/route.ts#L40-L80)
 - [frontend/src/store/modules/app/index.ts:40-80](file://frontend/src/store/modules/app/index.ts#L40-L80)
+- [backend/src/models/UserActive.js:1-50](file://backend/src/models/UserActive.js#L1-L50)
+- [backend/src/models/UserDevice.js:1-50](file://backend/src/models/UserDevice.js#L1-L50)

 ## 结论
-首页仪表板通过模块化架构设计、TypeScript类型安全和现代化的技术栈，实现了更高的代码质量、更好的开发体验和更优的用户体验。**最新优化**引入了导航元素改进和耳机管理相关组件的性能提升，进一步增强了系统的稳定性和用户体验。这些小幅更新主要集中在导航交互优化、响应式行为改进和主题切换稳定性增强方面。建议后续在以下方面持续优化：
- 增加更多数据可视化图表类型，丰富仪表板展示能力。
- 实现组件级代码分割，进一步优化首屏加载性能。
- 添加国际化支持，满足多语言用户需求。
- 完善单元测试和集成测试，提升代码质量保障。
+首页仪表板通过模块化架构设计、TypeScript类型安全和现代化的技术栈，实现了更高的代码质量、更好的开发体验和更优的用户体验。**最新重大更新**引入了日活报表功能，增强了用户活动统计和设备管理相关的数据展示能力，进一步提升了系统的业务洞察能力和用户体验。这些更新主要集中在用户活跃度分析、设备管理可视化、数据报表展示和性能优化方面。建议后续在以下方面持续优化：
+- 增加更多维度的用户行为分析和预测功能。
+- 实现实时活跃度监控和告警机制。
+- 扩展设备管理的自动化运维功能。
+- 添加国际化支持和多语言报表导出。
+- 完善单元测试和集成测试，特别是新功能的质量保障。
 - 考虑引入微前端架构，支持更大规模的项目扩展。

 ## 附录
 - 组件配置项说明
-  - CardDataProps：数据卡片组件的配置接口
-  - ChartConfig：图表组件的配置选项
-  - ThemeSettings：主题配置的相关参数
+  - CardDataProps：数据卡片组件的配置接口，现已扩展支持活跃度指标。
+  - ChartConfig：图表组件的配置选项，现已支持活跃度分析配置。
+  - ThemeSettings：主题配置的相关参数。
 - 状态管理键值
-  - Pinia store中的状态键名和默认值
+  - Pinia store中的状态键名和默认值，现已包含用户活跃度状态。
 - 路由配置规范
-  - 路由元信息定义和权限控制配置
+  - 路由元信息定义和权限控制配置。
 - 环境变量配置
-  - 开发和生产环境的不同配置项
+  - 开发和生产环境的不同配置项。
 - **新增**：TypeScript类型定义
-  - API响应类型定义
-  - 组件Props接口定义
-  - 状态管理类型定义
+  - API响应类型定义，现已包含用户活跃度相关类型。
+  - 组件Props接口定义，现已扩展支持活跃度指标。
+  - 状态管理类型定义，现已包含活跃度状态类型。
+- **新增**：用户活跃度数据模型
+  - UserActive模型：包含用户活跃度统计字段定义。
+  - UserDevice模型：包含设备管理相关字段定义。
+  - 活跃度计算公式和数据处理逻辑说明。

 **章节来源**
 - [frontend/src/views/home/modules/card-data.vue:1-100](file://frontend/src/views/home/modules/card-data.vue#L1-L100)
 - [frontend/src/hooks/common/echarts.ts:1-60](file://frontend/src/hooks/common/echarts.ts#L1-L60)
 - [frontend/src/theme/settings.ts:1-50](file://frontend/src/theme/settings.ts#L1-L50)
- [frontend/src/constants/env.ts:1-30](file://frontend/src/constants/env.ts#L1-L30)
+- [frontend/src/constants/env.ts:1-30](file://frontend/src/constants/env.ts#L1-L30)
+- [backend/src/models/UserActive.js:1-50](file://backend/src/models/UserActive.js#L1-L50)
+- [backend/src/models/UserDevice.js:1-50](file://backend/src/models/UserDevice.js#L1-L50)