优化样式移除lodash 优化变量名优化中文提示词翻译的实现

LeafYeeXYZ · May 10, 2024 · d1060a7 · d1060a7
1 parent 97b01fa
commit d1060a7
Show file tree

Hide file tree

Showing 10 changed files with 426 additions and 519 deletions.
diff --git a/package.json b/package.json
@@ -24,13 +24,11 @@
     "@ant-design/icons": "^5.3.7",
     "antd": "^5.17.0",
     "idb-keyval": "^6.2.1",
-    "lodash-es": "^4.17.21",
-    "react": "19.0.0-beta-6946ebe620-20240508",
-    "react-dom": "19.0.0-beta-6946ebe620-20240508",
+    "react": "19.0.0-beta-04b058868c-20240508",
+    "react-dom": "19.0.0-beta-04b058868c-20240508",
     "swiper": "^11.1.1"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.12",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -39,7 +37,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "typescript": "^5.4.5",
     "vite": "^5.2.11"
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -26,14 +26,8 @@ export type Image = {
 // 如果存在非目标版本数据，确认后清空 idb-keyval <- clearDB.js
 const versionInfo = await check('2024041710')
 // 获取已收藏图片列表
-const staredImages: Image[] | undefined = await get('staredImages')
-let initialImages: Image[] = []
-if (!staredImages) {
-  await set('staredImages', [])
-} else {
-  staredImages.reverse()
-  initialImages = staredImages
-}
+const initialImages: Image[] = (await get('staredImages')) ?? []
+if (!initialImages) await set('staredImages', [])
 
 // 主组件
 export function App() {
@@ -43,57 +37,59 @@ export function App() {
    * @var {Blob} loadingImage 加载图片
    */
   // 图片列表
-  const [images, setImages] = useState(initialImages)
-  // 使用 useDialog 自定义 Hook
+  const [currentImages, setCurrentImages] = useState<Image[]>(initialImages.reverse())
+  // 加载图片
+  const [loadingImage, setLoadingImage] = useState<React.JSX.Element | null>(null)
+  // useDialog
   const { dialogState, dialogAction, dialogRef } = useDialog()
-  // 声明一个状态变量，用于记录中文提示词模式
-  const [zhMode, setZhMode] = useState(false)
-  // 声明一个状态变量，用于记录文生图/图生图模式
-  const [mode, setMode] = useState<'textToImage' | 'imageToImage'>('textToImage')
-  // 声明一个 ref, 用于记录是否有正在进行的操作
+  // 中文提示词模式
+  const [langMode, setLangMode] = useState<'zh' | 'en'>('en')
+  // 文生图/图生图模式
+  const [geneMode, setGeneMode] = useState<'textToImage' | 'imageToImage'>('textToImage')
+  // 是否有正在进行的操作
   const status = useRef('')
-  // 声明一个 ref, 用于记录图片选择器
+  // 图片选择器
   const imageSelectorRef = useRef<HTMLInputElement>(null)
   // 初始化操作
   useEffect(() => {
     // 视情况弹出更新提示
     versionInfo && dialogAction(versionInfo)
     // 根据用户设备暗色模式偏好设置主题
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.body.classList.add('dark')
-    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) document.body.classList.add('dark')
   }, [dialogAction])
 
   return (
     <main className="container">
 
       <Images 
-        images={images} 
-        setImages={setImages}
+        currentImages={currentImages}
+        setCurrentImages={setCurrentImages}
         dialogAction={dialogAction}
-        zhMode={zhMode} 
+        langMode={langMode} 
         status={status}
+        loadingImage={loadingImage}
       />
 
       <Prompt 
-        images={images}
-        setImages={setImages} 
+        currentImages={currentImages}
+        setCurrentImages={setCurrentImages}
         dialogAction={dialogAction}
-        zhMode={zhMode}
+        langMode={langMode}
         status={status}
-        mode={mode}
+        geneMode={geneMode}
         fileRef={imageSelectorRef}
+        setLoadingImage={setLoadingImage}
       >
         <div className="widgets">
           <LangSwitcher 
-            setZhMode={setZhMode}
+            setLangMode={setLangMode}
           />
           <ModeSwitcher 
-            setMode={setMode}
+            setGeneMode={setGeneMode}
           />   
           <ImageSelector 
             ref={imageSelectorRef}
-            mode={mode}
+            geneMode={geneMode}
           />
         </div>
       </Prompt>

diff --git a/src/components/Images.tsx b/src/components/Images.tsx
@@ -4,20 +4,20 @@ import 'swiper/css/effect-cards'
 import { EffectCards } from 'swiper/modules'
 import { DownloadOutlined, DeleteOutlined, StarOutlined, StarFilled, InfoCircleOutlined } from '@ant-design/icons'
 import { update } from 'idb-keyval'
-import { cloneDeep } from 'lodash-es'
 import '../styles/Images.css'
 import { Image } from './App.tsx'
 import { DialogAction } from '../libs/useDialog.tsx'
 
 interface ImageProps {
-  images: Image[]
-  setImages: (images: Image[]) => void
-  zhMode: boolean
+  currentImages: Image[]
+  setCurrentImages: React.Dispatch<React.SetStateAction<Image[]>>
+  langMode: 'zh' | 'en'
   dialogAction: React.Dispatch<DialogAction>
   status: React.MutableRefObject<string>
+  loadingImage: React.JSX.Element | null
 }
 
-function Images({ images, setImages, zhMode, dialogAction, status }: ImageProps) {
+function Images({ currentImages, setCurrentImages, langMode, dialogAction, status, loadingImage }: ImageProps) {
   // 操作进行前检测函数
   function callback(e: React.MouseEvent, image: Image, func: (image: Image) => Promise<void>) {
     e.preventDefault()
@@ -55,13 +55,7 @@ function Images({ images, setImages, zhMode, dialogAction, status }: ImageProps)
         })
       }
       // 更新图片列表
-      const modifiedImages = cloneDeep(images)
-      modifiedImages.forEach(item => {
-        if (item.hash === image.hash) {
-          item.star = !item.star
-        }
-      })
-      setImages(modifiedImages)
+      setCurrentImages(prev => prev.map(item => item.hash === image.hash ? { ...item, star: !item.star } : item))
     } catch (error) {
       error instanceof Error && dialogAction({ type: 'open', title: '收藏失败', content: `Images -> handleStar -> ${error.name}: ${error.message}` })
     }
@@ -77,9 +71,7 @@ function Images({ images, setImages, zhMode, dialogAction, status }: ImageProps)
     if (image.star) {
       dialogAction({ type: 'open', title: '错误', content: '请先取消收藏再删除' })
     } else {
-      let modifiedImages = cloneDeep(images)
-      modifiedImages = modifiedImages.filter(item => item.hash !== image.hash)
-      setImages(modifiedImages)
+      setCurrentImages(prev => prev.filter(item => item.hash !== image.hash))
     }
   }
   // 下载按钮点击事件
@@ -93,7 +85,7 @@ function Images({ images, setImages, zhMode, dialogAction, status }: ImageProps)
   }
 
   // 渲染图片列表
