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逻辑
├── js/                     # 页面功能模块目录
│   ├── level-settings.js      # 等级设置页面功能
│   └── member-view.js          # 会员查看页面功能(待创建)
├── pages/                  # 页面内容目录
│   ├── level-settings.html    # 等级设置页面
│   └── member-view.html       # 会员查看页面
└── CLAUDE.md               # 项目文档
```

### 架构特点
1. **内容与逻辑分离**: 所有页面内容存储为独立HTML文件
2. **模块化JavaScript**: 每个页面的功能逻辑独立存储在对应的JS文件中
3. **动态加载**: 使用fetch API异步加载页面内容和对应的JavaScript模块
4. **智能初始化**: 自动检测并加载页面对应的JavaScript文件，调用初始化函数
5. **Tab管理**: 支持多页面同时打开，可独立关闭
6. **菜单系统**: 二级菜单展开/收起，防重复打开

## 核心功能

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

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

### 页面加载机制
- **异步加载**: 使用`fetch`API动态加载HTML内容和JavaScript模块
- **自动检测**: 根据页面名称自动查找对应的JavaScript文件
- **智能缓存**: JavaScript模块避免重复加载，提高性能
- **初始化调用**: 自动调用页面对应的初始化函数
- **错误处理**: 包含完整的加载失败降级方案

## 开发约束和规范

### 重要约束 ⚠️
1. **禁止硬编码HTML**: 所有页面内容必须存储在独立的HTML文件中
2. **模块化JavaScript**: 每个页面的JavaScript功能必须独立存储在对应的JS文件中
3. **优先编辑现有文件**: 禁止随意创建新文件，优先修改现有文件
4. **保持架构一致性**: 新页面必须遵循现有的加载和展示模式
5. **中文本地化**: 所有界面文本必须使用中文
6. **避免内联脚本**: 页面HTML中不应包含大段JavaScript代码

### JavaScript模块化规范
```javascript
// 页面JavaScript文件结构示例：js/page-name.js

/**
 * 页面功能模块
 * 包含该页面的所有交互逻辑
 */

// 页面初始化函数（必需）
function initPageName() {
    console.log('页面已初始化'); 
    // 页面特定的初始化逻辑
    setupEventListeners();
}

// 页面功能函数
function someFunction() {
    // 功能实现
}

// 将需要在HTML中调用的函数暴露到全局作用域
window.someFunction = someFunction;

// 页面清理函数（可选）
function cleanupPageName() {
    // 清理事件监听器等
}
```

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

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

### 文件命名规范
- 页面文件：`pages/功能名称.html` (使用kebab-case)
- JavaScript文件：`js/功能名称.js` (使用kebab-case，与页面文件名保持一致)
- 初始化函数：`init[功能名称CamelCase]()` (自动调用)
- contentType参数：与文件名保持一致
- Tab标题：使用中文友好名称

## 核心函数说明

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

### `loadPageContent(contentType)`
- **参数**: contentType(对应pages/目录下的文件名)
- **返回**: Promise<string> HTML内容
- **功能**: 异步加载页面HTML内容，并自动加载对应的JavaScript模块
- **错误处理**: 加载失败时返回默认提示内容

### `loadPageScript(contentType)`
- **参数**: contentType(对应js/目录下的文件名)
- **功能**: 动态加载页面对应的JavaScript文件
- **特性**: 避免重复加载，自动调用初始化函数
- **命名转换**: 自动将kebab-case转换为CamelCase调用初始化函数

### `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
   
   # 在js/目录创建对应JavaScript文件
   js/function-name.js
   ```

4. **JavaScript模块结构**:
   ```javascript
   // js/function-name.js
   function initFunctionName() {
       console.log('功能模块已初始化');
       // 初始化逻辑
   }
   
   function someFeature() {
       // 功能实现
   }
   
   // 暴露到全局作用域供HTML调用
   window.someFeature = someFeature;
   ```

### 页面内容模板
```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内容
- ❌ 不要在页面HTML中编写大段JavaScript代码
- ❌ 不要随意创建新文件，优先编辑现有文件
- ❌ 不要破坏现有的架构模式
- ❌ 不要跳过JavaScript模块的初始化函数
- ✅ 所有页面内容必须存储在pages/目录
- ✅ 所有页面功能必须存储在js/目录对应文件中
- ✅ 每个JavaScript模块必须包含初始化函数
- ✅ 使用中文界面文本
- ✅ 遵循现有的命名和结构约定

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

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

## JavaScript模块化架构优势

### 维护性
- **代码分离**: 每个页面的功能逻辑独立，便于维护和调试
- **模块清晰**: 避免全局script.js文件过于庞大
- **团队协作**: 不同开发者可以独立开发不同页面的功能

### 性能优化
- **按需加载**: 只有打开页面时才加载对应的JavaScript文件
- **避免重复**: 已加载的模块不会重复加载
- **内存管理**: 可以在页面关闭时进行资源清理

### 可扩展性
- **标准化流程**: 新增页面功能有明确的开发流程
- **自动化集成**: 新JavaScript模块会被系统自动检测和加载
- **灵活扩展**: 可以轻松为现有页面添加新功能