perf: ui

client/src/components/Tabs/index.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from 'react';
+import { Box, Grid, useTheme } from '@chakra-ui/react';
+import type { GridProps } from '@chakra-ui/react';
+
+// @ts-ignore
+interface Props extends GridProps {
+  list: { id: string; label: string }[];
+  activeId: string;
+  size?: 'sm' | 'md' | 'lg';
+  onChange: (id: string) => void;
+}
+
+const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
+  const theme = useTheme();
+  const sizeMap = useMemo(() => {
+    switch (size) {
+      case 'sm':
+        return {
+          fontSize: 'sm',
+          outP: '3px',
+          inlineP: 1
+        };
+      case 'md':
+        return {
+          fontSize: 'md',
+          outP: '4px',
+          inlineP: 2
+        };
+      case 'lg':
+        return {
+          fontSize: 'lg',
+          outP: '5px',
+          inlineP: 3
+        };
+    }
+  }, [size]);
+
+  return (
+    <Grid
+      gridTemplateColumns={`repeat(${list.length},1fr)`}
+      p={sizeMap.outP}
+      borderRadius={'sm'}
+      fontSize={sizeMap.fontSize}
+      {...props}
+    >
+      {list.map((item) => (
+        <Box
+          key={item.id}
+          py={sizeMap.inlineP}
+          borderRadius={'sm'}
+          textAlign={'center'}
+          {...(activeId === item.id
+            ? {
+                boxShadow: '0px 2px 2px rgba(137, 156, 171, 0.25)',
+                backgroundImage: theme.lgColor.primary2,
+                color: 'white',
+                cursor: 'default'
+              }
+            : {
+                cursor: 'pointer'
+              })}
+          onClick={() => {
+            if (activeId === item.id) return;
+            onChange(item.id);
+          }}
+        >
+          {item.label}
+        </Box>
+      ))}
+    </Grid>
+  );
+};
+
+export default Tabs;

client/src/components/WxConcat/index.tsx

@@ -30,7 +30,7 @@ const WxConcat = ({ onClose }: { onClose: () => void }) => {
         </ModalBody>
 
         <ModalFooter>
-          <Button variant={'outline'} onClick={onClose}>
+          <Button variant={'base'} onClick={onClose}>
             关闭
           </Button>
         </ModalFooter>