dm-design/merchant

大数集市商户端 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. 直接打开

   # 在浏览器中打开
   open index.html
   # 或者
   double-click index.html
   

2. 本地服务器运行（推荐）

   # 使用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