Skip to content

INTERFACE.md

Latest commit

 

History

History
212 lines (155 loc) · 8.76 KB

INTERFACE.md

File metadata and controls

212 lines (155 loc) · 8.76 KB
Raw

大富翁3 Patch 介面規格

這份文件記錄本專案介面的實際數值與行為。改動畫面時先看這裡，改完回頭更新這裡。 撰寫規則見 docs/rules/INTERFACE_RULES.md。

本專案與 RICH2_PATCH 的版面逐項相同，只有文案不同。兩者的這份文件除了標題與 步驟數之外應保持一致。

1. 適用範圍與視窗尺寸

項目 值
畫面型態 單一視窗的桌面小工具，只有一個畫面
預設尺寸 520 × 480（邏輯像素）
最小尺寸 460 × 420
可否縮放 可

設定在 src-tauri/tauri.conf.json 的 app.windows[0]。

⚠ 尺寸一律以邏輯像素為準。在高 DPI（例如 150%）下量測時，量測工具本身必須是 DPI 感知的，否則會拿到實體像素而誤判成版面溢出——實際踩過這個坑。

2. 色票

全部沿用 docs/rules/tokens.css 的共用 token（必須共用，不得自訂）。src/style.css 的 @theme 只做引用，不複製色值。

Token 色值 用在哪
--color-background #131313 視窗底色
--color-surface-container-lowest #0e0e0e 日誌區底色
--color-surface-container-low #1b1b1c 輸入框底色
--color-surface-container-high #2a2a2a 次要按鈕底色、進度條軌道
--color-surface-container-highest #353535 次要按鈕 hover
--color-on-background #e5e2e1 主要文字
--color-on-surface-variant #c0c7d3 次要文字、日誌 INFO
--color-outline-variant #404751 邊框、分隔線
--color-primary #9fcaff 進度條、焦點框
--color-primary-container #007acc 主要按鈕底色
--color-on-primary-container #ffffff 主要按鈕文字
--color-tertiary #66dd8b 日誌 SUCCESS / DONE
--color-error #ffb4ab 日誌 ERROR / FATAL
--color-level-warn #fcd34d 日誌 WARN

本專案額外定義的色：無。

3. 字體與字級

字體堆疊沿用共用 token（必須共用）。字級表屬建議共用，本專案未偏離。

用途 字級 字重 行距 字體
應用程式標題 16px bold 1.2 sans
內文 / 按鈕 14px normal 1.5 sans
欄位標籤 12px normal 1.4 sans
次要說明 11px normal 1.5 sans
路徑 / 日誌 11px normal 1.6 mono
  • 同一列的控制項字級必須相同（「瀏覽…」與「開始」都是 14px）。
  • 等寬字體只用於遊戲目錄路徑與日誌內容。
  • 「區塊標題」本專案未使用——畫面只有一層，不需要。

4. 間距

名稱 值 用於
視窗外緣 20px 內容距視窗四邊（上下左右一律相同）
區塊間 12px 目錄列 / 進度條 / 日誌區之間
控制項間 8px 輸入框與兩顆按鈕之間
標籤與欄位 6px 「遊戲目錄」與輸入框之間
區塊內邊距 10px 日誌區內容距邊框
  • 四邊外緣必須相等。標題列與主區域各自出 16px，加上中間的框線構成分隔。
  • 不得使用表外的值。

這張表就是為了防止曾經發生過的問題：上緣 24px、下緣 16px、左右 20px，因為當初只調了上緣沒回頭。

5. 控制項

尺寸

項目 值
標準高度 36px（輸入框、兩顆按鈕一律）
圓角 6px
水平內邊距 次要按鈕 12px、主要按鈕 28px

「緊湊高度」本專案未使用。

同一列的控制項等高、字級相同，寬度各自不同——這是刻意的：主要動作的按鈕要比次要的寬。

按鈕角色

角色 外觀 用於
主要 實心，--color-primary-container 底，無框 「開始」（本畫面唯一）
次要 透明底，--color-outline-variant 40% 描邊 「瀏覽…」

