feat(client): profile-wip

Signed-off-by: Noa Virellia <noa@requiem.garden>
2026-01-02 15:58:17 +08:00
parent 61d2d2aef3
commit 0a4f459188
18 changed files with 272 additions and 59 deletions
--- a/client/bun.lock
+++ b/client/bun.lock
@@ -9,6 +9,7 @@
        "@dnd-kit/modifiers": "^9.0.0",
        "@dnd-kit/sortable": "^10.0.0",
        "@dnd-kit/utilities": "^3.2.2",
+        "@hookform/resolvers": "^5.2.2",
        "@marsidev/react-turnstile": "^1.4.0",
        "@radix-ui/react-avatar": "^1.1.11",
        "@radix-ui/react-checkbox": "^1.3.3",
@@ -24,11 +25,13 @@
        "@radix-ui/react-tooltip": "^1.2.8",
        "@tabler/icons-react": "^3.36.0",
        "@tailwindcss/vite": "^4.1.18",
+        "@tanstack/react-form": "^1.27.7",
        "@tanstack/react-query": "^5.90.12",
        "@tanstack/react-router": "^1.141.6",
        "@tanstack/react-router-devtools": "^1.141.6",
        "@tanstack/react-table": "^8.21.3",
        "@tanstack/zod-adapter": "^1.143.4",
+        "@tanstack/zod-form-adapter": "^0.42.1",
        "axios": "^1.13.2",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
@@ -39,6 +42,7 @@
        "qrcode": "^1.5.4",
        "react": "^19.2.0",
        "react-dom": "^19.2.0",
+        "react-hook-form": "^7.69.0",
        "recharts": "2.15.4",
        "sonner": "^2.0.7",
        "tailwind-merge": "^3.4.0",
@@ -254,6 +258,8 @@

    "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],

+    "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
+
    "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],

    "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
@@ -406,6 +412,8 @@

    "@sindresorhus/base62": ["@sindresorhus/base62@1.0.0", "", {}, "sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA=="],

