win-chart 1.0.0

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app", "prettier"]
+}

package/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false
+}

package/localhost-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDTXG4k7dnUXg1y
+YgYfCu2A1e1YVgcsD9+Ex9s1snkqyHY7GJVc2//nTV35hlJAhpZt0bq3vqDgbkaK
+BbHWZgdF7719lgGVmntwNWsAiyyoaOmNuIq2u+UDMKWSxQbChAXId+PfhHUjH/Vo
+0QZ5CM22jj3tPyor4K1ls04Lz5ZVzLYRz1+fCaNeBLRBrmZNYjdDKZCVOUwUYBpl
+o0dsxb16izPJ9Yw/Bnret0qvRaM/BBt7cT2xabXUTQ3Xr2d1i64+K5GEblYI07A5
+2kbCHZ6O10/9Nyzaob6pTO1dMnZsim8M2FY3GIad29A+JamEd0br5kFJEp/UJFgQ
+yKf0tHd7AgMBAAECggEACc+GhUxNCiB7e021fwdg0tQbOjh0CMWL2Hv2Xt2z5hp7
+8m5HsJG9pRzgOc7UTo5wuRQ9GH5OtVwpBgsRoCQIPmTMZOHrnOgYxrKUDuhm4EJO
+ZPel6Kl8DdPaO5/NmoXKRu3Zs+xQC5tWJtFc/Y09DzY3BaYi7Pp20fuqqb2u+rh6
+JyAM2fu7UWSDWXBcIgZFQFpAZarooPQ5aHTtGvVga/Ul2yipFexWFUWcq2CCPFlH
+x5el/AkaheFEPWTND7aw+fmkWVCco21mAH0T1nv0QHXn7sDV+rmAH0ejj+wgqOoq
+GU75BwnoygmDfCbh38hsi9u9dITMPNAtrHQI1IdZgQKBgQD9G7fCHlirN+oYqGJp
+wNC+1XFmg6cN8ZnLZk8CXS060I7BHNF7IyuxtfYKLURhtmVscVdwG1qx9ZeH8m4L
+ni5A5CdTTeENzMjgu+HkH4BPDMBk3PfUCc+ljNPEA6j14c6oZbsh58QyaZ2Fj7v7
+V9M7TS52cOzpV1UxjE6Eow/R4QKBgQDVxpyVFZjKnEWh/6dqQUyxQ9oZlL5QqVni
+4oUd2rSrnpPGTP4CFH9kiufMy6AsbDdUlVdwtJl8zWQM/j72z8/R8fLhOas+zk0B
+JzMZHthTWCq++SKBFDBH1firfZTl8gG1MV/+yUaKvbo1VYOZFGEHuZ+dCsmVXPap
+k/x4b8Fs2wKBgAaG4nQ1CCBSLs03+mGzwS5KnsP//RzU8BxYpQzwjiwIGMZOEfDU
+9Vl90bxtcmf6ph7nxVN0wR/5r1CoJcJS7+pod8MkLPuIHl39OlQBo/Nl5sgzEoj7
+P8mLGiLh3UeJ7SRWiz7SlTKfmppJHJXcq+vJj7sqKlHSGLZQYe31roDBAoGAVYEk
+PgkuXNPWki40Yy6NI1XVVWgGGzMxbatWvRMuMnqx9p3y9xgFwExC3MoRXdNG6kD1
+gXHq9l0ciInk20lRgVK559XuJafUawKn0INi2Ssppcr2PxS5HvJ5jPYk6Tg78KI4
+GCufWHz8jrqOcVsSWEmpiuG2sVRGoJs9X1qrzgMCgYAt3GcJkmV2QDxYesAUAP/Y
+lGhheYg3lR9ykY87k351wVLTiNKM49u+6aU62wlp2Zqhsw5uafxUMPuLEeYnKksU
+RCXTQUKssLKN7KoQUo7Wzr4XBVb4GEWMXO9rfWP2ICuxbt+JgmlXij3YH/WSqHba
+xs9Zt/ON4T+7G+hB1c1ldw==
+-----END PRIVATE KEY-----

