✨ feat: add ActinGroup Components

src/ActionGroup/demos/basic.tsx

@@ -0,0 +1,5 @@
+import { ActionGroup } from '@ant-design/pro-editor';
+
+export default () => {
+  return <ActionGroup />;
+};

src/ActionGroup/demos/config.tsx

@@ -0,0 +1,44 @@
+import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import { ActionGroup } from '@ant-design/pro-editor';
+import { message } from 'antd';
+
+export default () => {
+  const [messageApi, contextHolder] = message.useMessage();
+
+  return (
+    <>
+      {contextHolder}
+      <ActionGroup
+        config={[
+          {
+            icon: <CopyOutlined />,
+            onClick: () => {
+              messageApi.info('复制！');
+            },
+          },
+          {
+            icon: <ZoomInOutlined />,
+            onClick: () => {
+              messageApi.success('放大！');
+            },
+          },
+          {
+            icon: <ZoomOutOutlined />,
+            style: {
+              color: '#1890ff',
+            },
+            onClick: () => {
+              messageApi.success('缩小！');
+            },
+          },
+          {
+            icon: <DragOutlined />,
+            onClick: () => {
+              messageApi.loading('快速定位ing');
+            },
+          },
+        ]}
+      />
+    </>
+  );
+};

src/ActionGroup/demos/custom.tsx

@@ -0,0 +1,26 @@
+import { ActionGroup } from '@ant-design/pro-editor';
+import { Card, Input, Rate, Switch } from 'antd';
+
+export default () => {
+  return (
+    <ActionGroup
+      render={(defalutDom) => {
+        return (
+          <Card
+            title="操作工具箱"
+            extra={<Switch defaultChecked />}
+            style={{ width: 300 }}
+            size="small"
+          >
+            <p>工具</p>
+            {defalutDom}
+            <p>内容</p>
+            <Input placeholder="请输入编辑器内容" />
+            <p>评分</p>
+            <Rate allowHalf defaultValue={2.5} />
+          </Card>
+        );
+      }}
+    />
+  );
+};

src/ActionGroup/demos/withPanel.tsx

@@ -0,0 +1,42 @@
+import type { Position } from '@ant-design/pro-editor';
+import { ActionGroup, DraggablePanel } from '@ant-design/pro-editor';
+import { useLocalStorageState } from 'ahooks';
+
+export default () => {
+  const [position, setPos] = useLocalStorageState<Position>('demo-pos');
+
+  return (
+    <div
+      style={{
+        background: '#f1f1f1',
+        border: '2px solid #ddd',
+        height: 500,
+        display: 'flex',
+      }}
+    >
+      <div style={{ flex: 1, padding: 12 }}>内容</div>
+      <DraggablePanel
+        position={position}
+        onPositionChange={setPos}
+        mode={'float'}
+        minHeight={0}
+        minWidth={0}
+        resize={{
+          right: false,
+          left: false,
+          top: false,
+          bottom: false,
+        }}
+        size={{
+          width: 'auto',
+          height: 'auto',
+        }}
+        style={{
+          background: '#fff',
+        }}
+      >
+        <ActionGroup />
+      </DraggablePanel>
+    </div>
+  );
+};

src/ActionGroup/index.md

@@ -0,0 +1,29 @@
+---
+title: ActionGroup 工具面板
+atomId: ActionGroup
+group: 基础组件
+---
+
+# ActionGroup 工具面板
+
+## 何时使用
+
+当你需要一个通用面板用于承载全局通用的「全屏、重做、撤销、删除」这一系列工具的地方，可以使用。
+
+## 代码演示
+
+### 基础
+
+<code src="./demos/basic.tsx" ></code>
+
+### 使用配置
+
+<code src="./demos/config.tsx" ></code>
+
+### 高度自定义
+
+<code src="./demos/custom.tsx" ></code>
+
+### 使用浮动面板
+
+<code src="./demos/withPanel.tsx" iframe></code>

src/ActionGroup/index.tsx

