dm-design/new_web/merchant/CLAUDE.md

# 信息管理系统原型项目

## 项目概述
这是一个传统的中文信息管理系统原型，采用纯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

### 页面加载机制
- **异步加载**: 使用`fetch`API动态加载HTML内容
- **错误处理**: 包含完整的加载失败降级方案
- **缓存管理**: 每次点击都重新加载，保证内容最新

## 开发约束和规范

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

### 开发规范
```javascript
// 添加新页面的步骤：
// 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<string> HTML内容
- **错误处理**: 加载失败时返回默认提示内容

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

## 扩展指南

### 添加新的功能模块
1. **创建一级菜单**:
   ```html
   <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. **添加二级菜单项**:
   ```html
   <div class="submenu-item" onclick="openTab('功能名称', 'function-name')">
       功能名称
   </div>
   ```

3. **创建页面内容**:
   ```bash
   # 在pages/目录创建对应HTML文件
   pages/function-name.html
   ```

### 页面内容模板
```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`

## 测试和部署

### 本地运行
```bash
# 推荐使用本地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集成

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