Skip to content

Commit a6fbbab

Browse files
shanhexishanhexi
committed
style
1 parent da0d695 commit a6fbbab

11 files changed

Lines changed: 182 additions & 190 deletions

File tree

‎chat2db-client/.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"VARCHAR",
8383
"VIEWCOLUMN",
8484
"wireframe",
85+
"Wppk",
8586
"yapi"
8687
],
8788
"typescript.tsdk": "/Users/wangjiaqi/Desktop/Chat2DB/chat2db-client/node_modules/typescript/lib"

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

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
132132
onSave?.(value || '');
133133
});
134134

135-
editorRef.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, (event: Event) => {
135+
editorRef.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
136136
const value = getCurrentSelectContent();
137137
onExecute?.(value);
138138
});
@@ -169,11 +169,11 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
169169
* @returns
170170
*/
171171
const getCurrentSelectContent = () => {
172-
let selection = editorRef.current?.getSelection();
172+
const selection = editorRef.current?.getSelection();
173173
if (!selection || selection.isEmpty()) {
174174
return '';
175175
} else {
176-
var selectedText = editorRef.current?.getModel()?.getValueInRange(selection);
176+
const selectedText = editorRef.current?.getModel()?.getValueInRange(selection);
177177
return selectedText || '';
178178
}
179179
};
@@ -187,24 +187,24 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
187187

