@dsh-plus/access-gate 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-plus/access-gate",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "dsh-plus service+ui plugin: dsh web 全量访问围栏——本机直连永久放行，远程按白名单 IP（XFF 还原）或 token（登录页 + cookie）放行",
   "type": "module",
   "main": "lib/index.js",
@@ -31,7 +31,9 @@
       "platform": "web"
     }
   },
-  "dependencies": {},
+  "dependencies": {
+    "@dsh-plus/shared": "0.1.5"
+  },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
     "@deepseek-ai/dsh-home-paths": "^0.1.0-rc.8",

package/src/client/card.tsx

@@ -1,16 +1,25 @@
 /**
  * 「访问控制」配置卡片：注册进 settings.plugin.item 插槽（官方插件配置页）。
- * 交互对齐官方卡片：折叠/展开、staged draft、未保存标记、保存/放弃。
- * 配置读写走官方 settingsScope 传输（scope.ts）：value 为 schema 解析后的
- * 脱敏视图（token 不出现，tokenConfigured 经 describe 的 secrets 探测），
+ * 外壳与基础控件走 @dsh-plus/shared/client 套件（CardChrome/TextField/CheckRow），
+ * 本文件保留业务字段（token/白名单 textarea/诊断面板）与保存逻辑。
+ * 配置读写走官方 settingsScope 传输：value 为 schema 解析后的脱敏视图
+ * （token 不出现，tokenConfigured 经 describe 的 secrets 探测），
  * 保存经 settings.update 深合并（空 token 剔除 = 保持不变）。
  * 卡片顶部「当前页面诊断」读 /dsh-plus/gate/status（本页放行原因/客户端 IP）。
  * @module access-gate/client/card
  */
