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

update pay function

Browse Source
This commit is contained in:
zzlgreat
2025-11-21 14:47:47 +08:00
parent 564caa08c2
commit b197d62c31
3 changed files with 28 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ChatBot/PlanCard.js
View File

@@ -23,8 +23,8 @@ import { FiTarget, FiCheckCircle, FiXCircle, FiClock, FiTool } from 'react-icons
* 执行计划卡片组件
*/
export const PlanCard = ({ plan, stepResults }) => {
const cardBg = useColorModeValue('blue.50', 'blue.900');
const borderColor = useColorModeValue('blue.200', 'blue.700');
const cardBg = useColorModeValue('blue.50', 'rgba(40, 45, 50, 0.8)');
const borderColor = useColorModeValue('blue.200', 'rgba(255, 215, 0, 0.3)');
const successColor = useColorModeValue('green.500', 'green.300');
const errorColor = useColorModeValue('red.500', 'red.300');
const pendingColor = useColorModeValue('gray.400', 'gray.500');
@@ -73,7 +73,7 @@ export const PlanCard = ({ plan, stepResults }) => {
<Icon as={FiTarget} color="blue.500" boxSize={5} />
<Text fontWeight="bold" fontSize="md">执行目标</Text>
</HStack>
<Text fontSize="sm" color="gray.600" pl={7}>
<Text fontSize="sm" color={useColorModeValue('gray.600', '#9BA1A6')} pl={7}>
{plan.goal}
</Text>
@@ -83,7 +83,7 @@ export const PlanCard = ({ plan, stepResults }) => {
{plan.reasoning && (
<>
<Text fontSize="sm" fontWeight="bold">规划思路：</Text>
<Text fontSize="sm" color="gray.600">
<Text fontSize="sm" color={useColorModeValue('gray.600', '#9BA1A6')}>
{plan.reasoning}
</Text>
<Divider />
@@ -106,7 +106,7 @@ export const PlanCard = ({ plan, stepResults }) => {
<HStack
key={index}
p={2}
bg={useColorModeValue('white', 'gray.700')}
bg={useColorModeValue('white', 'rgba(50, 55, 60, 0.6)')}
borderRadius="md"
borderWidth="1px"
borderColor={stepColor}
@@ -129,7 +129,7 @@ export const PlanCard = ({ plan, stepResults }) => {
status === 'failed' ? '✗ 失败' : '⏳ 等待'}
</Badge>
</HStack>
<Text fontSize="xs" color="gray.600">
<Text fontSize="xs" color={useColorModeValue('gray.600', '#9BA1A6')}>
{step.reason}
</Text>
</VStack>

14
src/components/ChatBot/StepResultCard.js
View File

@@ -23,8 +23,8 @@ import { FiChevronDown, FiChevronUp, FiCheckCircle, FiXCircle, FiClock, FiDataba
export const StepResultCard = ({ stepResult }) => {
const [isExpanded, setIsExpanded] = useState(false);
const cardBg = useColorModeValue('white', 'gray.700');
const borderColor = useColorModeValue('gray.200', 'gray.600');
const cardBg = useColorModeValue('white', 'rgba(40, 45, 50, 0.8)');
const borderColor = useColorModeValue('gray.200', 'rgba(255, 215, 0, 0.2)');
const successColor = useColorModeValue('green.500', 'green.300');
const errorColor = useColorModeValue('red.500', 'red.300');
@@ -80,7 +80,7 @@ export const StepResultCard = ({ stepResult }) => {
justify="space-between"
cursor="pointer"
onClick={() => setIsExpanded(!isExpanded)}
_hover={{ bg: useColorModeValue('gray.50', 'gray.600') }}
_hover={{ bg: useColorModeValue('gray.50', 'rgba(50, 55, 60, 0.7)') }}
>
<HStack flex={1}>
<Icon as={StatusIcon} color={`${statusColorScheme}.500`} boxSize={5} />
@@ -94,7 +94,7 @@ export const StepResultCard = ({ stepResult }) => {
stepResult.status === 'failed' ? '失败' : '执行中'}
</Badge>
</HStack>
<Text fontSize="xs" color="gray.500">
<Text fontSize="xs" color={useColorModeValue('gray.500', '#9BA1A6')}>
耗时: {stepResult.execution_time?.toFixed(2)}s
</Text>
</VStack>
@@ -140,7 +140,7 @@ export const StepResultCard = ({ stepResult }) => {
maxH="300px"
overflowY="auto"
p={2}
bg={useColorModeValue('gray.50', 'gray.800')}
bg={useColorModeValue('gray.50', 'rgba(25, 28, 32, 0.6)')}
borderRadius="md"
fontSize="xs"
>
@@ -155,7 +155,7 @@ export const StepResultCard = ({ stepResult }) => {
</Code>
))}
{stepResult.result.length > 3 && (
<Text fontSize="xs" color="gray.500">
<Text fontSize="xs" color={useColorModeValue('gray.500', '#9BA1A6')}>
...还有 {stepResult.result.length - 3} 条记录
</Text>
)}
@@ -172,7 +172,7 @@ export const StepResultCard = ({ stepResult }) => {
{stepResult.status === 'failed' && stepResult.error && (
<VStack align="stretch" spacing={2}>
<Text fontSize="xs" fontWeight="bold" color="red.500">错误信息:</Text>
<Text fontSize="xs" color="red.600" p={2} bg="red.50" borderRadius="md">
<Text fontSize="xs" color={useColorModeValue('red.600', 'red.300')} p={2} bg={useColorModeValue('red.50', 'rgba(220, 38, 38, 0.15)')} borderRadius="md">
{stepResult.error}
</Text>
</VStack>

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

@@ -201,16 +201,17 @@ const AgentChatV4 = () => {
const messagesEndRef = useRef(null);
const inputRef = useRef(null);
// 毛玻璃黑金配色主题
const glassBg = 'rgba(20, 20, 20, 0.7)';
const glassHoverBg = 'rgba(30, 30, 30, 0.8)';
// 毛玻璃深灰金配色主题（类似编程工具的深色主题）
const glassBg = 'rgba(30, 35, 40, 0.85)'; // 深灰色毛玻璃
const glassHoverBg = 'rgba(40, 45, 50, 0.9)';
const goldAccent = '#FFD700';
const goldGradient = 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)';
const darkBg = '#0A0A0A';
const darkBg = '#1a1d23'; // VS Code 风格的深灰背景
const borderGold = 'rgba(255, 215, 0, 0.3)';
const textGold = '#FFD700';
const textWhite = '#FFFFFF';
const textGray = '#CCCCCC';
const textWhite = '#E8E8E8'; // 柔和的白色
const textGray = '#9BA1A6'; // 柔和的灰色
const cardBg = 'rgba(40, 45, 50, 0.6)'; // 卡片背景（深灰毛玻璃）
// ==================== 会话管理函数 ====================
@@ -679,10 +680,11 @@ const AgentChatV4 = () => {
return (
<Flex
h="calc(100vh - 80px)"
h="100vh"
bg={darkBg}
position="relative"
overflow="hidden"
pt="80px" // 给导航栏留出空间
>
{/* 背景装饰 - 黄金光晕效果 */}
<Box
@@ -1284,16 +1286,17 @@ const AgentChatV4 = () => {
};
/**
* 消息渲染器（黑金毛玻璃风格）
* 消息渲染器（深灰毛玻璃风格）
*/
const MessageRenderer = ({ message, userAvatar }) => {
const glassBg = 'rgba(20, 20, 20, 0.7)';
const glassBg = 'rgba(30, 35, 40, 0.85)'; // 深灰色毛玻璃
const cardBg = 'rgba(40, 45, 50, 0.6)'; // 卡片背景
const goldAccent = '#FFD700';
const goldGradient = 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)';
const darkBg = '#0A0A0A';
const darkBg = '#1a1d23';
const borderGold = 'rgba(255, 215, 0, 0.3)';
const textWhite = '#FFFFFF';
const textGray = '#CCCCCC';
const textWhite = '#E8E8E8'; // 柔和的白色
const textGray = '#9BA1A6'; // 柔和的灰色
switch (message.type) {
case MessageTypes.USER: