feat: 个人中心仪表盘视觉打磨与交互优化

本次提交对个人中心（Profile Dashboard）进行了全面的 UI/UX 升级：

## AppShell 导航修复
- 修复浮动导航栏显示逻辑：移除未登录状态下多余的 session 判断条件，确保登录页不显示导航

## ProfilePage 功能增强
- 新增面板标题、描述和计数变量，动态展示不同面板（代表作/服务器项目/我的资产/社区审核）的上下文信息
- 背景图更换按钮增加 aria-label 无障碍支持，文字使用独立 span 便于移动端隐藏
- 积分与任务切换按钮拆分为标签+数值结构，信息层级更清晰
- 账号摘要卡片新增套餐名称和已完成任务数展示
- 操作按钮（工作台/社区/退出登录）包裹至 actions 容器，统一布局管理
- 主面板标签页文字包裹 span，支持响应式隐藏

## profile.css 滚动模型调整
- Dashboard 视图改用页面自然滚动，替代嵌套区域滚动，避免双滚动条问题

## dark-green.css 主题样式（约 1160 行新增）
- 背景图与头像区域：毛玻璃按钮、头像环绿边光晕、hover 编辑覆盖层
- 个性签名：圆角胶囊展示态 + 编辑态双向布局，状态提示条
- 账号卡片：标签按钮网格化布局、积分摘要面板、套餐标签
- 操作按钮组：主按钮渐变绿色、次要按钮低对比、退出按钮红色警示
- 内容标签页：胶囊切换 + 计数徽章，激活态绿边高亮
- 列表卡片：hover 微上浮 + 绿色边框过渡，空状态虚线面板
- 多轮视觉迭代：从 graphite 灰调到最终 black+green 参考色调
- 响应式适配：移动端头像环缩小、背景按钮圆形、标签页紧凑排列
- 页面级滚动：让 body 自然滚动，取消 content 内部滚动容器

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/features/workbench/WorkbenchSelectChips.tsx

@@ -3,24 +3,6 @@ import type { ReactNode } from "react";
 import type { WorkbenchOption, WorkbenchFieldGroup } from "./workbenchConstants";
 import { getRatioOptionClassName, getSettingsGridColumnsClassName } from "./workbenchReferenceUtils";
 
