架构设计

整体架构

┌─────────────────────────────────────────────────────────────┐
│                        前端应用层                            │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐   │
│  │  数据看板 │  │ 工单列表  │  │ 工单详情  │  │  登录页   │   │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘   │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                        视图层 (Views)                        │
│                    Vue 3 + Composition API                   │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                       组件层 (Components)                    │
│         TicketCard │ TicketForm │ TicketFilter │ Charts      │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                       状态管理层 (Pinia)                     │
│              TicketStore │ AuthStore │ Notification          │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                       服务层 (Services)                      │
│                  API Client │ WebSocket Client               │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                      后端 API 服务层                         │
│              REST API │ WebSocket │ Database                 │
└─────────────────────────────────────────────────────────────┘

模块划分

视图层 (Views)

• 负责页面级别的布局和路由对应
• 组合多个组件形成完整页面
• 处理页面级别的状态逻辑

组件层 (Components)

按功能域组织：

• ticket/* - 工单业务组件
• ui/* - 通用 UI 组件（与业务无关）
• charts/* - 数据可视化组件
• common/* - 通用功能组件

状态管理层 (Stores)

使用 Pinia 管理全局状态：

• 单一数据源 - 所有服务端数据通过 Store 管理
• 响应式 - 状态变化自动同步到视图
• 可预测 - 状态变更通过明确的 Actions

服务层 (Services)

• API 封装 - 统一处理 HTTP 请求、错误、认证
• WebSocket - 管理实时连接、事件分发

数据流

User Action → View → Store Action → Service → API
                                     ↓
                              Store State Update
                                     ↓
                              Component Re-render

关键技术决策

为什么选择 Vue 3 Composition API

• 更好的逻辑复用（Composables）
• 更清晰的代码组织
• 完整的 TypeScript 支持

为什么选择 Pinia

• 官方推荐，与 Vue 3 深度集成
• 完整的 TypeScript 支持
• 简洁的 API 设计
• Devtools 支持

为什么选择 Chart.js

• 成熟稳定，社区活跃
• 轻量级，性能优秀
• 丰富的图表类型
• 完善的文档