Compare commits

...

12 Commits

Author SHA1 Message Date
ludan bbc705c8d9 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 内部滚动容器
2026-06-05 18:28:10 +08:00
stringadmin 796162de4d Merge pull request 'chore: re-upload current web project code' (#19) from reupload/current-web-20260605 into master
Reviewed-on: #19
2026-06-05 08:13:56 +00:00
stringadmin aebe0ff827 chore: re-upload current web project code 2026-06-05 16:08:47 +08:00
stringadmin c113d82844 Merge pull request 'feat: 实现全局响应式布局,适配不同设备、不同屏幕、不同分辨率' (#17) from feat/responsive-layout into master
Merge PR 17 feat responsive-layout
2026-06-05 07:21:29 +00:00
stringadmin 8cf9ee3519 merge: resolve conflicts between feat/responsive-layout and master
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-05 15:14:17 +08:00
stringadmin 2129b29dfe Merge pull request 'Feat/profile account polish' (#16) from feat/profile-account-polish into master
Reviewed-on: #16
2026-06-05 06:58:37 +00:00
stringadmin d36d46836f merge: resolve EcommercePage.tsx conflict, integrate master into profile-account-polish
Keep master's EcommercePage.tsx (has more complete upload logic from prior conflict resolution). Accept all other master changes including canvas tool panels, task lifecycle, and workbench updates.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-05 14:05:39 +08:00
stringadmin 91c332f567 Merge pull request 'Feat/canvas tool panels' (#15) from feat/canvas-tool-panels into master
Reviewed-on: #15
2026-06-05 05:30:22 +00:00
ludan b17a978e9e Merge origin/master: 保留电商上传优化版,接入master新增面板组件
冲突解决:EcommercePage.tsx 保留本地版本(上传预览大图+缩略图切换交互)
master新增:6个独立面板组件、图片校验工具、视频工作区增强、CSS更新
2026-06-05 10:34:19 +08:00
ludan 6d68ab02bb feat: 个人中心账户摘要区重构、主题色调对齐电商
【账户摘要区重构】
- 新增 profile-page__account-summary 双列网格布局(主信息 + 右侧指标)
- 主信息区(account-summary-main):显示账号名/任务概览
- 指标区(account-summary-metric):品牌绿色数字展示积分/完成数,左侧分隔线
- 任务概览改为"X 个任务"更自然的表达方式
- 替代旧 upload-card--meta/meta-item 类名体系

【主题色调对齐】
- 个人中心页面背景、侧边栏、卡片统一为电商同款平坦暗色
- 移除 box-shadow 深度阴影,使用 var(--bg-panel)/var(--bg-inset) Token
- Tab 切换按钮透明背景,选中态品牌绿边框+浅绿背景
- 统计卡片/简介/Bio/媒体预览卡片统一边框与背景色
- 媒体徽章、分享按钮、头像环去除阴影
2026-06-04 18:06:43 +08:00
ludan 2b65206b84 feat: 电商克隆上传交互升级、视频模型选择器图标
【电商克隆 - 商品图上传交互重构】
- 新增上传预览大图区(clone-ai-upload-preview-wrap),点击缩略图可切换预览
- 选中缩略图增加 is-active 绿色边框高亮
- 预览区显示商品图编号 + 尺寸/比例/格式信息(formatProductImageSpec)
- 上传区到达 7 张上限时显示"已达上限"、阻止拖拽上传、输入框禁用
- 上传图片自动异步读取尺寸(width/height),无需等待上传完成即可展示
- 已上传素材区重构为列表头(标题+计数)+ 缩略图栈式布局
- 缩略图增加序号角标(1-7),删除按钮独立于缩略图下方
- selectedProductImageId 状态自动管理:删除/新增时自动切换到有效图片

【工作台 - 视频模型选择器图标】
- 新增 VIDEO_MODEL_ICON_URLS 映射(HappyHorse/Pixverse/Vidu/Wan/Kling)
- SelectChip 组件在 chipId=video-model 时显示模型品牌图标
- getVideoModelIconUrl 支持中英文模糊匹配

【样式】
- ecommerce.css: 预览区/素材栈/缩略图选中态/上限态完整样式
- dark-green.css: 主题层微调
2026-06-04 17:27:40 +08:00
ludan ecade14bd0 feat: 实现全局响应式布局,适配不同设备、不同屏幕、不同分辨率
- 统一断点体系:560px(手机)、900px(平板)、1180px(小桌面)
- Shell导航:900px底部导航条、560px紧凑布局、顶栏触控优化
- 电商页面:三栏布局在平板/手机下改为单栏堆叠+横向标签切换
- 工作台:启动页编辑器全宽、消息气泡适配窄屏、建议标签换行
- 画布页面:工具栏横向滚动、节点缩小、手机全屏操作
- 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点
- 新增32条@media规则,媒体查询从107条增至139条
2026-06-02 17:45:57 +08:00
4 changed files with 1218 additions and 34 deletions
+1 -1
View File
@@ -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",
+59 -33
View File
@@ -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>
+7
View File
@@ -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