@cxyhhhhh/dsh-qqbot 0.5.0-dev.202610101632 → 0.5.0-dev.202610101921

package/lib/client.js

@@ -5,81 +5,148 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react = require("react");
+		//#region src/shared/bind-protocol.ts
+		/**
+		* 端内绑定协议 —— 宿主路由与客户端面板的共享契约
+		*
+		* 类型与路径常量的唯一事实源：宿主（setup/bind-routes.ts）与浏览器
+		* （client/bind-page.ts）各自 import，杜绝两端协议漂移。
+		* 本模块必须保持纯类型 + 纯常量（零 node 依赖、零副作用）：
+		* 客户端 tsdown 构建会将其内联进 bundle。
+		*/
+		/** 状态查询（绑定页轮询） */
+		const BIND_STATE_PATH = "/qqbot/im-qqbot/bind";
+		/** 刷新二维码（绑定页按钮） */
+		const BIND_REFRESH_PATH = "/qqbot/im-qqbot/bind/refresh";
+		/** 手动填写/编辑凭据（绑定页表单） */
+		const BIND_MANUAL_PATH = "/qqbot/im-qqbot/bind/manual";
+		/** 解绑：移除已保存凭据，回到绑定流程 */
+		const BIND_UNBIND_PATH = "/qqbot/im-qqbot/bind/unbind";
+		/** 配置读写（设置面板表单） */
+		const BIND_CONFIG_PATH = "/qqbot/im-qqbot/config";
+		//#endregion
 		//#region src/client/bind-page.ts
 		/**
-		* 端内绑定面板 — 二维码展示与状态轮询
+		* 端内绑定面板 — 扫码 / 手动填写 / 已绑定编辑
+		*
+		* 宿主插件注册 /qqbot/im-qqbot/bind 路由（待绑定与已绑定 fiber 均常驻）：
+		* - 未绑定：waiting（二维码）/ starting / saving / failed 相位 + manual 提交
+		* - 已绑定：bound 相位（回显脱敏 appId，secret 不回传）+ manual 更换 + 解绑
+		* 扫码成功或手动保存均写入 profile patch 并经 HMR 重载生效。
 		*
-		* 宿主插件在「待绑定」时注册 /qqbot/im-qqbot/bind 状态路由，本组件
-		* 轮询该路由渲染二维码与实时状态；扫码成功后宿主写入 profile 并经
-		* HMR 重载，路由随之消失（404），页面显示完成态。
+		* 样式为注入式 CSS 类（imqb-* 命名空间，随面板挂载注入一次）：
+		* hover/过渡/focus 样式无法用 inline style 表达，统一走类；
+		* 颜色尽量取 DSW 主题变量（--dsw-alias-*），缺省值兜底。
 		*
 		* 同一组件复用于两种展示位（侧栏绑定页 / 设置页 QQ Bot 栏目）。
 		* 运行时仅依赖 react（dsh 客户端平台种子表提供）；宿主通信走同源 fetch，
 		* Desktop 下由壳的 IPC 桥自动附加 Host 认证转发。
 		*/
-		/** 状态查询路由（宿主 bind-routes 注册） */
-		const BIND_STATE_URL = "/qqbot/im-qqbot/bind";
-		/** 刷新路由 */
-		const BIND_REFRESH_URL = "/qqbot/im-qqbot/bind/refresh";
 		/** 轮询间隔（毫秒）：活跃轮询 / 失败退避 */
 		const ACTIVE_POLL_MS = 2e3;
 		const RETRY_POLL_MS = 3e3;
