feat(layout): 增加button组件

src/playground/editor/advanced-editor/example/xml/dnd5e.xml

@@ -392,7 +392,7 @@
               </Row>
             </Col>
             <Col flex="0">
-              <Button :onClick="() => { setStateDate('parent.背包', _filter(parent.背包, (_,i) => i !== _toNumber(props.index))) }">删除</Button>
+              <Button type="link" :onClick="() => { setStateDate('parent.背包', _filter(parent.背包, (_,i) => i !== _toNumber(props.index))) }">删除</Button>
             </Col>
           </Row>
         </Define>

src/shared/components/layout/context/LayoutStateContext.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { TMemo } from '@shared/components/TMemo';
 import type { XMLBuilderContext } from '../XMLBuilder';
 
-export const LayoutStateContext = React.createContext<XMLBuilderContext | null>(
-  null
-);
+export const LayoutStateContext =
+  React.createContext<XMLBuilderContext | null>(null);
+LayoutStateContext.displayName = 'LayoutStateContext';
 
 export const LayoutStateContextProvider: React.FC<{
   state: XMLBuilderContext;

src/shared/components/layout/context/LayoutWidthContext.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 
 export const LayoutWidthContext = React.createContext(0);
+LayoutWidthContext.displayName = 'LayoutWidthContext';
 
 interface LayoutWidthContextProviderProps {
   width: number;
 }
-export const LayoutWidthContextProvider: React.FC<LayoutWidthContextProviderProps> = React.memo(
-  (props) => {
+export const LayoutWidthContextProvider: React.FC<LayoutWidthContextProviderProps> =
+  React.memo((props) => {
     return (
       <LayoutWidthContext.Provider value={props.width}>
         {props.children}
       </LayoutWidthContext.Provider>
     );
-  }
-);
+  });
+LayoutWidthContextProvider.displayName = 'LayoutWidthContextProvider';

src/shared/components/layout/tags/Button/shared.tsx

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import type { TagComponent } from '../type';
+import { TMemo } from '@shared/components/TMemo';
+import { Button, ButtonProps } from 'antd';
+import { useLayoutChildren } from '../../hooks/useLayoutChildren';
+import { LayoutStateContext } from '../../context/LayoutStateContext';
+
+interface TagButtonSharedProps {
+  showInDetail: boolean;
+  type: ButtonProps['type'];
+  danger: ButtonProps['danger'];
+  onClick: ButtonProps['onClick'];
+}
+export const TagButtonShared: TagComponent<TagButtonSharedProps> = TMemo(
+  (props) => {
+    const { showInDetail = false } = props;
+    const children = useLayoutChildren(props);
+    const context = useContext(LayoutStateContext)!;
+
+    if (context.layoutType === 'detail' && showInDetail !== true) {
+      // 详情页不显示按钮(默认)
+      return null;
+    }
+
+    return (
+      <Button type={props.type} danger={props.danger} onClick={props.onClick}>
+        {children}
+      </Button>
+    );
+  }
+);
+TagButtonShared.displayName = 'TagButtonShared';

src/shared/components/layout/tags/__all__.ts

@@ -36,6 +36,7 @@ import { TagCustomListEdit } from './CustomList/edit';
 import { TagCurrMaxEdit } from './CurrMax/edit';
 import { TagCurrMaxDetail } from './CurrMax/detail';
 import { TagSpaceShared } from './Space/shared';
+import { TagButtonShared } from './Button/shared';
 
 // 展示数据组件
 registerTag('Template', TagTemplateShared);
@@ -83,6 +84,8 @@ registerTag('RollBtn', TagRollBtnDetail, TagRollBtnEdit);
 
 registerTag('CurrMax', TagCurrMaxDetail, TagCurrMaxEdit);
 
+registerTag('Button', TagButtonShared, TagButtonShared);
+
 // 高级操作组件
 registerTag('Use', TagUseShared);