Merge pull request #74 from zxb1992/release-admin

feat: add pointCloud component

Author: anyone-yuren

apps/admin-docs/docs/components/demos/point.tsx

@@ -0,0 +1,12 @@
+import { PointCloud } from 'ui';
+import React from 'react';
+
+export default () => {
+  return (
+    <>
+      <PointCloud pointCount={100000} pointSize={1} onSelectionChange={(indices) => {
+        console.log('选中的点索引:', indices);
+      }} />
+    </>
+  );
+};

apps/admin-docs/docs/components/point.md

@@ -0,0 +1,27 @@
+---
+title: 点云组件
+atomId: PointCloud
+package: ui
+description: 基于 three.js 和 react-three/fiber 编写的点云渲染组件，支持 10 万个点的渲染、框选和高亮
+group:
+  title: 3D组件
+---
+
+# 点云组件
+
+> 基于 three.js 和 react-three/fiber 编写的点云渲染组件，支持 10 万个点的渲染、鼠标框选和高亮显示选中的点
+
+安装`pnpm add ui --filter @gbeata/admin-docs`
+<code src="./demos/point"></code>
+
+## API
+
+| 属性名            | 描述                  | 类型                                  | 默认值     |
+| ----------------- | --------------------- | ------------------------------------- | ---------- |
+| pointCount        | 点的数量              | number                                | 100000     |
+| range             | 点云的范围            | number                                | 100        |
+| defaultColor      | 点的默认颜色          | string                                | '#888888'  |
+| selectedColor     | 选中点的颜色          | string                                | '#ff0000'  |
+| pointSize         | 点的半径              | number                                | 0.1        |
+| height            | 容器高度              | number                                | 600        |
+| onSelectionChange | 选中点变化的回调      | (selectedIndices: number[]) => void   | -          |

apps/admin/src/views/home/index.style.ts

@@ -15,6 +15,7 @@ const useStyles = createStyles(({ token }) => {
         backgroundColor: token.colorPrimaryBg,
         display: 'flex',
         alignItems: 'center',
+        overflow: 'hidden',
       },
       '.slick': {
         height: '100%',

packages/gbeata/src/GCtrl/index.tsx

@@ -1,5 +1,5 @@
 import { DownOutlined } from '@ant-design/icons';
-import { Divider, Dropdown, Menu, Space } from 'antd';
+import { Divider, Dropdown, Space } from 'antd';
 import classNames from 'classnames';
 import React, { ReactNode, useEffect, useState } from 'react';
 import GAction from '../GAction';
@@ -77,7 +77,7 @@ const getCtrlList = (
 
   // 多余的按钮会变成下拉菜单
   if (children.length > max + 1) {
-    const menuList = [];
+    const menuItems = [];
 
     for (let i = max; i < children.length; i++) {
       let node = children[i];
@@ -88,17 +88,19 @@ const getCtrlList = (
       // 正常节点
       CtrlItem = getCtrlItem(node, i, { __simple: true, type: 'text' });
       // 添加这个节点
-      menuList.push(
-        <Menu.Item style={{ padding: 0 }} key={max + i}>
-          {CtrlItem}
-        </Menu.Item>,
-      );
+      menuItems.push({
+        key: max + i,
+        label: CtrlItem,
+        style: { padding: 0 },
+      });
     }
 
-    const menu = <Menu style={{ minWidth: 100 }}>{menuList}</Menu>;
-
     ctrlList.push(
-      <Dropdown key={max} overlay={menu} placement="bottomRight">
+      <Dropdown
+        key={max}
+        menu={{ items: menuItems, style: { minWidth: 100 } }}
+        placement="bottomRight"
+      >
         <GButton type="link" className={classNames('g-button', sub && 'sub')}>
           {more}
         </GButton>

packages/gbeata/src/GSearchTable/use/useExtraBtn.tsx

@@ -7,7 +7,7 @@ import {
   ReloadOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
-import { Checkbox, Dropdown, Input, Menu, Space, Tooltip } from 'antd';
+import { Checkbox, Dropdown, Input, Space, Tooltip } from 'antd';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
 import React, { ChangeEvent, Dispatch, useEffect, useState } from 'react';
 import GButton from '../../GButton';
@@ -294,21 +294,25 @@ export default function useExtraBtn(
         {extraSizeVisible ? (
           <Tooltip title={locale.extra.density}>
             <Dropdown
-              overlay={
-                <Menu
-                  style={{ width: 100 }}
-                  selectedKeys={[size + '']}
-                  onClick={handleSizeChange}
-                >
-                  <Menu.Item key="large">
-                    {locale.extra.densityLarger}
-                  </Menu.Item>
-                  <Menu.Item key="middle">
-                    {locale.extra.densityMiddle}
-                  </Menu.Item>
-                  <Menu.Item key="small">{locale.extra.densitySmall}</Menu.Item>
-                </Menu>
-              }
+              menu={{
+                items: [
+                  {
+                    key: 'large',
+                    label: locale.extra.densityLarger,
+                  },
+                  {
+                    key: 'middle',
+                    label: locale.extra.densityMiddle,
+                  },
+                  {
+                    key: 'small',
+                    label: locale.extra.densitySmall,
+                  },
+                ],
+                selectedKeys: [size + ''],
+                onClick: handleSizeChange,
+                style: { width: 100 },
+              }}
             >
               <ColumnHeightOutlined />
             </Dropdown>