Merge branch 'dhk-1' into 'master'

feat: 支持深色主题顶栏 Logo 位置配置

See merge request knowledge-base-bj/deerflow-code!5

frontend-web/public/runtime-config.js

@@ -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 图片地址。

frontend-web/src/strategy-components/Header.tsx

@@ -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
-              <div
+              className={cn(
-                className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-cyan-300/25 bg-blue-950/55"
+                "flex h-full min-w-0 flex-1 items-center",
-                title="系统 Logo"
+                isDarkLogoOnLeft ? "justify-between" : "justify-end",
-              >
+              )}
-                <img
+            >
-                  src={brandLogo}
+              {isDarkLogoOnLeft && (
-                  alt=""
+                <div
-                  aria-hidden="true"
+                  className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-950/55"
-                  className="h-[35px] w-[35px] object-contain"
+                  title="系统 Logo"
-                  onError={handleBrandLogoError}
+                >
-                />
+                  <img
-              </div>
+                    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>

frontend-web/src/styles/globals.css

@@ -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,