{/* CM logo：浅底圆环 + 主色渐变圆角方块 */}
+ {/* Controlled by VITE_WELCOME_LOGO_VISIBLE in runtime-config.js. */}
+ {isWelcomeLogoVisible && (
{desensitizeText("欢迎使用CM助手")}
diff --git a/frontend-web/src/core/branding/brand-assets.ts b/frontend-web/src/core/branding/brand-assets.ts
new file mode 100644
index 00000000..b78cebb9
--- /dev/null
+++ b/frontend-web/src/core/branding/brand-assets.ts
@@ -0,0 +1,69 @@
+import fallbackLogoDark from "@/assets/img/brand-logo-dark.png";
+import fallbackLogoLight from "@/assets/img/brand-logo-light.png";
+import fallbackLogoLightblue from "@/assets/img/brand-logo-lightblue.png";
+import { readRuntimeEnv } from "@/env";
+
+export type BrandTheme = "light" | "lightblue" | "dark";
+
+const headerFallbackAssets: Record
-
+ )}
-
- {desensitizeText("CM")}
-
-
+ {shouldShowWelcomeLogo && welcomeLogo ? (
+ setFailedWelcomeLogo(welcomeLogo)}
+ />
+ ) : (
+
+
+ {desensitizeText("CM")}
+
+
+ )}
{desensitizeText("欢迎使用CM助手")}
diff --git a/frontend-web/src/core/branding/brand-assets.ts b/frontend-web/src/core/branding/brand-assets.ts
new file mode 100644
index 00000000..b78cebb9
--- /dev/null
+++ b/frontend-web/src/core/branding/brand-assets.ts
@@ -0,0 +1,69 @@
+import fallbackLogoDark from "@/assets/img/brand-logo-dark.png";
+import fallbackLogoLight from "@/assets/img/brand-logo-light.png";
+import fallbackLogoLightblue from "@/assets/img/brand-logo-lightblue.png";
+import { readRuntimeEnv } from "@/env";
+
+export type BrandTheme = "light" | "lightblue" | "dark";
+
+const headerFallbackAssets: Record = {
+ light: fallbackLogoLight,
+ lightblue: fallbackLogoLightblue,
+ dark: fallbackLogoDark,
+};
+
+const headerRuntimeKeys: Record = {
+ light: "VITE_BRAND_LOGO_LIGHT_URL",
+ lightblue: "VITE_BRAND_LOGO_LIGHTBLUE_URL",
+ dark: "VITE_BRAND_LOGO_DARK_URL",
+};
+
+const welcomeRuntimeKeys: Record = {
+ light: "VITE_BRAND_WELCOME_LIGHT_URL",
+ lightblue: "VITE_BRAND_WELCOME_LIGHTBLUE_URL",
+ dark: "VITE_BRAND_WELCOME_DARK_URL",
+};
+
+function runtimeConfigBaseUrl(): string | undefined {
+ if (typeof document === "undefined") {
+ return undefined;
+ }
+
+ return document.querySelector("script[data-runtime-config]")?.src;
+}
+
+/**
+ * Resolves an optional post-build brand override from runtime-config.js.
+ * Relative paths are anchored to runtime-config.js, which keeps the URL valid
+ * when the whole SPA is mounted below an Nginx location prefix.
+ */
+function readRuntimeBrandAsset(key: string): string | undefined {
+ const configuredUrl = readRuntimeEnv(key);
+ if (!configuredUrl) {
+ return undefined;
+ }
+
+ try {
+ const baseUrl =
+ runtimeConfigBaseUrl() ??
+ (typeof window !== "undefined" ? window.location.href : undefined);
+ return baseUrl ? new URL(configuredUrl, baseUrl).href : configuredUrl;
+ } catch {
+ return configuredUrl;
+ }
+}
+
+export function getHeaderBrandAsset(theme: BrandTheme): string {
+ return readRuntimeBrandAsset(headerRuntimeKeys[theme]) ?? headerFallbackAssets[theme];
+}
+
+export function getHeaderBrandFallback(theme: BrandTheme): string {
+ return headerFallbackAssets[theme];
+}
+
+/**
+ * Welcome content deliberately has no bundled image fallback. An empty
+ * runtime URL keeps the original CM text + gradient treatment.
+ */
+export function getWelcomeBrandAsset(theme: BrandTheme): string | undefined {
+ return readRuntimeBrandAsset(welcomeRuntimeKeys[theme]);
+}
diff --git a/frontend-web/src/strategy-components/Header.tsx b/frontend-web/src/strategy-components/Header.tsx
index 3ca08ddc..e132de1e 100644
--- a/frontend-web/src/strategy-components/Header.tsx
+++ b/frontend-web/src/strategy-components/Header.tsx
@@ -1,4 +1,4 @@
-import { Bell, ChevronDown, FileText, User } from "lucide-react";
+import { Bell, ChevronDown, User } from "lucide-react";
import { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
@@ -12,6 +12,7 @@ import {
import { NotificationDialog } from "@/components/workspace/notification-dialog";
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 { useUnreadCount } from "@/core/notifications";
import { useMyPosition } from "@/core/positions";
@@ -46,6 +47,17 @@ type HeaderProps = {
const Header = ({ collapsed }: HeaderProps) => {
const { theme } = useTheme();
const isDark = theme === "dark";
+ const brandTheme = theme;
+ const configuredBrandLogo = getHeaderBrandAsset(brandTheme);
+ const fallbackBrandLogo = getHeaderBrandFallback(brandTheme);
+ const [failedBrandLogo, setFailedBrandLogo] = useState(null);
+ const brandLogo =
+ failedBrandLogo === configuredBrandLogo ? fallbackBrandLogo : configuredBrandLogo;
+ const handleBrandLogoError = () => {
+ if (brandLogo !== fallbackBrandLogo) {
+ setFailedBrandLogo(brandLogo);
+ }
+ };
const [notificationOpen, setNotificationOpen] = useState(false);
const { data: unreadCount = 0 } = useUnreadCount();
const navigate = useNavigate();
@@ -227,7 +239,19 @@ const Header = ({ collapsed }: HeaderProps) => {
{showTopNav ? (
<>
{/* 左分区（flex-1）：菜单靠右贴近中间基座 */}
-
+
+
+
+
- {/* 中：CM助手（落在背景图发光基座上，纯文字无图标） */}
- {desensitizeText("CM业务中心")}
+ {/* 中：系统 logo + 名称，落在背景图发光基座上。 */}
+
+
+ {desensitizeText("CM业务中心")}
+
+
{/* 右分区（flex-1）：菜单靠左贴近中间基座，操作区靠最右 */}
@@ -261,10 +289,16 @@ const Header = ({ collapsed }: HeaderProps) => {
{/* 浅色顶栏：logo + 一级导航横排（白字落在 banner 上） */}
-
-
+
+
- {/* 中：CM助手（落在背景图发光基座上，纯文字无图标） */}
-
+
+
{desensitizeText("CM业务中心")}
+ {/* 中：系统 logo + 名称，落在背景图发光基座上。 */}
+
+
+ {desensitizeText("CM业务中心")}
+
+
{/* 右分区（flex-1）：菜单靠左贴近中间基座，操作区靠最右 */}
@@ -261,10 +289,16 @@ const Header = ({ collapsed }: HeaderProps) => {
{/* 浅色顶栏：logo + 一级导航横排（白字落在 banner 上） */}
-
{!collapsed && (
diff --git a/frontend-web/src/styles/globals.css b/frontend-web/src/styles/globals.css
index 097e616c..9725479f 100644
--- a/frontend-web/src/styles/globals.css
+++ b/frontend-web/src/styles/globals.css
@@ -1179,6 +1179,9 @@ html.dark .strategy-app-header {
white-space: nowrap;
pointer-events: none;
user-select: none;
+}
+
+.header-center-title__label {
/* 白→浅蓝→白 金属质感渐变文字 */
background: linear-gradient(
180deg,
-
@@ -288,7 +322,13 @@ const Header = ({ collapsed }: HeaderProps) => {
: "bg-white/20",
)}
>
-
+
-
+
{desensitizeText("CM业务中心")}