咖啡角 · 整理態素材庫互動原型

原型修訂號 proto-r1 設計提案,待確認上面那一整格就是可以真的動手的原型 —— 滑素材庫、按住把一件拿上牆、換位、收回、按「完成整理」。它吃的是你這支手機當次的實際可用視窗,不是固定的 393×793 手機框。

這不是 CM。本頁沒有載入正式 app、沒有讀寫你的任何資料(不碰 localStorage / cm_data / 備份 / 照片;本頁自己也不註冊 service worker)。放進 LAB 測試站後由測試站自己的 cm-lab-* 快取管理,那是另一個網址,和正式 CM 的快取與資料互不相通。裡面 31 件東西全部是假的。重整頁面就回到最初的測資,怎麼弄都不會弄壞真的咖啡角。底下那排導覽列與「＋」只是示意,按了不會去任何地方。

原型修訂號本頁用自己的修訂號(proto-r1),不借用、也不遞增正式 app 的快取號。

先試這三件就好其他的可以之後再說

① 滑素材庫找一袋,拿上牆。 在格子上上下滑 → 應該是捲動;按住不放約 0.3 秒 → 那一格會亮起邊框,這時再拖到牆上放開。
② 把愛樂壓在牆與檯面之間搬來搬去。 切到「器具」分類,愛樂壓在牆上、檯面都放得下;豆袋與裝飾則只能上牆。
③ 切到別的分類,再把牆上的東西收回,然後按「完成整理」。 拖回素材庫時整塊格網會亮起 —— 不用對準原本那一格,也不用先切回它的分類。

覺得哪一步「怪」「不順」「按不到」就是這一輪要的答案。順不順比對不對重要。

手勢提案試作,不是既有行為,也不是你已經同意的事

設計提案,待確認素材庫是「按住拿起」,牆與檯面是「直接拖」。 兩邊不一樣是刻意的:庫要能上下滑,所以在庫裡一碰就拖會把捲動吃掉; 牆與檯面本來就不捲,直接拖比較快。這個代價要你摸過才算數。

起手／狀態	這個原型的行為
非整理態	只有牆面右上那顆 ⇅ 有作用;不能搬東西。其餘都是無作用示意,不會跳去任何地方
庫內單點後放手	什麼都不做 —— 不擺出、不收回、不開詳情
庫內上下滑(從圖形上或名稱上起手都算)	捲格網。一旦判成捲動,這根手指到放開為止都不會變成拿取
庫內按住約 0.32 秒且沒滑動	那一格亮起紅框 = 已拿起,同時停掉庫的捲動,接著拖去牆／檯面
庫還在慣性滑動時按住	不成立 —— 要等格網靜止滿 0.26 秒才允許起拖
場景物件上起手	移動超過 9px 才起拖;沒超過就放手,不做任何收放
拖曳中	只有一個拿起物、一個有效落點;分類不切、庫不捲、完成整理按不到

實測後採用的參數與理由

參數	採用值	為什麼是這個值
長按時間	320 ms	iOS 系統自己的長按(選字放大鏡／分享選單)約 500ms,超過就會跟系統手勢撞;250ms 以下實測太容易在「想捲一下」時誤觸發。320 落在兩者中間。這是本原型量出來的取捨,不是任何既有驗收數字。
長按取消位移	8 px	手指放著本來就會漂。8px 是 repo 既有的長按取消容忍(工程書_028),拿來當本原型的候選起點,不是它已被驗收成庫內長按的數字。
靜止判斷	格網 260 ms 沒有捲動事件	取自 `DRAG_STILL_MS=260` 本尊(index.html 3329 行)。它原本是「頁面連續靜止」的門檻,不是長按時間 —— 這裡只借它的「靜止多久算停下來」這一件事。
場景移動容忍	9 px	照 `DRAG_MOVE_TOL` 現值(index.html 3329 行)。本原型只是抄同一個初值,沒有改正式常數。
拖曳中場景自動捲動	邊緣 48 px 觸發,速度 2→14 px/幀	只在「降級可捲」時才會發生,而且只捲場景、不捲格網、不切分類。48px 約等於一根手指的寬度,再窄會很難停在觸發帶裡。捲完會重新量一次落點幾何再判命中。

