參考 beui.dev 的動態手法，逐項對照目前 CRM demo 的元件；並以房地產（建設・代銷）從業者的使用習慣，全盤檢視 18 頁與所有彈窗。每一項都有勾選框——勾選＝要導入，勾選狀態會存在這台電腦的瀏覽器裡，關掉再開不會消失。
beui.dev 是一套 React＋Framer Motion 的動態元件庫。它的價值不在單一元件，而在三個一致的動效手法。我們的 CRM 是單檔 vanilla JS，不能直接搬程式碼，但手法全部可以用原生 CSS／Web Animations 重現（第 02 節的示範就是這樣做的）。
| 手法 | beui 的做法 | 用在我們哪裡 |
|---|---|---|
| 彈簧物理 | 所有位移都帶輕微過衝（overshoot）再回彈，不是等速滑到位 | 價格層滑塊、開關、格子按壓、彈窗入場 |
| 形變 morph | 同一個容器連續變形（寬度、高度、內容），不是關掉再打開 | 批次操作列、彈窗依狀態增減欄位、選單展開 |
| 模糊交叉淡化 | 內容切換時舊的模糊淡出、新的由模糊到清晰，取代硬切 | 切換價格層時的格子數字、島內容切換、清單重載 |
| beui 元件 | 狀態 | 原因 |
|---|---|---|
| Tilt Card（3D 傾斜卡） | 不採用 | 妳已明確否決 3D 傾斜（黑名單 🔴） |
| 磁吸按鈕（Magnetic） | 不採用 | 黑名單 🔴 |
| Shader / 粒子背景 | 不採用 | 黑名單 🔴（粒子背景），且 CRM 是工作介面不是形象頁 |
| Theme Toggle（深色切換） | 不採用 | CRM 已定案亮底白鋼藍，不做深色版 |
| 玻璃質感（glass surface） | 要用先問妳 | backdrop-filter 屬黃燈項；本文件僅進度列頂欄用了一次（附不支援時的白底 fallback），CRM 內要用會另外先問 |
另：beui 的按鈕有「金屬質感／漸層」變體——按鈕漸層在黑名單 🔴，一律用我們的實色 pillbtn。
動畫總預算（Codex 二審後補的共同原則）：主要動效 ≤0.45s、彈簧收尾 ≤0.8s、同畫面同時動的元素 ≤30 個、一律尊重減少動態設定——D8 的批次蓋章與 U2 的輕量化共用這條，不再各說各話。左欄「現在」是從工作檔原樣搬過來的樣式與動態（同一份 CSS），右欄「建議」是照 beui 手法重做的版本。兩邊都可以直接操作，妳實際按按看再決定勾不勾。已依「效益 ÷ 工作量」排序。工作量：S 半天內 M 一個工作階段 L 多個階段。
價格表頁首的「底價/表價/成交價/溢價」與「完整/緊湊」、銷控表與業務報表同款 「現在」含今天剛修好的初始定位；滑動仍是等速
銷控表・價格表 → 按「選取」圈選後畫面底部那條深色列 「現在」是今天剛改成「已選 N 個…」的新版
全站右下角的深色膠囊（儲存、批次操作後跳的那個） 工作檔現況
每一頁頂部的大數字（戶數 72、累積來客 1,388…） 工作檔現況
銷控表點任一戶／車位跳出的編輯視窗，切「狀態」下拉時 「現在」是今天剛做好的依狀態顯示版（切換瞬間跳動）
車位視窗的「充電車位」、權限管理整頁、人員卡右下 工作檔現況（已有輕彈簧）
銷控表 KPI 下方那排「待售/保留/下訂/簽約/交屋」 「現在」含今天剛加的「顯示全部（聚焦 N 格）」
價格表切換價格層時的整片翻牌；銷控表改狀態目前「沒有」動畫 工作檔現況
戶別／車位／批次修改等彈窗內所有 select 工作檔現況（原生選單）
來客名單、操作明細、帳單的表格列 工作檔現況
左「現在」右「建議」，都可以操作。E4 更正：我實際打開匯入視窗檢查後，發現拖放上傳其實已經有了（四步驟），所以建議改為補進度與成功動畫。
最左側那條 icon 導覽列 工作檔現況
所有底部彈窗頂端的小橫槓（戶別、車位、批次…全部） 工作檔現況（純裝飾）
試著把上面的把手往下拖……沒反應
抓住把手往下拖超過一半就關閉
頂欄中間的搜尋框 工作檔現況
來客名單 → 右上「匯入 Excel」→ 四步驟視窗的第 1 步 工作檔現況（拖放已有）
來客名單頂部的「來源」「分級」下拉 工作檔現況
戶別／車位視窗的下訂日、簽約日、交屋日欄 工作檔現況
左「現在」照工作檔重現，右「建議」做出來給妳看。可互動的都做成可以按。
建案首頁最上方深色趨勢帶的右上角小字 工作檔現況
建案總覽三張建案卡下緣的藍色細條 工作檔現況
建案首頁下半部的八顆功能磚 工作檔現況
銷控表矩陣的五種狀態底色 狀態色是今天照正式站資料重上的
價格表 KPI 第四格「溢價總額」旁的琥珀小字 工作檔現況
銷控表戶別矩陣（A01–A06 六欄） 工作檔現況
價格表 → 選取幾戶 → 批次列「批次調整底價」跳出的視窗 這個視窗是今天剛做的
來客名單的「電話」欄 工作檔現況
來客名單表格左下角的表尾文字 工作檔現況
現場收客頁的頁首 工作檔現況
業務獎金明細表、帳單表、批次視窗的金額欄 工作檔現況
| 戶別 | 總獎金 |
|---|---|
| A1-10F | 81,000 |
| B6-8F | 7,000 |
| C3-12F | 485,200 |
| 戶別 | 總獎金 |
|---|---|
| A1-10F | 81,000 |
| B6-8F | 7,000 |
| C3-12F | 485,200 |
分析頁每張卡右上的橘紅小標籤（共 57 顆） 工作檔現況
業務報表 → 日報的六格 KPI 工作檔現況
人員管理頁首「成員 9 人」 工作檔現況
帳單與方案頁：上方現有方案卡 vs 下方比較表 工作檔現況
操作明細表最右的「路徑」欄 工作檔現況
權限管理頁的角色卡與底價相關開關 工作檔現況
全部 18 個彈窗 工作檔現況（都不支援）
所有彈窗右下角的深藍實心鈕 工作檔現況（.busy 樣式在檔內但沒接）
戶別視窗（交屋狀態同時有刪除＋退戶時） 這個頁尾是今天剛做的
這輪把兩頁的每個狀態都開過：完整／緊湊、四個價格層、選取中、聚焦中、批次視窗。先報三個當場修好的 bug，再給 8 個建議（U 系列，全部附 demo）。
| 已修 | 本輪深看時抓到、已直接修進工作檔的 bug |
|---|---|
| B1 | 「顯示全部（目前聚焦 0 格）」在沒聚焦時也一直顯示——按鈕樣式的顯示規則蓋過了隱藏屬性 |
| B2 | 車位的緊湊模式從來沒有作用——切了「緊湊」，車位還是大格（程式往容器內找自己，永遠找不到） |
| B3 | 價格表緊湊模式整片格子空白——我昨天加的一條隱藏規則把數字一起藏了（已改寫並複驗） |
價格表 → 切到「成交價」或「溢價」層（72 戶只有 6–8 戶有值） 工作檔現況
價格表 → 點「底價／表價／成交價／溢價」的瞬間 工作檔現況（0.42 秒波浪翻牌）
銷控表 → 點「下訂」「簽約」聚焦後，上方 KPI 仍顯示全部 72 戶 聚焦計數是今天剛加的；KPI 連動還沒有
銷控表選取模式——選取＝底色加深（妳今天定的），但保留格本來就是灰底 今天剛改的選取樣式，發現跟保留撞色
價格表 KPI——那筆負溢價是車位 005（底價 250 萬、成交 160 萬），不是「戶」 工作檔現況
來客名單 → 陳威宇 → 購買紀錄寫「8F・A4 3,350 萬」；但銷控表的 A04/8F 是待售、成交資料裡也沒這筆 工作檔現況（兩邊是不同批示意資料）
價格表 → 車位區 → 緊湊模式（36px 格內擠「編號＋$250萬」） 車位緊湊是今天剛修好才看得到的
銷控表・價格表的欄頭（A01–A06）與樓層（12F–1F）——目前滑過沒有任何反應 工作檔現況
| A01 | A02 | |
|---|---|---|
| 3F | A01 | A02 |
| 2F | A01 | A02 |
| A01 | A02 | |
|---|---|---|
| 3F | A01 | A02 |
| 2F | A01 | A02 |
這輪逐分頁看完後又多抓到三個（W8–W10）。W2、W5、W8 右邊的 ⓘ 可以滑上去看說明浮出。
勾勾表範本頁的頁標與側欄選單 工作檔現況
艾德內部叫得順；賣給別家代銷會卡住。也可並列「勾勾表（來客調查表）」。
業務獎金明細表的表頭「回溯補差」欄 工作檔現況
核心概念零解釋 → 加 ⓘ。滑上去右邊的 ⓘ 看效果。「跳級補差」同款處理。
分析頁的第五個分頁名 工作檔現況
「熟成」是資料術語（cohort 成熟），業務聽不懂。
價格表 KPI 第三格 工作檔現況
括號補語塞在 KPI 標籤裡很拗口，拆成標籤＋小字。
戶別／車位視窗的「成交客戶（歸戶）」欄 工作檔現況
代銷圈通用；建設公司財務不一定熟，首次出現加 ⓘ。
分析 → 作戰台的 A1 卡標題 工作檔現況
有個性，是產品聲音的一部分，建議留。勾＝同意保留。
分析頁右上角的身分切換鈕 工作檔現況
「檢視身分」像在驗證你的身分；其實是模擬視角。
分析 → 熟成訂單的 E1 矩陣（整排「發酵中」） 工作檔現況
熟成矩陣裡整排「發酵中」——業務會以為在做麵包。逐分頁檢查抓到的。
業務獎金 → 方案設定的三張方案卡 工作檔現況
方案設定頁全是圈內話。代銷懂；建設公司財務簽核時會問。
分析 → 對業主的 F1 稽核板 工作檔現況
對業主分頁的稽核指標。「幽靈客」給業主看有點驚悚。
頂欄搜尋框右端的 ⌘K 小徽章 工作檔現況
全站（示意用建案首頁功能磚） 工作檔現況無此設定
全站所有日期（示意用戶別視窗的下訂日） 工作檔現況只有西元
戶別／車位視窗的三個日期欄、來客名單來訪日期 工作檔現況
銷控表緊湊模式的 36px 格、各頁 hover 才出字的圓鈕 緊湊模式今天剛修好（原本車位緊湊完全沒作用）
價格表溢價總額、建案總覽總銷金額 工作檔現況
業務報表右上的「列印 PDF」 工作檔現況（無列印樣式）
妳問「每一個分頁、每一個頁面、每一個視窗都看了嗎」——誠實回答：上一版沒有全看。這輪補齊：18 頁 ＋ 分析 7 分頁 ＋ 報表 3 分頁 ＋ 獎金 3 分頁 ＋ 人員雙視圖 ＋ 名單篩選/抽屜 ＋ 15 個彈窗/選單/導覽，共 44 個畫面狀態逐張截圖看過。清單在本節底部。以下是新抓到的 6 個問題（N 系列），每個都做了對照。
第一次開站的使用導覽 → 第 1 步「左側工具列」 工作檔現況（第 2 步之後正常，只有第 1 步沒底色）
來客名單點任一列跳出的詳情卡（往來紀錄分頁） 工作檔現況
分析 → 名單媒體分頁 → C1 來源品質對帳的表 工作檔現況
| 來源 | 組數 | W日回簽 | W日淨簽 | CPL |
|---|---|---|---|---|
| FB | 64 | 5/64・7.8% | 2/64・3.1% | 待接花費資料 |
建案總覽 → 右上「＋新增建案」 工作檔現況
業務獎金 → 發放列表 → 任一戶「＋加扣款」跳出的視窗 工作檔現況
人員管理刪除成員、批次刪除戶別的確認框 工作檔現況（全站唯二置中的視窗）
確定要移除 林曉青？
確定要移除 林曉青？
| 範圍 | 狀態 |
|---|---|
| 18 個頁面 | 建案總覽・建案首頁・來客名單・銷控表・價格表・分析・業務報表・勾勾表範本・業務獎金・人員・權限・帳單・操作明細・已刪來客・最新消息・現場收客・使用指引・設計規範 |
| 分析 7 分頁 | 作戰台・產品價格・名單媒體・業務・熟成訂單・對業主・資料 |
| 報表／獎金分頁 | 日報・週報・月報｜我的獎金・發放列表・方案設定 |
| 其他視圖 | 人員卡片視圖・人員列表視圖・名單日期篩選展開 |
| 21 個彈窗／選單 | 戶別編輯・車位編輯・批次修改・批次調底價・批次建立・新增單筆・價格歷史・刪除確認・來客詳情・勾勾表編輯・Excel 匯入・新增建案・QR・邀請成員・新增角色・新增方案・加扣款・齒輪選單・通知面板・帳號選單・首次導覽 |
舊版文件的 P1–P20、W1–W7 也全部出自實際截圖；上一版漏看的是分析內頁與部分彈窗，E4 的錯誤（說匯入沒有拖放）就是這樣來的，已更正並在 E4 標明。
CRM 市場飽和是事實，但房地產垂直 CRM 的對手（叡揚、鼎新客製、Excel＋LINE 群組）介面都停在十年前。視覺差異化有效的前提：動效必須指向「這家更懂代銷」，而不是「這家會做動畫」。
| 原則 | 落地做法 |
|---|---|
| 快、輕、可關 | 主要動效 ≤0.45 秒、彈簧收尾含回彈總長 ≤0.8 秒（本文件 demo 的彈簧取樣約 0.9 秒，正式實作要調短——Codex 二審抓的，數字要誠實）；同一動效一個流程看 3 次不膩才過關；「減少動態效果」開關永遠存在。這也是回答「老電腦會不會卡」的標準答案。 |
| 動效帶資訊 | D2 島變長＝選取數在變；D4 滾輪＝哪一位數在變；D8 蓋章＝哪一戶剛成交。每個動效回答一個問題，才不會被說花俏。 |
| 一個記憶點打深 | 展示鉤子是「銷控牆」：別家是表格，我們是有物理感的牆——圈選像圈房子、改狀態像蓋章。三分鐘動線：總覽 → 點進建案 → 銷控牆選 5 戶蓋章 → 島跳出 → 價格表看溢價 → 操作明細收尾（每一筆都有紀錄）。 |
| 賣點排序 | 對建設公司：①底價保密 ②操作稽核 ③業主檢視。對代銷：①銷控牆手感 ②獎金自動算 ③現場收客離線可用。視覺是門面，成交靠這六件事。 |
| 兩種客戶兩條動線Codex 補 | 建商與代銷不是同一種客人：代銷版 demo 主打收客→追客→銷控→獎金；建商版主打契約→收款→客變→貸款→驗屋→業主對帳（即 X 系列）。一條動線打兩種人會兩邊都不痛。 |
| 競品比較講證據Codex 補 | 「別家介面停在十年前」是嘴，不是證據——台灣已有建案系統在賣收款與客變流程。改講可量測的：撞單率、日結工時、逾期追客率、對帳時間。競品表比流程／權限／導入／價格，不比動畫數量。 |
| 層面 | 要想清楚的事 |
|---|---|
| 資料搬家 | 客戶舊資料在 Excel／舊系統／業務私人 LINE。「誰幫他們整理格式」是導入成敗關鍵——要不要提供付費導入服務？ |
| 結案後資料歸屬 | 完銷、代銷約滿後名單歸誰？要能「結案打包匯出＋凍結唯讀」。合約與功能都要有答案。 |
| 跨案的人與客 | 一個業務跑兩案很常見；同一客看兩案時獎金歸屬與重複判定規則要先想，不然上線第一個月就吵。 |
| 斷網現場 | 收客表已有離線暫存——放進賣點；銷控牆也該有「斷線中・顯示 3 分鐘前狀態」的誠實標示。 |
| 教育訓練 | 代銷流動率高＝永遠有新人。導覽已有（N1 修掉底色 bug 後）建議加「可跳過的 5 步新手引導」。 |
| 示範／正式切換 | 賣的時候用漂亮假資料（現在這份），簽約後一鍵清空。架構要先留這個機制。 |
| 吉日文化 | 交屋、簽約挑日子是常態。日期欄旁留「備註吉時」小欄位，成本低、很「懂台灣」。 |
| 問題 | 目前系統的答案 |
|---|---|
| 「業務離職會不會把名單帶走？」 | ✅ 權限＋匯出留紀錄；加 P8 電話遮罩更完整 |
| 「底價會不會被業務看到？」 | ✅ 底價檢視獨立角色；加 P17 總結列更好賣 |
| 「手機／平板能用嗎？」 | ⚠️ RWD 有基礎，A5 觸控細節要補 |
| 「跟我現在的 Excel 怎麼接？」 | ✅ 匯入匯出都有（含四步驟對照） |
| 「LINE 能不能通知我？」 | ⚠️ 權限頁有 LINE 通知（方案未含）——定價要定案 |
| 「一案多少錢？可以只買一案嗎？」 | ✅ 方案表有；P15 價格矛盾先修 |
| 「你們倒了我的資料怎麼辦？」 | ❌ 未回答：要準備匯出承諾／備份 SLA 說法 |
| 「可以客製報表給業主嗎？」 | ⚠️ 業主檢視＋週報有；自訂報表在 Business 方案但功能未做 |
| 「動畫這麼多會不會卡？」 | ✅ 標準答案：全部 ≤0.45 秒＋可關＋單檔離線可跑 |
| 「個資法查核過得了嗎？」 | ⚠️ 操作紀錄是底氣；加 P8 遮罩＋刪除權流程才完整 |
| 批次 | 內容 | 預估 |
|---|---|---|
| P0 正確性 | U6 詳情與銷控資料不一致・P15 價格矛盾・P19 錯誤狀態缺失・N1 導覽底色（B1–B3 已修） | 優先於一切視覺項 |
| S 級一批 | D1 D4 D6 D7 D8 D10・E1 E4・P2 P3 P5 P9 P10 P11 P12 P14 P16 P18 P20・U1 U2 U4 U5 U7 U8・W1–W10・A1 A4 A6・N2 N3 N5 N6 | 4–5 個工作階段 |
| M 級一批 | D2 D3 D5 D9・E2 E3 E5・P6 P7 P8 P13 P17 P19・U3 U6・A2 A3 A5 A7・N4（E6 已撤回） | 每項約 1 個階段 |
| 要先問人 | P1（妳按完選 a/b/c）・P4（艾德業務端）・P15（Enson）・N6（統一或例外） | — |
預估含驗收（無頭渲染＋逐項截圖），不是只寫完 code。要趕請給優先序，我不會自己偷降標。
我把整份文件送給 Codex（另一顆模型）複查。它最重要的提醒：這份文件是「動效與介面提案集」，但房地產 CRM 的成交關鍵在交易流程、資料一致性與法遵——以下 12 項是台灣建設／代銷會當場問「這你們有嗎」的主流程，目前 demo 完全沒有。這些是產品功能層（需要 Enson 的後端），不是改版面就能做的；勾選＝列入產品路線圖討論。每項附介面落點與流程示意。
接在第 09 節「客戶十問」之後；答不出的通常代表產品有缺口，不只是話術問題 Codex 二審新增
| 問題 | 對應 |
|---|---|
| 「兩個案場同時動同一戶會不會重複賣？斷網後誰算數？」 | X1 |
| 「資料放哪個國家？不同建商能不能完全隔離？你們工程師看得到嗎？」 | 要有標準答案 |
| 「多久備份一次？出事多久通知我？」 | 要有 SLA 文件 |
| 「一案幾戶幾客幾人同時用？拿哪台案場電腦測過？」 | 效能報告 |
| 「今天看到的哪些是真的、哪些只是畫面？」 | DT3 證據標籤 |
| 「能不能串 LINE OA、電子發票、會計 ERP？API 另外算錢嗎？」 | 整合定價 |
| 「導入多久？舊資料誰清？新人訓練怎麼算？」 | 導入服務定價 |
| 「合約期、漲價、終止後匯出與刪除證明怎麼規定？」 | 合約模板 |
| 「建商、代銷、地政士、外部會計的權限怎麼隔？」 | 權限頁已有基礎 |
| 「契約版本、實價申報、個資同意的證據，系統給什麼？」 | X2 X3 X12 |