数据查询页面支持多项目数据模型选择

数据查询页面已更新，支持在多个项目间选择数据模型。此更改包括重构`handleProjectSelect`，以在选择项目时
重新获取数据模型。此外，引入了新的`DataSourceSelect`组件，允许用户选择和切换数据库。整体目的是为用户提供更灵活的数据查询环境。

src/pages/dataQuery/index.tsx

@@ -4,7 +4,7 @@ import {ProCard} from "@ant-design/pro-components";
 import {Data, HistoryQuery, Plan} from "@icon-park/react";
 import CodeEditor from "@/components/CodeEditor";
 import QueryResult from "@/pages/design/query/component/QueryResult";
-import {BarsOutlined, EyeOutlined, PlayCircleOutlined, SaveOutlined, PlusOutlined, EditOutlined, DeleteOutlined, MoreOutlined, DownOutlined, LockOutlined} from "@ant-design/icons";
+import {BarsOutlined, EyeOutlined, PlayCircleOutlined, SaveOutlined, PlusOutlined, EditOutlined, DeleteOutlined, MoreOutlined, DownOutlined, LockOutlined, SelectOutlined} from "@ant-design/icons";
 import useQueryStore from "@/store/query/useQueryStore";
 import shallow from "zustand/shallow";
 import useVersionStore from "@/store/version/useVersionStore";
@@ -24,7 +24,6 @@ import type { DataNode } from 'antd/es/tree';
 import { ModalForm, ProFormText } from '@ant-design/pro-components';
 import { FolderOutlined, CodeOutlined, ApiOutlined, BarChartOutlined } from '@ant-design/icons';
 import './style.less';
-import ProjectSelect from '@/components/ProjectSelect';
 
 const {Text} = Typography;
 const {Search} = Input;
@@ -145,17 +144,9 @@ const DataQuery: React.FC<QueryProps> = (props) => {
       children: item.children ? renderTreeSelectNodes(item.children) : undefined,
     }));
 
-  const [selectedDataModel, setSelectedDataModel] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    if (selectedDataModel) {
-      queryDispatch.fetchTreeData({ projectId: selectedDataModel });
-    }
-  }, [selectedDataModel, queryDispatch]);
-
-  const handleProjectSelect = async (value: string) => {
-    setSelectedDataModel(value);
-    await fetchProject(value);
+  // Modify handleProjectSelect to fetch all data models by default
+  const handleProjectSelect = async () => {
+    await fetchProject();
     // After fetching the project, update the CodeEditor's autocomplete data
     if (editorRef.current) {
       const tables = useProjectStore.getState().tables;
@@ -164,10 +155,15 @@ const DataQuery: React.FC<QueryProps> = (props) => {
       );
       editorRef.current.updateAutoCompleteData(tables, fields);
     }
-    // Fetch tree data with the selected project ID
-    queryDispatch.fetchTreeData({ projectId: value });
+    // Fetch tree data for all projects
+    queryDispatch.fetchTreeData({});
   };
 
+  // Call handleProjectSelect on component mount
+  useEffect(() => {
+    handleProjectSelect();
+  }, []);
+
   const showModal = (type: 'add' | 'edit', node?: DataNode) => {
     setModalType(type);
     setSelectedNode(node || null);
@@ -259,6 +255,16 @@ const DataQuery: React.FC<QueryProps> = (props) => {
 
   const actions = <Space direction="vertical">
     <Space wrap>
+    <span style={{marginRight: 8}}>数据源</span>
+    <DataSourceSelect
+              value={selectDB ? { value: selectDB, label: selectDB } : undefined}
+              onChange={(value) => setSelectDB(value?.value)}
+              style={{ width: '200px' }}
+              size="small"
+              onDbChange={(db) => {
+                // You can handle additional logic here if needed when the database changes
+              }}
+            />
       <span style={{marginRight: 8}}>模式</span>
       <Select key={'model'} size="small" style={{width: 90, marginRight: 12}} value={sqlMode}
               onSelect={(e: any) => setSqlMode(e)}>
@@ -442,25 +448,6 @@ const DataQuery: React.FC<QueryProps> = (props) => {
         theme="light"
         width={300}
       >
-        <div style={{ padding: '16px' }}>
-          <Space direction="vertical" style={{ width: '100%' }}>
-            <ProjectSelect
-              value={selectedDataModel}
-              onChange={handleProjectSelect}
-              style={{ width: '100%' }}
-              size="small"
-            />
-            <DataSourceSelect
-              value={selectDB ? { value: selectDB, label: selectDB } : undefined}
-              onChange={(value) => setSelectDB(value?.value)}
-              style={{ width: '100%' }}
-              size="small"
-              onDbChange={(db) => {
-                // You can handle additional logic here if needed when the database changes
-              }}
-            />
-          </Space>
-        </div>
         <div style={{ padding: '16px' }}>
           <AntSpace.Compact style={{ width: '100%' }}>
             <Input.Search
@@ -500,12 +487,18 @@ const DataQuery: React.FC<QueryProps> = (props) => {
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
                 zIndex: 1000,
-                backgroundColor: 'rgba(255, 255, 255, 0.8)',
-                padding: '20px',
-                borderRadius: '5px',
-                boxShadow: '0 0 10px rgba(0,0,0,0.1)'
+                backgroundColor: '#f0f2f5',
+                padding: '30px 40px',
+                borderRadius: '8px',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                border: '2px solid #1890ff',
+                fontSize: '18px',
+                fontWeight: 'bold',
+                color: '#1890ff',
+                textAlign: 'center',
+                minWidth: '250px'
               }}>
-                请选择一个查询
+                请左侧选择或新建一个查询
               </div>
             )}
             <Search