package/localhost.pem

@@ -0,0 +1,25 @@
+-----BEGIN CERTIFICATE-----
+MIIEJDCCAoygAwIBAgIQFb0LiHpYjfIfosaP7kHPwTANBgkqhkiG9w0BAQsFADBv
+MR4wHAYDVQQKExVta2NlcnQgZGV2ZWxvcG1lbnQgQ0ExIjAgBgNVBAsMGXNoZW5A
+TWFjYm9vay5sb2NhbCAoU2hlbikxKTAnBgNVBAMMIG1rY2VydCBzaGVuQE1hY2Jv
+b2subG9jYWwgKFNoZW4pMB4XDTI0MDEwNzA1MjkzM1oXDTI2MDQwNzA1MjkzM1ow
+TTEnMCUGA1UEChMebWtjZXJ0IGRldmVsb3BtZW50IGNlcnRpZmljYXRlMSIwIAYD
+VQQLDBlzaGVuQE1hY2Jvb2subG9jYWwgKFNoZW4pMIIBIjANBgkqhkiG9w0BAQEF
+AAOCAQ8AMIIBCgKCAQEA01xuJO3Z1F4NcmIGHwrtgNXtWFYHLA/fhMfbNbJ5Ksh2
+OxiVXNv/501d+YZSQIaWbdG6t76g4G5GigWx1mYHRe+9fZYBlZp7cDVrAIssqGjp
+jbiKtrvlAzClksUGwoQFyHfj34R1Ix/1aNEGeQjNto497T8qK+CtZbNOC8+WVcy2
+Ec9fnwmjXgS0Qa5mTWI3QymQlTlMFGAaZaNHbMW9eoszyfWMPwZ63rdKr0WjPwQb
+e3E9sWm11E0N169ndYuuPiuRhG5WCNOwOdpGwh2ejtdP/Tcs2qG+qUztXTJ2bIpv
+DNhWNxiGndvQPiWphHdG6+ZBSRKf1CRYEMin9LR3ewIDAQABo14wXDAOBgNVHQ8B
+Af8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwHwYDVR0jBBgwFoAU7Kqv+ogq
+RlbNNsFqkf3vQOK8st4wFAYDVR0RBA0wC4IJbG9jYWxob3N0MA0GCSqGSIb3DQEB
+CwUAA4IBgQAM9kQdhjG2g2EKmtNInGQn1rb30voTKNt23y9gTffdL/oHk+nY0n18
+A6vxB/Stk/9PEmcssq6sO6rBzEbQOlDmcgLaYh4w3I9TMJtyQF/eZlvd3B/GFfsU
+4YX7tlHPQn9TjFrqJXyhgyYpyS4Hlpr6WYICVfGSw2KxSi09PwA3RI3he9C3BblK
+kVON0S2rKtMX6UtyUDu8Ju+NhhZa5gGu25N39d+HkKvUF/kxlEXW7u+QLzkDrIZc
+47tAPLtPo2KuuKbQ4FMdRk/DJ8YzbkBrmpOuIAnyIVfmdq/FeFU4yy8s0u0wJ3dg
+EShdbkcMl7RITKU0L5mVXZPDla04RfciUGuR3oFabnPCcWTYOD+BZFrQHvqJPVNR
+hVLYHbOr/w+rTVpcbz3Tyisdmu/GZUwiUUgcG3t20AHSJjXnt2uCQ0tbfFMfdS/l
+jHq09DfDyedApLXLxrqLugay99SsN47qW1Va4yn8dthU95kyi4RM35gul+6hohGR
+WH8pxV8bi6U=
+-----END CERTIFICATE-----

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "win-chart",
+  "version": "1.0.0",
+  "author": "Samuel Ouyang",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.alibaba-inc.com/ground-net-front/win-chart.git"
+  },
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@cainiaofe/cn-ui": "^0.11.16",
+    "@ice/stark": "^2.7.3",
+    "@rematch/core": "^2.1.0",
+    "@rematch/loading": "^2.1.0",
+    "@rematch/select": "^3.1.0",
+    "ahooks": "^3.7.8",
+    "axios": "^1.6.7",
+    "classnames": "^2.3.1",
+    "core-js": "^3.35.1",
+    "d3": "^7.8.5",
+    "dayjs": "^1.11.10",
+    "deepmerge": "^4.3.1",
+    "echarts": "^5.4.3",
+    "normalize.css": "^8.0.1",
+    "panda-i18n": "^0.2.74",
+    "polished": "^4.2.2",
+    "qs": "^6.11.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-grid-layout": "^1.4.4",
+    "react-redux": "^7.1.0",
+    "react-router-dom": "^6.21.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.1.8"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^0.4.3",
+    "@rsbuild/plugin-react": "^0.4.3",
+    "@types/d3": "^7.4.0",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.18",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
+    "prettier": "^3.2.5",
+    "typescript": "^5.1.6"
+  }
+}

