From c0e2827bacd59fa0912056d1d51d77fe8c288bd0 Mon Sep 17 00:00:00 2001 From: yunji Date: Wed, 10 Jan 2024 22:52:14 +0800 Subject: [PATCH] =?UTF-8?q?style:=20layout=20=E5=8D=87=E7=BA=A7=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/li-editor/package.json | 1 + packages/li-editor/src/hooks/index.ts | 1 + packages/li-editor/src/hooks/useAntdToken.ts | 28 +++++++ packages/li-editor/src/layout/index.less | 74 ---------------- packages/li-editor/src/layout/index.tsx | 22 ++--- packages/li-editor/src/layout/style.ts | 88 ++++++++++++++++++++ 6 files changed, 130 insertions(+), 84 deletions(-) create mode 100644 packages/li-editor/src/hooks/useAntdToken.ts delete mode 100644 packages/li-editor/src/layout/index.less create mode 100644 packages/li-editor/src/layout/style.ts diff --git a/packages/li-editor/package.json b/packages/li-editor/package.json index 3956ec55..127a5d8c 100644 --- a/packages/li-editor/package.json +++ b/packages/li-editor/package.json @@ -38,6 +38,7 @@ "@antv/event-emitter": "^0.1.3", "@antv/li-p2": "^1.6.0", "@antv/li-sdk": "^1.3.0", + "@emotion/css": "^11.10.6", "@formily/antd-v5": "^1.1.2", "@formily/core": "^2.2.24", "@formily/react": "^2.2.24", diff --git a/packages/li-editor/src/hooks/index.ts b/packages/li-editor/src/hooks/index.ts index ab84f27b..b197821b 100644 --- a/packages/li-editor/src/hooks/index.ts +++ b/packages/li-editor/src/hooks/index.ts @@ -1,3 +1,4 @@ export * from './useEditorState'; export * from './useEditor'; export * from './useEditorDatasets'; +export * from './useAntdToken'; diff --git a/packages/li-editor/src/hooks/useAntdToken.ts b/packages/li-editor/src/hooks/useAntdToken.ts new file mode 100644 index 00000000..9ba86e2d --- /dev/null +++ b/packages/li-editor/src/hooks/useAntdToken.ts @@ -0,0 +1,28 @@ +import { ConfigProvider, theme } from 'antd'; +import { useContext } from 'react'; + +const { ConfigContext } = ConfigProvider; +const useConfig = () => useContext(ConfigContext); + +export const useAntdToken = () => { + const { getPrefixCls } = useConfig(); + const rootPrefixCls = getPrefixCls(); + + const { useToken } = theme; + const { token } = useToken(); + + return { + ...token, + antCls: `.${rootPrefixCls}`, + }; +}; + +export const usePrefixCls = ( + tag?: string, + props?: { + prefixCls?: string; + }, +) => { + const prefix = props?.prefixCls ?? 'li-'; + return `${prefix}${tag ?? ''}`; +}; diff --git a/packages/li-editor/src/layout/index.less b/packages/li-editor/src/layout/index.less deleted file mode 100644 index a0c4f844..00000000 --- a/packages/li-editor/src/layout/index.less +++ /dev/null @@ -1,74 +0,0 @@ -@import '../theme/index.less'; - -.@{prefix}-editor-layout { - position: relative; - display: flex; - - /* 滚动条整体部分,必须要设置 */ - ::-webkit-scrollbar { - width: 7px; - height: 7px; - appearance: none; - } - - /* 滚动条的滑块按钮 */ - ::-webkit-scrollbar-thumb { - background: @border-secondary-color; - border-radius: 3px; - cursor: pointer; - - &:hover { - background-color: @border-primary-color; - } - } - - /* 滚动条的轨道 */ - ::-webkit-scrollbar-track { - background: none; - border-radius: 0; - } - - &__loading { - position: absolute; - top: 30px; - left: 50%; - z-index: 10; - display: flex; - align-items: center; - justify-content: space-around; - width: 180px; - margin-left: 50px; - padding: 15px; - color: @text-secondary-color; - background-color: @bg-color-secondary; - border-radius: @border-radius; - } - - &__left { - position: relative; - display: flex; - color: @text-primary-color; - } - - &__side-nav { - z-index: 2; - } - - &__side-panel { - z-index: 1; - width: 350px; - transition: width 50ms ease 0s; - - &_hidden { - width: 0; - visibility: hidden; - } - } - - &__cavans { - flex: 1; - overflow: hidden; - text-align: center; - transition: width 50ms ease 0s; - } -} diff --git a/packages/li-editor/src/layout/index.tsx b/packages/li-editor/src/layout/index.tsx index 17a48e8f..08af674d 100644 --- a/packages/li-editor/src/layout/index.tsx +++ b/packages/li-editor/src/layout/index.tsx @@ -1,12 +1,12 @@ import { ConfigProvider, notification, Spin } from 'antd'; -import classNames from 'classnames'; +import cx from 'classnames'; import React, { useEffect } from 'react'; -import { useEditorDatasets, useEditorState } from '../hooks'; -import './index.less'; +import { useEditorDatasets, useEditorState, usePrefixCls } from '../hooks'; import type { RuntimeAppProps } from './RuntimeApp'; import RuntimeApp from './RuntimeApp'; import SideNav from './SideNav'; import SidePanel from './SidePanel'; +import useStyle from './style'; export type LayoutProps = RuntimeAppProps; @@ -22,6 +22,8 @@ const Layout: React.FC = (props) => { const [notificationApi, contextHolder] = notification.useNotification(); const { state } = useEditorState(); const { editorDatasets, isLoading } = useEditorDatasets(); + const prefixCls = usePrefixCls('editor-layout'); + const styles = useStyle(); useEffect(() => { editorDatasets.forEach((editorDataset) => { @@ -35,25 +37,25 @@ const Layout: React.FC = (props) => { }, [editorDatasets]); return ( -
+
{contextHolder} {isLoading && ( -
+
数据集加载中...
)} -
- +
+
- +
); }; diff --git a/packages/li-editor/src/layout/style.ts b/packages/li-editor/src/layout/style.ts new file mode 100644 index 00000000..32c4f867 --- /dev/null +++ b/packages/li-editor/src/layout/style.ts @@ -0,0 +1,88 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../hooks'; + +const useStyle = () => { + const { colorBgContainer, colorSplit, colorText, colorTextSecondary, borderRadius } = useAntdToken(); + + return { + editorLayout: css` + position: relative; + display: flex; + + /* 滚动条整体部分,必须要设置 */ + ::-webkit-scrollbar { + width: 7px; + height: 7px; + appearance: none; + } + + /* 滚动条的滑块按钮 */ + ::-webkit-scrollbar-thumb { + background: ${colorSplit}; + border-radius: 3px; + cursor: pointer; + + &:hover { + background-color: ${colorSplit}; + } + } + + /* 滚动条的轨道 */ + ::-webkit-scrollbar-track { + background: none; + border-radius: 0; + } + `, + + loading: css` + position: absolute; + top: 30px; + left: 50%; + z-index: 10; + display: flex; + align-items: center; + justify-content: space-around; + width: 180px; + margin-left: 50px; + padding: 15px; + color: ${colorTextSecondary}; + background-color: ${colorBgContainer}; + border-radius: ${borderRadius}; + `, + + left: css` + position: relative; + display: flex; + color: ${colorText}; + `, + + sideNav: css` + z-index: 2; + `, + + sidePanel: css` + z-index: 1; + width: 350px; + transition: width 50ms ease 0s; + + &_hidden { + width: 0; + visibility: hidden; + } + `, + + sidePanelHidden: css` + width: 0; + visibility: hidden; + `, + + cavans: css` + flex: 1; + overflow: hidden; + text-align: center; + transition: width 50ms ease 0s; + `, + }; +}; + +export default useStyle;