Skip to content

Commit 4434c0a

Browse files
author
fanjin.fjy
committed
feat: Optimize dashboards
1 parent 2682bea commit 4434c0a

15 files changed

Lines changed: 331 additions & 228 deletions

File tree

‎chat2db-client/src/components/Console/ChatInput/index.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
align-items: center;
44
padding: 12px 20px;
55
box-sizing: border-box;
6-
border-bottom: 1px solid var(--color-border);
6+
border-bottom: 1px solid var(--color-border-secondary);
77
}
88

99
.chat_ai {

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

Lines changed: 45 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useTheme } from '@/hooks';
44
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
55
import { language } from 'monaco-editor/esm/vs/basic-languages/sql/sql';
66
const { keywords: SQLKeys } = language;
7-
import { editorDefaultOptions, ThemeType } from '@/constants';
7+
import { editorDefaultOptions, EditorThemeType, ThemeType } from '@/constants';
88
import styles from './index.less';
99

1010
export type IEditorIns = monaco.editor.IStandaloneCodeEditor;
@@ -21,7 +21,7 @@ interface IProps {
2121
// onChange?: (v: string, e?: IEditorContentChangeEvent) => void;
2222
didMount?: (editor: IEditorIns) => any;
2323
onSave?: (value: string) => void; // 快捷键保存的回调
24-
onExecute?: (value: string) => void; // 快捷键执行的回调
24+
onExecute?: (value: string) => void; // 快捷键执行的回调
2525
}
2626

2727
export interface IExportRefFunction {
@@ -31,32 +31,33 @@ export interface IExportRefFunction {
3131
}
3232

3333
function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
34-
const {
35-
id,
36-
className,
37-
language = 'sql',
38-
didMount,
39-
options,
40-
isActive,
41-
onSave,
42-
onExecute
43-
} = props;
34+
const { id, className, language = 'sql', didMount, options, isActive, onSave, onExecute } = props;
4435
const editorRef = useRef<IEditorIns>();
4536
const [appTheme] = useTheme();
4637

4738
// init
4839
useEffect(() => {
4940
const editorIns = monaco.editor.create(document.getElementById(`monaco-editor-${id}`)!, {
5041
...editorDefaultOptions,
51-
...options,
5242
value: '',
5343
language: language,
54-
theme: appTheme.backgroundColor === ThemeType.Light ? 'Default' : 'BlackTheme',
44+
theme: appTheme.backgroundColor === ThemeType.Light ? EditorThemeType.Default : EditorThemeType.BlackTheme,
45+
...options,
5546
});
5647
editorRef.current = editorIns;
57-
didMount && didMount(editorIns); // incase parent component wanna handle editor
48+
didMount && didMount(editorIns);
5849

59-
monaco.editor.defineTheme('BlackTheme', {
50+
monaco.editor.defineTheme(EditorThemeType.Default, {
51+
base: 'vs',
52+
inherit: true,
53+
rules: [{ background: '#15161a' }] as any,
54+
colors: {
55+
'editor.foreground': '#000000',
56+
'editor.background': '#fff', //背景色
57+
},
58+
});
59+
60+
monaco.editor.defineTheme(EditorThemeType.BlackTheme, {
6061
base: 'vs-dark',
6162
inherit: true,
6263
rules: [{ background: '#15161a' }] as any,
@@ -67,13 +68,23 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
6768
},
6869
});
6970

70-
monaco.editor.defineTheme('Default', {
71+
monaco.editor.defineTheme(EditorThemeType.DashboardLightTheme, {
7172
base: 'vs',
7273
inherit: true,
7374
rules: [{ background: '#15161a' }] as any,
7475
colors: {
7576
'editor.foreground': '#000000',
76-
'editor.background': '#fff', //背景色
77+
'editor.background': '#f8f9fa', //背景色
78+
},
79+
});
80+
81+
monaco.editor.defineTheme(EditorThemeType.DashboardBlackTheme, {
82+
base: 'vs-dark',
83+
inherit: true,
84+
rules: [{ background: '#15161a' }] as any,
85+
colors: {
86+
'editor.foreground': '#ffffff',
87+
'editor.background': '#131418', //背景色
7788
},
7889
});
7990

@@ -94,16 +105,21 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
94105
});
95106

96107
editorRef.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, (event: Event) => {
97-
const value = getCurrentSelectContent()
108+
const value = getCurrentSelectContent();
98109
onExecute?.(value);
99110
});
100111
}
101-
}, [editorRef.current, isActive])
112+
}, [editorRef.current, isActive]);
102113

