diff --git a/apps/playground/src/helpers/index.tsx b/apps/playground/src/helpers/index.tsx index 160b9c7e..2994fa76 100644 --- 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 index 470cdc8b..29dc3632 100644 --- 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/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx index cbebfa46..385cf38c 100644 --- a/apps/storybook/src/setting-form.stories.tsx +++ b/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', diff --git a/apps/storybook/src/ui/var-tree.stories.tsx b/apps/storybook/src/ui/var-tree.stories.tsx index 457ff95d..3f76f661 100644 --- a/apps/storybook/src/ui/var-tree.stories.tsx +++ b/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 { diff --git a/packages/designer/src/designer.tsx b/packages/designer/src/designer.tsx index 83c74169..3f6a46ce 100644 --- 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 ( diff --git a/packages/designer/src/setters/choice-setter.tsx b/packages/designer/src/setters/choice-setter.tsx index 7deb82ff..eb7a2c20 100644 --- a/packages/designer/src/setters/choice-setter.tsx +++ b/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 & ChoiceSetterProps) { - const renderLabel = - mode === 'text' - ? (item: OptionType) => item.label - : (item: OptionType) => ; - return ( {options.map((item) => ( - {renderLabel(item)} + {item.label} ))} diff --git a/packages/designer/src/setters/style-setter.tsx b/packages/designer/src/setters/style-setter.tsx index 42e43466..d4b1937d 100644 --- a/packages/designer/src/setters/style-setter.tsx +++ b/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 { if (newCode != contentValue) { - onChange('{css`' + newCode + '`}', { + onChange(`{css\`${newCode}\`}`, { // relatedImports: [''] }); } @@ -258,7 +258,7 @@ export function SpacingSetter({ value, onChange }: FormItemComponentProps { 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 setStyle(e.target.value); handleChange('style', e.target.value); }} + buttonStyle="solid" > - + - + - + diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts index 8836e51e..a7afb06a 100644 --- a/packages/ui/src/icons/index.ts +++ b/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'; diff --git a/packages/ui/src/icons/line-dashed-outlined.tsx b/packages/ui/src/icons/line-dashed-outlined.tsx new file mode 100644 index 00000000..460d6d5b --- /dev/null +++ b/packages/ui/src/icons/line-dashed-outlined.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { createIcon } from './create-icon'; + +const LineDashedOutlinedSvg = () => ( + + + +); + +export const LineDashedOutlined = createIcon(LineDashedOutlinedSvg, 'LineSolidOutlined'); diff --git a/packages/ui/src/icons/line-solid-outlined.tsx b/packages/ui/src/icons/line-solid-outlined.tsx new file mode 100644 index 00000000..4cc45301 --- /dev/null +++ b/packages/ui/src/icons/line-solid-outlined.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { createIcon } from './create-icon'; + +const LineSolidOutlinedSvg = () => ( + + + +); + +export const LineSolidOutlined = createIcon(LineSolidOutlinedSvg, 'LineSolidOutlined');