@dsh-plus/image-studio 0.1.21 → 0.1.23

package/src/client/card.tsx

@@ -5,11 +5,15 @@
  * staged draft 编辑；提供商预设逐条附 API Key 管理（凭据端点，值不回显）。
  * JSON 字段（extraHeaders/paramSpecs）以文本镜像编辑，保存时解析 +
  * validateParamSpecs 本地校验，非法即拦在保存前。
+ * 草稿类型与纯转换在 ./draft.ts，三组预设编辑区在 ./preset-sections.tsx。
  * @module image-studio/client/card
  */
 import {
+  type CardAction,
   CardChrome,
+  CardLoading,
   type CardStatusState,
+  cardVariantFor,
   IDLE_STATUS,
   type NamespaceSettingsApi,
   type PluginConfigViewProps,
@@ -19,10 +23,21 @@ import {
 import { type ReactElement, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 
 import type { ImageStudioConfig } from '../config.ts'
-import { credentialRefNameOf, isValidPresetId } from '../credentials.ts'
-import { validateParamSpecs } from '../params/spec.ts'
-import { fetchCredentialStatus, fetchProviders, setCredential, unsetCredential } from './api.ts'
+import { fetchProviders } from './api.ts'
+import {
+  type Draft,
+  draftOf,
+  type ParamDraft,
+  type PromptDraft,
+  type ProviderDraft,
+  payloadOf,
+} from './draft.ts'
 import type { Translate } from './i18n.ts'
+import {
+  ParamPresetSection,
+  PromptPresetSection,
+  ProviderPresetSection,
+} from './preset-sections.tsx'
 
 export interface CardProps extends PluginConfigViewProps {
   t: Translate
@@ -30,172 +45,104 @@ export interface CardProps extends PluginConfigViewProps {
   api: NamespaceSettingsApi
 }
 
-/** 编辑态草稿：JSON 字段与数值以文本承载（保存时解析校验）。 */
-interface ProviderDraft {
-  id: string
-  name: string
-  protocol: string
-  baseUrl: string
-  model: string
-  extraHeadersText: string
-}
-
-interface ParamDraft {
-  id: string
-  name: string
-  endpoint: string
-  specsText: string
-}
-
-interface PromptDraft {
-  id: string
-  name: string
-  text: string
-}
-
-interface Draft {
-  providers: ProviderDraft[]
-  params: ParamDraft[]
-  prompts: PromptDraft[]
-  maxConcurrent: string
-  requestTimeoutMs: string
-  proxy: string
-  galleryMaxItems: string
-  uploadTtlHours: string
-}
-
-/** 配置值 → 编辑草稿。 */
-function draftOf(value: ImageStudioConfig): Draft {
-  return {
-    providers: value.providerPresets.map((p) => ({
-      id: p.id,
-      name: p.name,
-      protocol: p.protocol,
-      baseUrl: p.baseUrl,
-      model: p.model,
-      extraHeadersText: JSON.stringify(p.extraHeaders ?? {}, null, 2),
-    })),
-    params: value.paramPresets.map((p) => ({
-      id: p.id,
-      name: p.name,
-      endpoint: p.endpoint,
-      specsText: JSON.stringify(p.paramSpecs ?? {}, null, 2),
-    })),
-    prompts: value.promptPresets.map((p) => ({ id: p.id, name: p.name, text: p.text })),
-    maxConcurrent: String(value.maxConcurrent),
-    requestTimeoutMs: String(value.requestTimeoutMs),
-    proxy: value.proxy,
-    galleryMaxItems: String(value.galleryMaxItems),
-    uploadTtlHours: String(value.uploadTtlHours),
-  }
-}
-
-function parseJson(text: string, label: string): unknown {
-  try {
-    return JSON.parse(text)
-  } catch (error) {
-    throw new Error(`${label} ${error instanceof Error ? error.message : String(error)}`)
-  }
-}
-
-/** 草稿 → settings 载荷（边界校验：JSON 解析、参数表校验、预设 id 形态）。 */
-function payloadOf(draft: Draft): Record<string, unknown> {
-  const providers = draft.providers.map((p) => {
-    if (!isValidPresetId(p.id)) throw new Error(p.id)
-    return {
-      id: p.id,
-      name: p.name,
-      protocol: p.protocol,
-      baseUrl: p.baseUrl,
-      model: p.model,
-      credentialRef: credentialRefNameOf(p.id),
-      extraHeaders: parseJson(p.extraHeadersText, p.id) as Record<string, string>,
-    }
-  })
-  const params = draft.params.map((p) => ({
-    id: p.id,
-    name: p.name,
-    endpoint: p.endpoint,
-    paramSpecs: validateParamSpecs(parseJson(p.specsText, p.id)),
-  }))
-  return {
-    promptPresets: draft.prompts.map((p) => ({ id: p.id, name: p.name, text: p.text })),
-    paramPresets: params,
-    providerPresets: providers,
-    maxConcurrent: Math.max(0, Math.floor(Number(draft.maxConcurrent) || 0)),
-    requestTimeoutMs: Math.max(10_000, Math.floor(Number(draft.requestTimeoutMs) || 300_000)),
-    proxy: draft.proxy,
-    galleryMaxItems: Math.max(0, Math.floor(Number(draft.galleryMaxItems) || 0)),
-    uploadTtlHours: Math.max(1, Math.floor(Number(draft.uploadTtlHours) || 24)),
-  }
-}
-
-/** 单个提供商预设的 API Key 行（describe 徽标 + 设置/删除，值不回显）。 */
-function CredentialRow(props: { t: Translate; presetId: string; disabled: boolean }): ReactElement {
-  const { t, presetId, disabled } = props
-  const [configured, setConfigured] = useState<boolean | null>(null)
-  const [value, setValue] = useState('')
-  const [busy, setBusy] = useState(false)
-
+/** 协议目录（服务端 /providers）：驱动提供商预设的协议下拉。 */
+function useProtocols(): Array<{ id: string; label: string }> {
+  const [protocols, setProtocols] = useState<Array<{ id: string; label: string }>>([])
   useEffect(() => {
-    if (!isValidPresetId(presetId)) return
-    let alive = true
-    fetchCredentialStatus(presetId)
-      .then((res) => {
-        if (alive) setConfigured(res.configured)
-      })
+    fetchProviders()
+      .then((res) => setProtocols(res.protocols.map((p) => ({ id: p.id, label: p.label }))))
       .catch(() => {})
-    return () => {
-      alive = false
-    }
-  }, [presetId])
+  }, [])
+  return protocols
+}
 
-  const act = (fn: () => Promise<unknown>): void => {
-    setBusy(true)
-    fn()
-      .then(() => fetchCredentialStatus(presetId))
-      .then((res) => {
-        setConfigured(res.configured)
-        setValue('')
-      })
-      .catch(() => {})
-      .finally(() => setBusy(false))
-  }
+/** 卡片动作：放弃（回到 Host 值并重置基线）与保存。 */
+function cardActions(options: {
+  t: Translate
+  dirty: boolean
+  saving: boolean
+  disabled: boolean
+  onDiscard(): void
+  onSave(): void
+}): CardAction[] {
+  const { t } = options
+  return [
+    {
+      key: 'discard',
+      label: t('card.discard'),
+      disabled: !options.dirty || options.saving,
+      onClick: options.onDiscard,
+    },
+    {
+      key: 'save',
+      label: t(options.saving ? 'common.saving' : 'card.save'),
+      variant: 'primary',
+      disabled: !options.dirty || options.saving || options.disabled,
+      onClick: options.onSave,
+    },
+  ]
+}
 
+/** 高级项：并发 / 超时 / 代理 / 画廊上限 / 上传保留时长。 */
+function AdvancedFields(props: {
+  t: Translate
+  draft: Draft
+  disabled: boolean
+  onPatch(patch: Partial<Draft>): void
+}): ReactElement {
+  const { t, draft, disabled, onPatch } = props
   return (
-    <div className="imsc-credRow">
-      <input
-        className="imsc-input"
-        type="password"
-        autoComplete="off"
-        placeholder={t('card.credential.placeholder')}
-        aria-label={t('card.credential.label')}
-        value={value}
-        disabled={disabled || busy}
-        onChange={(event) => setValue(event.target.value)}
+    <>
+      <h4 className="imsc-groupTitle">{t('card.advanced')}</h4>
+      <div className="imsc-grid2">
+        <TextField
+          prefix="imsc"
+          id="imsc-conc"
+          label={t('card.maxConcurrent')}
+          numeric
+          value={draft.maxConcurrent}
+          disabled={disabled}
+          onEdit={(v) => onPatch({ maxConcurrent: v })}
+        />
+        <TextField
+          prefix="imsc"
+          id="imsc-timeout"
+          label={t('card.requestTimeoutMs')}
+          numeric
+          value={draft.requestTimeoutMs}
+          disabled={disabled}
+          onEdit={(v) => onPatch({ requestTimeoutMs: v })}
+        />
+      </div>
+      <div className="imsc-grid2">
+        <TextField
+          prefix="imsc"
+          id="imsc-proxy"
+          label={t('card.proxy')}
+          value={draft.proxy}
+          disabled={disabled}
+          onEdit={(v) => onPatch({ proxy: v })}
+        />
+        <TextField
+          prefix="imsc"
+          id="imsc-gmax"
+          label={t('card.galleryMaxItems')}
+          numeric
+          value={draft.galleryMaxItems}
+          disabled={disabled}
+          onEdit={(v) => onPatch({ galleryMaxItems: v })}
+        />
+      </div>
+      <TextField
+        prefix="imsc"
+        id="imsc-upload-ttl"
+        label={t('card.uploadTtlHours')}
+        numeric
+        value={draft.uploadTtlHours}
+        disabled={disabled}
+        onEdit={(v) => onPatch({ uploadTtlHours: v })}
       />
-      {configured !== null ? (
-        <span className={`imsc-badge ${configured ? 'imsc-badgeSet' : 'imsc-badgeUnset'}`}>
-          {t(configured ? 'card.credential.configured' : 'card.credential.unconfigured')}
-        </span>
-      ) : null}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled || busy || value === '' || !isValidPresetId(presetId)}
-        onClick={() => act(() => setCredential(presetId, value))}
-      >
-        {t('card.credential.set')}
-      </button>
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled || busy || configured !== true || !isValidPresetId(presetId)}
-        onClick={() => act(() => unsetCredential(presetId))}
-      >
-        {t('card.credential.unset')}
-      </button>
-    </div>
+    </>
   )
 }
 
@@ -212,13 +159,7 @@ export function StudioConfigCard(props: CardProps): ReactElement | string | null
   const [baseline, setBaseline] = useState('')
   const [saving, setSaving] = useState(false)
   const [status, setStatus] = useState<CardStatusState>(IDLE_STATUS)
-  const [protocols, setProtocols] = useState<Array<{ id: string; label: string }>>([])
-
-  useEffect(() => {
-    fetchProviders()
-      .then((res) => setProtocols(res.protocols.map((p) => ({ id: p.id, label: p.label }))))
-      .catch(() => {})
-  }, [])
+  const protocols = useProtocols()
 
   useEffect(() => {
     if (value === undefined || draft !== null) return
@@ -235,12 +176,11 @@ export function StudioConfigCard(props: CardProps): ReactElement | string | null
   // 插件页 summary 视图只出一行简介（hooks 已全部落定，可安全提前返回）。
   if (props.view === 'summary') return t('card.summary')
 
+  // 插件页 page 视图内嵌宿主页面容器（已带页面级内边距与标题），用无边框分节。
+  const variant = cardVariantFor(props.view)
+
   if (value === undefined || draft === null) {
-    return (
-      <li className="imsc-card">
-        <p className="imsc-loading">{t('common.loading')}</p>
-      </li>
-    )
+    return <CardLoading prefix="imsc" variant={variant} text={t('common.loading')} />
   }
 
   const disabled = !snapshot.writable
@@ -277,12 +217,19 @@ export function StudioConfigCard(props: CardProps): ReactElement | string | null
     setDraft({ ...draft, ...next })
     setStatus(IDLE_STATUS)
   }
-  const patchProvider = (index: number, next: Partial<ProviderDraft>): void =>
-    patch({ providers: draft.providers.map((p, i) => (i === index ? { ...p, ...next } : p)) })
-  const patchParam = (index: number, next: Partial<ParamDraft>): void =>
-    patch({ params: draft.params.map((p, i) => (i === index ? { ...p, ...next } : p)) })
-  const patchPrompt = (index: number, next: Partial<PromptDraft>): void =>
-    patch({ prompts: draft.prompts.map((p, i) => (i === index ? { ...p, ...next } : p)) })
+  const sectionProps = {
+    t,
+    draft,
+    disabled,
+    protocols,
+    onPatch: patch,
+    onPatchProvider: (index: number, next: Partial<ProviderDraft>): void =>
+      patch({ providers: draft.providers.map((p, i) => (i === index ? { ...p, ...next } : p)) }),
+    onPatchParam: (index: number, next: Partial<ParamDraft>): void =>
+      patch({ params: draft.params.map((p, i) => (i === index ? { ...p, ...next } : p)) }),
+    onPatchPrompt: (index: number, next: Partial<PromptDraft>): void =>
+      patch({ prompts: draft.prompts.map((p, i) => (i === index ? { ...p, ...next } : p)) }),
+  }
 
   return (
     <CardChrome
@@ -291,6 +238,7 @@ export function StudioConfigCard(props: CardProps): ReactElement | string | null
       description={t('card.description')}
       open={open}
       onToggle={setOpen}
+      variant={variant}
       statusBadge={{
         text:
           draft.providers.length > 0
@@ -302,301 +250,24 @@ export function StudioConfigCard(props: CardProps): ReactElement | string | null
       dirtyLabel={t('common.unsaved')}
       readOnlyNotice={disabled ? t('card.readOnly') : undefined}
       status={status}
-      actions={[
-        {
-          key: 'discard',
-          label: t('card.discard'),
-          disabled: !dirty || saving,
-          onClick: () => {
-            const restored = draftOf(value)
-            setDraft(restored)
-            setBaseline(JSON.stringify(restored))
-            setStatus(IDLE_STATUS)
-          },
+      actions={cardActions({
+        t,
+        dirty,
+        saving,
+        disabled,
+        onDiscard: () => {
+          const restored = draftOf(value)
+          setDraft(restored)
+          setBaseline(JSON.stringify(restored))
+          setStatus(IDLE_STATUS)
         },
-        {
-          key: 'save',
-          label: t(saving ? 'common.saving' : 'card.save'),
-          variant: 'primary',
-          disabled: !dirty || saving || disabled,
-          onClick: onSave,
-        },
-      ]}
+        onSave,
+      })}
     >
-      <h4 className="imsc-groupTitle">{t('card.providers')}</h4>
-      {draft.providers.map((provider, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: 草稿行无稳定 id（id 字段本身可编辑），行序即身份
-        <div className="imsc-presetBox" key={`provider-${index}`}>
-          <div className="imsc-presetHead">
-            <span className="imsc-presetName">{provider.name || provider.id || '—'}</span>
-            <button
-              type="button"
-              className="imsc-btn imsc-btnGhost"
-              disabled={disabled}
-              onClick={() => patch({ providers: draft.providers.filter((_, i) => i !== index) })}
-            >
-              {t('common.delete')}
-            </button>
-          </div>
-          <div className="imsc-grid2">
-            <TextField
-              prefix="imsc"
-              id={`imsc-pid-${index}`}
-              label={t('card.field.id')}
-              hint={t('card.idHint')}
-              value={provider.id}
-              invalid={provider.id !== '' && !isValidPresetId(provider.id)}
-              invalidLabel={t('card.idInvalid')}
-              disabled={disabled}
-              onEdit={(v) => patchProvider(index, { id: v })}
-            />
-            <TextField
-              prefix="imsc"
-              id={`imsc-pname-${index}`}
-              label={t('card.field.name')}
-              value={provider.name}
-              disabled={disabled}
-              onEdit={(v) => patchProvider(index, { name: v })}
-            />
-          </div>
-          <div className="imsc-grid2">
-            <div className="imsc-field">
-              <div className="imsc-head">
-                <label className="imsc-label" htmlFor={`imsc-pproto-${index}`}>
-                  {t('card.field.protocol')}
-                </label>
-              </div>
-              <select
-                id={`imsc-pproto-${index}`}
-                className="imsc-select"
-                value={provider.protocol}
-                disabled={disabled}
-                onChange={(event) => patchProvider(index, { protocol: event.target.value })}
-              >
-                {(protocols.length > 0
-                  ? protocols
-                  : [{ id: provider.protocol, label: provider.protocol }]
-                ).map((protocol) => (
-                  <option key={protocol.id} value={protocol.id}>
-                    {protocol.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <TextField
-              prefix="imsc"
-              id={`imsc-pmodel-${index}`}
-              label={t('card.field.model')}
-              value={provider.model}
-              disabled={disabled}
-              onEdit={(v) => patchProvider(index, { model: v })}
-            />
-          </div>
-          <TextField
-            prefix="imsc"
-            id={`imsc-purl-${index}`}
-            label={t('card.field.baseUrl')}
-            value={provider.baseUrl}
-            disabled={disabled}
-            onEdit={(v) => patchProvider(index, { baseUrl: v })}
-          />
-          <div className="imsc-field">
-            <div className="imsc-head">
-              <label className="imsc-label" htmlFor={`imsc-pheaders-${index}`}>
-                {t('card.field.extraHeaders')}
-              </label>
-            </div>
-            <textarea
-              id={`imsc-pheaders-${index}`}
-              className="imsc-textarea"
-              value={provider.extraHeadersText}
-              disabled={disabled}
-              onChange={(event) => patchProvider(index, { extraHeadersText: event.target.value })}
-            />
-          </div>
-          <CredentialRow t={t} presetId={provider.id} disabled={disabled} />
-        </div>
-      ))}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled}
-        onClick={() =>
-          patch({
-            providers: [
-              ...draft.providers,
-              {
-                id: '',
-                name: '',
-                protocol: protocols[0]?.id ?? 'openai-images',
-                baseUrl: '',
-                model: '',
-                extraHeadersText: '{}',
-              },
-            ],
-          })
-        }
-      >
-        {t('card.add')} · {t('card.providers')}
-      </button>
-
-      <h4 className="imsc-groupTitle">{t('card.prompts')}</h4>
-      {draft.prompts.map((prompt, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: 草稿行无稳定 id，行序即身份
-        <div className="imsc-presetBox" key={`prompt-${index}`}>
-          <div className="imsc-presetHead">
-            <input
-              className="imsc-input"
-              aria-label={t('card.field.name')}
-              value={prompt.name}
-              disabled={disabled}
-              onChange={(event) => patchPrompt(index, { name: event.target.value })}
-            />
-            <button
-              type="button"
-              className="imsc-btn imsc-btnGhost"
-              disabled={disabled}
-              onClick={() => patch({ prompts: draft.prompts.filter((_, i) => i !== index) })}
-            >
-              {t('common.delete')}
-            </button>
-          </div>
-          <textarea
-            className="imsc-textarea"
-            aria-label={t('card.field.text')}
-            value={prompt.text}
-            disabled={disabled}
-            onChange={(event) => patchPrompt(index, { text: event.target.value })}
-          />
-        </div>
-      ))}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled}
-        onClick={() =>
-          patch({
-            prompts: [
-              ...draft.prompts,
-              { id: `prompt-${Date.now().toString(36)}`, name: '', text: '' },
-            ],
-          })
-        }
-      >
-        {t('card.add')} · {t('card.prompts')}
-      </button>
-
-      <h4 className="imsc-groupTitle">{t('card.params')}</h4>
-      {draft.params.map((param, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: 草稿行无稳定 id，行序即身份
-        <div className="imsc-presetBox" key={`param-${index}`}>
-          <div className="imsc-presetHead">
-            <input
-              className="imsc-input"
-              aria-label={t('card.field.name')}
-              value={param.name}
-              disabled={disabled}
-              onChange={(event) => patchParam(index, { name: event.target.value })}
-            />
-            <select
-              className="imsc-select"
-              aria-label={t('card.field.endpoint')}
-              value={param.endpoint}
-              disabled={disabled}
-              onChange={(event) => patchParam(index, { endpoint: event.target.value })}
-            >
-              <option value="generation">{t('tab.generation')}</option>
-              <option value="edit">{t('tab.edit')}</option>
-            </select>
-            <button
-              type="button"
-              className="imsc-btn imsc-btnGhost"
-              disabled={disabled}
-              onClick={() => patch({ params: draft.params.filter((_, i) => i !== index) })}
-            >
-              {t('common.delete')}
-            </button>
-          </div>
-          <textarea
-            className="imsc-textarea"
-            aria-label={t('card.field.paramSpecs')}
-            placeholder='{ "size": { "enabled": true, "value": "1024x1024" } }'
-            value={param.specsText}
-            disabled={disabled}
-            onChange={(event) => patchParam(index, { specsText: event.target.value })}
-          />
-        </div>
-      ))}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled}
-        onClick={() =>
-          patch({
-            params: [
-              ...draft.params,
-              {
-                id: `param-${Date.now().toString(36)}`,
-                name: '',
-                endpoint: 'generation',
-                specsText: '{}',
-              },
-            ],
-          })
-        }
-      >
-        {t('card.add')} · {t('card.params')}
-      </button>
-
-      <h4 className="imsc-groupTitle">{t('card.advanced')}</h4>
-      <div className="imsc-grid2">
-        <TextField
-          prefix="imsc"
-          id="imsc-conc"
-          label={t('card.maxConcurrent')}
-          numeric
-          value={draft.maxConcurrent}
-          disabled={disabled}
-          onEdit={(v) => patch({ maxConcurrent: v })}
-        />
-        <TextField
-          prefix="imsc"
-          id="imsc-timeout"
-          label={t('card.requestTimeoutMs')}
-          numeric
-          value={draft.requestTimeoutMs}
-          disabled={disabled}
-          onEdit={(v) => patch({ requestTimeoutMs: v })}
-        />
-      </div>
-      <div className="imsc-grid2">
-        <TextField
-          prefix="imsc"
-          id="imsc-proxy"
-          label={t('card.proxy')}
-          value={draft.proxy}
-          disabled={disabled}
-          onEdit={(v) => patch({ proxy: v })}
-        />
-        <TextField
-          prefix="imsc"
-          id="imsc-gmax"
-          label={t('card.galleryMaxItems')}
-          numeric
-          value={draft.galleryMaxItems}
-          disabled={disabled}
-          onEdit={(v) => patch({ galleryMaxItems: v })}
-        />
-      </div>
-      <TextField
-        prefix="imsc"
-        id="imsc-upload-ttl"
-        label={t('card.uploadTtlHours')}
-        numeric
-        value={draft.uploadTtlHours}
-        disabled={disabled}
-        onEdit={(v) => patch({ uploadTtlHours: v })}
-      />
+      <ProviderPresetSection {...sectionProps} />
+      <PromptPresetSection {...sectionProps} />
+      <ParamPresetSection {...sectionProps} />
+      <AdvancedFields t={t} draft={draft} disabled={disabled} onPatch={patch} />
     </CardChrome>
   )
 }