4.3 KiB

Raw Blame History

大数集市商户端 - DEMO项目文档

🚨 重要实现约束（大模型必读）

DEMO项目核心原则

这是一个纯展示性DEMO项目 - 只需要实现UI展示和基础交互效果，无需真实数据处理
占位功能实现原则 - 所有功能只需要实现交互效果和UI反馈，不需要实现真实的数据联动和业务逻辑
视觉完整性优先 - 重点在于元素摆放位置准确、交互反馈完整，不强调样式美观性
前端纯静态实现 - 使用原生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     # 等级编辑页面（已弃用）

设计原则

功能展示优先: 重点展示功能完整性而非视觉效果
元素位置准确: 严格按照需求放置UI元素
Tab系统架构: 会员管理采用Tab标签页，提升用户体验
演示友好: 便于展示不同功能模块的交互效果

实现约束追加说明

项目实验性约束

演示优先原则: 所有功能仅作为交互和UI展示的占位实现
极简主义设计: 代码和功能追求最小必要实现
可视化交互重点: 重点关注用户交互流程和界面响应
模拟数据填充: 所有数据均为硬编码模拟数据，无真实业务逻辑

代码与功能约束

所有JS交互仅模拟实际效果，不涉及真实数据处理
表单提交、筛选功能均为本地模拟交互
开关、弹窗等组件仅展示交互流程
代码保持高可读性和最小依赖原则

功能模拟策略

UI交互全部通过JavaScript模拟实现
数据展示使用静态、可预测的模拟数据
表单验证仅展示交互流程，不进行实质性数据校验
状态管理仅维持页面内临时状态

技术限制

严格使用原生Web技术栈
禁止引入任何外部框架和类库
代码实现追求极简和直观
所有功能通过原生JavaScript实现用户交互

文档更新时间: 2025-07-30 项目状态: 完成DEMO项目实现约束补充说明 最新特性: 详细阐述项目的实验性约束和功能模拟策略

4.3 KiB Raw Blame History Unescape Escape