7.8 KiB

Raw Blame History

信息管理系统原型项目

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

文件分离原则

HTML内容必须独立存储 - 所有页面内容存储在 pages/ 目录的独立HTML文件中
CSS样式必须独立存储 - 所有样式存储在 css/ 目录的独立CSS文件中
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内容文件

# 在pages/目录创建页面内容
pages/feature-name.html

Step 2: 创建CSS样式文件（如需要）

# 在css/目录创建专用样式
css/feature-name.css

Step 3: 创建JavaScript功能文件

# 在js/目录创建功能逻辑
js/feature-name.js

Step 4: 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内容加载

// 正确的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样式加载

// 正确的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)

架构特点

三分离原则

内容层(HTML): 存储页面结构和内容，不包含样式和逻辑
表现层(CSS): 存储样式定义，不包含内容和逻辑
逻辑层(JavaScript): 存储交互逻辑，通过API加载内容和样式

动态加载机制

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

模块化管理

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

核心功能

左侧菜单系统

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

中央Tab系统

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

开发示例

弹窗功能示例

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

HTML内容 (pages/coupon-modal.html)

<div id="couponModal" class="modal-overlay">
    <div class="modal-content">
        <!-- 弹窗内容结构 -->
    </div>
</div>

CSS样式 (css/coupon-modal.css)

.modal-overlay {
    /* 弹窗样式定义 */
}

JavaScript逻辑 (js/level-edit.js)

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

技术要求

运行环境

# 必须使用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规范？
是否使用了中文界面文本？

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

7.8 KiB Raw Blame History Unescape Escape