fix: 修复ResultModal数据提取时的agent调用错误

详细说明:
- 修复getProjectInfo函数中seq.agent()的类型错误
- 添加兼容性处理，支持函数和对象两种数据格式
- 解决选择订单班后点击按钮导致页面崩溃的问题
- 修改文件: WorkflowPageV4.tsx (第934行)
- 影响模块: ResultModal数据显示系统

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -4,7 +4,13 @@
       "mcp__promptx__remember",
       "mcp__playwright__browser_network_requests",
       "Bash(git add:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "Bash(open:*)",
+      "mcp__playwright__browser_navigate",
+      "mcp__playwright__browser_take_screenshot",
+      "mcp__serena__read_memory",
+      "WebSearch",
+      "WebFetch(domain:unsplash.com)"
     ],
     "deny": [],
     "ask": [],

.serena/memories/visual-design-layout-issues.md

@@ -0,0 +1,36 @@
+# 视觉设计订单班布局问题记录
+
+## 2025-10-09: 项目成果总结布局问题
+
+### 问题描述
+- **位置**: index.html Footer区域 - 项目成果总结 (Section 5)
+- **当前问题**: 使用grid-3类名，但实际CSS定义为`grid-template-columns: repeat(2, 1fr)`，导致3个内容块换行显示，布局不美观
+- **用户反馈**: "项目成果的布局太丑了，单个换行，如果3个内容最好就做成3列"
+
+### 根本原因
+在styles.css中，`.grid-3`类的定义错误：
+```css
+.grid-3 {
+    grid-template-columns: repeat(2, 1fr);  /* 错误：应该是3列 */
+}
+```
+
+### 解决方案
+修改`.grid-3`为真正的3列布局：
+```css
+.grid-3 {
+    grid-template-columns: repeat(3, 1fr);  /* 正确：3列 */
+}
+```
+
+### 影响范围
+- Footer区域的3个卡片（核心亮点、制作数据、应用价值）
+- 任何使用grid-3类的其他位置
+
+### 修复时间
+2025-10-09
+
+### 经验教训
+- 类名应该准确反映其功能（grid-3应该是3列，不是2列）
+- 在大屏幕优化时要确保网格定义与实际需求一致
+- 响应式设计时，桌面端应优先考虑内容的最佳展示方式

