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 —— 倉庫和圖釘本來就不一樣寬。

This is the beginning of the README. Read the rest at the original. Read the full README ↗