From e87261e8ce778ece9698fdd2f48c376d9f43d2ab Mon Sep 17 00:00:00 2001 From: twwu Date: Wed, 2 Apr 2025 14:11:32 +0800 Subject: [PATCH] refactor: replace Toast notifications with emit for editing state management --- .../json-schema-config-modal/json-importer.tsx | 14 +++++--------- .../json-schema-config.tsx | 15 +++++---------- .../json-schema-generator/index.tsx | 13 +++++-------- .../visual-editor/edit-card/index.tsx | 7 ++----- .../visual-editor/hooks.ts | 13 +++++++++++++ web/i18n/en-US/workflow.ts | 3 --- web/i18n/zh-Hans/workflow.ts | 3 --- 7 files changed, 30 insertions(+), 38 deletions(-) diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx index 6cccc4ba4e..643059adbd 100644 --- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx +++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx @@ -9,7 +9,7 @@ import { JSON_SCHEMA_MAX_DEPTH } from '@/config' import CodeEditor from './code-editor' import ErrorMessage from './error-message' import { useVisualEditorStore } from './visual-editor/store' -import Toast from '@/app/components/base/toast' +import { useMittContext } from './visual-editor/context' type JsonImporterProps = { onSubmit: (schema: any) => void @@ -27,6 +27,7 @@ const JsonImporter: FC = ({ const importBtnRef = useRef(null) const advancedEditing = useVisualEditorStore(state => state.advancedEditing) const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField) + const { emit } = useMittContext() useEffect(() => { if (importBtnRef.current) { @@ -38,15 +39,10 @@ const JsonImporter: FC = ({ const handleTrigger = useCallback((e: React.MouseEvent) => { e.stopPropagation() - if (advancedEditing || isAddingNewField) { - Toast.notify({ - type: 'warning', - message: t('workflow.nodes.llm.jsonSchema.warningTips.jsonImport'), - }) - return - } + if (advancedEditing || isAddingNewField) + emit('quitEditing', {}) setOpen(!open) - }, [open, advancedEditing, isAddingNewField, t]) + }, [open, advancedEditing, isAddingNewField, emit]) const onClose = useCallback(() => { setOpen(false) diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx index b463a4d299..9374bbe500 100644 --- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx +++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx @@ -17,7 +17,7 @@ import { preValidateSchema, validateSchemaAgainstDraft7, } from '../../utils' -import { MittProvider, VisualEditorContextProvider } from './visual-editor/context' +import { MittProvider, VisualEditorContextProvider, useMittContext } from './visual-editor/context' import ErrorMessage from './error-message' import { useVisualEditorStore } from './visual-editor/store' import Toast from '@/app/components/base/toast' @@ -73,6 +73,7 @@ const JsonSchemaConfig: FC = ({ const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField) const setIsAddingNewField = useVisualEditorStore(state => state.setIsAddingNewField) const setHoveringProperty = useVisualEditorStore(state => state.setHoveringProperty) + const { emit } = useMittContext() const updateBtnWidth = useCallback((width: number) => { setBtnWidth(width + 32) @@ -113,18 +114,12 @@ const JsonSchemaConfig: FC = ({ } } else if (currentTab === SchemaView.VisualEditor) { - if (advancedEditing || isAddingNewField) { - Toast.notify({ - type: 'warning', - message: t('workflow.nodes.llm.jsonSchema.warningTips.switchToJsonSchema'), - }) - return - } - setJson(JSON.stringify(jsonSchema, null, 2)) + if (advancedEditing || isAddingNewField) + emit('quitEditing', { callback: (backup: SchemaRoot) => setJson(JSON.stringify(backup || jsonSchema, null, 2)) }) } setCurrentTab(value) - }, [currentTab, jsonSchema, json, advancedEditing, isAddingNewField, t]) + }, [currentTab, jsonSchema, json, advancedEditing, isAddingNewField, emit]) const handleApplySchema = useCallback((schema: SchemaRoot) => { if (currentTab === SchemaView.VisualEditor) diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx index 202c5f1fc9..4732499f3a 100644 --- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx +++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx @@ -20,6 +20,7 @@ import { type FormValue, ModelTypeEnum } from '@/app/components/header/account-s import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks' import { useVisualEditorStore } from '../visual-editor/store' import { useTranslation } from 'react-i18next' +import { useMittContext } from '../visual-editor/context' type JsonSchemaGeneratorProps = { onApply: (schema: SchemaRoot) => void @@ -52,6 +53,7 @@ export const JsonSchemaGenerator: FC = ({ } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textGeneration) const advancedEditing = useVisualEditorStore(state => state.advancedEditing) const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField) + const { emit } = useMittContext() const SchemaGenerator = theme === Theme.light ? SchemaGeneratorLight : SchemaGeneratorDark useEffect(() => { @@ -66,15 +68,10 @@ export const JsonSchemaGenerator: FC = ({ const handleTrigger = useCallback((e: React.MouseEvent) => { e.stopPropagation() - if (advancedEditing || isAddingNewField) { - Toast.notify({ - type: 'warning', - message: t('workflow.nodes.llm.jsonSchema.warningTips.jsonGeneration'), - }) - return - } + if (advancedEditing || isAddingNewField) + emit('quitEditing', {}) setOpen(!open) - }, [open, advancedEditing, isAddingNewField, t]) + }, [open, advancedEditing, isAddingNewField, emit]) const onClose = useCallback(() => { setOpen(false) diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx index 52950468d9..c64cd3a6d7 100644 --- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx +++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx @@ -89,11 +89,8 @@ const EditCard: FC = ({ }) useSubscribe('fieldChangeSuccess', () => { - if (isAddingNewField) { - setIsAddingNewField(false) - return - } - setAdvancedEditing(false) + isAddingNewField && setIsAddingNewField(false) + advancedEditing && setAdvancedEditing(false) }) const emitPropertyNameChange = useCallback(() => { diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts index 8004d034d2..ff64c5b2e4 100644 --- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts +++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts @@ -22,7 +22,10 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => { const { schema: jsonSchema, onChange } = props const backupSchema = useVisualEditorStore(state => state.backupSchema) const setBackupSchema = useVisualEditorStore(state => state.setBackupSchema) + const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField) const setIsAddingNewField = useVisualEditorStore(state => state.setIsAddingNewField) + const advancedEditing = useVisualEditorStore(state => state.advancedEditing) + const setAdvancedEditing = useVisualEditorStore(state => state.setAdvancedEditing) const setHoveringProperty = useVisualEditorStore(state => state.setHoveringProperty) const { emit, useSubscribe } = useMittContext() @@ -33,6 +36,15 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => { } }) + useSubscribe('quitEditing', (params) => { + const { callback } = params as any + callback?.(backupSchema) + emit('restoreSchema') + isAddingNewField && setIsAddingNewField(false) + advancedEditing && setAdvancedEditing(false) + setHoveringProperty(null) + }) + useSubscribe('propertyNameChange', (params) => { const { parentPath, oldFields, fields } = params as ChangeEventParams const { name: oldName } = oldFields @@ -204,6 +216,7 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => { }) useSubscribe('addField', (params) => { + advancedEditing && setAdvancedEditing(false) setBackupSchema(jsonSchema) const { path } = params as AddEventParams setIsAddingNewField(true) diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index 7ff12b971b..6a101e41af 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -442,9 +442,6 @@ const translation = { fieldNamePlaceholder: 'Field Name', descriptionPlaceholder: 'Add description', warningTips: { - jsonGeneration: 'Please finish editing the current field before generating a schema', - jsonImport: 'Please finish editing the current field before importing a schema', - switchToJsonSchema: 'Please finish editing the current field before switching to JSON Schema', saveSchema: 'Please finish editing the current field before saving the schema', }, }, diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index b07b444cca..9da036b73f 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -443,9 +443,6 @@ const translation = { fieldNamePlaceholder: '字段名', descriptionPlaceholder: '添加描述', warningTips: { - jsonGeneration: '请先完成当前字段的编辑', - jsonImport: '请先完成当前字段的编辑', - switchToJsonSchema: '请先完成当前字段的编辑', saveSchema: '请先完成当前字段的编辑', }, },