# 大数集市商户端 Demo

这是一个纯HTML版本的中文商户后台管理系统演示项目，基于原始的Next.js项目转换而来。

## 项目结构

```
demo/
├── index.html          # 主页面文件
├── css/
│   └── styles.css      # 样式文件
├── js/
│   └── main.js         # JavaScript交互逻辑
├── images/             # 静态资源文件
│   ├── placeholder.svg
│   ├── placeholder.png
│   └── ...
└── README.md           # 说明文档
```

## 功能特性

### ✅ 已实现功能

1. **完整的页面布局**
   - 绿色主题的顶部导航栏
   - 左侧折叠式菜单
   - 右侧主内容区域

2. **交互功能**
   - 菜单展开/收起动画
   - 页面内容切换（如等级设置页面）
   - 开关按钮的切换效果
   - 搜索菜单功能

3. **响应式设计**
   - 支持桌面端和移动端布局
   - 自适应屏幕大小

4. **用户体验**
   - 平滑的动画过渡效果
   - 键盘快捷键支持（ESC回首页，Ctrl+F搜索）
   - 通知提示系统

### 🎯 主要页面

- **首页**: 默认欢迎页面
- **等级设置**: 会员等级管理表格，包含开关切换功能

### 🔧 菜单项

- 首页
- 运营管理（可展开）
- 数据中心
- 优惠券营销工具管理
- 预售营销工具管理
- 会员管理（可展开，包含等级设置等子菜单）
- 钱包管理（可展开）
- 运费管理（可展开）

## 使用方法

1. **直接打开**
   ```bash
   # 在浏览器中打开
   open index.html
   # 或者
   double-click index.html
   ```

2. **本地服务器运行**（推荐）
   ```bash
   # 使用Python
   python -m http.server 8000
   # 或使用Node.js
   npx serve .
   # 然后访问 http://localhost:8000
   ```

## 技术实现

- **HTML5**: 语义化标签结构
- **CSS3**: 基于Tailwind CSS的样式系统，包含自定义动画
- **JavaScript ES6+**: 原生JS实现所有交互功能
- **响应式设计**: 适配不同设备屏幕

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 快捷键

- `ESC`: 返回首页
- `Ctrl+F`: 聚焦搜索框

## 定制说明

如需修改样式或功能，可以编辑以下文件：
- `css/styles.css`: 修改样式
- `js/main.js`: 修改交互逻辑
- `index.html`: 修改页面结构

## 注意事项

1. 这是一个静态演示版本，所有数据都是模拟数据
2. 开关切换、按钮点击等操作只有视觉反馈，不会实际提交数据
3. 为了演示效果，保留了完整的交互逻辑和动画效果

## 原项目信息

- 原技术栈: Next.js + React + Tailwind CSS + shadcn/ui
- 转换时间: 2025年
- 转换方式: 手动转换为纯HTML/CSS/JS