4.6.7-alpha commit (#743)

Co-authored-by: Archer <545436317@qq.com> Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>
2025-07-27 00:17:31 +00:00 · 2024-01-19 11:17:28 +08:00
parent 8ee7407c4c
commit c031e6dcc9
324 changed files with 8509 additions and 4757 deletions
--- a/packages/web/components/common/Radio/LeftRadio.tsx
+++ b/packages/web/components/common/Radio/LeftRadio.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { Box, Flex, useTheme, Grid, type GridProps } from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import MyTooltip from '../MyTooltip';
+
+// @ts-ignore
+interface Props extends GridProps {
+  list: {
+    title: string;
+    desc?: string;
+    value: any;
+    children?: React.ReactNode;
+    tooltip?: string;
+  }[];
+  align?: 'flex-top' | 'center';
+  value: any;
+  defaultBg?: string;
+  activeBg?: string;
+  onChange: (e: any) => void;
+}
+
+const LeftRadio = ({
+  list,
+  value,
+  align = 'flex-top',
+  px = 3,
+  py = 4,
+  defaultBg = 'myGray.50',
+  activeBg = 'primary.50',
+  onChange,
+  ...props
+}: Props) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  return (
+    <Grid gridGap={[3, 5]} fontSize={['sm', 'md']} {...props}>
+      {list.map((item) => (
+        <MyTooltip key={item.value} label={item.tooltip}>
+          <Flex
+            alignItems={item.desc ? align : 'center'}
+            cursor={'pointer'}
+            userSelect={'none'}
+            px={px}
+            py={py}
+            border={theme.borders.sm}
+            borderWidth={'1px'}
+            borderRadius={'md'}
+            position={'relative'}
+            {...(value === item.value
+              ? {
+                  borderColor: 'primary.400',
+                  bg: activeBg,
+                  boxShadow: 'focus'
+                }
+              : {
+                  bg: defaultBg,
+                  _hover: {
+                    borderColor: 'primary.300'
+                  }
+                })}
+            onClick={() => onChange(item.value)}
+          >
+            <Box
+              w={'18px'}
+              h={'18px'}
+              borderWidth={'2.4px'}
+              borderColor={value === item.value ? 'primary.015' : 'transparent'}
+              borderRadius={'50%'}
+              mr={3}
+            >
+              <Flex
+                w={'100%'}
+                h={'100%'}
+                borderWidth={'1px'}
+                borderColor={value === item.value ? 'primary.600' : 'borderColor.high'}
+                bg={value === item.value ? 'primary.1' : 'transparent'}
+                borderRadius={'50%'}
+                alignItems={'center'}
+                justifyContent={'center'}
+              >
+                <Box
+                  w={'5px'}
+                  h={'5px'}
+                  borderRadius={'50%'}
+                  bg={value === item.value ? 'primary.600' : 'transparent'}
+                ></Box>
+              </Flex>
+            </Box>
+            <Box flex={'1 0 0'}>
+              <Box
+                color={'myGray.900'}
+                fontWeight={item.desc ? '500' : 'normal'}
+                whiteSpace={'nowrap'}
+              >
+                {typeof item.title === 'string' ? t(item.title) : item.title}
+              </Box>
+              {!!item.desc && (
+                <Box fontSize={'xs'} color={'myGray.500'} lineHeight={1.2}>
+                  {t(item.desc)}
+                </Box>
+              )}
+              {item?.children}
+            </Box>
+          </Flex>
+        </MyTooltip>
+      ))}
+    </Grid>
+  );
+};
+
+export default LeftRadio;