wsk/deerflow-code
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): add theme variants and compact navigation config

Browse Source
This commit is contained in:
董宏凯 committed 2026-07-22 14:55:42 +08:00
1 parent 2fa7000ff7
commit e2041c0b07
32 files changed
+448 -55
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend-web/.env.example
+2
View File
@@ -50,4 +50,6 @@
# 可选
# VITE_CANVAS_LANGGRAPH_BASE_URL=
# VITE_STATIC_WEBSITE_ONLY=
# 部署级紧凑导航：true 时固定收起工作台左侧栏，并隐藏换肤与全量/简洁模式切换。
# VITE_FORCE_COLLAPSED_SIDEBAR=false
# VITE_GITHUB_OAUTH_TOKEN=
frontend-web/public/runtime-config.js
+4
View File
@@ -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: "",
};
frontend-web/src/App.tsx
+1 -1
View File
@@ -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}
frontend-web/src/components/workspace/appearance-controls.tsx
+7 -1
View File
@@ -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<ReturnType<typeof setTimeout> | 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;
frontend-web/src/components/workspace/cm-chat-sidebar.tsx
+14 -1
View File
@@ -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,6 +79,8 @@ export function CmChatSidebar({
if (collapsed) {
return (
<aside className="flex h-full min-h-0 w-14 flex-col border-r border-slate-200/80 bg-white text-slate-700 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200">
{!forceCollapsed && (
<>
<button
type="button"
onClick={onCollapse}
@@ -90,8 +95,16 @@ export function CmChatSidebar({
/>
</button>
<div className="mx-2 mt-2 h-px shrink-0 bg-slate-200/80 dark:bg-slate-800" />
</>
)}
<nav className="flex shrink-0 flex-col items-center gap-1 px-2 py-3" aria-label="工作台导航">
<nav
className={cn(
"flex shrink-0 flex-col items-center gap-1 px-2 py-3",
forceCollapsed && "pt-4",
)}
aria-label="工作台导航"
>
{NAV_ITEMS.map((item) => {
const active = item.href === NEW_CHAT_PATH
? pathname === NEW_CHAT_PATH
frontend-web/src/components/workspace/settings/appearance-settings-page.tsx
+38 -7
View File
@@ -7,6 +7,7 @@ import {
ExternalLink,
LayoutGridIcon,
LayoutIcon,
LeafIcon,
ListIcon,
MoonIcon,
PanelLeftIcon,
@@ -70,7 +71,7 @@ const languageOptions: { value: Locale; label: string }[] = [
{ value: "zh-CN", label: zhCN.locale.localName },
];
const DEFAULT_SHORTCUT_THEME_MAP = "red=red;blue=blue;dark-blue=dark-blue";
const DEFAULT_SHORTCUT_THEME_MAP = "red=red;green=green;blue=blue;dark-blue=dark-blue";
function makeShortcutId() {
if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
@@ -212,13 +213,19 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
};
const handleSetGlobalDefault = async (
value: "light" | "dark" | "lightblue",
value: "light" | "dark" | "lightblue" | "lightgreen",
) => {
if (value === globalDefault) return;
try {
await updateAppearance.mutateAsync({ default_theme: value });
const label =
value === "light" ? "浅色" : value === "dark" ? "深色" : "浅蓝";
value === "light"
? "浅色"
: value === "dark"
? "深色"
: value === "lightgreen"
? "绿色"
: "浅蓝";
toast.success(`已将系统默认主题设置为${label}`);
} catch (e) {
toast.error(e instanceof Error ? e.message : "保存失败");
@@ -374,6 +381,12 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
description: t.settings.appearance.lightblueDescription,
icon: DropletIcon,
},
{
id: "lightgreen",
label: t.settings.appearance.lightgreen,
description: t.settings.appearance.lightgreenDescription,
icon: LeafIcon,
},
],
[
t.settings.appearance.dark,
@@ -382,6 +395,8 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
t.settings.appearance.lightDescription,
t.settings.appearance.lightblue,
t.settings.appearance.lightblueDescription,
t.settings.appearance.lightgreen,
t.settings.appearance.lightgreenDescription,
],
);
@@ -399,7 +414,7 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
label={option.label}
description={option.description}
active={currentTheme === option.id}
mode={option.id as "light" | "dark" | "lightblue"}
mode={option.id as "light" | "dark" | "lightblue" | "lightgreen"}
onSelect={(value) => setTheme(value)}
/>
))}
@@ -551,12 +566,24 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
<DropletIcon className="mr-1.5 size-4" />
浅蓝
</Button>
<Button
type="button"
variant={globalDefault === "lightgreen" ? "default" : "outline"}
size="sm"
onClick={() => void handleSetGlobalDefault("lightgreen")}
disabled={updateAppearance.isPending}
>
<LeafIcon className="mr-1.5 size-4" />
绿色
</Button>
<p className="text-muted-foreground ml-2 text-xs">
当前系统默认：
{globalDefault === "light"
? "浅色"
: globalDefault === "dark"
? "深色"
: globalDefault === "lightgreen"
? "绿色"
: "浅蓝"}
</p>
</div>
@@ -1074,8 +1101,8 @@ function ThemePreviewCard({
label: string;
description: string;
active: boolean;
mode: "light" | "dark" | "lightblue";
onSelect: (mode: "light" | "dark" | "lightblue") => void;
mode: "light" | "dark" | "lightblue" | "lightgreen";
onSelect: (mode: "light" | "dark" | "lightblue" | "lightgreen") => void;
}) {
const previewMode = mode;
return (
@@ -1107,6 +1134,8 @@ function ThemePreviewCard({
? "border-neutral-800 bg-neutral-900 text-neutral-200"
: previewMode === "lightblue"
? "border-blue-200 bg-white text-slate-900"
: previewMode === "lightgreen"
? "border-emerald-200 bg-white text-emerald-950"
: "border-slate-200 bg-white text-slate-900",
)}
>
@@ -1118,7 +1147,9 @@ function ThemePreviewCard({
? "bg-emerald-400"
: previewMode === "lightblue"
? "bg-blue-500"
: "bg-emerald-500",
: previewMode === "lightgreen"
? "bg-[#07c05f]"
: "bg-[#cf1322]",
)}
/>
<div className="h-2 w-10 rounded-full bg-current/20" />
frontend-web/src/components/workspace/workspace-container.tsx
+5
View File
@@ -13,6 +13,7 @@ import {
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { useI18n } from "@/core/i18n/hooks";
import { env } from "@/env";
import { cn } from "@/lib/utils";
import { ThemeSwitcher } from "@/components/workspace/appearance-controls";
import { UserIdentityBadge } from "@/components/workspace/user-identity-badge";
@@ -97,11 +98,15 @@ export function WorkspaceHeader({
</div>
<div className="flex items-center gap-2 px-4">
{rightActions}
{!env.FORCE_COLLAPSED_SIDEBAR && (
<>
<ThemeSwitcher tone="content" />
<div
aria-hidden="true"
className="mx-1 h-6 w-px bg-slate-200 dark:bg-slate-700"
/>
</>
)}
<UserIdentityBadge variant="topbar" />
</div>
</header>
frontend-web/src/components/workspace/workspace-sidebar.tsx
+10 -2
View File
@@ -12,8 +12,12 @@ import { CmChatSidebar } from "./cm-chat-sidebar";
export function WorkspaceSidebar({
className,
compactChrome: _compactChrome,
forceCollapsed = false,
...props
}: React.ComponentProps<typeof Sidebar> & { compactChrome?: boolean }) {
}: React.ComponentProps<typeof Sidebar> & {
compactChrome?: boolean;
forceCollapsed?: boolean;
}) {
const { open: isSidebarOpen, toggleSidebar } = useSidebar();
return (
@@ -36,7 +40,11 @@ export function WorkspaceSidebar({
{...props}
>
<SidebarContent>
<CmChatSidebar onCollapse={toggleSidebar} collapsed={!isSidebarOpen} />
<CmChatSidebar
onCollapse={forceCollapsed ? undefined : toggleSidebar}
collapsed={!isSidebarOpen}
forceCollapsed={forceCollapsed}
/>
</SidebarContent>
</Sidebar>
</div>
frontend-web/src/contexts/ThemeContext.tsx
+30 -4
View File
@@ -10,7 +10,7 @@ import { useTheme as useNextTheme } from 'next-themes';
import { useAppearanceSettings } from '@/core/system-settings/hooks';
// 主题类型
export type ThemeType = 'dark' | 'light' | 'lightblue';
export type ThemeType = 'dark' | 'light' | 'lightblue' | 'lightgreen';
// 主题配置
export interface ThemeConfig {
@@ -104,6 +104,28 @@ const themes: Record<ThemeType, ThemeConfig> = {
overlay: 'black/30',
},
},
lightgreen: {
type: 'lightgreen',
name: '绿色主题',
colors: {
background: 'white',
backgroundSecondary: 'emerald-50',
text: 'emerald-950',
textSecondary: 'emerald-800',
primary: 'emerald-600',
primaryHover: 'emerald-500',
border: 'emerald-200',
accent: 'emerald-700',
success: 'emerald-600',
warning: 'amber-500',
error: 'red-600',
card: 'white',
cardHover: 'emerald-50',
input: 'white',
inputBorder: 'emerald-200',
overlay: 'black/30',
},
},
};
const STORAGE_KEY = 'strategy-theme';
@@ -121,6 +143,7 @@ function readPersistedTheme(): ThemeType {
const saved = localStorage.getItem(STORAGE_KEY);
if (saved === 'dark') return 'dark';
if (saved === 'lightblue') return 'lightblue';
if (saved === 'lightgreen') return 'lightgreen';
return 'light';
}
@@ -179,7 +202,8 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
current &&
current !== 'light' &&
current !== 'dark' &&
current !== 'lightblue'
current !== 'lightblue' &&
current !== 'lightgreen'
) {
// Garbage value — wipe it so the boot-sync below can take over.
localStorage.removeItem(STORAGE_KEY);
@@ -216,6 +240,8 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
? 'dark'
: effectiveTheme === 'lightblue'
? 'lightblue'
: effectiveTheme === 'lightgreen'
? 'lightgreen'
: 'light'
: readPersistedTheme();
@@ -234,8 +260,8 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
root.removeAttribute('theme-mode');
root.classList.remove('dark');
if (theme === 'lightblue') {
root.setAttribute('data-theme', 'lightblue');
if (theme === 'lightblue' || theme === 'lightgreen') {
root.setAttribute('data-theme', theme);
} else {
root.removeAttribute('data-theme');
}
frontend-web/src/core/auth/external-login.ts
+18 -2
View File
@@ -10,6 +10,7 @@
*/
import { authStorageGet, authStorageSet } from "@/core/auth/scoped-storage";
import type { ThemeType } from "@/contexts/ThemeContext";
export const EXTERNAL_LOGIN_STORAGE_KEYS = {
ticket: "login.ticket",
@@ -58,6 +59,21 @@ export function readExternalLoginParams(): Required<ExternalLoginParams> {
* - ``blue`` → 暂无该主题,先用浅色代替(命中 else 分支)
* 其余/缺省同样回退浅色。将来若新增 blue 主题,在此扩展映射即可。
*/
export function resolveThemeFromQuery(themeParam: string | null | undefined): "dark" | "light" {
return themeParam === "dark-blue" ? "dark" : "light";
export function resolveThemeFromQuery(themeParam: string | null | undefined): ThemeType {
switch (themeParam?.trim().toLowerCase()) {
case "dark":
case "dark-blue":
case "darkblue":
return "dark";
case "blue":
case "lightblue":
case "light-blue":
return "lightblue";
case "green":
case "lightgreen":
case "light-green":
return "lightgreen";
default:
return "light";
}
}
frontend-web/src/core/embed/background.ts
+11 -4
View File
@@ -1,5 +1,6 @@
import { useEffect, useMemo, useState } from "react";
import { useLocation } from "react-router-dom";
import type { ThemeType } from "@/contexts/ThemeContext";
/**
* 公开页（被第三方 iframe 嵌套）的可配置外观:背景色 + 整体明暗主题。
@@ -63,19 +64,25 @@ function readFromSearch(search: string): PublicBackground {
*/
export function normalizePublicTheme(
raw: string | null | undefined,
): "dark" | "light" | undefined {
): ThemeType | undefined {
const value = raw?.trim().toLowerCase();
if (!value) return undefined;
if (value === "dark" || value === "dark-blue" || value === "深蓝" || value === "深色") {
return "dark";
}
if (value === "blue" || value === "lightblue" || value === "light-blue" || value === "浅蓝") {
return "lightblue";
}
if (value === "green" || value === "lightgreen" || value === "light-green" || value === "绿色") {
return "lightgreen";
}
if (value === "light" || value === "red" || value === "红白" || value === "浅色") {
return "light";
}
return undefined;
}
function readThemeFromSearch(search: string): "dark" | "light" | undefined {
function readThemeFromSearch(search: string): ThemeType | undefined {
const params = new URLSearchParams(search.startsWith("?") ? search : `?${search}`);
return normalizePublicTheme(params.get("theme"));
}
@@ -86,7 +93,7 @@ function readThemeFromSearch(search: string): "dark" | "light" | undefined {
* 与 `usePublicBackground` 同样合并两处查询串(hash 路由内优先),
* postMessage 的动态值优先级最高。返回 undefined 表示外部未指定。
*/
export function usePublicEmbedTheme(): "dark" | "light" | undefined {
export function usePublicEmbedTheme(): ThemeType | undefined {
const location = useLocation();
const fromUrl = useMemo(() => {
@@ -97,7 +104,7 @@ export function usePublicEmbedTheme(): "dark" | "light" | undefined {
return inner ?? outer;
}, [location.search]);
const [override, setOverride] = useState<"dark" | "light" | undefined>(undefined);
const [override, setOverride] = useState<ThemeType | undefined>(undefined);
useEffect(() => {
function onMessage(event: MessageEvent) {
frontend-web/src/core/embed/embed-session.ts
+9 -2
View File
@@ -27,9 +27,11 @@
* 正常页标签页里既无这些参数也无这份会话 → 所有 `isXxx()` 恒为 false，完全不受影响。
*/
import type { ThemeType } from "@/contexts/ThemeContext";
const EMBED_SESSION_KEY = "embed.session";
export type EmbedTheme = "light" | "dark";
export type EmbedTheme = ThemeType;
/** 本标签页的嵌入会话（按需置位的若干独立开关）。 */
export interface EmbedSession {
@@ -92,6 +94,8 @@ export function readIsolateParam(search: string): FlagParam {
export function resolveEmbedThemeMode(raw: string | null | undefined): EmbedTheme {
const v = (raw ?? "").trim().toLowerCase();
if (v === "dark" || v === "dark-blue" || v === "深色" || v === "深蓝") return "dark";
if (v === "blue" || v === "lightblue" || v === "light-blue" || v === "浅蓝") return "lightblue";
if (v === "green" || v === "lightgreen" || v === "light-green" || v === "绿色") return "lightgreen";
return "light";
}
@@ -108,7 +112,10 @@ export function readEmbedSession(): EmbedSession | null {
const p = JSON.parse(raw) as Partial<EmbedSession>;
return {
embed: p.embed === true,
theme: p.theme === "dark" ? "dark" : "light",
theme:
p.theme === "dark" || p.theme === "lightblue" || p.theme === "lightgreen"
? p.theme
: "light",
hideJump: p.hideJump === true,
hideChrome: p.hideChrome === true,
isolate: p.isolate === true,
frontend-web/src/core/embed/params.ts
+5 -2
View File
@@ -1,4 +1,5 @@
import { resolveThemeFromQuery } from "@/core/auth/external-login";
import type { ThemeType } from "@/contexts/ThemeContext";
const DEFAULT_USERNAME = "guest";
@@ -41,7 +42,7 @@ export function resolveEmbedChatParams(search: string): EmbedChatParams {
return { sessionId, message, username, theme };
}
export function resolveEmbedTheme(themeParam: string): "dark" | "light" {
export function resolveEmbedTheme(themeParam: string): ThemeType {
return resolveThemeFromQuery(themeParam || null);
}
@@ -50,8 +51,10 @@ export function resolveEmbedTheme(themeParam: string): "dark" | "light" {
* 只有明确传 light/红白 才走浅色，其余（dark / dark-blue / 深蓝 / 空）一律深蓝。
* 不复用 `resolveEmbedTheme`（它只认严格的 "dark-blue"，传 "dark" 会被判成浅色）。
*/
export function resolveEmbedRoundtableTheme(raw: string): "dark" | "light" {
export function resolveEmbedRoundtableTheme(raw: string): ThemeType {
const v = raw.trim().toLowerCase();
if (v === "light" || v === "red" || v === "红白") return "light";
if (v === "blue" || v === "lightblue" || v === "light-blue" || v === "浅蓝") return "lightblue";
if (v === "green" || v === "lightgreen" || v === "light-green" || v === "绿色") return "lightgreen";
return "dark";
}
frontend-web/src/core/i18n/locales/en-US.ts
+2
View File
@@ -449,10 +449,12 @@ export const enUS: Translations = {
light: "Light",
dark: "Dark",
lightblue: "Light Blue",
lightgreen: "Green",
systemDescription: "Match the operating system preference automatically.",
lightDescription: "Bright palette with higher contrast for daytime.",
darkDescription: "Dim palette that reduces glare for focus.",
lightblueDescription: "A crisp light palette built around blue.",
lightgreenDescription: "A crisp light palette built around WeKnora green.",
languageTitle: "Language",
languageDescription: "Switch between languages.",
},
frontend-web/src/core/i18n/locales/types.ts
+2
View File
@@ -384,10 +384,12 @@ export interface Translations {
light: string;
dark: string;
lightblue: string;
lightgreen: string;
systemDescription: string;
lightDescription: string;
darkDescription: string;
lightblueDescription: string;
lightgreenDescription: string;
languageTitle: string;
languageDescription: string;
};
frontend-web/src/core/i18n/locales/zh-CN.ts
+2
View File
@@ -430,10 +430,12 @@ export const zhCN: Translations = {
light: "浅色",
dark: "深色",
lightblue: "浅蓝",
lightgreen: "绿色",
systemDescription: "自动跟随系统主题。",
lightDescription: "更明亮的配色，适合日间使用。",
darkDescription: "更暗的配色，减少眩光方便专注。",
lightblueDescription: "以蓝色为主色的清爽浅色配色。",
lightgreenDescription: "采用 WeKnora 绿色的清爽浅色配色。",
languageTitle: "语言",
languageDescription: "在不同语言之间切换。",
},
frontend-web/src/core/system-settings/api.ts
+1 -1
View File
@@ -276,7 +276,7 @@ export async function updatePublishSquares(
return data;
}
export type ThemeMode = "light" | "dark" | "lightblue";
export type ThemeMode = "light" | "dark" | "lightblue" | "lightgreen";
export type ViewMode = "card" | "list";
export type LayoutMode = "full" | "compact";
export type CompactShortcutParamType = "login" | "theme";
frontend-web/src/env.ts
+6
View File
@@ -29,5 +29,11 @@ export const env = {
NEXT_PUBLIC_NOTE_API_BASE_URL: readRuntimeEnv("VITE_NOTE_API_BASE_URL"),
NEXT_PUBLIC_NOTEBOOK_API_BASE_URL: readRuntimeEnv("VITE_AIPI_BACKENP_URL"),
NEXT_PUBLIC_STATIC_WEBSITE_ONLY: readRuntimeEnv("VITE_STATIC_WEBSITE_ONLY"),
/**
* Deployment-level compact navigation mode. This is intentionally a runtime
* flag so an operations deployment can switch the shell without rebuilding
* the frontend bundle.
*/
FORCE_COLLAPSED_SIDEBAR: readRuntimeFlag("VITE_FORCE_COLLAPSED_SIDEBAR"),
GITHUB_OAUTH_TOKEN: readRuntimeEnv("VITE_GITHUB_OAUTH_TOKEN"),
};
frontend-web/src/pages/ChatPage.tsx
+4
View File
@@ -488,12 +488,16 @@ export default function ChatPage() {
{/* 简洁模式无全局顶栏：把换肤 + 界面模式切换搬到页面级顶栏右上角，
与全量模式 Header 右上角保持一致（content 配色贴浅底顶栏）。 */}
{compactChrome ? (
<>
{!env.FORCE_COLLAPSED_SIDEBAR && (
<>
<ThemeSwitcher tone="content" />
<div
className="bg-border/70 mx-1 h-6 w-px shrink-0"
aria-hidden
/>
</>
)}
<UserIdentityBadge variant="topbar" />
</>
) : (
frontend-web/src/pages/LightAppIframeView.tsx
+8 -2
View File
@@ -19,9 +19,15 @@ export default function LightAppIframeView() {
// 由 useTheme 的 theme 直接换算主题色并显式传入，切主题时 src 立即重建、
// 把新主题色传给被嵌套应用（不依赖 <html> 的 dark class，避免时序读旧值）。
// 深色=dark-blue，浅蓝=blue，其余(红白)=red。
// 深色=dark-blue，绿色=green，浅蓝=blue，其余(红白)=red。
const themeColor: AppThemeColor =
theme === "dark" ? "dark-blue" : theme === "lightblue" ? "blue" : "red";
theme === "dark"
? "dark-blue"
: theme === "lightgreen"
? "green"
: theme === "lightblue"
? "blue"
: "red";
const src = useMemo(
() => (app ? buildLightAppUrl(app, undefined, themeColor) : ""),
[app, themeColor],
frontend-web/src/pages/LightAppListPage.tsx
+46 -12
View File
@@ -34,7 +34,7 @@ import { toast } from "sonner";
import { Pagination } from "@/components/ui/pagination";
import { cn } from "@/lib/utils";
import { useTheme } from "@/contexts/ThemeContext";
import { useTheme, type ThemeType } from "@/contexts/ThemeContext";
import { useLightApps, type LightApp } from "@/strategy-components/api/light-apps";
import { buildLightAppUrl } from "@/strategy-components/lib/light-app";
@@ -64,12 +64,46 @@ function hashIndex(str: string, mod: number): number {
return mod > 0 ? h % mod : 0;
}
function getLightAccent(theme: ThemeType) {
if (theme === "lightgreen") {
return {
dot: "bg-[#07C05F]",
badge: "border-[#07C05F]/15 bg-[#E9F8EC] text-[#049B38]",
focus: "focus:border-[#07C05F]/60 focus:ring-[#07C05F]/20",
text: "text-[#049B38]",
hoverText: "group-hover:text-[#049B38]",
link: "text-[#049B38] hover:text-[#038626]",
button: "bg-[#07C05F] shadow-[0_1px_3px_rgba(7,192,95,0.2)] hover:bg-[#08DD6E]",
};
}
if (theme === "lightblue") {
return {
dot: "bg-[#0062D9]",
badge: "border-[#0062D9]/15 bg-[#EAF4FF] text-[#0062D9]",
focus: "focus:border-[#0062D9]/60 focus:ring-[#0062D9]/20",
text: "text-[#0062D9]",
hoverText: "group-hover:text-[#0062D9]",
link: "text-[#0062D9] hover:text-[#0056C6]",
button: "bg-[#0062D9] shadow-[0_1px_3px_rgba(0,98,217,0.2)] hover:bg-[#0079FE]",
};
}
return {
dot: "bg-[#CF1322]",
badge: "border-[#CF1322]/15 bg-[#FFF1F0] text-[#CF1322]",
focus: "focus:border-[#CF1322]/60 focus:ring-[#CF1322]/20",
text: "text-[#CF1322]",
hoverText: "group-hover:text-[#CF1322]",
link: "text-[#CF1322] hover:text-[#A8071A]",
button: "bg-[#CF1322] shadow-[0_1px_3px_rgba(207,19,34,0.2)] hover:bg-[#A8071A]",
};
}
export default function LightAppListPage() {
const [search, setSearch] = useState("");
const [page, setPage] = useState(1);
const [copiedId, setCopiedId] = useState<string | null>(null);
const { theme } = useTheme();
const isLightBlue = theme === 'lightblue';
const lightAccent = getLightAccent(theme);
const { data: apps = [], isLoading } = useLightApps({
appType: "window_open",
@@ -118,13 +152,13 @@ export default function LightAppListPage() {
<div className="space-y-1">
<div className="flex items-center gap-2.5">
<span className="relative flex size-3">
<span className={cn("absolute inline-flex size-full animate-ping rounded-full opacity-75", isLightBlue ? "bg-[#0062D9]" : "bg-[#CF1322]", "dark:bg-[#1677FF]")} />
<span className={cn("relative inline-flex size-3 rounded-full", isLightBlue ? "bg-[#0062D9]" : "bg-[#CF1322]", "dark:bg-[#1677FF]")} />
<span className={cn("absolute inline-flex size-full animate-ping rounded-full opacity-75", lightAccent.dot, "dark:bg-[#1677FF]")} />
<span className={cn("relative inline-flex size-3 rounded-full", lightAccent.dot, "dark:bg-[#1677FF]")} />
</span>
<h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-[#E8EDF5]">
应用列表
</h1>
<span className={cn("rounded-[5px] border px-2 py-0.5 font-mono text-xs font-medium dark:border-[#1677FF]/30 dark:bg-[#1677FF]/15 dark:text-[#4096FF]", isLightBlue ? "border-[#0062D9]/15 bg-[#EAF4FF] text-[#0062D9]" : "border-[#CF1322]/15 bg-[#FFF1F0] text-[#CF1322]")}>
<span className={cn("rounded-[5px] border px-2 py-0.5 font-mono text-xs font-medium dark:border-[#1677FF]/30 dark:bg-[#1677FF]/15 dark:text-[#4096FF]", lightAccent.badge)}>
导航工作台
</span>
</div>
@@ -142,7 +176,7 @@ export default function LightAppListPage() {
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="键入应用名称、目标地址、或描述，实时过滤检索…"
className={cn("w-full rounded-[5px] border border-zinc-200 bg-zinc-50/50 py-3 pl-10 pr-10 text-sm transition focus:bg-white focus:outline-none focus:ring-2 dark:border-[#1A2F5A] dark:bg-[#0C1836] dark:text-[#C5CFE0] dark:placeholder-[#4A6491] dark:focus:border-[#1677FF]/60 dark:focus:bg-[#122347] dark:focus:ring-[#1677FF]/25", isLightBlue ? "focus:border-[#0062D9]/60 focus:ring-[#0062D9]/20" : "focus:border-[#CF1322]/60 focus:ring-[#CF1322]/20")}
className={cn("w-full rounded-[5px] border border-zinc-200 bg-zinc-50/50 py-3 pl-10 pr-10 text-sm transition focus:bg-white focus:outline-none focus:ring-2 dark:border-[#1A2F5A] dark:bg-[#0C1836] dark:text-[#C5CFE0] dark:placeholder-[#4A6491] dark:focus:border-[#1677FF]/60 dark:focus:bg-[#122347] dark:focus:ring-[#1677FF]/25", lightAccent.focus)}
/>
{search && (
<button
@@ -161,13 +195,13 @@ export default function LightAppListPage() {
<div className="-mt-2 flex items-center justify-between">
<div className="text-xs font-medium text-zinc-500 dark:text-[#6E88B0]">
检索到最终结果:{" "}
<span className={cn("font-bold dark:text-[#4096FF]", isLightBlue ? "text-[#0062D9]" : "text-[#CF1322]")}>{apps.length}</span> 个关联应用
<span className={cn("font-bold dark:text-[#4096FF]", lightAccent.text)}>{apps.length}</span> 个关联应用
</div>
{search && (
<button
type="button"
onClick={() => setSearch("")}
className={cn("text-xs font-medium underline dark:text-[#4096FF] dark:hover:text-[#1677FF]", isLightBlue ? "text-[#0062D9] hover:text-[#0056C6]" : "text-[#CF1322] hover:text-[#A8071A]")}
className={cn("text-xs font-medium underline dark:text-[#4096FF] dark:hover:text-[#1677FF]", lightAccent.link)}
>
重置过滤条件
</button>
@@ -239,7 +273,7 @@ function AppCard({
onOpen: () => void;
}) {
const { theme } = useTheme();
const isLightBlue = theme === 'lightblue';
const lightAccent = getLightAccent(theme);
const Icon = ICON_POOL[hashIndex(app.appId, ICON_POOL.length)];
const cardTheme = THEME_POOL[hashIndex(app.appId, THEME_POOL.length)];
@@ -256,7 +290,7 @@ function AppCard({
</div>
</div>
<h4 className={cn("mb-2 line-clamp-1 text-base font-bold leading-snug text-zinc-900 transition-colors dark:text-[#E8EDF5] dark:group-hover:text-[#4096FF]", isLightBlue ? "group-hover:text-[#0062D9]" : "group-hover:text-[#CF1322]")}>
<h4 className={cn("mb-2 line-clamp-1 text-base font-bold leading-snug text-zinc-900 transition-colors dark:text-[#E8EDF5] dark:group-hover:text-[#4096FF]", lightAccent.hoverText)}>
{app.name}
</h4>
@@ -270,7 +304,7 @@ function AppCard({
<div className="mb-4 rounded-[5px] bg-zinc-50/70 p-3 dark:bg-[#0C1836]">
<div className="mb-1 flex items-center justify-between text-[10px] font-semibold text-zinc-400 dark:text-[#6E88B0]">
<span>拼接后目标路由终端:</span>
<span className={cn("text-[9px] font-bold uppercase tracking-wider dark:text-[#4096FF]", isLightBlue ? "text-[#0062D9]" : "text-[#CF1322]")}>
<span className={cn("text-[9px] font-bold uppercase tracking-wider dark:text-[#4096FF]", lightAccent.text)}>
自动拼接已激活参
</span>
</div>
@@ -312,7 +346,7 @@ function AppCard({
<button
type="button"
onClick={onOpen}
className={cn("flex items-center justify-center gap-1.5 rounded-[5px] px-3 py-2 text-xs font-semibold text-white transition active:scale-[0.98] dark:bg-[#1677FF] dark:shadow-none dark:hover:bg-[#0958D9]", isLightBlue ? "bg-[#0062D9] shadow-[0_1px_3px_rgba(0,98,217,0.2)] hover:bg-[#0079FE]" : "bg-[#CF1322] shadow-[0_1px_3px_rgba(207,19,34,0.2)] hover:bg-[#A8071A]")}
className={cn("flex items-center justify-center gap-1.5 rounded-[5px] px-3 py-2 text-xs font-semibold text-white transition active:scale-[0.98] dark:bg-[#1677FF] dark:shadow-none dark:hover:bg-[#0958D9]", lightAccent.button)}
>
<span>进入应用</span>
<ArrowUpRight className="size-3.5" />
frontend-web/src/pages/LightAppManagementPage.tsx
+1 -1
View File
@@ -93,7 +93,7 @@ const newParam = (): LightAppRouteParam => ({
paramType: "login",
source: "access_token",
customValue: "",
themeValue: "red=red;blue=blue;dark-blue=dark-blue",
themeValue: "red=red;green=green;blue=blue;dark-blue=dark-blue",
});
function formFromApp(app: LightApp): FormState {
frontend-web/src/pages/LightAppNoteQAPage.tsx
+3
View File
@@ -10,6 +10,7 @@ export default function LightAppNoteQAPage() {
const { theme } = useTheme();
const isDark = theme === "dark";
const isLightBlue = theme === 'lightblue';
const isLightGreen = theme === "lightgreen";
const [question, setQuestion] = useState("");
const handleSubmit = () => {
@@ -112,6 +113,8 @@ export default function LightAppNoteQAPage() {
"flex h-7 w-7 shrink-0 items-center justify-center rounded-full transition-colors",
isDark
? "bg-sky-500 text-white hover:bg-sky-400"
: isLightGreen
? "bg-[#07C05F] text-white hover:bg-[#08DD6E]"
: isLightBlue
? "bg-[#0062D9] text-white hover:bg-[#0079FE]"
: "bg-[#F5222D] text-white hover:bg-[#CF1322]",
frontend-web/src/pages/NotebookAIWritingPage.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import AIWritingPage from '@/open-canvas/pages/AIWritingPage';
import { getNotebookApiBaseURL } from '@/core/config';
import { useTheme, type ThemeType } from '@/contexts/ThemeContext';
const VALID_THEMES: ThemeType[] = ['dark', 'light', 'lightblue'];
const VALID_THEMES: ThemeType[] = ['dark', 'light', 'lightblue', 'lightgreen'];
interface NotebookTokenData {
doc_ids: number[];
frontend-web/src/pages/PageRoutes.tsx
+12 -2
View File
@@ -16,6 +16,7 @@ import { useTheme } from "@/contexts/ThemeContext";
import { useLocation } from "react-router-dom";
import { useActiveThirdLevel } from "@/core/page-layout/use-sidebar-menu";
import { useLayoutMode } from "@/core/system-settings/hooks";
import { env } from "@/env";
import WorkspaceRoutes from "./WorkspaceRoutes";
import StrategyRoutes from "./StrategyRoutes";
@@ -27,6 +28,7 @@ import { RoundtableJobNotifier } from "@/roundtable-planning/components/Roundtab
function PageLayout() {
const [collapsed, setCollapsed] = useState(false);
const forceCollapsedSidebar = env.FORCE_COLLAPSED_SIDEBAR;
const sidebarEnabled = useMemo(() => readSidebarEnabled(), []);
const location = useLocation();
const { theme } = useTheme();
@@ -42,7 +44,13 @@ function PageLayout() {
// 登录时置位）这一旧默认。这样无论是否走门户登录，「全量↔简洁」都能真正控制顶栏+侧边栏。
const [layoutMode] = useLayoutMode();
const chromeByPreference =
layoutMode === "full" ? true : layoutMode === "compact" ? false : sidebarEnabled;
forceCollapsedSidebar
? false
: layoutMode === "full"
? true
: layoutMode === "compact"
? false
: sidebarEnabled;
// iframe 嵌入模式（外部系统 `&embed=1`，按标签页 sessionStorage）：去掉全局导航栏 + 侧边栏，
// 只留问答/会商工作区本体。按 location 重算以跟随页内导航；非嵌入标签页恒为 false，不受影响。
const embedActive = useMemo(
@@ -60,7 +68,8 @@ function PageLayout() {
// 但它常被深链「上一步」从去 chrome 的工作区/新标签打开——那里 chromeByPreference 可能为 false
// （界面模式非全量、或会话级 sidebar 未置位），导致整页没有顶栏/侧栏。故对该路由**强制全局 chrome**
// （仍尊重 embed=1 嵌入态：外部 iframe 套用时仍隐藏）。
const forceChromeForDashboardAgent = location.pathname.includes("/strategy/dashboard-agent");
const forceChromeForDashboardAgent =
!forceCollapsedSidebar && location.pathname.includes("/strategy/dashboard-agent");
const isWorkspacePage = location.pathname.startsWith("/page/workspace");
const pageSidebarAllowed =
(forceChromeForDashboardAgent || chromeByPreference) &&
@@ -118,6 +127,7 @@ function PageLayout() {
headerHidden={!pageSidebarAllowed}
compactWorkspaceSidebar={pageSidebarAllowed || isWorkspacePage}
pageSidebarDark={isDark}
forceWorkspaceSidebarCollapsed={forceCollapsedSidebar}
/>
}
/>
frontend-web/src/pages/WorkspaceRoutes.tsx
+16 -2
View File
@@ -2,6 +2,7 @@ import type { CSSProperties, ReactNode } from 'react';
import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom';
import { getStoredAuth } from '@/core/auth';
import { env } from '@/env';
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
import { PromptInputProvider } from '@/components/ai-elements/prompt-input';
@@ -79,6 +80,8 @@ function isInIframe(): boolean {
}
function CompactAppearanceActions() {
if (env.FORCE_COLLAPSED_SIDEBAR) return null;
return (
<>
<CompactShortcutButtons tone="content" />
@@ -99,6 +102,7 @@ export function WorkspaceLayout({
wrapperOverflowHidden = false,
insetOverflowHidden = false,
pageSidebarDark = false,
forceWorkspaceSidebarCollapsed = false,
}: {
children: ReactNode;
pageSidebarCollapsed: boolean;
@@ -111,6 +115,7 @@ export function WorkspaceLayout({
wrapperOverflowHidden?: boolean;
insetOverflowHidden?: boolean;
pageSidebarDark?: boolean;
forceWorkspaceSidebarCollapsed?: boolean;
}) {
// 全量模式下通用问答（/page/workspace/chats*）的历史侧栏默认展开；其余紧凑页
// （如智能体对话，为聊天区更宽而默认收起）维持原默认。
@@ -144,11 +149,16 @@ export function WorkspaceLayout({
key={String(compactWorkspaceSidebar)}
data-page-sidebar-collapsed={pageSidebarCollapsed}
defaultOpen={
defaultHistorySidebarOpen ?? true
forceWorkspaceSidebarCollapsed ? false : (defaultHistorySidebarOpen ?? true)
}
open={forceWorkspaceSidebarCollapsed ? false : undefined}
onOpenChange={forceWorkspaceSidebarCollapsed ? () => undefined : undefined}
>
{!workspaceSidebarHidden && (
<WorkspaceSidebar compactChrome={compactWorkspaceSidebar} />
<WorkspaceSidebar
compactChrome={compactWorkspaceSidebar}
forceCollapsed={forceWorkspaceSidebarCollapsed}
/>
)}
<SidebarInset
className={cn('min-w-0', insetOverflowHidden && 'overflow-hidden')}
@@ -195,6 +205,7 @@ function NewChatEntryRoute({
headerHidden: boolean;
compactWorkspaceSidebar: boolean;
pageSidebarDark: boolean;
forceWorkspaceSidebarCollapsed: boolean;
};
}) {
if (isInIframe()) {
@@ -216,12 +227,14 @@ export default function WorkspaceRoutes({
headerHidden = false,
compactWorkspaceSidebar = false,
pageSidebarDark = false,
forceWorkspaceSidebarCollapsed = false,
}: {
pageSidebarCollapsed?: boolean;
pageSidebarHidden?: boolean;
headerHidden?: boolean;
compactWorkspaceSidebar?: boolean;
pageSidebarDark?: boolean;
forceWorkspaceSidebarCollapsed?: boolean;
}) {
const layoutProps = {
pageSidebarCollapsed,
@@ -229,6 +242,7 @@ export default function WorkspaceRoutes({
headerHidden,
compactWorkspaceSidebar,
pageSidebarDark,
forceWorkspaceSidebarCollapsed,
};
return (
frontend-web/src/pages/light-app-management.css
+52
View File
@@ -679,6 +679,58 @@
background-color: #0056C6;
}
/* ── WeKnora 绿色主题覆盖（[data-theme="lightgreen"]）──────────────── */
[data-theme="lightgreen"] .light-app-management-page .lam-primary-btn,
[data-theme="lightgreen"] .light-app-management-page .lam-dialog-save,
[data-theme="lightgreen"] .light-app-management-page .lam-switch-on {
background-color: #07C05F;
}
[data-theme="lightgreen"] .light-app-management-page .lam-primary-btn,
[data-theme="lightgreen"] .light-app-management-page .lam-dialog-save {
box-shadow: 0 2px 6px rgba(7, 192, 95, 0.2);
}
[data-theme="lightgreen"] .light-app-management-page .lam-primary-btn:hover,
[data-theme="lightgreen"] .light-app-management-page .lam-dialog-save:hover {
background-color: #08DD6E;
}
[data-theme="lightgreen"] .light-app-management-page .lam-primary-btn:active,
[data-theme="lightgreen"] .light-app-management-page .lam-dialog-save:active {
background-color: #049B38;
}
[data-theme="lightgreen"] .light-app-management-page .lam-search-input:focus {
border-color: rgba(7, 192, 95, 0.4);
box-shadow: 0 0 0 4px rgba(7, 192, 95, 0.1);
}
[data-theme="lightgreen"] .light-app-management-page .lam-view-toggle-btn.is-active,
[data-theme="lightgreen"] .light-app-management-page .lam-cat-toggle-btn.is-active,
[data-theme="lightgreen"] .light-app-management-page .lam-count strong,
[data-theme="lightgreen"] .light-app-management-page .lam-table tr:hover .lam-row-name,
[data-theme="lightgreen"] .light-app-management-page .lam-param-popover-close,
[data-theme="lightgreen"] .light-app-management-page .lam-param-key,
[data-theme="lightgreen"] .light-app-management-page .lam-card:hover .lam-card-title,
[data-theme="lightgreen"] .light-app-management-page .lam-dialog-close:hover,
[data-theme="lightgreen"] .light-app-management-page .lam-add-param-btn:hover {
color: #049B38;
}
[data-theme="lightgreen"] .light-app-management-page .lam-add-param-btn:hover {
border-color: #07C05F;
}
[data-theme="lightgreen"] .light-app-management-page .lam-dialog-icon {
background-color: #E9F8EC;
color: #049B38;
}
[data-theme="lightgreen"] .light-app-management-page .lam-input:focus,
[data-theme="lightgreen"] .light-app-management-page .lam-dialog input[type="text"]:focus,
[data-theme="lightgreen"] .light-app-management-page .t-select.t-is-focused .t-input,
[data-theme="lightgreen"] .light-app-management-page .t-select.t-is-focused .t-input__wrap {
border-color: #07C05F;
box-shadow: 0 0 0 2px rgba(7, 192, 95, 0.16);
}
[data-theme="lightgreen"] .light-app-management-page .t-select:hover .t-input,
[data-theme="lightgreen"] .light-app-management-page .t-select:hover .t-input__wrap {
border-color: rgba(7, 192, 95, 0.5);
}
/* ── iframe 菜单排序：拖拽行 + 拖拽手柄 ───────────────────────────────── */
.light-app-management-page .lam-reorder-row {
cursor: grab;
frontend-web/src/pages/light-app-pages.css
+5
View File
@@ -7,6 +7,11 @@
background-color: #F9FCFF;
}
[data-theme="lightgreen"] .light-app-management-page,
[data-theme="lightgreen"] .light-app-list-page {
background-color: #F9FDF9;
}
.dark .light-app-management-page,
.dark .light-app-list-page {
background-color: var(--color-bg-page);
frontend-web/src/strategy-components/lib/light-app.ts
+6 -3
View File
@@ -39,14 +39,15 @@ export const LOGIN_SOURCE_OPTIONS: { label: string; value: string }[] = [
];
/**
* 我方主题色键。当前启用 red(浅色) / dark-blue(深色)；blue 为后续将新增的主题。
* 我方主题色键：red(红白)、green(WeKnora 绿色)、blue(浅蓝)、dark-blue(深蓝)。
* 主题参数的映射以这些键为左侧 key（如 `dark-blue=darkBlue`）。
*/
export type AppThemeColor = "red" | "blue" | "dark-blue";
export type AppThemeColor = "red" | "green" | "blue" | "dark-blue";
/** 我方全部主题色（「应用管理」主题参数逐项配置目标值时遍历；dot 为配色小圆点）。 */
export const APP_THEME_COLORS: { key: AppThemeColor; label: string; dot: string }[] = [
{ key: "red", label: "红色", dot: "#F5222D" },
{ key: "green", label: "绿色", dot: "#07C05F" },
{ key: "blue", label: "蓝色", dot: "#1677FF" },
{ key: "dark-blue", label: "深蓝色", dot: "#002B5C" },
];
@@ -57,18 +58,20 @@ export const APP_THEME_COLORS: { key: AppThemeColor; label: string; dot: string
*/
const THEME_KEY_ALIASES: Record<AppThemeColor, string[]> = {
red: ["red", "light"],
green: ["green", "lightgreen", "light-green"],
blue: ["blue"],
"dark-blue": ["dark-blue", "darkblue", "dark"],
};
/**
* 读取我方当前主题色，以 ThemeContext / next-themes 写在 <html> 上的 class 为准
* （含嵌入场景的强制主题）。深色=dark-blue，浅蓝=blue，其余(浅色/红白)=red。
* （含嵌入场景的强制主题）。深色=dark-blue，绿色=green，浅蓝=blue，其余(浅色/红白)=red。
*/
export function getCurrentTheme(): AppThemeColor {
if (typeof document !== "undefined") {
const classList = document.documentElement.classList;
if (classList.contains("dark")) return "dark-blue";
if (classList.contains("lightgreen")) return "green";
if (classList.contains("lightblue")) return "blue";
}
return "red";
frontend-web/src/styles/globals.css
+120
View File
@@ -407,6 +407,65 @@
--legacy-workspace-brand-rgb: 0 98 217;
}
/* WeKnora 绿色主题：沿用 WeKnora 的主色 #07C05F、浅底 #E9F8EC 与深强调色 #049B38。
仅覆盖颜色 token，圆角和间距保持 DeerFlow 原有布局。 */
.lightgreen {
--workspace-brand: #07c05f;
--workspace-brand-foreground: #ffffff;
--brand-200: #e9f8ec;
--brand-900: #07c05f;
--brand-950: #049b38;
--background: #ffffff;
--foreground: #203329;
--card: #ffffff;
--card-foreground: #203329;
--popover: #ffffff;
--popover-foreground: #203329;
--primary: #07c05f;
--primary-foreground: #ffffff;
--secondary: #f1fbf4;
--secondary-foreground: #049b38;
--muted: #f3f8f4;
--muted-foreground: #64736a;
--accent: #e9f8ec;
--accent-foreground: #038626;
--destructive: #f5222d;
--border: #d8eadc;
--input: #cfe5d4;
--ring: rgb(7 192 95 / 0.35);
--chart-1: #07c05f;
--chart-2: #028f72;
--chart-3: #4f6680;
--chart-4: #e8a72a;
--chart-5: #db8d16;
--sidebar: #f9fdf9;
--sidebar-foreground: #203329;
--sidebar-primary: #07c05f;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #e9f8ec;
--sidebar-accent-foreground: #038626;
--sidebar-border: #e3f0e5;
--sidebar-ring: rgb(7 192 95 / 0.4);
--legacy-accent-rgb: 233 248 236;
--legacy-background-rgb: 255 255 255;
--legacy-border-rgb: 216 234 220;
--legacy-brand-200-rgb: 233 248 236;
--legacy-card-rgb: 255 255 255;
--legacy-destructive-rgb: 245 34 45;
--legacy-foreground-rgb: 32 51 41;
--legacy-input-rgb: 207 229 212;
--legacy-muted-rgb: 243 248 244;
--legacy-muted-foreground-rgb: 100 115 106;
--legacy-primary-rgb: 7 192 95;
--legacy-primary-foreground-rgb: 255 255 255;
--legacy-ring-rgb: 7 192 95;
--legacy-secondary-rgb: 241 251 244;
--legacy-sidebar-accent-rgb: 233 248 236;
--legacy-sidebar-border-rgb: 227 240 229;
--legacy-sidebar-foreground-rgb: 32 51 41;
--legacy-workspace-brand-rgb: 7 192 95;
}
@layer base {
* {
@apply border-border outline-ring/50;
@@ -1232,6 +1291,44 @@ html.lightblue .tiptap-writing-editor .ProseMirror ::selection {
background: color-mix(in srgb, #55a6fe 35%, transparent);
}
/* ── WeKnora 绿色主题：覆盖未使用 token 的历史硬编码颜色 ─────────────── */
html.lightgreen .strategy-app-header {
background-color: #07c05f;
background-image: linear-gradient(105deg, #049b38 0%, #07c05f 48%, #08dd6e 100%);
}
html.lightgreen *::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgb(9 244 121 / 0.8), rgb(7 192 95 / 0.92))
padding-box;
}
html.lightgreen .workspace-panel {
border: 1px solid #d8eadc;
box-shadow:
0 32px 72px -46px rgb(26 112 68 / 0.3),
0 12px 28px -22px rgb(7 192 95 / 0.2);
}
html.lightgreen .workspace-user-bubble {
border: 1px solid rgb(255 255 255 / 0.14);
background: linear-gradient(135deg, #09f479 0%, #07c05f 58%, #049b38 100%);
box-shadow:
0 22px 40px -28px rgb(7 192 95 / 0.52),
0 10px 20px -16px rgb(4 155 56 / 0.38);
}
html.lightgreen .workspace-assistant-card {
border: 1px solid #dceee0;
}
html.lightgreen .workspace-assistant-card::before {
background: linear-gradient(180deg, rgb(9 244 121 / 0.68), rgb(7 192 95 / 0.12));
}
html.lightgreen .tiptap-writing-editor .ProseMirror ::selection {
background: color-mix(in srgb, #07c05f 35%, transparent);
}
/* ── 来源上传弹窗：A系统基因库的分段单选条（custom-radio） ─────────────── */
/* 外层容器，模拟 nz-radio-group */
.custom-radio-group {
@@ -1307,6 +1404,12 @@ html.lightblue .tiptap-writing-editor .ProseMirror ::selection {
box-shadow: inset 0 0 0 1px rgba(0, 98, 217, 0.16);
}
.lightgreen .agent-avatar {
background-color: #e9f8ec;
color: #049b38;
box-shadow: inset 0 0 0 1px rgb(7 192 95 / 0.16);
}
.agent-sidebar-card--active {
background-color: #feeded;
border-color: rgba(190, 35, 35, 0.5);
@@ -1322,6 +1425,11 @@ html.lightblue .tiptap-writing-editor .ProseMirror ::selection {
border-color: rgba(0, 98, 217, 0.5);
}
.lightgreen .agent-sidebar-card--active {
background-color: #e9f8ec;
border-color: rgb(7 192 95 / 0.5);
}
@supports not (color: oklch(1 0 0)) {
.bg-primary\/5 { background-color: rgba(190, 35, 35, 0.05); }
.bg-primary\/8 { background-color: rgba(190, 35, 35, 0.08); }
@@ -1372,4 +1480,16 @@ html.lightblue .tiptap-writing-editor .ProseMirror ::selection {
.lightblue .bg-primary\/60 { background-color: rgba(0, 98, 217, 0.60); }
.lightblue .bg-primary\/70 { background-color: rgba(0, 98, 217, 0.70); }
.lightblue .bg-primary\/90 { background-color: rgba(0, 98, 217, 0.90); }
.lightgreen .bg-primary\/5 { background-color: rgba(7, 192, 95, 0.05); }
.lightgreen .bg-primary\/8 { background-color: rgba(7, 192, 95, 0.08); }
.lightgreen .bg-primary\/10 { background-color: rgba(7, 192, 95, 0.10); }
.lightgreen .bg-primary\/14 { background-color: rgba(7, 192, 95, 0.14); }
.lightgreen .bg-primary\/15 { background-color: rgba(7, 192, 95, 0.15); }
.lightgreen .bg-primary\/20 { background-color: rgba(7, 192, 95, 0.20); }
.lightgreen .bg-primary\/25 { background-color: rgba(7, 192, 95, 0.25); }
.lightgreen .bg-primary\/30 { background-color: rgba(7, 192, 95, 0.30); }
.lightgreen .bg-primary\/60 { background-color: rgba(7, 192, 95, 0.60); }
.lightgreen .bg-primary\/70 { background-color: rgba(7, 192, 95, 0.70); }
.lightgreen .bg-primary\/90 { background-color: rgba(7, 192, 95, 0.90); }
}
offline-backend-20260512/backend/app/gateway/routers/system_settings.py
+4 -2
View File
@@ -536,7 +536,9 @@ async def update_publish_squares(body: PublishSquaresUpdateRequest, request: Req
class AppearanceResponse(BaseModel):
"""Effective system-wide appearance defaults."""
default_theme: Literal["light", "dark", "lightblue"] = Field(..., description="System default theme — light, dark or lightblue")
default_theme: Literal["light", "dark", "lightblue", "lightgreen"] = Field(
..., description="System default theme — light, dark, lightblue or lightgreen"
)
default_skill_view: Literal["card", "list"] = Field(..., description="System default skill list display mode — card or list")
default_agent_view: Literal["card", "list"] = Field(..., description="System default agent list display mode — card or list")
default_layout_mode: Literal["full", "compact"] = Field(..., description="System default interface layout — full (sidebar + header) or compact (hidden)")
@@ -544,7 +546,7 @@ class AppearanceResponse(BaseModel):
class AppearanceUpdateRequest(BaseModel):
default_theme: Literal["light", "dark", "lightblue"] | None = Field(default=None)
default_theme: Literal["light", "dark", "lightblue", "lightgreen"] | None = Field(default=None)
default_skill_view: Literal["card", "list"] | None = Field(default=None)
default_agent_view: Literal["card", "list"] | None = Field(default=None)
default_layout_mode: Literal["full", "compact"] | None = Field(default=None)
offline-backend-20260512/backend/packages/harness/deerflow/config/system_settings.py
+3 -3
View File
@@ -61,7 +61,7 @@ def _default_shortcut_route_params() -> list[AppearanceRouteParam]:
paramType="login",
source="access_token",
customValue="",
themeValue="red=red;blue=blue;dark-blue=dark-blue",
themeValue="red=red;green=green;blue=blue;dark-blue=dark-blue",
)
]
@@ -102,9 +102,9 @@ class AppearanceSettings(BaseModel):
toggle, and any future first-time loads.
"""
default_theme: Literal["light", "dark", "lightblue"] = Field(
default_theme: Literal["light", "dark", "lightblue", "lightgreen"] = Field(
default="light",
description="Theme applied for users who haven't picked their own (light / dark / lightblue)",
description="Theme applied for users who haven't picked their own (light / dark / lightblue / lightgreen)",
)
default_skill_view: Literal["card", "list"] = Field(
default="list",