feat: 支持 PanelDock 的 disable / enable 方法, 可用于初始化前后的开闭操作

fix(designer settings style): 修复settings样式

packages/editor-skeleton/src/components/settings/style.less

@@ -3,6 +3,10 @@
   height: 100%;
   overflow: hidden;
 
+  ul {
+    margin: 0;
+  }
+
   .lc-settings-content {
     position: absolute;
     top: 0;
@@ -34,7 +38,7 @@
       position: absolute;
       left: 8px;
       top: 8px;
-      color: #8F9BB3;
+      color: #8f9bb3;
       cursor: pointer;
     }
   }

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

@@ -73,6 +73,7 @@ export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
       ...props,
       className: classNames(className, {
         actived: dock.actived,
+        disabled: dock.disabled,
       }),
       onClick: () => {
         onClick && onClick();

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

@@ -1,4 +1,4 @@
-@import "./theme.less";
+@import './theme.less';
 
 :root {
   --font-family: @font-family;
@@ -38,14 +38,13 @@ body {
   font-family: var(--font-family);
   font-size: var(--font-size-text);
   color: var(--color-text);
-  background-color:#EDEFF3;
+  background-color: #edeff3;
 }
 
 * {
   box-sizing: border-box;
 }
 
-
 .lc-titled-panel {
   width: 100%;
   height: 100%;
@@ -71,7 +70,7 @@ body {
     font-size: 16px;
     padding: 0 15px;
     // border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
-    color: #0F1726;
+    color: #0f1726;
     font-weight: bold;
   }
 
@@ -117,7 +116,7 @@ body {
     */
   }
   .lc-outline-pane {
-    border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
+    border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
   }
 }
 .lc-panel {
@@ -129,12 +128,11 @@ body {
   }
 }
 
-
 .lc-workbench {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #EDEFF3;
+  background-color: #edeff3;
   .lc-top-area {
     height: var(--top-area-height);
     background-color: var(--color-pane-background);
@@ -185,7 +183,7 @@ body {
       justify-content: center;
       align-items: center;
       // background: rgba(31,56,88,0.04);
-      border-bottom: 1px solid #EDEFF3;
+      border-bottom: 1px solid #edeff3;
       .lc-tab-title {
         flex: 1;
         height: 32px;
@@ -196,8 +194,8 @@ body {
         cursor: pointer;
         font-size: 12px;
         &.actived {
-          color: #0079F2;
-          border-bottom-color: #0079F2;
+          color: #0079f2;
+          border-bottom-color: #0079f2;
         }
       }
     }
@@ -222,7 +220,8 @@ body {
       }
     }
 
-    .lc-pane-icon-fix, .lc-pane-icon-float{
+    .lc-pane-icon-fix,
+    .lc-pane-icon-float {
       position: absolute;
       right: 38px;
       top: 14px;
@@ -281,7 +280,10 @@ body {
             cursor: pointer;
           }
           &.actived {
-            color: #0079F2;
+            color: #0079f2;
+          }
+          &.disabled {
+            opacity: 0.4;
           }
           .lc-title-icon {
             height: 20px;

packages/editor-skeleton/src/skeleton.ts

@@ -247,6 +247,10 @@ export class Skeleton {
     return widget;
   }
 
+  getWidget(name: string): IWidget | undefined {
+    return this.widgets.find(widget => widget.name === name);
+  }
+
   createPanel(config: PanelConfig) {
     config = this.parseConfig(config);
     const panel = new Panel(this, config);

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

@@ -70,6 +70,8 @@ export default class PanelDock implements IWidget {
 
   private _panel?: Panel;
 
+  @obx.ref private _disabled = false;
+
   @computed get panel() {
     return this._panel || this.skeleton.getPanel(this.panelName);
   }
@@ -122,9 +124,27 @@ export default class PanelDock implements IWidget {
     this.setVisible(!this._visible);
   }
 
+  private setDisabled(flag: boolean) {
+    this._disabled = flag;
+  }
+
+  disable() {
+    this.setDisabled(true);
+  }
+
+  enable() {
+    this.setDisabled(false);
+  }
+
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
   togglePanel() {
+    if (!this._disabled) {
       this.panel?.toggle();
     }
+  }
 
   getName() {
     return this.name;