294 lines
9.4 KiB
Markdown
294 lines
9.4 KiB
Markdown
# 信息管理系统原型项目
|
||
|
||
## 项目概述
|
||
这是一个传统的中文信息管理系统原型，采用纯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模块会被系统自动检测和加载
|
||
- **灵活扩展**: 可以轻松为现有页面添加新功能 |