主從式佈局系統

主從式佈局系統 是做什麼的？

目的

主從式佈局系統（也稱為分割面板或列表-詳細 UI）提供了一個標準化的視覺佈局和互動框架，用於瀏覽主要項目列表（「主」面板），同時在相鄰的同步工作區（「詳細」面板）中顯示目前所選記錄的全面屬性、上下文操作和深度歷史記錄。

主從式模式是高效率網頁生產力應用程式的基礎，例如電子郵件用戶端、客戶支援服務台、CRM 交易檢視器、程式碼審查平台、審計日誌和雲端資源主控台。

設計一個有效的主從式介面需要建立精確的空間比例、獨立的垂直容器（防止整體頁面滾動）、清晰的視覺選取狀態、無縫的多面板同步，以及從並排分割視圖到單面板返回堆疊導覽的流暢行動裝置視口轉場，同時嚴格遵守 WCAG 2.1 AA 無障礙指南，以進行焦點管理和鍵盤導覽。

使用案例

• 服務台與客戶支援入口網站： 在主面板中瀏覽待處理工單列表，同時在詳細面板中閱讀完整的對話串、客戶歷史記錄和內部備註。
• 企業 CRM 與銷售管道： 在主面板中掃描聯絡人或帳戶，同時在詳細面板中檢查交易階段歷史記錄、即將到來的活動和聯絡人詳細資訊。
• 網頁郵件與訊息應用程式： 在左側主欄中檢視收件匣動態，同時在右側詳細面板中閱讀、回覆或歸檔活動訊息。
• DevOps 與雲端檢查器儀表板： 在主面板中過濾伺服器實例、日誌串流或部署管道，同時在詳細面板中檢查即時指標、錯誤追蹤和 YAML 配置。
• 人力資源與應徵者追蹤系統 (ATS)： 並排瀏覽應徵者申請，同時審查履歷、面試官評分和排程工具。

何時不使用

• 需要多行比較的表格式資料工作區： 如果使用者需要同時跨多個結構化屬性比較數十筆記錄，請使用 data-table-ui-system。
• 工作流程管道看板： 對於卡片在離散管道階段之間水平移動的狀態欄工作流程，請使用 kanban-board-ui-system。
• 階層式文件樹： 對於深度巢狀、樹狀結構的文件導覽（例如，檔案系統目錄樹），請使用 tree-view-navigation-system。
• 線性逐步精靈： 對於每個檢視都建立在前一個檢視之上的順序多步驟表單，請使用 step-progress-system 或 multi-step-form-implementation。
• 簡單的獨立登陸頁面： 對於內容在單欄中垂直流動的行銷登陸頁面或簡單的線性文章動態，請使用 article-layout-system 或 section-composition-system。

輸入

1. 資訊架構與項目架構： 要在主項目卡中呈現的屬性（例如，狀態徽章、標題/主旨、主要元資料、時間戳記）與詳細工作區（完整記錄主體、活動歷史記錄、相關記錄、上下文操作列）。
2. 視口外殼上下文： 由外部應用程式外殼（dashboard-layout-system 或 sidebar-navigation-system）提供的佈局邊界。
3. 面板寬度比例偏好： 欄位尺寸要求（例如，固定主面板寬度 360px + 流暢詳細面板 flex: 1，或百分比分割 35% / 65%）。
4. 設計權杖： 表面高度、中性邊框、焦點環指示器和排版尺度（accessible-color-system、elevation-and-depth-system、fluid-spacing-system）。

輸出

1. 分割面板佈局規格： 用於固定與流暢面板比例、獨立垂直捲動容器（overflow-y: auto）和視覺分隔線的 CSS 網格/彈性盒空間定義。
2. 主項目選取與活動狀態藍圖： 列表中未讀、懸停、聚焦、選取（aria-selected="true"）和多選核取方塊狀態的視覺規格。
3. 詳細工作區層級與標題結構： 詳細檢視操作列（固定標題、返回按鈕、狀態控制、主要/次要操作觸發器）和內容標籤/區段的空間佈局。
4. 響應式視口適配模型： 從桌上型電腦/筆記型電腦上的雙面板分割視圖切換到平板電腦/行動裝置螢幕上具有動畫面板滑動效果的單面板返回堆疊導覽的逐步佈局轉換規則。
5. 無障礙鍵盤與 ARIA 互動模型： 焦點陷阱、tabindex 或 APG 列表框焦點路由、ARIA 地標（role="region"、aria-controls），以及透過 aria-live="polite" 進行的螢幕閱讀器狀態通知。

