@dsh-plus/image-studio 0.1.1 → 0.1.3

package/lib/index.js

@@ -1,5 +1,5 @@
 import z from "@deepseek-ai/schemastery";
-import { Context, Service } from "@deepseek-ai/cordis";
+import { Service } from "@deepseek-ai/cordis";
 import { credentialRef } from "@deepseek-ai/dsh-credentials";
 import { request } from "node:http";
 import { request as request$1 } from "node:https";
@@ -996,18 +996,9 @@ function defaultIdCounter() {
 }
 //#endregion
 //#region src/service.ts
-/**
-* image-studio 服务主体：
-* - settings installSection（三组预设 + 并发/超时/代理/画廊上限）；
-* - TaskRunner 并发生图：提交即排队，成功自动入画廊（元数据 + 图片落盘）；
-* - 提供商预设按 id 即时 resolve credentials（不缓存）；
-* - 端点：generate/tasks/gallery/images/credentials/providers（api.ts 注册）。
-* 红线：开发测试仅指向本地 mock，严禁真实调用产生费用。
-* @module image-studio/service
-*/
 /** 静态 schema 引用（installSection 用；避免循环 import config → service）。 */
 var ImageStudioService = class extends Service {
-	static [Context.inject] = ["credentials"];
+	static inject = ["credentials"];
 	current;
 	runner;
 	log;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-plus/image-studio",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "dsh-plus service+ui plugin: 图像工作室——OpenAI Images 协议文生图/图生图，全参数开关化，双预设体系，并发生图任务与可二次编辑画廊",
   "type": "module",
   "main": "lib/index.js",
@@ -19,24 +19,24 @@
     "src"
   ],
   "dependencies": {
-    "@dsh-plus/shared": "0.1.12",
-    "https-proxy-agent": "^9.1.0"
+    "https-proxy-agent": "^9.1.0",
+    "@dsh-plus/shared": "0.1.13"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-client-ui-primitives": "*",
-    "@deepseek-ai/dsh-credentials": "*",
-    "@deepseek-ai/dsh-host-webserver": "*",
-    "@deepseek-ai/dsh-settings": "*",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.5-alpha.2",
+    "@deepseek-ai/dsh-credentials": "^0.1.5-alpha.2",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.5-alpha.2",
+    "@deepseek-ai/dsh-settings": "^0.1.5-alpha.2",
     "@deepseek-ai/schemastery": "^3.18.2"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "4.0.2",
-    "@deepseek-ai/dsh-client-ui-primitives": "0.1.5-alpha.1",
-    "@deepseek-ai/dsh-credentials": "0.1.5-alpha.1",
-    "@deepseek-ai/dsh-host-webserver": "0.1.5-alpha.1",
-    "@deepseek-ai/dsh-session": "0.1.5-alpha.1",
-    "@deepseek-ai/dsh-settings": "0.1.5-alpha.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.5-alpha.2",
+    "@deepseek-ai/dsh-credentials": "0.1.5-alpha.2",
+    "@deepseek-ai/dsh-host-webserver": "0.1.5-alpha.2",
+    "@deepseek-ai/dsh-session": "0.1.5-alpha.2",
+    "@deepseek-ai/dsh-settings": "0.1.5-alpha.2",
     "@deepseek-ai/schemastery": "3.18.2",
     "@types/node": "26.4.0",
     "@types/react": "~18.3.31",

package/src/client/panel/gallery.tsx

@@ -3,6 +3,7 @@
  * 请求参数回放、衍生链源图、下载/删除/二次编辑）。
  * @module image-studio/client/panel/gallery
  */
+import { Modal } from '@deepseek-ai/dsh-client-ui-primitives'
 import { IconDownload, IconRefreshOutline16, IconTrashOutline16 } from '@dsh-plus/shared/client'
 import { type ReactElement, useState } from 'react'
 import type { GalleryItem } from '../../gallery/store.ts'
@@ -52,18 +53,17 @@ function GalleryDetail(props: {
   }
 
   const paramRows = Object.entries(item.params)
+  // 官方 Modal 承载（嵌套 portal：层级高于工作台，遮罩/Escape 由 Modal 处理）。
   return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: 背板点击关闭是指针便利交互，键盘用户走关闭/取消按钮（同 web-terminal 既有约定）
-    <div className="ims-detailBackdrop" role="presentation" onClick={onClose}>
-      {/* biome-ignore lint/a11y/useKeyWithClickEvents: 阻断冒泡仅防误触背板关闭，无实际点击行为 */}
-      <div
-        className="ims-detail"
-        role="dialog"
-        aria-modal="true"
-        aria-label={item.prompt.slice(0, 40)}
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="ims-detailHead">
+    <Modal
+      open
+      onClose={onClose}
+      title={item.prompt.slice(0, 40)}
+      headless
+      className="ims-detailModal"
+    >
+      <div className="ims-sub">
+        <div className="ims-subHead">
           <span className="ims-detailMeta">
             {t('gallery.detail.model')}：{item.model} · {t('gallery.detail.endpoint')}：
             {item.endpoint} · {t('gallery.detail.time')}：{fmtTime(item.createdAt)}
@@ -127,7 +127,7 @@ function GalleryDetail(props: {
             )}
           </div>
         </div>
-        <div className="ims-detailFoot">
+        <div className="ims-subFoot">
           {error !== null ? (
             <p className="ims-status ims-statusError" role="alert">
               {error}
@@ -156,7 +156,7 @@ function GalleryDetail(props: {
           )}
         </div>
       </div>
-    </div>
+    </Modal>
   )
 }
 

package/src/client/panel/panel.tsx

@@ -7,6 +7,7 @@
  * 响应式：桌面居中模态（≤1100px），≤767px 全屏抽屉（见 styles.ts）。
  * @module image-studio/client/panel/panel
  */
+import { Modal } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { NamespaceSettingsApi, Scope } from '@dsh-plus/shared/client'
 import { IconBrush, IconCloseOutline16, IconImage, IconSparkles } from '@dsh-plus/shared/client'
 import {
@@ -103,8 +104,6 @@ export function StudioPanel(props: StudioPanelProps): ReactElement | null {
     return () => clearInterval(timer)
   }, [open, providers, reloadPresets, reloadGallery, reloadTasks])
 
-  if (!open) return null
-
   // wire 的 params 与 ParamEntry 结构同源（kind 宽化为 string），边界处一次性窄化。
   const catalog = (providers?.params ?? []) as unknown as readonly ParamEntry[]
   const protocols = providers?.protocols ?? []
@@ -115,17 +114,17 @@ export function StudioPanel(props: StudioPanelProps): ReactElement | null {
     { key: 'gallery', label: t('tab.gallery'), icon: <IconImage size={15} /> },
   ]
 
+  // 官方 Modal 承载：portal 到 body（z-index 1000，移动端层叠/开关与外壳一致），
+  // 遮罩点击与 Escape 关闭由 Modal 处理；headless 模式自绘头部标签条。
   return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: 背板点击关闭是指针便利交互，键盘用户走关闭/取消按钮（同 web-terminal 既有约定）
-    <div className="ims-backdrop" role="presentation" onClick={() => studio.setOpen(false)}>
-      {/* biome-ignore lint/a11y/useKeyWithClickEvents: 阻断冒泡仅防误触背板关闭，无实际点击行为 */}
-      <div
-        className="ims-panel"
-        role="dialog"
-        aria-modal="true"
-        aria-label={t('panel.title')}
-        onClick={(event) => event.stopPropagation()}
-      >
+    <Modal
+      open={open}
+      onClose={() => studio.setOpen(false)}
+      title={t('panel.title')}
+      headless
+      className="ims-modal"
+    >
+      <div className="ims-panel">
         <header className="ims-head">
           <div className="ims-tabs" role="tablist" aria-label={t('panel.title')}>
             {tabs.map((item) => (
@@ -215,6 +214,6 @@ export function StudioPanel(props: StudioPanelProps): ReactElement | null {
           }}
         />
       </div>
-    </div>
+    </Modal>
   )
 }

package/src/client/panel/picker.tsx

@@ -3,6 +3,7 @@
  * 扁平化全部画廊条目的图片，倒序排列；底部确认条显示已选数量。
  * @module image-studio/client/panel/picker
  */
+import { Modal } from '@deepseek-ai/dsh-client-ui-primitives'
 import { type ReactElement, useState } from 'react'
 import type { GalleryItem } from '../../gallery/store.ts'
 import { imageUrl } from '../api.ts'
@@ -56,19 +57,12 @@ export function ImagePicker(props: ImagePickerProps): ReactElement {
     setSelected((current) => (current.includes(imageId) ? [] : [imageId]))
   }
 
+  // 官方 Modal 承载（嵌套 portal：层级高于工作台，遮罩/Escape 由 Modal 处理）。
   return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: 背板点击关闭是指针便利交互，键盘用户走关闭/取消按钮（同 web-terminal 既有约定）
-    <div className="ims-pickerBackdrop" role="presentation" onClick={onClose}>
-      {/* biome-ignore lint/a11y/useKeyWithClickEvents: 阻断冒泡仅防误触背板关闭，无实际点击行为 */}
-      <div
-        className="ims-picker"
-        role="dialog"
-        aria-modal="true"
-        aria-label={title}
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="ims-pickerHead">
-          <h3 className="ims-pickerTitle">{title}</h3>
+    <Modal open onClose={onClose} title={title} headless className="ims-pickerModal">
+      <div className="ims-sub">
+        <div className="ims-subHead">
+          <h3 className="ims-subTitle">{title}</h3>
           <button type="button" className="ims-btn ims-btnGhost" onClick={onClose}>
             {t('common.close')}
           </button>
@@ -98,7 +92,7 @@ export function ImagePicker(props: ImagePickerProps): ReactElement {
             })}
           </div>
         )}
-        <div className="ims-pickerFoot">
+        <div className="ims-subFoot">
           <button
             type="button"
             className="ims-btn ims-btnPrimary"
@@ -112,6 +106,6 @@ export function ImagePicker(props: ImagePickerProps): ReactElement {
           </button>
         </div>
       </div>
-    </div>
+    </Modal>
   )
 }