@dsh-plus/llm-pi 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-plus/llm-pi",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "dsh-plus service+ui plugin: 基于 PiAiAdapter 的自定义 LLM 路由（全量 compat、模型继承、models.dev 目录兜底）",
   "type": "module",
   "main": "lib/index.js",
@@ -32,7 +32,8 @@
     }
   },
   "dependencies": {
-    "https-proxy-agent": "^7.0.6"
+    "https-proxy-agent": "^7.0.6",
+    "@dsh-plus/shared": "0.1.3"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",

package/src/client/card.tsx

@@ -3,12 +3,20 @@
  * 顶部：enabled / catalogUrl / catalogRefreshHours / 只读状态行（kitSource、
  * modelsDevStatus，来自模型目录端点）+ 保存（settings.replace 全量）与
  * 错误/成功提示；下方为 providers 路由列表（新增/删除/字段编辑/compat/模型
- * 目录，见 views/）。配置读写走官方 settingsScope 传输（scope.ts）。
- * 交互对齐官方卡片与 notify-email：折叠/展开、staged draft、未保存标记。
+ * 目录，见 views/）。外壳与基础控件走 @dsh-plus/shared/client 套件。
  * @module llm-pi/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 ConfigValue, fetchCatalog, refreshCatalog, type WireModelsDevStatus } from './api.ts'
 import {
@@ -19,8 +27,6 @@ import {
   type ProviderDraft,
   toPatch,
 } from './draft.ts'
-import { CheckRow, TextField } from './fields.tsx'
-import type { Scope, SettingsApi } from './scope.ts'
 import { ProvidersSection } from './views/providers.tsx'
 
 export interface CardProps {
@@ -29,13 +35,6 @@ export interface CardProps {
   api: SettingsApi
 }
 
-interface Status {
-  kind: 'idle' | 'ok' | 'error'
-  text: string
-}
-
-const IDLE_STATUS: Status = { kind: 'idle', text: '' }
-
 function modelsDevText(status: WireModelsDevStatus | null, t: (key: string) => string): string {
   if (status === null) return t('modelsDevEmpty')
   if (status.error !== null) return `${t('modelsDevError')}${status.error}`
@@ -57,7 +56,7 @@ export function LlmPiCard(props: CardProps): ReactElement | null {
   const [modelsDevStatus, setModelsDevStatus] = useState<WireModelsDevStatus | null>(null)
   const [saving, setSaving] = useState(false)
   const [refreshing, setRefreshing] = useState(false)
-  const [status, setStatus] = useState<Status>(IDLE_STATUS)
+  const [status, setStatus] = useState<CardStatusState>(IDLE_STATUS)
 
   // 首次拿到解析值后播种草稿；后续 Host 更新不覆盖在途编辑（与官方 staged 表单一致）。
   useEffect(() => {
@@ -172,127 +171,106 @@ export function LlmPiCard(props: CardProps): ReactElement | null {
 
   const disabled = !snapshot.writable
   return (
-    <li className={`lpc-card${open ? ' lpc-cardOpen' : ''}`}>
-      <button
-        type="button"
-        className="lpc-header"
-        aria-expanded={open}
-        aria-label={`${t(open ? 'collapse' : 'expand')}: ${t('title')}`}
-        onClick={() => setOpen(!open)}
-      >
-        <span className="lpc-headText">
-          <span className="lpc-name">{t('title')}</span>
-          <span className="lpc-description">{t('description')}</span>
+    <CardChrome
+      prefix="lpc"
+      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: 'refresh',
+          label: t(refreshing ? 'refreshingCatalog' : 'refreshCatalog'),
+          disabled: disabled || refreshing,
+          onClick: onRefreshCatalog,
+        },
+        {
+          key: 'discard',
+          label: t('discard'),
+          disabled: !dirty || saving,
+          onClick: onDiscard,
+        },
+        {
+          key: 'save',
+          label: t(saving ? 'saving' : 'save'),
+          variant: 'primary',
+          disabled: !dirty || invalid || saving || disabled,
+          onClick: onSave,
+        },
+      ]}
+    >
+      <CheckRow
+        prefix="lpc"
+        id="lpc-enabled"
+        label={t('enabled')}
+        checked={draft.enabled}
+        disabled={disabled}
+        onEdit={(value) => {
+          setDraft({ ...draft, enabled: value })
+          setStatus(IDLE_STATUS)
+        }}
+      />
+      <TextField
+        prefix="lpc"
+        id="lpc-catalogUrl"
+        label={t('catalogUrl')}
+        hint={t('catalogUrlHint')}
+        value={draft.catalogUrl}
+        disabled={disabled}
+        onEdit={(value) => {
+          setDraft({ ...draft, catalogUrl: value })
+          setStatus(IDLE_STATUS)
+        }}
+      />
+      <TextField
+        prefix="lpc"
+        id="lpc-catalogRefresh"
+        label={t('catalogRefreshHours')}
+        hint={t('catalogRefreshHoursHint')}
+        value={draft.catalogRefreshHours}
+        numeric
+        disabled={disabled}
+        invalid={!numTextOk(draft.catalogRefreshHours)}
+        invalidLabel={t('invalidNumber')}
+        onEdit={(value) => {
+          setDraft({ ...draft, catalogRefreshHours: value })
+          setStatus(IDLE_STATUS)
+        }}
+      />
+      <TextField
+        prefix="lpc"
+        id="lpc-catalogProxy"
+        label={t('catalogProxy')}
+        hint={t('catalogProxyHint')}
+        value={draft.catalogProxy}
+        disabled={disabled}
+        onEdit={(value) => {
+          setDraft({ ...draft, catalogProxy: value })
+          setStatus(IDLE_STATUS)
+        }}
+      />
+      <p className="lpc-statusRow">
+        {t('kitSource')}：{kitSource ?? ''}
+      </p>
+      <div className="lpc-statusRow">
+        <span>
+          {t('modelsDevStatus')}：{modelsDevText(modelsDevStatus, t)}
         </span>
-        {dirty ? <span className="lpc-pending">{t('unsaved')}</span> : null}
-        <span className={`lpc-chevron${open ? ' lpc-chevronOpen' : ''}`}>▾</span>
-      </button>
-      {open ? (
-        <div className="lpc-body">
-          {disabled ? (
-            <p className="lpc-readOnly" role="status">
-              {t('readOnly')}
-            </p>
-          ) : null}
-          <CheckRow
-            id="lpc-enabled"
-            label={t('enabled')}
-            checked={draft.enabled}
-            disabled={disabled}
-            onEdit={(value) => {
-              setDraft({ ...draft, enabled: value })
-              setStatus(IDLE_STATUS)
-            }}
-          />
-          <TextField
-            id="lpc-catalogUrl"
-            label={t('catalogUrl')}
-            hint={t('catalogUrlHint')}
-            value={draft.catalogUrl}
-            disabled={disabled}
-            onEdit={(value) => {
-              setDraft({ ...draft, catalogUrl: value })
-              setStatus(IDLE_STATUS)
-            }}
-          />
-          <TextField
-            id="lpc-catalogRefresh"
-            label={t('catalogRefreshHours')}
-            hint={t('catalogRefreshHoursHint')}
-            value={draft.catalogRefreshHours}
-            numeric
-            disabled={disabled}
-            invalid={!numTextOk(draft.catalogRefreshHours)}
-            invalidLabel={t('invalidNumber')}
-            onEdit={(value) => {
-              setDraft({ ...draft, catalogRefreshHours: value })
-              setStatus(IDLE_STATUS)
-            }}
-          />
-          <TextField
-            id="lpc-catalogProxy"
-            label={t('catalogProxy')}
-            hint={t('catalogProxyHint')}
-            value={draft.catalogProxy}
-            disabled={disabled}
-            onEdit={(value) => {
-              setDraft({ ...draft, catalogProxy: value })
-              setStatus(IDLE_STATUS)
-            }}
-          />
-          <p className="lpc-statusRow">
-            {t('kitSource')}：{kitSource ?? ''}
-          </p>
-          <div className="lpc-statusRow">
-            <span>
-              {t('modelsDevStatus')}：{modelsDevText(modelsDevStatus, t)}
-            </span>
-            <button
-              type="button"
-              className="lpc-btn lpc-btnGhost lpc-btnSmall lpc-refreshBtn"
-              disabled={disabled || refreshing}
-              onClick={onRefreshCatalog}
-            >
-              {t(refreshing ? 'refreshingCatalog' : 'refreshCatalog')}
-            </button>
-          </div>
-          <ProvidersSection
-            providers={draft.providers}
-            epoch={epoch}
-            disabled={disabled}
-            t={t}
-            onAddRoute={onAddRoute}
-            onRemoveRoute={onRemoveRoute}
-            onPatchProvider={setProvider}
-          />
-          <div className="lpc-footer">
-            {status.kind !== 'idle' ? (
-              <p
-                className={`lpc-status${status.kind === 'error' ? ' lpc-statusError' : ''}`}
-                role="status"
-              >
-                {status.text}
-              </p>
-            ) : null}
-            <button
-              type="button"
-              className="lpc-btn lpc-btnGhost"
-              disabled={!dirty || saving}
-              onClick={onDiscard}
-            >
-              {t('discard')}
-            </button>
-            <button
-              type="button"
-              className="lpc-btn lpc-btnPrimary"
-              disabled={!dirty || invalid || saving || disabled}
-              onClick={onSave}
-            >
-              {t(saving ? 'saving' : 'save')}
-            </button>
-          </div>
-        </div>
-      ) : null}
-    </li>
+      </div>
+      <ProvidersSection
+        providers={draft.providers}
+        epoch={epoch}
+        disabled={disabled}
+        t={t}
+        onAddRoute={onAddRoute}
+        onRemoveRoute={onRemoveRoute}
+        onPatchProvider={setProvider}
+      />
+    </CardChrome>
   )
 }

package/src/client/client.ts

@@ -4,8 +4,8 @@
  * （包装见 tsdown.config.ts）；样式沿用官方 data-plugin-css 约定，HMR 据此卸载。
  *
  * 类型说明：浏览器半只用到 slots/locale/connection/remote 的很窄一面，
- * 此处以最小本地接口声明（见 ./scope.ts），避免为构建期类型引入整条官方
- * client 依赖树；运行时契约以官方 dsh-client-ui-settings-plugins 的
+ * scope 与基础控件走 @dsh-plus/shared/client 套件（收编自本插件原实现）；
+ * 运行时契约以官方 dsh-client-ui-settings-plugins 的
  * settings.plugin.item 插槽与 dsh-client-connection 的 settings RPC 面为准。
  * rc7 起该插槽为 keyed 槽位：key 必须是卡片编辑的 settings 命名空间
  * （即服务端 settingsNamespace() 注册的同一字面量，见 ../ns.ts），
@@ -17,11 +17,10 @@
  * @module @dsh-plus/llm-pi/client
  */
 import type { Context } from '@deepseek-ai/cordis'
-
+import { createApiScope } from '@dsh-plus/shared/client'
 import { SETTINGS_NS } from '../ns.ts'
 import { LlmPiCard } 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-llm-pi'
@@ -44,7 +43,7 @@ interface RemoteLike {
 }
 
 interface ConnectionLike {
-  api: { settings: SettingsApi }
+  api: { settings: Parameters<typeof createApiScope>[0] }
 }
 
 interface ClientContext {
@@ -56,82 +55,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()
-    },
-    'llm-pi: 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()
@@ -143,7 +66,7 @@ export function apply(ctx: Context): void {
   )
   c.effect(() => c.locale.register(NS, { zh, en }), 'llm-pi: locale')
   const api = c.get('connection').api.settings
-  const scope = createApiScope(api, SETTINGS_NS, c)
+  const scope = createApiScope(api, SETTINGS_NS, c, 'llm-pi: settings scope')
   c.slots.inject('settings.plugin.item', () =>
     c.slots.register(
       {

package/src/client/fields.tsx

@@ -1,6 +1,7 @@
 /**
- * 配置卡片基础控件：文本/数字输入、勾选行、下拉、键值对编辑、JSON 文本框。
- * 视觉对齐官方卡片字段（label + hint + 控件纵列），样式类前缀 lpc-。
+ * llm-pi 特有卡片控件：可折叠小节、键值对编辑、JSON 文本框、带 datalist 的
+ * 文本字段。通用控件（TextField/CheckRow）走 @dsh-plus/shared/client；
+ * 本文件的 SelectField 是 llm-pi 的窄变体（readonly string[] 选项 + 未设置项）。
  * @module llm-pi/client/fields
  */
 import { type ReactElement, useEffect, useState } from 'react'
@@ -81,29 +82,6 @@ export function TextField(props: TextFieldProps): ReactElement {
   )
 }
 
-export interface CheckRowProps {
-  id: string
-  label: string
-  checked: boolean
-  disabled?: boolean
-  onEdit(checked: boolean): void
-}
-
-export function CheckRow(props: CheckRowProps): ReactElement {
-  return (
-    <div className="lpc-checkRow">
-      <input
-        id={props.id}
-        type="checkbox"
-        checked={props.checked}
-        disabled={props.disabled === true}
-        onChange={(event) => props.onEdit(event.target.checked)}
-      />
-      <label htmlFor={props.id}>{props.label}</label>
-    </div>
-  )
-}
-
 export interface SelectFieldProps {
   id: string
   label: string
@@ -156,14 +134,8 @@ export interface KeyValueEditorProps {
 }
 
 export function KeyValueEditor(props: KeyValueEditorProps): ReactElement {
-  const update = (index: number, patch: Partial<HeaderPair>): void => {
-    props.onEdit(props.pairs.map((pair, i) => (i === index ? { ...pair, ...patch } : pair)))
-  }
-  const remove = (index: number): void => {
-    props.onEdit(props.pairs.filter((_, i) => i !== index))
-  }
   return (
-    <div className="lpc-field lpc-wide">
+    <div className="lpc-field">
       <div className="lpc-head">
         <label className="lpc-label" htmlFor={props.id}>
           {props.label}
@@ -171,29 +143,39 @@ export function KeyValueEditor(props: KeyValueEditorProps): ReactElement {
       </div>
       {props.pairs.map((pair, index) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: 可编辑 KV 行无稳定 id，行序即身份（增删行经 onEdit 整体回写）
-        <div className="lpc-kvRow" key={index}>
+        <div className="lpc-kvRow" key={`${props.id}-${index}`}>
           <input
-            id={index === 0 ? props.id : undefined}
-            className="lpc-input"
-            value={pair.key}
             placeholder={props.keyPlaceholder}
+            className="lpc-input lpc-kvKey"
+            type="text"
+            value={pair.key}
             disabled={props.disabled === true}
-            onChange={(event) => update(index, { key: event.target.value })}
+            onChange={(event) => {
+              const next = [...props.pairs]
+              next[index] = { ...pair, key: event.target.value }
+              props.onEdit(next)
+            }}
           />
           <input
-            className="lpc-input"
-            value={pair.value}
             placeholder={props.valuePlaceholder}
+            className="lpc-input lpc-kvValue"
+            type="text"
+            value={pair.value}
             disabled={props.disabled === true}
-            onChange={(event) => update(index, { value: event.target.value })}
+            onChange={(event) => {
+              const next = [...props.pairs]
+              next[index] = { ...pair, value: event.target.value }
+              props.onEdit(next)
+            }}
           />
           <button
             type="button"
             className="lpc-btn lpc-btnGhost lpc-btnSmall"
             disabled={props.disabled === true}
-            onClick={() => remove(index)}
+            aria-label={props.removeLabel}
+            onClick={() => props.onEdit(props.pairs.filter((_, i) => i !== index))}
           >
-            {props.removeLabel}
+            ✕
           </button>
         </div>
       ))}

package/src/client/i18n.ts

@@ -1,11 +1,13 @@
 /**
  * 配置卡片文案（zh/en）。经 ctx.locale.register 注册、bind 取用，与官方卡片同机制。
+ * 公共键（save/discard/unsaved 等）来自 shared 的 common 字典，本文件只维护业务键。
  * @module llm-pi/client/i18n
  */
+import { commonEn, commonZh, mergeDict } from '@dsh-plus/shared/client'
 
 export const NS = 'dsh-plus-llm-pi'
 
-export const zh: Record<string, string> = {
+const ownZh: Record<string, string> = {
   title: 'LLM 路由（llm-pi）',
   description: '自定义 LLM 路由：协议、compat、模型目录与 models.dev 目录兜底。',
   enabled: '启用插件',
@@ -82,20 +84,11 @@ export const zh: Record<string, string> = {
   catalogProvider: '候选 provider',
   catalogLoading: '目录加载中…',
   catalogFailed: '目录加载失败。',
-  save: '保存',
-  saving: '保存中…',
-  discard: '放弃',
-  unsaved: '未保存',
   saveOk: '已保存。',
   saveFailed: '保存失败：',
-  loading: '加载中…',
-  readOnly: '当前部署无 settings provider，配置为只读；请编辑 settings.yaml。',
-  expand: '展开',
-  collapse: '收起',
-  invalidNumber: '请输入有效数字',
 }
 
-export const en: Record<string, string> = {
+const ownEn: Record<string, string> = {
   title: 'LLM routes (llm-pi)',
   description: 'Custom LLM routes: protocol, compat, model catalog and models.dev fallback.',
   enabled: 'Enable plugin',
@@ -174,15 +167,9 @@ export const en: Record<string, string> = {
   catalogProvider: 'Candidate provider',
   catalogLoading: 'Loading catalog…',
   catalogFailed: 'Failed to load catalog.',
-  save: 'Save',
-  saving: 'Saving…',
-  discard: 'Discard',
-  unsaved: 'Unsaved',
   saveOk: 'Saved.',
   saveFailed: 'Save failed: ',
-  loading: 'Loading…',
-  readOnly: 'No settings provider in this deployment; 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)

package/src/client/styles.ts

@@ -1,52 +1,22 @@
 /**
- * 配置卡片样式：沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），
- * 视觉对齐官方卡片（--dsw-alias-* 变量），不覆盖上游任何选择器。
+ * 配置卡片样式：基础规则走 @dsh-plus/shared/client 的 cardCss('lpc')，
+ * 本文件补插件特有规则（route/model 折叠块、键值对行、网格、JSON 文本框）
+ * 及窄屏响应式：views 的双列网格在窄屏转单列、route 头部按钮换行、
+ * 键值对行纵向堆叠、文本框 16px 防 iOS 缩放。
+ * 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载）。
  * @module llm-pi/client/styles
  */
+import { cardCss, injectCardStyle } from '@dsh-plus/shared/client'
 
 export const PLUGIN_ID = '@dsh-plus/llm-pi'
-export const STYLE_TAG_ID = `${PLUGIN_ID}/card.css`
 
-export const cardCss = `
-.lpc-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}
-.lpc-card:hover{border-color:var(--dsw-alias-label-dimmed)}
-.lpc-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
-.lpc-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}
-.lpc-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
-.lpc-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
-.lpc-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
-.lpc-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
-.lpc-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;font-size:12px}
-.lpc-chevronOpen{transform:rotate(180deg)}
-.lpc-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}
-.lpc-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
-.lpc-field{flex-direction:column;gap:6px;padding:12px 0;display:flex;min-width:0}
-.lpc-field+.lpc-field{border-top:1px solid var(--dsw-alias-border-l2)}
-.lpc-head{align-items:center;gap:8px;display:flex}
-.lpc-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
-.lpc-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;width:100%;box-sizing:border-box;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}
-.lpc-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
-.lpc-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
-.lpc-inputInvalid{border-color:var(--dsw-alias-label-error)}
+const extraCss = `
+.lpc-input{width:100%;box-sizing:border-box}
 .lpc-select{appearance:none}
 .lpc-textarea{height:auto;min-height:72px;padding:8px 12px;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;resize:vertical}
-.lpc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
-.lpc-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
-.lpc-checkRow{align-items:center;gap:8px;display:flex;padding:3px 0}
-.lpc-checkRow input{accent-color:var(--dsw-alias-brand-primary)}
-.lpc-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer}
-.lpc-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:14px 0 2px;margin:0}
-.lpc-readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
+.lpc-checkRow{padding:3px 0}
 .lpc-statusRow{color:var(--dsw-alias-label-tertiary);margin:6px 0 0;font-size:12px;line-height:1.6;word-break:break-all}
-.lpc-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}
-.lpc-status{min-width:0;color:var(--dsw-alias-label-secondary);flex:1;margin:0;font-size:12px;line-height:1.5}
-.lpc-statusError{color:var(--dsw-alias-label-error)}
-.lpc-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5;flex:none}
-.lpc-btnGhost{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}
-.lpc-btnGhost:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
-.lpc-btnPrimary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
-.lpc-btn:disabled{opacity:.4;cursor:default}
-.lpc-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.lpc-btn{flex:none}
 .lpc-btnSmall{padding:2px 10px;font-size:12px}
 .lpc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
 .lpc-gridNested{margin-top:2px}
@@ -75,18 +45,24 @@ export const cardCss = `
 .lpc-collapseTitle{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600}
 .lpc-collapseBody{border-top:1px dashed var(--dsw-alias-border-l2);padding-bottom:6px}
 .lpc-refreshBtn{margin-left:8px;vertical-align:middle}
+@media (max-width:767px){
+.lpc-grid{grid-template-columns:1fr}
+.lpc-routeHead{flex-wrap:wrap}
+.lpc-routeKey{white-space:normal;word-break:break-all}
+.lpc-routeBody{margin:0 8px}
+.lpc-modelRow{padding:0 8px}
+.lpc-modelHead{flex-wrap:wrap}
+.lpc-kvRow{flex-direction:column;align-items:stretch}
+.lpc-kvRow .lpc-btn{align-self:flex-end}
+.lpc-textarea{font-size:16px}
+.lpc-statusRow{display:flex;flex-direction:column;gap:4px}
+.lpc-catalogBar .lpc-input{flex:1;min-width:140px}
+}
 `
 
+export const cardCssAll = cardCss('lpc', 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.appendChild(tag)
-  return tag
+  return injectCardStyle(PLUGIN_ID, cardCssAll)
 }