refactor(ModelList): streamline button layout and improve accessibility

- Removed tooltip wrappers from manage and add model buttons for a cleaner UI.
- Introduced a new Flex container for primary and default buttons, enhancing layout consistency.
- Updated button rendering to improve accessibility and user experience.
This commit is contained in:
kangfenmao 2025-07-24 15:43:26 +08:00
parent 38c1181359
commit c262fd75e1

View File

@ -112,12 +112,6 @@ const ModelList: React.FC<ModelListProps> = ({ providerId }) => {
<CollapsibleSearchBar onSearch={setSearchText} />
</HStack>
<HStack>
<Tooltip title={t('button.manage')} mouseLeaveDelay={0}>
<Button type="text" onClick={onManageModel} icon={<ListCheck size={16} />} disabled={isHealthChecking} />
</Tooltip>
<Tooltip title={t('button.add')} mouseLeaveDelay={0}>
<Button type="text" onClick={onAddModel} icon={<Plus size={16} />} disabled={isHealthChecking} />
</Tooltip>
<Tooltip title={t('settings.models.check.button_caption')} mouseLeaveDelay={0}>
<Button
type="text"
@ -163,6 +157,14 @@ const ModelList: React.FC<ModelListProps> = ({ providerId }) => {
<div style={{ height: 5 }} />
)}
</Flex>
<Flex gap={10} style={{ marginTop: 10 }}>
<Button type="primary" onClick={onManageModel} icon={<ListCheck size={16} />} disabled={isHealthChecking}>
{t('button.manage')}
</Button>
<Button type="default" onClick={onAddModel} icon={<Plus size={16} />} disabled={isHealthChecking}>
{t('button.add')}
</Button>
</Flex>
{models.map((model) => (
<ModelEditContent
provider={provider}