feat: Add base project structure with API and web components

web/src/components/Empty/BodyWrapper.tsx

@@ -0,0 +1,19 @@
+import type { FC, ReactNode } from 'react'
+import { Skeleton } from 'antd'
+import Empty from './index'
+
+interface BodyWrapperProps {
+  children: ReactNode
+  loading?: boolean
+  empty: boolean
+}
+const BodyWrapper: FC<BodyWrapperProps> = ({ children, loading = false, empty }) => {
+  if (loading) {
+    return <Skeleton active />
+  }
+  if (!loading && empty) {
+    return <Empty />
+  }
+  return children
+}
+export default BodyWrapper

web/src/components/Empty/Loading.tsx

@@ -0,0 +1,15 @@
+import { useTranslation } from 'react-i18next'
+import LoadingIcon from '@/assets/images/loading.svg'
+import Empty from './index'
+const Loading = ({ size = 200 }: { size?: number }) => {
+  const { t } = useTranslation()
+  return (
+    <Empty
+      url={LoadingIcon}
+      title={t('empty.loadingEmpty')}
+      subTitle={t('empty.loadingEmptyDesc')}
+      size={size}
+    />
+  )
+}
+export default Loading;

web/src/components/Empty/index.tsx

@@ -0,0 +1,32 @@
+import { type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import emptyIcon from '@/assets/images/empty/empty.svg';
+
+interface EmptyProps {
+  url?: string;
+  size?: number | number[];
+  title?: string;
+  subTitle?: string;
+  className?: string;
+}
+const  Empty: FC<EmptyProps> = ({
+  url,
+  size = 200,
+  title,
+  subTitle,
+  className = '',
+}) => {
+  const { t } = useTranslation();
+  const width = Array.isArray(size) ? size[0] : size ? size : url ? 200 : 88;
+  const height = Array.isArray(size) ? size[1] : size ? size : url ? 200 : 88;
+  
+  subTitle = subTitle || t('empty.tableEmpty');
+  return (
+    <div className={`rb:flex rb:items-center rb:justify-center rb:flex-col ${className}`}>
+      <img src={url || emptyIcon} alt="404" style={{ width: `${width}px`, height: `${height}px` }} />
+      {title && <div className="rb:mt-[8px] rb:leading-[20px]">{title}</div>}
+      {subTitle && <div className={`rb:mt-[${url ? 8 : 5}px] rb:leading-[16px] rb:text-[#5B6167]`}>{subTitle}</div>}
+    </div>
+  );
+}
+export default Empty;