style(projects): optimize code style

mufeng889 · Aug 31, 2024 · 95243a0 · 95243a0
1 parent 9c977fd
commit 95243a0
Show file tree

Hide file tree

Showing 10 changed files with 325 additions and 335 deletions.
diff --git a/package.json b/package.json
@@ -104,9 +104,9 @@
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-react-refresh": "0.4.11",
-    "lint-staged": "^15.2.9",
+    "lint-staged": "15.2.9",
     "sass": "1.77.8",
-    "simple-git-hooks": "^2.11.1",
+    "simple-git-hooks": "2.11.1",
     "tsx": "4.18.0",
     "typescript": "5.5.4",
     "unplugin-auto-import": "0.18.2",

diff --git a/packages/materials/src/libs/page-tab/SvgClose.tsx b/packages/materials/src/libs/page-tab/SvgClose.tsx
@@ -1,7 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 import classNames from 'classnames';
+
 interface SvgCloseProps extends React.ComponentProps<'div'> {}
+
 const SvgClose: FC<SvgCloseProps> = ({ className, ...props }) => {
   return (
     <div

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/hooks/common/icon.ts b/src/hooks/common/icon.ts
@@ -1,7 +1,7 @@
 import { useSvgIconRender } from '@sa/hooks';
 
 export function useSvgIcon() {
-  const { SvgIconVNode } = useSvgIconRender(SvgIcon)
+  const { SvgIconVNode } = useSvgIconRender(SvgIcon);
 
   return {
     SvgIconVNode

diff --git a/src/layouts/modules/theme-drawer/index.tsx b/src/layouts/modules/theme-drawer/index.tsx
@@ -32,9 +32,13 @@ const ThemeDrawer = memo(() => {
     >
       <SimpleScrollbar>
         <div className="px-24px pb-24px pt-8px">
+          <ADivider>{t('theme.themeSchema.title')}</ADivider>
           <DarkMode />
+          <ADivider>{t('theme.layoutMode.title')}</ADivider>
           <LayoutMode />
+          <ADivider>{t('theme.themeColor.title')}</ADivider>
           <ThemeColor />
+          <ADivider>{t('theme.pageFunTitle')}</ADivider>
           <PageFun />
         </div>
       </SimpleScrollbar>

diff --git a/src/layouts/modules/theme-drawer/modules/DarkMode.tsx b/src/layouts/modules/theme-drawer/modules/DarkMode.tsx
@@ -1,4 +1,4 @@
-import { Divider, Segmented, Switch } from 'antd';
+import { Segmented, Switch } from 'antd';
 import type { SegmentedOptions } from 'antd/es/segmented';
 import { CSSTransition } from 'react-transition-group';
 import { themeSchemaRecord } from '@/constants/app';
@@ -61,55 +61,52 @@ const DarkMode = () => {
     dispatch(setIsOnlyExpandCurrentParentMenu(value));
   }
   return (
-    <>
-      <Divider>{t('theme.themeSchema.title')}</Divider>
-      <div className="flex-col-stretch gap-16px">
-        <div className="i-flex-center">
-          <Segmented
-            value={themeSettings.themeScheme}
-            options={OPTIONS}
-            className="bg-layout"
-            onChange={handleSegmentChange}
-          ></Segmented>
-        </div>
-        <CSSTransition
-          timeout={300}
-          in={showSiderInverted}
-          classNames="sider-inverted"
-          nodeRef={nodeRef}
-        >
-          <div ref={nodeRef}>
-            <SettingItem label={t('theme.sider.inverted')}>
-              <Switch
-                defaultChecked={themeSettings.sider.inverted}
-                onChange={toggleSiderInverted}
-              />
-            </SettingItem>
-          </div>
-        </CSSTransition>
-        <SettingItem label={t('theme.grayscale')}>
-          <Switch
-            defaultChecked={themeSettings.grayscale}
-            onChange={handleGrayscaleChange}
-          />
-        </SettingItem>
-        <CSSTransition
-          timeout={300}
-          in={isVertical}
-          classNames="sider-inverted"
-          nodeRef={twoNodeRef}
-        >
-          <div ref={twoNodeRef}>
-            <SettingItem label={t('theme.isOnlyExpandCurrentParentMenu')}>
-              <Switch
-                defaultChecked={themeSettings.isOnlyExpandCurrentParentMenu}
-                onChange={handleIsOnlyExpandCurrentParentMenuChange}
-              />
-            </SettingItem>
-          </div>
-        </CSSTransition>
+    <div className="flex-col-stretch gap-16px">
+      <div className="i-flex-center">
+        <Segmented
+          value={themeSettings.themeScheme}
+          options={OPTIONS}
+          className="bg-layout"
+          onChange={handleSegmentChange}
+        ></Segmented>
       </div>
-    </>
+      <CSSTransition
+        timeout={300}
+        in={showSiderInverted}
+        classNames="sider-inverted"
+        nodeRef={nodeRef}
+      >
+        <div ref={nodeRef}>
+          <SettingItem label={t('theme.sider.inverted')}>
+            <Switch
+              defaultChecked={themeSettings.sider.inverted}
+              onChange={toggleSiderInverted}
+            />
+          </SettingItem>
+        </div>
+      </CSSTransition>
+      <SettingItem label={t('theme.grayscale')}>
+        <Switch
+          defaultChecked={themeSettings.grayscale}
+          onChange={handleGrayscaleChange}
+        />
+      </SettingItem>
+      <CSSTransition
+        timeout={300}
+        in={isVertical}
+        classNames="sider-inverted"
+        nodeRef={twoNodeRef}
+      >
+        <div ref={twoNodeRef}>
+          <SettingItem label={t('theme.isOnlyExpandCurrentParentMenu')}>
+            <Switch
+              defaultChecked={themeSettings.isOnlyExpandCurrentParentMenu}
+              onChange={handleIsOnlyExpandCurrentParentMenuChange}
+            />
+          </SettingItem>
+        </div>
+      </CSSTransition>
+    </div>
   );
 };
 

diff --git a/src/layouts/modules/theme-drawer/modules/LayoutMode.tsx b/src/layouts/modules/theme-drawer/modules/LayoutMode.tsx
@@ -1,4 +1,3 @@
-import { Divider } from 'antd';
 import ClassNames from 'classnames';
 import LayoutModeCard from '../components/LayoutModeCard';
 import style from './layoutMode.module.scss';
@@ -43,14 +42,7 @@ const LAYOUTS_COMPONENTS: Record<UnionKey.ThemeLayoutMode, React.ReactNode> = {
 };
 
 const LayoutMode = memo(() => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Divider>{t('theme.layoutMode.title')}</Divider>
-      <LayoutModeCard {...LAYOUTS_COMPONENTS} />
-    </>
-  );
+  return <LayoutModeCard {...LAYOUTS_COMPONENTS} />;
 });
 
 export default LayoutMode;