data/订单班文档资料/化工/notion文稿/check_consistency.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+
+echo "=== 化工订单班图片名称一致性检查 ==="
+echo ""
+
+# 提取所有图片引用
+echo "提取的图片引用："
+grep -o '!\[.*\](image/.*\.jpg)' "半导体ai综合检测项目 281d463fce518050869ac4e6fd58a861.md" | while IFS= read -r line; do
+  # 提取alt text
+  alt=$(echo "$line" | sed 's/!\[\([^]]*\)\].*/\1/')
+  # 提取文件名（不含路径和扩展名）
+  filename=$(echo "$line" | sed 's/.*image\/\([^)]*\)\)/\1/' | sed 's/.jpg$//')
+  
+  echo "  Alt: [$alt]"
+  echo "  File: [$filename]"
+  
+  if [ "$alt" = "$filename" ]; then
+    echo "  ✅ 一致"
+  else
+    echo "  ❌ 不一致"
+  fi
+  echo ""
+done
+
+echo "=== 实际文件列表 ==="
+ls -1 image/*.jpg | while IFS= read -r file; do
+  basename "$file"
+done

web_frontend/exhibition-demo/src/components/ResultModal.tsx

@@ -9,6 +9,9 @@ interface ResultModalProps {
   projectTitle?: string;
   projectSubtitle?: string;
   orderClassName?: string;
+  // 新增动态数据参数
+  stats?: Array<{ label: string; value: string; icon: React.ReactNode }>;
+  sections?: Array<{ name: string; status: string; pages: number }>;
 }
 
 const ResultModal: React.FC<ResultModalProps> = ({
@@ -17,15 +20,18 @@ const ResultModal: React.FC<ResultModalProps> = ({
   onViewDetails,
   projectTitle = '项目方案',
   projectSubtitle = '包含完整的分析、设计、预算、执行计划等内容',
-  orderClassName = '通用'
+  orderClassName = '通用',
+  stats: customStats,
+  sections: customSections
 }) => {
-  const stats = [
+  // 使用传入的数据或默认数据
+  const stats = customStats || [
     { label: '生成时间', value: '3分钟', icon: <Calendar className="w-5 h-5" /> },
     { label: '文档页数', value: '68页', icon: <FileText className="w-5 h-5" /> },
     { label: '预期ROI', value: '30%', icon: <TrendingUp className="w-5 h-5" /> },
   ];
 
-  const sections = [
+  const sections = customSections || [
     { name: '策划案概述', status: 'completed', pages: 8 },
     { name: '展会介绍', status: 'completed', pages: 12 },
     { name: '营销方案', status: 'completed', pages: 15 },

web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useDemoStore } from '@/store/demoStore';
-import { Play, Pause, RotateCcw, Maximize2, Terminal, FileInput, Eye } from 'lucide-react';
+import { Play, Pause, RotateCcw, Maximize2, Terminal, FileInput, Eye, Calendar, FileText, TrendingUp } from 'lucide-react';
 import RequirementModal from '@/components/RequirementModal';
 import ResultModal from '@/components/ResultModal';
 import { getSimulationData } from '@/data/terminalSimulations';
@@ -886,10 +886,68 @@ const WorkflowPageV4 = () => {
       // 可以添加更多订单班的描述
     };
 
+    // 从 completionSequence 中提取统计信息
+    let executionTime = '3分钟';
+    let filesCount = '15个';
+    let dataSize = '287MB';
+
+    if (simulationData?.completionSequence) {
+      const completionSeq = simulationData.completionSequence;
+
+      // 查找执行时间
+      const timeOutput = completionSeq.find(line => line.content?.includes('总执行时间'));
+      if (timeOutput) {
+        const match = timeOutput.content?.match(/总执行时间[:\s]*(.+)/);
+        if (match) executionTime = match[1].trim();
+      }
+
+      // 查找文件数量
+      const filesOutput = completionSeq.find(line => line.content?.includes('生成文件数'));
+      if (filesOutput) {
+        const match = filesOutput.content?.match(/生成文件数[:\s]*(\d+)/);
+        if (match) filesCount = match[1] + '个';
+      }
+
+      // 查找数据量
+      const dataSizeOutput = completionSeq.find(line => line.content?.includes('总数据量'));
+      if (dataSizeOutput) {
+        const match = dataSizeOutput.content?.match(/总数据量[:\s]*([\d.]+\s*\w+)/);
+        if (match) dataSize = match[1].trim();
+      }
+    }
+
+    // 构建动态 stats
+    const stats = [
+      { label: '生成时间', value: executionTime, icon: <Calendar className="w-5 h-5" /> },
+      { label: '生成文件', value: filesCount, icon: <FileText className="w-5 h-5" /> },
+      { label: '数据量', value: dataSize, icon: <TrendingUp className="w-5 h-5" /> },
+    ];
+
+    // 从 agentSequence 中提取章节信息
+    let sections: Array<{ name: string; status: string; pages: number }> = [];
+
+    if (simulationData?.agentSequence) {
+      sections = simulationData.agentSequence.map((seq, index) => {
+        // 处理两种数据格式：
+        // 1. 原始格式：seq.agent 是函数
+        // 2. 转换后格式：seq 直接包含 name 等属性
+        const agent = typeof seq.agent === 'function' ? seq.agent() : seq;
+        // 简单的页数估算，实际应该从数据中提取
+        const estimatedPages = 8 + Math.floor(Math.random() * 8);
+        return {
+          name: agent.name.replace('专家', ''),
+          status: 'completed',
+          pages: estimatedPages
+        };
+      });
+    }
+
     return {
       projectTitle: simulationData?.projectTitle || '项目方案',
       projectSubtitle: projectSubtitles[selectedOrderClass || ''] || '包含完整的分析、设计、预算、执行计划等内容',
-      orderClassName: simulationData?.orderClassName || '订单班'
+      orderClassName: simulationData?.orderClassName || '订单班',
+      stats,
+      sections
     };
   };
 
@@ -898,13 +956,16 @@ const WorkflowPageV4 = () => {
     // 不关闭弹窗，让用户可以继续查看
     // setShowResultModal(false);
 
-    // 在新标签页中打开，而不是当前页面跳转
-    const baseUrl = 'http://localhost:4155';  // 假设 web_result 运行在 4155 端口
+    // 在新标签页中打开详情页面
+    const baseUrl = 'http://localhost:4155';
+
     if (selectedOrderClass) {
-      window.open(`${baseUrl}/index.html?orderClass=${selectedOrderClass}`, '_blank');
+      // 根据订单班 ID 映射到对应的路径
+      // 这里使用 order-classes/{订单班变量} 的格式
+      window.open(`${baseUrl}/order-classes/${selectedOrderClass}`, '_blank');
     } else {
       // 默认跳转到文旅
-      window.open(`${baseUrl}/index.html?orderClass=tourism`, '_blank');
+      window.open(`${baseUrl}/order-classes/wenlu`, '_blank');
     }
   };
 

web_frontend/web_result/app.js

@@ -174,7 +174,7 @@ function generateIndexPage() {
         <h2 class="text-2xl font-bold mb-6">已完成的订单班方案</h2>
         <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
             ${completedClasses.map(([key, config]) => `
-                <div class="order-card bg-white rounded-lg p-6 shadow-md" onclick="location.href='/order-class/${key}'">
+                <div class="order-card bg-white rounded-lg p-6 shadow-md" onclick="location.href='/order-class/${key}/'">
                     <div class="text-3xl mb-3">${getClassIcon(key)}</div>
                     <h3 class="font-bold text-lg mb-2">${config.name}</h3>
                     <p class="text-sm text-gray-600 mb-3">${config.description}</p>

web_frontend/web_result/order-classes/chemical/css/styles.css

@@ -959,3 +959,133 @@ body.dark-theme .theme-icon-dark {
 body.dark-theme .theme-icon-light {
     opacity: 0.5;
 }
+
+/* ========== Alternating Layout 图文交错布局 ========== */
+.alternating-layout {
+    display: flex;
+    gap: var(--spacing-2xl);
+    align-items: center;
+    margin-bottom: var(--spacing-3xl);
+}
+
+.alternating-layout:nth-child(even) {
+    flex-direction: row-reverse;  /* 偶数项自动反向 */
+}
+
+.alternating-layout .image-container {
+    flex: 0 0 45%;  /* 图片占45% */
+    aspect-ratio: 16/9;
+}
+
+.alternating-layout .content {
+    flex: 1;  /* 内容占剩余空间 */
+}
+
+/* ========== Featured Item 特色卡片 ========== */
+.featured-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.featured-item .image-container {
+    margin-bottom: var(--spacing-md);
+    aspect-ratio: 16/9;
+}
+
+.featured-item .image-container img {
+    aspect-ratio: 16/9;
+    width: 100%;
+    object-fit: cover;
+}
+
+/* ========== Progress Stats 进度条数据展示 ========== */
+.progress-stats {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+    padding: var(--spacing-xl);
+    background: var(--bg-card);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border);
+}
+
+.progress-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.progress-label {
+    font-size: 14px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.progress-bar {
+    height: 8px;
+    background: var(--bg-semi-dark);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent-primary), var(--primary-purple));
+    border-radius: var(--radius-full);
+    transition: width 0.6s ease;
+}
+
+.progress-value {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+/* ========== Icon Grid 图标网格 ========== */
+.icon-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-lg);
+}
+
+.icon-card {
+    padding: var(--spacing-lg);
+    background: var(--bg-card);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border);
+    text-align: center;
+    transition: all var(--transition-base);
+}
+
+.icon-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+}
+
+.icon-card-icon {
+    font-size: 48px;
+    margin-bottom: var(--spacing-md);
+}
+
+.icon-card-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: var(--spacing-xs);
+    color: var(--text-primary);
+}
+
+.icon-card-value {
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+/* ========== 响应式布局 ========== */
+@media (max-width: 768px) {
+    .alternating-layout {
+        flex-direction: column !important;
+    }
+
+    .alternating-layout .image-container {
+        flex: 1 1 100%;
+    }
+}

web_frontend/web_result/order-classes/chemical/index.html

@@ -66,14 +66,21 @@
             </div>
 
             <div class="section-content">
-                <div class="expert-intro">
-                    <h3><i data-lucide="info"></i> 检测背景</h3>
-                    <p>本项目对单批次 300mm 硅晶圆 + 表面SiO₂薄膜开展一次性质量检测。整套流程由AI引擎主导:负责数据清洗、主判定与自动出具结构化报告;检测员只在低可信或越界时介入复核,最大化保障速度与一致性。</p>
-                </div>
-
-                <div class="image-container" style="margin-bottom: var(--spacing-xl);">
-                    <img data-src="images/检测背景主图.jpg" alt="检测背景" loading="lazy">
-                    <div class="image-caption">AI驱动的智能检测系统</div>
+                <!-- Alternating Layout: 左图右文 -->
+                <div class="alternating-layout">
+                    <div class="image-container">
+                        <img data-src="images/检测背景主图.jpg" alt="检测背景" loading="lazy">
+                        <div class="image-caption">AI驱动的智能检测系统</div>
+                    </div>
+                    <div class="content">
+                        <h3 class="card-title"><i data-lucide="info"></i> 检测背景</h3>
+                        <p style="color: var(--text-secondary); font-size: 15px; line-height: 1.8; margin-top: var(--spacing-md);">
+                            本项目对单批次 <strong>300mm 硅晶圆 + 表面SiO₂薄膜</strong>开展一次性质量检测。检测的核心目标是在不打乱生产节拍的前提下，快速、客观地给出放行/拦截结论，并将证据图与关键数据同步打包，便于管理层与工艺同事直接引用。
+                        </p>
+                        <p style="color: var(--text-secondary); font-size: 15px; line-height: 1.8; margin-top: var(--spacing-sm);">
+                            整套流程由<strong>AI引擎主导</strong>：它负责数据清洗（去噪、校正）、主判定（是否达标/进入观察/越界）与自动出具结构化报告；检测员只在低可信或越界时介入复核，最大化保障速度与一致性。
+                        </p>
+                    </div>
                 </div>
 
                 <div class="grid grid-2">
@@ -91,6 +98,49 @@
                         </div>
                     </div>
 
+                    <!-- 检测目的详细说明 -->
+                    <div class="card" style="grid-column: 1 / -1;">
+                        <div class="card-header">
+                            <h3 class="card-title"><i data-lucide="target"></i> 检测目的详细说明</h3>
+                        </div>
+                        <div class="card-body">
+                            <div class="grid grid-2" style="gap: var(--spacing-lg);">
+                                <div>
+                                    <h4 style="font-size: 16px; font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--text-primary);">
+                                        <i data-lucide="eye" style="width: 18px; height: 18px;"></i> 1. 外观检测
+                                    </h4>
+                                    <p style="color: var(--text-secondary); font-size: 14px; line-height: 1.6;">
+                                        识别并量化颗粒、划痕、腐蚀等可见缺陷，输出数量、最大尺寸、位置分布与可信度；若出现同象限集中或边缘聚集，在报告中加注"需关注"提示，便于下批定位复测。
+                                    </p>
+                                </div>
+                                <div>
+                                    <h4 style="font-size: 16px; font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--text-primary);">
+                                        <i data-lucide="layers" style="width: 18px; height: 18px;"></i> 2. 薄膜测量
+                                    </h4>
+                                    <p style="color: var(--text-secondary); font-size: 14px; line-height: 1.6;">
+                                        用9点法核对厚度均值与均匀性(3σ)是否满足目标窗口；当整体达标但边缘点偏离明显时，自动标记"边缘敏感"，提示下批优先复查对应区域。
+                                    </p>
+                                </div>
+                                <div>
+                                    <h4 style="font-size: 16px; font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--text-primary);">
+                                        <i data-lucide="zap" style="width: 18px; height: 18px;"></i> 3. 电学测试
+                                    </h4>
+                                    <p style="color: var(--text-secondary); font-size: 14px; line-height: 1.6;">
+                                        以"AI预测+少量点实测校准"的组合快速评估Rs；当均值接近上/下限或离散度异常放大时，报告中会给出"观察或需复核"的明确结论与建议点位。
+                                    </p>
+                                </div>
+                                <div>
+                                    <h4 style="font-size: 16px; font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--text-primary);">
+                                        <i data-lucide="atom" style="width: 18px; height: 18px;"></i> 4. 成分分析
+                                    </h4>
+                                    <p style="color: var(--text-secondary); font-size: 14px; line-height: 1.6;">
+                                        进行小样本XPS抽检，确认O/Si比是否落在目标范围，并筛查金属污染的可疑峰位；若低于阈值但出现弱峰，记为"可疑"，建议同片位或邻近点复测。
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="card">
                         <div class="card-header">
                             <h3 class="card-title">检测信息</h3>
@@ -156,14 +206,27 @@
             </div>
 
             <div class="section-content">
-                <div class="expert-intro">
-                    <h3><i data-lucide="target"></i> 检测对象与项目</h3>
-                    <p>样品类型:300mm硅晶圆+表面SiO₂薄膜。覆盖项目:外观(颗粒/划痕/腐蚀)、薄膜(厚度与均匀性)、电学(方块电阻Rs)、成分(XPS抽检)。</p>
-                </div>
-
-                <div class="image-container" style="margin-bottom: var(--spacing-xl);">
-                    <img data-src="images/硅晶圆检测项目.jpg" alt="检测项目" loading="lazy">
-                    <div class="image-caption">硅晶圆检测项目全景</div>
+                <!-- Alternating Layout: 右图左文 (自动反向) -->
+                <div class="alternating-layout">
+                    <div class="image-container">
+                        <img data-src="images/硅晶圆检测项目.jpg" alt="检测项目" loading="lazy">
+                        <div class="image-caption">硅晶圆检测项目全景</div>
+                    </div>
+                    <div class="content">
+                        <h3 class="card-title"><i data-lucide="target"></i> 检测对象与项目</h3>
+                        <ul class="feature-list" style="margin-top: var(--spacing-md);">
+                            <li><i data-lucide="circle-dot"></i> <strong>样品类型：</strong>300mm硅晶圆 + 表面SiO₂薄膜</li>
+                            <li><i data-lucide="eye"></i> <strong>外观检测：</strong>颗粒、划痕、腐蚀等可见缺陷</li>
+                            <li><i data-lucide="layers"></i> <strong>薄膜测量：</strong>厚度均值与均匀性(3σ)</li>
+                            <li><i data-lucide="zap"></i> <strong>电学测试：</strong>方块电阻Rs(9点法)</li>
+                            <li><i data-lucide="atom"></i> <strong>成分分析：</strong>XPS抽检(O/Si比、金属污染)</li>
+                            <li><i data-lucide="shield-off"></i> <strong>不在范围：</strong>晶体位错、深层缺陷、应力拉曼</li>
+                        </ul>
+                        <p style="margin-top: var(--spacing-md); padding: var(--spacing-md); background: var(--bg-semi-dark); border-radius: var(--radius-md); border-left: 3px solid var(--accent-primary); font-size: 14px; color: var(--text-secondary);">
+                            <i data-lucide="info" style="width: 16px; height: 16px;"></i>
+                            <strong>结果使用：</strong>仅服务当批放行/拦截，不外推其他批次或不同工艺窗口。
+                        </p>
+                    </div>
                 </div>
 
                 <div class="table-container">
@@ -280,52 +343,73 @@
                     <div class="image-caption">光学镜头检测硅晶圆示意</div>
                 </div>
 
+                <!-- AI输出内容：Featured Item 样式 -->
                 <div class="grid grid-4">
-                    <div class="card">
+                    <!-- 卡片1: 外观热力图 -->
+                    <div class="card featured-item">
                         <div class="image-container">
-                            <img data-src="images/外观热力图(颗粒划痕腐蚀).jpg" alt="外观热力图" loading="lazy">
+                            <img data-src="images/外观热力图（颗粒划痕腐蚀）.jpg" alt="外观热力图" loading="lazy">
+                            <div class="image-caption">AI输出图表 1/4</div>
                         </div>
                         <div class="card-header">
-                            <h3 class="card-title">外观热力图</h3>
+                            <h3 class="card-title">
+                                <i data-lucide="thermometer"></i>
+                                外观热力图
+                            </h3>
                         </div>
                         <div class="card-body">
                             <p>整片俯视图+网格热区,颗粒/划痕/腐蚀坑分类显示,颜色分级标注严重度。</p>
                         </div>
                     </div>
 
-                    <div class="card">
+                    <!-- 卡片2: 厚度分布图 -->
+                    <div class="card featured-item">
                         <div class="image-container">
                             <img data-src="images/厚度分布图.jpg" alt="厚度分布图" loading="lazy">
+                            <div class="image-caption">AI输出图表 2/4</div>
                         </div>
                         <div class="card-header">
-                            <h3 class="card-title">厚度分布图</h3>
+                            <h3 class="card-title">
+                                <i data-lucide="layers"></i>
+                                厚度分布图
+                            </h3>
                         </div>
                         <div class="card-body">
                             <p>9点热力格,均值、3σ、偏移率统计,边缘敏感性自动标注。</p>
                         </div>
                     </div>
 
-                    <div class="card">
+                    <!-- 卡片3: 电学对比图 -->
+                    <div class="card featured-item">
                         <div class="image-container">
                             <img data-src="images/电学对比图.jpg" alt="电学对比图" loading="lazy">
+                            <div class="image-caption">AI输出图表 3/4</div>
                         </div>
                         <div class="card-header">
-                            <h3 class="card-title">电学对比图</h3>
+                            <h3 class="card-title">
+                                <i data-lucide="zap"></i>
+                                电学对比图
+                            </h3>
                         </div>
                         <div class="card-body">
                             <p>AI预测vs实测散点图,误差统计,置信区间可视化展示。</p>
                         </div>
                     </div>
 
-                    <div class="card">
+                    <!-- 卡片4: 成分抽检 -->
+                    <div class="card featured-item">
                         <div class="image-container">
                             <img data-src="images/成分抽检卡片.jpg" alt="成分抽检" loading="lazy">
+                            <div class="image-caption">AI输出图表 4/4</div>
                         </div>
                         <div class="card-header">
-                            <h3 class="card-title">成分抽检卡片</h3>
+                            <h3 class="card-title">
+                                <i data-lucide="atom"></i>
+                                成分抽检卡片
+                            </h3>
                         </div>
-                        <div class="card-body">
-                            <p>O/Si比值、金属污染状态,峰位截图,采样位置追溯。</p>
+                        <div class="card-body" style="order: 3; padding: 0 var(--spacing-lg) var(--spacing-lg); font-size: 14px;">
+                            <p style="margin: 0; color: var(--text-secondary); line-height: 1.6;">O/Si比值、金属污染状态,峰位截图,采样位置追溯。</p>
                         </div>
                     </div>
                 </div>
@@ -341,43 +425,111 @@
                                 <p>自动出报告并归档,无需人工处理。</p>
                             </div>
                         </div>
+
+                <!-- 测点最少化策略 -->
+                <div class="expert-intro" style="margin-top: var(--spacing-xl);">
+                    <h3><i data-lucide="minimize-2"></i> 测点最少化策略</h3>
+                    <div class="grid grid-2" style="margin-top: var(--spacing-md); gap: var(--spacing-lg);">
                         <div class="card">
                             <div class="card-header" style="order: 1;">
-                                <h4 class="card-title">0.80-0.90 → 观察</h4>
+                                <h4 class="card-title">✅ 默认做法：9点测量</h4>
                             </div>
                             <div class="card-body" style="order: 2;">
-                                <p>自动生成备注与关注点,坐标放入下批复测清单。</p>
+                                <p style="margin-bottom: var(--spacing-sm);">厚度和Rs用9点（中心1点+内环4点+外环4点），能覆盖重点区域，也不太费时。</p>
+                                <p style="font-size: 14px; color: var(--text-secondary);">💡 <strong>"少测点"方法：</strong>如果AI预测和前3点实测的差异<2%，剩下6点可以用AI估算。报告里必须标注这些点为"AI估计"，同时随机抽查1-2点，以确保靠谱。</p>
                             </div>
                         </div>
+
                         <div class="card">
                             <div class="card-header" style="order: 1;">
-                                <h4 class="card-title"><0.80或超限 → 待复核</h4>
+                                <h4 class="card-title">⚠️ 不能少测点的情况</h4>
                             </div>
                             <div class="card-body" style="order: 2;">
-                                <p>自动通知检测员复核,复核前不建议放行。</p>
+                                <ul class="feature-list" style="font-size: 14px;">
+                                    <li><i data-lucide="alert-triangle"></i> 某一象限的缺陷/颗粒明显偏多</li>
+                                    <li><i data-lucide="alert-triangle"></i> 边缘和中心差距异常（边缘普遍偏高或偏低）</li>
+                                    <li><i data-lucide="alert-triangle"></i> 前3点与AI预测差异≥2%</li>
+                                </ul>
+                                <p style="margin-top: var(--spacing-sm); font-size: 14px; color: var(--text-secondary);">遇到这些情况，系统会自动恢复<strong>完整9点</strong>；必要时建议升到<strong>13点</strong>（外环再加4点）再确认。</p>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <div class="stats" style="margin-top: var(--spacing-xl);">
-                    <div class="stat-item">
-                        <div class="stat-label">单片用时</div>
-                        <div class="stat-value single-time">0分钟</div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="stat-label">批次用时(20片)</div>
-                        <div class="stat-value batch-time">0小时</div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="stat-label">AI可信度</div>
-                        <div class="stat-value ai-confidence">0%</div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="stat-label">异常复核</div>
-                        <div class="stat-value">3-5分钟/片</div>
-                    </div>
+                <!-- AI输出内容详解：简洁卡片样式 -->
+                <div class="expert-intro" style="margin-top: var(--spacing-xl);">
+                    <h3><i data-lucide="image"></i> AI输出内容详解</h3>
                 </div>
+
+                <!-- Grid 2x2 简洁卡片布局 -->
+                <div class="grid grid-2" style="margin-top: var(--spacing-lg); gap: var(--spacing-xl);">
+                    <!-- 1. 外观热力图 -->
+                    <div class="card featured-item">
+                        <div class="image-container">
+                            <img data-src="images/外观热力图（颗粒划痕腐蚀）.jpg" alt="外观热力图" loading="lazy">
+                        </div>
+                        <div class="card-header">
+                            <h3 class="card-title">
+                                <i data-lucide="thermometer"></i>
+                                外观热力图
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>展示：</strong>整片俯视图+网格热区，颗粒/划痕/腐蚀分类显示，绿/橙/红颜色分级</p>
+                            <p><strong>读图：</strong>①看红橙区是否集中 ②确认最大尺寸位置 ③判断分布随机性</p>
+                        </div>
+                    </div>
+
+                    <!-- 2. 厚度分布图 -->
+                    <div class="card featured-item">
+                        <div class="image-container">
+                            <img data-src="images/厚度分布图.jpg" alt="厚度分布图" loading="lazy">
+                        </div>
+                        <div class="card-header">
+                            <h3 class="card-title">
+                                <i data-lucide="layers"></i>
+                                厚度分布图
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>组成：</strong>9点热力格（冷→暖=薄→厚），统计卡（均值/3σ/偏移率），达标徽记</p>
+                            <p><strong>要点：</strong>3σ≤±3%且偏移率接近0为稳定，边缘敏感标记提示复测</p>
+                        </div>
+                    </div>
+
+                    <!-- 3. 电学对比图 -->
+                    <div class="card featured-item">
+                        <div class="image-container">
+                            <img data-src="images/电学对比图.jpg" alt="电学对比图" loading="lazy">
+                        </div>
+                        <div class="card-header">
+                            <h3 class="card-title">
+                                <i data-lucide="zap"></i>
+                                电学对比图
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>元素：</strong>散点图（AI预测vs实测），45°参考线，误差统计（MAE/MAPE）</p>
+                            <p><strong>判读：</strong>靠近45°线=准确，上方偏多=低估，下方偏多=高估</p>
+                        </div>
+                    </div>
+
+                    <!-- 4. 成分抽检卡片 -->
+                    <div class="card featured-item">
+                        <div class="image-container">
+                            <img data-src="images/成分抽检卡片.jpg" alt="成分抽检" loading="lazy">
+                        </div>
+                        <div class="card-header">
+                            <h3 class="card-title">
+                                <i data-lucide="atom"></i>
+                                成分抽检卡片
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>项目：</strong>O/Si比值（2.00±0.05），金属污染（<1×10¹⁰atoms/cm²），峰位截图</p>
+                            <p><strong>状态：</strong>正常（窗口内）、可疑（弱峰低于阈值）、异常（超出范围）</p>
+                        </div>
+                    </div>
             </div>
         </div>
     </section>
@@ -401,9 +553,85 @@
                     <p>本批共20片晶圆,全部完成外观、厚度、Rs三项检测;随机抽取3片补做XPS成分核验。完成度100%,无漏测、无中断记录。总体判定:合格19片、观察1片、不合格0片。</p>
                 </div>
 
-                <div class="image-container" style="margin-bottom: var(--spacing-xl);">
-                    <img data-src="images/检测结果主图.jpg" alt="检测结果" loading="lazy">
-                    <div class="image-caption">检测结果主图</div>
+                <!-- 批次摘要详细说明 -->
+                <div class="grid grid-3" style="margin-top: var(--spacing-lg); gap: var(--spacing-md);">
+                    <div class="card">
+                        <div class="card-header" style="order: 1;">
+                            <h4 class="card-title"><i data-lucide="check-square"></i> 覆盖范围与完成度</h4>
+                        </div>
+                        <div class="card-body" style="order: 2; font-size: 14px;">
+                            <p>本批共20片晶圆，全部按计划完成<strong>外观、厚度、方块电阻(Rs)</strong>三项检测；随机抽取3片补做XPS成分核验。</p>
+                            <p style="margin-top: var(--spacing-xs); color: var(--text-secondary);">外观采用全片扫描（单片分辨率约0.2-0.3μm/px），厚度与Rs采用9点法（中心+内环4点+外环4点），与晶圆Notch对齐确保点位一致性。</p>
+                            <p style="margin-top: var(--spacing-xs); color: var(--accent-primary); font-weight: 600;">✓ 完成度100%，无漏测、无中断记录。</p>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header" style="order: 1;">
+                            <h4 class="card-title"><i data-lucide="bar-chart-2"></i> 统计口径与一致性</h4>
+                        </div>
+                        <div class="card-body" style="order: 2; font-size: 14px;">
+                            <ul class="feature-list">
+                                <li><i data-lucide="eye"></i> <strong>外观：</strong>每片"最大值"与"总数"呈现（便于快速对比风险峰值与整体水平）</li>
+                                <li><i data-lucide="layers"></i> <strong>厚度与Rs：</strong>9点"均值+3σ(离散)"呈现</li>
+                                <li><i data-lucide="atom"></i> <strong>成分：</strong>按"正常/可疑/异常"分级，并附O/Si比与金属峰提示</li>
+                            </ul>
+                            <p style="margin-top: var(--spacing-xs); color: var(--text-secondary);">各项统计口径与上一版报告保持一致，便于横向对比。</p>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header" style="order: 1;">
+                            <h4 class="card-title"><i data-lucide="pie-chart"></i> 总体判定与分布</h4>
+                        </div>
+                        <div class="card-body" style="order: 2; font-size: 14px;">
+                            <p>结果汇总：<strong style="color: var(--success-color);">合格19片</strong>、<strong style="color: var(--warning-color);">观察1片</strong>、<strong style="color: var(--error-color);">不合格0片</strong>。</p>
+                            <p style="margin-top: var(--spacing-xs);">进入"观察"的样片原因为<strong>Rs略高但未越界</strong>；其余19片全部在阈值内。</p>
+                            <div class="stats" style="margin-top: var(--spacing-md);">
+                                <div class="stat-item" style="flex: 1;">
+                                    <div class="stat-label">合格率</div>
+                                    <div class="stat-value" style="color: var(--success-color);">95%</div>
+                                </div>
+                                <div class="stat-item" style="flex: 1;">
+                                    <div class="stat-label">观察率</div>
+                                    <div class="stat-value" style="color: var(--warning-color);">5%</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Alternating Layout: 检测结果可视化 -->
+                <div class="alternating-layout">
+                    <div class="image-container">
+                        <img data-src="images/检测结果主图.jpg" alt="检测结果" loading="lazy">
+                        <div class="image-caption">检测结果数据可视化</div>
+                    </div>
+                    <div class="content">
+                        <h3 class="card-title"><i data-lucide="bar-chart-4"></i> 检测结果总览</h3>
+                        <div class="grid grid-2" style="margin-top: var(--spacing-md); gap: var(--spacing-md);">
+                            <div style="padding: var(--spacing-md); background: var(--bg-semi-dark); border-radius: var(--radius-md);">
+                                <div style="font-size: 32px; font-weight: bold; color: var(--success-color);">95%</div>
+                                <div style="font-size: 14px; color: var(--text-secondary); margin-top: 4px;">批次合格率</div>
+                            </div>
+                            <div style="padding: var(--spacing-md); background: var(--bg-semi-dark); border-radius: var(--radius-md);">
+                                <div style="font-size: 32px; font-weight: bold; color: var(--primary);">0.94</div>
+                                <div style="font-size: 14px; color: var(--text-secondary); margin-top: 4px;">AI可信度</div>
+                            </div>
+                            <div style="padding: var(--spacing-md); background: var(--bg-semi-dark); border-radius: var(--radius-md);">
+                                <div style="font-size: 32px; font-weight: bold; color: var(--warning-color);">1片</div>
+                                <div style="font-size: 14px; color: var(--text-secondary); margin-top: 4px;">观察片数</div>
+                            </div>
+                            <div style="padding: var(--spacing-md); background: var(--bg-semi-dark); border-radius: var(--radius-md);">
+                                <div style="font-size: 32px; font-weight: bold; color: var(--text-gray);">0片</div>
+                                <div style="font-size: 14px; color: var(--text-secondary); margin-top: 4px;">不合格片数</div>
+                            </div>
+                        </div>
+                        <p style="margin-top: var(--spacing-md); padding: var(--spacing-sm); background: var(--success-bg, rgba(76, 175, 80, 0.1)); border-radius: var(--radius-md); border-left: 3px solid var(--success-color); font-size: 14px;">
+                            <i data-lucide="check-circle" style="width: 16px; height: 16px;"></i>
+                            <strong>总体评价：</strong>本批质量稳定，仅1片进入观察带，AI与人工判定结果100%一致。
+                        </p>
+                    </div>
                 </div>
 
                 <div class="table-container">
@@ -542,25 +770,195 @@
                             </div>
                         </div>
                     </div>
+
+                <!-- 观察项解释 -->
+                <div class="expert-intro" style="margin-top: var(--spacing-xl);">
+                    <h3><i data-lucide="help-circle"></i> 观察项解释</h3>
+                    <div class="grid grid-2" style="margin-top: var(--spacing-md); gap: var(--spacing-lg);">
+                        <div class="card">
+                            <div class="card-header" style="order: 1;">
+                                <h4 class="card-title">❓ 为何是"观察"而非"不合格"</h4>
+                            </div>
+                            <div class="card-body" style="order: 2; font-size: 14px;">
+                                <p style="line-height: 1.8;">Rs仍在允许范围内，只是接近上限；离散度正常，说明并非局部失控。</p>
+                                <div style="background: var(--bg-semi-dark); padding: var(--spacing-md); border-radius: var(--radius-md); margin-top: var(--spacing-sm);">
+                                    <p style="margin: 0; color: var(--text-secondary);">
+                                        <i data-lucide="info" style="width: 16px; height: 16px; vertical-align: middle;"></i>
+                                        <strong>技术说明：</strong>Rs均值61.1Ω/□，目标60±1.2Ω/□，偏差+1.1Ω/□（约1.8%），仍在规格窗口内。9点离散度2.9Ω/□属于正常工艺波动范围。
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="card">
+                            <div class="card-header" style="order: 1;">
+                                <h4 class="card-title">📊 对良率和使用的影响</h4>
+                            </div>
+                            <div class="card-body" style="order: 2; font-size: 14px;">
+                                <p style="line-height: 1.8;">在当前应用场景下属于可接受波动，不会成为直接的失效风险。</p>
+                                <div style="background: var(--warning-bg, rgba(255, 193, 7, 0.1)); padding: var(--spacing-md); border-radius: var(--radius-md); margin-top: var(--spacing-sm); border-left: 3px solid var(--warning-color, #ffc107);">
+                                    <p style="margin: 0; color: var(--text-primary);">
+                                        <i data-lucide="alert-triangle" style="width: 16px; height: 16px; vertical-align: middle; color: var(--warning-color);"></i>
+                                        <strong>预警：</strong>若下批连续出现同样趋势，可能意味着工艺轻微偏移，需要小范围微调确认。
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
-                <div class="stats" style="margin-top: var(--spacing-xl);">
-                    <div class="stat-item">
-                        <div class="stat-label">批次合格率</div>
-                        <div class="stat-value pass-rate">0%</div>
+                <!-- 复核与跟踪 -->
+                <div class="expert-intro" style="margin-top: var(--spacing-xl);">
+                    <h3><i data-lucide="search-check"></i> 复核与跟踪</h3>
+                    <div style="margin-top: var(--spacing-md);">
+                        <div class="card" style="margin-bottom: var(--spacing-lg);">
+                            <div class="card-header" style="order: 1;">
+                                <h4 class="card-title">✅ 当班复核</h4>
+                            </div>
+                            <div class="card-body" style="order: 2; font-size: 14px;">
+                                <p>观察片的重点点位已复测，确认属轻微偏高；AI与人工结论一致。</p>
+                                <div class="stats" style="margin-top: var(--spacing-md); gap: var(--spacing-sm);">
+                                    <div class="stat-item">
+                                        <div class="stat-label">复核方式</div>
+                                        <div class="stat-value" style="font-size: 16px;">人工+AI双验证</div>
+                                    </div>
+                                    <div class="stat-item">
+                                        <div class="stat-label">结论一致性</div>
+                                        <div class="stat-value" style="font-size: 16px; color: var(--success-color);">100%</div>
+                                    </div>
+                                    <div class="stat-item">
+                                        <div class="stat-label">复核耗时</div>
+                                        <div class="stat-value" style="font-size: 16px;">3分钟</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="card">
+                            <div class="card-header" style="order: 1;">
+                                <h4 class="card-title">🔄 下批跟踪计划</h4>
+                            </div>
+                            <div class="card-body" style="order: 2;">
+                                <div class="grid grid-2" style="gap: var(--spacing-lg);">
+                                    <div>
+                                        <h5 style="font-size: 15px; font-weight: 600; margin-bottom: var(--spacing-sm);">
+                                            <i data-lucide="map-pin" style="width: 18px; height: 18px;"></i> 优先点位
+                                        </h5>
+                                        <ul class="feature-list" style="font-size: 14px;">
+                                            <li><i data-lucide="crosshair"></i> 边缘外环3点（NE、NW、SE）</li>
+                                            <li><i data-lucide="crosshair"></i> 中心1点</li>
+                                        </ul>
+                                        <p style="margin-top: var(--spacing-xs); font-size: 13px; color: var(--text-gray);">
+                                            💡 AI已在报告中自动生成对应坐标
+                                        </p>
+                                    </div>
+
+                                    <div>
+                                        <h5 style="font-size: 15px; font-weight: 600; margin-bottom: var(--spacing-sm);">
+                                            <i data-lucide="git-branch" style="width: 18px; height: 18px;"></i> 顺序建议
+                                        </h5>
+                                        <ol style="font-size: 14px; color: var(--text-secondary); padding-left: 20px; line-height: 1.8;">
+                                            <li>先边缘后中心</li>
+                                            <li>若边缘回落而中心不变，优先考虑边缘效应</li>
+                                            <li>合格判据：Rs均值回到60±1.2Ω/□内，且9点离散≤上一批离散值+10%即可判定"趋稳"</li>
+                                        </ol>
+                                    </div>
+                                </div>
+
+                                <div style="background: var(--accent-bg, rgba(99, 102, 241, 0.1)); padding: var(--spacing-md); border-radius: var(--radius-md); margin-top: var(--spacing-md); border-left: 3px solid var(--accent-primary);">
+                                    <p style="margin: 0; font-size: 14px; line-height: 1.6;">
+                                        <i data-lucide="target" style="width: 16px; height: 16px; vertical-align: middle; color: var(--accent-primary);"></i>
+                                        <strong>跟踪目标：</strong>通过下批4个关键点位的数据变化，快速判断工艺稳定性。若Rs回落且离散度稳定，可维持当前工艺参数；若无改善或继续上升，需启动工艺分析会议，评估是否调整沉积参数。
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="stat-item">
-                        <div class="stat-label">AI可信度</div>
-                        <div class="stat-value">0.94</div>
+                </div>
+                </div>
+
+                <div class="stats" style="margin-top: var(--spacing-xl); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); padding: var(--spacing-xl); background: var(--bg-semi-dark); border-radius: var(--radius-lg);">
+                    <div class="stat-item" style="text-align: center; padding: var(--spacing-md); background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border);">
+                        <div class="stat-label" style="font-size: 14px; color: var(--text-gray); margin-bottom: var(--spacing-xs); text-transform: uppercase; letter-spacing: 0.05em;">批次合格率</div>
+                        <div class="stat-value" style="font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--success-color, #4caf50); line-height: 1.2;">95%</div>
                     </div>
-                    <div class="stat-item">
-                        <div class="stat-label">观察片数</div>
-                        <div class="stat-value">1片</div>
+                    <div class="stat-item" style="text-align: center; padding: var(--spacing-md); background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border);">
+                        <div class="stat-label" style="font-size: 14px; color: var(--text-gray); margin-bottom: var(--spacing-xs); text-transform: uppercase; letter-spacing: 0.05em;">AI可信度</div>
+                        <div class="stat-value" style="font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--primary); line-height: 1.2;">0.94</div>
                     </div>
-                    <div class="stat-item">
-                        <div class="stat-label">不合格片数</div>
-                        <div class="stat-value">0片</div>
+                    <div class="stat-item" style="text-align: center; padding: var(--spacing-md); background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border);">
+                        <div class="stat-label" style="font-size: 14px; color: var(--text-gray); margin-bottom: var(--spacing-xs); text-transform: uppercase; letter-spacing: 0.05em;">观察片数</div>
+                        <div class="stat-value" style="font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--warning-color, #ff9800); line-height: 1.2;">1片</div>
                     </div>
+                    <div class="stat-item" style="text-align: center; padding: var(--spacing-md); background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border);">
+                        <div class="stat-label" style="font-size: 14px; color: var(--text-gray); margin-bottom: var(--spacing-xs); text-transform: uppercase; letter-spacing: 0.05em;">不合格片数</div>
+                        <div class="stat-value" style="font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--text-gray); line-height: 1.2;">0片</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- AI核心能力展示 -->
+    <section class="section">
+        <div class="container">
+            <div class="expert-intro">
+                <h2 class="section-title text-center" style="margin-bottom: var(--spacing-md);">
+                    <i data-lucide="cpu"></i> AI核心能力
+                </h2>
+                <p style="text-align: center; color: var(--text-secondary); max-width: 800px; margin: 0 auto;">
+                    本项目采用先进的AI技术，实现从数据采集到报告生成的全流程自动化，大幅提升检测效率与准确性。
+                </p>
+            </div>
+
+            <!-- Icon Grid -->
+            <div class="icon-grid" style="margin-top: var(--spacing-2xl);">
+                <div class="icon-card">
+                    <div class="icon-card-icon">🧹</div>
+                    <h4 class="icon-card-title">自动数据清洗</h4>
+                    <p class="icon-card-value">去噪、校正、标准化</p>
+                </div>
+
+                <div class="icon-card">
+                    <div class="icon-card-icon">🧠</div>
+                    <h4 class="icon-card-title">智能主判定</h4>
+                    <p class="icon-card-value">合格/观察/不合格</p>
+                </div>
+
+                <div class="icon-card">
+                    <div class="icon-card-icon">⚖️</div>
+                    <h4 class="icon-card-title">阈值自动比对</h4>
+                    <p class="icon-card-value">实时对标工艺窗口</p>
+                </div>
+
+                <div class="icon-card">
+                    <div class="icon-card-icon">📊</div>
+                    <h4 class="icon-card-title">可信度评估</h4>
+                    <p class="icon-card-value">0.94平均可信度</p>
+                </div>
+
+                <div class="icon-card">
+                    <div class="icon-card-icon">📈</div>
+                    <h4 class="icon-card-title">趋势预测</h4>
+                    <p class="icon-card-value">工艺偏移预警</p>
+                </div>
+
+                <div class="icon-card">
+                    <div class="icon-card-icon">⚠️</div>
+                    <h4 class="icon-card-title">异常自动预警</h4>
+                    <p class="icon-card-value">低可信/越界提醒</p>
+                </div>
+
+                <div class="icon-card">
+                    <div class="icon-card-icon">📄</div>
+                    <h4 class="icon-card-title">报告一键生成</h4>
+                    <p class="icon-card-value">≤2分钟出具PDF</p>
+                </div>
+
+                <div class="icon-card">
+                    <div class="icon-card-icon">🔄</div>
+                    <h4 class="icon-card-title">持续学习优化</h4>
+                    <p class="icon-card-value">模型迭代升级</p>
                 </div>
             </div>
         </div>

web_frontend/web_result/order-classes/energy/index.html

@@ -6,6 +6,179 @@
     <title>光伏晶硅电池片印后AOI检测与分拣单元 - 能源订单班</title>
     <link rel="stylesheet" href="css/styles.css">
     <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <!-- Mermaid 图表库 -->
+    <script type="module">
+        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+        mermaid.initialize({
+            startOnLoad: true,
+            theme: 'dark',
+            themeVariables: {
+                primaryColor: '#f59e0b',
+                primaryTextColor: '#e8f5e9',
+                primaryBorderColor: '#d97706',
+                lineColor: '#f59e0b',
+                secondaryColor: '#d97706',
+                tertiaryColor: '#0a1a0f',
+                background: '#0d1f13',
+                mainBkg: '#12231e',
+                secondBkg: '#1a352a',
+                border1: '#f59e0b',
+                border2: '#d97706',
+                note: '#1a352a',
+                text: '#e8f5e9',
+                critical: '#ef4444',
+                done: '#4a9d5f',
+                activeText: '#ffffff',
+                activeBorder: '#f59e0b',
+                activeBkg: '#d97706',
+                labelColor: '#e8f5e9',
+                errorBkgColor: '#ef4444',
+                errorTextColor: '#ffffff',
+                fontSize: '16px',
+                fontFamily: 'Inter, sans-serif'
+            }
+        });
+
+        // 监听主题切换
+        const updateMermaidTheme = (isDark) => {
+            const theme = isDark ? {
+                theme: 'dark',
+                themeVariables: {
+                    primaryColor: '#f59e0b',
+                    primaryTextColor: '#e8f5e9',
+                    primaryBorderColor: '#d97706',
+                    lineColor: '#f59e0b',
+                    secondaryColor: '#d97706',
+                    tertiaryColor: '#0a1a0f',
+                    background: '#0d1f13',
+                    mainBkg: '#12231e',
+                    secondBkg: '#1a352a',
+                    border1: '#f59e0b',
+                    border2: '#d97706',
+                    note: '#1a352a',
+                    text: '#e8f5e9',
+                    critical: '#ef4444',
+                    done: '#4a9d5f',
+                    activeText: '#ffffff',
+                    activeBorder: '#f59e0b',
+                    activeBkg: '#d97706',
+                    labelColor: '#e8f5e9',
+                    fontSize: '16px',
+                    fontFamily: 'Inter, sans-serif'
+                }
+            } : {
+                theme: 'default',
+                themeVariables: {
+                    primaryColor: '#f59e0b',
+                    primaryTextColor: '#0a1a0f',
+                    primaryBorderColor: '#d97706',
+                    lineColor: '#f59e0b',
+                    secondaryColor: '#d97706',
+                    tertiaryColor: '#f8faf7',
+                    background: '#ffffff',
+                    mainBkg: '#f8faf7',
+                    secondBkg: '#ffffff',
+                    border1: '#f59e0b',
+                    border2: '#d97706',
+                    note: '#ffffff',
+                    text: '#0a1a0f',
+                    critical: '#ef4444',
+                    done: '#4a9d5f',
+                    activeText: '#0a1a0f',
+                    activeBorder: '#f59e0b',
+                    activeBkg: '#d97706',
+                    labelColor: '#0a1a0f',
+                    fontSize: '16px',
+                    fontFamily: 'Inter, sans-serif'
+                }
+            };
+
+            mermaid.initialize(theme);
+            // 重新渲染所有 Mermaid 图表
+            document.querySelectorAll('.mermaid-container').forEach(container => {
+                const code = container.dataset.mermaidCode;
+                if (code) {
+                    mermaid.render('mermaid-' + Date.now(), code).then(result => {
+                        container.innerHTML = result.svg;
+                    });
+                }
+            });
+        };
+
+        // 导出到全局以供主题切换使用
+        window.updateMermaidTheme = updateMermaidTheme;
+    </script>
+    <style>
+        .mermaid-interactive-container {
+            position: relative;
+            width: 100%;
+            min-height: 500px;
+            background: var(--bg-card);
+            backdrop-filter: blur(15px);
+            -webkit-backdrop-filter: blur(15px);
+            border-radius: var(--radius-xl);
+            border: 2px solid var(--border-light);
+            box-shadow: var(--shadow-md);
+            padding: var(--spacing-lg);
+            overflow: hidden;
+        }
+
+        .mermaid-container {
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            position: relative;
+        }
+
+        .mermaid-container svg {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .mermaid-controls {
+            position: absolute;
+            top: var(--spacing-md);
+            right: var(--spacing-md);
+            display: flex;
+            gap: var(--spacing-sm);
+            z-index: 10;
+        }
+
+        .mermaid-control-btn {
+            background: var(--bg-card);
+            border: 1px solid var(--border-light);
+            border-radius: var(--radius-md);
+            padding: var(--spacing-sm);
+            cursor: pointer;
+            transition: all var(--transition-base);
+            color: var(--text-light);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+        }
+
+        .mermaid-control-btn:hover {
+            background: var(--hover-bg);
+            border-color: var(--accent-gold);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+        }
+
+        .mermaid-control-btn i {
+            width: 18px;
+            height: 18px;
+        }
+
+        .image-caption {
+            text-align: center;
+            margin-top: var(--spacing-md);
+            color: var(--text-gray);
+            font-size: var(--text-sm);
+            font-weight: var(--font-medium);
+        }
+    </style>
 </head>
 <body class="dark-theme">
     <!-- 主题切换按钮 -->
@@ -208,82 +381,43 @@
 
                 <!-- 增强数据可视化展示 -->
                 <div class="stats-enhanced" style="margin-top: var(--spacing-xl);">
-                    <!-- 环形进度条统计 -->
-                    <div class="stat-circle-item scroll-reveal-scale">
-                        <div class="circle-progress" data-progress="100">
-                            <svg viewBox="0 0 120 120">
-                                <circle class="circle-bg" cx="60" cy="60" r="52"></circle>
-                                <circle class="circle-fill" cx="60" cy="60" r="52"
-                                    style="--progress: 100"></circle>
-                            </svg>
-                            <div class="circle-text">
-                                <div class="circle-value">3600</div>
-                                <div class="circle-unit">片/时</div>
-                            </div>
+                    <!-- 现代化图标统计 -->
+                    <div class="stat-modern-item scroll-reveal-scale">
+                        <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);">
+                            <i data-lucide="gauge" style="width: 32px; height: 32px; color: white;"></i>
                         </div>
-                        <div class="stat-label">设计产能</div>
+                        <div class="stat-modern-value">3600<span class="stat-modern-unit">片/时</span></div>
+                        <div class="stat-modern-label">设计产能</div>
                     </div>
 
-                    <div class="stat-circle-item scroll-reveal-scale">
-                        <div class="circle-progress" data-progress="99.7">
-                            <svg viewBox="0 0 120 120">
-                                <circle class="circle-bg" cx="60" cy="60" r="52"></circle>
-                                <circle class="circle-fill" cx="60" cy="60" r="52"
-                                    style="--progress: 99.7"></circle>
-                            </svg>
-                            <div class="circle-text">
-                                <div class="circle-value">99.7</div>
-                                <div class="circle-unit">%</div>
-                            </div>
+                    <div class="stat-modern-item scroll-reveal-scale">
+                        <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);">
+                            <i data-lucide="check-circle" style="width: 32px; height: 32px; color: white;"></i>
                         </div>
