feat: editor 升级 CSS In JS 主题变量

packages/li-editor/docs/case/Theme/demos/default.tsx

@@ -0,0 +1,35 @@
+import { LocationInsightEditor } from '@antv/li-editor';
+import type { Application } from '@antv/li-sdk';
+import { ConfigProvider, Layout } from 'antd';
+import zhCN from 'antd/es/locale/zh_CN';
+import 'dayjs/locale/zh-cn';
+import React from 'react';
+import defaultApplication from '../../../common/application';
+import MyAssets from '../../../common/my-assets';
+import { ANTD_DARK_THEME } from './theme';
+
+const assets = [MyAssets];
+
+export default () => {
+  const handleUpdate = (app: Application) => {
+    console.log('app: ', app);
+  };
+
+  return (
+    <ConfigProvider locale={zhCN} theme={ANTD_DARK_THEME}>
+      <Layout style={{ height: '100vh' }}>
+        <Layout.Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ width: '120px', height: '31px', background: 'rgba(255, 255, 255, 0.3)' }} />
+        </Layout.Header>
+        <Layout.Content>
+          <LocationInsightEditor
+            defaultApplication={defaultApplication}
+            assets={assets}
+            onChange={handleUpdate}
+            style={{ height: '100%' }}
+          />
+        </Layout.Content>
+      </Layout>
+    </ConfigProvider>
+  );
+};

packages/li-editor/docs/case/Theme/demos/switch.tsx

@@ -0,0 +1,49 @@
+import { LocationInsightEditor } from '@antv/li-editor';
+import type { Application } from '@antv/li-sdk';
+import { ConfigProvider, Layout, Segmented } from 'antd';
+import zhCN from 'antd/es/locale/zh_CN';
+import type { SegmentedValue } from 'antd/es/segmented';
+import 'dayjs/locale/zh-cn';
+import React, { useState } from 'react';
+import defaultApplication from '../../../common/application';
+import MyAssets from '../../../common/my-assets';
+import { ANTD_DARK_THEME, ANTD_DEFAULT_THEME } from './theme';
+
+const assets = [MyAssets];
+
+export default () => {
+  const [theme, setTheme] = useState(ANTD_DEFAULT_THEME);
+
+  const onThemeChange = (value: SegmentedValue) => {
+    setTheme(value === 'light' ? ANTD_DEFAULT_THEME : ANTD_DARK_THEME);
+  };
+  const handleUpdate = (app: Application) => {
+    console.log('app: ', app);
+  };
+
+  return (
+    <ConfigProvider locale={zhCN} theme={theme}>
+      <Layout style={{ height: '100vh' }}>
+        <Layout.Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ width: '120px', height: '31px', background: 'rgba(255, 255, 255, 0.3)' }} />
+          <Segmented
+            defaultValue="light"
+            options={[
+              { label: '亮色', value: 'light' },
+              { label: '暗色', value: 'dark' },
+            ]}
+            onChange={onThemeChange}
+          />
+        </Layout.Header>
+        <Layout.Content>
+          <LocationInsightEditor
+            defaultApplication={defaultApplication}
+            assets={assets}
+            onChange={handleUpdate}
+            style={{ height: '100%' }}
+          />
+        </Layout.Content>
+      </Layout>
+    </ConfigProvider>
+  );
+};

packages/li-editor/docs/case/Theme/demos/theme.ts

@@ -0,0 +1,16 @@
+import { theme } from 'antd';
+
+export const ANTD_DEFAULT_THEME = {
+  algorithm: theme.defaultAlgorithm,
+};
+
+export const ANTD_DARK_THEME = {
+  algorithm: theme.darkAlgorithm,
+  token: {
+    colorPrimary: '#8274FF',
+    colorTextBase: 'rgba(255,255,255,0.85)',
+    colorBgBase: '#0f0f13',
+    colorInfo: '#8274FF',
+    borderRadius: 6,
+  },
+};

packages/li-editor/docs/case/Theme/index.md

@@ -0,0 +1,11 @@
+---
+group:
+  title: 主题设置
+  order: 3
+title: 暗色主题
+toc: false
+mobile: false
+order: 1
+---
+
+<code src="./demos/default.tsx" iframe="70vh"></code>

packages/li-editor/docs/case/Theme/switch.md

