fix(save as image): listen for content changes to regenerate previews

src/app/styles/default.css

@@ -15,9 +15,9 @@
 
   /* one-item */
   .one-item:not(.one-item__theme) {
-      border-radius: 10px;
       padding: 12px 18px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      /* border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
       background-color: #f0f4fb;
       color: #666; /* 主题描述颜色 */
   }

src/components/header/export-dialog.tsx

@@ -25,11 +25,12 @@ import { cn } from '@/lib/utils'
 interface ExportImageProps {
   previewRef: React.RefObject<PreviewRef>;
   isExportModalOpen: boolean;
+  isExporting: boolean;
   setIsExportModalOpen: (open: boolean) => void;
+  setIsExporting: (isExporting: boolean) => void;
 }
 
-export function ExportImageDialog({ previewRef, isExportModalOpen, setIsExportModalOpen }: ExportImageProps) {
-  const [isExporting, setIsExporting] = useState(true)
+export function ExportImageDialog({ previewRef, isExportModalOpen, isExporting, setIsExporting, setIsExportModalOpen }: ExportImageProps) {
   const [scale, setScale] = useState('1')
   const [previewImages, setPreviewImages] = useState<ExportImage[]>([])
   const [api, setApi] = useState<CarouselApi>()
@@ -41,18 +42,15 @@ export function ExportImageDialog({ previewRef, isExportModalOpen, setIsExportMo
       return
     }
 
-    setCount(api.scrollSnapList().length)
-    if (!isExporting) {
-      setCurrent(api.selectedScrollSnap() + 1)
-      setCount(previewImages?.length as number)
-    }
+    setCount(previewImages?.length as number)
+    setCurrent(api.selectedScrollSnap() + 1)
 
     api.on('select', () => {
       setCurrent(api.selectedScrollSnap() + 1)
     })
   }, [api, isExporting, previewImages?.length])
 
-  // 监听导出选项变化，若选项更新就重新生成图片
+  // Listen for changes in export options and regenerate images if options are updated
   useEffect(() => {
     const exportOption = {
       scale: Number(scale),
@@ -85,10 +83,12 @@ export function ExportImageDialog({ previewRef, isExportModalOpen, setIsExportMo
 
     // 等待DOM节点更新，延迟生成图片
     const timer = setTimeout(() => {
-      generateImages()
+      if (isExporting) {
+        generateImages()
+      }
     }, 1000)
     return () => clearTimeout(timer)
-  }, [previewRef, scale])
+  }, [previewRef, scale, setIsExporting, isExporting])
 
   const exportImages = useCallback(async () => {
     const zip = new JSZip()
@@ -106,7 +106,7 @@ export function ExportImageDialog({ previewRef, isExportModalOpen, setIsExportMo
     } finally {
       setIsExporting(false)
     }
-  }, [previewImages])
+  }, [previewImages, setIsExporting])
 
   // 更新缩放比例
   const onScaleChange = (event: React.MouseEvent<HTMLDivElement>) => {

src/components/header/header.tsx

@@ -2,7 +2,7 @@
 
 import { Download, Folder, ImageDown, LinkIcon, Trash2, TriangleAlert } from 'lucide-react'
 import Link from 'next/link'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { ExportImageDialog } from './export-dialog'
 import { useToast } from '@/components/ui/use-toast'
 import { Button } from '@/components/ui/button'
@@ -34,23 +34,30 @@ export function Header(props: HeaderProps) {
   const [isOpenFile, setIsOpenFile] = useState(false)
   const [imageDialogOpen, setImageDialogOpen] = useState(false)
   const [dialogType, setDialogType] = useState<DialogType>('save_file')
+  const [isExporting, setIsExporting] = useState(true)
   const { contents, setContents, previewRef, theme, setTheme } = props
   const { toast } = useToast()
   const fileRef = useRef<HTMLInputElement>(null)
 
+  useEffect(() => {
+    // Regenerate images when the contents are updated
+    setIsExporting(true)
+  }, [contents])
+
+  // open different dialog by type
   function handleDialogOpen(type: DialogType) {
     setIsOpenFile(true)
     setDialogType(type)
   }
 
-  // open different dialog by type
   function handleOpenfileBtnClick() {
     if (fileRef.current) {
       fileRef.current.click()
       setIsOpenFile(false)
     }
   }
 
+  // open from file
   function handleFileImport(event: React.ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0]
     if (file) {
@@ -104,6 +111,7 @@ export function Header(props: HeaderProps) {
     }
   }
 
+  // save as file
   async function handleFileSave() {
     const exportContents = await Promise.all(
       contents.map((item) => {
@@ -166,6 +174,7 @@ export function Header(props: HeaderProps) {
     setTheme('')
   }
 
+  // open the dialog of saving as image
   async function handleImageDialogOpen() {
     setImageDialogOpen(true)
   }
@@ -310,6 +319,8 @@ export function Header(props: HeaderProps) {
         previewRef={previewRef}
         isExportModalOpen={imageDialogOpen}
         setIsExportModalOpen={setImageDialogOpen}
+        isExporting={isExporting}
+        setIsExporting={setIsExporting}
       />
     </header>
   )