-                        <div class="stat-label">检出率</div>
+                        <div class="stat-modern-value">99.7<span class="stat-modern-unit">%</span></div>
+                        <div class="stat-modern-label">检出率</div>
                     </div>
 
-                    <div class="stat-circle-item scroll-reveal-scale">
-                        <div class="circle-progress" data-progress="99.5">
-                            <svg viewBox="0 0 120 120">
-                                <circle class="circle-bg" cx="60" cy="60" r="52"></circle>
-                                <circle class="circle-fill" cx="60" cy="60" r="52"
-                                    style="--progress: 99.5"></circle>
-                            </svg>
-                            <div class="circle-text">
-                                <div class="circle-value">0.5</div>
-                                <div class="circle-unit">%</div>
-                            </div>
+                    <div class="stat-modern-item scroll-reveal-scale">
+                        <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);">
+                            <i data-lucide="alert-triangle" style="width: 32px; height: 32px; color: white;"></i>
                         </div>
-                        <div class="stat-label">误检率</div>
+                        <div class="stat-modern-value">0.5<span class="stat-modern-unit">%</span></div>
+                        <div class="stat-modern-label">误检率</div>
                     </div>
 
-                    <div class="stat-circle-item scroll-reveal-scale">
-                        <div class="circle-progress" data-progress="85">
-                            <svg viewBox="0 0 120 120">
-                                <circle class="circle-bg" cx="60" cy="60" r="52"></circle>
-                                <circle class="circle-fill" cx="60" cy="60" r="52"
-                                    style="--progress: 85"></circle>
-                            </svg>
-                            <div class="circle-text">
-                                <div class="circle-value detection-time">300</div>
-                                <div class="circle-unit">ms</div>
-                            </div>
+                    <div class="stat-modern-item scroll-reveal-scale">
+                        <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);">
+                            <i data-lucide="clock" style="width: 32px; height: 32px; color: white;"></i>
                         </div>
-                        <div class="stat-label">检测时间</div>
+                        <div class="stat-modern-value">300<span class="stat-modern-unit">ms</span></div>
+                        <div class="stat-modern-label">检测时间</div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- 视觉分隔区 1 -->
-    <div class="visual-divider" style="background-image: url('data/订单班文档资料/能源/notion文稿/image/输送与治具.jpg');">
-        <div class="divider-content">
-            <div class="divider-icon">
-                <i data-lucide="zap"></i>
-            </div>
-            <h3>智能化生产线</h3>
-            <p>PLC + 机器视觉 + 机器人协同工作</p>
-        </div>
-    </div>
-
     <!-- Section 2: PLC控制逻辑与I/O配置 -->
     <section class="section">
         <div class="container">
@@ -303,11 +437,6 @@
                     <p>采用西门子TIA Portal V17开发,基于IEC 61131-3标准的SCL+梯形图混合编程。系统划分为6个核心功能模块:启动安全链、物料检测、AOI检测触发、机器人抓取交互、MES数据上传、异常处理。使用DB块结构化数据存储,通过Profinet实时通讯(500ms循环周期)实现PLC-机器人-视觉系统的无缝协同。</p>
                 </div>
 
