9.4 KiB

Raw Blame History

信息管理系统原型项目

项目概述

这是一个传统的中文信息管理系统原型，采用纯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               # 项目文档

架构特点

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

核心功能

左侧菜单系统

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

中央Tab系统

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

页面加载机制

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

开发约束和规范

重要约束 ⚠️

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

JavaScript模块化规范

// 页面JavaScript文件结构示例：js/page-name.js

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

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

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

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

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

开发规范

// 添加新页面的步骤：
// 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 HTML内容
功能: 异步加载页面HTML内容，并自动加载对应的JavaScript模块
错误处理: 加载失败时返回默认提示内容

`loadPageScript(contentType)`

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

`toggleSubmenu(submenuId)`

参数: submenuId(子菜单DOM元素ID)
功能: 切换子菜单展开/收起状态
特性: 互斥展开(同时只能展开一个子菜单)

扩展指南

添加新的功能模块

创建一级菜单:

<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>

添加二级菜单项:

<div class="submenu-item" onclick="openTab('功能名称', 'function-name')">
    功能名称
</div>

创建页面内容和功能:

# 在pages/目录创建对应HTML文件
pages/function-name.html

# 在js/目录创建对应JavaScript文件
js/function-name.js

JavaScript模块结构:

// js/function-name.js
function initFunctionName() {
    console.log('功能模块已初始化');
    // 初始化逻辑
}

function someFeature() {
    // 功能实现
}

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

页面内容模板

<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

测试和部署

本地运行

# 推荐使用本地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模块会被系统自动检测和加载
灵活扩展: 可以轻松为现有页面添加新功能

9.4 KiB Raw Blame History Unescape Escape