@@ -0,0 +1,108 @@
+import { DeleteOutlined, FullscreenOutlined, RedoOutlined, UndoOutlined } from '@ant-design/icons';
+import { getPrefixCls } from '@ant-design/pro-editor';
+import { Button, Space } from 'antd';
+import { useStyle } from './style';
+
+type ButtonConfig = {
+  /**
+   * @description 展示的 icon
+   */
+  icon: React.ReactNode;
+  /**
+   * @description 样式
+   * @ignore
+   */
+  style?: React.CSSProperties;
+  /**
+   * @description 每个按钮单独的key
+   */
+  key?: string;
+  /**
+   * @description 按钮点击事件的回掉
+   */
+  onClick?: () => void;
+};
+
+interface ActionGroupProps {
+  /**
+   * @description 自定义的classname
+   * @ignore
+   */
+  className?: string;
+  /**
+   * @description 样式
+   * @ignore
+   */
+  style?: React.CSSProperties;
+  /**
+   * @description 生成按钮的配置config
+   */
+  config?: Array<ButtonConfig>;
+  /**
+   * @description 用于渲染自定义能力的render方法
+   */
+  render?: (defalutDom: React.ReactNode, config: Array<ButtonConfig>) => React.ReactNode;
+  /**
+   * @description 全屏按钮点击的回掉
+   */
+  onFullScreenClick?: () => void;
+  /**
+   * @description 撤销按钮点击的回掉
+   */
+  onUndoClick?: () => void;
+  /**
+   * @description 重做按钮点击的回掉
+   */
+  onRedoClick?: () => void;
+  /**
+   * @description 删除按钮点击的回掉
+   */
+  onDeleteClick?: () => void;
+}
+
+const ActionGroup = (props: ActionGroupProps) => {
+  const prefixCls = getPrefixCls('action-group');
+  const { styles, cx } = useStyle(prefixCls);
+  const {
+    className,
+    style,
+    render,
+    config: outConfig,
+    onFullScreenClick,
+    onUndoClick,
+    onRedoClick,
+    onDeleteClick,
+  } = props;
+  const config = outConfig
+    ? outConfig
+    : [
+        { icon: <FullscreenOutlined />, onClick: onFullScreenClick },
+        { icon: <UndoOutlined />, onClick: onUndoClick },
+        { icon: <RedoOutlined />, onClick: onRedoClick },
+        { icon: <DeleteOutlined />, onClick: onDeleteClick },
+      ];
+
+  const ActionDomList = () => {
+    const defalutDom = (
+      <>
+        {config.map((item: ButtonConfig, index) => {
+          return <Button key={`action-group-btn-${index}`} type="text" {...item} />;
+        })}
+      </>
+    );
+    if (render) {
+      return render(defalutDom, config);
+    }
+    return defalutDom;
+  };
+
+  return (
+    <div className={cx(styles.content, className)} style={style}>
+      <Space>
+        <ActionDomList />
+      </Space>
+    </div>
+  );
+};
+
+export default ActionGroup;

src/ActionGroup/style.ts

@@ -0,0 +1,24 @@
+import { createStyles } from '../theme';
+
+export const useStyle = createStyles(({ token, css, cx }, prefixCls) => {
+  return {
+    content: cx(
+      `${prefixCls}-content`,
+      css`
+        width: fit-content;
+        padding: ${token.padding / 4}px ${token.padding / 2}px;
+      `,
+    ),
+    button: cx(
+      `${prefixCls}-action-btn`,
+      css`
+        box-shadow: none;
+        border: none;
+        background-color: transparent;
+        &:hover {
+          color: ${token.colorIconHover} !important;
+        }
+      `,
+    ),
+  };
+});

src/index.ts

@@ -1,4 +1,5 @@
 export { default as yjsMiddleware } from 'zustand-middleware-yjs';
+export { default as ActionGroup } from './ActionGroup';
 export * from './ActionIcon';
 export { default as Awareness } from './Awareness';
 export type { AwarenessProps } from './Awareness';