package/rsbuild.config.ts

@@ -0,0 +1,48 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import fs from 'fs';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  dev: {
+    progressBar: true,
+  },
+  performance: {
+    chunkSplit: {
+      strategy: 'all-in-one',
+    },
+    bundleAnalyze: {},
+  },
+  output: {
+    distPath: {
+      root: 'build',
+      js: 'js',
+      css: 'css',
+      svg: 'svg',
+      font: 'font',
+      wasm: 'wasm',
+      image: 'image',
+      media: 'media',
+      server: 'bundles',
+      worker: 'worker',
+    },
+    sourceMap: {
+      js: false,
+    },
+    legalComments: 'none',
+    filenameHash: false,
+    overrideBrowserslist: [
+      'iOS >= 9',
+      'Android >= 4.4',
+      'last 2 versions',
+      '> 0.2%',
+      'not dead',
+    ],
+  },
+  server: {
+    https: {
+      key: fs.readFileSync('./localhost-key.pem'),
+      cert: fs.readFileSync('./localhost.pem'),
+    },
+  },
+});

package/src/api/README.md

@@ -0,0 +1,15 @@
+# 项目 api
+
+- 此文件夹用于放置项目级别的数据请求 api.
+- 使用的时候直接 `import { xxx } from 'src/api';` 即可
+
+# 新增 api
+
+- 在 `./url-map` 里面增加相应的 url, 随着项目的不断迭代, 如果 url 越来越多, 可以逐步按文件来拆分 url-map.
+- 选择或者创建一个文件夹来合理的管理 api, 比如说 `./user` 里面放置的是用户相关的请求, `./layout` 里面放置的是导航相关的请求.
+  - 如果创建了新的文件夹, 请在 `./index` 里面导出它.
+- 参照现有的 api 来编写新的 api.
+
+# 页面 api
+
+- 页面级别的数据请求 api, 可以放在页面里面, 参考 `src/pages/**/api`.

package/src/api/index.js

@@ -0,0 +1,5 @@
+/**
+ * 导出所有的请求, 这样外界使用的时候直接 `import { xxx } from 'src/api';` 即可
+ */
+export * from './layout';
+export * from './user';

package/src/api/layout/index.js

@@ -0,0 +1,32 @@
+/**
+ * 此文件用于管理侧边栏相关的请求
+ */
+import $i18n from 'panda-i18n';
+
+import request from '../request';
+import urlMap from '../url-map';
+
+function formatMenu(menu) {
+  const { titleKey } = menu;
+  if (titleKey) {
+    menu.text = $i18n.get({ id: titleKey });
+  } else {
+    menu.text = menu.title || '';
+  }
+  menu.key = menu.path || '';
+}
+
+// 获取侧边栏菜单栏列表
+export async function getMenuList() {
+  const { data } = await request.get(urlMap.getMenuList);
+
+  const { dataList } = data;
+  dataList.forEach((menu) => {
+    const { children } = menu;
+    formatMenu(menu);
+    if (children) {
+      children.forEach(formatMenu);
+    }
+  });
+  return dataList;
+}