-  const slides = images.map(image => 
+  const slides = currentImages.map(image => 
     <SwiperSlide className='image-slide' key={image.hash}>
       <img src={image.base64} className={image.type === 'loading' ? 'image-loading image-item' : 'image-item'} />
       { 
@@ -132,31 +124,30 @@ function Images({ images, setImages, zhMode, dialogAction, status }: ImageProps)
       }
     </SwiperSlide>
   )
-  // 渲染 Swiper
-  const swiper = (
-    <Swiper
-      effect={'cards'}
-      grabCursor={true}
-      modules={[EffectCards]}
-      className="images-swiper"
-    >
-      {slides}
-    </Swiper>
-  )
-  // 返回 JSX
+
   return (
     <div className="images-container">
 
       <div className="images-intro">
         <span>
           这里是赛博画师小叶子<br />
-          在下方输入<span className='images-intro-lang'>{zhMode ? '中文' : '英文'}</span>提示词并点击生成<br />
+          在下方输入<span className='images-intro-lang'>{langMode === 'zh' ? '中文' : '英文'}</span>提示词并点击生成<br />
           大部分模型输入自然语言即可<br />
           本站开源于 <a href='https://github.com/LeafYeeXYZ/PainterLeaf' target='_blank'>GitHub ↗</a>
         </span>
       </div>
 
-      { images.length && swiper }
+      { (currentImages.length || loadingImage) && (
+        <Swiper
+          effect={'cards'}
+          grabCursor={true}
+          modules={[EffectCards]}
+          className="images-swiper"
+        >
+          {loadingImage}
+          {slides}
+        </Swiper>
+      ) }
 
     </div>
   )