Isolate component styles

src/assets/css/common.scss

@@ -6,6 +6,7 @@
 }
 
 .body {
+  background-color: constants.$background-color;
   color: constants.$font-main-color;
   user-select: none;
   min-width: 900px;

src/assets/css/components/home/home.scss

@@ -1,4 +1,4 @@
-.indicator {
+[data-component=home].indicator {
   position: fixed;
   margin: {
     right: 20px;

src/assets/css/pages/home-framework.scss

@@ -1,6 +1,7 @@
 @use "@/assets/css/mixins" as mixins;
 @use "@/assets/css/constants" as constants;
 
+[data-component=home-framework] {
   .nav {
     display: flex;
     position: fixed;
@@ -115,6 +116,7 @@
 
           .item:hover {
             transform: none;
+
             a {
               background-color: constants.$focus-color !important;
             }
@@ -212,3 +214,4 @@
       }
     }
   }
+}

src/assets/css/pages/system-framework.scss

@@ -1,10 +1,7 @@
 @use "@/assets/css/constants" as constants;
 @use "@/assets/css/mixins" as mixins;
 
-body {
+[data-component=system-framework] {
-  background-color: constants.$background-color;
-}
-
   .left-panel {
     background-color: constants.$origin-color;
   }
@@ -14,3 +11,4 @@ body {
     width: 0;
     background-color: constants.$background-color;
   }
+}

src/assets/css/pages/system/settings.scss

@@ -1,5 +1,6 @@
 @use '@/assets/css/constants' as constants;
 
+[data-component=system-settings] {
   .root-content {
     padding: 30px;
     gap: 20px;
@@ -38,3 +39,4 @@
       }
     }
   }
+}

src/assets/css/pages/system/statistics.scss

@@ -1,5 +1,6 @@
 @use '@/assets/css/constants' as constants;
 
+[data-component=system-statistics] {
   .root-content {
     padding: 30px;
     gap: 20px;
@@ -86,3 +87,4 @@
       }
     }
   }
+}

src/assets/css/pages/tools-framework.scss

@@ -1,10 +1,7 @@
 @use "@/assets/css/constants" as constants;
 @use "@/assets/css/mixins" as mixins;
 
-body {
+[data-component=tools-framework] {
-  background-color: constants.$background-color;
-}
-
   .left-panel {
     background-color: constants.$origin-color;
   }
@@ -14,3 +11,4 @@ body {
     width: 0;
     background-color: constants.$background-color;
   }
+}

src/assets/css/pages/user-framework.scss

@@ -0,0 +1,14 @@
+@use "@/assets/css/constants" as constants;
+@use "@/assets/css/mixins" as mixins;
+
+[data-component=user-framework] {
+  .left-panel {
+    background-color: constants.$origin-color;
+  }
+
+  .right-panel {
+    flex: 1;
+    width: 0;
+    background-color: constants.$background-color;
+  }
+}

src/pages/HomeFramework.tsx

@@ -78,6 +78,7 @@ const HomeFramework: React.FC = () => {
     return (
         <>
             <HideScrollbar
+                data-component={'home-framework'}
                 ref={hideScrollbarRef}
                 isPreventVerticalScroll={preventScroll}
                 isShowHorizontalScrollbar={true}

src/pages/SystemFramework.tsx

@@ -10,7 +10,7 @@ import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 const SystemFramework: React.FC = () => {
     return (
         <>
-            <FitFullscreen className={'flex-horizontal'}>
+            <FitFullscreen data-component={'system-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'系统配置'}>
                         <SidebarItemList>

src/pages/ToolsFramework.tsx

@@ -20,7 +20,7 @@ const ToolsFramework: React.FC = () => {
 
     return (
         <>
-            <FitFullscreen className={'flex-horizontal'}>
+            <FitFullscreen data-component={'tools-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}>
                         <SidebarItemList>

src/pages/UserFramework.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import '@/assets/css/pages/tools-framework.scss'
+import '@/assets/css/pages/user-framework.scss'
 import user from '@/router/user'
 import { hasPathPermission } from '@/util/auth'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -11,7 +11,7 @@ import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 const ToolsFramework: React.FC = () => {
     return (
         <>
-            <FitFullscreen className={'flex-horizontal'}>
+            <FitFullscreen data-component={'user-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar
                         title={'个人中心'}

src/pages/home/index.tsx

@@ -146,6 +146,7 @@ const Home: React.FC = () => {
     return (
         <>
             <div
+                data-component={'home'}
                 tabIndex={0}
                 onWheel={handleWheel}
                 onTouchStart={handleTouchStart}
@@ -159,7 +160,7 @@ const Home: React.FC = () => {
                 })}
             </div>
 
-            <div hidden={navbarHidden} className={'indicator'}>
+            <div data-component={'home'} hidden={navbarHidden} className={'indicator'}>
                 <Indicator
                     total={content.length}
                     current={currentContent}

src/pages/system/Group.tsx

@@ -631,7 +631,7 @@ const Group: React.FC = () => {
 
     return (
         <>
-            <FitFullscreen>
+            <FitFullscreen data-component={'system-group'}>
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar

src/pages/system/Settings.tsx

@@ -195,7 +195,7 @@ const MailSettings: React.FC = () => {
 const Settings: React.FC = () => {
     return (
         <>
-            <FitFullscreen>
+            <FitFullscreen data-component={'system-settings'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox className={'root-content'}>
                         <FlexBox direction={'horizontal'} className={'root-row'}>

src/pages/system/Statistics.tsx

@@ -939,7 +939,7 @@ const StorageInfo: React.FC = () => {
 const Statistics: React.FC = () => {
     return (
         <>
-            <FitFullscreen>
+            <FitFullscreen data-component={'system-statistics'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission operationCode={'system:statistics:query:usage'}>