自新世界 #0x15：Carbon Design System

首先，创建手册组件：

然后修改状态栏，添加手册按钮：

最后添加一些样式优化：

这个方案提供了：

1. 完整的使用手册界面：使用 Carbon Design System 的 Modal 和 Tabs 组件

2. 四个主要章节：

   • 概述：软件介绍、功能、系统要求
   • 主界面：详细介绍各个界面区域
   • 标定模式：说明两种模式和偏差计算
   • 操作流程：分步骤的操作指南和故障排除

3. 复用现有组件：

   • CalibrationModeSelector 用于演示标定模式
   • DataDisplay 用于展示数据布局
   • 状态栏元素用于说明底部信息栏

4. 状态栏按钮：在 StatusBar 末端添加使用手册按钮，点击打开全屏手册

5. 友好的排版：清晰的标题层级、充足的间距、合理的配色

这样客户可以随时打开手册查看软件的详细使用说明！

现在修改了手册中控制栏的说明，包括：

1. 详细说明了按钮的 disabled 状态变化：

   • 串口输入框：监测停止时可编辑，运行时禁用
   • 开始/停止按钮：始终可用，会根据状态切换文字和颜色
   • 切换原厂软件：仅在停止时可用
   • 退出按钮：仅在停止时可用，运行时禁用

2. 添加了按钮的介绍：

   • 说明其功能是启动设备原厂配套软件
   • 解释点击后会隐藏当前窗口
   • 说明原厂软件关闭后会自动返回

3. 在演示区域也添加了该按钮，使用 Settings 图标来展示

这样用户就能清楚地了解每个控件在不同状态下的行为了！

Made changes.

让我查看一下 App.css 文件的完整内容：

我看到问题了，有一个 // ...existing code... 的注释造成了错误。让我修复它：

Made changes.

完成！我已经将演示按钮从 disabled 改为使用 pointerEvents: "none"，这样：

1. ✅ "开始监测" 按钮显示为蓝色主按钮（kind="primary"）
2. ✅ "停止监测" 按钮显示为红色危险按钮（kind="danger"）
3. ✅ "切换原厂软件" 按钮显示为灰色第三级按钮（kind="tertiary"）
4. ✅ "退出" 按钮显示为红色第三级按钮（kind="danger--tertiary"）

所有按钮都保持了正确的颜色，但通过 pointerEvents: "none" 阻止点击，这样在手册中就能看到它们正常的视觉效果了！

Made changes.

完成！我已经将 Markdown 风格的列表（使用 • 和 - 以及 <br /> 和  ）改成了正确的 HTML 嵌套列表结构：

• 使用 <ul> 和 <li> 标签
• 主要项目作为一级列表
• 详细说明作为嵌套的二级列表
• 添加了适当的间距样式

这样语义更清晰，样式也更容易控制！

Made changes.

现在更新 Manual.tsx 来使用这些新组件：

现在替换 TabPanels 的内容：

现在替换 TabPanels 的内容：

Made changes.

Made changes.

让我查看文件中还剩下什么内容需要替换：

我看到问题了，还有重复的内容。让我删除这些重复的部分：

完成！我已经成功将四个 Tab 拆分成独立的组件文件：

1. OverviewTab.tsx - 概述标签，包含软件简介、主要功能和系统要求
2. InterfaceTab.tsx - 主界面标签，展示控制栏、数据展示区和状态栏
3. CalibrationTab.tsx - 标定模式标签，说明两种标定模式和偏差计算
4. WorkflowTab.tsx - 操作流程标签，提供分步骤操作指南和故障排除

现在 Manual.tsx 变得更加简洁，只负责组织这些Tab组件的结构，而每个Tab的具体内容都在独立的组件文件中，便于维护和复用！

Made changes.