258 lines
7.8 KiB
Markdown
258 lines
7.8 KiB
Markdown
# 信息管理系统原型项目
|
||
|
||
## 🚨 核心开发约束（必须严格遵守）
|
||
|
||
### 文件分离原则
|
||
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规范？
|
||
- [ ] 是否使用了中文界面文本？
|
||
|
||
**记住：内容、样式、逻辑三分离是本项目的核心原则，违反此原则的代码不被接受。** |