dm-design/CLAUDE.md

大数集市商户端 Demo 项目

项目概述

这是一个中文商户后台管理系统的原型demo项目，用于快速说明项目意图。项目采用纯HTML/CSS/JavaScript技术栈，分为web端和H5端两套界面，内部业务逻辑相近但页面呈现方式不同。

项目结构

chinese-merchant-dashboard/
├── web/merchant/           # Web端 (桌面端)
│   ├── index.html         # 主页面
│   ├── css/styles.css     # Web端样式
│   ├── js/                # Web端JavaScript
│   │   ├── main.js        # 主要逻辑
│   │   ├── common.js      # 公共函数
│   │   ├── sidebar.js     # 侧边栏逻辑
│   │   ├── member-tabs.js # 会员标签页管理
│   │   └── pages/         # 各页面逻辑
│   ├── pages/             # Web端页面
│   └── demo/              # 演示版本
├── H5/merchant/           # H5端 (移动端)
│   ├── index.html         # H5主页面
│   ├── css/mobile.css     # H5样式
│   ├── js/                # H5 JavaScript
│   │   ├── mobile-common.js # H5公共函数
│   │   └── pages/         # H5页面逻辑
│   └── pages/             # H5页面

核心功能模块

会员管理系统

• 等级设置: 会员等级的创建、编辑和管理
• 会员查看: 会员信息的查看和筛选
• 批量编辑: 支持多步骤的批量会员信息编辑流程

积分系统

• 积分任务: 积分获取任务的配置和管理
• 积分商品: 积分兑换商品的管理
• 积分订单: 积分相关订单的处理

营销工具

• 优惠券营销: 优惠券的创建、发放和管理
• 预售营销: 预售活动的配置和管理

数据中心

• 业务数据: 各类业务数据的统计和展示
• 运营分析: 运营指标的分析和报表

技术特点

Web端特性

• 基于Tailwind CSS的响应式布局
• 左侧折叠式菜单导航
• Tab页面管理系统
• 实时搜索功能
• 开关切换和表单交互

H5端特性

• 移动端优化的触摸交互
• 简化的导航结构
• 分步骤的操作流程
• 移动端适配的表单设计

共同特性

• 纯前端静态页面，无后端依赖
• 模拟数据展示完整业务流程
• 统一的绿色主题设计
• 中文本地化界面

开发指南

本地运行

# 推荐使用本地服务器
python -m http.server 8000
# 或
npx serve .

文件编辑原则

1. 优先编辑现有文件，避免创建新文件
2. 保持Web端和H5端功能同步
3. 遵循现有的命名规范和代码风格
4. 所有文本保持中文

样式系统

• Web端: 基于Tailwind CSS类名
• H5端: 自定义CSS，针对移动端优化
• 主题色: 绿色系 (#059669, #10b981)

JavaScript架构

• 使用原生JavaScript ES6+
• 模块化的页面逻辑组织
• 事件驱动的交互模式
• 状态管理通过全局变量

测试和构建

• 这是静态演示项目，无需构建步骤
• 在浏览器中直接测试所有功能
• 支持Chrome 60+, Firefox 55+, Safari 12+, Edge 79+

注意事项

1. 所有数据都是模拟数据，仅用于界面演示
2. 不包含真实的后端API调用
3. 表单提交和数据操作仅有视觉反馈
4. 项目用于原型展示，不适合生产环境直接使用

快捷键

• ESC: 返回首页 (Web端)
• Ctrl+F: 聚焦搜索框 (Web端)