✨ feat: export base editor layout components

src/Layout/demos/base.tsx

@@ -0,0 +1,36 @@
+import { BaseEditorLayout, Button, Input } from '@ant-design/pro-editor';
+import { Space } from 'antd';
+import { DefaultLayoutProps } from './_defaultProps';
+
+export default () => {
+  return (
+    <BaseEditorLayout
+      style={{
+        maxWidth: '100%',
+        height: '600px',
+      }}
+      header={{
+        ...DefaultLayoutProps.header,
+        children: (
+          <Input
+            addonBefore="Options"
+            placeholder="Search For Some Little Options"
+            style={{ width: 250 }}
+          />
+        ),
+        extra: (
+          <Space>
+            <Button type="primary">Save</Button>
+            <Button type="dashed">Export</Button>
+          </Space>
+        ),
+      }}
+      footer={{
+        ...DefaultLayoutProps.footer,
+      }}
+      leftPannel={{
+        children: <div>Left Pannel</div>,
+      }}
+    />
+  );
+};

src/Layout/index.tsx

@@ -76,4 +76,4 @@ const BasicLayout = (props: LayoutProps) => {
 
 const WrapperLayout: React.FC<LayoutProps> = withProvider(BasicLayout);
 
-export { WrapperLayout as Layout };
+export { BasicLayout as BaseEditorLayout, WrapperLayout as Layout };

src/Layout/index.zh-CN.md

@@ -12,6 +12,8 @@ EditorLayout 是我们专门为了编辑器场景制作的编辑器布局组件
 
 <code src="./demos/basic.tsx" title="基础用法"></code>
 
+<code src="./demos/base.tsx" title="纯净样式"></code>
+
 <code src="./demos/single.tsx" title="只需要面板" description="你可以通过设置 `header` 和 `footer` 为 `false` 来隐藏头和尾的配置"></code>
 
 <code src="./demos/noLeftPannel.tsx" title="关闭 panel" description="当然你也可以对某个 `pannel` 设置 false 来关闭其内容"></code>

src/Layout/style.ts

@@ -1,9 +1,11 @@
 import { createStyles } from '../theme';
 
 export const useStyle = createStyles(({ css, token, cx, prefixCls }, { themeType }) => {
-  const EDITOR_PREFIX = `${prefixCls}-${token?.editorPrefix}`;
+  const EDITOR_PREFIX = `${prefixCls}-${token?.editorPrefix || 'editor'}`;
   const prefix = `${EDITOR_PREFIX}-layout`;
 
+  console.log(' .${EDITOR_PREFIX}-draggable-panel', ` .${EDITOR_PREFIX}-draggable-panel`);
+
   const typeStylish = css`
     background-color: ${themeType === 'block'
       ? token.colorFillTertiary

src/index.ts

@@ -16,7 +16,7 @@ export type { FreeCanvasProps } from './FreeCanvas';
 export * from './Highlight';
 export * from './IconPicker';
 export * from './InteractContainer';
-export { Layout as EditorLayout } from './Layout';
+export { BaseEditorLayout, Layout as EditorLayout } from './Layout';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export * from './ProBuilder';
 export * from './ProEditor';