From 16739d3cf8cf79b31a4fa4dbb380b4a5f640fd3a Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Mon, 18 May 2026 20:44:29 +0800
Subject: [PATCH] refactor(ui): update me/profile pages for new theme system

Update MeLayout, MePage, and all me/components (ActivityTimeline,
NotificationList, ProfileHeader, ProjectList, RepoList) to use
CSS variable-based theme tokens and improved layout.
---
 src/app/me/MeLayout.tsx                    | 115 ++++---
 src/app/me/MePage.tsx                      | 299 +++++++++++-------
 src/app/me/components/ActivityTimeline.tsx | 138 ++++++---
 src/app/me/components/NotificationList.tsx | 287 ++++++++++-------
 src/app/me/components/ProfileHeader.tsx    | 338 +++++++++++++--------
 src/app/me/components/ProjectList.tsx      | 150 +++++----
 src/app/me/components/RepoList.tsx         | 142 ++++++---
 7 files changed, 920 insertions(+), 549 deletions(-)

diff --git a/src/app/me/MeLayout.tsx b/src/app/me/MeLayout.tsx
index c36aea0..5fca777 100644
--- a/src/app/me/MeLayout.tsx
+++ b/src/app/me/MeLayout.tsx
@@ -1,64 +1,81 @@
-import { Outlet, useLocation } from "react-router-dom";
-import { useState } from "react";
-import { PanelLeftOpen } from "lucide-react";
-import { ServerIconRail } from "@/components/layout/ServerIconRail";
-import { MeSidebar } from "./components/MeSidebar";
-import { Header } from "@/components/layout/Header";
-import { useIsMobile } from "@/hooks/use-mobile";
+import { Outlet, useLocation } from "react-router-dom"
+import { useState } from "react"
+import { PanelLeftOpen } from "lucide-react"
+import { ServerIconRail } from "@/components/layout/ServerIconRail"
+import { MeSidebar } from "./components/MeSidebar"
+import { Header } from "@/components/layout/Header"
+import { useIsMobile } from "@/hooks/use-mobile"
 
 export function MeLayout() {
-  const isMobile = useIsMobile();
-  const location = useLocation();
-  const isExplore = location.pathname === "/explore";
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const isMobile = useIsMobile()
+  const location = useLocation()
+  const isExplore = location.pathname === "/explore"
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
 
   return (
-    <div className="flex h-screen overflow-hidden" style={{ backgroundColor: "var(--surface-ground)" }}>
+    <div
+      className="relative flex h-screen overflow-hidden"
+      style={{ backgroundColor: "var(--surface-ground)" }}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 opacity-70"
+        style={{
+          backgroundImage:
+            "radial-gradient(circle at top left, color-mix(in oklch, var(--accent) 9%, transparent) 0, transparent 28%), radial-gradient(circle at bottom right, color-mix(in oklch, var(--accent) 4%, transparent) 0, transparent 24%)",
+        }}
+      />
       {!isMobile && <ServerIconRail />}
       {!isExplore && (
-      <div className="relative flex shrink-0">
-        <div
-          style={{
-            width: isSidebarCollapsed ? 0 : 220,
-            transition: "width 0.2s ease",
-            overflow: "hidden",
-            backgroundColor: "var(--surface-sidebar)",
-          }}
-        >
-          {!isSidebarCollapsed && (
-            <MeSidebar onCollapse={() => setIsSidebarCollapsed(true)} />
+        <div className="relative flex shrink-0">
+          <div
+            style={{
+              width: isSidebarCollapsed ? 0 : 220,
+              transition: "width 0.2s ease",
+              overflow: "hidden",
+              backgroundColor: "var(--surface-sidebar)",
+            }}
+          >
+            {!isSidebarCollapsed && (
+              <MeSidebar onCollapse={() => setIsSidebarCollapsed(true)} />
+            )}
+          </div>
+          {/* Expand button - visible when collapsed */}
+          {isSidebarCollapsed && (
+            <button
+              onClick={() => setIsSidebarCollapsed(false)}
+              className="absolute flex h-10 w-5 cursor-pointer items-center justify-center transition-colors"
+              style={{
+                color: "var(--text-muted)",
+                backgroundColor: "var(--surface-sidebar)",
+                right: -10,
+                top: "50%",
+                transform: "translateY(-50%)",
+                borderRadius: "0 4px 4px 0",
+                border: "0.5px solid var(--border-subtle)",
+                borderLeft: "none",
+                zIndex: 10,
+              }}
+              title="Expand sidebar"
+            >
+              <PanelLeftOpen className="h-3.5 w-3.5" />
+            </button>
           )}
         </div>
-        {/* Expand button - visible when collapsed */}
-        {isSidebarCollapsed && (
-          <button
-            onClick={() => setIsSidebarCollapsed(false)}
-            className="absolute flex items-center justify-center w-5 h-10 cursor-pointer transition-colors"
-            style={{
-              color: "var(--text-muted)",
-              backgroundColor: "var(--surface-sidebar)",
-              right: -10,
-              top: "50%",
-              transform: "translateY(-50%)",
-              borderRadius: "0 4px 4px 0",
-              border: "0.5px solid var(--border-subtle)",
-              borderLeft: "none",
-              zIndex: 10,
-            }}
-            title="Expand sidebar"
-          >
-            <PanelLeftOpen className="w-3.5 h-3.5" />
-          </button>
-        )}
-      </div>
       )}
 
-      <div className="flex-1 flex flex-col overflow-hidden min-w-0" style={{ backgroundColor: "var(--surface-ground)" }}>
+      <div
+        className="relative z-10 flex min-w-0 flex-1 flex-col overflow-hidden"
+        style={{ backgroundColor: "var(--surface-ground)" }}
+      >
         <Header />
-        <main className="flex-1 overflow-y-auto" style={{ backgroundColor: "var(--surface-ground)" }}>
+        <main
+          className="flex-1 overflow-y-auto"
+          style={{ backgroundColor: "var(--surface-ground)" }}
+        >
           <Outlet />
         </main>
       </div>
     </div>
-  );
-}
\ No newline at end of file
+  )
+}
diff --git a/src/app/me/MePage.tsx b/src/app/me/MePage.tsx
index 0e7e642..1053524 100644
--- a/src/app/me/MePage.tsx
+++ b/src/app/me/MePage.tsx
@@ -1,4 +1,4 @@
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom"
 import {
   useUserInfoQuery,
   useUserActivityQuery,
@@ -11,98 +11,147 @@ import {
   useUserFollowersQuery,
   useFollowMutation,
   useUnfollowMutation,
-} from "@/hooks/useUserQuery";
-import { ProfileHeader } from "./components/ProfileHeader";
-import { ActivityTimeline } from "./components/ActivityTimeline";
-import { ContributionHeatmap } from "./components/ContributionHeatmap";
-import { UserCardList } from "./components/UserCardList";
-import { FollowerCardList } from "./components/FollowerCardList";
-import { RepoList } from "./components/RepoList";
-import { ProjectList } from "./components/ProjectList";
-import { NotificationList } from "./components/NotificationList";
-import { Loader2 } from "lucide-react";
-import { useCurrentUserQuery } from "@/hooks/useAuth";
-import { t } from "@/i18n/T";
+} from "@/hooks/useUserQuery"
+import { ProfileHeader } from "./components/ProfileHeader"
+import { ActivityTimeline } from "./components/ActivityTimeline"
+import { ContributionHeatmap } from "./components/ContributionHeatmap"
+import { UserCardList } from "./components/UserCardList"
+import { FollowerCardList } from "./components/FollowerCardList"
+import { RepoList } from "./components/RepoList"
+import { ProjectList } from "./components/ProjectList"
+import { NotificationList } from "./components/NotificationList"
+import { Loader2 } from "lucide-react"
+import { useCurrentUserQuery } from "@/hooks/useAuth"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+} from "@/components/ui/empty"
+import { t } from "@/i18n/T"
+import type { ReactNode } from "react"
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle
+          className="text-[11px] tracking-[0.22em] uppercase"
+          style={{ color: "var(--text-tertiary)" }}
+        >
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pb-4">{children}</CardContent>
+    </Card>
+  )
+}
 
 export function MePage() {
-  const location = useLocation();
-  const { data: currentUser, isLoading: isAuthLoading } = useCurrentUserQuery();
-  const username = currentUser?.username || "";
-  
-  const { data: summary, isLoading: isSummaryLoading } = useUserSummaryQuery(username);
+  const location = useLocation()
+  const { data: currentUser, isLoading: isAuthLoading } = useCurrentUserQuery()
+  const username = currentUser?.username || ""
 
-  const { data: userInfo, isLoading: isInfoLoading } = useUserInfoQuery(username);
-  const { data: heatmapData } = useMyHeatmapQuery();
-  const { data: repos, isLoading: isReposLoading } = useMyReposQuery();
-  const { data: projects, isLoading: isProjectsLoading } = useMyProjectsQuery();
-  
-  // Determine active section based on URL
-  const path = location.pathname;
-  let activeSection = "overview";
-  if (path.includes("/repositories")) activeSection = "repositories";
-  else if (path.includes("/projects")) activeSection = "projects";
-  else if (path.includes("/activity")) activeSection = "activity";
-  else if (path.includes("/stars")) activeSection = "stars";
-  else if (path.includes("/following")) activeSection = "following";
-  else if (path.includes("/followers")) activeSection = "followers";
-  else if (path.includes("/notify")) activeSection = "notify";
+  const { data: summary, isLoading: isSummaryLoading } =
+    useUserSummaryQuery(username)
+  const { data: userInfo, isLoading: isInfoLoading } =
+    useUserInfoQuery(username)
+  const { data: heatmapData } = useMyHeatmapQuery()
+  const { data: repos, isLoading: isReposLoading } = useMyReposQuery()
+  const { data: projects, isLoading: isProjectsLoading } = useMyProjectsQuery()
 
-  // Conditional fetching for specific sections
-  const { data: activityData, isLoading: isActivityLoading } = useUserActivityQuery(username, 1, 20, { enabled: activeSection === "activity" || activeSection === "overview" });
-  const { data: starsData } = useUserStarsQuery(username, { enabled: activeSection === "stars" });
-  const { data: following, isLoading: isFollowingLoading } = useUserFollowingQuery(username, { enabled: activeSection === "following" });
-  const { data: followers, isLoading: isFollowersLoading } = useUserFollowersQuery(username, { enabled: activeSection === "followers" });
+  const path = location.pathname
+  let activeSection = "overview"
+  if (path.includes("/repositories")) activeSection = "repositories"
+  else if (path.includes("/projects")) activeSection = "projects"
+  else if (path.includes("/activity")) activeSection = "activity"
+  else if (path.includes("/stars")) activeSection = "stars"
+  else if (path.includes("/following")) activeSection = "following"
+  else if (path.includes("/followers")) activeSection = "followers"
+  else if (path.includes("/notify")) activeSection = "notify"
 
-  // Follow/Unfollow mutations
-  const followMutation = useFollowMutation();
-  const unfollowMutation = useUnfollowMutation();
+  const { data: activityData, isLoading: isActivityLoading } =
+    useUserActivityQuery(username, 1, 20, {
+      enabled: activeSection === "activity" || activeSection === "overview",
+    })
+  const { data: starsData } = useUserStarsQuery(username, {
+    enabled: activeSection === "stars",
+  })
+  const { data: following, isLoading: isFollowingLoading } =
+    useUserFollowingQuery(username, { enabled: activeSection === "following" })
+  const { data: followers, isLoading: isFollowersLoading } =
+    useUserFollowersQuery(username, { enabled: activeSection === "followers" })
 
-  const handleFollowToggle = async (username: string, isFollowing: boolean) => {
+  const followMutation = useFollowMutation()
+  const unfollowMutation = useUnfollowMutation()
+
+  const handleFollowToggle = async (
+    targetUsername: string,
+    isFollowing: boolean
+  ) => {
     try {
       if (isFollowing) {
-        await unfollowMutation.mutateAsync(username);
+        await unfollowMutation.mutateAsync(targetUsername)
       } else {
-        await followMutation.mutateAsync(username);
+        await followMutation.mutateAsync(targetUsername)
       }
     } catch (err) {
-      console.error("Follow toggle failed:", err);
+      console.error("Follow toggle failed:", err)
     }
-  };
+  }
 
   if (isAuthLoading) {
     return (
-      <div className="flex items-center justify-center h-full">
-        <Loader2 className="w-8 h-8 animate-spin" style={{ color: "var(--accent)" }} />
+      <div className="flex h-full items-center justify-center">
+        <Loader2
+          className="size-8 animate-spin"
+          style={{ color: "var(--accent)" }}
+        />
       </div>
-    );
+    )
   }
 
   if (!currentUser) {
     return (
-      <div className="flex items-center justify-center h-full" style={{ color: "var(--text-muted)" }}>
-        <div className="text-center">
-            <p className="text-xl font-bold mb-2">{t("me.user_not_found")}</p>
-            <p>{t("me.please_login")}</p>
-        </div>
+      <div className="flex h-full items-center justify-center">
+        <Empty className="max-w-md border-[var(--border-subtle)] bg-[var(--surface-secondary)]">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Loader2 />
+            </EmptyMedia>
+            <EmptyTitle>{t("me.user_not_found")}</EmptyTitle>
+            <EmptyDescription>{t("me.please_login")}</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
       </div>
-    );
+    )
   }
 
   const renderContent = () => {
     switch (activeSection) {
       case "repositories":
-        return <RepoList repos={repos ?? []} isLoading={isReposLoading} />;
+        return <RepoList repos={repos ?? []} isLoading={isReposLoading} />
       case "projects":
-        return <ProjectList projects={projects ?? []} isLoading={isProjectsLoading} />;
+        return (
+          <ProjectList
+            projects={projects ?? []}
+            isLoading={isProjectsLoading}
+          />
+        )
       case "activity":
         return (
-            <div className="rounded-xl p-6 border-[0.5px]" style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}>
-                <ActivityTimeline items={activityData?.items ?? []} isLoading={isActivityLoading} />
-            </div>
-        );
+          <ActivityTimeline
+            items={activityData?.items ?? []}
+            isLoading={isActivityLoading}
+          />
+        )
       case "stars":
         return (
-            <RepoList repos={starsData?.repos.map(s => ({
+          <RepoList
+            repos={
+              starsData?.repos.map((s) => ({
                 uid: s.uid,
                 repo_name: s.repo_name,
                 project_name: s.owner,
@@ -111,73 +160,97 @@ export function MePage() {
                 is_private: s.is_private,
                 updated_at: s.starred_at,
                 storage_path: "",
-                created_at: s.starred_at
-            })) ?? []} isLoading={!starsData} />
-        );
+                created_at: s.starred_at,
+              })) ?? []
+            }
+            isLoading={!starsData}
+          />
+        )
       case "following":
         return isFollowingLoading ? (
-            <div className="flex justify-center py-12"><Loader2 className="w-6 h-6 animate-spin" /></div>
+          <div className="flex justify-center py-12">
+            <Loader2 className="size-6 animate-spin" />
+          </div>
         ) : (
-            <UserCardList users={following ?? []} onToggleFollow={handleFollowToggle} />
-        );
+          <UserCardList
+            users={following ?? []}
+            onToggleFollow={handleFollowToggle}
+          />
+        )
       case "followers":
         return isFollowersLoading ? (
-            <div className="flex justify-center py-12"><Loader2 className="w-6 h-6 animate-spin" /></div>
+          <div className="flex justify-center py-12">
+            <Loader2 className="size-6 animate-spin" />
+          </div>
         ) : (
-            <FollowerCardList users={followers ?? []} />
-        );
+          <FollowerCardList users={followers ?? []} />
+        )
       case "notify":
