From 007e4ce47e4dca14703db705748295c3df8940a9 Mon Sep 17 00:00:00 2001
From: kangwei <bingbing.yb@alibaba-inc.com>
Date: Tue, 21 Apr 2020 21:54:27 +0800
Subject: [PATCH] fix outline

---
 packages/plugin-outline-pane/src/index.ts     |  6 ++++--
 .../src/settings/main-view.tsx                |  2 +-
 packages/vision-polyfill/src/editor.ts        | 21 +------------------
 .../src/skeleton/panel-dock.ts                |  8 +++++--
 .../vision-polyfill/src/skeleton/utils.ts     |  4 ++--
 .../src/skeleton/workbench.less               |  6 +++---
 6 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/packages/plugin-outline-pane/src/index.ts b/packages/plugin-outline-pane/src/index.ts
index f0ec0d741..25382de93 100644
--- a/packages/plugin-outline-pane/src/index.ts
+++ b/packages/plugin-outline-pane/src/index.ts
@@ -4,8 +4,10 @@ import { intl } from './locale';
 
 export default {
   name: 'outline-pane',
-  icon: IconOutline,
-  description: intl('Outline Tree'),
+  props: {
+    icon: IconOutline,
+    description: intl('Outline Tree'),
+  },
   content: Pane,
 };
 
diff --git a/packages/plugin-settings-pane/src/settings/main-view.tsx b/packages/plugin-settings-pane/src/settings/main-view.tsx
index b74f55eea..9acfce688 100644
--- a/packages/plugin-settings-pane/src/settings/main-view.tsx
+++ b/packages/plugin-settings-pane/src/settings/main-view.tsx
@@ -2,7 +2,7 @@ import React, { Component, PureComponent } from 'react';
 import { Tab, Breadcrumb } from '@alifd/next';
 import { Title, createIcon, observer } from '@ali/lowcode-globals';
 import { Node } from '@ali/lowcode-designer';
-import OutlinePane from '@ali/lowcode-plugin-outline-pane';
+import { Pane as OutlinePane } from '@ali/lowcode-plugin-outline-pane';
 import Editor from '@ali/lowcode-editor-core';
 import { SettingsMain } from './main';
 import SettingsPane from './settings-pane';
diff --git a/packages/vision-polyfill/src/editor.ts b/packages/vision-polyfill/src/editor.ts
index 050a6a33a..5db644ed7 100644
--- a/packages/vision-polyfill/src/editor.ts
+++ b/packages/vision-polyfill/src/editor.ts
@@ -36,20 +36,13 @@ skeleton.rightArea.add({
 skeleton.leftArea.add({
   name: 'outlinePane',
   type: 'PanelDock',
-  props: {
-    align: 'top',
-    icon: 'toggle-right',
-    description: '大纲树',
-  },
-  content: Pane,
+  ...Outline,
   panelProps: {
     area: 'leftFixedArea',
   },
 });
 
-
 // demo
-
 skeleton.leftArea.add({
   name: 'icon1',
   type: 'Dock',
@@ -131,15 +124,3 @@ skeleton.topArea.add({
     }
   }),
 });
-// 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/panel-dock.ts b/packages/vision-polyfill/src/skeleton/panel-dock.ts
index f7d786ec3..649c2715c 100644
--- a/packages/vision-polyfill/src/skeleton/panel-dock.ts
+++ b/packages/vision-polyfill/src/skeleton/panel-dock.ts
@@ -5,6 +5,7 @@ import { PanelDockConfig } from './types';
 import Panel from './panel';
 import { PanelDockView, WidgetView } from './widget-views';
 import { IWidget } from './widget';
+import { composeTitle } from './utils';
 
 export default class PanelDock implements IWidget {
   readonly isWidget = true;
@@ -52,7 +53,7 @@ export default class PanelDock implements IWidget {
   }
 
   constructor(readonly skeleton: Skeleton, private config: PanelDockConfig) {
-    const { content, contentProps, panelProps, name } = config;
+    const { content, contentProps, panelProps, name, props } = config;
     this.name = name;
     this.id = uniqueId(`dock:${name}$`);
     this.panelName = config.panelName || name;
@@ -60,7 +61,10 @@ export default class PanelDock implements IWidget {
       this._panel = this.skeleton.add({
         type: "Panel",
         name: this.panelName,
-        props: panelProps || {},
+        props: {
+          // title: props ? composeTitle(props?.title, props?.icon, props?.description, true) : '',
+          ...panelProps,
+        },
         contentProps,
         content,
         // FIXME! dirty fixed
diff --git a/packages/vision-polyfill/src/skeleton/utils.ts b/packages/vision-polyfill/src/skeleton/utils.ts
index 2f665a0bb..9e37468ad 100644
--- a/packages/vision-polyfill/src/skeleton/utils.ts
+++ b/packages/vision-polyfill/src/skeleton/utils.ts
@@ -1,10 +1,10 @@
 import { IconType, TitleContent, I18nData, isI18nData } from '@ali/lowcode-globals';
 import { isValidElement } from 'react';
 
-export function composeTitle(title?: TitleContent, icon?: IconType, tip?: string | I18nData) {
+export function composeTitle(title?: TitleContent, icon?: IconType, tip?: string | I18nData, tipAsTitle?: boolean) {
   if (!title) {
     title = {};
-    if (!icon) {
+    if (!icon || tipAsTitle) {
       title.label = tip;
       tip = undefined;
     }
diff --git a/packages/vision-polyfill/src/skeleton/workbench.less b/packages/vision-polyfill/src/skeleton/workbench.less
index a647047e4..b280c5e45 100644
--- a/packages/vision-polyfill/src/skeleton/workbench.less
+++ b/packages/vision-polyfill/src/skeleton/workbench.less
@@ -278,16 +278,16 @@ body {
       height: 100%;
       display: none;
       flex-shrink: 0;
-      padding-top: 36px;
       position: relative;
       &.lc-area-visible {
         display: block;
       }
-      .lc-pane-close{
+      .lc-pane-close {
         position: absolute;
         right: 10px;
         top: 6px;
-        .next-icon{
+        z-index: 2;
+        .next-icon {
           line-height: 1;
         }
       }