188188
const createAction = (editor: IEditorIns) => {
189189
// 用于控制切换该菜单键的显示
190-
const shouldShowSqlRunnerAction = editor.createContextKey('shouldShowSqlRunnerAction', true);
190+
// const shouldShowSqlRunnerAction = editor.createContextKey('shouldShowSqlRunnerAction', true);
191191

192192
if (!props.addAction || !props.addAction.length) {
193193
return;
194194
}
195195

196196
props.addAction.forEach((action) => {
197-
const { id, label, action: runFn } = action;
197+
const { id: _id, label, action: runFn } = action;
198198
editor.addAction({
199-
id,
199+
id: _id,
200200
label,
201201
// 控制该菜单键显示
202202
precondition: 'shouldShowSqlRunnerAction',
203203
// 该菜单键位置
204204
contextMenuGroupId: 'navigation',
205205
contextMenuOrder: 1.5,
206206
// 点击该菜单键后运行
207-
run: (event: monaco.editor.ICodeEditor) => {
207+
run: () => {
208208
const selectedText = editor.getModel()?.getValueInRange(editor.getSelection()!) || '';
209209
runFn(selectedText);
210210
},
@@ -234,6 +234,10 @@ export const appendMonacoValue = (editor: any, text: any, range: IRangeType = 'e
234234
editor.setValue(text);
235235
return;
236236
}
237+
let newText = text;
238+
const lastLine = editor.getModel().getLineCount();
239+
const lastLineLength = editor.getModel().getLineMaxColumn(lastLine);
240+
237241
switch (range) {
238242
// 覆盖所有内容
239243
case 'cover':
@@ -246,7 +250,7 @@ export const appendMonacoValue = (editor: any, text: any, range: IRangeType = 'e
246250
editor.revealLine(1);
247251
break;
248252
// 格式化选中区域的sql
249-
case 'select':
253+
case 'select': {
250254
const selection = editor.getSelection();
251255
if (selection) {
252256
newRange = new monaco.Range(
@@ -257,24 +261,29 @@ export const appendMonacoValue = (editor: any, text: any, range: IRangeType = 'e
257261
);
258262
}
259263
break;
264+
}
260265
// 在末尾添加内容
261266
case 'end':
262-
const lastLine = editor.getModel().getLineCount();
263-
const lastLineLength = editor.getModel().getLineMaxColumn(lastLine);
264267
newRange = new monaco.Range(lastLine, lastLineLength, lastLine, lastLineLength);
265-
text = `${text}`;
266-
editor.revealLine(lastLine);
268+
newText = `${text}`;
267269
break;
268270
default:
269271
break;
270272
}
273+
271274
const op = {
272275
range: newRange,
273-
text,
276+
text: newText,
274277
};
278+
275279
// decorations?: IModelDeltaDecoration[]: 一个数组类型的参数，用于指定插入的文本的装饰。可以用来设置文本的样式、颜色、背景色等。如果不需要设置装饰，可以忽略此参数。
276280
const decorations = [{}]; // 解决新增的文本默认背景色为灰色
277281
editor.executeEdits('setValue', [op], decorations);
282+
if (range === 'end') {
283+
setTimeout(() => {
284+
editor.revealLine(lastLine + 1);
285+
}, 0);
286+
}
278287
};
279288

280289
export default forwardRef(MonacoEditor);

‎chat2db-client/src/components/Loading/LoadingContent/index.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.box {
1+
.loadingContent {
22
height: 100%;
33
position: relative;
44
}
@@ -18,7 +18,7 @@
1818
}
1919
}
2020

21-
.coverLoading{
21+
.coverLoading {
2222
position: absolute;
2323
inset: 0;
2424
background-color: rgba(0, 0, 0, 0.01);

‎chat2db-client/src/components/Loading/LoadingContent/index.tsx‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
import React, { memo, PropsWithChildren, Fragment } from 'react';
1+
import React, { useRef, useImperativeHandle, ForwardedRef } from 'react';
22
import styles from './index.less';
33
import classnames from 'classnames';
44
import StateIndicator from '@/components/StateIndicator';
55

6-
interface IProps<T> {
6+
// IProps继承div的原生属性
7+
interface IProps<T> extends React.HTMLAttributes<HTMLDivElement> {
78
className?: string;
89
data?: T | null | undefined | true;
910
empty?: React.ReactNode;
1011
handleEmpty?: boolean;
1112
isLoading?: boolean;
12-
coverLoading?: boolean;
13+
coverLoading?: boolean;
1314
}
1415

15-
export default function LoadingContent<T>(props: PropsWithChildren<IProps<T>>) {
16+
export default function LoadingContent<T>(props: IProps<T>) {
1617
const { children, className, data = true, handleEmpty = false, empty, isLoading, coverLoading } = props;
1718
const isEmpty = !isLoading && handleEmpty && !(data as any)?.length;
1819

@@ -25,20 +26,17 @@ export default function LoadingContent<T>(props: PropsWithChildren<IProps<T>>) {
2526
return empty || <StateIndicator state="empty" />;
2627
}
2728

28-
return <>
29-
{children}
30-
{
31-
(isLoading || !data) && coverLoading &&
32-
<div className={styles.coverLoading}>
33-
<StateIndicator state="loading" />
34-
</div>
35-
}
36-
</>
29+
return (
30+
<>
31+
{children}
32+
{(isLoading || !data) && coverLoading && (
33+
<div className={styles.coverLoading}>
34+
<StateIndicator state="loading" />
35+
</div>
36+
)}
37+
</>
38+
);
3739
};
3840

39-
return (
40-
<div className={classnames(styles.box, className)}>
41-
{renderContent()}
42-
</div>
43-
);
41+
return <div className={classnames(styles.loadingContent, className)}>{renderContent()}</div>;
4442
}

‎chat2db-client/src/pages/demo/index.tsx‎

Lines changed: 14 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,20 @@
1-
import React, { useState } from 'react';
2-
import { Button, Form, Input, Select } from 'antd';
3-
4-
const { Option } = Select;
5-
6-
type Currency = 'rmb' | 'dollar';
7-
8-
interface PriceValue {
9-
number?: number;
10-
currency?: Currency;
11-
}
12-
13-
interface PriceInputProps {
14-
value?: PriceValue;
15-
onChange?: (value: PriceValue) => void;
16-
}
17-
18-
const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
19-
const [number, setNumber] = useState(0);
20-
const [currency, setCurrency] = useState<Currency>('rmb');
21-
22-
const triggerChange = (changedValue: { number?: number; currency?: Currency }) => {
23-
onChange?.({ number, currency, ...value, ...changedValue });
24-
};
25-
26-
const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
27-
const newNumber = parseInt(e.target.value || '0', 10);
28-
if (Number.isNaN(number)) {
29-
return;
30-
}
31-
if (!('number' in value)) {
32-
setNumber(newNumber);
33-
}
34-
triggerChange({ number: newNumber });
35-
};
36-
37-
const onCurrencyChange = (newCurrency: Currency) => {
38-
if (!('currency' in value)) {
39-
setCurrency(newCurrency);
40-
}
41-
triggerChange({ currency: newCurrency });
42-
};
43-
44-
return (
45-
<span>
46-
<Input type="text" value={value.number || number} onChange={onNumberChange} style={{ width: 100 }} />
47-
<Select value={value.currency || currency} style={{ width: 80, margin: '0 8px' }} onChange={onCurrencyChange}>
48-
<Option value="rmb">RMB</Option>
49-
<Option value="dollar">Dollar</Option>
50-
</Select>
51-
</span>
52-
);
53-
};
1+
import React, { useEffect, useState } from 'react';
542

553
const App: React.FC = () => {
56-
const onFinish = (values: any) => {
57-
console.log('Received values from form: ', values);
58-
};
59-
60-
const checkPrice = (_: any, value: { number: number }) => {
61-
if (value.number > 0) {
62-
return Promise.resolve();
63-
}
64-
return Promise.reject(new Error('Price must be greater than zero!'));
4+
const [name] = useState<string>('');
5+
const [user, setUser] = useState<{ name: string; age: number }>({ name: '', age: 0 });
6+
7+
useEffect(() => {
8+
setUser({ name: 'jack', age: 18 });
9+
}, []);
10+
11+
const fuckUser = () => {
12+
const { name: _name, age } = user;
13+
// 一系列操作
14+
console.log(_name, age);
15+
return true;
6516
};
66-
67-
return (
68-
<Form
69-
name="customized_form_controls"
70-
layout="inline"
71-
onFinish={onFinish}
72-
onFieldsChange={(a) => {
73-
console.log(a);
74-
}}
75-
initialValues={{
76-
price: {
77-
number: 0,
78-
currency: 'rmb',
79-
},
80-
}}
81-
>
82-
<Form.Item name="price" label="Price" rules={[{ validator: checkPrice }]}>
83-
<PriceInput />
84-
</Form.Item>
85-
<Form.Item>
86-
<Button type="primary" htmlType="submit">
87-
Submit
88-
</Button>
89-
</Form.Item>
90-
</Form>
91-
);
17+
return name + fuckUser();
9218
};
9319

9420
export default App;

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
.saveModule {
44
flex-shrink: 0;
5+
padding-top: 6px;
56
}
67

78
.leftModuleTitle {
@@ -15,17 +16,22 @@
1516
height: 26px;
1617
.modelName {
1718
font-weight: bold;
19+
line-height: 100%;
1820
}
1921
.iconBox {
2022
display: flex;
2123
align-items: center;
24+
height: 100%;
2225
}
2326
.refreshIcon {
2427
margin-right: 10px;
2528
}
2629
.refreshIcon,
2730
.searchIcon {
2831
cursor: pointer;
32+
height: 100%;
33+
display: flex;
34+
align-items: center;
2935
&:hover {
3036
color: var(--color-primary);
3137
}
@@ -42,14 +48,19 @@
4248
overflow-y: auto;
4349
}
4450

51+
.leftModuleTitleShadow {
52+
// 地步加一点模糊
53+
box-shadow: 0px 1px 2px 0px var(--color-border);
54+
}
55+
4556
.saveItem {
4657
display: flex;
4758
justify-content: space-between;
4859
align-items: center;
49-
padding: 0px 10px;
50-
margin-bottom: 2px;
60+
padding: 0px 6px;
61+
height: 26px;
5162
line-height: 26px;
52-
border-radius: 2px;
63+
border-radius: 4px;
5364
user-select: none;
5465
cursor: pointer;
5566
.saveItemText {

0 commit comments

Comments
 (0)