feat: first commit

admin/src/components/Settings/block.tsx

@@ -0,0 +1,69 @@
+import React, { ReactNode } from 'react';
+import { Switch, Divider, InputNumber } from '@arco-design/web-react';
+import { useStore } from '@/store';
+import useLocale from '../../utils/useLocale';
+import styles from './style/block.module.less';
+
+export interface BlockProps {
+  title?: ReactNode;
+  options?: { name: string; value: string; type?: 'switch' | 'number' }[];
+  children?: ReactNode;
+}
+
+export default function Block(props: BlockProps) {
+  const { title, options, children } = props;
+  const locale = useLocale();
+  const { settings, updateSetting } = useStore();
+
+  return (
+    <div className={styles.block}>
+      <h5 className={styles.title}>{title}</h5>
+      {options &&
+        options.map((option) => {
+          const type = option.type || 'switch';
+
+          return (
+            <div className={styles['switch-wrapper']} key={option.value}>
+              <span>{locale[option.name]}</span>
+              {type === 'switch' && (
+                <Switch
+                  size="small"
+                  checked={!!settings[option.value]}
+                  onChange={(checked) => {
+                    const newSetting = {
+                      ...settings,
+                      [option.value]: checked
+                    };
+                    updateSetting(newSetting);
+                    // set color week
+                    if (checked && option.value === 'colorWeek') {
+                      document.body.style.filter = 'invert(80%)';
+                    }
+                    if (!checked && option.value === 'colorWeek') {
+                      document.body.style.filter = 'none';
+                    }
+                  }}
+                />
+              )}
+              {type === 'number' && (
+                <InputNumber
+                  style={{ width: 80 }}
+                  size="small"
+                  value={settings.menuWidth}
+                  onChange={(value) => {
+                    const newSetting = {
+                      ...settings,
+                      [option.value]: value
+                    };
+                    updateSetting(newSetting);
+                  }}
+                />
+              )}
+            </div>
+          );
+        })}
+      {children}
+      <Divider />
+    </div>
+  );
+}