@dsh-plus/image-studio 0.1.0 → 0.1.1

package/src/client/client.ts

@@ -1,21 +1,36 @@
 /**
- * 浏览器半入口（本次预留空壳，不做界面设计与编码）：
- * - 注册独立设置页占位（settings.section），声明画廊/生图页后续挂载点；
- * - 注册 settings.plugin.item 配置卡片占位（key = settings 命名空间）。
- * 数据通道与插槽契约见 docs/README.md「前端接入点」。
+ * 浏览器半入口：
+ * - sidebar.footer.action：侧栏底部入口按钮（与文件/终端入口 flex 等分行宽）；
+ * - shell.overlay：图像工作室面板（文生图/图生图/画廊 + 任务条）；
+ * - settings.plugin.item：配置卡片（三组预设 + 凭据 + 高级项，key = settings 命名空间）。
+ * 模式与 web-files/web-terminal 一致：CJS factory 产物、data-plugin-css 样式
+ * 约定、slot 失配静默降级；配置读写经 ctx.remote.settings 直连（远程域名可用）。
  * @module @dsh-plus/image-studio/client
  */
 import type { Context } from '@deepseek-ai/cordis'
+import {
+  cardCss,
+  createNamespaceApi,
+  createSettingsScope,
+  injectCardStyle,
+  type ScopeHostContext,
+} from '@dsh-plus/shared/client'
+
+import { SETTINGS_NS } from '../ns.ts'
 import { StudioConfigCard } from './card.tsx'
-import { en, NS, zh } from './i18n.ts'
-import { StudioSection } from './section.tsx'
-import { injectCardStyles, injectSectionStyle } from './styles.ts'
+import { en, NS, type Translate, zh } from './i18n.ts'
+import { createPanelController } from './panel/controller.ts'
+import { StudioEntryButton } from './panel/entry.tsx'
+import { StudioPanel } from './panel/panel.tsx'
+import { injectStudioStyles } from './styles.ts'
 
 export const name = 'dsh-plus-image-studio'
 
-/** 浏览器半需要的 cordis 服务 key（loader 据此注入）。 */
+/** 浏览器半需要的 cordis 服务 key（loader 据此注入；package.json 的 dsh.client.inject 管包加载顺序）。 */
 export const inject = ['slots', 'locale', 'remote', 'remote.settings'] as const
 
