Now let me read the remaining documents and current codebase files:

Now let me read all the current component files to understand what needs to be updated:

Now let me read the remaining components that need optimization:

Now I have a comprehensive understanding of all the requirements documents and the current codebase. Based on the UI optimization design document, I need to make significant changes. Let me create the updated system following the new navigation structure and design specifications. I'll use the TodoManager to track the multi-step work:

Now let me start with the comprehensive UI overhaul. First, I'll update the globals.css with the new functional color system, then restructure the sidebar navigation according to the new 6-module structure, and rebuild the homepage dashboard:

Now let me rebuild the sidebar with the new 6-module navigation structure and upgrade all the core components:

Now let me rebuild the production overview with batch progress, process stage cards, and key metrics:

Now let me update the homepage layout:

Now let me create the AI assistant page and the system settings page:

Now let me create the settings page:

Now let me update the remaining sub-pages to use the new header with breadcrumbs:

I need to update all sub-pages to use the new layout pattern with breadcrumbs. Let me update them all:

Now let me update all remaining sub-pages in parallel:

All sub-pages share the same pattern. Let me update them all:

根据您上传的7份文档（UI优化设计方案、UI说明书、需求说明书第二至第六部分），我已对整个系统进行了全面的UI重构。主要更新包括：

导航重构 - 侧边栏从3组改为6大模块（生产监控、质量管理、智能预测、数据分析、生产管理、系统设置），新增生产线选择器和班次标识，符合文档中的角色化界面设计原则。

首页看板重构 - 新增批次进度条（含配方信息和预计完成时间）、5个工艺阶段状态卡片（熔炼/铸造/轧制/冷却/收线，带工艺阶段专属配色），关键参数实时趋势图支持温度、速率、轧制压力三维切换，质量指标面板增加了Cpk、标准差等SPC统计数据。

新增页面 - AI智能体对话界面（支持快捷指令和Qwen3集成）、系统设置页面（AI配置/系统参数/显示偏好三个标签页），所有子页面统一升级为面包屑导航布局。

色彩系统升级 - 新增功能性状态色（运行/空闲/警告/故障/维护）、质量等级色、工艺阶段色，字体从Geist切换为Inter + JetBrains Mono以匹配UI说明书规范。

The issue is that BreadcrumbSeparator renders as a <li> and it's placed inside a BreadcrumbItem which is also a <li>, causing the nesting. The BreadcrumbSeparator should be a sibling of BreadcrumbItem, not a child.

Also removed the unused ChevronRight import since BreadcrumbSeparator has its own default separator — actually it's still being used. The fix moves BreadcrumbSeparator out of BreadcrumbItem so they are siblings inside BreadcrumbList, wrapped in a <span className="contents"> fragment for the React key. This prevents the <li> inside <li> hydration error.