refactor(data-query): 优化数据模型选择和查询逻辑

- 重构ProjectSelect组件，确保onChange事件正确传递选中的数据模型值。
- 在DataQuery组件中，更新queryDispatch.fetchTreeData调用，移除不必要的projectId参数。
- 新增handleProjectSelect处理函数，用于在选择数据模型后刷新项目并更新代码编辑器的自动完成数据。
- 修正DataQuery组件中的错误调用，将queryDispatch.fetchTreeData调用中的projectId参数移除。
- 在删除操作后，同样调用queryDispatch.fetchTreeData来刷新树数据。
- 调整代码编辑器的自动完成逻辑，确保在选择数据模型后能正确获取表和字段。

src/components/CodeEditor/index.tsx

@@ -20,7 +20,7 @@ import {IAceOptions, ICommand, IEditorProps, IMarker} from "react-ace/src/types"
 
 export type CodeEditorProps = {
   tables?: any[];
-  onRef?: Ref<any>;
+  onRef?: React.RefObject<any>;
   name?: string;
   style?: React.CSSProperties;
   /** For available modes see https://github.com/thlorenz/brace/tree/master/mode */
@@ -70,16 +70,31 @@ export type CodeEditorProps = {
   markers?: IMarker[];
 };
 
-const CodeEditor: React.FC<CodeEditorProps> = (props) => {
+const CodeEditor: React.FC<CodeEditorProps> = ({ onRef, ...props }) => {
   const {mode, height, width, name, placeholder, value, theme, ref, onChange, tables} = props;
   console.log(63, mode || 'mysql');
 
-
   const editorRef = useRef(null);
 
+  const updateAutoCompleteData = (tables: string[], fields: string[]) => {
+    console.log(110, tables, fields)
+    if (editorRef.current) {
+      const editor = editorRef.current.editor;
+      const session = editor.getSession();
+      const sqlCompleter = {
+        getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => {
+          callback(null, [
+            ...tables.map(table => ({ name: table, value: table, score: 1000, meta: 'Table' })),
+            ...fields.map(field => ({ name: field, value: field, score: 900, meta: 'Field' })),
+          ]);
+        }
+      };
+      session.setMode("ace/mode/sql");
+      editor.completers = [sqlCompleter];
+    }
+  };
 
-  useImperativeHandle(props.onRef, () => ({
-    // changeVal 就是暴露给父组件的方法
+  useImperativeHandle(onRef, () => ({
     getSelectValue: () => {
       console.log(130, editorRef.current)
       // @ts-ignore
@@ -90,6 +105,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
       // @ts-ignore
       return editorRef.current.editor.insert(value);
     },
+    updateAutoCompleteData,
   }));
 
   useEffect(() => {

src/components/ProjectSelect/index.tsx

@@ -61,7 +61,7 @@ const ProjectSelect: React.FC<ProjectSelectProps> = ({ value, onChange, style, s
   return (
     <Select
       value={value}
-      onChange={onChange}
+      onChange={onChange}  // Make sure this is correctly passing the selected value
       style={style}
       size={size}
       placeholder="选择数据模型"

src/pages/dataQuery/index.tsx

@@ -42,10 +42,10 @@ const DataQuery: React.FC<QueryProps> = (props) => {
   }), shallow);
 
 
-  const {tables, modules} = useProjectStore(state => ({
+  const {tables, modules, fetch: fetchProject} = useProjectStore(state => ({
     tables: state.tables,
     modules: state.project?.projectJSON?.modules || [],
-
+    fetch: state.fetch,
   }), shallow);
 
   console.log(130, tables);
@@ -153,7 +153,7 @@ const DataQuery: React.FC<QueryProps> = (props) => {
     }));
 
   useEffect(() => {
-    queryDispatch.fetchTreeData({ projectId });
+    queryDispatch.fetchTreeData({  });
   }, [projectId, queryDispatch]);
 
 
@@ -197,7 +197,7 @@ const DataQuery: React.FC<QueryProps> = (props) => {
         });
       }
       setModalVisible(false);
-      queryDispatch.fetchTreeData({ projectId });
+      queryDispatch.fetchTreeData({  });
     } catch (error) {
       console.error("handleModalOk 中的错误:", error);
     }
@@ -213,7 +213,7 @@ const DataQuery: React.FC<QueryProps> = (props) => {
             id: node.key,
             projectId,
           });
-          queryDispatch.fetchTreeData({ projectId });
+          queryDispatch.fetchTreeData({  });
         } catch (error) {
           console.error("handleDelete 中的错误:", error);
         }
@@ -300,7 +300,7 @@ const DataQuery: React.FC<QueryProps> = (props) => {
       <span style={{marginRight: 8}}>数据模型</span>
       <ProjectSelect
         value={selectedDataModel}
-        onChange={(value) => setSelectedDataModel(value)}
+        onChange={(value) => handleProjectSelect(value)}
         style={{ width: 200 }}
         size="small"
       />
@@ -439,6 +439,19 @@ const DataQuery: React.FC<QueryProps> = (props) => {
     }
   };
 
+  const handleProjectSelect = async (value: string) => {
+    setSelectedDataModel(value);
+    await fetchProject(value);
+    // After fetching the project, update the CodeEditor's autocomplete data
+    if (editorRef.current) {
+      const tables = useProjectStore.getState().tables;
+      const fields = useProjectStore.getState().project?.projectJSON?.modules.flatMap(
+        (module: any) => module.entities.flatMap((entity: any) => entity.fields.map((field: any) => field.name))
+      );
+      editorRef.current.updateAutoCompleteData(tables, fields);
+    }
+  };
+
   return (<>
     <Layout style={{ minHeight: '100vh' }}>
       <Sider
@@ -454,7 +467,7 @@ const DataQuery: React.FC<QueryProps> = (props) => {
               placeholder="搜索查询"
               onSearch={(value) => {
                 queryDispatch.setQuerySearchKey(value);
-                queryDispatch.fetchTreeData({ projectId });
+                queryDispatch.fetchTreeData({  });
               }}
               style={{ width: 'calc(100% - 40px)' }}
             />