自新世界 #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.