样式修改
This commit is contained in:
1 parent
96947d7636
commit
f3511e5cd0
15 files changed
+933
-84
No files matched your search
@@ -14,8 +14,8 @@ VITE_MOCK_SQ_REPORT=false
|
||||
VITE_MOCK_COP_TASK_DETAIL=false
|
||||
|
||||
# Gateway / DeerFlow API
|
||||
VITE_BACKEND_BASE_URL=http://47.88.25.99:7001
|
||||
VITE_LANGGRAPH_BASE_URL=http://47.88.25.99:7001/api
|
||||
VITE_BACKEND_BASE_URL=http://10.19.200.5:2026
|
||||
VITE_LANGGRAPH_BASE_URL=http://10.19.200.5:2026/api
|
||||
|
||||
# 轻应用「新建笔记」系列接口
|
||||
VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
|
||||
|
||||
@@ -260,37 +260,68 @@ export function AgentChatSidebar({ activeAgentId }: { activeAgentId?: string })
|
||||
key={agent.id}
|
||||
href={href}
|
||||
className={cn(
|
||||
"group relative flex w-full items-start gap-2.5 rounded-xl border px-2.5 py-2 transition-colors",
|
||||
"group relative flex w-full items-start gap-3 rounded-xl border px-3 py-2.5 transition-all duration-150",
|
||||
isActive
|
||||
? "border-primary/40 bg-primary/5"
|
||||
: "border-transparent hover:border-border hover:bg-accent/50",
|
||||
? isDark
|
||||
? "border-[#2b8ffe] bg-[#0b4fae]/65 shadow-[0_0_0_1px_rgba(43,143,254,0.5),0_12px_28px_rgba(37,128,255,0.25)]"
|
||||
: "border-primary/50 bg-primary/10 shadow-sm"
|
||||
: isDark
|
||||
? "border-[#2b8ffe]/20 bg-[#042b59]/35 hover:border-[#2b8ffe]/60 hover:bg-[#063b77]/60"
|
||||
: "border-transparent hover:border-border hover:bg-accent/50",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg text-white shadow-sm"
|
||||
className={cn(
|
||||
"mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-lg text-white shadow-sm",
|
||||
isDark &&
|
||||
isActive &&
|
||||
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
||||
)}
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
||||
}}
|
||||
>
|
||||
<Bot className="size-[18px]" />
|
||||
<Bot className="size-[19px]" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span
|
||||
className={cn(
|
||||
"block truncate text-[13px] font-semibold",
|
||||
isActive ? "text-primary" : "text-foreground",
|
||||
"block truncate text-[16px] leading-5 font-bold",
|
||||
isActive
|
||||
? isDark
|
||||
? "text-white"
|
||||
: "text-primary"
|
||||
: isDark
|
||||
? "text-white/95"
|
||||
: "text-foreground",
|
||||
)}
|
||||
>
|
||||
{desensitize(agent.name)}
|
||||
</span>
|
||||
<span className="mt-0.5 block truncate text-[11px] leading-snug text-muted-foreground">
|
||||
<span
|
||||
className={cn(
|
||||
"mt-1 block truncate text-[13px] leading-[1.35]",
|
||||
isDark
|
||||
? isActive
|
||||
? "text-[#d6eaff]"
|
||||
: "text-[#9ebfe2]"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{agent.description
|
||||
? desensitize(agent.description)
|
||||
: "智能体助手"}
|
||||
</span>
|
||||
</span>
|
||||
{isActive && (
|
||||
<span className="absolute top-1/2 right-1 h-6 w-1 -translate-y-1/2 rounded-full bg-primary" />
|
||||
<span
|
||||
className={cn(
|
||||
"absolute top-1/2 right-1.5 h-8 w-1.5 -translate-y-1/2 rounded-full",
|
||||
isDark
|
||||
? "bg-[#2b8ffe] shadow-[0_0_14px_rgba(43,143,254,0.85)]"
|
||||
: "bg-primary",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -219,33 +219,64 @@ export function AgentModuleSidebar({
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"group relative flex w-full items-start gap-2.5 rounded-xl border px-2.5 py-2 transition-colors",
|
||||
"group relative flex w-full items-start gap-3 rounded-xl border px-3 py-2.5 transition-all duration-150",
|
||||
isActive
|
||||
? "border-primary/40 bg-primary/5"
|
||||
: "border-transparent hover:border-border hover:bg-accent/50",
|
||||
? isDark
|
||||
? "border-[#2b8ffe] bg-[#0b4fae]/65 shadow-[0_0_0_1px_rgba(43,143,254,0.5),0_12px_28px_rgba(37,128,255,0.25)]"
|
||||
: "border-primary/50 bg-primary/10 shadow-sm"
|
||||
: isDark
|
||||
? "border-[#2b8ffe]/20 bg-[#042b59]/35 hover:border-[#2b8ffe]/60 hover:bg-[#063b77]/60"
|
||||
: "border-transparent hover:border-border hover:bg-accent/50",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg text-white shadow-sm"
|
||||
className={cn(
|
||||
"mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-lg text-white shadow-sm",
|
||||
isDark &&
|
||||
isActive &&
|
||||
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
||||
)}
|
||||
style={{ backgroundImage: `linear-gradient(135deg, ${from}, ${to})` }}
|
||||
>
|
||||
<Bot className="size-[18px]" />
|
||||
<Bot className="size-[19px]" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span
|
||||
className={cn(
|
||||
"block truncate text-[13px] font-semibold",
|
||||
isActive ? "text-primary" : "text-foreground",
|
||||
"block truncate text-[16px] leading-5 font-bold",
|
||||
isActive
|
||||
? isDark
|
||||
? "text-white"
|
||||
: "text-primary"
|
||||
: isDark
|
||||
? "text-white/95"
|
||||
: "text-foreground",
|
||||
)}
|
||||
>
|
||||
{desensitize(agent.name)}
|
||||
</span>
|
||||
<span className="mt-0.5 block truncate text-[11px] leading-snug text-muted-foreground">
|
||||
<span
|
||||
className={cn(
|
||||
"mt-1 block truncate text-[13px] leading-[1.35]",
|
||||
isDark
|
||||
? isActive
|
||||
? "text-[#d6eaff]"
|
||||
: "text-[#9ebfe2]"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{agent.description ? desensitize(agent.description) : "智能体助手"}
|
||||
</span>
|
||||
</span>
|
||||
{isActive && (
|
||||
<span className="absolute top-1/2 right-1 h-6 w-1 -translate-y-1/2 rounded-full bg-primary" />
|
||||
<span
|
||||
className={cn(
|
||||
"absolute top-1/2 right-1.5 h-8 w-1.5 -translate-y-1/2 rounded-full",
|
||||
isDark
|
||||
? "bg-[#2b8ffe] shadow-[0_0_14px_rgba(43,143,254,0.85)]"
|
||||
: "bg-primary",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Check, LayoutIcon, PanelLeftIcon, Shirt } from "lucide-react";
|
||||
import { Check, ExternalLink, LayoutIcon, PanelLeftIcon, Shirt } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
@@ -14,8 +14,9 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useTheme, type ThemeType } from "@/contexts/ThemeContext";
|
||||
import { useLayoutMode } from "@/core/system-settings/hooks";
|
||||
import { useAppearanceSettings, useLayoutMode } from "@/core/system-settings/hooks";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { buildLightAppUrl } from "@/strategy-components/lib/light-app";
|
||||
|
||||
/**
|
||||
* 换肤 / 界面模式 顶栏控件。深色顶栏(Header)与简洁模式页面级顶栏(ChatPage 等)共用,
|
||||
@@ -39,6 +40,43 @@ const triggerToneClass = (tone: AppearanceControlTone) =>
|
||||
? "text-white hover:bg-[var(--brand-950)] hover:text-white active:bg-[#8a0618]"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground";
|
||||
|
||||
export function CompactShortcutButtons({ tone }: { tone: AppearanceControlTone }) {
|
||||
const { data: appearance } = useAppearanceSettings();
|
||||
const buttons = (appearance?.compact_shortcut_buttons ?? [])
|
||||
.filter((button) => button.enabled && button.label.trim() && button.url.trim())
|
||||
.sort((a, b) => a.sort_order - b.sort_order);
|
||||
|
||||
if (buttons.length === 0) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{buttons.map((button) => (
|
||||
<Button
|
||||
key={button.id}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn(
|
||||
"h-8 max-w-[168px] shrink-0 gap-1.5 rounded-sm px-2 text-xs font-medium",
|
||||
triggerToneClass(tone),
|
||||
)}
|
||||
title={button.label}
|
||||
onClick={() => {
|
||||
const url = buildLightAppUrl({
|
||||
url: button.url,
|
||||
routeParams: button.route_params.map((param) => ({ ...param })),
|
||||
});
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
}}
|
||||
>
|
||||
<ExternalLink className="size-4 shrink-0" />
|
||||
<span className="truncate">{button.label}</span>
|
||||
</Button>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function ThemeSwitcher({ tone }: { tone: AppearanceControlTone }) {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
@@ -349,33 +349,64 @@ export function GeneralQaSidebar() {
|
||||
type="button"
|
||||
onClick={() => handleSelectAgent(agent.id)}
|
||||
className={cn(
|
||||
"group relative flex w-full items-start gap-2.5 rounded-xl border px-2.5 py-2 text-left transition-colors",
|
||||
"group relative flex w-full items-start gap-3 rounded-xl border px-3 py-2.5 text-left transition-all duration-150",
|
||||
isActive
|
||||
? "border-primary/40 bg-primary/5"
|
||||
: "border-transparent hover:border-border hover:bg-accent/50",
|
||||
? isDark
|
||||
? "border-[#2b8ffe] bg-[#0b4fae]/65 shadow-[0_0_0_1px_rgba(43,143,254,0.5),0_12px_28px_rgba(37,128,255,0.25)]"
|
||||
: "border-primary/50 bg-primary/10 shadow-sm"
|
||||
: isDark
|
||||
? "border-[#2b8ffe]/20 bg-[#042b59]/35 hover:border-[#2b8ffe]/60 hover:bg-[#063b77]/60"
|
||||
: "border-transparent hover:border-border hover:bg-accent/50",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg text-white shadow-sm"
|
||||
className={cn(
|
||||
"mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-lg text-white shadow-sm",
|
||||
isDark &&
|
||||
isActive &&
|
||||
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
||||
)}
|
||||
style={{ backgroundImage: `linear-gradient(135deg, ${from}, ${to})` }}
|
||||
>
|
||||
<Bot className="size-[18px]" />
|
||||
<Bot className="size-[19px]" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span
|
||||
className={cn(
|
||||
"block truncate text-[13px] font-semibold",
|
||||
isActive ? "text-primary" : "text-foreground",
|
||||
"block truncate text-[16px] leading-5 font-bold",
|
||||
isActive
|
||||
? isDark
|
||||
? "text-white"
|
||||
: "text-primary"
|
||||
: isDark
|
||||
? "text-white/95"
|
||||
: "text-foreground",
|
||||
)}
|
||||
>
|
||||
{desensitize(agent.name)}
|
||||
</span>
|
||||
<span className="mt-0.5 block truncate text-[11px] leading-snug text-muted-foreground">
|
||||
<span
|
||||
className={cn(
|
||||
"mt-1 block truncate text-[13px] leading-[1.35]",
|
||||
isDark
|
||||
? isActive
|
||||
? "text-[#d6eaff]"
|
||||
: "text-[#9ebfe2]"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{agent.description ? desensitize(agent.description) : "智能体助手"}
|
||||
</span>
|
||||
</span>
|
||||
{isActive && (
|
||||
<span className="absolute top-1/2 right-1 h-6 w-1 -translate-y-1/2 rounded-full bg-primary" />
|
||||
<span
|
||||
className={cn(
|
||||
"absolute top-1/2 right-1.5 h-8 w-1.5 -translate-y-1/2 rounded-full",
|
||||
isDark
|
||||
? "bg-[#2b8ffe] shadow-[0_0_14px_rgba(43,143,254,0.85)]"
|
||||
: "bg-primary",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -1,16 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { DropletIcon, LayoutGridIcon, LayoutIcon, ListIcon, MoonIcon, PanelLeftIcon, SunIcon } from "lucide-react";
|
||||
import { useMemo, useState, type ComponentType, type SVGProps } from "react";
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
DropletIcon,
|
||||
ExternalLink,
|
||||
LayoutGridIcon,
|
||||
LayoutIcon,
|
||||
ListIcon,
|
||||
MoonIcon,
|
||||
PanelLeftIcon,
|
||||
Plus,
|
||||
SunIcon,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useMemo, useState, type ComponentType, type SVGProps } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { useTheme } from "@/contexts/ThemeContext";
|
||||
|
||||
import { FONT_SCALE_OPTIONS } from "@/components/font-scale";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
import { FONT_SCALE_OPTIONS } from "@/components/font-scale";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
@@ -25,14 +39,24 @@ import { isIsolatedSession, setIsolatedSession } from "@/core/embed/embed-sessio
|
||||
import { enUS, isLocale, zhCN, type Locale } from "@/core/i18n";
|
||||
import { useI18n } from "@/core/i18n/hooks";
|
||||
import { useLocalSettings } from "@/core/settings";
|
||||
import {
|
||||
useAppearanceSettings,
|
||||
import {
|
||||
useAppearanceSettings,
|
||||
useCitationDisplaySettings,
|
||||
useLayoutMode,
|
||||
useUpdateAppearanceSettings,
|
||||
useUpdateCitationDisplaySettings,
|
||||
} from "@/core/system-settings/hooks";
|
||||
import { cn } from "@/lib/utils";
|
||||
} from "@/core/system-settings/hooks";
|
||||
import type {
|
||||
CompactShortcutButton,
|
||||
CompactShortcutRouteParam,
|
||||
} from "@/core/system-settings/api";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
APP_THEME_COLORS,
|
||||
LOGIN_SOURCE_OPTIONS,
|
||||
parseThemeMap,
|
||||
stringifyThemeMap,
|
||||
} from "@/strategy-components/lib/light-app";
|
||||
|
||||
import PrivateSquareSettingsPage from "@/pages/PrivateSquareSettingsPage";
|
||||
import PublishSquaresSettingsPage from "@/pages/PublishSquaresSettingsPage";
|
||||
@@ -41,10 +65,101 @@ import SkillCompressionSettingsPage from "@/pages/SkillCompressionSettingsPage";
|
||||
|
||||
import { SettingsSection } from "./settings-section";
|
||||
|
||||
const languageOptions: { value: Locale; label: string }[] = [
|
||||
{ value: "en-US", label: enUS.locale.localName },
|
||||
{ value: "zh-CN", label: zhCN.locale.localName },
|
||||
];
|
||||
const languageOptions: { value: Locale; label: string }[] = [
|
||||
{ value: "en-US", label: enUS.locale.localName },
|
||||
{ value: "zh-CN", label: zhCN.locale.localName },
|
||||
];
|
||||
|
||||
const DEFAULT_SHORTCUT_THEME_MAP = "red=red;blue=blue;dark-blue=dark-blue";
|
||||
|
||||
function makeShortcutId() {
|
||||
if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
return `shortcut-${Date.now()}-${Math.random().toString(16).slice(2)}`;
|
||||
}
|
||||
|
||||
function newShortcutParam(): CompactShortcutRouteParam {
|
||||
return {
|
||||
key: "access_token",
|
||||
paramType: "login",
|
||||
source: "access_token",
|
||||
customValue: "",
|
||||
themeValue: DEFAULT_SHORTCUT_THEME_MAP,
|
||||
};
|
||||
}
|
||||
|
||||
function newShortcutButton(): CompactShortcutButton {
|
||||
return {
|
||||
id: makeShortcutId(),
|
||||
label: "快捷入口",
|
||||
url: "",
|
||||
route_params: [newShortcutParam()],
|
||||
enabled: true,
|
||||
sort_order: 0,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeShortcutDraft(
|
||||
buttons: CompactShortcutButton[] | undefined,
|
||||
): CompactShortcutButton[] {
|
||||
const source = buttons?.length ? buttons : [newShortcutButton()];
|
||||
return [...source]
|
||||
.sort((a, b) => a.sort_order - b.sort_order)
|
||||
.map((button, index) => ({
|
||||
...button,
|
||||
id: button.id || makeShortcutId(),
|
||||
label: button.label || "快捷入口",
|
||||
url: button.url || "",
|
||||
route_params: (button.route_params?.length
|
||||
? button.route_params
|
||||
: [newShortcutParam()]
|
||||
).map((param) => ({
|
||||
key: param.key || "",
|
||||
paramType: param.paramType || "login",
|
||||
source: param.source || "access_token",
|
||||
customValue: param.customValue ?? "",
|
||||
themeValue: param.themeValue || DEFAULT_SHORTCUT_THEME_MAP,
|
||||
})),
|
||||
enabled: button.enabled ?? true,
|
||||
sort_order: index,
|
||||
}));
|
||||
}
|
||||
|
||||
function cleanShortcutParams(
|
||||
params: CompactShortcutRouteParam[],
|
||||
): CompactShortcutRouteParam[] {
|
||||
return params
|
||||
.filter((param) => param.key.trim())
|
||||
.map((param) => {
|
||||
const base: CompactShortcutRouteParam = {
|
||||
key: param.key.trim(),
|
||||
paramType: param.paramType,
|
||||
};
|
||||
if (param.paramType === "theme") {
|
||||
base.themeValue = stringifyThemeMap(parseThemeMap(param.themeValue));
|
||||
return base;
|
||||
}
|
||||
base.source = param.source || "access_token";
|
||||
if (base.source === "other") {
|
||||
base.customValue = (param.customValue ?? "").trim();
|
||||
}
|
||||
return base;
|
||||
});
|
||||
}
|
||||
|
||||
function cleanShortcutButtons(
|
||||
buttons: CompactShortcutButton[],
|
||||
): CompactShortcutButton[] {
|
||||
return buttons.map((button, index) => ({
|
||||
id: button.id || makeShortcutId(),
|
||||
label: button.label.trim() || "快捷入口",
|
||||
url: button.url.trim(),
|
||||
route_params: cleanShortcutParams(button.route_params),
|
||||
enabled: button.enabled,
|
||||
sort_order: index,
|
||||
}));
|
||||
}
|
||||
|
||||
export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
||||
const { t, locale, changeLocale } = useI18n();
|
||||
@@ -52,10 +167,11 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
||||
const navigate = useNavigate();
|
||||
const currentTheme = theme;
|
||||
const [settings, setSettings] = useLocalSettings();
|
||||
const isAdmin = getStoredAuth()?.system_role === "admin";
|
||||
const { data: appearance } = useAppearanceSettings();
|
||||
const updateAppearance = useUpdateAppearanceSettings();
|
||||
const { data: citationDisplay } = useCitationDisplaySettings();
|
||||
const isAdmin = getStoredAuth()?.system_role === "admin";
|
||||
const { data: appearance } = useAppearanceSettings();
|
||||
const updateAppearance = useUpdateAppearanceSettings();
|
||||
const [shortcutDraft, setShortcutDraft] = useState<CompactShortcutButton[]>([]);
|
||||
const { data: citationDisplay } = useCitationDisplaySettings();
|
||||
const updateCitationDisplay = useUpdateCitationDisplaySettings();
|
||||
const globalDefault = appearance?.default_theme ?? "light";
|
||||
const globalSkillView = appearance?.default_skill_view ?? "list";
|
||||
@@ -63,8 +179,14 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
||||
const globalLayoutMode = appearance?.default_layout_mode ?? "full";
|
||||
// 有效界面模式:用户自己选过则以其为准,否则跟随管理员系统默认(再否则会话级回退)。
|
||||
const [effectiveLayoutMode, setLayoutMode] = useLayoutMode();
|
||||
const cleanupWords =
|
||||
citationDisplay?.cleanup_words ?? settings.display.citationCleanupWords ?? [];
|
||||
const cleanupWords =
|
||||
citationDisplay?.cleanup_words ?? settings.display.citationCleanupWords ?? [];
|
||||
|
||||
useEffect(() => {
|
||||
setShortcutDraft(
|
||||
normalizeShortcutDraft(appearance?.compact_shortcut_buttons),
|
||||
);
|
||||
}, [appearance?.compact_shortcut_buttons]);
|
||||
|
||||
// 独立登录会话(本标签页):开关切换鉴权存储 localStorage ↔ sessionStorage(见 scoped-storage)。
|
||||
const [isolatedSession, setIsolatedSessionState] = useState(() => isIsolatedSession());
|
||||
@@ -115,7 +237,7 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSetDefaultView = async (
|
||||
const handleSetDefaultView = async (
|
||||
kind: "skill" | "agent",
|
||||
value: "card" | "list",
|
||||
) => {
|
||||
@@ -134,7 +256,103 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : "保存失败");
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const patchShortcut = (
|
||||
id: string,
|
||||
patch: Partial<CompactShortcutButton>,
|
||||
) => {
|
||||
setShortcutDraft((items) =>
|
||||
items.map((item) => (item.id === id ? { ...item, ...patch } : item)),
|
||||
);
|
||||
};
|
||||
|
||||
const patchShortcutParam = (
|
||||
id: string,
|
||||
index: number,
|
||||
patch: Partial<CompactShortcutRouteParam>,
|
||||
) => {
|
||||
setShortcutDraft((items) =>
|
||||
items.map((item) =>
|
||||
item.id === id
|
||||
? {
|
||||
...item,
|
||||
route_params: item.route_params.map((param, paramIndex) =>
|
||||
paramIndex === index ? { ...param, ...patch } : param,
|
||||
),
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const moveShortcut = (id: string, direction: -1 | 1) => {
|
||||
setShortcutDraft((items) => {
|
||||
const index = items.findIndex((item) => item.id === id);
|
||||
const target = index + direction;
|
||||
if (index < 0 || target < 0 || target >= items.length) return items;
|
||||
const next = [...items];
|
||||
[next[index], next[target]] = [next[target]!, next[index]!];
|
||||
return next.map((item, order) => ({ ...item, sort_order: order }));
|
||||
});
|
||||
};
|
||||
|
||||
const addShortcutParam = (id: string) => {
|
||||
setShortcutDraft((items) =>
|
||||
items.map((item) =>
|
||||
item.id === id
|
||||
? {
|
||||
...item,
|
||||
route_params: [...item.route_params, newShortcutParam()],
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const removeShortcutParam = (id: string, index: number) => {
|
||||
setShortcutDraft((items) =>
|
||||
items.map((item) =>
|
||||
item.id === id
|
||||
? {
|
||||
...item,
|
||||
route_params: item.route_params.filter((_, paramIndex) => paramIndex !== index),
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const handleSaveShortcuts = async () => {
|
||||
for (const item of shortcutDraft) {
|
||||
if (item.enabled && !item.url.trim()) {
|
||||
toast.error(`请填写「${item.label.trim() || "快捷入口"}」的跳转链接,或先关闭该按钮`);
|
||||
return;
|
||||
}
|
||||
for (const param of item.route_params) {
|
||||
if (!param.key.trim()) {
|
||||
toast.error("路由参数键名不可为空");
|
||||
return;
|
||||
}
|
||||
if (
|
||||
param.paramType === "login" &&
|
||||
param.source === "other" &&
|
||||
!param.customValue?.trim()
|
||||
) {
|
||||
toast.error("登录参数自定义值不可为空");
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
try {
|
||||
await updateAppearance.mutateAsync({
|
||||
compact_shortcut_buttons: cleanShortcutButtons(shortcutDraft),
|
||||
});
|
||||
toast.success("顶部快捷按钮已保存");
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : "保存失败");
|
||||
}
|
||||
};
|
||||
|
||||
const themeOptions = useMemo(
|
||||
() => [
|
||||
@@ -224,11 +442,11 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<Separator />
|
||||
<SettingsSection
|
||||
title="系统默认界面模式(管理员)"
|
||||
{isAdmin && (
|
||||
<>
|
||||
<Separator />
|
||||
<SettingsSection
|
||||
title="系统默认界面模式(管理员)"
|
||||
description="给所有还没有手动切换过界面模式的用户的默认;已经自己切换过的用户保留其个人选择不受影响。"
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
@@ -257,13 +475,47 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
||||
{globalLayoutMode === "full" ? "全量模式" : "简洁模式"}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<Separator />
|
||||
</SettingsSection>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<Separator />
|
||||
<SettingsSection
|
||||
title="顶部快捷按钮(管理员)"
|
||||
description="配置全量/简洁模式右上角、换肤按钮左侧显示的跳转按钮。支持多个按钮、启停和与应用管理一致的登录/主题参数。"
|
||||
>
|
||||
<CompactShortcutSettings
|
||||
buttons={shortcutDraft}
|
||||
saving={updateAppearance.isPending}
|
||||
onAdd={() =>
|
||||
setShortcutDraft((items) => [
|
||||
...items,
|
||||
{ ...newShortcutButton(), sort_order: items.length },
|
||||
])
|
||||
}
|
||||
onPatch={patchShortcut}
|
||||
onMove={moveShortcut}
|
||||
onRemove={(id) =>
|
||||
setShortcutDraft((items) =>
|
||||
items
|
||||
.filter((item) => item.id !== id)
|
||||
.map((item, index) => ({ ...item, sort_order: index })),
|
||||
)
|
||||
}
|
||||
onAddParam={addShortcutParam}
|
||||
onPatchParam={patchShortcutParam}
|
||||
onRemoveParam={removeShortcutParam}
|
||||
onSave={handleSaveShortcuts}
|
||||
/>
|
||||
</SettingsSection>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<Separator />
|
||||
<SettingsSection
|
||||
title="系统默认主题(管理员)"
|
||||
description="给所有还没有手动切换过主题的用户的默认主题;已经自己切换过的用户保留其个人设置不受影响。"
|
||||
@@ -515,12 +767,304 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ThemePreviewCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
);
|
||||
}
|
||||
|
||||
function CompactShortcutSettings({
|
||||
buttons,
|
||||
saving,
|
||||
onAdd,
|
||||
onPatch,
|
||||
onMove,
|
||||
onRemove,
|
||||
onAddParam,
|
||||
onPatchParam,
|
||||
onRemoveParam,
|
||||
onSave,
|
||||
}: {
|
||||
buttons: CompactShortcutButton[];
|
||||
saving: boolean;
|
||||
onAdd: () => void;
|
||||
onPatch: (id: string, patch: Partial<CompactShortcutButton>) => void;
|
||||
onMove: (id: string, direction: -1 | 1) => void;
|
||||
onRemove: (id: string) => void;
|
||||
onAddParam: (id: string) => void;
|
||||
onPatchParam: (
|
||||
id: string,
|
||||
index: number,
|
||||
patch: Partial<CompactShortcutRouteParam>,
|
||||
) => void;
|
||||
onRemoveParam: (id: string, index: number) => void;
|
||||
onSave: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<p className="text-muted-foreground text-xs">
|
||||
已配置 {buttons.length} 个按钮;只有启用且填写了跳转链接的按钮会显示。
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="button" variant="outline" size="sm" onClick={onAdd}>
|
||||
<Plus className="mr-1.5 size-4" />
|
||||
添加按钮
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={onSave}
|
||||
disabled={saving}
|
||||
>
|
||||
保存按钮配置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{buttons.length === 0 ? (
|
||||
<div className="text-muted-foreground rounded-lg border border-dashed p-6 text-center text-sm">
|
||||
暂无按钮,点击“添加按钮”创建一个。
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{buttons.map((button, index) => (
|
||||
<div key={button.id} className="space-y-4 rounded-lg border p-4">
|
||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-start">
|
||||
<div className="flex items-center gap-2 pt-6">
|
||||
<Switch
|
||||
checked={button.enabled}
|
||||
onCheckedChange={(checked) =>
|
||||
onPatch(button.id, { enabled: checked })
|
||||
}
|
||||
aria-label="启用快捷按钮"
|
||||
/>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{button.enabled ? "启用" : "停用"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid min-w-0 flex-1 gap-3 md:grid-cols-[220px_minmax(0,1fr)]">
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-xs font-medium">按钮名称</div>
|
||||
<Input
|
||||
value={button.label}
|
||||
onChange={(event) =>
|
||||
onPatch(button.id, { label: event.target.value })
|
||||
}
|
||||
placeholder="如:业务系统"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-xs font-medium">跳转链接</div>
|
||||
<Input
|
||||
value={button.url}
|
||||
onChange={(event) =>
|
||||
onPatch(button.id, { url: event.target.value })
|
||||
}
|
||||
placeholder="https://example.com/page"
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1 pt-6">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => onMove(button.id, -1)}
|
||||
disabled={index === 0}
|
||||
title="上移"
|
||||
>
|
||||
<ArrowUp className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => onMove(button.id, 1)}
|
||||
disabled={index === buttons.length - 1}
|
||||
title="下移"
|
||||
>
|
||||
<ArrowDown className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={() => onRemove(button.id)}
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-muted/20 p-3">
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-1.5 text-sm font-medium">
|
||||
<ExternalLink className="size-4" />
|
||||
路由参数
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onAddParam(button.id)}
|
||||
>
|
||||
<Plus className="mr-1.5 size-4" />
|
||||
添加参数
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{button.route_params.length === 0 ? (
|
||||
<div className="text-muted-foreground rounded-md border border-dashed bg-background/70 p-4 text-center text-xs">
|
||||
不追加额外参数。
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{button.route_params.map((param, paramIndex) => {
|
||||
const themeMap =
|
||||
param.paramType === "theme"
|
||||
? parseThemeMap(param.themeValue)
|
||||
: {};
|
||||
return (
|
||||
<div
|
||||
key={`${button.id}-${paramIndex}`}
|
||||
className="space-y-2 rounded-md border bg-background p-2"
|
||||
>
|
||||
<div className="grid gap-2 md:grid-cols-[minmax(120px,1fr)_130px_minmax(180px,1.4fr)_32px]">
|
||||
<Input
|
||||
value={param.key}
|
||||
onChange={(event) =>
|
||||
onPatchParam(button.id, paramIndex, {
|
||||
key: event.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="参数名 key"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
<Select
|
||||
value={param.paramType}
|
||||
onValueChange={(value) =>
|
||||
onPatchParam(button.id, paramIndex, {
|
||||
paramType: value as "login" | "theme",
|
||||
source:
|
||||
value === "login"
|
||||
? param.source || "access_token"
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="login">登录参数</SelectItem>
|
||||
<SelectItem value="theme">主题参数</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{param.paramType === "login" ? (
|
||||
<div className="flex min-w-0 gap-2">
|
||||
<Select
|
||||
value={param.source || "access_token"}
|
||||
onValueChange={(value) =>
|
||||
onPatchParam(button.id, paramIndex, {
|
||||
source: value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="min-w-0 flex-1">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{LOGIN_SOURCE_OPTIONS.map((option) => (
|
||||
<SelectItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{param.source === "other" && (
|
||||
<Input
|
||||
value={param.customValue ?? ""}
|
||||
onChange={(event) =>
|
||||
onPatchParam(button.id, paramIndex, {
|
||||
customValue: event.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="自定义值"
|
||||
className="w-32 text-xs"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-muted-foreground flex items-center text-xs">
|
||||
按当前主题取值
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={() =>
|
||||
onRemoveParam(button.id, paramIndex)
|
||||
}
|
||||
title="删除参数"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{param.paramType === "theme" && (
|
||||
<div className="grid gap-2 rounded-md bg-muted/40 p-2 md:grid-cols-3">
|
||||
{APP_THEME_COLORS.map((color) => (
|
||||
<label
|
||||
key={color.key}
|
||||
className="flex min-w-0 items-center gap-2"
|
||||
>
|
||||
<span
|
||||
className="size-2.5 shrink-0 rounded-full"
|
||||
style={{ backgroundColor: color.dot }}
|
||||
/>
|
||||
<span className="text-muted-foreground shrink-0 text-xs">
|
||||
{color.label}
|
||||
</span>
|
||||
<Input
|
||||
value={themeMap[color.key] ?? color.key}
|
||||
onChange={(event) =>
|
||||
onPatchParam(button.id, paramIndex, {
|
||||
themeValue: stringifyThemeMap({
|
||||
...themeMap,
|
||||
[color.key]: event.target.value,
|
||||
}),
|
||||
})
|
||||
}
|
||||
placeholder={color.key}
|
||||
className="h-8 min-w-0 font-mono text-xs"
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ThemePreviewCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
description,
|
||||
active,
|
||||
mode,
|
||||
|
||||
@@ -279,12 +279,31 @@ export async function updatePublishSquares(
|
||||
export type ThemeMode = "light" | "dark" | "lightblue";
|
||||
export type ViewMode = "card" | "list";
|
||||
export type LayoutMode = "full" | "compact";
|
||||
export type CompactShortcutParamType = "login" | "theme";
|
||||
|
||||
export interface CompactShortcutRouteParam {
|
||||
key: string;
|
||||
paramType: CompactShortcutParamType;
|
||||
source?: string | null;
|
||||
customValue?: string | null;
|
||||
themeValue?: string | null;
|
||||
}
|
||||
|
||||
export interface CompactShortcutButton {
|
||||
id: string;
|
||||
label: string;
|
||||
url: string;
|
||||
route_params: CompactShortcutRouteParam[];
|
||||
enabled: boolean;
|
||||
sort_order: number;
|
||||
}
|
||||
|
||||
export interface AppearanceSettings {
|
||||
default_theme: ThemeMode;
|
||||
default_skill_view: ViewMode;
|
||||
default_agent_view: ViewMode;
|
||||
default_layout_mode: LayoutMode;
|
||||
compact_shortcut_buttons: CompactShortcutButton[];
|
||||
}
|
||||
|
||||
export interface AppearanceUpdate {
|
||||
@@ -292,6 +311,7 @@ export interface AppearanceUpdate {
|
||||
default_skill_view?: ViewMode;
|
||||
default_agent_view?: ViewMode;
|
||||
default_layout_mode?: LayoutMode;
|
||||
compact_shortcut_buttons?: CompactShortcutButton[];
|
||||
}
|
||||
|
||||
export async function loadAppearanceSettings(): Promise<AppearanceSettings> {
|
||||
|
||||
@@ -450,7 +450,7 @@ function AIWritingBody({
|
||||
{showSidebar && (
|
||||
<div
|
||||
className={cn(
|
||||
'relative h-full shrink-0 overflow-hidden border-r border-slate-100 bg-white text-slate-700 shadow-[1px_0_18px_rgba(15,23,42,0.03)] transition-[width] duration-300 ease-in-out',
|
||||
'relative h-full shrink-0 overflow-hidden border-r border-slate-100 bg-white text-slate-700 shadow-[1px_0_18px_rgba(15,23,42,0.03)] transition-[width] duration-300 ease-in-out dark:border-[#2b8ffe]/45 dark:bg-[#032650]/80 dark:text-[#c5cfe0] dark:shadow-none dark:backdrop-blur-md',
|
||||
sidebarCollapsed ? 'w-11' : 'w-[320px]',
|
||||
)}
|
||||
>
|
||||
@@ -465,11 +465,11 @@ function AIWritingBody({
|
||||
onClick={() => setSidebarCollapsed(false)}
|
||||
title="展开侧栏"
|
||||
aria-label="展开侧栏"
|
||||
className="rounded-md p-1.5 text-slate-400 transition-colors hover:bg-slate-50 hover:text-slate-700"
|
||||
className="rounded-md p-1.5 text-slate-400 transition-colors hover:bg-slate-50 hover:text-slate-700 dark:text-[#8aa0c4] dark:hover:bg-white/10 dark:hover:text-[#e8edf5]"
|
||||
>
|
||||
<PanelLeftOpen className="size-4" />
|
||||
</button>
|
||||
<History className="size-4 text-slate-300" />
|
||||
<History className="size-4 text-slate-300 dark:text-[#6e88b0]" />
|
||||
</div>
|
||||
<aside
|
||||
className={cn(
|
||||
@@ -477,8 +477,8 @@ function AIWritingBody({
|
||||
sidebarCollapsed ? 'pointer-events-none -translate-x-4 opacity-0' : 'translate-x-0 opacity-100',
|
||||
)}
|
||||
>
|
||||
<div className="flex shrink-0 items-center gap-2 border-b border-slate-100 px-3 py-2">
|
||||
<div className="grid flex-1 grid-cols-2 rounded-lg bg-slate-100 p-1">
|
||||
<div className="flex shrink-0 items-center gap-2 border-b border-slate-100 px-3 py-2 dark:border-[#2b8ffe]/20">
|
||||
<div className="grid flex-1 grid-cols-2 rounded-lg bg-slate-100 p-1 dark:bg-white/10">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
@@ -489,8 +489,8 @@ function AIWritingBody({
|
||||
className={cn(
|
||||
'rounded-md px-2 py-1.5 text-xs font-semibold transition-colors',
|
||||
sidebarTab === 'agents'
|
||||
? 'bg-white text-slate-900 shadow-sm'
|
||||
: 'text-slate-500 hover:text-slate-800',
|
||||
? 'bg-white text-slate-900 shadow-sm dark:bg-[#122347]/90 dark:text-[#e8edf5] dark:shadow-none'
|
||||
: 'text-slate-500 hover:text-slate-800 dark:text-[#8aa0c4] dark:hover:bg-white/10 dark:hover:text-[#e8edf5]',
|
||||
)}
|
||||
>
|
||||
课题研究
|
||||
@@ -505,8 +505,8 @@ function AIWritingBody({
|
||||
className={cn(
|
||||
'rounded-md px-2 py-1.5 text-xs font-semibold transition-colors',
|
||||
sidebarTab === 'research'
|
||||
? 'bg-white text-slate-900 shadow-sm'
|
||||
: 'text-slate-500 hover:text-slate-800',
|
||||
? 'bg-white text-slate-900 shadow-sm dark:bg-[#122347]/90 dark:text-[#e8edf5] dark:shadow-none'
|
||||
: 'text-slate-500 hover:text-slate-800 dark:text-[#8aa0c4] dark:hover:bg-white/10 dark:hover:text-[#e8edf5]',
|
||||
)}
|
||||
>
|
||||
ai写作
|
||||
@@ -517,7 +517,7 @@ function AIWritingBody({
|
||||
onClick={() => setSidebarCollapsed(true)}
|
||||
title="收起侧栏"
|
||||
aria-label="收起侧栏"
|
||||
className="rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-50 hover:text-slate-700"
|
||||
className="rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-50 hover:text-slate-700 dark:text-[#8aa0c4] dark:hover:bg-white/10 dark:hover:text-[#e8edf5]"
|
||||
>
|
||||
<PanelLeftClose className="size-4" />
|
||||
</button>
|
||||
@@ -594,7 +594,7 @@ function AIWritingBody({
|
||||
</div>
|
||||
)}
|
||||
{agentsActive && (
|
||||
<div className="absolute inset-0 bg-background">
|
||||
<div className="workspace-chat-bg absolute inset-0">
|
||||
<AIWritingAgentRoutes
|
||||
base={routeBase}
|
||||
compactAppearanceActions={compactAppearanceActions}
|
||||
|
||||
@@ -27,6 +27,7 @@ import { QuestionNavigator } from "@/components/workspace/question-navigator";
|
||||
import { ThreadTitle } from "@/components/workspace/thread-title";
|
||||
import { TodoList } from "@/components/workspace/todo-list";
|
||||
import {
|
||||
CompactShortcutButtons,
|
||||
LayoutModeSwitcher,
|
||||
ThemeSwitcher,
|
||||
} from "@/components/workspace/appearance-controls";
|
||||
@@ -508,6 +509,7 @@ export default function ChatPage() {
|
||||
与全量模式 Header 右上角保持一致(content 配色贴浅底顶栏)。 */}
|
||||
{!compactChrome && (
|
||||
<>
|
||||
<CompactShortcutButtons tone="content" />
|
||||
<ThemeSwitcher tone="content" />
|
||||
<LayoutModeSwitcher tone="content" />
|
||||
<div
|
||||
|
||||
@@ -16,6 +16,7 @@ import { Input } from "@/components/ui/input";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { ImportConversationsDialog } from "@/components/workspace/thread-share-dialogs";
|
||||
import {
|
||||
CompactShortcutButtons,
|
||||
LayoutModeSwitcher,
|
||||
ThemeSwitcher,
|
||||
} from "@/components/workspace/appearance-controls";
|
||||
@@ -183,6 +184,7 @@ export default function ChatsPage({
|
||||
rightActions={
|
||||
compactChrome ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<CompactShortcutButtons tone="content" />
|
||||
<ThemeSwitcher tone="content" />
|
||||
<LayoutModeSwitcher tone="content" />
|
||||
</div>
|
||||
|
||||
@@ -44,6 +44,7 @@ import {
|
||||
WorkspaceHeader,
|
||||
} from "@/components/workspace/workspace-container";
|
||||
import {
|
||||
CompactShortcutButtons,
|
||||
LayoutModeSwitcher,
|
||||
ThemeSwitcher,
|
||||
} from "@/components/workspace/appearance-controls";
|
||||
@@ -502,6 +503,7 @@ export default function ScheduledTasksPage({
|
||||
rightActions={
|
||||
compactChrome ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<CompactShortcutButtons tone="content" />
|
||||
<ThemeSwitcher tone="content" />
|
||||
<LayoutModeSwitcher tone="content" />
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ import { getStoredAuth } from '@/core/auth';
|
||||
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
|
||||
import { PromptInputProvider } from '@/components/ai-elements/prompt-input';
|
||||
import {
|
||||
CompactShortcutButtons,
|
||||
LayoutModeSwitcher,
|
||||
ThemeSwitcher,
|
||||
} from '@/components/workspace/appearance-controls';
|
||||
@@ -91,6 +92,7 @@ function shouldShowCompactTopActions(pathname: string): boolean {
|
||||
function CompactWorkspaceTopActions() {
|
||||
return (
|
||||
<div className="z-[60] flex h-12 shrink-0 items-center justify-end gap-2 border-b border-border/70 bg-card/90 px-4 shadow-sm backdrop-blur-md">
|
||||
<CompactShortcutButtons tone="content" />
|
||||
<ThemeSwitcher tone="content" />
|
||||
<LayoutModeSwitcher tone="content" />
|
||||
<div className="bg-border/70 mx-1 h-6 w-px shrink-0" aria-hidden />
|
||||
@@ -99,6 +101,16 @@ function CompactWorkspaceTopActions() {
|
||||
);
|
||||
}
|
||||
|
||||
function CompactAppearanceActions() {
|
||||
return (
|
||||
<>
|
||||
<CompactShortcutButtons tone="content" />
|
||||
<ThemeSwitcher tone="content" />
|
||||
<LayoutModeSwitcher tone="content" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function WorkspaceLayout({
|
||||
children,
|
||||
pageSidebarCollapsed,
|
||||
@@ -342,7 +354,12 @@ export default function WorkspaceRoutes({
|
||||
element={
|
||||
<WorkspaceLayout {...layoutProps}>
|
||||
<ChatRuntime>
|
||||
<AgentChatPage showAgentList />
|
||||
<AgentChatPage
|
||||
showAgentList
|
||||
compactAppearanceActions={
|
||||
headerHidden ? <CompactAppearanceActions /> : undefined
|
||||
}
|
||||
/>
|
||||
</ChatRuntime>
|
||||
</WorkspaceLayout>
|
||||
}
|
||||
|
||||
@@ -4,7 +4,11 @@ import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import "@/components/page-sdebar.css";
|
||||
import { LayoutModeSwitcher, ThemeSwitcher } from "@/components/workspace/appearance-controls";
|
||||
import {
|
||||
CompactShortcutButtons,
|
||||
LayoutModeSwitcher,
|
||||
ThemeSwitcher,
|
||||
} from "@/components/workspace/appearance-controls";
|
||||
import { NotificationDialog } from "@/components/workspace/notification-dialog";
|
||||
import { getStoredAuth, getAccountDisplayName } from "@/core/auth";
|
||||
import { isWujieEnv } from "@/core/embed/wujie";
|
||||
@@ -124,6 +128,7 @@ const Header = ({ collapsed }: HeaderProps) => {
|
||||
// 右侧操作区(换肤/通知/用户)—— 深浅两套布局共用
|
||||
const actionCluster = (
|
||||
<>
|
||||
<CompactShortcutButtons tone={isDark ? "banner-dark" : "banner-light"} />
|
||||
<ThemeSwitcher tone={isDark ? "banner-dark" : "banner-light"} />
|
||||
|
||||
<LayoutModeSwitcher
|
||||
|
||||
@@ -5,6 +5,7 @@ from __future__ import annotations
|
||||
import logging
|
||||
from typing import Literal
|
||||
from urllib.parse import urlparse
|
||||
from uuid import uuid4
|
||||
|
||||
from fastapi import APIRouter, HTTPException, Request
|
||||
from pydantic import BaseModel, Field
|
||||
@@ -13,6 +14,8 @@ from app.gateway.auth.password import hash_password_async
|
||||
from app.gateway.deps import get_optional_user_from_request
|
||||
from deerflow.config import get_app_config
|
||||
from deerflow.config.system_settings import (
|
||||
AppearanceRouteParam,
|
||||
CompactShortcutButton,
|
||||
LeaderboardSettings,
|
||||
ModelConcurrencySettings,
|
||||
PluginDomainAgentMapping,
|
||||
@@ -537,6 +540,7 @@ class AppearanceResponse(BaseModel):
|
||||
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)")
|
||||
compact_shortcut_buttons: list[CompactShortcutButton] = Field(default_factory=list, description="Shortcut buttons rendered in top bars")
|
||||
|
||||
|
||||
class AppearanceUpdateRequest(BaseModel):
|
||||
@@ -544,6 +548,61 @@ class AppearanceUpdateRequest(BaseModel):
|
||||
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)
|
||||
compact_shortcut_buttons: list[CompactShortcutButton] | None = Field(default=None)
|
||||
|
||||
|
||||
def _normalize_compact_shortcut_buttons(
|
||||
buttons: list[CompactShortcutButton] | None,
|
||||
) -> list[CompactShortcutButton]:
|
||||
normalized: list[CompactShortcutButton] = []
|
||||
seen_ids: set[str] = set()
|
||||
for index, item in enumerate(buttons or []):
|
||||
label = (item.label or "").strip() or "快捷入口"
|
||||
url = (item.url or "").strip()
|
||||
row_id = (item.id or "").strip() or uuid4().hex
|
||||
if row_id in seen_ids:
|
||||
row_id = uuid4().hex
|
||||
seen_ids.add(row_id)
|
||||
|
||||
route_params: list[AppearanceRouteParam] = []
|
||||
for param in item.route_params or []:
|
||||
key = (param.key or "").strip()
|
||||
if not key:
|
||||
continue
|
||||
if param.paramType == "theme":
|
||||
route_params.append(
|
||||
AppearanceRouteParam(
|
||||
key=key,
|
||||
paramType="theme",
|
||||
themeValue=(param.themeValue or "").strip()
|
||||
or "red=red;blue=blue;dark-blue=dark-blue",
|
||||
)
|
||||
)
|
||||
continue
|
||||
|
||||
source = (param.source or "access_token").strip() or "access_token"
|
||||
route_params.append(
|
||||
AppearanceRouteParam(
|
||||
key=key,
|
||||
paramType="login",
|
||||
source=source,
|
||||
customValue=(param.customValue or "").strip()
|
||||
if source == "other"
|
||||
else None,
|
||||
)
|
||||
)
|
||||
|
||||
normalized.append(
|
||||
CompactShortcutButton(
|
||||
id=row_id,
|
||||
label=label,
|
||||
url=url,
|
||||
route_params=route_params,
|
||||
enabled=bool(item.enabled),
|
||||
sort_order=index,
|
||||
)
|
||||
)
|
||||
return normalized
|
||||
|
||||
|
||||
def _appearance_response(appearance) -> AppearanceResponse:
|
||||
@@ -552,6 +611,10 @@ def _appearance_response(appearance) -> AppearanceResponse:
|
||||
default_skill_view=appearance.default_skill_view,
|
||||
default_agent_view=appearance.default_agent_view,
|
||||
default_layout_mode=appearance.default_layout_mode,
|
||||
compact_shortcut_buttons=sorted(
|
||||
appearance.compact_shortcut_buttons,
|
||||
key=lambda item: item.sort_order,
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
@@ -574,6 +637,10 @@ async def update_appearance_settings(
|
||||
for key in ("default_theme", "default_skill_view", "default_agent_view", "default_layout_mode"):
|
||||
if key in fields and fields[key] is not None:
|
||||
update[key] = fields[key]
|
||||
if "compact_shortcut_buttons" in fields and body.compact_shortcut_buttons is not None:
|
||||
update["compact_shortcut_buttons"] = _normalize_compact_shortcut_buttons(
|
||||
body.compact_shortcut_buttons
|
||||
)
|
||||
if update:
|
||||
updated_appearance = current.appearance.model_copy(update=update)
|
||||
saved = save_system_settings(
|
||||
|
||||
@@ -18,6 +18,7 @@ import logging
|
||||
import threading
|
||||
from pathlib import Path
|
||||
from typing import Literal
|
||||
from uuid import uuid4
|
||||
|
||||
from pydantic import BaseModel, ConfigDict, Field
|
||||
|
||||
@@ -38,6 +39,60 @@ class PromptPrefixSettings(BaseModel):
|
||||
model_config = ConfigDict(extra="ignore")
|
||||
|
||||
|
||||
class AppearanceRouteParam(BaseModel):
|
||||
"""Runtime query-param descriptor for top-bar shortcut buttons.
|
||||
|
||||
The frontend resolves login params from ``userInfo`` and theme params from
|
||||
the current UI theme, matching the light-app center's link builder.
|
||||
"""
|
||||
|
||||
key: str = Field(default="", description="Query parameter name appended to the shortcut URL")
|
||||
paramType: Literal["login", "theme"] = Field(default="login", description="Where the parameter value comes from")
|
||||
source: str | None = Field(default=None, description="login param source field in userInfo, or 'other'")
|
||||
customValue: str | None = Field(default=None, description="Literal value when source is 'other'")
|
||||
themeValue: str | None = Field(default=None, description="Theme-value mapping string, e.g. red=red;dark-blue=dark")
|
||||
model_config = ConfigDict(extra="ignore")
|
||||
|
||||
|
||||
def _default_shortcut_route_params() -> list[AppearanceRouteParam]:
|
||||
return [
|
||||
AppearanceRouteParam(
|
||||
key="access_token",
|
||||
paramType="login",
|
||||
source="access_token",
|
||||
customValue="",
|
||||
themeValue="red=red;blue=blue;dark-blue=dark-blue",
|
||||
)
|
||||
]
|
||||
|
||||
|
||||
class CompactShortcutButton(BaseModel):
|
||||
"""Configurable shortcut shown in top bars before the theme switcher."""
|
||||
|
||||
id: str = Field(default_factory=lambda: uuid4().hex, description="Stable row id for editing")
|
||||
label: str = Field(default="快捷入口", description="Button text shown next to the icon")
|
||||
url: str = Field(default="", description="Target URL opened in a new tab")
|
||||
route_params: list[AppearanceRouteParam] = Field(
|
||||
default_factory=_default_shortcut_route_params,
|
||||
description="Query parameters resolved at launch time and appended to url",
|
||||
)
|
||||
enabled: bool = Field(default=True, description="Whether this shortcut is rendered")
|
||||
sort_order: int = Field(default=0, description="Display order in top bars")
|
||||
model_config = ConfigDict(extra="ignore")
|
||||
|
||||
|
||||
def _default_compact_shortcut_buttons() -> list[CompactShortcutButton]:
|
||||
return [
|
||||
CompactShortcutButton(
|
||||
id="default-compact-shortcut",
|
||||
label="快捷入口",
|
||||
url="",
|
||||
enabled=True,
|
||||
sort_order=0,
|
||||
)
|
||||
]
|
||||
|
||||
|
||||
class AppearanceSettings(BaseModel):
|
||||
"""System-wide appearance defaults that any *new* user inherits.
|
||||
|
||||
@@ -63,6 +118,10 @@ class AppearanceSettings(BaseModel):
|
||||
default="full",
|
||||
description="Default interface layout for users who haven't picked their own — full (sidebar + header) / compact (hidden)",
|
||||
)
|
||||
compact_shortcut_buttons: list[CompactShortcutButton] = Field(
|
||||
default_factory=_default_compact_shortcut_buttons,
|
||||
description="Shortcut buttons rendered before the theme switcher in top bars",
|
||||
)
|
||||
model_config = ConfigDict(extra="ignore")
|
||||
|
||||
|
||||
|
||||
Reference in new issue
Block a user