@dsh-plus/image-studio 0.1.7 → 0.1.8

package/lib/client.js

@@ -2616,6 +2616,14 @@ ${extra}
 		function presetId(prefix) {
 			return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
 		}
+		/** 单选上传结果 → 遮罩引用（无成功条目时保持原值）。 */
+		function uploadRef(entries) {
+			const first = entries[0];
+			return first === void 0 ? null : {
+				kind: "upload",
+				id: first.id
+			};
+		}
 		function GeneratorForm(props) {
 			const { t, endpoint, catalog, protocols, presets, gallery, scope, api } = props;
 			const [providerId, setProviderId] = (0, react.useState)("");
@@ -2980,40 +2988,52 @@ ${extra}
 										className: "ims-hint",
 										children: t("sources.count").replace("{n}", String(sources.length))
 									}),
-									uploads.error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-										className: "ims-status ims-statusError",
-										role: "alert",
-										children: [t("upload.failed"), uploads.error]
-									}) : null,
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 										className: "ims-blockTitle",
 										children: t("sources.mask")
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "ims-sources",
-										children: [mask !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "ims-thumb",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-												src: refUrl(mask),
-												alt: ""
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										children: [
+											mask !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: "ims-thumb",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+													src: refUrl(mask),
+													alt: ""
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: "ims-thumbRemove",
+													"aria-label": t("sources.maskClear"),
+													onClick: () => setMask(null),
+													children: "×"
+												})]
+											}) : null,
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 												type: "button",
-												className: "ims-thumbRemove",
-												"aria-label": t("sources.maskClear"),
-												onClick: () => setMask(null),
-												children: "×"
-											})]
-										}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-											type: "button",
-											className: "ims-thumbAdd",
-											onClick: () => setPicker("mask"),
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLayers, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sources.maskPick") })]
-										})]
+												className: "ims-thumbAdd",
+												onClick: () => setPicker("mask"),
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLayers, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sources.maskPick") })]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UploadButton, {
+												t,
+												uploads,
+												multiple: false,
+												accept: "image/png",
+												className: "ims-thumbAdd",
+												onUploaded: (entries) => setMask(uploadRef(entries)),
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconPlusOutline16, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("upload.pick") })]
+											})
+										]
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 										className: "ims-hint",
 										children: t("sources.maskHint")
-									})
+									}),
+									uploads.error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+										className: "ims-status ims-statusError",
+										role: "alert",
+										children: [t("upload.failed"), uploads.error]
+									}) : null
 								]
 							}) : null
 						]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-plus/image-studio",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "dsh-plus service+ui plugin: 图像工作室——OpenAI Images 协议文生图/图生图，全参数开关化，双预设体系，并发生图任务与可二次编辑画廊",
   "type": "module",
   "main": "lib/index.js",

package/src/client/panel/generator.tsx

@@ -15,7 +15,13 @@ import {
   type Scope,
 } from '@dsh-plus/shared/client'
 import { type ReactElement, useEffect, useMemo, useRef, useState } from 'react'
-import type { GenerateRequest, PresetsWire, ProvidersWire, SourceRef } from '../../dto.ts'
+import type {
+  GenerateRequest,
+  PresetsWire,
+  ProvidersWire,
+  SourceRef,
+  UploadEntry,
+} from '../../dto.ts'
 import type { GalleryItem } from '../../gallery/store.ts'
 import { MAX_SOURCE_IMAGES } from '../../limits.ts'
 import type { ParamEntry } from '../../params/catalog.ts'
@@ -66,6 +72,12 @@ function presetId(prefix: string): string {
   return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
 }
 
+/** 单选上传结果 → 遮罩引用（无成功条目时保持原值）。 */
+function uploadRef(entries: UploadEntry[]): SourceRef | null {
+  const first = entries[0]
+  return first === undefined ? null : { kind: 'upload', id: first.id }
+}
+
 export function GeneratorForm(props: GeneratorProps): ReactElement {
   const { t, endpoint, catalog, protocols, presets, gallery, scope, api } = props
   const [providerId, setProviderId] = useState('')
@@ -433,12 +445,6 @@ export function GeneratorForm(props: GeneratorProps): ReactElement {
               </UploadButton>
             </div>
             <p className="ims-hint">{t('sources.count').replace('{n}', String(sources.length))}</p>
-            {uploads.error !== null ? (
-              <p className="ims-status ims-statusError" role="alert">
-                {t('upload.failed')}
-                {uploads.error}
-              </p>
-            ) : null}
             <h3 className="ims-blockTitle">{t('sources.mask')}</h3>
             <div className="ims-sources">
               {mask !== null ? (
@@ -458,8 +464,26 @@ export function GeneratorForm(props: GeneratorProps): ReactElement {
                 <IconLayers size={18} />
                 <span>{t('sources.maskPick')}</span>
               </button>
+              <UploadButton
+                t={t}
+                uploads={uploads}
+                multiple={false}
+                // 遮罩必须 PNG（官方要求带透明通道），文件选择器先行收窄。
+                accept="image/png"
+                className="ims-thumbAdd"
+                onUploaded={(entries) => setMask(uploadRef(entries))}
+              >
+                <IconPlusOutline16 size={18} />
+                <span>{t('upload.pick')}</span>
+              </UploadButton>
             </div>
             <p className="ims-hint">{t('sources.maskHint')}</p>
+            {uploads.error !== null ? (
+              <p className="ims-status ims-statusError" role="alert">
+                {t('upload.failed')}
+                {uploads.error}
+              </p>
+            ) : null}
           </section>
         ) : null}
       </div>