提交语

config/proxy.ts

@@ -1,3 +1,12 @@
+/*
+ * @version: V1.0.0
+ * @Date: 2023-12-26 13:54:58
+ * @LastEditors: lzq
+ * @LastEditTime: 2023-12-26 14:14:09
+ * @company: 睿展数据
+ * @FilePath: \salpa-web\config\proxy.ts
+ * @Descripttion:
+ */
 /**
  * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
  * -------------------------------
@@ -10,7 +19,7 @@ export default {
   dev: {
     '/api/': {
       // target: 'http://192.168.103.172:8080',
-      target: 'http://192.168.2.58:8080',
+      target: 'http://192.168.1.217:9080',
       changeOrigin: true,
       pathRewrite: { '^/api': '' },
     },
@@ -19,7 +28,7 @@ export default {
       target: 'http://192.168.113.251:8080',
 
       changeOrigin: true,
-    }
+    },
   },
   test: {
     '/api/': {

package.json

@@ -26,7 +26,6 @@
     "lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto",
     "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
     "openapi": "umi openapi",
-    "precommit": "lint-staged",
     "prettier": "prettier -c --write \"src/**/*\"",
     "serve": "umi-serve",
     "start": "cross-env UMI_ENV=dev umi dev",

src/app.tsx

@@ -5,60 +5,59 @@
  *
  * */
 
-import RightContent from '@/components/RightContent'
+import RightContent from '@/components/RightContent';
-import type { Settings as LayoutSettings } from '@ant-design/pro-layout'
+import type { Settings as LayoutSettings } from '@ant-design/pro-layout';
-import { PageLoading } from '@ant-design/pro-layout'
+import { PageLoading } from '@ant-design/pro-layout';
-import type { RunTimeLayoutConfig } from 'umi'
+import type { RunTimeLayoutConfig } from 'umi';
-import { history, Link } from 'umi'
+import { history, Link } from 'umi';
 // import Footer from '@/components/Footer';
-import { BookOutlined, LinkOutlined } from '@ant-design/icons'
+import { BookOutlined, LinkOutlined } from '@ant-design/icons';
-import defaultSettings from '../config/defaultSettings'
+import defaultSettings from '../config/defaultSettings';
-import iconStyle  from '../public/樽海鞘_图案.svg'
+import { getRoutersInfo, getUserInfo } from './services/session';
-import { getRoutersInfo, getUserInfo } from './services/session'
+const isDev = process.env.NODE_ENV === 'development';
-const isDev = process.env.NODE_ENV === 'development'
+const loginPath = '/user/login';
-const loginPath = '/user/login'
 /** 获取用户信息比较慢的时候会展示一个 loading */
 export const initialStateConfig = {
-  loading: <PageLoading />
+  loading: <PageLoading />,
-}
+};
 
 /**
  * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
  * */
 export async function getInitialState(): Promise<{
-  settings?: Partial<LayoutSettings>
+  settings?: Partial<LayoutSettings>;
-  currentUser?: API.CurrentUser
+  currentUser?: API.CurrentUser;
-  loading?: boolean
+  loading?: boolean;
-  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>
+  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
 }> {
   const fetchUserInfo = async () => {
     try {
-      console.log(1111111111111111111111111111111)
+      console.log(1111111111111111111111111111111);
-      const resp = await getUserInfo()
+      const resp = await getUserInfo();
       if (resp === undefined || resp.code !== 200) {
-        history.push(loginPath)
+        history.push(loginPath);
       } else {
-        return { ...resp.user, permissions: resp.permissions } as API.CurrentUser
+        return { ...resp.user, permissions: resp.permissions } as API.CurrentUser;
       }
     } catch (error) {
-      history.push(loginPath)
+      history.push(loginPath);
-    }
-    return undefined
     }
+    return undefined;
+  };
   // 如果是登录页面，不执行
   if (history.location.pathname !== loginPath) {
-    console.log(222222222222222222222222222222)
+    console.log(222222222222222222222222222222);
-    const currentUser = await fetchUserInfo()
+    const currentUser = await fetchUserInfo();
     return {
       settings: defaultSettings,
       currentUser,
-      fetchUserInfo
+      fetchUserInfo,
-    }
+    };
   }
   return {
     fetchUserInfo,
-    settings: defaultSettings
+    settings: defaultSettings,
-  }
+  };
 }
 
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
@@ -66,14 +65,14 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
   return {
     rightContentRender: () => <RightContent />,
     waterMarkProps: {
-      content: initialState?.currentUser?.userName
+      content: initialState?.currentUser?.userName,
     },
     // footerRender: () => <Footer />,
     onPageChange: () => {
-      const { location } = history
+      const { location } = history;
       // 如果没有登录，重定向到 login
       if (!initialState?.currentUser && location.pathname !== loginPath) {
-        history.push(loginPath)
+        history.push(loginPath);
       }
     },
     links: isDev
@@ -85,27 +84,27 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
           <Link key="docs" to="/~docs">
             <BookOutlined />
             <span>业务组件文档</span>
-          </Link>
+          </Link>,
         ]
       : [],
