OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 个人中心界面UI优化，提升商业产品精致度

Browse Source 
ProfilePage组件优化：
- 新增个性签名编辑功能（内联编辑/确认/取消交互）
- 新增 icon 导入（EditOutlined, CheckOutlined, CloseOutlined）
- 新增 formatProfileDate 工具函数，统一日期格式化（中文友好）
- 新增 formatTaskType 函数，任务类型中文化显示
- 新增 formatTaskStatus 函数，任务状态中文化显示
- 新增 formatAssetStatus 函数，资产状态中文化显示
- 优化空状态展示，增加图标占位

dark-green主题层样式增强：
- 个人中心背景增加微光渐变（accent光晕+半透明遮罩）
- Banner区域高度优化为214px，增加底部渐变分割线
- Banner叠加层增加径向光晕效果
- Banner编辑按钮增加毛玻璃质感（backdrop-filter）
- 侧边栏/主体/选项卡/列表卡片等多处细节增强
- 按钮、标签、统计数字等组件加入微交互
- 保持暗绿主题配色体系不变，仅提升精致度
This commit is contained in:
ludan
2026-06-03 09:53:05 +08:00
parent 178c2ec695
commit 87d81d2c86
2 changed files with 912 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/profile/ProfilePage.tsx
+131 -23
View File
@@ -1,7 +1,10 @@
import {
CameraOutlined,
CheckOutlined,
CheckCircleFilled,
CloseOutlined,
DeleteOutlined,
EditOutlined,
LockOutlined,
MailOutlined,
MobileOutlined,
@@ -135,6 +138,48 @@ function mapAssetToSavedItem(asset: Awaited<ReturnType<typeof assetClient.list>>
};
}
function formatProfileDate(value: string | null | undefined): string {
if (!value) return "刚刚";
const date = new Date(value);
if (Number.isNaN(date.getTime())) return value;
return new Intl.DateTimeFormat("zh-CN", {
month: "numeric",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
}).format(date);
}
function formatTaskType(type: WebGenerationPreviewTask["type"]): string {
const labels: Record<WebGenerationPreviewTask["type"], string> = {
image: "图像",
video: "视频",
agent: "智能体",
"digital-human": "数字人",
"character-mix": "角色融合",
};
return labels[type] || type;
}
function formatTaskStatus(status: WebGenerationPreviewTask["status"]): string {
const labels: Record<WebGenerationPreviewTask["status"], string> = {
queued: "排队中",
running: "生成中",
completed: "已完成",
failed: "失败",
};
return labels[status] || status;
}
function formatAssetStatus(status: string | undefined): string {
const normalized = String(status || "").toLowerCase();
if (normalized === "completed" || normalized === "ready" || normalized === "success") return "可用";
if (normalized === "running" || normalized === "processing") return "处理中";
if (normalized === "failed" || normalized === "error") return "失败";
return status || "资产";
}
function ProfilePage({
session,
usage,
@@ -182,6 +227,9 @@ function ProfilePage({
const [profileNotice, setProfileNotice] = useState<string | null>(null);
const [localAvatarUrl, setLocalAvatarUrl] = useState(() => session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
const [profileBio, setProfileBio] = useState(() => session?.user.bio || readLocalProfileValue(userId, "bio"));
const [isBioEditing, setIsBioEditing] = useState(false);
const [bioEditBackup, setBioEditBackup] = useState("");
const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
const completedTasks = tasks.filter((task) => task.status === "completed");
@@ -497,8 +545,29 @@ function ProfilePage({
void syncProfilePatch({ bio: nextBio || null });
};
const startBioEdit = () => {
setBioEditBackup(profileBio);
setBioStatusNotice(null);
setIsBioEditing(true);
};
const confirmBioEdit = () => {
handleBioBlur();
setIsBioEditing(false);
setBioStatusNotice("个性签名已保存");
};
const cancelBioEdit = () => {
setProfileBio(bioEditBackup);
setIsBioEditing(false);
setBioStatusNotice(null);
};
const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
<div className="profile-page__empty-state">
<span className="profile-page__empty-mark" aria-hidden="true">
<PlusOutlined />
</span>
<p className="profile-page__empty-text">{text}</p>
<button type="button" className="profile-page__empty-btn" onClick={action}>
<PlusOutlined />
@@ -515,12 +584,12 @@ function ProfilePage({
<article key={task.id} className="profile-page__list-card">
<div className="profile-page__list-card-head">
<strong>{task.title}</strong>
<span>{task.type}</span>
<span>{formatTaskType(task.type)}</span>
</div>
<p>{task.prompt}</p>
<div className="profile-page__list-card-meta">
<span>{task.status}</span>
<span>{task.createdAt}</span>
<span>{formatTaskStatus(task.status)}</span>
<span>{formatProfileDate(task.createdAt)}</span>
</div>
</article>
))}
@@ -537,7 +606,7 @@ function ProfilePage({
<article key={project.id} className="profile-page__list-card">
<div className="profile-page__list-card-head">
<strong>{project.name}</strong>
<span>{project.updatedAt}</span>
<span>{formatProfileDate(project.updatedAt)}</span>
{onDeleteProject ? (
<button
type="button"
@@ -569,12 +638,12 @@ function ProfilePage({
<article key={asset.id} className="profile-page__list-card">
<div className="profile-page__list-card-head">
<strong>{asset.name}</strong>
<span>{asset.status}</span>
<span>{formatAssetStatus(asset.status)}</span>
</div>
<p>{asset.description}</p>
<div className="profile-page__list-card-meta">
<span>{asset.type}</span>
<span>{asset.updatedAt}</span>
<span>{formatProfileDate(asset.updatedAt)}</span>
</div>
</article>
))}
@@ -637,15 +706,39 @@ function ProfilePage({
</span>
</div>
<strong className="profile-page__username">{displayName}</strong>
<textarea
className="profile-page__bio"
value={profileBio}
onChange={(event) => setProfileBio(event.target.value)}
onBlur={handleBioBlur}
placeholder={displayedBio}
rows={2}
maxLength={80}
/>
{isBioEditing ? (
<div className="profile-page__bio-editor">
<textarea
className="profile-page__bio"
value={profileBio}
onChange={(event) => setProfileBio(event.target.value)}
placeholder="填写一句个人签名"
rows={2}
maxLength={80}
autoFocus
/>
<div className="profile-page__bio-actions">
<button type="button" className="profile-page__bio-action profile-page__bio-action--save" onClick={confirmBioEdit}>
<CheckOutlined />
保存
</button>
<button type="button" className="profile-page__bio-action" onClick={cancelBioEdit}>
<CloseOutlined />
取消
</button>
</div>
</div>
) : (
<button
type="button"
className={`profile-page__bio-display${profileBio.trim() ? "" : " is-empty"}`}
onClick={startBioEdit}
>
<span>{displayedBio}</span>
<EditOutlined className="profile-page__bio-edit-icon" />
</button>
)}
{bioStatusNotice ? <span className="profile-page__bio-status">{bioStatusNotice}</span> : null}
{profileNotice ? <span className="profile-page__sync-notice">{profileNotice}</span> : null}
</div>
@@ -664,18 +757,21 @@ function ProfilePage({
</div>
</div>
<button type="button" className="profile-page__share-btn">
<button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
<ShareAltOutlined />
{packageLabel}
</button>
<button type="button" className="profile-page__share-btn" onClick={onOpenWorkbench}>
<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" onClick={onOpenCommunity}>
<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" onClick={onLogout}>
<button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
<LockOutlined />
退出登录
</button>
</aside>
@@ -731,13 +827,25 @@ function ProfilePage({
<div className="profile-page__upload-card profile-page__upload-card--meta">
{accountPanel === "credits" ? (
<>
<span>当前账号：{displayName}</span>
<span>积分剩余：{(usage.balanceCents / 100).toFixed(2)}</span>
<span className="profile-page__meta-item">
<small>当前账号</small>
<strong>{displayName}</strong>
</span>
<span className="profile-page__meta-item">
<small>积分剩余</small>
<strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
</span>
</>
) : (
<>
<span>任务总数：{tasks.length}</span>
<span>已完成：{completedTasks.length}</span>
<span className="profile-page__meta-item">
<small>任务总数</small>
<strong>{tasks.length}</strong>
</span>
<span className="profile-page__meta-item">
<small>已完成</small>
<strong>{completedTasks.length}</strong>
</span>
</>
)}
</div>
src/styles/themes/dark-green.css
+781
View File
@@ -5394,6 +5394,787 @@
aspect-ratio: auto;
}
/* Profile center: commercial SaaS polish while preserving the dark-green theme. */
.web-shell[data-ui-theme="dark-green"] .profile-page {
background:
radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.08), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 220px),
var(--dg-page);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
height: 214px;
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 34%),
linear-gradient(180deg, var(--bg-elevated), var(--dg-page));
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
opacity: 0.7;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner.has-image {
background-position: center;
background-size: cover;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-overlay {
background:
linear-gradient(180deg, rgba(13, 13, 15, 0.18), rgba(13, 13, 15, 0.78)),
radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.12), transparent 34%);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn {
height: 36px;
padding: 0 14px;
border-color: rgba(255, 255, 255, 0.2);
background: rgba(10, 12, 13, 0.66);
backdrop-filter: blur(14px);
flex-direction: row;
justify-content: center;
min-width: 104px;
line-height: 1;
font-weight: 600;
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 13px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
top: 18px;
right: max(18px, calc((100vw - 1240px) / 2 + 18px));
bottom: auto;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn:hover {
border-color: rgba(var(--accent-rgb), 0.45);
background: rgba(12, 18, 16, 0.86);
transform: translateY(-1px);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__body {
grid-template-columns: 292px minmax(0, 1fr);
gap: 34px;
width: min(1240px, calc(100% - 56px));
margin-top: -72px;
padding-bottom: 56px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar,
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card,
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item,
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state,
.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card {
border-color: rgba(255, 255, 255, 0.075);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
var(--bg-surface);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
gap: 18px;
padding: 22px;
border-radius: var(--radius-lg);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
gap: 10px;
width: 100%;
padding-bottom: 4px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring::before {
content: "";
position: absolute;
inset: -7px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 68%);
opacity: 0.9;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
position: relative;
width: 88px;
height: 88px;
border: 4px solid var(--dg-page);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.08)),
var(--bg-elevated);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
left: 50%;
top: 50%;
width: 88px;
height: 88px;
border-color: rgba(255, 255, 255, 0.18);
background: rgba(8, 10, 11, 0.68);
color: #fff;
font-size: 20px;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
right: -3px;
bottom: 10px;
z-index: 4;
border: 2px solid var(--bg-surface);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit,
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:active .profile-page__avatar-edit,
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
opacity: 1;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit:hover,
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
background: rgba(8, 10, 11, 0.82);
transform: translate(-50%, -50%) scale(1.02);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__username {
max-width: 100%;
overflow: hidden;
font-size: 21px;
letter-spacing: 0;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
width: 100%;
min-height: 56px;
padding: 10px 12px;
border-color: rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.025);
color: var(--fg-muted);
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio:focus {
background: var(--bg-elevated);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-editor {
display: grid;
gap: 8px;
width: 100%;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-actions {
display: flex;
justify-content: center;
gap: 8px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 68px;
height: 30px;
padding: 0 10px;
border: 1px solid rgba(255, 255, 255, 0.075);
border-radius: 999px;
background: rgba(255, 255, 255, 0.025);
color: var(--fg-muted);
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action:hover {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.045);
color: var(--fg-body);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save {
border-color: rgba(var(--accent-rgb), 0.34);
background: rgba(var(--accent-rgb), 0.1);
color: var(--accent);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save:hover {
border-color: rgba(var(--accent-rgb), 0.5);
background: rgba(var(--accent-rgb), 0.16);
color: var(--accent-hover);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.055);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.018);
color: var(--fg-muted);
cursor: pointer;
text-align: left;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
overflow: hidden;
font-size: 13px;
line-height: 1.45;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display.is-empty span {
color: var(--fg-soft);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-edit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(var(--accent-rgb), 0.08);
color: var(--accent);
font-size: 12px;
opacity: 0.78;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover,
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible {
border-color: rgba(var(--accent-rgb), 0.28);
background: rgba(var(--accent-rgb), 0.055);
color: var(--fg-body);
outline: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover .profile-page__bio-edit-icon,
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible .profile-page__bio-edit-icon {
opacity: 1;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-status {
color: var(--accent);
font-size: 11px;
line-height: 1.3;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
gap: 0;
width: 100%;
padding: 12px 0;
border-top: 1px solid rgba(255, 255, 255, 0.065);
border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
font-size: 19px;
line-height: 1.1;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__count span {
margin-top: 4px;
color: var(--fg-soft);
font-size: 12px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
min-height: 40px;
padding: 0 15px;
border-radius: var(--radius-sm);
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--plan {
justify-content: center;
border-color: rgba(var(--accent-rgb), 0.24);
background: rgba(var(--accent-rgb), 0.07);
color: var(--accent);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary {
border-color: rgba(var(--accent-rgb), 0.62);
background: var(--accent);
color: var(--dg-button-text);
font-weight: 700;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--secondary {
background: rgba(255, 255, 255, 0.025);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger {
margin-top: 2px;
border-color: transparent;
color: var(--fg-soft);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn:hover {
transform: translateY(-1px);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary:hover {
border-color: var(--accent-hover);
background: var(--accent-hover);
color: var(--dg-button-text);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger:hover {
border-color: rgba(255, 90, 95, 0.36);
background: rgba(255, 90, 95, 0.1);
color: #ff9a9d;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__main {
gap: 22px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
min-height: 52px;
margin-bottom: 2px;
padding: 4px;
border: 1px solid rgba(255, 255, 255, 0.065);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.022);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
min-height: 42px;
padding: 0 18px;
border: 0;
border-radius: var(--radius-sm);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active {
background: rgba(var(--accent-rgb), 0.12);
color: var(--accent);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active::after {
content: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__section {
gap: 14px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__section-label {
margin-bottom: 0;
color: var(--fg-body);
font-size: 15px;
letter-spacing: 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
gap: 14px;
max-height: min(470px, 48vh);
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 6px;
scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
scrollbar-width: thin;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar,
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar {
width: 6px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-track,
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-track {
background: transparent;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb,
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(var(--accent-rgb), 0.28);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb:hover,
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb:hover {
background: rgba(var(--accent-rgb), 0.42);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
min-height: 136px;
padding: 16px;
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card:hover,
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
border-color: rgba(var(--accent-rgb), 0.28);
background:
linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent),
var(--bg-surface);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
min-width: 0;
font-size: 14px;
line-height: 1.35;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
padding: 4px 8px;
border-radius: 999px;
background: rgba(var(--accent-rgb), 0.1);
color: var(--accent);
font-size: 11px;
line-height: 1;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
display: -webkit-box;
min-height: 38px;
overflow: hidden;
color: var(--fg-muted);
font-size: 12px;
line-height: 1.55;
text-overflow: ellipsis;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.055);
color: var(--fg-soft);
line-height: 1.35;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state {
position: relative;
min-height: 280px;
overflow: hidden;
padding: 46px 28px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 42%);
pointer-events: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid rgba(var(--accent-rgb), 0.22);
border-radius: 50%;
background: rgba(var(--accent-rgb), 0.08);
color: var(--accent);
font-size: 18px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-text {
position: relative;
color: var(--fg-muted);
font-size: 13px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn {
position: relative;
min-height: 38px;
border-color: rgba(var(--accent-rgb), 0.32);
background: rgba(var(--accent-rgb), 0.08);
color: var(--accent);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 14px;
max-height: min(470px, 48vh);
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 6px;
scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
scrollbar-width: thin;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item {
min-height: 74px;
padding: 10px;
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
transform: translateY(-2px);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item img,
.web-shell[data-ui-theme="dark-green"] .profile-page__review-thumb {
flex-basis: 70px;
width: 70px;
height: 52px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item strong {
font-size: 13px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-bar {
margin-bottom: 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs {
gap: 4px;
padding: 3px;
border: 1px solid rgba(255, 255, 255, 0.065);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.02);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button {
min-height: 32px;
padding: 0 14px;
border: 0;
border-radius: 8px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button.is-active {
background: rgba(var(--accent-rgb), 0.1);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding: 14px;
border-radius: var(--radius-md);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item {
display: grid;
gap: 6px;
min-width: 0;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.055);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.025);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item small {
overflow: hidden;
color: var(--fg-soft);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item strong {
overflow: hidden;
color: var(--fg-body);
font-size: 17px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 900px) {
.web-shell[data-ui-theme="dark-green"] .profile-page__body {
grid-template-columns: 1fr;
width: min(100% - 36px, 760px);
margin-top: -54px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
align-items: stretch;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
overflow-x: auto;
}
}
@media (max-width: 560px) {
.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
height: 152px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
top: 10px;
right: 12px;
width: 36px;
min-width: 36px;
height: 36px;
padding: 0;
border-radius: 999px;
font-size: 0;
gap: 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
width: 24px;
height: 24px;
background: transparent;
font-size: 14px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__body {
width: min(100% - 28px, 560px);
margin-top: -32px;
padding-bottom: 88px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
gap: 13px;
padding: 18px;
border-radius: var(--radius-md);
}
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
gap: 7px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
width: 76px;
height: 76px;
border-width: 3px;
font-size: 24px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
width: 76px;
height: 76px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
bottom: 6px;
width: 18px;
height: 18px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__username {
font-size: 20px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
min-height: 46px;
padding: 8px 10px;
font-size: 12px;
line-height: 1.45;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
min-height: 42px;
padding: 8px 10px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
font-size: 12px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
padding: 9px 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
font-size: 18px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
min-height: 36px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
flex: 0 0 auto;
padding: 0 14px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
grid-template-columns: 1fr;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
max-height: min(312px, 46vh);
padding-right: 4px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
min-height: 112px;
padding: 9px;
gap: 8px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
width: 100%;
font-size: 12px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
max-width: 100%;
overflow: hidden;
padding: 3px 7px;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
min-height: 30px;
font-size: 11px;
line-height: 1.45;
}
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
align-items: flex-start;
flex-direction: column;
gap: 4px;
padding-top: 8px;
font-size: 10px;
}
}
/* Ecommerce generation page: keep its carousel and composer independent from
the community carousel rules that share class names. */
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {