diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less index 4efca072d..e87427624 100644 --- a/packages/editor-skeleton/src/layouts/workbench.less +++ b/packages/editor-skeleton/src/layouts/workbench.less @@ -268,6 +268,13 @@ body { .lc-title{ padding: 12px; flex-direction: column; + width: 46px; + height: 46px; + + svg { + fill: var(--color-icon-normal,rgba(31,56,88,.4)); + } + &.has-tip{ cursor: pointer; } diff --git a/packages/react-simulator-renderer/package.json b/packages/react-simulator-renderer/package.json index d031eb62c..b62d92110 100644 --- a/packages/react-simulator-renderer/package.json +++ b/packages/react-simulator-renderer/package.json @@ -21,6 +21,7 @@ "@recore/obx-react": "^1.0.7", "classnames": "^2.2.6", "react": "^16", + "@ali/vu-css-style": "^1.0.2", "react-dom": "^16.7.0" }, "devDependencies": { diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index e964c2be9..f8ad8c747 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -1,9 +1,11 @@ import LowCodeRenderer from '@ali/lowcode-react-renderer'; +import { isObject } from 'lodash'; import { ReactInstance, Fragment, Component, createElement } from 'react'; import { observer } from '@recore/obx-react'; import { SimulatorRenderer } from './renderer'; import { host } from './host'; import './renderer.less'; +import { toCss } from '@ali/vu-css-style'; // patch cloneElement avoid lost keyProps const originCloneElement = window.React.cloneElement; @@ -84,6 +86,10 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> { const { __id, __desingMode, ...viewProps } = props; viewProps.componentId = __id; viewProps._leaf = host.document.getNode(__id); + + // FIXME: 此处未来使用propsReducer方式处理 + this.createNodeStyleSheet(viewProps); + return createElement( Component, viewProps, @@ -99,4 +105,28 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> { /> ); } + createNodeStyleSheet(props: any) { + if (props && props.fieldId) { + let styleProp = props.__style__; + + if (isObject(styleProp)) { + styleProp = toCss(styleProp); + } + + if (typeof styleProp === 'string') { + const s = document.createElement('style'); + const cssId = '_style_pesudo_' + props.fieldId; + const cssClass = '_css_pesudo_' + props.fieldId; + + props.className = cssClass; + s.setAttribute('type', 'text/css'); + s.setAttribute('id', cssId); + document.getElementsByTagName('head')[0].appendChild(s); + + s.appendChild(document.createTextNode(styleProp.replace(/:root/g, '.' + cssClass))); + + return s; + } + } + } }