Merge branch 'dhk-1' into 'master'
feat: 支持深色主题顶栏 Logo 位置配置 See merge request knowledge-base-bj/deerflow-code!5
This commit is contained in:
commit
bb7291a97c
3 files changed
+48
-13
No files matched your search
@@ -13,6 +13,8 @@ window.__CM_RUNTIME_CONFIG__ = {
|
||||
// 也可以把下方图片地址改为其他 PNG 地址,无需重新打包。
|
||||
// 是否显示整块欢迎页图标区域:"true" 显示,"false" 隐藏,默认隐藏。
|
||||
VITE_WELCOME_LOGO_VISIBLE: "false",
|
||||
// 深色主题顶栏 Logo 位置:"center" 显示在中间,"left" 显示在左上角,默认中间。
|
||||
VITE_DARK_LOGO_POSITION: "center",
|
||||
// 红白主题的顶栏系统 Logo 图片地址。
|
||||
VITE_BRAND_LOGO_LIGHT_URL: "brand-assets/brand-logo-light.png",
|
||||
// 浅蓝主题的顶栏系统 Logo 图片地址。
|
||||
|
||||
@@ -14,6 +14,7 @@ import { getStoredAuth } from "@/core/auth";
|
||||
import { useLiveAccount } from "@/core/auth/use-live-account";
|
||||
import { getHeaderBrandAsset, getHeaderBrandFallback } from "@/core/branding/brand-assets";
|
||||
import { isWujieEnv } from "@/core/embed/wujie";
|
||||
import { readRuntimeEnv } from "@/env";
|
||||
import { useUnreadCount } from "@/core/notifications";
|
||||
import { useMyPosition } from "@/core/positions";
|
||||
import {
|
||||
@@ -47,6 +48,9 @@ type HeaderProps = {
|
||||
const Header = ({ collapsed }: HeaderProps) => {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
const darkLogoPosition =
|
||||
readRuntimeEnv("VITE_DARK_LOGO_POSITION") === "left" ? "left" : "center";
|
||||
const isDarkLogoOnLeft = darkLogoPosition === "left";
|
||||
const brandTheme = theme;
|
||||
const configuredBrandLogo = getHeaderBrandAsset(brandTheme);
|
||||
const fallbackBrandLogo = getHeaderBrandFallback(brandTheme);
|
||||
@@ -239,19 +243,26 @@ const Header = ({ collapsed }: HeaderProps) => {
|
||||
{showTopNav ? (
|
||||
<>
|
||||
{/* 左分区(flex-1):菜单靠右贴近中间基座 */}
|
||||
<div className="flex h-full min-w-0 flex-1 items-center justify-between">
|
||||
<div
|
||||
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-cyan-300/25 bg-blue-950/55"
|
||||
title="系统 Logo"
|
||||
>
|
||||
<img
|
||||
src={brandLogo}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="h-[35px] w-[35px] object-contain"
|
||||
onError={handleBrandLogoError}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full min-w-0 flex-1 items-center",
|
||||
isDarkLogoOnLeft ? "justify-between" : "justify-end",
|
||||
)}
|
||||
>
|
||||
{isDarkLogoOnLeft && (
|
||||
<div
|
||||
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-950/55"
|
||||
title="系统 Logo"
|
||||
>
|
||||
<img
|
||||
src={brandLogo}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="h-[35px] w-[35px] object-contain"
|
||||
onError={handleBrandLogoError}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<nav
|
||||
className="top-submenu-bar top-submenu-bar--group"
|
||||
aria-label="左侧菜单"
|
||||
@@ -264,6 +275,15 @@ const Header = ({ collapsed }: HeaderProps) => {
|
||||
|
||||
{/* 中:系统 logo + 名称,落在背景图发光基座上。 */}
|
||||
<div className="header-center-title">
|
||||
{darkLogoPosition === "center" && (
|
||||
<img
|
||||
src={brandLogo}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="header-center-title__logo"
|
||||
onError={handleBrandLogoError}
|
||||
/>
|
||||
)}
|
||||
<span className="header-center-title__label">
|
||||
{desensitizeText("CM业务中心")}
|
||||
</span>
|
||||
|
||||
@@ -1165,6 +1165,7 @@ html.dark .strategy-app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
/* 左右内边距随视口宽度等比缩放,与背景图基座的 background-size:cover 同步,
|
||||
使两侧菜单在 1080p / 2K / 4K 下都贴齐发光基座边缘。
|
||||
基准:1920 宽时 155px → 155/1920×100 ≈ 8.07vw。 */
|
||||
@@ -1181,7 +1182,19 @@ html.dark .strategy-app-header {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.header-center-title__logo {
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
flex: 0 0 auto;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.header-center-title__label {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
/* 白→浅蓝→白 金属质感渐变文字 */
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
|
||||
Reference in new issue
Block a user