Isolate component styles

src/pages/HomeFramework.tsx

@@ -78,6 +78,7 @@ const HomeFramework: React.FC = () => {
     return (
         <>
             <HideScrollbar
+                data-component={'home-framework'}
                 ref={hideScrollbarRef}
                 isPreventVerticalScroll={preventScroll}
                 isShowHorizontalScrollbar={true}
@@ -100,8 +101,8 @@ const HomeFramework: React.FC = () => {
                                                         isPending
                                                             ? 'pending'
                                                             : isActive
-                                                            ? 'active'
-                                                            : ''
+                                                              ? 'active'
+                                                              : ''
                                                     }
                                                 >
                                                     {(route.handle as RouteHandle).name}
@@ -126,8 +127,8 @@ const HomeFramework: React.FC = () => {
                                                                             isPending
                                                                                 ? 'pending'
                                                                                 : isActive
-                                                                                ? 'active'
-                                                                                : ''
+                                                                                  ? 'active'
+                                                                                  : ''
                                                                         }
                                                                     >
                                                                         {

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'}>