跳至主要内容

組件介紹

這一頁集中說明跨 APP 與 Web 共用的操作語彙。每一組先定義使用界線，再以互動預覽呈現主要狀態。

表單與操作​

Button variants

目前按鈕的主要 variant 與 size；After 重新整理操作層級。

Form field states

編輯／唯讀、required 與 error 都應有明確呈現。

Selection controls

Select、Checkbox、Radio、Switch、Slider；After 將選擇放入有清楚意義的設定列。

Coverage64%

Date and time

日期與時間是 Popover + specialized picker pattern；After 將兩者整合成單一排程決策。

Button variants​

目前 variants：primary、brand、secondary、secondary-white、secondary-gray、destructive、outline、ghost、link。

尺寸為 sm、default、lg、xl。按鈕必須支援 loading state；刪除操作使用 destructive，不能只依靠按鈕文字暗示風險。

Form field states​

編輯、唯讀、required 與 error 都要有明確呈現。Label、說明、控制項與驗證訊息視為同一組資訊，驗證訊息不能只靠紅色表達。

Selection controls​

  • Select：從有限選項中選擇一項。
  • Checkbox：獨立的包含／排除選擇。
  • Radio：同一組互斥選擇。
  • Switch：立即生效的開關狀態。
  • Slider：選擇連續範圍，並同步顯示目前數值。

選擇控制應放入有清楚意義的設定列，附上 label 與必要說明。

Date and time​

日期與時間採 Popover 加 specialized picker pattern。兩者屬於同一排程決策時，應放在同一資訊區塊，並清楚顯示時區及格式。

內容與導覽​

Tabs

目前 Tabs 元件與首頁語彙的內容切換提案。

目前查看元件的視覺與互動狀態。

一般 Tabs

用於同一層級的三個內容區塊。

檢視專案整體狀態。

Accordion

目前 Accordion 與更聚焦的漸進揭露提案。

何時使用 Accordion？⌄

適合補充內容與漸進揭露；主要任務不可藏在收合項目中。

動畫如何處理？⌄

只解釋展開關係，並尊重 reduced motion。

Dropdown and Popover

Dropdown 處理操作，Popover 保留目前上下文；Tooltip 只提供補充說明。

補充資訊不能取代可見標籤。

Tabs 用於同一上下文的平行內容；Accordion 只收納補充內容；Dropdown 放 actions；Popover 放 anchored content；Tooltip 只補充簡短說明，不能取代可見 label。

Dialog 與 Sheet​

Dialog

一般檢視或編輯內容；開啟後會限制焦點，關閉時回到觸發按鈕。

✦

保持單一任務、明確標題與可預期的下一步。

AlertDialog

保留給不可逆或高風險操作，確認按鈕必須說明結果。

!

刪除操作必須再次確認，並清楚說明無法復原。

Sheet

側邊輔助工作區，不中斷主要頁面的閱讀脈絡。

≡

適合檢視佇列、篩選或輔助設定。

1觸發按鈕2浮層任務3返回焦點

Dialog 處理一般檢視或編輯；AlertDialog 只用於不可逆或高風險決策；Sheet 用於側邊輔助面板與行動版工作流。所有浮層都必須提供明確關閉路徑並管理焦點。

回饋與非同步​

Toast variants

全域 Toaster 已由產品根層掛載。

Toast 適合短暫結果；需要持續閱讀、操作或恢復時，改用 inline alert、page error 或 notification center。

點擊按鈕查看通知

Inline alert and states

頁面內持續存在的回饋，不依賴 toast 消失。

iInfo這段訊息會留在目前上下文中。
!載入失敗請重新整理或點擊重試。
正在取得最新資料…

Progress and skeleton

Progress 表達可量化進度；Skeleton 保持 layout 穩定。

AI processing64%

Empty and retry

Empty、no result、permission 與 error 要分開描述。

♢目前沒有通知

新的邀請與工作更新會出現在這裡。

Toast 適合短暫結果。需要持續閱讀、操作或恢復時，改用 inline alert 或 page state。Empty、no result、permission 與 error 必須分開描述，失敗狀態要提供可行的恢復操作。

表格與資料模式​

Table states

目前 table wrapper 會處理水平滾動；row state 由使用者組合。

ComponentLayerStatusCoverage
ButtonPrimitiveStable100%
DialogPrimitiveReview82%
ToastFeedbackNeeds rules68%

目前頁面: 3

Card and badge system

Card 建立資訊層級；Badge 只標示狀態，操作仍保留清楚動詞。

Stable可直接使用

狀態與下一步保持分離，操作使用清楚動詞。

Draft規範整理中

狀態與下一步保持分離，操作使用清楚動詞。

Warning需要補齊狀態

狀態與下一步保持分離，操作使用清楚動詞。

Table wrapper 負責小螢幕水平捲動；Card 建立資訊層級；Badge 只表達狀態。可操作內容使用 Button 或 link，不能把 Badge 當成不明確的控制項。

Agent 對話與錄音​

01Sidebar shell
02Messages
03Prompt input
04Agent run

Portal AI chat · 完整側欄

以示例資料組合目前 Portal 左側對話的 header、訊息與 Prompt Input；不初始化正式服務。

G
好事道 AI 助手工作區助理
請根據年度計畫，整理本季最需要追蹤的任務。
G

我已整理成三個可執行的追蹤項目：

  1. 確認合作單位與服務場次
  2. 彙整受益人回饋與成效證據
  3. 完成季末成果摘要
◉ 示例資料
AI 可能會出錯，請確認重要資訊

Message list

使用者訊息維持暖灰 bubble；AI 回覆保留無底色內容、來源與行內操作。

請根據年度計畫，整理本季最需要追蹤的任務。
G

我已整理成三個可執行的追蹤項目：

  1. 確認合作單位與服務場次
  2. 彙整受益人回饋與成效證據
  3. 完成季末成果摘要
◉ 示例資料

Prompt input

提供附件、執行中與停用狀態。

AI 可能會出錯，請確認重要資訊

Agent run

長任務顯示整體進度；工具活動只說明當下正在做的事。

正在整理任務優先順序2 / 3 · 彙整成效證據
✓ 讀取年度計畫✓ 整理合作單位○ 建立成果摘要

Conversation history

歷史清單支援目前對話、搜尋、新增與更多操作。

對話紀錄

Mobile Agent Chat

重現 App 的置中標題、黑色 user bubble、無底色 assistant 與圓角 composer。

好事道
請根據年度計畫，整理本季最需要追蹤的任務。
G

我已整理成三個可執行的追蹤項目：

  1. 確認合作單位與服務場次
  2. 彙整受益人回饋與成效證據
  3. 完成季末成果摘要
◉ 示例資料
輸入訊息

Mobile Agent Voice

聆聽、逐字稿完成與送出狀態收在單一全螢幕 voice flow。

影響力專家 1.0
正在聆聽

請說出你想交給 AI Agent 的任務

對話元件涵蓋 Sidebar shell、Messages、Prompt input、Agent run、Conversation history 與語音狀態。來源必須能回到原始資料，長任務要保留整體進度與失敗後的恢復路徑。

關聯圖與流程節點​

關聯圖 Relationship graph

選取或拖曳節點，查看它在專案中的角色。

節點關係步驟圖

目前步驟 2/4把階段、活動與證據接到同一條脈絡。

Project 是根節點，其他節點都要回答如何關聯。選取節點後要顯示名稱、類型和關係；目前、已完成與下一步也必須能同時辨識。

最後於 更新