update style

labring · Dec 3, 2024 · 622ebed · 622ebed
1 parent d9ee0e8
commit 622ebed
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 17 deletions.
diff --git a/frontend/providers/dbprovider/public/locales/en/common.json b/frontend/providers/dbprovider/public/locales/en/common.json
@@ -322,5 +322,9 @@
   "within_1_hour": "Within 1 hour",
   "within_5_minutes": "Within 5 minutes",
   "yaml_file": "YAML",
-  "you_have_successfully_deployed_database": "You have successfully deployed and created a database!"
-}
+  "you_have_successfully_deployed_database": "You have successfully deployed and created a database!",
+  "delete_backup_with_db": "Keep Backups",
+  "delete_backup_with_db_tip": "Delete the databases but leave the backups as they are",
+  "wipeout_backup_with_db": "Discard Backups",
+  "wipeout_backup_with_db_tip": "Delete the databases and the backups"
+}
diff --git a/frontend/providers/dbprovider/public/locales/zh/common.json b/frontend/providers/dbprovider/public/locales/zh/common.json
@@ -323,5 +323,9 @@
   "within_1_hour": "一小时内",
   "within_5_minutes": "五分钟内",
   "yaml_file": "YAML 文件",
-  "you_have_successfully_deployed_database": "您已成功部署创建一个数据库！"
-}
+  "you_have_successfully_deployed_database": "您已成功部署创建一个数据库！",
+  "delete_backup_with_db": "保留备份",
+  "delete_backup_with_db_tip": "在删除数据库时，保留其备份",
+  "wipeout_backup_with_db": "随数据库删除",
+  "wipeout_backup_with_db_tip": "在删除数据库时，删除其备份"
+}
diff --git a/frontend/providers/dbprovider/src/constants/theme.ts b/frontend/providers/dbprovider/src/constants/theme.ts
@@ -1,5 +1,35 @@
 import { extendTheme } from '@chakra-ui/react';
 import { theme as SealosTheme } from '@sealos/ui';
+import { checkboxAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
+  checkboxAnatomy.keys
+);
+
+const checkbox = defineMultiStyleConfig({
+  baseStyle: {
+    control: {
+      borderWidth: '1px',
+      borderRadius: '4px',
+      _checked: {
+        bg: '#F0FBFF',
+        borderColor: '#219BF4',
+        boxShadow: ' 0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)',
+        _hover: {
+          bg: '#F0FBFF',
+          borderColor: '#219BF4'
+        }
+      },
+      _hover: {
+        bg: 'transparent'
+      }
+    },
+    icon: {
+      color: '#219BF4'
+    }
+  }
+});
 
 export const theme = extendTheme(SealosTheme, {
   styles: {
@@ -13,5 +43,6 @@ export const theme = extendTheme(SealosTheme, {
         minWidth: '700px'
       }
     }
-  }
+  },
+  components: { Checkbox: checkbox }
 });
diff --git a/frontend/providers/dbprovider/src/pages/db/edit/components/Form.tsx b/frontend/providers/dbprovider/src/pages/db/edit/components/Form.tsx
@@ -641,8 +641,8 @@ const Form = ({
                       boxShadow={'none !important'}
                       borderColor={'myGray.200'}
                       list={[
-                        { value: 'd', label: 'Day' },
-                        { value: 'h', label: 'Hour' }
+                        { value: 'd', label: t('Day') },
+                        { value: 'h', label: t('Hour') }
                       ]}
                       h={'35px'}
                       borderTopLeftRadius={0}
@@ -652,21 +652,66 @@ const Form = ({
                       }}
                     />
                   </Flex>
-                  <Flex mt={7} alignItems={'center'}>
+                  <Flex mt={7} alignItems={'start'}>
                     <Box flex={'0 0 110px'}>{t('termination_policy')}</Box>
-                    <Switch
+                    {/* <Switch
                       isChecked={getValues('terminationPolicy') === 'Delete'}
                       onChange={(e) => {
                         setValue('terminationPolicy', e.target.checked ? 'Delete' : 'WipeOut');
                       }}
-                    />
-                    <Tip
-                      ml={4}
-                      icon={<MyIcon name="warningInfo" width={'14px'}></MyIcon>}
-                      text={t('termination_policy_tip')}
-                      size="sm"
-                      borderRadius={'md'}
-                    />
+                    /> */}
+                    <Flex gap={'12px'} flexDirection={'column'}>
+                      {['Delete', 'WipeOut'].map((item) => {
+                        const isChecked = getValues('terminationPolicy') === item;
+
+                        return (
+                          <Flex
+                            key={item}
+                            alignItems={'center'}
+                            justifyContent={'start'}
+                            minW={'300px'}
+                            p={'10px 12px'}
+                            gap={'8px'}
+                            bg={'grayModern.50'}
+                            border={'1px solid'}
+                            boxShadow={
+                              isChecked ? '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)' : 'none'
+                            }
+                            borderColor={isChecked ? 'brightBlue.500' : '#E8EBF0'}
+                            borderRadius={'md'}
+                            onClick={() => {
+                              setValue(
+                                'terminationPolicy',
+                                getValues('terminationPolicy') === 'Delete' ? 'WipeOut' : 'Delete'
+                              );
+                            }}
+                            cursor={'pointer'}
+                          >
+                            <Center
+                              boxSize={'14px'}
+                              borderRadius={'full'}
+                              border={'1px solid'}
+                              borderColor={isChecked ? 'brightBlue.500' : '#E8EBF0'}
+                              boxShadow={
+                                isChecked ? '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)' : '#C4CBD7'
+                              }
+                            >
+                              {isChecked && (
+                                <Box boxSize={'4px'} borderRadius={'full'} bg={'#219BF4'}></Box>
+                              )}
+                            </Center>
+                            <Box>
+                              <Text fontSize={'12px'} fontWeight={'bold'} color={'grayModern.900'}>
+                                {t(`${item.toLowerCase()}_backup_with_db` as I18nCommonKey)}
+                              </Text>
+                              <Text fontSize={'10px'} fontWeight={'bold'} color="grayModern.500">
+                                {t(`${item.toLowerCase()}_backup_with_db_tip` as I18nCommonKey)}
+                              </Text>
+                            </Box>
+                          </Flex>
+                        );
+                      })}
+                    </Flex>
                   </Flex>
                 </Box>
               </Box>