170 lines
4.8 KiB
Markdown
170 lines
4.8 KiB
Markdown
|
# Design Document
|
|||
|
|
|
|||
|
|
## Overview
|
|||
|
|
|
|||
|
|
商家端账号权限分配页面是一个独立的前端HTML页面，基于平台端权限分配页面的设计模式进行适配改造。主要替换菜市场选择功能为商家身份选择，保持一致的UI风格和交互体验。
|
|||
|
|
|
|||
|
|
## 技术决策
|
|||
|
|
|
|||
|
|
### 代码复用策略
|
|||
|
|
完全复用平台端权限分配.html的CSS样式和JavaScript交互逻辑，仅修改以下部分：
|
|||
|
|
- 替换菜市场选择下拉框为商家身份选择
|
|||
|
|
- 更新相关文案和提示信息
|
|||
|
|
- 调整数据结构（移除菜市场数据，增加身份类型数据）
|
|||
|
|
|
|||
|
|
### 文件组织
|
|||
|
|
- **位置**: `/Users/linbin/Documents/代码/dmjs-demo/商家端web/1 权限管理/账号权限分配.html`
|
|||
|
|
- **类型**: 独立HTML文件，包含内联CSS和JavaScript
|
|||
|
|
- **依赖**: 纯前端实现，无需外部库依赖
|
|||
|
|
|
|||
|
|
## 架构设计
|
|||
|
|
|
|||
|
|
### 组件结构
|
|||
|
|
```
|
|||
|
|
账号权限分配页面
|
|||
|
|
├── 布局容器 (Container)
|
|||
|
|
│ ├── 头部区域 (Header)
|
|||
|
|
│ │ ├── 页面标题
|
|||
|
|
│ │ └── 操作按钮区域
|
|||
|
|
│ ├── 内容区域 (Content)
|
|||
|
|
│ │ ├── 账号创建表单区域
|
|||
|
|
│ │ │ ├── 身份选择下拉框
|
|||
|
|
│ │ │ └── 手机号输入框
|
|||
|
|
│ │ ├── 权限分配树形区域
|
|||
|
|
│ │ │ └── 权限复选框树
|
|||
|
|
│ │ └── 操作按钮区域
|
|||
|
|
│ └── 交互逻辑层 (JavaScript)
|
|||
|
|
│ ├── 身份选择处理
|
|||
|
|
│ ├── 权限树渲染
|
|||
|
|
│ ├── 表单验证
|
|||
|
|
│ └── 数据收集与提交
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 核心修改点
|
|||
|
|
1. **身份选择组件**: 替换原有的菜市场复杂下拉选择为简单的select下拉框
|
|||
|
|
2. **数据结构简化**: 移除菜市场搜索过滤逻辑，使用固定的身份选项
|
|||
|
|
3. **验证逻辑调整**: 验证身份选择而非菜市场选择
|
|||
|
|
|
|||
|
|
## 数据模型
|
|||
|
|
|
|||
|
|
### 身份类型定义
|
|||
|
|
```javascript
|
|||
|
|
const identityTypes = [
|
|||
|
|
{ id: 1, name: '子经营者', code: 'SUB_MERCHANT' },
|
|||
|
|
{ id: 2, name: '商户', code: 'MERCHANT' }
|
|||
|
|
];
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 表单数据结构
|
|||
|
|
```javascript
|
|||
|
|
const formData = {
|
|||
|
|
identity: {
|
|||
|
|
id: number,
|
|||
|
|
name: string,
|
|||
|
|
code: string
|
|||
|
|
},
|
|||
|
|
phoneNumber: string,
|
|||
|
|
permissions: string[], // 权限代码数组
|
|||
|
|
timestamp: string
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 组件实现
|
|||
|
|
|
|||
|
|
### HTML结构修改
|
|||
|
|
1. 替换`菜市场选择 *`为`创建账号身份 *`
|
|||
|
|
2. 删除复杂的菜市场下拉组件，使用标准select元素
|
|||
|
|
3. 更新相关表单验证和错误提示
|
|||
|
|
|
|||
|
|
### CSS复用策略
|
|||
|
|
完全复用参考文件的样式系统，包括：
|
|||
|
|
- 颜色方案（渐变头部、按钮色彩体系）
|
|||
|
|
- 布局系统（响应式网格、卡片设计）
|
|||
|
|
- 交互动画（hover效果、阴影过渡）
|
|||
|
|
- 移动端适配规则
|
|||
|
|
|
|||
|
|
### JavaScript功能模块
|
|||
|
|
|
|||
|
|
#### 身份选择模块
|
|||
|
|
```javascript
|
|||
|
|
// 初始化身份选项
|
|||
|
|
function initIdentityOptions() {
|
|||
|
|
// 渲染select选项
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理身份选择变化
|
|||
|
|
function handleIdentityChange(identity) {
|
|||
|
|
// 更新选中状态
|
|||
|
|
// 可选：根据身份类型显示推荐的权限
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 权限管理模块（复用原逻辑）
|
|||
|
|
```javascript
|
|||
|
|
// 权限树构建与渲染（完全复用）
|
|||
|
|
function buildPermissionTree(permissions) { /* 复用 */ }
|
|||
|
|
function createPermissionNode(item) { /* 复用 */ }
|
|||
|
|
function togglePermissionChildren(btn, li) { /* 复用 */ }
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 表单验证模块
|
|||
|
|
```javascript
|
|||
|
|
// 修改验证逻辑：身份选择 + 手机号 + 权限
|
|||
|
|
function validateForm() {
|
|||
|
|
// 验证身份已选择
|
|||
|
|
// 验证手机号格式
|
|||
|
|
// 验证至少选择一个权限
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 错误处理
|
|||
|
|
|
|||
|
|
### 前端验证错误
|
|||
|
|
1. **未选择身份**: 显示"请选择账号身份"提示
|
|||
|
|
2. **手机号格式错误**: 显示"请输入正确的手机号格式"提示
|
|||
|
|
3. **未选择权限**: 显示"请至少选择一个权限"提示
|
|||
|
|
|
|||
|
|
### 用户输入处理
|
|||
|
|
- 手机号输入自动过滤非数字字符
|
|||
|
|
- 表单提交前进行完整性检查
|
|||
|
|
- 重置操作需要二次确认
|
|||
|
|
|
|||
|
|
## 浏览器兼容性
|
|||
|
|
|
|||
|
|
### 支持浏览器
|
|||
|
|
- Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
|
|||
|
|
- 移动端浏览器（iOS Safari, Chrome Mobile）
|
|||
|
|
|
|||
|
|
### 降级处理
|
|||
|
|
- IE11：基本功能可用，样式简化处理
|
|||
|
|
- 旧版浏览器：使用polyfill处理classList等API
|
|||
|
|
|
|||
|
|
## 性能优化
|
|||
|
|
|
|||
|
|
### 加载优化
|
|||
|
|
- 内联CSS和JavaScript避免额外HTTP请求
|
|||
|
|
- 权限树使用虚拟化渲染（节点数量>100时）
|
|||
|
|
- 图片资源使用base64编码（如需图标）
|
|||
|
|
|
|||
|
|
### 运行时优化
|
|||
|
|
- 事件委托处理权限树点击
|
|||
|
|
- 防抖处理输入框实时验证
|
|||
|
|
- 使用DocumentFragment批量DOM操作
|
|||
|
|
|
|||
|
|
## 测试策略
|
|||
|
|
|
|||
|
|
### 功能测试
|
|||
|
|
1. 身份选择下拉框交互测试
|
|||
|
|
2. 权限树展开/收起功能测试
|
|||
|
|
3. 表单验证逻辑测试
|
|||
|
|
4. 数据收集和提交测试
|
|||
|
|
|
|||
|
|
### 跨浏览器测试
|
|||
|
|
1. 主流浏览器样式一致性测试
|
|||
|
|
2. 移动端响应式布局测试
|
|||
|
|
3. 触摸事件兼容性测试
|
|||
|
|
|
|||
|
|
### 边界条件测试
|
|||
|
|
1. 空表单提交测试
|
|||
|
|
2. 权限循环引用测试
|
|||
|
|
3. 大数据量权限树渲染测试
|