-    menuHeaderRender: undefined,
+    menuHeaderRender: false,
     menu: {
       // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
       params: {
-        userId: initialState?.currentUser?.userId
+        userId: initialState?.currentUser?.userId,
       },
       request: async () => {
         if (!initialState?.currentUser?.userId) {
-          return []
+          return [];
         }
         // initialState.currentUser 中包含了所有用户信息
-        const menus = await getRoutersInfo()
+        const menus = await getRoutersInfo();
         setInitialState((preInitialState: any) => ({
           ...preInitialState,
-          menus
+          menus,
-        }))
+        }));
-        return menus
+        return menus;
-      }
+      },
     },
     // 自定义 403 页面
     // unAccessible: <div>unAccessible</div>,
@@ -116,9 +115,11 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
           {children}
           {!props.location?.pathname?.includes('/login')}
         </div>
-      )
+      );
     },
     ...initialState?.settings,
-    logo: <img src={iconStyle} />
+    // logo: <div />,
-  }
+    // title: <div />,
-}
+    // logo: <img src={iconStyle} />
+  };
+};

src/components/RightContent/index.tsx

@@ -1,11 +1,20 @@
-import { Space } from 'antd';
+/*
+ * @version: V1.0.0
+ * @Date: 2023-12-26 13:54:59
+ * @LastEditors: lzq
+ * @LastEditTime: 2023-12-26 14:24:26
+ * @company: 睿展数据
+ * @FilePath: \salpa-web\src\components\RightContent\index.tsx
+ * @Descripttion:
+ */
 import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
 import React from 'react';
-import { useModel, SelectLang } from 'umi';
+import { SelectLang, useModel } from 'umi';
-import Avatar from './AvatarDropdown';
 import HeaderSearch from '../HeaderSearch';
-import styles from './index.less';
 import NoticeIconView from '../NoticeIcon';
+import Avatar from './AvatarDropdown';
+import styles from './index.less';
 
 export type SiderTheme = 'light' | 'dark';
 
@@ -22,7 +31,7 @@ const GlobalHeaderRight: React.FC = () => {
   if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
     className = `${styles.right}  ${styles.dark}`;
   }
