203 lines
6.1 KiB
Markdown
203 lines
6.1 KiB
Markdown
# 信息管理系统原型项目
|
||
|
||
## 项目概述
|
||
这是一个传统的中文信息管理系统原型，采用纯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集成
|
||
|
||
## 项目目标
|
||
此项目是一个快速原型系统，用于演示传统管理系统的布局意图和交互流程。专注于功能架构而非视觉设计，为后续开发提供清晰的技术基础和扩展方向。 |