删除无用文件
This commit is contained in:
parent
7bc839ba00
commit
d3275da1a8
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"id": "approval_1757137638926_bvxb2x9yr",
|
||||
"title": "商家端账号分配权限功能需求文档",
|
||||
"filePath": ".spec-workflow/specs/merchant-account-permission/requirements.md",
|
||||
"type": "document",
|
||||
"status": "pending",
|
||||
"createdAt": "2025-09-06T05:47:18.926Z",
|
||||
"category": "spec",
|
||||
"categoryName": "merchant-account-permission"
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"id": "approval_1757138004604_1ga5ibp7w",
|
||||
"title": "商家端账号权限分配页面-简化版需求",
|
||||
"filePath": ".spec-workflow/specs/merchant-account-permission/requirements.md",
|
||||
"type": "document",
|
||||
"status": "pending",
|
||||
"createdAt": "2025-09-06T05:53:24.604Z",
|
||||
"category": "spec",
|
||||
"categoryName": "merchant-account-permission"
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"id": "approval_1757138141783_3vwoymq9y",
|
||||
"title": "商家端账号权限分配页面需求文档 - 已修改确认版",
|
||||
"filePath": ".spec-workflow/specs/merchant-account-permission/requirements.md",
|
||||
"type": "document",
|
||||
"status": "pending",
|
||||
"createdAt": "2025-09-06T05:55:41.783Z",
|
||||
"category": "spec",
|
||||
"categoryName": "merchant-account-permission"
|
||||
}
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
# 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. 大数据量权限树渲染测试
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
# Requirements Document
|
||||
|
||||
## Introduction
|
||||
|
||||
为商家端创建一个账号分配权限的前端页面，提供简洁直观的界面让商家管理员能够为账号分配权限。页面采用与平台端权限分配相似的UI设计，确保用户体验的一致性。
|
||||
|
||||
## Alignment with Product Vision
|
||||
|
||||
此功能支持商户管理平台的"简洁易用"愿景，通过统一的界面设计和交互体验，让商家能够高效地完成账号权限分配，避免复杂的学习成本。
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement 1: 页面结构与样式
|
||||
|
||||
**User Story:** 作为前端开发人员，我想要创建一个与平台端权限分配页面风格一致的商家端权限分配页面，确保用户体验的连续性。
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN 用户访问商家端权限分配页面 THEN 系统 SHALL 显示具有渐变头部banner的全屏容器
|
||||
2. IF 屏幕尺寸 <= 768px THEN 系统 SHALL 自动应用响应式布局适配移动设备
|
||||
3. WHEN 页面加载完成时 THEN 系统 SHALL 应用参考文件中定义的颜色方案(#2c3e50, #3498db等)
|
||||
4. IF 用户点击重置按钮 THEN 系统 SHALL 清空所有表单输入和权限选择
|
||||
|
||||
### Requirement 2: 账号创建区域布局
|
||||
|
||||
**User Story:** 作为商家管理员，我想要通过表单创建新账号并指定其身份类型，以便为不同类型的用户分配相应权限。
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN 进入账号创建区域 THEN 系统 SHALL 显示创建账号身份下拉框（替代原菜市场选择）
|
||||
2. IF 身份下拉框获得焦点 THEN 系统 SHALL 显示可选身份：子经营者、商户
|
||||
3. WHEN 用户选择身份后 THEN 系统 SHALL 显示对应权限建议（如需要）
|
||||
4. IF 手机号输入框输入非数字字符 THEN 系统 SHALL 自动过滤并只允许输入数字
|
||||
|
||||
### Requirement 3: 权限分配树形结构
|
||||
|
||||
**User Story:** 作为商家管理员，我想要通过树形结构查看和分配权限，确保能够精确控制每个账号的功能访问范围。
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN 显示权限分配区域 THEN 系统 SHALL 渲染层次化的权限树结构
|
||||
2. IF 父权限被选中 THEN 系统 SHALL 自动选中所有子权限
|
||||
3. WHEN 子权限被取消时 THEN 系统 SHALL 检查是否需要取消父权限（无其他选中子项时）
|
||||
4. IF 点击权限复选框或标签 THEN 系统 SHALL 切换该权限的选中状态
|
||||
|
||||
### Requirement 4: 文件位置与集成
|
||||
|
||||
**User Story:** 作为系统集成人员，我想要将前端文件放置在标准的权限管理目录下，确保项目结构的一致性和可维护性。
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN 创建前端文件时 THEN 系统 SHALL 将文件保存到"1 权限管理"文件夹下
|
||||
2. IF 文件夹不存在 THEN 系统 SHALL 提示创建相应目录结构
|
||||
3. WHEN 文件命名时 THEN 系统 SHALL 建议使用描述性文件名如"账号权限分配.html"
|
||||
4. IF 页面需要后端API集成 THEN 系统 SHALL 提供API接口调用的示例代码
|
||||
|
||||
## Non-Functional Requirements
|
||||
|
||||
### Code Architecture and Modularity
|
||||
- **Single Responsibility Principle**: 样式定义、数据结构、业务逻辑、DOM操作应分离到独立区域
|
||||
- **Modular Design**: 权限树渲染和交互逻辑应封装为可复用函数
|
||||
- **Dependency Management**: JavaScript代码应使用原生API，避免引入外部依赖
|
||||
- **Clear Interfaces**: 表单验证、数据收集、API调用应定义清晰的函数接口
|
||||
|
||||
### Performance
|
||||
- 页面加载时间 < 2秒（本地文件加载）
|
||||
- 权限树渲染时间 < 500ms（50个权限节点以内）
|
||||
- 表单验证响应时间 < 100ms
|
||||
- 支持同时处理不超过20个并发用户操作
|
||||
|
||||
### Security
|
||||
- 前端验证仅作为用户体验优化，后端必须进行最终验证
|
||||
- 所有用户输入必须进行基本的XSS防护处理
|
||||
- 敏感操作需要在后端记录操作日志
|
||||
- 手机号等个人信息应在前端进行脱敏显示
|
||||
|
||||
### Usability
|
||||
- 页面布局应遵循无障碍设计原则
|
||||
- 所有交互元素需具备清晰的可点击区域
|
||||
- 颜色对比度符合WCAG 2.1 AA标准
|
||||
- 移动端触摸目标尺寸不低于44x44像素
|
||||
|
||||
### Browser Compatibility
|
||||
- 支持Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
|
||||
- 在IE11上保持基本功能可用性（降级处理）
|
||||
- CSS Grid和Flexbox用于布局，提供老浏览器降级方案
|
||||
Loading…
Reference in New Issue