From ff06c3158a85f2dd86200bd660b444230dd6765a Mon Sep 17 00:00:00 2001 From: shanhexi Date: Sun, 12 Nov 2023 22:12:02 +0800 Subject: [PATCH] refactor-workspace --- .../blocks/Tree/TreeNodeRightClick/index.less | 15 -- .../blocks/Tree/TreeNodeRightClick/index.tsx | 1 - chat2db-client/src/blocks/Tree/index.tsx | 24 ++-- .../src/blocks/Tree/rightClickMenu.ts | 136 ++++++++++++++++++ .../src/blocks/Tree/screenOutMenu.ts | 75 ---------- chat2db-client/src/blocks/Tree/treeConfig.tsx | 2 +- chat2db-client/src/constants/tree.ts | 2 +- chat2db-client/src/i18n/en-us/common.ts | 1 + chat2db-client/src/i18n/en-us/workspace.ts | 1 + chat2db-client/src/i18n/zh-cn/common.ts | 1 + chat2db-client/src/i18n/zh-cn/workspace.ts | 1 + 11 files changed, 156 insertions(+), 103 deletions(-) create mode 100644 chat2db-client/src/blocks/Tree/rightClickMenu.ts delete mode 100644 chat2db-client/src/blocks/Tree/screenOutMenu.ts diff --git a/chat2db-client/src/blocks/Tree/TreeNodeRightClick/index.less b/chat2db-client/src/blocks/Tree/TreeNodeRightClick/index.less index 8c9cd333..aa09fc09 100644 --- 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; diff --git a/chat2db-client/src/blocks/Tree/TreeNodeRightClick/index.tsx b/chat2db-client/src/blocks/Tree/TreeNodeRightClick/index.tsx index 1af5641e..cd52e1cc 100644 --- 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(null); const operationColumnConfig: { [key in OperationColumn]: (data: ITreeNode) => IOperationColumnConfigItem } = { diff --git a/chat2db-client/src/blocks/Tree/index.tsx b/chat2db-client/src/blocks/Tree/index.tsx index d0e1d164..4e62eb91 100644 --- 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: , + }; + }); + return ( { - return { - ...item, - label: , - }; - }), + items: dropdownsItems || [], + style: dropdownsItems ? {} : { display: 'none' }, // 有菜单项才显示 }} overlayStyle={{ zIndex: 1080, @@ -171,6 +174,7 @@ const TreeNode = memo((props: TreeNodeIProps) => {
diff --git a/chat2db-client/src/blocks/Tree/rightClickMenu.ts b/chat2db-client/src/blocks/Tree/rightClickMenu.ts new file mode 100644 index 00000000..27406085 --- /dev/null +++ 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, + }, + }; + }); +}; diff --git a/chat2db-client/src/blocks/Tree/screenOutMenu.ts b/chat2db-client/src/blocks/Tree/screenOutMenu.ts deleted file mode 100644 index 69e05ae6..00000000 --- a/chat2db-client/src/blocks/Tree/screenOutMenu.ts +++ /dev/null @@ -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 - } - } - }); -}; diff --git a/chat2db-client/src/blocks/Tree/treeConfig.tsx b/chat2db-client/src/blocks/Tree/treeConfig.tsx index 4e2af663..0044e6b6 100644 --- 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, }, diff --git a/chat2db-client/src/constants/tree.ts b/chat2db-client/src/constants/tree.ts index 5e9f87e0..bfd5dcd7 100644 --- 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', // 编辑表 diff --git a/chat2db-client/src/i18n/en-us/common.ts b/chat2db-client/src/i18n/en-us/common.ts index 2216f71e..4c18366f 100644 --- 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', diff --git a/chat2db-client/src/i18n/en-us/workspace.ts b/chat2db-client/src/i18n/en-us/workspace.ts index 1ccc265f..a82e782f 100644 --- 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', diff --git a/chat2db-client/src/i18n/zh-cn/common.ts b/chat2db-client/src/i18n/zh-cn/common.ts index 3d59bf3c..7f55a907 100644 --- 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', diff --git a/chat2db-client/src/i18n/zh-cn/workspace.ts b/chat2db-client/src/i18n/zh-cn/workspace.ts index 07c4f159..bc5921d6 100644 --- 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': '总数',