client/cms/.gitignore

@@ -24,3 +24,6 @@ dist-ssr
 *.sw?
 
 .direnv
+
+*storybook.log
+storybook-static

client/cms/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": "@storybook/react-vite"
+};
+export default config;

client/cms/.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react-vite';
+import { ThemeProvider } from '../src/components/theme-provider';
+import '../src/index.css';
+
+const preview: Preview = {
+  decorators: [(Story) => <ThemeProvider defaultTheme="dark"><Story /></ThemeProvider >],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;

client/cms/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

client/cms/eslint.config.js

@@ -1,3 +1,4 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import antfu from '@antfu/eslint-config';
 import pluginQuery from '@tanstack/eslint-plugin-query';
 

client/cms/package.json

@@ -9,7 +9,9 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "gen": "openapi-ts"
+    "gen": "openapi-ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@base-ui/react": "^1.1.0",
@@ -58,6 +60,7 @@
     "qrcode": "^1.5.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-error-boundary": "^6.1.0",
     "react-hook-form": "^7.69.0",
     "react-markdown": "^10.1.0",
     "recharts": "2.15.4",
@@ -71,9 +74,16 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^6.7.1",
+    "@chromatic-com/storybook": "^5.0.0",
     "@eslint-react/eslint-plugin": "^2.3.13",
     "@eslint/js": "^9.39.1",
     "@hey-api/openapi-ts": "0.91.0",
+    "@storybook/addon-a11y": "^10.2.3",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-onboarding": "^10.2.3",
+    "@storybook/addon-themes": "^10.2.3",
+    "@storybook/addon-vitest": "^10.2.3",
+    "@storybook/react-vite": "^10.2.3",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/eslint-plugin-query": "^5.91.2",
     "@tanstack/router-plugin": "^1.141.7",
@@ -86,18 +96,24 @@
     "@types/react-dom": "^19.2.3",
     "@types/utf8": "^3.0.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-storybook": "^10.2.3",
     "globals": "^16.5.0",
     "lint-staged": "^16.2.7",
+    "playwright": "^1.58.0",
     "simple-git-hooks": "^2.13.1",
+    "storybook": "^10.2.3",
     "tw-animate-css": "^1.4.0",
     "type-fest": "^5.4.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
-    "vite-plugin-svgr": "^4.5.0"
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.18"
   },
   "simple-git-hooks": {
     "pre-commit": "bun run lint-staged"

client/cms/src/client/@tanstack/react-query.gen.ts

@@ -3,8 +3,8 @@
 import { type InfiniteData, infiniteQueryOptions, queryOptions, type UseMutationOptions } from '@tanstack/react-query';
 
 import { client } from '../client.gen';
-import { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from '../sdk.gen';
+import { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserInfoByUserId, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from '../sdk.gen';
-import type { GetAuthRedirectData, GetAuthRedirectError, GetEventCheckinData, GetEventCheckinError, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryResponse, GetEventCheckinResponse, GetEventInfoData, GetEventInfoError, GetEventInfoResponse, GetEventListData, GetEventListError, GetEventListResponse, GetUserInfoData, GetUserInfoError, GetUserInfoResponse, GetUserListData, GetUserListError, GetUserListResponse, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateResponse, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeResponse, PostAuthMagicData, PostAuthMagicError, PostAuthMagicResponse, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshResponse, PostAuthTokenData, PostAuthTokenError, PostAuthTokenResponse, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitResponse } from '../types.gen';
+import type { GetAuthRedirectData, GetAuthRedirectError, GetEventCheckinData, GetEventCheckinError, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryResponse, GetEventCheckinResponse, GetEventInfoData, GetEventInfoError, GetEventInfoResponse, GetEventListData, GetEventListError, GetEventListResponse, GetUserInfoByUserIdData, GetUserInfoByUserIdError, GetUserInfoByUserIdResponse, GetUserInfoData, GetUserInfoError, GetUserInfoResponse, GetUserListData, GetUserListError, GetUserListResponse, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateResponse, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeResponse, PostAuthMagicData, PostAuthMagicError, PostAuthMagicResponse, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshResponse, PostAuthTokenData, PostAuthTokenError, PostAuthTokenResponse, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitResponse } from '../types.gen';
 
 /**
  * Exchange Auth Code
@@ -312,6 +312,26 @@ export const getUserInfoOptions = (options?: Options<GetUserInfoData>) => queryO
     queryKey: getUserInfoQueryKey(options)
 });
 
+export const getUserInfoByUserIdQueryKey = (options: Options<GetUserInfoByUserIdData>) => createQueryKey('getUserInfoByUserId', options);
+
+/**
+ * Get Other User Information
+ *
+ * Fetches the complete profile data for the user associated with the provided session/token.
+ */
+export const getUserInfoByUserIdOptions = (options: Options<GetUserInfoByUserIdData>) => queryOptions<GetUserInfoByUserIdResponse, GetUserInfoByUserIdError, GetUserInfoByUserIdResponse, ReturnType<typeof getUserInfoByUserIdQueryKey>>({
+    queryFn: async ({ queryKey, signal }) => {
+        const { data } = await getUserInfoByUserId({
+            ...options,
+            ...queryKey[0],
+            signal,
+            throwOnError: true
+        });
+        return data;
+    },
+    queryKey: getUserInfoByUserIdQueryKey(options)
+});
+
 export const getUserListQueryKey = (options: Options<GetUserListData>) => createQueryKey('getUserList', options);
 
 /**

client/cms/src/client/index.ts

@@ -1,4 +1,4 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-export { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from './sdk.gen';
+export { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserInfoByUserId, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from './sdk.gen';
-export type { ClientOptions, DataEventIndexDoc, DataUserIndexDoc, GetAuthRedirectData, GetAuthRedirectError, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinError, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryErrors, GetEventCheckinQueryResponse, GetEventCheckinQueryResponses, GetEventCheckinResponse, GetEventCheckinResponses, GetEventInfoData, GetEventInfoError, GetEventInfoErrors, GetEventInfoResponse, GetEventInfoResponses, GetEventListData, GetEventListError, GetEventListErrors, GetEventListResponse, GetEventListResponses, GetUserInfoData, GetUserInfoError, GetUserInfoErrors, GetUserInfoResponse, GetUserInfoResponses, GetUserListData, GetUserListError, GetUserListErrors, GetUserListResponse, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateErrors, PatchUserUpdateResponse, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeErrors, PostAuthExchangeResponse, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicError, PostAuthMagicErrors, PostAuthMagicResponse, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshErrors, PostAuthRefreshResponse, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenError, PostAuthTokenErrors, PostAuthTokenResponse, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponse, PostEventCheckinSubmitResponses, ServiceAuthExchangeData, ServiceAuthExchangeResponse, ServiceAuthMagicData, ServiceAuthMagicResponse, ServiceAuthRefreshData, ServiceAuthTokenData, ServiceAuthTokenResponse, ServiceEventCheckinQueryResponse, ServiceEventCheckinResponse, ServiceEventCheckinSubmitData, ServiceEventEventInfoResponse, ServiceUserUserInfoData, UtilsRespStatus } from './types.gen';
+export type { ClientOptions, DataEventIndexDoc, DataUserIndexDoc, GetAuthRedirectData, GetAuthRedirectError, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinError, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryErrors, GetEventCheckinQueryResponse, GetEventCheckinQueryResponses, GetEventCheckinResponse, GetEventCheckinResponses, GetEventInfoData, GetEventInfoError, GetEventInfoErrors, GetEventInfoResponse, GetEventInfoResponses, GetEventListData, GetEventListError, GetEventListErrors, GetEventListResponse, GetEventListResponses, GetUserInfoByUserIdData, GetUserInfoByUserIdError, GetUserInfoByUserIdErrors, GetUserInfoByUserIdResponse, GetUserInfoByUserIdResponses, GetUserInfoData, GetUserInfoError, GetUserInfoErrors, GetUserInfoResponse, GetUserInfoResponses, GetUserListData, GetUserListError, GetUserListErrors, GetUserListResponse, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateErrors, PatchUserUpdateResponse, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeErrors, PostAuthExchangeResponse, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicError, PostAuthMagicErrors, PostAuthMagicResponse, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshErrors, PostAuthRefreshResponse, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenError, PostAuthTokenErrors, PostAuthTokenResponse, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponse, PostEventCheckinSubmitResponses, ServiceAuthExchangeData, ServiceAuthExchangeResponse, ServiceAuthMagicData, ServiceAuthMagicResponse, ServiceAuthRefreshData, ServiceAuthTokenData, ServiceAuthTokenResponse, ServiceEventCheckinQueryResponse, ServiceEventCheckinResponse, ServiceEventCheckinSubmitData, ServiceUserUserInfoData, UtilsRespStatus } from './types.gen';

client/cms/src/client/sdk.gen.ts

@@ -2,7 +2,7 @@
 
 import type { Client, Options as Options2, TDataShape } from './client';
 import { client } from './client.gen';
-import type { GetAuthRedirectData, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryErrors, GetEventCheckinQueryResponses, GetEventCheckinResponses, GetEventInfoData, GetEventInfoErrors, GetEventInfoResponses, GetEventListData, GetEventListErrors, GetEventListResponses, GetUserInfoData, GetUserInfoErrors, GetUserInfoResponses, GetUserListData, GetUserListErrors, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateErrors, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeErrors, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicErrors, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshErrors, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenErrors, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponses } from './types.gen';
+import type { GetAuthRedirectData, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryErrors, GetEventCheckinQueryResponses, GetEventCheckinResponses, GetEventInfoData, GetEventInfoErrors, GetEventInfoResponses, GetEventListData, GetEventListErrors, GetEventListResponses, GetUserInfoByUserIdData, GetUserInfoByUserIdErrors, GetUserInfoByUserIdResponses, GetUserInfoData, GetUserInfoErrors, GetUserInfoResponses, GetUserListData, GetUserListErrors, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateErrors, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeErrors, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicErrors, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshErrors, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenErrors, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponses } from './types.gen';
 
 export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<TData, ThrowOnError> & {
     /**
@@ -130,6 +130,13 @@ export const getEventList = <ThrowOnError extends boolean = false>(options: Opti
  */
 export const getUserInfo = <ThrowOnError extends boolean = false>(options?: Options<GetUserInfoData, ThrowOnError>) => (options?.client ?? client).get<GetUserInfoResponses, GetUserInfoErrors, ThrowOnError>({ url: '/user/info', ...options });
 
+/**
+ * Get Other User Information
+ *
+ * Fetches the complete profile data for the user associated with the provided session/token.
+ */
+export const getUserInfoByUserId = <ThrowOnError extends boolean = false>(options: Options<GetUserInfoByUserIdData, ThrowOnError>) => (options.client ?? client).get<GetUserInfoByUserIdResponses, GetUserInfoByUserIdErrors, ThrowOnError>({ url: '/user/info/{user_id}', ...options });
+
 /**
  * List Users
  *

client/cms/src/client/types.gen.ts

@@ -10,6 +10,7 @@ export type DataEventIndexDoc = {
     event_id?: string;
     name?: string;
     start_time?: string;
+    thumbnail?: string;
     type?: string;
 };
 
@@ -71,12 +72,6 @@ export type ServiceEventCheckinSubmitData = {
     checkin_code?: string;
 };
 
-export type ServiceEventEventInfoResponse = {
-    end_time?: string;
-    name?: string;
-    start_time?: string;
-};
-
 export type ServiceUserUserInfoData = {
     allow_public?: boolean;
     avatar?: string;
@@ -370,6 +365,14 @@ export type GetEventCheckinErrors = {
             [key: string]: unknown;
         };
     };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
     /**
      * Internal Server Error
      */
@@ -494,6 +497,14 @@ export type GetEventInfoErrors = {
             [key: string]: unknown;
         };
     };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
     /**
      * Event Not Found
      */
@@ -519,7 +530,7 @@ export type GetEventInfoResponses = {
      * Successful retrieval
      */
     200: UtilsRespStatus & {
-        data?: ServiceEventEventInfoResponse;
+        data?: DataEventIndexDoc;
     };
 };
 
@@ -550,6 +561,14 @@ export type GetEventListErrors = {
             [key: string]: unknown;
         };
     };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
     /**
      * Internal Server Error (Database query failed)
      */
@@ -584,7 +603,7 @@ export type GetUserInfoErrors = {
     /**
      * Missing User ID / Unauthorized
      */
-    403: UtilsRespStatus & {
+    401: UtilsRespStatus & {
         data?: {
             [key: string]: unknown;
         };
@@ -620,6 +639,66 @@ export type GetUserInfoResponses = {
 
 export type GetUserInfoResponse = GetUserInfoResponses[keyof GetUserInfoResponses];
 
+export type GetUserInfoByUserIdData = {
+    body?: never;
+    path: {
+        /**
+         * Other user id
+         */
+        user_id: string;
+    };
+    query?: never;
+    url: '/user/info/{user_id}';
+};
+
+export type GetUserInfoByUserIdErrors = {
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+    /**
+     * User Not Public
+     */
+    403: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+    /**
+     * User Not Found
+     */
+    404: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+    /**
+     * Internal Server Error (UUID Parse Failed)
+     */
+    500: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+};
+
+export type GetUserInfoByUserIdError = GetUserInfoByUserIdErrors[keyof GetUserInfoByUserIdErrors];
+
+export type GetUserInfoByUserIdResponses = {
+    /**
+     * Successful profile retrieval
+     */
+    200: UtilsRespStatus & {
+        data?: ServiceUserUserInfoData;
+    };
+};
+
+export type GetUserInfoByUserIdResponse = GetUserInfoByUserIdResponses[keyof GetUserInfoByUserIdResponses];
+
 export type GetUserListData = {
     body?: never;
     path?: never;
@@ -645,6 +724,14 @@ export type GetUserListErrors = {
             [key: string]: unknown;
         };
     };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
     /**
      * Internal Server Error (Search Engine or Missing Offset)
      */
@@ -690,7 +777,7 @@ export type PatchUserUpdateErrors = {
     /**
      * Missing User ID / Unauthorized
      */
-    403: UtilsRespStatus & {
+    401: UtilsRespStatus & {
         data?: {
             [key: string]: unknown;
         };

client/cms/src/client/zod.gen.ts

@@ -8,6 +8,7 @@ export const zDataEventIndexDoc = z.object({
     event_id: z.optional(z.string()),
     name: z.optional(z.string()),
     start_time: z.optional(z.string()),
+    thumbnail: z.optional(z.string()),
     type: z.optional(z.string())
 });
 
@@ -69,12 +70,6 @@ export const zServiceEventCheckinSubmitData = z.object({
     checkin_code: z.optional(z.string())
 });
 
-export const zServiceEventEventInfoResponse = z.object({
-    end_time: z.optional(z.string()),
-    name: z.optional(z.string()),
-    start_time: z.optional(z.string())
-});
-
 export const zServiceUserUserInfoData = z.object({
     allow_public: z.optional(z.boolean()),
     avatar: z.optional(z.string()),
@@ -212,7 +207,7 @@ export const zGetEventInfoData = z.object({
  * Successful retrieval
  */
 export const zGetEventInfoResponse = zUtilsRespStatus.and(z.object({
-    data: z.optional(zServiceEventEventInfoResponse)
+    data: z.optional(zDataEventIndexDoc)
 }));
 
 export const zGetEventListData = z.object({
@@ -244,6 +239,21 @@ export const zGetUserInfoResponse = zUtilsRespStatus.and(z.object({
     data: z.optional(zServiceUserUserInfoData)
 }));
 
+export const zGetUserInfoByUserIdData = z.object({
+    body: z.optional(z.never()),
+    path: z.object({
+        user_id: z.string()
+    }),
+    query: z.optional(z.never())
+});
+
+/**
+ * Successful profile retrieval
+ */
+export const zGetUserInfoByUserIdResponse = zUtilsRespStatus.and(z.object({
+    data: z.optional(zServiceUserUserInfoData)
+}));
+
 export const zGetUserListData = z.object({
     body: z.optional(z.never()),
     path: z.optional(z.never()),

client/cms/src/components/profile/edit-profile-dialog.tsx

@@ -1,3 +1,4 @@
+import type { ServiceUserUserInfoData } from '@/client';
 import { useForm } from '@tanstack/react-form';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -21,7 +22,6 @@ import {
   Input,
 } from '@/components/ui/input';
 import { useUpdateUser } from '@/hooks/data/useUpdateUser';
-import { useUserInfo } from '@/hooks/data/useUserInfo';
 import { Switch } from '../ui/switch';
 
 const formSchema = z.object({
@@ -31,9 +31,7 @@ const formSchema = z.object({
   avatar: z.url().or(z.literal('')),
   allow_public: z.boolean(),
 });
-export function EditProfileDialog() {
+export function EditProfileDialog({ user }: { user: ServiceUserUserInfoData }) {
-  const { data } = useUserInfo();
-  const user = data.data!;
   const { mutateAsync } = useUpdateUser();
 
   const form = useForm({

client/cms/src/components/profile/profile.error.tsx

@@ -0,0 +1,30 @@
+import { Mail } from 'lucide-react';
+import { Skeleton } from '../ui/skeleton';
+
+export function ProfileError({ reason }: { reason: string }) {
+  return (
+    <div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
+      <div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
+        <div className="flex flex-col w-full gap-3">
+          <div className="flex flex-col w-full gap-3">
+            <div className="flex flex-row gap-3 w-full lg:flex-col">
+              <Skeleton className="size-16 rounded-full border-2 border-muted lg:size-64" />
+              <div className="flex flex-1 flex-col justify-center lg:mt-3 gap-2">
+                <Skeleton className="w-32 h-8" />
+                <Skeleton className="w-20 h-6" />
+              </div>
+            </div>
+            <div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
+              <Mail className="h-4 w-4 stroke-muted-foreground" />
+              <Skeleton className="w-32 h-4" />
+            </div>
+          </div>
+          <Skeleton className="w-64 h-[40px]" />
+        </div>
+      </div>
+      <Skeleton className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center flex items-center justify-center">
+        {reason}
+      </Skeleton>
+    </div>
+  );
+}

client/cms/src/components/profile/profile.skeleton.tsx

@@ -0,0 +1,29 @@
+import { Mail } from 'lucide-react';
+import { Skeleton } from '../ui/skeleton';
+
+export function ProfileSkeleton() {
+  return (
+    <div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
+      <div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
+        <div className="flex flex-col w-full gap-3">
+          <div className="flex flex-col w-full gap-3">
+            <div className="flex flex-row gap-3 w-full lg:flex-col">
+              <Skeleton className="size-16 rounded-full border-2 border-muted lg:size-64" />
+              <div className="flex flex-1 flex-col justify-center lg:mt-3 gap-2">
+                <Skeleton className="w-32 h-8" />
+                <Skeleton className="w-20 h-6" />
+              </div>
+            </div>
+            <div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
+              <Mail className="h-4 w-4 stroke-muted-foreground" />
+              <Skeleton className="w-32 h-4" />
+            </div>
+          </div>
+          <Skeleton className="w-64 h-[40px]" />
+        </div>
+      </div>
+      <Skeleton className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center">
+      </Skeleton>
+    </div>
+  );
+}

client/cms/src/components/profile/profile.tsx

@@ -1,21 +1,22 @@
+import type { ServiceUserUserInfoData } from '@/client';
 import { identicon } from '@dicebear/collection';
 import { createAvatar } from '@dicebear/core';
 import MDEditor from '@uiw/react-md-editor';
-import { isNil } from 'lodash-es';
+import {
+  isEmpty,
+  isNil,
+} from 'lodash-es';
 import { Mail, Pencil } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import Markdown from 'react-markdown';
 import { toast } from 'sonner';
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { useUpdateUser } from '@/hooks/data/useUpdateUser';
-import { useUserInfo } from '@/hooks/data/useUserInfo';
 import { base64ToUtf8, utf8ToBase64 } from '@/lib/utils';
 import { Button } from '../ui/button';
 import { EditProfileDialog } from './edit-profile-dialog';
 
-export function MainProfile() {
+export function Profile({ user }: { user: ServiceUserUserInfoData }) {
-  const { data } = useUserInfo();
-  const user = data.data!;
   const [bio, setBio] = useState<string | undefined>(() => base64ToUtf8(user.bio ?? ''));
   const [enableBioEdit, setEnableBioEdit] = useState(false);
   const { mutateAsync } = useUpdateUser();
@@ -35,7 +36,7 @@ export function MainProfile() {
           <div className="flex flex-col w-full gap-3">
             <div className="flex flex-row gap-3 w-full lg:flex-col">
               <Avatar className="size-16 rounded-full border-2 border-muted lg:size-64">
-                {user.avatar !== undefined ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
+                {!isEmpty(user.avatar) ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
               </Avatar>
               <div className="flex flex-1 flex-col justify-center lg:mt-3">
                 <span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
@@ -47,7 +48,7 @@ export function MainProfile() {
               {user.email}
             </div>
           </div>
-          <EditProfileDialog />
+          <EditProfileDialog user={user} />
         </div>
       </div>
       <section className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center">

client/cms/src/components/sidebar/nav-user.tsx

@@ -5,6 +5,7 @@ import {
   IconDotsVertical,
   IconLogout,
 } from '@tabler/icons-react';
+import { isEmpty } from 'lodash-es';
 import { useMemo } from 'react';
 import {
   Avatar,
@@ -53,7 +54,7 @@ function NavUser_() {
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <Avatar className="h-8 w-8 rounded-lg">
-                {user.avatar !== undefined ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
+                {!isEmpty(user.avatar) ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{user.nickname}</span>
@@ -73,7 +74,7 @@ function NavUser_() {
             <DropdownMenuLabel className="p-0 font-normal">
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar className="h-8 w-8 rounded-lg">
-                  {user.avatar !== undefined ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
+                  {!isEmpty(user.avatar) ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{user.nickname}</span>

client/cms/src/components/workbenchCards/event-card.tsx

@@ -0,0 +1,39 @@
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+export function EventCard({ type, coverImage, eventName, description, startTime, endTime }:
+  {
+    type: 'official' | 'party',
+    coverImage: string, eventName: string, description: string, startTime: string, endTime: string
+  }) {
+  return (
+    <Card className="relative mx-auto w-full max-w-sm pt-0">
+      <div className="absolute inset-0 z-30 aspect-video bg-black/35" />
+      <img
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Event cover"
+        className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40"
+      />
+      <CardHeader>
+        <CardAction>
+          <Badge variant="secondary">Featured</Badge>
+        </CardAction>
+        <CardTitle>Design systems meetup</CardTitle>
+        <CardDescription>
+          A practical talk on component APIs, accessibility, and shipping
+          faster.
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button className="w-full">View Event</Button>
+      </CardFooter>
+    </Card>
+  )
+}

client/cms/src/hooks/data/useUserInfo.ts

@@ -1,5 +1,8 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { getUserInfoOptions } from '@/client/@tanstack/react-query.gen';
+import {
+  getUserInfoByUserIdOptions,
+  getUserInfoOptions,
+} from '@/client/@tanstack/react-query.gen';
 
 export function useUserInfo() {
   return useSuspenseQuery({
@@ -7,3 +10,11 @@ export function useUserInfo() {
     staleTime: 10 * 60 * 1000,
   });
 }
+
+export function useOtherUserInfo(userId: string) {
+  return useSuspenseQuery({
+    ...getUserInfoByUserIdOptions({ path: { user_id: userId } }),
+    staleTime: 10 * 60 * 1000,
+    retry: (_failureCount, error) => error.code !== 403,
+  });
+}

client/cms/src/lib/navData.ts

@@ -1,4 +1,5 @@
 import {
+  IconCalendarEvent,
   IconDashboard,
   IconUser,
 } from '@tabler/icons-react';
@@ -10,6 +11,11 @@ export const navData = {
       url: '/',
       icon: IconDashboard,
     },
+    {
+      title: '活动列表',
+      url: '/events',
+      icon: IconCalendarEvent,
+    },
   ],
   navSecondary: [
     {

client/cms/src/routeTree.gen.ts

@@ -12,9 +12,11 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as TokenRouteImport } from './routes/token'
 import { Route as MagicLinkSentRouteImport } from './routes/magicLinkSent'
 import { Route as AuthorizeRouteImport } from './routes/authorize'
-import { Route as SidebarLayoutRouteImport } from './routes/_sidebarLayout'
+import { Route as WorkbenchLayoutRouteImport } from './routes/_workbenchLayout'
-import { Route as SidebarLayoutIndexRouteImport } from './routes/_sidebarLayout/index'
+import { Route as WorkbenchLayoutIndexRouteImport } from './routes/_workbenchLayout/index'
-import { Route as SidebarLayoutProfileRouteImport } from './routes/_sidebarLayout/profile'
+import { Route as WorkbenchLayoutEventsRouteImport } from './routes/_workbenchLayout/events'
+import { Route as WorkbenchLayoutProfileIndexRouteImport } from './routes/_workbenchLayout/profile.index'
+import { Route as WorkbenchLayoutProfileUserIdRouteImport } from './routes/_workbenchLayout/profile.$userId'
 
 const TokenRoute = TokenRouteImport.update({
   id: '/token',
@@ -31,61 +33,95 @@ const AuthorizeRoute = AuthorizeRouteImport.update({
   path: '/authorize',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SidebarLayoutRoute = SidebarLayoutRouteImport.update({
+const WorkbenchLayoutRoute = WorkbenchLayoutRouteImport.update({
-  id: '/_sidebarLayout',
+  id: '/_workbenchLayout',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SidebarLayoutIndexRoute = SidebarLayoutIndexRouteImport.update({
+const WorkbenchLayoutIndexRoute = WorkbenchLayoutIndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => SidebarLayoutRoute,
+  getParentRoute: () => WorkbenchLayoutRoute,
 } as any)
-const SidebarLayoutProfileRoute = SidebarLayoutProfileRouteImport.update({
+const WorkbenchLayoutEventsRoute = WorkbenchLayoutEventsRouteImport.update({
-  id: '/profile',
+  id: '/events',
-  path: '/profile',
+  path: '/events',
-  getParentRoute: () => SidebarLayoutRoute,
+  getParentRoute: () => WorkbenchLayoutRoute,
 } as any)
+const WorkbenchLayoutProfileIndexRoute =
+  WorkbenchLayoutProfileIndexRouteImport.update({
+    id: '/profile/',
+    path: '/profile/',
+    getParentRoute: () => WorkbenchLayoutRoute,
+  } as any)
+const WorkbenchLayoutProfileUserIdRoute =
+  WorkbenchLayoutProfileUserIdRouteImport.update({
+    id: '/profile/$userId',
+    path: '/profile/$userId',
+    getParentRoute: () => WorkbenchLayoutRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
-  '/': typeof SidebarLayoutIndexRoute
+  '/': typeof WorkbenchLayoutIndexRoute
   '/authorize': typeof AuthorizeRoute
   '/magicLinkSent': typeof MagicLinkSentRoute
   '/token': typeof TokenRoute
-  '/profile': typeof SidebarLayoutProfileRoute
+  '/events': typeof WorkbenchLayoutEventsRoute
+  '/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
+  '/profile/': typeof WorkbenchLayoutProfileIndexRoute
 }
 export interface FileRoutesByTo {
   '/authorize': typeof AuthorizeRoute
   '/magicLinkSent': typeof MagicLinkSentRoute
   '/token': typeof TokenRoute
-  '/profile': typeof SidebarLayoutProfileRoute
+  '/events': typeof WorkbenchLayoutEventsRoute
-  '/': typeof SidebarLayoutIndexRoute
+  '/': typeof WorkbenchLayoutIndexRoute
+  '/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
+  '/profile': typeof WorkbenchLayoutProfileIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
-  '/_sidebarLayout': typeof SidebarLayoutRouteWithChildren
+  '/_workbenchLayout': typeof WorkbenchLayoutRouteWithChildren
   '/authorize': typeof AuthorizeRoute
   '/magicLinkSent': typeof MagicLinkSentRoute
   '/token': typeof TokenRoute
-  '/_sidebarLayout/profile': typeof SidebarLayoutProfileRoute
+  '/_workbenchLayout/events': typeof WorkbenchLayoutEventsRoute
-  '/_sidebarLayout/': typeof SidebarLayoutIndexRoute
+  '/_workbenchLayout/': typeof WorkbenchLayoutIndexRoute
+  '/_workbenchLayout/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
+  '/_workbenchLayout/profile/': typeof WorkbenchLayoutProfileIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/authorize' | '/magicLinkSent' | '/token' | '/profile'
+  fullPaths:
-  fileRoutesByTo: FileRoutesByTo
+    | '/'
-  to: '/authorize' | '/magicLinkSent' | '/token' | '/profile' | '/'
-  id:
-    | '__root__'
-    | '/_sidebarLayout'
     | '/authorize'
     | '/magicLinkSent'
     | '/token'
-    | '/_sidebarLayout/profile'
+    | '/events'
-    | '/_sidebarLayout/'
+    | '/profile/$userId'
+    | '/profile/'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/authorize'
+    | '/magicLinkSent'
+    | '/token'
+    | '/events'
+    | '/'
+    | '/profile/$userId'
+    | '/profile'
+  id:
+    | '__root__'
+    | '/_workbenchLayout'
+    | '/authorize'
+    | '/magicLinkSent'
+    | '/token'
+    | '/_workbenchLayout/events'
+    | '/_workbenchLayout/'
+    | '/_workbenchLayout/profile/$userId'
+    | '/_workbenchLayout/profile/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
-  SidebarLayoutRoute: typeof SidebarLayoutRouteWithChildren
+  WorkbenchLayoutRoute: typeof WorkbenchLayoutRouteWithChildren
   AuthorizeRoute: typeof AuthorizeRoute
   MagicLinkSentRoute: typeof MagicLinkSentRoute
   TokenRoute: typeof TokenRoute
@@ -114,46 +150,64 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthorizeRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_sidebarLayout': {
+    '/_workbenchLayout': {
-      id: '/_sidebarLayout'
+      id: '/_workbenchLayout'
       path: ''
       fullPath: '/'
-      preLoaderRoute: typeof SidebarLayoutRouteImport
+      preLoaderRoute: typeof WorkbenchLayoutRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_sidebarLayout/': {
+    '/_workbenchLayout/': {
-      id: '/_sidebarLayout/'
+      id: '/_workbenchLayout/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof SidebarLayoutIndexRouteImport
+      preLoaderRoute: typeof WorkbenchLayoutIndexRouteImport
-      parentRoute: typeof SidebarLayoutRoute
+      parentRoute: typeof WorkbenchLayoutRoute
     }
-    '/_sidebarLayout/profile': {
+    '/_workbenchLayout/events': {
-      id: '/_sidebarLayout/profile'
+      id: '/_workbenchLayout/events'
+      path: '/events'
+      fullPath: '/events'
+      preLoaderRoute: typeof WorkbenchLayoutEventsRouteImport
+      parentRoute: typeof WorkbenchLayoutRoute
+    }
+    '/_workbenchLayout/profile/': {
+      id: '/_workbenchLayout/profile/'
       path: '/profile'
-      fullPath: '/profile'
+      fullPath: '/profile/'
-      preLoaderRoute: typeof SidebarLayoutProfileRouteImport
+      preLoaderRoute: typeof WorkbenchLayoutProfileIndexRouteImport
-      parentRoute: typeof SidebarLayoutRoute
+      parentRoute: typeof WorkbenchLayoutRoute
+    }
+    '/_workbenchLayout/profile/$userId': {
+      id: '/_workbenchLayout/profile/$userId'
+      path: '/profile/$userId'
+      fullPath: '/profile/$userId'
+      preLoaderRoute: typeof WorkbenchLayoutProfileUserIdRouteImport
+      parentRoute: typeof WorkbenchLayoutRoute
     }
   }
 }
 
-interface SidebarLayoutRouteChildren {
+interface WorkbenchLayoutRouteChildren {
-  SidebarLayoutProfileRoute: typeof SidebarLayoutProfileRoute
+  WorkbenchLayoutEventsRoute: typeof WorkbenchLayoutEventsRoute
-  SidebarLayoutIndexRoute: typeof SidebarLayoutIndexRoute
+  WorkbenchLayoutIndexRoute: typeof WorkbenchLayoutIndexRoute
+  WorkbenchLayoutProfileUserIdRoute: typeof WorkbenchLayoutProfileUserIdRoute
+  WorkbenchLayoutProfileIndexRoute: typeof WorkbenchLayoutProfileIndexRoute
 }
 
-const SidebarLayoutRouteChildren: SidebarLayoutRouteChildren = {
+const WorkbenchLayoutRouteChildren: WorkbenchLayoutRouteChildren = {
-  SidebarLayoutProfileRoute: SidebarLayoutProfileRoute,
+  WorkbenchLayoutEventsRoute: WorkbenchLayoutEventsRoute,
-  SidebarLayoutIndexRoute: SidebarLayoutIndexRoute,
+  WorkbenchLayoutIndexRoute: WorkbenchLayoutIndexRoute,
+  WorkbenchLayoutProfileUserIdRoute: WorkbenchLayoutProfileUserIdRoute,
+  WorkbenchLayoutProfileIndexRoute: WorkbenchLayoutProfileIndexRoute,
 }
 
-const SidebarLayoutRouteWithChildren = SidebarLayoutRoute._addFileChildren(
+const WorkbenchLayoutRouteWithChildren = WorkbenchLayoutRoute._addFileChildren(
-  SidebarLayoutRouteChildren,
+  WorkbenchLayoutRouteChildren,
 )
 
 const rootRouteChildren: RootRouteChildren = {
-  SidebarLayoutRoute: SidebarLayoutRouteWithChildren,
+  WorkbenchLayoutRoute: WorkbenchLayoutRouteWithChildren,
   AuthorizeRoute: AuthorizeRoute,
   MagicLinkSentRoute: MagicLinkSentRoute,
   TokenRoute: TokenRoute,

client/cms/src/routes/_sidebarLayout/profile.tsx

@@ -1,14 +0,0 @@
-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 h-full flex-col gap-6 px-4 py-6">
-      <MainProfile />
-    </div>
-  );
-}

client/cms/src/routes/_workbenchLayout.tsx

@@ -3,7 +3,7 @@ import { AppSidebar } from '@/components/sidebar/app-sidebar';
 import { SiteHeader } from '@/components/site-header';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 
-export const Route = createFileRoute('/_sidebarLayout')({
+export const Route = createFileRoute('/_workbenchLayout')({
   component: RouteComponent,
 });
 

client/cms/src/routes/_workbenchLayout/events.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_workbenchLayout/events')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/_sidebarLayout/events"!</div>;
+}

client/cms/src/routes/_workbenchLayout/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 
-export const Route = createFileRoute('/_sidebarLayout/')({
+export const Route = createFileRoute('/_workbenchLayout/')({
   component: Index,
 });
 

client/cms/src/routes/_workbenchLayout/profile.$userId.tsx

@@ -0,0 +1,34 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Profile } from '@/components/profile/profile';
+import { ProfileError } from '@/components/profile/profile.error';
+import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
+import { useOtherUserInfo } from '@/hooks/data/useUserInfo';
+
+export const Route = createFileRoute('/_workbenchLayout/profile/$userId')({
+  component: RouteComponent,
+});
+
+function ProfileByUserId({ userId }: { userId: string }) {
+  const { data } = useOtherUserInfo(userId);
+  return <Profile user={data.data!} />;
+}
+
+function RouteComponent() {
+  const { userId } = Route.useParams();
+  return (
+    <div className="flex h-full flex-col gap-6 px-4 py-6">
+      <ErrorBoundary fallbackRender={(error) => {
+        if ((error.error as { code: number }).code === 403)
+          return <ProfileError reason="用户个人资料未公开" />;
+        else return <ProfileError reason="获取用户个人资料失败" />;
+      }}
+      >
+        <Suspense fallback={<ProfileSkeleton />}>
+          <ProfileByUserId userId={userId} />
+        </Suspense>
+      </ErrorBoundary>
+    </div>
+  );
+}

client/cms/src/routes/_workbenchLayout/profile.index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute, Navigate } from '@tanstack/react-router';
+import { useUserInfo } from '@/hooks/data/useUserInfo';
+
+export const Route = createFileRoute('/_workbenchLayout/profile/')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { data } = useUserInfo();
+  return (
+    <Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
+  );
+}

client/cms/src/stories/event-card.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EventCard } from '@/components/workbenchCards/event-card';
+
+const meta = {
+  title: 'Cards/EventCard',
+  component: EventCard,
+} satisfies Meta<typeof EventCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

client/cms/src/stories/profile.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Profile } from '@/components/profile/profile';
+import { ProfileError } from '@/components/profile/profile.error';
+import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
+
+const queryClient = new QueryClient();
+
+const meta = {
+  title: 'Profile',
+  component: Profile,
+  decorators: [
+    Story => (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
+} satisfies Meta<typeof Profile>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    user: {
+      username: 'nvirellia',
+      nickname: 'Noa Virellia',
+      subtitle: '天生骄傲',
+      email: 'noa@requiem.garden',
+      bio: '',
+      avatar: 'https://avatars.githubusercontent.com/u/54884471?v=4',
+    },
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => <ProfileSkeleton />,
+  args: {
+    user: {},
+  },
+};
+
+export const Error: Story = {
+  render: () => <ProfileError reason="用户个人资料未公开" />,
+  args: {
+    user: {
+      allow_public: false,
+    },
+  },
+};

client/cms/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest/config" />
 import path from 'node:path';
 import tailwindcss from '@tailwindcss/vite';
 import { tanstackRouter } from '@tanstack/router-plugin/vite';
@@ -6,27 +7,51 @@ import { defineConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';
 
 // https://vite.dev/config/
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-  plugins: [
+  plugins: [tanstackRouter({
-    tanstackRouter({
     target: 'react',
-      autoCodeSplitting: true,
+    autoCodeSplitting: true
-    }),
+  }), react(), tailwindcss(), svgr()],
-    react(),
-    tailwindcss(),
-    svgr(),
-  ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      '@': path.resolve(__dirname, './src')
-    },
+    }
   },
   server: {
     proxy: {
-      '/api': 'http://10.0.0.10:8000',
+      '/api': 'http://10.0.0.10:8000'
     },
     host: '0.0.0.0',
     port: 5173,
-    allowedHosts: ['nix.org.cn', 'nixos.party'],
+    allowedHosts: ['nix.org.cn', 'nixos.party']
   },
+  test: {
+    projects: [{
+      extends: true,
+      plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      storybookTest({
+        configDir: path.join(dirname, '.storybook')
+      })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: playwright({}),
+          instances: [{
+            browser: 'chromium'
+          }]
+        },
+        setupFiles: ['.storybook/vitest.setup.ts']
+      }
+    }]
+  }
 });

client/cms/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />