(null);
const [isMainImagePreviewOpen, setIsMainImagePreviewOpen] = useState(false);
@@ -151,6 +165,8 @@ export function CreativeImageInputPanel({
mainImageClickMode === 'preview' && Boolean(uploadedImageSrc);
const shouldShowMainImageUploadButton =
isMainImageUploadEnabled && shouldPreviewMainImage;
+ const canImportHostImage = canUseNativeHostCapability('file.importImage');
+ const promptReferenceInputId = `${mainImageInputId}-prompt-reference`;
useEffect(() => {
if (uploadedImageSrc) {
@@ -188,6 +204,60 @@ export function CreativeImageInputPanel({
? 'creative-image-input-panel__image-card puzzle-image-upload-card relative aspect-square h-full min-h-[14rem] max-h-full max-w-full overflow-hidden rounded-[1.25rem] border border-[var(--platform-subpanel-border)] bg-white/90 shadow-[0_12px_28px_rgba(15,23,42,0.08)] transition sm:min-h-[18rem] lg:h-auto lg:w-full'
: 'creative-image-input-panel__image-card puzzle-image-upload-card relative aspect-square w-full min-h-[14rem] max-w-full overflow-hidden rounded-[1.25rem] border border-[var(--platform-subpanel-border)] bg-white/90 shadow-[0_12px_28px_rgba(15,23,42,0.08)] transition sm:min-h-[18rem]';
+ const importHostImageAsFile = async () => {
+ const result = await importHostImageFile();
+ if (!result) {
+ return null;
+ }
+ return hostImageImportResultToFile(result);
+ };
+
+ const handleMainImageUploadClick = () => {
+ if (disabled || !isMainImageUploadEnabled) {
+ return;
+ }
+ if (!canImportHostImage) {
+ mainImageInputRef.current?.click();
+ return;
+ }
+
+ void (async () => {
+ try {
+ const file = await importHostImageAsFile();
+ if (file) {
+ onMainImageFileSelect(file);
+ }
+ } catch {
+ // 中文注释：宿主导入失败时不再弹浏览器文件框，避免权限失败后重复打扰用户。
+ }
+ })();
+ };
+
+ const handlePromptReferenceUploadClick = () => {
+ if (
+ promptReferenceUploadDisabled ||
+ !shouldShowPromptReferences ||
+ !onPromptReferenceFilesSelect
+ ) {
+ return;
+ }
+ if (!canImportHostImage) {
+ promptReferenceInputRef.current?.click();
+ return;
+ }
+
+ void (async () => {
+ try {
+ const file = await importHostImageAsFile();
+ if (file) {
+ onPromptReferenceFilesSelect([file]);
+ }
+ } catch {
+ // 中文注释：宿主导入失败时保持当前表单状态，由外层错误通道继续承接后续重试。
+ }
+ })();
+ };
+
return (
setIsMainImagePreviewOpen(true)}
/>
) : isMainImageUploadEnabled ? (
-
+
) : null}
{uploadedImageSrc ? (
mainImageInputRef.current?.click()}
+ onClick={handleMainImageUploadClick}
icon={}
className="absolute bottom-3 right-3 z-10 h-10 w-10"
/>
@@ -323,16 +400,18 @@ export function CreativeImageInputPanel({
className="absolute left-3 top-3 z-10 h-10 w-10"
/>
) : isMainImageUploadEnabled && !uploadedImageSrc ? (
-
+
) : null}
@@ -370,39 +449,52 @@ export function CreativeImageInputPanel({
{imageModelPicker}
{shouldShowPromptReferences &&
onPromptReferenceFilesSelect ? (
-
-
- {
- const files = Array.from(
- event.currentTarget.files ?? [],
- );
- event.currentTarget.value = '';
- if (files.length > 0) {
- onPromptReferenceFilesSelect(files);
- }
- }}
- className="sr-only"
- />
-
- }
- className={`absolute bottom-3 right-3 z-10 h-8 w-8 border-[var(--platform-subpanel-border)] bg-white/96 hover:bg-[var(--platform-subpanel-fill)] ${
- promptReferenceUploadDisabled
- ? 'cursor-not-allowed opacity-55'
- : 'cursor-pointer'
- }`}
- />
+ <>
+ {
+ const files = Array.from(
+ event.currentTarget.files ?? [],
+ );
+ event.currentTarget.value = '';
+ if (files.length > 0) {
+ onPromptReferenceFilesSelect(files);
+ }
+ }}
+ className="sr-only"
+ />
+ {canImportHostImage ? (
+ }
+ className="absolute bottom-3 right-3 z-10 h-8 w-8 border-[var(--platform-subpanel-border)] bg-white/96 hover:bg-[var(--platform-subpanel-fill)]"
+ />
+ ) : (
+ }
+ className={`absolute bottom-3 right-3 z-10 h-8 w-8 border-[var(--platform-subpanel-border)] bg-white/96 hover:bg-[var(--platform-subpanel-fill)] ${
+ promptReferenceUploadDisabled
+ ? 'cursor-not-allowed opacity-55'
+ : 'cursor-pointer'
+ }`}
+ />
+ )}
+
) : null}
{shouldShowPromptReferences &&