+const PLUGIN_ID = '@dsh-plus/image-studio'
+
 interface SlotsLike {
   inject(key: string, callback: () => unknown): unknown
   register(options: Record<string, unknown>, component: unknown): () => void
@@ -26,50 +41,68 @@ interface LocaleLike {
   bind(ns: string): (key: string) => string
 }
 
-interface ClientContext {
+/** createSettingsScope 要求的宿主窄面 + 本插件用到的 slots/locale 服务。 */
+interface ClientContext extends ScopeHostContext {
   slots: SlotsLike
   locale: LocaleLike
-  effect(execute: () => () => void, label?: string): unknown
 }
 
 export function apply(ctx: Context): void {
   const c = ctx as unknown as ClientContext
-  const sectionTag = injectSectionStyle()
-  const cardTag = injectCardStyles()
-  c.effect(
-    () => () => {
-      sectionTag?.remove()
-      cardTag?.remove()
-    },
-    'image-studio: style',
-  )
+  const panelTag = injectStudioStyles()
+  const cardTag = injectCardStyle(PLUGIN_ID, cardCss('imsc'))
+  const controller = createPanelController()
   c.effect(() => c.locale.register(NS, { zh, en }), 'image-studio: locale')
-  const t = c.locale.bind(NS)
+  const t = c.locale.bind(NS) as Translate
 
-  // 独立设置页占位（画廊 + 生图工作台后续版本替换占位组件）。
-  c.slots.inject('settings.section', () =>
-    c.slots.register(
-      {
-        name: 'settings.section',
-        id: 'dsh-plus-image-studio',
-        order: 16,
-        label: () => t('nav'),
-        inject: () => ({ t }),
-      },
-      StudioSection,
-    ),
+  c.effect(
+    () =>
+      c.slots.inject('sidebar.footer.action', () =>
+        c.slots.register(
+          {
+            name: 'sidebar.footer.action',
+            id: 'image-studio-entry',
+            locale: NS,
+            inject: () => ({ studio: controller, t }),
+          },
+          StudioEntryButton,
+        ),
+      ),
+    'image-studio: entry slot',
+  )
+  const scope = createSettingsScope(c, SETTINGS_NS, 'image-studio: settings scope')
+  const api = createNamespaceApi(c.get('remote').settings, SETTINGS_NS)
+  c.effect(
+    () =>
+      c.slots.inject('shell.overlay', () =>
+        c.slots.register(
+          {
+            name: 'shell.overlay',
+            id: 'image-studio-panel',
+            locale: NS,
+            inject: () => ({ studio: controller, t, scope, api }),
+          },
+          StudioPanel,
+        ),
+      ),
+    'image-studio: overlay slot',
   )
-
-  // 配置卡片占位（settings.plugin.item：keyed 槽位，key = settings 命名空间）。
   c.slots.inject('settings.plugin.item', () =>
     c.slots.register(
       {
         name: 'settings.plugin.item',
-        key: 'dsh-plus-image-studio',
+        key: SETTINGS_NS,
         locale: NS,
-        inject: () => ({ t }),
+        inject: () => ({ t, scope, api }),
       },
       StudioConfigCard,
     ),
   )
+  c.effect(
+    () => () => {
+      panelTag?.remove()
+      cardTag?.remove()
+    },
+    'image-studio: cleanup',
+  )
 }

package/src/client/i18n.ts

@@ -1,6 +1,6 @@
 /**
- * i18n 字典（zh 为主，en 兜底）；NS 与 settings 命名空间分离，
- * 仅承载前端文案 key。本次只含占位文案。
+ * i18n 字典（zh 为键域事实源，en 全量对译）；NS 与 settings 命名空间分离，
+ * 仅承载前端文案 key。面板 / 入口 / 配置卡片共用同一命名空间。
  * @module image-studio/client/i18n
  */
 
@@ -8,13 +8,234 @@
 export const NS = 'dsh-plus-image-studio'
 
 export const zh = {
-  nav: '图像工作室',
-  placeholder: '生图工作台与画廊将在后续版本提供',
-  cardPlaceholder: '图像工作室配置（预设/凭据管理将在后续版本提供）',
+  // 入口与面板骨架
+  'entry.label': '图像',
+  'panel.title': '图像工作室',
+  'tab.generation': '文生图',
+  'tab.edit': '图生图',
+  'tab.gallery': '画廊',
+  'common.close': '关闭',
+  'common.cancel': '取消',
+  'common.save': '保存',
+  'common.saving': '保存中…',
+  'common.retry': '重试',
+  'common.loading': '加载中…',
+  'common.loadFailed': '加载失败',
+  'common.delete': '删除',
+  'common.confirmDelete': '确认删除',
+  'common.refresh': '刷新',
+  'common.download': '下载',
+  'common.unsaved': '未保存',
+  // 提供商
+  'provider.label': '提供商',
+  'provider.placeholder': '选择提供商预设…',
+  'provider.empty': '暂无提供商预设：请到 设置 → 插件 → 图像工作室 添加',
+  'provider.credential.configured': 'Key 已配置',
+  'provider.credential.missing': 'Key 未配置',
+  'provider.inline.toggle': '临时覆盖协议/地址/模型',
+  'provider.inline.protocol': '协议',
+  'provider.inline.baseUrl': 'API 地址',
+  'provider.inline.model': '模型',
+  'provider.inline.hint': '覆盖时凭据沿用所选预设的 API Key',
+  // 提示词
+  'prompt.label': '提示词',
+  'prompt.placeholder': '描述想要生成的画面…',
+  'prompt.preset.insert': '插入提示词预设…',
+  'prompt.preset.save': '存为预设',
+  'prompt.preset.name': '预设名称',
+  'prompt.preset.saved': '已保存提示词预设',
+  // 参数
+  'params.basic': '常用参数',
+  'params.advanced': '高级参数',
+  'params.preset.placeholder': '应用参数预设…',
+  'params.preset.save': '存为预设',
+  'params.preset.saved': '已保存参数预设',
+  'params.enabled': '启用',
+  // 源图与遮罩
+  'sources.label': '源图',
+  'sources.pick': '选择源图',
+  'sources.count': '已选 {n}/16 张',
+  'sources.mask': '遮罩（可选）',
+  'sources.maskPick': '选择遮罩',
+  'sources.maskClear': '清除',
+  'picker.empty': '画廊暂无图片',
+  'picker.confirm': '使用所选（{n}）',
+  // 提交
+  'generate.submit': '生成',
+  'generate.submitted': '已提交任务 {id}，进度见下方任务条',
+  'generate.failed': '提交失败：',
+  'generate.needProvider': '请先选择提供商预设',
+  'generate.needPrompt': '请填写提示词',
+  'generate.needSources': '请先选择至少一张源图',
+  // 任务条
+  'tasks.title': '任务',
+  'tasks.state.queued': '排队中',
+  'tasks.state.running': '生成中',
+  'tasks.state.succeeded': '已完成',
+  'tasks.state.failed': '失败',
+  'tasks.state.cancelled': '已取消',
+  'tasks.view': '查看',
+  // 画廊
+  'gallery.empty': '画廊为空，去文生图生成第一张吧',
+  'gallery.total': '共 {n} 条',
+  'gallery.detail.prompt': '提示词',
+  'gallery.detail.revised': '改写提示词',
+  'gallery.detail.params': '请求参数',
+  'gallery.detail.model': '模型',
+  'gallery.detail.endpoint': '端点',
+  'gallery.detail.time': '时间',
+  'gallery.detail.sources': '源图',
+  'gallery.edit': '二次编辑',
+  // 配置卡片
+  'card.title': '图像工作室',
+  'card.description': '文生图/图生图：提供商与 API Key、参数/提示词预设',
+  'card.providers': '提供商预设',
+  'card.prompts': '提示词预设',
+  'card.params': '参数预设',
+  'card.advanced': '高级设置',
+  'card.add': '添加',
+  'card.field.id': 'ID',
+  'card.field.name': '名称',
+  'card.field.protocol': '协议',
+  'card.field.baseUrl': 'API 地址',
+  'card.field.model': '模型',
+  'card.field.extraHeaders': '附加请求头（JSON）',
+  'card.field.text': '提示词模板',
+  'card.field.endpoint': '适用端点',
+  'card.field.paramSpecs': '参数表（JSON：{ "size": { "enabled": true, "value": "1024x1024" } }）',
+  'card.idHint': '小写字母开头，仅小写字母/数字/中划线（凭据引用名派生用）',
+  'card.credential.label': 'API Key',
+  'card.credential.placeholder': '输入 Key（保存后不回显）',
+  'card.credential.set': '保存 Key',
+  'card.credential.unset': '删除 Key',
+  'card.credential.configured': '已配置',
+  'card.credential.unconfigured': '未配置',
+  'card.maxConcurrent': '生图并发上限（0 = 不限）',
+  'card.requestTimeoutMs': '单请求超时（毫秒）',
+  'card.proxy': '上游代理（空 = 直连）',
+  'card.galleryMaxItems': '画廊保留上限（0 = 不清理）',
+  'card.specsInvalid': '参数表非法：',
+  'card.idInvalid': 'ID 非法：',
+  'card.save': '保存',
+  'card.discard': '放弃修改',
+  'card.saved': '已保存',
+  'card.saveFailed': '保存失败：',
+  'card.readOnly': '当前部署的设置文档为只读',
+  'card.badgeOn': '{n} 个提供商',
+  'card.badgeOff': '未配置',
 }
 
-export const en = {
-  nav: 'Image Studio',
-  placeholder: 'Image workspace and gallery arrive in a later release',
-  cardPlaceholder: 'Image Studio settings (preset/credential management arrives later)',
+export type DictKey = keyof typeof zh
+
+/** 面板/卡片共用的翻译函数类型（slot 注入的 bind 结果按此消费）。 */
+export type Translate = (key: DictKey) => string
+
+export const en: Record<DictKey, string> = {
+  'entry.label': 'Image',
+  'panel.title': 'Image Studio',
+  'tab.generation': 'Text to Image',
+  'tab.edit': 'Image to Image',
+  'tab.gallery': 'Gallery',
+  'common.close': 'Close',
+  'common.cancel': 'Cancel',
+  'common.save': 'Save',
+  'common.saving': 'Saving…',
+  'common.retry': 'Retry',
+  'common.loading': 'Loading…',
+  'common.loadFailed': 'Load failed',
+  'common.delete': 'Delete',
+  'common.confirmDelete': 'Confirm delete',
+  'common.refresh': 'Refresh',
+  'common.download': 'Download',
+  'common.unsaved': 'Unsaved',
+  'provider.label': 'Provider',
+  'provider.placeholder': 'Select a provider preset…',
+  'provider.empty': 'No provider presets: add one in Settings → Plugins → Image Studio',
+  'provider.credential.configured': 'Key configured',
+  'provider.credential.missing': 'Key missing',
+  'provider.inline.toggle': 'Override protocol/URL/model',
+  'provider.inline.protocol': 'Protocol',
+  'provider.inline.baseUrl': 'API base URL',
+  'provider.inline.model': 'Model',
+  'provider.inline.hint': 'Overrides reuse the API key of the selected preset',
+  'prompt.label': 'Prompt',
+  'prompt.placeholder': 'Describe the image you want…',
+  'prompt.preset.insert': 'Insert prompt preset…',
+  'prompt.preset.save': 'Save as preset',
+  'prompt.preset.name': 'Preset name',
+  'prompt.preset.saved': 'Prompt preset saved',
+  'params.basic': 'Common parameters',
+  'params.advanced': 'Advanced parameters',
+  'params.preset.placeholder': 'Apply a parameter preset…',
+  'params.preset.save': 'Save as preset',
+  'params.preset.saved': 'Parameter preset saved',
+  'params.enabled': 'Enabled',
+  'sources.label': 'Source images',
+  'sources.pick': 'Pick sources',
+  'sources.count': '{n}/16 selected',
+  'sources.mask': 'Mask (optional)',
+  'sources.maskPick': 'Pick mask',
+  'sources.maskClear': 'Clear',
+  'picker.empty': 'No images in the gallery yet',
+  'picker.confirm': 'Use selected ({n})',
+  'generate.submit': 'Generate',
+  'generate.submitted': 'Task {id} submitted; progress in the task bar below',
+  'generate.failed': 'Submit failed: ',
+  'generate.needProvider': 'Select a provider preset first',
+  'generate.needPrompt': 'Enter a prompt first',
+  'generate.needSources': 'Pick at least one source image',
+  'tasks.title': 'Tasks',
+  'tasks.state.queued': 'Queued',
+  'tasks.state.running': 'Running',
+  'tasks.state.succeeded': 'Done',
+  'tasks.state.failed': 'Failed',
+  'tasks.state.cancelled': 'Cancelled',
+  'tasks.view': 'View',
+  'gallery.empty': 'Gallery is empty — generate your first image',
+  'gallery.total': '{n} items',
+  'gallery.detail.prompt': 'Prompt',
+  'gallery.detail.revised': 'Revised prompt',
+  'gallery.detail.params': 'Request parameters',
+  'gallery.detail.model': 'Model',
+  'gallery.detail.endpoint': 'Endpoint',
+  'gallery.detail.time': 'Time',
+  'gallery.detail.sources': 'Sources',
+  'gallery.edit': 'Edit again',
+  'card.title': 'Image Studio',
+  'card.description': 'Text/Image-to-image: providers & API keys, param/prompt presets',
+  'card.providers': 'Provider presets',
+  'card.prompts': 'Prompt presets',
+  'card.params': 'Parameter presets',
+  'card.advanced': 'Advanced',
+  'card.add': 'Add',
+  'card.field.id': 'ID',
+  'card.field.name': 'Name',
+  'card.field.protocol': 'Protocol',
+  'card.field.baseUrl': 'API base URL',
+  'card.field.model': 'Model',
+  'card.field.extraHeaders': 'Extra headers (JSON)',
+  'card.field.text': 'Prompt template',
+  'card.field.endpoint': 'Endpoint',
+  'card.field.paramSpecs':
+    'Param specs (JSON: { "size": { "enabled": true, "value": "1024x1024" } })',
+  'card.idHint': 'Lowercase letter first; lowercase/digits/dashes only (derives credential ref)',
+  'card.credential.label': 'API Key',
+  'card.credential.placeholder': 'Enter key (never echoed back)',
+  'card.credential.set': 'Save key',
+  'card.credential.unset': 'Remove key',
+  'card.credential.configured': 'Configured',
+  'card.credential.unconfigured': 'Not configured',
+  'card.maxConcurrent': 'Max concurrent tasks (0 = unlimited)',
+  'card.requestTimeoutMs': 'Request timeout (ms)',
+  'card.proxy': 'Upstream proxy (empty = direct)',
+  'card.galleryMaxItems': 'Gallery retention (0 = keep all)',
+  'card.specsInvalid': 'Invalid param specs: ',
+  'card.idInvalid': 'Invalid ID: ',
+  'card.save': 'Save',
+  'card.discard': 'Discard',
+  'card.saved': 'Saved',
+  'card.saveFailed': 'Save failed: ',
+  'card.readOnly': 'Settings document is read-only in this deployment',
+  'card.badgeOn': '{n} providers',
+  'card.badgeOff': 'Not configured',
 }

package/src/client/panel/controller.ts

@@ -0,0 +1,75 @@
+/**
+ * 面板开合与跨标签联动控制器：footer 入口 ↔ overlay 面板共享开合态；
+ * 画廊「二次编辑」经 editSeed 单向投递给图生图表单（nonce 保证同参可重复触发）。
+ * 模式照抄 web-files/web-terminal 的 PanelController。
+ * @module image-studio/client/panel/controller
+ */
+
+/** 面板标签页。 */
+export type StudioTab = 'generation' | 'edit' | 'gallery'
+
+/** 二次编辑种子（画廊条目 → 图生图表单回填）。 */
+export interface EditSeed {
+  /** 源图 imageId 列表（≤16）。 */
+  sourceIds: string[]
+  /** 历史提示词回填。 */
+  prompt: string
+  /** 历史请求参数回填（画廊条目 params 快照）。 */
+  params: Record<string, unknown>
+  /** 历史提供商预设（存在则预选）。 */
+  providerPresetId: string | null
+  /** 触发序号：同一参数再次「二次编辑」也需重新生效。 */
+  nonce: number
+}
+
+/** 面板状态（footer 按钮与 overlay 面板共享）。 */
+export interface PanelState {
+  open: boolean
+  tab: StudioTab
+  editSeed: EditSeed | null
+}
+
+/** footer 按钮与 shell.overlay 面板之间共享的控制器。 */
+export interface PanelController {
+  subscribe: (listener: () => void) => () => void
+  getSnapshot: () => PanelState
+  setOpen: (open: boolean) => void
+  toggle: () => void
+  setTab: (tab: StudioTab) => void
+  /** 投递二次编辑种子并切到图生图标签。 */
+  seedEdit: (seed: Omit<EditSeed, 'nonce'>) => void
+}
+
+/** 创建一个模块级控制器（apply 内调用一次，inject 给两个 slot 入口）。 */
+export function createPanelController(): PanelController {
+  let state: PanelState = { open: false, tab: 'generation', editSeed: null }
+  let nonce = 0
+  const listeners = new Set<() => void>()
+  const publish = () => {
+    for (const listener of [...listeners]) listener()
+  }
+  const set = (next: PanelState) => {
+    state = next
+    publish()
+  }
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+    getSnapshot: () => state,
+    setOpen: (open) => {
+      if (state.open === open) return
+      set({ ...state, open })
+    },
+    toggle: () => set({ ...state, open: !state.open }),
+    setTab: (tab) => {
+      if (state.tab === tab) return
+      set({ ...state, tab })
+    },
+    seedEdit: (seed) => {
+      nonce += 1
+      set({ ...state, tab: 'edit', editSeed: { ...seed, nonce } })
+    },
+  }
+}

package/src/client/panel/entry.tsx

@@ -0,0 +1,35 @@
+/**
+ * 侧边栏 footer 入口按钮：与文件/终端入口同款（整行图标 + 文案；
+ * rail 折叠态退化为居中圆形图标）。flex:1 由样式层与邻居等分行宽。
+ * @module image-studio/client/panel/entry
+ */
+import { IconImage } from '@dsh-plus/shared/client'
+import type { ReactElement } from 'react'
+import { useSyncExternalStore } from 'react'
+import type { Translate } from '../i18n.ts'
+import type { PanelController } from './controller.ts'
+
+interface EntryProps {
+  studio: PanelController
+  t: Translate
+  /** 侧边栏展开态（slot owner 传入）；折叠（rail）时仅渲染圆形图标。 */
+  wide?: boolean
+}
+
+export function StudioEntryButton({ studio, t, wide }: EntryProps): ReactElement {
+  const { open } = useSyncExternalStore(studio.subscribe, studio.getSnapshot)
+  const rail = wide === false
+  return (
+    <button
+      type="button"
+      className={rail ? 'ims-entry ims-entry-rail' : 'ims-entry'}
+      aria-haspopup="dialog"
+      aria-expanded={open}
+      aria-label={t('entry.label')}
+      onClick={() => studio.toggle()}
+    >
+      <IconImage size={rail ? 18 : 16} />
+      {!rail && <span className="ims-entry-label">{t('entry.label')}</span>}
+    </button>
+  )
+}