---

工作流程

1. 建立雙面板畫布容器

在應用程式外殼（dashboard-layout-system）內建構外部的主從式包裝容器：

• 容器視口鎖定： 將外部包裝容器設定為 display: flex; height: 100vh; max-height: 100vh; overflow: hidden;（或適合父儀表板內容區域內部），以鎖定整體佈局高度並消除瀏覽器層級的視窗滾動。
• 分割比例欄網格： 使用 CSS 網格或彈性盒定義分割面板比例：
  • 固定主面板模式（建議用於收件匣/CRM）： grid-template-columns: minmax(300px, 380px) 1fr;（主面板保持在 300px 到 380px 之間的舒適掃描寬度；詳細面板消耗所有剩餘的水平空間）。
  • 比例分割模式： grid-template-columns: 35% 65%; 或 40% 60%，適用於密集檢查工具。
• 視覺面板分隔線： 在面板之間插入 1px 實心邊框（border-right: 1px solid var(--border-subtle)）或一個可及的可調整大小分割欄（accessible-split-pane-implementation）。

2. 設計主列表面板結構

主面板作為記錄集合的快速掃描索引：

• 固定標頭區域： 在主面板頂部放置一個固定的搜尋和篩選控制列（flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card)）。包含一個快速搜尋欄位（search-interface-system）、篩選標籤和批次操作觸發器。
• 獨立可滾動項目列表： 將列表項目包裹在一個容器中，該容器具有 flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;（role="list" 或 role="listbox"）。
• 主項目卡結構：
  1. 頂行： 主要識別碼/作者（font-weight: 600; font-size: 0.875rem; color: var(--text-primary)）、狀態藥丸/徽章和時間戳記（font-size: 0.75rem; color: var(--text-muted)）。
  2. 中間行： 項目主旨或標題（font-weight: 500; font-size: 0.875rem; color: var(--text-primary); text-truncate: 1 line）。
  3. 底行： 片段或預覽文字（font-size: 0.8125rem; color: var(--text-secondary); line-clamp: 2）、標籤/類別和指派對象頭像（user-avatar-system）。
• 狀態樣式規則：
  • 未讀/未處理狀態： 粗體標題文字，帶有細微的視覺提示（例如，左側 8x8px 主要強調色點）。
  • 懸停狀態： 背景高亮（background: var(--surface-hover); cursor: pointer）。
  • 活動/選取狀態： 獨特的活動表面背景（background: var(--surface-active-subtle)），左側邊框上有一個 3px 實心主要強調色指示條（border-left: 3px solid var(--brand-primary)）和 aria-selected="true"。
  • 焦點可見狀態： 高度可見的焦點輪廓（outline: 2px solid var(--focus-ring); outline-offset: -2px）。

3. 建構詳細工作區面板結構

詳細面板呈現活動記錄的完整上下文和工作區：

• 空白狀態顯示： 當主面板中未選取記錄時，在詳細面板中顯示一個可及的空白狀態（empty-state-system），帶有細微的圖示、清晰的標題（「未選取記錄」）和有用的提示（「從列表中選取一個項目以檢視詳細資訊」）。
• 固定詳細操作列： 在詳細面板內部呈現一個持續存在的頂部標題列（position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card)）：
  • 行動裝置返回觸發器： 包含一個在桌上型電腦上隱藏的「返回列表」按鈕（<button class="mobile-back-btn">← 返回</button>）。
  • 記錄識別： 記錄 ID / 標題摘要（font-weight: 600; font-size: 1rem）。
  • 操作控制項： 主要操作按鈕（例如，「回覆」、「編輯」、「指派」、「刪除」），使用 button-and-action-system 進行樣式化。
• 獨立內容滾動區域： 將主要詳細內容主體包裹在滾動容器中（flex: 1; overflow-y: auto; padding: 24px）。
• 詳細內容佈局：
  • 標題區段： H1 記錄標題、狀態徽章、元資料網格（建立日期、作者、優先順序、指派對象）。
  • 主要主體區域： 完整描述、HTML 執行緒訊息或配置程式碼區塊。
  • 標籤式子區段： 使用標籤（tab-ui-system）來分隔「活動歷史記錄」、「附件」、「審計日誌」和「相關記錄」。

4. 實作行動裝置和平板電腦響應式返回堆疊導覽

在寬度小於 768px（或密集應用程式為 1024px）的螢幕上，並排顯示面板會導致文字難以閱讀且按鈕擁擠。將佈局轉換為單面板返回堆疊模型：