@@ -0,0 +1,11 @@
+---
+group:
+  title: 主题设置
+  order: 3
+title: 主题切换
+toc: false
+mobile: false
+order: 2
+---
+
+<code src="./demos/switch.tsx" iframe="70vh"></code>

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",

packages/li-editor/src/components/EditName/index.tsx

@@ -2,7 +2,8 @@ import { EnterOutlined } from '@ant-design/icons';
 import { Input, message, Tooltip } from 'antd';
 import classnames from 'classnames';
 import React, { useCallback, useEffect, useState } from 'react';
-import './index.less';
+import { usePrefixCls } from '../../hooks';
+import useStyle from './style';
 
 type EditNameProps = {
   className?: string;
@@ -16,6 +17,8 @@ type EditNameProps = {
 export default ({ className, name, isEdit, onClick, onCancel, onChange }: EditNameProps) => {
   const [cacheName, setCacheName] = useState('');
   const [messageApi, messageContextHolder] = message.useMessage();
+  const prefixCls = usePrefixCls('title-name');
+  const styles = useStyle();
 
   const onSubmit = useCallback(() => {
     if (!cacheName) {
@@ -37,7 +40,7 @@ export default ({ className, name, isEdit, onClick, onCancel, onChange }: EditNa
   }, [isEdit, name]);
 
   return (
-    <div className={classnames('li-title-name', className)}>
+    <div className={classnames(`${prefixCls}`, styles.titleName, className)}>
       {messageContextHolder}
       {isEdit ? (
         <Input
@@ -52,8 +55,8 @@ export default ({ className, name, isEdit, onClick, onCancel, onChange }: EditNa
           onBlur={onCancel}
         />
       ) : (
-        <span className="li-title-name__text">
-          <span className="li-title-name__title" onClick={onClick}>
+        <span className={classnames(`${prefixCls}__text`, styles.titleNameText)}>
+          <span className={classnames(`${prefixCls}__title`, styles.titleNameTitle)} onClick={onClick}>
             <Tooltip title={name}>{name}</Tooltip>
           </span>
         </span>

packages/li-editor/src/components/EditName/style.ts

@@ -0,0 +1,25 @@
+import { css } from '@emotion/css';
+
+const useStyle = () => {
+  return {
+    titleName: css`
+      display: flex;
+    `,
+
+    titleNameText: css`
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      justify-content: space-between;
+      max-width: 180px;
+    `,
+
+    titleNameTitle: css`
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    `,
+  };
+};
+
+export default useStyle;

packages/li-editor/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useEditorState';
 export * from './useEditor';
 export * from './useEditorDatasets';
+export * from './useAntdToken';

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 ?? ''}`;
+};

packages/li-editor/src/layout/SideNav/NavMenu/index.tsx

@@ -1,8 +1,9 @@
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
+import { usePrefixCls } from '../../../hooks';
 import type { NavMenuItem } from '../../../types/menu';
-import './index.less';
+import useStyle from './style';
 
 export type NavMenuProps = {
   className?: string;
@@ -13,9 +14,11 @@ export type NavMenuProps = {
 
 const NavMenu: React.FC<NavMenuProps> = (props) => {
   const { className, selectedKey, items, onChange } = props;
+  const prefixCls = usePrefixCls('nav-menu');
+  const styles = useStyle();
 
   return (
-    <ul className={classNames('li-nav-menu', className)}>
+    <ul className={classNames(prefixCls, styles.navMenu, className)}>
       {items.map((item) => {
         const { icon, key, name } = item;
         const isActive = key === selectedKey;
@@ -26,11 +29,12 @@ const NavMenu: React.FC<NavMenuProps> = (props) => {
               onClick={() => {
                 onChange(item.key);
               }}
-              className={classNames('li-nav-menu__item', {
-                ['li-nav-menu__item_active']: isActive,
+              className={classNames(`${prefixCls}__item`, styles.menuItem, {
+                [styles.menuItemActive]: isActive,
+                [`${prefixCls}__item-active`]: isActive,
               })}
             >
-              <span className="li-nav-menu__item-icon">{icon}</span>
+              <span className={classNames(`${prefixCls}__item-icon`, styles.menuItemIcon, className)}>{icon}</span>
               {/* <span className='li-nav-menu__item-icon'>{name}</span> */}
             </li>
           </Tooltip>