91 lines
2.1 KiB
Markdown
91 lines
2.1 KiB
Markdown
# Design: 管理后台系统架构设计
|
||
|
||
## 架构模式
|
||
|
||
### 组件层次结构
|
||
```
|
||
AdminLayout.vue (根布局)
|
||
├── Sidebar.vue (侧边栏)
|
||
│ ├── Logo.vue (品牌标识)
|
||
│ └── MenuItems.vue (菜单项)
|
||
├── Header.vue (顶部导航)
|
||
│ ├── Breadcrumb.vue (面包屑)
|
||
│ ├── UserActions.vue (用户操作)
|
||
│ └── Notifications.vue (通知中心)
|
||
└── MainContent.vue (主内容区)
|
||
└── PageContent (页面内容占位)
|
||
```
|
||
|
||
### 路由架构
|
||
```
|
||
/login - 登录页面
|
||
/admin - 管理后台根路径
|
||
├── /admin/dashboard - 仪表板
|
||
├── /admin/orders/content-review - 内容审核
|
||
├── /admin/orders - 订单管理
|
||
└── /admin/users - 用户管理
|
||
```
|
||
|
||
## 技术决策
|
||
|
||
### 1. 状态管理
|
||
- 使用 Vue 3 Composition API + provide/inject 管理全局状态
|
||
- 用户认证状态：isAuthenticated, userInfo
|
||
- 主题和语言设置：theme, locale
|
||
- 侧边栏状态：sidebarCollapsed
|
||
|
||
### 2. 路由策略
|
||
- 使用 Vue Router 4 的动态路由
|
||
- 路由守卫控制访问权限
|
||
- 元信息配置页面标题和面包屑
|
||
- 路由懒加载优化性能
|
||
|
||
### 3. 响应式设计
|
||
- 桌面优先设计（1440px+）
|
||
- 断点：桌面 >1024px, 平板 768-1024px, 移动 <768px
|
||
- 侧边栏在移动端可折叠
|
||
- 头部适配不同屏幕尺寸
|
||
|
||
### 4. 国际化设计
|
||
- 中文/英文双语言支持
|
||
- 所有用户可见文本通过 i18n 管理
|
||
- 语言切换保持用户状态
|
||
- 路由参数支持语言前缀
|
||
|
||
### 5. 样式系统
|
||
- CSS 变量定义主题色彩
|
||
- Scoped CSS 防止样式污染
|
||
- 8px 网格系统统一间距
|
||
- Element Plus 主题定制
|
||
|
||
## 关键组件设计
|
||
|
||
### Sidebar 组件
|
||
- 可折叠/展开状态
|
||
- 动态菜单项渲染
|
||
- 当前路由高亮
|
||
- 平滑动画过渡
|
||
|
||
### Login 组件
|
||
- 表单验证
|
||
- 错误处理
|
||
- 登录状态反馈
|
||
- 记住登录状态
|
||
|
||
### Header 组件
|
||
- 面包屑导航
|
||
- 用户信息展示
|
||
- 快捷操作菜单
|
||
- 通知中心
|
||
|
||
## 性能优化
|
||
- 路由懒加载
|
||
- 组件按需加载
|
||
- 图片懒加载
|
||
- 防抖处理 resize 事件
|
||
|
||
## 安全考虑
|
||
- 路由权限控制
|
||
- XSS 防护
|
||
- 登录状态验证
|
||
- 敏感操作二次确认 |