feat: support float pane fixed

packages/editor-skeleton/src/area.ts

@@ -34,6 +34,10 @@ export default class Area<C extends IWidgetBaseConfig = any, T extends IWidget =
     return this.container.add(config);
   }
 
+  remove(config: T | string): number {
+    return this.container.remove(config);
+  }
+
   private lastCurrent: T | null = null;
   setVisible(flag: boolean) {
     if (this.exclusive) {

packages/editor-skeleton/src/icons/fix.tsx

@@ -0,0 +1,11 @@
+import { SVGIcon, IconProps } from "@ali/lowcode-utils";
+
+export function IconFix(props: IconProps) {
+  return (
+    <SVGIcon viewBox="0 0 1024 1024" {...props}>
+      <path d="M750.848 28.928l245.248 242.944a66.048 66.048 0 1 1-93.184 93.184l-25.6-19.456-249.6 353.792 78.336 78.336a66.048 66.048 0 0 1-93.184 92.672l-460.8-464.64a66.048 66.048 0 0 1 93.184-93.184l76.8 78.336 354.048-249.856-18.176-18.944a66.048 66.048 0 1 1 93.184-93.184zM380.672 732.416l-91.904-90.88c-74.24 89.6-191.488 219.904-212.736 247.04a419.84 419.84 0 0 0-70.656 128 419.84 419.84 0 0 0 128-70.144c27.136-21.248 157.44-138.496 246.528-214.016z"></path>
+    </SVGIcon>
+  );
+}
+
+IconFix.displayName = 'Fix';

packages/editor-skeleton/src/icons/float.tsx

@@ -0,0 +1,12 @@
+import { SVGIcon, IconProps } from "@ali/lowcode-utils";
+
+export function IconFloat(props: IconProps) {
+  return (
+    <SVGIcon viewBox="0 0 1024 1024" {...props}>
+      <path d="M160.256 816.64C116.224 872.448 102.4 921.6 102.4 921.6s49.152-13.824 104.96-57.856c22.016-17.408 128-112.64 200.704-174.08l-73.728-73.728c-61.44 72.704-157.184 178.688-174.08 200.704zM648.704 209.408L442.368 355.328l226.304 226.304 145.92-206.336 15.872 15.872c20.992 20.992 54.784 20.992 75.776 0s20.992-54.784 0-75.776l-197.12-197.12c-20.992-20.992-54.784-20.992-75.776 0-20.992 20.992-20.992 54.784 0 75.776l15.36 15.36zM247.808 334.848c-9.728 2.048-18.944 6.656-26.624 14.336-20.992 20.992-20.992 54.784 0 75.776l377.856 377.856c20.992 20.992 54.784 20.992 75.776 0 7.68-7.68 12.288-16.896 14.336-26.624L247.808 334.848z"></path>
+      <path d="M840.704 879.104c-9.728 0-19.456-3.584-27.136-11.264L155.648 210.432c-14.848-14.848-14.848-39.424 0-54.272 14.848-14.848 39.424-14.848 54.272 0L867.84 814.08c14.848 14.848 14.848 39.424 0 54.272-7.168 7.168-16.896 10.752-27.136 10.752z"></path>
+    </SVGIcon>
+  );
+}
+
+IconFloat.displayName = 'Float';

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

@@ -6,16 +6,31 @@ import Area from '../area';
 import { PanelConfig } from '../types';
 import Panel from '../widget/panel';
 import { Designer } from '@ali/lowcode-designer';
+import { IconFloat } from '../icons/float';
 
 @observer
 export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, Panel> }> {
   shouldComponentUpdate() {
     return false;
   }
+
   componentDidUpdate() {
     // FIXME: dirty fix, need deep think
     this.props.area.skeleton.editor.get(Designer)?.touchOffsetObserver();
   }
+
+  // 取消固定
+  setFloat() {
+    const { area } = this.props;
+    const { current } = area;
+    if (!current) {
+      return;
+    }
+    area.skeleton.leftFixedArea.remove(current);
+    area.skeleton.leftFloatArea.add(current);
+    area.skeleton.leftFloatArea.container.active(current);
+  }
+
   render() {
     const { area } = this.props;
     const hideTitleBar = area.current?.config.props?.hideTitleBar;
@@ -26,15 +41,24 @@ export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, P
         })}
       >
         {!hideTitleBar && (
-          <Button
+          <Fragment>
-            text
+            <Button
-            className="lc-pane-close"
+              text
-            onClick={() => {
+              className="lc-pane-icon-float"
-              area.setVisible(false);
+              onClick={this.setFloat.bind(this)}
-            }}
+            >
-          >
+              <IconFloat />
-            <Icon type="close" />
+            </Button>
-          </Button>
+            <Button
+              text
+              className="lc-pane-icon-close"
+              onClick={() => {
+                area.setVisible(false);
+              }}
+            >
+              <Icon type="close" />
+            </Button>
+          </Fragment>
         )}
         <Contents area={area} />
       </div>

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

