Skip to content

Commit 524fa8f

Browse files
shanhexishanhexi
committed
tabs
1 parent ff06c31 commit 524fa8f

10 files changed

Lines changed: 186 additions & 44 deletions

File tree

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useEffect } from 'react';
2+
3+
import { useConsoleStore, getSavedConsoleList } from '@/store/console';
4+
5+
const useGetConsoleList = () => {
6+
const { consoleList } = useConsoleStore((state) => {
7+
return {
8+
consoleList: state.consoleList,
9+
};
10+
});
11+
12+
useEffect(() => {
13+
getSavedConsoleList();
14+
}, []);
15+
16+
return {
17+
consoleList,
18+
}
19+
};
20+
21+
export default useGetConsoleList;

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import '../../../../../styles/var.less';
2+
3+
.workspaceRight {
4+
flex: 1;
5+
width: 0px;
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
10+
.consoleTabsContainer{
11+
height: 50%;
12+
}
13+
14+
.searchResultContainer{
15+
border-top: 1px solid var(--color-border-secondary);
16+
flex: 1;
17+
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { memo, useEffect, useState, useMemo, Fragment, useRef } from 'react';
2+
import i18n from '@/i18n';
3+
import styles from './index.less';
4+
import classnames from 'classnames';
5+
6+
// ----- components -----
7+
import WorkspaceTabs from '../WorkspaceTabs';
8+
9+
10+
const WorkspaceRight = memo(() => {
11+
12+
return (
13+
<div className={classnames(styles.workspaceRight)}>
14+
<WorkspaceTabs />
15+
</div>
16+
);
17+
});
18+
19+
export default WorkspaceRight;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const WorkspaceLeft = memo(() => {
99
return (
1010
<div className={classnames(styles.workspaceLeft)}>
1111
<WorkspaceLeftHeader />
12+
<div style={{margin: '10px 4px '}}>这里加分割线还有操作按键？</div>
1213
<NewTableList />
1314
</div>
1415
);

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
@import '../../../../../styles/var.less';
22

33
.workspaceRight {
4-
position: absolute;
5-
top: 0;
6-
left: 0;
7-
right: 0;
8-
bottom: 0;
4+
flex: 1;
95
:global {
106
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
117
color: var(--color-text) !important;
@@ -16,6 +12,7 @@
1612

1713
.workspaceRightMain {
1814
display: flex;
15+
height: 100%;
1916
}
2017

2118
.workspaceExtend {

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { memo, useEffect, useState, useMemo, Fragment, useRef } from 'react';
2+
import i18n from '@/i18n';
3+
import classnames from 'classnames';
4+
5+
// ----- constants -----
6+
import { WorkspaceTabType, workspaceTabConfig } from '@/constants';
7+
// import WorkspaceExtend from '../WorkspaceExtend';
8+
9+
// ----- components -----
10+
import Tabs, { ITabItem } from '@/components/Tabs';
11+
12+
// ----- hooks -----
13+
import useGetConsoleList from '@/hooks/useGetConsoleList';
14+
15+
// ---- store -----
16+
import { useConsoleStore } from '@/store/console';
17+
import { State } from '@/components/StateIndicator';
18+
19+
const WorkspaceTabs = memo(() => {
20+
// 获取console
21+
const { consoleList } = useGetConsoleList();
22+
23+
const { activeConsoleId } = useConsoleStore(state=> {
24+
return {
25+
activeConsoleId: state.activeConsoleId
26+
}
27+
});
28+
29+
const workspaceTabItems: ITabItem[] = useMemo(() => {
30+
return (
31+
consoleList?.map((item) => {
32+
return {
33+
prefixIcon: workspaceTabConfig[item.type]?.icon,
34+
label: item.name,
35+
key: item.id,
36+
// editableName: item.type === WorkspaceTabType.CONSOLE,
37+
};
38+
}) || []
39+
);
40+
}, [consoleList]);
41+
42+
// 删除 新增tab
43+
const onEdit = (action: 'add' | 'remove', data: ITabItem[]) => {
44+
if (action === 'remove') {
45+
setWorkspaceTabList(
46+
workspaceTabList.filter((t) => {
47+
return data.findIndex((item) => item.key === t.id) === -1;
48+
}),
49+
);
50+
data.forEach((item) => {
51+
const editData = workspaceTabList?.find((t) => t.id === item.key);
52+
if (
53+
editData?.type !== WorkspaceTabType.EditTable &&
54+
editData?.type !== WorkspaceTabType.CreateTable &&
55+
editData?.type !== WorkspaceTabType.EditTableData
56+
) {
57+
closeWindowTab(item.key as number);
58+
}
59+
})
60+
}
61+
if (action === 'add') {
62+
addConsole();
63+
}
64+
};
65+
66+
function onTabChange(key: string | number | null) {
67+
setActiveConsoleId(key);
68+
}
69+
70+
return (
71+
<Tabs
72+
onChange={onTabChange}
73+
onEdit={onEdit as any}
74+
activeKey={activeConsoleId}
75+
editableNameOnBlur={editableNameOnBlur}
76+
items={workspaceTabItems}
77+
/>
78+
);
79+
});
80+
81+
export default WorkspaceTabs;

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useWorkspaceStore } from '@/store/workspace';
55

66
import DraggableContainer from '@/components/DraggableContainer';
77
import WorkspaceLeft from './components/WorkspaceLeft';
8-
// import WorkspaceRight from './components/WorkspaceRight';
8+
import NewWorkspaceRight from './components/NewWorkspaceRight';
99

1010
import useMonacoTheme from '@/components/Console/MonacoEditor/useMonacoTheme';
1111

@@ -33,9 +33,7 @@ const workspacePage = memo(() => {
3333
>
3434
<WorkspaceLeft />
3535
</div>
36-
<div className={styles.boxRight}>
37-
{/* <WorkspaceRight /> */}
38-
</div>
36+
<NewWorkspaceRight />
3937
</DraggableContainer>
4038
</div>
4139
);

‎chat2db-client/src/service/history.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import createRequest from "./base";
22
// import { IPageResponse,IPageParams,IHistoryRecord, IWindowTab, ISavedConsole } from '@/types';
3-
import { ConsoleOpenedStatus, DatabaseTypeCode, ConsoleStatus } from '@/constants'
3+
import { DatabaseTypeCode, ConsoleStatus } from '@/constants'
44
import { ICreateConsole, IConsole, IPageResponse, IPageParams } from '@/typings';
55

66
export interface IGetSavedListParams extends IPageParams {
7-
dataSourceId?: number;
8-
databaseName?: string;
9-
tabOpened?: ConsoleOpenedStatus;
7+
tabOpened?: 'y' | 'n';
108
status?: ConsoleStatus
119
}
1210
export interface IGetHistoryListParams extends IPageParams {

‎chat2db-client/src/store/console/index.ts‎

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,33 @@
44

55
import { create, UseBoundStore, StoreApi } from 'zustand';
66
import { devtools } from 'zustand/middleware';
7-
import { IConnectionListItem, IConnectionEnv } from '@/typings/connection';
8-
import connectionService from '@/service/connection';
7+
import { IConsole } from '@/typings/console';
8+
import historyService from '@/service/history';
99

10-
export interface IConnectionStore {
11-
consoleList: IConnectionListItem[] | null;
12-
connectionEnvList: IConnectionEnv[] | null;
13-
setConnectionList: (connectionList: IConnectionListItem[]) => void;
14-
setConnectionEnvList: (connectionEnvList: IConnectionEnv[]) => void;
15-
getConnectionList: () => Promise<void>;
10+
export interface IConsoleStore {
11+
consoleList: IConsole[] | null;
12+
activeConsoleId: string | null;
1613
}
1714

18-
export const connectionStore = (set): IConnectionStore => ({
15+
const initConsoleStore = {
1916
consoleList: null,
20-
connectionEnvList: null,
21-
setConnectionList: (connectionList: IConnectionListItem[]) => set({ connectionList }),
22-
setConnectionEnvList: (connectionEnvList: IConnectionEnv[]) => set({ connectionEnvList }),
23-
getConnectionList: () => {
24-
return connectionService
25-
.getList({
26-
pageNo: 1,
27-
pageSize: 1000,
28-
refresh: true,
29-
})
30-
.then((res) => {
31-
set({ connectionList: res?.data || [] });
32-
})
33-
.catch(() => {
34-
set({ connectionList: [] });
35-
});
36-
},
37-
});
17+
activeConsoleId: null
18+
}
3819

39-
export const useConnectionStore: UseBoundStore<StoreApi<IConnectionStore>> = create(
40-
devtools((set) => ({
41-
...connectionStore(set),
42-
})),
20+
export const useConsoleStore: UseBoundStore<StoreApi<IConsoleStore>> = create(
21+
devtools(() => (initConsoleStore)),
4322
);
23+
24+
export const getSavedConsoleList = () => {
25+
historyService.getSavedConsoleList({
26+
tabOpened: 'y',
27+
pageNo: 1,
28+
pageSize: 20,
29+
}).then((res) => {
30+
useConsoleStore.setState({ consoleList: res?.data });
31+
});
32+
}
33+
34+
export const setActiveConsoleId = (id: string) => {
35+
useConsoleStore.setState({ activeConsoleId: id });
36+
}

‎chat2db-client/src/typings/console.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ConsoleStatus, DatabaseTypeCode, WorkspaceTabType } from '@/constants';
2+
3+
// 控制台详情
4+
export interface IConsole {
5+
id: number; // consoleId
6+
name: string; // 控制台名称
7+
ddl: string; // 控制台内的sql
8+
dataSourceId: number; // 数据源id
9+
dataSourceName: string; // 数据源名称
10+
databaseName?: string; // 数据库名称
11+
schemaName?: string; // schema名称
12+
type: DatabaseTypeCode; // 数据库类型
13+
status: ConsoleStatus; // 控制台状态
14+
connectable: boolean; // 是否可连接
15+
tabOpened?: 'y' | 'n'; // 控制台tab是否打开
16+
operationType: WorkspaceTabType; // 操作类型
17+
}

0 commit comments

Comments
 (0)