dsh-fish-soul 0.15.2 → 0.15.3

package/README.md

@@ -2,7 +2,7 @@
 
 让一个 QQ 小号背后有"同一个人"：固定人格、按人记记忆、有自己的生活节奏、会主动开口；同一个"她"同时出现在 QQ、B站、抖音。
 
-DSH 插件（单角色 `feiyu`）。版本 **0.15.2**。
+DSH 插件（单角色 `feiyu`）。版本 **0.15.3**。
 
 QQ 交流群：**1125962189**
 

package/lib/client.js

@@ -6,11 +6,11 @@
  * 宿主契约：
  *  - window.__ModuleLoader__.load({ id, factory })，exports.apply / inject；inject: ["slots"]
  *  - 通过 settings.section 保留设置入口；在宿主支持时通过 main + sidebar.panellist 注册独立页；样式随组件挂载 / 卸载
- *  - 不 require 任何 Harness Client 包：下面的 Switch / Button / Input / Seg / Tabs / Dot / Tag 照抄
- *    @deepseek-ai/dsh-client-ui-primitives 的结构、无障碍语义与样式（lib/panel.css，fs- 前缀，只用 --dsw-alias-* 令牌）
+ *  - 优先使用宿主提供的 @deepseek-ai/dsh-client-ui-primitives；旧宿主缺失时基础控件降级，
+ *    个别需要专用语义与布局的控件使用插件局部实现（lib/panel.css，fs- 前缀）
  *
  * 设计信条：Avoid unnecessary secondary labels and descriptions. Let the layout do the explaining.
- *  - DeepSeek Harness 工作台骨架：可折叠侧栏（导航 + 版本）| 居中主任务流 | 按需展开的详情面板；记忆调试是一体化底部输入舱
+ *  - DeepSeek Harness 工作台骨架：主页与设置页共用两级顶部导航 | 居中主任务流 | 按需展开的详情面板
  *  - 动态 / 整理记录渲染成单行步骤胶囊（<details>），默认收起，点开看原因与想起的记忆
  *  - 平铺紧凑行（标题左 / 控件右），1px 低对比分隔；Row 的 desc 只作悬停提示，meta（实时状态）用等宽小字
  *  - 状态 = 一颗 StateDot + 一个短句；只在出问题时多说一句
@@ -24,6 +24,10 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		const react = require("react");
+		// 新版宿主把官方组件作为共享模块提供；旧宿主无此模块时保留原控件。
+		/** @type {any} */
+		let primitives = null;
+		try { primitives = require("@deepseek-ai/dsh-client-ui-primitives"); } catch { /* 旧宿主 */ }
 
 		const inject = ["slots"];
 		const PLUGIN_ID = "dsh-fish-soul";
@@ -85,7 +89,7 @@ window.__ModuleLoader__.load({
 			return hr < 24 ? `${hr} 小时前` : `${Math.floor(hr / 24)} 天前`;
 		}
 
-		// ── 控件：照抄 dsh-ui-primitives ──
+		// ── 控件：参考 dsh-ui-primitives，自包含以兼容插件加载器 ──
 		const ICONS = {
 			eye: "M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z M12 9.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z",
 			close: "M7 7l10 10M17 7 7 17",
@@ -95,27 +99,42 @@ window.__ModuleLoader__.load({
 			sidebar: "M4 5h16v14H4Z M9 5v14",
 			info: "M12 8h.01 M11 12h1v5h1 M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
 		};
-		const Icon = (name, size = 16) => h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true },
-			h("path", { d: ICONS[name] }));
+		const ICON_COMPONENTS = { close: "IconCloseOutlineRegular", refresh: "IconRefreshOutlineRegular", chevron: "IconChevronDownOutlineRegular", edit: "IconEditOutlineRegular", sidebar: "IconPanelLeftOutlineRegular", info: "IconInfoOutlineRegular" };
+		const Icon = (name, size = 16) => primitives?.[ICON_COMPONENTS[name]] ? h(primitives[ICON_COMPONENTS[name]], { size, "aria-hidden": true })
+			: h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true }, h("path", { d: ICONS[name] }));
 
 		function Switch({ checked, onChange, label, disabled }) {
+			if (primitives?.Switch) return h(primitives.Switch, { checked: checked === true, onChange, label, disabled, className: "fs-native-switch" });
 			return h("button", { type: "button", role: "switch", "aria-checked": checked === true, "aria-label": label, disabled, className: "fs-switch", onClick: () => onChange(!checked) },
 				h("span", { className: "fs-switch-thumb" }));
 		}
