refactor-workspace

2026-03-13 09:02:05 +08:00 · 2023-11-12 22:12:02 +08:00
parent d02abb4fb9
commit ff06c3158a
11 changed files with 156 additions and 103 deletions
--- a/chat2db-client/src/blocks/Tree/TreeNodeRightClick/index.less
+++ b/chat2db-client/src/blocks/Tree/TreeNodeRightClick/index.less
@@ -1,20 +1,5 @@
@import '../../../styles/var.less';

-.operationItem {
-  display: flex;
-  align-items: center;
-
-  .operationTitle {
-    margin-left: 14px;
-  }
-  
-  :global {
-    .ant-dropdown {
-      z-index: 1080;
-    }
-  }
-}
-
 .monacoEditorBox {
  margin-top: -15px;
  height: 60vh;
--- a/chat2db-client/src/blocks/Tree/TreeNodeRightClick/index.tsx
+++ b/chat2db-client/src/blocks/Tree/TreeNodeRightClick/index.tsx
@@ -49,7 +49,6 @@ function TreeNodeRightClick(props: IProps) {
  const dataSourceFormConfig = dataSourceFormConfigs.find((t: IConnectionConfig) => {
    return t.type === data.extraParams?.databaseType;
  })!;
-  
  const monacoEditorRef = useRef<IExportRefFunction>(null);
  
  const operationColumnConfig: { [key in OperationColumn]: (data: ITreeNode) => IOperationColumnConfigItem } = {
--- a/chat2db-client/src/blocks/Tree/index.tsx
+++ b/chat2db-client/src/blocks/Tree/index.tsx
@@ -9,7 +9,7 @@ import { treeConfig, switchIcon, ITreeConfigItem } from './treeConfig';
 import { useCommonStore } from '@/store/common';
 import LoadingGracile from '@/components/Loading/LoadingGracile';
 import { setFocusId, useTreeStore } from './treeStore';
-import { screenOutMenu } from './screenOutMenu';
+import { getRightClickMenu } from './rightClickMenu';
 import MenuLabel from '@/components/MenuLabel';

 interface IProps {
@@ -49,7 +49,7 @@ const TreeNode = memo((props: TreeNodeIProps) => {
  const isFocus = useTreeStore((state) => state.focusId) === treeNodeData.key;

  // 加载数据
-  function loadData() {
+  function loadData(_props?: { refresh: boolean }) {
    const treeNodeConfig: ITreeConfigItem = treeConfig[treeNodeData.pretendNodeType || treeNodeData.treeNodeType];
    setIsLoading(true);
    setTreeNodeData({
@@ -62,6 +62,7 @@ const TreeNode = memo((props: TreeNodeIProps) => {
        extraParams: {
          ...treeNodeData.extraParams,
        },
+        refresh: _props?.refresh || false,
      })
      .then((res) => {
        if (res.length) {
@@ -138,7 +139,7 @@ const TreeNode = memo((props: TreeNodeIProps) => {
  // 点击节点
  const handelClickTreeNode = () => {
    useCommonStore.setState({
-      focusedContent: (treeNodeData.key || '') as any,
+      focusedContent: (treeNodeData.name || '') as any,
    });
    setFocusId(treeNodeData.key || '');
  };
@@ -151,17 +152,19 @@ const TreeNode = memo((props: TreeNodeIProps) => {
  }, [treeNodeData]);

  const treeNodeDom = useMemo(() => {
-    // const { dropdowns } = useTreeNodeRightClick({ data: treeNodeData });
+    const dropdownsItems = getRightClickMenu({ treeNodeData, loadData }).map((item) => {
+      return {
+        ...item,
+        label: <MenuLabel {...item.labelProps} />,
+      };
+    });
+
    return (
      <Dropdown
        trigger={['contextMenu']}
        menu={{
-          items: screenOutMenu({treeNodeData,loadData}).map((item) => {
-            return {
-              ...item,
-              label: <MenuLabel {...item.labelProps} />,
-            };
-          }),
+          items: dropdownsItems || [],
+          style: dropdownsItems ? {} : { display: 'none' }, // 有菜单项才显示
        }}
        overlayStyle={{
          zIndex: 1080,
@@ -171,6 +174,7 @@ const TreeNode = memo((props: TreeNodeIProps) => {
          <div
            className={classnames(styles.treeNode, { [styles.treeNodeFocus]: isFocus })}
            onClick={handelClickTreeNode}
+            onContextMenu={handelClickTreeNode}
            data-chat2db-general-can-copy-element
          >
            <div className={styles.left}>
--- a/chat2db-client/src/blocks/Tree/rightClickMenu.ts
+++ b/chat2db-client/src/blocks/Tree/rightClickMenu.ts
@@ -0,0 +1,136 @@
+import { ITreeNode } from '@/typings';
+import { OperationColumn } from '@/constants';
+import i18n from '@/i18n';
+
+// ----- components -----
+import { dataSourceFormConfigs } from '@/components/ConnectionEdit/config/dataSource';
+import { IConnectionConfig } from '@/components/ConnectionEdit/config/types';
+
+// ----- config -----
+import { ITreeConfigItem, treeConfig } from './treeConfig';
+
+// 所有的方法
+// import { refreshTreeNode } from './functions/refresh'
+
+interface IProps {
+  treeNodeData: ITreeNode;
+  loadData: any;
+}
+
+interface IOperationColumnConfigItem {
+  text: string;
+  icon: string;
+  handle: () => void;
+}
+
+export const getRightClickMenu = (props: IProps) => {
+  const { treeNodeData, loadData } = props;
+
+  // 拿出当前节点的配置
+  const treeNodeConfig: ITreeConfigItem = treeConfig[treeNodeData.treeNodeType];
+  const { operationColumn } = treeNodeConfig;
+
+  const dataSourceFormConfig = dataSourceFormConfigs.find((t: IConnectionConfig) => {
+    return t.type === treeNodeData.extraParams?.databaseType;
+  })!;
+
+  const operationColumnConfig: { [key in string]: IOperationColumnConfigItem } = {
+    // 刷新
+    [OperationColumn.Refresh]: {
+      text: i18n('common.button.refresh'),
+      icon: '\uec08',
+      handle: () =>{
+        loadData({
+          refresh: true
+        })
+      }
+    },
+    // 创建表
+    [OperationColumn.CreateTable]: {
+      text: i18n('editTable.button.createTable'),
+      icon: '\ue792',
+      handle: () => {
+        console.log('创建表');
+        // const operationData = {
+        //   type: 'new',
+        //   nodeData: _data,
+        // };
+        // setOperationDataDialog(operationData)
+      },
+    },
+    // 创建console
+    [OperationColumn.CreateConsole]: {
+      text: i18n('workspace.menu.queryConsole'),
+      icon: '\ue619',
+      handle: () => {
+        console.log('创建console');
+      },
+    },
+    // 删除表
+    [OperationColumn.DeleteTable]: {
+      text: i18n('workspace.menu.deleteTable'),
+      icon: '\ue6a7',
+      handle: () => {
+        // setVerifyDialog(true);
+      },
+    },
+    // 查看ddl
+    [OperationColumn.ViewDDL]: {
+      text: i18n('workspace.menu.ViewDDL'),
+      icon: '\ue665',
+      handle: () => {
+        //
+      },
+    },
+    // 置顶
+    [OperationColumn.Top]: {
+      text: treeNodeData.pinned ? i18n('workspace.menu.unPin') : i18n('workspace.menu.pin'),
+      icon: treeNodeData.pinned ? '\ue61d' : '\ue627',
+      handle: () => {},
+    },
+    // 编辑表
+    [OperationColumn.EditTable]: {
+      text: i18n('workspace.menu.editTable'),
+      icon: '\ue602',
+      handle: () => {},
+    },
+    // 复制名称
+    [OperationColumn.CopyName]: {
+      text: i18n('common.button.copyName'),
+      icon: '\uec7a',
+      handle: () => {
+        navigator.clipboard.writeText(treeNodeData.name);
+      },
+    },
+  };
+
+  // 有些数据库不支持的操作，需要排除掉
+  function excludeSomeOperation() {
+    const excludes = dataSourceFormConfig.baseInfo.excludes;
+    const newOperationColumn: OperationColumn[] = [];
+    operationColumn?.map((item: OperationColumn) => {
+      let flag = false;
+      excludes?.map((t) => {
+        if (item === t) {
+          flag = true;
+        }
+      });
+      if (!flag) {
+        newOperationColumn.push(item);
+      }
+    });
+    return newOperationColumn;
+  }
+
+  return excludeSomeOperation().map((t, i) => {
+    const concrete = operationColumnConfig[t];
+    return {
+      key: i,
+      onClick: concrete?.handle,
+      labelProps: {
+        icon: concrete?.icon,
+        label: concrete?.text,
+      },
+    };
+  });
+};
--- a/chat2db-client/src/blocks/Tree/screenOutMenu.ts
+++ b/chat2db-client/src/blocks/Tree/screenOutMenu.ts
@@ -1,75 +0,0 @@
-import { ITreeNode } from '@/typings';
-import { OperationColumn } from '@/constants';
-import i18n from '@/i18n';
-
-// ----- components -----
-import { dataSourceFormConfigs } from '@/components/ConnectionEdit/config/dataSource';
-import { IConnectionConfig } from '@/components/ConnectionEdit/config/types';
-
-
-// ----- config -----
-import { ITreeConfigItem, treeConfig } from './treeConfig';
-
-// 所有的方法
-// import { refreshTreeNode } from './functions/refresh'
-
-interface IProps {
-  treeNodeData: ITreeNode;
-  loadData: any;
-}
-
-interface IOperationColumnConfigItem {
-  text: string;
-  icon: string;
-  handle: () => void;
-}
-
-export const screenOutMenu = (props: IProps) => {
-  const { treeNodeData, loadData } = props;
-
-    // 拿出当前节点的配置
-    const treeNodeConfig: ITreeConfigItem = treeConfig[treeNodeData.treeNodeType];
-    const { operationColumn } = treeNodeConfig;
-
-  const dataSourceFormConfig = dataSourceFormConfigs.find((t: IConnectionConfig) => {
-    return t.type === treeNodeData.extraParams?.databaseType;
-  })!;
-
-  const operationColumnConfig: { [key in OperationColumn]: IOperationColumnConfigItem } = {
-    [OperationColumn.Refresh]: {
-      text: i18n('common.button.refresh'),
-      icon: '\uec08',
-      handle: loadData,
-    },
-  };
-
-  // 有些数据库不支持的操作，需要排除掉
-  function excludeSomeOperation() {
-    const excludes = dataSourceFormConfig.baseInfo.excludes;
-    const newOperationColumn: OperationColumn[] = [];
-    operationColumn?.map((item: OperationColumn) => {
-      let flag = false;
-      excludes?.map((t) => {
-        if (item === t) {
-          flag = true;
-        }
-      });
-      if (!flag) {
-        newOperationColumn.push(item);
-      }
-    });
-    return newOperationColumn;
-  }
-
-  return excludeSomeOperation().map((t, i) => {
-    const concrete = operationColumnConfig[t];
-    return {
-      key: i,
-      onClick: concrete?.handle,
-      labelProps: {
-        icon:concrete?.icon,
-        label: concrete?.text
-      }
-    }
-  });
-};
--- a/chat2db-client/src/blocks/Tree/treeConfig.tsx
+++ b/chat2db-client/src/blocks/Tree/treeConfig.tsx
@@ -182,7 +182,7 @@ export const treeConfig: { [key in TreeNodeType]: ITreeConfigItem } = {
          });
      });
    },
-    operationColumn: [OperationColumn.CreateConsole, OperationColumn.CreateTable, OperationColumn.Refresh],
+    operationColumn: [OperationColumn.CreateConsole, OperationColumn.CopyName, OperationColumn.Refresh,],
    next: TreeNodeType.SCHEMAS,
  },

--- a/chat2db-client/src/constants/tree.ts
+++ b/chat2db-client/src/constants/tree.ts
@@ -30,7 +30,7 @@ export enum OperationColumn {
  CreateTable = 'createTable', //创建表
  CreateConsole = 'createConsole', // 新建console
  DeleteTable = 'deleteTable', // 删除表
-  ViewDDL = 'viewDDL', // 导出ddl
+  ViewDDL = 'viewDDL', // 查看ddl
  EditSource = 'editSource', // 编辑数据源
  Top = 'top', // 置顶
  EditTable = 'editTable', // 编辑表
--- a/chat2db-client/src/i18n/en-us/common.ts
+++ b/chat2db-client/src/i18n/en-us/common.ts
@@ -45,6 +45,7 @@ export default {
  'common.text.table': 'Table',
  'common.tips.saveSuccessfully': 'Save Successfully',
  'common.button.copy': 'Copy',
+  'common.button.copyName': 'Copy name',
  'common.button.copySuccessfully': 'Copy Successfully',
  'common.button.createConsole': 'Create Console',
  'common.button.exportWord': 'Export to Word',
--- a/chat2db-client/src/i18n/en-us/workspace.ts
+++ b/chat2db-client/src/i18n/en-us/workspace.ts
@@ -9,6 +9,7 @@ export default {
  'workspace.menu.pin': 'Pin',
  'workspace.menu.unPin': 'Unpin',
  'workspace.menu.editTableData': 'Edit Table Data',
+  'workspace.menu.queryConsole': 'Query console',
  'workspace.menu.deleteTablePlaceHolder': 'Please enter the name of the table you want to delete',
  'workspace.tips.affirmDeleteTable':
    'The table name you entered is not the same as the table name you want to delete, please confirm again',
--- a/chat2db-client/src/i18n/zh-cn/common.ts
+++ b/chat2db-client/src/i18n/zh-cn/common.ts
@@ -45,6 +45,7 @@ export default {
  'common.text.table': '表',
  'common.tips.saveSuccessfully': '保存成功',
  'common.button.copy': '复制',
+  'common.button.copyName': '复制名称',
  'common.button.copySuccessfully': '复制成功',
  'common.button.createConsole': '新建控制台',
  'common.button.exportWord': '导出到Word',
--- a/chat2db-client/src/i18n/zh-cn/workspace.ts
+++ b/chat2db-client/src/i18n/zh-cn/workspace.ts
@@ -9,6 +9,7 @@ export default {
  'workspace.menu.pin': '置顶',
  'workspace.menu.unPin': '取消置顶',
  'workspace.menu.editTableData': '编辑表数据',
+  'workspace.menu.queryConsole': '新建查询',
  'workspace.menu.deleteTablePlaceHolder': '请输入你要删除的表名',
  'workspace.tips.affirmDeleteTable': '输入的表名与要删除的表名不一致，请再次确认',
  'workspace.table.total': '总数',