# 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. 大数据量权限树渲染测试