npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

dsh-client-ui-paopaocat

v0.3.4

Published

🐱 泡泡猫玻璃主题 — 基于 Seaglass 架构的可爱蓝白 glassmorphism 主题,含淡雅/蓝色双风格切换,猫爪印、小鱼、泡泡装饰

Readme

dsh-client-ui-paopaocat 🐱

泡泡猫玻璃主题 — 基于 Seaglass 架构的蓝白 glassmorphism 主题,为 DeepSeek Harness Web 界面提供可切换的双风格皮肤。

适配版本 — DSH 0.2.0-rc.2(peerDependencies 覆盖 ^0.1.2-rc.1 与 ^0.2.0-rc.1)

0.3.3 起 settingsScope 改为可选探测:旧版硬声明该服务,在 DSH 0.1.7+ 上会让主题永久 pending 加载不出来。

0.3.4 起移除背景音乐功能:播放器、上传与内置曲目入口全部下线,assets/music/ 从仓库删除(旧版把 mp3 内联进 lib/client.js,会让首屏多下载约 21 MB)。

特性

  • 双风格一键切换:设置面板顶部「风格」分段控件,淡雅 / 蓝色 实时切换
    • 淡雅:极淡冰蓝白底(#F5F9FC → #FFFFFF),玻璃近乎透明,装饰极克制 —— 宁静、留白、高字体反差
    • 蓝色:饱和蓝白流体(#87CEEB → #F0F8FF → #E0F7FA),猫爪、泡泡、小鱼、星光装饰 —— 活泼、有存在感
  • 双模式:云母效果把布局改成悬浮玻璃卡片;兼容模式保持原版排版,只换材质
  • WebGL2 流体背景:三色渐变 + 噪声 + 漩涡 + 鼠标交互,色调/深浅可调
  • 自由背景:流体,或壁纸(内置一张默认壁纸,也可自定义图片/视频;含模糊、磨砂、亮度调节)
  • 品牌装饰:猫爪印、小鱼、彩色泡泡、星光、猫角色剪影
  • 一键开关:关闭即完全还原原生界面,不改 DSH 任何一行源码
  • 中/英文字体自定义

安装

dsh plugin --profile web add dsh-client-ui-paopaocat

刷新 Web 界面即可。关闭开关回到原生界面。

本地开发安装

git clone <repo>
cd dsh-client-ui-paopaocat
npm install
npm run build          # tsdown + ModuleLoader 包装 + smoke test
dsh plugin --profile web add "$(pwd)"

设置项

| 分组 | 控件 | |---|---| | 总开关 | 开启 / 关闭 | | 风格 | 淡雅 / 蓝色 | | 模式 | 云母效果 / 兼容模式 | | 玻璃材质 | 模糊度 0–40px · 磨砂度 0–100% · 代码块磨砂度 0–100% | | 背景 | 流体 / 壁纸;流体含色调 0–360° 与深浅 0–100%;壁纸支持图片与视频 | | 环境装饰 | 猫角色 · 小鱼 · 星光 | | 悬停效果 | 鼠标辉光 · 悬停下压 | | 字体 | 英文字体 · 中文字体 |

架构

src/
├── index.ts                  Host 半边(空实现,纯客户端主题)
└── client/
    ├── index.ts              入口:locale 注册 + settings.section 挂载
    ├── ppc-layer.ts          核心层:生命周期 / CSS 变量 / 流体 / 场景 / 辉光
    ├── ppc-preset.ts         双风格参数(淡雅 / 蓝色)
    ├── ppc-fluid-shader.ts   WebGL2 流体着色器
    ├── ppc-fluid-tones.ts    HSL 调色板生成
    ├── ppc-ambient-scene.ts  装饰场景组装
    ├── ppc-brand-assets.ts   猫爪 / 小鱼 / 泡泡 / 星光 / 猫角色 SVG
    ├── ppc-settings-row.tsx  设置面板 UI
    └── ppc.css.ts            全局样式(属性 gating)

技术要点:

  • 全部样式经 [data-ppc] 属性 gating,卸载即还原
  • 客户端 bundle 为单文件 CJS,由 build.mjs 包装为 window.__ModuleLoader__.load({ id, factory })
  • React 通过 factory 的 require 获取,无动态 import
  • npm run build 内置 headless smoke test,失败即构建失败

素材来源

  • 默认壁纸 assets/default-wallpaper.jpg:由 Agnes 图像 API(agnes-image-2.1-flash)生成,暗调电影感主题(绯红彼岸花 + 白虎斑猫),仅做尺寸压缩。
  • 猫角色装饰、猫爪、小鱼、泡泡、星光:本插件自绘的内联 SVG(跟随主题色)。

许可

MIT