@dsh-plus/llm-pi 0.1.11 → 0.1.13

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)}
-.lpc-select{appearance:none}
+const extraCss = `
+.lpc-input{width:100%;box-sizing:border-box}
+.lpc-select{appearance: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;padding-right:30px}
 .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)
 }

package/src/client/views/models.tsx

@@ -4,12 +4,13 @@
  * （builtin / models-dev）与 provider 后拉取其 models 列表。
  * @module llm-pi/client/views/models
  */
-import { type ReactElement, useEffect, useState } from 'react'
 
+import { CheckRow } from '@dsh-plus/shared/client'
+import { type ReactElement, useEffect, useState } from 'react'
 import { fetchCatalog, type WireModelsDevStatus } from '../api.ts'
 import { MODALITIES, THINKING_LEVELS } from '../constants.ts'
 import { emptyModelDraft, type ModelDraft, type ReasoningDraft } from '../draft.ts'
-import { CheckRow, TextField } from '../fields.tsx'
+import { TextField } from '../fields.tsx'
 import { CompatEditor } from './compat.tsx'
 
 type CatalogSource = 'builtin' | 'models-dev'
@@ -227,6 +228,7 @@ export function ModelRow(props: ModelRowProps): ReactElement {
           <span className="lpc-label">{t('input')}</span>
           {MODALITIES.map((modality) => (
             <CheckRow
+              prefix="lpc"
               key={modality}
               id={`${id}-input-${modality}`}
               label={modality}

package/src/client/views/provider-fields.tsx

@@ -4,8 +4,9 @@
  * retryPolicy 与模型目录在 views/providers.tsx 的 route 小节内另行渲染。
  * @module llm-pi/client/views/provider-fields
  */
-import type { ReactElement } from 'react'
 
+import { CheckRow } from '@dsh-plus/shared/client'
+import type { ReactElement } from 'react'
 import {
   BUDGET_KEYS,
   CACHE_RETENTION_OPTIONS,
@@ -15,7 +16,7 @@ import {
   TRANSPORT_OPTIONS,
 } from '../constants.ts'
 import type { ProviderDraft } from '../draft.ts'
-import { CheckRow, SelectField, TextField } from '../fields.tsx'
+import { SelectField, TextField } from '../fields.tsx'
 import { pruneCompatForApi } from './compat.tsx'
 
 export interface ProviderScalarFieldsProps {
@@ -113,6 +114,7 @@ export function ProviderScalarFields(props: ProviderScalarFieldsProps): ReactEle
         <span className="lpc-label">{t('defaultInput')}</span>
         {MODALITIES.map((modality) => (
           <CheckRow
+            prefix="lpc"
             key={modality}
             id={`${props.id}-input-${modality}`}
             label={modality}

package/src/client/views/providers.tsx

@@ -4,6 +4,8 @@
  * 支持新增 route（输入键名）与删除 route。
  * @module llm-pi/client/views/providers
  */
+
+import { ChevronDownIcon } from '@dsh-plus/shared/client'
 import { type ReactElement, useState } from 'react'
 
 import type { ProviderDraft } from '../draft.ts'
@@ -111,7 +113,7 @@ export function ProviderSection(props: ProviderSectionProps): ReactElement {
           aria-expanded={open}
           onClick={() => setOpen(!open)}
         >
-          <span className={`lpc-chevron${open ? ' lpc-chevronOpen' : ''}`}>▾</span>
+          <ChevronDownIcon className={`lpc-chevron${open ? ' lpc-chevronOpen' : ''}`} />
           <span className="lpc-routeKey">{route}</span>
           {summary !== '' ? <span className="lpc-routeApi">{summary}</span> : null}
         </button>

package/src/client/scope.ts

@@ -1,59 +0,0 @@
-/**
- * 浏览器半 settingsScope/connection 的最小本地接口声明。
- * 只声明本插件用到的窄面，避免为构建期类型引入整条官方 client 依赖树；
- * 运行时契约以官方 dsh-client-connection 的 settings RPC 面为准
- * （rc7：白名单已移除，任何已注册命名空间均可 describe/update/replace）。
- *
- * 实现说明：本插件不复用 settingsScope 服务的 bind()——它在非 loopback
- * 页面（如经 tailnet 域名访问）下走 memory 模式、永远无数据；这里按官方
- * 配置页 tab 的同款模式用 `api.settings` 直连实现 Scope（describe 读 +
- * remote `settings/document-updated` / `connection/reset` 刷新，见 client.ts）。
- * @module {pkg}/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}) 返回的控制器面。 */
-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 } } }>
-}