@dsh-plus/image-studio 0.1.1 → 0.1.2

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>
   )
 }