DTStack · LuckyFBB · Jan 9, 2025 · Dec 4, 2024 · Dec 10, 2024 · Dec 10, 2024
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
@@ -0,0 +1,101 @@
+import React, { CSSProperties } from 'react';
+
+interface IIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+}
+
+export function SearchIcon({ title, style, className }: IIconProps) {
+    return (
+        <span title={title || ''} className={className} style={style}>
+            <svg
+                width="1em"
+                height="1em"
+                className="icon"
+                viewBox="0 0 80 80"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M41.8008 68.8008C58.9216 68.8008 72.8008 54.9216 72.8008 37.8008C72.8008 20.68 58.9216 6.80078 41.8008 6.80078C24.68 6.80078 10.8008 20.68 10.8008 37.8008C10.8008 54.9216 24.68 68.8008 41.8008 68.8008Z"
+                    fill="#E8F1FF"
+                    stroke="#BBD6FF"
+                    strokeWidth="0.8"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M37.8635 12.8008L50.8016 28.2243V63.8539C50.8016 64.4468 50.5613 64.9835 50.1728 65.372C49.7842 65.7605 49.2475 66.0008 48.6547 66.0008H11.7484C11.1556 66.0008 10.6189 65.7605 10.2304 65.372C9.84186 64.9835 9.60156 64.4468 9.60156 63.8539V14.9477C9.60156 14.3548 9.84186 13.8181 10.2304 13.4296C10.6189 13.0411 11.1556 12.8008 11.7484 12.8008H37.8635Z"
+                    fill="white"
+                    stroke="#BBD6FF"
+                    strokeWidth="0.8"
+                />
+                <path
+                    d="M19.152 18.068V19.2006C19.1608 19.3622 19.0716 19.5133 18.9256 19.5845C17.7277 20.2695 16.5334 20.9591 15.3351 21.6426C15.1 21.7738 14.9906 21.962 14.9906 22.2315C14.9947 23.7338 14.9947 25.2357 14.9906 26.7373C14.9896 27.0114 15.099 27.2006 15.3381 27.3369C16.6467 28.0841 17.9531 28.8346 19.2573 29.5883C19.4939 29.7235 19.7151 29.7261 19.9538 29.5883C21.262 28.8329 22.5718 28.0806 23.8831 27.3313C24.1182 27.197 24.224 27.0084 24.224 26.7393C24.2233 26.354 24.2229 25.9105 24.2225 25.4265L24.2222 25.0021L24.2222 24.8932L24.2218 24.1038L24.2218 23.9876L24.2214 20.4547L25.4719 21.1722V27.9116L19.6073 31.2812L13.7422 27.9116V21.1722L19.152 18.068ZM16.979 27.2241L16.9714 27.2197L16.8982 27.1777L16.7426 27.0885L16.7378 27.0857L16.6542 27.0377L16.6506 27.0357L16.5606 26.9841L16.5578 26.9825L16.5268 26.9646L16.491 26.9443C16.4788 26.9372 16.4666 26.9299 16.454 26.9223L16.4279 26.9066L16.3704 26.8726C16.4057 26.8507 16.4226 26.8395 16.4394 26.8299L17.9131 25.9843L17.9686 25.9521L19.3666 25.145C19.3888 25.1321 19.4108 25.1208 19.4328 25.1112C19.4402 25.1084 19.4474 25.1053 19.4546 25.1023C19.4591 25.1006 19.4636 25.099 19.4682 25.0974L19.4734 25.0952C19.5376 25.0724 19.6005 25.0669 19.6635 25.0768C19.6679 25.0779 19.6723 25.0787 19.6767 25.0795C19.6896 25.0816 19.7023 25.0846 19.7152 25.0883C19.7188 25.0897 19.7224 25.0908 19.726 25.0919C19.7654 25.1039 19.8051 25.1219 19.8454 25.145C20.8099 25.7 21.7737 26.2547 22.7369 26.809C22.7469 26.8148 22.7569 26.8208 22.7673 26.8272L22.7721 26.8299C22.79 26.8395 22.8059 26.8507 22.8411 26.8726C22.8205 26.8848 22.8015 26.896 22.7837 26.9066L22.7577 26.9223L22.7205 26.9443C21.7669 27.4925 20.8108 28.0382 19.8587 28.5905C19.8504 28.5954 19.842 28.6001 19.8338 28.6045L19.8081 28.6175L19.7958 28.6232C19.7827 28.6292 19.7694 28.6346 19.7562 28.6394C19.7525 28.6406 19.7486 28.6419 19.7447 28.6432C19.7312 28.6479 19.7178 28.6517 19.7044 28.6549C19.5869 28.6819 19.4752 28.6599 19.3528 28.5905L17.9231 27.7659L17.1758 27.3369L17.1054 27.2965L17.049 27.2641L16.979 27.2241ZM19.1499 20.5055V20.6367C19.1499 21.7342 19.1479 22.8316 19.1499 23.9291C19.1625 24.1147 19.0617 24.2896 18.8944 24.3725C17.9373 24.9172 16.9837 25.4675 16.0291 26.0157C15.9953 26.035 15.9606 26.0513 15.9059 26.0792V25.9363C15.9059 24.8465 15.9105 23.7572 15.9059 22.6674C15.8929 22.4739 15.999 22.2919 16.1742 22.2071C17.1288 21.666 18.0783 21.1158 19.0298 20.5686C19.0636 20.5498 19.0988 20.533 19.1499 20.5055ZM20.0642 20.5075C20.1158 20.535 20.1505 20.5518 20.1843 20.5706L22.0867 21.6635L23.0399 22.2071C23.2132 22.3053 23.2985 22.4319 23.3062 22.6191V26.0747C23.2632 26.0548 23.2321 26.0431 23.204 26.0269L21.191 24.8725L21.0162 24.7707L20.287 24.3532L20.2737 24.3451C20.148 24.2672 20.0695 24.1323 20.0642 23.985V20.5075ZM20.0626 18.0645L23.3113 19.9303V21.3151C22.3049 20.7361 21.2973 20.1583 20.2885 19.582C20.1425 19.5108 20.0535 19.3596 20.0626 19.198C20.064 18.8203 20.064 18.4425 20.0626 18.0645Z"
+                    fill="#BBD6FF"
+                />
+                <path d="M13.6719 38.3652H34.5183" stroke="#DDEBFF" strokeWidth="1.27344" />
+                <path d="M13.6875 46.3652L46.5814 46.5778" stroke="#DDEBFF" strokeWidth="1.27344" />
+                <path d="M13.6875 54.5781L46.5814 54.7907" stroke="#DDEBFF" strokeWidth="1.27344" />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M38.0508 12.4004V26.3804C38.0508 27.3182 38.811 28.0784 39.7487 28.0784H51.2023L38.0508 12.4004Z"
+                    fill="#C0C3D1"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M68.0554 19.7351L73.8314 35.6116L60.7971 71.4229C60.5943 71.98 60.185 72.4021 59.687 72.6344C59.1891 72.8666 58.6025 72.9088 58.0454 72.706L23.3649 60.0833C22.8078 59.8806 22.3856 59.4712 22.1534 58.9732C21.9212 58.4753 21.879 57.8888 22.0818 57.3317L38.8087 11.3748C39.0115 10.8177 39.4208 10.3956 39.9188 10.1634C40.4167 9.93117 41.0033 9.88893 41.5604 10.0917L68.0554 19.7351Z"
+                    fill="white"
+                    stroke="#BBD6FF"
+                    strokeWidth="0.8"
+                />
+                <path d="M40.0078 21.0918L59.597 28.2217" stroke="#DDEBFF" strokeWidth="1.27344" />
+                <path d="M36.9531 29.2852L62.9968 38.8758" stroke="#DDEBFF" strokeWidth="1.27344" />
+                <path d="M33.5117 39.084L64.3492 50.5342" stroke="#DDEBFF" strokeWidth="1.27344" />
+                <path d="M30.0508 48.5977L60.8883 60.0478" stroke="#DDEBFF" strokeWidth="1.27344" />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M68.3679 19.4238L63.5866 30.1518C63.2049 31.0083 63.5898 32.0121 64.4463 32.3939C64.4996 32.4176 64.5542 32.4386 64.6096 32.4568L74.2574 35.6124L68.3679 19.4238Z"
+                    fill="#5D9EFF"
+                />
+            </svg>
+        </span>
+    );
+}
+export function LoupeIcon({ title, style, className }: IIconProps) {
+    return (
+        <span title={title || ''} className={className} style={style}>
+            <svg
+                className="icon"
+                width="1em"
+                height="1em"
+                viewBox="0 0 38 38"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29Z"
+                    fill="white"
+                    stroke="#BBD6FF"
+                    strokeWidth="3.2"
+                />
+                <path
+                    d="M16.4048 8.60156C14.9672 8.60156 13.8405 9.01695 13.0246 9.8675C12.2087 10.6983 11.8008 11.8257 11.8008 13.2697H13.8405C13.8405 12.3994 14.0154 11.7268 14.365 11.2521C14.7535 10.6785 15.3946 10.4016 16.2688 10.4016C16.9681 10.4016 17.5315 10.5994 17.92 10.995C18.2891 11.3906 18.4833 11.9246 18.4833 12.6169C18.4833 13.1312 18.2891 13.606 17.9394 14.0609L17.6092 14.4367C16.4048 15.5246 15.6666 16.3356 15.414 16.8895C15.1421 17.4038 15.0255 18.0367 15.0255 18.7686V19.1049H17.1041V18.7686C17.1041 18.2939 17.2012 17.8587 17.4149 17.4631C17.5897 17.1071 17.8617 16.751 18.2308 16.4345C19.1438 15.6235 19.6878 15.1093 19.8626 14.8917C20.3482 14.2587 20.6008 13.4477 20.6008 12.4785C20.6008 11.2917 20.2123 10.3422 19.4352 9.64991C18.6582 8.93783 17.648 8.60156 16.4048 8.60156ZM16.0551 20.173C15.6666 20.173 15.3169 20.2917 15.0449 20.5686C14.773 20.8257 14.637 21.162 14.637 21.5774C14.637 21.973 14.773 22.3093 15.0449 22.5862C15.3169 22.8631 15.6666 23.0016 16.0551 23.0016C16.4436 23.0016 16.7933 22.8631 17.0652 22.606C17.3372 22.329 17.4926 21.9928 17.4926 21.5774C17.4926 21.162 17.3566 20.8257 17.0847 20.5686C16.8127 20.2917 16.463 20.173 16.0551 20.173Z"
+                    fill="#5D9EFF"
+                />
+                <path
+                    d="M26 25.6016L34.8 34.4016"
+                    stroke="#BBD6FF"
+                    strokeWidth="4"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </svg>
+        </span>
+    );
+}
diff --git a/src/empty/__tests__/empty.test.tsx b/src/empty/__tests__/empty.test.tsx
@@ -46,6 +46,18 @@ describe('Empty', () => {
         expect(srcValue).toEqual(IMG_MAP['project']);
     });
 