package/src/api/request.ts

@@ -0,0 +1,87 @@
+import axios, { AxiosRequestConfig } from 'axios';
+import { IResponse } from 'src/types/interface';
+
+/**
+ * boss内部未登入错误码
+ */
+export const bossBUCWithoutLoginErrorCodeList = ['CN10201812011'];
+
+/**
+ * boss外部未登入错误码（菜鸟登陆需要两次encodeURIComponent）
+ */
+export const bossCaiNiaoWithoutLoginErrorCodeList = ['CN10201912011'];
+
+/**
+ * boss内外部无权限错误码
+ */
+export const bossWithoutAccessErrCodeList = [
+  'CN10201812021',
+  'CN10201812022',
+  'CN10201912021',
+  'CN10201912022',
+];
+
+/**
+ * 未登入错误码
+ */
+export const withoutLoginErrorCodeList = [
+  'CN10829902001',
+  '2000',
+  '1000',
+  ...bossBUCWithoutLoginErrorCodeList,
+];
+
+/**
+ * 无权限错误码
+ */
+export const withoutAccessErrorCodeList = [
+  'CN10829902004',
+  ...bossWithoutAccessErrCodeList,
+];
+
+//  axios 实例
+const request = axios.create({
+  withCredentials: true,
+});
+
+// 做一些基于业务场景的定制
+request.interceptors.response.use(
+  (response) => {
+    const obj = response.data;
+    const { success, errorMsg, errorCode } = obj;
+
+    if (withoutLoginErrorCodeList.includes(errorCode)) {
+      const curHref = encodeURIComponent(window.parent.location.href);
+      window.location.href = errorMsg + curHref;
+    }
+
+    if (bossCaiNiaoWithoutLoginErrorCodeList.includes(errorCode)) {
+      const curHref = encodeURIComponent(
+        encodeURIComponent(window.parent.location.href),
+      );
+      window.location.href = errorMsg + curHref;
+    }
+
+    if (!success) {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return Promise.reject({
+        ...obj,
+        message: errorMsg,
+      });
+    }
+
+    return obj;
+  },
+  (err) => {
+    console.error('network error', err);
+    return Promise.reject(err);
+  },
+);
+
+export default request;
+
+export const newRequest = async <T>(config: AxiosRequestConfig<any>) => {
+  const resp: IResponse<T> = (await request<IResponse<T>>(config)) as any;
+
+  return Promise.resolve(resp);
+};

package/src/api/url-map/index.js

@@ -0,0 +1,10 @@
+/**
+ * 统一管理请求的 url, 随着项目的不断迭代, 如果 url 越来越多, 可以逐步按文件来拆分 url-map.
+ */
+export default {
+  getUserInfo:
+    'https://mocks.alibaba-inc.com/mock/cnxt-web-app-sample/getUserInfo',
+  getMenuList:
+    'https://mocks.alibaba-inc.com/mock/kp2dkcok/getDemoSidebarMenuList',
+  helloCnxt: 'https://mocks.alibaba-inc.com/mock/cnxt-web-app-sample/helloCnxt',
+};

package/src/api/user/index.js

@@ -0,0 +1,12 @@
+/**
+ * 此文件用于管理用户相关的请求
+ */
+
+import request from '../request';
+import urlMap from '../url-map';
+
+// 获取用户信息
+export async function getUserInfo() {
+  const { data } = await request.get(urlMap.getUserInfo);
+  return data;
+}

package/src/components/FilterContext.tsx

@@ -0,0 +1,6 @@
+import { IKeyValueItem } from '@/types';
+import { createContext, useContext } from 'react';
+
+export const FilterContext = createContext<IKeyValueItem>({});
+
+export const useFilterContext = () => useContext(FilterContext);

package/src/components/GlobalStyle.tsx