-const VIDEO_MODEL_ICON_URLS = {
-  happyHorse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/HappyHorse.svg",
-  pixverse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/Pixverse.svg",
-  vidu: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/viduQ3.svg",
-  wanxiang: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/wan.svg",
-  kling: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/kling.svg",
-} as const;
-
-function getVideoModelIconUrl(option: WorkbenchOption): string | null {
-  const text = `${option.value} ${option.label}`.toLowerCase();
-  if (text.includes("happyhorse")) return VIDEO_MODEL_ICON_URLS.happyHorse;
-  if (text.includes("pixverse")) return VIDEO_MODEL_ICON_URLS.pixverse;
-  if (text.includes("vidu")) return VIDEO_MODEL_ICON_URLS.vidu;
-  if (text.includes("wan") || text.includes("万相")) return VIDEO_MODEL_ICON_URLS.wanxiang;
-  if (text.includes("kling") || text.includes("可灵")) return VIDEO_MODEL_ICON_URLS.kling;
-  return null;
-}
-
 export function SelectChip({
   chipId,
   value,
@@ -74,7 +56,6 @@ export function SelectChip({
         >
           {options.map((option, index) => {
             const active = option.value === value;
-            const iconUrl = chipId === "video-model" ? getVideoModelIconUrl(option) : null;
             return (
               <button
                 key={option.value}
@@ -90,11 +71,6 @@ export function SelectChip({
               >
                 <span className="ai-workbench-select-chip__option-label">
                   <span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
-                  {iconUrl ? (
-                    <span className="ai-workbench-select-chip__option-icon" aria-hidden="true">
-                      <img src={iconUrl} alt="" loading="lazy" />
-                    </span>
-                  ) : null}
                   <span className="ai-workbench-select-chip__option-copy">
                     <span className="ai-workbench-select-chip__option-title">
                       <span>{option.label}</span>
@@ -285,4 +261,4 @@ export function InlineOptionChip({
       ) : null}
     </div>
   );
-}
+}

src/styles/pages/ecommerce.css

@@ -1166,25 +1166,6 @@
   background: #202c28;
 }
 
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full {
-  cursor: default;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full strong {
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.08);
-  color: #aeb8c4;
-  box-shadow: none;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full:hover {
-  border-color: rgba(255, 255, 255, 0.16);
-  background:
-    radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.09), transparent 58%),
-    var(--ecm-inset);
-  transform: none;
-}
-
 .product-clone-page[data-tool="clone"] .clone-ai-upload-zone:active {
   transform: scale(0.98);
 }
@@ -1302,27 +1283,6 @@
   transform: scale(0.92);
 }
 
-.product-clone-page[data-tool="clone"] .clone-ai-card,
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone,
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-files {
-  position: relative;
-  overflow: visible;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone {
-  z-index: 8;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-uploaded-file:hover),
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-uploaded-file:focus-within) {
-  z-index: 90;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover,
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:focus-within {
-  z-index: 95;
-}
-
 .product-clone-page[data-tool="clone"] .clone-ai-settings-section {
   display: grid;
   gap: 8px;
@@ -3514,7 +3474,7 @@
 
 .uploaded-image-zoom {
   position: absolute;
-  z-index: 220;
+  z-index: 70;
   left: 50%;
   bottom: calc(100% + 10px);
   display: block;
@@ -3535,18 +3495,6 @@
   visibility: hidden;
 }
 
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .uploaded-image-zoom {
-  left: 0;
-  bottom: calc(100% + 12px);
-  width: min(240px, 58vw);
-  transform: translate(0, 8px) scale(0.96);
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover .uploaded-image-zoom,
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:focus-within .uploaded-image-zoom {
-  transform: translate(0, 0) scale(1);
-}
-
 .uploaded-image-zoom img {
   display: block;
   width: 100%;
@@ -3569,233 +3517,6 @@
   visibility: visible;
 }
 
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) {
-  align-content: start;
-  justify-items: stretch;
-  gap: 10px;
-  min-height: 0;
-  padding: 12px;
-  text-align: left;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-main {
-  grid-template-columns: 34px minmax(0, 1fr) auto;
-  width: 100%;
-  align-items: center;
-  justify-items: start;
-  gap: 4px 9px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-icon {
-  grid-row: span 2;
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-  font-size: 16px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-title {
-  min-width: 0;
-  color: #c9d2dd;
-  font-size: 12px;
-  line-height: 1.2;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) strong {
-  grid-row: span 2;
-  min-width: 96px;
-  height: 34px;
-  padding: 0 12px;
-  font-size: 12px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-hint {
-  grid-column: 2;
-  min-width: 0;
-  font-size: 10px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-preview-wrap {
-  display: grid;
-  gap: 7px;
-  min-width: 0;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-preview {
-  position: relative;
-  display: grid;
-  width: 100%;
-  min-height: 126px;
-  overflow: hidden;
-  border: 1px solid rgba(var(--ecm-accent-rgb), 0.2);
-  border-radius: 10px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
-    rgba(8, 10, 12, 0.56);
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-preview img {
-  display: block;
-  width: 100%;
-  height: 126px;
-  object-fit: contain;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 0 2px;
-  color: #eef2f6;
-  text-align: left;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta span {
-  display: grid;
-  min-width: 0;
-  gap: 1px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta b,
-.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta em {
-  display: block;
-  overflow: hidden;
-  max-width: 260px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta b {
-  color: var(--ecm-accent);
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 900;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta em {
-  color: #aeb8c4;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 700;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-files {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 7px;
-  margin-top: 0;
-  padding-top: 2px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-stack {
-  display: grid;
-  gap: 7px;
-  min-width: 0;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  color: #768292;
-  font-size: 10px;
-  font-weight: 900;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head b {
-  flex: 0 0 auto;
-  padding: 2px 7px;
-  border: 1px solid rgba(var(--ecm-accent-rgb), 0.18);
-  border-radius: 999px;
-  background: rgba(var(--ecm-accent-rgb), 0.07);
-  color: var(--ecm-accent);
-  font-size: 10px;
-  line-height: 1.4;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file {
-  width: 46px;
-  height: 46px;
-  overflow: hidden;
-  border-color: rgba(255, 255, 255, 0.12);
-  border-radius: 9px;
-  background: rgba(255, 255, 255, 0.035);
-  transition:
-    border-color 160ms ease,
-    box-shadow 160ms ease,
-    transform 160ms ease;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file > button:not(.clone-ai-uploaded-file__thumb) {
-  top: 2px;
-  right: 2px;
-  width: 16px;
-  height: 16px;
-  background: rgba(8, 10, 12, 0.82);
-  color: #fff;
-  font-size: 9px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file.is-active {
-  border-color: rgba(var(--ecm-accent-rgb), 0.86);
-  box-shadow: 0 0 0 2px rgba(var(--ecm-accent-rgb), 0.12);
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .clone-ai-uploaded-file__thumb {
-  position: static;
-  inset: auto;
-  display: block;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: 0;
-  border-radius: inherit;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font-size: inherit;
-  opacity: 1;
-  transform: none;
-  transition: none;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .clone-ai-uploaded-file__thumb img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file__thumb span {
-  position: absolute;
-  left: 3px;
-  bottom: 3px;
-  min-width: 14px;
-  height: 14px;
-  border-radius: 999px;
-  background: rgba(8, 10, 12, 0.76);
-  color: #eef2f6;
-  font-size: 9px;
-  font-weight: 900;
-  line-height: 14px;
-  text-align: center;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover {
-  border-color: rgba(var(--ecm-accent-rgb), 0.62);
-  transform: translateY(-1px);
-}
-
 @keyframes image-mention-menu-rise {
   from {
     opacity: 0;
@@ -9042,13 +8763,6 @@
   box-shadow: 0 10px 28px rgba(var(--ecm-accent-rgb), 0.18);
 }
 
-.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full strong {
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.08);
-  color: #aeb8c4;
-  box-shadow: none;
-}
-
 .product-clone-page[data-tool="clone"] :is(.clone-ai-generate:hover:not(:disabled), .clone-ai-send-button:hover:not(:disabled)) {
   filter: brightness(1.03);
   transform: translateY(-1px);

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;
+}