oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 feat(models): add row styling for disabled models in ModelsTable

Browse Source 
Add visual distinction for enabled/disabled models by applying different
background colors to table rows based on model status. This implementation
follows the same pattern used in ChannelsTable for consistent user experience.

Changes:
- Modified handleRow function in useModelsData.js to include row styling
- Disabled models (status !== 1) now display with gray background using
  --semi-color-disabled-border CSS variable
- Enabled models (status === 1) maintain normal background color
- Preserved existing row click selection functionality

This enhancement improves the visual feedback for users to quickly identify
which models are active vs inactive in the models management interface.
This commit is contained in:
t0ng7u
2025-08-07 10:54:05 +08:00
parent 94506bee99
commit 0a231a8acc
3 changed files with 56 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/table/models/components/SelectionNotification.jsx
View File

@@ -45,7 +45,7 @@ const SelectionNotification = ({ selectedKeys = [], t, onDelete, onAddPrefill, o
<Space wrap> <Space wrap>
<Button <Button
size="small" size="small"
type="secondary" type="tertiary"
theme="solid" theme="solid"
onClick={onClear} onClick={onClear}
> >
@@ -61,7 +61,7 @@ const SelectionNotification = ({ selectedKeys = [], t, onDelete, onAddPrefill, o
</Button> </Button>
<Button <Button
size="small" size="small"
type="tertiary" type="secondary"
theme="solid" theme="solid"
onClick={onCopy} onClick={onCopy}
> >

110
web/src/components/table/models/modals/EditModelModal.jsx
View File

@@ -339,38 +339,29 @@ const EditModelModal = (props) => {
formApiRef.current.setValue('tags', normalized); formApiRef.current.setValue('tags', normalized);
}} }}
style={{ width: '100%' }} style={{ width: '100%' }}
extraText={( {...(tagGroups.length > 0 && {
<Space wrap> extraText: (
{tagGroups.map(group => ( <Space wrap>
<Button {tagGroups.map(group => (
key={group.id} <Button
size='small' key={group.id}
type='primary' size='small'
onClick={() => { type='primary'
if (formApiRef.current) { onClick={() => {
const currentTags = formApiRef.current.getValue('tags') || []; if (formApiRef.current) {
const newTags = [...currentTags, ...(group.items || [])]; const currentTags = formApiRef.current.getValue('tags') || [];
const uniqueTags = [...new Set(newTags)]; const newTags = [...currentTags, ...(group.items || [])];
formApiRef.current.setValue('tags', uniqueTags); const uniqueTags = [...new Set(newTags)];
} formApiRef.current.setValue('tags', uniqueTags);
}} }
> }}
{group.name} >
</Button> {group.name}
))} </Button>
<Button ))}
size='small' </Space>
type='warning' )
onClick={() => { })}
if (formApiRef.current) {
formApiRef.current.setValue('tags', []);
}
}}
>
{t('清除标签')}
</Button>
</Space>
)}
/> />
</Col> </Col>
<Col span={24}> <Col span={24}>
@@ -398,38 +389,29 @@ const EditModelModal = (props) => {
addOnBlur addOnBlur
showClear showClear
style={{ width: '100%' }} style={{ width: '100%' }}
extraText={( {...(endpointGroups.length > 0 && {
<Space wrap> extraText: (
{endpointGroups.map(group => ( <Space wrap>
<Button {endpointGroups.map(group => (
key={group.id} <Button
size='small' key={group.id}
type='primary' size='small'
onClick={() => { type='primary'
if (formApiRef.current) { onClick={() => {
const currentEndpoints = formApiRef.current.getValue('endpoints') || []; if (formApiRef.current) {
const newEndpoints = [...currentEndpoints, ...(group.items || [])]; const currentEndpoints = formApiRef.current.getValue('endpoints') || [];
const uniqueEndpoints = [...new Set(newEndpoints)]; const newEndpoints = [...currentEndpoints, ...(group.items || [])];
formApiRef.current.setValue('endpoints', uniqueEndpoints); const uniqueEndpoints = [...new Set(newEndpoints)];
} formApiRef.current.setValue('endpoints', uniqueEndpoints);
}} }
> }}
{group.name} >
</Button> {group.name}
))} </Button>
<Button ))}
size='small' </Space>
type='warning' )
onClick={() => { })}
if (formApiRef.current) {
formApiRef.current.setValue('endpoints', []);
}
}}
>
{t('清除端点')}
</Button>
</Space>
)}
/> />
</Col> </Col>
<Col span={24}> <Col span={24}>

9
web/src/hooks/models/useModelsData.js
View File

@@ -247,9 +247,16 @@ export const useModelsData = () => {
await loadModels(1, size, activeVendorKey); await loadModels(1, size, activeVendorKey);
}; };
// Handle row click // Handle row click and styling
const handleRow = (record, index) => { const handleRow = (record, index) => {
const rowStyle = record.status !== 1 ? {
style: {
background: 'var(--semi-color-disabled-border)',
},
} : {};
return { return {
...rowStyle,
onClick: (event) => { onClick: (event) => {
// Don't trigger row selection when clicking on buttons // Don't trigger row selection when clicking on buttons
if (event.target.closest('button, .semi-button')) { if (event.target.closest('button, .semi-button')) {