Merge pull request #856 from chat2db/refactor-workspace

Refactor workspace

chat2db-client/src/assets/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3633546 */
-  src: url('iconfont.woff2?t=1699180324907') format('woff2'),
-       url('iconfont.woff?t=1699180324907') format('woff'),
-       url('iconfont.ttf?t=1699180324907') format('truetype');
+  src: url('iconfont.woff2?t=1700381336886') format('woff2'),
+       url('iconfont.woff?t=1700381336886') format('woff'),
+       url('iconfont.ttf?t=1700381336886') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,58 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-database:before {
+  content: "\e669";
+}
+
+.icon-shaixuan1:before {
+  content: "\e888";
+}
+
+.icon-shuaxin2:before {
+  content: "\e668";
+}
+
+.icon-jiahao_o:before {
+  content: "\eb78";
+}
+
+.icon-jurassic_data:before {
+  content: "\e6a9";
+}
+
+.icon-quanxian:before {
+  content: "\e667";
+}
+
+.icon-sharpicons_add-database:before {
+  content: "\e816";
+}
+
+.icon-zuzhiguanli-:before {
+  content: "\e663";
+}
+
+.icon-moxing-miaobian:before {
+  content: "\e691";
+}
+
+.icon-dianhuatianchong:before {
+  content: "\e678";
+}
+
+.icon-youxiang:before {
+  content: "\e672";
+}
+
+.icon-weixin:before {
+  content: "\e65d";
+}
+
+.icon-google:before {
+  content: "\eaa8";
+}
+
 .icon-xiajiantou1-copy:before {
   content: "\100be";
 }

chat2db-client/src/assets/font/iconfont.json