@@ -2,6 +2,7 @@ import { Component, Fragment } from 'react';
 import classNames from 'classnames';
 import { observer, Focusable, focusTracker } from '@ali/lowcode-editor-core';
 import { Button, Icon } from '@alifd/next';
+import { IconFix } from '../icons/fix';
 import Area from '../area';
 import Panel from '../widget/panel';
 
@@ -76,6 +77,18 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
     this.dispose?.();
   }
 
+  // 固定
+  setFixed() {
+    const { area } = this.props;
+    const { current } = area;
+    if (!current) {
+      return;
+    }
+    area.skeleton.leftFloatArea.remove(current);
+    area.skeleton.leftFixedArea.add(current);
+    area.skeleton.leftFixedArea.container.active(current);
+  }
+
   render() {
     const { area } = this.props;
     const width = area.current?.config.props?.width;
@@ -93,15 +106,24 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
       >
         {
           !hideTitleBar && (
-            <Button
+            <Fragment>
-              text
+              <Button
-              className="lc-pane-close"
+                text
-              onClick={() => {
+                className="lc-pane-icon-fix"
-                area.setVisible(false);
+                onClick={this.setFixed.bind(this)}
-              }}
+              >
-            >
+                <IconFix />
-              <Icon type="close" />
+              </Button>
-            </Button>
+              <Button
+                text
+                className="lc-pane-icon-close"
+                onClick={() => {
+                  area.setVisible(false);
+                }}
+              >
+                <Icon type="close" />
+              </Button>
+            </Fragment>
           )
         }
         <Contents area={area} />

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

@@ -171,6 +171,65 @@ body {
     display: flex;
     min-height: 0;
     position: relative;
+
+    .lc-tabs-title {
+      width: 100%;
+      height: 32px;
+      position: relative;
+      display: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      // background: rgba(31,56,88,0.04);
+      border-bottom: 1px solid #EDEFF3;
+      .lc-tab-title{
+        flex: 1;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-bottom: 2px solid transparent;
+        cursor: pointer;
+        font-size: 12px;
+        &.actived {
+          color: #0079F2;
+          border-bottom-color: #0079F2;
+        }
+      }
+    }
+
+    .lc-tabs-content {
+      position: absolute;
+      top: 32px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    .lc-pane-icon-close {
+      position: absolute;
+      right: 16px;
+      top: 14px;
+      height: auto;
+      z-index: 2;
+      .next-icon{
+        line-height: 1;
+        color: rgba(0,0,0,0.6);
+      }
+    }
+
+    .lc-pane-icon-fix, .lc-pane-icon-float{
+      position: absolute;
+      right: 38px;
+      top: 14px;
+      height: auto;
+      z-index: 2;
+      svg {
+        vertical-align: middle;
+        color: rgba(0,0,0,0.6);
+      }
+    }
+
     .lc-left-float-pane {
       position: absolute;
       top: 0;
@@ -186,48 +245,6 @@ body {
       &.lc-area-visible {
         display: block;
       }
-      .lc-pane-close{
-        position: absolute;
-        right: 16px;
-        top: 16px;
-        height: auto;
-        z-index: 2;
-        .next-icon{
-          line-height: 1;
-        }
-      }
-      .lc-tabs-title {
-        width: 100%;
-        height: 32px;
-        position: relative;
-        display: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        // background: rgba(31,56,88,0.04);
-        border-bottom: 1px solid #EDEFF3;
-        .lc-tab-title{
-          flex: 1;
-          height: 32px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-bottom: 2px solid transparent;
-          cursor: pointer;
-          font-size: 12px;
-          &.actived {
-            color: #0079F2;
-            border-bottom-color: #0079F2;
-          }
-        }
-      }
-      .lc-tabs-content {
-        position: absolute;
-        top: 32px;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
     }
     .lc-left-area {
       height: 100%;
@@ -289,16 +306,6 @@ body {
       &.lc-area-visible {
         display: block;
       }
-      .lc-pane-close {
-        position: absolute;
-        right: 16px;
-        top: 16px;
-        height: auto;
-        z-index: 2;
-        .next-icon {
-          line-height: 1;
-        }
-      }
     }
     .lc-left-area.lc-area-visible ~ .lc-left-fixed-pane {
       margin-left: 1px;