@dsh-plus/access-gate 0.1.2 → 0.1.4

package/lib/client.js

@@ -6,6 +6,25 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react_jsx_runtime = require("react/jsx-runtime");
 		let react = require("react");
+		//#region ../shared/src/client/icons.tsx
+		/** 官方 IconChevronDownOutline14 的同构实现（path 数据逐字一致）。 */
+		function ChevronDownIcon(props) {
+			const size = props.size ?? 14;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: size,
+				height: size,
+				className: props.className,
+				viewBox: "0 0 14 14",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z",
+					fill: "currentColor"
+				})
+			});
+		}
+		//#endregion
 		//#region ../shared/src/client/card.tsx
 		const IDLE_STATUS = {
 			kind: "idle",
@@ -41,10 +60,7 @@ window.__ModuleLoader__.load({
 							className: `${p}-pending`,
 							children: props.dirtyLabel
 						}) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: `${p}-chevron${props.open ? ` ${p}-chevronOpen` : ""}`,
-							children: "▾"
-						})
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, { className: `${p}-chevron${props.open ? ` ${p}-chevronOpen` : ""}` })
 					]
 				}), props.open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: `${p}-body`,
@@ -110,6 +126,11 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/**
+		* 勾选行：自绘圆角扁平开关（switch），对齐官方 WebUI 无原生 checkbox 的
+		* 设计语言（官方选择类控件全走胶囊/菜单，见 cardCss 的 -switch 规则）。
+		* 语义保持 checkbox（无障碍树与表单语义不变），视觉自绘。
+		*/
 		function CheckRow(props) {
 			const p = props.prefix ?? "dshp";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -117,6 +138,8 @@ window.__ModuleLoader__.load({
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					id: props.id,
 					type: "checkbox",
+					role: "switch",
+					"aria-checked": props.checked,
 					checked: props.checked,
 					disabled: props.disabled === true,
 					onChange: (event) => props.onEdit(event.target.checked)
@@ -173,14 +196,15 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region ../shared/src/client/scope.ts
 		/**
-		* api 直连实现的命名空间 scope（官方配置页 tab 同款模式）。
+		* remote.settings 直连实现的命名空间 scope（官方配置页 tab 同款模式）。
 		* 读：describe 取命名空间视图（脱敏 value/revision + 顶层 writable）；
 		* 刷新：remote `settings/document-updated`（按命名空间过滤）与
 		* `connection/reset`；generation 防旧读覆盖新发布。任何页面 origin
 		* （loopback 或 tailnet 信任域名）下行为一致。
 		* effect 归属调用方 fiber（label 需含插件名以便诊断）。
 		*/
-		function createApiScope(api, ns, c, label) {
+		function createSettingsScope(c, ns, label) {
+			const remote = c.get("remote");
 			let state = {
 				status: "loading",
 				value: void 0,
@@ -195,36 +219,37 @@ window.__ModuleLoader__.load({
 			};
 			const load = async () => {
 				const gen = ++generation;
-				let response;
+				let view;
 				try {
-					response = await api.describe({});
+					const response = await remote.settings.describe();
+					if (!response.ok) return;
+					view = response.value;
 				} catch {
 					return;
 				}
-				if (gen !== generation || !response.result.ok) return;
-				const writable = response.result.value?.writable ?? false;
-				const view = response.result.value?.namespaces.find((candidate) => candidate.ns === ns);
-				if (view === void 0) {
+				if (gen !== generation) return;
+				const namespace = view.namespaces.find((candidate) => candidate.ns === ns);
+				if (namespace === void 0) {
 					publish({
 						status: "unavailable",
 						value: void 0,
 						revision: void 0,
-						writable
+						writable: view.writable
 					});
 					return;
 				}
 				publish({
 					status: "ready",
-					value: view.value,
-					revision: view.revision,
-					writable
+					value: namespace.value,
+					revision: namespace.revision,
+					writable: view.writable
 				});
 			};
 			const refresh = (namespace) => {
 				if (namespace !== void 0 && namespace !== ns) return;
 				load();
 			};
-			const disposers = [c.get("remote").$on("settings/document-updated", refresh), c.on("connection/reset", () => {
+			const disposers = [remote.$on("settings/document-updated", refresh), c.on("connection/reset", () => {
 				load();
 			})];
 			c.effect(() => () => {
@@ -242,6 +267,20 @@ window.__ModuleLoader__.load({
 				load
 			};
 		}
+		/** 以 remote.settings 构造命名空间绑定的 api 面。 */
+		function createNamespaceApi(remote, ns) {
+			return {
+				update: async (patch, expectedRevision) => {
+					const response = await remote.update(ns, patch, expectedRevision);
+					if (!response.ok) throw new Error(response.error.message ?? "settings update failed");
+				},
+				describe: async () => {
+					const response = await remote.describe();
+					if (!response.ok) throw new Error(response.error.message ?? "settings describe failed");
+					return response.value;
+				}
+			};
+		}
 		//#endregion
 		//#region ../shared/src/client/styles.ts
 		/**
@@ -265,7 +304,7 @@ window.__ModuleLoader__.load({
 .${prefix}-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
 .${prefix}-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
 .${prefix}-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
-.${prefix}-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;font-size:12px}
+.${prefix}-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;display:inline-flex}
 .${prefix}-chevronOpen{transform:rotate(180deg)}
 .${prefix}-pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
 .${prefix}-statusBadge{white-space:nowrap;border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
@@ -279,16 +318,24 @@ window.__ModuleLoader__.load({
 .${prefix}-badge{white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
 .${prefix}-badgeSet{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
 .${prefix}-badgeUnset{color:var(--dsw-alias-label-tertiary)}
-.${prefix}-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}
+.${prefix}-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;transition:border-color .18s,background .18s}
+.${prefix}-input:hover:not(:disabled):not(:focus-visible){border-color:var(--dsw-alias-label-dimmed)}
 .${prefix}-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
 .${prefix}-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
 .${prefix}-inputInvalid{border-color:var(--dsw-alias-label-error)}
-.${prefix}-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-tertiary) 50%),linear-gradient(135deg,var(--dsw-alias-label-tertiary) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
+.${prefix}-select{appearance:none;background:var(--dsw-alias-bg-module-platform);border:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-secondary) 50%),linear-gradient(135deg,var(--dsw-alias-label-secondary) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;height:34px;box-sizing:border-box;border-radius:8px;padding:0 30px 0 12px;transition:background-color .18s}
+.${prefix}-select:hover:not(:disabled){background-color:var(--dsw-alias-interactive-bg-hover)}
 .${prefix}-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
 .${prefix}-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
-.${prefix}-checkRow{align-items:center;gap:8px;display:flex;padding:6px 0}
-.${prefix}-checkRow input{accent-color:var(--dsw-alias-brand-primary)}
-.${prefix}-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer}
+.${prefix}-checkRow{align-items:center;gap:10px;display:flex;padding:6px 0}
+.${prefix}-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer;flex:1;min-width:0}
+/* 自绘圆角扁平开关（官方 UI 无可见原生 checkbox，选择类全走胶囊/菜单） */
+.${prefix}-checkRow input{appearance:none;-webkit-appearance:none;position:relative;box-sizing:border-box;background:var(--dsw-alias-bg-module-platform);border:none;border-radius:999px;width:34px;height:20px;flex:none;cursor:pointer;transition:background .18s;margin:0}
+.${prefix}-checkRow input::after{content:"";position:absolute;top:2px;left:2px;background:var(--dsw-alias-label-primary);border-radius:999px;width:16px;height:16px;transition:left .18s cubic-bezier(.4,0,.2,1)}
+.${prefix}-checkRow input:checked{background:var(--dsw-alias-brand-primary)}
+.${prefix}-checkRow input:checked::after{left:16px;background:var(--dsw-alias-bg-base)}
+.${prefix}-checkRow input:disabled{opacity:.4;cursor:default}
+.${prefix}-checkRow input:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .${prefix}-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:12px 0 2px;margin:0}
 .${prefix}-readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
 .${prefix}-warn{color:var(--dsw-alias-label-error);margin:12px 0 0;font-size:12px;line-height:1.5}
@@ -306,7 +353,6 @@ window.__ModuleLoader__.load({
 .${prefix}-header{padding:12px 12px}
 .${prefix}-input,.${prefix}-select{font-size:16px;height:40px}
 .${prefix}-checkRow{min-height:44px;padding:8px 0}
-.${prefix}-checkRow input{width:18px;height:18px;flex:none}
 .${prefix}-footer{position:sticky;bottom:0;background:var(--dsw-alias-bg-layer-2);margin:0 -10px;padding:10px 10px 6px;border-top:1px solid var(--dsw-alias-border-l2);border-bottom-left-radius:12px;border-bottom-right-radius:12px}
 .${prefix}-status{flex-basis:100%;flex:none}
 .${prefix}-btn{min-height:44px;flex:1;min-width:96px}
@@ -408,10 +454,10 @@ ${extra}
 			}, [value, draft]);
 			(0, react.useEffect)(() => {
 				let alive = true;
-				api.describe({}).then((response) => {
-					if (!alive || !response.result.ok) return;
-					const view = response.result.value?.namespaces.find((ns) => ns.ns === SETTINGS_NS);
-					setTokenConfigured(view?.secrets.some((secret) => secret.path.join(".") === "token" && secret.set) ?? false);
+				api.describe().then((view) => {
+					if (!alive) return;
+					const ns = view.namespaces.find((candidate) => candidate.ns === SETTINGS_NS);
+					setTokenConfigured(ns?.secrets.some((secret) => secret.path.join(".") === "token" && secret.set) ?? false);
 				}).catch(() => {});
 				return () => {
 					alive = false;
@@ -448,12 +494,7 @@ ${extra}
 				const patch = toPatch(draft);
 				if (draft.token !== "") patch.token = draft.token;
 				const revision = scope.getSnapshot().revision;
-				api.update({
-					ns: SETTINGS_NS,
-					patch,
-					...revision !== void 0 ? { expectedRevision: revision } : {}
-				}).then(async (response) => {
-					if (!response.result.ok) throw new Error(response.result.error?.message ?? t("saveFailed"));
+				api.update(patch, revision).then(async () => {
 					await scope.load();
 					const next = scope.getSnapshot().value;
 					if (next !== void 0) setDraft(draftFromValue(next));
@@ -757,8 +798,8 @@ ${extra}
 		const inject = [
 			"slots",
 			"locale",
-			"connection",
-			"remote"
+			"remote",
+			"remote.settings"
 		];
 		function apply(ctx) {
 			const c = ctx;
@@ -770,8 +811,8 @@ ${extra}
 				zh,
 				en
 			}), "access-gate: locale");
-			const api = c.get("connection").api.settings;
-			const scope = createApiScope(api, SETTINGS_NS, c, "access-gate: settings scope");
+			const scope = createSettingsScope(c, SETTINGS_NS, "access-gate: settings scope");
+			const api = createNamespaceApi(c.get("remote").settings, SETTINGS_NS);
 			c.slots.inject("settings.plugin.item", () => c.slots.register({
 				name: "settings.plugin.item",
 				key: SETTINGS_NS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-plus/access-gate",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "dsh-plus service+ui plugin: dsh web 全量访问围栏——本机直连永久放行，远程按白名单 IP（XFF 还原）或 token（登录页 + cookie）放行",
   "type": "module",
   "main": "lib/index.js",
@@ -23,28 +23,27 @@
   "dsh": {
     "client": {
       "inject": [
-        "@deepseek-ai/dsh-client-runtime",
         "@deepseek-ai/dsh-client-locale",
-        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-ui-renderer",
         "@deepseek-ai/dsh-api-remotes"
       ],
       "platform": "web"
     }
   },
   "dependencies": {
-    "@dsh-plus/shared": "0.1.3"
+    "@dsh-plus/shared": "0.1.6"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-home-paths": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.8",
+    "@deepseek-ai/dsh-home-paths": "^0.1.2-alpha.1",
+    "@deepseek-ai/dsh-settings": "^0.1.2-alpha.1",
     "@deepseek-ai/schemastery": "^3.18.1"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "4.0.1",
-    "@deepseek-ai/dsh-home-paths": "0.1.1-rc.2",
-    "@deepseek-ai/dsh-settings": "0.1.1-rc.2",
-    "@deepseek-ai/dsh-host-webserver": "0.1.1-rc.2",
+    "@deepseek-ai/dsh-home-paths": "0.1.2-alpha.1",
+    "@deepseek-ai/dsh-settings": "0.1.2-alpha.1",
+    "@deepseek-ai/dsh-host-webserver": "0.1.2-alpha.1",
     "@deepseek-ai/schemastery": "3.18.1",
     "@types/react": "~18.3.1",
     "react": "^18.2.0"

package/src/client/card.tsx

@@ -14,8 +14,8 @@ import {
   type CardStatusState,
   CheckRow,
   IDLE_STATUS,
+  type NamespaceSettingsApi,
   type Scope,
-  type SettingsApi,
   TextField,
 } from '@dsh-plus/shared/client'
 import { type ReactElement, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
@@ -24,7 +24,7 @@ import { SETTINGS_NS } from '../ns.ts'
 export interface CardProps {
   t(key: string): string
   scope: Scope
-  api: SettingsApi
+  api: NamespaceSettingsApi
 }
 
 /** settings 命名空间的脱敏解析值（token 被脱敏剥除）。 */
@@ -126,12 +126,12 @@ export function AccessGateCard(props: CardProps): ReactElement | null {
   useEffect(() => {
     let alive = true
     api
-      .describe({})
-      .then((response) => {
-        if (!alive || !response.result.ok) return
-        const view = response.result.value?.namespaces.find((ns) => ns.ns === SETTINGS_NS)
+      .describe()
+      .then((view) => {
+        if (!alive) return
+        const ns = view.namespaces.find((candidate) => candidate.ns === SETTINGS_NS)
         setTokenConfigured(
-          view?.secrets.some((secret) => secret.path.join('.') === 'token' && secret.set) ?? false,
+          ns?.secrets.some((secret) => secret.path.join('.') === 'token' && secret.set) ?? false,
         )
       })
       .catch(() => {})
@@ -192,15 +192,8 @@ export function AccessGateCard(props: CardProps): ReactElement | null {
     if (draft.token !== '') patch.token = draft.token
     const revision = scope.getSnapshot().revision
     api
-      .update({
-        ns: SETTINGS_NS,
-        patch,
-        ...(revision !== undefined ? { expectedRevision: revision } : {}),
-      })
-      .then(async (response) => {
-        if (!response.result.ok) {
-          throw new Error(response.result.error?.message ?? t('saveFailed'))
-        }
+      .update(patch, revision)
+      .then(async () => {
         await scope.load()
         const next = scope.getSnapshot().value as ConfigValue | undefined
         if (next !== undefined) setDraft(draftFromValue(next))

package/src/client/client.ts

@@ -3,17 +3,21 @@
  * 构建产物为 window.__ModuleLoader__.load({id, factory}) 形式的 CJS factory
  * （包装见 tsdown.config.ts）；样式沿用官方 data-plugin-css 约定，HMR 据此卸载。
  *
- * 类型说明：浏览器半只用到 slots/locale/connection/remote 的很窄一面，
+ * 类型说明：浏览器半只用到 slots/locale/remote 的很窄一面，
  * scope 与基础控件走 @dsh-plus/shared/client 套件（收编自本插件原实现）。
- * rc7 起该插槽为 keyed 槽位：key 必须是卡片编辑的 settings 命名空间
+ * 该插槽为 keyed 槽位：key 必须是卡片编辑的 settings 命名空间
  * （即服务端 settingsNamespace() 注册的同一字面量，见 ../ns.ts），
  * 官方配置页按此 key 与 Host 已注册命名空间配对分发。
- * 配置读写经官方 settings RPC 直连（rc7 起第三方命名空间全量开放；
- * 不复用 settingsScope 服务——非 loopback 页面下它无数据）。
+ * 配置读写经 ctx.remote.settings 直连（0.1.2-alpha.1 起 connection.api.settings
+ * 已移除；不复用 settingsScope 服务——非 loopback 页面下它固定 memory 模式无数据）。
  * @module @dsh-plus/access-gate/client
  */
 import type { Context } from '@deepseek-ai/cordis'
-import { createApiScope } from '@dsh-plus/shared/client'
+import {
+  createNamespaceApi,
+  createSettingsScope,
+  type SettingsRemoteFace,
+} from '@dsh-plus/shared/client'
 import { SETTINGS_NS } from '../ns.ts'
 import { AccessGateCard } from './card.tsx'
 import { en, NS, zh } from './i18n.ts'
@@ -22,7 +26,7 @@ import { injectStyle } from './styles.ts'
 export const name = 'dsh-plus-access-gate'
 
 /** 浏览器半需要的 cordis 服务 key（loader 据此注入；package.json 的 dsh.client.inject 管包加载顺序）。 */
-export const inject = ['slots', 'locale', 'connection', 'remote'] as const
+export const inject = ['slots', 'locale', 'remote', 'remote.settings'] as const
 
 interface SlotsLike {
   inject(key: string, callback: () => unknown): unknown
@@ -35,17 +39,13 @@ interface LocaleLike {
 }
 
 interface RemoteLike {
+  settings: SettingsRemoteFace
   $on(event: string, listener: (payload?: unknown) => void): () => void
 }
 
-interface ConnectionLike {
-  api: { settings: Parameters<typeof createApiScope>[0] }
-}
-
 interface ClientContext {
   slots: SlotsLike
   locale: LocaleLike
-  get(key: 'connection'): ConnectionLike
   get(key: 'remote'): RemoteLike
   on(event: string, listener: () => void): () => void
   effect(execute: () => () => void, label?: string): unknown
@@ -61,8 +61,8 @@ export function apply(ctx: Context): void {
     'access-gate: style',
   )
   c.effect(() => c.locale.register(NS, { zh, en }), 'access-gate: locale')
-  const api = c.get('connection').api.settings
-  const scope = createApiScope(api, SETTINGS_NS, c, 'access-gate: settings scope')
+  const scope = createSettingsScope(c, SETTINGS_NS, 'access-gate: settings scope')
+  const api = createNamespaceApi(c.get('remote').settings, SETTINGS_NS)
   c.slots.inject('settings.plugin.item', () =>
     c.slots.register(
       {