生產力
table-filters
為資料表格設計並實作專業、互動式的篩選使用者介面,並能根據欄位資料類型自動調整。
簡介
table-filters 技能旨在協助軟體代理程式為數據密集型應用程式創建直觀且功能強大的篩選系統。當任務涉及建立資料表格時,此技能會分析各個資料欄位,以確定最有效的篩選機制,無論是自由文字搜尋、基於勾選框的分類篩選、數值範圍滑桿,還是日期範圍選擇器。透過實作一個位於表格上方的統一篩選列,它確保使用者可以在不干擾使用者介面或標題列的情況下執行複雜查詢。輸出內容包含結構化的語意化 HTML,並具有與 html-style 技能完全相容的特定類別,使開發流程能從功能佈局無縫過渡到精緻的 UI 設計。
-
自動將欄位資料模式(文字、布林值、數字、日期)對應到最佳化的篩選組件。
-
實作統一的篩選佈局,包含基於標籤 (Chip) 的狀態管理、清除全部功能以及排序控制項。
-
支援複雜的使用者互動,如多選勾選框篩選、日期範圍輸入以及數值範圍滑桿。
-
輸出遵循既定組件模式的乾淨、語意化 HTML,隨時可進行樣式設計或直接整合到 Web 代理程式中。
-
提供回應式的無結果狀態 UI,透過明確的重置動作來妥善處理資料為空的場景。
-
在進行前端生成時,請先識別表格結構,以便此技能準確對應各個欄位。
-
使用提供的類別名稱(如 .filter-bar、.filter-chips 和 .filter-menu),以保持跨應用程式的樣式一致性。
-
將此技能與 html-style 技能結合使用作為最後步驟,以確保生成的組件符合專案的設計系統。
-
此技能將篩選選單視為浮動組件,顯示在表格上方以確保最佳的可視性和佈局完整性。
-
適用於使用者需要在基於瀏覽器的代理介面內操作大型資料集的場景,進而提升整體資料存取能力與開發效率。
倉庫統計
- Star 數
- 20
- Fork 數
- 1
- Open Issue 數
- 0
- 主要語言
- TypeScript
- 預設分支
- main
- 同步狀態
- 閒置
- 最近同步時間
- 2026年5月3日 下午03:10