Isolate component styles

2023-12-21 10:36:01 +08:00
parent 8910c3a514
commit 1b78cd4163
16 changed files with 319 additions and 299 deletions
--- 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;
--- 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;
--- a/src/assets/css/pages/home-framework.scss
+++ b/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%);
      }
    }
+  }
 }
--- 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;
-}
-
-.left-panel {
+[data-component=system-framework] {
+  .left-panel {
    background-color: constants.$origin-color;
-}
+  }

-.right-panel {
+  .right-panel {
    flex: 1;
    width: 0;
    background-color: constants.$background-color;
+  }
 }
--- a/src/assets/css/pages/system/settings.scss
+++ b/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 @@
        }
      }
    }
+  }
 }
--- a/src/assets/css/pages/system/statistics.scss
+++ b/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 @@
        }
      }
    }
+  }
 }
--- 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;
-}
-
-.left-panel {
+[data-component=tools-framework] {
+  .left-panel {
    background-color: constants.$origin-color;
-}
+  }

-.right-panel {
+  .right-panel {
    flex: 1;
    width: 0;
    background-color: constants.$background-color;
+  }
 }
--- a/src/assets/css/pages/user-framework.scss
+++ 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;
+  }
+}
--- 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}
--- 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>
--- 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>
--- 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={'个人中心'}
--- 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}
--- 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
--- 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'}>
--- 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'}>