fix: remove load iconfont (#97)

* fix: update icons

* fix: remove load iconfont in designer

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: '工具函数',

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);

apps/storybook/src/setting-form.stories.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import { FormModel, SettingForm } from '@music163/tango-setting-form';
+import { FormModel, SettingForm, register } from '@music163/tango-setting-form';
 import { ComponentPrototypeType } from '@music163/tango-helpers';
+import { BorderSetter } from '@music163/tango-designer/src/setters/style-setter';
 import { Box } from 'coral-system';
 import { JsonView } from '@music163/tango-ui';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { Card } from 'antd';
 
+register({
+  name: 'borderSetter',
+  component: BorderSetter,
+});
+
 export default {
   title: 'SettingForm',
 };
@@ -26,6 +32,11 @@ const prototype: ComponentPrototypeType = {
       title: 'textSetter',
       setter: 'textSetter',
     },
+    {
+      name: 'border',
+      title: 'borderSetter',
+      setter: 'borderSetter',
+    },
     {
       name: 'router',
       title: 'routerSetter',

apps/storybook/src/ui/var-tree.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VariableTree } from '@music163/tango-designer/lib/cjs/components';
+import { VariableTree } from '@music163/tango-designer/src/components';
 import { Box } from 'coral-system';
 
 export default {

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}>

packages/designer/src/setters/choice-setter.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Radio, RadioProps, Tooltip } from 'antd';
-import { IconFont } from '@music163/tango-ui';
 import type { OptionType } from '@music163/tango-helpers';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 
@@ -11,15 +10,9 @@ interface ChoiceSetterProps {
 
 export function ChoiceSetter({
   options,
-  mode = 'text',
   onChange,
   ...props
 }: FormItemComponentProps<string> & ChoiceSetterProps) {
-  const renderLabel =
-    mode === 'text'
-      ? (item: OptionType) => item.label
-      : (item: OptionType) => <IconFont type={item.icon} />;
-
   return (
     <Radio.Group
       optionType="button"
@@ -31,7 +24,7 @@ export function ChoiceSetter({
     >
       {options.map((item) => (
         <RadioButton tip={item.tip} key={item.value} value={item.value}>
-          {renderLabel(item)}
+          {item.label}
         </RadioButton>
       ))}
     </Radio.Group>

packages/designer/src/setters/style-setter.tsx

@@ -3,8 +3,8 @@ import { Box, Grid, HTMLCoralProps } from 'coral-system';
 import { InputNumber, Dropdown, Input, Radio, Popover, Button } from 'antd';
 import { SketchPicker } from 'react-color';
 import Color from 'color';
-import { BgColorsOutlined, FileImageOutlined } from '@ant-design/icons';
-import { SingleMonacoEditor, IconFont } from '@music163/tango-ui';
+import { BgColorsOutlined, EyeInvisibleOutlined, FileImageOutlined } from '@ant-design/icons';
+import { SingleMonacoEditor, LineSolidOutlined, LineDashedOutlined } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { ChoiceSetter } from './choice-setter';
 import { TextSetter } from './text-setter';
@@ -34,7 +34,7 @@ export function CssCodeSetter({ value, onChange }: FormItemComponentProps<string
             value={contentValue}
             onBlur={(newCode) => {
               if (newCode != contentValue) {
-                onChange('{css`' + newCode + '`}', {
+                onChange(`{css\`${newCode}\`}`, {
                   // relatedImports: ['']
                 });
               }
@@ -258,7 +258,7 @@ export function SpacingSetter({ value, onChange }: FormItemComponentProps<string
     return (val: string) => {
       tempRef.current[index] = `${val}`;
       const str2px = tempRef.current.map((it) => {
-        return it + 'px';
+        return `${it}px`;
       });
       onChange(str2px.join(' '));
     };
@@ -388,15 +388,16 @@ export function BorderSetter({ value, onChange }: FormItemComponentProps<string>
             setStyle(e.target.value);
             handleChange('style', e.target.value);
           }}
+          buttonStyle="solid"
         >
           <Radio.Button value="none">
-            <IconFont type="icon-display-none" title="none" />
+            <EyeInvisibleOutlined />
           </Radio.Button>
           <Radio.Button value="solid">
-            <IconFont type="icon-fengexian" title="solid" />
+            <LineSolidOutlined />
           </Radio.Button>
           <Radio.Button value="dashed">
-            <IconFont type="icon-line-dashed" title="dashed" />
+            <LineDashedOutlined />
           </Radio.Button>
         </Radio.Group>
       </Label>

packages/ui/src/icons/index.ts

@@ -1,5 +1,7 @@
 export * from './create-icon';
 export * from './code-outlined';
+export * from './line-dashed-outlined';
+export * from './line-solid-outlined';
 export * from './open-panel-filled-left-outlined';
 export * from './open-panel-filled-right-outlined';
 export * from './open-panel-left-outlined';

packages/ui/src/icons/line-dashed-outlined.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const LineDashedOutlinedSvg = () => (
+  <svg
+    viewBox="0 0 1025 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+  >
+    <path d="M212.8 468.8H43.2C17.6 468.8 0 486.4 0 512s17.6 43.2 43.2 43.2h171.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2zM980.8 468.8H811.2c-25.6 0-43.2 17.6-43.2 43.2s17.6 43.2 43.2 43.2h171.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2zM596.8 468.8H427.2c-25.6 0-43.2 17.6-43.2 43.2s17.6 43.2 43.2 43.2h171.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2z" />
+  </svg>
+);
+
+export const LineDashedOutlined = createIcon(LineDashedOutlinedSvg, 'LineSolidOutlined');

packages/ui/src/icons/line-solid-outlined.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const LineSolidOutlinedSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+  >
+    <path d="M141.21142578 496.55047632h741.57714844v30.89904736H141.21142578z" />
+  </svg>
+);
+
+export const LineSolidOutlined = createIcon(LineSolidOutlinedSvg, 'LineSolidOutlined');