91 lines
4.3 KiB
Markdown
91 lines
4.3 KiB
Markdown
|
# 大数集市商户端 - DEMO项目文档
|
|||
|
|
|
|||
|
|
## 🚨 重要实现约束（大模型必读）
|
|||
|
|
|
|||
|
|
### DEMO项目核心原则
|
|||
|
|
1. **这是一个纯展示性DEMO项目** - 只需要实现UI展示和基础交互效果，无需真实数据处理
|
|||
|
|
2. **占位功能实现原则** - 所有功能只需要实现交互效果和UI反馈，不需要实现真实的数据联动和业务逻辑
|
|||
|
|
3. **视觉完整性优先** - 重点在于元素摆放位置准确、交互反馈完整，不强调样式美观性
|
|||
|
|
4. **前端纯静态实现** - 使用原生JavaScript实现，无后端交互，无真实数据存储
|
|||
|
|
|
|||
|
|
### 功能实现约束
|
|||
|
|
- **筛选功能**: 只需要实现UI交互（下拉框、选择、按钮点击），筛选结果可以是模拟的视觉反馈
|
|||
|
|
- **表单提交**: 只需要显示成功提示，无需真实提交数据
|
|||
|
|
- **数据展示**: 使用硬编码的模拟数据，无需动态数据加载
|
|||
|
|
- **状态管理**: 只需要维护页面内的UI状态，无需持久化存储
|
|||
|
|
|
|||
|
|
### 技术实现要求
|
|||
|
|
- 使用原生HTML/CSS/JavaScript，无外部框架依赖
|
|||
|
|
- 实现Tab系统的完整交互体验
|
|||
|
|
- 保持代码清晰简洁，便于理解和演示
|
|||
|
|
- 确保所有UI元素位置准确，符合设计要求
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
**这是一个DEMO项目，主要用于展示页面元素布局和交互功能，不强调样式美观性，重点在于元素摆放位置的准确性和功能完整性。**
|
|||
|
|
|
|||
|
|
这是一个中文商户后台管理系统的演示项目，采用了现代化的前端设计和Tab标签页架构。项目采用左中布局，左侧固定侧边栏，中央区域使用Tab系统展示会员管理功能。
|
|||
|
|
|
|||
|
|
## 项目架构说明
|
|||
|
|
|
|||
|
|
### 文件结构 (2025-07-30 最新更新)
|
|||
|
|
```
|
|||
|
|
chinese-merchant-dashboard/
|
|||
|
|
├── index.html # 主页面（导航入口）
|
|||
|
|
├── css/
|
|||
|
|
│ └── styles.css # 全局样式文件（包含Tab样式）
|
|||
|
|
├── js/
|
|||
|
|
│ ├── main.js # 主页面逻辑（简化版）
|
|||
|
|
│ ├── common.js # 通用工具函数和组件
|
|||
|
|
│ ├── sidebar.js # 侧边栏通用逻辑
|
|||
|
|
│ ├── member-tabs.js # 会员管理Tab系统核心逻辑
|
|||
|
|
│ └── pages/ # 页面专用JS文件目录
|
|||
|
|
│ ├── level-settings.js # 等级设置Tab页面逻辑
|
|||
|
|
│ ├── data-center.js # 数据中心页面逻辑
|
|||
|
|
│ └── coupon-marketing.js # 优惠券营销页面逻辑
|
|||
|
|
└── pages/
|
|||
|
|
├── data-center.html # 数据中心页面
|
|||
|
|
├── coupon-marketing.html # 优惠券营销工具管理页面
|
|||
|
|
└── member/ # 会员管理模块
|
|||
|
|
├── level-settings.html # 等级设置页面（Tab容器）
|
|||
|
|
├── level-detail.html # 等级详情页面（已弃用）
|
|||
|
|
└── level-edit.html # 等级编辑页面（已弃用）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 设计原则
|
|||
|
|
1. **功能展示优先**: 重点展示功能完整性而非视觉效果
|
|||
|
|
2. **元素位置准确**: 严格按照需求放置UI元素
|
|||
|
|
3. **Tab系统架构**: 会员管理采用Tab标签页，提升用户体验
|
|||
|
|
4. **演示友好**: 便于展示不同功能模块的交互效果
|
|||
|
|
|
|||
|
|
## 实现约束追加说明
|
|||
|
|
|
|||
|
|
### 项目实验性约束
|
|||
|
|
- **演示优先原则**: 所有功能仅作为交互和UI展示的占位实现
|
|||
|
|
- **极简主义设计**: 代码和功能追求最小必要实现
|
|||
|
|
- **可视化交互重点**: 重点关注用户交互流程和界面响应
|
|||
|
|
- **模拟数据填充**: 所有数据均为硬编码模拟数据，无真实业务逻辑
|
|||
|
|
|
|||
|
|
### 代码与功能约束
|
|||
|
|
- 所有JS交互仅模拟实际效果，不涉及真实数据处理
|
|||
|
|
- 表单提交、筛选功能均为本地模拟交互
|
|||
|
|
- 开关、弹窗等组件仅展示交互流程
|
|||
|
|
- 代码保持高可读性和最小依赖原则
|
|||
|
|
|
|||
|
|
### 功能模拟策略
|
|||
|
|
- UI交互全部通过JavaScript模拟实现
|
|||
|
|
- 数据展示使用静态、可预测的模拟数据
|
|||
|
|
- 表单验证仅展示交互流程，不进行实质性数据校验
|
|||
|
|
- 状态管理仅维持页面内临时状态
|
|||
|
|
|
|||
|
|
### 技术限制
|
|||
|
|
- 严格使用原生Web技术栈
|
|||
|
|
- 禁止引入任何外部框架和类库
|
|||
|
|
- 代码实现追求极简和直观
|
|||
|
|
- 所有功能通过原生JavaScript实现用户交互
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
*文档更新时间: 2025-07-30*
|
|||
|
|
*项目状态: 完成DEMO项目实现约束补充说明*
|
|||
|
|
*最新特性: 详细阐述项目的实验性约束和功能模拟策略*
|