Skip to content

v0.9.0 — GUI redesign: sidebar, Settings page, refreshed style

Choose a tag to compare

@SpaceSquare640 SpaceSquare640 released this 03 Aug 09:11
· 8 commits to main since this release

What's new — GUI redesign: sidebar navigation, Settings page, refreshed style

The main window used to be one long scrolling column with everything crammed onto it — engine controls, rule list, and activity log all stacked together. It's now organized into a sidebar with three focused pages:

  • Rules — engine start/stop and the rule list (unchanged content, just its own page now).
  • Activity — the live event log, full-page instead of squeezed at the bottom.
  • Settings (new) — language switcher, the app's own version number, and the Help panel trigger, all pulled out of the cramped status bar into one dedicated place.

Other changes:

  • Icon-based language switcher: the "中文"/"EN" text buttons are now icon buttons (using the language icon from the project's design resources), rendered via a CSS mask so the icon always matches the current text colour exactly instead of an approximate filter-based tint.
  • App version display: Settings now shows the running app's actual version, via a new app:get-version bridge — this is also the plumbing a future in-app update checker will reuse.
  • Refreshed toggle switches: every on/off setting in the app (dry-run, whole-screen scanning, once-per-appearance, rule enabled) is now a pill-style toggle switch instead of a bare browser checkbox — loosely inspired by community reference designs in the project's resources (not copied verbatim; one consistent visual style applied throughout).

No behavior changes to rules, triggers, or actions — this release is purely about how the app is organized and looks.


新功能 — GUI 重新設計:側邊欄導覽、設定頁、視覺風格更新

主視窗原本是一個很長的捲動頁面,把引擎控制、規則清單、活動紀錄全部疊在一起。現在改成側邊欄 + 三個各自獨立的頁面:

  • 規則 —— 引擎啟動/停止跟規則清單(內容不變,只是變成獨立頁面)。
  • 活動紀錄 —— 即時事件紀錄,改成整頁顯示,不再擠在畫面最下面。
  • 設定(新增)—— 語言切換、App 自己的版本號,以及說明面板的入口,全部從原本擁擠的狀態列搬到這個獨立的地方。

其他變動:

  • 語言切換改成圖示:原本「中文」/「EN」的純文字按鈕,換成用語言圖示(取自專案的設計素材)做的圖示按鈕,用 CSS mask 渲染,讓圖示顏色永遠精確跟隨目前的文字顏色,而不是用大概湊色的濾鏡效果。
  • App 版本顯示:設定頁現在會顯示目前執行中 App 的實際版本號,透過新增的 app:get-version 橋接取得——這也是之後App 內建更新檢查功能會直接複用的管線。
  • 切換開關視覺更新:App 裡所有開關型設定(dry-run、全螢幕掃描、每次出現觸發一次、規則啟用)都從瀏覽器原生的核取方塊,換成藥丸形切換開關 —— 靈感來自專案設計素材裡的社群參考範例(不是照抄,而是挑出一套一致的視覺語言套用到全App)。

規則、觸發條件、動作的行為完全沒有變動 —— 這次發佈純粹是介面組織方式與外觀的更新。