feat: 添加 按钮列表 ButtonList

packages/meta/src/ButtonList/ButtonList.tsx

@@ -0,0 +1,79 @@
+import React, {useState ,useMemo ,ReactNode} from 'react';
+import './index.less';
+import { Button, Col, Dropdown, Row } from 'antd/es';
+import { Gutter } from '../grid/row';
+
+type ButtonItem = {
+  key: string;
+  text: ReactNode;
+  onClick: () => void;
+  children?: Array<ButtonItem>;
+  // 用于排序
+  weight: number; 
+  icon?: ReactNode
+  className?: string;
+};
+
+type Props = {
+  buttons: Array<ButtonItem>
+  customButton?: ButtonItem;
+  gutter?: Gutter;
+};
+
+const componentName = 'zhst-button-list';
+
+const ButtonList: React.FC<Props> = (Props) => {
+  const { buttons, customButton ,gutter} = Props
+  const [activeKey, setActiveKey] = useState<string | null>(null);
+
+
+  const sortedButtons = useMemo(() => {
+    let buttonList=[...buttons]
+    
+    if (customButton) {
+      buttonList = [...buttons,customButton]
+    }
+
+    return buttonList.sort((a, b) => a.weight - b.weight);
+  }, [buttons, customButton]);
+
+  const handleButtonClick = (key: string, item: ButtonItem) => {
+    setActiveKey(activeKey === key ? null : key);
+    if (!item.children ) {
+      item.onClick();
+    }
+  };
+
+  return (
+    <div className={componentName}>
+      <Row gutter={gutter}>
+        {sortedButtons.map((item) => (
+          <Col key={item.key} >
+            {item.children ? (
+              <Dropdown
+                menu={{
+                  items: item.children.map((child) => ({
+                    key: child.key,
+                    label: <span>{child.text}</span>,
+                    onClick: () => child.onClick(),
+                  })),
+                }}
+                open={activeKey === item.key}
+                onOpenChange={(visible:boolean) => {
+                  if (!visible) setActiveKey(null);
+                }}
+                trigger={['click']}
+              >
+                <Button   type="text" icon={item.icon} onClick={() => handleButtonClick(item.key, item)}>{item.text}</Button>
+              </Dropdown>
+            ) : (
+              <Button   type="text" icon={item.icon} onClick={() => handleButtonClick(item.key, item)}>{item.text}</Button>
+            )}
+          </Col>
+        ))}
+      </Row>
+    </div>
+  );
+};
+
+export default ButtonList;

packages/meta/src/ButtonList/index.less

@@ -0,0 +1,14 @@
+
+
+
+
+.zhst-button-list {
+    .ant-btn-text:hover{
+        background: none !important;
+        color: #247fdb !important;
+    }
+}
+
+
+   
+

packages/meta/src/ButtonList/index.md

@@ -0,0 +1,90 @@
+---
+group: 通用
+category: Components
+subtitle: 按钮列表
+title: ButtonList 按钮列表组件
+---
+
+# ButtonList 按钮列表组件
+
+```jsx
+import React, { useState, useRef ,useMemo} from 'react';
+import { Button, Space } from 'antd'
+import { DownloadOutlined } from '@ant-design/icons';
+import { ButtonList } from '@zhst/meta'
+
+  
+  
+
+
+export default () => {
+const [isPlay,setIsPlay] = useState(true);
+
+const props = useMemo(() => {
+  return {
+        buttons: [
+            {
+              key: 'button1',
+              text: '一级按钮1',
+              onClick: () => console.log('一级按钮1被点击'),
+              children: [
+                { key: 'subButton1-1', text: '二级按钮1-1', onClick: () => console.log('二级按钮1-1被点击') , icon:<DownloadOutlined /> },
+                { key: 'subButton1-2', text: '二级按钮1-2', onClick: () => console.log('二级按钮1-2被点击') },
+              ],
+              weight: 1,
+              // icon:<DownloadOutlined />,
+            },
+            {
+              key: 'button2',
+              text: '一级按钮2',
+              onClick: () => console.log('一级按钮2被点击'),
+              children: null,
+              weight: 2,
+            },
+            {
+              key: 'button3',
+              text: '一级按钮3',
+              onClick: () => console.log('一级按钮3被点击'),
+              children: null,
+              weight: 3,
+            },
+            {
+              key: 'button4',
+              text: '一级按钮4',
+              onClick: () => console.log('一级按钮4被点击'),
+              weight: 4,
+            },
+            {
+              key: 'button5',
+              text: '一级按钮5' ,
+              onClick: () => console.log('一级按钮5被点击'),
+              children: [
+                { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') },
+              ],
+              weight: 5,
+            },
+        ],
+      customButton:
+            {
+              key: '播放',
+              text: isPlay ? '播放按钮' : '图片按钮',
+              onClick: () => {setIsPlay(!isPlay)},
+              weight: 3.5,
+            }
+}},[isPlay])
+  return (
+    <Space size={[8, 16]} direction="vertical">
+      <ButtonList  {...props}/>
+    </Space>
+  )
+}
+```
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| ---- | ---- | ---- | ------ | ---- |
+| buttons | 传入按钮列表 |ButtonItem[]| - | - |
+| customButton | 传入自定义按钮 | ButtonItem  | - | - |
+| gutter | 控制间隙 | Gutter  | - | - |
+

packages/meta/src/ButtonList/index.tsx

@@ -0,0 +1,4 @@
+import ButtonList from './ButtonList'
+
+
+export default ButtonList

packages/meta/src/index.tsx

@@ -80,4 +80,4 @@ export type { TooltipAlignConfig, TooltipProps, TooltipPlacement, TooltipPropsWi
 export { default as Tour } from './tour'
 export type { TourLocale, TourProps, TourStepProps } from './tour/interface'
 export { default as Segmented } from './segmented'
-export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented'
+export { default as ButtonList } from './ButtonList'