技術上真正要驗的是這一件:同一片格網,在格子上起手要能上下滑,而同一個位置按住要能把東西拿走。做法是格網常駐 touch-action:pan-y(手指落下前就成立,不是長按後才掛),長按成立才改成 none 並由開機就註冊好的 touchmove 攔截器接手。 這個原型不用「把整片庫鎖成不能滑」去換拖曳成功,也沒有用桌機的 HTML5 拖放。 攔截器每次拿到的 cancelable 實際值印在下面的診斷區 —— 如果 iOS 沒讓我們攔下來,那裡會直接顯示出來。

放在哪裡、放手後發生什麼本輪假資料試作規則

物件	牆上 S1／S2	檯面	素材庫格網
豆袋	可擺、可換位	無效落點	從場景拖回可收
三樣裝飾(🪴／相框／🌿)	可擺、可換位	無效落點	從場景拖回可收
本輪可操作器具(濾杯 5＋愛樂壓 1)	可擺、可換位	可擺、可換位	從場景拖回可收
Menu 小黑板、豆倉克數、磨豆機／手沖壺	不可拿取、不可收,占著原位置(前兩者是功能不是擺飾;後兩者本輪標「未確認支援」)

場景 → 場景:落在另一件可動物件上是交換;落在該層空白是移到那一層的尾端。
庫 → 場景:落在可動物件上是插在它前面(那一件留在場景,不會被擠掉);落在空白是排尾端。 ⚠️ 這跟現在 app 裡「拖到豆袋上 = 交換」不一樣 —— 是本原型刻意提出的差異,不是既有行為。
放不下就整次不成交。用當時的實際圖形寬度真的排一次、量一次;來源層與目標層任一放不下,兩邊都不動,落點會變成紅色斜線。 不會先顯示成功再讓東西消失,也不會為了塞一件而偷偷收掉另一件。
固定功能件本體不是落點 —— 拖到 Menu 小黑板或豆倉克數上放手是取消,不會穿透過去當成空白。

這個「放不下就拒收」是原型暫用策略。它沒有重做正式 app 的 cornerWallSplit() 跨層溢出演算法, 不會自動把別的東西收回或重排。所以不能拿本頁的結果宣告正式溢出問題已經解決。

收回與跨分類

從場景拖進目前看得到的整塊格網就算收回 —— 空白處、別人的格子都算,不是交換、不用對準原格。分類列、完成整理列、格網以外的地方不算。
拖著豆袋時,就算庫現在顯示的是裝飾也收得回去。整塊格網會亮起,放手才從場景消失。不自動切分類、不跳捲動位置;成功後對應的分類鈕會短暫亮一下。
收回後回到它本來的目錄位置,不新增格、不排到最後。如果它不在目前分類、或原格捲出了畫面,不會硬把畫面捲去找它 —— 你切回去、滑回去,那一格的「已擺出」就已經取消了。
三個分類各自記住自己的捲動位置。
從庫拿起又放回庫、或從場景放回自己身上,視為沒有變動 —— 不改順序、不會多出第二件。

取消、結束與重進

拖到無效區放手、瀏覽器取消手勢、第二根手指加進來、切到背景、旋轉手機或可用視窗改變 —— 都取消當次搬動,回到起拖前的擺法,殘影與高亮清乾淨。
放手那一下不會又觸發點擊,更不會順便按到「完成整理」。滑動放手也不會收放任何東西。
本輪取消了「單點裝飾立刻收放」 —— 這是為了不讓「試拖失敗」反而把東西收掉。這是明示的原型差異,正式 app 今天仍然是點一下就收。
按庫底「完成整理」回到平常構圖,本頁已完成的假擺法保留;再進整理態時東西一致,分類與各自的捲動位置也保留。
重整頁面、或按下面的「重置試用」才會回到最初測資。本頁沒有存任何東西,也不會假裝存成功。

