From 1b78cd41634fdce2e0fc1ece903905563ef02e11 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 21 Dec 2023 10:36:01 +0800
Subject: [PATCH] Isolate component styles

---
 src/assets/css/common.scss                  |   1 +
 src/assets/css/components/home/home.scss    |   2 +-
 src/assets/css/pages/home-framework.scss    | 353 ++++++++++----------
 src/assets/css/pages/system-framework.scss  |  20 +-
 src/assets/css/pages/system/settings.scss   |  52 +--
 src/assets/css/pages/system/statistics.scss | 130 +++----
 src/assets/css/pages/tools-framework.scss   |  20 +-
 src/assets/css/pages/user-framework.scss    |  14 +
 src/pages/HomeFramework.tsx                 |   9 +-
 src/pages/SystemFramework.tsx               |   2 +-
 src/pages/ToolsFramework.tsx                |   2 +-
 src/pages/UserFramework.tsx                 |   4 +-
 src/pages/home/index.tsx                    |   3 +-
 src/pages/system/Group.tsx                  |   2 +-
 src/pages/system/Settings.tsx               |   2 +-
 src/pages/system/Statistics.tsx             |   2 +-
 16 files changed, 319 insertions(+), 299 deletions(-)
 create mode 100644 src/assets/css/pages/user-framework.scss

diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index 682ce00..d6a24a7 100644
--- a/src/assets/css/common.scss
+++ b/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;
diff --git a/src/assets/css/components/home/home.scss b/src/assets/css/components/home/home.scss
index f339e4f..5cd495e 100644
--- a/src/assets/css/components/home/home.scss
+++ b/src/assets/css/components/home/home.scss
@@ -1,4 +1,4 @@
-.indicator {
+[data-component=home].indicator {
   position: fixed;
   margin: {
     right: 20px;
diff --git a/src/assets/css/pages/home-framework.scss b/src/assets/css/pages/home-framework.scss
index 34717e0..78aae96 100644
--- a/src/assets/css/pages/home-framework.scss
+++ b/src/assets/css/pages/home-framework.scss
@@ -1,214 +1,217 @@
 @use "@/assets/css/mixins" as mixins;
 @use "@/assets/css/constants" as constants;
 
-.nav {
-  display: flex;
-  position: fixed;
-  align-items: center;
-  z-index: 1;
-  width: 100%;
-  height: 70px;
-  background-color: constants.$origin-color;
-  border: {
-    bottom: {
-      width: 1px;
-      style: solid;
-      color: constants.$border-color;
-    }
-  }
-  animation: .5s ease both;
-
-  @include mixins.unique-keyframes {
-    0% {
-      transform: translateY(-100%);
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  .logo {
-    padding: 0 40px;
-
-    .title {
-      font-size: 2.8em;
-      font-family: century gothic, texgyreadventor, stheiti, sans-serif;
-    }
-  }
-
-  nav {
+[data-component=home-framework] {
+  .nav {
     display: flex;
-    justify-content: end;
-    flex: 1;
-    transition: {
-      property: all;
-      duration: .5s;
-    };
-
-    .menu {
-      padding: 0 30px;
-
-      .item {
-        display: inline-block;
-        position: relative;
-        font-size: 1.5em;
-        transition: {
-          property: all;
-          duration: .3s;
-        };
-
-        a {
-          padding: 5px 20px;
-          color: constants.$url-color;
-        }
+    position: fixed;
+    align-items: center;
+    z-index: 1;
+    width: 100%;
+    height: 70px;
+    background-color: constants.$origin-color;
+    border: {
+      bottom: {
+        width: 1px;
+        style: solid;
+        color: constants.$border-color;
       }
+    }
+    animation: .5s ease both;
 
-      .active {
-        border: {
-          bottom: {
-            width: 2px;
-            style: solid;
-            color: constants.$url-active-color;
-          };
-        };
+    @include mixins.unique-keyframes {
+      0% {
+        transform: translateY(-100%);
       }
-
-      .item:hover {
-        transform: translateY(-5px);
+      100% {
+        transform: translateY(0);
       }
+    }
 
-      .item:hover .submenu {
-        display: block;
-        border: {
-          width: 1px;
-          color: constants.$border-color;
-          style: solid;
-        };
-        animation: 0.3s;
+    .logo {
+      padding: 0 40px;
 
-        @include mixins.unique-keyframes {
-          0% {
-            transform: translateY(-10px);
-            opacity: 0;
-          }
-        }
+      .title {
+        font-size: 2.8em;
+        font-family: century gothic, texgyreadventor, stheiti, sans-serif;
       }
+    }
 
-      .submenu {
-        display: none;
-        position: absolute;
-        width: 100%;
-        text-align: center;
-        background-color: constants.$origin-color;
-        overflow: hidden;
+    nav {
+      display: flex;
+      justify-content: end;
+      flex: 1;
+      transition: {
+        property: all;
+        duration: .5s;
+      };
+
+      .menu {
+        padding: 0 30px;
 
         .item {
-          display: block;
-          font-size: 0.8em;
-          transition: all 0s;
+          display: inline-block;
+          position: relative;
+          font-size: 1.5em;
+          transition: {
+            property: all;
+            duration: .3s;
+          };
 
           a {
-            display: block;
-            padding: 8px 0;
-          }
-        }
-
-        .item:hover {
-          transform: none;
-          a {
-            background-color: constants.$focus-color !important;
+            padding: 5px 20px;
+            color: constants.$url-color;
           }
         }
 
         .active {
-          font-weight: bold;
-          border: none;
+          border: {
+            bottom: {
+              width: 2px;
+              style: solid;
+              color: constants.$url-active-color;
+            };
+          };
         }
-      }
-    }
 
-    .dropdown-menu-button {
-      display: none;
-      margin: 0 20px;
-      width: 45px;
-      height: 45px;
-      justify-content: center;
-      align-items: center;
-      border-radius: 6px;
-    }
+        .item:hover {
+          transform: translateY(-5px);
+        }
 
-    .dropdown-menu-button.active {
-      background-color: transparentize(constants.$focus-color, 0.8);
-      border: {
-        width: 1px;
-        color: constants.$focus-color;
-        style: solid;
-      };
-    }
+        .item:hover .submenu {
+          display: block;
+          border: {
+            width: 1px;
+            color: constants.$border-color;
+            style: solid;
+          };
+          animation: 0.3s;
 
-    @media screen and (max-width: 900px) {
-      .menu {
-        display: none;
+          @include mixins.unique-keyframes {
+            0% {
+              transform: translateY(-10px);
+              opacity: 0;
+            }
+          }
+        }
+
+        .submenu {
+          display: none;
+          position: absolute;
+          width: 100%;
+          text-align: center;
+          background-color: constants.$origin-color;
+          overflow: hidden;
+
+          .item {
+            display: block;
+            font-size: 0.8em;
+            transition: all 0s;
+
+            a {
+              display: block;
+              padding: 8px 0;
+            }
+          }
+
+          .item:hover {
+            transform: none;
+
+            a {
+              background-color: constants.$focus-color !important;
+            }
+          }
+
+          .active {
+            font-weight: bold;
+            border: none;
+          }
+        }
       }
 
       .dropdown-menu-button {
-        display: flex;
+        display: none;
+        margin: 0 20px;
+        width: 45px;
+        height: 45px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 6px;
+      }
+
+      .dropdown-menu-button.active {
+        background-color: transparentize(constants.$focus-color, 0.8);
+        border: {
+          width: 1px;
+          color: constants.$focus-color;
+          style: solid;
+        };
+      }
+
+      @media screen and (max-width: 900px) {
+        .menu {
+          display: none;
+        }
+
+        .dropdown-menu-button {
+          display: flex;
+        }
       }
     }
   }
-}
 
-.dropdown-menu-content {
-  display: none;
+  .dropdown-menu-content {
+    display: none;
+
+    @media screen and (max-width: 900px) {
+      display: none;
+      position: fixed;
+      width: 100%;
+      top: 70px;
+      border: {
+        width: 1px;
+        color: constants.$border-color;
+        style: solid;
+      };
+      background-color: constants.$origin-color;
+      z-index: 1;
+
+      ul {
+        li {
+          font-size: 1.2em;
+          text-align: center;
+
+          a {
+            display: block;
+            width: 100%;
+            height: 100%;
+            padding: 10px;
+          }
+
+          :hover {
+            background-color: constants.$focus-color;
+          }
+        }
+      }
+    }
+  }
 
   @media screen and (max-width: 900px) {
-    display: none;
-    position: fixed;
-    width: 100%;
-    top: 70px;
-    border: {
-      width: 1px;
-      color: constants.$border-color;
-      style: solid;
-    };
-    background-color: constants.$origin-color;
-    z-index: 1;
+    .dropdown-menu-content.show {
+      display: block;
+    }
+  }
 
-    ul {
-      li {
-        font-size: 1.2em;
-        text-align: center;
+  .nav.hide {
+    animation: .5s ease both;
 
-        a {
-          display: block;
-          width: 100%;
-          height: 100%;
-          padding: 10px;
-        }
-
-        :hover {
-          background-color: constants.$focus-color;
-        }
+    @include mixins.unique-keyframes {
+      0% {
+        transform: translateY(0);
+      }
+      100% {
+        transform: translateY(-100%);
       }
-    }
-  }
-}
-
-@media screen and (max-width: 900px) {
-  .dropdown-menu-content.show {
-    display: block;
-  }
-}
-
-.nav.hide {
-  animation: .5s ease both;
-
-  @include mixins.unique-keyframes {
-    0% {
-      transform: translateY(0);
-    }
-    100% {
-      transform: translateY(-100%);
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/css/pages/system-framework.scss b/src/assets/css/pages/system-framework.scss
index 937d667..6966464 100644
--- a/src/assets/css/pages/system-framework.scss
+++ b/src/assets/css/pages/system-framework.scss
@@ -1,16 +1,14 @@
 @use "@/assets/css/constants" as constants;
 @use "@/assets/css/mixins" as mixins;
 
-body {
-  background-color: constants.$background-color;
-}
+[data-component=system-framework] {
+  .left-panel {
+    background-color: constants.$origin-color;
+  }
 
-.left-panel {
-  background-color: constants.$origin-color;
-}
-
-.right-panel {
-  flex: 1;
-  width: 0;
-  background-color: constants.$background-color;
+  .right-panel {
+    flex: 1;
+    width: 0;
+    background-color: constants.$background-color;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss
index 1b1d649..5af3198 100644
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -1,38 +1,40 @@
 @use '@/assets/css/constants' as constants;
 
-.root-content {
-  padding: 30px;
-  gap: 20px;
-
-  .root-row {
+[data-component=system-settings] {
+  .root-content {
+    padding: 30px;
     gap: 20px;
 
-    .settings-card {
-      padding: 20px;
+    .root-row {
       gap: 20px;
-      color: constants.$main-color;
 
-      > .head {
-        align-items: center;
-        gap: 5px;
+      .settings-card {
+        padding: 20px;
+        gap: 20px;
+        color: constants.$main-color;
 
-        .icon {
-          font-size: constants.$SIZE_ICON_MD;
-          flex: 0 0 auto;
-        }
+        > .head {
+          align-items: center;
+          gap: 5px;
 
-        .title {
-          display: flex;
-          font-size: 1.2em;
-        }
+          .icon {
+            font-size: constants.$SIZE_ICON_MD;
+            flex: 0 0 auto;
+          }
 
-        :nth-child(n+3) {
-          flex: 0 0 auto;
-          color: constants.$font-main-color;
-        }
+          .title {
+            display: flex;
+            font-size: 1.2em;
+          }
 
-        .bt-save {
-          color: constants.$main-color;
+          :nth-child(n+3) {
+            flex: 0 0 auto;
+            color: constants.$font-main-color;
+          }
+
+          .bt-save {
+            color: constants.$main-color;
+          }
         }
       }
     }
diff --git a/src/assets/css/pages/system/statistics.scss b/src/assets/css/pages/system/statistics.scss
index a41552d..7d67e24 100644
--- a/src/assets/css/pages/system/statistics.scss
+++ b/src/assets/css/pages/system/statistics.scss
@@ -1,86 +1,88 @@
 @use '@/assets/css/constants' as constants;
 
-.root-content {
-  padding: 30px;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: center;
+[data-component=system-statistics] {
+  .root-content {
+    padding: 30px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
 
-  > .card-box {
-    width: 48%;
-    flex: 0 0 auto;
+    > .card-box {
+      width: 48%;
+      flex: 0 0 auto;
 
-    .common-card {
-      padding: 20px;
-      gap: 20px;
+      .common-card {
+        padding: 20px;
+        gap: 20px;
 
-      > .head {
-        align-items: center;
-        gap: 5px;
-        color: constants.$main-color;
+        > .head {
+          align-items: center;
+          gap: 5px;
+          color: constants.$main-color;
 
-        .icon {
-          font-size: constants.$SIZE_ICON_MD;
-          flex: 0 0 auto;
-        }
+          .icon {
+            font-size: constants.$SIZE_ICON_MD;
+            flex: 0 0 auto;
+          }
 
-        .title {
-          display: flex;
-          font-size: 1.2em;
-        }
+          .title {
+            display: flex;
+            font-size: 1.2em;
+          }
 
-        :nth-child(n+3) {
-          flex: 0 0 auto;
-          color: constants.$font-main-color;
-        }
-      }
-
-      .card-content {
-        font-size: 1.1em;
-        padding: 0 10px;
-        gap: 10px;
-
-        .key, .value-percent {
-          flex: 0 0 auto;
-          color: constants.$font-main-color;
-        }
-
-        .value {
-          color: constants.$font-secondary-color;
-          overflow: hidden;
-
-          > * {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
+          :nth-child(n+3) {
+            flex: 0 0 auto;
+            color: constants.$font-main-color;
           }
         }
 
-        .value-chart {
-          justify-content: space-around;
-          width: 0;
+        .card-content {
+          font-size: 1.1em;
+          padding: 0 10px;
+          gap: 10px;
 
-          > div {
-            max-height: 12px;
-            height: 12px;
+          .key, .value-percent {
+            flex: 0 0 auto;
+            color: constants.$font-main-color;
+          }
+
+          .value {
+            color: constants.$font-secondary-color;
+            overflow: hidden;
 
             > * {
-              transform: translateY(1px);
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
             }
           }
-        }
 
-        .value-percent {
-          text-align: right;
-        }
+          .value-chart {
+            justify-content: space-around;
+            width: 0;
 
-        .big-chart {
-          width: 0;
-          height: 400px;
-        }
+            > div {
+              max-height: 12px;
+              height: 12px;
 
-        > * {
-          gap: 5px;
+              > * {
+                transform: translateY(1px);
+              }
+            }
+          }
+
+          .value-percent {
+            text-align: right;
+          }
+
+          .big-chart {
+            width: 0;
+            height: 400px;
+          }
+
+          > * {
+            gap: 5px;
+          }
         }
       }
     }
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 937d667..5652c7d 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -1,16 +1,14 @@
 @use "@/assets/css/constants" as constants;
 @use "@/assets/css/mixins" as mixins;
 
-body {
-  background-color: constants.$background-color;
-}
+[data-component=tools-framework] {
+  .left-panel {
+    background-color: constants.$origin-color;
+  }
 
-.left-panel {
-  background-color: constants.$origin-color;
-}
-
-.right-panel {
-  flex: 1;
-  width: 0;
-  background-color: constants.$background-color;
+  .right-panel {
+    flex: 1;
+    width: 0;
+    background-color: constants.$background-color;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/css/pages/user-framework.scss b/src/assets/css/pages/user-framework.scss
new file mode 100644
index 0000000..3523793
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index 605a2cd..200632f 100644
--- a/src/pages/HomeFramework.tsx
+++ b/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'
+                                                                                  : ''
                                                                         }
                                                                     >
                                                                         {
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 85d7c73..9ca567c 100644
--- a/src/pages/SystemFramework.tsx
+++ b/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>
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index c80d9df..666addf 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/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>
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 12a153f..6a4e6da 100644
--- a/src/pages/UserFramework.tsx
+++ b/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={'个人中心'}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 8c82483..5e6a323 100644
--- a/src/pages/home/index.tsx
+++ b/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}
diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index 8a3b5a0..d83ed33 100644
--- a/src/pages/system/Group.tsx
+++ b/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
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
index cb77dd8..f612e32 100644
--- a/src/pages/system/Settings.tsx
+++ b/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'}>
diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx
index 4cd2fb0..a14d904 100644
--- a/src/pages/system/Statistics.tsx
+++ b/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'}>