-
+  return <span />;
   return (
     <Space className={className}>
       <HeaderSearch

src/e2e/baseLayout.e2e.js

@@ -1,7 +1,16 @@
+/*
+ * @version: V1.0.0
+ * @Date: 2023-12-26 13:54:59
+ * @LastEditors: lzq
+ * @LastEditTime: 2023-12-26 14:10:35
+ * @company: 睿展数据
+ * @FilePath: \salpa-web\src\e2e\baseLayout.e2e.js
+ * @Descripttion:
+ */
 const { uniq } = require('lodash');
 const RouterConfig = require('../../config/config').default.routes;
 
-const BASE_URL = `http://localhost:${process.env.PORT || 8001}`;
+const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
 
 function formatter(routes, parentPath = '') {
   const fixedParentPath = parentPath.replace(/\/{1,}/g, '/');

src/global.less

@@ -56,29 +56,28 @@ ol {
   }
 }
 
+// .ant-layout{
+//   background: #fff;
+// }
+// .ant-layout-header{
+//   //display: none;
+// }
 
-.ant-layout{
+// #contentContainer{
-  background: #fff;
+//   //display: none;
-}
+// }
-.ant-layout-header{
+// .ant-pro-right-content{
-  //display: none;
+//   display: none;
-}
+// }
-
+// .ant-modal-mask{
-#contentContainer{
+//   background-color: rgba(255, 0, 0, 0);
-  //display: none;
+// }
-}
+// .chiner-modal{
-.ant-pro-right-content{
+//   background-color: rgba(255, 0, 0, 0);
-  display: none;
+// }
-}
+// .ant-pro-top-nav-header-logo{
-.ant-modal-mask{
+//   display: none;
-  background-color: rgba(255, 0, 0, 0);
+// }
-}
+// .ant-pro-top-nav-header-main-left{
-.chiner-modal{
+//   min-width: 0px;
-  background-color: rgba(255, 0, 0, 0);
+// }
-}
-.ant-pro-top-nav-header-logo{
-  display: none;
-}
-.ant-pro-top-nav-header-main-left{
-  min-width: 0px;
-}

src/modelstyle.css

