深色模式
篩選列 Filter Bar
列表頁上方的查詢區:搜尋 + 常用篩選 + 次要操作,配合下方的表格與分頁使用。這是列表頁三件套(篩選列 / 表格 / 分頁)的第一件。
loading
使用情境
- 資料量會成長到需要查詢的列表頁(活動、名單、報表、成員)
- 資料筆數固定且很少(< 20 筆)時不要放篩選列,直接給表格就好
設計準則
- 左篩選、右操作:左側放查詢條件,右側放次要操作(匯出、欄位設定)。主要操作(建立)不在這裡,在頁首,避免和查詢混在一起
- 主列最多 3 個常用篩選:搜尋框固定第一個,後面接最常用的 1–3 個條件;第 4 個之後收進「進階篩選」
- 兩種節奏,分得很清楚:
- 主列的條件改了就查(單一、便宜,使用者期待立刻看到結果)
- 進階面板是一張表單:改的是草稿,按「套用」才提交。多選標籤每點一下就打一次 API 是白做工,批次送出才對
- 已套用的條件要看得見、可個別移除:用 Tag 列在下方,兩個以上才給「清除全部」。只靠下拉框自己顯示,使用者會忘記自己篩了什麼
- 進階篩選的按鈕要顯示已套用幾項(Badge),面板收起來也知道自己還篩著東西
- 寬度固定、不要撐滿:搜尋 240、單選下拉 140、日期區間 260。等寬撐滿會讓每個條件看起來一樣重要
- 條件的預設值一律是「全部」,不要預設替使用者選一個 —— 那會讓人以為資料只有這些
進階篩選為什麼用 Popover
| 做法 | 判斷 |
|---|---|
| Popover(採用) | 錨在按鈕上、不會把下面的表格往下推,一邊調條件一邊看列表最順;放得下 2–5 個欄位 |
| 行內展開 | 會把表格推下去,使用者的視線要一直重新定位 |
| Dialog | ❌ 會遮住你正在篩選的那張表,而且模態本來就該留給「需要專注的決策」,篩選不是 |
| Drawer | 條件多到 6 個以上再換 Drawer:側邊補充、不遮列表、頁尾天然放得下套用/重置 |
面板內就是標準的表單語意:重置清空面板、套用送出後關閉。
點面板外面不會關掉 —— 多選標籤點到一半誤觸旁邊就前功盡棄太傷。出口有兩個:按「套用」提交後關閉,或再按一次「進階篩選」關掉(草稿丟掉,已套用的條件不動)。
把 Popover 當表單面板,有兩個一定會踩的坑
trigger="click"會在點擊外部時自動關閉 —— 要改用trigger="manual"搭配v-model:visible,開關全部自己控制。- 面板裡的
el-select要加:teleported="false"—— 下拉選單預設會 teleport 到<body>,點選項那一下在 DOM 上算「點在浮層外面」,面板會直接消失。同理適用於面板內的 DatePicker、Cascader 等所有帶浮層的元件。
可調整 / 不可更動
| 可依產品調整 | 不可更動 |
|---|---|
| 篩選條件的種類與數量 | 左篩選右操作的分工 |
| 各欄位寬度(維持不等寬) | 主要操作不放在篩選列 |
| 進階篩選裡的排版 | 已套用條件要可個別移除 |
| 是否需要匯出 / 欄位設定 | 主列最多 3 個常用篩選 |
Do / Don't
| ✅ Do | ❌ Don't |
|---|---|
| 搜尋框放第一個 | 搜尋框藏在下拉之後 |
| 第 4 個條件起收進進階篩選 | 主列塞滿七八個下拉 |
| 已套用條件用 Tag 列出來 | 讓使用者自己回想篩了什麼 |
| 改條件即時套用 | 一定要按「查詢」才動作 |
| 預設「全部狀態」 | 預設替使用者選好某個狀態 |
| 「建立」放頁首 | 「建立」擠在匯出旁邊 |
用到哪些元件
| 區塊 | 元件 |
|---|---|
| 搜尋 | Input 輸入框(clearable + prefix 放放大鏡) |
| 單選篩選 | Select 選擇器(clearable,placeholder 寫「全部 ⋯」) |
| 期間 | DatePicker 日期選擇器(type="daterange") |
| 進階篩選 | Layout 柵格分欄 + el-collapse-transition |
| 已套用條件 | Tag 標籤(closable)+ Link 連結 |
| 次要操作 | Button 按鈕(非 primary) |
給工程師
- 進階篩選用
el-collapse-transition包一層v-show,不要用v-if,否則收合沒有高度動畫 - 「已套用條件」建議由一個
computed從各個ref推導,移除時只改對應的ref—— 不要另外維護一份陣列,兩份狀態一定會不同步 - 本專案 Tailwind preflight 已關閉,撐開左右兩組請用一個
flex: 1的空 div 或justify-between,不要靠margin-left: auto疊在有 gap 的 flex 上