-		/** 面板容器（设置页 / 侧栏通用） */
-		const CONTAINER = {
-			display: "flex",
-			flexDirection: "column",
-			alignItems: "center",
-			justifyContent: "center",
-			gap: "14px",
-			padding: "24px",
-			minHeight: "320px",
-			textAlign: "center",
-			fontSize: "14px"
-		};
-		const QR_IMAGE = {
-			borderRadius: "8px",
-			background: "#fff",
-			padding: "10px",
-			maxWidth: "100%"
-		};
-		const TITLE = {
-			margin: 0,
-			fontSize: "16px",
-			fontWeight: 600
-		};
-		const HINT = {
-			margin: 0,
-			opacity: .75,
-			lineHeight: 1.6
-		};
-		const LINK = {
-			fontSize: "13px",
-			opacity: .85
-		};
-		const BUTTON = {
-			padding: "6px 16px",
-			borderRadius: "6px",
-			border: "1px solid currentColor",
-			background: "transparent",
-			color: "inherit",
-			cursor: "pointer",
-			fontSize: "13px"
-		};
-		const STATUS_ICON = {
-			fontSize: "32px",
-			lineHeight: 1
-		};
+		/** 样式注入标记（幂等） */
+		const STYLE_ID$1 = "im-qqbot-bind-panel-styles";
+		/**
+		* 注入面板样式（一次）。交互态（hover/active/focus）无法用 inline style
+		* 表达，统一收敛到类；DSW 主题变量缺失时用中性值兜底。
+		*/
+		function usePanelStyles() {
+			(0, react.useEffect)(() => {
+				if (typeof document === "undefined") return;
+				if (document.getElementById(STYLE_ID$1) !== null) return;
+				const style = document.createElement("style");
+				style.id = STYLE_ID$1;
+				style.textContent = `
+.imqb-panel {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 14px; padding: 24px; min-height: 320px; text-align: center; font-size: 14px;
+}
+.imqb-title { margin: 0; font-size: 16px; font-weight: 600; }
+.imqb-hint { margin: 0; opacity: 0.75; line-height: 1.6; }
+.imqb-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
+.imqb-link { font-size: 13px; opacity: 0.85; color: var(--dsw-alias-brand, #4d6bfe); text-decoration: none; }
+.imqb-link:hover { text-decoration: underline; }
+.imqb-icon { font-size: 32px; line-height: 1; }
+.imqb-qr { border-radius: 10px; background: #fff; padding: 10px; max-width: 100%; }
+.imqb-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
+.imqb-btn, .imqb-pill {
+  font: inherit; cursor: pointer; color: inherit;
+  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
+}
+.imqb-btn:disabled, .imqb-pill:disabled { opacity: 0.5; cursor: default; }
+.imqb-btn {
+  padding: 7px 18px; border-radius: 8px; font-size: 13px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.4));
+  background: transparent;
+}
+.imqb-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128, 128, 128, 0.12)); }
+.imqb-btn--primary {
+  border-color: transparent;
+  background: var(--dsw-alias-brand, #4d6bfe); color: #fff; font-weight: 500;
+}
+.imqb-btn--primary:hover:not(:disabled) { background: var(--dsw-alias-brand-strong, #3b5cf0); }
+.imqb-btn--danger { color: var(--dsw-alias-danger, #f26d6d); border-color: var(--dsw-alias-danger, rgba(242, 109, 109, 0.5)); }
+.imqb-btn--danger:hover:not(:disabled) { background: var(--dsw-alias-danger, rgba(242, 109, 109, 0.12)); }
+.imqb-ghost {
+  border: none; background: transparent; opacity: 0.65; padding: 4px 8px;
+  font: inherit; font-size: 13px; cursor: pointer; color: inherit;
+}
+.imqb-ghost:hover { opacity: 1; text-decoration: underline; }
+.imqb-pill {
+  padding: 5px 16px; border-radius: 999px; font-size: 13px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.4)); background: transparent;
+}
+.imqb-pill:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128, 128, 128, 0.12)); }
+.imqb-btn:focus-visible, .imqb-pill:focus-visible, .imqb-input:focus-visible, .imqb-ghost:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand, #4d6bfe); outline-offset: 1px;
+}
+.imqb-form { display: flex; flex-direction: column; gap: 12px; width: min(320px, 100%); box-sizing: border-box; }
+.imqb-field { display: flex; flex-direction: column; gap: 5px; text-align: left; font-size: 13px; }
+.imqb-input {
+  padding: 8px 10px; border-radius: 8px; box-sizing: border-box; width: 100%;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.4));
+  background: var(--dsw-alias-bg-input, rgba(128, 128, 128, 0.08));
+  color: inherit; font: inherit; font-size: 13px; outline: none;
+}
+.imqb-input:focus { border-color: var(--dsw-alias-brand, #4d6bfe); }
+.imqb-error { margin: 0; font-size: 12px; color: var(--dsw-alias-danger, #f26d6d); }
+/* 紧凑状态视图（已绑定 / 过渡态）：设置行风格，无居中大卡留白 */
+.imqb-status { display: flex; flex-direction: column; text-align: left; font-size: 14px; }
+.imqb-status-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
+.imqb-status-icon { font-size: 24px; line-height: 1; flex: none; }
+.imqb-qqicon {
+  flex: none; display: block; border-radius: 8px;
+  background: #fff; /* 深色企鹅 logo 需浅底，暗色主题下保持可见 */
+}
+.imqb-status-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.imqb-status-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
+.imqb-status-sub { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-tertiary, inherit); opacity: .85; }
+.imqb-status-actions { display: flex; align-items: center; gap: 8px; padding: 4px 0 12px; }
+    `;
+				document.head.appendChild(style);
+				return () => {
+					style.remove();
+				};
+			}, []);
+		}
 		/**
 		* 绑定状态轮询 hook。
 		*
+		* 404 语义分两种：从未拿到过路由 = 插件未启用（终态）；
+		* 曾经拿到过 = HMR 重载窗口期（manual/unbind 保存后路由短暂消失），
+		* 低频等待恢复而不是判定终态——否则保存成功提示会被
+		* 「插件未启用」覆盖且无法自愈。
+		*
 		* @returns 轮询快照：state 为宿主相位（null = 加载中），gone 表示
-		*          路由已消失（已绑定并重载，或插件未启用）。
+		*          插件未启用（从未注册过路由）。
 		*/
 		function useBindState() {
 			const [state, setState] = (0, react.useState)(null);
 			const [gone, setGone] = (0, react.useState)(false);
 			(0, react.useEffect)(() => {
 				let stopped = false;
+				let sawRoute = false;
 				let timer;
 				const schedule = (ms) => {
 					timer = setTimeout(() => {
@@ -89,19 +156,21 @@ window.__ModuleLoader__.load({
 				const tick = async () => {
 					if (stopped) return;
 					try {
-						const res = await fetch(BIND_STATE_URL, { cache: "no-store" });
+						const res = await fetch(BIND_STATE_PATH, { cache: "no-store" });
 						if (res.status === 404) {
-							if (!stopped) setGone(true);
+							if (!stopped && !sawRoute) setGone(true);
+							if (!stopped && sawRoute) schedule(1e4);
 							return;
 						}
 						if (!res.ok) {
 							schedule(RETRY_POLL_MS);
 							return;
 						}
+						sawRoute = true;
 						const body = await res.json();
 						if (stopped) return;
 						setState(body);
-						schedule(body.phase === "saving" ? 500 : ACTIVE_POLL_MS);
+						schedule(body.phase === "saving" ? 500 : body.phase === "bound" ? 3e4 : ACTIVE_POLL_MS);
 						return;
 					} catch {}
 					schedule(RETRY_POLL_MS);
@@ -117,42 +186,610 @@ window.__ModuleLoader__.load({
 				gone
 			};
 		}
-		/** 请求宿主刷新二维码任务 */
-		async function refreshBindTask() {
+		/** 手动提交凭据（填写 / 更换共用） */
+		async function submitManualCredentials(appId, appSecret) {
 			try {
-				await fetch(BIND_REFRESH_URL, { method: "POST" });
+				const res = await fetch(BIND_MANUAL_PATH, {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({
+						appId,
+						appSecret
+					})
+				});
+				const body = await res.json().catch(() => ({}));
+				if (res.ok && body.ok) return {
+					ok: true,
+					message: body.message
+				};
+				return {
+					ok: false,
+					error: body.error ?? `保存失败（HTTP ${res.status}）`
+				};
 			} catch (err) {
-				console.error("[im-qqbot] 刷新二维码失败", err);
+				return {
+					ok: false,
+					error: err instanceof Error ? err.message : String(err)
+				};
 			}
 		}
-		/** 依据宿主相位渲染面板主体（各展示位共用） */
-		function BindPanelBody() {
-			const { state, gone } = useBindState();
+		/**
+		* 手动凭据表单（填写 / 更换共用）。
+		*
+		* appSecret 永不回显（占位符提示），提交成功后展示保存结果；
+		* 宿主写入 profile patch 并经 HMR 重载，状态轮询随后收敛为 bound。
+		*/
+		function ManualForm({ initialAppId }) {
+			const [appId, setAppId] = (0, react.useState)(initialAppId ?? "");
+			const [appSecret, setAppSecret] = (0, react.useState)("");
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [result, setResult] = (0, react.useState)(null);
+			const submit = (0, react.useCallback)((event) => {
+				event.preventDefault();
+				if (busy) return;
+				const trimmedId = appId.trim();
+				const trimmedSecret = appSecret.trim();
+				if (trimmedId.length === 0 || trimmedSecret.length === 0) {
+					setResult({
+						ok: false,
+						error: "appId 与 appSecret 均为必填"
+					});
+					return;
+				}
+				setBusy(true);
+				submitManualCredentials(trimmedId, trimmedSecret).then((outcome) => {
+					setResult(outcome);
+					setBusy(false);
+				});
+			}, [
+				appId,
+				appSecret,
+				busy
+			]);
+			if (result !== null && result.ok) return (0, react.createElement)("div", { className: "imqb-status" }, (0, react.createElement)("div", { className: "imqb-status-row" }, (0, react.createElement)("div", { className: "imqb-status-icon" }, "✅"), (0, react.createElement)("div", { className: "imqb-status-meta" }, (0, react.createElement)("p", { className: "imqb-status-title" }, result.message ?? "凭据已保存"), (0, react.createElement)("p", { className: "imqb-status-sub" }, "插件将自动重载；稍后即可开始对话"))));
+			return (0, react.createElement)("form", {
+				className: "imqb-form",
+				onSubmit: submit
+			}, (0, react.createElement)("label", { className: "imqb-field" }, "AppID", (0, react.createElement)("input", {
+				className: "imqb-input",
+				value: appId,
+				placeholder: "QQ 机器人 AppID",
+				onChange: (event) => {
+					setAppId(event.currentTarget.value);
+				},
+				autoComplete: "off",
+				spellCheck: false
+			})), (0, react.createElement)("label", { className: "imqb-field" }, "AppSecret", (0, react.createElement)("input", {
+				className: "imqb-input",
+				type: "password",
+				value: appSecret,
+				placeholder: initialAppId === void 0 ? "QQ 机器人 AppSecret" : "输入新的 AppSecret（不回显）",
+				onChange: (event) => {
+					setAppSecret(event.currentTarget.value);
+				},
+				autoComplete: "new-password"
+			})), result !== null && !result.ok ? (0, react.createElement)("p", { className: "imqb-error" }, result.error) : null, (0, react.createElement)("button", {
+				className: "imqb-btn imqb-btn--primary",
+				type: "submit",
+				disabled: busy
+			}, busy ? "正在保存…" : "保存"));
+		}
+		/** QQ 企鹅 logo（256×256 PNG data URI；深色图案配白底圆角，明暗主题下均可见） */
+		const QQ_BOT_ICON_PNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIABAMAAAAGVsnJAAAAKlBMVEUAAAAAif8AiP8Aiv8Aif8AiP8Agv8AiP8AiP8AiP8AiP8AiP8Ah/8AiP/n+LNDAAAADXRSTlMAv2Qi36QQ70CAkM9QSlIWegAADuJJREFUeNrs3dvrDVEUB/BltjPm4MElEabIXZTLcYmUSyQ1JSK3KURuT4goU66RUvKAB6fceXBKubwpkZTygB/j9v1fCLk7M3vM2XvPXvvzB/D7rd+etfdes2ZvchzHcRzHcRzHcRzHUWvqzCPTiSv/8NoIn3UNGLue+PFPRvjuw03iZutA/GLPQ2JlW4LfdC0nRg7hLxhFYDLAOgLb8A+niYUgwj90DSMG/Bb+6T2HBUEDbSwg63kJ2kjtfwiaaOsdWa6Gb7jOBDEyvCar1ZBpKdksRqb3ZLE6PuOcBSYih5dkLYE80klkqwZyWUS2ivEZ4zToIaeDZKcGwPsZiPEdyw2BwGec54EavuG6HD6F3N6SjWJ8x3JLKCDBxtpgDd9w3RBtgYS9ZJ+JAO8sGELCC7KOgIzUvizo4Qu++6EapFwk23SHlLlkmzmQ8oZs8xxSPpJtWviOZ2k4xGect0MPIOUD2QZyUrKMD0lkGQFJtpUFAxcA8N4MuAC4ALgA8E6C7KdBwX0hxH4pTBHAuywcc98Ot/AF3x6JidxLYuyLoj0g5TbZpobPODfJeJBi35e0PsC8RSTkvQwgmsj7vQjRFt7vRol68p4EiALO1YAvQt45UKpV9hXZqBvvFEAkmKcAohbfYsBXm7h/MtMbOVl7iECL+WdztIn3E0AkEsafTH0xkWc91H0+/0OL7yLgqxrHPnF3iMrP6qwzgDtI6bPe7Y/Ssu99gNwpAneIgSbz4/TaHahoW2+c5EyQniUmQi59QS4ALgAuAC4ALgAuAC4ALgAuAC4ALgAuAC4ALgAuAC4ALgAuAC4AJKZcu4t/mLfa9nvnxKO1CdpKbb57b8qlfC0ygx+ThfyTA5HbzvO2DQN/vOxBSrdsCoF/MoK0DzetCcGUEIW8GEE22HoDhS2s/ttSf1SC/5Cuo2rbOhDSbLqN9ViC/5auoqoKzqEUCyvaPLwxRElejKYKOpmgNGn1LqT1h6NU/aha/HMo2ZJKJYIgRuleVygCQYgOeFGZZWEQoiM+VORrMi/Cf6r2zdQ//f4sI/BLIyzDCJT1/Fe1nfivvz+j2VDE+B2rCBRd/1lz0t4YKDGfDHUIJarghzXbocx1MlDvBBnsXg6IEBksnwoyE6DliXAyFOtPRvESKJYalQZECOVemJQGciYAa9PAZmhhTK08iKBFlykPQQsy7NsWyc2A9s2FQQJJltWHmpBi3UOwAVqtJM1EBFl2zQRjoNkB0qoO7U6TRn6MgtJ5a85MODH1ixOHx10bkuAPFTh+cTaKSO9dfryefjdz3NrKVQgLZcCFE/6Zt8ThtdXKg8chq2vZdGpr66gHkLWANPGADrSAi2ffQ2D6KbRNSOnK2wHvP4kqsR6sQ0o/iUdVDK/CVNiChJ2jScqU2PghUEN+6dD18m3mht9I4cedbnWdYvaNDDuQ2/71VIi4avCu0M8/Vw2iwp7kn2Ezg6xgAHTgjLxpEXK6T0r5DxR1unuRmUNgh7L2Vi80cQj4D9S19waxgRNBTWV7s4jNWwvEStu7RWzaEKgrbm8PHhi2I2jmSssHqTReZNSOoK6+gcGLTKoLTNTQyTbNoGsahZbXlrPNuZ6lgWy7qHQjTakO/lQKznlIurrJsEvFeriX3FtrtYmwD3VeS1sr73YjXhPVkWkxdchRE2bC55IJQHEaeEsSiqdAXdeEeIn2mXCT3salhvayQKw5DTU1//91ZEgPUkd5kd40OEf7y/oGMuymDhKRlhngZ35L52qwpn8aprp0aUxhCtpHCjzVtykWRjSriEjbUmATjGhXami7tTYj/7xeT0r4saalgGfKZZk90d5B6oyGIUVZoqaeZyA2pSxPdS2vSDwjSrK5hsBD6oSG9jVQ7j/GXuqE2JwBQDRR/TPgGTQAiDz180DDpAFANFH5PBCbNACIPNVrocCsAUDUVPwMdDdlDZBvLXCbytY0ZBH4Q1PpkBRm7AJyV2fS9VSumiHdOT8LVdaFnmdMOjpsUvmKKNJeCJIsDb2gUnkZhWg9ZqhbmTQy9l56eOo2RE3T5kDFP5b4n3wrxq/ou2YsyfEPX+s74EJWcummaiKs/cebmGNJgQtDNg78+m+vyghTpGhxMqdwCvTPFTn1ZlaCb+YXT4OvFO0Eh+U+X+BKkWag+YXT4As1KeB9/hNmunJOF0GUv+GipWRH2K3oKjBIiiTmpsQya5OSnrlP7J29ahtBFIX3T7IkS+AXEAhDIEUWVDjpFgTpAgKRIk1YUKc0Ar3AgqtUUZVaoBcQ5AUCJr3BP7Ijx9a7BAyBNBOy39yJb+C6lzz6dubce86MNMu9+29YJ7ZZE8W9opNzJ+c6oO1sI9dU1lKZHIiAZBg0qeeg1mTf6wEsT1ERiKEPSiuSU6zq7XenVXgRKOAKyNyS4f5L6+ZbeXgRKOEKWJGsLqvb1sfBg5qUrgCU1eX7vdwaGMoYAbgCGsSiNMe12/o8dFhdwBVQkJwiqe/t49CZwApOsRVR5szh7dkauAscB96B1+3IdLuHT+h74NxpBLTzDp3DAn5ALK3LoBNOUH/aB/+pFbYVWsIy20CzEsVu/aCtUAkjl0MinCna6yxCbpOnNHQ7IA6lRdQm6oRMRhO6IdQTFI79xZ+7pyrg9khGd6ALWQCwEB4F1MCRHgAzoIL+GjjQAyAJp4JNtwREegBEY6yCXAOvNAHIsQryOGykCUCGVZB74YEmAO6JehvqQOY20gQgGoc6LvbV+ca6AORwc4A3wiNdAGY8F4Rd9kAXgHagXDBzGwFdAJpVmDJQuLMAXQCiDTPtWFuutQEokFrzIjDRBiBGZYAXgVNtANzB4DSEE9hG2gBEFahXfF5d6QOwCnFuvOfUQH0A5q6xLkLEQRN9AGIQCvE46EwfgC4IhXAV3Eb6ADh7wfsAVfBGIQB3LziVr4I7jQCWoA7SsyEjjQAOwA4W9YITjQA64HFRg3GqEUBL3g/mziKgEUBUifvB0lUEdALYgEaAtQE7nQCWYMKybbGFTgAz0Aiw5nKiE0AMNJvVlYFOAAkYLyM61AkglU4EDpzuQieAaAw0i3yEH1oBbEAnRH4z4EErgBwMmAC91QpgDs40kwOYX7QCyEDnSnrrtVYAHdAKkkbwTCuABLSCxF4OtQJIwYjBYLaRVgDORTsQ7YRv9AIoRUOx2C9fmD8BgI1oL3zot9PSAxLqC+BcNBXs+Z28y8S/L8CX3YWoFVj4TaAp0fEjbt+4GVj6DaaDakjlpWKxqBnI/SQ1QTWkdAgHh85z4Y1fUW2iseRerVwi6oZKz4StT5bj3OugU1fUDfU9G+uclOTYawqnoifFxp7fx52R+dPyq+OVpB30pdlGr+4D2QEPrcZ0wuupOSYVeen1AEtBP9zy3mk7J115w6uKbQT9cMu7pnbIIfPm2MfM5YJ7Q4m7q+Jr4Jo0oNupN4ABAeB/7O6EDCSpcZesg54MgLa/sUjHpCNbefxqbyH4tZGGgLU8IddxJ84JwFOYtSCABb8k9DXBdjkFGYZEJBRLpCvtCtzFl5b4EvfsHwA4opemX/51Ler+ph3vSIzHBy3/Xi8r9+d3E+j/ev6fwVMDu3khZ1P3/eMneVurG02fPXJ78xELF1+38svpw7fj57V70ean4xevougJAfT0XCdiALy7twsDYADqA9Byp9RTASj+RwCJATAABsAAGAADYAAMgAEwAAbAABgAA2AADIABMAAGwAAYAANgAAyAATAABsAAGICf7N3PSxRhGAfwxxldV+2QVETQwmpRQSxsJhiEYC11E7KSAlmIUpJiDyUFgQN7kwJBOgQehE51EoKwmyBdooOH1dkWk+//UkhdpGfX9HlnnseZzx+w7D478/yYd2beNABpANIApAFIA5AGYK8qFgOQ3iaXBsB9AG6RYh2C75NrtxiAtghul/9Eikk+MNHDBlOxTu4xF8Fg/iDFKlwABPPJJik2L5i4+BeSKLYuWLs99vF5xZYjeHi6RorlBB+f99k9/RWTfKFghv8wtbKir5QM7I2DnuhRu8rWVLXaRPNWGf/2ktSqiFauAvsODbUKXO8i2lTUSa2y6H9W4fczV8qH6PzSDmtlwIPoCN8Ba2WgR3aHBQ/WsuCw7DGbhbVxqCy7y0omMJYFfQiPLznYujLeAeEBdgm2ekHxzafnwdgilcrS2811gtFQORH74Izs/5yytDgi/3U9mOoE1sFZk95tDiEpNCq//XoOhgphFyA+vhYAO6sjw4D4SkYFnFBdM5gZBcQX89rAek/KdMBBzToCwMoCWQHiRWBnHLLSC/lwUrKWwSqRKoNg1Wn/5sHaVpUG/VE4qVht4H0hRZ6Cd5ToYFnQwtXxHHh5OoAAsDARTQGO2vYl8OpqskBmFa4K9mM08ZmUuIombgpMGIxQSS/AlACRuS0TAOp7gTmhf4lPArqn4i40s0XkLgmgruAk8HNopuQ0vLhOsZuD2EHKJwHeHYrZFOA2US+hqTBPsfICMKTG9kk0F1YpRtkcmhsRufVObSJs+fuRF5szePUqCZD6/fIT2xBa2c5TLB7m0MqmZJ/BC+9TDN4EaGlB9noz70aVIjb9Ea2F0k9h8Bq3Iw3BdF8Ahvz6TTf2ZoXZFEXco/4JMJgzQPgc4IXXep07/h9fR2zVzahNkuHBqDwJycGkOkmZhEklkpKFSUUSU4BBGySnGwYtkKBVmLNNkgZhTokk+QGMkV61GYIxM/RHUrvBNdqR2Eq4QdK6YEqexC3BkC36LcmHwE4TlOBD4G8GSGwhyJMT32DEDLnhj8KEXU1g8iaCErmSKcOAXbfvJa8ULpBD56Hec9otWXnQ9c2LT6DcB3LsLFSbJdd81asktSI55ym+OtbIUwQuQa1jxElGGpilaPhKG8KfXAuYkAjwCVCep7AfqlWJl4AItLhp+dBHoOXvP+QRqFUpcllFLWGtSjHw70KJV0WKRx9UOP2A4jKg4MaJ2juKkX8RMTtVpHgN3EOMXpyj+L0+iZg8u0A6DEwgeo2VM6SH/30sQITClbdF0ubK18XxsV7nTowv9l+mVCqV+tUeHAgAAAAACPK3HmGBCgAAAAAAAAAAYAWpVR6jggdeCwAAAABJRU5ErkJggg==";
+		/** QQ 机器人图标（logo 图片，白底圆角容器内呈现） */
+		function QqBotIcon({ size = 28 }) {
+			return (0, react.createElement)("img", {
+				src: QQ_BOT_ICON_PNG,
+				alt: "QQ",
+				width: size,
+				height: size,
+				className: "imqb-qqicon"
+			});
+		}
+		/** 已绑定视图：回显 appId + 更换凭据 / 解绑入口 */
+		function BoundView({ appId }) {
+			const [editing, setEditing] = (0, react.useState)(false);
+			const [unbindResult, setUnbindResult] = (0, react.useState)(null);
+			const unbind = (0, react.useCallback)(() => {
+				if (!window.confirm("确定解绑吗？\n解绑后机器人立即下线，插件将重新进入扫码绑定流程。")) return;
+				fetch(BIND_UNBIND_PATH, { method: "POST" }).then(async (res) => {
+					const body = await res.json().catch(() => ({}));
+					if (res.ok && body.ok === true) {
+						setUnbindResult({
+							ok: true,
+							message: body.message ?? "已解绑，插件将重载并重新进入绑定流程"
+						});
+						return;
+					}
+					setUnbindResult({
+						ok: false,
+						message: body.error ?? `解绑失败（HTTP ${res.status}）`
+					});
+				}).catch((err) => {
+					setUnbindResult({
+						ok: false,
+						message: err instanceof Error ? err.message : String(err)
+					});
+				});
+			}, []);
+			if (unbindResult !== null) return (0, react.createElement)("div", { className: "imqb-status" }, (0, react.createElement)("div", { className: "imqb-status-row" }, (0, react.createElement)("div", { className: "imqb-status-icon" }, unbindResult.ok ? "👋" : "⚠️"), (0, react.createElement)("div", { className: "imqb-status-meta" }, (0, react.createElement)("p", { className: "imqb-status-title" }, unbindResult.message))));
+			if (editing) return (0, react.createElement)("div", { className: "imqb-status" }, (0, react.createElement)("div", { className: "imqb-status-row" }, (0, react.createElement)("div", { className: "imqb-status-meta" }, (0, react.createElement)("p", { className: "imqb-status-title" }, "更换凭据")), (0, react.createElement)("button", {
+				className: "imqb-ghost",
+				onClick: () => {
+					setEditing(false);
+				}
+			}, "返回")), (0, react.createElement)(ManualForm, { initialAppId: appId }));
+			return (0, react.createElement)("div", { className: "imqb-status" }, (0, react.createElement)("div", { className: "imqb-status-row" }, (0, react.createElement)(QqBotIcon, { size: 28 }), (0, react.createElement)("div", { className: "imqb-status-meta" }, (0, react.createElement)("p", { className: "imqb-status-title" }, "已绑定"), (0, react.createElement)("p", { className: "imqb-status-sub imqb-mono" }, `AppID ${appId} · 私聊与群聊已接入`))), (0, react.createElement)("div", { className: "imqb-status-actions" }, (0, react.createElement)("button", {
+				className: "imqb-btn imqb-btn--primary",
+				onClick: () => {
+					setEditing(true);
+				}
+			}, "更换凭据"), (0, react.createElement)("button", {
+				className: "imqb-btn imqb-btn--danger",
+				onClick: unbind
+			}, "解绑")));
+		}
+		/** 未绑定视图：扫码 / 手动填写切换 */
+		function UnboundView({ state }) {
+			const [mode, setMode] = (0, react.useState)("qr");
 			const refresh = (0, react.useCallback)(() => {
-				refreshBindTask();
+				fetch(BIND_REFRESH_PATH, { method: "POST" }).catch(() => {});
 			}, []);
-			if (gone) return (0, react.createElement)("div", { style: CONTAINER }, (0, react.createElement)("div", { style: STATUS_ICON }, "✅"), (0, react.createElement)("p", { style: HINT }, "绑定已完成，或插件未启用。"));
-			if (state === null || state.phase === "starting") return (0, react.createElement)("div", { style: CONTAINER }, (0, react.createElement)("p", { style: HINT }, "正在生成二维码…"));
-			if (state.phase === "saving") return (0, react.createElement)("div", { style: CONTAINER }, (0, react.createElement)("div", { style: STATUS_ICON }, "🎉"), (0, react.createElement)("p", { style: TITLE }, "扫码成功"), (0, react.createElement)("p", { style: HINT }, "凭据已保存，插件正在重载，稍后即可开始对话。"));
-			if (state.phase === "failed") return (0, react.createElement)("div", { style: CONTAINER }, (0, react.createElement)("div", { style: STATUS_ICON }, "⚠️"), (0, react.createElement)("p", { style: TITLE }, "绑定失败"), (0, react.createElement)("p", { style: HINT }, state.reason), (0, react.createElement)("button", {
-				style: BUTTON,
-				onClick: refresh
-			}, "重试"));
-			return (0, react.createElement)("div", { style: CONTAINER }, state.qrSvg === void 0 ? null : (0, react.createElement)("img", {
+			if (mode === "manual") return (0, react.createElement)("div", { className: "imqb-panel" }, (0, react.createElement)("p", { className: "imqb-title" }, "手动填写凭据"), (0, react.createElement)(ManualForm, {}), (0, react.createElement)("button", {
+				className: "imqb-ghost",
+				onClick: () => {
+					setMode("qr");
+				}
+			}, "改用扫码绑定"));
+			return (0, react.createElement)("div", { className: "imqb-panel" }, state.qrSvg === void 0 ? null : (0, react.createElement)("img", {
 				src: state.qrSvg,
 				alt: "QQ 扫码二维码",
 				width: 220,
 				height: 220,
-				style: QR_IMAGE
-			}), (0, react.createElement)("p", { style: TITLE }, "QQ Bot 绑定"), (0, react.createElement)("p", { style: HINT }, "请使用手机 QQ 扫描上方二维码，完成机器人绑定"), (0, react.createElement)("a", {
+				className: "imqb-qr"
+			}), (0, react.createElement)("p", { className: "imqb-title" }, "扫码绑定 QQ 机器人"), (0, react.createElement)("p", { className: "imqb-hint" }, "使用手机 QQ 扫描二维码完成绑定"), (0, react.createElement)("a", {
 				href: state.url,
 				target: "_blank",
 				rel: "noreferrer noopener",
-				style: LINK
-			}, "在浏览器中打开扫码页"), (0, react.createElement)("button", {
-				style: BUTTON,
+				className: "imqb-link"
+			}, "二维码显示异常？在浏览器中打开"), (0, react.createElement)("div", { className: "imqb-row" }, (0, react.createElement)("button", {
+				className: "imqb-pill",
 				onClick: refresh
-			}, "刷新二维码"));
+			}, "刷新二维码"), (0, react.createElement)("button", {
+				className: "imqb-pill",
+				onClick: () => {
+					setMode("manual");
+				}
+			}, "手动填写")));
+		}
+		/** 依据宿主相位渲染面板主体（各展示位共用） */
+		function BindPanelBody() {
+			usePanelStyles();
+			const { state, gone } = useBindState();
+			if (gone) return (0, react.createElement)("div", { className: "imqb-panel" }, (0, react.createElement)("div", { className: "imqb-icon" }, "❔"), (0, react.createElement)("p", { className: "imqb-hint" }, "插件未启用，或当前版本不支持端内配置"));
+			if (state === null || state.phase === "starting") return (0, react.createElement)("div", { className: "imqb-panel" }, (0, react.createElement)("p", { className: "imqb-hint" }, "正在获取绑定状态…"));
+			if (state.phase === "saving") return (0, react.createElement)("div", { className: "imqb-status" }, (0, react.createElement)("div", { className: "imqb-status-row" }, (0, react.createElement)("div", { className: "imqb-status-icon" }, "🎉"), (0, react.createElement)("div", { className: "imqb-status-meta" }, (0, react.createElement)("p", { className: "imqb-status-title" }, "扫码成功"), (0, react.createElement)("p", { className: "imqb-status-sub" }, "凭据已保存，插件正在重载，稍后即可开始对话"))));
+			if (state.phase === "failed") return (0, react.createElement)("div", { className: "imqb-panel" }, (0, react.createElement)("div", { className: "imqb-icon" }, "⚠️"), (0, react.createElement)("p", { className: "imqb-title" }, "绑定失败"), (0, react.createElement)("p", { className: "imqb-hint" }, state.reason), (0, react.createElement)("div", { className: "imqb-row" }, (0, react.createElement)("button", {
+				className: "imqb-btn imqb-btn--primary",
+				onClick: () => {
+					window.location.reload();
+				}
+			}, "重试")));
+			if (state.phase === "bound") return (0, react.createElement)(BoundView, { appId: state.appId });
+			return (0, react.createElement)(UnboundView, { state });
+		}
+		//#endregion
+		//#region src/client/config-panel.ts
+		/**
+		* QQ 机器人配置面板 — 必要配置的 UI 编辑
+		*
+		* UI 复刻 DSW 通用设置（settings-form 原语）的视觉风格：
+		* 左对齐设置列、0.5px 行分隔、label 13px/500、控件右置；
+		* Switch 为 36×20 aria-checked 结构（thumb translateX 动画）；
+		* 三值选择用分段控件（滑动指示器按段数/索引的 CSS 变量定位）；
+		* 保存按钮为 DSW 反色主按钮（label-primary 底 + bg-layer-3 字）。
+		*
+		* 数据流：GET /qqbot/im-qqbot/config 回显当前生效配置（appSecret
+		* 已由宿主剔除）→ 表单编辑 → dirty diff → POST 仅提交变更键 →
+		* 宿主白名单 + Schema 校验 → 最小写入 profile patch → HMR 重载生效。
+		*
+		* 字段策略：只开放用户必要的配置；cwd 只读展示；超时与性能调优
+		* 类字段走 profile patch / 环境变量。
+		*/
+		/** 样式注入标记（幂等） */
+		const STYLE_ID = "im-qqbot-config-panel-styles";
+		/** DSW 通用设置风格（settings-form / Switch / SegmentedControl 原语复刻） */
+		function useConfigPanelStyles() {
+			(0, react.useEffect)(() => {
+				if (typeof document === "undefined") return;
+				if (document.getElementById(STYLE_ID) !== null) return;
+				const style = document.createElement("style");
+				style.id = STYLE_ID;
+				style.textContent = `
+.imqb2-form { display: flex; flex-direction: column; width: 100%; }
+.imqb2-group-title {
+  padding: 14px 0 2px; font-size: 12px; font-weight: 600; line-height: 18px;
+  color: var(--dsw-alias-label-tertiary); text-transform: uppercase; letter-spacing: .04em;
+}
+.imqb2-field { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
+.imqb2-field + .imqb2-field { border-top: 0.5px solid var(--dsw-alias-border-l2); }
+.imqb2-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
+.imqb2-label {
+  flex: 1; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+.imqb2-help { margin: 0; font-size: 12px; line-height: 1.6; color: var(--dsw-alias-label-secondary); }
+.imqb2-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-tertiary); }
+/* Switch（aria-checked 驱动，视觉态与无障碍态同源） */
+.imqb2-switch {
+  box-sizing: border-box; position: relative; flex: 0 0 auto;
+  width: 36px; height: 20px; padding: 2px; border: 0; border-radius: 999px;
+  background: var(--dsw-alias-border-l3); cursor: pointer; font: inherit;
+}
+.imqb2-switch[aria-checked='true'] { background: var(--dsw-alias-brand-primary); }
+.imqb2-switch:disabled { cursor: default; opacity: 0.5; }
+.imqb2-switch:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+.imqb2-switch-thumb {
+  display: block; width: 16px; height: 16px; border-radius: 50%;
+  background: var(--dsw-alias-switch-thumb, #ffffff);
+  transition: transform 120ms ease;
+}
+.imqb2-switch[aria-checked='true'] .imqb2-switch-thumb {
+  background: var(--dsw-alias-label-primary-foreground, #ffffff);
+  transform: translateX(16px);
+}
+/* 输入（官方 fields.input 复刻） */
+.imqb2-input {
+  box-sizing: border-box; width: 100%; height: 34px; padding: 0 12px;
+  border: 0.5px solid var(--dsw-alias-border-l4); border-radius: var(--dsw-radius-md, 8px);
+  background: var(--dsw-alias-bg-layer-3); font: inherit; font-size: 13px; line-height: 1.5;
+  color: var(--dsw-alias-label-primary); outline: none;
+}
+.imqb2-input:focus { outline: none; border-color: var(--dsw-alias-state-business-primary); }
+.imqb2-input:disabled { color: var(--dsw-alias-label-tertiary); cursor: default; }
+.imqb2-textarea { height: auto; min-height: 68px; padding: 8px 12px; resize: vertical; line-height: 1.5; }
+/* 分段控件（官方 SegmentedControl 复刻：指示器按段数/索引定位） */
+.imqb2-seg {
+  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
+  gap: 2px; padding: 4px; border-radius: var(--dsw-radius-md, 8px);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+.imqb2-seg-indicator {
+  position: absolute; top: 4px; left: 4px;
+  width: calc((100% - 8px - 2px * (var(--imqb2-seg-count) - 1)) / var(--imqb2-seg-count));
+  height: calc(100% - 8px);
+  border: 0; border-radius: var(--dsw-radius-sm, 6px);
+  background: var(--dsw-alias-bg-layer-1);
+  box-shadow: var(--dsw-elevation-soft, 0 1px 3px rgba(0,0,0,.08));
+  transform: translateX(calc(var(--imqb2-seg-index) * (100% + 2px)));
+  transition: transform 160ms ease;
+  pointer-events: none;
+}
+.imqb2-seg-tab {
+  box-sizing: border-box; position: relative; z-index: 1; height: 28px; padding: 0 16px;
+  border: 0; border-radius: var(--dsw-radius-sm, 6px); background: transparent;
+  color: var(--dsw-alias-label-secondary); font: inherit; font-size: 13px; line-height: 20px;
+  font-weight: 500; white-space: nowrap; cursor: pointer; transition: color 120ms ease;
+}
+.imqb2-seg-tab:hover, .imqb2-seg-tab[aria-selected='true'] { color: var(--dsw-alias-label-primary); }
+.imqb2-seg-tab:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: -2px;
+}
+/* 底栏（官方 SettingsForm.footer 复刻） */
+.imqb2-footer { display: flex; align-items: center; gap: 8px; padding-top: 16px; }
+.imqb2-note { flex: 1; min-width: 0; margin: 0; font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-tertiary); }
+.imqb2-note--error { color: var(--dsw-alias-state-error-primary, var(--dsw-alias-label-error)); }
+.imqb2-note--ok { color: var(--dsw-alias-label-secondary); }
+.imqb2-save {
+  appearance: none; flex: none; border: 1px solid transparent;
+  border-radius: var(--dsw-radius-md, 8px); padding: 5px 14px;
+  font: inherit; font-size: 13px; line-height: 1.5; cursor: pointer;
+  background: var(--dsw-alias-label-primary); color: var(--dsw-alias-bg-layer-3);
+}
+.imqb2-save:disabled { opacity: 0.4; cursor: default; }
+.imqb2-save:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 1px;
+}
+/* cwd 只读行 */
+.imqb2-readonly { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--dsw-alias-label-secondary); word-break: break-all; margin: 0; }
+    `;
+				document.head.appendChild(style);
+				return () => {
+					style.remove();
+				};
+			}, []);
+		}
+		/** 开关（官方 Switch 原语结构：aria-checked 驱动视觉态） */
+		function Switch({ checked, label, onChange }) {
+			return (0, react.createElement)("button", {
+				type: "button",
+				role: "switch",
+				"aria-checked": checked,
+				"aria-label": label,
+				className: "imqb2-switch",
+				onClick: () => {
+					onChange(!checked);
+				}
+			}, (0, react.createElement)("span", { className: "imqb2-switch-thumb" }));
+		}
+		/** 访问模式分段选择（官方 SegmentedControl 结构：CSS 变量定位滑动指示器） */
+		function Segmented({ value, options, onChange, label }) {
+			const index = Math.max(0, options.findIndex((o) => o.value === value));
+			const trackStyle = {
+				"--imqb2-seg-count": options.length,
+				"--imqb2-seg-index": index
+			};
+			return (0, react.createElement)("div", {
+				className: "imqb2-seg",
+				role: "tablist",
+				"aria-label": label,
+				style: trackStyle
+			}, (0, react.createElement)("span", { className: "imqb2-seg-indicator" }), options.map((o) => (0, react.createElement)("button", {
+				key: o.value,
+				type: "button",
+				role: "tab",
+				"aria-selected": o.value === value,
+				className: "imqb2-seg-tab",
+				onClick: () => {
+					onChange(o.value);
+				}
+			}, o.label)));
+		}
+		/** 开关行（label 左 + Switch 右 + 可选 help） */
+		function SwitchRow({ label, help, checked, onChange }) {
+			return (0, react.createElement)("div", { className: "imqb2-field" }, (0, react.createElement)("div", { className: "imqb2-head" }, (0, react.createElement)("span", { className: "imqb2-label" }, label), (0, react.createElement)(Switch, {
+				checked,
+				label,
+				onChange
+			})), help === void 0 ? null : (0, react.createElement)("p", { className: "imqb2-help" }, help));
+		}
+		/** 文本行（label 上 + 输入下，与官方 fields 布局一致） */
+		function FieldRow({ label, help, value, placeholder, onChange }) {
+			return (0, react.createElement)("div", { className: "imqb2-field" }, (0, react.createElement)("span", { className: "imqb2-label" }, label), (0, react.createElement)("input", {
+				className: "imqb2-input",
+				value,
+				placeholder,
+				spellCheck: false,
+				onChange: (event) => {
+					onChange(event.currentTarget.value);
+				}
+			}), help === void 0 ? null : (0, react.createElement)("p", { className: "imqb2-hint" }, help));
+		}
+		/** 多行文本行 */
+		function AreaRow({ label, help, value, rows, onChange }) {
+			return (0, react.createElement)("div", { className: "imqb2-field" }, (0, react.createElement)("span", { className: "imqb2-label" }, label), (0, react.createElement)("textarea", {
+				className: "imqb2-input imqb2-textarea",
+				value,
+				rows: rows ?? 3,
+				onChange: (event) => {
+					onChange(event.currentTarget.value);
+				}
+			}), help === void 0 ? null : (0, react.createElement)("p", { className: "imqb2-hint" }, help));
+		}
+		/** 访问模式分段选择行 */
+		function SegmentedRow({ label, help, value, options, onChange }) {
+			return (0, react.createElement)("div", { className: "imqb2-field" }, (0, react.createElement)("div", { className: "imqb2-head" }, (0, react.createElement)("span", { className: "imqb2-label" }, label), (0, react.createElement)(Segmented, {
+				value,
+				options,
+				onChange,
+				label
+			})), help === void 0 ? null : (0, react.createElement)("p", { className: "imqb2-hint" }, help));
+		}
+		const MODE_OPTIONS = [
+			{
+				value: "open",
+				label: "开放"
+			},
+			{
+				value: "allowlist",
+				label: "白名单"
+			},
+			{
+				value: "disabled",
+				label: "停用"
+			}
+		];
+		/** 深比较（表单值与初始回显值的 dirty 判断） */
+		function shallowEqual(a, b) {
+			return JSON.stringify(a) === JSON.stringify(b);
+		}
+		/**
+		* 配置面板主体。
+		*
+		* 保存仅提交变更键（服务端按白名单合并），保存成功后提示
+		* HMR 重载语义（进行中的机器人会话将重置）。
+		*/
+		function ConfigPanel() {
+			useConfigPanelStyles();
+			const [initial, setInitial] = (0, react.useState)(null);
+			const [form, setForm] = (0, react.useState)(null);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [result, setResult] = (0, react.useState)(null);
+			const [loadError, setLoadError] = (0, react.useState)(null);
+			(0, react.useEffect)(() => {
+				let stopped = false;
+				fetch(BIND_CONFIG_PATH, { cache: "no-store" }).then(async (res) => {
+					if (!res.ok) throw new Error(`HTTP ${res.status}`);
+					const body = await res.json();
+					if (stopped) return;
+					setInitial(body.config);
+					setForm(body.config);
+				}).catch((err) => {
+					if (!stopped) setLoadError(err instanceof Error ? err.message : String(err));
+				});
+				return () => {
+					stopped = true;
+				};
+			}, []);
+			const patch = (0, react.useCallback)((key, value) => {
+				setForm((current) => current === null ? current : {
+					...current,
+					[key]: value
+				});
+				setResult(null);
+			}, []);
+			const submit = (0, react.useCallback)((event) => {
+				event.preventDefault();
+				if (busy || initial === null || form === null) return;
+				const changed = {};
+				for (const key of Object.keys(form)) if (!shallowEqual(form[key], initial[key])) changed[key] = form[key];
+				if (Object.keys(changed).length === 0) return;
+				setBusy(true);
+				fetch(BIND_CONFIG_PATH, {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify(changed)
+				}).then(async (res) => {
+					const body = await res.json().catch(() => ({}));
+					if (res.ok && body.ok === true) {
+						setResult({
+							ok: true,
+							message: body.message ?? "配置已保存，插件将自动重载"
+						});
+						setInitial(form);
+						return;
+					}
+					setResult({
+						ok: false,
+						message: body.error ?? `保存失败（HTTP ${res.status}）`
+					});
+				}).catch((err) => {
+					setResult({
+						ok: false,
+						message: err instanceof Error ? err.message : String(err)
+					});
+				}).finally(() => {
+					setBusy(false);
+				});
+			}, [
+				busy,
+				form,
+				initial
+			]);
+			if (loadError !== null) return (0, react.createElement)("p", {
+				className: "imqb2-hint",
+				style: { padding: "12px 0" }
+			}, `配置加载失败：${loadError}`);
+			if (initial === null || form === null) return (0, react.createElement)("p", {
+				className: "imqb2-hint",
+				style: { padding: "12px 0" }
+			}, "正在加载配置…");
+			const dirty = Object.keys(form).some((key) => !shallowEqual(form[key], initial[key]));
+			const access = form.access ?? {
+				c2cMode: "open",
+				c2cAllow: [],
+				groupMode: "open",
+				groupAllow: []
+			};
+			return (0, react.createElement)("form", {
+				className: "imqb2-form",
+				onSubmit: submit
+			}, (0, react.createElement)("div", { className: "imqb2-group-title" }, "访问控制"), (0, react.createElement)(SegmentedRow, {
+				label: "私聊",
+				value: access.c2cMode,
+				options: MODE_OPTIONS,
+				onChange: (v) => {
+					patch("access", {
+						...access,
+						c2cMode: v
+					});
+				}
+			}), access.c2cMode === "allowlist" ? (0, react.createElement)(AreaRow, {
+				label: "私聊白名单",
+				help: "每行一个 openid",
+				rows: 3,
+				value: access.c2cAllow.join("\n"),
+				onChange: (v) => {
+					patch("access", {
+						...access,
+						c2cAllow: v.split("\n").map((s) => s.trim()).filter(Boolean)
+					});
+				}
+			}) : null, (0, react.createElement)(SegmentedRow, {
+				label: "群聊",
+				value: access.groupMode,
+				options: MODE_OPTIONS,
+				onChange: (v) => {
+					patch("access", {
+						...access,
+						groupMode: v
+					});
+				}
+			}), access.groupMode === "allowlist" ? (0, react.createElement)(AreaRow, {
+				label: "群聊白名单",
+				help: "每行一个群 openid",
+				rows: 3,
+				value: access.groupAllow.join("\n"),
+				onChange: (v) => {
+					patch("access", {
+						...access,
+						groupAllow: v.split("\n").map((s) => s.trim()).filter(Boolean)
+					});
+				}
+			}) : null, (0, react.createElement)("div", { className: "imqb2-group-title" }, "基本"), (0, react.createElement)(SwitchRow, {
+				label: "群聊需要 @机器人",
+				checked: form.requireMention ?? true,
+				help: "开启后群聊中只有 @机器人 的消息会触发回复",
+				onChange: (v) => {
+					patch("requireMention", v);
+				}
+			}), (0, react.createElement)(SwitchRow, {
+				label: "流式输出",
+				checked: form.streaming ?? true,
+				help: "回复内容分段实时推送到聊天",
+				onChange: (v) => {
+					patch("streaming", v);
+				}
+			}), (0, react.createElement)(SwitchRow, {
+				label: "显示工具调用结果",
+				checked: form.showToolResults ?? false,
+				help: "在聊天中展示 agent 工具调用的结构化结果",
+				onChange: (v) => {
+					patch("showToolResults", v);
+				}
+			}), (0, react.createElement)("div", { className: "imqb2-group-title" }, "模型"), (0, react.createElement)(FieldRow, {
+				label: "Provider",
+				value: form.provider ?? "",
+				placeholder: "留空继承宿主默认",
+				onChange: (v) => {
+					patch("provider", v);
+				}
+			}), (0, react.createElement)(FieldRow, {
+				label: "Model",
+				value: form.model ?? "",
+				placeholder: "留空继承宿主默认",
+				onChange: (v) => {
+					patch("model", v);
+				}
+			}), (0, react.createElement)(FieldRow, {
+				label: "Preset",
+				value: form.preset ?? "",
+				placeholder: "Agent preset id",
+				onChange: (v) => {
+					patch("preset", v);
+				}
+			}), (0, react.createElement)("div", { className: "imqb2-group-title" }, "补充指令"), (0, react.createElement)(AreaRow, {
+				label: "群聊额外 system prompt",
+				value: form.groupPrompt ?? "",
+				onChange: (v) => {
+					patch("groupPrompt", v);
+				}
+			}), (0, react.createElement)(AreaRow, {
+				label: "私聊额外 system prompt",
+				value: form.directPrompt ?? "",
+				onChange: (v) => {
+					patch("directPrompt", v);
+				}
+			}), form.cwd !== void 0 ? (0, react.createElement)("div", { className: "imqb2-field" }, (0, react.createElement)("div", { className: "imqb2-head" }, (0, react.createElement)("span", { className: "imqb2-label" }, "Agent 工作目录"), (0, react.createElement)("span", { className: "imqb2-hint" }, "只读")), (0, react.createElement)("p", { className: "imqb2-readonly" }, form.cwd)) : null, (0, react.createElement)("div", { className: "imqb2-footer" }, result !== null ? (0, react.createElement)("p", { className: `imqb2-note${result.ok ? " imqb2-note--ok" : " imqb2-note--error"}` }, (result.ok ? "" : "⚠️ ") + result.message) : dirty ? (0, react.createElement)("p", { className: "imqb2-note" }, "保存后插件将重载，进行中的机器人会话将重置") : (0, react.createElement)("p", { className: "imqb2-note" }), (0, react.createElement)("button", {
+				className: "imqb2-save",
+				type: "submit",
+				disabled: busy || !dirty
+			}, busy ? "正在保存…" : "保存")));
 		}
 		//#endregion
 		//#region src/client/index.ts
@@ -166,7 +803,7 @@ window.__ModuleLoader__.load({
 		const TAB_KIND = "qqbot-bind";
 		/** 席位注册 key（Tab 类型 id，席位按其分发；只需全局唯一，与包名解耦） */
 		const TAB_ID = "im-qqbot/bind";
-		/** 绑定入口图标（机器人轮廓，跟随主题 currentColor） */
+		/** 绑定入口图标（QQ 机器人，跟随主题图标色变量） */
 		function BindGuideIcon() {
 			return (0, react.createElement)("svg", {
 				width: 24,
@@ -175,34 +812,21 @@ window.__ModuleLoader__.load({
 				fill: "none",
 				"aria-hidden": true
 			}, (0, react.createElement)("path", {
-				d: "M12 3a6 6 0 0 1 6 6v1.5a4.5 4.5 0 0 1 0 9H6a4.5 4.5 0 0 1 0-9V9a6 6 0 0 1 6-6Z",
-				fill: "currentColor",
-				fillOpacity: .9
-			}), (0, react.createElement)("circle", {
-				cx: 9.5,
-				cy: 12,
-				r: 1.4,
-				fill: "#fff"
-			}), (0, react.createElement)("circle", {
-				cx: 14.5,
-				cy: 12,
-				r: 1.4,
-				fill: "#fff"
+				d: "M9.50039 11.1504C9.96983 11.1504 10.3504 11.5309 10.3504 12.0004V14.0004C10.3504 14.4698 9.96983 14.8504 9.50039 14.8504C9.03095 14.8504 8.65039 14.4698 8.65039 14.0004V12.0004C8.65039 11.5309 9.03095 11.1504 9.50039 11.1504Z",
+				fill: "var(------icon_primary, #1A1A1A)"
+			}), (0, react.createElement)("path", {
+				d: "M14.5004 11.1504C14.9698 11.1504 15.3504 11.5309 15.3504 12.0004V14.0004C15.3504 14.4698 14.9698 14.8504 14.5004 14.8504C14.0309 14.8504 13.6504 14.4698 13.6504 14.0004V12.0004C13.6504 11.5309 14.0309 11.1504 14.5004 11.1504Z",
+				fill: "var(------icon_primary, #1A1A1A)"
 			}), (0, react.createElement)("path", {
-				d: "M9.5 15.5a3 3 0 0 0 5 0",
-				stroke: "#fff",
-				strokeWidth: 1.2,
-				strokeLinecap: "round"
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M12.8504 5.3109C13.5299 4.99138 14.0004 4.30063 14.0004 3.5C14.0004 2.39543 13.1049 1.5 12.0004 1.5C10.8958 1.5 10.0004 2.39543 10.0004 3.5C10.0004 4.30065 10.4708 4.99141 11.1504 5.31092V6.18851C6.38487 6.61795 2.65039 10.6231 2.65039 15.5004V17.0004C2.65039 19.679 4.82181 21.8504 7.50039 21.8504H16.5004C19.179 21.8504 21.3504 19.679 21.3504 17.0004V15.5004C21.3504 10.6231 17.6159 6.61795 12.8504 6.18851V5.3109ZM12.0004 7.85039C7.77541 7.85039 4.35039 11.2754 4.35039 15.5004V17.0004C4.35039 18.7401 5.76069 20.1504 7.50039 20.1504H16.5004C18.2401 20.1504 19.6504 18.7401 19.6504 17.0004V15.5004C19.6504 11.2754 16.2254 7.85039 12.0004 7.85039Z",
+				fill: "var(------icon_primary, #1A1A1A)"
 			}));
 		}
 		/** 设置页「QQ Bot」栏目：面板常驻展示绑定状态 */
 		function QQBotSettingsSection() {
-			return (0, react.createElement)("div", null, (0, react.createElement)("p", { style: {
-				margin: "0 0 8px",
-				opacity: .75,
-				lineHeight: 1.6,
-				fontSize: "13px"
-			} }, "扫码将 QQ 机器人绑定到当前配置；绑定完成后机器人接入私聊与群聊。"), (0, react.createElement)(BindPanelBody));
+			return (0, react.createElement)("div", null, (0, react.createElement)(BindPanelBody), (0, react.createElement)(ConfigPanel));
 		}
 		function apply(ctx) {
 			const tabs = ctx.sidebarRightTabs;
@@ -213,18 +837,18 @@ window.__ModuleLoader__.load({
 				name: "settings.section",
 				id: "qqbot",
 				order: 7,
-				label: "QQ Bot"
+				label: "QQ 机器人"
 			}, QQBotSettingsSection)));
 			if (tabs !== void 0 && slots !== void 0) {
 				disposers.push(tabs.register({
 					id: TAB_ID,
 					kind: TAB_KIND,
-					title: () => "QQ Bot 绑定",
+					title: () => "QQ 机器人绑定",
 					guide: [{
 						id: "bind",
 						order: 90,
-						title: () => "QQ Bot 绑定",
-						description: () => "扫码将 QQ 机器人绑定到当前配置",
+						title: () => "QQ 机器人绑定",
+						description: () => "扫码或手动填写，绑定 QQ 机器人",
 						icon: BindGuideIcon
 					}]
 				}));
@@ -263,7 +887,7 @@ window.__ModuleLoader__.load({
 					return;
 				}
 				try {
-					const res = await fetch("/qqbot/im-qqbot/bind", { cache: "no-store" });
+					const res = await fetch(BIND_STATE_PATH, { cache: "no-store" });
 					if (res.ok) {
 						if ((await res.json()).phase === "waiting" && !opened && right !== void 0) try {
 							right.openTab(TAB_KIND);