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,7 +1,8 @@
 @use "@/assets/css/mixins" as mixins;
 @use "@/assets/css/constants" as constants;
 
-.nav {
+[data-component=home-framework] {
+  .nav {
     display: flex;
     position: fixed;
     align-items: center;
@@ -115,6 +116,7 @@
 
           .item:hover {
             transform: none;
+
             a {
               background-color: constants.$focus-color !important;
             }
@@ -156,9 +158,9 @@
         }
       }
     }
-}
+  }
 
-.dropdown-menu-content {
+  .dropdown-menu-content {
     display: none;
 
     @media screen and (max-width: 900px) {
@@ -192,15 +194,15 @@
         }
       }
     }
-}
+  }
 
-@media screen and (max-width: 900px) {
+  @media screen and (max-width: 900px) {
     .dropdown-menu-content.show {
       display: block;
     }
-}
+  }
 
-.nav.hide {
+  .nav.hide {
     animation: .5s ease both;
 
     @include mixins.unique-keyframes {
@@ -211,4 +213,5 @@
         transform: translateY(-100%);
       }
     }
+  }
 }

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

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

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

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

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

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

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

@@ -1,16 +1,14 @@
 @use "@/assets/css/constants" as constants;
 @use "@/assets/css/mixins" as mixins;
 
-body {
+[data-component=tools-framework] {
-  background-color: constants.$background-color;
+  .left-panel {
-}
-
-.left-panel {
     background-color: constants.$origin-color;
-}
+  }
 
-.right-panel {
+  .right-panel {
     flex: 1;
     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'}>