feat: initStore

src/stores/index.ts

@@ -2,6 +2,7 @@ export * from "./accountStore";
 export * from "./cardStore";
 export * from "./chatStore";
 export * from "./deckStore";
+export * from "./initStore";
 export * from "./matStore";
 export * from "./placeStore";
 export * from "./replayStore";
@@ -15,6 +16,7 @@ import { accountStore } from "./accountStore";
 import { cardStore } from "./cardStore";
 import { chatStore } from "./chatStore";
 import { deckStore } from "./deckStore";
+import { initStore } from "./initStore";
 import { matStore } from "./matStore";
 import { placeStore } from "./placeStore";
 import { replayStore } from "./replayStore";
@@ -30,6 +32,7 @@ devtools(replayStore, { name: "replay", enabled: DEV });
 devtools(accountStore, { name: "account", enabled: DEV });
 devtools(roomStore, { name: "room", enabled: DEV });
 devtools(deckStore, { name: "deck", enabled: DEV });
+devtools(initStore, { name: "init", enabled: DEV });
 
 // 重置所有`Store`
 export const resetUniverse = () => {

src/stores/initStore.ts

+import { proxy } from "valtio";
+
+import { type NeosStore } from "./shared";
+
+export const initStore = proxy({
+  sqlite: {
+    initialized: false,
+    progress: 0,
+  },
+  i18n: {
+    initialized: false,
+  },
+  // ...
+  reset() {},
+} satisfies NeosStore);

src/ui/BuildDeck/index.tsx

@@ -15,15 +15,22 @@ import {
   Space,
   type ThemeConfig,
 } from "antd";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
+import {
+  Await,
+  defer,
+  type LoaderFunction,
+  useLoaderData,
+} from "react-router-dom";
 import { useSnapshot } from "valtio";
 
-import { deckStore, type IDeck } from "@/stores";
-import { Background, ScrollableArea, YgoCard } from "@/ui/Shared";
+import { deckStore, type IDeck, initStore } from "@/stores";
+import { Background, Loading, ScrollableArea, YgoCard } from "@/ui/Shared";
 
 import { CardDetail } from "./CardDetail";
 import { DeckSelect } from "./DeckSelect";
 import styles from "./index.module.scss";
+import { initSqlite } from "./utils";
 
 const theme: ThemeConfig = {
   components: {
@@ -33,7 +40,18 @@ const theme: ThemeConfig = {
   },
 };
 
+export const loader: LoaderFunction = async () => {
+  return defer({
+    initialized: initStore.sqlite.initialized
+      ? true
+      : initSqlite().then(() => (initStore.sqlite.initialized = true)),
+  });
+};
+
 export const Component: React.FC = () => {
+  const data = useLoaderData<{
+    initialized: boolean;
+  }>();
   const snapDecks = useSnapshot(deckStore);
   const [selectedDeck, setSelectedDeck] = useState<IDeck>(deckStore.decks[0]);
 
@@ -57,8 +75,22 @@ export const Component: React.FC = () => {
           <CardDetail code={123} open={false} onClose={() => {}} />
         </div>
         <div className={styles.content}>
-          <Deck deck={selectedDeck} onSave={() => {}} />
+          <div className={styles.deck}>
+            <DeckEditor deck={selectedDeck} onSave={() => {}} />
+          </div>
+          <div className={styles.select}>
+            <Suspense
+              fallback={
+                <div className={styles.container}>
+                  <Loading />
+                </div>
+              }
+            >
+              <Await resolve={data.initialized}>
                 <CardSelect />
+              </Await>
+            </Suspense>
+          </div>
         </div>
       </div>
     </ConfigProvider>
@@ -67,7 +99,7 @@ export const Component: React.FC = () => {
 Component.displayName = "Build";
 
 /** 正在编辑的卡组 */
-const Deck: React.FC<{
+const DeckEditor: React.FC<{
   deck: IDeck;
   onSave: (deck: IDeck) => void;
 }> = ({ deck, onSave }) => {
@@ -76,7 +108,6 @@ const Deck: React.FC<{
     setEditingDeck(deck);
   }, [deck]);
   return (
-    <div className={styles.deck}>
     <div className={styles.container}>
       <Space className={styles.title}>
         <Input
@@ -120,14 +151,12 @@ const Deck: React.FC<{
         ))}
       </ScrollableArea>
     </div>
-    </div>
   );
 };
 
 /** 卡片库，选择卡片加入正在编辑的卡组 */
 const CardSelect: React.FC = () => {
   return (
-    <div className={styles.select}>
     <div className={styles.container}>
       <div className={styles.title}>
         <Input
@@ -158,6 +187,5 @@ const CardSelect: React.FC = () => {
         </div>
       </ScrollableArea>
     </div>
-    </div>
   );
 };

src/ui/BuildDeck/utils.ts

+import { useConfig } from "@/config";
+import sqliteMiddleWare, { sqliteCmd } from "@/middleware/sqlite";
+
+const { cardsDbUrl } = useConfig();
+
+export const initSqlite = () =>
+  sqliteMiddleWare({
+    cmd: sqliteCmd.INIT,
+    initInfo: { dbUrl: cardsDbUrl },
+  });

src/ui/Shared/Loading/index.module.scss

+.loading {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  .text {
+    font-size: 14px;
+  }
+  .icon {
+    font-size: 20px;
+  }
+}

src/ui/Shared/Loading/index.tsx

+import { LoadingOutlined } from "@ant-design/icons";
+
+import styles from "./index.module.scss";
+
+export const Loading: React.FC<{ progress?: number; hiddenText?: boolean }> = ({
+  progress,
+  hiddenText,
+}) => (
+  <div className={styles.loading}>
+    <span className={styles.icon}>
+      <LoadingOutlined />
+    </span>
+    {!hiddenText && (
+      <span className={styles.text}>
+        {progress ? `${progress}%` : "加载中"}
+      </span>
+    )}
+  </div>
+);

src/ui/Shared/index.ts

 export * from "./Background";
 export * from "./css";
 export * from "./IconFont";
+export * from "./Loading";
 export * from "./Scrollbar";
 export * from "./Select";
 export * from "./SpecialButton";