FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Isolate component styles

Browse Source
This commit is contained in:
Fat Snake
2023-12-21 10:36:01 +08:00
parent 8910c3a514
commit 1b78cd4163
16 changed files with 319 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/common.scss
View File

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

2
src/assets/css/components/home/home.scss
View File

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

353
src/assets/css/pages/home-framework.scss
View File

@@ -1,214 +1,217 @@
@use "@/assets/css/mixins" as mixins; @use "@/assets/css/mixins" as mixins;
@use "@/assets/css/constants" as constants; @use "@/assets/css/constants" as constants;
.nav { [data-component=home-framework] {
display: flex; .nav {
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 {
display: flex; display: flex;
justify-content: end; position: fixed;
flex: 1; align-items: center;
transition: { z-index: 1;
property: all; width: 100%;
duration: .5s; height: 70px;
}; background-color: constants.$origin-color;
border: {
.menu { bottom: {
padding: 0 30px; width: 1px;
style: solid;
.item { color: constants.$border-color;
display: inline-block;
position: relative;
font-size: 1.5em;
transition: {
property: all;
duration: .3s;
};
a {
padding: 5px 20px;
color: constants.$url-color;
}
} }
}
animation: .5s ease both;
.active { @include mixins.unique-keyframes {
border: { 0% {
bottom: { transform: translateY(-100%);
width: 2px;
style: solid;
color: constants.$url-active-color;
};
};
} }
100% {
.item:hover { transform: translateY(0);
transform: translateY(-5px);
} }
}
.item:hover .submenu { .logo {
display: block; padding: 0 40px;
border: {
width: 1px;
color: constants.$border-color;
style: solid;
};
animation: 0.3s;
@include mixins.unique-keyframes { .title {
0% { font-size: 2.8em;
transform: translateY(-10px); font-family: century gothic, texgyreadventor, stheiti, sans-serif;
opacity: 0;
}
}
} }
}
.submenu { nav {
display: none; display: flex;
position: absolute; justify-content: end;
width: 100%; flex: 1;
text-align: center; transition: {
background-color: constants.$origin-color; property: all;
overflow: hidden; duration: .5s;
};
.menu {
padding: 0 30px;
.item { .item {
display: block; display: inline-block;
font-size: 0.8em; position: relative;
transition: all 0s; font-size: 1.5em;
transition: {
property: all;
duration: .3s;
};
a { a {
display: block; padding: 5px 20px;
padding: 8px 0; color: constants.$url-color;
}
}
.item:hover {
transform: none;
a {
background-color: constants.$focus-color !important;
} }
} }
.active { .active {
font-weight: bold; border: {
border: none; bottom: {
width: 2px;
style: solid;
color: constants.$url-active-color;
};
};
} }
}
}
.dropdown-menu-button { .item:hover {
display: none; transform: translateY(-5px);
margin: 0 20px; }
width: 45px;
height: 45px;
justify-content: center;
align-items: center;
border-radius: 6px;
}
.dropdown-menu-button.active { .item:hover .submenu {
background-color: transparentize(constants.$focus-color, 0.8); display: block;
border: { border: {
width: 1px; width: 1px;
color: constants.$focus-color; color: constants.$border-color;
style: solid; style: solid;
}; };
} animation: 0.3s;
@media screen and (max-width: 900px) { @include mixins.unique-keyframes {
.menu { 0% {
display: none; 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 { .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 { .dropdown-menu-content {
display: none; 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) { @media screen and (max-width: 900px) {
display: none; .dropdown-menu-content.show {
position: fixed; display: block;
width: 100%; }
top: 70px; }
border: {
width: 1px;
color: constants.$border-color;
style: solid;
};
background-color: constants.$origin-color;
z-index: 1;
ul { .nav.hide {
li { animation: .5s ease both;
font-size: 1.2em;
text-align: center;
a { @include mixins.unique-keyframes {
display: block; 0% {
width: 100%; transform: translateY(0);
height: 100%; }
padding: 10px; 100% {
} transform: translateY(-100%);
:hover {
background-color: constants.$focus-color;
}
} }
}
}
}
@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%);
} }
} }
} }

20
src/assets/css/pages/system-framework.scss
View File

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

52
src/assets/css/pages/system/settings.scss
View File

@@ -1,38 +1,40 @@
@use '@/assets/css/constants' as constants; @use '@/assets/css/constants' as constants;
.root-content { [data-component=system-settings] {
padding: 30px; .root-content {
gap: 20px; padding: 30px;
.root-row {
gap: 20px; gap: 20px;
.settings-card { .root-row {
padding: 20px;
gap: 20px; gap: 20px;
color: constants.$main-color;
> .head { .settings-card {
align-items: center; padding: 20px;
gap: 5px; gap: 20px;
color: constants.$main-color;
.icon { > .head {
font-size: constants.$SIZE_ICON_MD; align-items: center;
flex: 0 0 auto; gap: 5px;
}
.title { .icon {
display: flex; font-size: constants.$SIZE_ICON_MD;
font-size: 1.2em; flex: 0 0 auto;
} }
:nth-child(n+3) { .title {
flex: 0 0 auto; display: flex;
color: constants.$font-main-color; font-size: 1.2em;
} }
.bt-save { :nth-child(n+3) {
color: constants.$main-color; flex: 0 0 auto;
color: constants.$font-main-color;
}
.bt-save {
color: constants.$main-color;
}
} }
} }
} }

130
src/assets/css/pages/system/statistics.scss
View File

@@ -1,86 +1,88 @@
@use '@/assets/css/constants' as constants; @use '@/assets/css/constants' as constants;
.root-content { [data-component=system-statistics] {
padding: 30px; .root-content {
gap: 20px; padding: 30px;
flex-wrap: wrap; gap: 20px;
justify-content: center; flex-wrap: wrap;
justify-content: center;
> .card-box { > .card-box {
width: 48%; width: 48%;
flex: 0 0 auto; flex: 0 0 auto;
.common-card { .common-card {
padding: 20px; padding: 20px;
gap: 20px; gap: 20px;
> .head { > .head {
align-items: center; align-items: center;
gap: 5px; gap: 5px;
color: constants.$main-color; color: constants.$main-color;
.icon { .icon {
font-size: constants.$SIZE_ICON_MD; font-size: constants.$SIZE_ICON_MD;
flex: 0 0 auto; flex: 0 0 auto;
} }
.title { .title {
display: flex; display: flex;
font-size: 1.2em; font-size: 1.2em;
} }
:nth-child(n+3) { :nth-child(n+3) {
flex: 0 0 auto; flex: 0 0 auto;
color: constants.$font-main-color; 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;
} }
} }
.value-chart { .card-content {
justify-content: space-around; font-size: 1.1em;
width: 0; padding: 0 10px;
gap: 10px;
> div { .key, .value-percent {
max-height: 12px; flex: 0 0 auto;
height: 12px; 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 { .value-chart {
text-align: right; justify-content: space-around;
} width: 0;
.big-chart { > div {
width: 0; max-height: 12px;
height: 400px; height: 12px;
}
> * { > * {
gap: 5px; transform: translateY(1px);
}
}
}
.value-percent {
text-align: right;
}
.big-chart {
width: 0;
height: 400px;
}
> * {
gap: 5px;
}
} }
} }
} }

20
src/assets/css/pages/tools-framework.scss
View File

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

14
src/assets/css/pages/user-framework.scss Normal file
View File

@@ -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;
}
}

9
src/pages/HomeFramework.tsx
View File

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

2
src/pages/SystemFramework.tsx
View File

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

2
src/pages/ToolsFramework.tsx
View File

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

4
src/pages/UserFramework.tsx
View File

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

3
src/pages/home/index.tsx
View File

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

2
src/pages/system/Group.tsx
View File

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

2
src/pages/system/Settings.tsx
View File

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

2
src/pages/system/Statistics.tsx
View File

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