✨ feat(pro-editor): 支持配置 ProEditorStore 在devtools 中的名称

src/ComponentAsset/store/index.ts

@@ -1,9 +1,9 @@
+import { ReactNode } from 'react';
 import { StateCreator, StoreApi, create } from 'zustand';
 import { UseContextStore, createContext, optionalDevtools } from 'zustand-utils';
 import { DevtoolsOptions } from 'zustand/middleware';
 
 import type { ProEditorInstance } from '@/ProEditor';
-import { ReactNode } from 'react';
 
 export interface AssetStoreOptions<T = any> {
   devtools?: boolean | DevtoolsOptions;

src/ProEditor/container/App.tsx

@@ -25,7 +25,6 @@ export interface ProEditorAppProps {
    * 自定义错误兜底形态
    */
   ErrorBoundary?: FC;
-  __STORE_DEVTOOLS__?: boolean;
   /**
    * 代码复制回调
    */

src/ProEditor/container/Provider.tsx

@@ -1,11 +1,12 @@
 import type { FC, ReactNode } from 'react';
+import { DevtoolsOptions } from 'zustand/middleware';
 
 import { createStore, Provider, useStoreApi } from '../store';
 
 export const ProEditorProvider: FC<{
   children: ReactNode;
-  showDevtools?: boolean;
-}> = ({ children, showDevtools }) => {
+  devtoolOptions?: boolean | DevtoolsOptions;
+}> = ({ children, devtoolOptions }) => {
   let isWrapped = true;
 
   const Content = <>{children}</>;
@@ -20,9 +21,7 @@ export const ProEditorProvider: FC<{
     return Content;
   }
 
-  return (
-    <Provider createStore={() => createStore(showDevtools)}>{Content}</Provider>
-  );
+  return <Provider createStore={() => createStore(devtoolOptions)}>{Content}</Provider>;
 };
 
 export default ProEditorProvider;

src/ProEditor/container/index.tsx

@@ -3,6 +3,7 @@ import { AppContainer } from '@ant-design/pro-editor';
 import { App } from 'antd';
 import type { FC } from 'react';
 import { memo } from 'react';
+import { DevtoolsOptions } from 'zustand/middleware';
 
 import type { ProEditorAppProps } from './App';
 import Content from './App';
@@ -11,14 +12,18 @@ import type { StoreUpdaterProps } from './StoreUpdater';
 import StoreUpdater from './StoreUpdater';
 import { useStyle } from './style';
 
-export type ProEditorProps = ProEditorAppProps & AppContainerProps & StoreUpdaterProps;
+export type ProEditorProps = ProEditorAppProps &
+  AppContainerProps &
+  StoreUpdaterProps & {
+    __STORE_DEVTOOLS__?: boolean | DevtoolsOptions;
+  };
 
 export const ProEditor: FC<ProEditorProps> = memo((props) => {
   const { themeMode, theme, style, __STORE_DEVTOOLS__, editorRef, ...res } = props;
   const { styles } = useStyle();
 
   return (
-    <Provider showDevtools={__STORE_DEVTOOLS__}>
+    <Provider devtoolOptions={__STORE_DEVTOOLS__}>
       <AppContainer themeMode={themeMode} theme={theme}>
         <App className={styles.app} style={style}>
           <Content {...res} />

src/ProEditor/demos/buttonAsset/index.ts

@@ -24,7 +24,7 @@ export const buttonAssetParams: ComponentAssetParams<ButtonConfig> = {
   },
 
   storeOptions: {
-    devtools: true,
+    devtools: { name: 'ButtonAssetStore' },
   },
 
   codeEmitter: () => '',

src/ProEditor/demos/buttonAssets.tsx

@@ -7,5 +7,9 @@ import { buttonAssetParams } from './buttonAsset';
 const ButtonComponentAsset = new ComponentAsset(buttonAssetParams);
 
 export default () => (
-  <ProEditor componentAsset={ButtonComponentAsset} style={{ height: '100vh' }} __STORE_DEVTOOLS__ />
+  <ProEditor
+    componentAsset={ButtonComponentAsset}
+    style={{ height: '100vh' }}
+    __STORE_DEVTOOLS__={{ name: 'ButtonEditor' }}
+  />
 );

src/ProEditor/store/createStore.ts

@@ -1,6 +1,7 @@
 import type { StateCreator } from 'zustand';
 import { create } from 'zustand';
 import { optionalDevtools } from 'zustand-utils';
+import { DevtoolsOptions } from 'zustand/middleware';
 
 import {
   AwarenessPublicAction,
@@ -52,8 +53,11 @@ const vanillaStore: StateCreator<InternalProEditorStore, [['zustand/devtools', n
   ...awarenessSlice(...params),
 });
 
-export const createStore = (showDevTools: boolean = false) => {
-  const devtools = optionalDevtools(showDevTools);
+export const createStore = (options: boolean | DevtoolsOptions = false) => {
+  const devtools = optionalDevtools(options !== false);
 
-  return create<InternalProEditorStore>()(devtools(vanillaStore, { name: 'ProEditorStore' }));
+  const devtoolOptions =
+    options === false ? undefined : options === true ? { name: 'ProEditorStore' } : options;
+
+  return create<InternalProEditorStore>()(devtools(vanillaStore, devtoolOptions));
 };