dsh-dream-skin 0.2.2 → 0.2.4

package/README.en.md

@@ -6,11 +6,16 @@
 
 # dsh-dream-skin 🔮
 
-**Make DeepSeek Harness breathe, feel, and belong to you.**
+**Give DeepSeek Harness a face that breathes, feels, and belongs to you.**
 
-Native skinning + wallpaper + theme packs — a romance-engineered project built entirely on DSH's official `--dsw-*` token system.
+Native skinning · wallpaper · shareable theme packs — a romance-engineered project built entirely on DSH's official `--dsw-*` token system.
 
-> 3-line install · 8 original themes · 2 visual layers · 1-click share
+> **TL;DR: code with atmosphere.** ✨
+
+| 🎨 8 original themes | 🖼️ wallpaper + opacity/blur | 🌈 one-click accent | 📦 shareable theme packs |
+|---|---|---|---|
+
+> 3-line install · purely native (no injection, no installer patches) · survives DSH updates
 
 [中文](./README.md) · [Changelog](./CHANGELOG.md) · [Project Notes](./docs/PROJECT.md) · [Publishing Guide](./docs/publishing-to-npm.md)
 
@@ -38,6 +43,18 @@ Native skinning + wallpaper + theme packs — a romance-engineered project built
 
 ---
 
+## 📸 Screenshots
+
+> Real screenshots, not mockups. Left: DSH after applying a skin; right: the dedicated **Theme / Appearance** section in Settings.
+
+<p align="center">
+  <img src="docs/screenshots/preview.png" alt="DSH skin preview" width="46%"/>
+  &nbsp;&nbsp;
+  <img src="docs/screenshots/settings.png" alt="Theme section in settings" width="46%"/>
+</p>
+
+---
+
 ## 🏆 Why it earns a star (vs alternatives)
 
 | Capability | Ours | Other DSH skinning | Codex-Dream-Skin (desktop) |
@@ -55,7 +72,7 @@ Native skinning + wallpaper + theme packs — a romance-engineered project built
 
 | Capability | Description |
 |------------|-------------|
-| 🎨 **8 bundled presets (Mirage)** | Switch instantly under **Settings → General → Skins**, light & dark |
+| 🎨 **8 bundled presets (Mirage)** | Switch instantly under **Settings → Theme / Appearance**, light & dark |
 | 🖼️ **Custom wallpaper** | Pick a local image (auto-compressed ≤2MB), tune **opacity / blur** |
 | 🔤 **Opaque inner surfaces** | Cards, inputs, message bubbles stay readable — never washed out |
 | ↩️ **Default restore** | Back to DSH's built-in appearance (follow system) in one click |
@@ -68,9 +85,10 @@ Differentiation inspired by existing DSH skin projects plus Codex's skin UX:
 | Capability | Description |
 |------------|-------------|
 | 📦 **Theme-pack format + import/export** | A `*.dsh-theme.json` pack = format marker + version + manifest (id/name/author/scheme/accent/tokens). Import a file, one-click apply, and copy a **share link** (encoded in the URL hash) |
-| 🌈 **Per-user Accent** | Stack a custom brand-accent color over the active skin (`overrideTokens` layer, the skin itself untouched), or **randomize** / clear |
-| 🖼️ **Wallpaper 2.0** | Besides local images: **image URL** and **gradient presets**, with a **per-skin suggested gradient** and an **auto-dim** mode (gently fades while focusing tasks) |
+| 🌈 **Per-user Accent** | Stack a custom brand-accent over the active skin (`overrideTokens` layer, the skin untouched): **12 one-click preset swatches**, a color picker, **randomize**, and clear |
+| 🖼️ **Wallpaper 2.0** | Local image / **image URL** / **gradient presets**, with a **per-skin suggested gradient** and **auto-dim**; **Recent** (up to 5) to switch back in one click |
 | 🧩 **Local pack library** | All built-in skins + imported packs in one place; **apply / favorite** in a click |
+| ✅ **Clear selection feedback** | Switching skins updates the checked/bordered highlight **instantly** — no stale white highlight box |
 | 🎲 **Surprise me** | Randomly switch to a theme different from the current one |
 | ⭐ **Favorites** | Star your favorite skins and switch between them fast |
 | ✅ **Validation + rollback** | Pack import validates format / required tokens / color legality; failures or removals fall back safely |
@@ -82,7 +100,7 @@ Differentiation inspired by existing DSH skin projects plus Codex's skin UX:
 dsh plugin --profile web add dsh-dream-skin
 # 2. restart
 dsh web