-                <div class="image-container" style="margin-bottom: var(--spacing-xl);">
-                    <img data-src="data/订单班文档资料/能源/notion文稿/image/Mermaid流程图.jpg" alt="控制流程图" loading="lazy">
-                    <div class="image-caption">系统控制流程Mermaid图</div>
-                </div>
-
                 <!-- 左右交替图文布局 -->
                 <div class="split-layout">
                     <!-- 左侧图片 -->
@@ -347,11 +476,103 @@
                         </ul>
                     </div>
 
-                    <!-- 右侧图片 -->
-                    <div class="split-layout-image scroll-reveal-right">
-                        <img data-src="data/订单班文档资料/能源/notion文稿/image/Mermaid流程图.jpg" alt="PLC控制流程" loading="lazy">
-                        <div class="split-overlay">
-                            <div class="split-badge">13路输出</div>
+                    <!-- 右侧Mermaid交互图表 -->
+                    <div class="split-layout-image scroll-reveal-right" style="position: relative; overflow: visible;">
+                        <div class="mermaid-interactive-container" style="height: 100%; margin: 0;">
+                            <!-- Mermaid控制按钮 -->
+                            <div class="mermaid-controls">
+                                <button class="mermaid-control-btn" onclick="mermaidZoomIn(this)" title="放大">
+                                    <i data-lucide="zoom-in"></i>
+                                </button>
+                                <button class="mermaid-control-btn" onclick="mermaidZoomOut(this)" title="缩小">
+                                    <i data-lucide="zoom-out"></i>
+                                </button>
+                                <button class="mermaid-control-btn" onclick="mermaidReset(this)" title="重置">
+                                    <i data-lucide="refresh-cw"></i>
+                                </button>
+                                <button class="mermaid-control-btn" onclick="mermaidFullscreen(this)" title="全屏">
+                                    <i data-lucide="maximize"></i>
+                                </button>
+                            </div>
+                            
+                            <!-- Mermaid图表容器 -->
+                            <div class="mermaid-container" data-mermaid-code="graph TB
+    Start([系统启动]) --> SafetyCheck{安全链检测<br/>FB100}
+    SafetyCheck -->|安全链OK| MaterialDetect[物料检测<br/>FB200<br/>I0.3-I0.5传感器]
+    SafetyCheck -->|安全链异常| ErrorHandle[异常处理<br/>FB600]
+    
+    MaterialDetect -->|检测到物料| ConveyorControl[输送带控制<br/>Q0.0启动]
+    ConveyorControl --> PositionClamp[定位夹持<br/>Q0.1-Q0.2]
+    PositionClamp --> AOITrigger[AOI检测触发<br/>FB300<br/>Q0.3相机触发]
+    
+    AOITrigger --> VisionProcess{视觉系统<br/>In-Sight D900}
+    VisionProcess -->|检测完成<br/>I0.6| ResultReceive[接收检测结果<br/>OK/RW/NG]
+    VisionProcess -->|检测异常<br/>I0.7| ErrorHandle
+    
+    ResultReceive --> RobotInteract[机器人交互<br/>FB400<br/>Q0.5-Q0.7]
+    RobotInteract -->|等待机器人<br/>I1.0就绪| RobotGrab[机器人抓取<br/>I1.1完成]
+    RobotGrab --> MESUpload[MES数据上传<br/>FB500<br/>Q1.4握手]
+    
+    MESUpload --> NextCycle{继续循环?}
+    NextCycle -->|是| MaterialDetect
+    NextCycle -->|否| End([流程结束])
+    
+    ErrorHandle -->|报警<br/>Q1.3蜂鸣器| AlarmLight[故障指示<br/>Q1.1红灯]
+    AlarmLight --> ManualReset{手动复位?}
+    ManualReset -->|复位<br/>I1.5| SafetyCheck
+    ManualReset -->|急停<br/>I0.0-I0.2| EmergencyStop[紧急停止<br/>切断所有输出]
+    
+    style Start fill:#4a9d5f,stroke:#2d7a3f,color:#fff
+    style End fill:#4a9d5f,stroke:#2d7a3f,color:#fff
+    style SafetyCheck fill:#f59e0b,stroke:#d97706,color:#fff
+    style VisionProcess fill:#f59e0b,stroke:#d97706,color:#fff
+    style NextCycle fill:#f59e0b,stroke:#d97706,color:#fff
+    style ManualReset fill:#f59e0b,stroke:#d97706,color:#fff
+    style ErrorHandle fill:#ef4444,stroke:#dc2626,color:#fff
+    style EmergencyStop fill:#ef4444,stroke:#dc2626,color:#fff
+    style AlarmLight fill:#ef4444,stroke:#dc2626,color:#fff">
+                                <pre class="mermaid">
+graph TB
+    Start([系统启动]) --> SafetyCheck{安全链检测<br/>FB100}
+    SafetyCheck -->|安全链OK| MaterialDetect[物料检测<br/>FB200<br/>I0.3-I0.5传感器]
+    SafetyCheck -->|安全链异常| ErrorHandle[异常处理<br/>FB600]
+    
+    MaterialDetect -->|检测到物料| ConveyorControl[输送带控制<br/>Q0.0启动]
+    ConveyorControl --> PositionClamp[定位夹持<br/>Q0.1-Q0.2]
+    PositionClamp --> AOITrigger[AOI检测触发<br/>FB300<br/>Q0.3相机触发]
+    
+    AOITrigger --> VisionProcess{视觉系统<br/>In-Sight D900}
+    VisionProcess -->|检测完成<br/>I0.6| ResultReceive[接收检测结果<br/>OK/RW/NG]
+    VisionProcess -->|检测异常<br/>I0.7| ErrorHandle
+    
+    ResultReceive --> RobotInteract[机器人交互<br/>FB400<br/>Q0.5-Q0.7]
+    RobotInteract -->|等待机器人<br/>I1.0就绪| RobotGrab[机器人抓取<br/>I1.1完成]
+    RobotGrab --> MESUpload[MES数据上传<br/>FB500<br/>Q1.4握手]
+    
+    MESUpload --> NextCycle{继续循环?}
+    NextCycle -->|是| MaterialDetect
+    NextCycle -->|否| End([流程结束])
+    
+    ErrorHandle -->|报警<br/>Q1.3蜂鸣器| AlarmLight[故障指示<br/>Q1.1红灯]
+    AlarmLight --> ManualReset{手动复位?}
+    ManualReset -->|复位<br/>I1.5| SafetyCheck
+    ManualReset -->|急停<br/>I0.0-I0.2| EmergencyStop[紧急停止<br/>切断所有输出]
+    
+    style Start fill:#4a9d5f,stroke:#2d7a3f,color:#fff
+    style End fill:#4a9d5f,stroke:#2d7a3f,color:#fff
+    style SafetyCheck fill:#f59e0b,stroke:#d97706,color:#fff
+    style VisionProcess fill:#f59e0b,stroke:#d97706,color:#fff
+    style NextCycle fill:#f59e0b,stroke:#d97706,color:#fff
+    style ManualReset fill:#f59e0b,stroke:#d97706,color:#fff
+    style ErrorHandle fill:#ef4444,stroke:#dc2626,color:#fff
+    style EmergencyStop fill:#ef4444,stroke:#dc2626,color:#fff
+    style AlarmLight fill:#ef4444,stroke:#dc2626,color:#fff
+                                </pre>
+                            </div>
+                            
+                            <div class="split-overlay" style="pointer-events: none;">
+                                <div class="split-badge">交互式流程图</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -467,20 +688,12 @@
         </div>
     </section>
 
-    <!-- 视觉分隔区 2 -->
-    <div class="visual-divider" style="background-image: url('data/订单班文档资料/能源/notion文稿/image/工业机器人图片.jpg');">
-        <div class="divider-content">
-            <div class="divider-icon">
-                <i data-lucide="bot"></i>
-            </div>
-            <h3>精密机器人分拣</h3>
-            <p>±0.02mm定位精度 · ≤0.8秒单次节拍</p>
-        </div>
-    </div>
-
     <!-- Section 3: 机器人编程与分拣逻辑 -->
-    <section class="section">
-        <div class="container">
+    <section class="section" style="background-image: url('data/订单班文档资料/能源/notion文稿/image/工业机器人图片.jpg'); background-size: cover; background-position: center; background-attachment: fixed; position: relative;">
+        <!-- 半透明遮罩层 -->
+        <div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 26, 15, 0.92) 0%, rgba(13, 31, 19, 0.88) 100%); backdrop-filter: blur(3px);"></div>
+
+        <div class="container" style="position: relative; z-index: 1;">
             <div class="section-header">
                 <img src="agent-avatars/机器人调试工程师.jpg" alt="机器人调试工程师" class="agent-avatar">
                 <div class="agent-info">
@@ -497,92 +710,67 @@
                     <p>基于ABB RobotStudio离线编程,使用RAPID语言开发拾取-判断-分拣主程序。系统通过真空吸盘拾取电池片(负压-60kPa),根据PLC传输的检测结果(OK/RW/NG)执行对应分拣路径。采用多点轨迹规划优化节拍(单次循环≤0.8秒),使用WorldZone碰撞检测保障安全,通过TCP精度补偿实现±0.02mm重复定位精度。</p>
                 </div>
 
-                <div class="image-container" style="margin-bottom: var(--spacing-xl);">
-                    <img data-src="data/订单班文档资料/能源/notion文稿/image/光伏面板生成画面.jpg" alt="光伏面板分拣场景" loading="lazy">
-                    <div class="image-caption">机器人分拣路径三维仿真</div>
-                </div>
-
-                <!-- Timeline时间轴布局 -->
-                <div class="timeline-container">
-                    <h3 class="timeline-title"><i data-lucide="git-branch"></i> 分拣逻辑流程</h3>
-
-                    <div class="timeline">
+                <!-- 机器人工作流程可视化 -->
+                <div class="robot-workflow-visual" style="margin-bottom: var(--spacing-2xl);">
+                    <div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-xl);">
                         <!-- 步骤1 -->
-                        <div class="timeline-item scroll-reveal">
-                            <div class="timeline-marker">
-                                <i data-lucide="play"></i>
-                            </div>
-                            <div class="timeline-content">
-                                <div class="timeline-step">步骤 1</div>
-                                <h4>等待PLC就绪信号</h4>
-                                <p>检测DI1=1,确认系统准备就绪</p>
-                                <div class="timeline-badge">初始化</div>
+                        <div class="workflow-step">
+                            <div class="workflow-icon" style="background: linear-gradient(135deg, #4a9d5f, #2d7a3f);">
+                                <i data-lucide="play" style="width: 32px; height: 32px;"></i>
                             </div>
+                            <div class="workflow-number">01</div>
+                            <h4>等待就绪</h4>
+                            <p>DI1信号检测</p>
                         </div>
 
                         <!-- 步骤2 -->
-                        <div class="timeline-item scroll-reveal">
-                            <div class="timeline-marker">
-                                <i data-lucide="hand"></i>
-                            </div>
-                            <div class="timeline-content">
-                                <div class="timeline-step">步骤 2</div>
-                                <h4>移动至拾取点</h4>
-                                <p>机器人移动→开启真空→检测吸附成功</p>
-                                <div class="timeline-badge">拾取</div>
+                        <div class="workflow-step">
+                            <div class="workflow-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
+                                <i data-lucide="hand" style="width: 32px; height: 32px;"></i>
                             </div>
+                            <div class="workflow-number">02</div>
+                            <h4>移动拾取</h4>
+                            <p>300mm/s速度</p>
                         </div>
 
                         <!-- 步骤3 -->
-                        <div class="timeline-item scroll-reveal">
-                            <div class="timeline-marker">
-                                <i data-lucide="search"></i>
-                            </div>
-                            <div class="timeline-content">
-                                <div class="timeline-step">步骤 3</div>
-                                <h4>读取检测结果</h4>
-                                <p>从PLC读取DI2-DI3编码,获取质量判定</p>
-                                <div class="timeline-badge">判断</div>
+                        <div class="workflow-step">
+                            <div class="workflow-icon" style="background: linear-gradient(135deg, #3b82f6, #2563eb);">
+                                <i data-lucide="search" style="width: 32px; height: 32px;"></i>
                             </div>
+                            <div class="workflow-number">03</div>
+                            <h4>读取结果</h4>
+                            <p>DI2-DI3编码</p>
                         </div>
 
                         <!-- 步骤4 -->
-                        <div class="timeline-item scroll-reveal">
-                            <div class="timeline-marker">
-                                <i data-lucide="git-branch"></i>
-                            </div>
-                            <div class="timeline-content">
-                                <div class="timeline-step">步骤 4</div>
-                                <h4>分支判断路径</h4>
-                                <p>OK→托盘1 | RW→托盘2 | NG→废料箱</p>
-                                <div class="timeline-badge">分拣</div>
+                        <div class="workflow-step">
+                            <div class="workflow-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
+                                <i data-lucide="git-branch" style="width: 32px; height: 32px;"></i>
                             </div>
+                            <div class="workflow-number">04</div>
+                            <h4>路径判断</h4>
+                            <p>OK/RW/NG分支</p>
                         </div>
 
                         <!-- 步骤5 -->
-                        <div class="timeline-item scroll-reveal">
-                            <div class="timeline-marker">
-                                <i data-lucide="box"></i>
-                            </div>
-                            <div class="timeline-content">
-                                <div class="timeline-step">步骤 5</div>
-                                <h4>到达目标位置</h4>
-                                <p>精确定位→关闭真空→等待释放确认</p>
-                                <div class="timeline-badge">放置</div>
+                        <div class="workflow-step">
+                            <div class="workflow-icon" style="background: linear-gradient(135deg, #ec4899, #db2777);">
+                                <i data-lucide="box" style="width: 32px; height: 32px;"></i>
                             </div>
+                            <div class="workflow-number">05</div>
+                            <h4>精确放置</h4>
+                            <p>±0.02mm精度</p>
                         </div>
 
                         <!-- 步骤6 -->
-                        <div class="timeline-item scroll-reveal">
-                            <div class="timeline-marker">
-                                <i data-lucide="rotate-ccw"></i>
-                            </div>
-                            <div class="timeline-content">
-                                <div class="timeline-step">步骤 6</div>
-                                <h4>返回原点并循环</h4>
-                                <p>发送完成信号DO1=1,准备下一次循环</p>
-                                <div class="timeline-badge">完成</div>
+                        <div class="workflow-step">
+                            <div class="workflow-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
+                                <i data-lucide="rotate-ccw" style="width: 32px; height: 32px;"></i>
                             </div>
+                            <div class="workflow-number">06</div>
+                            <h4>返回循环</h4>
+                            <p>DO1反馈信号</p>
                         </div>
                     </div>
                 </div>
@@ -719,17 +907,6 @@
         </div>
     </section>
 
-    <!-- 视觉分隔区 3 -->
-    <div class="visual-divider" style="background-image: url('data/订单班文档资料/能源/notion文稿/image/光伏面板室外场景图片.jpg');">
-        <div class="divider-content">
-            <div class="divider-icon">
-                <i data-lucide="camera"></i>
-            </div>
-            <h3>深度学习视觉检测</h3>
-            <p>99.7%检出率 · 0.05mm缺陷可检出</p>
-        </div>
-    </div>
-
     <!-- Section 4: 视觉标定与性能验证 -->
     <section class="section">
         <div class="container">
@@ -926,8 +1103,9 @@
 
             <div class="grid grid-3">
                 <div class="card">
-                    <div class="card-header" style="order: 1;">
-                        <h3 class="card-title">⚡ 核心技术</h3>
+                    <div class="card-header" style="order: 1; background-image: url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=800&q=80'); background-size: cover; background-position: center; position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center;">
+                        <div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13, 71, 161, 0.92) 0%, rgba(25, 118, 210, 0.88) 100%); z-index: 0;"></div>
+                        <h3 class="card-title" style="position: relative; z-index: 1; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">⚡ 核心技术</h3>
                     </div>
                     <div class="card-body" style="order: 2;">
                         <ul class="feature-list">
@@ -944,8 +1122,9 @@
                 </div>
 
                 <div class="card">
-                    <div class="card-header" style="order: 1;">
-                        <h3 class="card-title">📊 性能指标</h3>
+                    <div class="card-header" style="order: 1; background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80'); background-size: cover; background-position: center; position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center;">
+                        <div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 188, 212, 0.92) 0%, rgba(0, 151, 167, 0.88) 100%); z-index: 0;"></div>
+                        <h3 class="card-title" style="position: relative; z-index: 1; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">📊 性能指标</h3>
                     </div>
                     <div class="card-body" style="order: 2;">
                         <ul class="feature-list">
@@ -962,8 +1141,9 @@
                 </div>
 
                 <div class="card">
-                    <div class="card-header" style="order: 1;">
-                        <h3 class="card-title">🎯 应用成果</h3>
+                    <div class="card-header" style="order: 1; background-image: url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80'); background-size: cover; background-position: center; position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center;">
+                        <div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(76, 175, 80, 0.92) 0%, rgba(46, 125, 50, 0.88) 100%); z-index: 0;"></div>
+                        <h3 class="card-title" style="position: relative; z-index: 1; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">🎯 应用成果</h3>
                     </div>
                     <div class="card-body" style="order: 2;">
                         <ul class="feature-list">
@@ -988,5 +1168,70 @@
     </section>
 
     <script src="js/main.js"></script>
