dm-design/商家端web/.spec-workflow/specs/merchant-account-permission/design.md

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. 验证逻辑调整: 验证身份选择而非菜市场选择

数据模型

身份类型定义

const identityTypes = [
    { id: 1, name: '子经营者', code: 'SUB_MERCHANT' },
    { id: 2, name: '商户', code: 'MERCHANT' }
];

表单数据结构

const formData = {
    identity: {
        id: number,
        name: string,
        code: string
    },
    phoneNumber: string,
    permissions: string[], // 权限代码数组
    timestamp: string
};

组件实现

HTML结构修改

1. 替换菜市场选择 *为创建账号身份 *
2. 删除复杂的菜市场下拉组件，使用标准select元素
3. 更新相关表单验证和错误提示

CSS复用策略

完全复用参考文件的样式系统，包括：

• 颜色方案（渐变头部、按钮色彩体系）
• 布局系统（响应式网格、卡片设计）
• 交互动画（hover效果、阴影过渡）
• 移动端适配规则

JavaScript功能模块

身份选择模块

// 初始化身份选项
function initIdentityOptions() {
    // 渲染select选项
}

// 处理身份选择变化
function handleIdentityChange(identity) {
    // 更新选中状态
    // 可选：根据身份类型显示推荐的权限
}

权限管理模块（复用原逻辑）

// 权限树构建与渲染（完全复用）
function buildPermissionTree(permissions) { /* 复用 */ }
function createPermissionNode(item) { /* 复用 */ }
function togglePermissionChildren(btn, li) { /* 复用 */ }

表单验证模块

// 修改验证逻辑：身份选择 + 手机号 + 权限
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. 大数据量权限树渲染测试