@dsh-plus/access-gate 0.1.0 → 0.1.2

package/src/client/styles.ts

@@ -1,55 +1,17 @@
 /**
- * 配置卡片样式：沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），
- * 视觉对齐官方卡片（--dsw-alias-* 变量），不覆盖上游任何选择器。
+ * 配置卡片样式：基础规则走 @dsh-plus/shared/client 的 cardCss('dag')，
+ * 本文件只补插件特有规则（textarea / 诊断面板 / 警示条）。
+ * 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载）。
  * @module access-gate/client/styles
  */
+import { cardCss, injectCardStyle } from '@dsh-plus/shared/client'
 
 export const PLUGIN_ID = '@dsh-plus/access-gate'
-export const STYLE_TAG_ID = `${PLUGIN_ID}/card.css`
 
-export const cardCss = `
-.dag-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
-.dag-card:hover{border-color:var(--dsw-alias-label-dimmed)}
-.dag-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
-.dag-header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
-.dag-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
-.dag-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
-.dag-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
-.dag-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
-.dag-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;font-size:12px}
-.dag-chevronOpen{transform:rotate(180deg)}
-.dag-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}
-.dag-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
-.dag-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}
-.dag-field+.dag-field{border-top:1px solid var(--dsw-alias-border-l2)}
-.dag-head{align-items:center;gap:8px;display:flex}
-.dag-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
-.dag-badge{white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
-.dag-badgeSet{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
-.dag-badgeUnset{color:var(--dsw-alias-label-tertiary)}
-.dag-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}
-.dag-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
-.dag-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
-.dag-inputInvalid{border-color:var(--dsw-alias-label-error)}
+const extraCss = `
 .dag-textarea{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.6;min-height:96px;resize:vertical;font-family:var(--dsw-alias-font-mono,ui-monospace,monospace)}
 .dag-textarea:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
 .dag-textarea:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
-.dag-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
-.dag-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
-.dag-checkRow{align-items:center;gap:8px;display:flex;padding:6px 0}
-.dag-checkRow input{accent-color:var(--dsw-alias-brand-primary)}
-.dag-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer}
-.dag-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:12px 0 2px;margin:0}
-.dag-readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
-.dag-footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex;flex-wrap:wrap}
-.dag-status{min-width:0;color:var(--dsw-alias-label-secondary);flex:1;margin:0;font-size:12px;line-height:1.5}
-.dag-statusError{color:var(--dsw-alias-label-error)}
-.dag-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5}
-.dag-btnGhost{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}
-.dag-btnGhost:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
-.dag-btnPrimary{background:var(--dsh-plus-brand,#3d6dff);color:#fff}
-.dag-btn:disabled{opacity:.4;cursor:default}
-.dag-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
 .dag-diag{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:10px 12px;margin:12px 0 0;flex-direction:column;gap:4px;display:flex}
 .dag-diagTitle{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;margin:0}
 .dag-diagRow{display:flex;gap:8px;font-size:12px;line-height:1.6}
@@ -57,18 +19,16 @@ export const cardCss = `
 .dag-diagVal{color:var(--dsw-alias-label-primary);margin:0}
 .dag-diagWarn{color:var(--dsw-alias-label-error);border-color:var(--dsw-alias-label-error)}
 .dag-warn{color:var(--dsh-plus-warn,#c9503f);border:1px solid var(--dsh-plus-warn-border,rgba(201,80,63,.4));border-radius:8px;padding:8px 12px;margin:12px 0 0;font-size:12px;line-height:1.6}
+@media (max-width:767px){
+.dag-diagRow{flex-direction:column;gap:2px}
+.dag-diagKey{min-width:0}
+.dag-textarea{font-size:16px}
+}
 `
 
+export const cardCssAll = cardCss('dag', extraCss)
+
 /** 幂等注入样式标签；返回标签（已存在或环境无 document 时为 null）。 */
 export function injectStyle(): HTMLStyleElement | null {
-  if (typeof document === 'undefined') return null
-  if (document.querySelector(`style[data-plugin-css=${JSON.stringify(STYLE_TAG_ID)}]`) !== null) {
-    return null
-  }
-  const tag = document.createElement('style')
-  tag.dataset.plugin = PLUGIN_ID
-  tag.dataset.pluginCss = STYLE_TAG_ID
-  tag.textContent = cardCss
-  document.head.append(tag)
-  return tag
+  return injectCardStyle(PLUGIN_ID, cardCssAll)
 }

package/src/client/scope.ts

@@ -1,53 +0,0 @@
-/**
- * 浏览器半 settingsScope/connection 的最小本地接口声明（notify-email 同款）。
- * 只声明本插件用到的窄面，避免为构建期类型引入整条官方 client 依赖树；
- * 运行时契约以官方 dsh-client-connection 的 settings RPC 面为准。
- * @module access-gate/client/scope
- */
-
-/** settings 命名空间 scope 的快照（官方 SettingsScopeSnapshot 的最小投影）。 */
-export interface ScopeSnapshot {
-  status: 'loading' | 'ready' | 'unavailable'
-  /** schema 解析后的配置值（secret 字段已脱敏剥除）。 */
-  value: unknown
-  /** 命名空间 revision，写操作 fencing 用；首次 Host 应答前为 undefined。 */
-  revision: number | undefined
-  /** Host 文档是否可写。 */
-  writable: boolean
-}
-
-/** settingsScope.bind({namespace}) 返回的控制器面（本插件由 api 直连实现）。 */
-export interface Scope {
-  getSnapshot(): ScopeSnapshot
-  subscribe(listener: () => void): () => void
-  load(): Promise<void>
-}
-
-/** connection api.settings 的 RPC 面（本插件用到的三个方法）。 */
-export interface SettingsApi {
-  describe(payload?: Record<string, never>): Promise<{
-    result: {
-      ok: boolean
-      value?: {
-        writable: boolean
-        namespaces: Array<{
-          ns: string
-          value: unknown
-          revision: number
-          secrets: Array<{ path: string[]; set: boolean }>
-        }>
-      }
-      error?: { message?: string }
-    }
-  }>
-  update(request: {
-    ns: string
-    patch: Record<string, unknown>
-    expectedRevision?: number
-  }): Promise<{ result: { ok: boolean; error?: { message?: string } } }>
-  replace(request: {
-    ns: string
-    section: Record<string, unknown>
-    expectedRevision?: number
-  }): Promise<{ result: { ok: boolean; error?: { message?: string } } }>
-}