-        return (
-            <div className="rounded-xl p-6 border-[0.5px]" style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}>
-                <NotificationList />
-            </div>
-        );
+        return <NotificationList />
       default:
         return (
-            <div className="space-y-6">
-                {(summary?.heatmap || heatmapData) && <ContributionHeatmap data={(summary?.heatmap || heatmapData)!} />}
-                
-                <div className="grid grid-cols-1 xl:grid-cols-12 gap-6">
-                <div className="xl:col-span-7 space-y-6">
-                    <section>
-                        <div className="flex items-center justify-between mb-3">
-                            <h2 className="text-[11px] font-semibold uppercase tracking-wider" style={{ color: "var(--text-tertiary)" }}>{t("me.recent_repos")}</h2>
-                        </div>
-                        <RepoList repos={summary?.repos || repos?.slice(0, 4) || []} isLoading={(isSummaryLoading && isReposLoading) && !summary} />
-                    </section>
+          <div className="space-y-6">
+            {(summary?.heatmap || heatmapData) && (
+              <Card>
+                <CardContent className="pt-4">
+                  <ContributionHeatmap
+                    data={(summary?.heatmap || heatmapData)!}
+                  />
+                </CardContent>
+              </Card>
+            )}
 
-                    <section>
-                        <div className="flex items-center justify-between mb-3">
-                            <h2 className="text-[11px] font-semibold uppercase tracking-wider" style={{ color: "var(--text-tertiary)" }}>{t("me.top_projects")}</h2>
-                        </div>
-                        <ProjectList projects={summary?.projects || projects?.slice(0, 4) || []} isLoading={(isSummaryLoading && isProjectsLoading) && !summary} />
-                    </section>
-                </div>
+            <div className="grid grid-cols-1 gap-6 xl:grid-cols-12">
+              <div className="space-y-6 xl:col-span-7">
+                <Section title={t("me.recent_repos")}>
+                  <RepoList
+                    repos={summary?.repos || repos?.slice(0, 4) || []}
+                    isLoading={isSummaryLoading && isReposLoading && !summary}
+                  />
+                </Section>
 
-                <div className="xl:col-span-5">
-                    <section>
-                        <h2 className="text-[11px] font-semibold uppercase tracking-wider mb-3" style={{ color: "var(--text-tertiary)" }}>{t("me.latest_activity")}</h2>
-                        <div className="rounded-xl p-5 border-[0.5px]" style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}>
-                            <ActivityTimeline items={summary?.activity || activityData?.items.slice(0, 8) || []} isLoading={(isSummaryLoading && isActivityLoading) && !summary} />
-                        </div>
-                    </section>
-                </div>
-                </div>
+                <Section title={t("me.top_projects")}>
+                  <ProjectList
+                    projects={summary?.projects || projects?.slice(0, 4) || []}
+                    isLoading={
+                      isSummaryLoading && isProjectsLoading && !summary
+                    }
+                  />
+                </Section>
+              </div>
+
+              <div className="xl:col-span-5">
+                <Section title={t("me.latest_activity")}>
+                  <ActivityTimeline
+                    items={
+                      summary?.activity || activityData?.items.slice(0, 8) || []
+                    }
+                    isLoading={
+                      isSummaryLoading && isActivityLoading && !summary
+                    }
+                  />
+                </Section>
+              </div>
             </div>
