跳轉到

歷史記錄 · 2026-07-23

月份索引歷史記錄

重大重構里程碑

2026-07-23 ─ 全路由共用主題模糊背景

首頁與設定頁各自載入同一 landing-hero,造成導覽列上方未延伸、跨頁縮放不一致與重複背景責任。改由 App Shell 永久提供唯一 app-backdrop,適用 public/workshop/settings/immersive;頁面專用 DOM 背景、Canvas、Three.js 場景可直接覆蓋。首頁另增 landing-info-surface,只控制 Hero 下方滿寬底色,不替核心循環與公告增加第三層卡片。月兔「進入工坊」外部 SVG 改作 mask,以 currentColor 跟隨按鈕金色。Style API v1 新增上述兩個 stable part,首頁與設定頁移除重複模糊圖片。其後 RWD 驗收發現月兔首頁與全部設定分類在部分高直式尺寸底部露出共用背景,改由 public main 統一持有 flex 高度、landing/settings routed host 填滿剩餘空間,不再各自以 100dvh 猜導覽高度。設定頁透明度改為主題契約:Default/月兔外層 tint = 0%、shell = 76–82%、局部控制表面 = 88–96%;navigation/panel 只保留低透明裝飾,並移除設定 section 的不透明 .o4-pit-board,讓模糊背景可辨識但不犧牲表單對比。補上兩主題、五種 viewport、五個瀏覽器專案的頁尾幾何與計算透明度回歸驗證。

月兔資訊標籤另改為依在地化內容擴張、保留最小寬度且受面板寬度限制,修正 390px/1024px 英文標籤換行裁切;RWD 矩陣同步增加標籤單行與不裁切斷言。

月兔首頁 landing-info-surface 頂端再改為完全透明,於 6rem 內漸入原有深靛藍,透明區直接顯示共用 app-backdrop;核心循環與公告卡片保留完整背景,不跟著表面淡化。以 computed style 鎖定透明靛藍停駐點、6rem 深度與兩張卡片背景,並完成五個瀏覽器專案 25/25 相關回歸及 32 張兩主題 RWD 截圖驗收。

2026-07-23 ─ 主題架構由共享 skin profile 重構為受控 CSS Style API v1

決策檔:D-20260723-01

首頁與公開設定移植暴露舊 LandingPresentationProfilechromeSkinfestival 命名會讓每新增一個強風格主題就擴張共用 TypeScript、Angular 屬性與 SCSS 分支,且四角、背景延伸、資訊框等實際構圖需求無法合理全部 token 化。本輪依核准設計改為:Angular/UI Kit 只公開版本化 [data-theme-part];每主題可在自己的 theme.css 以受控 selector 完成外觀;manifest 新增必填 styleApiVersion: 1 與可選 stylesheet(Default 必填,非 default 可為只換色票的輕量主題);cascade 固定 reset → base → components → theme-default → theme → safety,runtime 以 @scope 隔離 Default 與 active overlay。

安全與一致性守門同步落地:PostCSS validator 禁內部 class/[class]、外部或跨主題 URL、@import@font-face/未知 at-rule、!importantposition: fixed,只允許註冊 stable part 與主題內 manifest 已登記資產;:scope 只准宣告 --theme-* 私有變數。stylesheet 先在 candidate 準備,只有最新 request generation 能在 persist 成功後原子提交 CSS、token 與 active snapshot;離線缺 overlay 維持 session Default 且不覆寫 persisted id。舊 landing presentation 型別、manifest landing 欄、Festival 共用樣式與主題 ID 投影已移除;Default/月兔完整視覺各自收回自己的 theme.css,共用 SCSS 只保留結構與 safety。

規範同步:主題系統.md程式架構/themes.md前端技術策略.md主題外觀與 RWD.md 補齊 Style API、責任邊界、原子切換、離線 fallback 與正式主題 PR 門檻;兩份 07-22 實作文件標記舊 profile/skin 架構已被部分取代。正式主題必須經 Git PR、validator、五個代表頁多比例截圖、a11y、授權與大小審查;未送 PR 的個人 fork 不在官方 runtime 信任範圍。README 依既定決策保留至本機測試與公開前最後補。

同輪把圖片與圖示引用收斂成外部資產契約:共用操作圖示使用外部 SVG sprite, 主題視覺 SVG 留在各自主題目錄,單色圖優先 CSS mask、多色圖使用 <img>/背景圖; HTML、SCSS、CSS 與 TypeScript 禁止 inline SVG 幾何、base64/data URI 圖片及以文字字元 冒充圖示,重置頁的自包含 inline style 是唯一明列例外。早期 Scale Rail 曾用來強化 迷你四驅車工坊識別,但後續確認數字刻度與單位容易被誤解為真實尺寸或場地量測,正式 方向改為移除車庫、Race Bench、編輯器、賽道、房間、結果與 UGC detail 的尺標;需要 視覺節奏時只用不含數字、單位與刻線的主題裝飾或語意 footer。