fix: remove load iconfont in designer

NetEase · Jan 26, 2024 · 3ea9b3e · 3ea9b3e
1 parent cdcb3dc
commit 3ea9b3e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 23 deletions.
diff --git a/apps/playground/src/helpers/index.tsx b/apps/playground/src/helpers/index.tsx
@@ -3,12 +3,12 @@ import { Box, Group } from 'coral-system';
 import { Avatar, Space, Switch } from 'antd';
 import { BranchesOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { registerSetter } from '@music163/tango-designer';
-import type { ComponentPrototypeType } from '@music163/tango-helpers';
+import type { ComponentPrototypeType, IVariableTreeNode } from '@music163/tango-helpers';
 import { FooSetter } from '../components';
 
 export * from './mock-files';
 
-export const bootHelperVariables = [
+export const bootHelperVariables: IVariableTreeNode[] = [
   {
     key: '$helpers',
     title: '工具函数',

diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx
@@ -22,6 +22,7 @@ import {
   BuildOutlined,
   ClusterOutlined,
   FunctionOutlined,
+  createFromIconfontCN,
 } from '@ant-design/icons';
 
 // 1. 实例化工作区
@@ -38,12 +39,18 @@ const engine = createEngine({
 // @ts-ignore
 window.__workspace__ = workspace;
 
+// 3. 沙箱初始化
 const sandboxQuery = new DndQuery({
   context: 'iframe',
 });
 
+// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js',
+});
+
 /**
- * 3. 平台初始化，访问 https://local.netease.com:6006/
+ * 5. 平台初始化，访问 https://local.netease.com:6006/
  */
 export default function App() {
   const [menuLoading, setMenuLoading] = useState(true);

diff --git a/packages/designer/src/designer.tsx b/packages/designer/src/designer.tsx
@@ -1,8 +1,7 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { SystemProvider, extendTheme } from 'coral-system';
 import { ConfigProvider } from 'antd';
 import { TangoEngineProvider, ITangoEngineContext } from '@music163/tango-context';
-import { createFromIconfontCN } from '@ant-design/icons';
 import zhCN from 'antd/lib/locale/zh_CN';
 import { DesignerProvider, IDesignerContext } from './context';
 import defaultTheme from './themes/default';
@@ -12,10 +11,6 @@ export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
    * 主题包
    */
   theme?: any;
-  /**
-   * 自定义图表库svg脚本地址
-   */
-  iconfontScriptUrl?: string;
   children?: React.ReactNode;
 }
 
@@ -25,21 +20,8 @@ export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
  * @returns
  */
 export function Designer(props: DesignerProps) {
-  const {
-    engine,
-    config,
-    theme: themeProp,
-    sandboxQuery,
-    remoteServices = {},
-    iconfontScriptUrl = '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js',
-    children,
-  } = props;
+  const { engine, config, theme: themeProp, sandboxQuery, remoteServices = {}, children } = props;
   const theme = useMemo(() => extendTheme(themeProp, defaultTheme), [themeProp]);
-  useEffect(() => {
-    createFromIconfontCN({
-      scriptUrl: iconfontScriptUrl,
-    });
-  }, [iconfontScriptUrl]);
   return (
     <SystemProvider theme={theme} prefix="--tango">
       <ConfigProvider locale={zhCN}>