optimize various base components

src/renderer/components/query-builder/index.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
@@ -107,15 +108,17 @@ export const QueryBuilder = ({
         onChangeType({ groupIndex, level, value });
     };
 
+    const boxStyle = useMemo(
+        () => ({
+            border: '1px solid var(--theme-colors-border)',
+            borderRadius: 'var(--theme-radius-md)',
+            marginLeft: level > 0 ? '20px' : '0px',
+        }),
+        [level],
+    );
+
     return (
-        <Box
-            p="md"
-            style={{
-                border: '1px solid var(--theme-colors-border)',
-                borderRadius: 'var(--theme-radius-md)',
-                marginLeft: level > 0 ? '20px' : '0px',
-            }}
-        >
+        <Box p="md" style={boxStyle}>
             <Stack gap="sm">
                 <Group gap="sm" justify="space-between" wrap="nowrap">
                     <Group gap="sm" wrap="nowrap">