本卡屬 FR-146（母卡見下方連結），第 1 棒：做共用元件，換兩支樣板頁。會改碼。

問題是什麼（白話）

清單頁的搜尋框和狀態按鈕每頁各刻一份。這棒做一個共用元件，先把已經手動對齊的兩頁（稽核計畫、稽核作業）換成用元件，畫面要跟換之前一模一樣；同時把寫死的紫色換成設計系統的顏色變數。

在哪裡

repo：~/Projects/Billows/Audit-Manager/compliance-manager-fe/（先讀它的 CLAUDE.md）
新檔
  src/components/common/ListToolbar.vue
改檔
  src/views/project/AuditPlanListView.vue   工具列約 157～172 行
  src/views/project/MyAuditsView.vue        工具列約 158～172 行
基準（照它的長相，本棒不改它）
  src/views/project/MyTasksView.vue         約 395～425 行
顏色變數
  src/assets/_theme-overrides.scss          --accent-soft（深淺兩主題都有）

怎麼修

• 元件介面：v-model:keyword（字串）、v-model:status（目前選中值）、:options（[{value, label, count?}]）、:placeholder、具名 slot #extra 放頁面自己的下拉（例如待辦任務的專案、輪次、重置按鈕）。搜尋框改值時 emit，頁面自己決定要不要 debounce（稽核計畫有 300ms，保持）。
• 長相照 MyTasksView：搜尋框在左、分段在右；count 有給才顯示（ml-2 text-xs、text-color-secondary）。選中改 { background: 'var(--accent-soft)', color: 'var(--primary-color)' }，未選 { color: 'var(--text-color-secondary)' }。
• 先查再寫：src/components/common/ 先 grep 有沒有類似元件，有就 extend。
• 兩頁換完，各自的工具列 template 只剩一行元件；搜尋、分段、筆數、預設狀態行為不變。

手測

• FE npm run dev、BE python main.py，blsadmin 登入。
• 稽核計畫、稽核作業兩頁：分段切換、筆數、搜尋、清空，行為與換之前一樣。
• 換色前後截圖對照（深色、淺色各一張），貼進卡尾給決策者看。
• grep -rn "rgba(99,102,241" src/views/project/AuditPlanListView.vue src/views/project/MyAuditsView.vue 零命中。

紀律

• branch：FE 開工時 git branch --show-current 重新查，不切 branch；不對就停下問。
• 做完立刻：顯式 git add <檔名>（禁 -am）→ commit（做了什麼／為什麼／驗了什麼／踩了什麼坑）→ 本卡 append 白話補充（commit hash、手測清單、截圖前後對照）→ 狀態改「修正待驗證」。不等令。push 等令。
• 檔案內註解只寫「為什麼」與「陷阱」（一到兩行），施工紀錄進 commit message。
• 動到超過 800 行的檔（ProjectListView、SurveyManage、DetectionProfileManageView 等）只准替換工具列那段，不准往裡加邏輯（CLAUDE.md 體積鐵則）。