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:
t0ng7u
2025-08-03 22:51:24 +08:00
parent 1bd8e2a157
commit 2e201a4355
8 changed files with 275 additions and 8 deletions

View File

@@ -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>