Merge branch 'fix/block-in-deck-build' into 'main'

fix: block in deck build

See merge request !278

src/infra/pfetch.ts

@@ -26,7 +26,7 @@ export async function pfetch(
       }
 
       bytesRead += value.length;
-      const progress = (bytesRead / contentLength) * 100;
+      const progress = bytesRead / contentLength;
       options?.progressCallback(progress);
     }
   }

src/ui/BuildDeck/index.module.scss

@@ -40,6 +40,7 @@
 }
 
 .container {
+  width: -webkit-fill-available;
   height: calc(100% - 20px);
   border: 1px solid rgba(255, 255, 255, 0.05);
   display: flex;

src/ui/BuildDeck/index.tsx

@@ -71,7 +71,7 @@ export const loader: LoaderFunction = async () => {
 
 export const Component: React.FC = () => {
   const snapDecks = useSnapshot(deckStore);
-  const { sqlite } = useSnapshot(initStore);
+  const { progress } = useSnapshot(initStore.sqlite);
   const [selectedDeck, setSelectedDeck] = useState<IDeck>(deckStore.decks[0]);
 
   const { message } = App.useApp();
@@ -122,23 +122,25 @@ export const Component: React.FC = () => {
           <HigherCardDetail />
         </div>
         <div className={styles.content}>
-          <div className={styles.deck}>
-            <DeckEditor
-              deck={selectedDeck}
-              onClear={editDeckStore.clear}
-              onReset={handleDeckEditorReset}
-              onSave={handleDeckEditorSave}
-            />
-          </div>
-          <div className={styles.select}>
-            {sqlite.progress === 1 ? (
-              <Search />
-            ) : (
-              <div className={styles.container}>
-                <Loading />
+          {progress === 1 ? (
+            <>
+              <div className={styles.deck}>
+                <DeckEditor
+                  deck={selectedDeck}
+                  onClear={editDeckStore.clear}
+                  onReset={handleDeckEditorReset}
+                  onSave={handleDeckEditorSave}
+                />
               </div>
-            )}
-          </div>
+              <div className={styles.select}>
+                <Search />
+              </div>
+            </>
+          ) : (
+            <div className={styles.container}>
+              <Loading progress={progress * 100} />
+            </div>
+          )}
         </div>
       </div>
     </DndProvider>

src/ui/Shared/Loading/index.tsx

@@ -2,6 +2,11 @@ import { LoadingOutlined } from "@ant-design/icons";
 
 import styles from "./index.module.scss";
 
+/**
+ * 加载中
+ * @param progress 0~1的进度
+ * @param hiddenText 是否隐藏文字
+ */
 export const Loading: React.FC<{ progress?: number; hiddenText?: boolean }> = ({
   progress,
   hiddenText,
@@ -12,7 +17,7 @@ export const Loading: React.FC<{ progress?: number; hiddenText?: boolean }> = ({
     </span>
     {!hiddenText && (
       <span className={styles.text}>
-        {progress ? `${progress}%` : "加载中"}
+        {progress ? `${progress.toFixed(2)}%` : "加载中"}
       </span>
     )}
   </div>