Merge pull request 'feat: 个人中心仪表盘视觉打磨与交互优化' (#21) from feat/profile-dashboard-polish into master

Reviewed-on: #21

src/components/AppShell.tsx

@@ -75,7 +75,7 @@ function AppShell({
   const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
-  const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
+  const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
   const toolSurfaceViews = [
     "workbench",
     "canvas",

src/features/profile/ProfilePage.tsx

@@ -260,6 +260,30 @@ function ProfilePage({
   const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
   const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
   const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
+  const activePanelTitle =
+    activePanel === "works"
+      ? "代表作"
+      : activePanel === "projects"
+        ? "服务器项目"
+        : activePanel === "assets"
+          ? "我的资产"
+          : "社区审核";
+  const activePanelDescription =
+    activePanel === "works"
+      ? "最近完成的高质量生成内容"
+      : activePanel === "projects"
+        ? "云端同步的创作项目"
+        : activePanel === "assets"
+          ? "可复用的图片、视频与素材"
+          : "已提交社区的案例状态";
+  const activePanelCount =
+    activePanel === "works"
+      ? visibleWorks.length
+      : activePanel === "projects"
+        ? projects.length
+        : activePanel === "assets"
+          ? savedAssets.length
+          : communityCases.length;
   const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
   const phoneLooksValid = /^1[3-9]\d{9}$/.test(phone.trim());
   const passwordLooksReady = password.length >= (mode === "register" ? 6 : 1);
@@ -765,9 +789,9 @@ function ProfilePage({
           className={`profile-page__banner${bannerUrl ? " has-image" : ""}`}
           style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
         >
-          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()}>
+          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()} aria-label="更换背景">
             <CameraOutlined />
-            更换背景
+            <span className="profile-page__banner-btn-label">更换背景</span>
           </button>
           <div className="profile-page__banner-overlay" />
         </header>
@@ -847,14 +871,16 @@ function ProfilePage({
                   className={accountPanel === "credits" ? "is-active" : ""}
                   onClick={() => setAccountPanel("credits")}
                 >
-                  积分 {(totalBalance / 100).toFixed(2)}
+                  <span>可用积分</span>
+                  <strong>{(totalBalance / 100).toFixed(2)}</strong>
                 </button>
                 <button
                   type="button"
                   className={accountPanel === "tasks" ? "is-active" : ""}
                   onClick={() => setAccountPanel("tasks")}
                 >
-                  任务 {tasks.length}
+                  <span>生成任务</span>
+                  <strong>{tasks.length}</strong>
                 </button>
               </div>
               <div className="profile-page__account-summary">
@@ -863,6 +889,7 @@ function ProfilePage({
                     <span className="profile-page__account-summary-main">
                       <small>当前账号</small>
                       <strong>{displayName}</strong>
+                      <em>{packageLabel}</em>
                     </span>
                     <span className="profile-page__account-summary-metric">
                       <small>积分剩余</small>
@@ -874,6 +901,7 @@ function ProfilePage({
                     <span className="profile-page__account-summary-main">
                       <small>任务概览</small>
                       <strong>{tasks.length} 个任务</strong>
+                      <em>{completedTasks.length} 个已完成</em>
                     </span>
                     <span className="profile-page__account-summary-metric">
                       <small>已完成</small>
@@ -884,51 +912,49 @@ function ProfilePage({
               </div>
             </div>
 
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
+            <div className="profile-page__actions">
-              <ShareAltOutlined />
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
-              {packageLabel}
+                <ShareAltOutlined />
-            </button>
+                {packageLabel}
+              </button>
 
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
-              <PlusOutlined />
+                <PlusOutlined />
-              进入工作台
+                进入工作台
-            </button>
+              </button>
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
-              <ShareAltOutlined />
+                <ShareAltOutlined />
-              打开社区
+                打开社区
-            </button>
+              </button>
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
-              <LockOutlined />
+                <LockOutlined />
-              退出登录
+                退出登录
-            </button>
+              </button>
+            </div>
           </aside>
 
           <main className="profile-page__main">
             <div className="profile-page__main-tabs">
               <button type="button" className={activePanel === "works" ? "is-active" : ""} onClick={() => setActivePanel("works")}>
-                我的作品
+                <span>我的作品</span>
               </button>
               <button type="button" className={activePanel === "projects" ? "is-active" : ""} onClick={() => setActivePanel("projects")}>
-                我的项目
+                <span>我的项目</span>
               </button>
               <button type="button" className={activePanel === "assets" ? "is-active" : ""} onClick={() => setActivePanel("assets")}>
-                我的资产
+                <span>我的资产</span>
               </button>
               <button type="button" className={activePanel === "community" ? "is-active" : ""} onClick={() => setActivePanel("community")}>
-                社区发布
+                <span>社区发布</span>
               </button>
             </div>
 
             <div className="profile-page__section">
-              <span className="profile-page__section-label">
+              <div className="profile-page__section-head">
-                {activePanel === "works"
+                <span className="profile-page__section-label">{activePanelTitle}</span>
-                  ? "代表作"
+                <span className="profile-page__section-desc">{activePanelDescription}</span>
-                  : activePanel === "projects"
+                <span className="profile-page__section-meta">{activePanelCount} 项</span>
-                    ? "服务器项目"
+              </div>
-                    : activePanel === "assets"
-                      ? "我的资产"
-                      : "社区审核"}
-              </span>
               {renderActivePanel()}
             </div>
           </main>

src/styles/pages/profile.css

@@ -15,3 +15,10 @@
 .profile-page__works-scroll .profile-page__list-grid {
   grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
 }
+
+/* Dashboard uses natural page scrolling instead of a nested works scroller. */
+.profile-page--dashboard .profile-page__works-scroll {
+  max-height: none;
+  overflow: visible;
+  scrollbar-width: auto;
+}