-        );
+          </div>
+        )
     }
-  };
+  }
 
   return (
-    <div className="p-8 h-full overflow-y-auto" style={{ backgroundColor: "var(--surface-ground)" }}>
-      <div className="max-w-6xl mx-auto">
-        <ProfileHeader user={summary?.info || userInfo} isMe={true} isLoading={(isSummaryLoading && isInfoLoading) && !summary} starsCount={summary?.stars_count} followerCount={summary?.follower_count} />
-        <div className="mt-8">
-            {renderContent()}
-        </div>
+    <div className="h-full overflow-y-auto bg-[var(--surface-ground)] px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
+      <div className="mx-auto flex max-w-6xl flex-col gap-6">
+        <ProfileHeader
+          user={summary?.info || userInfo}
+          isMe={true}
+          isLoading={isSummaryLoading && isInfoLoading && !summary}
+          starsCount={summary?.stars_count}
+          followerCount={summary?.follower_count}
+        />
+        {renderContent()}
       </div>
     </div>
-  );
+  )
 }
 
-export default MePage;
+export default MePage
diff --git a/src/app/me/components/ActivityTimeline.tsx b/src/app/me/components/ActivityTimeline.tsx
index e8ce55c..42b301f 100644
--- a/src/app/me/components/ActivityTimeline.tsx
+++ b/src/app/me/components/ActivityTimeline.tsx
@@ -1,5 +1,5 @@
-import { memo } from "react";
-import { formatDistanceToNow } from "date-fns";
+import { memo } from "react"
+import { formatDistanceToNow } from "date-fns"
 import {
   History,
   LogIn,
@@ -13,14 +13,22 @@ import {
   AlertCircle,
   Settings,
   Image as ImageIcon,
-} from "lucide-react";
-import type { UserActivityItem } from "@/client/model";
-import { Skeleton } from "@/components/ui/skeleton";
-import type { ComponentType, SVGProps } from "react";
+} from "lucide-react"
+import type { UserActivityItem } from "@/client/model"
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+import { Separator } from "@/components/ui/separator"
+import { Skeleton } from "@/components/ui/skeleton"
+import type { ComponentType, SVGProps } from "react"
 
 interface ActivityTimelineProps {
-  items: UserActivityItem[];
-  isLoading?: boolean;
+  items: UserActivityItem[]
+  isLoading?: boolean
 }
 
 const ICON_MAP: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {
@@ -35,64 +43,96 @@ const ICON_MAP: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {
   issue_create: AlertCircle,
   profile_update: Settings,
   avatar_upload: ImageIcon,
-};
+}
 
