feat(edit-vendor-modal): add icon-library reference link & tidy status switch

Highlights
• Introduced `Typography.Text` link with `IconLink` in `extraText` for the **icon** field, pointing to LobeHub’s full icon catalogue; only “请点击我” is clickable for clarity.
• Added required imports for `Typography` and `IconLink`.
• Removed unnecessary `size="large"` prop from the status `Form.Switch` to align with default form styling.

These tweaks improve user guidance when selecting vendor icons and refine the modal’s visual consistency.
This commit is contained in:
t0ng7u
2025-08-03 19:45:58 +08:00
parent 984c8ee477
commit 8a2aebf845
2 changed files with 16 additions and 3 deletions

View File

@@ -115,7 +115,7 @@ const renderEndpoints = (text) => {
return renderLimitedItems({
items: arr,
renderItem: (ep, idx) => (
<Tag key={idx} color="blue" size="small" shape='circle'>
<Tag key={idx} color="white" size="small" shape='circle'>
{ep}
</Tag>
),
@@ -128,7 +128,7 @@ const renderBoundChannels = (channels) => {
return renderLimitedItems({
items: channels,
renderItem: (c, idx) => (
<Tag key={idx} color="purple" size="small" shape='circle'>
<Tag key={idx} color="white" size="small" shape='circle'>
{c.name}({c.type})
</Tag>
),

View File

@@ -25,6 +25,8 @@ import {
Row,
} from '@douyinfe/semi-ui';
import { API, showError, showSuccess } from '../../../../helpers';
import { Typography } from '@douyinfe/semi-ui';
import { IconLink } from '@douyinfe/semi-icons';
import { useTranslation } from 'react-i18next';
import { useIsMobile } from '../../../../hooks/common/useIsMobile';
@@ -157,6 +159,18 @@ const EditVendorModal = ({ visible, handleClose, refresh, editingVendor }) => {
field="icon"
label={t('供应商图标')}
placeholder={t('请输入图标名称OpenAI、Claude.Color')}
extraText={
<span>
{t('图标使用@lobehub/icons库查询所有可用图标 ')}
<Typography.Text
link={{ href: 'https://icons.lobehub.com/components/lobe-hub', target: '_blank' }}
icon={<IconLink />}
underline
>
{t('请点击我')}
</Typography.Text>
</span>
}
showClear
/>
</Col>
@@ -164,7 +178,6 @@ const EditVendorModal = ({ visible, handleClose, refresh, editingVendor }) => {
<Form.Switch
field="status"
label={t('状态')}
size="large"
initValue={true}
/>
</Col>