- {data.data.checkin_code}
+ <>
+
+
-
-
- )
+
+
+ {data.data.checkin_code}
+
+
+
+ )
: (
-
- );
+
+ );
}
function QrSectionSkeleton() {
diff --git a/client/src/components/hoc/with-fallback.tsx b/client/src/components/hoc/with-fallback.tsx
index e4e8679..5d4c0e6 100644
--- a/client/src/components/hoc/with-fallback.tsx
+++ b/client/src/components/hoc/with-fallback.tsx
@@ -14,7 +14,7 @@ export function withFallback
(
};
Wrapped.displayName = `withFallback(${Component.displayName! || Component.name || 'Component'
- })`;
+ })`;
return Wrapped;
}
diff --git a/client/src/components/profile/form.tsx b/client/src/components/profile/form.tsx
new file mode 100644
index 0000000..e312468
--- /dev/null
+++ 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(
+ {JSON.stringify(value, null, 2)},
+ );
+ }
+ catch (error) {
+ console.error('Form submission error', error);
+ toast.error('Failed to submit the form. Please try again.');
+ }
+ },
+ });
+
+ return (
+
+ );
+}
diff --git a/client/src/components/profile/main-profile.tsx b/client/src/components/profile/main-profile.tsx
new file mode 100644
index 0000000..02e5e1d
--- /dev/null
+++ 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 (
+
+
+
+
+ CN
+
+
+ {user.nickname}
+ {user.subtitle}
+
+
+
+
+
+
+ );
+}
diff --git a/client/src/components/app-sidebar.tsx b/client/src/components/sidebar/app-sidebar.tsx
similarity index 62%
rename from client/src/components/app-sidebar.tsx
rename to client/src/components/sidebar/app-sidebar.tsx
index 801d55c..0d1a945 100644
--- a/client/src/components/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
) {
return (
@@ -59,8 +33,8 @@ export function AppSidebar({ ...props }: React.ComponentProps) {
-
-
+
+
diff --git a/client/src/components/nav-main.tsx b/client/src/components/sidebar/nav-main.tsx
similarity index 100%
rename from client/src/components/nav-main.tsx
rename to client/src/components/sidebar/nav-main.tsx
diff --git a/client/src/components/nav-secondary.tsx b/client/src/components/sidebar/nav-secondary.tsx
similarity index 63%
rename from client/src/components/nav-secondary.tsx
rename to client/src/components/sidebar/nav-secondary.tsx
index e9cf33b..b0da89c 100644
--- a/client/src/components/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({
{items.map(item => (
-
-
-
- {item.title}
-
-
+
+ {({ isActive }) => {
+ return (
+
+
+ {item.title}
+
+ );
+ }}
+
))}
diff --git a/client/src/components/nav-user.tsx b/client/src/components/sidebar/nav-user.tsx
similarity index 97%
rename from client/src/components/nav-user.tsx
rename to client/src/components/sidebar/nav-user.tsx
index 9f6c5dd..8356344 100644
--- a/client/src/components/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();
diff --git a/client/src/components/site-header.tsx b/client/src/components/site-header.tsx
index 96ead56..9ecc44b 100644
--- 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 (
@@ -10,7 +21,7 @@ export function SiteHeader() {
orientation="vertical"
className="mx-2 data-[orientation=vertical]:h-4"
/>
-
工作台
+ {currentTitle}
);
diff --git a/client/src/components/ui/field.tsx b/client/src/components/ui/field.tsx
index 5678a47..9392f6b 100644
--- 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;
}
diff --git a/client/src/hooks/data/useUserInfo.ts b/client/src/hooks/data/useUserInfo.ts
index b688e7c..c45e453 100644
--- 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,
});
}
diff --git a/client/src/lib/navData.ts b/client/src/lib/navData.ts
new file mode 100644
index 0000000..7266d47
--- /dev/null
+++ 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,
+ },
+ ],
+};
diff --git a/client/src/routeTree.gen.ts b/client/src/routeTree.gen.ts
index fa081d6..dcada6a 100644
--- 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,
}
diff --git a/client/src/routes/_sidebarLayout.tsx b/client/src/routes/_sidebarLayout.tsx
index 5ab31c7..e282a5e 100644
--- 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';
diff --git a/client/src/routes/_sidebarLayout/profile.tsx b/client/src/routes/_sidebarLayout/profile.tsx
new file mode 100644
index 0000000..f28284e
--- /dev/null
+++ 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 (
+
+
+
+ );
+}
diff --git a/client/vite.config.ts b/client/vite.config.ts
index f52b72c..71ce399 100644
--- 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,