-# 3. open Settings → General → Skins and pick one → done.
+# 3. open Settings → Theme / Appearance → pick a skin → done.
 ```
 
 > Installs the published npm package — no cloning. If `dsh plugin add` reports a workspace error, append `-w`.
@@ -104,7 +122,7 @@ packages**:
 
 - **Install command = the official one**: `dsh plugin --profile web add dsh-dream-skin`
 - **Uses official extension points**: `ctx.theme` (register themes), `ctx.theme.overrideTokens` (override layers),
-  `ctx.slots` (mount UI into **Settings → General**).
+  `ctx.slots` (mount UI into a dedicated **Settings → Theme / Appearance** section).
 - **Manifest contract matches official packages**: `dsh.bundle` + `dsh.client` + `exports["./client"]`.
 
 In other words: you are not installing a fringe script — this is a standard skin plugin inside DSH's official plugin
@@ -157,7 +175,7 @@ Then **restart** the web server:
 dsh web
 ```
 
-Open **Settings → General** to see the **Skins**, **Accent**, **Wallpaper** / **Advanced Wallpaper**, and **Theme Packs** rows.
+Open **Settings → Theme / Appearance** to see the **Skins**, **Accent**, **Wallpaper** / **Advanced Wallpaper**, and **Theme Packs** rows.
 
 > The `-w` (workspace) flag is needed on a bare `add` because every profile ships a `pnpm-workspace.yaml`; pnpm treats
 > the profile directory as a workspace root, so a bare add fails with `ERR_PNPM_ADDING_TO_ROOT`. If your profile already
@@ -169,6 +187,26 @@ Open **Settings → General** to see the **Skins**, **Accent**, **Wallpaper** /
 dsh plugin --profile web add -w /path/to/dsh-dream-skin
 ```
 
+## 🔄 Update / Uninstall
+
+**Update to the latest** (when installed from the npm release):
+
+```sh
+dsh plugin --profile web update dsh-dream-skin
+dsh web   # restart to pick it up
+```
+
+> Stuck on an old version after an update? pnpm's minimum-release-age (supply-chain) policy can hold back a
+> freshly published release. In the profile dir run:
+> `pnpm add dsh-dream-skin@latest --config.minimumReleaseAge=0` to force it.
+
+**Uninstall:**
+
+```sh
+dsh plugin --profile web remove dsh-dream-skin
+dsh web   # restores the official appearance
+```
+
 ## 🧩 Compatibility
 
 | Item | Value |
@@ -231,6 +269,8 @@ seeds (`react`, `react/jsx-runtime`, …) and registered client bundles (`@deeps
   it then appears in Settings automatically. Add a `skin.<id>` key to both the `zh` and `en` dictionaries.
 - **Ship a theme pack (recommended)**: follow [`docs/examples/sample-theme-pack.json`](./docs/examples/sample-theme-pack.json) —
   one `*.dsh-theme.json` is importable in Settings and shareable via a link, no code changes needed.
+- **Add your own wallpapers**: drop images into [`wallpapers/`](./wallpapers/) (distribute only what you have rights
+  to), then import them via DSH's "Wallpaper" row.
 - **Validate**: `npm test` (VM smoke tests covering factory eval, `apply()`, and pack import/persistence).
 - **Repaint**: reference the `--dsw-alias-*` tokens (full contract in [`docs/themes-spec.md`](./docs/themes-spec.md)).
 