103114
// 监听主题色变化切换编辑器主题色
104115
useEffect(() => {
105-
monaco.editor.setTheme(appTheme.backgroundColor === ThemeType.Dark ? 'BlackTheme' : 'Default');
106-
}, [appTheme.backgroundColor]);
116+
const isDark = appTheme.backgroundColor === ThemeType.Dark;
117+
if (options?.theme) {
118+
monaco.editor.setTheme(options.theme);
119+
} else {
120+
monaco.editor.setTheme(isDark ? 'BlackTheme' : 'Default');
121+
}
122+
}, [appTheme.backgroundColor, options?.theme]);
107123

108124
// useEffect(() => {
109125
// const _ref = editorRef.current?.onDidChangeModelContent((e) => {
@@ -116,12 +132,12 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
116132
useImperativeHandle(ref, () => ({
117133
getCurrentSelectContent,
118134
getAllContent,
119-
setValue
135+
setValue,
120136
}));
121137

122138
const setValue = (text: any, range?: IRangeType) => {
123-
appendMonacoValue(editorRef.current, text, range)
124-
}
139+
appendMonacoValue(editorRef.current, text, range);
140+
};
125141

126142
/**
127143
* 获取当前选中的内容
@@ -243,20 +259,20 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
243259

244260
// text 需要添加的文本
245261
// range 添加到的位置
246-
// 'end' 末尾
262+
// 'end' 末尾
247263
// 'front' 开头
248264
// 'cover' 覆盖掉原有的文字
249265
// 自定义位置数组 new monaco.Range []
250266
export type IRangeType = 'end' | 'front' | 'cover' | any;
251267

252268
export const appendMonacoValue = (editor: any, text: any, range: IRangeType = 'end') => {
253269
if (!editor) {
254-
return
270+
return;
255271
}
256272
const model = editor?.getModel && editor.getModel(editor);
257273
// 创建编辑操作，将当前文档内容替换为新内容
258274
let newRange: IRangeType = range;
259-
text = `${text}\n`
275+
text = `${text}\n`;
260276
switch (range) {
261277
case 'cover':
262278
newRange = model.getFullModelRange();
@@ -279,6 +295,6 @@ export const appendMonacoValue = (editor: any, text: any, range: IRangeType = 'e
279295
// decorations?: IModelDeltaDecoration[]: 一个数组类型的参数，用于指定插入的文本的装饰。可以用来设置文本的样式、颜色、背景色等。如果不需要设置装饰，可以忽略此参数。
280296
const decorations = [{}]; // 解决新增的文本默认背景色为灰色
281297
editor.executeEdits('setValue', [op], decorations);
282-
}
298+
};
283299

284300
export default forwardRef(MonacoEditor);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
right: 0;
3030

3131
display: flex;
32-
margin: 0 36px;
32+
margin: 0 12px;
3333
justify-content: space-between;
3434
align-items: center;
3535
}

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { formatParams } from '@/utils/common';
44
import connectToEventSource from '@/utils/eventSource';
55
import { Button, Spin, message, notification } from 'antd';
66
import ChatInput from './ChatInput';
7-
import Editor, { IExportRefFunction, IRangeType } from './MonacoEditor';
7+
import Editor, { IEditorOptions, IExportRefFunction, IRangeType } from './MonacoEditor';
88
import { format } from 'sql-formatter';
99
import sqlServer from '@/service/sql';
1010
import historyServer from '@/service/history';
@@ -47,7 +47,6 @@ interface IProps {
4747
hasAi2Lang?: boolean;
4848
hasSaveBtn?: boolean;
4949
value?: string;
50-
onChangeValue?: Function;
5150
executeParams: {
5251
databaseName?: string;
5352
dataSourceId?: number;
@@ -56,7 +55,9 @@ interface IProps {
5655
schemaName?: string;
5756
consoleName?: string;
5857
};
59-
onExecuteSQL: (value: any) => void;
58+
editorOptions: IEditorOptions;
59+
// onSQLContentChange: (v: string) => void;
60+
onExecuteSQL: (result: any, sql: string) => void;
6061
workspaceModel: IWorkspaceModelType;
6162
dispatch: any;
6263
}
@@ -70,7 +71,6 @@ function Console(props: IProps) {
7071
dispatch,
7172
hasSaveBtn = true,
7273
value,
73-
onChangeValue,
7474
} = props;
7575
const uid = useMemo(() => uuidv4(), []);
7676
const chatResult = useRef('');
@@ -131,16 +131,16 @@ function Console(props: IProps) {
131131
sql: sqlContent,
132132
...executeParams,
133133
};
134-
props.onExecuteSQL?.(undefined);
134+
// props.onExecuteSQL?.(undefined);
135135
sqlServer.executeSql(p).then((res) => {
136-
props.onExecuteSQL?.(res);
136+
props.onExecuteSQL?.(res, sqlContent!);
137137
// console.log(res)
138138
let p: any = {
139139
...executeParams,
140140
ddl: sqlContent,
141141
};
142142
historyServer.createHistory(p);
143-
})
143+
});
144144
};
145145

146146
const saveConsole = (value?: string) => {
@@ -199,6 +199,8 @@ function Console(props: IProps) {
199199
className={hasAiChat ? styles.console_editor_with_chat : styles.console_editor}
200200
addAction={addAction}
201201
onSave={saveConsole}
202+
options={props.editorOptions}
203+
// onChange={}
202204
/>
203205
</Spin>
204206

‎chat2db-client/src/constants/theme.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
export enum ThemeType {
22
Light = 'light',
33
Dark = 'dark',
4-
FollowOs = 'followOs'
4+
FollowOs = 'followOs',
55
}
66

77
export enum PrimaryColorType {
88
Polar_Green = 'polar-green',
99
Golden_Purple = 'golden-purple',
10-
Polar_Blue = 'polar-blue'
10+
Polar_Blue = 'polar-blue',
1111
}
1212

1313
export enum LangType {
1414
EN_US = 'en-us',
15-
ZH_CN = 'zh-cn'
16-
}
15+
ZH_CN = 'zh-cn',
16+
}
17+
18+
export enum EditorThemeType {
19+
Default = 'Default',
20+
BlackTheme = 'BlackTheme',
21+
DashboardLightTheme = 'DashboardLightTheme',
22+
DashboardBlackTheme = 'DashboardBlackTheme',
23+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function useTheme<T = ITheme>(): [
2929
React.Dispatch<React.SetStateAction<ITheme>>,
3030
] {
3131
const [appTheme, setAppTheme] = useState<ITheme>(initialTheme());
32-
32+
3333
useEffect(() => {
3434
const uuid = addColorSchemeListener(setAppTheme);
3535
return () => {

‎chat2db-client/src/i18n/en-us/dashboard.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@ export default {
55
'dashboard.modal.addTitle': 'Add Dashboard',
66
'dashboard.modal.name.placeholder': "Please enter dashboard's name.",
77
'dashboard.delete': 'Delete',
8-
8+
'dashboard.editor.cascader.placeholder': 'Please select a connection pool',
99
};

‎chat2db-client/src/i18n/zh-cn/dashboard.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ export default {
55
'dashboard.modal.addTitle': '新增仪表盘',
66
'dashboard.modal.name.placeholder': "请输入仪表盘名",
77
'dashboard.delete': '删除',
8+
'dashboard.editor.cascader.placeholder': '请选择连接池',
89
};

‎chat2db-client/src/pages/main/dashboard/chart-item/index.less‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -120,17 +120,19 @@
120120
margin-bottom: 40px;
121121
}
122122

123-
123+
.editBlock {
124+
border-radius: var(--border-radius-l-g);
125+
background-color: var(--color-bg-elevated);
126+
}
124127

125128
.editorBlock {
126129
display: flex;
127-
// border: 1px solid #eee;
130+
border-bottom: 1px solid var(--color-border-secondary);
128131
flex-wrap: wrap;
129132
}
130133

131134
.editor {
132-
flex: 1;
133-
border: 1px solid #eee;
135+
flex: 2;
134136
min-width: 320px;
135137
min-height: 320px;
136138
max-height: 640px;
@@ -145,8 +147,25 @@
145147
right: 24px;
146148
}
147149

148-
.chartParamsForm{
149-
min-width: 280px;
150-
padding: 20px;
151-
border: 1px solid #eee;
150+
.chartParamsForm {
151+
color: var(--color-text);
152+
flex: 1;
153+
min-width: 120px;
154+
border-left: 1px solid var(--color-border-secondary);
155+
display: flex;
156+
flex-direction: column;
157+
justify-content: start;
158+
align-items: start;
159+
padding: 24px;
160+
}
161+
162+
.chartParamsFormTitle {
163+
font-size: 14px;
164+
font-weight: bold;
165+
line-height: 14px;
166+
margin-bottom: 24px;
167+
}
168+
169+
.editorOptionBlock {
170+
padding: 12px;
152171
}

0 commit comments

Comments
 (0)