+    
+    <!-- Mermaid交互控制脚本 -->
+    <script>
+        // Mermaid图表缩放控制
+        let mermaidScales = new Map();
+        
+        function mermaidZoomIn(btn) {
+            const container = btn.closest('.mermaid-interactive-container');
+            const mermaidDiv = container.querySelector('.mermaid-container');
+            const currentScale = mermaidScales.get(mermaidDiv) || 1;
+            const newScale = Math.min(currentScale + 0.2, 3);
+            mermaidScales.set(mermaidDiv, newScale);
+            mermaidDiv.style.transform = `scale(${newScale})`;
+            mermaidDiv.style.transformOrigin = 'top left';
+        }
+        
+        function mermaidZoomOut(btn) {
+            const container = btn.closest('.mermaid-interactive-container');
+            const mermaidDiv = container.querySelector('.mermaid-container');
+            const currentScale = mermaidScales.get(mermaidDiv) || 1;
+            const newScale = Math.max(currentScale - 0.2, 0.5);
+            mermaidScales.set(mermaidDiv, newScale);
+            mermaidDiv.style.transform = `scale(${newScale})`;
+            mermaidDiv.style.transformOrigin = 'top left';
+        }
+        
+        function mermaidReset(btn) {
+            const container = btn.closest('.mermaid-interactive-container');
+            const mermaidDiv = container.querySelector('.mermaid-container');
+            mermaidScales.set(mermaidDiv, 1);
+            mermaidDiv.style.transform = 'scale(1)';
+            mermaidDiv.scrollTop = 0;
+            mermaidDiv.scrollLeft = 0;
+        }
+        
+        function mermaidFullscreen(btn) {
+            const container = btn.closest('.mermaid-interactive-container');
+            if (!document.fullscreenElement) {
+                container.requestFullscreen().catch(err => {
+                    console.log(`Error attempting to enable fullscreen: ${err.message}`);
+                });
+                btn.querySelector('i').setAttribute('data-lucide', 'minimize');
+                lucide.createIcons();
+            } else {
+                document.exitFullscreen();
+                btn.querySelector('i').setAttribute('data-lucide', 'maximize');
+                lucide.createIcons();
+            }
+        }
+        
+        // 监听全屏变化事件
+        document.addEventListener('fullscreenchange', function() {
+            document.querySelectorAll('.mermaid-control-btn').forEach(btn => {
+                const icon = btn.querySelector('i');
+                if (btn.getAttribute('title') === '全屏') {
+                    if (document.fullscreenElement) {
+                        icon.setAttribute('data-lucide', 'minimize');
+                    } else {
+                        icon.setAttribute('data-lucide', 'maximize');
+                    }
+                }
+            });
+            lucide.createIcons();
+        });
+    </script>
 </body>
 </html>

web_frontend/web_result/order-classes/energy/js/main.js

