feat: dashboard

src/components/page-tools/index.less

@@ -3,4 +3,14 @@
   justify-content: space-between;
   align-items: center;
   margin-top: 70px;
+  .left {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
 }

src/components/page-tools/index.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import styles from './index.less';
+import './index.less';
 
 type PageToolsProps = {
   left?: React.ReactNode;
@@ -9,21 +9,17 @@ type PageToolsProps = {
 };
 
 const PageTools: React.FC<PageToolsProps> = (props) => {
-  const { left, right, marginBottom, marginTop } = props;
+  const { left, right, marginBottom = 0, marginTop = 70 } = props;
 
   const newStyle: Record<string, string> = useMemo(() => {
     const style: Record<string, string> = {};
-    if (marginBottom) {
-      style.marginBottom = `${marginBottom}px`;
-    }
-    if (marginTop) {
-      style.marginTop = `${marginTop}px`;
-    }
+    style.marginBottom = `${marginBottom}px`;
+    style.marginTop = `${marginTop}px`;
     return style;
   }, [marginBottom, marginTop]);
 
   return (
-    <div className={styles['page-tools']} style={newStyle}>
+    <div className="page-tools" style={newStyle}>
       <div className="left">{left}</div>
       <div className="right">{right}</div>
     </div>