110 lines
3.4 KiB
Markdown
110 lines
3.4 KiB
Markdown
|
# 大数集市商户端 Demo 项目
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
这是一个中文商户后台管理系统的原型demo项目，用于快速说明项目意图。项目采用纯HTML/CSS/JavaScript技术栈，分为web端和H5端两套界面，内部业务逻辑相近但页面呈现方式不同。
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
```
|
|||
|
|
chinese-merchant-dashboard/
|
|||
|
|
├── web/merchant/ # Web端 (桌面端)
|
|||
|
|
│ ├── index.html # 主页面
|
|||
|
|
│ ├── css/styles.css # Web端样式
|
|||
|
|
│ ├── js/ # Web端JavaScript
|
|||
|
|
│ │ ├── main.js # 主要逻辑
|
|||
|
|
│ │ ├── common.js # 公共函数
|
|||
|
|
│ │ ├── sidebar.js # 侧边栏逻辑
|
|||
|
|
│ │ ├── member-tabs.js # 会员标签页管理
|
|||
|
|
│ │ └── pages/ # 各页面逻辑
|
|||
|
|
│ ├── pages/ # Web端页面
|
|||
|
|
│ └── demo/ # 演示版本
|
|||
|
|
├── H5/merchant/ # H5端 (移动端)
|
|||
|
|
│ ├── index.html # H5主页面
|
|||
|
|
│ ├── css/mobile.css # H5样式
|
|||
|
|
│ ├── js/ # H5 JavaScript
|
|||
|
|
│ │ ├── mobile-common.js # H5公共函数
|
|||
|
|
│ │ └── pages/ # H5页面逻辑
|
|||
|
|
│ └── pages/ # H5页面
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 核心功能模块
|
|||
|
|
|
|||
|
|
### 会员管理系统
|
|||
|
|
- **等级设置**: 会员等级的创建、编辑和管理
|
|||
|
|
- **会员查看**: 会员信息的查看和筛选
|
|||
|
|
- **批量编辑**: 支持多步骤的批量会员信息编辑流程
|
|||
|
|
|
|||
|
|
### 积分系统
|
|||
|
|
- **积分任务**: 积分获取任务的配置和管理
|
|||
|
|
- **积分商品**: 积分兑换商品的管理
|
|||
|
|
- **积分订单**: 积分相关订单的处理
|
|||
|
|
|
|||
|
|
### 营销工具
|
|||
|
|
- **优惠券营销**: 优惠券的创建、发放和管理
|
|||
|
|
- **预售营销**: 预售活动的配置和管理
|
|||
|
|
|
|||
|
|
### 数据中心
|
|||
|
|
- **业务数据**: 各类业务数据的统计和展示
|
|||
|
|
- **运营分析**: 运营指标的分析和报表
|
|||
|
|
|
|||
|
|
## 技术特点
|
|||
|
|
|
|||
|
|
### Web端特性
|
|||
|
|
- 基于Tailwind CSS的响应式布局
|
|||
|
|
- 左侧折叠式菜单导航
|
|||
|
|
- Tab页面管理系统
|
|||
|
|
- 实时搜索功能
|
|||
|
|
- 开关切换和表单交互
|
|||
|
|
|
|||
|
|
### H5端特性
|
|||
|
|
- 移动端优化的触摸交互
|
|||
|
|
- 简化的导航结构
|
|||
|
|
- 分步骤的操作流程
|
|||
|
|
- 移动端适配的表单设计
|
|||
|
|
|
|||
|
|
### 共同特性
|
|||
|
|
- 纯前端静态页面，无后端依赖
|
|||
|
|
- 模拟数据展示完整业务流程
|
|||
|
|
- 统一的绿色主题设计
|
|||
|
|
- 中文本地化界面
|
|||
|
|
|
|||
|
|
## 开发指南
|
|||
|
|
|
|||
|
|
### 本地运行
|
|||
|
|
```bash
|
|||
|
|
# 推荐使用本地服务器
|
|||
|
|
python -m http.server 8000
|
|||
|
|
# 或
|
|||
|
|
npx serve .
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 文件编辑原则
|
|||
|
|
1. **优先编辑现有文件**，避免创建新文件
|
|||
|
|
2. **保持Web端和H5端功能同步**
|
|||
|
|
3. **遵循现有的命名规范和代码风格**
|
|||
|
|
4. **所有文本保持中文**
|
|||
|
|
|
|||
|
|
### 样式系统
|
|||
|
|
- Web端: 基于Tailwind CSS类名
|
|||
|
|
- H5端: 自定义CSS，针对移动端优化
|
|||
|
|
- 主题色: 绿色系 (#059669, #10b981)
|
|||
|
|
|
|||
|
|
### JavaScript架构
|
|||
|
|
- 使用原生JavaScript ES6+
|
|||
|
|
- 模块化的页面逻辑组织
|
|||
|
|
- 事件驱动的交互模式
|
|||
|
|
- 状态管理通过全局变量
|
|||
|
|
|
|||
|
|
## 测试和构建
|
|||
|
|
- 这是静态演示项目，无需构建步骤
|
|||
|
|
- 在浏览器中直接测试所有功能
|
|||
|
|
- 支持Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
1. 所有数据都是模拟数据，仅用于界面演示
|
|||
|
|
2. 不包含真实的后端API调用
|
|||
|
|
3. 表单提交和数据操作仅有视觉反馈
|
|||
|
|
4. 项目用于原型展示，不适合生产环境直接使用
|
|||
|
|
|
|||
|
|
## 快捷键
|
|||
|
|
- `ESC`: 返回首页 (Web端)
|
|||
|
|
- `Ctrl+F`: 聚焦搜索框 (Web端)
|