Skip to content

Commit bafc814

Browse files
shanhexishanhexi
committed
feat:The extension bar can be dragged
1 parent 1124eff commit bafc814

12 files changed

Lines changed: 187 additions & 46 deletions

File tree

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import classnames from 'classnames';
44

55
interface IProps {
66
className?: string;
7-
children: any; //TODO: TS，约定接受一个数组，第一项child需要携带ref
7+
children: any; //TODO: TS，约定接受一个数组
88
min?: number;
99
layout?: 'row' | 'column';
1010
callback?: (data: any) => void;
@@ -13,7 +13,7 @@ interface IProps {
1313

1414
export default memo<IProps>((props: IProps) => {
1515
const { children, showLine = true, callback, min, className, layout = 'row' } = props;
16-
const volatileRef = children[0]?.ref;
16+
const volatileRef = children[0]?.ref || children[1]?.ref;
1717

1818
const DividerRef = useRef<HTMLDivElement | null>(null);
1919
const DividerLine = useRef<HTMLDivElement | null>(null);
@@ -47,7 +47,8 @@ export default memo<IProps>((props: IProps) => {
4747
const computedXY = nowClientXY - clientStart;
4848
let finalXY = 0;
4949

50-
finalXY = volatileBoxXY + computedXY;
50+
// children 如果第一个是可变的，那么就是+ 如果第二个是可变的，那么就是-
51+
finalXY = children[0]?.ref ? volatileBoxXY + computedXY : volatileBoxXY - computedXY;
5152

5253
if (min && finalXY < min) {
5354
return;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.WorkspaceExtendBody{
2+
// flex: 1;
3+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import styles from './index.less';
3+
import {extendConfig} from '../config';
4+
5+
6+
export default () => {
7+
return <div className={styles.WorkspaceExtendBody}>
8+
{extendConfig[0].components}
9+
</div>
10+
};

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@import '../../../../../../styles/var.less';
2+
3+
// .workspaceExtend {
4+
// display: none;
5+
// background-color: var(--color-bg-subtle);
6+
// .workspaceExtendMain {
7+
// flex: 1;
8+
// width: 0px;
9+
// border-right: 1px solid var(--color-border);
10+
// }
11+
// }
12+
13+
.workspaceExtendNav {
14+
flex-shrink: 0;
15+
width: 38px;
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
padding: 5px 0px;
20+
}
21+
22+
.rightBarFront {
23+
margin: 2px 0px;
24+
}
25+
26+
.workspaceExtendActive {
27+
display: flex;
28+
}

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { useState } from 'react';
2+
import styles from './index.less';
3+
import classnames from 'classnames';
4+
// import i18n from '@/i18n';
5+
import { Popover } from 'antd';
6+
import Iconfont from '@/components/Iconfont';
7+
import {extendConfig} from '../config';
8+
9+
// import { useWorkspaceStore } from '@/pages/main/workspace/store';
10+
11+
interface IToolbar {
12+
code: string;
13+
title: string;
14+
icon: string;
15+
components: any;
16+
}
17+
18+
interface IProps {
19+
className?: any;
20+
}
21+
22+
export default (props:IProps) => {
23+
const { className } = props;
24+
const [activeExtend, setActiveExtend] = useState<IToolbar | null>(null);
25+
26+
const changeExtend = (item: IToolbar) => {
27+
if (activeExtend?.code === item.code) {
28+
setActiveExtend(null);
29+
return;
30+
}
31+
setActiveExtend(item);
32+
};
33+
34+
return (
35+
<div className={classnames(className,styles.workspaceExtendNav)}>
36+
{extendConfig.map((item, index) => {
37+
return (
38+
<Popover mouseEnterDelay={0.8} key={index} placement="left" content={item.title}>
39+
<div className={styles.rightBarFront} onClick={changeExtend.bind(null, item)}>
40+
<Iconfont code={item.icon} box size={18} active={activeExtend?.code === item.code} />
41+
</div>
42+
</Popover>
43+
);
44+
})}
45+
</div>
46+
);
47+
48+
};

‎chat2db-client/src/pages/main/workspace/components/WorkspaceExtend/config.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import i18n from '@/i18n';
3+
import Output from '@/components/Output';
4+
import SaveList from '../SaveList';
5+
6+
interface IToolbar {
7+
code: string;
8+
title: string;
9+
icon: string;
10+
components: any;
11+
}
12+
13+
export const extendConfig: IToolbar[] = [
14+
// {
15+
// code: 'ai',
16+
// title: 'AI',
17+
// icon: '\ue8ad',
18+
// components: <div>ai</div>,
19+
// },
20+
{
21+
code: 'executiveLog',
22+
title: i18n('common.title.executiveLogging'),
23+
icon: '\ue8ad',
24+
components: <Output />,
25+
},
26+
{
27+
code: 'saveList',
28+
title: i18n('workspace.title.savedConsole'),
29+
icon: '\ue619',
30+
components: <SaveList />,
31+
},
32+
];

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
padding: 5px 0px;
1313
}
1414
.workspaceExtendMain {
15+
flex: 1;
16+
width: 0px;
1517
border-right: 1px solid var(--color-border);
1618
}
1719
}

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

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,21 @@
1-
import React, { memo, useState } from 'react';
1+
import React, { useState } from 'react';
22
import styles from './index.less';
3-
import classnames from 'classnames';
3+
// import classnames from 'classnames';
44
import { Popover } from 'antd';
55
import Iconfont from '@/components/Iconfont';
66
import Output from '@/components/Output';
77
import SaveList from '../SaveList';
88
import { useWorkspaceStore } from '@/pages/main/workspace/store';
99
import i18n from '@/i18n';
1010

11-
interface IProps {
12-
className?: string;
13-
}
14-
1511
interface IToolbar {
1612
code: string;
1713
title: string;
1814
icon: string;
1915
components: any;
20-
width: number;
2116
}
2217

23-
export default memo<IProps>((props) => {
24-
const { className } = props;
18+
export const useWorkspaceExtend = () => {
2519
const [activeExtend, setActiveExtend] = useState<IToolbar | null>(null);
2620
const { panelRight } = useWorkspaceStore((state) => state.layout);
2721

@@ -37,14 +31,12 @@ export default memo<IProps>((props) => {
3731
title: i18n('common.title.executiveLogging'),
3832
icon: '\ue8ad',
3933
components: <Output />,
40-
width: 400,
4134
},
4235
{
4336
code: 'saveList',
4437
title: i18n('workspace.title.savedConsole'),
4538
icon: '\ue619',
4639
components: <SaveList />,
47-
width: 200,
4840
},
4941
];
5042

@@ -56,28 +48,31 @@ export default memo<IProps>((props) => {
5648
setActiveExtend(item);
5749
};
5850

59-
return (
60-
<div
61-
className={classnames(styles.workspaceExtend, className, {
62-
[styles.workspaceExtendActive]: panelRight,
51+
// return (
52+
// <div
53+
// className={classnames(styles.workspaceExtend, className, {
54+
// [styles.workspaceExtendActive]: panelRight,
55+
// })}
56+
// >
57+
// </div>
58+
// );
59+
60+
const extendBody = (
61+
<>{activeExtend && <div className={styles.workspaceExtendMain}>{activeExtend?.components}</div>}</>
62+
);
63+
const extendNav = (
64+
<div className={styles.workspaceExtendBar}>
65+
{toolbarConfig.map((item, index) => {
66+
return (
67+
<Popover mouseEnterDelay={0.8} key={index} placement="left" content={item.title}>
68+
<div className={styles.rightBarFront} onClick={changeExtend.bind(null, item)}>
69+
<Iconfont code={item.icon} box size={18} active={activeExtend?.code === item.code} />
70+
</div>
71+
</Popover>
72+
);
6373
})}
64-
>
65-
{activeExtend && (
66-
<div style={{ width: `${activeExtend?.width || 400}px` }} className={styles.workspaceExtendMain}>
67-
{activeExtend?.components}
68-
</div>
69-
)}
70-
<div className={styles.workspaceExtendBar}>
71-
{toolbarConfig.map((item, index) => {
72-
return (
73-
<Popover mouseEnterDelay={0.8} key={index} placement="left" content={item.title}>
74-
<div className={styles.rightBarFront} onClick={changeExtend.bind(null, item)}>
75-
<Iconfont code={item.icon} box size={18} active={activeExtend?.code === item.code} />
76-
</div>
77-
</Popover>
78-
);
79-
})}
80-
</div>
8174
</div>
8275
);
83-
});
76+
77+
return [extendBody, extendNav];
78+
};

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,26 @@
22

33
.workspaceRight {
44
position: relative;
5+
display: flex;
56
flex: 1;
67
width: 0px;
7-
display: flex;
8+
}
9+
10+
.workspaceExtendNav{
11+
border-left: 1px solid var(--color-border);
12+
}
13+
14+
.draggableContainer{
15+
flex: 1;
16+
}
17+
18+
.workspaceExtendBody{
19+
width: auto;
20+
border-left: 1px solid var(--color-border);
821
}
922

1023
.workspaceExtend {
24+
height: 100%;
1125
flex-shrink: 0;
1226
border-left: 1px solid var(--color-border);
1327
display: flex;

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

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1-
import React, { memo } from 'react';
1+
import React, { memo, useRef } from 'react';
22
import styles from './index.less';
3-
import classnames from 'classnames';
4-
import WorkspaceExtend from '../WorkspaceExtend';
3+
// import classnames from 'classnames';
4+
import WorkspaceExtendBody from '../WorkspaceExtend/WorkspaceExtendBody';
5+
import WorkspaceExtendNav from '../WorkspaceExtend/WorkspaceExtendNav';
56

67
// ----- components -----
78
import WorkspaceTabs from '../WorkspaceTabs';
9+
import DraggableContainer from '@/components/DraggableContainer';
810

911
const WorkspaceRight = memo(() => {
12+
const draggableRef = useRef<any>();
1013
return (
11-
<div className={classnames(styles.workspaceRight)}>
12-
<WorkspaceTabs />
13-
<WorkspaceExtend className={styles.workspaceExtend} />
14+
<div className={styles.workspaceRight}>
15+
<DraggableContainer min={200} className={styles.draggableContainer}>
16+
<WorkspaceTabs />
17+
<div ref={draggableRef} className={styles.workspaceExtendBody}>
18+
<WorkspaceExtendBody />
19+
</div>
20+
</DraggableContainer>
21+
<WorkspaceExtendNav className={styles.workspaceExtendNav} />
1422
</div>
1523
);
1624
});

0 commit comments

Comments
 (0)