-export const ActivityTimeline = memo(function ActivityTimeline({ items, isLoading }: ActivityTimelineProps) {
+export const ActivityTimeline = memo(function ActivityTimeline({
+  items,
+  isLoading,
+}: ActivityTimelineProps) {
   if (isLoading) {
     return (
-      <div className="flow-root">
-        <ul className="space-y-0">
-          {[...Array(6)].map((_, i) => (
-            <li key={i} className="flex items-start gap-3 py-3 border-b border-[0.5px] last:border-0" style={{ borderColor: "var(--border-subtle)" }}>
-              <Skeleton className="w-7 h-7 rounded-full shrink-0 mt-0.5" />
-              <div className="flex flex-col flex-1 gap-2">
-                <Skeleton className="h-3 w-full" />
-                <Skeleton className="h-2 w-24" />
-              </div>
-            </li>
-          ))}
-        </ul>
+      <div className="space-y-0">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="flex items-start gap-3 py-3">
+            <Skeleton className="mt-0.5 size-7 shrink-0 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-3 w-full" />
+              <Skeleton className="h-2.5 w-24" />
+            </div>
+          </div>
+        ))}
       </div>
-    );
+    )
   }
 
   if (items.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center py-12" style={{ color: "var(--text-tertiary)" }}>
-        <History className="w-12 h-12 mb-4 opacity-20" />
-        <p className="text-[13px]">No recent activity</p>
-      </div>
-    );
+      <Empty className="border-[var(--border-subtle)] bg-[var(--surface-secondary)]">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <History />
+          </EmptyMedia>
+          <EmptyTitle>No recent activity</EmptyTitle>
+          <EmptyDescription>暂无最近动态</EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    )
   }
 
   return (
-    <div className="flow-root">
-      <ul className="space-y-0">
-        {items.map((item) => {
-          const Icon = ICON_MAP[item.action] || History;
-          return (
-            <li key={item.id} className="flex items-start gap-3 py-3 border-b border-[0.5px] last:border-0" style={{ borderColor: "var(--border-subtle)" }}>
+    <div className="space-y-0">
+      {items.map((item, index) => {
+        const Icon = ICON_MAP[item.action] || History
+        return (
+          <div key={item.id}>
+            <div className="flex items-start gap-3 py-3">
               <div
-                className="w-7 h-7 rounded-full flex items-center justify-center shrink-0 mt-0.5"
-                style={{ backgroundColor: "var(--accent-bg)", color: "var(--accent)" }}
+                className="flex size-7 shrink-0 items-center justify-center rounded-full"
+                style={{
+                  backgroundColor: "var(--accent-bg)",
+                  color: "var(--accent)",
+                }}
               >
-                <Icon className="h-[13px] w-[13px]" aria-hidden="true" />
+                <Icon className="size-3.5" aria-hidden="true" />
               </div>
-              <div className="flex flex-col flex-1 min-w-0">
-                <p className="text-[12px] leading-relaxed" style={{ color: "var(--text-secondary)" }}>
-                  <span style={{ color: "var(--text-primary)", fontWeight: 500 }}>{item.title}</span>
+              <div className="min-w-0 flex-1">
+                <p
+                  className="text-[12px] leading-relaxed"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  <span
+                    style={{ color: "var(--text-primary)", fontWeight: 500 }}
+                  >
+                    {item.title}
+                  </span>
                   {item.resource_name && (
-                    <> in <span className="font-semibold" style={{ color: "var(--text-primary)" }}>{item.resource_name}</span></>
+                    <>
+                      {" "}
+                      in{" "}
+                      <span
+                        className="font-semibold"
+                        style={{ color: "var(--text-primary)" }}
+                      >
+                        {item.resource_name}
+                      </span>
+                    </>
                   )}
                 </p>
-                <time className="text-[11px] mt-1" style={{ color: "var(--text-tertiary)" }} dateTime={item.created_at}>
-                  {formatDistanceToNow(new Date(item.created_at), { addSuffix: true })}
+                <time
+                  className="mt-1 text-[11px]"
+                  style={{ color: "var(--text-tertiary)" }}
+                  dateTime={item.created_at}
+                >
+                  {formatDistanceToNow(new Date(item.created_at), {
+                    addSuffix: true,
+                  })}
                 </time>
               </div>
-            </li>
-          );
-        })}
-      </ul>
+            </div>
+            {index < items.length - 1 && <Separator className="opacity-60" />}
+          </div>
+        )
+      })}
     </div>
-  );
-});
+  )
+})
diff --git a/src/app/me/components/NotificationList.tsx b/src/app/me/components/NotificationList.tsx
index e3da6f3..9dbe043 100644
--- a/src/app/me/components/NotificationList.tsx
+++ b/src/app/me/components/NotificationList.tsx
@@ -1,9 +1,22 @@
-import { useState } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { notificationList, notificationMarkRead, notificationMarkAllRead } from "@/client/api";
-import type { NotificationResponse } from "@/client/model";
-import { Bell, CheckCheck, Mail, MailOpen, Loader2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { useState } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import {
+  notificationList,
+  notificationMarkRead,
+  notificationMarkAllRead,
+} from "@/client/api"
+import type { NotificationResponse } from "@/client/model"
+import { Bell, CheckCheck, Mail, MailOpen, Loader2 } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
 
 const NOTIFICATION_TYPE_LABELS: Record<string, string> = {
   mention: "Mention",
@@ -13,153 +26,211 @@ const NOTIFICATION_TYPE_LABELS: Record<string, string> = {
   room_deleted: "Room Deleted",
   system_announcement: "Announcement",
   project_invitation: "Project Invitation",
-};
+}
 
-function NotificationItem({ notification }: { notification: NotificationResponse }) {
-  const queryClient = useQueryClient();
+function NotificationItem({
+  notification,
+}: {
+  notification: NotificationResponse
+}) {
+  const queryClient = useQueryClient()
   const markReadMutation = useMutation({
     mutationFn: () => notificationMarkRead(notification.id),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["notificationList"] });
+      queryClient.invalidateQueries({ queryKey: ["notificationList"] })
     },
-  });
+  })
 
   return (
-    <div
-      className="p-4 rounded-xl border-[0.5px] transition-all"
+    <button
+      type="button"
+      className="w-full rounded-2xl border text-left transition-all hover:-translate-y-0.5"
       style={{
-        backgroundColor: notification.is_read ? "var(--surface-secondary)" : "var(--surface-tertiary)",
+        backgroundColor: notification.is_read
+          ? "var(--surface-secondary)"
+          : "var(--surface-elevated)",
         borderColor: "var(--border-subtle)",
-        opacity: notification.is_read ? 0.75 : 1,
+        opacity: notification.is_read ? 0.85 : 1,
       }}
       onClick={() => {
-        if (!notification.is_read) {
-          markReadMutation.mutate();
-        }
+        if (!notification.is_read) markReadMutation.mutate()
       }}
     >
-      <div className="flex items-start gap-3">
-        <div
-          className="mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
-          style={{ backgroundColor: notification.is_read ? "var(--surface-ground)" : "var(--accent)" }}
-        >
-          {notification.is_read ? (
-            <MailOpen className="w-4 h-4" style={{ color: "var(--text-muted)" }} />
-          ) : (
-            <Mail className="w-4 h-4 text-white" />
-          )}
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-0.5">
-            <span className="text-[12px] font-medium" style={{ color: "var(--text-primary)" }}>
-              {NOTIFICATION_TYPE_LABELS[notification.notification_type] || notification.notification_type}
-            </span>
-            {!notification.is_read && (
-              <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ backgroundColor: "var(--accent)" }} />
+      <div className="p-4">
+        <div className="flex items-start gap-3">
+          <div
+            className="flex size-8 shrink-0 items-center justify-center rounded-xl"
+            style={{
+              backgroundColor: notification.is_read
+                ? "var(--surface-ground)"
+                : "var(--accent)",
+            }}
+          >
+            {notification.is_read ? (
+              <MailOpen
+                className="size-4"
+                style={{ color: "var(--text-muted)" }}
+              />
+            ) : (
+              <Mail className="size-4 text-white" />
             )}
-            <span className="text-[11px] ml-auto shrink-0" style={{ color: "var(--text-tertiary)" }}>
-              {new Date(notification.created_at).toLocaleString()}
-            </span>
           </div>
-          <p className="text-[13px] font-medium truncate" style={{ color: "var(--text-primary)" }}>
-            {notification.title}
-          </p>
-          {notification.content && (
-            <p className="text-[12px] mt-1 line-clamp-2" style={{ color: "var(--text-secondary)" }}>
-              {notification.content}
-            </p>
-          )}
-          {(notification.room || notification.project) && (
-            <div className="flex items-center gap-2 mt-2 text-[11px]" style={{ color: "var(--text-tertiary)" }}>
-              {notification.project && <span>Project: {notification.project}</span>}
-              {notification.room && <span>Room: {notification.room}</span>}
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <span
+                className="text-[12px] font-medium"
+                style={{ color: "var(--text-primary)" }}
+              >
+                {NOTIFICATION_TYPE_LABELS[notification.notification_type] ||
+                  notification.notification_type}
+              </span>
+              {!notification.is_read && (
+                <span
+                  className="size-1.5 rounded-full"
+                  style={{ backgroundColor: "var(--accent)" }}
+                />
+              )}
+              <span
+                className="ml-auto text-[11px]"
+                style={{ color: "var(--text-tertiary)" }}
+              >
+                {new Date(notification.created_at).toLocaleString()}
+              </span>
             </div>
-          )}
+            <p
+              className="mt-1 truncate text-[13px] font-medium"
+              style={{ color: "var(--text-primary)" }}
+            >
+              {notification.title}
+            </p>
+            {notification.content && (
+              <p
+                className="mt-1 line-clamp-2 text-[12px]"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                {notification.content}
+              </p>
+            )}
+            {(notification.room || notification.project) && (
+              <div className="mt-3 flex flex-wrap gap-2">
+                {notification.project && (
+                  <Badge variant="outline">{`Project: ${notification.project}`}</Badge>
+                )}
+                {notification.room && (
+                  <Badge variant="outline">{`Room: ${notification.room}`}</Badge>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  );
+    </button>
+  )
 }
 
 export function NotificationList() {
-  const queryClient = useQueryClient();
-  const [onlyUnread, setOnlyUnread] = useState(false);
+  const queryClient = useQueryClient()
+  const [onlyUnread, setOnlyUnread] = useState(false)
 
   const { data, isLoading, isError } = useQuery({
     queryKey: ["notificationList", onlyUnread],
-    queryFn: () => notificationList({ only_unread: onlyUnread || undefined, limit: 50 }),
-  });
+    queryFn: () =>
+      notificationList({ only_unread: onlyUnread || undefined, limit: 50 }),
+  })
 
   const markAllReadMutation = useMutation({
     mutationFn: () => notificationMarkAllRead(),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["notificationList"] });
+      queryClient.invalidateQueries({ queryKey: ["notificationList"] })
     },
