From 661d98dfbb5dc9d6170af40b99da1545470b71a3 Mon Sep 17 00:00:00 2001
From: "wuyue.xht" <wuyue.xht@alibaba-inc.com>
Date: Tue, 12 May 2020 21:12:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81body=E5=92=8C?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vision-preset/src/editor.ts | 58 ++++++++++++++++++----------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/packages/vision-preset/src/editor.ts b/packages/vision-preset/src/editor.ts
index 56b3df925..0811665fd 100644
--- a/packages/vision-preset/src/editor.ts
+++ b/packages/vision-preset/src/editor.ts
@@ -74,32 +74,48 @@ designer.addPropsReducer(upgradePropsReducer, TransformStage.Init);
 // 设计器组件样式处理
 function stylePropsReducer(props: any, node: any) {
   if (props && typeof props === 'object' && props.__style__) {
-    const doc = designer.currentDocument?.simulator?.contentDocument;
-    if (!doc) {
-      return;
-    }
     const cssId = '_style_pesudo_' + node.id.replace(/\$/g, '_');
     const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_');
-    const dom = doc.getElementById(cssId);
-    if (dom) {
-      dom.parentNode?.removeChild(dom);
-    }
-    let styleProp = props.__style__;
-    if (typeof styleProp === 'object') {
-      styleProp = toCss(styleProp);
-    }
-    if (typeof styleProp === 'string') {
-      const s = doc.createElement('style');
-      props.className = cssClass;
-      s.setAttribute('type', 'text/css');
-      s.setAttribute('id', cssId);
-      doc.getElementsByTagName('head')[0].appendChild(s);
-
-      s.appendChild(doc.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
-    }
+    const styleProp = props.__style__;
+    appendStyleNode(props, styleProp, cssClass, cssId);
+  }
+  if (props && typeof props === 'object' && props.pageStyle) {
+    const cssId = '_style_pesudo_engine-document';
+    const cssClass = 'engine-document';
+    const styleProp = props.pageStyle;
+    appendStyleNode(props, styleProp, cssClass, cssId);
+  }
+  if (props && typeof props === 'object' && props.containerStyle) {
+    const cssId = '_style_pesudo_' + node.id;
+    const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_');
+    const styleProp = props.containerStyle;
+    appendStyleNode(props, styleProp, cssClass, cssId);
   }
   return props;
 }
+
+function appendStyleNode(props: any, styleProp: any, cssClass: string, cssId: string) {
+  const doc = designer.currentDocument?.simulator?.contentDocument;
+  if (!doc) {
+    return;
+  }
+  const dom = doc.getElementById(cssId);
+  if (dom) {
+    dom.parentNode?.removeChild(dom);
+  }
+  if (typeof styleProp === 'object') {
+    styleProp = toCss(styleProp);
+  }
+  if (typeof styleProp === 'string') {
+    const s = doc.createElement('style');
+    props.className = cssClass;
+    s.setAttribute('type', 'text/css');
+    s.setAttribute('id', cssId);
+    doc.getElementsByTagName('head')[0].appendChild(s);
+
+    s.appendChild(doc.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
+  }
+}
 designer.addPropsReducer(stylePropsReducer, TransformStage.Render);
 
 // FIXME: 表达式使用 mock 值，未来live 模式直接使用原始值