# 大数集市商户端 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端)