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

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

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