fix(workbench-layout): 清空操作增加确认

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

@@ -1,10 +1,23 @@
 import { getByTestId, fireEvent } from "@testing-library/dom";
 import { describe, test, expect, jest } from "@jest/globals";
 import { act } from "react-dom/test-utils";
+import * as utilsGeneral from "@next-core/utils/general";
 import "./";
 import type { EoWorkbenchLayout } from "./index.js";
 
 jest.mock("@next-core/theme", () => ({}));
+jest.mock("@next-core/utils/general", () => {
+  const mockedUnwrapedProvider = jest.fn();
+
+  return {
+    ...(jest.requireActual("@next-core/utils/general") as Record<
+      string,
+      unknown
+    >),
+    mockedUnwrapedProvider,
+    unwrapProvider: jest.fn(() => mockedUnwrapedProvider),
+  };
+});
 
 describe("eo-workbench-layout", () => {
   test("basic usage", async () => {
@@ -125,8 +138,8 @@ describe("eo-workbench-layout", () => {
       1,
       expect.objectContaining({
         detail: [
-          { w: 2, h: 1, x: 0, y: 0, i: "card-1", moved: false, static: false },
-          { w: 1, h: 1, x: 0, y: 1, i: "card-2", moved: false, static: false },
+          { w: 2, h: 1, x: 0, y: 0, i: "card-1" },
+          { w: 1, h: 1, x: 0, y: 1, i: "card-2" },
         ],
       })
     );
@@ -245,6 +258,11 @@ describe("eo-workbench-layout", () => {
     ).toBe(1);
 
     // reset
+    (
+      utilsGeneral as unknown as {
+        mockedUnwrapedProvider: jest.Mock<() => Promise<void>>;
+      }
+    ).mockedUnwrapedProvider.mockResolvedValueOnce();
     await act(async () => {
       fireEvent(
         getByTestId(
@@ -253,6 +271,7 @@ describe("eo-workbench-layout", () => {
         ),
         new CustomEvent("action.click", { detail: { event: "clear" } })
       );
+      await (global as any).flushPromises();
     });
 
     expect(

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

@@ -10,6 +10,7 @@
 } from "react";
 import { EventEmitter, createDecorators } from "@next-core/element";
 import { ReactNextElement, wrapBrick } from "@next-core/react-element";
+import { unwrapProvider } from "@next-core/utils/general";
 import { UseSingleBrickConf } from "@next-core/types";
 import { ReactUseBrick } from "@next-core/react-runtime";
 import { auth } from "@next-core/easyops-runtime";
@@ -37,6 +38,7 @@
   CheckboxOptionType,
   CheckboxProps,
 } from "@next-bricks/form/checkbox";
+import type { showDialog as _showDialog } from "@next-bricks/basic/data-providers/show-dialog/show-dialog";
 import { SimpleAction } from "@next-bricks/basic/actions";
 
 const { defineElement, property, event, method } = createDecorators();
@@ -75,6 +77,7 @@
 >("eo-checkbox", {
   onChange: "change",
 });
+const showDialog = unwrapProvider<typeof _showDialog>("basic.show-dialog");
 
 export interface EoWorkbenchLayoutProps {
   cardTitle?: string;
@@ -121,11 +124,16 @@
   const layoutCacheRef = useRef<Layout[]>();
   const layoutWrapperRef = useRef<HTMLDivElement>(null);
 
-  const [layouts, setLayouts] = useState<Layout[]>(layoutsProps ?? []);
+  const [layouts, _setLayouts] = useState<Layout[]>(layoutsProps ?? []);
   const [cols, setCols] = useState<number>(3);
   const [layoutWrapperStyle, setLayoutWrapperStyle] =
     useState<React.CSSProperties>();
 
+  const setLayouts = useCallback((layouts: Layout[]) => {
+    layoutCacheRef.current = layouts;
+    _setLayouts(layouts);
+  }, []);
+
   useImperativeHandle(ref, () => ({
     setLayouts,
   }));
@@ -171,7 +179,7 @@
       }
     }
     if (!isAllowAction) {
-      setLayouts((items) =>
+      _setLayouts((items) =>
         items?.map((item) => {
           const matchLayout = layoutCacheRef.current?.find(
             (layout) => getRealKey(layout.i) === getRealKey(item.i)
@@ -206,7 +214,7 @@
           y: Infinity,
         }));
 
-      setLayouts((layouts) => {
+      _setLayouts((layouts) => {
         return layouts
           .filter((layout) => checkedKeys.includes(getRealKey(layout.i)))
           .concat(addItems);
@@ -237,7 +245,11 @@
 
     switch (event) {
       case "clear":
-        handleClearLayout();
+        showDialog({
+          type: "confirm",
+          title: "清空确认",
+          content: "将清空所有卡片，从零开始编辑，该操作无法撤回。",
+        }).then(handleClearLayout);
         break;
       default:
         onActionClick?.(
@@ -381,7 +393,7 @@
                   ? [{ text: "另存为模板", event: "saveAsTemplate" }]
                   : []),
                 { text: "从模版加载", event: "loadFromTemplate" },
-                { text: "清除", danger: true, event: "clear" },
+                { text: "清空所有", danger: true, event: "clear" },
               ]}
               onActionClick={(e) => {
                 handleActionClick(e.detail);