优化配置组件,添加悬停效果

This commit is contained in:
Jerry 2025-06-19 12:49:48 +08:00
parent 8c71a4c83c
commit 1dbd840d36

View File

@ -25,6 +25,14 @@ const defaultConfig = {
authKey: '',
};
/**
* 连接地址配置组件
* @param isOpen 打开状态
* @param onClose 关闭状态
* @param onSave 保存状态
* @returns {JSX.Element}
* @constructor
*/
const ConnectionConfigModal = ({ isOpen, onClose, onSave }) => {
const [config, setConfig] = useState(defaultConfig);
const [saved, setSaved] = useState(false);
@ -84,6 +92,7 @@ const ConnectionConfigModal = ({ isOpen, onClose, onSave }) => {
top={3}
right={3}
onClick={onClose}
_hover={{ bg: 'rgba(255, 0, 0, 0.3)' }}
>
<IoClose size={20} color={'white'} />
</Button>
@ -124,6 +133,7 @@ const ConnectionConfigModal = ({ isOpen, onClose, onSave }) => {
borderColor={'whiteAlpha.500'}
color={'white'}
onClick={handleClear}
_hover={{ bg: 'rgba(0, 0, 255, 0.3)' }}
>
清除配置
</Button>
@ -134,6 +144,7 @@ const ConnectionConfigModal = ({ isOpen, onClose, onSave }) => {
borderColor={'whiteAlpha.500'}
color={'white'}
onClick={onClose}
_hover={{ bg: 'rgba(0, 0, 255, 0.3)' }}
>
取消
</Button>
@ -146,6 +157,7 @@ const ConnectionConfigModal = ({ isOpen, onClose, onSave }) => {
isDisabled={saved}
position={'relative'}
width={'80px'}
_hover={{ bg: 'rgba(0, 0, 255, 0.3)' }}
>
<AnimatePresence initial={false} mode={'wait'}>
{saved ? (