✨ feat: polish “Missing Models” UX & mobile actions layout
Overview • Re-designed `MissingModelsModal` to align with `ModelTestModal` and deliver a cleaner, paginated experience. • Improved mobile responsiveness for action buttons in `ModelsActions`. Details 1. MissingModelsModal.jsx • Switched from `List` to `Table` for a more structured view. • Added search bar with live keyword filtering and clear icon. • Implemented pagination via `MODEL_TABLE_PAGE_SIZE`; auto-resets on search. • Dynamic rendering: when no data, show unified Empty state without column header. • Enhanced header layout with total-count subtitle and modal corner rounding. • Removed unused `Typography.Text` import. 2. ModelsActions.jsx • Set “Delete Selected Models” and “Missing Models” buttons to `flex-1 md:flex-initial`, placing them on the same row as “Add Model” on small screens. Result The “Missing Models” workflow now offers quicker discovery, a familiar table interface, and full mobile friendliness—without altering API behavior.
This commit is contained in:
@@ -81,7 +81,7 @@ const EditModelModal = (props) => {
|
||||
}, [props.visiable]);
|
||||
|
||||
const getInitValues = () => ({
|
||||
model_name: '',
|
||||
model_name: props.editingModel?.model_name || '',
|
||||
description: '',
|
||||
tags: [],
|
||||
vendor_id: undefined,
|
||||
@@ -136,22 +136,28 @@ const EditModelModal = (props) => {
|
||||
useEffect(() => {
|
||||
if (formApiRef.current) {
|
||||
if (!isEdit) {
|
||||
formApiRef.current.setValues(getInitValues());
|
||||
formApiRef.current.setValues({
|
||||
...getInitValues(),
|
||||
model_name: props.editingModel?.model_name || '',
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [props.editingModel?.id]);
|
||||
}, [props.editingModel?.id, props.editingModel?.model_name]);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.visiable) {
|
||||
if (isEdit) {
|
||||
loadModel();
|
||||
} else {
|
||||
formApiRef.current?.setValues(getInitValues());
|
||||
formApiRef.current?.setValues({
|
||||
...getInitValues(),
|
||||
model_name: props.editingModel?.model_name || '',
|
||||
});
|
||||
}
|
||||
} else {
|
||||
formApiRef.current?.reset();
|
||||
}
|
||||
}, [props.visiable, props.editingModel?.id]);
|
||||
}, [props.visiable, props.editingModel?.id, props.editingModel?.model_name]);
|
||||
|
||||
const submit = async (values) => {
|
||||
setLoading(true);
|
||||
@@ -268,7 +274,7 @@ const EditModelModal = (props) => {
|
||||
label={t('模型名称')}
|
||||
placeholder={t('请输入模型名称,如:gpt-4')}
|
||||
rules={[{ required: true, message: t('请输入模型名称') }]}
|
||||
disabled={isEdit}
|
||||
disabled={isEdit || !!props.editingModel?.model_name}
|
||||
showClear
|
||||
/>
|
||||
</Col>
|
||||
|
||||
Reference in New Issue
Block a user