样式修改

frontend-web/src/components/workspace/general-qa-sidebar.tsx

@@ -38,6 +38,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
+import { useTheme } from "@/contexts/ThemeContext";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -95,10 +96,18 @@ const MORE_CHATS_HREF = "/page/workspace/chats";
 /** 常用智能体最多展示个数。 */
 const MAX_FREQUENT = 4;
 
-// 智能体图标统一用 Bot 机器人图标；底色按 id 稳定散列到一组**深蓝 UI 规范**的色值
-// （§1.1.7 装饰色 / §1.1.8 小面积色序，docs/ui规范-深蓝），克制的蓝/青系，深蓝主题下不刺眼，
-// 浅主题也成立。图标做「主色→深一档」的轻渐变保留层次，不再用原来高彩度的玫瑰/琥珀/翠绿。
-const AGENT_COLORS = [
+// 智能体图标统一用 Bot 机器人图标；底色按 id 稳定散列到一组主题色，复刻参考图的彩色方块。
+// 浅色模式沿用原高彩度彩色（不改）；深蓝主题改用《深蓝 UI 规范》§1.1.7/§1.1.8 的蓝-青系
+// （docs/ui规范-深蓝，克制、不刺眼），仅深蓝主题下生效，互不影响。
+const AGENT_COLORS_LIGHT = [
+  { from: "#fb7185", to: "#ef4444" },
+  { from: "#60a5fa", to: "#3b82f6" },
+  { from: "#fbbf24", to: "#f59e0b" },
+  { from: "#34d399", to: "#10b981" },
+  { from: "#a78bfa", to: "#8b5cf6" },
+] as const;
+
+const AGENT_COLORS_DARK = [
   { from: "#4096FF", to: "#1677FF" }, // 蓝（链接蓝 → 主色）
   { from: "#36CFC9", to: "#13C2C2" }, // 青（辅色）
   { from: "#6388FF", to: "#0958D9" }, // 紫蓝（装饰紫 → 主色深一档）
@@ -106,12 +115,13 @@ const AGENT_COLORS = [
   { from: "#69B1FF", to: "#003EB3" }, // 浅蓝 → 主色按下
 ] as const;
 
-function agentColor(id: string) {
+function agentColor(id: string, isDark: boolean) {
   let hash = 0;
   for (let i = 0; i < id.length; i++) {
     hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
   }
-  return AGENT_COLORS[hash % AGENT_COLORS.length]!;
+  const palette = isDark ? AGENT_COLORS_DARK : AGENT_COLORS_LIGHT;
+  return palette[hash % palette.length]!;
 }
 
 /** 折叠区块标题（带 chevron 与可选计数徽标）。 */
@@ -152,6 +162,9 @@ function SectionLabel({
 
 export function GeneralQaSidebar() {
   const { t } = useI18n();
+  // 智能体图标配色分主题：深蓝主题用规范蓝-青系，其它（浅色）保持原高彩度色，互不影响。
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
   const pathname = usePathname();
   const router = useRouter();
   const navigate = useNavigate();
@@ -348,7 +361,7 @@ export function GeneralQaSidebar() {
               <div className="mt-1 flex flex-col gap-1">
                 {frequent.map((agent) => {
                   const isActive = activeAgentId === agent.id;
-                  const { from, to } = agentColor(agent.id);
+                  const { from, to } = agentColor(agent.id, isDark);
                   return (
                     <button
                       key={agent.id}