From e2041c0b0706c07986cbdb09588ea3f0492294b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= Date: Wed, 22 Jul 2026 14:55:42 +0800 Subject: [PATCH] feat(frontend): add theme variants and compact navigation config --- frontend-web/.env.example | 2 + frontend-web/public/runtime-config.js | 4 + frontend-web/src/App.tsx | 2 +- .../workspace/appearance-controls.tsx | 8 +- .../components/workspace/cm-chat-sidebar.tsx | 43 ++++--- .../settings/appearance-settings-page.tsx | 85 +++++++++---- .../workspace/workspace-container.tsx | 15 ++- .../workspace/workspace-sidebar.tsx | 12 +- frontend-web/src/contexts/ThemeContext.tsx | 34 ++++- frontend-web/src/core/auth/external-login.ts | 20 ++- frontend-web/src/core/embed/background.ts | 15 ++- frontend-web/src/core/embed/embed-session.ts | 11 +- frontend-web/src/core/embed/params.ts | 7 +- frontend-web/src/core/i18n/locales/en-US.ts | 6 +- frontend-web/src/core/i18n/locales/types.ts | 6 +- frontend-web/src/core/i18n/locales/zh-CN.ts | 6 +- frontend-web/src/core/system-settings/api.ts | 2 +- frontend-web/src/env.ts | 6 + frontend-web/src/pages/ChatPage.tsx | 14 +- frontend-web/src/pages/LightAppIframeView.tsx | 10 +- frontend-web/src/pages/LightAppListPage.tsx | 58 +++++++-- .../src/pages/LightAppManagementPage.tsx | 2 +- frontend-web/src/pages/LightAppNoteQAPage.tsx | 5 +- .../src/pages/NotebookAIWritingPage.tsx | 2 +- frontend-web/src/pages/PageRoutes.tsx | 14 +- frontend-web/src/pages/WorkspaceRoutes.tsx | 18 ++- .../src/pages/light-app-management.css | 52 ++++++++ frontend-web/src/pages/light-app-pages.css | 5 + .../src/strategy-components/lib/light-app.ts | 9 +- frontend-web/src/styles/globals.css | 120 ++++++++++++++++++ .../app/gateway/routers/system_settings.py | 6 +- .../deerflow/config/system_settings.py | 6 +- 32 files changed, 499 insertions(+), 106 deletions(-) diff --git a/frontend-web/.env.example b/frontend-web/.env.example index 1b3d80bb..eea12c4c 100644 --- a/frontend-web/.env.example +++ b/frontend-web/.env.example @@ -50,4 +50,6 @@ # 可选 # VITE_CANVAS_LANGGRAPH_BASE_URL= # VITE_STATIC_WEBSITE_ONLY= +# 部署级紧凑导航:true 时固定收起工作台左侧栏,并隐藏换肤与全量/简洁模式切换。 +# VITE_FORCE_COLLAPSED_SIDEBAR=false # VITE_GITHUB_OAUTH_TOKEN= diff --git a/frontend-web/public/runtime-config.js b/frontend-web/public/runtime-config.js index e6f21405..54e4bc09 100644 --- a/frontend-web/public/runtime-config.js +++ b/frontend-web/public/runtime-config.js @@ -91,6 +91,10 @@ window.__CM_RUNTIME_CONFIG__ = { // 静态站点模式开关;一般部署业务系统时保持 false。 VITE_STATIC_WEBSITE_ONLY: "false", + // 紧凑导航开关:true 时固定使用简洁布局,工作台左侧栏收起为菜单图标, + // 隐藏系统 Logo、换肤按钮以及“全量/简洁模式”切换。修改后刷新页面即可生效。 + VITE_FORCE_COLLAPSED_SIDEBAR: "false", + // GitHub OAuth Token;不使用 GitHub 相关能力时留空。 VITE_GITHUB_OAUTH_TOKEN: "", }; diff --git a/frontend-web/src/App.tsx b/frontend-web/src/App.tsx index a4a67c48..e3978689 100644 --- a/frontend-web/src/App.tsx +++ b/frontend-web/src/App.tsx @@ -86,7 +86,7 @@ function AppProviders({ children }: { children: React.ReactNode }) { attribute="class" storageKey="strategy-theme" defaultTheme="light" - themes={["light", "dark", "lightblue"]} + themes={["light", "dark", "lightblue", "lightgreen"]} enableSystem={false} disableTransitionOnChange forcedTheme={forcedTheme} diff --git a/frontend-web/src/components/workspace/appearance-controls.tsx b/frontend-web/src/components/workspace/appearance-controls.tsx index c11534b0..c7271931 100644 --- a/frontend-web/src/components/workspace/appearance-controls.tsx +++ b/frontend-web/src/components/workspace/appearance-controls.tsx @@ -14,6 +14,7 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { useTheme, type ThemeType } from "@/contexts/ThemeContext"; +import { env } from "@/env"; import { useAppearanceSettings, useLayoutMode } from "@/core/system-settings/hooks"; import { cn } from "@/lib/utils"; import { buildLightAppUrl } from "@/strategy-components/lib/light-app"; @@ -26,9 +27,10 @@ import { buildLightAppUrl } from "@/strategy-components/lib/light-app"; */ export type AppearanceControlTone = "banner-dark" | "banner-light" | "content"; -// 换肤色板:红色=红白主题(light),蓝色=浅蓝主题(lightblue),深蓝色=深色主题(dark) +// 换肤色板:红色=红白主题(light),绿色=WeKnora 绿色主题(lightgreen),蓝色=浅蓝主题(lightblue),深蓝色=深色主题(dark) export const THEME_SWATCHES: { id: ThemeType; label: string; color: string }[] = [ { id: "light", label: "红色", color: "#cf1322" }, + { id: "lightgreen", label: "绿色", color: "#07c05f" }, { id: "lightblue", label: "蓝色", color: "#0062d9" }, { id: "dark", label: "深蓝色", color: "#002466" }, ]; @@ -78,6 +80,8 @@ export function CompactShortcutButtons({ tone }: { tone: AppearanceControlTone } } export function ThemeSwitcher({ tone }: { tone: AppearanceControlTone }) { + if (env.FORCE_COLLAPSED_SIDEBAR) return null; + const { theme, setTheme } = useTheme(); const [open, setOpen] = useState(false); const closeTimer = useRef | null>(null); @@ -180,6 +184,8 @@ export function LayoutModeSwitcher({ fallback?: "full" | "compact"; navigateTo?: string | null; }) { + if (env.FORCE_COLLAPSED_SIDEBAR) return null; + const [mode, setLayoutMode] = useLayoutMode(); const navigate = useNavigate(); const current = mode ?? fallback; diff --git a/frontend-web/src/components/workspace/cm-chat-sidebar.tsx b/frontend-web/src/components/workspace/cm-chat-sidebar.tsx index 1656736a..ac30cd82 100644 --- a/frontend-web/src/components/workspace/cm-chat-sidebar.tsx +++ b/frontend-web/src/components/workspace/cm-chat-sidebar.tsx @@ -58,9 +58,12 @@ const NAV_ITEMS: NavItem[] = [ export function CmChatSidebar({ onCollapse, collapsed = false, + forceCollapsed = false, }: { onCollapse?: () => void; collapsed?: boolean; + /** Deployment-level compact navigation: retain only accessible menu icons. */ + forceCollapsed?: boolean; }) { const pathname = usePathname(); const navigate = useNavigate(); @@ -76,22 +79,32 @@ export function CmChatSidebar({ if (collapsed) { return (