AI/ragflow
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git synced 2025-08-12 06:18:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: better vertical alignment for icon and text in some setting buttons (#4615)

Browse Source 
### What problem does this PR solve?

Fixed vertical alignment issues between icons and text in API-Key and
System Model Settings buttons. This improves visual consistency across
the settings interface.

### Type of change

- [x] Refactoring

Before: Icons and text were slightly misaligned vertically
<img width="635" alt="Screenshot 2025-01-23 at 20 22 46"
src="https://github.com/user-attachments/assets/28f15637-d3fd-45a2-aae8-ca72fb12a88e"
/>

After: Icons and text are now properly centered with consistent spacing
<img width="540" alt="Screenshot 2025-01-23 at 20 23 02"
src="https://github.com/user-attachments/assets/98bb0ca5-6995-42d8-bd23-8a8f44ec0209"
/>
This commit is contained in:
Duy Huynh 2025-01-26 09:36:03 +07:00 committed by GitHub
parent 530b0dab17
commit f33415b751
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/pages/user-setting/components/setting-title/index.tsx
View File

@ -27,7 +27,10 @@ const SettingTitle = ({
</div> </div>
{showRightButton && ( {showRightButton && (
<Button type={'primary'} onClick={clickButton}> <Button type={'primary'} onClick={clickButton}>
<SettingOutlined></SettingOutlined> {t('systemModelSettings')} <Flex align="center" gap={4}>
<SettingOutlined />
{t('systemModelSettings')}
</Flex>
</Button> </Button>
)} )}
</Flex> </Flex>

32
web/src/pages/user-setting/setting-model/index.tsx
View File

@ -92,27 +92,31 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
<Col span={12} className={styles.factoryOperationWrapper}> <Col span={12} className={styles.factoryOperationWrapper}>
<Space size={'middle'}> <Space size={'middle'}>
<Button onClick={handleApiKeyClick}> <Button onClick={handleApiKeyClick}>
{isLocalLlmFactory(item.name) || <Flex align="center" gap={4}>
item.name === 'VolcEngine' || {isLocalLlmFactory(item.name) ||
item.name === 'Tencent Hunyuan' || item.name === 'VolcEngine' ||
item.name === 'XunFei Spark' || item.name === 'Tencent Hunyuan' ||
item.name === 'BaiduYiyan' || item.name === 'XunFei Spark' ||
item.name === 'Fish Audio' || item.name === 'BaiduYiyan' ||
item.name === 'Tencent Cloud' || item.name === 'Fish Audio' ||
item.name === 'Google Cloud' || item.name === 'Tencent Cloud' ||
item.name === 'Azure OpenAI' item.name === 'Google Cloud' ||
? t('addTheModel') item.name === 'Azure OpenAI'
: 'API-Key'} ? t('addTheModel')
<SettingOutlined /> : 'API-Key'}
<SettingOutlined />
</Flex>
</Button> </Button>
<Button onClick={handleShowMoreClick}> <Button onClick={handleShowMoreClick}>
<Flex gap={'small'}> <Flex align="center" gap={4}>
{t('showMoreModels')} {t('showMoreModels')}
<MoreModelIcon /> <MoreModelIcon />
</Flex> </Flex>
</Button> </Button>
<Button type={'text'} onClick={handleDeleteFactory}> <Button type={'text'} onClick={handleDeleteFactory}>
<CloseCircleOutlined style={{ color: '#D92D20' }} /> <Flex align="center">
<CloseCircleOutlined style={{ color: '#D92D20' }} />
</Flex>
</Button> </Button>
</Space> </Space>
</Col> </Col>