@taosee258/dsh-client-ui-skin-qingxiao 0.2.3 → 0.3.0

package/README.md

@@ -14,6 +14,7 @@
 
 - **背景画卷**：默认铺一张清宵插画当背景，亮色、暗色模式都能透出它。可以在设置面板里分别为两种模式换成你自己的图（PNG / JPG / WebP / GIF，7MB 以内），也能一键换回默认。
 - **全套配色重制**：侧边栏、按钮、输入框、对话区、代码块、滚动条……界面每一处都按清宵的配色重新调过；暗色模式是专门的「玄夜剑鸣」氛围。
+- **开屏动画**：每次打开 DSH，AI 白描线稿会在夜幕上沿噪声场平滑显影，完整线稿定格片刻让你看清细节，一道剑光闪过翻成素描纸底，彩色画卷再带饱和度爬升浮现，最后淡出交给正常界面。按 Esc 或点击可跳过；系统开了「减少动态效果」自动不播；不想要可以在调色盘里关掉。
 - **毛玻璃效果**：打开插件的小窗口（比如用量统计）、左右两侧面板、插件页/自动化任务页等整页视图、设置弹窗乃至窗口顶栏，背后的画面都会被柔和地虚化掉——壁纸的轮廓透得出来，但绝不跟文字打架。想多糊可以多糊（0–30 档随意调），不想要可以整体关掉，也可以只关插件窗或只关侧栏。
 - **字永远看得清**：文字颜色专门为「压在插画背景上」调校过——正文浓黑/亮白，次要文字也比 DSH 原生的灰色深两档；背景还有可调浓度的柔光遮罩兜底。
 - **剑气流光**：可选的粒子装饰，青碧或鎏金两种色调；系统开了「减少动态效果」会自动静止。
@@ -31,7 +32,7 @@
 | 阅读清晰度 | 文字柔光开关 · 背景遮罩浓淡 · 面板实透 · 正文字号大小 |
 | 界面琉璃 | 对话区宽度 · 面板磨砂底 |
 | 毛玻璃虚化 | 总开关 · 插件窗/侧栏面板分开控制 · 虚化强度 0–30（0＝关） |
-| 剑气流光 | 开关 · 粒子数量 · 流动速度 |
+| 剑气流光 | 开屏动画（线稿上色）· 开关 · 粒子数量 · 流动速度 |
 | 复原 | 全部恢复默认 |
 
 ## 版本
@@ -82,7 +83,7 @@ dsh plugin --profile desktop add /path/to/dsh-client-ui-skin-qingxiao
 - DSH Web / 桌面端：0.1.0-rc.6 至 0.2.0-rc.2
 - 自 0.2.0 起针对官方桌面端 0.2.0-rc.2 深度适配：字号令牌新基准、顶栏毛玻璃横带与原生窗口按钮融合、插件/任务等整页视图毛玻璃背板、开关与徽章配色对齐
 - 平台：Web / Windows 桌面端（设置保存在各自档案的 `data/` 目录下）
-- 最近验证：2026-10-01（0.2.0-rc.2 桌面端亮/暗两态真机实测）
+- 最近验证：2026-10-02（0.2.0-rc.2 桌面端亮/暗两态真机实测）
 
 ## 版权所有人
 

package/lib/client.js

