Skip to content

Commit b37c4f0

Browse files
shanhexishanhexi
committed
shortcut key
1 parent a440573 commit b37c4f0

13 files changed

Lines changed: 243 additions & 135 deletions

File tree

‎chat2db-client/src/blocks/SQLExecute/index.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,8 @@ const SQLExecute = memo<IProps>((props) => {
2828
const consoleRef = useRef<IConsoleRef>(null);
2929
const [boundInfo, setBoundInfo] = useState(_boundInfo);
3030

31-
3231
useEffect(() => {
33-
if(loadSQL){
32+
if (loadSQL) {
3433
loadSQL().then((sql) => {
3534
consoleRef.current?.editorRef?.setValue(sql, 'cover');
3635
});
@@ -41,19 +40,20 @@ const SQLExecute = memo<IProps>((props) => {
4140
<div className={classnames(styles.sqlExecute)}>
4241
<DraggableContainer layout="column" className={styles.boxRightCenter}>
4342
<div ref={draggableRef} className={styles.boxRightConsole}>
44-
<ConsoleEditor
45-
ref={consoleRef}
46-
source="workspace"
47-
defaultValue={initDDL}
48-
boundInfo={boundInfo}
49-
setBoundInfo={setBoundInfo}
50-
hasAiChat={true}
51-
hasAi2Lang={true}
52-
isActive={true}
53-
onExecuteSQL={(sql) => {
54-
searchResultRef.current?.handleExecuteSQL(sql);
55-
}}
56-
/>
43+
{
44+
<ConsoleEditor
45+
ref={consoleRef}
46+
source="workspace"
47+
defaultValue={initDDL}
48+
boundInfo={boundInfo}
49+
setBoundInfo={setBoundInfo}
50+
hasAiChat={true}
51+
hasAi2Lang={true}
52+
onExecuteSQL={(sql) => {
53+
searchResultRef.current?.handleExecuteSQL(sql);
54+
}}
55+
/>
56+
}
5757
</div>
5858
<div className={styles.boxRightResult}>
5959
<SearchResult ref={searchResultRef} executeSqlParams={boundInfo} />

‎chat2db-client/src/components/ConsoleEditor/components/SelectBoundInfo/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const emptyOption = {
3636

3737
const SelectBoundInfo = memo((props: IProps) => {
3838
const { boundInfo, setBoundInfo } = props;
39-
const { selectedTables, setSelectedTables, setTableNameList } = useContext(IntelligentEditorContext);
39+
const { setSelectedTables, setTableNameList } = useContext(IntelligentEditorContext);
4040
const connectionList = useConnectionStore((state) => state.connectionList);
4141
const [databaseNameList, setDatabaseNameList] = useState<IOption<string>[]>([emptyOption]);
4242
const [schemaList, setSchemaList] = useState<IOption<string>[]>([emptyOption]);
@@ -82,13 +82,13 @@ const SelectBoundInfo = memo((props: IProps) => {
8282
if (supportSchema) {
8383
getSchemaList();
8484
}
85-
if (!supportSchema) {
85+
if (!supportSchema && boundInfo.databaseName) {
8686
getAllTableNameList(boundInfo.dataSourceId, boundInfo.databaseName);
8787
}
8888
}, [boundInfo.databaseName]);
8989

9090
useEffect(() => {
91-
if (supportSchema) {
91+
if (supportSchema && boundInfo.schemaName) {
9292
getAllTableNameList(boundInfo.dataSourceId, boundInfo.databaseName, boundInfo.schemaName);
9393
}
9494
}, [boundInfo.schemaName]);

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

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ import { useSaveEditorData } from './hooks/useSaveEditorData';
3131
// ----- store -----
3232
import { useSettingStore, fetchRemainingUse, setAiConfig } from '@/store/setting';
3333

34+
// ----- function -----
35+
import { handelCreateConsole } from '@/pages/main/workspace/functions/shortcutKeyCreateConsole';
36+
3437
enum IPromptType {
3538
NL_2_SQL = 'NL_2_SQL',
3639
SQL_EXPLAIN = 'SQL_EXPLAIN',
@@ -57,8 +60,7 @@ export interface IBoundInfo {
5760
interface IProps {
5861
/** 调用来源 */
5962
source: 'workspace';
60-
// isActive
61-
isActive: boolean;
63+
consoleIsActive: boolean;
6264
/** 添加或修改的内容 */
6365
appendValue?: IAppendValue;
6466
defaultValue?: string;
@@ -80,7 +82,6 @@ export interface IConsoleRef {
8082
}
8183

8284
interface IIntelligentEditorContext {
83-
isActive: boolean;
8485
tableNameList: string[];
8586
setTableNameList: (tables: string[]) => void;
8687
selectedTables: string[];
@@ -96,9 +97,9 @@ function ConsoleEditor(props: IProps, ref: ForwardedRef<IConsoleRef>) {
9697
setBoundInfo,
9798
appendValue,
9899
hasSaveBtn = true,
99-
isActive,
100100
source,
101101
defaultValue,
102+
consoleIsActive,
102103
} = props;
103104
const uid = useMemo(() => uuidv4(), []);
104105
const chatResult = useRef('');
@@ -125,7 +126,7 @@ function ConsoleEditor(props: IProps, ref: ForwardedRef<IConsoleRef>) {
125126
const { saveConsole } = useSaveEditorData({
126127
editorRef,
127128
boundInfo: props.boundInfo,
128-
isActive,
129+
// isActive,
129130
source,
130131
defaultValue,
131132
});
@@ -367,10 +368,29 @@ function ConsoleEditor(props: IProps, ref: ForwardedRef<IConsoleRef>) {
367368
const [selectedTables, setSelectedTables] = useState<string[]>([]);
368369
const [tableNameList, setTableNameList] = useState<string[]>([]);
369370

371+
// 注册快捷键
372+
const registerShortcutKey = (editor, monaco) => {
373+
// 保存
374+
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
375+
const value = editor?.getValue();
376+
saveConsole(value || '');
377+
});
378+
379+
// 执行
380+
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyR, () => {
381+
const value = editorRef.current?.getCurrentSelectContent();
382+
executeSQL(value);
383+
});
384+
385+
// 执行
386+
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyL, () => {
387+
handelCreateConsole();
388+
});
389+
};
390+
370391
return (
371392
<IntelligentEditorContext.Provider
372393
value={{
373-
isActive,
374394
tableNameList,
375395
setTableNameList,
376396
selectedTables,
@@ -405,17 +425,18 @@ function ConsoleEditor(props: IProps, ref: ForwardedRef<IConsoleRef>) {
405425
}}
406426
/>
407427
)}
428+
408429
<MonacoEditor
409430
id={uid}
410431
defaultValue={defaultValue}
411-
// isActive={isActive}
412432
ref={editorRef as any}
413433
className={hasAiChat ? styles.consoleEditorWithChat : styles.consoleEditor}
414434
addAction={addAction}
415-
onSave={saveConsole}
416-
onExecute={executeSQL}
417435
options={props.editorOptions}
436+
shortcutKey={registerShortcutKey}
437+
conceal={!consoleIsActive}
418438
/>
439+
419440
<Drawer
420441
open={isAiDrawerOpen}
421442
getContainer={false}

‎chat2db-client/src/components/MonacoEditor/index.less‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
.editorContainer {
22
height: 100%;
3-
}
3+
}
4+
5+
.concealEditor {
6+
display: none;
7+
}

‎chat2db-client/src/components/MonacoEditor/index.tsx‎

Lines changed: 11 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,16 @@ const databaseTypeList = Object.keys(DatabaseTypeCode).map((d) => ({
2525

2626
interface IProps {
2727
id: string;
28-
isActive?: boolean;
28+
conceal?: boolean;
2929
language?: string;
3030
className?: string;
3131
options?: IEditorOptions;
3232
needDestroy?: boolean;
3333
addAction?: Array<{ id: string; label: string; action: (selectedText: string, ext?: string) => void }>;
3434
defaultValue?: string;
3535
appendValue?: IAppendValue;
36-
// onChange?: (v: string, e?: IEditorContentChangeEvent) => void;
3736
didMount?: (editor: IEditorIns) => any;
38-
onSave?: (value: string) => void; // 快捷键保存的回调
39-
onExecute?: (value: string) => void; // 快捷键执行的回调
37+
shortcutKey?: (editor, monaco) => void;
4038
}
4139

4240
export interface IExportRefFunction {
@@ -47,18 +45,7 @@ export interface IExportRefFunction {
4745
}
4846

4947
function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
50-
const {
51-
id,
52-
className,
53-
language = 'sql',
54-
didMount,
55-
options,
56-
isActive,
57-
onSave,
58-
onExecute,
59-
defaultValue,
60-
appendValue,
61-
} = props;
48+
const { id, className, language = 'sql', didMount, options, conceal, defaultValue, appendValue, shortcutKey } = props;
6249
const editorRef = useRef<IEditorIns>();
6350
const quickInputCommand = useRef<any>();
6451
const [appTheme] = useTheme();
@@ -112,29 +99,13 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
11299
}, []);
113100

114101
useEffect(() => {
115-
if (isActive && editorRef.current) {
116-
// 自定义快捷键
117-
editorRef.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
118-
const value = editorRef.current?.getValue();
119-
onSave?.(value || '');
120-
});
121-
122-
editorRef.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyR, () => {
123-
const value = getCurrentSelectContent();
124-
onExecute?.(value);
125-
});
126-
127-
editorRef.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyR, () => {
128-
const value = getCurrentSelectContent();
129-
onExecute?.(value);
130-
});
131-
132-
// 注册快捷键command+shift+L新建console
133-
editorRef.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyL, () => {
134-
// onShortcutKeyCallback?.(new KeyboardEvent('keydown', { ctrlKey: true, shiftKey: true, keyCode: 76 }));
135-
});
102+
if (editorRef.current) {
103+
// eg:
104+
// editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyL, () => {
105+
// });
106+
shortcutKey?.(editorRef.current, monaco);
136107
}
137-
}, [editorRef.current, isActive]);
108+
}, [editorRef.current]);
138109

139110
useEffect(() => {
140111
// 监听浏览器窗口大小变化，重新渲染编辑器
@@ -235,6 +206,8 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
235206
return <div ref={ref as any} id={`monaco-editor-${id}`} className={cs(className, styles.editorContainer)} />;
236207
}
237208

209+
// , { [styles.concealEditor]: conceal }
210+
238211
// text 需要添加的文本
239212
// range 添加到的位置
240213
// 'end' 末尾

‎chat2db-client/src/hooks/useCreateConsole.ts‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎chat2db-client/src/pages/main/workspace/components/NewWorkspaceRight/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import React, { memo, useEffect, useState, useMemo, Fragment, useRef } from 'react';
2-
import i18n from '@/i18n';
1+
import React, { memo } from 'react';
32
import styles from './index.less';
43
import classnames from 'classnames';
54

65
// ----- components -----
76
import WorkspaceTabs from '../WorkspaceTabs';
87

9-
108
const WorkspaceRight = memo(() => {
119
return (
1210
<div className={classnames(styles.workspaceRight)}>

‎chat2db-client/src/pages/main/workspace/components/SQLExecute/index.less‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@import '../../../../../styles/var.less';
2+
3+
.sqlExecute {
4+
height: 100%;
5+
}
6+
7+
.boxRightCenter {
8+
height: 100%;
9+
}
10+
11+
.boxRightConsole {
12+
height: 40vh;
13+
overflow: hidden;
14+
}
15+
16+
.boxRightResult {
17+
border-top: 1px solid var(--color-border);
18+
height: 0px;
19+
flex: 1;
20+
position: relative;
21+
}

0 commit comments

Comments
 (0)