diff --git a/packages/react/src/containers/Layout.tsx b/packages/react/src/containers/Layout.tsx index 08a893297..1eee55a3a 100644 --- a/packages/react/src/containers/Layout.tsx +++ b/packages/react/src/containers/Layout.tsx @@ -28,7 +28,11 @@ export const Layout: React.FC = (props) => { })} > {props.children} @@ -39,4 +43,5 @@ export const Layout: React.FC = (props) => { Layout.defaultProps = { theme: 'light', prefixCls: 'dn-', + position: 'fixed', } diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts index 425a710ca..64305ce44 100644 --- a/packages/react/src/hooks/index.ts +++ b/packages/react/src/hooks/index.ts @@ -3,6 +3,7 @@ export * from './useCursor' export * from './useScreen' export * from './useTree' export * from './useTheme' +export * from './usePosition' export * from './useTreeNode' export * from './useHover' export * from './useViewport' diff --git a/packages/react/src/hooks/usePosition.ts b/packages/react/src/hooks/usePosition.ts new file mode 100644 index 000000000..eb913675b --- /dev/null +++ b/packages/react/src/hooks/usePosition.ts @@ -0,0 +1,7 @@ +import { useContext } from 'react' +import { DesignerLayoutContext } from '../context' +import { IDesignerLayoutContext } from '../types' + +export const usePosition = (): IDesignerLayoutContext['position'] => { + return useContext(DesignerLayoutContext)?.position +} diff --git a/packages/react/src/panels/StudioPanel.tsx b/packages/react/src/panels/StudioPanel.tsx index 2d87dd568..9e7cb0a36 100644 --- a/packages/react/src/panels/StudioPanel.tsx +++ b/packages/react/src/panels/StudioPanel.tsx @@ -1,5 +1,5 @@ -import React from 'react' -import { usePrefix } from '../hooks' +import React, { useContext } from 'react' +import { usePrefix, usePosition } from '../hooks' import { Layout } from '../containers' import cls from 'classnames' export interface IStudioPanelProps { @@ -9,6 +9,7 @@ export interface IStudioPanelProps { actions?: React.ReactNode prefixCls?: string theme?: string + position?: React.ComponentProps['position'] } const StudioPanelInternal: React.FC = ({ @@ -17,11 +18,17 @@ const StudioPanelInternal: React.FC = ({ ...props }) => { const prefix = usePrefix('main-panel') + const position = usePosition() if (logo || actions) { return (
{logo}
@@ -32,7 +39,7 @@ const StudioPanelInternal: React.FC = ({ ) } return ( -
+
{props.children}
) diff --git a/packages/react/src/panels/styles.less b/packages/react/src/panels/styles.less index d91eb4fce..cac9abd14 100644 --- a/packages/react/src/panels/styles.less +++ b/packages/react/src/panels/styles.less @@ -21,6 +21,12 @@ right: 0; bottom: 0; } + &.absolute { + position: absolute; + } + &.relative { + position: relative; + } } &-header { @@ -140,7 +146,7 @@ display: flex; align-items: center; - &>* { + & > * { margin-right: 8px; &:last-child { @@ -196,10 +202,8 @@ .@{prefix-cls}-composite-panel-tabs-content { border-right: none; border-left: 1px solid var(--dn-panel-border-color); - } .@{prefix-cls}-composite-panel-tabs { - border-left: 1px solid var(--dn-panel-border-color); } } @@ -261,7 +265,7 @@ display: flex; align-items: center; - &>* { + & > * { margin-right: 8px; &:last-child { @@ -324,4 +328,4 @@ transform: rotate(45deg); } } -} \ No newline at end of file +} diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 9ef9d3c9f..44483ba4b 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -5,6 +5,7 @@ export interface IDesignerLayoutProps { prefixCls?: string theme?: 'dark' | 'light' | (string & {}) variables?: Record + position?: 'fixed' | 'absolute' | 'relative' } export interface IDesignerProps extends IDesignerLayoutProps { engine: Engine @@ -17,6 +18,7 @@ export interface IDesignerComponents { export interface IDesignerLayoutContext { theme?: 'dark' | 'light' | (string & {}) prefixCls: string + position: 'fixed' | 'absolute' | 'relative' } export interface IWorkspaceContext {