style(个人主页): 页眉复用桌面标准样式+退出按钮直接退出

- 身份条复用桌面Header: 56px高/glass-bg-strong毛玻璃/blur(18px)/glass-ring底边
- 页面背景复用桌面应用: #f7f7f7 + 顶部四色径向渐变光晕
- 退出按钮忽略iframe内部任何历史状态,浏览器直接replace回首页
This commit is contained in:
Pine
2026-09-05 00:02:59 +08:00
parent ff64113856
commit fb4af3b304
2 changed files with 29 additions and 13 deletions
@@ -1,6 +1,6 @@
.page {
/* 应用式全屏覆盖层:像 /apps/:appId 内联页一样覆盖外层布局(MainLayout 侧边栏),
OS 窗口内则填满窗口内容区。 */
OS 窗口内则填满窗口内容区。背景复用桌面应用标准(#f7f7f7 + 顶部渐变光晕) */
position: fixed;
top: 0;
left: 0;
@@ -10,28 +10,44 @@
display: flex;
flex-direction: column;
min-height: 0;
background: #ffffff;
background: var(--bg, #f7f7f7);
&::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(52% 40% at 18% 4%, rgba(255, 168, 205, 0.28), transparent 62%),
radial-gradient(50% 38% at 82% 2%, rgba(150, 198, 255, 0.30), transparent 62%),
radial-gradient(52% 38% at 50% 0%, rgba(205, 176, 255, 0.24), transparent 62%),
radial-gradient(96% 40% at 50% 16%, rgba(255, 255, 255, 0.45), transparent 70%);
}
}
.center {
position: relative;
z-index: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ── 顶部固定身份条:毛玻璃(半透明白 + 模糊),与应用主背景一致 ── */
/* ── 顶部固定身份条:复用桌面应用标准页眉样式(毛玻璃)── */
.identityBar {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 108px 14px 20px;
min-height: 56px;
padding: 0 100px 0 28px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background: var(--glass-bg-strong, rgba(255, 255, 255, 0.6));
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid var(--glass-ring, rgba(0, 0, 0, 0.1));
z-index: 2;
}
@@ -109,6 +125,7 @@
flex: 1;
min-height: 0;
position: relative;
z-index: 1;
}
.frame {
@@ -303,8 +320,8 @@
/* ── 右上角标准胶囊(更多 + 返回):浅色玻璃 + 蓝紫点缀 ── */
.floatingCapsule {
position: absolute;
top: 14px;
right: 18px;
top: 12px;
right: 20px;
z-index: 1001;
display: flex;
align-items: center;
@@ -122,13 +122,12 @@ export default function UserHomePage() {
}, [load]);
const handleClose = useCallback(() => {
// OS 桌面/os)→ 关闭窗口;浏览器布局 → 返回上一页(应用式页面)
// 直接退出:OS 桌面关闭窗口;浏览器直接回首页,忽略 iframe 内部任何导航/历史状态
if (isOsPath(window.location.pathname)) {
close(HOME_ROUTE_ID);
return;
}
if (window.history.length > 1) window.history.back();
else window.history.replaceState({}, "", "/");
window.location.replace("/");
}, [close]);
/** 打开编辑弹窗,回填当前页(仅本人;无页时按新建处理)。 */