@@ -0,0 +1,149 @@
+body .ant-layout{
+	background: #fff;
+}
+
+/*ant-btn*/
+body .ant-btn:focus, 
+body .ant-btn:hover {
+    color: #2B50C4;
+    border-color: #2B50C4;
+    background: #fff;
+}
+body .ant-btn:active {
+	color:#042281;
+	border-color:#042281;
+	background:#fff
+}
+body .ant-btn-primary {
+    color: #fff;
+    border-color: #233A82;
+    background: #233A82;
+}
+body .ant-btn-primary:focus, 
+body .ant-btn-primary:hover {
+    color: #fff;
+    border-color: #2B50C4;
+    background: #2B50C4;
+}
+body .ant-btn-primary:active {
+    color: #fff;
+    border-color: #042281;
+    background: #042281;
+}
+html {
+--antd-wave-shadow-color:#233A82 !important;
+}
+
+
+body .ant-input:hover {
+    border-color: #233A82;
+}
+body .ant-input-affix-wrapper-focused, 
+body .ant-input-affix-wrapper:focus {
+	border-color:#233A82;
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+body .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper-focused, 
+body .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus {
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+body .ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper-focused, 
+body .ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus {
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+body .ant-input-search-rtl>.ant-input-group>.ant-input-affix-wrapper-focused, 
+body .ant-input-search-rtl>.ant-input-group>.ant-input-affix-wrapper:hover {
+	border-right-color:#233A82;
+}
+body .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
+    border-color: #233A82;
+}
+
+body .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
+    border-color: #233A82;
+}
+body .ant-select-status-error.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer).ant-select-focused .ant-select-selector, 
+body .ant-select-status-error.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer).ant-select-open .ant-select-selector {
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+body .ant-select-status-warning.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer).ant-select-focused .ant-select-selector, 
+body .ant-select-status-warning.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer).ant-select-open .ant-select-selector {
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+body .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
+	border-color:#233A82;
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+body .ant-input-group-addon .ant-select-focused .ant-select-selector, 
+body .ant-input-group-addon .ant-select-open .ant-select-selector {
+	color:#233A82;
+}
+
+body .namediv:hover {
+    color: #233A82;
+}
+
+body .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    color: #1d2129;
+    background: #e9ecf4;
+}
+body .ant-select-item-option-selected:hover{
+	background: #e9ecf4;
+}
+body .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
+    color: #233a82;
+}
+
+
+body .ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input-focused, 
+body .ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus {
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+
+
+body .ant-input-affix-wrapper-focused, 
+body .ant-input-affix-wrapper:focus {
+	border-color:#233a82;
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+body .ant-input-focused, 
+body .ant-input:focus {
+	border-color:#233a82;
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+body .ant-pagination-options-quick-jumper input-focused, 
+body .ant-pagination-options-quick-jumper input:focus {
+	border-color:#233a82;
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+body .ant-pagination-simple .ant-pagination-simple-pager input:focus {
+	border-color:#233a82;
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+
+body .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input-focused, 
+body .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus {
+	box-shadow:0 0 0 2px rgba(35, 58, 130, .2);
+}
+
+body .spandes:hover{
+	color:#233a82;
+}
+body .cardstyle:hover .deletestyle:hover {
+    color: #233a82;
+}
+
+body .ant-pagination-item-active {
+    border-color: #233a82;
+}
+body .ant-pagination-item:hover a {
+    color: #233a82;
+}
+body .ant-pagination-item:hover {
+    border-color: #233a82;
+}
+body .ant-pagination-next:hover .ant-pagination-item-link, 
+body .ant-pagination-prev:hover .ant-pagination-item-link {
+    color: #233a82;
+    border-color: #233a82;
+}

src/pages/pdManer/pages/Main/HeaderTool.js

@@ -1,103 +1,140 @@
-import React, { useState, forwardRef, useImperativeHandle, useRef, useEffect } from 'react'
+import { executeSql } from '@/services/api.ts';
-import { FormatMessage, GroupIcon, Icon, SearchSuggest, Slider, NumberInput, Modal } from '../../components'
+import { Divider } from 'antd';
-import { SketchPicker } from 'react-color'
+import numeral from 'numeral';
-import numeral from 'numeral'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { validateNeedSave } from '../../lib/datasource_util'
+import { SketchPicker } from 'react-color';
-import { Divider, message } from 'antd'
+import { applyMiddleware, legacy_createStore } from 'redux';
-import { executeSql } from '@/services/api.ts'
+import { logger } from 'redux-logger';
-import { getAllDataSQLByFilter } from '../../lib/json2code_util'
+import thunkMiddleware from 'redux-thunk';
-import './style/index.less'
+import {
-const GroupIconGroup = GroupIcon.GroupIconGroup
+  FormatMessage,
-
+  GroupIcon,
-export default React.memo(forwardRef(({ currentPrefix, close, iconClick, colorChange, openModal, templateType,
+  Icon,
-  activeTab, resize, sliderChange, dataSource,
+  Modal,
-  jumpPosition, jumpDetail }, ref) => {
+  NumberInput,
-  const dbConn = dataSource?.dbConn || []
+  SearchSuggest,
-  const properties = dbConn[0]?.properties
+  Slider,
-  const [isCellSelected, setIsCellSelected] = useState(false)
+} from '../../components';
-  const [scaleNumber, setScaleNumber] = useState(1)
+import { validateNeedSave } from '../../lib/datasource_util';
+import { getAllDataSQLByFilter } from '../../lib/json2code_util';
+import reducers from '../../reducers';
+import './style/index.less';
+const GroupIconGroup = GroupIcon.GroupIconGroup;
+export default React.memo(
+  forwardRef(
+    (
+      {
+        currentPrefix,
+        close,
+        iconClick,
+        colorChange,
+        openModal,
+        templateType,
+        activeTab,
+        resize,
+        sliderChange,
+        dataSource,
+        jumpPosition,
+        jumpDetail,
+      },
+      ref,
+    ) => {
+      const dbConn = dataSource?.dbConn || [];
+      const properties = dbConn[0]?.properties;
+      const [isCellSelected, setIsCellSelected] = useState(false);
+      const [scaleNumber, setScaleNumber] = useState(1);
       const [colorState, setColor] = useState({
         fontColor: 'rgba(0, 0, 0, 0.65)',
         fillColor: '#ACDAFC',
-  })
+      });
-  useImperativeHandle(ref, () => {
+      useImperativeHandle(
+        ref,
+        () => {
           return {
             setScaleNumber,
             setIsCellSelected,
-    }
+          };
-  }, [])
+        },
+        [],
+      );
       const _colorChange = (key, value) => {
         setColor((pre) => {
           return {
             ...pre,
             [key]: value.hex,
-      }
+          };
-    })
+        });
-    colorChange && colorChange(key, value)
+        colorChange && colorChange(key, value);
-  }
+      };
       const _close = () => {
         if (validateNeedSave(dataSource)) {
           Modal.confirm({
             title: FormatMessage.string({ id: 'closeConfirmTitle' }),
             message: FormatMessage.string({ id: 'closeConfirm' }),
             onOk: () => {
-          close()
+              close();
             },
-      })
+          });
         } else {
-      close()
+          close();
         }
-  }
+      };
-  const defaultTemplate = ['createTable', 'createIndex', 'content']
+      const defaultTemplate = ['createTable', 'createIndex', 'content'];
-  const templateRef = useRef(defaultTemplate)
+      const templateRef = useRef(defaultTemplate);
-  const dataTypeSupports = _.get(dataSource, 'profile.dataTypeSupports', [])
+      const dataTypeSupports = _.get(dataSource, 'profile.dataTypeSupports', []);
-  const defaultDb = _.get(dataSource, 'profile.default.db', dataTypeSupports[0]?.id)
+      const defaultDb = _.get(dataSource, 'profile.default.db', dataTypeSupports[0]?.id);
       const [codeData, setCodeData] = useState(() => {
-    return getAllDataSQLByFilter(dataSource,
+        return getAllDataSQLByFilter(
-      templateType === 'dict' ? 'dictSQLTemplate' : defaultDb, templateRef.current)
+          dataSource,
-  })
+          templateType === 'dict' ? 'dictSQLTemplate' : defaultDb,
+          templateRef.current,
+        );
+      });
 
       const backGroup = async () => {
         if (!properties) {
           Modal.error({
             title: FormatMessage.string({ id: 'dbConnect.connectError' }),
             message: '请连接数据库',
-      })
+          });
         } else {
           const data = {
             driverName: properties.driver_class_name,
             url: properties.url,
             username: properties.username,
             password: properties.password,
-        sql: codeData
+            sql: codeData,
-      }
+          };
-      const res = await executeSql(data)
+          const res = await executeSql(data);
           if (res.code == 200) {
             Modal.success({
               title: FormatMessage.string({ id: 'dbConnect.connectSuccess' }),
               message: `${res.msg}`,
-        })
+            });
           } else {
             Modal.error({
               bodyStyle: { width: '50%' },
               contentStyle: { width: '100%', height: '100%' },
               title: FormatMessage.string({ id: 'dbConnect.connectError' }),
-          message: `${res.msg}`
+              message: `${res.msg}`,
-        })
+            });
           }
         }
