UPS Reconciliation — UI 補強包
給 sandyliu3056/UPS-reconciliation 的介面補強。兩部分:一是操作上確實少掉的
東西,二是手寫字與繪畫感的外觀。全部後掛,既有的繫結一行都不改,拆得掉。
以 GitHub main 上的 index.html(904,229 字元)為基準。
一分鐘部署
把 deploy/ 裡的三個檔複製到 repo 根目錄,覆蓋原本的 index.html:
cp deploy/index.html deploy/caveat.woff2 deploy/patrick-hand.woff2 /path/to/UPS-reconciliation/
cd /path/to/UPS-reconciliation
git add -A && git commit -m "UI: ESC/搜尋/排序/凍結首欄 + 手寫字與繪畫感" && git push
deploy/index.html 已經套好,是從 GitHub main 建的。
本機版本比 GitHub 新就不要用這個檔 —— 改走下面的套用腳本,它動的是你手上
那一份。
套用到你自己的 index.html
cd /path/to/UPS-reconciliation
python3 /path/to/pack/apply.py # 套用
python3 /path/to/pack/apply.py --check # 只看狀態
python3 /path/to/pack/apply.py --remove # 拆掉,回到原樣
python3 /path/to/pack/apply.py --embed-fonts # 字型內嵌成單檔
腳本的規矩:
- 動任何一個字之前先備份成
index.html.bak-YYYYmmdd-HHMMSS
- 不做整份字串取代。只在第一個
</style> 前、最後一個 </script> 前插入,
每一段用 /*!ui-pack:名稱:start*/ 與 :end 夾住
- 重複執行不會疊第二份,已套過的會先移掉再套
--remove 之後與原檔逐位元組相同（已驗證）- 插入前檢查來源裡沒有
</script 或 </style 的字面標籤 —— 這一項是踩過坑
才加的:註解裡寫到那個標籤會把區塊提早關掉,後面幾千字全被當成 markup 解析,
靜態檢查看不出來
驗
npm install # jsdom
npm test # 九套一起跑,213 項
也可以指定要驗哪一份:
node test/test-patch.js /path/to/UPS-reconciliation/index.html
node test/test-ink.js /path/to/UPS-reconciliation/index.html
用 jsdom 載入真的頁面,不是假的 DOM 物件。除了功能,也會比對元素清單有沒有被改壞
（表格 28、視窗 25、.sketch 57、i18n 標記 547)。
test-vars.js 與 test-boot.js 是踩過坑才加的。一個 var(--x) 只要沒有人定義
--x,那一整條宣告在計算時就是無效的 —— 瀏覽器不會報錯,也不會用 var() 的
備援值,它直接把那個屬性丟掉。--bodyfam 的值裡含了一個沒定義的 var(),
整個手寫體就這樣安靜地消失,而當時前面五支測試全過:它們測的是「函式回傳什麼」,
沒有人把整份檔案真的跑起來看。
test-vars.js 掃全檔,列出所有引用了卻沒人定義、也沒寫備援的 var(--x)test-boot.js 用 runScripts:'dangerously' 把整份 index.html 開起來,
讀 --titlefam / --bodyfam 的實際值,只要裡面還殘留 var(-- 就算失敗
內容
功能
| 項目 | 原本 | 之後 |
|---|
| ESC 關窗 | 25 個視窗只有 2 個吃 ESC | 全部;疊窗時只關最上層 |
| 搜尋 | 10 個搜尋框每敲一字整張表重畫 | 停手 180ms 才畫,Enter 不等 |
| 表頭排序 | 沒有 | 4 張看數字的表可排,第三下回原順序 |
| 首欄凍結 | 沒有 | 6 張寬表往右捲時第一欄釘住 |
| 斑馬紋 | 規則存在但兩色相同,等於沒畫 | 修好（可刪的獨立區塊) |
| 側欄／表頭對比 | 六組配色只有兩組過 AA | 六組全過 |
| 流程圖線寬 | 十個站用九種線寬 | 收成三階 |
| 04 費率頁 | 七張面板疊成一條長捲軸 | 拆成四個子頁 |
| 01 › 3. System | 「Enable / Disable」兩張表 | 收掉;設定檔有殘留停用項目時只提示,不自動清 |
| 左欄與子頁的名字 | General Setting、Client Setup… | 全部改成名詞片語,03 目錄／04 費率分開 |
| 每一頁 | 沒有 | 一隻布偶貓或柯基從標題底線探出頭,拿著這一頁的東西 |
ESC 按下去是去按該視窗自己的 .mx,所以原本的收尾照跑,不是把它藏起來。
搜尋延後走事件捕捉階段,不碰任何一行既有的 oninput —— #sysSearch 這種在
render 裡每次重綁的也蓋不掉。排序只動畫面上的列,不碰金額,重畫後還原。
外觀
一個外觀,沒有開關。掛上 html.ink 就全部生效,拆掉整包就回到原樣。
字 — 英數內嵌 webfont(標題 Caveat、內文與側欄 Patrick Hand,皆 SIL OFL),
中文靠系統本來就有的手札體／手寫體／標楷體,兩邊都沒有就落回黑體,只有英數是
手寫,版面不會壞。表格的 .num / .mono 與儀表板的大數字維持等寬 —— 手寫體的
數字對不齊,帳就看不出來。
筆觸 — 抖線塗層本來就寫在 .sketch 裡,是 applyBrand 把 --wob 設成
none 關掉的。這裡把它打開,57 個面板、16 條細框一次全回來,markup 一行不改,
用的是沾了水的筆(位移 1.4→3.2 再加 0.4px 模糊)。另有有纖維方向的紙、整面罩
一層 multiply 的紙(所以文字也在紙上,不是紙在底下)、顏料溢出邊線的兩塊平色、
筆刷底線、手繪方框。材質全是灰階,顏色一律走 color-mix(var(--...))。
04 渠道與附加費費率分層
這一頁本來是七張面板疊成一條長捲軸:運費表、燃油、附加費、DIM 除數、尺寸門檻、
Demand 費率。要改燃油得先捲過運費表,要看門檻得捲到最底。拆成四個子頁:
| 涵蓋 |
|---|
| 1. Base Rates | 運費表 + 燃油 |
| 2. Surcharges | 附加費費率 |
| 3. Size Rules | DIM 除數 + 尺寸門檻 |
| 4. Demand | Demand 費率 |
頁首那張(說明這一頁屬於右上角選的層級,帶預覽鈕)四個子頁都看得到。
用的是頁面本來就有的那條編號列 —— 01 有三個子頁、03 有三個,04 之前只有一個。
SET_GROUPS / RATE_PAGE / RATE_TABS / RATE_PER_LEVEL 都是同一個 script
最外層的變數,直接補進去;showSetTab 和那條列的點擊處理本來就是通用的,一個字
都沒改。面板不搬家,只是把該露的露出來,認面板靠 h3 底下的 data-i18n key,
不是靠第幾個 —— 之後在中間插一張卡也不會錯位。
順帶修一件事:「Demand 費率」和「尺寸門檻」原本是包在「DIM 除數」那張卡裡面
的(markup 少了一個結束標籤)。Demand 跟 DIM 除數沒有關係,搬出來成為
p-ratefill 的直接子層 —— 不搬的話,藏 DIM 除數會連著把它們一起藏掉。
改名
原則:名詞片語、講清楚裝的是什麼、03 是「有哪些」(目錄)、04 是「收多少」(費率),
兩者用字分開。
| 原本 | 現在 |
|---|
| 01 | General Setting | Pricing Configuration |
| | 1. Level Setup / 2. Charge Codes / 3. System | 1. Rate Levels / 2. Charge Code Mapping / 3. System Settings |
| 02 | Account & Client Setup | Customer Management |
| | 1. Client Setup | 1. Customer Directory |
| 03 | Channels & Surcharges | Channel & Surcharge Catalog |
| | 1. Channels / 2. Surcharges / 3. Demand Surcharge | 1. Channels / 2. Surcharge Catalog / 3. Demand Periods |
| 04 | Channel & Surcharge Rates | (不變) |
| | 1. Rate Entry | 1. Base Rates / 2. Surcharge Rates / 3. Dimensional Rules / 4. Demand Rates |
| 05 | WMS / TMS Data | WMS / TMS Import |
| 06 | Batch Invoice Import | UPS Invoice Import |
改字典不改 markup —— 按鈕靠 data-i18n 取字,字典改了、applyLang 跑一次,
每一處都跟著換。names.js 就一張表,之後要再改名,改那裡。
每一頁那一隻
十三個位置各一隻:布偶貓或柯基,從那一段第一張卡的標題底線後面探出頭,爪子搭在
線上,手上拿著這一頁的東西。畫法跟首頁流程圖那兩隻一樣:2px 墨線、同一組毛色;
布偶貓有海豹色的耳朵與面罩、面罩中間留一個倒 V、藍眼睛;柯基一耳立一耳垂、
白口鼻、紅項圈。
| 頁 | 誰 | 拿什麼 |
|---|
| Pricing Configuration | 貓 | 兩本費率簿 |
| Charge Code Mapping | 貓 | 吊牌 |
| Customer Directory | 狗 | 名牌 |
| Channels | 貓 | 包裹 |
| Surcharge Catalog | 狗 | ＋ |
| Demand Periods | 貓 | 閃電 |
| Channel & Surcharge Rates | 狗 | 價格標 |
| UPS Invoice Import | 貓 | 帳單 |
| Reconciliation | 狗 | 放大鏡 |
| Analytics Dashboard | 貓 | 長條圖 |
| Invoice History | 狗 | 月曆 |
| User Administration | 貓 | 鑰匙 |
| Home | 狗 | 表格 |
動的只有:眨眼、頭輕輕晃、柯基的垂耳擺、道具浮一下,滑鼠移到那張卡上頭會抬一下。
全部走 transform,不重排。prefers-reduced-motion 全關。絕對定位在標題右端,
pointer-events:none,不擋任何東西。
收掉「Enable / Disable」
01 › 3. System 那張卡兩張表。看了程式,兩張表行為不一樣:
- 渠道停用只影響畫面。
builtin_service_disabled 被讀的地方是 03 渠道表、04 費率頁、
這張卡、預覽 —— priceShipment / lookupBaseRate / readConfig 一次都沒讀它。
停用一條渠道,帳單上那條渠道的貨照樣查表、照樣算。卡上那句「A disabled item is
not priced」對渠道不成立。
- 附加費停用會真的收 0。
accLookup() 第一行:在 accessorial_disabled 裡就回 0,
而且不列進「缺費率」。
兩個都收掉。連帶把 03 新增渠道表單上那顆「Enable this channel」也收了 —— 它勾掉時
會把新渠道寫進一個再也看不到的停用清單。
資料不動。 設定檔裡已經有的停用項目照舊生效 —— 那是碰到金額的東西,不能因為
收了一張卡就自己清掉。但也不能讓它躲起來:設定檔裡若還有停用中的項目,3. System
那一頁會出現一行提示(哪幾類、各幾個、名字)與一顆「全部恢復」,按了才清,
清了才重算,順序照原本 bindOnOff 那一串(同步共用區 → 重讀設定 → 標髒 → 存檔 →
重畫 → 重算)。設定檔乾淨的話那一行根本不會出現。
首頁流程圖
十個站的插畫重畫。原本每個站各用各的線寬 —— 1.1 / 1.2 / 1.3 / 1.4 / 1.5 / 1.6 /
1.8 / 2 / 2.2 / 2.4,十個圖擺在一起像十套圖示。收成三階:外輪廓 2.2、內部結構
1.5、細節 1.05,另加綠勾與虛線路線的 2.1、膠帶色帶的 3.4。全部給同一個光源,
右下一律同濃度的陰影面。地上的影子寬度跟著圖示走,不再是每站都 rx=24 ——
倉庫和圖釘本來就不一樣寬。
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
