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 内部滚动容器
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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">
|
||||
<ShareAltOutlined />
|
||||
{packageLabel}
|
||||
</button>
|
||||
<div className="profile-page__actions">
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
|
||||
<ShareAltOutlined />
|
||||
{packageLabel}
|
||||
</button>
|
||||
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
|
||||
<PlusOutlined />
|
||||
进入工作台
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
|
||||
<ShareAltOutlined />
|
||||
打开社区
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
|
||||
<LockOutlined />
|
||||
退出登录
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
|
||||
<PlusOutlined />
|
||||
进入工作台
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
|
||||
<ShareAltOutlined />
|
||||
打开社区
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
|
||||
<LockOutlined />
|
||||
退出登录
|
||||
</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">
|
||||
{activePanel === "works"
|
||||
? "代表作"
|
||||
: activePanel === "projects"
|
||||
? "服务器项目"
|
||||
: activePanel === "assets"
|
||||
? "我的资产"
|
||||
: "社区审核"}
|
||||
</span>
|
||||
<div className="profile-page__section-head">
|
||||
<span className="profile-page__section-label">{activePanelTitle}</span>
|
||||
<span className="profile-page__section-desc">{activePanelDescription}</span>
|
||||
<span className="profile-page__section-meta">{activePanelCount} 项</span>
|
||||
</div>
|
||||
{renderActivePanel()}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user