refactor(glass): 批次3 - 迁移 AgentChat 页面使用统一毛玻璃配置

迁移以下 10 个 AgentChat 模块文件:
- index.js: GLASS_BLUR.lg 替换 blur(20px)
- LeftSidebar/index.js: GLASS_BLUR.lg/sm 替换 blur(20px)/blur(10px)
- LeftSidebar/SessionCard.js: GLASS_BLUR.md 替换 blur(12px)
- RightSidebar/index.js: GLASS_BLUR.lg/sm/md 替换多处硬编码
- RightSidebar/ToolSelector.tsx: GLASS_BLUR.md 替换 blur(12px)
- ChatArea/index.js: GLASS_BLUR.lg/sm 替换多处硬编码
- ChatArea/MessageRenderer.js: GLASS_BLUR.md 替换 blur(16px)
- ChatArea/WelcomeScreen.js: GLASS_BLUR.md 替换 blur(12px)
- ChatArea/ExecutionStepsDisplay.js: GLASS_BLUR.sm 替换 blur(10px)
- MeetingRoom/index.js: GLASS_BLUR.lg 替换 blur(20px)

保留 saturate(180%) 组合效果

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/AgentChat/components/ChatArea/ExecutionStepsDisplay.js

@@ -24,6 +24,7 @@ import {
 } from '@chakra-ui/react';
 import { Activity, ChevronDown, ChevronRight, Copy, Check, Database, FileJson } from 'lucide-react';
 import { MarkdownWithCharts } from '@components/ChatBot/MarkdownWithCharts';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * 格式化结果数据用于显示
@@ -248,7 +249,7 @@ ${JSON.stringify(echartsConfig)}
     >
       <Card
         bg="rgba(255, 255, 255, 0.03)"
-        backdropFilter="blur(10px)"
+        backdropFilter={GLASS_BLUR.sm}
         border="1px solid"
         borderColor={isExpanded ? 'rgba(192, 132, 252, 0.3)' : 'rgba(255, 255, 255, 0.1)'}
         transition="all 0.2s"
