style: layout 升级主题变量

antvis · Jan 10, 2024 · c0e2827 · c0e2827
1 parent 72c2de1
commit c0e2827
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 84 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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<LayoutProps> = (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<LayoutProps> = (props) => {
   }, [editorDatasets]);
 
   return (
-    <div className={classNames('li-editor', 'li-editor-layout', className)} style={style}>
+    <div className={cx(`${prefixCls}`, styles.editorLayout, className)} style={style}>
       <ConfigProvider theme={DefaultTheme}>
         {contextHolder}
         {isLoading && (
-          <div className="li-editor-layout__loading">
+          <div className={cx(`${prefixCls}__loading`, styles.loading)}>
             <Spin />
             <span>数据集加载中...</span>
           </div>
         )}
-        <div className="li-editor-layout__left">
-          <SideNav className="li-editor-layout__side-nav" />
+        <div className={cx(`${prefixCls}__left`, styles.left)}>
+          <SideNav className={cx(`${prefixCls}__side-nav`, styles.sideNav)} />
           <SidePanel
-            className={classNames('li-editor-layout__side-panel', {
-              'li-editor-layout__side-panel_hidden': state.collapsed,
+            className={cx(`${prefixCls}__side-panel`, styles.sidePanel, {
+              [styles.sidePanelHidden]: state.collapsed,
             })}
           />
         </div>
       </ConfigProvider>
-      <RuntimeApp className="li-editor-layout__cavans" App={App} />
+      <RuntimeApp className={cx(`${prefixCls}__cavans`, styles.cavans)} App={App} />
     </div>
   );
 };

diff --git a/packages/li-editor/src/layout/style.ts 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;