-		const Button = ({ variant, ...props }, ...kids) => h("button", { type: "button", ...props, className: cx("fs-btn", variant) }, ...kids);
-		const IconButton = (icon, label, onClick, extra) => h("button", { type: "button", className: "fs-icon-btn", "aria-label": label, title: label, onClick, ...extra }, Icon(icon, 14));
+		const Button = ({ variant, ...props }, ...kids) => primitives?.Button
+			? h(primitives.Button, { ...props, variant: variant === "danger" ? "outline" : variant ?? "outline", size: "sm", className: cx("fs-native-btn", variant === "danger" && "fs-native-danger", variant === "primary" && "fs-native-primary", props.className) }, ...kids)
+			: h("button", { type: "button", ...props, className: cx("fs-btn", variant) }, ...kids);
+		const IconButton = (icon, label, onClick, extra) => primitives?.Button
+			? h(primitives.Button, { variant: "ghost", size: "sm", className: "fs-icon-btn fs-native-icon", "aria-label": label, title: label, onClick, ...extra }, Icon(icon, 14))
+			: h("button", { type: "button", className: "fs-icon-btn", "aria-label": label, title: label, onClick, ...extra }, Icon(icon, 14));
 
 		function Seg({ options, value, onChange, label }) {
 			const index = Math.max(0, options.findIndex((o) => o.value === value));
 			return h("div", { className: "fs-seg", role: "radiogroup", "aria-label": label, style: { "--n": options.length, "--i": index } },
 				h("span", { className: "fs-seg-ind", "aria-hidden": true }),
-				options.map((o) => h("button", {
+				options.map((o) => h(primitives?.Pill ?? "button", {
 					type: "button", key: o.value, role: "radio", "aria-checked": o.value === value,
 					className: "fs-seg-btn", onClick: () => { if (o.value !== value) onChange(o.value); }
 				}, o.label)));
 		}
 
-		function Tabs({ items, value, onChange }) {
+		function Tabs({ items, value, onChange, horizontal = false, hasUpdate = false }) {
+			const navRef = react.useRef(null);
+			react.useEffect(() => {
+				const nav = navRef.current;
+				const selected = nav?.querySelector('[role="tab"][aria-selected="true"]');
+				if (!nav || !selected) return;
+				const outer = nav.getBoundingClientRect(), inner = selected.getBoundingClientRect();
+				if (inner.left < outer.left) nav.scrollLeft -= outer.left - inner.left;
+				else if (inner.right > outer.right) nav.scrollLeft += inner.right - outer.right;
+			}, [value]);
 			const index = Math.max(0, items.findIndex(([v]) => v === value));
 			const onKeyDown = (event, i) => {
 				const n = items.length;
@@ -126,20 +145,60 @@ window.__ModuleLoader__.load({
 				event.currentTarget.parentElement?.querySelectorAll('[role="tab"]').item(next)?.focus();
 				onChange(items[next][0]);
 			};
-			return h("nav", { className: "fs-nav", role: "tablist", "aria-label": "鱼", "aria-orientation": "vertical", style: { "--n": items.length, "--i": index } },
+			return h("nav", { className: "fs-nav", ref: navRef, role: "tablist", "aria-label": "鱼", "aria-orientation": horizontal ? "horizontal" : "vertical", style: { "--n": items.length, "--i": index } },
 				items.map(([v, label], i) => h("button", {
 					type: "button", key: v, role: "tab", id: `fs-tab-${v}`, "aria-selected": v === value, "aria-controls": "fs-tabpanel",
-					tabIndex: v === value ? 0 : -1, className: "fs-tab", title: label, onClick: () => onChange(v), onKeyDown: (e) => onKeyDown(e, i)
-				}, h("span", { className: "fs-tab-key", "aria-hidden": true }, TAB_KEYS[v] ?? label.slice(0, 1)), h("span", { className: "fs-tab-label" }, label))));
+					tabIndex: v === value ? 0 : -1, className: "fs-tab", title: v === "version" && hasUpdate ? "版本更新（有新版本）" : label, "aria-label": v === "version" && hasUpdate ? "版本更新（有新版本）" : label, onClick: () => onChange(v), onKeyDown: (e) => onKeyDown(e, i)
+				}, h("span", { className: "fs-tab-key", "aria-hidden": true }, TAB_KEYS[v] ?? label.slice(0, 1)), h("span", { className: "fs-tab-label" }, label), v === "version" && hasUpdate ? h("span", { className: "fs-update-dot", "aria-hidden": true }) : null)));
+		}
+
+		// 两级导航保留原有页面，按任务分类；引导跳转仍以原页签 id 为真源。
+		function GroupedTabs({ items, value, onChange, hasUpdate }) {
+			const groups = NAV_GROUPS.map((group) => ({ ...group, items: items.filter(([id]) => group.ids.includes(id)) })).filter((group) => group.items.length > 0);
+			const active = groups.find((group) => group.items.some(([id]) => id === value)) ?? groups[0];
+			const remembered = react.useRef({});
+			const groupRef = react.useRef(null);
+			react.useEffect(() => {
+				if (active) remembered.current[active.id] = value;
+				const nav = groupRef.current;
+				const selected = nav?.querySelector('[aria-pressed="true"]');
+				if (!nav || !selected) return;
+				const outer = nav.getBoundingClientRect(), inner = selected.getBoundingClientRect();
+				if (inner.left < outer.left) nav.scrollLeft -= outer.left - inner.left;
+				else if (inner.right > outer.right) nav.scrollLeft += inner.right - outer.right;
+			}, [value]);
+			return h(react.Fragment, null,
+				h("div", { className: "fs-group-row" },
+					h("span", { className: "fs-brand" }, "鱼"),
+					h("nav", { className: "fs-group-nav", ref: groupRef, "aria-label": "功能分类" }, groups.map((group) => {
+						const selected = group.id === active?.id;
+						const showUpdate = hasUpdate && group.ids.includes("version");
+						return h("button", { type: "button", key: group.id, className: "fs-group-tab", "aria-pressed": selected,
+							"aria-label": showUpdate ? `${group.label}（有新版本）` : group.label,
+							onClick: () => onChange(remembered.current[group.id] ?? group.items[0][0]) },
+							group.label, showUpdate ? h("span", { className: "fs-update-dot", "aria-hidden": true }) : null);
+					}))),
+				h("div", { className: "fs-subnav-row" }, h(Tabs, { items: active?.items ?? [], value, onChange, horizontal: true, hasUpdate })));
 		}
 
 		/** StateDot：done / warning / error / idle 是圆点，ongoing 是转圈。 */
-		const Dot = (state) => state === "ongoing"
+		const Dot = (state) => primitives?.StateDot ? h(primitives.StateDot, { state }) : state === "ongoing"
 			? h("svg", { className: "fs-spin", width: 14, height: 14, viewBox: "0 0 24 24", "aria-hidden": true },
 				h("g", null, h("circle", { cx: 12, cy: 12, r: 9.5 }), h("circle", { cx: 12, cy: 12, r: 9.5 })))
 			: h("span", { className: "fs-dot", "data-state": state, "aria-hidden": true });
 		const State = (state, text, title) => h("span", { className: "fs-state", "data-state": state, title: title ?? text, role: "status" }, Dot(state), h("span", null, text));
-		const Tag = (text, tone, extra, ...kids) => h("span", { className: "fs-tag", "data-tone": tone, ...extra }, text, ...kids);
+		const Tag = (text, tone, extra, ...kids) => {
+			if (!primitives?.Tag) return h("span", { className: "fs-tag", "data-tone": tone, ...extra }, text, ...kids);
+			const tag = h(primitives.Tag, { tone: tone ?? "neutral", className: "fs-native-tag" }, text, ...kids);
+			return extra ? h("span", { className: "fs-native-tag-wrap", ...extra }, tag) : tag;
+		};
+		const Pill = ({ active, children, ...props }) => primitives?.Pill
+			? h(primitives.Pill, { ...props, active }, children)
+			: h("button", { type: "button", ...props }, children);
+		function Check({ checked, onChange, label, hideLabel, title }) {
+			return primitives?.Checkbox ? h(primitives.Checkbox, { checked, onChange, label, title, className: cx("fs-native-check", hideLabel && "label-hidden") })
+				: h("label", { className: cx("fs-native-check", hideLabel && "label-hidden"), title }, h("input", { type: "checkbox", checked, onChange: (e) => onChange(e.target.checked) }), h("span", null, label));
+		}
 		const Muted = (text, extra) => h("span", { className: "fs-unit", ...extra }, text);
 
 		// 行：标题左 / 控件右。desc（解释性文字）不占版面，只作悬停提示；meta（实时状态）以等宽小字跟在标题下
@@ -152,19 +211,23 @@ window.__ModuleLoader__.load({
 					meta ? h("span", { className: "fs-row-meta" }, meta) : null),
 				h("div", { className: "fs-ctl" }, ...kids));
 		}
-		/** @param {{ title?: any, aside?: any, tip?: string }} props @param {...any} kids */
-		function Group({ title, aside, tip }, ...kids) {
-			return h("section", { className: "fs-group" },
+		/** @param {{ title?: any, aside?: any, tip?: string, className?: string }} props @param {...any} kids */
+		function Group({ title, aside, tip, className }, ...kids) {
+			return h("section", { className: cx("fs-group", className) },
 				title ? h("h3", { className: "fs-group-head", title: tip }, h("span", null, title), aside ?? null) : null, ...kids);
 		}
-		const Input = (props) => h("input", { className: "fs-input", spellCheck: false, autoComplete: "off", ...props, className: cx("fs-input", props.className) });
-		const Num = (props) => h("input", { type: "number", inputMode: "numeric", ...props, className: "fs-input num" });
+		const Input = (props) => {
+			if (!primitives?.Input) return h("input", { spellCheck: false, autoComplete: "off", ...props, className: cx("fs-input", props.className) });
+			const { className, style, ...input } = props;
+			return h("span", { className: cx("fs-native-input-wrap", className), style }, h(primitives.Input, { spellCheck: false, autoComplete: "off", ...input, className: "fs-native-input" }));
+		};
+		const Num = (props) => Input({ type: "number", inputMode: "numeric", ...props, className: cx("num", props.className) });
 		const Area = (props) => h("textarea", { rows: 2, spellCheck: false, ...props, className: "fs-input wide" });
 
 		function Secret({ value, onChange, onBlur, placeholder, label }) {
 			const [shown, setShown] = react.useState(false);
 			return h("div", { className: "fs-affix" },
-				h("input", { className: "fs-input", type: shown ? "text" : "password", value, placeholder, onChange, onBlur, autoComplete: "off", spellCheck: false, "aria-label": label }),
+				Input({ type: shown ? "text" : "password", value, placeholder, onChange, onBlur, autoComplete: "off", spellCheck: false, "aria-label": label }),
 				IconButton("eye", shown ? "隐藏" : "显示", () => setShown(!shown)));
 		}
 		const Select = (props, ...options) => h("div", { className: "fs-affix select" },
@@ -183,7 +246,7 @@ window.__ModuleLoader__.load({
 		}
 		const split = (v, re = /[,，\s]+/) => String(v).split(re).map((x) => x.trim()).filter(Boolean);
 
-		const ui = { h, cx, Icon, Switch, Button, IconButton, Seg, Dot, State, Tag, Muted, Row, Group, Input, Num, Area, Secret, Select, Empty, Item, useForm, split };
+		const ui = { h, cx, Icon, Switch, Button, IconButton, Seg, Dot, State, Tag, Pill, Check, Muted, Row, Group, Input, Num, Area, Secret, Select, Empty, Item, useForm, split };
 
 		// ── 记忆检索 ──
 		function RetrievalPane({ data, refresh, notify }) {
@@ -328,18 +391,18 @@ window.__ModuleLoader__.load({
 				onChange: (e) => patch({ [name]: e.target.value === "" ? "" : Number(e.target.value) }), onBlur: () => save({ [name]: form[name] === "" ? fallback : form[name] }) });
 
 			return h(react.Fragment, null,
-				h("section", { className: "fs-group" },
+				h("section", { className: "fs-life-overview" },
 					h("div", { className: "fs-now" },
-						Dot(sleeping ? "idle" : "done"),
-						h("span", { className: "fs-now-title" }, slot.activity ?? "未排期"),
-						today.dailyMoodTone ? Tag(today.dailyMoodTone) : null,
+						h("div", { className: "fs-now-activity" }, Dot(sleeping ? "idle" : "done"),
+							h("span", { className: "fs-now-title" }, slot.activity ?? "未排期")),
 						h("span", { className: "fs-now-meta" },
+							today.dailyMoodTone ? Tag(today.dailyMoodTone) : null,
 							clock.isAccelerated || scale > 1 ? Tag(`${scale}×`, "warning") : null,
 							h("span", null, fmtClock(clock.virtualNowMs)))),
 					schedule.length > 0 ? h("div", { className: "fs-schedule" },
 						schedule.map((s, i) => h("div", { className: "fs-slot", key: i, "aria-current": s.range === slot.range },
 							h("span", null, s.range), h("span", { title: s.activity }, s.activity)))) : null),
-				Group({},
+				Group({ className: "fs-life-settings" },
 					Row({ title: "主动开口" }, h(Switch, { label: "主动开口", checked: form.enabled, onChange: (v) => save({ enabled: v }) })),
 					form.enabled ? Row({ title: "每天最多" }, Tag(`今天 ${today.proactiveCount ?? 0}`), num("dailyMaxCount", "每天最多", 0, 50, 10), Muted("次")) : null,
 					form.enabled ? Row({ title: "时段" }, num("activeStart", "开始", 0, 23, 8), Muted("–"), num("activeEnd", "结束", 1, 24, 24), Muted("点")) : null,
@@ -347,7 +410,7 @@ window.__ModuleLoader__.load({
 					form.enabled ? Row({ title: "主人私聊" }, Input({ value: form.masterPrivateChannelId, placeholder: "private:主人 QQ", onChange: (e) => patch({ masterPrivateChannelId: e.target.value }), onBlur: () => save() })) : null,
 					form.enabled ? Row({ title: "群聊", stack: true },
 						...form.selfGroupChannelIds.map((cid) => Tag(cid, undefined, { key: cid },
-							h("button", { type: "button", "aria-label": `移除 ${cid}`, onClick: () => save({ selfGroupChannelIds: form.selfGroupChannelIds.filter((x) => x !== cid) }) }, Icon("close", 12)))),
+							IconButton("close", `移除 ${cid}`, () => save({ selfGroupChannelIds: form.selfGroupChannelIds.filter((x) => x !== cid) })))),
 						Input({ value: newGroup, placeholder: "group:群号", style: { flex: "0 1 160px", width: "160px" }, onChange: (e) => setNewGroup(e.target.value), onKeyDown: (e) => { if (e.key === "Enter") addGroup(); } }),
 						Button({ variant: "ghost", disabled: newGroup.trim() === "", onClick: addGroup }, "添加")) : null));
 		}
@@ -622,34 +685,51 @@ window.__ModuleLoader__.load({
 		}
 
 		// ── 面板根组件：页签 + 数据装载 + 轮询 ──
-		const TAB_KEYS = { retrieval: "索", persona: "人", life: "自", inspector: "忆", activity: "动", behavior: "习", models: "模", qq: "Q", bili: "B", douyin: "抖" };
+		const TAB_KEYS = { guide: "引", retrieval: "索", persona: "人", life: "自", inspector: "忆", activity: "动", behavior: "习", models: "模", qq: "Q", bili: "B", douyin: "抖", version: "版" };
 		const TABS = [["retrieval", "记忆检索"], ["persona", "人格"], ["life", "自走"], ["inspector", "记忆检视"], ["activity", "动态"], ["behavior", "习惯"], ["models", "模型"], ["qq", "QQ"], ["bili", "B站"], ["douyin", "抖音"]];
-
-		// ── 首次引导：没点「不再显示」就在页签上面列一张清单 ──
-		function Onboarding({ onGo, notify }) {
+		const NAV_GROUPS = [
+			{ id: "start", label: "开始", ids: ["guide"] },
+			{ id: "memory", label: "记忆", ids: ["retrieval", "inspector"] },
+			{ id: "character", label: "角色", ids: ["persona", "behavior"] },
+			{ id: "daily", label: "日常", ids: ["life", "activity"] },
+			{ id: "channels", label: "平台", ids: ["qq", "bili", "douyin"] },
+			{ id: "system", label: "系统", ids: ["models", "interface", "version"] }
+		];
+
+		// 服务端仍提供原始步骤与状态；短标题只调整展示，未知步骤保留服务端原文。
+		const ONBOARDING_LABELS = { persona: "选择人格", model: "配置模型", qq: "连接 QQ", master: "设置主人 QQ", retrieval: "配置向量检索", import: "导入聊天记录", voice: "配置语音" };
+		// 独立引导页：关闭自动显示后仍可从「开始」重新打开。
+		function Onboarding({ onGo, onDismiss, onHide, notify }) {
 			const [data, setData] = react.useState(null);
-			const load = react.useCallback(async () => { const r = await api("GET", "/onboarding/state"); if (r?.ok) setData(r); }, []);
+			const [error, setError] = react.useState(null);
+			const load = react.useCallback(async () => { const r = await api("GET", "/onboarding/state"); if (r?.ok) { setData(r); setError(null); } else setError(r?.error ?? "引导状态暂不可用"); }, []);
 			react.useEffect(() => { load(); const t = setInterval(load, 10000); return () => clearInterval(t); }, [load]);
-			if (!data || data.dismissed) return null;
+			if (!data) return error ? h("div", { className: "fs-notice", role: "alert" }, h("b", null, "引导加载失败"), h("span", null, error), Button({ variant: "secondary", onClick: load }, "重试")) : h("div", { className: "fs-empty" }, Dot("ongoing"));
 			async function dismiss() {
 				const r = await api("POST", "/onboarding/dismiss", { dismissed: true });
-				if (r?.ok) setData({ ...data, dismissed: true }); else notify(r?.error ?? "操作失败");
+				if (r?.ok) { setData({ ...data, dismissed: true }); onDismiss(); } else notify(r?.error ?? "操作失败");
 			}
-			const left = data.steps.filter((x) => !x.done && !x.optional).length;
-			return Group({ title: left === 0 ? "就绪" : `开始 · ${data.steps.length - left}/${data.steps.length}`, aside: IconButton("close", "不再显示", dismiss) },
-				h("div", { className: "fs-list" }, data.steps.map((x) => h("div", { className: "fs-item", key: x.id },
-					h("span", { className: "fs-dot", "data-state": x.done ? "done" : x.optional ? "idle" : "warning", "aria-hidden": true }),
-					h("span", { className: cx("fs-item-main", x.done && "fs-muted") }, x.title),
-					h("span", { className: "fs-item-meta" },
-						x.optional && !x.done ? Tag("可选", "outline") : null,
-						x.done ? null : x.tab ? Button({ variant: "ghost", onClick: () => onGo(x.tab) }, "去设置") : null)))));
+			const steps = data.steps ?? [];
+			const completed = steps.filter((x) => x.done).length;
+			const left = steps.filter((x) => !x.done && !x.optional).length;
+			return Group({ className: "fs-onboarding", title: `${left === 0 ? "基础就绪" : "开始"} · ${completed}/${steps.length}`, aside: h("span", { className: "fs-group-aside" }, Button({ variant: "ghost", onClick: onHide }, "隐藏开始"), data.dismissed ? null : IconButton("close", "以后不再自动显示", dismiss)) },
+				h("div", { className: "fs-list" }, steps.map((x) => {
+					const label = ONBOARDING_LABELS[x.id] ?? x.title;
+					return h("div", { className: "fs-item", key: x.id },
+						h("span", { className: "fs-onboarding-dot", role: "img", "aria-label": x.done ? "已完成" : x.optional ? "可选，未完成" : "未完成" }, Dot(x.done ? "done" : x.optional ? "idle" : "warning")),
+						h("span", { className: cx("fs-item-main", x.done && "fs-muted") }, label),
+						h("span", { className: "fs-item-meta" },
+							x.optional && !x.done ? Tag("可选", "outline") : null,
+							x.done ? null : x.tab ? Button({ variant: "ghost", "aria-label": `设置${label}`, onClick: () => onGo(x.tab) }, "去设置") : null));
+				})));
 		}
 		// 版本与更新：显示当前版本，自动 / 手动去 npm（不通再 GitHub）看有没有新版；只提示，不替你装
-		function UpdateBar({ notify, compact, onOpen }) {
+		function UpdateBar({ notify, onUpdateState }) {
 			const [data, setData] = react.useState(null);
 			const [busy, setBusy] = react.useState(false);
 			const load = react.useCallback(async () => { const r = await api("GET", "/update/state"); if (r?.ok) setData(r); }, []);
 			react.useEffect(() => { load(); const t = setInterval(load, 60000); return () => clearInterval(t); }, [load]);
+			react.useEffect(() => { if (data && onUpdateState) onUpdateState(data.hasUpdate === true); }, [data, onUpdateState]);
 			if (!data) return null;
 			async function check() {
 				setBusy(true);
@@ -665,9 +745,6 @@ window.__ModuleLoader__.load({
 			async function copy() {
 				try { await navigator.clipboard.writeText(data.command); notify("已复制更新命令"); } catch { notify("复制失败，手动选中复制"); }
 			}
-			if (compact) return h("button", { type: "button", className: "fs-ver", onClick: onOpen, title: data.hasUpdate ? `v${data.latest}` : undefined, "aria-label": "版本" },
-				h("span", { className: "fs-dot", "data-state": data.hasUpdate ? "warning" : data.latest ? "done" : "idle", "aria-hidden": true }),
-				h("span", { className: "fs-tab-label num" }, `v${data.current}`));
 			const when = data.checkedAt ? new Date(data.checkedAt).toLocaleString("zh-CN", { hour12: false }) : "";
 			const status = data.hasUpdate ? Tag(`有新版本 v${data.latest}`, "warning")
 				: data.latest ? Tag("已是最新", "success")
@@ -698,16 +775,33 @@ window.__ModuleLoader__.load({
 			}
 		}
 
-		function FishSoulSection() {
+		function FishSoulSection({ standalone = false } = {}) {
 			const css = useCss();
+			// 界面偏好只保存在当前宿主浏览器，不修改服务端引导进度。
+			const guideVisibilityKey = "fish-soul:guide-visible";
+			const readGuideVisible = () => { try { return window.localStorage.getItem(guideVisibilityKey) !== "false"; } catch { return true; } };
+			const [guideVisible, setGuideVisible] = react.useState(readGuideVisible);
 			const [tab, setTab] = react.useState("retrieval");
+			const hasInteracted = react.useRef(false);
+			const goTab = (next) => { hasInteracted.current = true; setTab(next); };
 			const [retrieval, setRetrieval] = react.useState(null);
 			const [life, setLife] = react.useState(null);
 			const [channels, setChannels] = react.useState(null);
 			const [toast, setToast] = react.useState(null);
-			const [navOpen, setNavOpen] = react.useState(true);
-			const [detail, setDetail] = react.useState(null);
+			const [updateAvailable, setUpdateAvailable] = react.useState(false);
 			const notify = react.useCallback((text) => setToast({ key: Date.now(), text }), []);
+			const setGuideVisibility = (visible) => {
+				try { window.localStorage.setItem(guideVisibilityKey, String(visible)); }
+				catch { notify("无法保存界面设置"); return; }
+				setGuideVisible(visible);
+				if (!visible) setTab((current) => current === "guide" ? "retrieval" : current);
+				window.dispatchEvent(new Event("fish-soul:guide-visibility"));
+			};
+			react.useEffect(() => {
+				const sync = () => { const visible = readGuideVisible(); setGuideVisible(visible); if (!visible) setTab((current) => current === "guide" ? "retrieval" : current); };
+				window.addEventListener("fish-soul:guide-visibility", sync); window.addEventListener("storage", sync);
+				return () => { window.removeEventListener("fish-soul:guide-visibility", sync); window.removeEventListener("storage", sync); };
+			}, []);
 
 			react.useEffect(() => {
 				if (toast === null) return undefined;
@@ -721,6 +815,14 @@ window.__ModuleLoader__.load({
 			const loadChannels = react.useCallback(load("/channels/state", setChannels), []);
 
 			react.useEffect(() => { loadRetrieval(); loadLife(); loadChannels(); }, []);
+			// 仅在初次加载且用户尚未操作时自动进入引导，慢请求不能打断用户。
+			react.useEffect(() => {
+				let active = true;
+				api("GET", "/onboarding/state").then((r) => {
+					if (active && !hasInteracted.current && readGuideVisible() && r?.ok && r.dismissed === false && Array.isArray(r.steps) && r.steps.some((step) => !step.done)) setTab("guide");
+				});
+				return () => { active = false; };
+			}, []);
 			// 检索页 2s 刷新（重建进度）；QQ / B站 / 抖音 3s 刷新
 			react.useEffect(() => {
 				const fn = tab === "retrieval" ? loadRetrieval : tab === "qq" || tab === "bili" || tab === "douyin" ? loadChannels : null;
@@ -736,8 +838,21 @@ window.__ModuleLoader__.load({
 				return () => clearInterval(timer);
 			}, [tab]);
 
+			// 导航红点使用同一只读状态接口；版本页自身检查后的结果即时同步。
+			react.useEffect(() => {
+				if (tab === "version") return undefined;
+				let active = true;
+				const loadUpdate = async () => { const r = await api("GET", "/update/state"); if (active && r?.ok) setUpdateAvailable(r.hasUpdate === true); };
+				loadUpdate();
+				const timer = setInterval(loadUpdate, 60000);
+				return () => { active = false; clearInterval(timer); };
+			}, [tab]);
+
 			if (css === null) return null;
-			const pane = tab === "retrieval" ? h(RetrievalPane, { data: retrieval, refresh: loadRetrieval, notify })
+			const pane = tab === "guide" ? h(Onboarding, { onGo: goTab, onDismiss: () => goTab("retrieval"), onHide: () => setGuideVisibility(false), notify })
+				: tab === "interface" ? Row({ title: "显示开始" }, h(Switch, { label: "显示开始", checked: guideVisible, onChange: setGuideVisibility }))
+				: tab === "version" ? h(Boundary, { name: "版本" }, h(UpdateBar, { notify, onUpdateState: setUpdateAvailable }))
+				: tab === "retrieval" ? h(RetrievalPane, { data: retrieval, refresh: loadRetrieval, notify })
 				: tab === "life" ? h(LifePane, { data: life, refresh: loadLife, notify })
 				: tab === "inspector" ? h(ChunkTab, { file: "client.soul.js", pick: (m) => m.InspectorPane, failText: "记忆检视加载失败", notify })
 				: tab === "activity" ? h(ChunkTab, { file: "client.soul.js", pick: (m) => m.ActivityPane, failText: "动态加载失败", notify })
@@ -748,30 +863,23 @@ window.__ModuleLoader__.load({
 				: tab === "bili" ? h(BiliPane, { data: channels, refresh: loadChannels, notify })
 				: h(ChunkTab, { file: "client.douyin.js", pick: (m) => m.DouyinPane, failText: "抖音页加载失败", data: channels, refresh: loadChannels, notify });
 
-			// 工作台骨架：可折叠侧栏（导航 + 版本）| 主任务流（引导 + 当前页）| 按需展开的详情面板（版本与更新）
-			const label = TABS.find(([v]) => v === tab)?.[1] ?? "";
-			return h("div", { className: "fs-host" }, h("div", { className: cx("fs", navOpen ? null : "nav-collapsed", detail ? "has-detail" : null) },
+			// 工作台：主页与设置页都把版本更新作为系统分组下的独立页签。
+			const tabs = [...(guideVisible ? [["guide", "使用引导"]] : []), ...TABS, ["interface", "界面"], ["version", "版本更新"]];
+			const label = tabs.find(([v]) => v === tab)?.[1] ?? "";
+			return h("div", { className: "fs-host" }, h("div", { className: cx("fs", standalone ? "fs-standalone" : "fs-settings"), onPointerDown: () => { hasInteracted.current = true; }, onKeyDown: () => { hasInteracted.current = true; } },
 				css === "" ? null : h("style", { "data-plugin-css": `${PLUGIN_ID}/panel.css` }, css),
-				h("aside", { className: "fs-side" }, h("div", { className: "fs-side-inner" },
-					h("div", { className: "fs-side-head" },
-						h("span", { className: "fs-tab-label fs-brand" }, "鱼"),
-						IconButton("sidebar", navOpen ? "收起侧栏" : "展开侧栏", () => setNavOpen(!navOpen), { "aria-expanded": navOpen })),
-					h(Tabs, { items: TABS, value: tab, onChange: setTab }),
-					h("div", { className: "fs-side-foot" }, h(Boundary, { name: "版本" }, h(UpdateBar, { notify, compact: true, onOpen: () => setDetail(detail === "version" ? null : "version") }))))),
+				h("div", { className: "fs-side" }, h("div", { className: "fs-side-inner" },
+					h(GroupedTabs, { items: tabs, value: tab, onChange: goTab, hasUpdate: updateAvailable }))),
 				h("main", { className: "fs-main" },
 					h("header", { className: "fs-main-head" }, h("h2", { className: "fs-main-title" }, label)),
-					h(Boundary, { name: "引导" }, h(Onboarding, { onGo: setTab, notify })),
 					h("div", { className: "fs-pane", role: "tabpanel", id: "fs-tabpanel", "aria-labelledby": `fs-tab-${tab}`, key: tab }, h(Boundary, { name: "这一页" }, pane))),
-				detail === "version" ? h("aside", { className: "fs-detail", "aria-label": "版本" }, h("div", { className: "fs-detail-inner" },
-					h("div", { className: "fs-detail-head" }, h("span", null, "版本"), IconButton("close", "关闭", () => setDetail(null))),
-					h(Boundary, { name: "版本" }, h(UpdateBar, { notify })))) : null,
 				toast === null ? null : h("div", { className: "fs-toast", role: "status", key: toast.key }, toast.text)));
 		}
 
 		// 同一组件可在设置弹窗或宿主主面板内渲染；只改变承载容器。
 		function FishSoulPage() {
 			return h("div", { className: "fs-page-shell" },
-				h("div", { className: "fs-page-scroll" }, h(FishSoulSection)));
+				h("div", { className: "fs-page-scroll" }, h(FishSoulSection, { standalone: true })));
 		}
 
 		function FishSoulPanelIcon({ size = 16 } = {}) {

package/lib/client.models.js

@@ -44,7 +44,7 @@ window.__ModuleLoader__.load({
 				}
 				return opts;
 			};
-			return Group({ title: "按功能选模型", aside: host ? Muted(`DSH 默认：${providerName(host.provider)} · ${host.model}`) : null },
+			return Group({ title: "按功能选模型", className: "fs-model-routes", aside: host ? Muted(`DSH 默认：${providerName(host.provider)} · ${host.model}`) : null },
 				providers.length === 0 && !host ? Row({ title: "可用模型" }, State("warning", "DSH 里还没配模型")) : null,
 				data.lastError ? Row({ title: "上次调用" }, State("error", data.lastError)) : null,
 				...(data.features ?? []).map((f) => Row({ title: f.label, key: f.id, meta: f.resolved ? (f.selection ? undefined : `现在用 ${f.resolved.model}`) : "没有可用的模型" },

package/lib/client.soul.js

@@ -61,7 +61,7 @@ window.__ModuleLoader__.load({
 					h("span", { className: "fs-item-sub" }, origin));
 			}
 			return h("div", { className: "fs-item" },
-				selectable ? h("input", { type: "checkbox", checked: selected === true, "aria-label": `选中 #${m.id}`, onChange: (e) => onSelect(m.id, e.target.checked) }) : null,
+				selectable ? h(ui.Check, { checked: selected === true, label: `选中 #${m.id}`, hideLabel: true, onChange: (v) => onSelect(m.id, v) }) : null,
 				Tag(KIND[m.kind] ?? m.kind),
 				h("span", { className: "fs-item-main", title: `${m.content}\n${origin}` }, m.content),
 				h("span", { className: "fs-item-meta" },
@@ -142,7 +142,7 @@ window.__ModuleLoader__.load({
 					h("div", { className: "fs-list" }, data.outdated.map((m) => Item({
 						key: m.id, lead: Tag(m.status === "outdated" ? "过时" : m.status === "superseded" ? "改掉" : "删了", "outline"),
 						text: m.content, title: `${m.content}\n${m.evidence || m.source}`,
-						meta: [h("button", { key: "r", type: "button", className: "fs-btn ghost", onClick: () => restore(m.id) }, "恢复")]
+						meta: [Button({ key: "r", variant: "ghost", onClick: () => restore(m.id) }, "恢复")]
 					})))));
 		}
 
@@ -267,8 +267,7 @@ window.__ModuleLoader__.load({
 						Row({ title: `${FORMAT[pv.format] ?? pv.format} · ${pv.chatCount} 个聊天 · ${pv.messageCount} 条消息${pv.memoryCount ? ` · 现成记忆 ${pv.memoryCount} 条` : ""}` },
 							...(pv.warnings ?? []).map((w, i) => Tag(w, "warning", { key: i }))),
 						pv.speakers.length > 0 ? h("div", { className: "fs-list" }, pv.speakers.slice(0, 40).map((s) => h("div", { className: "fs-item", key: s.key },
-							h("label", { className: "fs-check", title: "勾上 = 这是她自己说的话" },
-								h("input", { type: "checkbox", checked: opts.self[s.key] === true, onChange: (e) => setOpts({ ...opts, self: { ...opts.self, [s.key]: e.target.checked } }) }), "是她"),
+							h(ui.Check, { checked: opts.self[s.key] === true, label: "是她", title: "勾上 = 这是她自己说的话", onChange: (v) => setOpts({ ...opts, self: { ...opts.self, [s.key]: v } }) }),
 							h("span", { className: "fs-item-main", title: s.chats.join("、") }, s.name),
 							h("span", { className: "fs-item-meta" },
 								s.existing ? Tag(`已认识 · ${stageLabel(s.existing.relationStage)}`, "success") : null,
@@ -360,7 +359,7 @@ window.__ModuleLoader__.load({
 			const persons = data.persons ?? [];
 			const memories = data.memories ?? [];
 			const pendings = data.pendings ?? [];
-			const pill = (ownerId, label, title) => h("button", { type: "button", key: ownerId, className: "fs-pill", "aria-pressed": owner === ownerId, title, onClick: () => setOwner(ownerId) }, label);
+			const pill = (ownerId, label, title) => ui.Pill({ key: ownerId, active: owner === ownerId, className: "fs-pill", "aria-pressed": owner === ownerId, title, onClick: () => setOwner(ownerId), children: label });
 			const onSelect = (id, on) => setSel((prev) => { const next = new Set(prev); if (on) next.add(id); else next.delete(id); return next; });
 			const filter = { ownerId: owner, q: qApplied, source };
 			const narrowed = owner !== "all" || qApplied !== "" || source !== "";

package/lib/panel.css

@@ -47,13 +47,10 @@ html[data-ds-theme-source] body:not([data-ds-dark-theme]) :is(.fs,.fs-page-shell
 .fs-tab[aria-selected=true]{border-color:var(--fs-line);background:var(--bg-control);color:var(--fg-primary);font-weight:500}
 .fs-tab[aria-selected=true] .fs-tab-key{border-color:var(--fs-line-strong);color:var(--fg-primary)}
 @media (hover:hover){.fs-tab:hover{background:var(--bg-hover);color:var(--fg-primary)}}
-.fs-side-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--fs-line)}
-.fs-ver{display:flex;align-items:center;gap:6px;width:100%;height:26px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--fg-tertiary);cursor:pointer}
-@media (hover:hover){.fs-ver:hover{background:var(--bg-hover);color:var(--fg-secondary)}}
 .fs.nav-collapsed .fs-side{padding:8px 6px}
 .fs.nav-collapsed .fs-side-head{justify-content:center;padding:0}
 .fs.nav-collapsed .fs-tab-label{display:none}
-.fs.nav-collapsed .fs-tab,.fs.nav-collapsed .fs-ver{justify-content:center;padding:0}
+.fs.nav-collapsed .fs-tab{justify-content:center;padding:0}
 
 /* 主任务流 */
 .fs-main{display:flex;flex-direction:column;gap:20px;min-width:0;width:100%;max-width:760px;justify-self:center;padding:14px 24px 24px}
@@ -88,6 +85,13 @@ html[data-ds-theme-source] body:not([data-ds-dark-theme]) :is(.fs,.fs-page-shell
 .fs-row.stack .fs-ctl{justify-content:flex-start}
 .fs-unit{font-family:var(--fs-mono);font-variant-numeric:tabular-nums;font-size:12px;line-height:18px;color:var(--fg-secondary);white-space:normal;overflow-wrap:anywhere}
 
+/* 首次引导：沿用宿主的细边框与低对比背景，窄屏标题允许换行。 */
+.fs-onboarding{padding:10px 12px;border:1px solid var(--fs-line);border-radius:8px;background:var(--bg-control)}
+.fs-onboarding .fs-group-head{min-height:28px;padding-bottom:5px}
+.fs-onboarding .fs-item{min-height:38px;gap:8px}
+.fs-onboarding .fs-item-main{white-space:normal;overflow-wrap:anywhere}
+.fs-onboarding .fs-item-meta{gap:4px}
+
 /* 输入框：settings-form 的 input */
 .fs-input{flex:0 1 240px;width:240px;min-width:0;height:28px;padding:0 10px;border:1px solid var(--fs-line-strong);border-radius:6px;background:var(--bg-control);font-size:13px;line-height:20px;color:var(--fg-primary)}
 .fs-input::placeholder{color:var(--fg-tertiary);opacity:.7}
@@ -111,8 +115,16 @@ select.fs-input{appearance:none;-webkit-appearance:none;padding-right:32px;curso
 .fs-switch[aria-checked=false] .fs-switch-thumb{background:var(--fg-secondary)}
 .fs-switch[aria-checked=true] .fs-switch-thumb{transform:translateX(16px)}
 
+/* 官方控件只补充插件布局与危险态，视觉主体来自宿主。 */
+.fs-native-btn{flex:none}
+.fs-native-btn.fs-native-danger{color:var(--status-error)}
+/* 白字主按钮使用稍深的蓝，确保浅色宿主中仍有足够对比度。 */
+.fs .fs-native-btn.fs-native-primary:not(:disabled){background:#4663f3;color:#fff}
+@media (hover:hover){.fs .fs-native-btn.fs-native-primary:hover:not(:disabled){background:#3b57e7}}
+.fs-native-switch[aria-checked=true]{background:var(--accent)}
+
 /* Button（sm）：outline / primary / ghost / danger */
-.fs-btn{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:4px;height:26px;padding:0 10px;border:0;border-radius:6px;background:transparent;box-shadow:inset 0 0 0 1px var(--fs-line-strong);color:var(--fg-primary);font-size:12px;line-height:18px;white-space:nowrap;cursor:pointer}
+.fs-btn{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:4px;height:28px;padding:0 10px;border:0;border-radius:6px;background:transparent;box-shadow:inset 0 0 0 1px var(--fs-line-strong);color:var(--fg-primary);font-size:12px;line-height:18px;white-space:nowrap;cursor:pointer}
 .fs-btn.primary{box-shadow:none;background:var(--accent);color:var(--fg-on-accent)}
 .fs-btn.ghost{box-shadow:none;color:var(--fg-secondary)}
 .fs-btn.danger{color:var(--status-error)}
@@ -278,7 +290,7 @@ summary.fs-step-head>svg{flex:none;color:var(--fg-tertiary);transform:rotate(-90
 
 /* 窄容器：侧栏变顶部横条，详情面板落到下方 */
 @container (max-width:720px){
-  .fs,.fs.has-detail,.fs.nav-collapsed{grid-template-columns:minmax(0,1fr)}
+  .fs,.fs.has-detail,.fs.nav-collapsed{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
   .fs-side{position:sticky;top:0;z-index:4;padding:6px;border-right:0;border-bottom:1px solid var(--fs-line);border-radius:12px 12px 0 0}
   .fs-side-inner{position:static;flex-direction:row;align-items:center;gap:6px;min-height:0}
   .fs-main-head{position:static;height:28px;margin-top:0;padding-top:0;padding-bottom:10px}
@@ -289,8 +301,6 @@ summary.fs-step-head>svg{flex:none;color:var(--fg-tertiary);transform:rotate(-90
   .fs-tab-key{display:none}
   .fs.nav-collapsed .fs-tab-label{display:inline}
   .fs.nav-collapsed .fs-tab{padding:0 8px}
-  .fs-side-foot{flex:none;margin:0;padding:0;border:0}
-  .fs-ver .fs-tab-label{display:none}
   .fs-main{padding:12px 14px 18px}
   .fs-group-head{height:auto;min-height:24px;flex-wrap:wrap;gap:2px 8px}
   .fs-group-head>:first-child{flex:none}
@@ -302,3 +312,103 @@ summary.fs-step-head>svg{flex:none;color:var(--fg-tertiary);transform:rotate(-90
   .fs-dock .fs-input{flex:1 1 auto;width:auto}
 }
 @media (prefers-reduced-motion:reduce){summary.fs-step-head>svg{transition:none}}
+
+/* 页面层次：把长表单分成清晰、安静的工作区。 */
+.fs{--fs-side:200px}
+.fs-main{max-width:800px;padding-right:32px;padding-left:32px;gap:24px}
+.fs-pane{gap:24px}
+.fs-settings .fs-main-head{margin-top:0;padding-top:0;height:34px}
+.fs-life-overview,.fs-life-settings,.fs-model-routes{min-width:0;padding:16px;border:1px solid var(--fs-line);border-radius:10px;background:var(--bg-surface)}
+.fs-life-overview{background:var(--bg-control)}
+.fs-now{display:flex;align-items:flex-start;gap:12px;padding:0 0 16px}
+.fs-now-activity{display:flex;align-items:flex-start;gap:8px;min-width:0;flex:1 1 260px}
+.fs-now-activity .fs-dot{margin-top:5px}
+.fs-now-title{min-width:0;font-size:14px;line-height:21px;font-weight:500;overflow-wrap:anywhere}
+.fs-now-meta{flex:none;margin-left:auto;display:flex;align-items:center;gap:8px}
+.fs-schedule{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;border:0;border-radius:0;overflow:visible}
+.fs-slot{gap:4px;min-height:66px;padding:9px 10px;border:1px solid var(--fs-line);border-radius:6px;background:var(--bg-surface)}
+.fs-slot:first-child{border-left:1px solid var(--fs-line)}
+.fs-slot>span{white-space:normal;overflow-wrap:anywhere}
+.fs-slot>span:last-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
+.fs-slot[aria-current=true]{background:var(--bg-sidebar);border-color:var(--fs-line-strong);box-shadow:none}
+.fs-model-routes .fs-group-head{height:auto;min-height:32px;gap:8px 16px;flex-wrap:wrap}
+.fs-model-routes .fs-group-head>:nth-child(2){min-width:0;max-width:100%;font-weight:400;text-align:right;overflow-wrap:anywhere}
+.fs-model-routes .fs-row{min-height:42px}
+
+@container (max-width:720px){
+  .fs-main{padding:12px 14px 20px;gap:20px}
+  .fs-life-overview,.fs-life-settings,.fs-model-routes{padding:12px}
+  .fs-now-meta{margin-left:0}
+}
+/* 小高度窗口可滚动侧栏导航。 */
+.fs-side-inner{min-height:min(464px,calc(100vh - 48px));max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}
+@container (max-width:720px){.fs-side-inner{min-height:0;max-height:none;overflow:visible}}
+
+/* 官方原语适配：只补齐工作台布局，不接管组件事件。 */
+.fs-native-input-wrap{display:inline-flex;flex:0 1 240px;width:240px;min-width:0}
+.fs-native-input-wrap>.fs-native-input{width:100%;min-width:0;height:28px;padding:0 10px;border:1px solid var(--fs-line-strong);border-radius:6px;background:var(--bg-control)}
+.fs-native-input-wrap>.fs-native-input:focus-within{border-color:var(--accent)}
+.fs-native-input-wrap>.fs-native-input>input{width:100%;min-width:0;font-size:13px;line-height:20px;color:var(--fg-primary)}
+.fs-native-input-wrap>.fs-native-input>input::placeholder{color:var(--fg-tertiary);opacity:.7}
+.fs-native-input-wrap.num{flex:none;width:64px}
+.fs-native-input-wrap.num>.fs-native-input{padding:0 8px}
+.fs-native-input-wrap.num input,.fs-native-input-wrap input[inputmode=numeric]{font-family:var(--fs-mono);font-variant-numeric:tabular-nums}
+.fs-native-input-wrap.num input{text-align:center}
+.fs-native-input-wrap.wide,.fs-row.stack .fs-native-input-wrap:not(.num){flex:1 1 auto;width:100%}
+.fs-affix .fs-native-input-wrap{flex:1 1 auto;width:100%}
+.fs-affix .fs-native-input-wrap>.fs-native-input{padding-right:36px}
+.fs-dock .fs-native-input-wrap{flex:1 1 auto;width:auto}
+.fs-dock .fs-native-input-wrap>.fs-native-input{border-color:transparent;background:transparent}
+.fs-native-icon{width:24px;height:24px;padding:0}
+.fs-native-tag-wrap{display:inline-flex;min-width:0}
+.fs-native-tag{gap:4px;font-family:var(--fs-mono);font-variant-numeric:tabular-nums}
+.fs-native-tag>button{display:inline-flex;padding:0;border:0;background:none;color:inherit;cursor:pointer}
+.fs-native-check.label-hidden>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+@container (max-width:720px){.fs-native-input-wrap:not(.num){flex:1 1 100%;width:100%}.fs-dock .fs-native-input-wrap{flex:1 1 auto;width:auto}}
+
+.fs-onboarding-dot{display:inline-flex;flex:none}
+.fs-native-tag .fs-icon-btn,.fs-tag .fs-icon-btn{width:16px;height:16px;min-width:16px;padding:0}
+
+/* 主页面：单层横向导航，与宿主侧栏分工；设置页布局保持不变。 */
+.fs.fs-standalone,.fs.fs-standalone.has-detail{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
+.fs-standalone .fs-side{position:sticky;top:0;z-index:4;align-self:start;min-width:0;padding:7px 12px;border-right:0;border-bottom:1px solid var(--fs-line);border-radius:12px 12px 0 0;background:var(--bg-surface)}
+.fs-standalone .fs-side-inner{position:static;display:flex;flex-direction:row;align-items:center;gap:14px;min-height:0;max-height:none;overflow:visible}
+.fs-standalone .fs-side-head{height:32px;margin:0;padding:0 4px;flex:none}
+.fs-standalone .fs-nav{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;flex-wrap:nowrap;gap:3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
+.fs-standalone .fs-nav::-webkit-scrollbar{display:none}
+.fs-standalone .fs-tab{flex:none;height:32px;padding:0 10px;gap:6px}
+.fs-standalone .fs-tab-key{display:none}
+.fs-standalone .fs-main-head{position:static;height:34px;margin-top:0;padding-top:0;padding-bottom:10px}
+.fs-update-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--status-warn)}
+@container (max-width:720px){
+  .fs-standalone .fs-side{padding:6px}
+  .fs-standalone .fs-side-inner{gap:6px}
+  .fs-standalone .fs-side-head{padding:0 2px}
+  .fs-standalone .fs-tab{padding:0 8px}
+}
+
+/* 两级导航：分类和对应页面一起吸顶，内容独立滚动。 */
+.fs.fs-standalone,.fs.fs-settings,.fs.fs-standalone.has-detail,.fs.fs-settings.has-detail{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
+.fs.fs-standalone .fs-side,.fs.fs-settings .fs-side{position:sticky;top:0;z-index:4;align-self:start;min-width:0;padding:0 16px;border-right:0;border-bottom:1px solid var(--fs-line);border-radius:12px 12px 0 0;background:var(--bg-surface)}
+.fs.fs-standalone .fs-side-inner,.fs.fs-settings .fs-side-inner{position:static;display:block;min-height:0;max-height:none;overflow:visible}
+.fs-group-row{display:flex;align-items:center;gap:18px;min-width:0;height:48px;border-bottom:1px solid var(--fs-line)}
+.fs-group-row .fs-brand{flex:none;padding:0 2px;font-size:14px}
+.fs-group-nav{display:flex;align-self:stretch;align-items:stretch;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
+.fs-group-nav::-webkit-scrollbar{display:none}
+.fs-group-tab{display:inline-flex;position:relative;flex:none;align-items:center;gap:6px;height:100%;padding:0 8px;border:0;background:transparent;color:var(--fg-secondary);font:inherit;white-space:nowrap;cursor:pointer}
+.fs-group-tab[aria-pressed=true]{color:var(--fg-primary);font-weight:600}
+.fs-group-tab[aria-pressed=true]::after{content:"";position:absolute;right:8px;bottom:0;left:8px;height:2px;border-radius:2px;background:var(--fg-primary)}
+@media (hover:hover){.fs-group-tab:hover{color:var(--fg-primary)}}
+.fs-subnav-row{display:flex;align-items:center;min-width:0;min-height:44px}
+.fs.fs-standalone .fs-nav,.fs.fs-settings .fs-nav{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
+.fs.fs-standalone .fs-nav::-webkit-scrollbar,.fs.fs-settings .fs-nav::-webkit-scrollbar{display:none}
+.fs.fs-standalone .fs-tab,.fs.fs-settings .fs-tab{flex:none;height:28px;padding:0 10px;gap:6px;border-radius:999px}
+.fs.fs-standalone .fs-tab-key,.fs.fs-settings .fs-tab-key{display:none}
+.fs.fs-standalone .fs-main-head,.fs.fs-settings .fs-main-head{position:static;height:34px;margin-top:0;padding-top:0;padding-bottom:10px}
+@container (max-width:720px){
+  .fs.fs-standalone .fs-side,.fs.fs-settings .fs-side{padding:0 12px}
+  .fs-group-row{height:44px;gap:8px}
+  .fs-group-nav{gap:2px}
+  .fs-group-tab{padding:0 8px}
+  .fs-subnav-row{min-height:42px}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-fish-soul",
-  "version": "0.15.2",
-  "description": "鱼 · 人格、按人记忆（可纠正、有印象、能导入旧聊天记录）、日程自走与主动开口，直连 SnowLuma 收发 QQ（群里会自己插话），B站 / 抖音小号私信与自己刷视频；按功能选模型并统计用量花费，能听会说 QQ 语音、收藏表情包、学群里的梗，可选上网查；心情影响说话、去 AI 味、每个群的设定、按聊天选模型、每晚写日记（DSH 插件，单角色 feiyu ，v0.15.2） ",
+  "version": "0.15.3",
+  "description": "鱼 · 人格、按人记忆（可纠正、有印象、能导入旧聊天记录）、日程自走与主动开口，直连 SnowLuma 收发 QQ（群里会自己插话），B站 / 抖音小号私信与自己刷视频；按功能选模型并统计用量花费，能听会说 QQ 语音、收藏表情包、学群里的梗，可选上网查；心情影响说话、去 AI 味、每个群的设定、按聊天选模型、每晚写日记（DSH 插件，单角色 feiyu ，v0.15.3） ",
   "type": "module",
   "main": "./lib/index.js",
   "files": [
@@ -57,7 +57,8 @@
         "slots"
       ],
       "external": [
-        "react"
+        "react",
+        "@deepseek-ai/dsh-client-ui-primitives"
       ]
     }
   },