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。