• 行動裝置單面板檢視： 一次僅以全視口寬度（width: 100%）呈現一個面板。
• 導覽狀態機：
  • 狀態 A（主面板活動）： 主列表面板佔據 100% 寬度。詳細面板視覺上隱藏（display: none 或透過 transform: translateX(100%) 平移出螢幕）。
  • 狀態 B（詳細面板活動）： 當使用者點選主項目時，切換視口。詳細面板佔據 100% 寬度，主面板隱藏。
• 行動裝置返回按鈕： 在狀態 B 中，詳細面板左上角顯示一個顯眼的「返回列表」按鈕。點選它會將狀態機重置回狀態 A，並將鍵盤焦點返回給先前選取的主列表項目。
• 視口動畫： 使用流暢的滑動檢視轉場（view-transitions-implementation 或水平 CSS 轉換 transform 0.25s ease-in-out）來加強方向尋路（向左滑入詳細檢視，向右滑回主列表）。

5. 確保可及的焦點與螢幕閱讀器互動

• ARIA 地標與區域角色： 將 role="region" aria-label="項目列表" 指派給主面板容器，將 role="region" aria-label="項目詳細工作區" 指派給詳細面板容器。
• 列表框/選取標記： 如果主列表表現為單一選取元件，則對列表應用 role="listbox" aria-label="..."，對列表項目應用 role="option" aria-selected="true|false"。或者，使用標準的 <nav> 搭配 aria-current="page" 或 aria-current="true"。
• 記錄選取時的焦點管理： 當使用者使用鍵盤或指標選取主項目時：
  • 如果使用者正在使用方向鍵（上 / 下）快速掃描，則將鍵盤焦點保留在主列表內部。
  • 非同步更新詳細面板 DOM，並透過一個 aria-live="polite" 狀態區域宣佈記錄載入：「已載入工單 #1042：付款處理錯誤」。
  • 當使用者從選取的列表項目按下 Enter 或 Tab 時，將焦點無縫移動到詳細面板的主要操作或標題 H1（tabindex="-1"）。
• 行動裝置視口焦點陷阱與還原： 在行動裝置上切換到詳細檢視時，自動將焦點移動到行動裝置返回按鈕或詳細標題。返回主檢視時，將焦點還原到先前活動的主項目。

---

決策規則

面板佈局與分割策略

視口寬度	建議佈局模式	主面板寬度	詳細面板寬度
寬桌面 (>1280px)	雙面板分割檢視（或帶側邊欄的三面板）	固定 360px - 400px	流暢 flex: 1（min-width: 600px）
標準桌面 (1024px - 1279px)	雙面板分割檢視	固定 320px - 350px	流暢 flex: 1（min-width: 480px）
平板電腦 (768px - 1023px)	窄雙面板或單面板堆疊	固定 280px - 300px（或可折疊）	流暢 flex: 1
行動裝置 (<768px)	單面板返回堆疊檢視	100%（狀態 A）	100%（狀態 B）

主列表選取與焦點模型

• 聚焦時自動選取（快速掃描）： 按 上 或 下 方向鍵會立即更改活動選取，並即時更新詳細面板。建議用於電子郵件閱讀、日誌審計和高容量工單篩選。
• 操作時明確選取（按 Enter / 點選）： 使用方向鍵在主項目中導覽會移動視覺焦點環，而不會更新詳細面板。僅在使用者明確按下 Enter、Space 或點選時，詳細面板才會更新。建議在載入詳細記錄涉及大量網路 API 請求或表單狀態編輯時使用。

---

約束條件

• 無障礙性 (WCAG 2.1 AA)：
  • SC 2.1.1 鍵盤： 使用者必須能夠僅使用鍵盤控制項來滾動主項目、選取記錄、導覽到詳細工作區、觸發操作以及返回主列表。
  • SC 2.4.7 焦點可見： 活動和聚焦的主項目必須具有未裁剪的焦點環，且與背景的對比度至少為 3:1。
  • SC 4.1.2 名稱、角色、值： 主項目必須透過 aria-selected="true" 或 aria-current="true" 向輔助技術明確傳達其活動/選取狀態。
  • SC 2.5.8 目標尺寸： 主列表項目和詳細操作按鈕上的觸控目標必須提供至少 24x24px 的最小目標區域（行動觸控螢幕上偏好 44x44px）。
• 佈局包含與 CLS： 主從式包裝容器必須將其高度鎖定為視口的 100%（或父應用程式外殼內容區域），以防止非預期的版面偏移和整體頁面滾動。