npm installnpm run devnpm run buildnpm run buildnpm run test:unitnpx playwright install # 首次需安裝瀏覽器
npm run build # CI 或正式測試前需先建置
npm run test:e2e # 執行所有瀏覽器測試
npm run test:e2e -- --project=chromium # 僅測試 Chromium
npm run test:e2e -- tests/example.spec.ts # 指定檔案測試
npm run test:e2e -- --debug # 除錯模式npm run lint- 新增「指定模型」輸入欄位於 LLM 安全檢查 API 金鑰區塊，placeholder 為「例如：gpt-4」。
- 儲存與測試時一併傳送 model 欄位。
- 所有文案皆為正體中文。
- 兩欄位排版優化，並排顯示。
- 側邊欄 logo 圖片放大，並移除原本的文案。
- 登入機制改為自行管理：不使用 Keycloak，僅支援兩種登入方式：
- 學校 OAuth（由後端串接學校 OAuth 流程並發 token）
- 帳號密碼（由後端驗證並發 token） 兩種方式皆由本系統後端統一管理與驗證。
- 使用者於登入頁點擊「學校 OAuth 登入」按鈕。
- 前端觸發 handleOAuthLogin 方法，將 window.location.href 導向 /api/v1/auth/oauth/redirect。
- 瀏覽器跳轉至後端 /api/v1/auth/oauth/redirect，開始學校 OAuth 認證流程。
- 認證完成後，後端將使用者導回前端（通常帶有 token 或授權資訊）。
- 前端收到 token 後，完成登入並導向首頁或指定頁面。
此流程確保 OAuth 登入安全且由後端統一管理。
以下是針對「AI Notebook Execution Platform」前端設計的專屬產品需求文件 (PRD)，旨在為前端開發團隊提供清晰的指導，定義使用者介面 (UI) 和使用者體驗 (UX) 的具體需求與實現細節。這份前端 PRD 提取自完整 PRD 中的相關內容，聚焦於前端的工作範圍、介面設計、功能需求與技術實現建議，並整合了之前討論的所有內容，包括檔案下載功能、LLM 安全檢查結果的反饋等。同時，本文件參考了最新的網頁搜尋結果（如 simran-pm.medium.com）以確保文件結構與業界最佳實踐一致，特別是前端與後端的責任劃分。
AI Notebook Execution Platform - Frontend
打造一個基於 Vue.js 的前端應用，提供直觀、響應式的使用者介面，讓使用者能夠輕鬆上傳 Jupyter Notebook (.ipynb) 檔案、選擇執行資源、查看任務狀態、下載執行結果，並接收系統公告和其他通知。同時，為管理員提供全面的監控與管理介面，以便管理使用者、調整資源、監控系統與安全狀態。前端應用透過與後端 API 的互動，確保資料的即時更新與操作的流暢性，旨在提供優質的使用者體驗 (UX)，如 simran-pm.medium.com 所述，透過 PRD 確保團隊對產品願景的一致理解。
- 一般使用者：可上傳
.ipynb檔案、選擇 GPU 資源與 VRAM 大小、查看系統公告、追踪任務狀態、下載執行完成的.ipynb輸出檔案。 - 管理員：除具備一般使用者功能外，還可管理系統公告、監控系統資源與任務佇列、調整使用者時間、生成統計報表、審查安全檢查結果、配置安全檢查參數。
前端（Frontend）主要負責使用者介面的呈現與互動，使用戶能夠直觀地操作系統並接收反饋，主要工作內容包括：
- 使用者介面設計與實現：基於 Vue.js 框架，實現使用者與管理員的 UI 界面，包括系統公告顯示、檔案上傳、資源選擇、佇列狀態顯示、任務狀態追踪與結果預覽等功能。
- 使用者體驗優化：確保介面響應式設計，適配不同設備與屏幕尺寸，並優化頁面加載速度（首次加載時間不超 3 秒，組件響應不超 300 毫秒）。
- 數據互動與實時更新：透過 Axios 調用後端 REST API 取得數據（如任務狀態、系統公告），並使用 WebSocket 或 Server-Sent Events (SSE) 實現佇列狀態與任務進度的實時更新。
- 狀態管理與錯誤處理：使用 Pinia 管理前端狀態，處理 API 調用中的錯誤（如認證失敗、伺服器錯誤），並透過攔截器統一處理認證與錯誤提示。
- 權限控制：使用 Vue 路由守衛實現基於角色的頁面訪問控制，確保一般使用者與管理員僅能訪問對應功能。
- 檔案下載功能：實現使用者下載執行完成的
.ipynb輸出檔案功能，透過調用後端 API 取得檔案流，並使用瀏覽器下載機制完成檔案下載。 - 前端範圍限制：前端不處理業務邏輯（如安全檢查、任務調度），僅負責數據展示與使用者輸入收集，將複雜邏輯交由後端處理。
前端應用應實現以下核心功能，確保一般使用者與管理員能夠高效完成各自的操作，並獲得良好的使用者體驗。
- 系統公告查看：在首頁顯示最新公告，支持摺疊/展開內容，重要公告以視覺標記（如顏色、圖標）突出顯示，歷史公告可瀏覽。
- 檔案上傳與任務上傳：提供拖放上傳介面，支援
.ipynb檔案（上限 10 MB），並允許選擇是否需要 GPU 資源及指定 VRAM 大小 (7.9G, 15.9G, 23.9G, 31.9G, 63.9G, 79.9G)。 - 使用時間顯示：以進度條或其他圖形化方式展示使用者剩餘時間與總使用時間，剩餘時間低於閾值（如 10 小時）時顯示警示。
- 佇列狀態查看：顯示當前佇列深度（例如 20/40）與預估等待時間，若佇列滿則顯示「隊列已滿，請稍後重試」提示。
- 任務狀態追踪：顯示已上傳任務的狀態（如等待中、執行中、完成、失敗），包含執行時間與資源使用情況。
- 結果處理與下載：任務完成後，顯示輸出結果預覽，並提供下載
.ipynb輸出檔案的功能，點擊下載按鈕觸發瀏覽器下載，檔案名稱易於識別（如result_{submission_id}.ipynb）。若訪問被拒絕，顯示錯誤提示。 - 通知接收：透過前端通知或電子郵件接收任務狀態更新與結果通知，可選擇將結果發送至指定郵箱。
- 系統公告管理：支援公告的新增、編輯、刪除，設定優先級（一般、重要、緊急）與有效期。
- 佇列管理：顯示佇列深度，提供「清空佇列」按鈕，操作前顯示確認對話框，確保誤操作防護。
- 集群監控：視覺化呈現 CPU/GPU 使用率、佇列狀態與健康度，使用熱力圖展示資源熱點。
- 資源控制：提供介面調整佇列配置參數（如優先級、配額）與上傳速率。
- 使用者管理：查看使用者列表，支援搜尋與分頁，查看使用者詳細資訊，調整使用者剩餘時間。
- 統計報表：生成使用統計報表，支援按時間、使用者等多維度過濾與排序，顯示圖表化數據。
- 安全審核統計：查看因安全檢查被拒絕的任務統計，包含拒絕率趨勢與詳細記錄，允許檢視被拒絕檔案。
- LLM 安全檢查管理：配置安全檢查參數（如風險指數閾值、提示詞模板），查看 LLM API 健康狀態（如成功率、響應時間），顯示風險指數分布圖表。
- LLM 安全檢查 API 金鑰區塊新增「指定模型」欄位，placeholder 為「例如：gpt-4」。
- 儲存與測試時會一併傳送模型名稱。
- 所有文案皆為正體中文，欄位排版優化。
- 登入頁面：
- 使用 Vue 表單組件實現簡單的登入介面，包含學校 OAuth 登入選項（透過 Keycloak 回調）。
- 提供清晰的錯誤提示（如認證失敗）與加載狀態指示。
- 導航菜單：
- 使用 Vue 側邊或頂部導航組件，根據使用者角色（一般使用者或管理員）動態顯示可訪問的選項。
- 一般使用者選項：首頁、任務上傳、任務狀態、使用時間。
- 管理員選項：包含一般使用者選項，另增加系統管理、佇列管理、使用者管理、統計報表、安全審核、資源監控。
- 支援響應式設計，適配不同屏幕尺寸（桌機、手機、平板）。
- 提供快速導航連結至首頁與個人資訊頁面。
- 角色基於路由守衛：實現路由守衛機制，確保未授權使用者無法訪問管理員頁面，訪問被拒時顯示友好錯誤頁面（如 403 Forbidden，提示 "Access Denied"）。
- 使用者公告檢視：
- 首頁展示有效期內的公告列表，最新公告置頂，重要與緊急公告以不同顏色或圖標標記（例如紅色驚嘆號）。
- 支援公告內容摺疊/展開，避免佔用過多頁面空間，預設顯示標題與簡短摘要。
- 提供「查看更多」按鈕，展開歷史公告列表，支援分頁顯示。
- 管理員公告管理：
- 公告管理頁面包含列表視圖，展示所有公告（標題、優先級、時間範圍、狀態），支援分頁與過濾（按優先級或時間）。
- 提供「新增公告」與「編輯」按鈕，彈出表單視窗，使用富文本編輯器（如 TinyMCE）編輯內容。
- 新增/編輯表單包含標題、內容、優先級下拉選項（一般、重要、緊急）、開始與結束日期選擇器。
- 支援公告刪除功能，刪除前顯示確認對話框。
- 檔案上傳區域：
- 使用 Vue 拖放組件實現檔案上傳，支援單檔案選擇與拖放操作，顯示檔案格式限制（僅
.ipynb）與大小限制（10 MB）。 - 上傳過程中顯示進度條，反映上傳百分比，上傳完成後顯示檔案名稱與成功訊息。
- 若檔案不符合條件（如格式錯誤、大小超限），顯示錯誤提示（如 "File must be .ipynb and less than 10MB"）並禁用上傳按鈕。
- 使用 Vue 拖放組件實現檔案上傳，支援單檔案選擇與拖放操作，顯示檔案格式限制（僅
- 資源選擇：
- 提供「是否需要 GPU」切換按鈕（如 Toggle Switch），預設為「否」。
- 若選擇「是」，顯示 VRAM 大小下拉選項 (7.9G, 15.9G, 23.9G, 31.9G, 63.9G, 79.9G)，旁邊顯示每個選項的可用狀態（如「可用」或「資源緊張」）與預估等待時間。
- 佇列狀態顯示：
- 在上傳頁面頂部或底部顯示佇列狀態進度條（如 "Current Queue: 15/40"），並顯示預估等待時間（如 "Estimated Wait: 10 minutes"）。
- 若佇列已滿，顯示紅色警告訊息（如 "Queue is full. Please try again later."），並禁用上傳按鈕。
- 上傳反饋：
- 上傳成功後，顯示成功訊息（如 "Task submitted successfully. ID: {submission_id}"），包含佇列位置與預估等待時間。
- 若因 LLM 安全檢查被拒絕，顯示錯誤訊息（如 "Task rejected due to high risk code detected. Risk Score: {score}."），並提供查看詳細原因的連結（導向任務狀態頁）。
- 若因佇列滿或時間不足被拒絕，顯示相應說明（如 "Submission failed. Queue is full." 或 "Insufficient remaining time."）。
- 任務列表：
- 使用 Vue 卡片或表格組件顯示使用者上傳的所有任務，包含任務 ID、狀態（等待中、執行中、完成、失敗）、上傳時間、資源類型（CPU/GPU）、執行時間。
- 支援任務狀態徽章，透過不同顏色表示狀態（例如等待中為藍色、執行中為綠色、失敗為紅色）。
- 支援分頁與過濾功能，使用者可按狀態或時間範圍篩選任務。
- 任務詳情：
- 點擊任務卡片或表格行，展開詳細資訊頁面，顯示任務完整資訊，包括起始時間、結束時間（如有）、詳細資源使用情況（如 GPU VRAM 分配）。
- 若任務完成，顯示「下載結果」與「發送至郵箱」按鈕；若任務失敗且與安全檢查相關，顯示拒絕原因（如 "Rejected due to high risk code. Risk Score: 9"）。
- 任務結果下載：
- 點擊「下載結果」按鈕，調用後端 API 取得檔案流，觸發瀏覽器下載，檔案名稱格式為
result_{submission_id}.ipynb。 - 若下載因未授權失敗，顯示錯誤提示（如 "Access denied. You do not have permission to download this file."）。
- 點擊「下載結果」按鈕，調用後端 API 取得檔案流，觸發瀏覽器下載，檔案名稱格式為
- 任務結果郵件通知：
- 點擊「發送至郵箱」按鈕，彈出表單輸入郵箱地址，上傳後顯示成功訊息（如 "Result sent to your email."）；若未授權，顯示錯誤提示。
- 時間概覽：
- 在個人資訊頁面或任務上傳頁面，使用進度條顯示使用者總使用時間與剩餘時間（如 "Used: 20h / Remaining: 80h"）。
- 若剩餘時間低於 1 小時，進度條顯示為警示顏色（如橙色或紅色），並顯示文字提示（如 "Low remaining time. Contact admin for extension."）。
- 時間歷史：
- 提供「查看歷史」按鈕，顯示過去任務的時間記錄列表，包含任務 ID、執行時間範圍、耗時與狀態，支援分頁與時間過濾。
- 資源使用概覽：
- 使用 ECharts 或 Chart.js 圖表組件，顯示 CPU 與 GPU 資源使用率折線圖或柱狀圖，包含即時數據與歷史趨勢（可切換時間範圍，如 1 小時、1 天）。
- 顯示佇列深度進度條（分別顯示 CPU 與 GPU 佇列），如 "CPU Queue: 5/20, GPU Queue: 10/20"。
- 顯示活躍使用者數與其他關鍵指標。
- 集群狀態監控：
- 使用熱力圖或儀表盤展示集群資源分布與健康度，健康度以分數或顏色表示（如 80 分為綠色，<50 為紅色）。
- 提供趨勢分析圖表，顯示資源使用高峰與瓶頸。
- 智能資源控制面板：
- 提供表單或滑塊調整佇列參數，如 CPU/GPU 配額、優先級、上傳速率（例如每分鐘 5 至 15 個 workload）。
- 顯示系統推薦的優化建議（如 "Increase GPU queue priority due to high wait time."）。
- 佇列管理：
- 顯示佇列詳細列表，包含等待中任務的 ID、使用者和資源需求。
- 提供「清空佇列」按鈕，點擊後彈出確認對話框，確認後發送請求至後端執行清空操作，操作成功後顯示通知。
- 使用者管理：
- 使用表格組件顯示使用者列表，包含 ID、姓名、角色、剩餘時間、任務數量，支援搜尋（按 ID 或姓名）與分頁。
- 點擊使用者行，顯示詳情頁，可調整剩餘時間，輸入調整值（正負秒數）與原因，上傳後顯示更新結果。
- 統計報表：
- 提供過濾條件表單，包含時間範圍、特定使用者、排序方式（按時間或任務數），上傳後生成報表。
- 報表使用圖表（例如柱狀圖展示每個使用者的使用時間）與表格呈現詳細數據，支援匯出（如 CSV 格式）。
- 安全審核統計：
- 顯示被拒絕任務的統計圖表（例如按時間或風險指數分布的折線圖），包含總拒絕率與趨勢。
- 提供被拒絕任務詳細列表，點擊可檢視拒絕原因與檔案內容（若後端提供）。
- LLM 安全檢查管理：
- 提供 API 金鑰與模型設定（含儲存、測試功能），於同一區塊可直接輸入金鑰與模型並操作。
- 提供 LLM 安全檢查參數設定（風險閾值、提示詞模板、失敗策略），以表單方式直接於頁面調整並儲存。
- 顯示 LLM API 服務健康狀態（如調用成功率、平均響應時間），可手動重新整理。
- 提供 LLM 安全檢查報告查詢（可依風險等級、日期篩選，顯示分布統計與詳細列表），查詢結果以表格與統計數據同頁顯示。
- 以上功能皆於同一頁面以表單、查詢按鈕、表格等方式呈現，無需切換分頁。
- 頁面加載時間：首次頁面加載時間不超過 3 秒，確保快速響應。
- 組件響應時間：UI 組件對使用者互動的反應時間不超過 300 毫秒。
- 響應式設計：支援主流瀏覽器（Chrome, Firefox, Edge）與不同屏幕尺寸，從手機（320px）到桌機（1920px），確保介面可讀與可用。
- 可訪問性 (Accessibility)：遵循 WCAG 2.1 Level AA 標準，確保視障或聽障使用者可透過螢幕閱讀器操作介面，鍵盤導航支持所有功能。
- 錯誤處理：對 API 調用失敗進行友好提示（如 "Network error. Please try again."），避免技術性錯誤訊息直接暴露給使用者。
- 安全性：防止 XSS 與 CSRF 攻擊，確保使用者輸入經過消毒，透過攔截器統一處理認證過期（如自動導向登入頁）。
- Vue.js 框架：採用 Vue 3 與 TypeScript 開發，確保代碼類型安全與現代化。
- 狀態管理：使用 Pinia 管理前端狀態，如使用者資訊、任務列表等，提升複雜組件間數據共享效率。
- 路由管理：使用 Vue Router 實現頁面導航與角色基於權限控制。
- HTTP 客戶端：使用 Axios 調用後端 REST API，實現數據取得與檔案下載，提供統一的錯誤處理與認證攔截器。
- 實時更新：使用 WebSocket 或 Server-Sent Events (SSE) 實現任務狀態與佇列狀態的即時更新，避免頻繁輪詢。
- UI 組件庫：選擇 Element Plus 或 Vuetify 作為 UI 組件庫，提供一致的視覺風格與快速開發體驗。
- 圖表庫：使用 ECharts 或 Chart.js 實現資源使用、統計報表等數據視覺化功能。
- 富文本編輯器：使用 TinyMCE 或 CKEditor 實現系統公告內容編輯，支持圖片與連結嵌入。
- 模塊化架構：將前端代碼按功能模塊組織，分為
views（頁面）、components（可重用組件）、services（API 調用服務）、store（狀態管理）等目錄。 - 路由配置：在
router/index.ts中定義路由表，透過meta屬性標記角色權限（如meta: { roles: ['ADMIN'] }），由路由守衛檢查。 - API 服務封裝：在
services/api目錄下封裝 API 調用邏輯，按功能分文件（如taskService.ts、userService.ts），統一處理錯誤與認證。 - 組件設計：遵循原子設計原則（Atomic Design），將組件分為原子、分子、組織層級，提升可重用性與維護性。
- 下載流程：
- 使用者點擊「下載結果」按鈕，前端調用後端 API 端點（如
GET /api/v1/task/result/{id}），攜帶 JWT Token。 - 後端返回檔案流，響應頭設置為
Content-Type: application/octet-stream與Content-Disposition: attachment; filename="result_{submission_id}.ipynb"。 - 前端使用
Blob物件處理檔案流，創建臨時 URL 並觸發<a>標籤下載，確保檔案名稱正確顯示。
- 使用者點擊「下載結果」按鈕，前端調用後端 API 端點（如
- 錯誤處理：
- 若後端返回 403 Forbidden 或其他錯誤，前端解析 JSON 錯誤訊息（如
{ "errorCode": "ACCESS_DENIED", "message": "You are not authorized to access this task result." }），顯示友好提示（如透過 Vue 通知組件顯示 "Access denied. You do not have permission to download this file."）。
- 若後端返回 403 Forbidden 或其他錯誤，前端解析 JSON 錯誤訊息（如
- 性能優化：
- 避免多次下載請求，設置按鈕防抖機制（如點擊後 2 秒內禁用按鈕）。
- 對於大檔案，顯示下載進度條（若瀏覽器支援），提升使用者體驗。
- WebSocket 連接：
- 在前端初始化時，建立與後端的 WebSocket 連接（例如
ws://api.example.com/ws/updates），攜帶 JWT Token 進行認證。 - 訂閱任務狀態與佇列更新事件，收到後端推送的消息後，更新前端狀態（如任務狀態從「等待中」變為「執行中」）。
- 在前端初始化時，建立與後端的 WebSocket 連接（例如
- SSE 替代方案：
- 若 WebSocket 不可用，可使用 Server-Sent Events，透過
EventSourceAPI 接收後端推送的更新事件。
- 若 WebSocket 不可用，可使用 Server-Sent Events，透過
- UI 更新：
- 使用 Vue 的響應式系統，確保收到更新後，UI 自動重新渲染（如佇列深度進度條更新、任務狀態徽章變色）。
- 認證攔截：
- 在 Axios 請求攔截器中，自動為每個請求添加
Authorization: Bearer {token}標頭，Token 從 Local Storage 或 Pinia 狀態中取得。 - 若收到 401 Unauthorized 響應，清除 Token 並導向登入頁面，顯示提示（如 "Session expired. Please login again."）。
- 在 Axios 請求攔截器中，自動為每個請求添加
- 錯誤提示：
- 對 400、403、500 等狀態碼的響應，解析後端返回的 JSON 錯誤訊息，透過 Vue 通知組件（如 Element Plus 的
ElNotification）顯示友好錯誤提示。 - 對於網絡錯誤（如連接超時），顯示通用錯誤訊息（如 "Network error. Please check your connection."）。
- 對 400、403、500 等狀態碼的響應，解析後端返回的 JSON 錯誤訊息，透過 Vue 通知組件（如 Element Plus 的
- 開發環境：使用 Vite 作為 Vue 開發服務器，支持熱重載與快速編譯。
- 構建流程：
- 使用 TypeScript 編譯檢查，確保代碼類型安全。
- 使用 ESLint 與 Prettier 進行代碼品質控制，統一程式碼風格。
- 使用 Vite 打包生成靜態資源，優化資源大小與加載效率。
- 部署方式：
- 構建 Docker 映像，包含 Nginx 伺服器，服務靜態資源與代理 API 請求。
- 部署至 Kubernetes 集群，使用 Service 與 Ingress 確保高可用性與負載均衡。
前端透過以下定義的 API 與後端通信，確保數據取得與操作的正確性。API 規範遵循 RESTful 原則，所有請求透過 HTTPS 傳輸，並攜帶 JWT Token 進行認證。
- 數據格式：請求與響應使用 JSON 格式，檔案下載除外（使用二進制流）。
- 錯誤處理：後端返回錯誤時，包含標準錯誤碼與訊息（如
{ "errorCode": "string", "message": "string" }），前端根據錯誤碼顯示相應提示。 - 版本控制：API 路徑包含版本號（如
/api/v1/），確保未來升級相容性。 - 分頁與過濾：列表 API 支援分頁（
page,size）、排序（sort）與過濾參數，前端提供相應控制項。
- 主題顏色：採用現代化科技風格，主色調為藍色（科技感，如
#409EFF），輔色調為灰色（中性，如#909399）與綠色（表示成功，如#67C23A），確保視覺一致性。 - 字體：使用易讀字體（如 Roboto 或 Open Sans），正文字體大小為 14px，標題大小範圍為 16px 至 24px，確保可讀性。
- 圖標：使用一致的圖標庫（如 Element Plus 自帶圖標或 Font Awesome），確保圖標尺寸統一（例如 16px 或 24px）。
- 間距與佈局：遵循 8px 網格系統，組件間距與內邊距為 8px 的倍數，確保佈局整齊。
- 陰影與深度：對卡片與按鈕使用適度陰影（如
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1)），提升層次感。
- 按鈕行為：按鈕支援懸停（Hover）效果（如顏色變暗）、點擊反饋（如按下動畫），確保反應迅速。
- 表單行為：表單欄位支援焦點狀態（Focus，邊框高亮），錯誤狀態顯示紅色提示文字。
- 通知顯示：使用右上角或右下角彈出通知，支援成功（綠色）、錯誤（紅色）、警告（橙色）等多種類型，自動關閉時限為 5 秒，使用者可手動關閉。
- 加載狀態：API 調用或頁面切換時顯示加載指示器（如旋轉圖標或進度條），避免使用者感到卡頓。
- 響應式互動：在小型設備上，導航菜單摺疊為漢堡選單，表格與圖表支援水平滾動或縮略顯示。
- 鍵盤導航：所有互動元素（如按鈕、連結、表單欄位）支援鍵盤操作，使用 Tab 移動焦點，Enter 或 Space 觸發操作。
- 螢幕閱讀器：確保 HTML 結構語義化，使用正確的 ARIA 屬性（如
aria-label、aria-expanded），支援視障使用者。 - 顏色對比：確保文字與背景顏色的對比度至少為 4.5:1（符合 WCAG 2.1 AA 標準），避免色盲使用者無法辨識關鍵資訊。
- 動畫控制：提供選項關閉非必要動畫（如通知滑入效果），避免對敏感使用者造成不適。
| 風險類型 | 風險描述 | 緩解策略 |
|---|---|---|
| 介面響應性能問題 | 頁面或組件響應時間過長，影響使用者體驗 | 使用虛擬滾動技術顯示大數據列表，優化圖表渲染，組件懶加載，確保首次加載時間 < 3 秒 |
| 實時更新失敗 | WebSocket 或 SSE 連接失敗，導致狀態不同步 | 提供備用輪詢機制（如每 10 秒更新一次），顯示連接狀態提示，允許使用者手動重新整理 |
| 檔案下載體驗差 | 下載速度慢或未授權錯誤提示不清晰 | 顯示下載進度條（若瀏覽器支援），提供友好錯誤訊息，限制重複下載請求以減輕伺服器負擔 |
| 響應式設計兼容問題 | 不同設備與浏览器上的佈局或功能異常 | 採用響應式框架與組件庫，測試多種屏幕尺寸（手機至桌機）與主流瀏覽器（Chrome, Firefox, Edge） |
| 可訪問性不足 | 視障或行動不便使用者無法正常操作介面 | 遵循 WCAG 2.1 AA 標準，測試鍵盤導航與螢幕閱讀器，確保顏色對比度與語義化 HTML |
| LLM 檢查結果反饋差 | 安全檢查拒絕原因不清楚，導致使用者困惑 | 顯示詳細拒絕原因與風險指數（如 "Task rejected due to high risk code. Risk Score: 9"），提供聯繫管理員途徑 |
- 階段 1 - 原型設計 (1-2 週)：設計 UI 原型，包含主要頁面（登入、任務上傳、任務狀態、管理員儀表板），與 UX 團隊合作確認視覺與交互細節。
- 階段 2 - 核心功能開發 (4-6 週)：實現一般使用者功能（登入、上傳、任務追踪、下載），確保 API 集成與實時更新正常運作。
- 階段 3 - 管理員功能開發 (3-4 週)：實現管理員專屬功能（公告管理、佇列控制、資源監控、安全審核），包含圖表與配置介面。
- 階段 4 - 優化與測試 (2-3 週)：進行效能優化（如組件懶加載）、可訪問性測試（鍵盤導航、螢幕閱讀器）、跨瀏覽器兼容性測試。
- 單元測試：使用 Jest 或 Vitest 測試核心組件與服務邏輯，確保 API 調用與狀態管理正確。
- 端到端測試：使用 Cypress 或 Playwright 模擬使用者操作，測試完整流程（上傳、上傳、下載、管理員配置）。
- 效能測試：測試頁面加載與組件響應時間，確保符合非功能需求（首次加載 < 3 秒，響應 < 300 毫秒）。
- 可訪問性測試：使用 axe-core 工具檢查 WCAG 標準合規性，確保鍵盤導航與螢幕閱讀器支援。
- 使用者測試 (Usability Testing)：邀請真實使用者（一般使用者與管理員）進行測試，收集反饋以改進 UI 與 UX。