✨ feat(ims-view-pc): add Portal

packages/ims-view-pc/src/components/Portal/Portal.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import './index.less';
+import type { PortalProps } from './interface';
+
+const Portal = forwardRef((props: PortalProps, ref) => {
+  const { attach = document.body, children } = props;
+
+  const container = useMemo(() => {
+    const el = document.createElement('div');
+    el.className = `portal-wrapper`;
+    return el;
+  }, []);
+
+  useEffect(() => {
+    const parentElement = getAttach(attach);
+    parentElement?.appendChild?.(container);
+
+    return () => {
+      parentElement?.removeChild?.(container);
+    };
+  }, [container, attach]);
+
+  useImperativeHandle(ref, () => container);
+
+  return createPortal(children, container);
+});
+
+export default Portal;
+
+export function getAttach(attach: PortalProps['attach']) {
+  if (typeof attach === 'string') {
+    return document.querySelector(attach);
+  }
+  if (typeof attach === 'object' && attach instanceof window.HTMLElement) {
+    return attach;
+  }
+
+  return document.body;
+}

packages/ims-view-pc/src/components/Portal/demo/index.tsx

@@ -0,0 +1,24 @@
+import { Portal } from 'ims-view-pc';
+import React, { useEffect, useRef } from 'react';
+
+export default () => {
+  const containerRef = useRef<HTMLElement>(null);
+
+  const content = (
+    <div className="btn">
+      <button type="button">按钮</button>
+    </div>
+  );
+
+  useEffect(() => {
+    console.log(containerRef);
+  }, []);
+
+  return (
+    <div>
+      <Portal attach={document.body} ref={containerRef}>
+        {content}
+      </Portal>
+    </div>
+  );
+};

packages/ims-view-pc/src/components/Portal/index.less

@@ -0,0 +1,2 @@
+.portal-wrapper {
+}

packages/ims-view-pc/src/components/Portal/index.md

@@ -0,0 +1,40 @@
+---
+title: Portal
+description: Portal
+toc: content
+group:
+  title: 其他
+---
+
+# Portal
+
+## 介绍
+
+`Portal` 组件可以将内容渲染到指定的节点上，通常用于弹出层、全局提示等场景。
+
+## 引入
+
+```js
+import { Portal } from 'ims-view-pc';
+```
+
+## 代码演示
+
+<code src='./demo/index.tsx'></code>
+
+## API
+
+### Props
+
+| 参数     | 说明                           | 类型                    | 默认值 |
+| -------- | ------------------------------ | ----------------------- | ------ |
+| attach   | 挂载的节点，可以是节点或选择器 | _HTMLElement \| string_ | -      |
+| children | 需要挂载的内容                 | _ReactNode_             | -      |
+
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { PortalProps } from 'ims-view-pc';
+```

packages/ims-view-pc/src/components/Portal/index.tsx

@@ -0,0 +1,2 @@
+import Portal from './Portal';
+export default Portal;

packages/ims-view-pc/src/components/Portal/interface.ts

@@ -0,0 +1,4 @@
+export interface PortalProps {
+  attach?: HTMLElement | string;
+  children: React.ReactNode;
+}

packages/ims-view-pc/src/index.tsx

@@ -31,6 +31,8 @@ export * from './components/ExportButton/interface';
 export { default as Icon } from './components/Icon';
 export { default as Marker } from './components/Marker';
 export * from './components/Marker/interface';
+export { default as Portal } from './components/Portal';
+export * from './components/Portal/interface';
 export { default as SectionTitle } from './components/SectionTitle';
 export * from './components/SectionTitle/interface';
 export { default as Sticky } from './components/Sticky';