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

6.1 KiB
Raw Blame History

信息管理系统原型项目

项目概述

这是一个传统的中文信息管理系统原型，采用纯HTML/CSS/JavaScript技术栈，实现左侧菜单栏 + 中央tab展示区域的经典布局。项目专注于演示系统架构和交互流程，不追求视觉美观。

核心架构

技术栈

  • 前端: 纯HTML5 + CSS3 + 原生JavaScript ES6+
  • 架构模式: 单页应用(SPA) + 动态内容加载
  • 样式系统: 自定义CSS，无外部框架依赖
  • 模块化: 页面内容与逻辑完全分离

文件结构

merchant/
├── index.html              # 主框架页面
├── styles.css              # 全局样式文件
├── script.js               # 核心JavaScript逻辑
├── pages/                  # 页面内容目录
│   ├── level-settings.html    # 等级设置页面
│   └── member-view.html       # 会员查看页面
└── CLAUDE.md               # 项目文档

架构特点

  1. 内容与逻辑分离: 所有页面内容存储为独立HTML文件
  2. 动态加载: 使用fetch API异步加载页面内容
  3. Tab管理: 支持多页面同时打开，可独立关闭
  4. 菜单系统: 二级菜单展开/收起，防重复打开

核心功能

左侧菜单系统

  • 一级菜单: 主功能模块入口
  • 二级菜单: 具体功能页面，点击展开/收起
  • 当前实现: 会员管理 > 等级设置、会员查看

中央Tab系统

  • 多页面管理: 支持同时打开多个页面tab
  • 防重复: 相同页面不会重复打开，直接激活已存在tab
  • 可关闭: 每个tab都有独立关闭按钮(首页除外)
  • 智能切换: 关闭当前tab时自动激活相邻tab

页面加载机制

  • 异步加载: 使用fetchAPI动态加载HTML内容
  • 错误处理: 包含完整的加载失败降级方案
  • 缓存管理: 每次点击都重新加载，保证内容最新

开发约束和规范

重要约束 ⚠️

  1. 禁止硬编码HTML: 所有页面内容必须存储在独立的HTML文件中
  2. 优先编辑现有文件: 禁止随意创建新文件，优先修改现有文件
  3. 保持架构一致性: 新页面必须遵循现有的加载和展示模式
  4. 中文本地化: 所有界面文本必须使用中文

开发规范

// 添加新页面的步骤：
// 1. 在pages/目录创建对应的HTML文件
// 2. 在HTML中添加新的菜单项，指向该页面
// 3. 确保contentType参数与文件名匹配

// 正确的调用方式：
onclick="openTab('新页面', 'new-page')"
// 对应文件：pages/new-page.html

文件命名规范

  • 页面文件：pages/功能名称.html (使用kebab-case)
  • contentType参数：与文件名保持一致
  • Tab标题：使用中文友好名称

核心函数说明

openTab(title, contentType)

  • 参数: title(中文标题), contentType(文件名前缀)
  • 功能: 创建新tab并异步加载页面内容
  • 特性: 防重复打开、错误处理、自动激活

loadPageContent(contentType)

  • 参数: contentType(对应pages/目录下的文件名)
  • 返回: Promise HTML内容
  • 错误处理: 加载失败时返回默认提示内容

toggleSubmenu(submenuId)

  • 参数: submenuId(子菜单DOM元素ID)
  • 功能: 切换子菜单展开/收起状态
  • 特性: 互斥展开(同时只能展开一个子菜单)

扩展指南

添加新的功能模块

  1. 创建一级菜单:

    <div class="menu-item">
    <div class="menu-title" onclick="toggleSubmenu('new-submenu')">
        <span>新功能模块</span>
        <span class="arrow">▼</span>
    </div>
    <div class="submenu" id="new-submenu">
        <!-- 二级菜单项 -->
    </div>
</div>

  2. 添加二级菜单项:

    <div class="submenu-item" onclick="openTab('功能名称', 'function-name')">
    功能名称
</div>

  3. 创建页面内容:

    # 在pages/目录创建对应HTML文件
pages/function-name.html

页面内容模板

<div class="page-content">
    <h2>页面标题</h2>
    
    <!-- 表单区域 -->
    <div class="form-group">
        <label>字段名称:</label>
        <input type="text" placeholder="请输入...">
    </div>
    
    <!-- 操作按钮 -->
    <button class="btn btn-primary">主要操作</button>
    <button class="btn">次要操作</button>
    
    <!-- 数据表格 -->
    <table class="table">
        <thead>
            <tr>
                <th>列标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据内容</td>
            </tr>
        </tbody>
    </table>
</div>

样式系统

CSS类命名规范

  • .page-content: 页面内容容器
  • .form-group: 表单字段组
  • .btn, .btn-primary: 按钮样式
  • .table: 数据表格
  • .menu-item, .submenu-item: 菜单项

主题色彩

  • 主色调：深蓝色 #2c3e50
  • 高亮色：蓝色 #3498db
  • 背景色：浅灰 #f5f5f5
  • 边框色：灰色 #bdc3c7

测试和部署

本地运行

# 推荐使用本地HTTP服务器(必需，因为使用了fetch API)
python -m http.server 8000
# 或
npx serve .
# 然后访问 http://localhost:8000

浏览器兼容性

  • Chrome 60+ (支持fetch API和ES6 async/await)
  • Firefox 55+
  • Safari 12+
  • Edge 79+

快捷键

  • ESC: 关闭当前激活的tab(首页除外)

注意事项

开发限制

  • ❌ 不要在JavaScript中硬编码HTML内容
  • ❌ 不要随意创建新文件，优先编辑现有文件
  • ❌ 不要破坏现有的架构模式
  • ✅ 所有页面内容必须存储在pages/目录
  • ✅ 使用中文界面文本
  • ✅ 遵循现有的命名和结构约定

技术限制

  • 必须运行在HTTP服务器环境(不支持file://协议)
  • 依赖现代浏览器的fetch API和ES6特性
  • 所有数据都是前端模拟，无后端API集成

项目目标

此项目是一个快速原型系统，用于演示传统管理系统的布局意图和交互流程。专注于功能架构而非视觉设计，为后续开发提供清晰的技术基础和扩展方向。