dm-design/new_web/merchant/CLAUDE.md

# 信息管理系统原型项目

## 🚨 核心开发约束（必须严格遵守）

### 文件分离原则
1. **HTML内容必须独立存储** - 所有页面内容存储在 `pages/` 目录的独立HTML文件中
2. **CSS样式必须独立存储** - 所有样式存储在 `css/` 目录的独立CSS文件中  
3. **JavaScript功能必须独立存储** - 所有页面功能存储在 `js/` 目录的独立JS文件中

### 严禁事项 ❌
- **禁止在JavaScript中硬编码HTML内容** - 任何HTML标记都不能出现在JS文件中
- **禁止在JavaScript中硬编码CSS样式** - 任何CSS样式都不能出现在JS文件中
- **禁止在HTML中编写大段JavaScript代码** - 仅允许简单的事件调用
- **禁止随意创建新文件** - 优先编辑现有文件，必须创建时需遵循规范
- **禁止破坏现有架构模式** - 必须遵循动态加载和模块化原则

### 必须遵循 ✅
- **所有页面内容存储在pages/目录**
- **所有页面样式存储在css/目录**  
- **所有页面功能存储在js/目录**
- **JavaScript仅处理逻辑，通过fetch加载HTML和CSS**
- **每个JavaScript模块必须包含初始化函数**
- **使用中文界面文本**
- **遵循文件命名和结构约定**

## 项目概述
这是一个传统的中文信息管理系统原型，采用纯HTML/CSS/JavaScript技术栈，实现左侧菜单栏 + 中央tab展示区域的经典布局。项目专注于演示系统架构和交互流程，严格遵循内容、样式、逻辑三分离原则。

## 文件结构规范

```
merchant/
├── index.html              # 主框架页面
├── styles.css              # 全局样式文件
├── script.js               # 核心JavaScript逻辑
├── css/                    # 专用样式目录
│   ├── coupon-modal.css       # 优惠券弹窗样式
│   └── ...                    # 其他专用样式
├── js/                     # 页面功能模块目录
│   ├── level-settings.js     # 等级设置页面功能
│   ├── level-edit.js         # 等级编辑页面功能
│   └── ...                   # 其他页面功能
├── pages/                  # 页面内容目录
│   ├── level-settings.html  # 等级设置页面
│   ├── coupon-modal.html    # 优惠券弹窗内容
│   └── ...                  # 其他页面内容
└── CLAUDE.md               # 项目文档
```

## 开发流程规范

### 1. 添加新功能的标准流程

#### Step 1: 创建HTML内容文件
```bash
# 在pages/目录创建页面内容
pages/feature-name.html
```

#### Step 2: 创建CSS样式文件（如需要）
```bash
# 在css/目录创建专用样式
css/feature-name.css
```

#### Step 3: 创建JavaScript功能文件
```bash
# 在js/目录创建功能逻辑
js/feature-name.js
```