按鈕狀態

狀態 表現
hover 主要提亮 10%；次要底色改用 surface-container-highest
active 不做位移
disabled 不透明度 40% + 禁止游標（來自共用 token）
進行中 「開始」文字改為「執行中…」並停用，同時停用「瀏覽…」

6. 視覺效果

不透明度

只使用共用 token 的五檔（必須共用）：

檔位 值 用於
主要 100% 主要文字、按鈕
次要 70% 次要文字
提示 50% 日誌區的初始提示、日誌等級欄
停用 40% 停用中的按鈕、邊框
分隔 25% 日誌區邊框

光暈 / 模糊 / 漸層

效果 是否使用 用途與強度
光暈（box-shadow 發光） 未使用 —
高斯模糊（backdrop-filter） 未使用 —
漸層 未使用 —

層次一律靠 surface 色階表現（已有 6 階）。這是工具程式而非視覺作品，且 WebView 上的模糊在舊機器上會掉幀。

7. 狀態與回饋

狀態 表現
焦點 2px --color-primary 外框、偏移 2px，走 :focus-visible（來自共用 token）
hover 見 §5 按鈕狀態；輸入框為唯讀，無 hover 變化
停用 不透明度 40% + 禁止游標（來自共用 token）
進行中 按鈕改文字並停用；進度條依步驟推進
錯誤 以 ERROR / FATAL 等級寫進日誌區，不跳對話框

⚠ 禁止在任何元件上寫 outline: none 而不補替代樣式。曾經因為輸入框帶著 focus:outline-none，鍵盤操作完全看不出焦點在哪——共用規則是零特異度的 :where()，任何 class 都蓋得掉它，所以不能只靠它。

日誌等級

名稱與配色屬必須共用，Rich Patch Series 兩支程式與 Python 版共用同一套：

等級 顏色
INFO --color-on-surface-variant
WARN --color-level-warn
ERROR / FATAL --color-error（FATAL 另加粗）
SUCCESS / DONE --color-tertiary（DONE 另加粗）

日誌的呈現規則：

  • 等級欄固定寬度 56px，訊息才會對齊。
  • 長內容換行時掛在訊息欄底下，不頂到最左邊。
  • 自動捲到底必須等版面算完再執行（requestAnimationFrame）——換行後的高度還沒進 scrollHeight，直接捲會捲不到底。
  • 日誌區可選取複製（其他區域不可），使用者要能貼出來回報問題。

8. 畫面結構

版型屬各自決定，不套用 RICH2_EDITOR 的三欄工作站版型——那是 1500×950 的編輯器，這是按一下就跑完的小工具。共用色票已足以看出是同一系列。

┌─ 大富翁3 Patch ─────────────────────────┐
│                                          │  ← 外緣 20px
│  大富翁3 Patch  Rich Patch Series        │  標題列
│ ──────────────────────────────────────── │  框線
│  遊戲目錄                                │  標籤
│  ┌──────────────┐ ┌────┐ ┌──────┐        │
│  │ D:\\Games\\three │ │瀏覽…│ │ 開始 │        │  三者等高 36px
│  └──────────────┘ └────┘ └──────┘        │
│  選到有 RICH3.EXE 的那一層。               │  次要說明
│  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬       │  進度條
│  ┌────────────────────────────────────┐  │
│  │ INFO   找到主程式：RICH3.EXE          │  │  日誌區
│  │ WARN   [成功] 光碟版 1/2            │  │  （撐滿剩餘空間）
│  └────────────────────────────────────┘  │
│                                          │  ← 外緣 20px
└──────────────────────────────────────────┘
區塊 職責
標題列 程式名稱與系列名，不放任何控制項
目錄列 選擇遊戲資料夾並觸發執行，一列到底
進度條 顯示步驟進度，本專案有 6 步
日誌區 逐項結果與最終摘要，撐滿剩餘空間，可捲動可複製

相關文件