feat(image): 优化图片生成记录持久化和导出功能

- 新增生成记录配置持久化功能，保存提示词、参考图、模型、质量、尺寸和张数配置
- 结果图写入本地图片存储后只保存 storageKey，减少存储空间占用
- 点击历史记录可回填生成配置并预览结果
- 优化我的画布、我的素材导出功能
- 新增视频创作台页面
- 修复图片节点size参数传递问题
- 添加完整的生成日志数据结构和序列化处理
- 实现图片存储和删除的批量操作支持

web/src/app/(user)/canvas/components/canvas-image-settings-popover.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import { Settings2 } from "lucide-react";
 import { Button, Popover } from "antd";
 
@@ -16,30 +17,56 @@ type CanvasImageSettingsPopoverProps = {
     buttonClassName?: string;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     placement?: "topLeft" | "top" | "topRight" | "bottomLeft" | "bottom" | "bottomRight";
+    autoAdjustOverflow?: boolean;
 };
 
-export function CanvasImageSettingsPopover({ config, onConfigChange, onOpenChange, buttonClassName, getPopupContainer, placement = "topLeft" }: CanvasImageSettingsPopoverProps) {
+export function CanvasImageSettingsPopover({ config, onConfigChange, onOpenChange, buttonClassName, getPopupContainer, placement = "topLeft", autoAdjustOverflow = true }: CanvasImageSettingsPopoverProps) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const triggerRef = useRef<HTMLSpanElement>(null);
+    const [open, setOpen] = useState(false);
     const quality = config.quality || "auto";
     const count = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
     const activeSize = config.size || "auto";
+    const updateOpen = (nextOpen: boolean) => {
+        setOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    };
+
+    useEffect(() => {
+        if (!open) return;
+        const closeOnOutsidePointer = (event: PointerEvent) => {
+            const path = event.composedPath();
+            if (triggerRef.current && path.includes(triggerRef.current)) return;
+            if (path.some((item) => item instanceof Element && item.closest(".canvas-image-settings-popover"))) return;
+            setOpen(false);
+            onOpenChange?.(false);
+        };
+
+        window.addEventListener("pointerdown", closeOnOutsidePointer, true);
+        return () => window.removeEventListener("pointerdown", closeOnOutsidePointer, true);
+    }, [onOpenChange, open]);
 
     return (
         <Popover
+            open={open}
             trigger="click"
             placement={placement}
             arrow={false}
             overlayClassName="canvas-image-settings-popover"
             color={theme.toolbar.panel}
-            getPopupContainer={getPopupContainer || ((triggerNode) => triggerNode.parentElement || document.body)}
-            onOpenChange={onOpenChange}
+            zIndex={1200}
+            autoAdjustOverflow={autoAdjustOverflow}
+            getPopupContainer={getPopupContainer || (() => document.body)}
+            onOpenChange={updateOpen}
             content={<ImageSettingsPanel config={config} onConfigChange={(key, value) => onConfigChange(key, value)} theme={theme} />}
         >
-            <Button size="small" type="text" className={buttonClassName || "!h-8 !max-w-[180px] !justify-start !rounded-full !px-2.5"} style={{ background: theme.node.fill, color: theme.node.text }} icon={<Settings2 className="size-3.5" />}>
-                <span className="truncate">
-                    {imageQualityLabel(quality)} · {imageSizeLabel(activeSize)} · {count} 张
-                </span>
-            </Button>
+            <span ref={triggerRef} className="inline-flex min-w-0">
+                <Button size="small" type="text" className={buttonClassName || "!h-8 !max-w-[180px] !justify-start !rounded-full !px-2.5"} style={{ background: theme.node.fill, color: theme.node.text }} icon={<Settings2 className="size-3.5" />}>
+                    <span className="truncate">
+                        {imageQualityLabel(quality)} · {imageSizeLabel(activeSize)} · {count} 张
+                    </span>
+                </Button>
+            </span>
         </Popover>
     );
 }