feat: 修改首页以展示欢迎信息和系统用户数量, 并添加登录和查看用户列表的按钮

app/routes/_index.tsx

@@ -3,6 +3,7 @@ import type { MetaFunction, LoaderFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Button, Card, Typography, Space } from "antd";
+import { ClientOnly } from "remix-utils/client-only";
 import db from "~/db.server";
 
 const { Title, Paragraph } = Typography;
@@ -19,7 +20,7 @@ export const loader: LoaderFunction = async () => {
   return json({ userCount: userCount?.count || 0 });
 };
 
-export default function Index() {
+function WelcomeDemo() {
   const { userCount } = useLoaderData<typeof loader>();
   const [currentTime, setCurrentTime] = useState(new Date());
 
@@ -28,25 +29,33 @@ export default function Index() {
     return () => clearInterval(timer);
   }, []);
 
+  return (
+    <Card className="w-full max-w-md shadow-lg">
+      <Title level={2} className="text-center mb-6">欢迎来到 Remix 管理系统</Title>
+      <Paragraph className="text-center mb-4">
+        当前时间：{currentTime.toLocaleString()}
+      </Paragraph>
+      <Paragraph className="text-center mb-6">
+        系统中共有 {userCount} 个用户
+      </Paragraph>
+      <Space direction="vertical" size="middle" className="w-full">
+        <Button type="primary" block>
+          登录系统
+        </Button>
+        <Button block>
+          查看用户列表
+        </Button>
+      </Space>
+    </Card>
+  );
+}
+
+export default function Index() {
   return (
     <div className="min-h-screen bg-gray-100 flex items-center justify-center">
-      <Card className="w-full max-w-md shadow-lg">
-        <Title level={2} className="text-center mb-6">欢迎来到 Remix 管理系统</Title>
-        <Paragraph className="text-center mb-4">
-          当前时间：{currentTime.toLocaleString()}
-        </Paragraph>
-        <Paragraph className="text-center mb-6">
-          系统中共有 {userCount} 个用户
-        </Paragraph>
-        <Space direction="vertical" size="middle" className="w-full">
-          <Button type="primary" block>
-            登录系统
-          </Button>
-          <Button block>
-            查看用户列表
-          </Button>
-        </Space>
-      </Card>
+      <ClientOnly fallback={<p>加载中...</p>}>
+        {() => <WelcomeDemo />}
+      </ClientOnly>
     </div>
   );
 }

package-lock.json

@@ -14,6 +14,7 @@
         "knex": "^3.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "remix-utils": "^7.7.0",
         "sqlite3": "^5.1.7"
       },
       "devDependencies": {
@@ -10685,6 +10686,71 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remix-utils": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmmirror.com/remix-utils/-/remix-utils-7.7.0.tgz",
+      "integrity": "sha512-J8NhP044nrNIam/xOT1L9a4RQ9FSaA2wyrUwmN8ZT+c/+CdAAf70yfaLnvMyKcV5U+8BcURQ/aVbth77sT6jGA==",
+      "funding": [
+        "https://github.com/sponsors/sergiodxa"
+      ],
+      "dependencies": {
+        "type-fest": "^4.18.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@remix-run/cloudflare": "^2.0.0",
+        "@remix-run/node": "^2.0.0",
+        "@remix-run/react": "^2.0.0",
+        "@remix-run/router": "^1.7.2",
+        "crypto-js": "^4.1.1",
+        "intl-parse-accept-language": "^1.0.0",
+        "is-ip": "^5.0.1",
+        "react": "^18.0.0",
+        "zod": "^3.22.4"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/cloudflare": {
+          "optional": true
+        },
+        "@remix-run/node": {
+          "optional": true
+        },
+        "@remix-run/react": {
+          "optional": true
+        },
+        "@remix-run/router": {
+          "optional": true
+        },
+        "crypto-js": {
+          "optional": true
+        },
+        "intl-parse-accept-language": {
+          "optional": true
+        },
+        "is-ip": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/remix-utils/node_modules/type-fest": {
+      "version": "4.26.1",
+      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-4.26.1.tgz",
+      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/require-like": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
@@ -20878,6 +20944,21 @@
         "unified": "^10.0.0"
       }
     },
+    "remix-utils": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmmirror.com/remix-utils/-/remix-utils-7.7.0.tgz",
+      "integrity": "sha512-J8NhP044nrNIam/xOT1L9a4RQ9FSaA2wyrUwmN8ZT+c/+CdAAf70yfaLnvMyKcV5U+8BcURQ/aVbth77sT6jGA==",
+      "requires": {
+        "type-fest": "^4.18.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "4.26.1",
+          "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-4.26.1.tgz",
+          "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg=="
+        }
+      }
+    },
     "require-like": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",

package.json

@@ -25,6 +25,7 @@
     "knex": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "remix-utils": "^7.7.0",
     "sqlite3": "^5.1.7"
   },
   "devDependencies": {

seeds/initial_data.ts → seeds/initial_data.js

@@ -1,6 +1,6 @@
-import { Knex } from "knex";
+/** @type {import('knex').Knex} */
 
-export async function seed(knex: Knex): Promise<void> {
+export async function seed(knex) {
   // 清空现有数据
   await knex("users").del();
 

tsconfig.json

@@ -6,10 +6,10 @@
     "**/.server/**/*.tsx",
     "**/.client/**/*.ts",
     "**/.client/**/*.tsx"
-, "knexfile.js" ],
+, "knexfile.js", "seeds/initial_data.js" ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["@remix-run/node", "vite/client"],
+    "types": ["@remix-run/node", "vite/client", "remix-utils"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",