iconfont

CodePhiliaX · Nov 19, 2023 · ed1a326 · ed1a326
1 parent 7fae7b7
commit ed1a326
Show file tree

Hide file tree

Showing 18 changed files with 5,433 additions and 53 deletions.
diff --git a/chat2db-client/src/assets/font/demo.css b/chat2db-client/src/assets/font/demo.css
diff --git a/chat2db-client/src/assets/font/demo_index.html b/chat2db-client/src/assets/font/demo_index.html
diff --git a/chat2db-client/src/assets/font/iconfont.css b/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";
 }

diff --git a/chat2db-client/src/assets/font/iconfont.js b/chat2db-client/src/assets/font/iconfont.js
diff --git a/chat2db-client/src/assets/font/iconfont.json b/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",

diff --git a/chat2db-client/src/assets/font/iconfont.ttf b/chat2db-client/src/assets/font/iconfont.ttf
diff --git a/chat2db-client/src/assets/font/iconfont.woff b/chat2db-client/src/assets/font/iconfont.woff
diff --git a/chat2db-client/src/assets/font/iconfont.woff2 b/chat2db-client/src/assets/font/iconfont.woff2
diff --git a/chat2db-client/src/components/ConsoleEditor/components/OperationLine/index.less b/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 {

diff --git a/chat2db-client/src/components/ConsoleEditor/components/OperationLine/index.tsx b/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>
   );
 };

diff --git a/chat2db-client/src/components/ConsoleEditor/components/SelectBoundInfo/index.less b/chat2db-client/src/components/ConsoleEditor/components/SelectBoundInfo/index.less
@@ -0,0 +1,3 @@
+.consoleOptionsRight{
+  display: flex;
+}
diff --git a/chat2db-client/src/components/ConsoleEditor/components/SelectBoundInfo/index.tsx b/chat2db-client/src/components/ConsoleEditor/components/SelectBoundInfo/index.tsx
@@ -1,13 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { IBoundInfo } from '../../index';
-import { Select } from 'antd';
+import { Dropdown } from 'antd';
 import { useConnectionStore } from '@/store/connection';
 import connectionService from '@/service/connection';
+import styles from './index.less';
 
 import {
-  registerIntelliSenseField,
+  // registerIntelliSenseField,
   registerIntelliSenseKeyword,
-  registerIntelliSenseTable,
+  // registerIntelliSenseTable,
   registerIntelliSenseDatabase,
 } from '@/utils/IntelliSense';
 
@@ -16,28 +17,31 @@ interface IProps {
   setBoundInfo: (params: IBoundInfo) => void;
 }
 
-interface IOption {
+interface IOption<T> {
+  key: string;
   label: string;
-  value: any;
+  value: T;
 }
 
 const SelectBoundInfo = (props: IProps) => {
   const { boundInfo, setBoundInfo } = props;
   const connectionList = useConnectionStore((state) => state.connectionList);
-  const [databaseNameList, setDatabaseNameList] = useState<IOption[]>();
-  const [schemaList, setSchemaList] = useState<IOption[]>();
+  const [databaseNameList, setDatabaseNameList] = useState<IOption<string>[]>();
+  const [schemaList, setSchemaList] = useState<IOption<string>[]>();
 
   const dataSourceList = useMemo(() => {
     return connectionList?.map((item) => ({
+      key: item.id.toString(),
       label: item.alias,
       value: item.id,
+      type: item.type,
     }));
   }, [connectionList]);
 
   // 编辑器绑定的数据库类型变化时，重新注册智能提示
   useEffect(() => {
     registerIntelliSenseKeyword(boundInfo.type);
-  }, [boundInfo.type]);
+  }, [boundInfo.dataSourceId]);
 
   // 编辑器绑定的数据库类型变化时，重新注册智能提示
   useEffect(() => {}, [boundInfo.dataSourceId]);
@@ -58,6 +62,7 @@ const SelectBoundInfo = (props: IProps) => {
             dataSourceName: boundInfo.dataSourceName,
           });
           return {
+            key: item.name,
             label: item.name,
             value: item.name,
           };
