60 lines
1.3 KiB
JavaScript
60 lines
1.3 KiB
JavaScript
// src/views/AgentChat/components/BackgroundEffects.js
|
|
// 背景渐变装饰层组件
|
|
|
|
import React from 'react';
|
|
import { Box } from '@chakra-ui/react';
|
|
|
|
/**
|
|
* BackgroundEffects - 背景渐变装饰层
|
|
*
|
|
* 包含主背景渐变和两个装饰光效（右上紫色、左下蓝色）
|
|
*
|
|
* @returns {JSX.Element}
|
|
*/
|
|
const BackgroundEffects = () => {
|
|
return (
|
|
<>
|
|
{/* 主背景渐变层 */}
|
|
<Box
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
bottom={0}
|
|
bgGradient="linear(to-br, gray.900, gray.800, purple.900)"
|
|
zIndex={0}
|
|
/>
|
|
|
|
{/* 右上角紫色光效 */}
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
right="-20%"
|
|
width="600px"
|
|
height="600px"
|
|
bgGradient="radial(circle, purple.600, transparent)"
|
|
opacity="0.15"
|
|
filter="blur(100px)"
|
|
pointerEvents="none"
|
|
zIndex={0}
|
|
/>
|
|
|
|
{/* 左下角蓝色光效 */}
|
|
<Box
|
|
position="absolute"
|
|
bottom="-30%"
|
|
left="-10%"
|
|
width="500px"
|
|
height="500px"
|
|
bgGradient="radial(circle, blue.600, transparent)"
|
|
opacity="0.1"
|
|
filter="blur(100px)"
|
|
pointerEvents="none"
|
|
zIndex={0}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default BackgroundEffects;
|