增强数据查询页面的树视图功能

改进了数据查询页面的树视图组件，使其具有以下新功能：
- 动态展开节点：用户点击节点时动态加载和展开内容。
- 自定义图标：根据不同类型的节点显示不同的图标。
- 界面调整：隐藏了树视图中的线条图标，优化了节点的显示样式。

此更新使树视图组件的显示效果更加直观，便于用户识别和操作不同的数据节点。

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, FolderOutlined, FileOutlined, MoreOutlined} from "@ant-design/icons";
+import {BarsOutlined, EyeOutlined, PlayCircleOutlined, SaveOutlined, PlusOutlined, EditOutlined, DeleteOutlined, MoreOutlined} from "@ant-design/icons";
 import useQueryStore from "@/store/query/useQueryStore";
 import shallow from "zustand/shallow";
 import useVersionStore from "@/store/version/useVersionStore";
@@ -22,6 +22,7 @@ import moment from "moment";
 import { DataSourceSelect } from '@/components/DataSourceSelect';
 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';
 
 const {Text} = Typography;
@@ -120,6 +121,27 @@ const DataQuery: React.FC<QueryProps> = (props) => {
   const [modalType, setModalType] = useState<'add' | 'edit'>('add');
   const [selectedNode, setSelectedNode] = useState<DataNode | null>(null);
 
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+
+  // Function to get all keys from the tree data
+  const getAllKeys = (data: DataNode[]): React.Key[] => {
+    return data.reduce((keys: React.Key[], node) => {
+      keys.push(node.key);
+      if (node.children) {
+        keys = keys.concat(getAllKeys(node.children));
+      }
+      return keys;
+    }, []);
+  };
+
+  // Set expanded keys when tree data changes
+  useEffect(() => {
+    if (treeData.length > 0) {
+      const allKeys = getAllKeys(treeData);
+      setExpandedKeys(allKeys);
+    }
+  }, [treeData]);
+
   const renderTreeSelectNodes = (data: DataNode[]): DataNode[] =>
     data.map((item) => ({
       title: item.title,
@@ -198,18 +220,17 @@ const DataQuery: React.FC<QueryProps> = (props) => {
     });
   };
 
-  const renderTreeNodes = (data: DataNode[] | undefined): DataNode[] => {
+  const renderTreeNodes = (data: DataNode[]): DataNode[] => {
     if (!data || !Array.isArray(data)) {
       return [];
     }
 
     return data.map((item) => ({
       ...item,
+      icon: renderIcon(item),
       title: (
         <span className="custom-tree-node">
-          <span>
-            {item.isLeaf ? <FileOutlined /> : <FolderOutlined />} {item.title}
-          </span>
+          <span>{item.title}</span>
           <Dropdown
             overlay={
               <Menu>
@@ -242,6 +263,22 @@ const DataQuery: React.FC<QueryProps> = (props) => {
     }));
   };
 
+  const renderIcon = (node: DataNode) => {
+    if (!node.isLeaf) {
+      return <FolderOutlined style={{ color: '#FFB300' }} />;
+    }
+    switch (node.type) {
+      case 'sql':
+        return <CodeOutlined style={{ color: '#1890FF' }} />;
+      case 'stored_procedure':
+        return <ApiOutlined style={{ color: '#52C41A' }} />;
+      case 'report':
+        return <BarChartOutlined style={{ color: '#722ED1' }} />;
+      default:
+        return <CodeOutlined style={{ color: '#1890FF' }} />;
+    }
+  };
+
   const handleOpen = () => {
     setOpen(true);
   };
@@ -421,11 +458,13 @@ const DataQuery: React.FC<QueryProps> = (props) => {
         </div>
         <div className="tree-container">
           <Tree
-            showLine={{ showLeafIcon: false }}
-            showIcon={false}
-            defaultExpandAll
+            showLine={false}
+            showIcon={true}
             onSelect={handleSelectQuery}
             treeData={renderTreeNodes(treeData)}
+            expandAction="click"
+            expandedKeys={expandedKeys}
+            onExpand={(newExpandedKeys) => setExpandedKeys(newExpandedKeys)}
           />
         </div>
       </Sider>

src/pages/dataQuery/style.less

@@ -22,4 +22,23 @@
   display: flex !important;
   align-items: center;
   width: 100%;
+}
+
+.tree-container .ant-tree-switcher {
+  display: none;
+}
+
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.tree-node-action {
+  visibility: hidden;
+}
+
+.ant-tree-node-content-wrapper:hover .tree-node-action {
+  visibility: visible;
 }