@@ -76,12 +81,13 @@ const SelectBoundInfo = (props: IProps) => {
     }
     connectionService
       .getSchemaList({
-        dataSourceId: boundInfo.dataSourceId,
+        dataSourceId: boundInfo.dataSourceId!,
         databaseName: boundInfo?.databaseName,
       })
       .then((res: any) => {
         setSchemaList(
           res.map((item) => ({
+            key: item.name,
             label: item.name,
             value: item.name,
           })),
@@ -93,41 +99,65 @@ const SelectBoundInfo = (props: IProps) => {
     getSchemaList();
   }, [boundInfo.databaseName]);
 
+  const changeDataSource = (item) => {
+    const curData = dataSourceList?.find((i) => i.key === item.key);
+    setBoundInfo({
+      ...boundInfo,
+      dataSourceId: curData?.value,
+      dataSourceName: curData?.label,
+      type: curData?.type,  
+      databaseName: void 0,
+      schemaName: void 0,
+    });
+  };
+
+  const changeDataBase = (item) => {
+    const _databaseName = databaseNameList?.find((i) => i.key === item.key)?.value;
+
+    setBoundInfo({
+      ...boundInfo,
+      databaseName: _databaseName,
+    });
+  };
+
+  const changeSchema = (item) => {
+    const _schemaName = schemaList?.find((i) => i.key === item.key)?.value;
+    setBoundInfo({
+      ...boundInfo,
+      schemaName: _schemaName,
+    });
+  };
+
   return (
-    <div>
-      <Select
-        defaultValue={boundInfo.dataSourceId}
-        onChange={(value) => {
-          setBoundInfo({
-            ...boundInfo,
-            dataSourceId: value,
-          });
+    <div className={styles.consoleOptionsRight}>
+      <Dropdown
+        menu={{
+          items: dataSourceList,
+          onClick: changeDataSource,
         }}
-        options={dataSourceList}
-      />
+      >
+        <div>{boundInfo.dataSourceName || '请选择数据库'}</div>
+      </Dropdown>
+
       {boundInfo.dataSourceId && !!databaseNameList?.length && (
-        <Select
-          defaultValue={boundInfo.databaseName}
-          onChange={(value) => {
-            setBoundInfo({
-              ...boundInfo,
-              databaseName: value,
-            });
+        <Dropdown
+          menu={{
+            items: databaseNameList,
+            onClick: changeDataBase,
           }}
-          options={databaseNameList}
-        />
+        >
+          <div>{boundInfo.databaseName || '请选择数据库'}</div>
+        </Dropdown>
       )}
       {boundInfo.databaseName && !!schemaList?.length && (
-        <Select
-          defaultValue={boundInfo.schemaName}
-          onChange={(value) => {
-            setBoundInfo({
-              ...boundInfo,
-              schemaName: value,
-            });
+        <Dropdown
+          menu={{
+            items: schemaList,
+            onClick: changeSchema,
           }}
-          options={schemaList}
-        />
+        >
+          <div>{boundInfo.schemaName || '请选择schema'}</div>
+        </Dropdown>
       )}
     </div>
   );

diff --git a/chat2db-client/src/components/ConsoleEditor/index.tsx b/chat2db-client/src/components/ConsoleEditor/index.tsx
@@ -38,9 +38,9 @@ export type IAppendValue = {
 export interface IBoundInfo {
   consoleId: number;
   consoleName: string;
-  dataSourceId: number;
-  dataSourceName: string;
-  type: DatabaseTypeCode;
+  dataSourceId?: number;
+  dataSourceName?: string;
+  type?: DatabaseTypeCode;
   databaseName?: string;
   schemaName?: string;
   status?: ConsoleStatus;

diff --git a/chat2db-client/src/components/MonacoEditor/monacoEditorConfig.ts b/chat2db-client/src/components/MonacoEditor/monacoEditorConfig.ts
@@ -32,6 +32,10 @@ export const editorDefaultOptions: IEditorOptions = {
     // 滚动条
     alwaysConsumeMouseWheel: false, // 总是消耗鼠标滚轮
   },
+  unicodeHighlight: {
+    ambiguousCharacters: false,
+    invisibleCharacters: false,
+  },
   // padding: {
   //   top: 2,
   //   bottom: 2,