feat: Add custom model input functionality in EditTagModal
- Introduced a new input field for adding custom model names in the EditTagModal component. - Implemented logic to handle the addition of custom models, including validation to prevent duplicates. - Enhanced user experience by providing feedback when attempting to add existing models. - Updated state management to reflect changes in the model options dynamically.
This commit is contained in:
@@ -16,6 +16,7 @@ const EditTagModal = (props) => {
|
|||||||
const [groupOptions, setGroupOptions] = useState([]);
|
const [groupOptions, setGroupOptions] = useState([]);
|
||||||
const [basicModels, setBasicModels] = useState([]);
|
const [basicModels, setBasicModels] = useState([]);
|
||||||
const [fullModels, setFullModels] = useState([]);
|
const [fullModels, setFullModels] = useState([]);
|
||||||
|
const [customModel, setCustomModel] = useState('');
|
||||||
const originInputs = {
|
const originInputs = {
|
||||||
tag: '',
|
tag: '',
|
||||||
new_tag: null,
|
new_tag: null,
|
||||||
@@ -183,6 +184,40 @@ const EditTagModal = (props) => {
|
|||||||
fetchGroups().then();
|
fetchGroups().then();
|
||||||
}, [visible]);
|
}, [visible]);
|
||||||
|
|
||||||
|
const addCustomModels = () => {
|
||||||
|
if (customModel.trim() === '') return;
|
||||||
|
// 使用逗号分隔字符串,然后去除每个模型名称前后的空格
|
||||||
|
const modelArray = customModel.split(',').map((model) => model.trim());
|
||||||
|
|
||||||
|
let localModels = [...inputs.models];
|
||||||
|
let localModelOptions = [...modelOptions];
|
||||||
|
let hasError = false;
|
||||||
|
|
||||||
|
modelArray.forEach((model) => {
|
||||||
|
// 检查模型是否已存在,且模型名称非空
|
||||||
|
if (model && !localModels.includes(model)) {
|
||||||
|
localModels.push(model); // 添加到模型列表
|
||||||
|
localModelOptions.push({
|
||||||
|
// 添加到下拉选项
|
||||||
|
key: model,
|
||||||
|
text: model,
|
||||||
|
value: model
|
||||||
|
});
|
||||||
|
} else if (model) {
|
||||||
|
showError('某些模型已存在!');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (hasError) return; // 如果有错误则终止操作
|
||||||
|
|
||||||
|
// 更新状态值
|
||||||
|
setModelOptions(localModelOptions);
|
||||||
|
setCustomModel('');
|
||||||
|
handleInputChange('models', localModels);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SideSheet
|
<SideSheet
|
||||||
title="编辑标签"
|
title="编辑标签"
|
||||||
@@ -231,6 +266,18 @@ const EditTagModal = (props) => {
|
|||||||
autoComplete="new-password"
|
autoComplete="new-password"
|
||||||
optionList={modelOptions}
|
optionList={modelOptions}
|
||||||
/>
|
/>
|
||||||
|
<Input
|
||||||
|
addonAfter={
|
||||||
|
<Button type="primary" onClick={addCustomModels}>
|
||||||
|
填入
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
placeholder="输入自定义模型名称"
|
||||||
|
value={customModel}
|
||||||
|
onChange={(value) => {
|
||||||
|
setCustomModel(value.trim());
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<div style={{ marginTop: 10 }}>
|
<div style={{ marginTop: 10 }}>
|
||||||
<Typography.Text strong>分组,留空则不更改:</Typography.Text>
|
<Typography.Text strong>分组,留空则不更改:</Typography.Text>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user