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

Complete main UI #37

Merged
FatttSnake merged 192 commits from FatttSnake into dev 2024-02-23 16:31:17 +08:00
Conversation 0 Commits 192 Files Changed 215 +319 -299
16 changed files with 319 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1b78cd4163 - Show all commits

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

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

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

@@ -1,4 +1,4 @@
.indicator {
[data-component=home].indicator {
position: fixed;
margin: {
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/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%);
}
}
}

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

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

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

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

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

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

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

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

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 (
<>
<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'
: ''
}
>
{

2
src/pages/SystemFramework.tsx
View File

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

2
src/pages/ToolsFramework.tsx
View File

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

4
src/pages/UserFramework.tsx
View File

@@ -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={'个人中心'}

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

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

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

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

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

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

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

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