@@ -251,6 +291,11 @@ seeds (`react`, `react/jsx-runtime`, …) and registered client bundles (`@deeps
 Issues and PRs welcome! Please read the [Contributing Guide](./CONTRIBUTING.md) and follow the
 [Code of Conduct](./CODE_OF_CONDUCT.md).
 
+## ⭐ Support the project
+
+If you like it: star **⭐** the repo, thumbs-up **👍** on npm, or share it with DSH friends — it helps the project
+get discovered and keeps it maintained. Want to contribute themes / an online Studio / more skins? Join in.
+
 ## 🔒 Security
 
 Found a security issue? Don't open a public issue — see the [Security Policy](./SECURITY.md).

package/README.md

@@ -6,11 +6,16 @@
 
 # dsh-dream-skin 🔮
 
-**让 DeepSeek Harness 也会呼吸、有情绪、属于你。**
+**让 DeepSeek Harness 换一张会呼吸、有情绪、属于你的脸。**
 
-原生换肤 + 壁纸 + 主题包，一套完全用官方 `--dsw-*` token 系统实现的浪漫工程。
+原生换肤 · 背景壁纸 · 主题包分享 —— 完全用官方 `--dsw-*` token 系统实现的浪漫工程。装一次，终身可换。
 
-> 3 行安装 · 8 套原创主题 · 2 层视觉叠加 · 1 键分享
+> **一句话：写代码，也要有氛围感。** ✨
+
+| 🎨 8 套原创主题 | 🖼️ 壁纸 + 透明度/模糊 | 🌈 强调色点一下 | 📦 主题包可分享 |
+|---|---|---|---|
+
+> 3 行安装 · 纯原生（无注入/不改安装包）· 不因 DSH 更新失效
 
 [English](./README.en.md) · [变更日志](./CHANGELOG.md) · [项目说明](./docs/PROJECT.md) · [发布指引](./docs/publishing-to-npm.md)
 
@@ -37,6 +42,18 @@
 
 ---
 
+## 📸 实机截图
+
+> 真机效果，非概念图。左：应用某套皮肤后的 DSH 界面；右：设置里的「外观 / Theme」分节。
+
+<p align="center">
+  <img src="docs/screenshots/preview.png" alt="DSH 皮肤实机预览" width="46%"/>
+  &nbsp;&nbsp;
+  <img src="docs/screenshots/settings.png" alt="设置中的外观分节" width="46%"/>
+</p>
+
+---
+
 ## 🏆 为什么值得用（vs 同类）
 
 | 能力 | 本插件 | 其它 DSH 换肤方案 | Codex-Dream-Skin (桌面) |
@@ -54,7 +71,7 @@
 
 | 能力 | 说明 |
 |------|------|
-| 🎨 **8 套主题预设（Mirage 幻梦）** | 在 **设置 → 常规 → 皮肤** 一键切换，浅色 / 深色兼顾 |
+| 🎨 **8 套主题预设（Mirage 幻梦）** | 在 **设置 → 外观（Theme）** 一键切换，浅色 / 深色兼顾 |
 | 🖼️ **自定义壁纸** | 上传本地图（自动压缩 ≤2MB），调节**透明度 / 模糊** |
 | 🔤 **内层不透明** | 卡片、输入框、消息气泡不被壁纸盖住，可读性优先 |
 | ↩️ **默认还原** | 一键回到 DSH 内置外观（跟随系统） |
@@ -67,9 +84,10 @@
 | 能力 | 说明 |
 |------|------|
 | 📦 **主题包格式 + 导入/导出** | 一个 `*.dsh-theme.json` 主题包 = 格式标记 + 版本 + manifest（id/name/作者/色系/accent/tokens）。可**导入文件**、**一键应用**、**复制分享链接**（编码进 URL hash） |
-| 🌈 **每用户强调色 Accent** | 为当前皮肤叠加一个自定义品牌强调色（`overrideTokens` 层，不动皮肤本身），或**随机一个** / **恢复主题色** |
-| 🖼️ **壁纸 2.0** | 除本地图外，支持**图片 URL** 与**渐变预设**，每套皮肤**自动建议**一张渐变，可**自动弱化**（聚焦任务时降低干扰） |
+| 🌈 **每用户强调色 Accent** | 为当前皮肤叠加一个自定义品牌强调色（`overrideTokens` 层，不动皮肤本身），**12 个典型色块一键选色** + 选色盘 + 随机 + 恢复主题色 |
+| 🖼️ **壁纸 2.0** | 本地图 / **图片 URL** / **渐变预设**，每套皮肤**自动建议**一张渐变，可**自动弱化**（聚焦任务时降低干扰）；**最近使用**（最多 5 张）一键换回 |
 | 🧩 **本地主题包库** | 所有内置皮肤 + 导入的自定义包集中展示，**应用 / 收藏** 一键完成 |
+| ✅ **清晰选中反馈** | 切换皮肤时选中态（✓ + 边框）**即时跟随**，不再残留模糊的白色高亮框 |
 | 🎲 **换一个试试（surprise me）** | 随机挑一个和你当前不同的主题 |
 | ⭐ **收藏** | 收藏喜欢的皮肤，快速切换 |
 | ✅ **校验 + 回滚** | 导入时会校验格式/必填 token/颜色合法性；失败或移除时安全回退，不做破坏性更改 |
@@ -90,7 +108,7 @@ DeepSeek Harness 的口号是「一切皆插件」：模型、工具、沙箱、
 
 - **安装命令 = 官方唯一安装命令**：`dsh plugin --profile web add dsh-dream-skin`
 - **调用的是官方扩展点**：`ctx.theme`（注册主题）、`ctx.theme.overrideTokens`（叠加层）、
-  `ctx.slots`（把 UI 挂进 **设置 → 常规**）。
+  `ctx.slots`（把 UI 挂进独立的 **设置 → 外观 / Theme** 分节）。
 - **manifest 契约与官方一致**：`dsh.bundle` + `dsh.client` + `exports["./client"]`。
 
 也就是说：**你装的不是一个旁门左道的脚本，而是 DSH 官方插件体系里的标准皮肤插件。**
@@ -134,7 +152,7 @@ DeepSeek Harness 的口号是「一切皆插件」：模型、工具、沙箱、
 dsh plugin --profile web add dsh-dream-skin
 # 2. 重启
 dsh web
-# 3. 打开 设置 → 常规 → 皮肤，挑一套 → 完。
+# 3. 打开 设置 → 外观（Theme）→ 皮肤，挑一套 → 完。
 ```
 
 > 装的是 npm 已完成发布的正式包，无需 clone。若 `dsh plugin add` 报 workspace 相关错误，补一个 `-w` 即可。
@@ -154,7 +172,7 @@ dsh plugin --profile web add dsh-dream-skin
 dsh web
 ```
 
-打开 **设置 → 常规**，即可看到「皮肤」「强调色」「背景图片 / 高级壁纸」与「主题包」等行。
+打开 **设置 → 外观（Theme）**，即可看到「皮肤」「强调色」「背景图片 / 高级壁纸」与「主题包」等行。
 
 > `-w` 标志在裸 `add` 时必需：每个 profile 自带 `pnpm-workspace.yaml`，pnpm 会把它当作 workspace 根，裸加报错
 > `ERR_PNPM_ADDING_TO_ROOT`。若已加过 `-w`，后续用现有 workspace 即无需重复。
@@ -165,6 +183,25 @@ dsh web
 dsh plugin --profile web add -w /path/to/dsh-dream-skin
 ```
 
+## 🔄 更新 / 卸载
+
+**更新到最新版**（装的是 npm 正式包时）：
+
+```sh
+dsh plugin --profile web update dsh-dream-skin
+dsh web   # 重启生效
+```
+
+> 若更新后仍显示旧版本，可能是 pnpm 的最小发布年龄（supply-chain）策略挡住了刚发布的新版本：
+> 在 profile 目录执行 `pnpm add dsh-dream-skin@latest --config.minimumReleaseAge=0` 即可绕过。
+
+**卸载**：
+
+```sh
+dsh plugin --profile web remove dsh-dream-skin
+dsh web   # 重启后恢复官方外观
+```
+
 ## 🧩 兼容性
 
 | 项 | 值 |
@@ -226,6 +263,8 @@ bundle（`@deepseek-ai/dsh-client-runtime/client`、…）。
   它即自动出现在设置里；记得在 `zh` / `en` 词典补 `skin.<id>` 文案。
 - **做一个主题包（推荐分发方式）**：参考 [`docs/examples/sample-theme-pack.json`](./docs/examples/sample-theme-pack.json)，
   一个 `*.dsh-theme.json` 即可在设置里导入或通过分享链接分发给别人，无需改代码。
+- **放你自己的壁纸**：把图片丢进 [`wallpapers/`](./wallpapers/)（注意只在你有权限的前提下分发），再在
+  DSH 的「背景图片」里导入即可。
 - **跑校验**：`npm test`（VM 冒烟测试，覆盖 factory 求值、`apply` 挂载、主题包导入/持久化）。
 - **换配色**：参考 `--dsw-alias-*` 令牌（完整契约见 [`docs/themes-spec.md`](./docs/themes-spec.md)）。
 
@@ -245,6 +284,11 @@ bundle（`@deepseek-ai/dsh-client-runtime/client`、…）。
 
 欢迎提交 Issue 与 PR！请先阅读 [贡献指南](./CONTRIBUTING.md)，并遵循 [Code of Conduct](./CODE_OF_CONDUCT.md)。
 
+## ⭐ 支持这个项目
+
+喜欢的话，给仓库点个 **Star ⭐**、在 npm 上点个 **👍**，或把它转发给你的 DSH 朋友——这会让更多人发现它，
+也能激励持续维护。想一起做主题库 / 在线 Studio / 更多主题？欢迎来贡献。
+
 ## 🔒 安全
 
 发现安全问题？请勿直接开公开 Issue——参见 [安全策略](./SECURITY.md)。

package/lib/client.js

@@ -36,6 +36,10 @@ window.__ModuleLoader__.load({
 		const WALLPAPER_OPACITY_KEY = "dsh-dream-skin:wallpaper-opacity";
 		/** localStorage key holding the wallpaper blur radius (px). */
 		const WALLPAPER_BLUR_KEY = "dsh-dream-skin:wallpaper-blur";
+		/** localStorage key holding recent wallpaper history (JSON array of {kind,value}). */
+		const WALLPAPER_HISTORY_KEY = "dsh-dream-skin:wallpaper-history";
+		/** Max wallpaper history entries kept. */
+		const WALLPAPER_HISTORY_MAX = 5;
 		/** Sentinel meaning "no custom skin — follow the built-in appearance". */
 		const DEFAULT_SKIN = "system";
 		/** Default wash opacity (0..1) applied to the translucent surfaces. */
@@ -344,7 +348,10 @@ window.__ModuleLoader__.load({
 			"background.opacity": "透明度",
 			"background.blur": "模糊",
 			"background.hint": "图片显示在主内容区与侧边栏的半透明底上，消息等内层表面保持不透明以保证可读性",
+			"background.history": "最近使用",
+			"background.historyApply": "点击换回这张壁纸",
 			"accent.title": "强调色（Accent）",
+			"accent.pick": "选色…",
 			"accent.random": "随机",
 			"accent.clear": "恢复主题色",
 			"accent.hint": "为当前皮肤设置一个自定义强调色（叠加层，不影响皮肤本身）；点「恢复主题色」回到皮肤默认强调色",
@@ -381,7 +388,10 @@ window.__ModuleLoader__.load({
 			"background.opacity": "Opacity",
 			"background.blur": "Blur",
 			"background.hint": "The image shows through the translucent main canvas and sidebar; inner surfaces stay opaque for readability",
+			"background.history": "Recent",
+			"background.historyApply": "Click to switch back",
 			"accent.title": "Accent",
+			"accent.pick": "Pick…",
 			"accent.random": "Random",
 			"accent.clear": "Reset to theme",
 			"accent.hint": "Set a custom accent color for the active skin (an override layer — the skin itself is untouched). Reset to return to the skin's default accent.",
@@ -612,14 +622,16 @@ window.__ModuleLoader__.load({
 					url: null,
 					opacity: DEFAULT_WALLPAPER_OPACITY,
 					blur: DEFAULT_WALLPAPER_BLUR,
+					history: [],
 					revision: -1
 				}),
 				actions: {
-					sync: (d, url, opacity, blur, revision) => {
+					sync: (d, url, opacity, blur, history, revision) => {
 						if (revision <= d.revision) return;
 						d.url = url;
 						d.opacity = opacity;
 						d.blur = blur;
+						d.history = history;
 						d.revision = revision;
 					}
 				}
@@ -637,6 +649,11 @@ window.__ModuleLoader__.load({
 				gap: "10px",
 				padding: "16px 0"
 			},
+			section: {
+				display: "flex",
+				flexDirection: "column",
+				width: "100%"
+			},
 			title: {
 				color: "var(--dsw-alias-label-primary)",
 				fontSize: "14px",
@@ -661,15 +678,31 @@ window.__ModuleLoader__.load({
 				width: "96px",
 				padding: "3px",
 				borderRadius: "10px",
-				border: "2px solid transparent",
 				background: "transparent",
+				border: "none",
 				cursor: "pointer",
 				font: "inherit",
-				boxSizing: "border-box"
+				boxSizing: "border-box",
+				position: "relative",
+				outline: "none"
 			},
 			cardSelected: {
-				borderColor: "var(--dsw-alias-brand-primary)",
-				background: "var(--dsw-alias-interactive-bg-hover)"
+				boxShadow: "0 0 0 2px var(--dsw-alias-brand-primary)",
+				background: "rgba(127, 127, 127, 0.10)"
+			},
+			cardCheck: {
+				position: "absolute",
+				top: "-4px",
+				right: "-4px",
+				width: "18px",
+				height: "18px",
+				borderRadius: "50%",
+				background: "var(--dsw-alias-brand-primary)",
+				color: "#ffffff",
+				fontSize: "12px",
+				lineHeight: "18px",
+				textAlign: "center",
+				fontWeight: 700
 			},
 			cardLabel: {
 				color: "var(--dsw-alias-label-secondary)",
@@ -756,6 +789,40 @@ window.__ModuleLoader__.load({
 				cursor: "pointer",
 				padding: 0
 			},
+			historyThumb: {
+				width: "56px",
+				height: "36px",
+				borderRadius: "8px",
+				border: "1px solid var(--dsw-alias-border-l2)",
+				cursor: "pointer",
+				padding: 0,
+				boxSizing: "border-box",
+				backgroundSize: "cover",
+				backgroundPosition: "center"
+			},
+			accentPreset: {
+				width: "24px",
+				height: "24px",
+				borderRadius: "50%",
+				border: "1px solid rgba(128,128,128,0.4)",
+				cursor: "pointer",
+				padding: 0,
+				boxSizing: "border-box"
+			},
+			accentDot: {
+				width: "22px",
+				height: "22px",
+				borderRadius: "50%",
+				border: "1px solid var(--dsw-alias-border-l2)",
+				boxSizing: "border-box",
+				flex: "none"
+			},
+			accentHex: {
+				color: "var(--dsw-alias-label-secondary)",
+				fontSize: "13px",
+				lineHeight: "20px",
+				fontFamily: "ui-monospace, monospace"
+			},
 			checkbox: {
 				accentColor: "var(--dsw-alias-brand-primary)",
 				width: "16px",
@@ -857,6 +924,10 @@ window.__ModuleLoader__.load({
 					...(selected ? styles.cardSelected : {})
 				},
 				children: [
+					selected ? (0, react_jsx_runtime.jsx)("span", {
+						style: styles.cardCheck,
+						children: "✓"
+					}) : null,
 					(0, react_jsx_runtime.jsx)(Swatch, { tokens: skin.tokens }),
 					(0, react_jsx_runtime.jsx)("span", {
 						style: {
@@ -948,10 +1019,11 @@ window.__ModuleLoader__.load({
 		 * Wallpaper row: choose (compressed to a data URL), preview, tune the
 		 * wash opacity and blur, and remove the wallpaper.
 		 */
-		function WallpaperRow({ t, setWallpaper, setOpacity, setBlur, useStore }) {
+		function WallpaperRow({ t, setWallpaper, setOpacity, setBlur, applyFromHistory, useStore }) {
 			const url = useStore((s) => s.url);
 			const opacity = useStore((s) => s.opacity);
 			const blur = useStore((s) => s.blur);
+			const history = useStore((s) => s.history);
 			const inputRef = (0, _react.useRef)(null);
 			const onPick = () => inputRef.current?.click();
 			const onFile = (event) => {
@@ -1019,6 +1091,31 @@ window.__ModuleLoader__.load({
 						format: (v) => `${v}px`,
 						onChange: setBlur
 					}),
+					history && history.length > 0 ? (0, react_jsx_runtime.jsxs)("div", {
+						style: { ...styles.group, padding: "8px 0", borderBottom: "none" },
+						children: [
+							(0, react_jsx_runtime.jsx)("div", {
+								style: styles.title,
+								children: t("background.history")
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								style: styles.actionRow,
+								children: history.map((entry, i) => {
+									const isImage = entry.kind !== "gradient" && entry.kind !== "url";
+									return (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										title: t("background.historyApply"),
+										style: {
+											...styles.historyThumb,
+											background: isImage ? `url("${entry.value}") center/cover no-repeat` : entry.value
+										},
+										onClick: () => applyFromHistory(entry.kind, entry.value),
+										children: null
+									}, i);
+								})
+							})
+						]
+					}) : null,
 					(0, react_jsx_runtime.jsx)("div", {
 						style: styles.hint,
 						children: t("background.hint")
@@ -1692,17 +1789,43 @@ window.__ModuleLoader__.load({
 			syncWallpaper();
 		}
 
+		/** Read recent wallpaper history entries [{kind,value}]. */
+		function readWallpaperHistory() {
+			const raw = readStorage(WALLPAPER_HISTORY_KEY);
+			if (raw === null) return [];
+			try {
+				const parsed = JSON.parse(raw);
+				return Array.isArray(parsed) ? parsed.filter((e) => e && typeof e.value === "string") : [];
+			} catch {
+				return [];
+			}
+		}
+
+		/** Persist the wallpaper history list. */
+		function writeWallpaperHistory(list) {
+			writeStorage(WALLPAPER_HISTORY_KEY, JSON.stringify(list.slice(0, WALLPAPER_HISTORY_MAX)));
+		}
+
+		/** Record a wallpaper setting into history (dedupe by kind+value, newest first). */
+		function pushWallpaperHistory(kind, value) {
+			if (value === null || value === undefined || value === "") return;
+			const list = readWallpaperHistory();
+			const deduped = list.filter((e) => !(e.kind === kind && e.value === value));
+			deduped.unshift({ kind, value });
+			writeWallpaperHistory(deduped);
+		}
+
 		/** Set a wallpaper by kind and value. */
 		function setWallpaperKind(ctx, kind, value) {
 			writeStorage(WALLPAPER_KIND_KEY, kind);
 			if (kind === "gradient") {
 				writeStorage(WALLPAPER_GRADIENT_KEY, value);
-				if (value === null) writeStorage(WALLPAPER_GRADIENT_KEY, null);
 			} else if (kind === "url") {
 				writeStorage(WALLPAPER_URL_KEY, value);
 			} else {
 				writeStorage(WALLPAPER_KEY, value);
 			}
+			pushWallpaperHistory(kind, value);
 			applyWallpaper2(ctx);
 			syncWallpaper();
 		}
@@ -1735,6 +1858,13 @@ window.__ModuleLoader__.load({
 		//#endregion
 
 		//#region dsh-dream-skin: P0 UI rows (accent + packs)
+		/** Curated accent presets users can pick with one click. */
+		const ACCENT_PRESETS = [
+			"#4f83f2", "#2563eb", "#34d399", "#22d3ee", "#a78bfa",
+			"#fb923c", "#f87171", "#fbbf24", "#e879f9", "#f472b6",
+			"#2dd4bf", "#a3e635"
+		];
+
 		/**
 		 * Accent row: pick an arbitrary brand-accent color (or clear to follow
 		 * the active theme). Uses an `<input type="color">` + the current accent
@@ -1745,6 +1875,7 @@ window.__ModuleLoader__.load({
 			const base = useStore((s) => s.base);
 			const activeValue = accent !== DEFAULT_ACCENT ? accent : base;
 			const inputValue = normalizeHex(activeValue) || "#4f83f2";
+			const accentPickerRef = (0, _react.useRef)(null);
 			return (0, react_jsx_runtime.jsxs)("div", {
 				style: styles.group,
 				children: [
@@ -1755,10 +1886,27 @@ window.__ModuleLoader__.load({
 					(0, react_jsx_runtime.jsxs)("div", {
 						style: styles.actionRow,
 						children: [
+							(0, react_jsx_runtime.jsx)("span", {
+								style: { ...styles.accentDot, background: inputValue },
+								children: null
+							}),
+							(0, react_jsx_runtime.jsx)("span", {
+								style: styles.accentHex,
+								children: inputValue
+							}),
+							(0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								style: styles.button,
+								onClick: () => {
+									if (accentPickerRef.current) accentPickerRef.current.click();
+								},
+								children: t("accent.pick")
+							}),
 							(0, react_jsx_runtime.jsx)("input", {
+								ref: accentPickerRef,
 								type: "color",
 								value: inputValue,
-								style: { ...styles.swatch, width: "40px", height: "32px", padding: 0, border: "none", borderRadius: "8px", cursor: "pointer" },
+								style: { display: "none" },
 								onChange: (event) => setAccent(event.target.value)
 							}),
 							(0, react_jsx_runtime.jsx)("button", {
@@ -1778,6 +1926,21 @@ window.__ModuleLoader__.load({
 							}) : null
 						]
 					}),
+					(0, react_jsx_runtime.jsxs)("div", {
+						style: styles.actionRow,
+						children: ACCENT_PRESETS.map((hex) => (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							title: hex,
+							"aria-pressed": activeValue === hex,
+							style: {
+								...styles.accentPreset,
+								background: hex,
+								...(activeValue === hex ? { outline: "2px solid var(--dsw-alias-label-primary)", outlineOffset: "1px" } : {})
+							},
+							onClick: () => setAccent(hex),
+							children: null
+						}, hex))
+					}),
 					(0, react_jsx_runtime.jsx)("div", {
 						style: styles.hint,
 						children: t("accent.hint")
@@ -1922,6 +2085,21 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+
+		//#region dsh-dream-skin: Appearance settings section
+		/**
+		 * A dedicated "Theme / 外观" settings section. Hosts the skin, wallpaper,
+		 * advanced wallpaper, accent and theme-pack rows — instead of flat rows in
+		 * the General section, they live under their own category in the settings
+		 * left nav.
+		 */
+		function DreamSkinSection({ renderSlot }) {
+			return (0, react_jsx_runtime.jsx)("div", {
+				style: styles.section,
+				children: renderSlot("settings.dreamSkin.item", {})
+			});
+		}
+		//#endregion
 		//#region dsh-dream-skin: client plugin body
 		/**
 		 * Required services: theme runtime (skins, switching, token override
@@ -1968,7 +2146,13 @@ window.__ModuleLoader__.load({
 				wallpaperRevision += 1;
 				// Store the raw data URL (not the CSS url(...) wrapper) so the
 				// Wallpaper row can render an <img> preview and test `url !== null`.
-				wallpaperBound?.sync(readWallpaper(), readWallpaperOpacity(), readWallpaperBlur(), wallpaperRevision);
+				wallpaperBound?.sync(
+					readWallpaper(),
+					readWallpaperOpacity(),
+					readWallpaperBlur(),
+					readWallpaperHistory(),
+					wallpaperRevision
+				);
 			};
 			applyWallpaper2(ctx);
 			syncWallpaper();
@@ -1979,8 +2163,18 @@ window.__ModuleLoader__.load({
 
 			const skinStore = createSkinStore();
 			let skinBound;
+			// Monotonic revision for the skin slot store. Using a locally incrementing
+			// counter (instead of the host theme revision) guarantees the store ALWAYS
+			// updates on every click — even if theme/change timing races or the host
+			// revision doesn't bump as expected — so the selected card follows instantly.
+			let skinRevision = 0;
+			const syncSkinWith = (id) => {
+				skinBound?.sync(id, ++skinRevision);
+				// A skin/scheme switch changes the base color; re-shade the wash.
+				if (wallpaperBackgroundCss() !== null) applyWallpaper2(ctx);
+			};
 			const syncSkin = (snapshot) => {
-				skinBound?.sync(snapshot.preference, snapshot.revision);
+				skinBound?.sync(snapshot.preference, ++skinRevision);
 				// A skin/scheme switch changes the base color; re-shade the wash.
 				if (wallpaperBackgroundCss() !== null) applyWallpaper2(ctx);
 			};
@@ -1998,11 +2192,30 @@ window.__ModuleLoader__.load({
 					setSkin: (id) => {
 						ctx.theme.setTheme(id);
 						writeSavedSkin(id);
+						// Deterministically push the new preference into the slot store AND
+						// re-shade the wallpaper so the selected card follows immediately,
+						// independent of theme/change emission timing.
+						syncSkinWith(id);
 					}
 				};
 			};
-			ctx.slots.inject("settings.general.item", () => ctx.slots.register({
-				name: "settings.general.item",
+			// Register our own "Theme / 外观" settings section. It appears in the
+			// settings left-nav and hosts all skin features (skin, wallpaper,
+			// advanced wallpaper, accent, theme packs) under a single category.
+			ctx.slots.inject("settings.section", () => ctx.slots.register({
+				name: "settings.section",
+				id: "dream-skin",
+				order: 10,
+				label: "Theme / 外观",
+				locale: SETTINGS_NS,
+				children: { "settings.dreamSkin.item": {
+					kind: "list",
+					scope: "root"
+				} }
+			}, DreamSkinSection));
+
+			ctx.slots.inject("settings.dreamSkin.item", () => ctx.slots.register({
+				name: "settings.dreamSkin.item",
 				id: "dream-skin",
 				order: 20,
 				store: skinStore,
@@ -2043,13 +2256,21 @@ window.__ModuleLoader__.load({
 						applyWallpaper2(ctx);
 						syncWallpaper();
 					},
+					applyFromHistory: (kind, value) => {
+						const resolvedKind = kind === "gradient" || kind === "url" ? kind : "image";
+						if (value && value.length > 4) {
+							setWallpaperKind(ctx, resolvedKind, value);
+						} else {
+							syncWallpaper();
+						}
+					},
 					clearWallpaper: () => {
 						removeWallpaper(ctx);
 					}
 				};
 			};
-			ctx.slots.inject("settings.general.item", () => ctx.slots.register({
-				name: "settings.general.item",
+			ctx.slots.inject("settings.dreamSkin.item", () => ctx.slots.register({
+				name: "settings.dreamSkin.item",
 				id: "dream-skin-wallpaper",
 				order: 30,
 				store: wallpaperStore,
@@ -2099,8 +2320,8 @@ window.__ModuleLoader__.load({
 					}
 				};
 			};
-			ctx.slots.inject("settings.general.item", () => ctx.slots.register({
-				name: "settings.general.item",
+			ctx.slots.inject("settings.dreamSkin.item", () => ctx.slots.register({
+				name: "settings.dreamSkin.item",
 				id: "dream-skin-wallpaper-advanced",
 				order: 31,
 				store: advWallpaperStore,
@@ -2135,8 +2356,8 @@ window.__ModuleLoader__.load({
 					}
 				};
 			};
-			ctx.slots.inject("settings.general.item", () => ctx.slots.register({
-				name: "settings.general.item",
+			ctx.slots.inject("settings.dreamSkin.item", () => ctx.slots.register({
+				name: "settings.dreamSkin.item",
 				id: "dream-skin-accent",
 				order: 25,
 				store: accentStore,
@@ -2177,8 +2398,8 @@ window.__ModuleLoader__.load({
 					surprise: refreshSurprise
 				};
 			};
-			ctx.slots.inject("settings.general.item", () => ctx.slots.register({
-				name: "settings.general.item",
+			ctx.slots.inject("settings.dreamSkin.item", () => ctx.slots.register({
+				name: "settings.dreamSkin.item",
 				id: "dream-skin-packs",
 				order: 40,
 				store: packStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-dream-skin",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "DeepSeek Harness 换肤插件 (Dream Skin for DeepSeek Harness): curated --dsw-alias-* theme presets, a custom translucent wallpaper with opacity/blur controls, theme-pack import/export + share links, per-user accent, favorites & surprise-me, and durable per-browser persistence — in the spirit of the Codex Dream Skin project.",
   "license": "MIT",
   "type": "module",