@dsh-plus/image-studio 0.1.34 → 0.1.36

package/src/client/preset-sections.tsx

@@ -1,9 +1,20 @@
 /**
  * 配置卡片的三组预设编辑区：提供商（含逐条 API Key 管理）、提示词、参数。
  * 从 card.tsx 拆出，避免单组件过长；草稿类型与纯转换在 ./draft.ts。
+ *
+ * 排版与控件一律走 @dsh-plus/shared/client 套件（Section / ListEditor / 字段控件），
+ * 与其它插件卡片保持一致：条目头提供折叠/上移/下移/删除，新增固定在列表底部。
  * @module image-studio/client/preset-sections
  */
-import { TextField } from '@dsh-plus/shared/client'
+import {
+  Button,
+  CodeField,
+  ListEditor,
+  type ListLabels,
+  Section,
+  SelectField,
+  TextField,
+} from '@dsh-plus/shared/client'
 import { type ReactElement, useEffect, useState } from 'react'
 
 import { isValidPresetId } from '../credentials.ts'
@@ -68,22 +79,18 @@ function CredentialRow(props: { t: Translate; presetId: string; disabled: boolea
           {t(configured ? 'card.credential.configured' : 'card.credential.unconfigured')}
         </span>
       ) : null}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
+      <Button
+        prefix="imsc"
+        label={t('card.credential.set')}
         disabled={disabled || busy || value === '' || !isValidPresetId(presetId)}
         onClick={() => act(() => setCredential(presetId, value))}
-      >
-        {t('card.credential.set')}
-      </button>
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
+      />
+      <Button
+        prefix="imsc"
+        label={t('card.credential.unset')}
         disabled={disabled || busy || configured !== true || !isValidPresetId(presetId)}
         onClick={() => act(() => unsetCredential(presetId))}
-      >
-        {t('card.credential.unset')}
-      </button>
+      />
     </div>
   )
 }
@@ -100,26 +107,34 @@ export interface PresetSectionsProps {
   onPatchPrompt(index: number, patch: Partial<PromptDraft>): void
 }
 
