linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dm-design/merchant/demo/README.md

2.7 KiB
Raw Blame History

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