手機高度與捲動

操作台用的是當次實際可用視窗(100dvh)並處理 safe-area 與底部導覽占位。793 不是手機高度,本頁沒有把任何內容整體縮小去塞滿。
分類列與「完成整理」固定在庫的上下兩端,中間格網拿剩下的空間。高度不夠時先縮格網可視區,保留一整列看得清、拿得起的物件,不壓扁牆／檯面、不縮命中區。
再不夠就進降級可捲:場景本身變成可上下捲,庫固定在下緣(分類列與完成列仍在庫的上下邊)。非拖曳時,在格網裡滑只捲庫;格網到頂／到底不會把同一根手指交給場景。
降級時如果一趟拖不到目標,拖曳中會有場景邊緣自動捲動(只捲場景,不捲格網、不切分類),捲完重新量落點再判命中。
視窗變窄不會自動改寫或收回你已經擺好的東西。放不下就讓它可以捲到,並在診斷區記下限制 —— 不藏東西。

設計提案,待確認比較基準沿用前一段靜態稿:4 欄、格高 100、庫高 395。這三個都是前一段的模擬提案,不是手機必須符合的常數。本次在你手機上的實量印在診斷區。

三個分類的起始測資靜態,不需要 JavaScript

靜態示意下面三塊是三個分類一開始的內容,直接展開排好,不是切換出來的——這樣 JS 被擋掉時你照樣看得完。上面操作台裡的東西就是這 31 件。

豆袋 · 20 支

刻意挑會把格子擠壞的那幾種:最短名(「秘魯」)、最長名(「巴西喜拉朵黃波旁半日曬微批次」)、貼標籤影像的袋、立袋／平袋／半透明袋都在裡面。

豆袋20裝飾3器具8

耶加耶加雪菲孔加水洗 G1 哥倫比亞薇拉粉紅波旁曼特曼特寧肯亞肯亞 AA 藝伎巴拿馬翡翠莊園藝伎紅標宏都宏都拉斯雪莉桶瓜地馬拉安提瓜薩爾薩爾瓦多帕卡瑪拉耶加半透明袋 · 耶加日曬盧安盧安達蒲隆蒲隆地卡揚扎水洗巴西巴西喜拉朵黃波旁半日曬微批次秘魯秘魯哥斯大黎加蜜處理衣索衣索比亞古吉罕貝拉厭氧日曬綜合深焙綜合玻利玻利維亞墨西墨西哥恰帕斯印度印度季風馬拉巴葉門摩卡瑪塔莉

裝飾 · 3 樣

現況可收的擺飾今天只有三樣(🪴／相框／🌿)—— 書背與綠罐已於 2026-09-06 刪除。本頁沒有憑空生出裝飾目錄。

🪴盆栽 🪴 相框 🌿乾燥花 🌿

器具 · 8 件(其中 6 件本輪可拿取)

現況今天檯面上的器具取自 brewGear(),而它只收濾杯與愛樂壓,最多顯示 3 個。

未確認支援磨豆機與手沖壺今天沒有專屬 SVG、也沒有場景外觀(index.html 全檔只有 dripperIconSVG 與 aeropressIconSVG)。格子裡畫的是檯面既有的擺飾形狀,本輪不可拿取,並且明標。這是原型的測試範圍,不是「正式只支援兩種」的裁決,也不承諾磨豆機／壺已經有正式外觀。

分類鈕上的數字是該分類的總件數(20／3／8),不會因為擺出或收回而改變,也不是「庫裡還剩幾件」。

V60 錐形紅 02 愛樂壓透明平底濾杯白 Kalita 梯形藍純錐濾杯墨黑錐形濾杯銅未確認支援磨豆機未確認支援手沖壺

高矮差最大的兩個都在庫裡:愛樂壓(又高又窄)與平底濾杯(又扁又寬)——格高固定 100,兩者都沒有被切,格子也沒有被撐開。

