feat: add drawer and add upload feat

packages/components/src/theme/index.tsx

@@ -1,7 +1,42 @@
-import { createTheme, ThemeOptions } from '@mui/material/styles';
+import { createTheme, Shadows, ThemeOptions } from '@mui/material/styles';
 import { useTheme as useMuiTheme, Theme } from '@mui/material/styles';
 import { amber } from '@mui/material/colors';
+const generateShadows = (color: string): Shadows => {
+  return [
+    'none',
+    `0px 2px 1px -1px ${color}`,
+    `0px 1px 1px 0px ${color}`,
+    `0px 1px 3px 0px ${color}`,
+    `0px 2px 4px -1px ${color}`,
+
+    `0px 3px 5px -1px ${color}`,
+    `0px 3px 5px -1px ${color}`,
+    `0px 4px 5px -2px ${color}`,
+    `0px 5px 5px -3px ${color}`,
+    `0px 5px 6px -3px ${color}`,
+
+    `0px 6px 6px -3px ${color}`,
+    `0px 6px 7px -4px ${color}`,
+    `0px 7px 8px -4px ${color}`,
+    `0px 7px 8px -4px ${color}`,
+    `0px 8px 9px -5px ${color}`,
+
+    `0px 8px 9px -5px ${color}`,
+    `0px 9px 10px -5px ${color}`,
+    `0px 9px 11px -6px ${color}`,
+    `0px 10px 12px -6px ${color}`,
+    `0px 10px 13px -6px ${color}`,
+
+    `0px 11px 13px -7px ${color}`,
+    `0px 11px 14px -7px ${color}`,
+    `0px 12px 15px -7px ${color}`,
+    `0px 12px 16px -8px ${color}`,
+    `0px 13px 17px -8px ${color}`,
+  ];
+};
 export const themeOptions: ThemeOptions = {
+  // @ts-ignore
+  // cssVariables: true,
   palette: {
     primary: {
       main: '#ffc107', // amber[300]
@@ -22,6 +57,7 @@ export const themeOptions: ThemeOptions = {
       // paper: '#f5f5f5',   // 设置纸张背景颜色
     },
   },
+  shadows: generateShadows('rgba(255, 193, 7, 0.2)'),
   typography: {
     // fontFamily: 'Roboto, sans-serif',
   },
@@ -30,6 +66,22 @@ export const themeOptions: ThemeOptions = {
       defaultProps: {
         disableRipple: true,
       },
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            backgroundColor: amber[100],
+          },
+        },
+      },
+    },
+    MuiButtonGroup: {
+      styleOverrides: {
+        root: {
+          '& .MuiButton-root': {
+            borderColor: amber[600],
+          },
+        },
+      },
     },
     MuiTextField: {
       styleOverrides: {
@@ -51,6 +103,13 @@ export const themeOptions: ThemeOptions = {
         },
       },
     },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          // border: `1px solid ${amber[300]}`,
+        },
+      },
+    },
   },
 };