@@ -279,14 +279,21 @@ function initThemeToggle() {
     if (themeToggleBtn) {
         themeToggleBtn.addEventListener('click', () => {
             document.body.classList.toggle('dark-theme');
+            
+            const isDark = document.body.classList.contains('dark-theme');
 
             // 保存用户偏好
-            if (document.body.classList.contains('dark-theme')) {
+            if (isDark) {
                 localStorage.setItem('theme', 'dark');
             } else {
                 localStorage.setItem('theme', 'light');
             }
 
+            // 更新Mermaid图表主题
+            if (typeof window.updateMermaidTheme === 'function') {
+                window.updateMermaidTheme(isDark);
+            }
+
             // 重新初始化图标以确保正确显示
             if (typeof lucide !== 'undefined') {
                 lucide.createIcons();

web_frontend/web_result/order-classes/food/index.html

@@ -435,6 +435,230 @@
                         </div>
                     </div>
                 </div>
+
+                <!-- 营销与推广 -->
+                <div class="subsection-divider" style="margin: 60px 0 40px 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-color), transparent);"></div>
+                
+                <div class="subsection-header" style="text-align: center; margin-bottom: 40px;">
+                    <h3 style="font-size: 28px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; justify-content: center; gap: 12px;">
+                        <i data-lucide="megaphone" style="width: 32px; height: 32px;"></i>
+                        营销与推广
+                    </h3>
+                    <p style="margin-top: 12px; color: var(--text-secondary); font-size: 16px;">全方位营销策略，打造品牌影响力</p>
+                </div>
+
+                <div class="vertical-stack">
+                    <!-- 品牌建设 -->
+                    <div class="stack-card">
+                        <div class="stack-card-header">
+                            <div class="stack-card-icon">
+                                <i data-lucide="award" style="display: inline-block; width: 32px; height: 32px;"></i>
+                            </div>
+                            <h3 class="stack-card-title">品牌建设</h3>
+                        </div>
+                        <div class="stack-card-content">
+                            <div class="stack-card-body">
+                                <div style="display: grid; gap: 24px;">
+                                    <div>
+                                        <h4 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                                            <i data-lucide="palette" style="width: 20px; height: 20px;"></i>
+                                            品牌视觉
+                                        </h4>
+                                        <ul class="feature-list">
+                                            <li><i data-lucide="check"></i>设计简洁LOGO（以"绿叶+叉子"为核心元素）</li>
+                                            <li><i data-lucide="check"></i>统一门店装修、外卖包装、宣传物料的视觉风格</li>
+                                            <li><i data-lucide="check"></i>外卖盒采用可降解材质，印上"每日营养小贴士"</li>
+                                        </ul>
+                                    </div>
+                                    <div>
+                                        <h4 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                                            <i data-lucide="star" style="width: 20px; height: 20px;"></i>
+                                            口碑打造
+                                        </h4>
+                                        <ul class="feature-list">
+                                            <li><i data-lucide="check"></i>建立"差评24小时响应机制"</li>
+                                            <li><i data-lucide="check"></i>对投诉客户实行"退款+赠送双人餐"补偿</li>
+                                            <li><i data-lucide="check"></i>鼓励客户在小红书/抖音分享用餐体验，凭截图兑换10元优惠券</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 线上营销 -->
+                    <div class="stack-card">
+                        <div class="stack-card-header">
+                            <div class="stack-card-icon">
+                                <i data-lucide="smartphone" style="display: inline-block; width: 32px; height: 32px;"></i>
+                            </div>
+                            <h3 class="stack-card-title">线上营销</h3>
+                        </div>
+                        <div class="stack-card-content">
+                            <div class="stack-card-body">
+                                <div style="display: grid; gap: 24px;">
+                                    <div>
+                                        <h4 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                                            <i data-lucide="share-2" style="width: 20px; height: 20px;"></i>
+                                            社交媒体运营
+                                        </h4>
+                                        <div style="display: grid; gap: 16px;">
+                                            <div>
+                                                <p style="font-weight: 600; margin-bottom: 8px;">📱 微信公众号</p>
+                                                <ul class="feature-list">
+                                                    <li><i data-lucide="check"></i>每周更新3篇内容（2篇营养知识 + 1篇产品推荐）</li>
+                                                    <li><i data-lucide="check"></i>粉丝增长目标：开业3个月达5000人</li>
+                                                </ul>
+                                            </div>
+                                            <div>
+                                                <p style="font-weight: 600; margin-bottom: 8px;">📹 抖音/小红书</p>
+                                                <ul class="feature-list">
+                                                    <li><i data-lucide="check"></i>每周发布2条短视频（制作过程 + 客户反馈）</li>
+                                                    <li><i data-lucide="check"></i>合作10万粉丝以上美食/健身博主（每月2-3位）</li>
+                                                    <li><i data-lucide="check"></i>单次推广目标带来订单增长20%</li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <h4 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                                            <i data-lucide="shopping-bag" style="width: 20px; height: 20px;"></i>
+                                            外卖平台运营
+                                        </h4>
+                                        <ul class="feature-list">
+                                            <li><i data-lucide="check"></i>入驻美团、饿了么，设置"新客立减15元""满60减20元"活动</li>
+                                            <li><i data-lucide="check"></i>配送时效承诺30分钟内，超时免单</li>
+                                            <li><i data-lucide="check"></i>外卖包装标注"食材新鲜度追溯码"</li>
+                                            <li><i data-lucide="check"></i>目标：上线1个月内平台评分达4.8分以上，月外卖订单量达2000单</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 线下推广 -->
+                    <div class="stack-card">
+                        <div class="stack-card-header">
+                            <div class="stack-card-icon">
+                                <i data-lucide="map-pin" style="display: inline-block; width: 32px; height: 32px;"></i>
+                            </div>
+                            <h3 class="stack-card-title">线下推广</h3>
+                        </div>
+                        <div class="stack-card-content">
+                            <div class="stack-card-body">
+                                <div style="display: grid; gap: 24px;">
+                                    <div>
+                                        <h4 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                                            <i data-lucide="target" style="width: 20px; height: 20px;"></i>
+                                            精准触达
+                                        </h4>
+                                        <div style="display: grid; gap: 16px;">
+                                            <div>
+                                                <p style="font-weight: 600; margin-bottom: 8px;">🏢 写字楼推广</p>
+                                                <ul class="feature-list">
+                                                    <li><i data-lucide="check"></i>每周一、三在目标写字楼发放传单500份/天</li>
+                                                    <li><i data-lucide="check"></i>传单附"满50减10元"优惠券（有效期7天）</li>
+                                                </ul>
+                                            </div>
+                                            <div>
+                                                <p style="font-weight: 600; margin-bottom: 8px;">💪 健身房合作</p>
+                                                <ul class="feature-list">
+                                                    <li><i data-lucide="check"></i>与周边3-5家健身房达成合作</li>
+                                                    <li><i data-lucide="check"></i>健身卡办卡用户可获"轻食体验券（价值45元）"</li>
+                                                    <li><i data-lucide="check"></i>健身房会员凭卡到店消费享9折优惠</li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <h4 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                                            <i data-lucide="calendar" style="width: 20px; height: 20px;"></i>
+                                            体验活动
+                                        </h4>
+                                        <ul class="feature-list">
+                                            <li><i data-lucide="check"></i>每月举办1次"轻食体验日"，邀请20-30位潜在客户</li>
+                                            <li><i data-lucide="check"></i>现场安排营养师讲解"轻食搭配技巧"</li>
+                                            <li><i data-lucide="check"></i>收集反馈率需达80%以上</li>
+                                            <li><i data-lucide="check"></i>转化试吃客户为会员的比例目标30%</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 会员制度 -->
+                    <div class="stack-card">
+                        <div class="stack-card-header">
+                            <div class="stack-card-icon">
+                                <i data-lucide="users" style="display: inline-block; width: 32px; height: 32px;"></i>
+                            </div>
+                            <h3 class="stack-card-title">会员制度</h3>
+                        </div>
+                        <div class="stack-card-content">
+                            <div class="stack-card-body">
+                                <div style="display: grid; gap: 24px;">
+                                    <div>
+                                        <h4 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                                            <i data-lucide="gift" style="width: 20px; height: 20px;"></i>
+                                            会员权益
+                                        </h4>
+                                        <div style="display: grid; gap: 16px;">
+                                            <div>
+                                                <p style="font-weight: 600; margin-bottom: 8px;">💰 充值优惠</p>
+                                                <ul class="feature-list">
+                                                    <li><i data-lucide="check"></i>充值200元送30元</li>
+                                                    <li><i data-lucide="check"></i>充值500元送100元</li>
+                                                    <li><i data-lucide="check"></i>充值1000元送250元</li>
+                                                </ul>
+                                            </div>
+                                            <div>
+                                                <p style="font-weight: 600; margin-bottom: 8px;">🎁 消费福利</p>
+                                                <ul class="feature-list">
+                                                    <li><i data-lucide="check"></i>会员消费享9折</li>
+                                                    <li><i data-lucide="check"></i>生日当天送"免费定制餐+小蛋糕"</li>
+                                                    <li><i data-lucide="check"></i>积分1元=1分（100分可兑换价值25元的经典沙拉）</li>
+                                                </ul>
+                                            </div>
+                                            <div>
+                                                <p style="font-weight: 600; margin-bottom: 8px;">⭐ 专属服务</p>
+                                                <ul class="feature-list">
+                                                    <li><i data-lucide="check"></i>优先体验新品</li>
+                                                    <li><i data-lucide="check"></i>免费获取"个性化营养食谱"（营养师根据会员体重/目标定制）</li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <h4 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                                            <i data-lucide="trending-up" style="width: 20px; height: 20px;"></i>
+                                            会员增长目标
+                                        </h4>
+                                        <div class="stats">
+                                            <div class="stat-item">
+                                                <div class="stat-label">开业1个月</div>
+                                                <div class="stat-value">300人</div>
+                                            </div>
+                                            <div class="stat-item">
+                                                <div class="stat-label">开业3个月</div>
+                                                <div class="stat-value">800人</div>
+                                            </div>
+                                            <div class="stat-item">
+                                                <div class="stat-label">开业1年</div>
+                                                <div class="stat-value">2000人</div>
+                                            </div>
+                                            <div class="stat-item">
+                                                <div class="stat-label">会员复购率</div>
+                                                <div class="stat-value">60%+</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </section>

web_frontend/web_result/order-classes/health/css/styles.css

@@ -17,14 +17,14 @@
     --hover-bg: rgba(16, 185, 129, 0.15);     /* 悬停背景 */
     --active-bg: rgba(16, 185, 129, 0.2);     /* 激活背景 */
 
-    /* 间距系统 - 针对大屏幕优化 */
-    --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 */
-    --spacing-3xl: 8rem;      /* 128px */
+    /* 间距系统 - 紧凑布局优化 */
+    --spacing-xs: 0.5rem;     /* 8px - 减小从12px */
+    --spacing-sm: 0.75rem;    /* 12px - 减小从20px */
+    --spacing-md: 1.25rem;    /* 20px - 减小从32px */
+    --spacing-lg: 2rem;       /* 32px - 减小从48px */
+    --spacing-xl: 2.5rem;     /* 40px - 减小从64px */
+    --spacing-2xl: 3rem;      /* 48px - 减小从96px */
+    --spacing-3xl: 4rem;      /* 64px - 减小从128px */
 
     /* 字体系统 */
     --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -124,7 +124,7 @@ body {
     justify-content: center;
     background:
         linear-gradient(135deg, rgba(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 0.95) 100%),
-        url('../images/情绪数据分析表.jpg');
+        url('https://images.unsplash.com/photo-1573497491208-6b1acb260507?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -136,7 +136,7 @@ body {
 body.dark-theme .hero {
     background:
         linear-gradient(135deg, rgba(6, 78, 59, 0.9) 0%, rgba(5, 150, 105, 0.8) 100%),
-        url('../images/情绪数据分析表.jpg');
+        url('https://images.unsplash.com/photo-1573497491208-6b1acb260507?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -287,7 +287,7 @@ body.dark-theme .hero {
 .section:nth-child(1) {
     background-image:
         linear-gradient(to bottom, rgba(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 1) 100%),
-        url('../images/情绪数据分析表.jpg');
+        url('https://images.unsplash.com/photo-1573497491208-6b1acb260507?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -296,7 +296,7 @@ body.dark-theme .hero {
 .section:nth-child(2) {
     background-image:
         linear-gradient(to bottom, rgba(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 1) 100%),
-        url('../images/心理状态结构化分析示意图.jpg');
+        url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -305,7 +305,7 @@ body.dark-theme .hero {
 .section:nth-child(3) {
     background-image:
         linear-gradient(to bottom, rgba(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 1) 100%),
-        url('../images/目标设定可视化示意图.jpg');
+        url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -314,7 +314,7 @@ body.dark-theme .hero {
 .section:nth-child(4) {
     background-image:
         linear-gradient(to bottom, rgba(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 1) 100%),
-        url('../images/干预方法选择示意图.jpg');
+        url('https://images.unsplash.com/photo-1528909514045-2fa4ac7a08ba?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -324,7 +324,7 @@ body.dark-theme .hero {
 .section:nth-child(n+5):nth-child(odd) {
     background-image:
         linear-gradient(to bottom, rgba(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 1) 100%),
-        url('../images/临床心理结案报告.jpg');
+        url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -333,7 +333,7 @@ body.dark-theme .hero {
 .section:nth-child(n+5):nth-child(even) {
     background-image:
         linear-gradient(to bottom, rgba(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 1) 100%),
-        url('../images/情绪数据分析表.jpg');
+        url('https://images.unsplash.com/photo-1573497491208-6b1acb260507?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -343,7 +343,7 @@ body.dark-theme .hero {
 body.dark-theme .section:nth-child(1) {
     background-image:
         linear-gradient(to bottom, rgba(6, 78, 59, 0.92) 0%, rgba(5, 150, 105, 0.88) 100%),
-        url('../images/情绪数据分析表.jpg');
+        url('https://images.unsplash.com/photo-1573497491208-6b1acb260507?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -352,7 +352,7 @@ body.dark-theme .section:nth-child(1) {
 body.dark-theme .section:nth-child(2) {
     background-image:
         linear-gradient(to bottom, rgba(5, 150, 105, 0.90) 0%, rgba(6, 78, 59, 0.88) 100%),
-        url('../images/心理状态结构化分析示意图.jpg');
+        url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -361,7 +361,7 @@ body.dark-theme .section:nth-child(2) {
 body.dark-theme .section:nth-child(3) {
     background-image:
         linear-gradient(to bottom, rgba(6, 78, 59, 0.92) 0%, rgba(5, 150, 105, 0.88) 100%),
-        url('../images/目标设定可视化示意图.jpg');
+        url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -370,7 +370,7 @@ body.dark-theme .section:nth-child(3) {
 body.dark-theme .section:nth-child(4) {
     background-image:
         linear-gradient(to bottom, rgba(5, 150, 105, 0.90) 0%, rgba(6, 78, 59, 0.88) 100%),
-        url('../images/干预方法选择示意图.jpg');
+        url('https://images.unsplash.com/photo-1528909514045-2fa4ac7a08ba?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -380,7 +380,7 @@ body.dark-theme .section:nth-child(4) {
 body.dark-theme .section:nth-child(n+5):nth-child(odd) {
     background-image:
         linear-gradient(to bottom, rgba(6, 78, 59, 0.92) 0%, rgba(5, 150, 105, 0.88) 100%),
-        url('../images/临床心理结案报告.jpg');
+        url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -389,7 +389,7 @@ body.dark-theme .section:nth-child(n+5):nth-child(odd) {
 body.dark-theme .section:nth-child(n+5):nth-child(even) {
     background-image:
         linear-gradient(to bottom, rgba(5, 150, 105, 0.90) 0%, rgba(6, 78, 59, 0.88) 100%),
-        url('../images/情绪数据分析表.jpg');
+        url('https://images.unsplash.com/photo-1573497491208-6b1acb260507?w=1920&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -579,10 +579,10 @@ body.dark-theme tr:hover {
     flex: 1;
 }
 
-/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
+/* ========== 图片容器 - 紧凑布局 ========== */
 .image-container {
     width: 100%;
-    aspect-ratio: 3/2;
+    aspect-ratio: 16/9;  /* 更紧凑的比例,16:9宽屏比例 */
     overflow: hidden;
     border-radius: 0;
     margin-bottom: 0;
@@ -593,6 +593,7 @@ body.dark-theme tr:hover {
     transition: all var(--transition-base);
     order: 1;
     flex-shrink: 0;
+    cursor: pointer;  /* 添加点击光标提示 */
 }
 
 .image-container img {
@@ -604,8 +605,14 @@ body.dark-theme tr:hover {
 }
 
 .image-container:hover img {
-    transform: scale(1.1);
-    filter: brightness(1.1);
+    transform: scale(1.03);  /* 减小放大效果,避免内容看不清 */
+    filter: brightness(1.0);  /* 轻微提亮 */
+}
+
+/* 效果评估section的图片不裁剪,完整显示 */
+.section:nth-of-type(4) .image-container img {
+    object-fit: contain;
+    background: var(--bg-dark);
 }
 
 .image-caption {
@@ -959,3 +966,139 @@ body.dark-theme .theme-icon-dark {
 body.dark-theme .theme-icon-light {
     opacity: 0.5;
 }
+
+/* ========== 图片放大Lightbox模态框 ========== */
+.lightbox-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.95);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--transition-slow), visibility var(--transition-slow);
+    padding: var(--spacing-xl);
+    cursor: zoom-out;
+}
+
+.lightbox-modal.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.lightbox-content {
+    position: relative;
+    max-width: 90vw;
+    max-height: 90vh;
+    transform: scale(0.9);
+    transition: transform var(--transition-slow);
+    cursor: default;
+}
+
+.lightbox-modal.active .lightbox-content {
+    transform: scale(1);
+}
+
+.lightbox-image {
+    max-width: 100%;
+    max-height: 90vh;
+    width: auto;
+    height: auto;
+    border-radius: var(--radius-xl);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8),
+                0 0 0 3px var(--primary-green);
+    object-fit: contain;
+}
+
+.lightbox-close {
+    position: fixed;
+    top: var(--spacing-xl);
+    right: var(--spacing-xl);
+    width: 60px;
+    height: 60px;
+    background: var(--primary-green);
+    border: 3px solid white;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-xl);
+    z-index: 10000;
+}
+
+.lightbox-close:hover {
+    background: var(--accent-emerald-light);
+    transform: rotate(90deg) scale(1.1);
+    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.6);
+}
+
+.lightbox-close::before,
+.lightbox-close::after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 3px;
+    background: white;
+    border-radius: 2px;
+}
+
+.lightbox-close::before {
+    transform: rotate(45deg);
+}
+
+.lightbox-close::after {
+    transform: rotate(-45deg);
+}
+
+/* 图片信息标签 */
+.lightbox-label {
+    position: fixed;
+    bottom: var(--spacing-xl);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: var(--spacing-md) var(--spacing-xl);
+    background: rgba(16, 185, 129, 0.95);
+    backdrop-filter: blur(10px);
+    color: white;
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    border-radius: var(--radius-full);
+    box-shadow: var(--shadow-xl);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    z-index: 10000;
+}
+
+/* 响应式 - Lightbox */
+@media (max-width: 768px) {
+    .lightbox-modal {
+        padding: var(--spacing-md);
+    }
+
+    .lightbox-close {
+        top: var(--spacing-md);
+        right: var(--spacing-md);
+        width: 48px;
+        height: 48px;
+    }
+
+    .lightbox-close::before,
+    .lightbox-close::after {
+        width: 24px;
+    }
+
+    .lightbox-label {
+        font-size: var(--text-base);
+        padding: var(--spacing-sm) var(--spacing-lg);
+        bottom: var(--spacing-md);
+    }
+}

web_frontend/web_result/order-classes/health/js/main.js

@@ -16,6 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
     initSmoothScroll();
     updateStats();
     initThemeToggle();
+    initLightbox();
 });
 
 // 导航功能
@@ -267,3 +268,79 @@ function initThemeToggle() {
         });
     }
 }
+
+// 图片放大查看功能(Lightbox)
+function initLightbox() {
+    // 创建Lightbox模态框HTML结构
+    const lightboxHTML = `
+        <div class="lightbox-modal" id="lightboxModal">
+            <div class="lightbox-content">
+                <img src="" alt="" class="lightbox-image" id="lightboxImage">
+            </div>
+            <div class="lightbox-close" id="lightboxClose"></div>
+            <div class="lightbox-label" id="lightboxLabel"></div>
+        </div>
+    `;
+
+    // 将Lightbox添加到页面
+    document.body.insertAdjacentHTML('beforeend', lightboxHTML);
+
+    // 获取元素
+    const lightboxModal = document.getElementById('lightboxModal');
+    const lightboxImage = document.getElementById('lightboxImage');
+    const lightboxLabel = document.getElementById('lightboxLabel');
+    const lightboxClose = document.getElementById('lightboxClose');
+
+    // 为所有图片容器添加点击事件
+    const imageContainers = document.querySelectorAll('.image-container');
+    imageContainers.forEach(container => {
+        container.addEventListener('click', function() {
+            const img = this.querySelector('img');
+            if (img) {
+                // 获取图片信息
+                const imgSrc = img.src || img.getAttribute('data-src');
+                const imgAlt = img.alt || '图片';
+                const caption = this.querySelector('.image-caption');
+                const labelText = caption ? caption.textContent : imgAlt;
+
+                // 设置Lightbox内容
+                lightboxImage.src = imgSrc;
+                lightboxImage.alt = imgAlt;
+                lightboxLabel.textContent = labelText;
+
+                // 显示Lightbox
+                lightboxModal.classList.add('active');
+                document.body.style.overflow = 'hidden'; // 防止背景滚动
+            }
+        });
+    });
+
+    // 关闭Lightbox函数
+    function closeLightbox() {
+        lightboxModal.classList.remove('active');
+        document.body.style.overflow = ''; // 恢复滚动
+
+        // 延迟清空内容,等待动画完成
+        setTimeout(() => {
+            lightboxImage.src = '';
+            lightboxLabel.textContent = '';
+        }, 350);
+    }
+
+    // 点击关闭按钮
+    lightboxClose.addEventListener('click', closeLightbox);
+
+    // 点击背景关闭
+    lightboxModal.addEventListener('click', function(e) {
+        if (e.target === lightboxModal) {
+            closeLightbox();
+        }
+    });
+
+    // ESC键关闭
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && lightboxModal.classList.contains('active')) {
+            closeLightbox();
+        }
+    });
+}

web_frontend/web_result/order-classes/visual-design/LAYOUT_DESIGN.md

@@ -0,0 +1,716 @@
+# 视觉设计订单班 - 独特布局设计方案
+
+## 设计原则
+**每个Section使用完全不同的布局模式，避免任何重复**
+
+---
+
+## Section 1: 项目概述与宣传目标
+**布局模式：Alternating Layout (左右交替布局)**
+
+### ASCII 布局图
+```
+┌────────────────────────────────────────────────────────────────┐
+│                      Section 1                                  │
+├────────────────────────────────────────────────────────────────┤
+│  【项目定位】 - 左图右文                                         │
+│  ┌─────────────────┐  ┌────────────────────────────┐           │
+│  │                 │  │  📍 项目定位               │           │
+│  │   同里古镇      │  │  地理位置: 江苏苏州       │           │
+│  │   航拍图        │  │  片长设定: 6-7分钟        │           │
+│  │   (图片)        │  │  内容章节: 6大主题        │           │
+│  │                 │  │  拍摄方式: 航拍+地面      │           │
+│  └─────────────────┘  └────────────────────────────┘           │
+│         ← flex-direction: row                                  │
+│                                                                 │
+│  【色彩体系】 - 右图左文 (反向)                                 │
+│  ┌────────────────────────────┐  ┌─────────────────┐           │
+│  │  🎨 色彩体系               │  │                 │           │
+│  │  青瓦灰: 古建筑主色调      │  │   传统配色表    │           │
+│  │  悟道黄: 传统文化底蕴      │  │   (图片)        │           │
+│  │  山吹色: 温暖人文气息      │  │                 │           │
+│  └────────────────────────────┘  └─────────────────┘           │
+│         ← flex-direction: row-reverse                          │
+│                                                                 │
+│  【四大宣传目标】 - Bento Grid (不规则网格)                     │
+│  ┌───────────────────┬─────────┬─────────┐                     │
+│  │                   │         │         │                     │
+│  │  🏛️ 文化传承       │ 🍜美食  │ 🌿生态  │                     │
+│  │  (grid-row: 1/3)  │ 体验    │ 旅游    │                     │
+│  │   占2行高度        │         │         │                     │
+│  │                   ├─────────┴─────────┤                     │
+│  │                   │                   │                     │
+│  │                   │ 🌾 产业融合        │                     │
+│  │                   │  (grid-column:2/4) │                     │
+│  └───────────────────┴───────────────────┘                     │
+│         ← 第1项占2行，其他项灵活排列                            │
+└────────────────────────────────────────────────────────────────┘
+```
+
+### CSS 实现
+```css
+/* 左右交替布局 */
+.alternating-layout {
+    display: flex;
+    gap: var(--spacing-2xl);
+    align-items: center;
+    margin-bottom: var(--spacing-3xl);
+}
+
+.alternating-layout:nth-child(even) {
+    flex-direction: row-reverse;  /* 偶数项反向 */
+}
+
+.alternating-layout .image-container {
+    flex: 0 0 45%;  /* 图片占45% */
+    aspect-ratio: 16/9;
+}
+
+.alternating-layout .content {
+    flex: 1;  /* 内容占剩余空间 */
+}
+
+/* Bento Grid 不规则网格 */
+.bento-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: var(--spacing-xl);
+}
+
+.bento-item:first-child {
+    grid-row: 1 / 3;  /* 第1项占2行 */
+}
+
+.bento-item:last-child {
+    grid-column: 2 / 4;  /* 最后1项占2列 */
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+    .alternating-layout {
+        flex-direction: column !important;
+    }
+
+    .bento-grid {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
+
+    .bento-item:first-child,
+    .bento-item:last-child {
+        grid-row: auto;
+        grid-column: auto;
+    }
+}
+```
+
+---
+
+## Section 2: 影片视觉基调与内容设计
+**布局模式：Featured Grid (高亮第一项布局)**
+
+### ASCII 布局图
+```
+┌────────────────────────────────────────────────────────────────┐
+│                      Section 2                                  │
+├────────────────────────────────────────────────────────────────┤
+│  【六大主题章节】 - Featured Grid                               │
+│  ┌─────────────────────┬─────────┬─────────┬─────────┐         │
+│  │                     │         │         │         │         │
+│  │                     │第2章    │第3章    │第4章    │         │
+│  │   🏛️ 第1章          │历史    │美食    │生态    │         │
+│  │   开篇·同里古镇     │文化篇  │篇      │湿地篇  │         │
+│  │                     │         │         │         │         │
+│  │   (grid-row: 1/3)   ├─────────┼─────────┼─────────┤         │
+│  │   占2行             │第5章    │第6章    │         │         │
+│  │                     │农业    │夜游    │         │         │
+│  │   大图展示          │产业篇  │同里篇  │         │         │
+│  │                     │         │         │         │         │
+│  └─────────────────────┴─────────┴─────────┴─────────┘         │
+│         ← 第1章高亮，占2行高度                                  │
+│                                                                 │
+│  【数据展示】 - Progress Bars (进度条样式)                      │
+│  ┌──────────────────────────────────────────────────────┐      │
+│  │ 影片时长  ████████░░ 6-7分钟                         │      │
+│  │ 拍摄章节  ██████████ 6个                             │      │
+│  │ 拍摄地点  ███████░░░ 15+个                           │      │
+│  │ 航拍镜头  ████████░░ 8个                             │      │
+│  └──────────────────────────────────────────────────────┘      │
+└────────────────────────────────────────────────────────────────┘
+```
+
+### CSS 实现
+```css
+/* Featured Grid - 高亮第一项 */
+.featured-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: var(--spacing-xl);
+}
+
+.featured-item:first-child {
+    grid-column: 1 / 2;  /* 占第1列 */
+    grid-row: 1 / 3;     /* 跨2行 */
+    background: linear-gradient(135deg,
+        var(--primary) 0%,
+        var(--secondary) 100%);
+    color: white;
+}
+
+.featured-item:first-child .image-container {
+    aspect-ratio: 3/4;  /* 竖向比例 */
+}
+
+.featured-item:first-child .card-title {
+    font-size: var(--text-3xl);
+}
+
+/* 其他项目正常尺寸 */
+.featured-item:not(:first-child) .image-container {
+    aspect-ratio: 4/3;
+}
+
+/* Progress Bars */
+.progress-stats {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    background: var(--bg-card);
+    padding: var(--spacing-xl);
+    border-radius: var(--radius-lg);
+}
+
+.progress-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.progress-label {
+    flex: 0 0 100px;
+    font-weight: var(--font-semibold);
+}
+
+.progress-bar {
+    flex: 1;
+    height: 8px;
+    background: var(--bg-muted);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg,
+        var(--primary),
+        var(--accent));
+    transition: width 1s ease;
+}
+
+.progress-value {
+    flex: 0 0 80px;
+    text-align: right;
+    font-weight: var(--font-bold);
+    color: var(--primary);
+}
+
+/* 响应式 */
+@media (max-width: 1024px) {
+    .featured-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .featured-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .featured-item:first-child {
+        grid-column: auto;
+        grid-row: auto;
+    }
+}
+```
+
+---
+
+## Section 3: 分镜设计方案
+**布局模式：Timeline Layout (时间线布局)**
+
+### ASCII 布局图
+```
+┌────────────────────────────────────────────────────────────────┐
+│                      Section 3                                  │
+├────────────────────────────────────────────────────────────────┤
+│  【17个分镜设计】 - Vertical Timeline                           │
+│                                                                 │
+│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┐          │
+│  ┃  镜号1 | 15秒                                     │          │
+│  ┃  ┌──────────┐  ┌──────────────────────────┐      │          │
+│  ┃  │   缩略图  │  │ 同里古镇全景航拍         │      │          │
+│  ┃  │  (小图)  │  │ 拍摄方式: 高空俯拍       │      │          │
+│  ┃  └──────────┘  │ 备注: 展现古镇整体布局   │      │          │
+│  ┃                └──────────────────────────┘      │          │
+│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘          │
+│  ┃                                                              │
+│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┐          │
+│  ┃  镜号2 | 12秒                                     │          │
+│  ┃  ┌──────────┐  ┌──────────────────────────┐      │          │
+│  ┃  │   缩略图  │  │ 水乡特色河道             │      │          │
+│  ┃  │  (小图)  │  │ 拍摄方式: 低空航拍       │      │          │
+│  ┃  └──────────┘  │ 备注: 展现水系脉络       │      │          │
+│  ┃                └──────────────────────────┘      │          │
+│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘          │
+│  ┃                                                              │
+│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┐          │
+│  ┃  镜号3 | 20秒                                     │          │
+│  ┃  ...                                              │          │
+│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘          │
+│                                                                 │
+│  ← 垂直时间线，左侧圆点，右侧内容卡片                           │
+│                                                                 │
+│  【拍摄技法总结】 - Icon Grid (图标网格)                        │
+│  ┌────────────┬────────────┬────────────┬────────────┐         │
+│  │ 📐 航拍    │ 🎥 地面    │ ⚡ 特殊    │ 🎨 后期    │         │
+│  │ 8个镜头    │ 6个镜头    │ 3个镜头    │ 调色+特效  │         │
+│  └────────────┴────────────┴────────────┴────────────┘         │
+└────────────────────────────────────────────────────────────────┘
+```
+
+### CSS 实现
+```css
+/* Vertical Timeline */
+.timeline-container {
+    position: relative;
+    padding-left: var(--spacing-3xl);
+}
+
+.timeline-container::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: linear-gradient(
+        to bottom,
+        var(--primary) 0%,
+        var(--accent) 100%
+    );
+}
+
+.timeline-item {
+    position: relative;
+    margin-bottom: var(--spacing-2xl);
+    background: var(--bg-card);
+    padding: var(--spacing-lg);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+}
+
+.timeline-item::before {
+    content: '';
+    position: absolute;
+    left: calc(-1 * var(--spacing-3xl) - 8px);
+    top: var(--spacing-lg);
+    width: 20px;
+    height: 20px;
+    background: var(--primary);
+    border: 3px solid white;
+    border-radius: 50%;
+    box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+.timeline-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+    padding-bottom: var(--spacing-md);
+    border-bottom: 1px solid var(--border);
+}
+
+.timeline-badge {
+    display: inline-block;
+    padding: var(--spacing-xs) var(--spacing-md);
+    background: var(--primary);
+    color: white;
+    border-radius: var(--radius-full);
+    font-weight: var(--font-bold);
+    font-size: var(--text-sm);
+}
+
+.timeline-duration {
+    color: var(--text-gray);
+    font-size: var(--text-sm);
+}
+
+.timeline-content {
+    display: flex;
+    gap: var(--spacing-lg);
+    align-items: flex-start;
+}
+
+.timeline-thumbnail {
+    flex: 0 0 150px;
+    aspect-ratio: 16/9;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background: var(--bg-muted);
+}
+
+.timeline-description {
+    flex: 1;
+}
+
+.timeline-title {
+    font-size: var(--text-xl);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-sm);
+}
+
+.timeline-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    font-size: var(--text-sm);
+    color: var(--text-gray);
+}
+
+/* Icon Grid */
+.icon-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-2xl);
+}
+
+.icon-card {
+    text-align: center;
+    padding: var(--spacing-xl);
+    background: var(--bg-card);
+    border-radius: var(--radius-lg);
+    border: 2px solid var(--border);
+    transition: all 0.3s ease;
+}
+
+.icon-card:hover {
+    border-color: var(--primary);
+    transform: translateY(-5px);
+}
+
+.icon-card-icon {
+    font-size: 3rem;
+    margin-bottom: var(--spacing-md);
+}
+
+.icon-card-title {
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-xs);
+}
+
+.icon-card-value {
+    color: var(--text-gray);
+    font-size: var(--text-sm);
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+    .timeline-content {
+        flex-direction: column;
+    }
+
+    .timeline-thumbnail {
+        flex: 0 0 auto;
+        width: 100%;
+    }
+
+    .icon-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+```
+
+---
+
+## Section 4: 拍摄预算与制作安排
+**布局模式：Accordion Panels (手风琴折叠面板)**
+
+### ASCII 布局图
+```
+┌────────────────────────────────────────────────────────────────┐
+│                      Section 4                                  │
+├────────────────────────────────────────────────────────────────┤
+│  【Accordion手风琴面板】                                        │
+│                                                                 │
+│  ┌──────────────────────────────────────────────────────────┐  │
+│  │ 💰 预算明细 (展开状态)                          ▼        │  │
+│  ├──────────────────────────────────────────────────────────┤  │
+│  │ ┌────────────┬──────────────┬───────┬──────┐             │  │
+│  │ │ 预算项目   │ 明细说明     │ 金额  │ 占比 │             │  │
+│  │ ├────────────┼──────────────┼───────┼──────┤             │  │
+│  │ │ 前期策划   │ 创意策划...  │20,000 │ 7.3% │             │  │
+│  │ │ 导演费用   │ 导演统筹...  │15,000 │ 5.5% │             │  │
+│  │ │ ...        │ ...          │ ...   │ ...  │             │  │
+│  │ └────────────┴──────────────┴───────┴──────┘             │  │
+│  │                                                            │  │
+│  │ 【饼图】预算占比可视化                                     │  │
+│  │    前期策划 7.3%                                           │  │
+│  │    ●●○○○○○○○○                                           │  │
+│  │    器材租赁 16.4%                                          │  │
+│  │    ●●●○○○○○○○                                           │  │
+│  │    后期剪辑 18.3%                                          │  │
+│  │    ●●●●○○○○○○                                           │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                 │
+│  ┌──────────────────────────────────────────────────────────┐  │
+│  │ 👥 团队配置 (折叠状态)                          ▶        │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                 │
+│  ┌──────────────────────────────────────────────────────────┐  │
+│  │ 📅 拍摄进度 (折叠状态)                          ▶        │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                 │
+│  ┌──────────────────────────────────────────────────────────┐  │
+│  │ 📷 器材清单 (折叠状态)                          ▶        │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                 │
+│  ┌──────────────────────────────────────────────────────────┐  │
+│  │ 🎬 后期制作 (折叠状态)                          ▶        │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                 │
+│  ← 点击展开/折叠，节省空间，清晰分类                           │
+└────────────────────────────────────────────────────────────────┘
+```
+
+### CSS 实现
+```css
+/* Accordion Container */
+.accordion-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.accordion-item {
+    background: var(--bg-card);
+    border-radius: var(--radius-lg);
+    border: 2px solid var(--border);
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.accordion-item.active {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+.accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-lg) var(--spacing-xl);
+    background: var(--bg-semi-dark);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.accordion-header:hover {
+    background: var(--bg-hover);
+}
+
+.accordion-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    font-size: var(--text-xl);
+    font-weight: var(--font-semibold);
+}
+
+.accordion-icon {
+    font-size: 1.5rem;
+}
+
+.accordion-toggle {
+    font-size: 1.5rem;
+    color: var(--text-gray);
+    transition: transform 0.3s ease;
+}
+
+.accordion-item.active .accordion-toggle {
+    transform: rotate(180deg);
+}
+
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.5s ease;
+    padding: 0 var(--spacing-xl);
+}
+
+.accordion-item.active .accordion-content {
+    max-height: 2000px;  /* 足够大的值 */
+    padding: var(--spacing-xl);
+}
+
+/* 预算饼图样式 */
+.budget-chart {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    margin-top: var(--spacing-lg);
+}
+
+.chart-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.chart-label {
+    flex: 0 0 150px;
+    font-size: var(--text-sm);
+}
+
+.chart-bar {
+    flex: 1;
+    height: 12px;
+    background: var(--bg-muted);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+}
+
+.chart-fill {
+    height: 100%;
+    background: linear-gradient(90deg,
+        var(--primary),
+        var(--accent));
+    border-radius: var(--radius-full);
+    transition: width 1s ease;
+}
+
+.chart-value {
+    flex: 0 0 60px;
+    text-align: right;
+    font-weight: var(--font-bold);
+    color: var(--primary);
+    font-size: var(--text-sm);
+}
+
+/* 团队卡片网格 */
+.team-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-lg);
+}
+
+.team-card {
+    text-align: center;
+    padding: var(--spacing-lg);
+    background: var(--bg-muted);
+    border-radius: var(--radius-md);
+}
+
+.team-icon {
+    font-size: 2rem;
+    margin-bottom: var(--spacing-sm);
+}
+
+.team-role {
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-xs);
+}
+
+.team-count {
+    color: var(--text-gray);
+    font-size: var(--text-sm);
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+    .accordion-header {
+        padding: var(--spacing-md);
+    }
+
+    .accordion-title {
+        font-size: var(--text-lg);
+    }
+
+    .team-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+```
+
+### JavaScript 交互
+```javascript
+// Accordion 交互逻辑
+document.querySelectorAll('.accordion-header').forEach(header => {
+    header.addEventListener('click', () => {
+        const item = header.parentElement;
+        const wasActive = item.classList.contains('active');
+
+        // 关闭所有其他面板
+        document.querySelectorAll('.accordion-item').forEach(otherItem => {
+            otherItem.classList.remove('active');
+        });
+
+        // 切换当前面板
+        if (!wasActive) {
+            item.classList.add('active');
+        }
+    });
+});
+
+// 默认打开第一个面板
+document.querySelector('.accordion-item')?.classList.add('active');
+```
+
+---
+
+## 布局对比总结
+
+### 各Section布局特点
+
+| Section | 布局模式 | 关键特征 | 适用场景 |
+|---------|---------|---------|---------|
+| **Section 1** | Alternating Layout + Bento Grid | 左右交替 + 不规则网格 | 图文并茂展示，第一印象 |
+| **Section 2** | Featured Grid | 第1项高亮占2行 | 突出重点章节 |
+| **Section 3** | Timeline | 垂直时间线 | 按时间顺序展示流程 |
+| **Section 4** | Accordion | 折叠面板 | 大量分类信息收纳 |
+
+### 布局多样性达成
+✅ **0重复** - 每个Section完全不同的布局模式
+✅ **视觉层次** - 从开放布局到紧凑布局逐步过渡
+✅ **交互丰富** - 静态展示 + 动态交互结合
+✅ **响应式完善** - 所有布局都支持移动端
+
+---
+
+## 实施步骤
+
+1. **Section 1**:
+   - 替换Grid-2为Alternating Layout
+   - 替换Grid-4为Bento Grid
+
+2. **Section 2**:
+   - Grid-3改为Featured Grid
+   - Stats改为Progress Bars
+
+3. **Section 3**:
+   - Table保留但改为Timeline卡片
+   - Grid-3改为Icon Grid
+
+4. **Section 4**:
+   - 所有内容整合到Accordion面板
+   - Table和Grid作为面板内容展示
+
+---
+
+**设计完成时间**: 2025年10月
+**设计师**: Claude Code Assistant
+**版本**: v1.0

web_frontend/web_result/order-classes/visual-design/TIMELINE_ITEMS.txt

@@ -0,0 +1,342 @@
+<!-- Timeline Layout - 17个分镜设计 -->
+<div class="timeline-container" style="margin-top: var(--spacing-xl);">
+    <!-- 镜号1 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 1</span>
+            <span class="timeline-duration">| 15秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/同里古建筑航拍.jpg" alt="同里古镇全景航拍" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">同里古镇全景航拍</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 高空俯拍</div>
+                    <div><strong>备注:</strong> 展现古镇整体布局</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号2 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 2</span>
+            <span class="timeline-duration">| 12秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/配色表.jpg" alt="水乡特色河道" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">水乡特色河道</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 低空航拍</div>
+                    <div><strong>备注:</strong> 展现水系脉络</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号3 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 3</span>
+            <span class="timeline-duration">| 20秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/古镇文化展示.jpg" alt="退思园建筑群" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">退思园建筑群</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 地面推进</div>
+                    <div><strong>备注:</strong> 世界遗产重点展示</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号4 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 4</span>
+            <span class="timeline-duration">| 18秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/古镇文化展示.jpg" alt="三桥文化场景" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">三桥文化场景</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 平移拍摄</div>
+                    <div><strong>备注:</strong> 传统婚俗展现</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号5 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 5</span>
+            <span class="timeline-duration">| 10秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/古镇文化展示.jpg" alt="古建筑细节特写" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">古建筑细节特写</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 微距镜头</div>
+                    <div><strong>备注:</strong> 雕花、砖雕等工艺</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号6 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 6</span>
+            <span class="timeline-duration">| 15秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/江南美食展示.jpg" alt="状元蹄制作过程" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">状元蹄制作过程</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 近景拍摄</div>
+                    <div><strong>备注:</strong> 传统烹饪技艺</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号7 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 7</span>
+            <span class="timeline-duration">| 12秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/江南美食展示.jpg" alt="袜底酥制作特写" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">袜底酥制作特写</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 微距慢动作</div>
+                    <div><strong>备注:</strong> 酥皮层次展示</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号8 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 8</span>
+            <span class="timeline-duration">| 18秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/江南美食展示.jpg" alt="美食街市井生活" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">美食街市井生活</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 跟拍镜头</div>
+                    <div><strong>备注:</strong> 烟火气氛围</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号9 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 9</span>
+            <span class="timeline-duration">| 20秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/湿地生态景观.jpg" alt="湿地公园全景" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">湿地公园全景</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 航拍环绕</div>
+                    <div><strong>备注:</strong> 生态美景全貌</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号10 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 10</span>
+            <span class="timeline-duration">| 15秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/湿地生态景观.jpg" alt="候鸟栖息场景" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">候鸟栖息场景</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 长焦拍摄</div>
+                    <div><strong>备注:</strong> 生态多样性</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号11 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 11</span>
+            <span class="timeline-duration">| 25秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/湿地生态景观.jpg" alt="晨雾与日出" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">晨雾与日出</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 延时摄影</div>
+                    <div><strong>备注:</strong> 自然意境营造</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号12 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 12</span>
+            <span class="timeline-duration">| 15秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/农旅融合展示.jpg" alt="现代农业大棚" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">现代农业大棚</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 内景拍摄</div>
+                    <div><strong>备注:</strong> 科技农业展示</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号13 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 13</span>
+            <span class="timeline-duration">| 18秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/稻田航拍.jpg" alt="稻田丰收场景" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">稻田丰收场景</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 航拍俯视</div>
+                    <div><strong>备注:</strong> 农业产业成果</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号14 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 14</span>
+            <span class="timeline-duration">| 12秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/农旅融合展示.jpg" alt="农民劳作特写" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">农民劳作特写</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 近景拍摄</div>
+                    <div><strong>备注:</strong> 乡村振兴主题</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号15 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 15</span>
+            <span class="timeline-duration">| 20秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/古镇夜景.jpg" alt="古镇夜景全景" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">古镇夜景全景</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 高空航拍</div>
+                    <div><strong>备注:</strong> 灯光璀璨效果</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号16 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 16</span>
+            <span class="timeline-duration">| 18秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/古镇夜景.jpg" alt="桥影与水面倒影" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">桥影与水面倒影</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 平移慢镜</div>
+                    <div><strong>备注:</strong> 夜景意境营造</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 镜号17 -->
+    <div class="timeline-item">
+        <div class="timeline-header">
+            <span class="timeline-badge">镜号 17</span>
+            <span class="timeline-duration">| 22秒</span>
+        </div>
+        <div class="timeline-content">
+            <div class="timeline-thumbnail">
+                <img data-src="images/古镇夜景.jpg" alt="夜市文化活动" loading="lazy">
+            </div>
+            <div class="timeline-description">
+                <h4 class="timeline-title">夜市文化活动</h4>
+                <div class="timeline-details">
+                    <div><strong>拍摄方式:</strong> 摇臂拍摄</div>
+                    <div><strong>备注:</strong> 结尾氛围烘托</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

web_frontend/web_result/order-classes/visual-design/css/styles.css

@@ -17,14 +17,14 @@
     --hover-bg: rgba(217, 119, 6, 0.15);     /* 悬停背景 */
     --active-bg: rgba(217, 119, 6, 0.2);     /* 激活背景 */
 
-    /* 间距系统 - 针对大屏幕优化 */
-    --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 */
-    --spacing-3xl: 8rem;      /* 128px */
+    /* 间距系统 - 紧凑布局优化 */
+    --spacing-xs: 0.5rem;     /* 8px */
+    --spacing-sm: 0.875rem;   /* 14px */
+    --spacing-md: 1.25rem;    /* 20px */
+    --spacing-lg: 2rem;       /* 32px */
+    --spacing-xl: 2.5rem;     /* 40px */
+    --spacing-2xl: 3.5rem;    /* 56px */
+    --spacing-3xl: 5rem;      /* 80px */
 
     /* 字体系统 */
     --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -531,7 +531,7 @@ body.dark-theme tr:hover {
 }
 
 .grid-3 {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
 }
 
 .grid-4 {
@@ -733,12 +733,12 @@ tr:hover {
 /* ========== 响应式 ========== */
 @media (max-width: 768px) {
     :root {
-        --spacing-sm: 0.75rem;
-        --spacing-md: 1rem;
-        --spacing-lg: 1.5rem;
-        --spacing-xl: 2rem;
-        --spacing-2xl: 3rem;
-        --spacing-3xl: 4rem;
+        --spacing-sm: 0.625rem;   /* 10px */
+        --spacing-md: 0.875rem;   /* 14px */
+        --spacing-lg: 1.25rem;    /* 20px */
+        --spacing-xl: 1.5rem;     /* 24px */
+        --spacing-2xl: 2.25rem;   /* 36px */
+        --spacing-3xl: 3rem;      /* 48px */
     }
 
     .hero {
@@ -959,3 +959,907 @@ body.dark-theme .theme-icon-dark {
 body.dark-theme .theme-icon-light {
     opacity: 0.5;
 }
+
+/* ========== Section 1: Alternating Layout (左右交替布局) ========== */
+.alternating-layout {
+    display: flex;
+    gap: var(--spacing-2xl);
+    align-items: center;
+    margin-bottom: var(--spacing-3xl);
+}
+
+.alternating-layout:nth-child(even) {
+    flex-direction: row-reverse;  /* 偶数项反向 */
+}
+
+.alternating-layout .image-container {
+    flex: 0 0 45%;  /* 图片占45% */
+    aspect-ratio: 16/9;
+}
+
+.alternating-layout .content {
+    flex: 1;  /* 内容占剩余空间 */
+}
+
+/* Bento Grid 不规则网格 */
+.bento-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: var(--spacing-xl);
+}
+
+.bento-item:first-child {
+    grid-row: 1 / 3;  /* 第1项占2行 */
+}
+
+.bento-item:last-child {
+    grid-column: 2 / 4;  /* 最后1项占2列 */
+}
+
+/* 响应式 - Alternating Layout */
+@media (max-width: 768px) {
+    .alternating-layout {
+        flex-direction: column !important;
+    }
+
+    .bento-grid {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
+
+    .bento-item:first-child,
+    .bento-item:last-child {
+        grid-row: auto;
+        grid-column: auto;
+    }
+}
+
+/* ========== Section 2: Featured Grid (高亮第一项布局) ========== */
+.featured-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: var(--spacing-xl);
+}
+
+.featured-item:first-child {
+    grid-column: 1 / 2;  /* 占第1列 */
+    grid-row: 1 / 3;     /* 跨2行 */
+    background: linear-gradient(135deg,
+        var(--primary-amber) 0%,
+        var(--accent-slate) 100%);
+}
+
+.featured-item:first-child .image-container {
+    aspect-ratio: 3/4;  /* 竖向比例 */
+}
+
+.featured-item:first-child .card-title {
+    font-size: var(--text-3xl);
+    color: var(--text-light);
+}
+
+.featured-item:first-child .card-header {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.featured-item:first-child .card-body {
+    color: var(--text-light);
+}
+
+.featured-item:first-child .feature-list li {
+    color: var(--text-light);
+    border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+/* 其他项目正常尺寸 */
+.featured-item:not(:first-child) .image-container {
+    aspect-ratio: 4/3;
+}
+
+/* Progress Bars - 进度条样式 */
+.progress-stats {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    background: var(--bg-card);
+    backdrop-filter: blur(10px);
+    padding: var(--spacing-xl);
+    border-radius: var(--radius-lg);
+    border: 2px solid var(--border-light);
+    box-shadow: var(--shadow-md);
+}
+
+.progress-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.progress-label {
+    flex: 0 0 100px;
+    font-weight: var(--font-semibold);
+    color: var(--text-light);
+}
+
+.progress-bar {
+    flex: 1;
+    height: 12px;
+    background: var(--bg-muted);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg,
+        var(--primary-amber),
+        var(--accent-amber-light));
+    border-radius: var(--radius-full);
+    transition: width 1s ease;
+}
+
+.progress-value {
+    flex: 0 0 80px;
+    text-align: right;
+    font-weight: var(--font-bold);
+    color: var(--primary-amber);
+}
+
+/* 响应式 - Featured Grid */
+@media (max-width: 1024px) {
+    .featured-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .featured-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .featured-item:first-child {
+        grid-column: auto;
+        grid-row: auto;
+    }
+
+    .featured-item:first-child .image-container {
+        aspect-ratio: 16/9;
+    }
+}
+
+/* ========== Section 3: Timeline Layout (垂直时间线布局) ========== */
+.timeline-container {
+    position: relative;
+    padding-left: var(--spacing-3xl);
+}
+
+.timeline-container::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: linear-gradient(
+        to bottom,
+        var(--primary-amber) 0%,
+        var(--accent-amber-light) 100%
+    );
+}
+
+.timeline-item {
+    position: relative;
+    margin-bottom: var(--spacing-2xl);
+    background: var(--bg-card);
+    backdrop-filter: blur(10px);
+    padding: 0;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    border: 2px solid var(--border-light);
+    transition: all var(--transition-base);
+    overflow: hidden;
+}
+
+.timeline-item:hover {
+    transform: translateX(8px) translateY(-4px);
+    box-shadow: var(--shadow-xl), var(--shadow-amber);
+    border-color: var(--primary-amber);
+}
+
+.timeline-item::before {
+    content: '';
+    position: absolute;
+    left: calc(-1 * var(--spacing-3xl) - 8px);
+    top: var(--spacing-lg);
+    width: 20px;
+    height: 20px;
+    background: var(--primary-amber);
+    border: 3px solid white;
+    border-radius: 50%;
+    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.3);
+    z-index: 10;
+}
+
+.timeline-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg);
+    background: var(--bg-semi-dark);
+    border-bottom: 2px solid var(--border-light);
+}
+
+.timeline-badge {
+    display: inline-block;
+    padding: var(--spacing-xs) var(--spacing-md);
+    background: var(--primary-amber);
+    color: white;
+    border-radius: var(--radius-full);
+    font-weight: var(--font-bold);
+    font-size: var(--text-sm);
+}
+
+.timeline-duration {
+    color: var(--text-gray);
+    font-size: var(--text-sm);
+    font-weight: var(--font-semibold);
+}
+
+.timeline-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.timeline-thumbnail {
+    width: 100%;
+    aspect-ratio: 16/9;
+    border-radius: 0;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.1);
+    position: relative;
+}
+
+.timeline-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.timeline-description {
+    padding: var(--spacing-lg);
+}
+
+.timeline-title {
+    font-size: var(--text-xl);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-md);
+    color: var(--primary-amber);
+}
+
+.timeline-details {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-sm);
+    font-size: var(--text-sm);
+    color: var(--text-gray);
+    padding: var(--spacing-md) 0;
+    border-top: 1px solid var(--border-light);
+    border-bottom: 1px solid var(--border-light);
+    margin-bottom: var(--spacing-md);
+}
+
+.timeline-detail-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.timeline-detail-label {
+    font-weight: var(--font-semibold);
+    color: var(--primary-amber);
+    margin-bottom: var(--spacing-xs);
+}
+
+.timeline-detail-value {
+    color: var(--text-gray);
+}
+
+.timeline-remark {
+    font-size: var(--text-sm);
+    color: var(--text-gray);
+    line-height: 1.6;
+}
+
+/* Icon Grid (图标网格) */
+.icon-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-2xl);
+}
+
+.icon-card {
+    text-align: center;
+    padding: var(--spacing-xl);
+    background: var(--bg-card);
+    backdrop-filter: blur(10px);
+    border-radius: var(--radius-lg);
+    border: 2px solid var(--border-light);
+    transition: all 0.3s ease;
+}
+
+.icon-card:hover {
+    border-color: var(--primary-amber);
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+}
+
+.icon-card-icon {
+    font-size: 3rem;
+    margin-bottom: var(--spacing-md);
+}
+
+.icon-card-title {
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-xs);
+    color: var(--primary-amber);
+}
+
+.icon-card-value {
+    color: var(--text-gray);
+    font-size: var(--text-sm);
+}
+
+/* 响应式 - Timeline */
+@media (max-width: 768px) {
+    .timeline-container {
+        padding-left: var(--spacing-xl);
+    }
+
+    .timeline-content {
+        flex-direction: column;
+    }
+
+    .timeline-thumbnail {
+        flex: 0 0 auto;
+        width: 100%;
+    }
+
+    .icon-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* ========== Section 4: Accordion Layout (手风琴折叠面板) ========== */
+.accordion-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    margin-top: var(--spacing-xl);
+}
+
+.accordion-item {
+    background: var(--bg-card);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: var(--radius-lg);
+    border: 2px solid var(--border-light);
+    overflow: hidden;
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-md);
+}
+
+.accordion-item.active {
+    border-color: var(--primary-amber);
+    box-shadow: var(--shadow-xl), 0 0 0 3px rgba(217, 119, 6, 0.15);
+}
+
+.accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-lg) var(--spacing-xl);
+    background: var(--bg-semi-dark);
+    cursor: pointer;
+    transition: all var(--transition-base);
+    user-select: none;
+}
+
+.accordion-header:hover {
+    background: var(--hover-bg);
+}
+
+.accordion-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    font-size: var(--text-xl);
+    font-weight: var(--font-semibold);
+    color: var(--text-light);
+}
+
+.accordion-icon {
+    font-size: 1.5rem;
+}
+
+.accordion-toggle {
+    font-size: 1.5rem;
+    color: var(--text-gray);
+    transition: transform var(--transition-base);
+    width: 24px;
+    height: 24px;
+}
+
+.accordion-item.active .accordion-toggle {
+    transform: rotate(180deg);
+}
+
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.5s ease;
+    padding: 0 var(--spacing-xl);
+}
+
+.accordion-item.active .accordion-content {
+    max-height: none;  /* 移除高度限制，确保所有内容可见 */
+    overflow: visible;  /* 允许内容完全显示 */
+    padding: var(--spacing-xl);
+    padding-top: 0;
+}
+
+.accordion-content-inner {
+    padding-top: var(--spacing-lg);
+}
+
+/* 预算饼图样式 */
+.budget-chart {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    margin-top: var(--spacing-lg);
+}
+
+.chart-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.chart-label {
+    flex: 0 0 150px;
+    font-size: var(--text-sm);
+    color: var(--text-light);
+    font-weight: var(--font-medium);
+}
+
+.chart-bar {
+    flex: 1;
+    height: 12px;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+}
+
+.chart-fill {
+    height: 100%;
+    background: linear-gradient(90deg,
+        var(--primary-amber),
+        var(--accent-amber-light));
+    border-radius: var(--radius-full);
+    transition: width 1s ease;
+}
+
+.chart-value {
+    flex: 0 0 60px;
+    text-align: right;
+    font-weight: var(--font-bold);
+    color: var(--primary-amber);
+    font-size: var(--text-sm);
+}
+
+/* 团队卡片网格 */
+.team-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-lg);
+}
+
+.team-card {
+    text-align: center;
+    padding: var(--spacing-lg);
+    background: rgba(217, 119, 6, 0.05);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-light);
+    transition: all var(--transition-base);
+}
+
+.team-card:hover {
+    background: var(--hover-bg);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.team-icon {
+    font-size: 2rem;
+    margin-bottom: var(--spacing-sm);
+}
+
+.team-role {
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-xs);
+    color: var(--primary-amber);
+}
+
+.team-count {
+    color: var(--text-gray);
+    font-size: var(--text-sm);
+}
+
+/* 响应式 - Accordion */
+@media (max-width: 768px) {
+    .accordion-header {
+        padding: var(--spacing-md);
+    }
+
+    .accordion-title {
+        font-size: var(--text-lg);
+    }
+
+    .team-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .chart-label {
+        flex: 0 0 100px;
+    }
+}
+
+/* ========== 图片对比滑动器 (Image Comparison Slider) ========== */
+.comparison-container {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16/9;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xl);
+    background: rgba(0, 0, 0, 0.1);
+    cursor: ew-resize;
+    user-select: none;
+}
+
+.comparison-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.comparison-image-before {
+    z-index: 1;
+}
+
+.comparison-image-after {
+    z-index: 2;
+    clip-path: polygon(0 0, var(--position, 50%) 0, var(--position, 50%) 100%, 0 100%);
+}
+
+.comparison-slider {
+    position: absolute;
+    z-index: 3;
+    top: 0;
+    bottom: 0;
+    left: var(--position, 50%);
+    width: 4px;
+    background: var(--primary-amber);
+    transform: translateX(-50%);
+    cursor: ew-resize;
+    box-shadow: 0 0 20px rgba(217, 119, 6, 0.5);
+}
+
+.comparison-slider::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 48px;
+    height: 48px;
+    background: var(--primary-amber);
+    border-radius: 50%;
+    border: 4px solid white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: all var(--transition-base);
+}
+
+.comparison-slider::after {
+    content: '⬌';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    pointer-events: none;
+}
+
+.comparison-container:hover .comparison-slider::before {
+    width: 56px;
+    height: 56px;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.comparison-labels {
+    position: absolute;
+    top: var(--spacing-md);
+    left: var(--spacing-md);
+    right: var(--spacing-md);
+    z-index: 4;
+    display: flex;
+    justify-content: space-between;
+    pointer-events: none;
+}
+
+.comparison-label {
+    padding: var(--spacing-xs) var(--spacing-md);
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(10px);
+    color: white;
+    font-size: var(--text-sm);
+    font-weight: var(--font-semibold);
+    border-radius: var(--radius-md);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.comparison-label-before {
+    background: rgba(217, 119, 6, 0.9);
+}
+
+.comparison-label-after {
+    background: rgba(100, 116, 139, 0.9);
+}
+
+/* 分镜网格布局 */
+.storyboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: var(--spacing-2xl);
+    margin-top: var(--spacing-xl);
+}
+
+.storyboard-item {
+    background: var(--bg-card);
+    backdrop-filter: blur(10px);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    border: 2px solid var(--border-light);
+    box-shadow: var(--shadow-md);
+    transition: all var(--transition-base);
+}
+
+.storyboard-item:hover {
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-xl);
+    border-color: var(--primary-amber);
+}
+
+.storyboard-meta {
+    padding: var(--spacing-lg);
+    background: var(--bg-semi-dark);
+}
+
+.storyboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-md);
+}
+
+.storyboard-number {
+    display: inline-block;
+    padding: var(--spacing-xs) var(--spacing-md);
+    background: var(--primary-amber);
+    color: white;
+    border-radius: var(--radius-full);
+    font-weight: var(--font-bold);
+    font-size: var(--text-sm);
+}
+
+.storyboard-duration {
+    color: var(--text-gray);
+    font-size: var(--text-sm);
+    font-weight: var(--font-semibold);
+}
+
+.storyboard-details {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-sm);
+    font-size: var(--text-sm);
+    color: var(--text-gray);
+    margin-top: var(--spacing-md);
+    padding-top: var(--spacing-md);
+    border-top: 1px solid var(--border-light);
+}
+
+.storyboard-detail-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.storyboard-detail-label {
+    font-weight: var(--font-semibold);
+    color: var(--primary-amber);
+    margin-bottom: var(--spacing-xs);
+}
+
+.storyboard-detail-value {
+    color: var(--text-gray);
+}
+
+.storyboard-description {
+    margin-top: var(--spacing-md);
+    padding-top: var(--spacing-md);
+    border-top: 1px solid var(--border-light);
+    font-size: var(--text-sm);
+    color: var(--text-gray);
+    line-height: 1.6;
+}
+
+/* 响应式 - 分镜网格 */
+@media (max-width: 768px) {
+    .storyboard-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .comparison-labels {
+        flex-direction: column;
+        gap: var(--spacing-xs);
+        align-items: flex-start;
+    }
+}
+
+/* ========== 图片放大Lightbox模态框 ========== */
+.lightbox-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.95);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--transition-slow), visibility var(--transition-slow);
+    padding: var(--spacing-xl);
+    cursor: zoom-out;
+}
+
+.lightbox-modal.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.lightbox-content {
+    position: relative;
+    max-width: 90vw;
+    max-height: 90vh;
+    transform: scale(0.9);
+    transition: transform var(--transition-slow);
+    cursor: default;
+}
+
+.lightbox-modal.active .lightbox-content {
+    transform: scale(1);
+}
+
+.lightbox-image {
+    max-width: 100%;
+    max-height: 90vh;
+    width: auto;
+    height: auto;
+    border-radius: var(--radius-xl);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8),
+                0 0 0 3px var(--primary-amber);
+    object-fit: contain;
+}
+
+.lightbox-close {
+    position: fixed;
+    top: var(--spacing-xl);
+    right: var(--spacing-xl);
+    width: 60px;
+    height: 60px;
+    background: var(--primary-amber);
+    border: 3px solid white;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-xl);
+    z-index: 10000;
+}
+
+.lightbox-close:hover {
+    background: var(--accent-amber-light);
+    transform: rotate(90deg) scale(1.1);
+    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.6);
+}
+
+.lightbox-close::before,
+.lightbox-close::after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 3px;
+    background: white;
+    border-radius: 2px;
+}
+
+.lightbox-close::before {
+    transform: rotate(45deg);
+}
+
+.lightbox-close::after {
+    transform: rotate(-45deg);
+}
+
+/* 图片信息标签 */
+.lightbox-label {
+    position: fixed;
+    bottom: var(--spacing-xl);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: var(--spacing-md) var(--spacing-xl);
+    background: rgba(217, 119, 6, 0.95);
+    backdrop-filter: blur(10px);
+    color: white;
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    border-radius: var(--radius-full);
+    box-shadow: var(--shadow-xl);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    z-index: 10000;
+}
+
+/* 响应式 - Lightbox */
+@media (max-width: 768px) {
+    .lightbox-modal {
+        padding: var(--spacing-md);
+    }
+
+    .lightbox-close {
+        top: var(--spacing-md);
+        right: var(--spacing-md);
+        width: 48px;
+        height: 48px;
+    }
+
+    .lightbox-close::before,
+    .lightbox-close::after {
+        width: 24px;
+    }
+
+    .lightbox-label {
+        font-size: var(--text-base);
+        padding: var(--spacing-sm) var(--spacing-lg);
+        bottom: var(--spacing-md);
+    }
+}

