Pane 相关 bug fix

packages/editor-skeleton/src/components/widget-views.tsx

@@ -1,6 +1,7 @@
 import { Component, ReactElement } from 'react';
+import { Icon } from '@alifd/next';
 import classNames from 'classnames';
-import { Title, observer } from '@ali/lowcode-editor-core';
+import { Title, observer, Tip } from '@ali/lowcode-editor-core';
 import { DockProps } from '../types';
 import PanelDock from '../widget/panel-dock';
 import { composeTitle } from '../widget/utils';
@@ -21,6 +22,25 @@ export function DockView({ title, icon, description, size, className, onClick }:
   );
 }
 
+function HelpTip({ tip }: any) {
+  if (tip && tip.url) {
+    return (
+      <div>
+        <a href={tip.url} target="_blank" rel="noopener noreferrer">
+          <Icon type="help" size="small" className="lc-help-tip"/>
+        </a>
+        <Tip>{tip.content}</Tip>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <Icon type="help" size="small" className="lc-help-tip"/>
+      <Tip>{tip.content}</Tip>
+    </div>
+  )
+}
+
 @observer
 export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
   componentDidMount() {
@@ -196,7 +216,7 @@ class PanelTitle extends Component<{ panel: Panel; className?: string }> {
         data-name={panel.name}
       >
         <Title title={panel.title || panel.name} />
-        {/*pane.help ? <HelpTip tip={panel.help} /> : null*/}
+        {panel.help ? <HelpTip tip={panel.help} /> : null}
       </div>
     );
   }

packages/editor-skeleton/src/layouts/left-fixed-pane.tsx

@@ -13,21 +13,26 @@ export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, P
   }
   render() {
     const { area } = this.props;
+    const hideTitleBar = area.current?.config.props?.hideTitleBar;
     return (
       <div
         className={classNames('lc-left-fixed-pane', {
           'lc-area-visible': area.visible,
         })}
       >
-        <Button
-          text
-          className="lc-pane-close"
-          onClick={() => {
-            area.setVisible(false);
-          }}
-        >
-          <Icon type="close" />
-        </Button>
+        {
+          !hideTitleBar && (
+            <Button
+              text
+              className="lc-pane-close"
+              onClick={() => {
+                area.setVisible(false);
+              }}
+            >
+              <Icon type="close" />
+            </Button>
+          )
+        }
         <Contents area={area} />
       </div>
     );

packages/editor-skeleton/src/layouts/left-float-pane.tsx

@@ -32,6 +32,7 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
     // focusout remove focus
     // onEsc
     const width = area.current?.config.props?.width;
+    const hideTitleBar = area.current?.config.props?.hideTitleBar;
     const style = width ? {
       width
     } : undefined;
@@ -42,15 +43,19 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
         })}
         style={style}
       >
-        <Button
-          text
-          className="lc-pane-close"
-          onClick={() => {
-            area.setVisible(false);
-          }}
-        >
-          <Icon type="close" />
-        </Button>
+        {
+          !hideTitleBar && (
+            <Button
+              text
+              className="lc-pane-close"
+              onClick={() => {
+                area.setVisible(false);
+              }}
+            >
+              <Icon type="close" />
+            </Button>
+          )
+        }
         <Contents area={area} />
       </div>
     );

packages/editor-skeleton/src/layouts/theme.less

@@ -57,4 +57,6 @@
   --color-block-background-deep-dark: @normal-5;
   --color-layer-mask-background: @dark-alpha-7;
   --color-layer-tooltip-background: rgba(44,47,51,0.8);
+
+  --pane-title-bg-color: rgba(31,56,88,.04);
 }

packages/editor-skeleton/src/layouts/workbench.less

@@ -54,19 +54,25 @@ body {
     display: none;
   }
   .lc-panel-title {
-    height: 32px;
-    background-color: var(--pane-title-bg-color);
+    height: 38px;
+    font-size: 14px;
+    background-color: var(--pane-title-bg-color,rgba(31,56,88,.04));
     display: flex;
     align-items: center;
+    justify-content: center;
     padding: 0 15px;
+    border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
+
     .lc-help-tip {
       margin-left: 4px;
+      color: rgba(0,0,0,0.4);
+      cursor: pointer;
     }
   }
 
   .lc-panel-body {
     position: absolute;
-    top: 32px;
+    top: 38px;
     bottom: 0;
     left: 0;
     right: 0;

packages/editor-skeleton/src/widget/panel-dock.ts

@@ -64,7 +64,7 @@ export default class PanelDock implements IWidget {
         name: this.panelName,
         props: {
           // FIXME! give default title for panel
-          // title: props ? composeTitle(props?.title, props?.icon, props?.description, true) : '',
+          title: props ? composeTitle(props?.title, props?.icon, props?.description, true) : '',
           ...panelProps,
         },
         contentProps,

packages/vision-preset/src/panes.ts

@@ -1,6 +1,6 @@
 import { skeleton, editor } from './editor';
 import { ReactElement } from 'react';
-import { IWidgetBaseConfig } from '@ali/lowcode-editor-skeleton';
+import { IWidgetBaseConfig, Skeleton } from '@ali/lowcode-editor-skeleton';
 import { uniqueId } from '@ali/lowcode-utils';
 
 export interface IContentItemConfig {
@@ -85,6 +85,7 @@ function upgradeConfig(config: OldPaneConfig): IWidgetBaseConfig & { area: strin
     }
     if (!isAction) {
       newConfig.panelProps = {
+        title,
         hideTitleBar,
         help: tip,
         width,
@@ -156,6 +157,10 @@ const dockPane = Object.assign(skeleton.leftArea, {
    * compatible *VE.dockPane.activeDock*
    */
   activeDock(item: any) {
+    if (!item) {
+      skeleton.leftFloatArea?.current?.hide();
+      return;
+    }
     const name = item.name || item;
     skeleton.getPanel(name)?.active();
   },