@@ -0,0 +1,25 @@
+import { RESPONSIVE_BREAKPOINT } from '@/utils';
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  html {
+    font-size: 16px; 
+    @media  (max-width: ${RESPONSIVE_BREAKPOINT}) {
+      font-size: calc(100vw / 750 * 100);
+        * {
+          -webkit-tap-highlight-color: transparent;
+        }
+    }
+
+    body {
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+`;
+
+export const CommonMobileGlobalStyle = createGlobalStyle`
+  body {
+    padding: 0.24rem;
+    background: no-repeat url('https://img.alicdn.com/imgextra/i4/O1CN01RWfZ7n1xDNHWlwHxT_!!6000000006409-2-tps-1502-3252.png') left 0 top 0 / 100% 100%;
+  }
+`;

package/src/components/HalfScreenBrowser.tsx

@@ -0,0 +1,95 @@
+import { CnDrawer } from '@cainiaofe/cn-ui-m';
+import {
+  useAutoCloseHalfScreen,
+  useHalfScreenDispatch,
+  useHalfScreenStateValue,
+} from '../hooks/useHalfScreenState';
+import { styled } from 'styled-components';
+import { getHandleOpenLink } from 'src/utils';
+import { CustomIcon } from 'src/components/icon';
+import { useEffect, useState } from 'react';
+
+export const HalfScreenBrowser = () => {
+  useAutoCloseHalfScreen();
+  const state = useHalfScreenStateValue();
+  const dispatch = useHalfScreenDispatch();
+  const [iframeSrc, setIframeSrc] = useState('');
+
+  const handleClose = () => {
+    dispatch.close();
+    setIframeSrc('');
+  };
+
+  const handleFullScreen = () => {
+    getHandleOpenLink(state.src)();
+    handleClose();
+  };
+
+  useEffect(() => {
+    if (state.src) {
+      setTimeout(() => {
+        setIframeSrc(state.src!);
+      }, 500);
+    }
+  }, [state.src]);
+
+  return (
+    <CnDrawerDecoration
+      visible={state.show}
+      title={handleTitle(state.title)}
+      onClose={handleClose}
+      noCard
+    >
+      <FullScreenBtn onClick={handleFullScreen} />
+      <CloseBtn onClick={handleClose} />
+      <iframe
+        title="browser"
+        src={iframeSrc}
+        style={{
+          width: '100%',
+          height: '80vh',
+          border: 'none',
+        }}
+      />
+    </CnDrawerDecoration>
+  );
+};
+
+const handleTitle = (title?: string) =>
+  title && title.length > 16 ? `${title.slice(0, 16)}...` : title;
+
+const CnDrawerDecoration = styled(CnDrawer).attrs({
+  titleAlign: 'center',
+})`
+  border-radius: 0.32rem 0.32rem 0 0;
+
+  .cn-ui-m-drawer-body::-webkit-scrollbar {
+    display: none;
+  }
+
+  .cn-ui-m-drawer-title {
+    border: none;
+  }
+
+  .cn-ui-m-drawer-close {
+    display: none;
+  }
+`;
+
+const FullScreenBtn = styled(CustomIcon).attrs({
+  type: 'icon-kuozhan',
+})`
+  cursor: pointer;
+  position: absolute;
+  left: 16px;
+  top: 16px;
+`;
+
+const CloseBtn = styled(CustomIcon).attrs({
+  type: 'icon-guanbi',
+})`
+  cursor: pointer;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+`;

package/src/components/ImgBox.tsx

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+
+interface IProps {
+  src: string;
+  width: number;
+  style: CSSProperties;
+}
+
+export const ImgBox = ({ src = '', width = 200, style }: Partial<IProps>) => (
+  <img
+    alt=''
+    src={src}
+    style={{
+      objectFit: 'contain',
+      width,
+      ...style,
+    }}
+  />
+);

package/src/components/JumpBtn.tsx

@@ -0,0 +1,38 @@
+import { IStyleProps } from '@/types';
+import { CnButton } from '@cainiaofe/cn-ui';
+import { PropsWithChildren } from 'react';
+import { styled } from 'styled-components';
+
+interface IProps extends IStyleProps {
+  url: string;
+  openNewPage?: boolean;
+}
+
+export const JumpBtn = ({
+  url = '',
+  openNewPage = true,
+  children,
+  ...args
+}: PropsWithChildren<IProps>) => {
+  return (
+    <CnButton
+      text
+      type="primary"
+      onClick={(e) => {
+        e.stopPropagation();
+        if (openNewPage) {
+          globalThis.open(url);
+        } else {
+          globalThis.location.href = url;
+        }
+      }}
+      {...args}
+    >
+      {children}
+    </CnButton>
+  );
+};
+
+export const JumpBtnMobile = styled(JumpBtn)`
+  font-size: 0.26rem !important;
+`;

package/src/components/MCardWrapper.tsx

@@ -0,0 +1,33 @@
+import { rgba } from 'polished';
+import { styled } from 'styled-components';
+
+export const MCardWrapper = styled.div`
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0.02rem 0.04rem 0 rgba(39, 46, 58, 0.12);
+  border-radius: 0.24rem;
+  padding: 0.32rem;
+  margin-bottom: 0.2rem;
+`;
+
+export const MCardTitleWrapper = styled.div`
+  font-weight: 600;
+  font-size: 0.32rem;
+  color: #272f3d;
+  line-height: 1;
+  margin-bottom: 0.2rem;
+`;
+
+export const MarkWrapper = styled.div`
+  color: #272e3a;
+  background-color: ${rgba('#3379ff', 0.12)};
+  border-radius: 0.16rem;
+  padding: 0.24rem;
+  display: flex;
+  align-items: flex-start;
+  font-size: 0.24rem;
+  line-height: 0.36rem;
+
+  div {
+    margin-left: 0.12rem;
+  }
+`;

package/src/components/NoContent/index.tsx

@@ -0,0 +1,85 @@
+import { Box } from '@cainiaofe/cn-ui';
+import { CSSProperties, ReactNode } from 'react';
+
+interface IProps {
+  direction?: 'row' | 'column' | 'row-reverse';
+  style: CSSProperties;
+  message: ReactNode;
+  className: string;
+}
+
+const NoContent = ({
+  direction = 'row',
+  message = '无内容',
+  style,
+  className,
+}: Partial<IProps>) => {
+  return (
+    <Box
+      direction={direction}
+      justify='center'
+      align='center'
+      spacing={20}
+      className={className}
+      style={{
+        transform: 'translateY(20px)',
+        ...style,
+      }}
+    >
+      <img
+        alt=''
+        src='https://img.alicdn.com/imgextra/i4/O1CN01bkhh1m21HH4wlsyY9_!!6000000006959-55-tps-96-64.svg'
+        style={{
+          width: 120,
+          height: 120,
+          objectFit: 'contain',
+        }}
+      />
+      <span
+        style={{
+          fontSize: 14,
+          fontWeight: 700,
+          color: '#afb6c3',
+        }}
+      >
+        {message}
+      </span>
+    </Box>
+  );
+};
+
+export const NoAssess = ({
+  direction = 'row',
+  message = '暂无权限',
+  style,
+  className,
+}: Partial<IProps>) => {
+  return (
+    <Box
+      direction={direction}
+      justify='center'
+      align='center'
+      spacing={20}
+      className={className}
+      style={{
+        ...style,
+      }}
+    >
+      <img
+        alt=''
+        src='https://img.alicdn.com/imgextra/i4/O1CN01oQNWzR1rY5L7fdHcH_!!6000000005642-55-tps-160-160.svg'
+        style={{ width: 120, height: 120, objectFit: 'contain' }}
+      />
+      <span
+        style={{
+          fontSize: 14,
+          fontWeight: 700,
+          color: '#6D7A90',
+        }}
+      >
+        {message}
+      </span>
+    </Box>
+  );
+};
+export default NoContent;