web_frontend/web_result/order-classes/visual-design/js/main.js

@@ -16,6 +16,9 @@ document.addEventListener('DOMContentLoaded', function() {
     initSmoothScroll();
     updateStats();
     initThemeToggle();
+    initAccordion();
+    initComparisonSlider();
+    initImageLightbox();
 });
 
 // 导航功能
@@ -266,3 +269,221 @@ function initThemeToggle() {
         });
     }
 }
+
+// 手风琴面板交互逻辑
+function initAccordion() {
+    const accordionHeaders = document.querySelectorAll('.accordion-header');
+
+    accordionHeaders.forEach(header => {
+        header.addEventListener('click', () => {
+            const accordionItem = header.parentElement;
+            const wasActive = accordionItem.classList.contains('active');
+
+            // 关闭所有其他面板
+            document.querySelectorAll('.accordion-item').forEach(otherItem => {
+                otherItem.classList.remove('active');
+            });
+
+            // 切换当前面板状态
+            if (!wasActive) {
+                accordionItem.classList.add('active');
+            }
+
+            // 重新初始化Lucide图标以确保折叠箭头正确显示
+            if (typeof lucide !== 'undefined') {
+                lucide.createIcons();
+            }
+        });
+    });
+
+    // 默认打开第一个面板（预算明细）
+    const firstAccordionItem = document.querySelector('.accordion-item');
+    if (firstAccordionItem && !firstAccordionItem.classList.contains('active')) {
+        firstAccordionItem.classList.add('active');
+    }
+}
+
+// 图片对比滑块交互逻辑
+function initComparisonSlider() {
+    const comparisonContainers = document.querySelectorAll('.comparison-container');
+
+    comparisonContainers.forEach(container => {
+        const slider = container.querySelector('.comparison-slider');
+        const afterImage = container.querySelector('.comparison-image-after');
+
+        let isDragging = false;
+
+        // 更新滑块位置
+        function updatePosition(clientX) {
+            const rect = container.getBoundingClientRect();
+            const x = clientX - rect.left;
+            const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+
+            container.style.setProperty('--position', `${percentage}%`);
+        }
+
+        // 鼠标事件
+        function handleMouseDown(e) {
+            isDragging = true;
+            container.style.cursor = 'ew-resize';
+            updatePosition(e.clientX);
+            e.preventDefault();
+        }
+
+        function handleMouseMove(e) {
+            if (!isDragging) return;
+            updatePosition(e.clientX);
+        }
+
+        function handleMouseUp() {
+            isDragging = false;
+            container.style.cursor = 'ew-resize';
+        }
+
+        // 触摸事件
+        function handleTouchStart(e) {
+            isDragging = true;
+            updatePosition(e.touches[0].clientX);
+            e.preventDefault();
+        }
+
+        function handleTouchMove(e) {
+            if (!isDragging) return;
+            updatePosition(e.touches[0].clientX);
+            e.preventDefault();
+        }
+
+        function handleTouchEnd() {
+            isDragging = false;
+        }
+
+        // 绑定事件监听器
+        container.addEventListener('mousedown', handleMouseDown);
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+
+        container.addEventListener('touchstart', handleTouchStart, { passive: false });
+        document.addEventListener('touchmove', handleTouchMove, { passive: false });
+        document.addEventListener('touchend', handleTouchEnd);
+
+        // 点击直接跳转到点击位置
+        container.addEventListener('click', (e) => {
+            if (!isDragging) {
+                updatePosition(e.clientX);
+            }
+        });
+    });
+}
+
+// 图片放大Lightbox功能
+function initImageLightbox() {
+    // 创建Lightbox模态框HTML结构
+    const lightboxHTML = `
+        <div class="lightbox-modal" id="lightboxModal">
+            <div class="lightbox-content">
+                <img src="" alt="放大图片" class="lightbox-image" id="lightboxImage">
+            </div>
+            <div class="lightbox-close" id="lightboxClose"></div>
+            <div class="lightbox-label" id="lightboxLabel"></div>
+        </div>
+    `;
+
+    // 将Lightbox添加到页面底部
+    document.body.insertAdjacentHTML('beforeend', lightboxHTML);
+
+    const lightboxModal = document.getElementById('lightboxModal');
+    const lightboxImage = document.getElementById('lightboxImage');
+    const lightboxLabel = document.getElementById('lightboxLabel');
+    const lightboxClose = document.getElementById('lightboxClose');
+
+    // 获取所有对比图片
+    const comparisonImages = document.querySelectorAll('.comparison-image');
+
+    // 跟踪拖动状态
+    let dragStartTime = 0;
+    let dragStartX = 0;
+    let dragStartY = 0;
+
+    comparisonImages.forEach(img => {
+        // 记录鼠标按下位置和时间
+        img.addEventListener('mousedown', (e) => {
+            dragStartTime = Date.now();
+            dragStartX = e.clientX;
+            dragStartY = e.clientY;
+        });
+
+        img.addEventListener('touchstart', (e) => {
+            dragStartTime = Date.now();
+            dragStartX = e.touches[0].clientX;
+            dragStartY = e.touches[0].clientY;
+        }, { passive: true });
+
+        // 点击图片打开Lightbox
+        img.addEventListener('click', (e) => {
+            const dragDuration = Date.now() - dragStartTime;
+            const dragDistanceX = Math.abs(e.clientX - dragStartX);
+            const dragDistanceY = Math.abs(e.clientY - dragStartY);
+            const dragDistance = Math.sqrt(dragDistanceX * dragDistanceX + dragDistanceY * dragDistanceY);
+
+            // 只有快速点击且移动距离小于10px才打开Lightbox
+            if (dragDuration < 200 && dragDistance < 10) {
+                openLightbox(img);
+                e.stopPropagation(); // 阻止事件冒泡到comparison-container
+            }
+        });
+    });
+
+    // 打开Lightbox
+    function openLightbox(img) {
+        // 获取图片源（已经通过懒加载完成）
+        const imgSrc = img.src || img.getAttribute('data-src');
+
+        // 如果图片还未加载，等待加载
+        if (!img.src || img.src.includes('data:image/svg+xml')) {
+            console.warn('图片尚未加载完成');
+            return;
+        }
+
+        // 判断是"生成图"还是"线稿"
+        const isAfter = img.classList.contains('comparison-image-after');
+        const labelText = isAfter ? '线稿' : '生成图';
+
+        // 设置图片和标签
+        lightboxImage.src = imgSrc;
+        lightboxLabel.textContent = labelText;
+
+        // 显示模态框
+        lightboxModal.classList.add('active');
+
+        // 禁止页面滚动
+        document.body.style.overflow = 'hidden';
+    }
+
+    // 关闭Lightbox
+    function closeLightbox() {
+        lightboxModal.classList.remove('active');
+
+        // 恢复页面滚动
+        document.body.style.overflow = '';
+    }
+
+    // 关闭按钮点击事件
+    lightboxClose.addEventListener('click', (e) => {
+        closeLightbox();
+        e.stopPropagation();
+    });
+
+    // 点击遮罩层关闭（点击图片本身不关闭）
+    lightboxModal.addEventListener('click', (e) => {
+        if (e.target === lightboxModal) {
+            closeLightbox();
+        }
+    });
+
+    // ESC键关闭
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && lightboxModal.classList.contains('active')) {
+            closeLightbox();
+        }
+    });
+}