Day  11：【高階商務計算機】雙向稅率核心與長按 Casio SET 模式

18th鐵人賽

shaoan_1211

2026-09-14 22:22:15

35 瀏覽

分享至

在 Day 10 完成了自訂鍵盤的安全回溯與快照系統後，使用者開始關注實務計算中最常見的稅率處理——含稅與未稅的即時切換，以及針對不同幣別的稅率記憶。現有的單向稅率按鍵已無法滿足跨國電商與多幣別帳務的需求。

今日聚焦於「TAX+ / TAX‑」雙向稅率核心實作，並加入長按 TAX 鍵呼叫快速設定 Modal（Casio SET 模式），讓使用者可在鍵盤上即時切換稅率、保存各國稅率配置，並透過持久化機制在重新啟動後自動載入。

專案正式上線體驗與開源倉庫

線上體驗 Live Demo：https://410355-collab.github.io/Premium-Business-Calculator/
(強烈建議使用 iPhone Safari 或 Android 手機開啟體驗！)
GitHub 開源倉庫：https://github.com/410355-collab/Premium-Business-Calculator
歡迎提出建議與指導
(開發環境：Google Antgravity IDE + Google Gemini 協同開發)

一、技術痛點

多幣別稅率切換

使用者在同一筆計算中可能同時需要含稅與未稅結果，且不同國家稅率各不相同，若僅透過手動輸入會造成效率低下與錯誤。

長按觸發設定

傳統鍵盤缺少快速設定入口，使用者必須跳至設定頁面手動調整稅率，流程斷裂。

稅率持久化

瀏覽器關閉或切換裝置後，先前設定的稅率會遺失，造成重複操作。

二、解決方案

雙向稅率按鍵 (`tax_plus` / `tax_minus`)

在 script.js 中為 +TAX 與 ‑TAX 定義了專屬的 UI 與行為：

// script.js – 税率按鍵 UI 與行為
'tax_plus': {
  customHTML:
    '<span class="key-text" style="font-size:30cqmin;display:flex;flex-direction:column;line-height:0.95;">' +
      '<span>+TAX</span>' +
      '<span style="font-size:16cqmin;opacity:0.8;">▲</span>' +
    '</span>',
  action: 'applyTaxAdd',
  type: 'cyan',
  category: 'biz',
  name: '+TAX'
},
'tax_minus': {
  customHTML:
    '<span class="key-text" style="font-size:30cqmin;display:flex;flex-direction:column;line-height:0.95;">' +
      '<span>‑TAX</span>' +
      '<span style="font-size:16cqmin;opacity:0.8;">▼</span>' +
    '</span>',
  action: 'applyTaxSubtract',
  type: 'cyan',
  category: 'biz',
  name: '‑TAX'
},

長按觸發 SET 模式

在 script.js 為 tax_plus、tax_minus 之 action 內部加入長按偵測，呼叫 showTaxModal()：

function applyTaxAdd() {
  if (isLongPress()) {
    showTaxModal('add');
    return;
  }
  // 含稅 (+TAX) 正常計算路徑
  updateTaxState('include');
}
function applyTaxSubtract() {
  if (isLongPress()) {
    showTaxModal('subtract');
    return;
  }
  // 未稅 (‑TAX) 正常計算路徑
  updateTaxState('exclude');
}

稅率持久化與多國幣別支援

使用 localStorage 以 {currency}-{rate} 的鍵值格式存儲，每次開啟應用時自動載入：

function saveTaxRate(currency, rate) {
  localStorage.setItem(`taxRate-${currency}`, rate);
}
function loadTaxRate(currency) {
  return parseFloat(localStorage.getItem(`taxRate-${currency}`)) || defaultRate;
}

三、核心代碼精華：`script.js`

tax_plus、tax_minus 按鍵 UI 與 applyTaxAdd/applyTaxSubtract 行為
isLongPress() 判斷長按時長（≥ 600 ms）並呼叫 showTaxModal
saveTaxRate / loadTaxRate 實作稅率持久化
quickCandidates 陣列中加入 tax_plus、tax_minus 以支援快速鍵盤候選

四、深度調校剖析

長按偵測的時間門檻

經過多次手機實測，600 ms 的長按門檻在 iOS Safari 與 Android Chrome 上均能穩定觸發，且不會與普通點擊混淆。使用 touchstart 與 touchend 事件配合 setTimeout 實作。

UI 兼容性

customHTML 內使用 cqmin 單位確保在不同裝置 DPI 下文字大小保持一致；font-size:30cqmin 與 font-size:16cqmin 分別呈現主標題與小圖示，配合 display:flex;flex-direction:column 形成上下結構。