@@ -355,7 +356,7 @@ const ExecutionStepsDisplay = ({ steps, plan }) => {
         borderColor="rgba(255, 255, 255, 0.1)"
         borderRadius="lg"
         bg="rgba(255, 255, 255, 0.03)"
-        backdropFilter="blur(10px)"
+        backdropFilter={GLASS_BLUR.sm}
         _hover={{
           bg: 'rgba(255, 255, 255, 0.05)',
           borderColor: 'rgba(255, 255, 255, 0.2)',

src/views/AgentChat/components/ChatArea/MessageRenderer.js

@@ -22,6 +22,7 @@ import { Cpu, User, Copy, ThumbsUp, ThumbsDown, File, ListChecks, Play, CheckCir
 import { MessageTypes } from '../../constants/messageTypes';
 import ExecutionStepsDisplay from './ExecutionStepsDisplay';
 import { MarkdownWithCharts } from '@components/ChatBot/MarkdownWithCharts';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * MessageRenderer - 消息渲染器组件
@@ -95,7 +96,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
             <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
               <Card
                 bg="rgba(255, 255, 255, 0.05)"
-                backdropFilter="blur(16px) saturate(180%)"
+                backdropFilter={`${GLASS_BLUR.md} saturate(180%)`}
                 border="1px solid"
                 borderColor="rgba(255, 255, 255, 0.1)"
                 boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
@@ -140,7 +141,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
             >
               <Card
                 bg="rgba(255, 255, 255, 0.05)"
-                backdropFilter="blur(16px) saturate(180%)"
+                backdropFilter={`${GLASS_BLUR.md} saturate(180%)`}
                 border="1px solid"
                 borderColor="rgba(255, 255, 255, 0.1)"
                 boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
@@ -261,7 +262,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
             >
               <Card
                 bg="rgba(255, 255, 255, 0.05)"
-                backdropFilter="blur(16px) saturate(180%)"
+                backdropFilter={`${GLASS_BLUR.md} saturate(180%)`}
                 border="1px solid"
                 borderColor="rgba(139, 92, 246, 0.3)"
                 boxShadow="0 8px 32px 0 rgba(139, 92, 246, 0.2)"
@@ -355,7 +356,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
             >
               <Card
                 bg="rgba(255, 255, 255, 0.05)"
-                backdropFilter="blur(16px) saturate(180%)"
+                backdropFilter={`${GLASS_BLUR.md} saturate(180%)`}
                 border="1px solid"
                 borderColor="rgba(59, 130, 246, 0.3)"
                 boxShadow="0 8px 32px 0 rgba(59, 130, 246, 0.2)"
@@ -513,7 +514,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
           <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }}>
             <Card
               bg="rgba(239, 68, 68, 0.1)"
-              backdropFilter="blur(16px)"
+              backdropFilter={GLASS_BLUR.md}
               border="1px solid"
               borderColor="rgba(239, 68, 68, 0.5)"
               boxShadow="0 8px 32px 0 rgba(239, 68, 68, 0.37)"

src/views/AgentChat/components/ChatArea/WelcomeScreen.js

@@ -22,6 +22,7 @@ import {
   PieChart,
   Sparkles,
 } from 'lucide-react';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * 建议任务卡片数据
@@ -88,7 +89,7 @@ const SuggestionCard = ({ card, onClick, index }) => {
         w="full"
         p={4}
         bg="rgba(255, 255, 255, 0.03)"
-        backdropFilter="blur(12px)"
+        backdropFilter={GLASS_BLUR.md}
         border="1px solid"
         borderColor="rgba(255, 255, 255, 0.08)"
         borderRadius="xl"

src/views/AgentChat/components/ChatArea/index.js

@@ -31,6 +31,7 @@ import {
 } from 'lucide-react';
 import { AVAILABLE_MODELS } from '../../constants/models';
 import { animations } from '../../constants/animations';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 import MessageRenderer from './MessageRenderer';
 import WelcomeScreen from './WelcomeScreen';
 
@@ -89,7 +90,7 @@ const ChatArea = ({
       {/* 顶部标题栏 - 深色毛玻璃 */}
       <Box
         bg="rgba(17, 24, 39, 0.8)"
-        backdropFilter="blur(20px) saturate(180%)"
+        backdropFilter={`${GLASS_BLUR.lg} saturate(180%)`}
         borderBottom="1px solid"
         borderColor="rgba(255, 255, 255, 0.1)"
         px={4}
@@ -108,7 +109,7 @@ const ChatArea = ({
                   onClick={onToggleLeftSidebar}
                   bg="rgba(255, 255, 255, 0.05)"
                   color="gray.400"
-                  backdropFilter="blur(10px)"
+                  backdropFilter={GLASS_BLUR.sm}
                   border="1px solid"
                   borderColor="rgba(255, 255, 255, 0.1)"
                   _hover={{
@@ -179,7 +180,7 @@ const ChatArea = ({
                   onClick={onNewSession}
                   bg="rgba(255, 255, 255, 0.05)"
                   color="gray.400"
-                  backdropFilter="blur(10px)"
+                  backdropFilter={GLASS_BLUR.sm}
                   border="1px solid"
                   borderColor="rgba(255, 255, 255, 0.1)"
                   _hover={{
@@ -200,7 +201,7 @@ const ChatArea = ({
                   onClick={onToggleRightSidebar}
                   bg="rgba(255, 255, 255, 0.05)"
                   color="gray.400"
-                  backdropFilter="blur(10px)"
+                  backdropFilter={GLASS_BLUR.sm}
                   border="1px solid"
                   borderColor="rgba(255, 255, 255, 0.1)"
                   _hover={{
@@ -262,7 +263,7 @@ const ChatArea = ({
       {/* 输入栏 - 深色毛玻璃 */}
       <Box
         bg="rgba(17, 24, 39, 0.8)"
-        backdropFilter="blur(20px) saturate(180%)"
+        backdropFilter={`${GLASS_BLUR.lg} saturate(180%)`}
         borderTop="1px solid"
         borderColor="rgba(255, 255, 255, 0.1)"
         px={4}
@@ -285,7 +286,7 @@ const ChatArea = ({
                     size="md"
                     variant="subtle"
                     bg="rgba(255, 255, 255, 0.05)"
-                    backdropFilter="blur(10px)"
+                    backdropFilter={GLASS_BLUR.sm}
                     borderColor="rgba(255, 255, 255, 0.1)"
                     borderWidth={1}
                   >
@@ -316,7 +317,7 @@ const ChatArea = ({
                   onClick={() => fileInputRef.current?.click()}
                   bg="rgba(255, 255, 255, 0.05)"
                   color="gray.300"
-                  backdropFilter="blur(10px)"
+                  backdropFilter={GLASS_BLUR.sm}
                   border="1px solid"
                   borderColor="rgba(255, 255, 255, 0.1)"
                   _hover={{
@@ -341,7 +342,7 @@ const ChatArea = ({
                   }}
                   bg="rgba(255, 255, 255, 0.05)"
                   color="gray.300"
-                  backdropFilter="blur(10px)"
+                  backdropFilter={GLASS_BLUR.sm}
                   border="1px solid"
                   borderColor="rgba(255, 255, 255, 0.1)"
                   _hover={{
@@ -365,7 +366,7 @@ const ChatArea = ({
               variant="outline"
               borderWidth={2}
               bg="rgba(255, 255, 255, 0.05)"
-              backdropFilter="blur(10px)"
+              backdropFilter={GLASS_BLUR.sm}
               border="1px solid"
               borderColor="rgba(255, 255, 255, 0.1)"
               color="white"

src/views/AgentChat/components/LeftSidebar/SessionCard.js

@@ -4,6 +4,7 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Card, CardBody, Flex, Box, Text, Badge } from '@chakra-ui/react';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * SessionCard - 会话卡片组件
@@ -25,7 +26,7 @@ const SessionCard = ({ session, isActive, onPress }) => {
         cursor="pointer"
         onClick={onPress}
         bg={isActive ? 'rgba(139, 92, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)'}
-        backdropFilter="blur(12px)"
+        backdropFilter={GLASS_BLUR.md}
         borderWidth={1}
         borderColor={isActive ? 'purple.400' : 'rgba(255, 255, 255, 0.1)'}
         _hover={{

src/views/AgentChat/components/LeftSidebar/index.js

@@ -21,6 +21,7 @@ import { MessageSquare, Plus, Search, ChevronLeft, ChevronDown, MoreHorizontal }
 import { animations } from '../../constants/animations';
 import { groupSessionsByDate } from '../../utils/sessionUtils';
 import DateGroup from './DateGroup';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * LeftSidebar - 左侧栏组件
@@ -94,7 +95,7 @@ const LeftSidebar = ({
             display="flex"
             flexDirection="column"
             bg="rgba(17, 24, 39, 0.8)"
-            backdropFilter="blur(20px) saturate(180%)"
+            backdropFilter={`${GLASS_BLUR.lg} saturate(180%)`}
             borderRight="1px solid"
             borderColor="rgba(255, 255, 255, 0.1)"
             boxShadow="4px 0 24px rgba(0, 0, 0, 0.3)"
@@ -123,7 +124,7 @@ const LeftSidebar = ({
                         onClick={onNewSession}
                         bg="rgba(255, 255, 255, 0.05)"
                         color="gray.300"
-                        backdropFilter="blur(10px)"
+                        backdropFilter={GLASS_BLUR.sm}
                         border="1px solid"
                         borderColor="rgba(255, 255, 255, 0.1)"
                         _hover={{
@@ -144,7 +145,7 @@ const LeftSidebar = ({
                         onClick={onClose}
                         bg="rgba(255, 255, 255, 0.05)"
                         color="gray.300"
-                        backdropFilter="blur(10px)"
+                        backdropFilter={GLASS_BLUR.sm}
                         border="1px solid"
                         borderColor="rgba(255, 255, 255, 0.1)"
                         _hover={{
@@ -171,7 +172,7 @@ const LeftSidebar = ({
                   variant="outline"
                   pl={10}
                   bg="rgba(255, 255, 255, 0.05)"
-                  backdropFilter="blur(10px)"
+                  backdropFilter={GLASS_BLUR.sm}
                   border="1px solid"
                   borderColor="rgba(255, 255, 255, 0.1)"
                   color="white"

src/views/AgentChat/components/MeetingRoom/index.js

@@ -35,6 +35,7 @@ import { useInvestmentMeeting } from '../../hooks/useInvestmentMeeting';
 import MeetingMessageBubble from './MeetingMessageBubble';
 import MeetingRolePanel from './MeetingRolePanel';
 import MeetingWelcome from './MeetingWelcome';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * MeetingRoom - 投研会议室主组件
@@ -151,7 +152,7 @@ const MeetingRoom = ({ user, onToast }) => {
       {/* 顶部标题栏 */}
       <Box
         bg="rgba(17, 24, 39, 0.9)"
-        backdropFilter="blur(20px)"
+        backdropFilter={GLASS_BLUR.lg}
         borderBottom="1px solid"
         borderColor="rgba(255, 255, 255, 0.1)"
         px={6}
@@ -342,7 +343,7 @@ const MeetingRoom = ({ user, onToast }) => {
       {/* 输入栏 */}
       <Box
         bg="rgba(17, 24, 39, 0.9)"
-        backdropFilter="blur(20px)"
+        backdropFilter={GLASS_BLUR.lg}
         borderTop="1px solid"
         borderColor="rgba(255, 255, 255, 0.1)"
         px={6}

src/views/AgentChat/components/RightSidebar/ToolSelector.tsx

@@ -19,6 +19,7 @@ import {
   Text,
 } from '@chakra-ui/react';
 import { MCP_TOOLS, TOOL_CATEGORIES } from '../../constants/tools';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * ToolSelector 组件的 Props 类型
@@ -81,7 +82,7 @@ const ToolSelector: React.FC<ToolSelectorProps> = ({ selectedTools, onToolsChang
                 borderRadius="lg"
                 mb={2}
                 bg="rgba(255, 255, 255, 0.05)"
-                backdropFilter="blur(12px)"
+                backdropFilter={GLASS_BLUR.md}
                 _hover={{
                   bg: 'rgba(255, 255, 255, 0.08)',
                   borderColor: 'rgba(255, 255, 255, 0.2)',

src/views/AgentChat/components/RightSidebar/index.js

@@ -41,6 +41,7 @@ import {
 import { animations } from '../../constants/animations';
 import { AVAILABLE_MODELS } from '../../constants/models';
 import { MCP_TOOLS, TOOL_CATEGORIES } from '../../constants/tools';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * RightSidebar - 右侧栏组件（配置中心）
@@ -82,7 +83,7 @@ const RightSidebar = ({
             display="flex"
             flexDirection="column"
             bg="rgba(17, 24, 39, 0.8)"
-            backdropFilter="blur(20px) saturate(180%)"
+            backdropFilter={`${GLASS_BLUR.lg} saturate(180%)`}
             borderLeft="1px solid"
             borderColor="rgba(255, 255, 255, 0.1)"
             boxShadow="-4px 0 24px rgba(0, 0, 0, 0.3)"
@@ -110,7 +111,7 @@ const RightSidebar = ({
                       onClick={onClose}
                       bg="rgba(255, 255, 255, 0.05)"
                       color="gray.300"
-                      backdropFilter="blur(10px)"
+                      backdropFilter={GLASS_BLUR.sm}
                       border="1px solid"
                       borderColor="rgba(255, 255, 255, 0.1)"
                       _hover={{
@@ -203,7 +204,7 @@ const RightSidebar = ({
                                 ? 'rgba(139, 92, 246, 0.15)'
                                 : 'rgba(255, 255, 255, 0.05)'
                             }
-                            backdropFilter="blur(12px)"
+                            backdropFilter={GLASS_BLUR.md}
                             borderWidth={2}
                             borderColor={
                               selectedModel === model.id ? 'purple.400' : 'rgba(255, 255, 255, 0.1)'
@@ -277,7 +278,7 @@ const RightSidebar = ({
                             borderRadius="lg"
                             mb={2}
                             bg="rgba(255, 255, 255, 0.05)"
-                            backdropFilter="blur(12px)"
+                            backdropFilter={GLASS_BLUR.md}
                             _hover={{
                               bg: 'rgba(255, 255, 255, 0.08)',
                               borderColor: 'rgba(255, 255, 255, 0.2)',
@@ -389,7 +390,7 @@ const RightSidebar = ({
                       >
                         <Card
                           bg="rgba(255, 255, 255, 0.05)"
-                          backdropFilter="blur(12px)"
+                          backdropFilter={GLASS_BLUR.md}
                           border="1px solid"
                           borderColor="rgba(255, 255, 255, 0.1)"
                           boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
@@ -426,7 +427,7 @@ const RightSidebar = ({
                       >
                         <Card
                           bg="rgba(255, 255, 255, 0.05)"
-                          backdropFilter="blur(12px)"
+                          backdropFilter={GLASS_BLUR.md}
                           border="1px solid"
                           borderColor="rgba(255, 255, 255, 0.1)"
                           boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
@@ -459,7 +460,7 @@ const RightSidebar = ({
                       >
                         <Card
                           bg="rgba(255, 255, 255, 0.05)"
-                          backdropFilter="blur(12px)"
+                          backdropFilter={GLASS_BLUR.md}
                           border="1px solid"
                           borderColor="rgba(255, 255, 255, 0.1)"
                           boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"

src/views/AgentChat/index.js

@@ -9,6 +9,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { MessageSquare, Users, Crown, Lock } from 'lucide-react';
 import { useAuth } from '@contexts/AuthContext';
 import { useSubscription } from '@hooks/useSubscription';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 // 常量配置 - 从 TypeScript 模块导入
 import { DEFAULT_MODEL_ID } from './constants/models';
@@ -157,7 +158,7 @@ const AgentChat = () => {
             spacing={6}
             p={10}
             bg="rgba(17, 24, 39, 0.8)"
-            backdropFilter="blur(20px)"
+            backdropFilter={GLASS_BLUR.lg}
             borderRadius="2xl"
             border="1px solid"
             borderColor="rgba(255, 255, 255, 0.1)"