🦉 Angelina Web Decor

明日方舟·安洁莉娜主题的 DeepSeek Harness (DSH) Web UI 装饰插件

把本地素材文件夹里的安洁莉娜主题图片（透明 PNG 角色贴纸 + GIF 动画 + UI 元素）铺满 DSH Web UI 的页面留白——绝不挡字、小屏自适应、可一键开关、随 DSH 重启永久生效。

关于安洁莉娜

安洁莉娜（Angelina） 是游戏《明日方舟》（Arknights）中的六星辅助干员，罗德岛的信使。她性格开朗活泼、乐于助人，使用反重力源石技艺（能操控物体的重力），平时带着一把小伞四处送信。本主题的素材即取自她"坐坐、看书、骑行、纸飞机、海边"等日常动作的形象。

📸 截图预览

截图由 headless Chrome 对本地 DSH 实例自动拍摄。

✨ 功能

功能	说明
🖼️ 页面装饰	10 组角色贴纸（PNG 静态 / GIF 动画）+ UI 素材散布在对话区、空状态页、侧栏留白处
🛡️ 绝不挡字	所有装饰贴在背景层（background-image），内容永远在装饰之上
📱 响应式	尺寸用 min(px, vw)，小屏自动缩放 + 隐藏次要层，绝不堆叠
🧊 毛玻璃质感	消息气泡局部 backdrop-filter: blur + 文字高对比色（不留白朦胧）
🔘 一键开关	settings.yaml 的 deco.enabled，热加载生效
♾️ 永久生效	挂载为 host 插件（cordis.patch.yml），DSH 重启自动加载

📦 安装

1. 放置文件

把本仓库的 plugin/ 下两个文件放进工作区与 DSH 配置目录：

<工作区>/                      ← 你的 DSH 工作区（session 工作目录）
├── dsh-web-deco.css           ← plugin/dsh-web-deco.css
└── 网页素材/                   ← 你的安洁莉娜素材文件夹（自备，见"素材说明"）
    ├── PNG/  GIF/  UI素材/

$DSH_HOME/profiles/<profile>/plugins/
└── deco.js                    ← plugin/deco.js

2. 挂载插件

在 $DSH_HOME/profiles/<profile>/cordis.patch.yml 添加：

- insert:
    - id: deco
      name: './plugins/deco.js'

3. 启用开关

在 $DSH_HOME/settings.yaml 添加（默认开启）：

deco:
  enabled: true

4. 重启 DSH

重启后装饰自动生效（无需批准）。素材目录名、样式文件名、URL 前缀均可通过修改 deco.js 顶部常量调整：

const MATERIAL_DIR = '网页素材'     // 素材目录名（相对工作区根）
const STYLE_FILE   = 'dsh-web-deco.css'
const ASSET_PREFIX = '/web-assets'  // 素材 URL 前缀（webServer 路由）
const STYLE_PATH   = '/assets/skin/deco.css'

🔘 开关

# settings.yaml（热加载，刷新页面即生效）
deco:
  enabled: false    # false = 完全还原官方 UI

🎨 自定义装饰

所有装饰规则集中在 dsh-web-deco.css：

• 素材引用：url('/web-assets/PNG/坐坐.png') 等——素材文件名需与 CSS 引用一致（或改 CSS）
• 布局：background-position 百分比错落排布；顶部区域（y<20%）避免压会话头部
• 响应式：min(固定px, vw) + max-width: 1000px / 700px 断点（小屏隐藏次要层：background-size: 0 0）
• 毛玻璃：.bubble 规则（局部 blur + 文字对比色，亮/暗主题双份）

🧠 技术要点（为什么这样做）

• 背景层不挡字：装饰全部用 background-image；::after 伪元素会盖到内容上，勿用
• 贴到真正的不透明层：布局中"会话根容器"渲染不透明背景，会盖住其下所有装饰——用 getComputedStyle 探测 bg=/img=，把规则选择器贴到实际渲染层
• !important 压内联：产品运行时注入内联背景样式，装饰规则必须 !important
• 禁用 background-attachment: fixed：多层背景 + overflow 容器下 Chrome 不渲染
• 缓存绕行：样式 <link> 加时间戳 query（?t=Date.now()），Service Worker 也拦不住
• 生命周期：路由/tap 的 disposer 用 ctx.effect(...) 绑定 fiber，卸载自动清理

开发方法详见 skill/。

📜 素材与版权说明

• 素材来源：本主题使用的安洁莉娜素材由鹰角网络官方发布（官方在 B 站评论区提供的玩家素材包），官方下载链接：https://link.hypergryph.com/c/20UR6mkR
• 仓库不内置素材文件——请从上述官方链接下载素材包，解压后放入工作区（目录结构见"安装"一节），避免仓库体积膨胀并尊重官方分发渠道
• 《明日方舟》及其角色、美术素材的版权归上海鹰角网络科技有限公司所有；官方授权玩家个人使用，请勿用于商业用途

⚖️ 许可

代码部分 MIT（随附 LICENSE 则以其为准）。素材版权归鹰角网络（官方发布的玩家素材包）。