116 lines
2.7 KiB
Markdown
116 lines
2.7 KiB
Markdown
# 大数集市商户端 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 |