样式修改

2026-07-03 16:35:52 +08:00
1 parent 96947d7636
commit f3511e5cd0
@@ -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,