feat: 🎸 polyfill style

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',
+    icon: 'set',
-    description: 'smile1',
+    description: '设置',
   }
 });
 skeleton.leftArea.add({
@@ -64,8 +64,8 @@ skeleton.leftArea.add({
   type: 'Dock',
   props: {
     align: 'bottom',
-    icon: 'smile',
+    icon: 'help',
-    description: 'smile1',
+    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({
+// skeleton.topArea.add({
-  type: "Dock",
+//   type: "Dock",
-  name: 'preview2',
+//   name: 'preview2',
-  props: {
+//   props: {
-    align: "center",
+//     align: "center",
-    title: {
+//     title: {
-      label: "345",
+//       label: "345",
-      icon: "smile",
+//       icon: "smile",
-      tip: "123123123"
+//       tip: "123123123"
-    }
+//     }
-  },
+//   },
-})
+// })

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 (

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;