Skip to content

Commit e973f27

Browse files
shanhexishanhexi
committed
feat:Close the left sidebar And fix:Switching table paging bug
1 parent d2d570b commit e973f27

18 files changed

Lines changed: 629 additions & 109 deletions

File tree

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
"OPENAI",
6363
"packagejson",
6464
"Parens",
65+
"partialize",
6566
"pgsql",
6667
"plusplus",
6768
"pnpm",
@@ -87,7 +88,8 @@
8788
"webp",
8889
"wireframe",
8990
"Wppk",
90-
"yapi"
91+
"yapi",
92+
"zustand"
9193
],
9294
"typescript.tsdk": "/Users/wangjiaqi/Desktop/Chat2DB/chat2db-client/node_modules/typescript/lib"
9395
}

‎chat2db-client/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,15 @@
2727
},
2828
"dependencies": {
2929
"@dnd-kit/modifiers": "^6.0.1",
30-
"ahooks": "^3.7.7",
30+
"ahooks": "^3.7.8",
3131
"ali-react-table": "^2.6.1",
3232
"antd": "^5.6.0",
3333
"copy-to-clipboard": "^3.3.3",
3434
"echarts": "^5.4.2",
3535
"echarts-for-react": "^3.0.2",
3636
"electron-log": "^4.4.8",
3737
"event-source-polyfill": "^1.0.31",
38+
"highlight.js": "^11.9.0",
3839
"lodash": "^4.17.21",
3940
"markdown-it-link-attributes": "^4.0.1",
4041
"monaco-editor": "^0.34.0",
@@ -48,7 +49,7 @@
4849
"umi": "^4.0.70",
4950
"umi-request": "^1.4.0",
5051
"uuid": "^9.0.0",
51-
"highlight.js": "^11.9.0"
52+
"zustand": "^4.4.4"
5253
},
5354
"devDependencies": {
5455
"@types/event-source-polyfill": "^1.0.1",

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@import '../../styles/var.less';
2+
3+
.customLayout {
4+
display: flex;
5+
align-items: center;
6+
.iconPanel {
7+
margin: 0px 5px;
8+
border: 1px solid var(--color-text-tertiary);
9+
border-radius: 3px;
10+
height: 14px;
11+
width: 14px;
12+
position: relative;
13+
overflow: hidden;
14+
cursor: pointer;
15+
&::after {
16+
position: absolute;
17+
content: '';
18+
width: 6px;
19+
background-color: var(--color-text-tertiary);
20+
}
21+
}
22+
23+
.iconPanelLeft {
24+
&::after {
25+
top: 0;
26+
bottom: 0;
27+
left: 0;
28+
}
29+
}
30+
31+
.iconPanelLeftHidden {
32+
&::after {
33+
left: 5px;
34+
width: 1px;
35+
}
36+
}
37+
38+
.iconPanelRight {
39+
&::after {
40+
top: 0;
41+
bottom: 0;
42+
right: 5px;
43+
width: 1px;
44+
}
45+
}
46+
47+
.iconPanelRightHidden {
48+
&::after {
49+
width: 6px;
50+
}
51+
}
52+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { memo } from 'react';
2+
import styles from './index.less';
3+
import classnames from 'classnames';
4+
import { useWorkspaceStore } from '@/store/workspace';
5+
6+
interface IProps {
7+
className?: string;
8+
}
9+
10+
export default memo<IProps>((props) => {
11+
const { className } = props;
12+
const { panelLeft, togglePanelLeft } = useWorkspaceStore((state) => {
13+
return {
14+
togglePanelLeft: state.togglePanelLeft,
15+
panelLeft: state.layout.panelLeft,
16+
};
17+
});
18+
19+
return (
20+
<div className={classnames(styles.customLayout, className)}>
21+
<div
22+
className={classnames(styles.iconPanelLeft, styles.iconPanel, { [styles.iconPanelLeftHidden]: !panelLeft })}
23+
onClick={togglePanelLeft}
24+
/>
25+
{/* <div className={classnames(styles.iconPanelRight, styles.iconPanel, { [styles.iconPanelRightHidden]: false })} /> */}
26+
</div>
27+
);
28+
});

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

Lines changed: 12 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { memo, useRef, useEffect, useState, useMemo } from 'react';
1+
import React, { memo, useRef, useEffect, useState } from 'react';
22
import styles from './index.less';
33
import classnames from 'classnames';
44

@@ -7,18 +7,12 @@ interface IProps {
77
children: any; //TODO: TS，约定接受一个数组，第一项child需要携带ref
88
min?: number;
99
layout?: 'row' | 'column';
10-
callback?: Function;
10+
callback?: (data: any) => void;
1111
showLine?: boolean;
1212
}
1313

14-
export default memo<IProps>(function DraggableContainer({
15-
children,
16-
showLine = true,
17-
callback,
18-
min,
19-
className,
20-
layout = 'row',
21-
}) {
14+
export default memo<IProps>((props: IProps) => {
15+
const { children, showLine = true, callback, min, className, layout = 'row' } = props;
2216
const volatileRef = children[0]?.ref;
2317

2418
const DividerRef = useRef<HTMLDivElement | null>(null);
@@ -31,45 +25,26 @@ export default memo<IProps>(function DraggableContainer({
3125
if (!DividerRef.current) {
3226
return;
3327
}
34-
// DividerRef.current.onmouseover = (e) => {
35-
// setDragging(true);
36-
// };
37-
// DividerRef.current.onmouseout = (e) => {
38-
// setDragging(false);
39-
// };
4028

4129
DividerRef.current.onmousedown = (e) => {
4230
if (!volatileRef?.current) return;
43-
4431
e.preventDefault();
4532
setDragging(true);
4633
const clientStart = isRow ? e.clientX : e.clientY;
47-
const volatileBoxXY = isRow
48-
? volatileRef.current.offsetWidth
49-
: volatileRef.current.offsetHeight;
50-
document.onmousemove = (e) => {
51-
moveHandle(
52-
isRow ? e.clientX : e.clientY,
53-
volatileRef.current,
54-
clientStart,
55-
volatileBoxXY,
56-
);
34+
const volatileBoxXY = isRow ? volatileRef.current.offsetWidth : volatileRef.current.offsetHeight;
35+
document.onmousemove = (_e) => {
36+
moveHandle(isRow ? _e.clientX : _e.clientY, volatileRef.current, clientStart, volatileBoxXY);
5737
};
58-
document.onmouseup = (e) => {
38+
document.onmouseup = () => {
5939
setDragging(false);
6040
document.onmouseup = null;
6141
document.onmousemove = null;
6242
};
6343
};
6444
}, []);
6545

66-
const moveHandle = (
67-
nowClientXY: any,
68-
leftDom: any,
69-
clientStart: any,
70-
volatileBoxXY: any,
71-
) => {
72-
let computedXY = nowClientXY - clientStart;
46+
const moveHandle = (nowClientXY: any, leftDom: any, clientStart: any, volatileBoxXY: any) => {
47+
const computedXY = nowClientXY - clientStart;
7348
let finalXY = 0;
7449

7550
finalXY = volatileBoxXY + computedXY;
@@ -92,18 +67,9 @@ export default memo<IProps>(function DraggableContainer({
9267
<div
9368
style={{ display: showLine ? 'block' : 'none' }}
9469
ref={DividerLine}
95-
className={classnames(
96-
styles.divider,
97-
{ [styles.displayDivider]: !children[1] },
98-
)}
70+
className={classnames(styles.divider, { [styles.displayDivider]: !children[1] })}
9971
>
100-
<div
101-
ref={DividerRef}
102-
className={classnames(
103-
styles.dividerCenter,
104-
{ [styles.dragging]: dragging },
105-
)}
106-
/>
72+
<div ref={DividerRef} className={classnames(styles.dividerCenter, { [styles.dragging]: dragging })} />
10773
</div>
10874
}
10975
{children[1]}

‎chat2db-client/src/layouts/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ declare global {
3333
electronApi?: {
3434
startServerForSpawn: () => void;
3535
quitApp: () => void;
36-
setBaseURL: (baseUrl:string) => void;
37-
registerAppMenu: (data:any) => void;
36+
setBaseURL: (baseUrl: string) => void;
37+
registerAppMenu: (data: any) => void;
3838
};
3939
}
4040
const __APP_VERSION__: string;
@@ -109,9 +109,9 @@ function AppContainer() {
109109
function registerElectronApi() {
110110
window.electronApi?.registerAppMenu({
111111
version: __APP_VERSION__,
112-
})
112+
});
113113
// 把关闭java服务的的方法传给electron
114-
window.electronApi?.setBaseURL?.(window._BaseURL)
114+
window.electronApi?.setBaseURL?.(window._BaseURL);
115115
// console.log(window.electronApi)
116116
}
117117

@@ -186,7 +186,7 @@ function AppContainer() {
186186
<div className={styles.loadingBox}>
187187
<Spin spinning={!serviceFail} size="large" />
188188
{/* 状态等于1时，说明没服务起来需要轮训接口，这时可能服务配置又问题，需要设置来修改 */}
189-
{startSchedule === 1 && (
189+
{/* {startSchedule === 1 && (
190190
<Setting
191191
render={
192192
<div className={styles.settingBox}>
@@ -195,7 +195,7 @@ function AppContainer() {
195195
}
196196
noLogin
197197
/>
198-
)}
198+
)} */}
199199
{serviceFail && (
200200
<>
201201
<div className={styles.github}>

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

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { debounce } from 'lodash';
2020
import { dataSourceFormConfigs } from '@/components/ConnectionEdit/config/dataSource';
2121
import styles from './index.less';
2222
import ImportBlock from '@/components/ImportBlock';
23+
import { useRequest } from 'ahooks';
2324

2425
interface IOption {
2526
value: TreeNodeType;
@@ -68,6 +69,9 @@ const TableList = dvaModel((props: any) => {
6869
const [searchKey, setSearchKey] = useState<string>('');
6970
const leftModuleTitleRef = useRef<any>(null);
7071
const treeBoxRef = useRef<any>(null);
72+
const controllerRef = useRef<AbortController>();
73+
74+
const useRequestRes = useRequest();
7175

7276
// 导出表结构
7377
const handleExport = (exportType: ExportTypeEnum) => {
@@ -219,7 +223,6 @@ const TableList = dvaModel((props: any) => {
219223
}, [curWorkspaceParams]);
220224

221225
useUpdateEffect(() => {
222-
setCurList([]);
223226
getList();
224227
}, [curType]);
225228

@@ -299,8 +302,19 @@ const TableList = dvaModel((props: any) => {
299302
};
300303

301304
function getList(params?: { refresh?: boolean }) {
305+
// 在每一getList之前，都要把上一次的请求abort掉
306+
controllerRef.current && controllerRef.current.abort('abortRequest');
307+
308+
// 为每一次请求创建一个新的AbortController
309+
controllerRef.current = new AbortController();
310+
311+
// abort会触发上一次请求的setTableLoading(false); 所以这里要延迟触发
312+
setTimeout(() => {
313+
setTableLoading(true);
314+
}, 0);
315+
316+
setCurList([]);
302317
const { refresh = false } = params || {};
303-
setTableLoading(true);
304318
const p = {
305319
refresh,
306320
...curWorkspaceParams,
@@ -311,7 +325,11 @@ const TableList = dvaModel((props: any) => {
311325
p.pageNo = pagingData.pageNo;
312326
p.pageSize = pagingData.pageSize;
313327
}
314-
treeConfig[curType.value].getChildren!(p)
328+
329+
// 发送请求
330+
treeConfig[curType.value].getChildren!(p, {
331+
signal: controllerRef.current.signal,
332+
})
315333
.then((res: any) => {
316334
// 表的处理
317335
if (curType.value === TreeNodeType.TABLES) {
@@ -346,8 +364,7 @@ const TableList = dvaModel((props: any) => {
346364
}
347365

348366
function refreshTableList() {
349-
if (isReady) {
350-
setCurList([]);
367+
if (isReady && !tableLoading) {
351368
getList({
352369
refresh: true,
353370
});
@@ -441,15 +458,14 @@ const TableList = dvaModel((props: any) => {
441458

442459
<div ref={treeBoxRef} className={styles.treeBox}>
443460
<LoadingContent isLoading={tableLoading}>
444-
{
445-
(curType.value === TreeNodeType.TABLES && !curList.length) ?
461+
{curType.value === TreeNodeType.TABLES && !curList.length ? (
446462
<div className={styles.emptyBox}>
447463
<div>{i18n('common.text.noTableFoundUp')}</div>
448464
<div>{i18n('common.text.noTableFoundDown')}</div>
449-
</div>
450-
:
465+
</div>
466+
) : (
451467
<Tree initialData={searchedTableList || curList} />
452-
}
468+
)}
453469
</LoadingContent>
454470
</div>
455471

‎chat2db-client/src/pages/main/workspace/components/Tree/treeConfig.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,10 @@ export const switchIcon: Partial<{ [key in TreeNodeType]: { icon: string; unfold
6868

6969
export interface ITreeConfigItem {
7070
icon?: string;
71-
getChildren?: (params: any) => Promise<
71+
getChildren?: (
72+
params: any,
73+
options?: any,
74+
) => Promise<
7275
| ITreeNode[]
7376
| ({
7477
data: ITreeNode[];
@@ -191,10 +194,10 @@ export const treeConfig: { [key in TreeNodeType]: ITreeConfigItem } = {
191194

192195
[TreeNodeType.TABLES]: {
193196
icon: '\ueac5',
194-
getChildren: (params) => {
197+
getChildren: (params, options) => {
195198
return new Promise((r, j) => {
196199
mysqlServer
197-
.getTableList(params)
200+
.getTableList(params, options)
198201
.then((res) => {
199202
const tableList: ITreeNode[] = res.data?.map((t: any) => {
200203
return {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
flex: 1;
2020
flex-shrink: 0;
2121
overflow: hidden;
22+
display: flex;
23+
justify-content: end;
2224
}
2325

2426
.workspaceHeaderLeft {

0 commit comments

Comments
 (0)