+/** 列表编辑器文案（公共字典键，各插件一致）。 */
+function listLabels(t: Translate): ListLabels {
+  return {
+    add: t('listAdd'),
+    remove: t('listRemove'),
+    up: t('listMoveUp'),
+    down: t('listMoveDown'),
+    duplicate: t('listDuplicate'),
+    collapse: t('collapse'),
+    expand: t('expand'),
+    empty: t('listEmpty'),
+  }
+}
+
 export function ProviderPresetSection(props: PresetSectionsProps): ReactElement {
   const { t, draft, disabled, protocols, onPatch, onPatchProvider } = props
   return (
-    <>
-      <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={() => onPatch({ providers: draft.providers.filter((_, i) => i !== index) })}
-            >
-              {t('common.delete')}
-            </button>
-          </div>
-          <div className="imsc-grid2">
+    <Section prefix="imsc" title={t('card.providers')} description={t('card.providersHint')}>
+      <ListEditor
+        prefix="imsc"
+        items={draft.providers}
+        labels={listLabels(t)}
+        disabled={disabled}
+        titleOf={(provider) => provider.name || provider.id || '—'}
+        create={() => emptyProviderDraft(protocols[0]?.id ?? 'openai-images')}
+        onChange={(providers) => onPatch({ providers })}
+        renderItem={(provider, index) => (
+          <>
             <TextField
               prefix="imsc"
               id={`imsc-pid-${index}`}
@@ -139,31 +154,19 @@ export function ProviderPresetSection(props: PresetSectionsProps): ReactElement
               disabled={disabled}
               onEdit={(v) => onPatchProvider(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) => onPatchProvider(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>
+            <SelectField
+              prefix="imsc"
+              id={`imsc-pproto-${index}`}
+              label={t('card.field.protocol')}
+              value={provider.protocol}
+              options={
+                protocols.length > 0
+                  ? protocols.map((protocol) => ({ value: protocol.id, label: protocol.label }))
+                  : [{ value: provider.protocol, label: provider.protocol }]
+              }
+              disabled={disabled}
+              onEdit={(v) => onPatchProvider(index, { protocol: v })}
+            />
             <TextField
               prefix="imsc"
               id={`imsc-pmodel-${index}`}
@@ -172,150 +175,113 @@ export function ProviderPresetSection(props: PresetSectionsProps): ReactElement
               disabled={disabled}
               onEdit={(v) => onPatchProvider(index, { model: v })}
             />
-          </div>
-          <TextField
-            prefix="imsc"
-            id={`imsc-purl-${index}`}
-            label={t('card.field.baseUrl')}
-            value={provider.baseUrl}
-            disabled={disabled}
-            onEdit={(v) => onPatchProvider(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
+            <TextField
+              prefix="imsc"
+              id={`imsc-purl-${index}`}
+              label={t('card.field.baseUrl')}
+              value={provider.baseUrl}
+              disabled={disabled}
+              onEdit={(v) => onPatchProvider(index, { baseUrl: v })}
+            />
+            <CodeField
+              prefix="imsc"
               id={`imsc-pheaders-${index}`}
-              className="imsc-textarea"
+              label={t('card.field.extraHeaders')}
               value={provider.extraHeadersText}
               disabled={disabled}
-              onChange={(event) => onPatchProvider(index, { extraHeadersText: event.target.value })}
+              onEdit={(v) => onPatchProvider(index, { extraHeadersText: v })}
             />
-          </div>
-          <CredentialRow t={t} presetId={provider.id} disabled={disabled} />
-        </div>
-      ))}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled}
-        onClick={() =>
-          onPatch({
-            providers: [
-              ...draft.providers,
-              emptyProviderDraft(protocols[0]?.id ?? 'openai-images'),
-            ],
-          })
-        }
-      >
-        {t('card.add')} · {t('card.providers')}
-      </button>
-    </>
+            <CredentialRow t={t} presetId={provider.id} disabled={disabled} />
+          </>
+        )}
+      />
+    </Section>
   )
 }
 
 export function PromptPresetSection(props: PresetSectionsProps): ReactElement {
   const { t, draft, disabled, onPatch, onPatchPrompt } = props
   return (
-    <>
-      <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')}
+    <Section prefix="imsc" title={t('card.prompts')} description={t('card.promptsHint')}>
+      <ListEditor
+        prefix="imsc"
+        items={draft.prompts}
+        labels={listLabels(t)}
+        disabled={disabled}
+        titleOf={(prompt) => prompt.name || '—'}
+        create={() => emptyPromptDraft()}
+        onChange={(prompts) => onPatch({ prompts })}
+        renderItem={(prompt, index) => (
+          <>
+            <TextField
+              prefix="imsc"
+              id={`imsc-prname-${index}`}
+              label={t('card.field.name')}
               value={prompt.name}
               disabled={disabled}
-              onChange={(event) => onPatchPrompt(index, { name: event.target.value })}
+              onEdit={(v) => onPatchPrompt(index, { name: v })}
             />
-            <button
-              type="button"
-              className="imsc-btn imsc-btnGhost"
+            <CodeField
+              prefix="imsc"
+              id={`imsc-prtext-${index}`}
+              label={t('card.field.text')}
+              value={prompt.text}
               disabled={disabled}
-              onClick={() => onPatch({ 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) => onPatchPrompt(index, { text: event.target.value })}
-          />
-        </div>
-      ))}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled}
-        onClick={() => onPatch({ prompts: [...draft.prompts, emptyPromptDraft()] })}
-      >
-        {t('card.add')} · {t('card.prompts')}
-      </button>
-    </>
+              onEdit={(v) => onPatchPrompt(index, { text: v })}
+            />
+          </>
+        )}
+      />
+    </Section>
   )
 }
 
 export function ParamPresetSection(props: PresetSectionsProps): ReactElement {
   const { t, draft, disabled, onPatch, onPatchParam } = props
+  const endpoints = [
+    { value: 'generation', label: t('tab.generation') },
+    { value: 'edit', label: t('tab.edit') },
+  ]
   return (
-    <>
-      <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')}
+    <Section prefix="imsc" title={t('card.params')} description={t('card.paramsHint')}>
+      <ListEditor
+        prefix="imsc"
+        items={draft.params}
+        labels={listLabels(t)}
+        disabled={disabled}
+        titleOf={(param) => param.name || '—'}
+        create={() => emptyParamDraft()}
+        onChange={(params) => onPatch({ params })}
+        renderItem={(param, index) => (
+          <>
+            <TextField
+              prefix="imsc"
+              id={`imsc-paname-${index}`}
+              label={t('card.field.name')}
               value={param.name}
               disabled={disabled}
-              onChange={(event) => onPatchParam(index, { name: event.target.value })}
+              onEdit={(v) => onPatchParam(index, { name: v })}
             />
-            <select
-              className="imsc-select"
-              aria-label={t('card.field.endpoint')}
+            <SelectField
+              prefix="imsc"
+              id={`imsc-paendpoint-${index}`}
+              label={t('card.field.endpoint')}
               value={param.endpoint}
+              options={endpoints}
               disabled={disabled}
-              onChange={(event) => onPatchParam(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"
+              onEdit={(v) => onPatchParam(index, { endpoint: v })}
+            />
+            <CodeField
+              prefix="imsc"
+              id={`imsc-paspecs-${index}`}
+              label={t('card.field.paramSpecs')}
+              value={param.specsText}
               disabled={disabled}
-              onClick={() => onPatch({ 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) => onPatchParam(index, { specsText: event.target.value })}
-          />
-        </div>
-      ))}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled}
-        onClick={() => onPatch({ params: [...draft.params, emptyParamDraft()] })}
-      >
-        {t('card.add')} · {t('card.params')}
-      </button>
-    </>
+              onEdit={(v) => onPatchParam(index, { specsText: v })}
+            />
+          </>
+        )}
+      />
+    </Section>
   )
 }