本輪沒有做、也沒有裁決的事

素材庫能不能伸縮、格子密度能不能調、搜尋、庫內排序、複製物件、分類補資料、Apple 那種即時擠開的動畫 —— 本輪都沒有做。正式的器具支援範圍、容量政策、溢出規則與「要不要寫進資料」留給正式功能工程書; 手勢、捲動、拿取與收回由這一份可操作原型先驗證,確認之後才進正式工程書。 本頁的任何行為都還不是使用者已定案的規格。

測試情境與重置不用自己造資料

固定假資料情境這幾個是為了讓「不好重現」的狀況一按就到位。按下去只換上面操作台裡的假擺法,不會存任何東西,也會先取消還沒完成的手勢。

「重置試用」與重整頁面等價 —— 只重置本頁的假狀態,沒有碰到任何真實資料。

診斷區讀數,不是產品畫面

下面的數字是你這支手機、這一次開啟量出來的。回報時把整塊複製給指揮部就好。

互動未啟用 —— 沒有 JavaScript 就沒有讀數。這一塊在 JS 執行時才會有內容。

施工回報 2026-09-09,施工端(Claude Code / Opus 5 / 高)

模型紀錄:本段實際由 Claude Code / Opus 5 / 高 施工。簡報「Claude 建議」欄與此一致, 但這一行是實際,不是照抄建議。

實測環境

桌機 Chrome 148(Claude Code 內建瀏覽器窗格,macOS 15.5),以 http://127.0.0.1 本機伺服器開啟; 模擬視窗 393×793 / 375×667 / 393×500,另有非模擬桌機視窗 653×715。回報圖以 headless Chrome 出圖(本機 Chrome 最小視窗寬 500px,因此改用 393px iframe 框架出圖再裁切)。 沒有 iOS Safari、沒有真機、沒有 safe-area、沒有網址列收合。

逐列結果(依施工簡報 §六)

標記說明:桌機實作驗證=非模擬的真實滑鼠事件;合成事件=程式派送 PointerEvent(不算真觸控); 真機=手機;未測=沒跑。

