# 大数集市商户端 - 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项目实现约束补充说明* *最新特性: 详细阐述项目的实验性约束和功能模拟策略*