fix(theme): 消除首帧主题闪动并柔化明暗过渡
- index.html 首帧按本机偏好设置 dark/light,避免先浅后深 - 实际 scheme 只写 dark/light(之前 auto 会覆盖成浅色) - 切换时给所有表面加 240ms 颜色/边框/阴影过渡,结束后移除 - 背景图深色下淡出而不是 display:none - 页头操作图标与分组导航等设置加载后再渲染,避免先显示后消失
This commit is contained in:
@@ -25,6 +25,8 @@ type SiteHeaderProps = {
|
||||
headerGap?: number
|
||||
/** 品牌与操作工具配置 */
|
||||
site: SiteMetaSettings
|
||||
/** 站点设置是否已加载;未加载时不渲染依赖配置的图标,避免先显示再消失 */
|
||||
ready?: boolean
|
||||
/** 是否已登录:决定右侧是「登录」还是「退出登录」 */
|
||||
authenticated: boolean
|
||||
username?: string
|
||||
@@ -55,6 +57,7 @@ export function SiteHeader({
|
||||
headerSpeed,
|
||||
headerGap,
|
||||
site,
|
||||
ready = true,
|
||||
authenticated,
|
||||
username,
|
||||
refreshing = false,
|
||||
@@ -77,7 +80,7 @@ export function SiteHeader({
|
||||
/>
|
||||
|
||||
<div className="header-ticker-slot">
|
||||
{headerEnabled && (
|
||||
{ready && headerEnabled && (
|
||||
<Ticker speed={headerSpeed} gap={headerGap} label="运行状态" className="header-ticker">
|
||||
{headerItems.map((item, index) => (
|
||||
<span className="header-ticker-item" key={`${index}-${item.text}`}>
|
||||
@@ -94,34 +97,42 @@ export function SiteHeader({
|
||||
</div>
|
||||
|
||||
<div className="header-actions">
|
||||
{site.actions.theme && (
|
||||
<IconButton
|
||||
label={dark ? '切换到浅色' : '切换到深色'}
|
||||
icon={<Icon name={dark ? 'sun_line' : 'moon_line'} />}
|
||||
onClick={onToggleTheme}
|
||||
/>
|
||||
{ready && (
|
||||
<>
|
||||
{site.actions.theme && (
|
||||
<IconButton
|
||||
label={dark ? '切换到浅色' : '切换到深色'}
|
||||
icon={<Icon name={dark ? 'sun_line' : 'moon_line'} />}
|
||||
onClick={onToggleTheme}
|
||||
/>
|
||||
)}
|
||||
{site.actions.refresh && (
|
||||
<IconButton
|
||||
label="刷新(重扫项目并重拉内容)"
|
||||
icon={<Icon name="lightning_line" />}
|
||||
spinning={refreshing}
|
||||
onClick={onRefresh}
|
||||
/>
|
||||
)}
|
||||
{site.actions.settings && authenticated && (
|
||||
<IconButton
|
||||
label="站点设置"
|
||||
icon={<Icon name="settings_1_line" />}
|
||||
onClick={onSettings}
|
||||
/>
|
||||
)}
|
||||
{site.actions.session &&
|
||||
(authenticated ? (
|
||||
<IconButton
|
||||
label={username === undefined ? '退出登录' : `退出登录(${username})`}
|
||||
icon={<Icon name="exit_line" />}
|
||||
onClick={onLogout}
|
||||
/>
|
||||
) : (
|
||||
<IconButton label="登录" icon={<Icon name="user_3_line" />} onClick={onLogin} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{site.actions.refresh && (
|
||||
<IconButton
|
||||
label="刷新(重扫项目并重拉内容)"
|
||||
icon={<Icon name="lightning_line" />}
|
||||
spinning={refreshing}
|
||||
onClick={onRefresh}
|
||||
/>
|
||||
)}
|
||||
{site.actions.settings && authenticated && (
|
||||
<IconButton label="站点设置" icon={<Icon name="settings_1_line" />} onClick={onSettings} />
|
||||
)}
|
||||
{site.actions.session &&
|
||||
(authenticated ? (
|
||||
<IconButton
|
||||
label={username === undefined ? '退出登录' : `退出登录(${username})`}
|
||||
icon={<Icon name="exit_line" />}
|
||||
onClick={onLogout}
|
||||
/>
|
||||
) : (
|
||||
<IconButton label="登录" icon={<Icon name="user_3_line" />} onClick={onLogin} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user