120 lines
3.0 KiB
TypeScript
120 lines
3.0 KiB
TypeScript
// src/views/AgentChat/components/RightSidebar/Statistics.tsx
|
||
// 统计信息组件
|
||
|
||
import React from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import {
|
||
Card,
|
||
CardBody,
|
||
VStack,
|
||
Flex,
|
||
Box,
|
||
Text,
|
||
} from '@chakra-ui/react';
|
||
import { MessageSquare, Activity, Code } from 'lucide-react';
|
||
|
||
/**
|
||
* Statistics 组件的 Props 类型
|
||
*/
|
||
interface StatisticsProps {
|
||
/** 对话总数 */
|
||
sessionsCount: number;
|
||
/** 消息总数 */
|
||
messagesCount: number;
|
||
/** 已选工具数 */
|
||
selectedToolsCount: number;
|
||
}
|
||
|
||
/**
|
||
* Statistics - 统计信息组件
|
||
*
|
||
* 职责：
|
||
* 1. 显示统计卡片（对话数、消息数、已选工具数）
|
||
* 2. 渐变色大数字展示
|
||
* 3. 图标装饰
|
||
*
|
||
* 设计特性：
|
||
* - 卡片渐进入场动画（延迟 `idx * 0.1`）
|
||
* - 毛玻璃效果卡片
|
||
* - 渐变色数字（蓝紫/紫粉/绿青）
|
||
* - 半透明图标装饰
|
||
*/
|
||
const Statistics: React.FC<StatisticsProps> = ({
|
||
sessionsCount,
|
||
messagesCount,
|
||
selectedToolsCount,
|
||
}) => {
|
||
const stats = [
|
||
{
|
||
label: '对话数',
|
||
value: sessionsCount,
|
||
gradient: 'linear(to-r, blue.400, purple.400)',
|
||
icon: MessageSquare,
|
||
iconColor: '#60A5FA',
|
||
},
|
||
{
|
||
label: '消息数',
|
||
value: messagesCount,
|
||
gradient: 'linear(to-r, purple.400, pink.400)',
|
||
icon: Activity,
|
||
iconColor: '#C084FC',
|
||
},
|
||
{
|
||
label: '已选工具',
|
||
value: selectedToolsCount,
|
||
gradient: 'linear(to-r, green.400, teal.400)',
|
||
icon: Code,
|
||
iconColor: '#34D399',
|
||
},
|
||
];
|
||
|
||
return (
|
||
<VStack spacing={4} align="stretch">
|
||
{stats.map((stat, idx) => {
|
||
const Icon = stat.icon;
|
||
|
||
return (
|
||
<motion.div
|
||
key={stat.label}
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: idx * 0.1 }}
|
||
>
|
||
<Card
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
backdropFilter="blur(12px)"
|
||
border="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
|
||
>
|
||
<CardBody p={4}>
|
||
<Flex align="center" justify="space-between">
|
||
{/* 左侧：标签和数值 */}
|
||
<Box>
|
||
<Text fontSize="xs" color="gray.400">
|
||
{stat.label}
|
||
</Text>
|
||
<Text
|
||
fontSize="2xl"
|
||
fontWeight="bold"
|
||
bgGradient={stat.gradient}
|
||
bgClip="text"
|
||
>
|
||
{stat.value}
|
||
</Text>
|
||
</Box>
|
||
|
||
{/* 右侧：图标装饰 */}
|
||
<Icon className="w-8 h-8" color={stat.iconColor} style={{ opacity: 0.5 }} />
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</VStack>
|
||
);
|
||
};
|
||
|
||
export default Statistics;
|