vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
迁移以下 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>
This commit is contained in:
zdl
2025-12-25 16:28:35 +08:00
parent 5c4bcce125
commit c29e9e9cc7
10 changed files with 43 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/AgentChat/components/ChatArea/ExecutionStepsDisplay.js
View File

@@ -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)',

11
src/views/AgentChat/components/ChatArea/MessageRenderer.js
View File

@@ -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)"

3
src/views/AgentChat/components/ChatArea/WelcomeScreen.js
View File

@@ -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"

19
src/views/AgentChat/components/ChatArea/index.js
View File

@@ -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"

3
src/views/AgentChat/components/LeftSidebar/SessionCard.js
View File

@@ -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={{

9
src/views/AgentChat/components/LeftSidebar/index.js
View File

@@ -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"

5
src/views/AgentChat/components/MeetingRoom/index.js
View File

@@ -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}

3
src/views/AgentChat/components/RightSidebar/ToolSelector.tsx
View File

@@ -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)',

15
src/views/AgentChat/components/RightSidebar/index.js
View File

@@ -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)"

3
src/views/AgentChat/index.js
View File

@@ -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)"