Skip to content

phsl / new-api

Go to a project
Commit 1d28e4dd by t0ng7u
Options

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

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.
parent 029768e8
Showing with 56 additions and 67 deletions
web/src/components/table/models/components/SelectionNotification.jsx
...@@ -45,7 +45,7 @@ const SelectionNotification = ({ selectedKeys = [], t, onDelete, onAddPrefill, o ...@@ -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 ...@@ -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}
> >
......
web/src/components/table/models/modals/EditModelModal.jsx
...@@ -339,38 +339,29 @@ const EditModelModal = (props) => { ...@@ -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) => { ...@@ -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}>
......
web/src/hooks/models/useModelsData.js
...@@ -247,9 +247,16 @@ export const useModelsData = () => { ...@@ -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')) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment