feat: 完成能源订单班光伏AOI检测展示页面

详细说明:
- 创建光伏晶硅电池片印后AOI检测与分拣单元展示页面
- 橙黄色太阳能主题设计(#f59e0b主色橙, #d97706琥珀色强调)
- 4个核心模块:
  * 自动化控制工程师 - 项目概述与设备选型
  * PLC工程师 - PLC控制逻辑与I/O配置(14输入/13输出)
  * 机器人调试工程师 - 机器人编程与分拣逻辑(RAPID, ≤0.8秒节拍)
  * 机器视觉识别工程师 - 视觉标定与性能验证(ViDi深度学习, 7类缺陷)
- 技术栈: 西门子S7-1500 PLC + ABB IRB 1200六轴机器人 + 康耐视In-Sight D900视觉系统
- 性能指标: ≥3600片/时产能, 99.7%检出率, ≤0.3%漏检率, ≤300ms检测时间
- 检测缺陷类型: 断栅/漏印/拖浆/脏污/划伤/崩边/色差
- 完成化工订单班图片处理记录归档

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

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

web_frontend/web_result/order-classes/energy/agent-avatars

@@ -0,0 +1 @@
+../../../../../data/订单班文档资料/能源/agent头像

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

@@ -0,0 +1,961 @@
+/* 光伏晶硅电池片印后AOI检测与分拣单元 - 能源订单班橙黄太阳能设计系统 */
+
+/* ========== 设计变量 ========== */
+:root {
+    /* 橙黄太阳能主题 - 能源风格 */
+    --bg-dark: #fffbeb;              /* 浅黄背景 */
+    --bg-semi-dark: rgba(255, 251, 235, 0.95);  /* 半透明浅黄 */
+    --bg-overlay: rgba(255, 255, 255, 0.85);    /* 白色遮罩 */
+    --bg-card: rgba(255, 255, 255, 0.9);        /* 卡片背景 */
+    --primary-dark: #78350f;         /* 主色深橙 */
+    --primary-orange: #f59e0b;       /* 主色橙 - 能源专业 */
+    --accent-amber: #d97706;         /* 琥珀色强调 - 太阳能主题 */
+    --accent-amber-light: #fbbf24;   /* 浅琥珀色 */
+    --text-light: #78350f;           /* 深色文字 */
+    --text-gray: #6b7280;            /* 灰色文字 */
+    --border-light: rgba(245, 158, 11, 0.2);  /* 橙色边框 */
+    --hover-bg: rgba(245, 158, 11, 0.15);     /* 悬停背景 */
+    --active-bg: rgba(245, 158, 11, 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 */
+
+    /* 字体系统 */
+    --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-display: 'Inter', sans-serif;
+
+    /* 字体大小 - 针对大屏幕优化 */
+    --text-xs: 0.875rem;      /* 14px */
+    --text-sm: 1rem;          /* 16px */
+    --text-base: 1.125rem;    /* 18px */
+    --text-lg: 1.375rem;      /* 22px */
+    --text-xl: 1.625rem;      /* 26px */
+    --text-2xl: 2rem;         /* 32px */
+    --text-3xl: 2.5rem;       /* 40px */
+    --text-4xl: 3rem;         /* 48px */
+    --text-5xl: 4rem;         /* 64px */
+
+    /* 字重 */
+    --font-light: 300;
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+    --font-bold: 700;
+
+    /* 圆角 */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-2xl: 1.5rem;
+    --radius-full: 9999px;
+
+    /* 阴影 - 轻盈专业主题 */
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+    --shadow-md: 0 2px 4px rgba(0,0,0,0.08);
+    --shadow-lg: 0 4px 8px rgba(0,0,0,0.1);
+    --shadow-xl: 0 8px 16px rgba(0,0,0,0.12);
+    --shadow-orange: 0 2px 8px rgba(245, 158, 11, 0.15);
+
+    /* 过渡 */
+    --transition-fast: 150ms ease;
+    --transition-base: 250ms ease;
+    --transition-slow: 350ms ease;
+
+    /* 布局 */
+    --container-max: 1600px;  /* 增加最大宽度适配1920屏幕 */
+}
+
+/* ========== 深色主题 - 深邃橙黄配色 ========== */
+body.dark-theme {
+    --bg-dark: #78350f;                      /* 深邃橙黑背景 */
+    --bg-semi-dark: rgba(120, 53, 15, 0.95); /* 深橙半透明 */
+    --bg-overlay: rgba(217, 119, 6, 0.85);   /* 深橙遮罩层 */
+    --bg-card: rgba(245, 158, 11, 0.9);      /* 深橙卡片背景 */
+    --primary-dark: #78350f;                 /* 深邃橙黑 */
+    --primary-orange: #fbbf24;               /* 明亮橙 */
+    --accent-amber: #fcd34d;                 /* 亮琥珀色 */
+    --accent-amber-light: #fde68a;           /* 超亮琥珀色 */
+    --text-light: #fffbeb;                   /* 浅色文字 */
+    --text-gray: #fde68a;                    /* 灰色文字 */
+    --border-light: rgba(251, 191, 36, 0.25); /* 橙色边框 */
+    --hover-bg: rgba(245, 158, 11, 0.15);    /* 悬停背景 */
+    --active-bg: rgba(251, 191, 36, 0.2);    /* 激活背景 */
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+    --shadow-md: 0 2px 4px rgba(0,0,0,0.5);
+    --shadow-lg: 0 4px 8px rgba(0,0,0,0.6);
+    --shadow-xl: 0 8px 16px rgba(0,0,0,0.7);
+    --shadow-orange: 0 2px 8px rgba(245, 158, 11, 0.25);
+}
+
+/* ========== 重置样式 ========== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: var(--font-primary);
+    font-size: var(--text-base);
+    line-height: 1.6;
+    color: var(--text-light);
+    background-color: var(--bg-dark);
+    overflow-x: hidden;
+}
+
+/* ========== Hero 区域 - 全屏图片背景 ========== */
+.hero {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background:
+        linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 0.95) 100%),
+        url('../images/光伏面板生成画面.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    position: relative;
+    overflow: hidden;
+}
+
+/* 深色主题下的Hero渐变 */
+body.dark-theme .hero {
+    background:
+        linear-gradient(135deg, rgba(120, 53, 15, 0.9) 0%, rgba(217, 119, 6, 0.8) 100%),
+        url('../images/光伏面板生成画面.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image:
+        radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(217, 119, 6, 0.05) 0%, transparent 50%);
+    pointer-events: none;
+    animation: glow 8s ease-in-out infinite;
+}
+
+@keyframes glow {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+.hero-content {
+    text-align: center;
+    color: var(--text-light);
+    z-index: 1;
+    position: relative;
+    padding: var(--spacing-xl);
+    max-width: 900px;
+}
+
+.hero-badge {
+    display: inline-block;
+    padding: var(--spacing-md) var(--spacing-xl);
+    background: rgba(245, 158, 11, 0.15);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: var(--radius-full);
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    letter-spacing: 0.1em;
+    margin-bottom: var(--spacing-xl);
+    border: 3px solid var(--primary-orange);
+    box-shadow: var(--shadow-orange);
+    text-transform: uppercase;
+    transition: all var(--transition-base);
+}
+
+.hero-badge:hover {
+    background: rgba(245, 158, 11, 0.25);
+    transform: translateY(-2px);
+}
+
+.hero-title {
+    font-size: clamp(3.5rem, 10vw, 6.5rem);
+    font-weight: var(--font-bold);
+    margin-bottom: var(--spacing-lg);
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+    color: var(--accent-amber-light);
+    text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(245, 158, 11, 0.4);
+}
+
+.hero-subtitle {
+    font-size: clamp(1.5rem, 4vw, 2.5rem);
+    font-weight: var(--font-light);
+    opacity: 0.95;
+    margin-bottom: var(--spacing-xl);
+    color: var(--text-light);
+}
+
+.hero-description {
+    font-size: var(--text-xl);
+    opacity: 0.85;
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+/* ========== 导航 - 深色玻璃态 ========== */
+.nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--bg-semi-dark);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border-light);
+    padding: var(--spacing-md) 0;
+    box-shadow: var(--shadow-md);
+}
+
+.nav-container {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    flex-wrap: wrap;
+    padding: 0 var(--spacing-md);
+}
+
+.nav-item {
+    padding: var(--spacing-sm) var(--spacing-lg);
+    background: var(--bg-overlay);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: all var(--transition-base);
+    font-weight: var(--font-medium);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    color: var(--text-gray);
+}
+
+.nav-item i {
+    width: 20px;
+    height: 20px;
+    stroke-width: 2;
+}
+
+.nav-item span {
+    font-size: var(--text-base);
+}
+
+.nav-item:hover {
+    background: var(--hover-bg);
+    color: var(--primary-orange);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-orange);
+}
+
+.nav-item.active {
+    background: var(--active-bg);
+    color: var(--primary-orange);
+    border-color: var(--primary-orange);
+    box-shadow: var(--shadow-orange);
+}
+
+/* ========== 内容区块 - 图片背景 ========== */
+.section {
+    padding: var(--spacing-2xl) 0;
+    background: var(--bg-dark);
+    position: relative;
+}
+
+/* 浅色图片背景 - 每个区块使用不同图片 */
+.section:nth-child(1) {
+    background-image:
+        linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
+        url('../images/PLC示意图.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.section:nth-child(2) {
+    background-image:
+        linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
+        url('../images/Mermaid流程图.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.section:nth-child(3) {
+    background-image:
+        linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
+        url('../images/工业机器人图片.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.section:nth-child(4) {
+    background-image:
+        linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
+        url('../images/机器视觉相机图片.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+/* 通用奇偶区块(当超过4个section时) */
+.section:nth-child(n+5):nth-child(odd) {
+    background-image:
+        linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
+        url('../images/光伏面板室外场景图片.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.section:nth-child(n+5):nth-child(even) {
+    background-image:
+        linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
+        url('../images/输送与治具.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+/* 深色主题下的区块背景 - 每个区块使用对应图片 */
+body.dark-theme .section:nth-child(1) {
+    background-image:
+        linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
+        url('../images/PLC示意图.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+body.dark-theme .section:nth-child(2) {
+    background-image:
+        linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
+        url('../images/Mermaid流程图.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+body.dark-theme .section:nth-child(3) {
+    background-image:
+        linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
+        url('../images/工业机器人图片.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+body.dark-theme .section:nth-child(4) {
+    background-image:
+        linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
+        url('../images/机器视觉相机图片.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+/* 通用奇偶区块(当超过4个section时) */
+body.dark-theme .section:nth-child(n+5):nth-child(odd) {
+    background-image:
+        linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
+        url('../images/光伏面板室外场景图片.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+body.dark-theme .section:nth-child(n+5):nth-child(even) {
+    background-image:
+        linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
+        url('../images/输送与治具.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+/* 深色主题下的特定元素调整 */
+body.dark-theme .stat-item {
+    background: rgba(245, 158, 11, 0.8);
+    backdrop-filter: blur(5px);
+}
+
+body.dark-theme .stat-item:hover {
+    background: rgba(251, 191, 36, 0.15);
+    border-color: var(--primary-orange);
+}
+
+body.dark-theme .stat-value {
+    color: var(--accent-amber-light);
+}
+
+body.dark-theme th {
+    background: rgba(251, 191, 36, 0.12);
+    color: var(--accent-amber-light);
+}
+
+body.dark-theme tr:hover {
+    background: rgba(251, 191, 36, 0.08);
+}
+
+.container {
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding: 0 var(--spacing-md);
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-xl);
+    padding: var(--spacing-lg);
+    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);
+}
+
+.agent-avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: var(--radius-xl);
+    object-fit: cover;
+    border: 3px solid var(--primary-orange);
+    box-shadow: var(--shadow-md);
+    transition: all var(--transition-base);
+}
+
+.agent-avatar:hover {
+    transform: scale(1.05);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--accent-amber);
+}
+
+.agent-info {
+    flex: 1;
+}
+
+.agent-name {
+    font-size: var(--text-lg);
+    color: var(--primary-orange);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: var(--spacing-sm);
+    font-weight: var(--font-semibold);
+}
+
+.section-title {
+    font-size: var(--text-4xl);
+    font-weight: var(--font-bold);
+    color: var(--text-light);
+    letter-spacing: -0.01em;
+    text-shadow: none;
+    position: relative;
+    padding-bottom: var(--spacing-sm);
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 180px;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary-orange), transparent);
+    border-radius: 2px;
+}
+
+.section-content {
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.expert-intro {
+    background: var(--bg-card);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-xl);
+    border: 2px solid var(--border-light);
+    box-shadow: var(--shadow-md);
+}
+
+.expert-intro h3 {
+    font-size: var(--text-2xl);
+    color: var(--primary-orange);
+    margin-bottom: var(--spacing-lg);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.expert-intro p {
+    color: var(--text-gray);
+    line-height: 1.8;
+    font-size: var(--text-lg);
+}
+
+/* ========== 网格布局 - 针对大屏幕优化,更大气的布局 ========== */
+.grid {
+    display: grid;
+    gap: var(--spacing-2xl);
+}
+
+.grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-4 {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+/* ========== 卡片 - 图片优先布局 ========== */
+.card {
+    background: var(--bg-card);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: var(--radius-2xl);
+    overflow: hidden;
+    border: 2px solid var(--border-light);
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-md);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.card:hover {
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-xl), var(--shadow-orange);
+    border-color: var(--primary-orange);
+}
+
+.card-header {
+    padding: var(--spacing-xl);
+    background: var(--bg-semi-dark);
+    border-bottom: 2px solid var(--border-light);
+    order: 2;
+}
+
+.card-title {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-semibold);
+    color: var(--primary-orange);
+    margin-bottom: var(--spacing-sm);
+}
+
+.card-body {
+    padding: var(--spacing-xl);
+    order: 3;
+    flex: 1;
+}
+
+/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
+.image-container {
+    width: 100%;
+    aspect-ratio: 3/2;
+    overflow: hidden;
+    border-radius: 0;
+    margin-bottom: 0;
+    background: rgba(0,0,0,0.5);
+    position: relative;
+    box-shadow: none;
+    border: none;
+    transition: all var(--transition-base);
+    order: 1;
+    flex-shrink: 0;
+}
+
+.image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform var(--transition-slow);
+    filter: brightness(0.9);
+}
+
+.image-container:hover img {
+    transform: scale(1.1);
+    filter: brightness(1.1);
+}
+
+.image-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: var(--spacing-md);
+    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+    color: var(--text-light);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    text-align: center;
+    transform: translateY(100%);
+    transition: transform var(--transition-base);
+}
+
+.image-container:hover .image-caption {
+    transform: translateY(0);
+}
+
+/* ========== 列表 ========== */
+.feature-list {
+    list-style: none;
+    padding: 0;
+}
+
+.feature-list li {
+    padding: var(--spacing-sm) 0;
+    border-bottom: 1px solid var(--border-light);
+    color: var(--text-gray);
+    transition: all var(--transition-fast);
+}
+
+.feature-list li:hover {
+    color: var(--primary-orange);
+    padding-left: var(--spacing-sm);
+}
+
+.feature-list li:last-child {
+    border-bottom: none;
+}
+
+/* ========== 统计数据 ========== */
+.stats {
+    display: flex;
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg);
+    background: var(--bg-overlay);
+    backdrop-filter: blur(10px);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-light);
+}
+
+.stat-item {
+    flex: 1;
+    text-align: center;
+    padding: var(--spacing-md);
+    border-radius: var(--radius-md);
+    background: var(--bg-card);
+    border: 1px solid transparent;
+    transition: all var(--transition-base);
+}
+
+.stat-item:hover {
+    background: var(--hover-bg);
+    transform: translateY(-4px);
+    border-color: var(--border-light);
+    box-shadow: var(--shadow-md);
+}
+
+.stat-label {
+    font-size: var(--text-sm);
+    color: var(--text-gray);
+    margin-bottom: var(--spacing-xs);
+}
+
+.stat-value {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-bold);
+    color: var(--primary-orange);
+    text-shadow: none;
+}
+
+/* ========== 表格 ========== */
+.table-container {
+    overflow-x: auto;
+    margin: var(--spacing-xl) 0;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--bg-card);
+    backdrop-filter: blur(10px);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+th {
+    background: var(--active-bg);
+    color: var(--primary-orange);
+    padding: var(--spacing-md);
+    text-align: left;
+    font-weight: var(--font-semibold);
+    border-bottom: 2px solid var(--primary-orange);
+}
+
+td {
+    padding: var(--spacing-md);
+    border-bottom: 1px solid var(--border-light);
+    color: var(--text-gray);
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+tr:hover {
+    background: var(--hover-bg);
+}
+
+/* ========== 响应式 ========== */
+@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;
+    }
+
+    .hero {
+        background-attachment: scroll;
+    }
+
+    .section:nth-child(odd),
+    .section:nth-child(even) {
+        background-attachment: scroll;
+    }
+
+    .hero-content {
+        padding: var(--spacing-lg);
+    }
+
+    .nav-container {
+        gap: var(--spacing-xs);
+    }
+
+    .nav-item {
+        padding: var(--spacing-xs) var(--spacing-md);
+        font-size: var(--text-sm);
+    }
+
+    .section {
+        padding: var(--spacing-2xl) 0;
+    }
+
+    .grid-2,
+    .grid-3,
+    .grid-4 {
+        grid-template-columns: 1fr;
+    }
+
+    .section-header {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .stats {
+        flex-direction: column;
+    }
+}
+
+/* ========== 动画 ========== */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -1000px 0;
+    }
+    100% {
+        background-position: 1000px 0;
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.6s ease forwards;
+}
+
+.slide-in {
+    animation: slideIn 0.6s ease forwards;
+}
+
+/* ========== 工具类 ========== */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.mt-sm { margin-top: var(--spacing-sm); }
+.mt-md { margin-top: var(--spacing-md); }
+.mt-lg { margin-top: var(--spacing-lg); }
+.mt-xl { margin-top: var(--spacing-xl); }
+
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+.mb-xl { margin-bottom: var(--spacing-xl); }
+
+.hidden { display: none; }
+.block { display: block; }
+.flex { display: flex; }
+.grid { display: grid; }
+
+.gap-sm { gap: var(--spacing-sm); }
+.gap-md { gap: var(--spacing-md); }
+.gap-lg { gap: var(--spacing-lg); }
+
+/* ========== 图片加载状态 ========== */
+img {
+    transition: opacity var(--transition-base);
+}
+
+img.loaded {
+    opacity: 1;
+}
+
+img.error {
+    opacity: 0.5;
+    filter: grayscale(1);
+}
+
+/* ========== SVG图标尺寸统一管理 ========== */
+.hero-description i[data-lucide] {
+    width: 24px !important;
+    height: 24px !important;
+    display: inline-block !important;
+    vertical-align: middle !important;
+    margin-right: 8px !important;
+}
+
+.agent-name i[data-lucide] {
+    width: 20px !important;
+    height: 20px !important;
+    display: inline-block !important;
+    vertical-align: middle !important;
+    margin-right: 8px !important;
+}
+
+.expert-intro h3 i[data-lucide] {
+    width: 40px !important;
+    height: 40px !important;
+    display: inline-block !important;
+    vertical-align: middle !important;
+    margin-right: 10px !important;
+}
+
+.feature-list li i[data-lucide] {
+    width: 18px !important;
+    height: 18px !important;
+    display: inline-block !important;
+    vertical-align: middle !important;
+    margin-right: 8px !important;
+}
+
+.nav-item i[data-lucide] {
+    width: 20px !important;
+    height: 20px !important;
+    display: block !important;
+    margin: 0 auto 4px !important;
+}
+
+/* ========== 主题切换按钮 ========== */
+.theme-toggle {
+    position: fixed;
+    top: 24px;
+    right: 24px;
+    z-index: 1000;
+}
+
+.theme-toggle-btn {
+    position: relative;
+    width: 64px;
+    height: 32px;
+    background: var(--bg-card);
+    border: 2px solid var(--border-light);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 6px;
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-md);
+}
+
+.theme-toggle-btn:hover {
+    transform: scale(1.05);
+    box-shadow: var(--shadow-lg);
+}
+
+.theme-toggle-btn:active {
+    transform: scale(0.95);
+}
+
+.theme-icon {
+    width: 18px !important;
+    height: 18px !important;
+    transition: all var(--transition-base);
+    color: var(--text-gray);
+}
+
+body:not(.dark-theme) .theme-icon-light {
+    color: var(--primary-orange);
+    transform: scale(1.2);
+}
+
+body:not(.dark-theme) .theme-icon-dark {
+    opacity: 0.5;
+}
+
+body.dark-theme .theme-icon-dark {
+    color: var(--primary-orange);
+    transform: scale(1.2);
+}
+
+body.dark-theme .theme-icon-light {
+    opacity: 0.5;
+}

web_frontend/web_result/order-classes/energy/images

@@ -0,0 +1 @@
+../../../../../data/订单班文档资料/能源/notion文稿/image

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

@@ -0,0 +1,790 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>光伏晶硅电池片印后AOI检测与分拣单元 - 能源订单班</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+</head>
+<body class="dark-theme">
+    <!-- 主题切换按钮 -->
+    <div class="theme-toggle">
+        <button id="themeToggleBtn" class="theme-toggle-btn">
+            <i data-lucide="sun" class="theme-icon theme-icon-light"></i>
+            <i data-lucide="moon" class="theme-icon theme-icon-dark"></i>
+        </button>
+    </div>
+
+    <!-- Hero 区域 -->
+    <section class="hero">
+        <div class="hero-content">
+            <div class="hero-badge">⚡ 能源订单班</div>
+            <h1 class="hero-title">光伏晶硅电池片<br>印后AOI检测与分拣单元</h1>
+            <h2 class="hero-subtitle">PLC控制 · 机器视觉 · 智能分拣</h2>
+            <p class="hero-description">
+                <i data-lucide="cpu"></i> 西门子S7-1500 PLC控制系统<br>
+                <i data-lucide="camera"></i> 康耐视In-Sight D900深度学习AOI<br>
+                <i data-lucide="bot"></i> ABB IRB 1200六轴机器人分拣
+            </p>
+        </div>
+    </section>
+
+    <!-- 导航栏 -->
+    <nav class="nav">
+        <div class="nav-container">
+            <div class="nav-item active">
+                <i data-lucide="layout-dashboard"></i>
+                <span>系统概述</span>
+            </div>
+            <div class="nav-item">
+                <i data-lucide="cpu"></i>
+                <span>PLC控制</span>
+            </div>
+            <div class="nav-item">
+                <i data-lucide="bot"></i>
+                <span>机器人编程</span>
+            </div>
+            <div class="nav-item">
+                <i data-lucide="camera"></i>
+                <span>视觉检测</span>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Section 1: 项目概述与设备选型 -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <img src="agent-avatars/自动化控制工程师.jpg" alt="自动化控制工程师" class="agent-avatar">
+                <div class="agent-info">
+                    <div class="agent-name">
+                        <i data-lucide="settings"></i> 自动化控制工程师
+                    </div>
+                    <h2 class="section-title">项目概述与设备选型</h2>
+                </div>
+            </div>
+
+            <div class="section-content">
+                <div class="expert-intro">
+                    <h3><i data-lucide="lightbulb"></i> 项目背景</h3>
+                    <p>本项目为某光伏企业设计并实施了一套基于西门子S7-1500 PLC + 康耐视机器视觉 + ABB六轴机器人的晶硅电池片印后AOI检测与自动分拣单元。系统针对丝网印刷工序后的PERC/TopCon电池片,能够精准识别断栅、漏印、拖浆、脏污、划伤、崩边等7类缺陷,实现≥3600片/小时产能、≤0.5%误检率、≤0.3%漏检率的行业领先水平。</p>
+                </div>
+
+                <div class="grid grid-3">
+                    <div class="card">
+                        <div class="image-container">
+                            <img data-src="images/PLC示意图.jpg" alt="PLC控制系统" loading="lazy">
+                            <div class="image-caption">西门子S7-1500 PLC控制系统</div>
+                        </div>
+                        <div class="card-header">
+                            <h3 class="card-title">PLC控制系统</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="cpu"></i> CPU: S7-1500 1512C-1 PN</li>
+                                <li><i data-lucide="zap"></i> 内存: 500KB程序/3MB数据</li>
+                                <li><i data-lucide="network"></i> 通讯: Profinet/OPC UA</li>
+                                <li><i data-lucide="shield"></i> 防护: IP65工业级</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="image-container">
+                            <img data-src="images/工业机器人图片.jpg" alt="ABB工业机器人" loading="lazy">
+                            <div class="image-caption">ABB IRB 1200六轴工业机器人</div>
+                        </div>
+                        <div class="card-header">
+                            <h3 class="card-title">六轴机器人</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="bot"></i> 型号: ABB IRB 1200-7/0.7</li>
+                                <li><i data-lucide="maximize"></i> 负载: 7kg/工作半径700mm</li>
+                                <li><i data-lucide="crosshair"></i> 精度: ±0.02mm重复定位</li>
+                                <li><i data-lucide="code"></i> 编程: RAPID + RobotStudio</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="image-container">
+                            <img data-src="images/机器视觉相机图片.jpg" alt="机器视觉相机" loading="lazy">
+                            <div class="image-caption">康耐视In-Sight D900视觉系统</div>
+                        </div>
+                        <div class="card-header">
+                            <h3 class="card-title">机器视觉系统</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="camera"></i> 相机: In-Sight D900 500万像素</li>
+                                <li><i data-lucide="brain"></i> 算法: ViDi深度学习 + PatMax</li>
+                                <li><i data-lucide="lightbulb"></i> 光源: LED环形+同轴光</li>
+                                <li><i data-lucide="gauge"></i> 镜头: 25-35mm远心镜头</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="image-container" style="margin-top: var(--spacing-xl);">
+                    <img data-src="images/输送与治具.jpg" alt="输送线与治具系统" loading="lazy">
+                    <div class="image-caption">双边夹持缓存输送线与伺服定心机构</div>
+                </div>
+
+                <div class="grid grid-2" style="margin-top: var(--spacing-xl);">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">技术指标</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="gauge"></i> 产能: ≥3600片/小时(≤1秒/片)</li>
+                                <li><i data-lucide="check-circle"></i> 误检率: ≤0.5%(≤18片/3600片)</li>
+                                <li><i data-lucide="alert-triangle"></i> 漏检率: ≤0.3%(≤11片/3600片)</li>
+                                <li><i data-lucide="clock"></i> 拍照+判断: ≤300ms(含传输)</li>
+                                <li><i data-lucide="maximize"></i> 电池片尺寸: 158.75×158.75mm(M6)</li>
+                                <li><i data-lucide="minimize"></i> 检测精度: 0.05mm缺陷可检出</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">检测缺陷类型</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="grid-2x2"></i> 断栅(broken grid): 主栅/细栅断裂</li>
+                                <li><i data-lucide="droplet"></i> 漏印(missing print): 栅线缺失</li>
+                                <li><i data-lucide="move"></i> 拖浆(dragging): 浆料拖尾</li>
+                                <li><i data-lucide="circle-dot"></i> 脏污(contamination): 异物/污渍</li>
+                                <li><i data-lucide="slash"></i> 划伤(scratch): 表面划痕</li>
+                                <li><i data-lucide="corner-down-right"></i> 崩边(chipping): 边角破损</li>
+                                <li><i data-lucide="palette"></i> 色差(color variation): 颜色不均</li>
+                            </ul>
+                        </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">3600片/时</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">误检率</div>
+                        <div class="stat-value">≤0.5%</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">漏检率</div>
+                        <div class="stat-value">≤0.3%</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">检测时间</div>
+                        <div class="stat-value detection-time">0ms</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Section 2: PLC控制逻辑与I/O配置 -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <img src="agent-avatars/PLC工程师.jpg" alt="PLC工程师" class="agent-avatar">
+                <div class="agent-info">
+                    <div class="agent-name">
+                        <i data-lucide="cpu"></i> PLC工程师
+                    </div>
+                    <h2 class="section-title">PLC控制逻辑与I/O配置</h2>
+                </div>
+            </div>
+
+            <div class="section-content">
+                <div class="expert-intro">
+                    <h3><i data-lucide="git-branch"></i> 控制架构设计</h3>
+                    <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="images/Mermaid流程图.jpg" alt="控制流程图" loading="lazy">
+                    <div class="image-caption">系统控制流程Mermaid图</div>
+                </div>
+
+                <div class="grid grid-2">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">输入信号配置(14路)</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="shield"></i> I0.0~I0.2: 急停/安全门/光栅(安全链)</li>
+                                <li><i data-lucide="target"></i> I0.3~I0.5: 来料/到位/离开传感器</li>
+                                <li><i data-lucide="camera"></i> I0.6~I0.7: 相机触发完成/异常信号</li>
+                                <li><i data-lucide="bot"></i> I1.0~I1.2: 机器人就绪/抓取完成/报警</li>
+                                <li><i data-lucide="thermometer"></i> I1.3~I1.4: 温度/湿度监测</li>
+                                <li><i data-lucide="toggle-left"></i> I1.5: 手动/自动模式切换</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">输出信号配置(13路)</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="play"></i> Q0.0: 输送电机启动(变频器使能)</li>
+                                <li><i data-lucide="maximize"></i> Q0.1~Q0.2: 定位气缸/夹持气缸</li>
+                                <li><i data-lucide="camera"></i> Q0.3~Q0.4: 相机触发/光源控制</li>
+                                <li><i data-lucide="bot"></i> Q0.5~Q0.7: 机器人启动/结果1/结果2</li>
+                                <li><i data-lucide="lightbulb"></i> Q1.0~Q1.2: 指示灯(运行/故障/待机)</li>
+                                <li><i data-lucide="bell"></i> Q1.3: 蜂鸣器报警输出</li>
+                                <li><i data-lucide="power"></i> Q1.4: MES数据上传握手信号</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-3" style="margin-top: var(--spacing-xl);">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">核心功能块</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="shield-check"></i> FB100: 安全链监控(SIL2)</li>
+                                <li><i data-lucide="play-circle"></i> FB200: 输送带伺服控制</li>
+                                <li><i data-lucide="camera"></i> FB300: 视觉系统接口</li>
+                                <li><i data-lucide="bot"></i> FB400: 机器人交互逻辑</li>
+                                <li><i data-lucide="database"></i> FB500: MES数据上传</li>
+                                <li><i data-lucide="alert-triangle"></i> FB600: 异常诊断与报警</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">数据块结构</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="database"></i> DB1: 系统配置参数</li>
+                                <li><i data-lucide="bar-chart"></i> DB2: 生产统计数据</li>
+                                <li><i data-lucide="check-square"></i> DB3: 检测结果缓存(FIFO)</li>
+                                <li><i data-lucide="package"></i> DB4: 批次追溯信息</li>
+                                <li><i data-lucide="alert-circle"></i> DB5: 报警历史记录</li>
+                                <li><i data-lucide="settings"></i> DB6: 配方参数库</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">通讯配置</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="network"></i> Profinet IO: 机器人控制器</li>
+                                <li><i data-lucide="ethernet-port"></i> TCP/IP: In-Sight D900相机</li>
+                                <li><i data-lucide="cloud"></i> OPC UA: MES系统对接</li>
+                                <li><i data-lucide="link"></i> Modbus TCP: 变频器/伺服</li>
+                                <li><i data-lucide="wifi"></i> HTTP: HMI触摸屏(WinCC)</li>
+                                <li><i data-lucide="repeat"></i> 500ms循环周期 + 事件触发</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="table-container" style="margin-top: var(--spacing-xl);">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>控制模式</th>
+                                <th>触发条件</th>
+                                <th>执行动作</th>
+                                <th>预期结果</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>自动模式</td>
+                                <td>来料传感器ON + 安全链OK</td>
+                                <td>输送带启动→定位夹持→触发相机</td>
+                                <td>获得检测结果,触发机器人</td>
+                            </tr>
+                            <tr>
+                                <td>手动模式</td>
+                                <td>操作员按下启动按钮</td>
+                                <td>单步执行各动作(调试用)</td>
+                                <td>逐步验证各环节功能</td>
+                            </tr>
+                            <tr>
+                                <td>复位模式</td>
+                                <td>报警发生后按复位键</td>
+                                <td>清除报警→回零位→等待启动</td>
+                                <td>系统恢复至初始状态</td>
+                            </tr>
+                            <tr>
+                                <td>急停模式</td>
+                                <td>急停按钮按下/安全门打开</td>
+                                <td>立即切断所有输出→保持状态</td>
+                                <td>设备安全停止,等待复位</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="stats" style="margin-top: var(--spacing-xl);">
+                    <div class="stat-item">
+                        <div class="stat-label">输入信号数</div>
+                        <div class="stat-value io-inputs">0路</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">输出信号数</div>
+                        <div class="stat-value io-outputs">0路</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">功能块数</div>
+                        <div class="stat-value">6个</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">通讯协议</div>
+                        <div class="stat-value">5种</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Section 3: 机器人编程与分拣逻辑 -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <img src="agent-avatars/机器人调试工程师.jpg" alt="机器人调试工程师" class="agent-avatar">
+                <div class="agent-info">
+                    <div class="agent-name">
+                        <i data-lucide="bot"></i> 机器人调试工程师
+                    </div>
+                    <h2 class="section-title">机器人编程与分拣逻辑</h2>
+                </div>
+            </div>
+
+            <div class="section-content">
+                <div class="expert-intro">
+                    <h3><i data-lucide="code"></i> RAPID编程实现</h3>
+                    <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="images/光伏面板生成画面.jpg" alt="光伏面板分拣场景" loading="lazy">
+                    <div class="image-caption">机器人分拣路径三维仿真</div>
+                </div>
+
+                <div class="grid grid-2">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">分拣逻辑流程</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="play"></i> 1. 等待PLC就绪信号(DI1=1)</li>
+                                <li><i data-lucide="hand"></i> 2. 移动至拾取点→开启真空→检测吸附</li>
+                                <li><i data-lucide="search"></i> 3. 读取检测结果(DI2-DI3编码)</li>
+                                <li><i data-lucide="git-branch"></i> 4. 分支判断: OK→托盘1, RW→托盘2, NG→废料箱</li>
+                                <li><i data-lucide="box"></i> 5. 到达目标位置→关闭真空→等待释放</li>
+                                <li><i data-lucide="rotate-ccw"></i> 6. 返回原点→发送完成信号(DO1=1)→循环</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">安全策略设计</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="shield"></i> 工作区域: 4个WorldZone限制区域</li>
+                                <li><i data-lucide="zap"></i> 急停响应: ≤50ms安全断电</li>
+                                <li><i data-lucide="alert-triangle"></i> 碰撞检测: 力矩阈值80%触发保护</li>
+                                <li><i data-lucide="user-x"></i> 示教模式: 速度限制250mm/s</li>
+                                <li><i data-lucide="gauge"></i> 负载监控: 超7kg触发报警</li>
+                                <li><i data-lucide="shield-check"></i> 安全评级: PL=d / SIL=2</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-3" style="margin-top: var(--spacing-xl);">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">轨迹优化参数</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="gauge"></i> 拾取速度: 300mm/s(V100)</li>
+                                <li><i data-lucide="zap"></i> 空载速度: 800mm/s(V300)</li>
+                                <li><i data-lucide="move"></i> 负载速度: 500mm/s(V200)</li>
+                                <li><i data-lucide="corner-down-right"></i> 转角区: Zone10(精确定位)</li>
+                                <li><i data-lucide="trending-up"></i> 加速度: 80%最大值</li>
+                                <li><i data-lucide="clock"></i> 单次节拍: ≤0.8秒</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">末端工具配置</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="disc"></i> 吸盘类型: 硅胶平面吸盘×4</li>
+                                <li><i data-lucide="wind"></i> 真空度: -60kPa(可调-50~-80)</li>
+                                <li><i data-lucide="thermometer"></i> 检测方式: 真空开关+模拟量反馈</li>
+                                <li><i data-lucide="package"></i> TCP偏移: X+50 Y+0 Z+120mm</li>
+                                <li><i data-lucide="weight"></i> 工具重量: 1.2kg(含快换盘)</li>
+                                <li><i data-lucide="settings"></i> 负载数据: LoadData配置校准</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">I/O信号映射</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="log-in"></i> DI1: PLC允许抓取信号</li>
+                                <li><i data-lucide="check-circle"></i> DI2-DI3: 检测结果编码(2bit)</li>
+                                <li><i data-lucide="alert-circle"></i> DI4: 急停联锁信号</li>
+                                <li><i data-lucide="log-out"></i> DO1: 抓取完成反馈</li>
+                                <li><i data-lucide="power"></i> DO2: 真空吸盘控制</li>
+                                <li><i data-lucide="bell"></i> DO3: 报警输出</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="table-container" style="margin-top: var(--spacing-xl);">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>检测结果</th>
+                                <th>DI2-DI3编码</th>
+                                <th>分拣目标</th>
+                                <th>坐标位置</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>OK(良品)</td>
+                                <td>00</td>
+                                <td>OK托盘(8×10排列)</td>
+                                <td>X-300 Y+200 Z+50</td>
+                            </tr>
+                            <tr>
+                                <td>RW(返工)</td>
+                                <td>01</td>
+                                <td>RW托盘(待复检)</td>
+                                <td>X-300 Y-200 Z+50</td>
+                            </tr>
+                            <tr>
+                                <td>NG(废品)</td>
+                                <td>10</td>
+                                <td>废料箱(统一收集)</td>
+                                <td>X-500 Y+0 Z+100</td>
+                            </tr>
+                            <tr>
+                                <td>异常</td>
+                                <td>11</td>
+                                <td>暂存区(等待人工处理)</td>
+                                <td>X+0 Y+0 Z+150</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="stats" style="margin-top: var(--spacing-xl);">
+                    <div class="stat-item">
+                        <div class="stat-label">单次节拍</div>
+                        <div class="stat-value robot-cycle">0秒</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">重复定位精度</div>
+                        <div class="stat-value">±0.02mm</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">安全等级</div>
+                        <div class="stat-value">PL=d/SIL=2</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">工作区域数</div>
+                        <div class="stat-value robot-zones">0个</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Section 4: 视觉标定与性能验证 -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <img src="agent-avatars/机器视觉识别工程师.jpeg" alt="机器视觉识别工程师" class="agent-avatar">
+                <div class="agent-info">
+                    <div class="agent-name">
+                        <i data-lucide="camera"></i> 机器视觉识别工程师
+                    </div>
+                    <h2 class="section-title">视觉标定与性能验证</h2>
+                </div>
+            </div>
+
+            <div class="section-content">
+                <div class="expert-intro">
+                    <h3><i data-lucide="search"></i> 深度学习AOI实现</h3>
+                    <p>采用康耐视In-Sight D900智能相机,搭载ViDi Suite深度学习库。使用Red Analyze工具检测表面缺陷(划伤/脏污/色差),Blue Locate工具定位栅线特征,Green Classify工具分类缺陷类型。通过500张OK样本+200张NG样本训练模型,实现99.7%检出率、0.3%误检率。配合25-35mm远心镜头+LED环形光+同轴光,保证0.05mm缺陷可检出。</p>
+                </div>
+
+                <div class="image-container" style="margin-bottom: var(--spacing-xl);">
+                    <img data-src="images/光伏面板室外场景图片.jpg" alt="光伏检测场景" loading="lazy">
+                    <div class="image-caption">AOI检测工位实景</div>
+                </div>
+
+                <div class="grid grid-2">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">光源与镜头配置</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="lightbulb"></i> 主光源: LED环形白光(12000lm可调)</li>
+                                <li><i data-lucide="sun"></i> 辅助光: 同轴光(消除反光)</li>
+                                <li><i data-lucide="gauge"></i> 镜头: 25-35mm远心镜头F2.8</li>
+                                <li><i data-lucide="maximize"></i> 视野: 200×200mm(覆盖全片)</li>
+                                <li><i data-lucide="focus"></i> 景深: ±2mm(适应厚度波动)</li>
+                                <li><i data-lucide="sliders"></i> 分辨率: 0.04mm/pixel(500万像素)</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">标定流程</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="grid"></i> 1. 几何标定: 使用标准棋盘格板</li>
+                                <li><i data-lucide="sun"></i> 2. 光源调试: 亮度/角度/均匀性优化</li>
+                                <li><i data-lucide="focus"></i> 3. 对焦校准: 激光测距仪辅助</li>
+                                <li><i data-lucide="database"></i> 4. 模型训练: 500 OK + 200 NG样本</li>
+                                <li><i data-lucide="sliders"></i> 5. 阈值调优: ROC曲线分析</li>
+                                <li><i data-lucide="check-circle"></i> 6. 验收测试: 1000片实测验证</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-3" style="margin-top: var(--spacing-xl);">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">ViDi深度学习工具</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="search"></i> Red Analyze: 表面缺陷检测</li>
+                                <li><i data-lucide="crosshair"></i> Blue Locate: 栅线特征定位</li>
+                                <li><i data-lucide="grid-3x3"></i> Green Classify: 缺陷类型分类</li>
+                                <li><i data-lucide="package"></i> Blue Read: OCR识别(批次号)</li>
+                                <li><i data-lucide="layers"></i> 模型融合: 多工具组合决策</li>
+                                <li><i data-lucide="trending-up"></i> 持续学习: 定期迭代优化</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">通讯协议</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="ethernet-port"></i> TCP/IP: 与PLC主控(Port 23)</li>
+                                <li><i data-lucide="arrow-right-left"></i> 触发方式: 硬件触发(I/O信号)</li>
+                                <li><i data-lucide="send"></i> 结果输出: JSON格式(OK/RW/NG)</li>
+                                <li><i data-lucide="image"></i> 图像存储: FTP上传(NG图片)</li>
+                                <li><i data-lucide="clock"></i> 处理时间: ≤200ms(拍照+判断)</li>
+                                <li><i data-lucide="signal"></i> 握手机制: Request-Response模式</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">性能指标</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="check-circle"></i> 检出率: 99.7%(≤3漏检/1000片)</li>
+                                <li><i data-lucide="alert-triangle"></i> 误检率: 0.3%(≤3误报/1000片)</li>
+                                <li><i data-lucide="minimize"></i> 最小缺陷: 0.05mm可检出</li>
+                                <li><i data-lucide="gauge"></i> 重复精度: σ≤0.02mm(定位)</li>
+                                <li><i data-lucide="clock"></i> 单次耗时: 150ms拍照+50ms判断</li>
+                                <li><i data-lucide="trending-up"></i> 产能适配: ≥3600片/小时</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="table-container" style="margin-top: var(--spacing-xl);">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>缺陷类型</th>
+                                <th>检测方法</th>
+                                <th>判定标准</th>
+                                <th>检出率</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>断栅</td>
+                                <td>Blue Locate + 边缘检测</td>
+                                <td>栅线连续性中断>0.5mm</td>
+                                <td>99.9%</td>
+                            </tr>
+                            <tr>
+                                <td>漏印</td>
+                                <td>Blue Locate + 灰度统计</td>
+                                <td>栅线缺失面积>2mm²</td>
+                                <td>99.8%</td>
+                            </tr>
+                            <tr>
+                                <td>拖浆</td>
+                                <td>Red Analyze异常检测</td>
+                                <td>浆料拖尾长度>1mm</td>
+                                <td>99.5%</td>
+                            </tr>
+                            <tr>
+                                <td>脏污</td>
+                                <td>Red Analyze + 对比学习</td>
+                                <td>异物面积>0.3mm²</td>
+                                <td>99.6%</td>
+                            </tr>
+                            <tr>
+                                <td>划伤</td>
+                                <td>Red Analyze纹理分析</td>
+                                <td>划痕深度>0.05mm</td>
+                                <td>99.4%</td>
+                            </tr>
+                            <tr>
+                                <td>崩边</td>
+                                <td>Blue Locate边缘定位</td>
+                                <td>边角缺损>0.5mm</td>
+                                <td>99.9%</td>
+                            </tr>
+                            <tr>
+                                <td>色差</td>
+                                <td>Green Classify颜色分类</td>
+                                <td>色差ΔE>10(Lab空间)</td>
+                                <td>99.3%</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="stats" style="margin-top: var(--spacing-xl);">
+                    <div class="stat-item">
+                        <div class="stat-label">总检出率</div>
+                        <div class="stat-value detection-rate">0%</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">总误检率</div>
+                        <div class="stat-value">0.3%</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">最小缺陷尺寸</div>
+                        <div class="stat-value">0.05mm</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">检测缺陷类型</div>
+                        <div class="stat-value defect-types">0类</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer: 项目成果总结 -->
+    <section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
+        <div class="container">
+            <h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
+                <i data-lucide="award"></i> 项目成果总结
+            </h2>
+
+            <div class="grid grid-3">
+                <div class="card">
+                    <div class="card-header" style="order: 1;">
+                        <h3 class="card-title">⚡ 核心技术</h3>
+                    </div>
+                    <div class="card-body" style="order: 2;">
+                        <ul class="feature-list">
+                            <li><i data-lucide="cpu"></i> 西门子S7-1500 PLC控制系统</li>
+                            <li><i data-lucide="bot"></i> ABB IRB 1200六轴工业机器人</li>
+                            <li><i data-lucide="camera"></i> 康耐视In-Sight D900深度学习AOI</li>
+                            <li><i data-lucide="network"></i> Profinet/OPC UA工业通讯</li>
+                            <li><i data-lucide="brain"></i> ViDi Suite深度学习算法</li>
+                            <li><i data-lucide="code"></i> TIA Portal + RAPID混合编程</li>
+                            <li><i data-lucide="database"></i> MES系统数据追溯对接</li>
+                            <li><i data-lucide="shield"></i> SIL2/PLd功能安全设计</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-header" style="order: 1;">
+                        <h3 class="card-title">📊 性能指标</h3>
+                    </div>
+                    <div class="card-body" style="order: 2;">
+                        <ul class="feature-list">
+                            <li><i data-lucide="gauge"></i> 产能: ≥3600片/小时(≤1秒/片)</li>
+                            <li><i data-lucide="check-circle"></i> 检出率: 99.7%(≤3漏检/1000片)</li>
+                            <li><i data-lucide="alert-triangle"></i> 误检率: 0.3%(≤3误报/1000片)</li>
+                            <li><i data-lucide="crosshair"></i> 定位精度: ±0.02mm(机器人)</li>
+                            <li><i data-lucide="minimize"></i> 最小缺陷: 0.05mm可检出</li>
+                            <li><i data-lucide="clock"></i> 检测时间: ≤300ms(含传输)</li>
+                            <li><i data-lucide="bot"></i> 分拣节拍: ≤0.8秒/片</li>
+                            <li><i data-lucide="package"></i> 批次追溯: 100%可追溯</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-header" style="order: 1;">
+                        <h3 class="card-title">🎯 应用成果</h3>
+                    </div>
+                    <div class="card-body" style="order: 2;">
+                        <ul class="feature-list">
+                            <li><i data-lucide="trending-up"></i> 产能提升: 人工1800→自动3600片/时</li>
+                            <li><i data-lucide="shield-check"></i> 质量提升: 漏检率3%→0.3%</li>
+                            <li><i data-lucide="users-minus"></i> 人力节省: 减少4人/班次</li>
+                            <li><i data-lucide="clock"></i> 回报周期: 设备投资18个月回本</li>
+                            <li><i data-lucide="check-square"></i> 稳定性: 连续运行>6000小时无故障</li>
+                            <li><i data-lucide="database"></i> 数据价值: 完整质量追溯链</li>
+                            <li><i data-lucide="award"></i> 行业认可: 客户复购3条线</li>
+                            <li><i data-lucide="zap"></i> 技术积累: 形成标准化解决方案</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
+                <p>⚡ 光伏晶硅电池片印后AOI检测与分拣单元圆满交付!</p>
+                <p style="margin-top: var(--spacing-sm);">© 2024 能源订单班 | 智能制造解决方案</p>
+            </div>
+        </div>
+    </section>
+
+    <script src="js/main.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,269 @@
+// 光伏晶硅电池片印后AOI检测与分拣单元 - 主要JavaScript逻辑
+
+// 页面初始化
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('⚡ 能源订单班光伏AOI检测页面加载完成');
+
+    // 初始化Lucide图标
+    if (typeof lucide !== 'undefined') {
+        lucide.createIcons();
+    }
+
+    // 初始化组件
+    initNavigation();
+    initAnimations();
+    initLazyLoading();
+    initSmoothScroll();
+    updateStats();
+    initThemeToggle();
+});
+
+// 导航功能
+function initNavigation() {
+    const navItems = document.querySelectorAll('.nav-item');
+    const sections = document.querySelectorAll('.section');
+
+    // 点击导航项滚动到对应区块
+    navItems.forEach((item, index) => {
+        item.addEventListener('click', () => {
+            // 移除所有活跃状态
+            navItems.forEach(nav => nav.classList.remove('active'));
+            // 添加当前活跃状态
+            item.classList.add('active');
+
+            // 滚动到对应区块
+            if (sections[index]) {
+                const targetSection = sections[index];
+                const offsetTop = targetSection.offsetTop - 100;
+
+                window.scrollTo({
+                    top: offsetTop,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+
+    // 滚动时更新导航活跃状态
+    window.addEventListener('scroll', () => {
+        let current = '';
+        sections.forEach((section, index) => {
+            const sectionTop = section.offsetTop - 150;
+            if (scrollY >= sectionTop) {
+                current = index;
+            }
+        });
+
+        navItems.forEach((item, index) => {
+            item.classList.remove('active');
+            if (index === current) {
+                item.classList.add('active');
+            }
+        });
+    });
+}
+
+// 动画初始化
+function initAnimations() {
+    // 使用 Intersection Observer 实现滚动动画
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('fade-in');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+
+    // 观察所有需要动画的元素
+    const animatedElements = document.querySelectorAll('.card, .expert-intro');
+    animatedElements.forEach(el => {
+        el.style.opacity = '0';
+        observer.observe(el);
+    });
+}
+
+// 图片懒加载
+function initLazyLoading() {
+    const images = document.querySelectorAll('img[data-src]');
+
+    const imageObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const img = entry.target;
+                const src = img.getAttribute('data-src');
+
+                // 创建新图片对象来预加载
+                const tempImg = new Image();
+                tempImg.onload = function() {
+                    img.src = src;
+                    img.classList.add('loaded');
+                };
+                tempImg.onerror = function() {
+                    // 如果图片加载失败，使用橙色主题占位图
+                    img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23fffbeb"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23f59e0b"%3E图片加载中%3C/text%3E%3C/svg%3E';
+                    img.classList.add('error');
+                };
+                tempImg.src = src;
+
+                img.removeAttribute('data-src');
+                observer.unobserve(img);
+            }
+        });
+    });
+
+    images.forEach(img => {
+        imageObserver.observe(img);
+    });
+}
+
+// 平滑滚动
+function initSmoothScroll() {
+    // 为所有锚点链接添加平滑滚动
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+
+            const target = document.querySelector(targetId);
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+}
+
+// 更新统计数据 - 光伏AOI检测数据
+function updateStats() {
+    // 动画数字增长效果 - 光伏AOI相关数据
+    const stats = [
+        { selector: '.detection-time', value: 300, suffix: 'ms' },
+        { selector: '.io-inputs', value: 14, suffix: '路' },
+        { selector: '.io-outputs', value: 13, suffix: '路' },
+        { selector: '.robot-cycle', value: 0.8, suffix: '秒' },
+        { selector: '.robot-zones', value: 4, suffix: '个' },
+        { selector: '.detection-rate', value: 99.7, suffix: '%' },
+        { selector: '.defect-types', value: 7, suffix: '类' }
+    ];
+
+    stats.forEach(stat => {
+        const element = document.querySelector(stat.selector);
+        if (element) {
+            animateValue(element, 0, stat.value, 2000, stat.suffix);
+        }
+    });
+}
+
+// 数字动画函数
+function animateValue(element, start, end, duration, suffix = '') {
+    const startTime = performance.now();
+
+    function update(currentTime) {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+
+        // 使用缓动函数
+        const easeOutQuad = progress * (2 - progress);
+        let current;
+
+        // 处理小数值
+        if (end < 10 && end % 1 !== 0) {
+            current = (start + (end - start) * easeOutQuad).toFixed(1);
+        } else {
+            current = Math.floor(start + (end - start) * easeOutQuad);
+        }
+
+        element.textContent = current + suffix;
+
+        if (progress < 1) {
+            requestAnimationFrame(update);
+        }
+    }
+
+    requestAnimationFrame(update);
+}
+
+// 错误处理
+window.addEventListener('error', function(e) {
+    if (e.target.tagName === 'IMG') {
+        console.warn('图片加载失败:', e.target.src);
+        e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23fffbeb"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23f59e0b"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E';
+        e.target.classList.add('error');
+    }
+}, true);
+
+// 移动端优化
+if ('ontouchstart' in window) {
+    document.body.classList.add('touch-device');
+
+    // 移动端点击优化
+    let touchStartTime;
+    document.addEventListener('touchstart', () => {
+        touchStartTime = Date.now();
+    });
+
+    document.addEventListener('touchend', (e) => {
+        const touchEndTime = Date.now();
+        if (touchEndTime - touchStartTime < 200) {
+            // 快速点击
+            e.preventDefault();
+        }
+    });
+}
+
+// 性能监控
+if (window.performance && window.performance.timing) {
+    window.addEventListener('load', () => {
+        setTimeout(() => {
+            const timing = window.performance.timing;
+            const loadTime = timing.loadEventEnd - timing.navigationStart;
+            console.log(`页面加载时间: ${loadTime}ms`);
+
+            // 如果加载时间过长，提示用户
+            if (loadTime > 3000) {
+                console.warn('页面加载时间较长，可能需要优化');
+            }
+        }, 0);
+    });
+}
+
+// 主题切换功能
+function initThemeToggle() {
+    const themeToggleBtn = document.getElementById('themeToggleBtn');
+
+    // 从localStorage读取用户的主题偏好
+    const savedTheme = localStorage.getItem('theme');
+    // 如果没有保存的偏好，默认使用暗色主题
+    if (savedTheme === 'dark' || savedTheme === null) {
+        document.body.classList.add('dark-theme');
+    }
+
+    // 点击切换主题
+    if (themeToggleBtn) {
+        themeToggleBtn.addEventListener('click', () => {
+            document.body.classList.toggle('dark-theme');
+
+            // 保存用户偏好
+            if (document.body.classList.contains('dark-theme')) {
+                localStorage.setItem('theme', 'dark');
+            } else {
+                localStorage.setItem('theme', 'light');
+            }
+
+            // 重新初始化图标以确保正确显示
+            if (typeof lucide !== 'undefined') {
+                lucide.createIcons();
+            }
+        });
+    }
+}