@@ -13,7 +13,7 @@ window.__ModuleLoader__.load({
 
 		var SKIN_OWNER = "qingxiao";
 		// 与 package.json 的 version 保持一致（面板页脚会展示）。
-		var SKIN_VERSION = "0.2.3";
+		var SKIN_VERSION = "0.3.0";
 		var SKIN_TITLE = "清宵 · DeepSeek Harness";
 		var SKIN_SYSTEM_CHROME_COLOR_LIGHT = "#EEF7FB";
 		var SKIN_SYSTEM_CHROME_COLOR_DARK = "#0B1E2E";
@@ -111,6 +111,178 @@ window.__ModuleLoader__.load({
 			return isFinite(size) ? Math.round(size * 100) / 100 : null;
 		}
 
+		// ═══════════════════════════════════════════════════════════════
+		//  开屏动画：线稿显影 → 定格 → 闪白翻底 → 上色淡入 → 淡出归位
+		//  手法学习自 panding999/codex-startup-animation（macOS 版）。
+		//  线稿用 AI 生成的清宵白描稿原像（assets/qx-lineart.png，与原画
+		//  同构图 3:2，经 /api/dsh-qingxiao/boot-lineart 下发），显影用
+		//  「平滑噪声场 + 对角扫掠」的混合阈值场逐帧揭开，低分辨率噪声
+		//  放大绘制自带羽化边缘，无锯齿且丝滑；翻底直接 CSS invert
+		//  （白线黑底反相即墨线纸底），不再描线。
+		// ═══════════════════════════════════════════════════════════════
+
+		var bootAnimCancel = null;
+
+		function playBootAnimation(body, settings, isDisposed) {
+			if (window.__QX_BOOT_PLAYED__) return; // 每次页面装载只播一次（HMR 重挂不重播）
+			window.__QX_BOOT_PLAYED__ = true;
+			if (!settings.bootAnimation) return;
+			if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+			if (isDisposed()) return;
+
+			// 时间轴（ms）：显影 → 定格（看清完整线稿）→ 闪白翻底 → 上色 → 淡出
+			var T_GROW = 2600, T_HOLD = 1150, T_FLASH = 320, T_COLOR = 850, T_FADE = 750;
+
+			var overlay = document.createElement("div");
+			overlay.dataset.skinChrome = "boot-veil";
+			overlay.dataset.skinOwner = SKIN_OWNER;
+			overlay.setAttribute("aria-hidden", "true");
+			overlay.style.cssText = "position:fixed;inset:0;z-index:2147483300;overflow:hidden;pointer-events:none;background:#000;";
+			var canvas = document.createElement("canvas");
+			canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;";
+			var dpr = Math.min(window.devicePixelRatio || 1, 2);
+			canvas.width = Math.round(window.innerWidth * dpr);
+			canvas.height = Math.round(window.innerHeight * dpr);
+			var paper = document.createElement("div");
+			paper.style.cssText = "position:absolute;inset:0;background-image:url('/api/dsh-qingxiao/boot-lineart');background-position:center;background-size:cover;filter:invert(1);opacity:0;";
+			var artLayer = document.createElement("div");
+			artLayer.style.cssText = "position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;will-change:opacity,filter,transform;";
+			var flash = document.createElement("div");
+			flash.style.cssText = "position:absolute;inset:0;background:#F4F9FC;opacity:0;";
+			overlay.append(canvas, paper, artLayer, flash);
+			body.append(overlay);
+
+			// 彩色画卷：与 body 背景同源（当前模式的自定义背景或默认画卷）
+			var dark = isDarkMode(body);
+			var custom = dark ? settings.darkBackground : settings.lightBackground;
+			artLayer.style.backgroundImage = 'url("' + (custom || DEFAULT_BG_URL) + '")';
+
+			// 噪声场（预生成一次）：平滑随机 + 对角扫掠混合，显影有运笔方向
+			var NW = 132, NH = 88;
+			var field = new Float32Array(NW * NH);
+			var seed = 20260401;
+			function rand() { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; }
+			var i, x, y;
+			for (i = 0; i < field.length; i++) field[i] = rand();
+			for (var pass = 0; pass < 2; pass++) {
+				const src = Float32Array.from(field);
+				for (y = 0; y < NH; y++) for (x = 0; x < NW; x++) {
+					let s = 0;
+					for (let dy = -2; dy <= 2; dy++) for (let dx = -2; dx <= 2; dx++) {
+						const yy = Math.min(NH - 1, Math.max(0, y + dy)), xx = Math.min(NW - 1, Math.max(0, x + dx));
+						s += src[yy * NW + xx];
+					}
+					field[y * NW + x] = s / 25;
+				}
+			}
+			var fmin = Infinity, fmax = -Infinity;
+			for (i = 0; i < field.length; i++) {
+				field[i] = field[i] * 0.55 + ((i % NW) / (NW - 1)) * 0.31 + (((i / NW) | 0) / (NH - 1)) * 0.14;
+				if (field[i] < fmin) fmin = field[i];
+				if (field[i] > fmax) fmax = field[i];
+			}
+			for (i = 0; i < field.length; i++) field[i] = (field[i] - fmin) / (fmax - fmin);
+
+			// 低分辨率遮罩画布：逐帧阈值化后放大绘制，边缘自然羽化
+			var mcv = document.createElement("canvas"); mcv.width = NW; mcv.height = NH;
+			var mctx = mcv.getContext("2d");
+			var mimg = mctx.createImageData(NW, NH);
+			for (i = 0; i < field.length; i++) { mimg.data[i * 4] = 255; mimg.data[i * 4 + 1] = 255; mimg.data[i * 4 + 2] = 255; }
+			function drawMask(p) {
+				var d = mimg.data;
+				for (i = 0; i < field.length; i++) {
+					var a = (p - field[i]) / 0.055;
+					d[i * 4 + 3] = a <= 0 ? 0 : a >= 1 ? 255 : a * 255;
+				}
+				mctx.putImageData(mimg, 0, 0);
+			}
+
+			var lineart = new Image();
+			var raf = 0, start = 0, paperShown = false, ticking = false;
+			function cleanup() {
+				if (raf) { clearTimeout(raf); cancelAnimationFrame(raf); raf = 0; }
+				document.removeEventListener("keydown", onKey, true);
+				document.removeEventListener("click", onSkip, true);
+				document.removeEventListener("visibilitychange", onVis, false);
+				bootAnimCancel = null;
+			}
+			function removeOverlay() { if (overlay.isConnected) overlay.remove(); }
+			function finishNow() {
+				cleanup();
+				overlay.style.transition = "opacity .3s ease";
+				overlay.style.opacity = "0";
+				setTimeout(removeOverlay, 320);
+			}
+			function onKey(e) { if (e.key === "Escape") { e.preventDefault(); finishNow(); } }
+			function onSkip() { finishNow(); }
+			function onVis() { if (!document.hidden) tick(); }
+			document.addEventListener("keydown", onKey, true);
+			document.addEventListener("click", onSkip, true);
+			document.addEventListener("visibilitychange", onVis, false);
+			bootAnimCancel = function() { cleanup(); removeOverlay(); };
+
+			function renderGrow(p) {
+				var ctx = canvas.getContext("2d");
+				ctx.globalCompositeOperation = "copy";
+				ctx.imageSmoothingEnabled = true;
+				ctx.drawImage(lineart, 0, 0, canvas.width, canvas.height);
+				ctx.globalCompositeOperation = "destination-in";
+				ctx.drawImage(mcv, 0, 0, canvas.width, canvas.height);
+				ctx.globalCompositeOperation = "source-over";
+			}
+			function frame(now) {
+				if (isDisposed() || !overlay.isConnected) return;
+				if (!start) start = now;
+				var t = now - start;
+				if (t < T_GROW) {
+					var p = t / T_GROW;
+					var e = 0.5 - Math.cos(Math.PI * p) / 2; // easeInOutSine，首尾柔、中段匀
+					drawMask(e);
+					renderGrow(e);
+				} else if (t < T_GROW + T_HOLD) {
+					drawMask(1);
+					renderGrow(1);
+				} else if (t < T_GROW + T_HOLD + T_FLASH) {
+					if (!paperShown) { paperShown = true; drawMask(1); renderGrow(1); }
+					var ft = (t - T_GROW - T_HOLD) / T_FLASH;
+					paper.style.opacity = String(Math.min(1, ft / 0.55));
+					flash.style.opacity = String(ft < 0.3 ? ft / 0.3 * 0.95 : 0.95 * (1 - (ft - 0.3) / 0.7));
+				} else if (t < T_GROW + T_HOLD + T_FLASH + T_COLOR) {
+					var ct = (t - T_GROW - T_HOLD - T_FLASH) / T_COLOR;
+					var e2 = 1 - Math.pow(1 - ct, 3);
+					artLayer.style.opacity = String(e2);
+					artLayer.style.filter = "saturate(" + (0.25 + 0.8 * e2).toFixed(3) + ") brightness(" + (1 + 0.08 * (1 - e2)).toFixed(3) + ")";
+					artLayer.style.transform = "scale(" + (1.05 - 0.05 * e2).toFixed(4) + ")";
+					flash.style.opacity = "0";
+				} else {
+					var ft2 = (t - T_GROW - T_HOLD - T_FLASH - T_COLOR) / T_FADE;
+					overlay.style.opacity = String(Math.max(0, 1 - ft2).toFixed(3));
+					if (ft2 >= 1) { cleanup(); setTimeout(removeOverlay, 60); return; }
+				}
+				schedule();
+			}
+			function schedule() {
+				if (ticking || isDisposed() || !overlay.isConnected) return;
+				ticking = true;
+				var go = function() { ticking = false; frame(performance.now()); };
+				// 前台用 rAF（丝滑）；后台 rAF 冻结，改 setTimeout 兜底让墙钟
+				// 推进、动画粗粒度走完，遮罩不会捂死界面
+				if (document.visibilityState === "visible") raf = requestAnimationFrame(go);
+				else raf = setTimeout(go, 16);
+			}
+
+			lineart.onload = function() {
+				if (isDisposed() || !overlay.isConnected) { removeOverlay(); return; }
+				schedule();
+			};
+			lineart.onerror = function() { finishNow(); }; // 线稿取不到就整段跳过
+			lineart.src = "/api/dsh-qingxiao/boot-lineart";
+		}
+
+		// ═══════════════════════════════════════════════════════════════
+		//  PALETTE STATE
+		// ═══════════════════════════════════════════════════════════════
+
 		// ═══════════════════════════════════════════════════════════════
 		//  PALETTE STATE
 		// ═══════════════════════════════════════════════════════════════
@@ -130,6 +302,7 @@ window.__ModuleLoader__.load({
 			particleCount: 25,
 			particleSpeed: 100,
 			fontScale: 100,
+			bootAnimation: true,
 			frostMaster: true,
 			frostPlugin: true,
 			frostNative: true,
@@ -333,29 +506,25 @@ body[data-dsh-qingxiao] [class*='detailsCol'],
 body[data-dsh-qingxiao] [class*='rightbarCol'] {
 	background: rgba(var(--qx-panel-rgb), calc(var(--qx-panel-alpha) * 0.72));
 }
-body[data-dsh-qingxiao] [class*='_centerCol'] > * {
-	max-width: var(--qx-content-width);
-	/* 说明：设置等弹窗“逐字竖排/挤在左边”的真正元凶是上方容器的
-	   backdrop-filter（它把弹窗 portal 困在侧边栏里），而不是本条的
-	   margin:auto。保留 max-width 限宽即可。 */
-}
 /* ── 对话区宽度 + 正文字号缩放：接到真正的对话内容上 ──
-   旧选择器只作用于 centerCol 的直接子元素，没命中更深的对话内容，所以
-   拖这两个滑块没反应。对话内容在 [data-slot='main.conversation'] > *
-   （0.1.x 为 [data-slot='conversation']，滚动容器 [data-conversation-scroll]
-   两代同名），正文用 [data-conversation-scroll] 定位。 */
+   0.2.0 起会话根（Dc7zOa_root，头部行/角部按钮/迎宾页/输入卡都在其中）
+   是 [data-slot='main.conversation'] 的直接子元素。容器绝不能限宽：
+   旧版规则把根压到内容宽度后，头部行右上的「打开右侧边栏」角部按钮
+   会跟着内收（离右缘 182px 而非 ~16px），[data-slot='main'] 上更宽的
+   旧限宽规则还会挤压插件页/任务页。宽度控制只走令牌：
+   DSH 自带居中机制（50% ± 宽/2 的宽度手柄布局），会按令牌居中内容；
+   但 0.2.0 的对话体在 _body 上重新定义了 --dsh-chat-content-width
+   （var(--dsh-chat-user-width, clamp(...))，DSH 自己的拖宽手柄），
+   所以令牌覆盖必须比它更深一层（_body），滑块才能继续生效。 */
 body[data-dsh-qingxiao] :is([data-slot='main.conversation'], [data-slot='conversation']) > * {
-	/* DSH 的对话列宽走 --dsh-chat-content-width（正文列、输入卡、表格溢出都读它），
-	   只在容器上写 max-width 到 748px 就被 DSH 自己的令牌卡住，所以这里一并覆盖。 */
 	--dsh-chat-content-width: var(--qx-content-width);
-	max-width: var(--qx-content-width);
-	margin-left: auto;
-	margin-right: auto;
-	width: 100%;
 	/* 居中显示。之前浮层跑到中间是 zoom 改了 position:fixed 坐标所致，
 	   此处已去掉 zoom，浮层会正确锚定在标注旁。 */
 	background: transparent !important;
 }
+body[data-dsh-qingxiao] :is([data-slot='main.conversation'], [data-slot='conversation']) [class*='_body'] {
+	--dsh-chat-content-width: var(--qx-content-width);
+}
 /* 正文字号缩放：不能对对话正文用 zoom（会错位 position:fixed 浮层），
    思路仍是覆盖 DSH 的 markdown 字号令牌，只作用于对话区。
    但绝不能在 font 简写的字号/行高位置上写 calc()——DSH 消费这些令牌的方式是
@@ -1550,6 +1719,7 @@ body[data-dsh-qingxiao] [id=root] [class*='_markdown'] input[type='checkbox'] {
 				secFx.className = "pp-section";
 				secFx.textContent = "剑 气 流 光";
 				bodyEl.append(secFx);
+				bodyEl.append(makeToggle("开屏动画（线稿上色）", "bootAnimation"));
 				bodyEl.append(makeToggle("启用流光", "particles"));
 				bodyEl.append(makeSlider("流光数量", "particleCount", 0, 60, 2, function(v) { return String(v); }));
 				bodyEl.append(makeSlider("流光速度", "particleSpeed", 20, 200, 10, function(v) { return v + "%"; }));
@@ -1873,6 +2043,7 @@ body[data-dsh-qingxiao] [id=root] [class*='_markdown'] input[type='checkbox'] {
 			applyPaletteSettings();
 			rebuildPanel();
 			loadPaletteSettings();
+			playBootAnimation(body, paletteSettings, function() { return disposed; });
 
 			// --- Sidebar width → css variable (decor follows rail/narrow/wide) ---
 			var widthSheet = document.createElement("style");
@@ -1931,6 +2102,7 @@ body[data-dsh-qingxiao] [id=root] [class*='_markdown'] input[type='checkbox'] {
 					document.removeEventListener("click", frostSchedule, true);
 					frostObserver.disconnect();
 					frostHostsSeen.length = 0;
+					if (typeof bootAnimCancel === "function") { try { bootAnimCancel(); } catch (_) {} }
 					// 打标（.qx-frost / .qx-frost-solid）全部摘除，不给下一个实例/裸 DSH 留痕迹。
 					document.querySelectorAll("." + QX_FROST_CLASS).forEach(function(el) {
 						el.classList.remove(QX_FROST_CLASS, QX_FROST_SOLID);

package/lib/index.js

@@ -7,9 +7,11 @@ const name = "@taosee258/dsh-client-ui-skin-qingxiao";
 const inject = ["webServer"];
 const SETTINGS_ROUTE = "/api/dsh-qingxiao/settings";
 const DEFAULT_BG_ROUTE = "/api/dsh-qingxiao/default-background";
+const LINEART_ROUTE = "/api/dsh-qingxiao/boot-lineart";
 const SETTINGS_DIR = "dsh-client-ui-skin-qingxiao";
 const SETTINGS_FILE = "settings.json";
 const DEFAULT_BG_FILE = fileURLToPath(new URL("../assets/qx.jpg", import.meta.url));
+const LINEART_FILE = fileURLToPath(new URL("../assets/qx-lineart.png", import.meta.url));
 const MAX_BODY_BYTES = 15 * 1024 * 1024;
 const MAX_BACKGROUND_BYTES = 7 * 1024 * 1024;
 
@@ -17,7 +19,9 @@ const BOOLEAN_KEYS = [
 	"textContrastBoost", "panelBlur", "goldTrim",
 	"particles", "lightCharms", "darkCharms",
 	// v0.1.4 毛玻璃虚化：总开关 + 插件窗/原生面板两个分项
-	"frostMaster", "frostPlugin", "frostNative"
+	"frostMaster", "frostPlugin", "frostNative",
+	// v0.3.0 开屏动画（线稿上色）
+	"bootAnimation"
 ];
 const NUMBER_RANGES = {
 	scrimOpacity: [20, 95],
@@ -182,9 +186,34 @@ function handleDefaultBackgroundRoute(req, res) {
 	res.end(req.method === "HEAD" ? undefined : defaultBgCache);
 }
 
+let lineartCache = null;
+function handleLineartRoute(req, res) {
+	if (req.method !== "GET" && req.method !== "HEAD") {
+		res.writeHead(405, { allow: "GET, HEAD" });
+		res.end();
+		return;
+	}
+	try {
+		if (lineartCache === null || !lineartCache.length) {
+			lineartCache = readFileSync(LINEART_FILE);
+		}
+	} catch {
+		res.writeHead(404);
+		res.end("lineart missing");
+		return;
+	}
+	res.writeHead(200, {
+		"content-type": "image/png",
+		"cache-control": "no-store",
+		"content-length": String(lineartCache.length)
+	});
+	res.end(req.method === "HEAD" ? undefined : lineartCache);
+}
+
 function apply(ctx) {
 	ctx.webServer.register({ kind: "exact", path: SETTINGS_ROUTE, handler: handleSettingsRoute });
-	return ctx.webServer.register({ kind: "exact", path: DEFAULT_BG_ROUTE, handler: handleDefaultBackgroundRoute });
+	ctx.webServer.register({ kind: "exact", path: DEFAULT_BG_ROUTE, handler: handleDefaultBackgroundRoute });
+	return ctx.webServer.register({ kind: "exact", path: LINEART_ROUTE, handler: handleLineartRoute });
 }
 
 export { apply, inject, name };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@taosee258/dsh-client-ui-skin-qingxiao",
   "description": "Qingxiao (Wuthering Waves) themed skin with ice-blue/jade/moon-white palette, sword-light motes and user-swappable background for the dsh web GUI",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "type": "module",
   "main": "lib/index.js",
   "exports": {