@@ -5,6 +5,97 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "5729483",
+      "name": "database",
+      "font_class": "database",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "2076240",
+      "name": "筛选",
+      "font_class": "shaixuan1",
+      "unicode": "e888",
+      "unicode_decimal": 59528
+    },
+    {
+      "icon_id": "2787037",
+      "name": "刷新",
+      "font_class": "shuaxin2",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "5387866",
+      "name": "加号_o",
+      "font_class": "jiahao_o",
+      "unicode": "eb78",
+      "unicode_decimal": 60280
+    },
+    {
+      "icon_id": "10594610",
+      "name": "数据库_jurassic",
+      "font_class": "jurassic_data",
+      "unicode": "e6a9",
+      "unicode_decimal": 59049
+    },
+    {
+      "icon_id": "12515461",
+      "name": "权限",
+      "font_class": "quanxian",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "10573069",
+      "name": "sharpicons_add-database",
+      "font_class": "sharpicons_add-database",
+      "unicode": "e816",
+      "unicode_decimal": 59414
+    },
+    {
+      "icon_id": "6789097",
+      "name": "组织管理",
+      "font_class": "zuzhiguanli-",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "15568801",
+      "name": "空间",
+      "font_class": "moxing-miaobian",
+      "unicode": "e691",
+      "unicode_decimal": 59025
+    },
+    {
+      "icon_id": "145699",
+      "name": "电话_填充",
+      "font_class": "dianhuatianchong",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "3483765",
+      "name": "邮箱",
+      "font_class": "youxiang",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "15933094",
+      "name": "微信",
+      "font_class": "weixin",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "19447816",
+      "name": "谷歌",
+      "font_class": "google",
+      "unicode": "eaa8",
+      "unicode_decimal": 60072
+    },
     {
       "icon_id": "37968169",
       "name": "下箭头-copy",

chat2db-client/src/blocks/Tree/functions/deleteTable.less

@@ -0,0 +1,21 @@
+.deleteTableFooter{
+  display: flex;
+  justify-content: center;
+  button{
+    margin: 0px 15px;
+  }
+
+}
+
+.checkContainer{
+  margin: 15px 0px 25px;
+}
+
+.deleteModalContent{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+}

chat2db-client/src/blocks/Tree/functions/deleteTable.tsx

@@ -0,0 +1,64 @@
+// 置顶表格
+import React, { useState } from 'react';
+import mysqlService from '@/service/sql';
+import { Button, Checkbox } from 'antd';
+import { openModal } from '@/store/common/components';
+import styles from './deleteTable.less';
+import i18n from '@/i18n';
+
+export const deleteTable = (treeNodeData) => {
+  openModal({
+    width: '450px',
+    content: <DeleteModalContent treeNodeData={treeNodeData} openModal={openModal} />,
+  });
+};
+
+export const DeleteModalContent = (params: { treeNodeData: any; openModal: any }) => {
+  const { treeNodeData } = params;
+  // 禁用确定按钮
+  const [userChecked, setUserChecked] = useState<boolean>(false);
+
+  const onOk = () => {
+    const p: any = {
+      dataSourceId: treeNodeData.extraParams.dataSourceId,
+      databaseName: treeNodeData.extraParams.databaseName,
+      schemaName: treeNodeData.extraParams.schemaName,
+      tableName: treeNodeData.name,
+    };
+    mysqlService.deleteTable(p).then(() => {
+      treeNodeData.parentNode.loadData({
+        refresh: true,
+      });
+      openModal(false);
+    });
+  };
+
+  return (
+    <div className={styles.deleteModalContent}>
+      <div className={styles.title}>{i18n('workspace.tree.delete.table.tip', `"${treeNodeData.name}"`)}</div>
+      <div className={styles.checkContainer}>
+        <Checkbox
+          value={userChecked}
+          onChange={(e) => {
+            setUserChecked(e.target.checked);
+          }}
+        >
+          {i18n('workspace.tree.delete.tip')}
+        </Checkbox>
+      </div>
+      <div className={styles.deleteTableFooter}>
+        <Button
+          type="primary"
+          onClick={() => {
+            openModal(false);
+          }}
+        >
+          {i18n('common.button.cancel')}
+        </Button>
+        <Button disabled={!userChecked} onClick={onOk}>
+          {i18n('common.button.affirm')}
+        </Button>
+      </div>
+    </div>
+  );
+};

chat2db-client/src/blocks/Tree/functions/viewDDL.less

@@ -0,0 +1,6 @@
+.monacoEditorBox{
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  height: 60vh;
+  overflow: hidden;
+}

chat2db-client/src/blocks/Tree/functions/viewDDL.tsx

@@ -1,16 +1,47 @@
 // 置顶表格
 import React from 'react';
 import mysqlService from '@/service/sql';
+import { v4 as uuid } from 'uuid';
+import styles from './viewDDL.less';
 
 import { openModal } from '@/store/common/components';
 
 import MonacoEditor from '@/components/MonacoEditor';
 
 export const viewDDL = (treeNodeData) => {
+  const getSql = () => {
+    return new Promise((resolve) => {
+      mysqlService
+        .exportCreateTableSql({
+          dataSourceId: treeNodeData.extraParams.dataSourceId,
+          databaseName: treeNodeData.extraParams.databaseName,
+          schemaName: treeNodeData.extraParams.schemaName,
+          tableName: treeNodeData.name,
+        })
+        .then((res) => {
+          resolve(res);
+        });
+    });
+  };
+
   openModal({
-    title: '查看DDL',
+    title: `DDL-${treeNodeData.name}`,
     width: '60%',
+    height: '60%',
     footer: false,
-    content: <MonacoEditor id="edit-dialog" />,
+    content: (
+      <div className={styles.monacoEditorBox}>
+        <MonacoEditorAsync getSql={getSql} />
+      </div>
+    ),
+  });
+};
+
+export const MonacoEditorAsync = (params: { getSql: any }) => {
+  const { getSql } = params;
+  const monacoEditorRef = React.useRef<any>();
+  getSql().then((sql) => {
+    monacoEditorRef.current.setValue(sql);
   });
+  return <MonacoEditor id={uuid()} ref={monacoEditorRef} />;
 };

chat2db-client/src/blocks/Tree/hooks/useGetRightClickMenu.ts

@@ -19,6 +19,7 @@ import { useWorkspaceStore } from '@/store/workspace';
 import { openView, openFunction, openProcedure, openTrigger } from '../functions/openAsyncSql';
 import { handelPinTable } from '../functions/pinTable';
 import { viewDDL } from '../functions/viewDDL';
+import { deleteTable } from '../functions/deleteTable';
 
 // ----- utils -----
 import { compatibleDataBaseName } from '@/utils/database';
@@ -156,7 +157,7 @@ export const useGetRightClickMenu = (props: IProps) => {
         text: i18n('workspace.menu.deleteTable'),
         icon: '\ue6a7',
         handle: () => {
-
+          deleteTable(treeNodeData);
         },
       },
 

chat2db-client/src/components/ConsoleEditor/components/OperationLine/index.less

@@ -17,6 +17,10 @@
 .consoleOptionsLeft {
   display: flex;
   align-items: center;
+  margin: 0px -6px;
+  button {
+    margin: 0px 6px;
+  }
 }
 
 .runButton {

chat2db-client/src/components/ConsoleEditor/components/OperationLine/index.tsx

@@ -50,11 +50,13 @@ const OperationLine = (props: IProps) => {
             {i18n('common.button.save')}
           </Button>
         )}
-        <SelectBoundInfo setBoundInfo={setBoundInfo} boundInfo={boundInfo} />
+        <Button type="default" onClick={handleSQLFormat}>
+          {i18n('common.button.format')}
+        </Button>
+      </div>
+      <div>
+        {/* <SelectBoundInfo setBoundInfo={setBoundInfo} boundInfo={boundInfo} /> */}
       </div>
-      <Button type="text" onClick={handleSQLFormat}>
-        {i18n('common.button.format')}
-      </Button>
     </div>
   );
 };

chat2db-client/src/components/ConsoleEditor/components/SelectBoundInfo/index.less

@@ -0,0 +1,3 @@
+.consoleOptionsRight{
+  display: flex;
+}