本卡為 FR-146 母案。全站清單頁的搜尋框與狀態分段抽成一個共用元件，長相照「待辦任務」；兩棒（元件＋兩支樣板頁 → 其餘頁批次換）。決策者 2026-10-17 裁「開吧，但不會現在做」。子卡清單在末段。

這系列在做什麼（白話）

清單頁上面那條「搜尋框＋狀態按鈕（全部／進行中／已完成…）」每一頁都是自己複製一段程式刻的，結果位置、寬度、選中的顏色各頁不一樣。本案做一個共用元件，所有清單頁都改用它，以後新頁也直接用，就不會再長歪。

為什麼要做

決策者原話：「一堆功能都有用一樣的東西，每一個都長不一樣好煩，先從清單頁的統一開始。」2026-10-17 已先把稽核計畫、稽核作業兩頁手動改成跟待辦任務一樣（FE 9e108e58），其餘頁開本案。

首腦讀完後的重點

• 基準：FE src/views/project/MyTasksView.vue 工具列（約 395～425 行）：搜尋框 IconField 在左（flex:1; min-width:200px; max-width:20rem，InputText 加 surface-card、border-color: var(--surface-border)），狀態分段在右（surface-card 外框 1px、text Button 群）。
• 選中色要換掉：現在全部寫死 rgba(99,102,241,0.2)（紫），違反設計系統「不硬寫色碼」。改用 var(--accent-soft) 底＋var(--primary-color) 字（src/assets/_theme-overrides.scss 深淺兩主題都有 --accent-soft）。換色前後兩主題都要截圖給決策者看，他會並排比。
• 盤點：清單頁分段 12 檔 14 處＋匯入對話框 3 支（全部／有效／錯誤）。ProjectAuditorOverview.vue:1318 同一個顏色但是圖示底色，不動。表單用的 PrimeVue SelectButton 25 檔不是清單篩選，不動。搜尋框寬度寫法 8 種，換頁時統一成元件內建。

怎麼拆

• 第 1 棒 共用元件＋兩支樣板頁：做 ListToolbar.vue，把已對齊的稽核計畫、稽核作業兩頁換成元件。先做樣板是讓決策者看元件版跟手刻版一模一樣、再放手批次換。
• 第 2 棒 其餘頁批次換：待辦任務、專案管理、專案儀表板、問卷管理、流程範本、檢測基準、授權管理，加三支匯入對話框。

建議順序：1 → 2。FR-143「改善計畫」清單頁若先於本案動工，直接照待辦任務那段手刻；本案第 2 棒再一併換。

共同紀律

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