Agent-n8n/.serena/memories/订单班快速制作检查清单.md

订单班网站快速制作检查清单

🚀 快速启动（10分钟）

第一步：定位文件

/web_frontend/web_result/order-classes/[订单班名称]/
├── css/styles.css       # 主样式文件
├── js/main.js          # 主逻辑文件
└── index.html          # 页面文件

第二步：关键修改点

1. CSS变量定义 (styles.css: 4-73行)

   • 亮色主题变量
   • 深色主题变量（74-95行）

2. 主题切换逻辑 (main.js: 249-276行)

   • 默认主题设置

3. 背景图片配置 (styles.css: 287-432行)

   • 6个独立背景图

✅ 必改清单

1. 颜色主题

• 根据行业调整主色调

  • 食品：绿色 #4caf50
  • 科技：蓝色 #2196f3
  • 金融：金色 #ff9800
  • 医疗：青色 #00acc1

• 深色主题基色

  • 食品：深绿 #0a1a0f
  • 科技：深蓝 #0a0f1a
  • 金融：深棕 #1a0f0a
  • 医疗：深青 #0a1a1a

2. 背景图片

• 替换6张行业相关图片
  • Hero区域：1张
  • Section 1-6：各1张
  • 使用Unsplash链接格式

3. 硬编码颜色替换

# 搜索命令
grep -n "rgba(255, 255, 255" styles.css
grep -n "rgba(76, 175, 80" styles.css
grep -n "#[0-9a-fA-F]" styles.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)

4. 交互状态变量

• 添加 --hover-bg 变量
• 添加 --active-bg 变量
• 所有hover使用变量

5. 深色主题覆盖

/* 必须添加的深色主题覆盖 */
body.dark-theme .stat-item { }
body.dark-theme .stat-item:hover { }
body.dark-theme th { }
body.dark-theme tr:hover { }
body.dark-theme .featured-item:first-child { }

6. 默认主题设置

// main.js 修改
if (savedTheme === 'dark' || savedTheme === null) {
    document.body.classList.add('dark-theme');
}

7. 遮罩透明度

• 亮色：linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(248,250,247,1) 100%)
• 深色：linear-gradient(to bottom, rgba(10,26,15,0.92) 0%, rgba(13,31,19,0.88) 100%)

🔍 验证清单

功能测试

• 主题切换正常
• localStorage记忆
• 默认显示深色主题
• 背景图片可见
• Hover无跳动

视觉检查

• 深色主题所有元素变深
• 文字对比度足够
• 背景图片遮罩适度
• 渐变条宽度(180px)
• 卡片glassmorphism效果

响应式测试

• 移动端布局
• 平板布局
• 大屏适配

⚡ 快速命令

批量替换CSS变量

// 在控制台执行
const replacements = [
  ['rgba(255, 255, 255, 0.9)', 'var(--bg-card)'],
  ['rgba(255, 255, 255, 0.95)', 'var(--bg-semi-dark)'],
  ['rgba(255, 255, 255, 0.8)', 'var(--bg-card)'],
  ['rgba(255, 255, 255, 0.7)', 'var(--bg-overlay)'],
  ['rgba(255, 255, 255, 0.5)', 'var(--bg-overlay)'],
  ['rgba(76, 175, 80, 0.15)', 'var(--active-bg)'],
  ['rgba(76, 175, 80, 0.1)', 'var(--active-bg)'],
  ['rgba(76, 175, 80, 0.08)', 'var(--hover-bg)']
];

🎨 配色方案模板

科技订单班

--primary-dark: #1565c0;
--primary-blue: #2196f3;
--accent-cyan: #00acc1;
/* 深色 */
--bg-dark: #0a0f1a;

金融订单班

--primary-dark: #f57c00;
--primary-gold: #ff9800;
--accent-amber: #ffc107;
/* 深色 */
--bg-dark: #1a0f0a;

医疗订单班

--primary-dark: #00838f;
--primary-cyan: #00acc1;
--accent-teal: #26a69a;
/* 深色 */
--bg-dark: #0a1a1a;

📋 常用代码片段

1. Section背景模板

.section:nth-child(n) {
    background-image:
        linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(248,250,247,1) 100%),
        url('https://images.unsplash.com/photo-xxxxx?w=1920&q=80');
}

2. 深色主题覆盖模板

body.dark-theme .element {
    background: rgba(18, 35, 24, 0.8);
    backdrop-filter: blur(5px);
}

3. Hover防跳动模板

.element {
    border: 1px solid transparent;
    transition: all var(--transition-base);
}
.element:hover {
    border-color: var(--border-light);
}

🚨 常见错误避免

1. ❌ 不要硬编码颜色值
2. ❌ 不要忘记深色主题覆盖
3. ❌ 不要遗漏transparent border
4. ❌ 不要使用过高透明度遮罩（>0.95）
5. ❌ 不要忘记设置默认主题

💡 优化建议

1. 使用CSS变量管理所有颜色
2. 图片使用w=1920&q=80参数
3. backdrop-filter适度使用
4. 保持fixed attachment
5. 使用localStorage缓存偏好

---

制作时间预估：

• 基础迁移：30分钟
• 主题调整：20分钟
• 测试优化：10分钟
• 总计：约1小时