export default function VisualEditor()

in frontend/src/routes/visual-query/components/visual-content/visual-editor.tsx [33:104]
70 lines of code
6 McCabe index (conditional complexity)

export default function VisualEditor(props: VisualEditorProps) {
    const { onResize } = props;
    const { selectedDatabaseId, setSelectedDatabaseId, databases } = useContext(DatabasesContext);
    const { runFetchData } = useContext(DataContext);
    const { editorValue, setEditorValue } = useContext(EditorContext);
    useMonacoEditor();

    const runSqlQuery = () => {
        if (selectedDatabaseId == null) {
            message.error('请选择一个数据库');
            return;
        }
        if (editorValue === '') {
            message.error('请输入查询语句');
            return;
        }
        runFetchData(fetchData({ database: selectedDatabaseId, query: editorValue })).catch(
            () => message.error('查询失败'),
        );
    };

    return (
        <>
            <Select
                value={selectedDatabaseId || undefined}
                style={{ width: 200, margin: '20px 0 0 20px' }}
                placeholder="请选择一个数据库"
                onChange={v => setSelectedDatabaseId(v)}
            >
                {databases?.map(database => (
                    <Option value={database.id} key={database.id}>
                        {database.name}
                    </Option>
                ))}
            </Select>
            <Resizable
                style={{ border: '1px solid #ccc', margin: 20 }}
                enable={RESIZEABLE_ENABLE}
                defaultSize={{
                    width: '95%',
                    height: 150,
                }}
                minHeight={150}
                onResize={onResize}
            >
                <Editor
                    height="100%"
                    defaultLanguage="sql"
                    theme={THEME_NAME}
                    options={{
                        minimap: {
                            enabled: false,
                        },
                    }}
                    value={editorValue}
                    onChange={v => setEditorValue(v || '')}
                />
            </Resizable>
            <Row justify="end">
                <Col style={{ marginRight: '4%' }}>
                    <Button
                        type="primary"
                        disabled={selectedDatabaseId == null || editorValue === ''}
                        onClick={runSqlQuery}
                    >
                        运行
                    </Button>
                </Col>
            </Row>
        </>
    );
}