-import { type ReactElement, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 
+import {
+  CardChrome,
+  type CardStatusState,
+  CheckRow,
+  IDLE_STATUS,
+  type Scope,
+  type SettingsApi,
+  TextField,
+} from '@dsh-plus/shared/client'
+import { type ReactElement, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { SETTINGS_NS } from '../ns.ts'
-import type { Scope, SettingsApi } from './scope.ts'
 
 export interface CardProps {
   t(key: string): string
@@ -38,11 +47,6 @@ interface Draft {
   loginCooldownMs: string
 }
 
-interface Status {
-  kind: 'idle' | 'ok' | 'error'
-  text: string
-}
-
 interface Diag {
   enabled: boolean
   verdict: string
@@ -53,8 +57,6 @@ interface Diag {
   allowedCount: number
 }
 
-const IDLE_STATUS: Status = { kind: 'idle', text: '' }
-
 function draftFromValue(value: ConfigValue): Draft {
   return {
     enabled: value.enabled,
@@ -111,7 +113,7 @@ export function AccessGateCard(props: CardProps): ReactElement | null {
   const [tokenConfigured, setTokenConfigured] = useState(false)
   const [diag, setDiag] = useState<Diag | null>(null)
   const [saving, setSaving] = useState(false)
-  const [status, setStatus] = useState<Status>(IDLE_STATUS)
+  const [status, setStatus] = useState<CardStatusState>(IDLE_STATUS)
 
   // 首次拿到解析值后播种草稿；后续 Host 更新不覆盖在途编辑（与官方 staged 表单一致）。
   useEffect(() => {
@@ -213,220 +215,144 @@ export function AccessGateCard(props: CardProps): ReactElement | null {
 
   const disabled = !snapshot.writable
   return (
-    <li className={`dag-card${open ? ' dag-cardOpen' : ''}`}>
-      <button
-        type="button"
-        className="dag-header"
-        aria-expanded={open}
-        aria-label={`${t(open ? 'collapse' : 'expand')}: ${t('title')}`}
-        onClick={() => setOpen(!open)}
-      >
-        <span className="dag-headText">
-          <span className="dag-name">{t('title')}</span>
-          <span className="dag-description">{t('description')}</span>
-        </span>
-        {dirty ? <span className="dag-pending">{t('unsaved')}</span> : null}
-        <span className={`dag-chevron${open ? ' dag-chevronOpen' : ''}`}>▾</span>
-      </button>
-      {open ? (
-        <div className="dag-body">
-          {disabled ? (
-            <p className="dag-readOnly" role="status">
-              {t('readOnly')}
-            </p>
-          ) : null}
-          {failClosed ? <p className="dag-warn">{t('warnFailClosed')}</p> : null}
-          <div className="dag-field">
-            <div className="dag-head">
-              <label className="dag-label" htmlFor="dag-enabled">
-                {t('enabled')}
-              </label>
-            </div>
-            <div className="dag-checkRow">
-              <input
-                id="dag-enabled"
-                type="checkbox"
-                checked={draft.enabled}
-                disabled={disabled}
-                onChange={(event) => edit('enabled', event.target.checked)}
-              />
-              <label htmlFor="dag-enabled">{t('enabledHint')}</label>
-            </div>
-          </div>
-          <div className="dag-field">
-            <div className="dag-head">
-              <label className="dag-label" htmlFor="dag-token">
-                {t('token')}
-              </label>
-              <span className={`dag-badge ${tokenConfigured ? 'dag-badgeSet' : 'dag-badgeUnset'}`}>
-                {t(tokenConfigured ? 'tokenSet' : 'tokenUnset')}
-              </span>
-            </div>
-            <input
-              id="dag-token"
-              className="dag-input"
-              type="password"
-              autoComplete="off"
-              value={draft.token}
-              disabled={disabled}
-              onChange={(event) => edit('token', event.target.value)}
-            />
-            <p className="dag-hint">{t('tokenHint')}</p>
-          </div>
-          <div className="dag-field">
-            <div className="dag-head">
-              <label className="dag-label" htmlFor="dag-allowed">
-                {t('allowedIps')}
-              </label>
-            </div>
-            <textarea
-              id="dag-allowed"
-              className="dag-textarea"
-              rows={Math.min(8, Math.max(3, draft.allowedIpsText.split('\n').length))}
-              value={draft.allowedIpsText}
-              disabled={disabled}
-              onChange={(event) => edit('allowedIpsText', event.target.value)}
-            />
-            <p className="dag-hint">{t('allowedIpsHint')}</p>
-          </div>
-          <div className="dag-field">
-            <div className="dag-head">
-              <label className="dag-label" htmlFor="dag-xff">
-                {t('trustForwardedFor')}
-              </label>
-            </div>
-            <div className="dag-checkRow">
-              <input
-                id="dag-xff"
-                type="checkbox"
-                checked={draft.trustForwardedFor}
-                disabled={disabled}
-                onChange={(event) => edit('trustForwardedFor', event.target.checked)}
-              />
-              <label htmlFor="dag-xff">{t('trustForwardedForHint')}</label>
-            </div>
-          </div>
-          <div className="dag-field">
-            <div className="dag-head">
-              <label className="dag-label" htmlFor="dag-cookie">
-                {t('cookieMaxAgeHours')}
-              </label>
-            </div>
-            <input
-              id="dag-cookie"
-              className={`dag-input${isPositiveInt(draft.cookieMaxAgeHours) ? '' : ' dag-inputInvalid'}`}
-              type="text"
-              inputMode="numeric"
-              value={draft.cookieMaxAgeHours}
-              disabled={disabled}
-              aria-invalid={!isPositiveInt(draft.cookieMaxAgeHours) || undefined}
-              onChange={(event) => edit('cookieMaxAgeHours', event.target.value)}
-            />
-            <p className={isPositiveInt(draft.cookieMaxAgeHours) ? 'dag-hint' : 'dag-invalid'}>
-              {isPositiveInt(draft.cookieMaxAgeHours)
-                ? t('cookieMaxAgeHoursHint')
-                : t('invalidNumber')}
-            </p>
+    <CardChrome
+      prefix="dag"
+      title={t('title')}
+      description={t('description')}
+      open={open}
+      onToggle={setOpen}
+      statusBadge={{ text: t(draft.enabled ? 'enabledOn' : 'enabledOff'), on: draft.enabled }}
+      dirty={dirty}
+      dirtyLabel={t('unsaved')}
+      readOnlyNotice={disabled ? t('readOnly') : undefined}
+      status={status}
+      actions={[
+        {
+          key: 'discard',
+          label: t('discard'),
+          disabled: !dirty || saving,
+          onClick: () => {
+            setDraft(draftFromValue(value))
+            setStatus(IDLE_STATUS)
+          },
+        },
+        {
+          key: 'save',
+          label: t(saving ? 'saving' : 'save'),
+          variant: 'primary',
+          disabled: !dirty || invalid || saving || disabled,
+          onClick: onSave,
+        },
+      ]}
+    >
+      {failClosed ? <p className="dag-warn">{t('warnFailClosed')}</p> : null}
+      <CheckRow
+        prefix="dag"
+        id="dag-enabled"
+        label={t('enabledHint')}
+        checked={draft.enabled}
+        disabled={disabled}
+        onEdit={(v) => edit('enabled', v)}
+      />
+      <TextField
+        prefix="dag"
+        id="dag-token"
+        label={t('token')}
+        hint={t('tokenHint')}
+        value={draft.token}
+        password
+        disabled={disabled}
+        badge={{ text: t(tokenConfigured ? 'tokenSet' : 'tokenUnset'), set: tokenConfigured }}
+        onEdit={(v) => edit('token', v)}
+      />
+      <div className="dag-field">
+        <div className="dag-head">
+          <label className="dag-label" htmlFor="dag-allowed">
+            {t('allowedIps')}
+          </label>
+        </div>
+        <textarea
+          id="dag-allowed"
+          className="dag-textarea"
+          rows={Math.min(8, Math.max(3, draft.allowedIpsText.split('\n').length))}
+          value={draft.allowedIpsText}
+          disabled={disabled}
+          onChange={(event) => edit('allowedIpsText', event.target.value)}
+        />
+        <p className="dag-hint">{t('allowedIpsHint')}</p>
+      </div>
+      <CheckRow
+        prefix="dag"
+        id="dag-xff"
+        label={t('trustForwardedForHint')}
+        checked={draft.trustForwardedFor}
+        disabled={disabled}
+        onEdit={(v) => edit('trustForwardedFor', v)}
+      />
+      <TextField
+        prefix="dag"
+        id="dag-cookie"
+        label={t('cookieMaxAgeHours')}
+        hint={t('cookieMaxAgeHoursHint')}
+        value={draft.cookieMaxAgeHours}
+        numeric
+        disabled={disabled}
+        invalid={!isPositiveInt(draft.cookieMaxAgeHours)}
+        invalidLabel={t('invalidNumber')}
+        onEdit={(v) => edit('cookieMaxAgeHours', v)}
+      />
+      <TextField
+        prefix="dag"
+        id="dag-faillimit"
+        label={t('loginFailLimit')}
+        hint={t('loginFailLimitHint')}
+        value={draft.loginFailLimit}
+        numeric
+        disabled={disabled}
+        invalid={!isPositiveInt(draft.loginFailLimit)}
+        invalidLabel={t('invalidNumber')}
+        onEdit={(v) => edit('loginFailLimit', v)}
+      />
+      <TextField
+        prefix="dag"
+        id="dag-cooldown"
+        label={t('loginCooldownMs')}
+        hint={t('loginCooldownMsHint')}
+        value={draft.loginCooldownMs}
+        numeric
+        disabled={disabled}
+        invalid={!isPositiveInt(draft.loginCooldownMs)}
+        invalidLabel={t('invalidNumber')}
+        onEdit={(v) => edit('loginCooldownMs', v)}
+      />
+      {diag !== null ? (
+        <div className={`dag-diag${diag.invalidEntries.length > 0 ? ' dag-diagWarn' : ''}`}>
+          <p className="dag-diagTitle">{t('diagTitle')}</p>
+          <div className="dag-diagRow">
+            <span className="dag-diagKey">{t('diagVerdict')}</span>
+            <span className="dag-diagVal">{verdictLabel(t, diag)}</span>
           </div>
-          <div className="dag-field">
-            <div className="dag-head">
-              <label className="dag-label" htmlFor="dag-faillimit">
-                {t('loginFailLimit')}
-              </label>
-            </div>
-            <input
-              id="dag-faillimit"
-              className={`dag-input${isPositiveInt(draft.loginFailLimit) ? '' : ' dag-inputInvalid'}`}
-              type="text"
-              inputMode="numeric"
-              value={draft.loginFailLimit}
-              disabled={disabled}
-              aria-invalid={!isPositiveInt(draft.loginFailLimit) || undefined}
-              onChange={(event) => edit('loginFailLimit', event.target.value)}
-            />
-            <p className={isPositiveInt(draft.loginFailLimit) ? 'dag-hint' : 'dag-invalid'}>
-              {isPositiveInt(draft.loginFailLimit) ? t('loginFailLimitHint') : t('invalidNumber')}
-            </p>
+          <div className="dag-diagRow">
+            <span className="dag-diagKey">{t('diagClientIp')}</span>
+            <span className="dag-diagVal">{diag.clientIp ?? '—'}</span>
           </div>
-          <div className="dag-field">
-            <div className="dag-head">
-              <label className="dag-label" htmlFor="dag-cooldown">
-                {t('loginCooldownMs')}
-              </label>
-            </div>
-            <input
-              id="dag-cooldown"
-              className={`dag-input${isPositiveInt(draft.loginCooldownMs) ? '' : ' dag-inputInvalid'}`}
-              type="text"
-              inputMode="numeric"
-              value={draft.loginCooldownMs}
-              disabled={disabled}
-              aria-invalid={!isPositiveInt(draft.loginCooldownMs) || undefined}
-              onChange={(event) => edit('loginCooldownMs', event.target.value)}
-            />
-            <p className={isPositiveInt(draft.loginCooldownMs) ? 'dag-hint' : 'dag-invalid'}>
-              {isPositiveInt(draft.loginCooldownMs) ? t('loginCooldownMsHint') : t('invalidNumber')}
-            </p>
+          <div className="dag-diagRow">
+            <span className="dag-diagKey">{t('diagReason')}</span>
+            <span className="dag-diagVal">
+              {diag.reason !== null ? t(REASON_KEYS[diag.reason] ?? diag.reason) : '—'}
+            </span>
           </div>
-          {diag !== null ? (
-            <div className={`dag-diag${diag.invalidEntries.length > 0 ? ' dag-diagWarn' : ''}`}>
-              <p className="dag-diagTitle">{t('diagTitle')}</p>
-              <div className="dag-diagRow">
-                <span className="dag-diagKey">{t('diagVerdict')}</span>
-                <span className="dag-diagVal">{verdictLabel(t, diag)}</span>
-              </div>
-              <div className="dag-diagRow">
-                <span className="dag-diagKey">{t('diagClientIp')}</span>
-                <span className="dag-diagVal">{diag.clientIp ?? '—'}</span>
-              </div>
-              <div className="dag-diagRow">
-                <span className="dag-diagKey">{t('diagReason')}</span>
-                <span className="dag-diagVal">
-                  {diag.reason !== null ? t(REASON_KEYS[diag.reason] ?? diag.reason) : '—'}
-                </span>
-              </div>
-              {diag.invalidEntries.length > 0 ? (
-                <div className="dag-diagRow">
-                  <span className="dag-diagKey">!</span>
-                  <span className="dag-diagVal">
-                    {t('diagInvalid')}
-                    {diag.invalidEntries.join('、')}
-                  </span>
-                </div>
-              ) : null}
+          {diag.invalidEntries.length > 0 ? (
+            <div className="dag-diagRow">
+              <span className="dag-diagKey">!</span>
+              <span className="dag-diagVal">
+                {t('diagInvalid')}
+                {diag.invalidEntries.join('、')}
+              </span>
             </div>
           ) : null}
-          <div className="dag-footer">
-            {status.kind !== 'idle' ? (
-              <p
-                className={`dag-status${status.kind === 'error' ? ' dag-statusError' : ''}`}
-                role="status"
-              >
-                {status.text}
-              </p>
-            ) : null}
-            <button
-              type="button"
-              className="dag-btn dag-btnGhost"
-              disabled={!dirty || saving}
-              onClick={() => {
-                setDraft(draftFromValue(value))
-                setStatus(IDLE_STATUS)
-              }}
-            >
-              {t('discard')}
-            </button>
-            <button
-              type="button"
-              className="dag-btn dag-btnPrimary"
-              disabled={!dirty || invalid || saving || disabled}
-              onClick={onSave}
-            >
-              {t(saving ? 'saving' : 'save')}
-            </button>
-          </div>
         </div>
       ) : null}
-    </li>
+    </CardChrome>
   )
 }

package/src/client/client.ts

@@ -4,22 +4,19 @@
  * （包装见 tsdown.config.ts）；样式沿用官方 data-plugin-css 约定，HMR 据此卸载。
  *
  * 类型说明：浏览器半只用到 slots/locale/connection/remote 的很窄一面，
- * 此处以最小本地接口声明（见 ./scope.ts），避免为构建期类型引入整条官方
- * client 依赖树；运行时契约以官方 dsh-client-ui-settings-plugins 的
- * settings.plugin.item 插槽与 dsh-client-connection 的 settings RPC 面为准。
+ * scope 与基础控件走 @dsh-plus/shared/client 套件（收编自本插件原实现）。
  * rc7 起该插槽为 keyed 槽位：key 必须是卡片编辑的 settings 命名空间
  * （即服务端 settingsNamespace() 注册的同一字面量，见 ../ns.ts），
  * 官方配置页按此 key 与 Host 已注册命名空间配对分发。
  * 配置读写经官方 settings RPC 直连（rc7 起第三方命名空间全量开放；
- * 不复用 settingsScope 服务——非 loopback 页面下它无数据，见 scope.ts）。
+ * 不复用 settingsScope 服务——非 loopback 页面下它无数据）。
  * @module @dsh-plus/access-gate/client
  */
 import type { Context } from '@deepseek-ai/cordis'
-
+import { createApiScope } from '@dsh-plus/shared/client'
 import { SETTINGS_NS } from '../ns.ts'
 import { AccessGateCard } from './card.tsx'
 import { en, NS, zh } from './i18n.ts'
-import type { Scope, ScopeSnapshot, SettingsApi } from './scope.ts'
 import { injectStyle } from './styles.ts'
 
 export const name = 'dsh-plus-access-gate'
@@ -42,7 +39,7 @@ interface RemoteLike {
 }
 
 interface ConnectionLike {
-  api: { settings: SettingsApi }
+  api: { settings: Parameters<typeof createApiScope>[0] }
 }
 
 interface ClientContext {
@@ -54,82 +51,6 @@ interface ClientContext {
   effect(execute: () => () => void, label?: string): unknown
 }
 
-/**
- * api 直连实现的命名空间 scope（官方配置页 tab 同款模式）。
- * 读：describe 取命名空间视图（脱敏 value/revision + 顶层 writable）；
- * 刷新：remote `settings/document-updated`（按命名空间过滤）与
- * `connection/reset`；generation 防旧读覆盖新发布。任何页面 origin
- * （loopback 或 tailnet 信任域名）下行为一致。
- */
-function createApiScope(api: SettingsApi, ns: string, c: ClientContext): Scope {
-  let state: ScopeSnapshot = {
-    status: 'loading',
-    value: undefined,
-    revision: undefined,
-    writable: false,
-  }
-  const listeners = new Set<() => void>()
-  let generation = 0
-  const publish = (next: ScopeSnapshot): void => {
-    state = next
-    for (const listener of [...listeners]) listener()
-  }
-  const load = async (): Promise<void> => {
-    const gen = ++generation
-    let response: Awaited<ReturnType<SettingsApi['describe']>>
-    try {
-      response = await api.describe({})
-    } 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 === undefined) {
-      publish({
-        status: 'unavailable',
-        value: undefined,
-        revision: undefined,
-        writable,
-      })
-      return
-    }
-    publish({
-      status: 'ready',
-      value: view.value,
-      revision: view.revision,
-      writable,
-    })
-  }
-  const refresh = (namespace?: unknown): void => {
-    if (namespace !== undefined && namespace !== ns) return
-    void load()
-  }
-  const disposers = [
-    c.get('remote').$on('settings/document-updated', refresh),
-    c.on('connection/reset', () => {
-      void load()
-    }),
-  ]
-  c.effect(
-    () => () => {
-      for (const dispose of disposers) dispose()
-    },
-    'access-gate: settings scope',
-  )
-  void load()
-  return {
-    getSnapshot: () => state,
-    subscribe: (listener: () => void) => {
-      listeners.add(listener)
-      return () => {
-        listeners.delete(listener)
-      }
-    },
-    load,
-  }
-}
-
 export function apply(ctx: Context): void {
   const c = ctx as unknown as ClientContext
   const tag = injectStyle()
@@ -141,7 +62,7 @@ export function apply(ctx: Context): void {
   )
   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)
+  const scope = createApiScope(api, SETTINGS_NS, c, 'access-gate: settings scope')
   c.slots.inject('settings.plugin.item', () =>
     c.slots.register(
       {

package/src/client/i18n.ts

@@ -1,11 +1,13 @@
 /**
  * 配置卡片文案（zh/en）。经 ctx.locale.register 注册、bind 取用，与官方卡片同机制。
+ * 公共键（save/discard/unsaved 等）来自 shared 的 common 字典，本文件只维护业务键。
  * @module access-gate/client/i18n
  */
+import { commonEn, commonZh, mergeDict } from '@dsh-plus/shared/client'
 
 export const NS = 'dsh-plus-access-gate'
 
-export const zh: Record<string, string> = {
+const ownZh = {
   title: '访问控制',
   description: 'Web 访问围栏：本机直连放行；远程按白名单 IP 或访问令牌放行，其余拦截到登录页。',
   enabled: '启用访问围栏',
@@ -39,20 +41,9 @@ export const zh: Record<string, string> = {
   diagOff: '围栏未启用',
   diagInvalid: '白名单存在无法解析的条目：',
   warnFailClosed: '警告：已启用但令牌与白名单均为空——所有远程访问将被拒绝（含本页之外的设备）。',
-  save: '保存',
-  saving: '保存中…',
-  discard: '放弃',
-  unsaved: '未保存',
-  saveFailed: '保存失败，请检查填写内容。',
-  loading: '加载中…',
-  unavailable: '配置服务不可用。',
-  readOnly: '当前部署无 settings provider，配置为只读；请编辑 settings.yaml。',
-  expand: '展开',
-  collapse: '收起',
-  invalidNumber: '请输入有效数字',
 }
 
-export const en: Record<string, string> = {
+const ownEn = {
   title: 'Access Control',
   description:
     'Web access gate: loopback passes; remote traffic needs an allowlisted IP or the token, others hit the login page.',
@@ -89,15 +80,7 @@ export const en: Record<string, string> = {
   diagInvalid: 'Allowlist entries that failed to parse:',
   warnFailClosed:
     'Warning: enabled with no token and an empty allowlist — all remote access will be refused.',
-  save: 'Save',
-  saving: 'Saving…',
-  discard: 'Discard',
-  unsaved: 'Unsaved',
-  saveFailed: 'Save failed; please check the inputs.',
-  loading: 'Loading…',
-  unavailable: 'Settings service unavailable.',
-  readOnly: 'No settings provider in this deployment; read-only. Edit settings.yaml instead.',
-  expand: 'Expand',
-  collapse: 'Collapse',
-  invalidNumber: 'Enter a valid number',
 }
+
+export const zh: Record<string, string> = mergeDict(commonZh, ownZh)
+export const en: Record<string, string> = mergeDict(commonEn, ownEn)