+    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
+
    "@stylistic/eslint-plugin": ["@stylistic/eslint-plugin@5.6.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.0", "@typescript-eslint/types": "^8.47.0", "eslint-visitor-keys": "^4.2.1", "espree": "^10.4.0", "estraverse": "^5.3.0", "picomatch": "^4.0.3" }, "peerDependencies": { "eslint": ">=9.0.0" } }, "sha512-JCs+MqoXfXrRPGbGmho/zGS/jMcn3ieKl/A8YImqib76C8kjgZwq5uUFzc30lJkMvcchuRn6/v8IApLxli3Jyw=="],

    "@svgr/babel-plugin-add-jsx-attribute": ["@svgr/babel-plugin-add-jsx-attribute@8.0.0", "", { "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g=="],
@@ -466,12 +474,20 @@

    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.18", "", { "dependencies": { "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "tailwindcss": "4.1.18" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA=="],

+    "@tanstack/devtools-event-client": ["@tanstack/devtools-event-client@0.4.0", "", {}, "sha512-RPfGuk2bDZgcu9bAJodvO2lnZeHuz4/71HjZ0bGb/SPg8+lyTA+RLSKQvo7fSmPSi8/vcH3aKQ8EM9ywf1olaw=="],
+
    "@tanstack/eslint-plugin-query": ["@tanstack/eslint-plugin-query@5.91.2", "", { "dependencies": { "@typescript-eslint/utils": "^8.44.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0" } }, "sha512-UPeWKl/Acu1IuuHJlsN+eITUHqAaa9/04geHHPedY8siVarSaWprY0SVMKrkpKfk5ehRT7+/MZ5QwWuEtkWrFw=="],

+    "@tanstack/form-core": ["@tanstack/form-core@1.27.7", "", { "dependencies": { "@tanstack/devtools-event-client": "^0.4.0", "@tanstack/pacer-lite": "^0.1.1", "@tanstack/store": "^0.7.7" } }, "sha512-nvogpyE98fhb0NDw1Bf2YaCH+L7ZIUgEpqO9TkHucDn6zg3ni521boUpv0i8HKIrmmFwDYjWZoCnrgY4HYWTkw=="],
+
    "@tanstack/history": ["@tanstack/history@1.141.0", "", {}, "sha512-LS54XNyxyTs5m/pl1lkwlg7uZM3lvsv2FIIV1rsJgnfwVCnI+n4ZGZ2CcjNT13BPu/3hPP+iHmliBSscJxW5FQ=="],

+    "@tanstack/pacer-lite": ["@tanstack/pacer-lite@0.1.1", "", {}, "sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w=="],
+
    "@tanstack/query-core": ["@tanstack/query-core@5.90.12", "", {}, "sha512-T1/8t5DhV/SisWjDnaiU2drl6ySvsHj1bHBCWNXd+/T+Hh1cf6JodyEYMd5sgwm+b/mETT4EV3H+zCVczCU5hg=="],

+    "@tanstack/react-form": ["@tanstack/react-form@1.27.7", "", { "dependencies": { "@tanstack/form-core": "1.27.7", "@tanstack/react-store": "^0.8.0" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-xTg4qrUY0fuLaSnkATLZcK3BWlnwLp7IuAb6UTbZKngiDEvvDCNTvVvHgPlgef1O2qN4klZxInRyRY6oEkXZ2A=="],
+
    "@tanstack/react-query": ["@tanstack/react-query@5.90.12", "", { "dependencies": { "@tanstack/query-core": "5.90.12" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-graRZspg7EoEaw0a8faiUASCyJrqjKPdqJ9EwuDRUF9mEYJ1YPczI9H+/agJ0mOJkPCJDk0lsz5QTrLZ/jQ2rg=="],

    "@tanstack/react-router": ["@tanstack/react-router@1.141.6", "", { "dependencies": { "@tanstack/history": "1.141.0", "@tanstack/react-store": "^0.8.0", "@tanstack/router-core": "1.141.6", "isbot": "^5.1.22", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" }, "peerDependencies": { "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, "sha512-qWFxi2D6eGc1L03RzUuhyEOplZ7Q6q62YOl7Of9Y0q4YjwQwxRm4zxwDVtvUIoy4RLVCpqp5UoE+Nxv2PY9trg=="],
@@ -500,6 +516,8 @@

    "@tanstack/zod-adapter": ["@tanstack/zod-adapter@1.143.4", "", { "peerDependencies": { "@tanstack/react-router": ">=1.43.2", "zod": "^3.23.8" } }, "sha512-yrdxNCKPaMjIXM5ZFf3jWNtGlOEZWh2nPdN5NQagkOrYK/l87SZRASB/vFerBXupXPaXvEL8C0qzb894trHW5w=="],

+    "@tanstack/zod-form-adapter": ["@tanstack/zod-form-adapter@0.42.1", "", { "dependencies": { "@tanstack/form-core": "0.42.1" }, "peerDependencies": { "zod": "^3.x" } }, "sha512-hPRM0lawVKP64yurW4c6KHZH6altMo2MQN14hfi+GMBTKjO9S7bW1x5LPZ5cayoJE3mBvdlahpSGT5rYZtSbXQ=="],
+
    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],

    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
@@ -1238,6 +1256,8 @@

    "react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],

+    "react-hook-form": ["react-hook-form@7.69.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-yt6ZGME9f4F6WHwevrvpAjh42HMvocuSnSIHUGycBqXIJdhqGSPQzTpGF+1NLREk/58IdPxEMfPcFCjlMhclGw=="],
+
    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],

    "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
@@ -1540,10 +1560,14 @@

    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],

+    "@tanstack/form-core/@tanstack/store": ["@tanstack/store@0.7.7", "", {}, "sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ=="],
+
    "@tanstack/router-generator/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],

    "@tanstack/router-plugin/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],

+    "@tanstack/zod-form-adapter/@tanstack/form-core": ["@tanstack/form-core@0.42.1", "", { "dependencies": { "@tanstack/store": "^0.7.0" } }, "sha512-jTU0jyHqFceujdtPNv3jPVej1dTqBwa8TYdIyWB5BCwRVUBZEp1PiYEBkC9r92xu5fMpBiKc+JKud3eeVjuMiA=="],
+
    "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],

    "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -1634,6 +1658,8 @@

    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],

+    "@tanstack/zod-form-adapter/@tanstack/form-core/@tanstack/store": ["@tanstack/store@0.7.7", "", {}, "sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ=="],
+
    "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],

    "cliui/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
--- a/client/package.json
+++ b/client/package.json
@@ -14,6 +14,7 @@
    "@dnd-kit/modifiers": "^9.0.0",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.2.2",
    "@marsidev/react-turnstile": "^1.4.0",
    "@radix-ui/react-avatar": "^1.1.11",
    "@radix-ui/react-checkbox": "^1.3.3",
@@ -29,11 +30,13 @@
    "@radix-ui/react-tooltip": "^1.2.8",
    "@tabler/icons-react": "^3.36.0",
    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-form": "^1.27.7",
    "@tanstack/react-query": "^5.90.12",
    "@tanstack/react-router": "^1.141.6",
    "@tanstack/react-router-devtools": "^1.141.6",
    "@tanstack/react-table": "^8.21.3",
    "@tanstack/zod-adapter": "^1.143.4",
+    "@tanstack/zod-form-adapter": "^0.42.1",
    "axios": "^1.13.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
@@ -44,6 +47,7 @@
    "qrcode": "^1.5.4",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.69.0",
    "recharts": "2.15.4",
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.4.0",
--- a/client/src/components/profile/form.tsx
+++ b/client/src/components/profile/form.tsx
@@ -0,0 +1,104 @@
+import {
+  useForm,
+} from '@tanstack/react-form';
+import {
+  toast,
+} from 'sonner';
+import {
+  z,
+} from 'zod';
+import {
+  Button,
+} from '@/components/ui/button';
+import {
+  Field,
+  FieldError,
+  FieldLabel,
+} from '@/components/ui/field';
+import {
+  Input,
+} from '@/components/ui/input';
+
+const formSchema = z.object({
+  email: z.string(),
+  nickname: z.string().min(1),
+  subtitle: z.string().min(1),
+});
+
+export default function SettingsForm() {
+  const form = useForm({
+    defaultValues: {
+      email: '',
+      nickname: '',
+      subtitle: '',
+    },
+    validators: {
+      onBlur: formSchema,
+    },
+    onSubmit: async ({
+      value,
+    }) => {
+      try {
+        toast(
+          <code className="text-white">{JSON.stringify(value, null, 2)}</code>,
+        );
+      }
+      catch (error) {
+        console.error('Form submission error', error);
+        toast.error('Failed to submit the form. Please try again.');
+      }
+    },
+  });
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        void form.handleSubmit();
+      }}
+      className="space-y-3 max-w-5xl mr-auto py-10"
+    >
+      <Field>
+        <FieldLabel htmlFor="email">Email</FieldLabel>
+        <Input
+          id="email"
+          name="email"
+          placeholder="noa@requiem.garden"
+
+          value={form.getFieldValue('email')}
+          onChange={e => form.setFieldValue('email', e.target.value)}
+        />
+
+        <FieldError />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="nickname">昵称</FieldLabel>
+        <Input
+          id="nickname"
+          name="nickname"
+          placeholder="Noa Virellia"
+
+          value={form.getFieldValue('nickname')}
+          onChange={e => form.setFieldValue('nickname', e.target.value)}
+        />
+
+        <FieldError />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="subtitle">副标题</FieldLabel>
+        <Input
+          id="subtitle"
+          name="subtitle"
+          placeholder="天生骄傲"
+
+          value={form.getFieldValue('subtitle')}
+          onChange={e => form.setFieldValue('subtitle', e.target.value)}
+        />
+
+        <FieldError />
+      </Field>
+      <Button type="submit">提交</Button>
+    </form>
+  );
+}
--- a/client/src/components/profile/main-profile.tsx
+++ b/client/src/components/profile/main-profile.tsx
@@ -0,0 +1,34 @@
+import { Mail } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { useUserInfo } from '@/hooks/data/useUserInfo';
+
+export function MainProfile() {
+  const { data: user } = useUserInfo();
+  return (
+    <div className="flex flex-col w-full">
+      <div className="flex w-full flex-row gap-4 mt-2">
+        <Avatar className="size-16 rounded-full border-2 border-muted">
+          <AvatarImage src={user.avatar} alt={user.nickname} />
+          <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-1 flex-col justify-center">
+          <span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
+          <span className="text-[20px] text-muted-foreground" aria-hidden="true">{user.subtitle}</span>
+        </div>
+      </div>
+      <Button className="w-full mt-4" variant="outline" size="lg">
+        编辑个人资料
+      </Button>
+      <section className="px-2 mt-4">
+        <div className="flex flex-row gap-2 items-center text-sm">
+          <Mail className="h-4 w-4 stroke-muted-foreground" />
+          {user.email}
+        </div>
+      </section>
+      <section className="rounded-md border border-muted w-full min-h-72 mt-4">
+        {/* Bio */}
+      </section>
+    </div>
+  );
+}
--- a/client/src/components/sidebar/app-sidebar.tsx
+++ b/client/src/components/sidebar/app-sidebar.tsx
@@ -1,12 +1,7 @@
-import {
-  IconDashboard,
-  IconSettings,
-} from '@tabler/icons-react';
 import * as React from 'react';
-
 import NixOSLogo from '@/assets/nixos.svg?react';
-import { NavMain } from '@/components/nav-main';
-import { NavSecondary } from '@/components/nav-secondary';
+import { NavMain } from '@/components/sidebar/nav-main';
+import { NavSecondary } from '@/components/sidebar/nav-secondary';
 import {
  Sidebar,
  SidebarContent,
@@ -16,30 +11,9 @@ import {
  SidebarMenuButton,
  SidebarMenuItem,
 } from '@/components/ui/sidebar';
+import { navData } from '@/lib/navData';
 import { NavUser } from './nav-user';

-const data = {
-  user: {
-    name: 'shadcn',
-    email: 'm@example.com',
-    avatar: '/avatars/shadcn.jpg',
-  },
-  navMain: [
-    {
-      title: '工作台',
-      url: '/',
-      icon: IconDashboard,
-    },
-  ],
-  navSecondary: [
-    {
-      title: '设置',
-      url: '#',
-      icon: IconSettings,
-    },
-  ],
-};
-
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar collapsible="offcanvas" {...props}>
@@ -59,8 +33,8 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
-        <NavMain items={data.navMain} />
-        <NavSecondary items={data.navSecondary} className="mt-auto" />
+        <NavMain items={navData.navMain} />
+        <NavSecondary items={navData.navSecondary} className="mt-auto" />
      </SidebarContent>
      <SidebarFooter>
        <NavUser />
--- a/client/src/components/sidebar/nav-main.tsx
+++ b/client/src/components/sidebar/nav-main.tsx
--- a/client/src/components/sidebar/nav-secondary.tsx
+++ b/client/src/components/sidebar/nav-secondary.tsx
@@ -1,8 +1,9 @@
 'use client';

 import type { Icon } from '@tabler/icons-react';
-import * as React from 'react';
+import { Link } from '@tanstack/react-router';

+import * as React from 'react';
 import {
  SidebarGroup,
  SidebarGroupContent,
@@ -27,12 +28,16 @@ export function NavSecondary({
        <SidebarMenu>
          {items.map(item => (
            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild>
-                <a href={item.url}>
+              <Link to={item.url}>
+                {({ isActive }) => {
+                  return (
+                    <SidebarMenuButton isActive={isActive} tooltip={item.title}>
                      <item.icon />
                      <span>{item.title}</span>
-                </a>
                    </SidebarMenuButton>
+                  );
+                }}
+              </Link>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
--- a/client/src/components/sidebar/nav-user.tsx
+++ b/client/src/components/sidebar/nav-user.tsx
@@ -24,8 +24,8 @@ import {
 } from '@/components/ui/sidebar';
 import { useUserInfo } from '@/hooks/data/useUserInfo';
 import { useLogout } from '@/hooks/useLogout';
-import { withFallback } from './hoc/with-fallback';
-import { Skeleton } from './ui/skeleton';
+import { withFallback } from '../hoc/with-fallback';
+import { Skeleton } from '../ui/skeleton';

 function NavUser_() {
  const { isMobile } = useSidebar();
--- a/client/src/components/site-header.tsx
+++ b/client/src/components/site-header.tsx
@@ -1,7 +1,18 @@
+import { useRouterState } from '@tanstack/react-router';
 import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
+import { navData } from '@/lib/navData';

 export function SiteHeader() {
+  const pathname = useRouterState({ select: state => state.location.pathname });
+  const allNavItems = [...navData.navMain, ...navData.navSecondary];
+  const currentTitle
+    = allNavItems.find(item =>
+      item.url === '/'
+        ? pathname === '/'
+        : pathname.startsWith(item.url),
+    )?.title ?? '工作台';
+
  return (
    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
@@ -10,7 +21,7 @@ export function SiteHeader() {
          orientation="vertical"
          className="mx-2 data-[orientation=vertical]:h-4"
        />
-        <h1 className="text-base font-medium">工作台</h1>
+        <h1 className="text-base font-medium">{currentTitle}</h1>
      </div>
    </header>
  );
--- a/client/src/components/ui/field.tsx
+++ b/client/src/components/ui/field.tsx
@@ -190,7 +190,7 @@ function FieldError({
 }: React.ComponentProps<'div'> & {
  errors?: Array<{ message?: string } | undefined>;
 }) {
-  const content = useMemo(async () => {
+  const content = useMemo(() => {
    if (children) {
      return children;
    }
--- a/client/src/hooks/data/useUserInfo.ts
+++ b/client/src/hooks/data/useUserInfo.ts
@@ -17,5 +17,6 @@ export function useUserInfo() {
      >('/user/info');
      return response.data;
    },
+    staleTime: 10 * 60 * 1000,
  });
 }
--- a/client/src/lib/navData.ts
+++ b/client/src/lib/navData.ts
@@ -0,0 +1,21 @@
+import {
+  IconDashboard,
+  IconUser,
+} from '@tabler/icons-react';
+
+export const navData = {
+  navMain: [
+    {
+      title: '工作台',
+      url: '/',
+      icon: IconDashboard,
+    },
+  ],
+  navSecondary: [
+    {
+      title: '个人资料',
+      url: '/profile',
+      icon: IconUser,
+    },
+  ],
+};
--- a/client/src/routeTree.gen.ts
+++ b/client/src/routeTree.gen.ts
@@ -13,6 +13,7 @@ import { Route as MagicLinkSentRouteImport } from './routes/magicLinkSent'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as SidebarLayoutRouteImport } from './routes/_sidebarLayout'
 import { Route as SidebarLayoutIndexRouteImport } from './routes/_sidebarLayout/index'
+import { Route as SidebarLayoutProfileRouteImport } from './routes/_sidebarLayout/profile'

 const MagicLinkSentRoute = MagicLinkSentRouteImport.update({
  id: '/magicLinkSent',
@@ -33,15 +34,22 @@ const SidebarLayoutIndexRoute = SidebarLayoutIndexRouteImport.update({
  path: '/',
  getParentRoute: () => SidebarLayoutRoute,
 } as any)
+const SidebarLayoutProfileRoute = SidebarLayoutProfileRouteImport.update({
+  id: '/profile',
+  path: '/profile',
+  getParentRoute: () => SidebarLayoutRoute,
+} as any)

 export interface FileRoutesByFullPath {
  '/login': typeof LoginRoute
  '/magicLinkSent': typeof MagicLinkSentRoute
+  '/profile': typeof SidebarLayoutProfileRoute
  '/': typeof SidebarLayoutIndexRoute
 }
 export interface FileRoutesByTo {
  '/login': typeof LoginRoute
  '/magicLinkSent': typeof MagicLinkSentRoute
+  '/profile': typeof SidebarLayoutProfileRoute
  '/': typeof SidebarLayoutIndexRoute
 }
 export interface FileRoutesById {
@@ -49,18 +57,20 @@ export interface FileRoutesById {
  '/_sidebarLayout': typeof SidebarLayoutRouteWithChildren
  '/login': typeof LoginRoute
  '/magicLinkSent': typeof MagicLinkSentRoute
+  '/_sidebarLayout/profile': typeof SidebarLayoutProfileRoute
  '/_sidebarLayout/': typeof SidebarLayoutIndexRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/login' | '/magicLinkSent' | '/'
+  fullPaths: '/login' | '/magicLinkSent' | '/profile' | '/'
  fileRoutesByTo: FileRoutesByTo
-  to: '/login' | '/magicLinkSent' | '/'
+  to: '/login' | '/magicLinkSent' | '/profile' | '/'
  id:
    | '__root__'
    | '/_sidebarLayout'
    | '/login'
    | '/magicLinkSent'
+    | '/_sidebarLayout/profile'
    | '/_sidebarLayout/'
  fileRoutesById: FileRoutesById
 }
@@ -100,14 +110,23 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof SidebarLayoutIndexRouteImport
      parentRoute: typeof SidebarLayoutRoute
    }
+    '/_sidebarLayout/profile': {
+      id: '/_sidebarLayout/profile'
+      path: '/profile'
+      fullPath: '/profile'
+      preLoaderRoute: typeof SidebarLayoutProfileRouteImport
+      parentRoute: typeof SidebarLayoutRoute
+    }
  }
 }

 interface SidebarLayoutRouteChildren {
+  SidebarLayoutProfileRoute: typeof SidebarLayoutProfileRoute
  SidebarLayoutIndexRoute: typeof SidebarLayoutIndexRoute
 }

 const SidebarLayoutRouteChildren: SidebarLayoutRouteChildren = {
+  SidebarLayoutProfileRoute: SidebarLayoutProfileRoute,
  SidebarLayoutIndexRoute: SidebarLayoutIndexRoute,
 }

--- a/client/src/routes/_sidebarLayout.tsx
+++ b/client/src/routes/_sidebarLayout.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, Outlet } from '@tanstack/react-router';
-import { AppSidebar } from '@/components/app-sidebar';
+import { AppSidebar } from '@/components/sidebar/app-sidebar';
 import { SiteHeader } from '@/components/site-header';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';

--- a/client/src/routes/_sidebarLayout/profile.tsx
+++ b/client/src/routes/_sidebarLayout/profile.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { MainProfile } from '@/components/profile/main-profile';
+
+export const Route = createFileRoute('/_sidebarLayout/profile')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <div className="flex min-h-[560px] flex-col gap-6 px-4 py-6">
+      <MainProfile />
+    </div>
+  );
+}
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -23,7 +23,7 @@ export default defineConfig({
  },
  server: {
    proxy: {
-      '/api': 'http://10.0.0.10:8000',
+      '/api': 'http://10.0.0.250:8000',
    },
    host: '0.0.0.0',
    port: 5173,