小优化代码结构

src/components/App.jsx

@@ -1,22 +1,47 @@
 import '../styles/App.css'
+import '../styles/Widgets.css'
 import Images from './Images.jsx'
 import Prompt from './Prompt.jsx'
 import Dialog from './Dialog.jsx'
-import LangSwitcher from './LangSwitcher.jsx'
-
-import { useState, useRef } from 'react'
+import LangSwitcher from './Widgets/LangSwitcher.jsx'
+import localforage from 'localforage'
+import { useState, useRef, useEffect } from 'react'
 import { useImmer } from 'use-immer'
 import useDialog from '../libs/useDialog.jsx'
 
 function App() {
-  // 声明一个状态变量，用于保存图片的 URL 和类型
+  /**
+   * 声明一个状态变量，用于保存图片的 URL 和类型
+   * @type {Array<{
+   *  url: string,
+   *  type: 'image' | 'loading',
+   *  star: 'stared' | 'notStared',
+   *  hash: string
+   * }>}
+   */
   const [images, setImages] = useImmer([])
-  // 声明一个引用，用于表示 dialog 元素
+  /** 一个引用，用于表示 dialog 元素 */
   const dialogRef = useRef(null)
   // 使用 useDialog 自定义 Hook
   const { dialogState, dialogAction } = useDialog(dialogRef)
   // 声明一个状态变量，用于记录中文提示词模式
   const [zhMode, setZhMode] = useState(false)
+  // 首次渲染时从 localforage 中获取已收藏图片列表
+  useEffect(() => {
+    localforage.getItem('staredImages')
+    .then(staredImages => {
+      if (staredImages) {
+        const initialImages = staredImages.map(image => {
+          const url = URL.createObjectURL(image.blob)
+          const hash = image.hash
+          return { url, type: 'image', star: 'stared', hash }
+        })
+        initialImages.reverse()
+        setImages(initialImages)
+      }
+    })
+    return () => setImages([])
+  }, [setImages])
 
   return (
     <main className="container">

src/components/Images.jsx

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types'
 import '../styles/Images.css'
 import localforage from 'localforage'
 import { DownloadOutlined, DeleteOutlined, StarOutlined, StarFilled } from '@ant-design/icons'
-import { useEffect } from 'react'
 import getHash from '../libs/getHash'
 
 // 尝试从 localforage 中获取 加载图片
@@ -116,27 +115,6 @@ function Images({ images, setImages, zhMode, dialogAction }) {
     )
   })
 
-  // 首次渲染时从 localforage 中获取已收藏图片列表
-  useEffect(() => {
-    localforage.getItem('staredImages').then(staredImages => {
-      if (staredImages) {
-        const initialImages = staredImages.map(image => {
-          const url = URL.createObjectURL(image.blob)
-          const hash = image.hash
-          return { url, type: 'image', star: 'stared', hash }
-        })
-        initialImages.reverse()
-        setImages(initialImages)
-      }
-    })
-    return () => {
-      setImages(draft => {
-        draft.shift()
-        return
-      })
-    }
-  }, [setImages])
-
   return (
     <div className="images-container">
       <div className="images-intro">

src/components/LangSwitcher.jsx → src/components/Widgets/LangSwitcher.jsx

@@ -1,6 +1,5 @@
 import { Switch, ConfigProvider } from 'antd'
 import PropTypes from 'prop-types'
-import '../styles/LangSwitcher.css'
 
 function LangSwitcher({ setZhMode }) {
   const handleChange = checked => {

src/libs/useDialog.jsx

@@ -32,7 +32,15 @@ function reducer(state, action) {
  * 接受一个对话框的引用
  * 返回该对话框的状态和操作函数
  * @param {useRef} dialogRef 对话框的引用
- * @returns { dialogState, dialogAction } 返回对话框的状态和操作函数
+ * @typedef {Object} dialogState 对话框的状态
+ * @property {string} dialogState.title 对话框的标题
+ * @property {string} dialogState.content 对话框的内容
+ * @property {useRef} dialogState.ele 对话框的引用
+ * @typedef {Function} dialogAction 对话框的操作函数
+ * @property {'open' | 'close'} dialogAction.type 打开或关闭对话框
+ * @property {string} dialogAction.title 对话框的标题
+ * @property {string} dialogAction.content 对话框的内容
+ * @returns {Object} 返回对话框的状态和操作函数
  */
 export default function useDialog(dialogRef) {
   // 使用 useReducer

src/styles/LangSwitcher.css → src/styles/Widgets.css

@@ -4,15 +4,13 @@
   right: 11%;
   z-index: 10;
 }
-
 @media screen and (max-width: 768px) {
   .lang-switcher {
     right: 11.5%;
   }
 }
-
 @media screen and (max-width: 512px) {
   .lang-switcher {
     right: 12%;
   }
-}
+}