dsh-theme-firefly · 流萤主题

🌌 崩坏：星穹铁道「流萤」主题的 DeepSeek Harness Web UI 皮肤插件。 萤火绿霓虹配色 × 立绘/动态壁纸 × 开屏变身动画 × 萤火氛围粒子 × 背景音乐 × 打字音效。

让流萤的萤火为你点亮DSH。✨

🖼️ 预览与演示

动态 / 静态壁纸

开屏变身动画

萤火氛围粒子

背景音乐播放器

表情包彩蛋

🎬 演示视频（B 站）： https://www.bilibili.com/video/BV1nF8B6QEEj/?spm_id_from=333.1387.homepage.video_card.click&vd_source=573abae8b62b8edf27edc7cb8933e1b6

---

✨ 功能特性

壁纸系统（图片 / 动态视频）

• 全屏 cover 铺底，界面容器半透明让壁纸透出；左暗右亮渐变遮罩保证聊天区可读
• 「景」按钮弹出常驻面板：
  • 类型：动态（mp4）/ 静态（图片），各自独立记忆当前壁纸
  • 选择：弹出缩略图网格（正方形预览、固定三行、可滚动），点卡片直接应用该壁纸
  • 移除：在网格中勾选一张/多张后点「移除」——内置壁纸记为隐藏、运行时导入的壁纸从 IndexedDB 删除
  • 随机：勾选若干张后点「随机」——把它们设为随机轮换池并立即进入随机模式（不勾选则等于全部）
  • 随机间隔：自定义分钟数（默认 5 分钟）
  • ＋ 添加壁纸：从本机一次多选导入图片/视频（Ctrl/框选），同名同大小自动去重，立即生效（IndexedDB 持久化）
  • 默认壁纸：首次安装（无历史记录）时优先展示 assets/Default_wallpaper.png
  • 选择面板点右上角「—」或再点「选择」收起；点「确定」收起设置面板，所有设置实时生效并持久化

流萤配色

• 深空海军蓝黑 × 萤火虫青绿（#00ff87 / #7dff9e）× 莹白文字
• 覆盖 100+ 个 --dsw-* 设计令牌，随主题即时生效

开屏变身动画

• 内嵌 GIF 居中淡入，带绿色辉光边框 + 「流萤 // FIREFLY」标题
• 每次刷新播放，时长跟随 GIF，点击任意处或「点击跳过」可跳过
• 尊重系统 prefers-reduced-motion，自动跳过

萤火氛围粒子

• 「萤」按钮分档：关 / 星点（12）/ 曳光（28）/ 流萤（80）
• 数量切换带 0.9s 淡入淡出过渡，不陡然变化、不刷新页面
• 每只萤火虫有独立尺寸、亮度、漂浮轨迹与呼吸式闪烁

背景音乐

• 「乐」按钮点击开/关，弹出迷你播放卡片
• 支持 上一首 / 播放暂停 / 下一首 / 循环模式（单曲循环 → 列表循环 → 随机播放）
• 当前曲目与循环模式持久化

打字音效

• 聊天输入框打字时播放「咔哒 + 低频咚」的萤火质感按键音
• Web Audio 实时合成，零音频文件；空格/回车音色更低；「声」按钮开关

彩蛋

• 开屏动画：输入框发送 SAM → 重播开屏变身动画（精确匹配，普通消息不误触）
• 表情包（GIF/表情包/ 目录，按对话内容触发，每回合最多一个，右下角弹出）：
  • 你夸赞时 → 「开心」/「得意」（谢谢/太棒/厉害/绝了…）
  • 你确认开干时 → 「变身」（开始/开干/动手/走起/冲…）
  • 我确认时 → 「没错」（没错/正是/确实…）
  • 我需要你提供时 → 「期待」（发我/提供/给我…）
  • 我需要你确认时 → 「疑惑」（确认一下/要我…吗/可以吗…）

---

🎛️ 界面操作

四个按钮（自右向左）收在一个可拖动的毛玻璃长条面板里：

按钮	功能
声	打字音效 开/关
萤	氛围粒子分档（关/星点/曳光/流萤）
景	壁纸设置（类型 + 选择/随机 + 随机间隔 + 添加壁纸 + 确定）
乐	背景音乐 开/关 + 播放卡片

🖱️ 按住面板任意位置拖动即可移动，位置自动记忆（重启 dsh web 后仍生效）。 音乐卡片、壁纸设置、壁纸选择器三个弹层会相对该面板水平居中对齐， 并自动保持在屏幕内。

按 ESC 可一键关闭所有浮层。

---

🎨 灵感来源

• 角色与主题：本主题致敬米哈游《崩坏：星穹铁道》中的角色 流萤（Firefly） 与其机甲 S.A.M. ——「完全燃烧」的变身、萤火虫般的荧光、以及那句「我将点燃大海」。
• 音乐：默认曲目为 HOYO-MiX 出品的《使一颗心免于哀伤》（知更鸟演唱），曲库另含《在银河中孤独摇摆》《希望有羽毛和翅膀》《若我不曾见过太阳》。
• 实现参考：客户端主题的「令牌层 + 身份层」架构与 cordis 插件结构，学习自 dsh-theme-cyberpunk2077（作者 Tommy00748），特此致谢。
• 生态：DSH 插件目录 awesome-dsh-plugin。

---

📁 目录结构

dsh-theme-firefly/
├── package.json            # dsh.client 声明（web 插件，注入 ui-theme 槽位）
├── lib/index.js            # 服务端占位
├── lib/client.template.js  # 浏览器端主题源码（含占位符，随仓库提交）
├── lib/client.js           # 构建产物（build.cjs 生成，含 base64 素材，git 忽略）
├── assets/                 # 壁纸：图片(jpg/png/webp) + mp4 动态壁纸
├── GIF/                    # 开屏动图（取第一个 .gif）
│   └── 表情包/             # 表情包 GIF（文件名即触发情绪：开心/得意/变身/没错/期待/疑惑）
├── music/                  # 背景音乐（mp3/ogg/m4a/wav），默认第一首「使一颗心免于哀伤」
├── build.cjs               # 构建：读取 client.template.js，把素材内嵌成 lib/client.js
├── LICENSE                 # MIT（仅代码）
├── .gitignore              # 忽略构建产物与第三方壁纸
└── README.md

---

🚀 快速开始

方式一：npm 安装（推荐，一条命令开箱即用）

dsh plugin --profile web add dsh-theme-firefly

装完重启 dsh web 即生效。npm 包已内置「干净版」lib/client.js，免 git、免构建。

方式二：GitHub 源码安装（开发者/想改素材时用）

# 1. clone 本仓库（仓库已提交干净版 client.js，clone 后开箱即用）
git clone https://github.com/Liu-ZA-81/dsh-theme-firefly.git

…