package/src/client/styles.ts

@@ -559,29 +559,6 @@ export const imageStudioCss = `
 
 /* ── 配置卡片附加件（imsc- 基础类由 cardCss('imsc') 生成）── */
 .imsc-loading{padding:14px 16px;margin:0;font-size:13px;color:var(--dsw-alias-label-tertiary)}
-.imsc-groupTitle { margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
-.imsc-presetBox {
-  border-top: 1px solid var(--dsw-alias-border-l3);
-  padding: 10px 0 2px;
-  display: grid;
-  gap: 8px;
-}
-.imsc-presetHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-.imsc-presetName { font-size: 13px; font-weight: 600; }
-.imsc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-.imsc-textarea {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 64px;
-  padding: 6px 10px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-3);
-  color: var(--dsw-alias-label-primary);
-  font-family: var(--ds-font-family-code);
-  font-size: 12px;
-  resize: vertical;
-}
 .imsc-credRow { display: flex; align-items: center; gap: 8px; }
 .imsc-credRow .imsc-input { flex: 1; min-width: 0; }
 
@@ -617,7 +594,6 @@ export const imageStudioCss = `
   .ims-paramControl { width: 108px; }
   .ims-btn { min-height: 40px; }
   .ims-btnSmall { min-height: 32px; }
-  .imsc-grid2 { grid-template-columns: 1fr; }
 }
 `
 

package/src/credentials.ts

@@ -1,12 +1,16 @@
 /**
  * 凭据引用名派生与校验：提供商预设 id → IMAGE_STUDIO_PRESET_<ID>。
- * 规则对齐《插件存储规范》：大写下划线、全大写、前缀属主。
- * 纯函数，零依赖。
+ * 命名与归一走 `@dsh-plus/shared` 的公共助手，本模块只补预设 id 的形态校验。
+ * 纯函数，零依赖（浏览器半亦可安全 import）。
  * @module image-studio/credentials
  */
 
-/** 引用名前缀（属主段）。 */
-const REF_PREFIX = 'IMAGE_STUDIO_PRESET_'
+import { credentialRefName } from '@dsh-plus/shared'
+
+/** 属主段（插件 id）。 */
+const REF_OWNER = 'image-studio'
+/** 业务段前缀（与属主一起构成 IMAGE_STUDIO_PRESET_<ID>）。 */
+const REF_KIND = 'preset'
 
 /** 预设 id 是否合法（kebab-case，用于引用名派生）。 */
 export function isValidPresetId(id: string): boolean {
@@ -18,5 +22,5 @@ export function credentialRefNameOf(presetId: string): string {
   if (!isValidPresetId(presetId)) {
     throw new Error(`非法提供商预设 id：${JSON.stringify(presetId)}`)
   }
-  return `${REF_PREFIX}${presetId.replaceAll('-', '_').toUpperCase()}`
+  return credentialRefName(REF_OWNER, REF_KIND, presetId)
 }

package/src/uploads/store.ts

@@ -11,7 +11,7 @@ import { randomUUID } from 'node:crypto'
 import { appendFile, mkdir, readdir, readFile, rm, writeFile } from 'node:fs/promises'
 import { join } from 'node:path'
 
-import { atomicWriteFile, commitTmpFile, pluginDataPath } from '@dsh-plus/shared'
+import { atomicWriteFile, commitTmpFile, pluginCachePath } from '@dsh-plus/shared'
 import { isImageId } from '../images/id.ts'
 import { extOfMime } from '../images/mime.ts'
 
@@ -27,9 +27,12 @@ export interface UploadEntry {
   size: number
 }
 
-/** 存储层根路径（惰性解析：DSH_HOME 可能在模块加载后才被测试环境设置）。 */
+/**
+ * 存储层根路径（惰性解析：DSH_HOME 可能在模块加载后才被测试环境设置）。
+ * 上传是带 TTL 的暂存派生物（`uploadTtlHours` 回收），故落缓存目录。
+ */
 function uploadsRoot(): string {
-  return pluginDataPath('image-studio', 'uploads')
+  return pluginCachePath('image-studio', 'uploads')
 }
 
 function indexFile(): string {