+    it('should render SearchIcon and LoupeIcon when type is search and active is true', () => {
+        const { container } = render(<Empty type="search" active />);
+        expect(container.querySelector('.dtc-empty__search')).toBeInTheDocument();
+        expect(container.querySelector('.dtc-empty__loupe')).toBeInTheDocument();
+    });
+
+    it('should render SearchIcon and LoupeIcon when type is search and active is false', () => {
+        const { container } = render(<Empty type="search" active={false} />);
+        expect(container.querySelector('.dtc-empty__search')).toBeFalsy();
+        expect(container.querySelector('.dtc-empty__loupe')).toBeFalsy();
+    });
+
     it('should show correct content when not empty', () => {
         const { container } = render(
             <Empty type="project" showEmpty={false}>

diff --git a/src/empty/index.md b/src/empty/index.md
@@ -158,6 +158,19 @@ export default () => {
 };
 ```
 
+```jsx
+/**
+ * title: "使用动态的搜索图片"
+ */
+import React, { useState } from 'react';
+import { Empty } from 'dt-react-component';
+import { Space } from 'antd';
+
+export default () => {
+    return <Empty description="搜索无数据" type="search" active={true} />;
+};
+```
+
 ## API
 
 | 参数      | 说明                        | 类型                                                                        | 默认值    |
@@ -167,6 +180,7 @@ export default () => {
 | showEmpty | 是否展示 Empty 组件         | `boolean`                                                                   | `true`    |
 | children  | 展示内容                    | `React.ReactNode`                                                           | -         |
 | extra     | 替换 antd Empty 的 children | ` React.ReactNode`                                                          | -         |
+| active    | 是否展示动态的图片          | `boolean`                                                                   | `true`    |
 
 :::info
 其余属性[继承 antd4.x 的 Empty](https://ant.design/components/empty-cn/#API)

diff --git a/src/empty/index.tsx b/src/empty/index.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Empty as AntdEmpty, EmptyProps as AntdEmptyProps } from 'antd';
 
+import { LoupeIcon, SearchIcon } from '../components/icon';
 import './style.scss';
 
 export const IMG_MAP = {
@@ -17,23 +18,37 @@ export interface EmptyProps extends AntdEmptyProps {
     size?: 'default' | 'large';
     showEmpty?: boolean;
     extra?: ReactNode;
+    active?: boolean;
 }
 
 const Empty = (props: EmptyProps) => {
     const {
         type = 'default',
         size = 'default',
         showEmpty = true,
+        active = false,
         children,
         image,
         imageStyle,
         extra,
         ...restProps
     } = props;
+    const img = () => {
+        if (type === 'search' && active) {
+            return (
+                <div className="dtc-empty__container">
+                    <SearchIcon className="dtc-empty__search" />
+                    <LoupeIcon className="dtc-empty__loupe" />
+                </div>
+            );
+        } else if (IMG_MAP[type]) {
+            return <img src={require(`./emptyImg/${IMG_MAP[type]}`)} />;
+        }
 
-    let newImage: ReactNode = IMG_MAP[type] ? (
-        <img src={require('./emptyImg/' + IMG_MAP[type])}></img>
-    ) : null;
+        return null;
+    };
+
+    let newImage: ReactNode = img() || null;
     if (image) newImage = image as ReactNode;
 
     const height = size === 'default' ? 80 : 100;

diff --git a/src/empty/style.scss b/src/empty/style.scss
@@ -1,5 +1,10 @@
 .dtc-empty {
     .ant-empty {
+        .ant-empty-image {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 8px;
+        }
         .ant-empty-description {
             color: #8B8FA8;
             line-height: 20px;
@@ -9,3 +14,45 @@
         }
     }
 }
+
+.dtc-empty__container {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    bottom: 8px;
+    .dtc-empty__search {
+        font-size: 80px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 80px;
+        height: 80px;
+    }
+    .dtc-empty__loupe {
+        font-size: 38px;
+        position: absolute;
+        width: 38px;
+        height: 38px;
+        animation:
+            animY 1s cubic-bezier(0.36, 0, 0.64, 1) 0.5s infinite alternate,
+            animX 1s cubic-bezier(0.36, 0, 0.64, 1) -0s infinite alternate;
+    }
+}
+
+@keyframes animX {
+    0% {
+        right: 10px;
+    }
+    100% {
+        right: 25px;
+    }
+}
+
+@keyframes animY {
+    0% {
+        bottom: 2px;
+    }
+    100% {
+        bottom: 17px;
+    }
+}