Merge pull request #99 from easyops-cn/abert/eo-layout

fix(): 支持工作台样式与布局配置

Author: qiaofengxi

bricks/advanced/src/workbench-layout-v2/index.spec.tsx

@@ -125,17 +125,20 @@ describe("eo-workbench-layout-v2", () => {
         key: "card-3",
       },
     ];
+    element.showSettingButton = true;
 
     expect(element.childElementCount).toBe(0);
 
     const mockChangeEvent = jest.fn();
     const mockSaveEvent = jest.fn();
     const mockCancelEvent = jest.fn();
     const mockActionClickEventHandler = jest.fn();
+    const mockSettingEVent = jest.fn();
     element.addEventListener("change", mockChangeEvent);
     element.addEventListener("save", mockSaveEvent);
     element.addEventListener("cancel", mockCancelEvent);
     element.addEventListener("action.click", mockActionClickEventHandler);
+    element.addEventListener("setting", mockSettingEVent);
 
     act(() => {
       document.body.appendChild(element);
@@ -183,6 +186,14 @@ describe("eo-workbench-layout-v2", () => {
       })
     );
 
+    // 点击设置按钮
+    await act(async () => {
+      fireEvent.click(getByTestId(element, "setting-button"));
+      await (global as any).flushPromises();
+    });
+
+    expect(mockSettingEVent).toHaveBeenCalled();
+
     // insert element
     await act(async () => {
       await element.querySelector("eo-checkbox")?.dispatchEvent(

bricks/advanced/src/workbench-layout-v2/index.tsx

@@ -91,6 +91,7 @@ export interface EoWorkbenchLayoutV2Props {
   };
   componentList?: Item[];
   isEdit?: boolean;
+  showSettingButton?: boolean;
 }
 
 export interface EoWorkbenchLayoutV2ComponentRef {
@@ -103,6 +104,7 @@ export interface EoWorkbenchLayoutV2ComponentProps
   onSave?: (layout: Layout[]) => void;
   onCancel?: () => void;
   onActionClick?: (action: SimpleAction, layouts: Layout[]) => void;
+  onSetting?: () => void;
 }
 
 const getRealKey = (key: string): string =>
@@ -119,10 +121,12 @@ export const EoWorkbenchLayoutComponent = forwardRef<
     toolbarBricks,
     componentList = [],
     isEdit,
+    showSettingButton,
     onChange,
     onSave,
     onCancel,
     onActionClick,
+    onSetting,
   },
   ref
 ) {
@@ -263,6 +267,10 @@ export const EoWorkbenchLayoutComponent = forwardRef<
     );
   }, [layouts, onSave]);
 
+  const handleSetting = () => {
+    onSetting?.();
+  };
+
   const handleCancel = () => {
     onCancel?.();
   };
@@ -412,6 +420,14 @@ export const EoWorkbenchLayoutComponent = forwardRef<
               保存
             </WrappedButton>
             <WrappedButton onClick={handleCancel}>取消</WrappedButton>
+            {showSettingButton && (
+              <WrappedButton
+                data-testid="setting-button"
+                onClick={handleSetting}
+              >
+                设置
+              </WrappedButton>
+            )}
             <WrappedDropdownButton
               btnText="更多"
               icon={{
@@ -487,6 +503,13 @@ class EoWorkbenchLayoutV2 extends ReactNextElement {
     attribute: false,
   })
   accessor componentList: Item[] | undefined;
+  /**
+   * description: 用于设置页面样式和布局的按钮
+   */
+  @property({
+    type: Boolean,
+  })
+  accessor showSettingButton: boolean | undefined;
 
   @event({
     type: "change",
@@ -515,6 +538,14 @@ class EoWorkbenchLayoutV2 extends ReactNextElement {
     this.#cancelEvent.emit();
   };
 
+  @event({
+    type: "setting",
+  })
+  accessor #settingEvent!: EventEmitter<void>;
+  #handleSetting = () => {
+    this.#settingEvent.emit();
+  };
+
   /**
    * 操作点击事件
    * @detail {
@@ -557,11 +588,13 @@ class EoWorkbenchLayoutV2 extends ReactNextElement {
         layouts={this.layouts}
         toolbarBricks={this.toolbarBricks}
         componentList={this.componentList}
+        showSettingButton={this.showSettingButton}
         isEdit={this.isEdit}
         onChange={this.#handleChange}
         onSave={this.#handleSave}
         onCancel={this.#handleCancel}
         onActionClick={this.#handleActionClick}
+        onSetting={this.#handleSetting}
         ref={this.#componentRef}
       />
     );