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
|