Glassic Mist 霧藍主題：極淺霧藍蒙版 + 雲霧動效 + 毛玻璃質感

前言¶

DeepSeek Harness（DSH）採用「一切皆插件」的架構。在 Web Profile 環境下，開發者可以通過瀏覽器端插件擴展界面。vlantech/dsh-glassic-mist-theme 是一個純客戶端的主題插件，旨在爲默認皮膚疊加一層霧藍蒙版與動態雲霧，並賦予彈窗毛玻璃質感。

核心功能¶

插件以默認日間皮膚爲基底，註冊爲 mist-blue 主題，通過 CSS 層疊實現以下特性：

霧藍蒙版與雲霧：在頁面底層疊加近白霧藍底色與白色柔光斑，並生成多層 radial-gradient 白色雲霧，以 translate3d 和 scale 進行緩慢漂移（74s 週期）。當系統開啓 prefers-reduced-motion 時，動畫自動停用。
全彈窗毛玻璃：爲輸入框、上下文面板、Modal、HoverCard、Toast、Tooltip 等組件應用 backdrop-filter 模糊效果，分檔強度爲輸入框 20px / 上下文面板 24px / Modal 28px。
設置持久化：在設置 → 通用 → 「霧藍主題」中開關，狀態寫入 localStorage（鍵 dsh-mistblue.enabled），刷新後自動恢復。
濃度調節：設置行內提供 10%~100% 的滑塊，實時調節蒙版與雲霧濃度，默認 50%，100% 時飽和度翻倍。狀態鍵爲 dsh-mistblue.intensity.v2。
快捷命令：輸入 /misttheme 即可快速切換主題。
零侵入：所有自定義 CSS 限定在 body[style*='--dsh-mistblue'] 選擇器下，關閉後無殘留。

安裝與啓用¶

安裝¶

插件需掛載到 Web Profile 的 node_modules 下。

    mkdir -p ~/.dsh/profiles/web/node_modules/dsh-mistblue
    cp -R <本倉庫目錄>/. ~/.dsh/profiles/web/node_modules/dsh-mistblue/

在 Profile 的 package.json 中註冊 bundle 與依賴：

    {
      "dsh": {
        "profile": {
          "bundles": ["...", "dsh-mistblue"]
        }
      },
      "dependencies": {
        "dsh-mistblue": "file:./node_modules/dsh-mistblue"
      }
    }

執行構建：

    npm run build

重啓 Harness。

啓用¶

設置面板：設置 → 通用 → 「霧藍主題」→ 「啓用霧藍」。
快捷命令：在輸入框輸入 /misttheme，選擇「開啓霧藍主題 / 關閉霧藍主題」。
調節濃度：在設置行內拖動「霧藍濃度」滑塊（10%~100%）。

設計與實現¶

插件通過作用域隔離和令牌覆蓋實現靈活控制。

作用域隔離：所有自定義 CSS 以 body[style*='--dsh-mistblue'] 爲前綴。主題激活時，框架在 body 上寫入該 style 標記，CSS 才生效；關閉後選擇器失配，不影響默認主題。
性能優化：雲霧動效使用 will-change: transform, opacity 和合成器層，避免重排。動畫週期剋制（74s），漂移幅度小。
毛玻璃分檔：不同層級應用不同的模糊強度與飽和度（如 Modal 使用 blur(28px) saturate(1.3)）。
Safari 兼容性：Safari 的審批卡/問題卡使用近不透明底（rgba(248, 251, 254, 0.97)），這是有意爲之，防止內容異常裁切。

典型用法¶

設置 → 通用 → 「霧藍主題」→ 「啓用霧藍」。
輸入框輸入 /misttheme → 選擇「開啓霧藍主題 / 關閉霧藍主題」。
拖動「霧藍濃度」滑塊（10%~100%）。

適用場景與注意¶

目標平臺：DeepSeek Harness Web 界面（瀏覽器端插件）。
主題適配：主題註冊爲淺色系 mist-blue。深色系統用戶建議在淺色主題下使用。
依賴機制：依賴 Harness 的 dsh.client 客戶端清單機制。
Safari 限制：Safari 的審批卡/問題卡使用近不透明底，非全透明。

結尾¶

該插件通過疊加蒙版、雲霧動效與毛玻璃質感，在不替換默認皮膚的前提下，爲 DSH Web 界面提供了一套輕量級的視覺增強方案。源碼與配置位於 GitHub。