Merge pull request #944 from chat2db/dev

Dev
CodePhiliaX · Dec 12, 2023 · b9062da · b9062da
2 parents a9ac15a + 204f807
commit b9062da
Show file tree

Hide file tree

Showing 20 changed files with 215 additions and 78 deletions.
diff --git a/chat2db-client/src/blocks/Setting/BaseSetting/index.less b/chat2db-client/src/blocks/Setting/BaseSetting/index.less
@@ -48,8 +48,13 @@
   margin-bottom: 20px;
 }
 
+.sqlEditorFontSize {
+  margin-bottom: 20px;
+}
+
 .primaryColorList {
   display: flex;
+  margin-bottom: 20px;
 
   .themeColorItem {
     margin-right: 20px;

diff --git a/chat2db-client/src/blocks/Setting/BaseSetting/index.tsx b/chat2db-client/src/blocks/Setting/BaseSetting/index.tsx
@@ -1,6 +1,6 @@
+import React, { useState } from 'react';
 import { LangType, ThemeType } from '@/constants';
 import i18n, { currentLang } from '@/i18n';
-import React, { useState } from 'react';
 import classnames from 'classnames';
 import themeDarkImg from '@/assets/img/theme-dark.png';
 import themeLightImg from '@/assets/img/theme-light.png';
@@ -87,7 +87,6 @@ const colorList = [
 
 // baseBody 基础设置
 export default function BaseSetting() {
-  const [lang, setLang] = useState(currentLang);
   const [appTheme, setAppTheme] = useTheme();
   const [currentTheme, setCurrentTheme] = useState<ThemeType>(appTheme.backgroundColor);
   const [currentPrimaryColor, setCurrentPrimaryColor] = useState(localStorage.getItem('primary-color'));
@@ -111,7 +110,6 @@ export default function BaseSetting() {
     location.reload();
   }
 
-  // TODO: 这里写 ThemeType 为什么报错呢
   function handleChangeTheme(backgroundColor: any) {
     setAppTheme({
       ...appTheme,
@@ -120,6 +118,11 @@ export default function BaseSetting() {
     setCurrentTheme(backgroundColor);
   }
 
+
+  const changeSqlEditorFontSize = (e: any) => {
+
+  }
+
   return (
     <>
       <div className={styles.title}>{i18n('setting.title.backgroundColor')}</div>
@@ -139,7 +142,7 @@ export default function BaseSetting() {
       </ul>
       <div className={styles.title}>{i18n('setting.title.language')}</div>
       <div className={styles.langBox}>
-        <Radio.Group onChange={changeLang} value={lang}>
+        <Radio.Group onChange={changeLang} value={currentLang}>
           <Radio value={LangType.ZH_CN}>简体中文</Radio>
           <Radio value={LangType.EN_US}>English</Radio>
         </Radio.Group>
@@ -172,6 +175,15 @@ export default function BaseSetting() {
           </div>
         </ColorPicker> */}
       </ul>
+      {/* <div className={styles.title}>{i18n('setting.title.sqlEditorFontSize')}</div>
+      <div className={styles.sqlEditorFontSize}>
+        <Radio.Group onChange={changeSqlEditorFontSize}>
+          <Radio value={12}>12</Radio>
+          <Radio value={14}>14</Radio>
+          <Radio value={16}>16</Radio>
+        </Radio.Group>
+      </div> */}
+
     </>
   );
 }
diff --git a/chat2db-client/src/components/ConnectionEdit/components/Driver/index.tsx b/chat2db-client/src/components/ConnectionEdit/components/Driver/index.tsx
@@ -146,15 +146,16 @@ export default memo<IProps>((props) => {
         ) : (
           <div />
         )}
-
-        <div
-          className={styles.uploadCustomDrive}
-          onClick={() => {
-            setUploadDriverModal(true);
-          }}
-        >
-          {i18n('connection.tips.customUpload')}
-        </div>
+        {backfillData.isAdmin !== false && (
+          <div
+            className={styles.uploadCustomDrive}
+            onClick={() => {
+              setUploadDriverModal(true);
+            }}
+          >
+            {i18n('connection.tips.customUpload')}
+          </div>
+        )}
       </div>
       <Modal
         destroyOnClose={true}

diff --git a/chat2db-client/src/components/ConnectionEdit/index.tsx b/chat2db-client/src/components/ConnectionEdit/index.tsx
@@ -113,6 +113,7 @@ const ConnectionEdit = forwardRef((props: IProps, ref: ForwardedRef<ICreateConne
             backfillData={backfillData!}
             form={sshForm}
             tab="ssh"
+            disabled={backfillData.isAdmin === false}
           />
           <div className={styles.testSSHConnect}>
             {loadings.sshTestLoading && <LoadingGracile />}
@@ -268,6 +269,7 @@ const ConnectionEdit = forwardRef((props: IProps, ref: ForwardedRef<ICreateConne
           backfillData={backfillData!}
           form={baseInfoForm}
           tab="baseInfo"
+          disabled={backfillData.isAdmin === false}
         />
       </div>
       <Collapse defaultActiveKey={['driver']} items={getItems()} />
@@ -308,6 +310,7 @@ interface IRenderFormProps {
   form: any;
   backfillData: IConnectionDetails;
   dataSourceFormConfigProps: IConnectionConfig;
+  disabled: boolean
 }
 
 function RenderForm(props: IRenderFormProps) {
@@ -580,6 +583,7 @@ function RenderForm(props: IRenderFormProps) {
       autoComplete="off"
       labelAlign="left"
       onFieldsChange={onFieldsChange}
+      disabled={props.disabled}
     >
       {dataSourceFormConfig[tab]!.items.map((t) => renderFormItem(t))}
     </Form>
@@ -607,6 +611,8 @@ function RenderExtendTable(props: IRenderExtendTableProps) {
       return t.type === databaseType;
     });
   }, [backfillData.type]);
+  // 禁止修改
+  const disabled = backfillData.isAdmin === false;
 
   useEffect(() => {
     const extendInfoList = backfillData?.extendInfo?.length
@@ -673,6 +679,7 @@ function RenderExtendTable(props: IRenderExtendTableProps) {
         if (index === data.length - 1 || isCustomLabel) {
           return (
             <Input
+              disabled={disabled}
               onBlur={blur}
               placeholder={index === data.length - 1 ? i18n('common.text.custom') : ''}
               onChange={change}
@@ -699,12 +706,10 @@ function RenderExtendTable(props: IRenderExtendTableProps) {
           setData(newData);
         }
 
-        function blur() {}
-
         if (index === data.length - 1) {
           return <Input onBlur={blur} disabled placeholder="<value>" onChange={change} value={value} />;
         } else {
-          return <Input onChange={change} value={value} />;
+          return <Input  disabled={disabled} onChange={change} value={value} />;
         }
       },
     },

diff --git a/chat2db-client/src/components/SearchResult/index.tsx b/chat2db-client/src/components/SearchResult/index.tsx
@@ -31,6 +31,7 @@ interface IProps {
   executeSqlParams: any;
   concealTabHeader?: boolean;
   viewTable?: boolean;
+  isActive?: boolean;
 }
 
 const defaultResultConfig: IResultConfig = {
@@ -52,7 +53,7 @@ interface IContext {
 export const Context = createContext<IContext>({} as any);
 
 export default forwardRef((props: IProps, ref: ForwardedRef<ISearchResultRef>) => {
-  const { className, sql, executeSqlParams, concealTabHeader, viewTable } = props;
+  const { className, sql, executeSqlParams, concealTabHeader, viewTable, isActive } = props;
   const [resultDataList, setResultDataList] = useState<IManageResultData[]>();
   const [tableLoading, setTableLoading] = useState(false);
   const controllerRef = useRef<AbortController>();
@@ -111,6 +112,7 @@ export default forwardRef((props: IProps, ref: ForwardedRef<ISearchResultRef>) =
     function renderSuccessResult() {
       const needTable = queryResultData?.headerList?.length > 1;
       return (
+        isActive ?
         <div className={styles.successResult}>
           <div className={styles.successResultContent}>
             {needTable ? (
@@ -134,6 +136,8 @@ export default forwardRef((props: IProps, ref: ForwardedRef<ISearchResultRef>) =
             )}
           </div>
         </div>
+        :
+        false
       );
     }
     return (
@@ -168,7 +172,7 @@ export default forwardRef((props: IProps, ref: ForwardedRef<ISearchResultRef>) =
         children: renderResult(queryResultData),
       };
     });
-  }, [resultDataList]);
+  }, [resultDataList, isActive]);
 
   const onEdit = useCallback(
     (type: 'add' | 'remove', data: ITabItem[]) => {
@@ -212,6 +216,7 @@ export default forwardRef((props: IProps, ref: ForwardedRef<ISearchResultRef>) =
                 onEdit={onEdit as any}
                 items={tabsList}
                 concealTabHeader={concealTabHeader}
+                destroyInactiveTabPane={true}
               />
             ) : (
               <div className={styles.noData}>

diff --git a/chat2db-client/src/components/ViewDDL/index.less b/chat2db-client/src/components/ViewDDL/index.less
@@ -0,0 +1,4 @@
+@import '../../styles/var.less';
+
+.box {
+}
diff --git a/chat2db-client/src/components/ViewDDL/index.tsx b/chat2db-client/src/components/ViewDDL/index.tsx
@@ -0,0 +1,35 @@
+import React, { memo, useEffect } from 'react';
+import styles from './index.less';
+import classnames from 'classnames';
+import MonacoEditor, { IExportRefFunction } from '@/components/MonacoEditor';
+import { v4 as uuid } from 'uuid';
+
+interface IProps {
+  className?: string;
+  sql: string;
+}
+
+export default memo<IProps>((props) => {
+  const { className, sql } = props;
+  const [monacoEditorId] = React.useState(uuid());
+  const monacoEditorRef = React.useRef<IExportRefFunction>(null);
+
+  useEffect(() => {
+    monacoEditorRef.current?.setValue(sql, 'reset');
+  }, [sql]);
+
+  return (
+    <div className={classnames(styles.box, className)}>
+      <MonacoEditor
+        id={monacoEditorId}
+        ref={monacoEditorRef}
+        options={{
+          lineNumbers: 'off',
+          readOnly: true,
+          glyphMargin: false,
+          folding: false,
+        }}
+      />
+    </div>
+  );
+});
diff --git a/chat2db-client/src/hooks/usePollRequestService.ts b/chat2db-client/src/hooks/usePollRequestService.ts
@@ -18,7 +18,7 @@ export enum ServiceStatus {
 /**
  * 轮询请求后端服务
  */
-const usePollRequestService = ({ maxAttempts = 200, interval = 100, loopService }: IProps) => {
+const usePollRequestService = ({ maxAttempts = 200, interval = 200, loopService }: IProps) => {
   const [serviceStatus, setServiceStatus] = useState<ServiceStatus>(ServiceStatus.PENDING);
   const [attempts, setAttempts] = useState(0);
   const [restart, setRestart] = useState(false);

diff --git a/chat2db-client/src/i18n/en-us/setting.ts b/chat2db-client/src/i18n/en-us/setting.ts
@@ -6,6 +6,7 @@ export default {
   'setting.nav.aboutUs': 'About Us',
   'setting.title.backgroundColor': 'Background Color',
   'setting.title.themeColor': 'Theme Color',
+  'setting.title.sqlEditorFontSize': 'SQL Editor Font Size',
   'setting.label.blue': 'Blue',
   'setting.label.green': 'Green',
   'setting.label.violet': 'Violet',

diff --git a/chat2db-client/src/i18n/zh-cn/setting.ts b/chat2db-client/src/i18n/zh-cn/setting.ts
@@ -6,6 +6,7 @@ export default {
   'setting.nav.aboutUs': '关于我们',
   'setting.title.backgroundColor': '背景色',
   'setting.title.themeColor': '主题色',
+  'setting.title.sqlEditorFontSize': 'SQL编辑器字体大小',
   'setting.label.blue': '蓝蓬釉',
   'setting.label.green': '极光绿',
   'setting.label.violet': '酱紫',

diff --git a/chat2db-client/src/pages/main/workspace/components/SQLExecute/index.tsx b/chat2db-client/src/pages/main/workspace/components/SQLExecute/index.tsx
@@ -49,7 +49,11 @@ const SQLExecute = memo<IProps>((props) => {
           />
         </div>
         <div className={styles.boxRightResult}>
-          <SearchResult ref={searchResultRef} executeSqlParams={boundInfo} />
+          <SearchResult
+            isActive={activeConsoleId === boundInfo.consoleId}
+            ref={searchResultRef}
+            executeSqlParams={boundInfo}
+          />
         </div>
       </DraggableContainer>
     </div>

diff --git a/chat2db-client/src/pages/main/workspace/components/ViewAllTable/index.less b/chat2db-client/src/pages/main/workspace/components/ViewAllTable/index.less
@@ -6,6 +6,35 @@
   flex-direction: column;
 }
 
+.contentCenter{
+  flex: 1;
+  display: flex;
+  width: 100%;
+  .tableBox{
+    flex: 1;
+  }
+  .viewDDLBox{
+    border-left: 1px solid var(--color-border);
+    flex-shrink: 0;
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+  }
+  .viewDDLHeader{
+    height: 25px;
+    border-bottom: 1px solid var(--color-border);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    // background-color: var(--color-bg-subtle);
+  }
+  .viewDDL{
+    flex: 1;
+  }
+}
+
 .headerBox {
   height: 30px;
   display: flex;
@@ -29,10 +58,6 @@
   border-top: 1px solid var(--color-border);
 }
 
-.tableBox {
-  flex: 1;
-}
-
 .tableCell {
   padding: 2px 6px;
   height: 24px;