fix(view):修复重新加载其他漫画目录后，图片高度记忆不清除的问题。

src-tauri/Cargo.lock

@@ -339,6 +339,7 @@ dependencies = [
  "tauri-build",
  "thiserror",
  "tokio",
+ "uuid 1.3.0",
  "walkdir",
 ]
 

src-tauri/Cargo.toml

@@ -24,6 +24,7 @@ walkdir = "2.3.2"
 serde_repr = "0.1.10"
 tokio = { version = "1.23.1", features = ["full"] }
 image = "0.24.5"
+uuid = "1.3.0"
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem

src-tauri/src/commands/files.rs

@@ -4,6 +4,7 @@ use walkdir::WalkDir;
 
 #[derive(Debug, Clone, Serialize)]
 pub struct FileItem {
+    pub id: String,
     pub filename: String,
     pub path: String,
     pub height: u32,
@@ -19,6 +20,7 @@ pub fn scan_directory(target: String) -> Result<Vec<FileItem>, String> {
         .map(|f| {
             let (width, height) = image::image_dimensions(f.path())?;
             Ok(FileItem {
+                id: uuid::Uuid::new_v4().to_string(),
                 filename: f
                     .path()
                     .file_name()

src/components/ComicView.tsx

@@ -1,16 +1,20 @@
 //@ts-nocheck
 import { Box } from '@mantine/core';
-import { equals } from 'ramda';
+import { equals, head } from 'ramda';
-import { FC, useLayoutEffect } from 'react';
+import { FC, useLayoutEffect, useMemo } from 'react';
-import { useMeasure } from 'react-use';
+import { useMeasure, useUpdate } from 'react-use';
+import { sortedFilesSelector, useFileListStore } from '../states/files';
 import { useZoomState } from '../states/zoom';
 import { ContinuationView } from './ContinuationView';
 import { SingleView } from './SingleView';
 
 export const ComicView: FC = () => {
+  const forceUpdate = useUpdate();
+  const files = useFileListStore(sortedFilesSelector());
   const viewMode = useZoomState.use.viewMode();
   const updateViewHeight = useZoomState.use.updateViewHeight();
   const [containerRef, { height }] = useMeasure();
+  const firstFileId = useMemo(() => head(files)?.id ?? '', [files, files.length]);
 
   useLayoutEffect(() => {
     updateViewHeight(height);
@@ -19,7 +23,7 @@ export const ComicView: FC = () => {
   return (
     <Box w="100%" h="100%" sx={{ overflow: 'hidden' }} ref={containerRef}>
       {equals(viewMode, 'single') && <SingleView />}
-      {equals(viewMode, 'continuation') && <ContinuationView />}
+      {equals(viewMode, 'continuation') && <ContinuationView key={firstFileId} />}
     </Box>
   );
 };

src/components/ContinuationView.tsx

@@ -21,6 +21,7 @@ export const ContinuationView: FC = () => {
     },
     [files]
   );
+  const fileHeights = useMemo(() => map(item => item.height * (zoom / 100), files), [files, zoom]);
 
   useEffect(() => {
     ebus?.addListener('navigate_offset', ({ filename }) => {
@@ -48,7 +49,8 @@ export const ContinuationView: FC = () => {
         <VariableSizeList
           itemData={files}
           itemCount={fileCount}
-          itemSize={index => files[index].height * (zoom / 100)}
+          itemSize={index => fileHeights[index]}
+          itemKey={index => files[index].id}
           height={viewHeight}
           width="100%"
           ref={virtualListRef}

src/models.ts

@@ -1,5 +1,6 @@
 export type FileItem = {
   sort: number;
+  id: string;
   filename: string;
   path: string;
   width: number;