Files

Yep_Q c579dae90a feat: 完成化工订单班图片处理和项目记忆重组

详细说明:
- 化工订单班图片已标准化处理（8个图片，文件名与alt text完全一致）
- 完成环保、财经商贸订单班的图片重命名工作
- 重组项目记忆文件，按照功能模块编号（00-09）
- 删除旧的分散记忆文件，统一到新的编号体系
- 添加终端模拟文件：chemical.ts, environmental.ts, finance.ts
- 清理web_result冗余文件（food react-app等）
- 新增playwright截图记录和记忆文档
- 影响模块：订单班文档资料、项目记忆系统、终端模拟系统

2025-10-04 00:34:44 +08:00

7.0 KiB

Raw Blame History

订单班网站设计规范 - 完整制作流程

一、设计体系架构

1. CSS变量系统（核心）

/* 基础设计变量 */
:root {
    /* 背景层次 */
    --bg-dark: #f8faf7;              /* 主背景 */
    --bg-semi-dark: rgba(248, 250, 247, 0.95);  /* 半透明背景 */
    --bg-overlay: rgba(255, 255, 255, 0.85);    /* 遮罩层 */
    --bg-card: rgba(255, 255, 255, 0.9);        /* 卡片背景 */
    
    /* 主题色彩 */
    --primary-dark: #2d7a3f;         /* 主色深 */
    --primary-green: #4caf50;        /* 主色 */
    --accent-gold: #ff9800;          /* 强调色 */
    --accent-gold-light: #ffa726;    /* 浅强调色 */
    
    /* 文字颜色 */
    --text-light: #1a1a1a;           /* 深色文字 */
    --text-gray: #666666;            /* 灰色文字 */
    
    /* 交互状态 */
    --hover-bg: rgba(255, 152, 0, 0.15);     /* 悬停背景 */
    --active-bg: rgba(76, 175, 80, 0.2);     /* 激活背景 */
}

2. 深色主题设计（重点）

body.dark-theme {
    /* 深邃森林绿配色方案 */
    --bg-dark: #0a1a0f;                      /* 深邃森林绿背景 */
    --bg-semi-dark: rgba(10, 26, 15, 0.95);  /* 深绿半透明 */
    --bg-overlay: rgba(13, 31, 19, 0.85);    /* 深绿遮罩层 */
    --bg-card: rgba(18, 35, 24, 0.9);        /* 深绿卡片背景 */
    
    /* 调整后的主题色 */
    --primary-green: #4a9d5f;                /* 翡翠绿 */
    --accent-gold: #d4a574;                  /* 暖棕金色 */
    --text-light: #e8f5e9;                   /* 浅绿白色文字 */
    --text-gray: #a4c3a8;                    /* 绿灰色文字 */
}

3. 响应式间距系统

--spacing-xs: 0.75rem;    /* 12px */
--spacing-sm: 1.25rem;    /* 20px */
--spacing-md: 2rem;       /* 32px */
--spacing-lg: 3rem;       /* 48px */
--spacing-xl: 4rem;       /* 64px */
--spacing-2xl: 6rem;      /* 96px */

二、关键技术实现

1. 背景图片系统

多图片独立配置方案：

/* 亮色主题 - 顶部微透，底部完全遮挡 */
.section:nth-child(1) {
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 247, 1) 100%),
        url('图片1');
}

/* 深色主题 - 深绿遮罩 */
body.dark-theme .section:nth-child(1) {
    background-image:
        linear-gradient(to bottom, rgba(10, 26, 15, 0.92) 0%, rgba(13, 31, 19, 0.88) 100%),
        url('图片1');
}

关键参数：

亮色遮罩：0.9 → 1（顶部略透，底部不透）
深色遮罩：0.92 → 0.88（高透明度深绿）
图片数量：前6个section独立，超出后循环

2. 主题切换实现

