优化回调函数逻辑, 再次提高稳定性

LeafYeeXYZ · Apr 17, 2024 · cf27fd1 · cf27fd1
1 parent 6b975e3
commit cf27fd1
Showing 1 changed file with 53 additions and 54 deletions.
diff --git a/src/components/Images.jsx b/src/components/Images.jsx
@@ -9,12 +9,28 @@ import PropTypes from 'prop-types'
 import '../styles/Images.css'
 
 function Images({ images, setImages, zhMode, dialogAction }) {
+  // 操作进行前检测函数
+  function callback(e, image, func) {
+    e.preventDefault()
+    const loading = document.querySelector('.image-loading')
+    if (loading) {
+      dialogAction({ type: 'open', title: '错误', content: '请等待当前图片生成或下载完成' })
+    } else {
+      // 创建一个隐藏的 .image-loading 元素, 以避免在收藏时进行其他操作
+      const loading = document.createElement('div')
+      loading.className = 'image-loading'
+      loading.style.display = 'none'
+      document.body.appendChild(loading)
+      // 处理操作
+      func(image)
+        .then(() => document.body.removeChild(loading))
+        .catch(error => alert(`未捕获: Images -> ${func.name} -> ${error}`))
+    }
+  }
+
   // 收藏按钮点击事件
-  async function handleStar(image, element) {
+  async function handleStar(image) {
     try {
-      // 禁用按钮
-      element.disabled = true
-      element.style.cursor = 'progress'
       if (image.star) {
         // 如果取消收藏, 从 IndexedDB 中删除
         await update('staredImages', staredImages => {
@@ -45,12 +61,30 @@ function Images({ images, setImages, zhMode, dialogAction }) {
     } catch (error) {
       // 打开对话框
       dialogAction({ type: 'open', title: '收藏失败', content: `Images -> handleStar -> ${error}` })
-    } finally {
-      // 启用按钮
-      element.disabled = false
-      element.style.cursor = 'pointer'
     }
   }
+  // 提示词按钮点击事件
+  async function handleInfo(image) {
+    dialogAction({ type: 'open', title: '本图提示词', content: image.prompt })
+  }
+  // 删除按钮点击事件
+  async function handleDelete(image) {
+    if (image.star) {
+      dialogAction({ type: 'open', title: '错误', content: '请先取消收藏再删除' })
+    } else {
+      let modifiedImages = cloneDeep(images)
+      modifiedImages = modifiedImages.filter(item => item.hash !== image.hash)
+      setImages(modifiedImages)
+    }
+  }
+  // 下载按钮点击事件
+  async function handleDownload(image) {
+    const filename = `${image.prompt.replace(/\(([^)]*)\)/, '').trim()}.png`
+    const a = document.createElement('a')
+    a.href = image.base64
+    a.download = filename
+    a.click()
+  }
 
   // 渲染图片列表
   const slides = images.map(image => 
@@ -62,64 +96,29 @@ function Images({ images, setImages, zhMode, dialogAction }) {
 
           <div className='image-funcs-left'>
 
-            <button id={image.hash} className='image-marker' onClick={e => {
-              e.preventDefault()
-              const loading = document.querySelector('.image-loading')
-              if (loading) {
-                dialogAction({ type: 'open', title: '错误', content: '请等待当前图片生成完成' })
-              } else {
-                // 创建一个隐藏的 .image-loading 元素, 以避免在收藏时进行其他操作
-                const loading = document.createElement('div')
-                loading.className = 'image-loading'
-                loading.style.display = 'none'
-                document.body.appendChild(loading)
-                // 处理收藏
-                const element = document.getElementById(image.hash)
-                handleStar(image, element)
-                  .then(() => document.body.removeChild(loading))
-                  .catch(error => alert(`未捕获: Images -> handleStar -> ${error}`))
-              }
-            }}>{ image.star ? <StarFilled /> : <StarOutlined /> }</button>
+            <button 
+              className='image-marker' 
+              onClick={e => callback(e, image, handleStar)}
+            >{ image.star ? <StarFilled /> : <StarOutlined /> }</button>
 
           </div>
 
           <div className='image-funcs-right'>
 
             <button
               className='image-info' 
-              onClick={e => {
-                e.preventDefault()
-                dialogAction({ type: 'open', title: '本图提示词', content: image.prompt })
-            }}><InfoCircleOutlined /></button>
+              onClick={e => callback(e, image, handleInfo)}
+            ><InfoCircleOutlined /></button>
 
-            <a 
+            <button
               className='image-downloader' 
-              href={image.base64} 
-              download={`${image.prompt.replace(/\(([^)]*)\)/, '').trim()}.png`}
-              onClick={e => {
-                const loading = document.querySelector('.image-loading')
-                if (loading) {
-                  e.preventDefault()
-                  dialogAction({ type: 'open', title: '错误', content: '请等待当前图片生成完成' })
-                }
-              }}
-            ><DownloadOutlined /></a>
+              onClick={e => callback(e, image, handleDownload)}
+            ><DownloadOutlined /></button>
 
             <button
               className='image-deleter' 
-              onClick={e => {
-                e.preventDefault()
-                const loading = document.querySelector('.image-loading')
-                if (loading) {
-                  dialogAction({ type: 'open', title: '错误', content: '请等待当前图片生成完成' })
-                } else if (image.star) {
-                  dialogAction({ type: 'open', title: '错误', content: '请先取消收藏再删除' })
-                } else {
-                  let modifiedImages = cloneDeep(images)
-                  modifiedImages = modifiedImages.filter(item => item.hash !== image.hash)
-                  setImages(modifiedImages)
-                }
-            }}><DeleteOutlined /></button>
+              onClick={e => callback(e, image, handleDelete)}
+            ><DeleteOutlined /></button>
 
           </div>