From c48846dbaeddf2df672e0c87270ff79a2a79ac75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=B1=E5=86=A0?= <qianshan.wengqs@alibaba-inc.com>
Date: Tue, 21 Apr 2020 20:39:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20polyfill=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vision-polyfill/src/editor.ts        | 71 +++++++++++++------
 .../vision-polyfill/src/skeleton/top-area.tsx |  4 +-
 .../src/skeleton/workbench.less               | 17 ++++-
 3 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/packages/vision-polyfill/src/editor.ts b/packages/vision-polyfill/src/editor.ts
index 19ee71068..050a6a33a 100644
--- a/packages/vision-polyfill/src/editor.ts
+++ b/packages/vision-polyfill/src/editor.ts
@@ -10,6 +10,7 @@ import { Skeleton } from './skeleton/skeleton';
 // demo
 import Preview from '@ali/lowcode-plugin-sample-preview';
 import { createElement } from 'react';
+import { Button } from '@alifd/next';
 
 registerSetters();
 
@@ -37,13 +38,12 @@ skeleton.leftArea.add({
   type: 'PanelDock',
   props: {
     align: 'top',
-    icon: 'smile',
+    icon: 'toggle-right',
     description: '大纲树',
   },
   content: Pane,
   panelProps: {
     area: 'leftFixedArea',
-    // title: 'awefawe',
   },
 });
 
@@ -55,8 +55,8 @@ skeleton.leftArea.add({
   type: 'Dock',
   props: {
     align: 'bottom',
-    icon: 'smile',
-    description: 'smile1',
+    icon: 'set',
+    description: '设置',
   }
 });
 skeleton.leftArea.add({
@@ -64,8 +64,8 @@ skeleton.leftArea.add({
   type: 'Dock',
   props: {
     align: 'bottom',
-    icon: 'smile',
-    description: 'smile1',
+    icon: 'help',
+    description: '帮助',
   }
 });
 
@@ -75,13 +75,40 @@ skeleton.topArea.add({
   props: {
     align: "right",
   },
-  content: Preview,
+  content: createElement(Button, {
+    size: 'small',
+    children: '预览'
+  }),
+});
+skeleton.topArea.add({
+  type: "Dock",
+  name: 'publish',
+  props: {
+    align: "right",
+  },
+  content: createElement(Button, {
+    size: 'small',
+    type: 'secondary',
+    children: '发布'
+  }),
+});
+skeleton.topArea.add({
+  type: "Dock",
+  name: 'save',
+  props: {
+    align: "right",
+  },
+  content: createElement(Button, {
+    size: 'small',
+    type: 'primary',
+    children: '保存'
+  }),
 });
 skeleton.topArea.add({
   type: "Dock",
   name: 'preview4',
   props: {
-    align: "right",
+    align: "center",
   },
   content: createElement('img', {
     src: "https://img.alicdn.com/tfs/TB1WW.VC.z1gK0jSZLeXXb9kVXa-486-64.png",
@@ -98,21 +125,21 @@ skeleton.topArea.add({
     align: "left",
   },
   content: createElement('img', {
-    src: "https://img.alicdn.com/tfs/TB11koUC8v0gK0jSZKbXXbK2FXa-426-76.png",
+    src: "https://img.alicdn.com/tfs/TB1zqBfDlr0gK0jSZFnXXbRRXXa-440-64.png",
     style: {
-      height: 38
+      height: 32
     }
   }),
 });
-skeleton.topArea.add({
-  type: "Dock",
-  name: 'preview2',
-  props: {
-    align: "center",
-    title: {
-      label: "345",
-      icon: "smile",
-      tip: "123123123"
-    }
-  },
-})
+// skeleton.topArea.add({
+//   type: "Dock",
+//   name: 'preview2',
+//   props: {
+//     align: "center",
+//     title: {
+//       label: "345",
+//       icon: "smile",
+//       tip: "123123123"
+//     }
+//   },
+// })
diff --git a/packages/vision-polyfill/src/skeleton/top-area.tsx b/packages/vision-polyfill/src/skeleton/top-area.tsx
index 2b39b1fbb..d1c3812d2 100644
--- a/packages/vision-polyfill/src/skeleton/top-area.tsx
+++ b/packages/vision-polyfill/src/skeleton/top-area.tsx
@@ -28,9 +28,9 @@ class Contents extends Component<{ area: Area }> {
       if (item.align === 'center') {
         center.push(item.content);
       } else if (item.align === 'left') {
-        right.push(item.content);
-      } else {
         left.push(item.content);
+      } else {
+        right.push(item.content);
       }
     });
     return (
diff --git a/packages/vision-polyfill/src/skeleton/workbench.less b/packages/vision-polyfill/src/skeleton/workbench.less
index b08d5616a..a647047e4 100644
--- a/packages/vision-polyfill/src/skeleton/workbench.less
+++ b/packages/vision-polyfill/src/skeleton/workbench.less
@@ -185,7 +185,22 @@ body {
     width: 100%;
     display: flex;
     margin-bottom: 2px;
-    padding: 8px 16px;
+    padding: 8px 12px 8px 16px;
+    .lc-top-area-left{}
+    .lc-top-area-center{
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 8px;
+    }
+    .lc-top-area-right{
+      display: flex;
+      align-items: center;
+      >* {
+        margin-left: 4px;
+        margin-right: 4px;
+      }
+    }
   }
   .lc-workbench-body {
     flex: 1;