#	試用動作	方式	結果
1	進整理、三分類切一遍、完成後再進	合成事件	通過。四項定案一致(地圖收起／櫃體換成素材庫／牆面 ✓ 隱藏／完成入口 1 顆);往返後擺法一致、三分類捲動位置各自保留、沒有跳導航
2	庫格圖與字上快滑慢滑、滑到頂底、滑後馬上按住	合成事件(部分)／真機未測	已驗:單點放手不動作;位移超過 8px 判為捲動後,這根手指到放開都不再變成拿取;分類列與完成列不隨格網跑。未驗:真慣性滑動、快滑手感、到頂／到底的捲動穿透 —— 這幾項只有真觸控算數
3	滑到屏外的豆袋按住拖上 S1;愛樂壓上 S2／檯面	合成事件	通過。長按 320ms 成立 → ghost 出現、庫格亮紅框、拖到 S1 成交;愛樂壓在牆與檯面都放得下;庫原格標「已擺出」且不複製;圖形沒有被裁切(見回報圖 ③)。「目標會不會被手指或庫遮住」真機未測
4	三類場景物件換位;庫中新物件放到已占位置	合成事件	通過。場景→場景落在別件上=交換(兩件位置對調);庫→場景落在物件上=插在它前面且該件仍在;落空白=排尾端;庫格目錄順序不變
5	場景物件拖入庫空白／其他格;切到別分類後再收回	合成事件	通過。整塊格網亮起並收回;庫顯示「裝飾」時照樣收得回豆袋,不自動切分類、不跳捲動位置;回自己分類後仍在原格、沒有多一件
6	點一下擺飾／庫格;拿起放回自己、分類列、完成列、固定功能件	合成事件	通過。點一下不收放;放回自身判為無變動;分類列、完成整理列、Menu 小黑板都是無效落點(小黑板沒有被穿透成空白);放手那一下的 click 被吞掉,沒有順便按到「完成整理」
7	滿層、跨層交換後放不下、器具移往已滿檯面	合成事件	通過。S1 滿層(餘裕 1px)再放一件 → 落點紅斜線、整次退回(需 364px／只有 345px);跨層交換 60px 立袋換 44px 平袋 → 來源層放不下也整次拒收(需 343／只有 341);檯面 4 件已滿再插一支 → 拒收(需 413／只有 365)。三次都沒有偷偷收走、改小或重排其他件
8	拖曳中離開頁面／第二指／旋轉;放手後立即再滑庫	合成事件	通過。第二根手指、離開頁面、視窗改變都取消當次,ghost 清乾淨、保留起拖前擺法;下一次仍正常。真正的背景切換與旋轉真機未測
9	393／375 模擬與實際手機;Safari 網址列;短視窗	模擬	模擬通過:393 → 庫高 394、4 欄、格 86×100、可見 2.80 列;375 → 格 82×100;393×500 → 降級可捲(庫固定 270,場景可捲 169px),拖到場景上緣自動捲動並在捲後重新命中成交,格網沒有被自動捲、分類沒有被自動切。iOS Safari 與網址列收合完全未測
10	44px 命中檢查(含捲出畫面的格子)	合成事件	通過。三個分類各跑一次 `elementFromPoint` + 事件派送:庫格最小 86.3×100、分類鈕 120.3×44、完成整理 369×48、場景成員最小 44×44,全部兩軸 ≥44 且中心點沒有被遮擋。⚠️ 合成派送不算真觸控
11	連續切分類、拿出收回、重置／重整;停用 JS	合成事件＋靜態	通過。一件永遠只有一份;重置只動假資料;重整回初始測資。JS 完全不執行時:紅色「互動未啟用」條出現,場景、素材庫、三分類 31 件起始測資與全部提案、限制都看得到(見回報圖 ⑧)

⚠️ 沒有測到的(不要當成通過)

真機、iOS Safari、真觸控,一項都沒有。本輪最重要的那件事 —— 「格子上起手能上下滑」與「同一位置按住能拿走」在 iOS 上能不能同時成立」 —— 只有手機上摸過才算數。診斷區的「touchmove 攔不到(cancelable=false)」計數就是為了這件事準備的:那個數字在手機上不是 0,主試作就是失效了。
真實慣性滑動與慣性中按住的擋下(靜止 260ms)只驗到程式路徑,沒有真的甩過一次。
真滑鼠／真觸控的長按拖曳:自動化工具在觸控模擬下每次都逾時,只成功跑過一次非模擬的滑鼠拖曳(場景交換,通過)。其餘邏輯全部是合成事件。
safe-area、Safari 網址列展開／收合、旋轉:程式有接、也會取消當次搬動,但沒有在真的會變高的視窗上跑過。
效能:原型只用簡化圖示,不能拿它的順暢當正式 app 的效能(暫緩 78 的三條門檻本輪不適用、也沒有複查)。

需要指揮部處理的差異

本輪取消「單點裝飾立刻收放」(簡報 §二第 6 列授權的原型差異)。正式 app 今天仍是點一下就收,048 as-built 未改。
庫 → 場景落在物件上是「插在它前面」,與現有抽屜豆袋的「交換」不同。已在上方提案說明寫明。
分類數字改成總件數(器具 8),與前一段靜態稿的「6 可擺」不同 —— 依簡報 §4.1「採該分類總件數」。可拿取的 6 件在器具那一節文字裡說明。

使用者在聊天裡拍板的事(原話與定案)

本段目前沒有。若試用中對位置／間距／顏色／文案有純視覺的決定,施工端會把原話與定案補寫在這裡 —— 在聊天裡拍板而沒有人寫下來的決定,等於沒有發生過。

咖啡角 · 整理態素材庫 互動原型

先試這三件就好 其他的可以之後再說

手勢提案 試作,不是既有行為,也不是你已經同意的事