From c0a23ffa62657f417baf5ee8cb8c6c5db84257fd Mon Sep 17 00:00:00 2001 From: t0ng7u Date: Fri, 4 Jul 2025 06:14:15 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor(EditTagModal):=20tidy?= =?UTF-8?q?=20imports=20&=20enhance=20state-sync=20on=20open?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Motivation • Remove unused UI components to keep the bundle lean and silence linter warnings. • Ensure every time the side-sheet opens it reflects the latest tag data, avoiding stale form values (e.g., model / group mismatches). Key Changes 1. UI Imports – Dropped `Input`, `Select`, `TextArea` from `@douyinfe/semi-ui` (unused in Form-based version). 2. State Reset & Form Sync – On `visible` or `tag` change: • Refresh model & group options. • Reset `inputs` to clean defaults (`originInputs`) carrying the current `tag`. • Pre-fill Form through `formApiRef` to keep controlled fields aligned. 3. Minor Cleanup – Added inline comment clarifying local state reset purpose. Result Opening the “Edit Tag” side-sheet now always displays accurate data without residual selections, and build output is cleaner due to removed dead imports. --- web/src/pages/Channel/EditTagModal.js | 315 +++++++++++++------------- 1 file changed, 154 insertions(+), 161 deletions(-) diff --git a/web/src/pages/Channel/EditTagModal.js b/web/src/pages/Channel/EditTagModal.js index 526e7c19..752e3faa 100644 --- a/web/src/pages/Channel/EditTagModal.js +++ b/web/src/pages/Channel/EditTagModal.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { API, showError, @@ -11,15 +11,13 @@ import { SideSheet, Space, Button, - Input, Typography, Spin, - Select, Banner, - TextArea, Card, Tag, Avatar, + Form, } from '@douyinfe/semi-ui'; import { IconSave, @@ -53,9 +51,14 @@ const EditTagModal = (props) => { models: [], }; const [inputs, setInputs] = useState(originInputs); + const formApiRef = useRef(null); + const getInitValues = () => ({ ...originInputs }); const handleInputChange = (name, value) => { setInputs((inputs) => ({ ...inputs, [name]: value })); + if (formApiRef.current) { + formApiRef.current.setValue(name, value); + } if (name === 'type') { let localModels = []; switch (value) { @@ -133,27 +136,25 @@ const EditTagModal = (props) => { } }; - const handleSave = async () => { + const handleSave = async (values) => { setLoading(true); - let data = { - tag: tag, - }; - if (inputs.model_mapping !== null && inputs.model_mapping !== '') { - if (inputs.model_mapping !== '' && !verifyJSON(inputs.model_mapping)) { + const formVals = values || formApiRef.current?.getValues() || {}; + let data = { tag }; + if (formVals.model_mapping) { + if (!verifyJSON(formVals.model_mapping)) { showInfo('模型映射必须是合法的 JSON 格式！'); setLoading(false); return; } - data.model_mapping = inputs.model_mapping; + data.model_mapping = formVals.model_mapping; } - if (inputs.groups.length > 0) { - data.groups = inputs.groups.join(','); + if (formVals.groups && formVals.groups.length > 0) { + data.groups = formVals.groups.join(','); } - if (inputs.models.length > 0) { - data.models = inputs.models.join(','); + if (formVals.models && formVals.models.length > 0) { + data.models = formVals.models.join(','); } - data.new_tag = inputs.new_tag; - // check have any change + data.new_tag = formVals.new_tag; if ( data.model_mapping === undefined && data.groups === undefined && @@ -202,7 +203,7 @@ const EditTagModal = (props) => { const res = await API.get(`/api/channel/tag/models?tag=${tag}`); if (res?.data?.success) { const models = res.data.data ? res.data.data.split(',') : []; - setInputs((inputs) => ({ ...inputs, models: models })); + handleInputChange('models', models); } else { showError(res.data.message); } @@ -213,19 +214,32 @@ const EditTagModal = (props) => { } }; + fetchModels().then(); + fetchGroups().then(); + fetchTagModels().then(); + if (formApiRef.current) { + formApiRef.current.setValues({ + ...getInitValues(), + tag: tag, + new_tag: tag, + }); + } + setInputs({ ...originInputs, tag: tag, new_tag: tag, }); - fetchModels().then(); - fetchGroups().then(); - fetchTagModels().then(); // Call the new function - }, [visible, tag]); // Add tag to dependency array + }, [visible, tag]); + + useEffect(() => { + if (formApiRef.current) { + formApiRef.current.setValues(inputs); + } + }, [inputs]); const addCustomModels = () => { if (customModel.trim() === '') return; - // 使用逗号分隔字符串，然后去除每个模型名称前后的空格 const modelArray = customModel.split(',').map((model) => model.trim()); let localModels = [...inputs.models]; @@ -233,11 +247,9 @@ const EditTagModal = (props) => { const addedModels = []; modelArray.forEach((model) => { - // 检查模型是否已存在，且模型名称非空 if (model && !localModels.includes(model)) { - localModels.push(model); // 添加到模型列表 + localModels.push(model); localModelOptions.push({ - // 添加到下拉选项 key: model, text: model, value: model, @@ -246,7 +258,6 @@ const EditTagModal = (props) => { } }); - // 更新状态值 setModelOptions(localModelOptions); setCustomModel(''); handleInputChange('models', localModels); @@ -283,7 +294,7 @@ const EditTagModal = (props) => { - } - placeholder={t('输入自定义模型名称')} - value={customModel} - onChange={(value) => setCustomModel(value.trim())} - /> - +
+ handleInputChange('new_tag', value)} + /> +
+ -
- {t('模型重定向')} -