// 默认暗色主题
function initThemeToggle() {
    const savedTheme = localStorage.getItem('theme');
    // 无保存偏好时默认暗色
    if (savedTheme === 'dark' || savedTheme === null) {
        document.body.classList.add('dark-theme');
    }
}

3. 避免硬编码颜色

错误示范：

background: rgba(255, 255, 255, 0.8); /* 硬编码白色 */

正确做法：

background: var(--bg-card); /* 使用CSS变量 */

三、完整制作流程

Phase 1: 环境准备

确认项目路径结构
检查现有HTML结构
备份原始样式文件

Phase 2: 设计系统搭建

建立CSS变量体系
- 定义亮色主题变量
- 定义深色主题变量
- 添加hover/active状态变量
设置默认主题
- 修改JS初始化逻辑
- 设置localStorage默认值

Phase 3: 样式迁移

查找所有硬编码颜色

grep -n "rgba(255, 255, 255" styles.css
grep -n "rgba(76, 175, 80" styles.css

批量替换为CSS变量
- rgba(255, 255, 255, 0.9) → var(--bg-card)
- rgba(255, 255, 255, 0.95) → var(--bg-semi-dark)
- rgba(255, 255, 255, 0.7) → var(--bg-overlay)

添加深色主题特定覆盖

body.dark-theme .stat-item { ... }
body.dark-theme th { ... }
body.dark-theme tr:hover { ... }

Phase 4: 背景优化

配置多背景图片
- 每个section独立图片
- 设置合理的遮罩透明度
- 保持fixed attachment
调整遮罩平衡
- 亮色：0.9 → 1 渐变
- 深色：0.88-0.92 深绿遮罩

Phase 5: 细节完善

修复hover跳动
- 添加transparent初始border
- 使用box-shadow增强效果
优化视觉层次
- 标题渐变条宽度（80px → 180px）
- 调整阴影系统
- 完善过渡动画

Phase 6: 测试验证

切换主题测试
检查所有交互状态
验证响应式布局
确认背景图片显示

四、常见问题解决

问题1: 深色主题部分元素仍显示白色

原因： 硬编码rgba颜色值 解决： 全局搜索并替换为CSS变量

问题2: Hover时元素跳动

原因： 初始无border，hover时添加border 解决： 初始设置transparent border

问题3: 背景图片不可见

原因： 遮罩层透明度过高 解决： 调整gradient透明度值

问题4: 深色主题不是默认

原因： JS逻辑仅检查'dark'值 解决： 添加 || savedTheme === null 条件

五、可复用组件模板

1. 带背景的Section

.section:nth-child(n) {
    background-image:
        linear-gradient(渐变方向, 起始色, 结束色),
        url('背景图片');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

2. 响应式卡片

.card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-2xl);
    border: 2px solid var(--border-light);
    transition: all var(--transition-base);
}

3. 统计数据组件

.stat-item {
    background: var(--bg-card);
    border: 1px solid transparent;
    transition: all var(--transition-base);
}
.stat-item:hover {
    background: var(--hover-bg);
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}

六、命名规范

CSS类名

容器：.section, .container, .wrapper
组件：.card, .stat-item, .nav-item
状态：.active, .dark-theme, .loaded

CSS变量

背景：--bg-*
颜色：--primary-*, --accent-*
文字：--text-*
间距：--spacing-*
其他：--shadow-*, --radius-*, --transition-*

七、性能优化建议

图片优化
- 使用Unsplash的优化参数（w=1920&q=80）
- fixed attachment提升视觉效果
CSS优化
- 使用CSS变量减少重复
- backdrop-filter谨慎使用（性能消耗）
JS优化
- localStorage缓存用户偏好
- 主题切换避免重排

八、适配其他订单班的要点

颜色主题调整
- 根据行业特点选择主色调
- 保持深色主题的深度感
图片选择
- 选择与行业相关的背景图
- 保持图片风格一致性
内容结构
- 保持统一的section划分
- 复用组件结构

此规范可作为制作其他订单班网站的标准模板。

7.0 KiB Raw Blame History Unescape Escape