optimize: optimized code

Author: Ohh-889

packages/utils/package.json

@@ -6,12 +6,15 @@
   },
   "typesVersions": {
     "*": {
-      "*": ["./src/*"]
+      "*": [
+        "./src/*"
+      ]
     }
   },
   "dependencies": {
     "colord": "2.9.3",
     "crypto-js": "4.2.0",
+    "klona": "2.0.6",
     "localforage": "1.10.0",
     "nanoid": "5.0.7"
   },

packages/utils/src/klona.ts

@@ -0,0 +1,3 @@
+import { klona as jsonClone } from 'klona/json';
+
+export { jsonClone };

pnpm-lock.yaml

@@ -2,45 +2,46 @@ import { getPaletteColorByNumber, mixColor } from '@sa/color';
 import { Card } from 'antd';
 import { Outlet } from 'react-router-dom';
 import WaveBg from '@/components/custom/wave-bg';
-import SystemLogo from '@/components/common/system-logo';
-import ThemeSchemaSwitch from '@/components/common/ThemeSchemaSwitch';
-import LangSwitch from '@/components/common/LangSwitch';
+import Header from './modules/Header';
+
 import { getDarkMode, getThemeSettings } from '@/store/slice/theme';
 
 const COLOR_WHITE = '#ffffff';
-export function Component() {
+
+
+function useBgColor() {
   const darkMode = useAppSelector(getDarkMode);
   const { themeColor } = useAppSelector(getThemeSettings);
-  const { t } = useTranslation();
 
   const bgThemeColor = darkMode ? getPaletteColorByNumber(themeColor, 600) : themeColor;
   const ratio = darkMode ? 0.5 : 0.2;
   const bgColor = mixColor(COLOR_WHITE, themeColor, ratio);
 
+  return {
+    bgThemeColor,
+    bgColor
+  }
+}
+
+export function Component() {
+
+  const { bgThemeColor, bgColor } = useBgColor();
+
+
   return (
     <div
       className="relative size-full flex-center overflow-hidden bg-layout"
       style={{ backgroundColor: bgColor }}
     >
-      <WaveBg themeColor={bgThemeColor}></WaveBg>
+      <WaveBg themeColor={bgThemeColor} />
       <Card
         bordered={false}
         className="relative z-4 w-auto rd-12px"
       >
         <div className="w-400px lt-sm:w-300px">
-          <header className="flex-y-center justify-between">
-            <SystemLogo className="text-64px text-primary lt-sm:text-48px"></SystemLogo>
-            <h3 className="text-28px text-primary font-500 lt-sm:text-22px">{t('system.title')}</h3>
-            <div className="i-flex-col">
-              <ThemeSchemaSwitch
-                showTooltip={false}
-                className="text-20px lt-sm:text-18px"
-              />
-              <LangSwitch showTooltip={false} />
-            </div>
-          </header>
+          <Header />
           <main className="pt-24px">
-            <Outlet></Outlet>
+            <Outlet />
           </main>
         </div>
       </Card>

src/pages/login/index.tsx

@@ -0,0 +1,25 @@
+import SystemLogo from '@/components/common/system-logo';
+import ThemeSchemaSwitch from '@/components/common/ThemeSchemaSwitch';
+import LangSwitch from '@/components/common/LangSwitch';
+
+const Header = memo(() => {
+
+  const { t } = useTranslation();
+
+
+  return (
+    <header className="flex-y-center justify-between">
+      <SystemLogo className="text-64px text-primary lt-sm:text-48px"></SystemLogo>
+      <h3 className="text-28px text-primary font-500 lt-sm:text-22px">{t('system.title')}</h3>
+      <div className="i-flex-col">
+        <ThemeSchemaSwitch
+          showTooltip={false}
+          className="text-20px lt-sm:text-18px"
+        />
+        <LangSwitch showTooltip={false} />
+      </div>
+    </header>
+  )
+})
+
+export default Header

src/pages/login/modules/Header.tsx

@@ -1,6 +1,7 @@
 import { Button, Checkbox, Divider, Form, Input, Space } from 'antd';
 import { loginModuleRecord } from '@/constants/app';
 import { useLogin } from '@/hooks/common/login';
+
 type AccountKey = 'super' | 'admin' | 'user';
 interface Account {
   key: AccountKey;
@@ -73,6 +74,7 @@ export function Component() {
         >
           <Input.Password autoComplete="password"></Input.Password>
         </Form.Item>
+        </Form>
         <Space
           direction="vertical"
           className="w-full"
@@ -129,7 +131,7 @@ export function Component() {
             })}
           </div>
         </Space>
-      </Form>
+
     </>
   );
 }