From 123fdb07f6d9fcdcdb4ebd425032b8022cd5b4d8 Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Mon, 29 Jun 2026 16:28:38 +0800
Subject: [PATCH] feat(popover): add popover component with scrollable content
---
src/index.ts | 1 +
src/popover/__tests__/index.test.tsx | 57 ++++++++++++++++++++++++++++
src/popover/demos/basic.tsx | 11 ++++++
src/popover/demos/customHeight.tsx | 20 ++++++++++
src/popover/demos/maxWidth.tsx | 14 +++++++
src/popover/demos/noTitle.tsx | 11 ++++++
src/popover/demos/scroll.tsx | 15 ++++++++
src/popover/index.md | 27 +++++++++++++
src/popover/index.scss | 24 ++++++++++++
src/popover/index.tsx | 13 +++++++
10 files changed, 193 insertions(+)
create mode 100644 src/popover/__tests__/index.test.tsx
create mode 100644 src/popover/demos/basic.tsx
create mode 100644 src/popover/demos/customHeight.tsx
create mode 100644 src/popover/demos/maxWidth.tsx
create mode 100644 src/popover/demos/noTitle.tsx
create mode 100644 src/popover/demos/scroll.tsx
create mode 100644 src/popover/index.md
create mode 100644 src/popover/index.scss
create mode 100644 src/popover/index.tsx
diff --git a/src/index.ts b/src/index.ts
index a4df49c0d..6ec201249 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -32,6 +32,7 @@ export { default as MarkdownRender } from './markdownRender';
export { default as Modal } from './modal';
export { default as NotFound } from './notFound';
export { default as Popconfirm } from './popConfirm';
+export { default as Popover } from './popover';
export { default as ProgressBar } from './progressBar';
export { default as ProgressLine } from './progressLine';
export { default as Resize } from './resize';
diff --git a/src/popover/__tests__/index.test.tsx b/src/popover/__tests__/index.test.tsx
new file mode 100644
index 000000000..c306d84b6
--- /dev/null
+++ b/src/popover/__tests__/index.test.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import Popover from '..';
+
+describe('Popover', () => {
+ it('should render popover with default overlay className', async () => {
+ render(
+
+ Hover me
+
+ );
+
+ await waitFor(() => expect(screen.getByText('Popover content')).toBeInTheDocument());
+
+ expect(document.querySelector('.dtc-popover')).toBeInTheDocument();
+ });
+
+ it('should merge custom overlayClassName', async () => {
+ render(
+
+ Hover me
+
+ );
+
+ await waitFor(() => expect(document.querySelector('.dtc-popover')).toBeInTheDocument());
+
+ expect(document.querySelector('.dtc-popover')).toHaveClass('custom-popover');
+ });
+
+ it('should pass overlayInnerStyle to antd Popover', async () => {
+ render(
+
+ Hover me
+
+ );
+
+ await waitFor(() =>
+ expect(document.querySelector('.ant-popover-inner')).toBeInTheDocument()
+ );
+
+ expect(document.querySelector('.ant-popover-inner')).toHaveStyle({
+ color: 'red',
+ });
+ });
+});
diff --git a/src/popover/demos/basic.tsx b/src/popover/demos/basic.tsx
new file mode 100644
index 000000000..5206513af
--- /dev/null
+++ b/src/popover/demos/basic.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+export default function Basic() {
+ return (
+
+
+
+ );
+}
diff --git a/src/popover/demos/customHeight.tsx b/src/popover/demos/customHeight.tsx
new file mode 100644
index 000000000..cfc8aff7f
--- /dev/null
+++ b/src/popover/demos/customHeight.tsx
@@ -0,0 +1,20 @@
+import React, { CSSProperties } from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+const content = Array.from({ length: 12 }, (_, index) => (
+ 这是第 {index + 1} 行自定义高度的 Popover 内容
+));
+
+export default function CustomHeight() {
+ return (
+ {content}}
+ trigger="click"
+ overlayStyle={{ '--max-height': '160px' } as CSSProperties}
+ >
+
+
+ );
+}
diff --git a/src/popover/demos/maxWidth.tsx b/src/popover/demos/maxWidth.tsx
new file mode 100644
index 000000000..4f56ae1bb
--- /dev/null
+++ b/src/popover/demos/maxWidth.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+export default function MaxWidth() {
+ return (
+
+
+
+ );
+}
diff --git a/src/popover/demos/noTitle.tsx b/src/popover/demos/noTitle.tsx
new file mode 100644
index 000000000..6de0d9cc7
--- /dev/null
+++ b/src/popover/demos/noTitle.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+export default function NoTitle() {
+ return (
+
+
+
+ );
+}
diff --git a/src/popover/demos/scroll.tsx b/src/popover/demos/scroll.tsx
new file mode 100644
index 000000000..a05ff5230
--- /dev/null
+++ b/src/popover/demos/scroll.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+const content = Array.from({ length: 30 }, (_, index) => (
+ 这是第 {index + 1} 行较长的 Popover 内容
+));
+
+export default function Scroll() {
+ return (
+ {content}} trigger="click">
+
+
+ );
+}
diff --git a/src/popover/index.md b/src/popover/index.md
new file mode 100644
index 000000000..703b4ddb2
--- /dev/null
+++ b/src/popover/index.md
@@ -0,0 +1,27 @@
+---
+title: Popover 气泡卡片
+group: 组件
+toc: content
+demo:
+ cols: 2
+---
+
+# Popover 气泡卡片
+
+## 何时使用
+
+用于展示更丰富的气泡内容。组件基于 antd Popover 封装，浮层内容最大高度为 400px，超过后可滚动查看。
+
+## 代码演示
+
+