Compare commits

..

6 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
ludan ecade14bd0 feat: 实现全局响应式布局,适配不同设备、不同屏幕、不同分辨率
- 统一断点体系:560px(手机)、900px(平板)、1180px(小桌面)
- Shell导航:900px底部导航条、560px紧凑布局、顶栏触控优化
- 电商页面:三栏布局在平板/手机下改为单栏堆叠+横向标签切换
- 工作台:启动页编辑器全宽、消息气泡适配窄屏、建议标签换行
- 画布页面:工具栏横向滚动、节点缩小、手机全屏操作
- 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点
- 新增32条@media规则,媒体查询从107条增至139条
2026-06-02 17:45:57 +08:00
7 changed files with 1991 additions and 1774 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",
File diff suppressed because it is too large Load Diff
+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>
@@ -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>
+1 -287
View File
@@ -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);
+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