✨ 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:
@@ -115,7 +115,7 @@ const renderEndpoints = (text) => {
|
|||||||
return renderLimitedItems({
|
return renderLimitedItems({
|
||||||
items: arr,
|
items: arr,
|
||||||
renderItem: (ep, idx) => (
|
renderItem: (ep, idx) => (
|
||||||
<Tag key={idx} color="blue" size="small" shape='circle'>
|
<Tag key={idx} color="white" size="small" shape='circle'>
|
||||||
{ep}
|
{ep}
|
||||||
</Tag>
|
</Tag>
|
||||||
),
|
),
|
||||||
@@ -128,7 +128,7 @@ const renderBoundChannels = (channels) => {
|
|||||||
return renderLimitedItems({
|
return renderLimitedItems({
|
||||||
items: channels,
|
items: channels,
|
||||||
renderItem: (c, idx) => (
|
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})
|
{c.name}({c.type})
|
||||||
</Tag>
|
</Tag>
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -25,6 +25,8 @@ import {
|
|||||||
Row,
|
Row,
|
||||||
} from '@douyinfe/semi-ui';
|
} from '@douyinfe/semi-ui';
|
||||||
import { API, showError, showSuccess } from '../../../../helpers';
|
import { API, showError, showSuccess } from '../../../../helpers';
|
||||||
|
import { Typography } from '@douyinfe/semi-ui';
|
||||||
|
import { IconLink } from '@douyinfe/semi-icons';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useIsMobile } from '../../../../hooks/common/useIsMobile';
|
import { useIsMobile } from '../../../../hooks/common/useIsMobile';
|
||||||
|
|
||||||
@@ -157,6 +159,18 @@ const EditVendorModal = ({ visible, handleClose, refresh, editingVendor }) => {
|
|||||||
field="icon"
|
field="icon"
|
||||||
label={t('供应商图标')}
|
label={t('供应商图标')}
|
||||||
placeholder={t('请输入图标名称,如:OpenAI、Claude.Color')}
|
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
|
showClear
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
@@ -164,7 +178,6 @@ const EditVendorModal = ({ visible, handleClose, refresh, editingVendor }) => {
|
|||||||
<Form.Switch
|
<Form.Switch
|
||||||
field="status"
|
field="status"
|
||||||
label={t('状态')}
|
label={t('状态')}
|
||||||
size="large"
|
|
||||||
initValue={true}
|
initValue={true}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
|
|||||||
Reference in New Issue
Block a user