#### Step 4: JavaScript模块标准结构
```javascript
// js/feature-name.js

/**
 * 功能模块名称
 * 功能描述
 */

// 页面初始化函数（必需）
function initFeatureName() {
    console.log('功能模块已初始化');
    // 如果需要CSS，动态加载
    loadFeatureCSS();
    // 其他初始化逻辑
}

// 加载专用CSS（如需要）
function loadFeatureCSS() {
    if (!document.getElementById('featureCSS')) {
        const link = document.createElement('link');
        link.id = 'featureCSS';
        link.rel = 'stylesheet';
        link.href = 'css/feature-name.css';
        document.head.appendChild(link);
    }
}

// 功能函数
function someFunction() {
    // 功能实现，仅处理逻辑
    // 需要HTML时使用fetch加载
}

// 暴露到全局作用域供HTML调用
window.someFunction = someFunction;

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

### 2. 动态内容加载规范

#### HTML内容加载
```javascript
// 正确的HTML加载方式
async function loadHTMLContent() {
    try {
        const response = await fetch('pages/content.html');
        const htmlContent = await response.text();
        document.getElementById('container').innerHTML = htmlContent;
    } catch (error) {
        console.error('加载失败:', error);
    }
}
```

#### CSS样式加载
```javascript
// 正确的CSS加载方式
function loadCSS(cssFile, id) {
    if (!document.getElementById(id)) {
        const link = document.createElement('link');
        link.id = id;
        link.rel = 'stylesheet';
        link.href = `css/${cssFile}`;
        document.head.appendChild(link);
    }
}
```

### 3. 文件命名规范
- **页面文件**: `pages/功能名称.html` (kebab-case)
- **样式文件**: `css/功能名称.css` (kebab-case)
- **脚本文件**: `js/功能名称.js` (kebab-case)
- **初始化函数**: `init[功能名称CamelCase]()` 
- **CSS ID**: `功能名称CSS` (CamelCase)

## 架构特点

### 三分离原则
1. **内容层(HTML)**: 存储页面结构和内容，不包含样式和逻辑
2. **表现层(CSS)**: 存储样式定义，不包含内容和逻辑
3. **逻辑层(JavaScript)**: 存储交互逻辑，通过API加载内容和样式

### 动态加载机制
- **按需加载**: 只有需要时才加载对应的HTML、CSS、JS
- **智能缓存**: 避免重复加载已加载的资源
- **错误处理**: 完整的加载失败降级方案
- **自动初始化**: 自动调用页面对应的初始化函数

### 模块化管理
- **独立开发**: 每个功能模块可独立开发和维护
- **标准接口**: 统一的初始化和清理函数接口
- **全局暴露**: 需要在HTML中调用的函数暴露到window对象

## 核心功能

### 左侧菜单系统
- 一级菜单：主功能模块入口
- 二级菜单：具体功能页面，支持展开/收起
- 互斥展开：同时只能展开一个子菜单

### 中央Tab系统
- 多页面管理：支持同时打开多个页面tab
- 防重复打开：相同页面直接激活已存在tab
- 智能关闭：关闭当前tab时自动激活相邻tab

## 开发示例

### 弹窗功能示例
以优惠券弹窗为例，展示标准的三分离开发模式：

1. **HTML内容** (`pages/coupon-modal.html`)
```html
<div id="couponModal" class="modal-overlay">
    <div class="modal-content">
        <!-- 弹窗内容结构 -->
    </div>
</div>
```

2. **CSS样式** (`css/coupon-modal.css`)
```css
.modal-overlay {
    /* 弹窗样式定义 */
}
```

3. **JavaScript逻辑** (`js/level-edit.js`)
```javascript
async function showCouponModal(level) {
    // 加载CSS
    loadCouponModalCSS();
    // 加载HTML
    const response = await fetch('pages/coupon-modal.html');
    const modalHtml = await response.text();
    document.body.insertAdjacentHTML('beforeend', modalHtml);
}
```

## 样式系统

### 全局样式
- `styles.css`: 基础框架样式
- 主题色彩：深蓝色主调，蓝色高亮

### 模块样式
- 每个功能模块可有独立的CSS文件
- 按需动态加载，避免样式冲突
- 使用有意义的CSS类名

## 技术要求

### 运行环境
```bash
# 必须使用HTTP服务器(fetch API要求)
python -m http.server 8000
# 或
npx serve .
```

### 浏览器兼容性
- Chrome 60+ (支持fetch API和ES6 async/await)
- Firefox 55+
- Safari 12+
- Edge 79+

## 项目目标
此项目是快速原型系统，用于演示传统管理系统的布局和交互流程。严格遵循内容、样式、逻辑分离原则，为团队协作和后续开发提供清晰的技术基础。

## 开发检查清单

在开发任何功能前，请确认：

- [ ] 是否创建了独立的HTML文件存储内容？
- [ ] 是否创建了独立的CSS文件存储样式？
- [ ] JavaScript中是否避免了硬编码HTML和CSS？
- [ ] 是否使用fetch API动态加载内容和样式？
- [ ] 是否包含了初始化函数？
- [ ] 是否将需要调用的函数暴露到全局作用域？
- [ ] 文件命名是否遵循kebab-case规范？
- [ ] 是否使用了中文界面文本？

**记住：内容、样式、逻辑三分离是本项目的核心原则，违反此原则的代码不被接受。**