Jerry/AI-powered-switches
1
1
Fork 0
mirror of https://github.com/Jerryplusy/AI-powered-switches.git synced 2025-07-04 13:19:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jerry 2025-06-19 12:49:48 +08:00
parent 8c71a4c83c
commit 1dbd840d36
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/frontend/src/components/pages/welcome/ConnectionConfigModal.jsx
View File

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