-  });
+  })
 
   if (isLoading) {
     return (
       <div className="flex justify-center py-12">
-        <Loader2 className="w-6 h-6 animate-spin" style={{ color: "var(--accent)" }} />
+        <Loader2
+          className="size-6 animate-spin"
+          style={{ color: "var(--accent)" }}
+        />
       </div>
-    );
+    )
   }
 
   if (isError) {
     return (
-      <div className="text-center py-12" style={{ color: "var(--text-muted)" }}>
-        <p>Failed to load notifications</p>
-      </div>
-    );
+      <Empty className="border-[var(--border-subtle)] bg-[var(--surface-secondary)]">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <Bell />
+          </EmptyMedia>
+          <EmptyTitle>通知加载失败</EmptyTitle>
+          <EmptyDescription>请刷新页面或检查网络连接。</EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    )
   }
 
-  const notifications = data?.data?.data?.notifications ?? [];
-  const unreadCount = data?.data?.data?.unread_count ?? 0;
+  const notifications = data?.data?.data?.notifications ?? []
+  const unreadCount = data?.data?.data?.unread_count ?? 0
 
   return (
     <div className="space-y-4">
-      {/* Toolbar */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Bell className="w-4 h-4" style={{ color: "var(--text-tertiary)" }} />
-          <span className="text-[13px]" style={{ color: "var(--text-secondary)" }}>
-            {unreadCount > 0 ? `${unreadCount} unread` : "All read"}
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            className="text-[12px] px-2.5 py-1 rounded-md transition-colors"
-            style={{
-              color: onlyUnread ? "var(--accent)" : "var(--text-secondary)",
-              backgroundColor: onlyUnread ? "color-mix(in srgb, var(--accent) 10%, transparent)" : "transparent",
-            }}
-            onClick={() => setOnlyUnread(!onlyUnread)}
-          >
-            Unread only
-          </button>
-          {unreadCount > 0 && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-[12px] h-7 gap-1"
-              onClick={() => markAllReadMutation.mutate()}
-              disabled={markAllReadMutation.isPending}
+      <Card>
+        <CardContent className="flex flex-wrap items-center justify-between gap-3 pt-4">
+          <div className="flex items-center gap-2">
+            <Bell
+              className="size-4"
+              style={{ color: "var(--text-tertiary)" }}
+            />
+            <span
+              className="text-[13px]"
+              style={{ color: "var(--text-secondary)" }}
             >
-              <CheckCheck className="w-3.5 h-3.5" />
-              Mark all read
-            </Button>
-          )}
-        </div>
-      </div>
+              {unreadCount > 0 ? `${unreadCount} unread` : "All read"}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              className="rounded-full px-3 py-1.5 text-[12px] transition-colors"
+              style={{
+                color: onlyUnread ? "var(--accent)" : "var(--text-secondary)",
+                backgroundColor: onlyUnread
+                  ? "color-mix(in srgb, var(--accent) 10%, transparent)"
+                  : "transparent",
+              }}
+              onClick={() => setOnlyUnread(!onlyUnread)}
+            >
+              Unread only
+            </button>
+            {unreadCount > 0 && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 gap-1.5 rounded-full text-[12px]"
+                onClick={() => markAllReadMutation.mutate()}
+                disabled={markAllReadMutation.isPending}
+              >
+                <CheckCheck className="size-3.5" />
+                Mark all read
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
 
       {notifications.length === 0 ? (
-        <div className="text-center py-16" style={{ color: "var(--text-muted)" }}>
-          <Bell className="w-10 h-10 mx-auto mb-3" style={{ color: "var(--text-tertiary)" }} />
-          <p className="text-[14px] font-medium">No notifications</p>
-          <p className="text-[12px] mt-1">
-            {onlyUnread ? "No unread notifications" : "You're all caught up"}
-          </p>
-        </div>
+        <Empty className="border-[var(--border-subtle)] bg-[var(--surface-secondary)] py-14">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Bell />
+            </EmptyMedia>
+            <EmptyTitle>暂无通知</EmptyTitle>
+            <EmptyDescription>
+              {onlyUnread ? "没有未读通知" : "你已经查看完了"}
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
       ) : (
         <div className="space-y-2">
           {notifications.map((n) => (
@@ -168,5 +239,5 @@ export function NotificationList() {
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/src/app/me/components/ProfileHeader.tsx b/src/app/me/components/ProfileHeader.tsx
index 7d5c9bc..5a4e275 100644
--- a/src/app/me/components/ProfileHeader.tsx
+++ b/src/app/me/components/ProfileHeader.tsx
@@ -1,156 +1,234 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { Link as LinkIcon, Building2, Calendar } from "lucide-react";
-import type { UserInfoExternal } from "@/client/model";
-import { format } from "date-fns";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useUserFollowerCountQuery, useUserStarsQuery, useFollowMutation, useUnfollowMutation } from "@/hooks/useUserQuery";
-import { t } from "@/i18n/T";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { Link as LinkIcon, Building2, Calendar } from "lucide-react"
+import type { UserInfoExternal } from "@/client/model"
+import { format } from "date-fns"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  useUserFollowerCountQuery,
+  useUserStarsQuery,
+  useFollowMutation,
+  useUnfollowMutation,
+} from "@/hooks/useUserQuery"
+import { t } from "@/i18n/T"
 
 interface ProfileHeaderProps {
-  user: UserInfoExternal | null | undefined;
-  isMe: boolean;
-  isLoading?: boolean;
-  starsCount?: number;
-  followerCount?: number;
+  user: UserInfoExternal | null | undefined
+  isMe: boolean
+  isLoading?: boolean
+  starsCount?: number
+  followerCount?: number
 }
 
-export function ProfileHeader({ user, isMe, isLoading, starsCount: starsCountProp, followerCount: followerCountProp }: ProfileHeaderProps) {
-  const { data: starsData } = useUserStarsQuery(user?.username || "");
-  const { data: followerCountApi } = useUserFollowerCountQuery(user?.username || "");
-  const followMutation = useFollowMutation();
-  const unfollowMutation = useUnfollowMutation();
+function StatBlock({
+  value,
+  label,
+}: {
+  value: string | number
+  label: string
+}) {
+  return (
+    <div className="rounded-xl bg-[var(--surface-ground)] px-3 py-2 text-center ring-1 ring-[var(--border-subtle)]">
+      <div
+        className="text-[15px] font-semibold"
+        style={{ color: "var(--text-primary)" }}
+      >
+        {value}
+      </div>
+      <div
+        className="text-[10px] tracking-[0.22em] uppercase"
+        style={{ color: "var(--text-tertiary)" }}
+      >
+        {label}
+      </div>
+    </div>
+  )
+}
 
-  const starsCount = starsCountProp ?? starsData?.total ?? 0;
-  const followerCount = followerCountProp ?? followerCountApi ?? 0;
+export function ProfileHeader({
+  user,
+  isMe,
+  isLoading,
+  starsCount: starsCountProp,
+  followerCount: followerCountProp,
+}: ProfileHeaderProps) {
+  const { data: starsData } = useUserStarsQuery(user?.username || "")
+  const { data: followerCountApi } = useUserFollowerCountQuery(
+    user?.username || ""
+  )
+  const followMutation = useFollowMutation()
+  const unfollowMutation = useUnfollowMutation()
+
+  const starsCount = starsCountProp ?? starsData?.total ?? 0
+  const followerCount = followerCountProp ?? followerCountApi ?? 0
 
   const handleFollow = async () => {
-    if (!user) return;
+    if (!user) return
     try {
-      await followMutation.mutateAsync(user.username);
+      await followMutation.mutateAsync(user.username)
     } catch (err) {
-      console.error("Follow failed:", err);
+      console.error("Follow failed:", err)
     }
-  };
+  }
 
   const handleUnfollow = async () => {
-    if (!user) return;
+    if (!user) return
     try {
-      await unfollowMutation.mutateAsync(user.username);
+      await unfollowMutation.mutateAsync(user.username)
     } catch (err) {
-      console.error("Unfollow failed:", err);
+      console.error("Unfollow failed:", err)
     }
-  };
+  }
+
   if (isLoading || !user) {
     return (
-      <div className="rounded-xl p-6 mb-6 border-[0.5px]" style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}>
-        <div className="flex flex-col md:flex-row gap-6 items-start">
-          <Skeleton className="w-16 h-16 md:w-20 md:h-20 rounded-xl" />
-          <div className="flex-1 min-w-0 space-y-4">
-            <div className="space-y-2">
-              <Skeleton className="h-6 w-48" />
-              <Skeleton className="h-4 w-32" />
-            </div>
-            <div className="flex gap-6">
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="h-4 w-24" />
-            </div>
-            <div className="flex gap-8 pt-4 border-t" style={{ borderColor: "var(--border-subtle)" }}>
-              {[...Array(4)].map((_, i) => (
-                <div key={i} className="space-y-1">
-                  <Skeleton className="h-5 w-10 mx-auto" />
-                  <Skeleton className="h-3 w-16 mx-auto" />
-                </div>
-              ))}
+      <Card className="mb-6">
+        <CardContent className="pt-6">
+          <div className="flex flex-col gap-6 md:flex-row md:items-start">
+            <Skeleton className="size-20 rounded-2xl" />
+            <div className="min-w-0 flex-1 space-y-4">
+              <div className="space-y-2">
+                <Skeleton className="h-6 w-48" />
+                <Skeleton className="h-4 w-32" />
+              </div>
+              <div className="flex flex-wrap gap-3">
+                <Skeleton className="h-4 w-28" />
+                <Skeleton className="h-4 w-28" />
+              </div>
+              <Separator />
+              <div className="grid gap-3 sm:grid-cols-4">
+                {[...Array(4)].map((_, i) => (
+                  <Skeleton key={i} className="h-16 rounded-xl" />
+                ))}
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-    );
+        </CardContent>
+      </Card>
+    )
   }
 
   return (
-    <div className="rounded-xl p-6 mb-6 border-[0.5px]" style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}>
-      <div className="flex flex-col md:flex-row gap-6 items-start">
-        <Avatar className="w-16 h-16 md:w-20 md:h-20 rounded-xl border-[0.5px] shadow-sm" style={{ borderColor: "var(--border-subtle)" }}>
-          <AvatarImage src={user.avatar_url || undefined} alt={user.username} />
-          <AvatarFallback className="text-2xl rounded-xl font-medium" style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}>
-            {user.username[0].toUpperCase()}
-          </AvatarFallback>
-        </Avatar>
-
-        <div className="flex-1 min-w-0">
-          <div className="flex flex-wrap items-center justify-between gap-4 mb-1">
-            <div>
-              <h1 className="text-xl font-semibold" style={{ color: "var(--text-primary)" }}>
-                {user.display_name || user.username}
-              </h1>
-              <p className="text-[13px]" style={{ color: "var(--text-secondary)" }}>
-                @{user.username}
-              </p>
-            </div>
-            {!isMe && (
-              <Button
-                variant={user.is_subscribe ? "outline" : "default"}
-                className={user.is_subscribe ? "" : "text-[var(--accent-fg)]"}
-                style={user.is_subscribe ? {} : { backgroundColor: "var(--accent)" }}
-                onClick={user.is_subscribe ? handleUnfollow : handleFollow}
-                disabled={followMutation.isPending || unfollowMutation.isPending}
+    <Card className="mb-6">
+      <CardHeader className="gap-4">
+        <div className="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
+          <div className="flex min-w-0 flex-1 items-start gap-4">
+            <Avatar className="size-20 rounded-2xl ring-1 ring-[var(--border-subtle)]">
+              <AvatarImage
+                src={user.avatar_url || undefined}
+                alt={user.username}
+              />
+              <AvatarFallback
+                className="rounded-2xl text-2xl font-medium"
+                style={{
+                  backgroundColor: "var(--accent)",
+                  color: "var(--accent-fg)",
+                }}
               >
-                {followMutation.isPending || unfollowMutation.isPending
-                  ? "..."
-                  : user.is_subscribe ? t("me.profile.unfollow") : t("me.profile.follow")}
-              </Button>
-            )}
+                {user.username[0].toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-center gap-3">
+                <CardTitle className="text-[22px] leading-tight">
+                  {user.display_name || user.username}
+                </CardTitle>
+                {isMe && <Badge variant="secondary">Me</Badge>}
+              </div>
+              <CardDescription className="mt-1 text-[13px]">
+                @{user.username}
+              </CardDescription>
+
+              <div
+                className="mt-4 flex flex-wrap gap-2 text-[12px]"
+                style={{ color: "var(--text-tertiary)" }}
+              >
+                <div className="flex items-center gap-1.5 rounded-full bg-[var(--surface-ground)] px-3 py-1 ring-1 ring-[var(--border-subtle)]">
+                  <Calendar className="size-3.5" />
+                  <span>
+                    {t("me.profile.joined")}{" "}
+                    {format(new Date(user.created_at), "MMM yyyy")}
+                  </span>
+                </div>
+                {user.organization && (
+                  <div className="flex items-center gap-1.5 rounded-full bg-[var(--surface-ground)] px-3 py-1 ring-1 ring-[var(--border-subtle)]">
+                    <Building2 className="size-3.5" />
+                    <span>{user.organization}</span>
+                  </div>
+                )}
+                {user.website_url && (
+                  <a
+                    href={
+                      user.website_url.startsWith("http")
+                        ? user.website_url
+                        : `https://${user.website_url}`
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1.5 rounded-full bg-[var(--surface-ground)] px-3 py-1 ring-1 ring-[var(--border-subtle)] transition-colors hover:text-[var(--text-primary)]"
+                    style={{ color: "var(--text-info)" }}
+                  >
+                    <LinkIcon className="size-3.5" />
+                    <span className="truncate">
+                      {user.website_url.replace(/^https?:\/\//, "")}
+                    </span>
+                  </a>
+                )}
+              </div>
+            </div>
           </div>
 
-          <div className="flex flex-wrap gap-x-6 gap-y-2 mt-3 text-[12px]" style={{ color: "var(--text-tertiary)" }}>
-            <div className="flex items-center gap-1.5">
-              <Calendar className="w-[14px] h-[14px]" />
-              <span>{t("me.profile.joined")} {format(new Date(user.user_uid === "00000000-0000-0000-0000-000000000000" ? new Date() : new Date()), "MMM yyyy")}</span>
-            </div>
-            {user.organization && (
-              <div className="flex items-center gap-1.5">
-                <Building2 className="w-[14px] h-[14px]" />
-                <span>{user.organization}</span>
-              </div>
-            )}
-            {user.website_url && (
-              <div className="flex items-center gap-1.5">
-                <LinkIcon className="w-[14px] h-[14px]" />
-                <a
-                  href={user.website_url.startsWith("http") ? user.website_url : `https://${user.website_url}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:underline"
-                  style={{ color: "var(--text-info)" }}
-                >
-                  {user.website_url.replace(/^https?:\/\//, "")}
-                </a>
-              </div>
-            )}
-          </div>
-
-          <div className="flex gap-8 mt-4 pt-4 border-t" style={{ borderColor: "var(--border-subtle)" }}>
-            <div className="text-center">
-              <p className="text-[15px] font-semibold" style={{ color: "var(--text-primary)" }}>{user.total_projects}</p>
-              <p className="text-[10px] uppercase tracking-wider font-medium" style={{ color: "var(--text-tertiary)" }}>{t("me.profile.projects")}</p>
-            </div>
-            <div className="text-center">
-              <p className="text-[15px] font-semibold" style={{ color: "var(--text-primary)" }}>{user.total_repos}</p>
-              <p className="text-[10px] uppercase tracking-wider font-medium" style={{ color: "var(--text-tertiary)" }}>{t("me.profile.repos")}</p>
-            </div>
-            <div className="text-center">
-              <p className="text-[15px] font-semibold" style={{ color: "var(--text-primary)" }}>{starsCount}</p>
-              <p className="text-[10px] uppercase tracking-wider font-medium" style={{ color: "var(--text-tertiary)" }}>{t("me.profile.stars")}</p>
-            </div>
-            <div className="text-center cursor-pointer hover:opacity-70 transition-opacity" onClick={() => window.location.href = "/me/followers"}>
-              <p className="text-[15px] font-semibold" style={{ color: "var(--text-primary)" }}>{followerCount}</p>
-              <p className="text-[10px] uppercase tracking-wider font-medium" style={{ color: "var(--text-tertiary)" }}>{t("me.profile.followers")}</p>
-            </div>
-          </div>
+          {!isMe && (
+            <Button
+              variant={user.is_subscribe ? "outline" : "default"}
+              className={user.is_subscribe ? "" : "text-[var(--accent-fg)]"}
+              style={
+                user.is_subscribe ? {} : { backgroundColor: "var(--accent)" }
+              }
+              onClick={user.is_subscribe ? handleUnfollow : handleFollow}
+              disabled={followMutation.isPending || unfollowMutation.isPending}
+            >
+              {followMutation.isPending || unfollowMutation.isPending
+                ? "..."
+                : user.is_subscribe
+                  ? t("me.profile.unfollow")
+                  : t("me.profile.follow")}
+            </Button>
+          )}
         </div>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
+      </CardHeader>
+
+      <CardContent className="pb-6">
+        <Separator />
+        <div className="mt-4 grid grid-cols-2 gap-3 lg:grid-cols-4">
+          <StatBlock
+            value={user.total_projects}
+            label={t("me.profile.projects")}
+          />
+          <StatBlock value={user.total_repos} label={t("me.profile.repos")} />
+          <StatBlock value={starsCount} label={t("me.profile.stars")} />
+          <button
+            type="button"
+            onClick={() => (window.location.href = "/me/followers")}
+            className="rounded-xl text-left transition-transform hover:-translate-y-0.5"
+          >
+            <StatBlock
+              value={followerCount}
+              label={t("me.profile.followers")}
+            />
+          </button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/app/me/components/ProjectList.tsx b/src/app/me/components/ProjectList.tsx
index 3dd28e7..67d60bb 100644
--- a/src/app/me/components/ProjectList.tsx
+++ b/src/app/me/components/ProjectList.tsx
@@ -1,83 +1,129 @@
-import { useNavigate } from "react-router-dom";
-import { Users, Lock } from "lucide-react";
-import type { UserProjectInfo } from "@/client/model";
-import { Skeleton } from "@/components/ui/skeleton";
+import { useNavigate } from "react-router-dom"
+import { Users, Lock } from "lucide-react"
+import type { UserProjectInfo } from "@/client/model"
+import { Card } from "@/components/ui/card"
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+import { Skeleton } from "@/components/ui/skeleton"
+import { t } from "@/i18n/T"
 
 interface ProjectListProps {
-  projects: UserProjectInfo[];
-  isLoading?: boolean;
+  projects: UserProjectInfo[]
+  isLoading?: boolean
 }
 
 export function ProjectList({ projects, isLoading }: ProjectListProps) {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   if (isLoading) {
     return (
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <div className="grid gap-3 md:grid-cols-2">
         {[...Array(4)].map((_, i) => (
-          <div key={i} className="p-3 rounded-xl border-[0.5px]" style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}>
-            <div className="flex items-center gap-3 mb-2">
-              <Skeleton className="w-8 h-8 rounded-lg" />
-              <div className="flex-1 space-y-1.5">
-                <Skeleton className="h-3 w-24" />
-                <Skeleton className="h-2 w-16" />
+          <Card key={i} size="sm">
+            <div className="space-y-3 px-3">
+              <div className="flex items-center gap-3">
+                <Skeleton className="size-8 rounded-lg" />
+                <div className="min-w-0 flex-1 space-y-1.5">
+                  <Skeleton className="h-3 w-24" />
+                  <Skeleton className="h-2 w-16" />
+                </div>
+              </div>
+              <Skeleton className="h-3 w-full" />
+              <Skeleton className="h-3 w-2/3" />
+              <div className="flex items-center gap-4 pt-1">
+                <Skeleton className="h-2.5 w-20" />
+                <Skeleton className="h-2.5 w-16" />
               </div>
             </div>
-            <Skeleton className="h-3 w-full mb-1" />
-            <Skeleton className="h-3 w-2/3" />
-            <div className="flex items-center gap-4 mt-2">
-              <Skeleton className="h-2 w-20" />
-              <Skeleton className="h-2 w-16" />
-            </div>
-          </div>
+          </Card>
         ))}
       </div>
-    );
+    )
   }
 
   if (projects.length === 0) {
     return (
-      <div className="text-center py-12" style={{ color: "var(--text-muted)" }}>
-        <p>No projects found</p>
-      </div>
-    );
+      <Empty className="border-[var(--border-subtle)] bg-[var(--surface-secondary)]">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <Users />
+          </EmptyMedia>
+          <EmptyTitle>{t("me.top_projects")}</EmptyTitle>
+          <EmptyDescription>暂无项目</EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    )
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+    <div className="grid gap-3 md:grid-cols-2">
       {projects.map((project) => (
-        <div
+        <Card
           key={project.uid}
-          className="p-3 rounded-xl border-[0.5px] transition-all cursor-pointer hover:opacity-80"
-          style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}
+          size="sm"
+          className="cursor-pointer transition-all hover:-translate-y-0.5 hover:ring-[var(--accent)]/20"
           onClick={() => navigate(`/${project.name}`)}
         >
-          <div className="flex items-center gap-3 mb-2">
-            <div className="w-8 h-8 rounded-lg flex items-center justify-center text-[11px] font-bold shrink-0" style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}>
-              {project.display_name[0].toUpperCase()}
-            </div>
-            <div className="flex-1 min-w-0">
+          <div className="px-3">
+            <div className="flex items-start gap-3">
+              <div
+                className="flex size-8 shrink-0 items-center justify-center rounded-lg text-[11px] font-semibold"
+                style={{
+                  backgroundColor: "var(--accent)",
+                  color: "var(--accent-fg)",
+                }}
+              >
+                {project.display_name[0].toUpperCase()}
+              </div>
+              <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
-                    <h3 className="text-[12px] font-semibold truncate" style={{ color: "var(--text-primary)" }}>
-                        {project.display_name}
-                    </h3>
-                    {!project.is_public && <Lock className="w-3 h-3" style={{ color: "var(--text-tertiary)" }} />}
+                  <h3
+                    className="truncate text-[13px] font-semibold"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    {project.display_name}
+                  </h3>
+                  {!project.is_public && (
+                    <Lock
+                      className="size-3.5"
+                      style={{ color: "var(--text-tertiary)" }}
+                    />
+                  )}
                 </div>
-                <p className="text-[11px]" style={{ color: "var(--text-tertiary)" }}>@{project.name}</p>
+                <p
+                  className="text-[11px]"
+                  style={{ color: "var(--text-tertiary)" }}
+                >
+                  @{project.name}
+                </p>
+              </div>
+            </div>
+
+            <p
+              className="mt-3 line-clamp-2 min-h-[2.5rem] text-[12px]"
+              style={{ color: "var(--text-secondary)" }}
+            >
+              {project.description || "暂无描述"}
+            </p>
+
+            <div
+              className="mt-3 flex items-center gap-4 text-[11px]"
+              style={{ color: "var(--text-tertiary)" }}
+            >
+              <div className="flex items-center gap-1">
+                <Users className="size-3" />
+                <span>{project.member_count} members</span>
+              </div>
+              <span>{new Date(project.created_at).toLocaleDateString()}</span>
             </div>
           </div>
-          <p className="text-[11px] line-clamp-2 min-h-[2.5rem]" style={{ color: "var(--text-secondary)" }}>
-            {project.description || "No description provided"}
-          </p>
-          <div className="flex items-center gap-4 mt-2 text-[11px]" style={{ color: "var(--text-tertiary)" }}>
-            <div className="flex items-center gap-1">
-              <Users className="w-3 h-3" />
-              <span>{project.member_count} members</span>
-            </div>
-            <span>{new Date(project.created_at).toLocaleDateString()}</span>
-          </div>
-        </div>
+        </Card>
       ))}
     </div>
-  );
+  )
 }
diff --git a/src/app/me/components/RepoList.tsx b/src/app/me/components/RepoList.tsx
index 002b92d..ad7daed 100644
--- a/src/app/me/components/RepoList.tsx
+++ b/src/app/me/components/RepoList.tsx
@@ -1,75 +1,121 @@
-import { useNavigate } from "react-router-dom";
-import { GitBranch, Lock } from "lucide-react";
-import type { UserRepoInfo } from "@/client/model";
-import { Skeleton } from "@/components/ui/skeleton";
+import { useNavigate } from "react-router-dom"
+import { GitBranch, Lock } from "lucide-react"
+import type { UserRepoInfo } from "@/client/model"
+import { Card } from "@/components/ui/card"
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+import { Skeleton } from "@/components/ui/skeleton"
+import { t } from "@/i18n/T"
 
 interface RepoListProps {
-  repos: UserRepoInfo[];
-  isLoading?: boolean;
+  repos: UserRepoInfo[]
+  isLoading?: boolean
 }
 
 export function RepoList({ repos, isLoading }: RepoListProps) {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   if (isLoading) {
     return (
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid gap-3 md:grid-cols-2">
         {[...Array(4)].map((_, i) => (
-          <div key={i} className="p-4 rounded-xl border-[0.5px]" style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}>
-            <div className="flex items-center gap-2 mb-2">
-              <Skeleton className="w-4 h-4 rounded-full" />
-              <Skeleton className="h-4 w-32" />
+          <Card key={i} size="sm">
+            <div className="space-y-3 px-3">
+              <div className="flex items-center gap-2">
+                <Skeleton className="size-4 rounded-full" />
+                <Skeleton className="h-4 w-32" />
+              </div>
+              <Skeleton className="h-3 w-full" />
+              <Skeleton className="h-3 w-2/3" />
+              <div className="flex items-center gap-4 pt-1">
+                <Skeleton className="h-3 w-16" />
+                <Skeleton className="h-3 w-24" />
+              </div>
             </div>
-            <Skeleton className="h-3 w-full mb-1" />
-            <Skeleton className="h-3 w-2/3" />
-            <div className="flex items-center gap-4 mt-4">
-              <Skeleton className="h-3 w-16" />
-              <Skeleton className="h-3 w-24" />
-            </div>
-          </div>
+          </Card>
         ))}
       </div>
-    );
+    )
   }
 
   if (repos.length === 0) {
     return (
-      <div className="text-center py-12" style={{ color: "var(--text-muted)" }}>
-        <p>No repositories found</p>
-      </div>
-    );
+      <Empty className="border-[var(--border-subtle)] bg-[var(--surface-secondary)]">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <GitBranch />
+          </EmptyMedia>
+          <EmptyTitle>{t("me.recent_repos")}</EmptyTitle>
+          <EmptyDescription>暂无仓库</EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    )
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div className="grid gap-3 md:grid-cols-2">
       {repos.map((repo) => (
-        <div
+        <Card
           key={repo.uid}
-          className="p-4 rounded-xl border-[0.5px] transition-all cursor-pointer hover:opacity-80"
-          style={{ backgroundColor: "var(--surface-secondary)", borderColor: "var(--border-subtle)" }}
-          onClick={() => navigate(`/${repo.project_name}/repo/${repo.repo_name}`)}
+          size="sm"
+          className="cursor-pointer transition-all hover:-translate-y-0.5 hover:ring-[var(--accent)]/20"
+          onClick={() =>
+            navigate(`/${repo.project_name}/repo/${repo.repo_name}`)
+          }
         >
-          <div className="flex items-center gap-2 mb-1.5">
-            <GitBranch className="w-[14px] h-[14px]" style={{ color: "var(--text-tertiary)" }} />
-            <h3 className="text-[13px] font-semibold truncate" style={{ color: "var(--text-info)" }}>
-              {repo.repo_name}
-            </h3>
-            {repo.is_private && (
-              <Lock className="w-3 h-3" style={{ color: "var(--text-tertiary)" }} />
-            )}
-          </div>
-          <p className="text-[12px] line-clamp-2 min-h-[2.5rem]" style={{ color: "var(--text-secondary)" }}>
-            {repo.description || "No description provided"}
-          </p>
-          <div className="flex items-center gap-4 mt-3 text-[11px]" style={{ color: "var(--text-tertiary)" }}>
-            <div className="flex items-center gap-1.5">
-              <div className="w-2 h-2 rounded-full" style={{ backgroundColor: "var(--accent)" }} />
-              <span className="font-medium" style={{ color: "var(--text-secondary)" }}>{repo.default_branch}</span>
+          <div className="px-3">
+            <div className="flex items-center gap-2">
+              <GitBranch
+                className="size-4"
+                style={{ color: "var(--text-tertiary)" }}
+              />
+              <h3
+                className="truncate text-[13px] font-semibold"
+                style={{ color: "var(--text-info)" }}
+              >
+                {repo.repo_name}
+              </h3>
+              {repo.is_private && (
+                <Lock
+                  className="size-3.5"
+                  style={{ color: "var(--text-tertiary)" }}
+                />
+              )}
+            </div>
+            <p
+              className="mt-3 line-clamp-2 min-h-[2.5rem] text-[12px]"
+              style={{ color: "var(--text-secondary)" }}
+            >
+              {repo.description || "暂无描述"}
+            </p>
+            <div
+              className="mt-3 flex items-center gap-4 text-[11px]"
+              style={{ color: "var(--text-tertiary)" }}
+            >
+              <div className="flex items-center gap-1.5">
+                <div
+                  className="size-2 rounded-full"
+                  style={{ backgroundColor: "var(--accent)" }}
+                />
+                <span
+                  className="font-medium"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  {repo.default_branch}
+                </span>
+              </div>
+              <span>
+                Updated {new Date(repo.updated_at).toLocaleDateString()}
+              </span>
             </div>
-            <span>Updated {new Date(repo.updated_at).toLocaleDateString()}</span>
           </div>
-        </div>
+        </Card>
       ))}
     </div>
-  );
+  )
 }