dsh-jiuling-remote-mobile 1.0.6 → 1.0.7

package/lib/client.js

@@ -55,6 +55,7 @@ window.__ModuleLoader__.load({
 		var primitives = require('@deepseek-ai/dsh-client-ui-primitives');
 		var Modal = primitives.Modal;
 		var Button = primitives.Button;
+		var Input = primitives.Input;
 		var SegmentedTabs = primitives.SegmentedTabs;
 		var IconFolderCloseRegular = primitives.IconFolderCloseRegular;
 		var IconChevronRightOutlineRegular = primitives.IconChevronRightOutlineRegular;
@@ -123,6 +124,16 @@ window.__ModuleLoader__.load({
 				'padding:16px 24px;border-top:.5px solid var(--dsw-alias-border-l3);',
 			footerGap: 'flex:1 1 0;',
 			footerAction: 'min-width:72px;',
+			// —— 配对条（只在「电脑」页签下显示）——
+			pairBar:
+				'display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none;' +
+				'padding:0 0 8px;',
+			pairWho:
+				'flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' +
+				'color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;',
+			pairInput: 'width:140px;text-transform:uppercase;letter-spacing:2px;',
+			pairMsg: 'padding:0 4px 8px;font-size:12px;line-height:18px;',
+			pairOk: 'color:var(--dsw-alias-state-success-primary);',
 		};
 
 		/**
@@ -295,6 +306,22 @@ window.__ModuleLoader__.load({
 			var state = statePair[0];
 			var setState = statePair[1];
 
+			/**
+			 * 配对状态（与目录浏览无关，所以单独一个 state）。
+			 *
+			 * `endpoint === null` 表示还没查过；`paired === false` 表示
+			 * 手机现在用的还是内置的默认地址与令牌，需要用户去电脑上取一个配对码。
+			 */
+			var pairPair = react.useState({ endpoint: null, paired: false, code: '', busy: false, message: null });
+			var pairState = pairPair[0];
+			var setPairState = pairPair[1];
+
+			var patchPair = react.useCallback(function (next) {
+				setPairState(function (prev) {
+					return Object.assign({}, prev, next);
+				});
+			}, []);
+
 			var patch = react.useCallback(function (next) {
 				setState(function (prev) {
 					return Object.assign({}, prev, next);
@@ -317,12 +344,39 @@ window.__ModuleLoader__.load({
 				[open, patch],
 			);
 
+			// 打开时查一次配对状态（只查一次，失败也不打扰用户 —— 未配对
+			// 本来就是这个流程的正常起点）。
+			react.useEffect(
+				function () {
+					if (!open) return undefined;
+					bridge('pairStatus', {}).then(
+						function (result) {
+							if (!aliveRef.current) return;
+							patchPair({ endpoint: result.endpoint, paired: result.paired === true });
+						},
+						function () {
+							/* 查不到就不显示那一条，用户仍然可以输码 */
+						},
+					);
+					return undefined;
+				},
+				[open, patchPair],
+			);
+
 			// 加载当前页签、当前路径的目录列表。
 			var tab = state.tab;
 			var path = state.path;
 			react.useEffect(
 				function () {
 					if (!open) return undefined;
+					// ⚠️ **没配对就别去问电脑要目录**。未配对时 `listDesktop`
+					// 会拿着内置的默认地址打过去，那台「电脑」并不存在 ——
+					// 用户看到的是转圈 10 秒后一句「远程请求失败: HTTP 502」，
+					// 完全不知道要先去配对。这里直接给出可操作的提示。
+					if (tab === 'desktop' && pairState.paired !== true) {
+						patch({ loading: false, listing: null, error: null });
+						return undefined;
+					}
 					patch({ loading: true, error: null });
 					var load =
 						tab === 'desktop'
@@ -344,7 +398,7 @@ window.__ModuleLoader__.load({
 					);
 					return undefined;
 				},
-				[open, tab, path, listDirectory, patch],
+				[open, tab, path, listDirectory, patch, pairState.paired],
 			);
 
 			if (!open) return null;
@@ -363,6 +417,107 @@ window.__ModuleLoader__.load({
 				onPicked(loc.path);
 			};
 
+			/**
+			 * 提交配对码。
+			 *
+			 * 成功后**必须重拉一次目录列表**：配对的当下 `listDesktop` 是失败的
+			 * （那时还没配对），而上面那个 effect 的依赖里有 `paired`，
+			 * 状态一变它自己就会重跑 —— 这里只需要把 `paired` 翻过来。
+			 */
+			var submitPair = function () {
+				var code = pairState.code.trim();
+				if (code === '' || pairState.busy) return;
+				patchPair({ busy: true, message: null });
+				bridge('pair', { code: code }).then(
+					function (result) {
+						if (!aliveRef.current) return;
+						patchPair({
+							busy: false,
+							paired: true,
+							endpoint: result.endpoint,
+							code: '',
+							message: { kind: 'ok', text: '配对成功，正在连接电脑…' },
+						});
+						patch({ path: null, listing: null });
+					},
+					function (reason) {
+						if (!aliveRef.current) return;
+						patchPair({
+							busy: false,
+							message: { kind: 'error', text: String((reason && reason.message) || reason) },
+						});
+					},
+				);
+			};
+
+			/**
+			 * 「电脑」页签顶部的配对条。
+			 *
+			 * 已配对时只显示「连的是哪台电脑」，不显示令牌（令牌只在引擎进程里）。
+			 * 未配对时给一个输入框 —— **手输是主路径**：手机 App 的
+			 * `onPermissionRequest` 只放行录音权限，摄像头一律拒绝，
+			 * 页面里拿不到 `getUserMedia`，扫二维码这条路走不通。
+			 */
+			var pairBar = h(
+				'div',
+				{ style: CSS.pairBar },
+				pairState.paired === true
+					? h(
+							'span',
+							{ style: CSS.pairWho, title: pairState.endpoint || '' },
+							'已配对：' + (pairState.endpoint || ''),
+						)
+					: h(
+							'span',
+							{ style: CSS.pairWho },
+							'还没配对。请在电脑的「设置 → 手机远程」里生成 6 位配对码，填在这里。',
+						),
+				pairState.paired === true
+					? null
+					: h(Input, {
+							value: pairState.code,
+							onChange: function (event) {
+								patchPair({ code: event.target.value.toUpperCase() });
+							},
+							onKeyDown: function (event) {
+								if (event.key === 'Enter') submitPair();
+							},
+							placeholder: '6 位配对码',
+							'aria-label': '配对码',
+							maxLength: 8,
+							// ⚠️ 直接给对象：`CSS` 在模块加载时已就地转成对象了
+							//（见上面那个 `for (var styleKey in CSS)`），
+							// 再套一层 `toStyle()` 会得到 `[object Object]`。
+							style: CSS.pairInput,
+						}),
+				pairState.paired === true
+					? null
+					: h(
+							Button,
+							{
+								variant: 'outline',
+								size: 'sm',
+								onClick: submitPair,
+								disabled: pairState.busy || pairState.code.trim() === '',
+							},
+							pairState.busy ? '配对中…' : '配对',
+						),
+			);
+
+			var pairMsg = pairState.message === null
+				? null
+				: h(
+						'div',
+						{
+							// 同上：`CSS` 已是对象，直接拼对象即可。
+							style: pairState.message.kind === 'ok'
+								? Object.assign({}, CSS.pairMsg, CSS.pairOk)
+								: CSS.pairMsg,
+							role: pairState.message.kind === 'ok' ? undefined : 'alert',
+						},
+						pairState.message.text,
+					);
+
 			/** 「电脑」页签：在电脑的这个目录上开一个新对话，并跳到它。 */
 			var openDesktop = function () {
 				if (loc.path === '' || state.creating) return;
@@ -509,12 +664,23 @@ window.__ModuleLoader__.load({
 				h(
 					'div',
 					{ style: CSS.content },
+					// 配对条只在「电脑」页签下出现 —— 「手机」页签跟配对无关。
+					state.tab === 'desktop' ? pairBar : null,
+					state.tab === 'desktop' ? pairMsg : null,
 					state.loading
 						? h('div', { style: CSS.status, role: 'status' }, '加载中…')
 						: h(
 								'div',
 								{ style: CSS.column },
-								rows.length > 0 ? rows : h('div', { style: CSS.status }, '这里没有子文件夹'),
+								rows.length > 0
+									? rows
+									: h(
+											'div',
+											{ style: CSS.status },
+											state.tab === 'desktop' && pairState.paired !== true
+												? '配对后这里会显示电脑上的文件夹'
+												: '这里没有子文件夹',
+										),
 							),
 					state.error !== null ? h('div', { style: CSS.error, role: 'alert' }, state.error) : null,
 					state.tab === 'desktop'
@@ -558,7 +724,7 @@ window.__ModuleLoader__.load({
 								{
 									variant: 'primary',
 									style: CSS.footerAction,
-									disabled: loc.path === '' || state.creating,
+									disabled: loc.path === '' || state.creating || pairState.paired !== true,
 									onClick: openDesktop,
 								},
 								state.creating ? '正在电脑上新建…' : '在此新建对话',

package/lib/index.js

@@ -48,7 +48,7 @@
  */
 
 import { createHash, randomUUID } from 'node:crypto';
-import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { mkdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs';
 import { homedir } from 'node:os';
 import { join } from 'node:path';
 
@@ -73,6 +73,37 @@ const SESSIONS_PATH = join(STATE_DIR, 'sessions.json');
 /** 默认隧道地址。 */
 const DEFAULT_ENDPOINT = 'https://dsh-remote.jiulingssh.xyz';
 
+/**
+ * 配对服务地址。
+ *
+ * 与电脑端 `dsh-jiuling-remote-desktop/lib/pair.js` 的 `PAIR_ENDPOINT`
+ * **必须逐字相同** —— 两端各写一份是因为这两个包要能独立安装，
+ * 不能互相 import（一个是 host 插件、一个是另一台机器上的 host 插件）。
+ */
+const PAIR_ENDPOINT = 'https://pair.jiulingssh.xyz';
+
+/**
+ * 保存连接配置（配对成功后写）。
+ *
+ * ⚠️ 走「临时文件 + rename」：这个文件是手机端**唯一一份**凭据，
+ * 写一半断电就得重新配对一次。
+ *
+ * @param endpoint - 电脑的隧道地址。
+ * @param token - 访问令牌。
+ * @returns 落盘后的 `{ endpoint, token }`。
+ */
+function saveConfig(endpoint, token) {
+	const record = {
+		endpoint: String(endpoint).replace(/\/+$/, ''),
+		token: String(token),
+	};
+	mkdirSync(STATE_DIR, { recursive: true });
+	const tmp = `${CONFIG_PATH}.${process.pid}.tmp`;
+	writeFileSync(tmp, JSON.stringify(record, null, 2), { mode: 0o600 });
+	renameSync(tmp, CONFIG_PATH);
+	return record;
+}
+
 /**
  * 内置访问令牌 —— **必须与 `dsh-jiuling-remote-desktop` 里的内置值逐字相同**。
  *
@@ -203,6 +234,64 @@ async function callRemote(config, method, params = {}) {
 	return payload.result;
 }
 
+/**
+ * 调配对服务器的一条接口。
+ *
+ * ⚠️ 同样走 `remoteFetch`（专用 undici 池）：配对服务器也在公网上，
+ * 用全局 `fetch` 会撞上 Android 上那个 12 秒超时的连接策略问题（见 `remoteFetch`）。
+ *
+ * @param path - 例如 `/pair/claim`。
+ * @param body - 请求体；不传就发 GET。
+ * @returns 解析后的 JSON（失败抛错，错误文案直接可读）。
+ */
+async function pairFetch(path, body) {
+	const init = body === undefined
+		? { method: 'GET' }
+		: {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify(body),
+			};
+	const res = await remoteFetch(`${PAIR_ENDPOINT}${path}`, init);
+	let payload;
+	try {
+		payload = await res.json();
+	} catch {
+		throw new Error(`配对服务器返回了非 JSON（HTTP ${res.status}）`);
+	}
+	if (!res.ok) {
+		throw new Error(payload.message ?? payload.error ?? `配对失败: HTTP ${res.status}`);
+	}
+	// ⚠️ **不能要求 `payload.ok === true`**：配对服务器 `claim_handshake()` 的
+	// 成功响应体只有 `{hostname, accessToken, subdomain}`，**没有 `ok` 字段**
+	//（失败时才是 400 + `{error, message}`）。按 `ok` 判会让每一次正常配对
+	// 都报「配对失败: HTTP 200」，而 HTTP 状态码明明是对的。
+	if (payload.ok === false) {
+		throw new Error(payload.message ?? payload.error ?? '配对失败');
+	}
+	return payload;
+}
+
+/**
+ * 用 6 位配对码领取这台电脑的连接信息。
+ *
+ * ⚠️ **配对码是一次性的**：服务器在 `claim` 成功后立刻删掉它。所以这里的顺序
+ * 必须是「先领、后写盘」—— 反过来（先写盘再领）一旦写盘失败，码已经作废，
+ * 用户得回电脑上重新生成一个。
+ *
+ * @param code - 用户输入的 6 位码（大小写、空格、连字符都由服务器容错）。
+ * @returns 落盘后的 `{ endpoint, token }`。
+ */
+async function claimPairing(code) {
+	const payload = await pairFetch('/pair/claim', { pairCode: code });
+	const endpoint = `https://${payload.hostname}`;
+	const token = payload.accessToken;
+	if (typeof endpoint !== 'string' || typeof token !== 'string' || token === '') {
+		throw new Error('配对服务器没有返回完整的连接信息');
+	}
+	return saveConfig(endpoint, token);
+}
+
 /**
  * 把一个电脑事件写进手机本地会话。
  *
@@ -723,9 +812,31 @@ async function handleBridge(ctx, config, io) {
 		case 'isRemote':
 			return { remote: io.remoteSessions.has(params.sessionId) };
 
+		/**
+		 * 配对：用电脑上生成的 6 位码换回这台电脑的隧道地址与令牌。
+		 *
+		 * ⚠️ **必须就地改写 `config`**（`Object.assign` 而不是重新赋值）：
+		 * `config` 是 `apply()` 里 `loadConfig()` 的产物，被闭包里的 `prompt`
+		 * 拦截、`follow`、以及本函数共享。如果这里只写盘不更新对象，
+		 * 配对的**当下**仍然拿着旧的默认地址与令牌 —— 表现是「配对提示成功、
+		 * 一发消息就 401」，而重启 App 后又好了（重启才会重新 `loadConfig`）。
+		 */
+		case 'pair': {
+			if (typeof params.code !== 'string' || params.code.trim() === '') {
+				throw new Error('请输入电脑上显示的 6 位配对码');
+			}
+			const saved = await claimPairing(params.code.trim());
+			Object.assign(config, saved);
+			return { endpoint: saved.endpoint, tokenSet: saved.token !== '' };
+		}
+
+		/** 当前连的是哪台电脑（前端用来显示状态）。 */
+		case 'pairStatus':
+			return { endpoint: config.endpoint, paired: config.token !== DEFAULT_TOKEN };
+
 		default:
 			throw new Error(`unknown method "${String(io.body?.method)}"`);
 	}
 }
 
-export { callRemote, mirrorEvent, loadConfig, DEFAULT_ENDPOINT, CONFIG_PATH };
+export { callRemote, mirrorEvent, loadConfig, DEFAULT_ENDPOINT, CONFIG_PATH, PAIR_ENDPOINT, claimPairing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-jiuling-remote-mobile",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "DSH 远程目录（手机端）：在选文件夹流程里多出「电脑」页签，进入电脑目录、在电脑上发起对话，并把电脑的实时消息流同步到手机本地界面（只传文本，不映射桌面）。",
   "type": "module",
   "main": "./lib/index.js",