-
+      };
-  }
+      const [issee, setIssee] = useState(false);
-  const [issee, setIssee] = useState(false)
+      const [isfill, setIsfill] = useState(false);
-  const [isfill, setIsfill] = useState(false)
       const fill = () => {
-    setIsfill(!isfill)
+        setIsfill(!isfill);
-    setIssee(false)
+        setIssee(false);
-  }
+      };
       const see = () => {
-    setIsfill(false)
+        setIsfill(false);
-    setIssee(!issee)
+        setIssee(!issee);
-  }
+      };
+      const handleExportSqlDict = () => {
+        const store = legacy_createStore(reducers, applyMiddleware(thunkMiddleware, logger));
+        console.log(dataSource);
+      };
 
       return (
         <div className={`${currentPrefix}-head`}>
@@ -112,7 +149,7 @@ export default React.memo(forwardRef(({ currentPrefix, close, iconClick, colorCh
               </div>
             </div>
           </div>
-      <Divider className='divider' />
+          <Divider className="divider" />
           <div className={`${currentPrefix}-iconstyle`}>
             <GroupIconGroup>
               <GroupIcon
@@ -122,7 +159,6 @@ export default React.memo(forwardRef(({ currentPrefix, close, iconClick, colorCh
                 groupKey="save"
                 icon="icon-bianzu2"
                 onClick={iconClick}
-
               />
               <GroupIcon
                 className={`${currentPrefix}-icongroup`}
@@ -186,7 +222,7 @@ export default React.memo(forwardRef(({ currentPrefix, close, iconClick, colorCh
                 //style={{cursor: 'move'}}
                 icon={
                   <div className={`${currentPrefix}-head-rect`}>
-                <span>{ }</span>
+                    <span>{}</span>
                   </div>
                 }
                 groupKey="polygon"
@@ -195,11 +231,21 @@ export default React.memo(forwardRef(({ currentPrefix, close, iconClick, colorCh
                 //onMouseDown={e => iconClick(e, 'polygon')}
               />
 
-          <div className='fontColor1'>
+              <div className="fontColor1">
-            <Icon type="icon-zitiyanse" onClick={see}
+                <Icon
-              disable={activeTab?.type !== 'diagram' || !isCellSelected} title="字体颜色" />
+                  type="icon-zitiyanse"
+                  onClick={see}
+                  disable={activeTab?.type !== 'diagram' || !isCellSelected}
+                  title="字体颜色"
+                />
                 {/* display: issee ? 'block' : 'none' */}
-            <div style={{ display: activeTab?.type == 'diagram' && issee && isCellSelected ? 'block' : 'none' }} className='fontColor2' >
+                <div
+                  style={{
+                    display:
+                      activeTab?.type == 'diagram' && issee && isCellSelected ? 'block' : 'none',
+                  }}
+                  className="fontColor2"
+                >
                   <SketchPicker
                     disableAlpha
                     presetColors={[
@@ -225,9 +271,20 @@ export default React.memo(forwardRef(({ currentPrefix, close, iconClick, colorCh
                   />
                 </div>
               </div>
-          <div className='fontColor1'>
+              <div className="fontColor1">
-            <Icon type="icon-tianchongyanse" onClick={fill} disable={activeTab?.type !== 'diagram' || !isCellSelected} title="填充颜色" />
+                <Icon
-            <div style={{ display: activeTab?.type == 'diagram' && isfill && isCellSelected ? 'block' : 'none' }} className='fontColor2' >
+                  type="icon-tianchongyanse"
+                  onClick={fill}
+                  disable={activeTab?.type !== 'diagram' || !isCellSelected}
+                  title="填充颜色"
+                />
+                <div
+                  style={{
+                    display:
+                      activeTab?.type == 'diagram' && isfill && isCellSelected ? 'block' : 'none',
+                  }}
+                  className="fontColor2"
+                >
                   <SketchPicker
                     disableAlpha
                     presetColors={[
@@ -440,6 +497,12 @@ export default React.memo(forwardRef(({ currentPrefix, close, iconClick, colorCh
                 icon="fa-toggle-right"
                 onClick={backGroup}
               />
+              <GroupIcon
+                className={`${currentPrefix}-icongroup`}
+                onClick={() => handleExportSqlDict()}
+                hoverTitle={FormatMessage.string({ id: 'toolbar.export' })}
+                icon={<Icon type="icon-daochu" />}
+              />
             </GroupIconGroup>
             <div className={`${currentPrefix}-head-search`}>
               <SearchSuggest
@@ -451,5 +514,7 @@ export default React.memo(forwardRef(({ currentPrefix, close, iconClick, colorCh
             </div>
           </div>
         </div>
-  )
+      );
-}))
+    },
+  ),
+);