refactor: 项目重构
This commit is contained in:
郝先瑞
@@ -1,9 +1,9 @@
|
||||
html.dark {
|
||||
--menuBg: var(--el-bg-color-overlay);
|
||||
--menuText: #fff;
|
||||
--menu-background: var(--el-bg-color-overlay);
|
||||
--menu-text: #fff;
|
||||
--menuActiveText: var(--el-menu-active-color);
|
||||
--menuHover: rgb(0 0 0 / 20%);
|
||||
--subMenuBg: var(--el-menu-bg-color);
|
||||
--sub-menu-background: var(--el-menu-bg-color);
|
||||
--subMenuActiveText: var(--el-menu-active-color);
|
||||
--subMenuHover: rgb(0 0 0 / 20%);
|
||||
|
||||
@@ -38,10 +38,4 @@ html.dark {
|
||||
.right-panel-btn {
|
||||
background-color: var(--el-color-primary-dark);
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
.el-menu-item.is-active .svg-icon {
|
||||
fill: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,89 +1,4 @@
|
||||
.app {
|
||||
.main-container {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
margin-left: $sideBarWidth;
|
||||
transition: margin-left 0.28s;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
width: $sideBarWidth !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: $menuBg;
|
||||
transition: width 0.28s;
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
|
||||
0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-logo {
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.sub-el-icon {
|
||||
margin-right: 12px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title {
|
||||
color: $subMenuActiveText !important;
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: $sideBarWidth !important;
|
||||
background-color: $subMenuBg !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $subMenuHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.mix-wrapper__left {
|
||||
width: 54px;
|
||||
@@ -111,20 +26,11 @@
|
||||
.el-tooltip {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.sub-el-icon {
|
||||
margin-left: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO
|
||||
& > .svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
@@ -140,10 +46,6 @@
|
||||
& > .el-sub-menu__title {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.sub-el-icon {
|
||||
margin-left: 19px;
|
||||
}
|
||||
@@ -170,7 +72,7 @@
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-sub-menu {
|
||||
min-width: $sideBarWidth !important;
|
||||
min-width: $sidebar-width !important;
|
||||
}
|
||||
|
||||
// mobile responsive
|
||||
@@ -180,15 +82,15 @@
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
width: $sideBarWidth !important;
|
||||
width: $sidebar-width !important;
|
||||
transition: transform 0.28s;
|
||||
}
|
||||
|
||||
&.hideSidebar:not(.isMix, .isTop) {
|
||||
&.hideSidebar:not(.layout-mix, .layout-top) {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-$sideBarWidth, 0, 0);
|
||||
transform: translate3d(-$sidebar-width, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -204,10 +106,6 @@
|
||||
// when menu collapsed
|
||||
.el-menu--vertical {
|
||||
& > .el-menu {
|
||||
.svg-icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.sub-el-icon {
|
||||
margin-right: 12px;
|
||||
margin-left: -2px;
|
||||
@@ -218,7 +116,7 @@
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
// you can use $subMenuHover
|
||||
background-color: $menuHover !important;
|
||||
background-color: $menu-hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,53 +1,29 @@
|
||||
// global transition css
|
||||
/* 简化和统一后的命名示例 */
|
||||
|
||||
/* fade */
|
||||
/* 淡入淡出 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.28s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* fade-transform */
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all 0.5s;
|
||||
/* 平移和淡入淡出 */
|
||||
.fade-translate-enter-active,
|
||||
.fade-translate-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.fade-transform-enter {
|
||||
.fade-translate-enter-from,
|
||||
.fade-translate-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* breadcrumb transition */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.breadcrumb-move {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 缩放过渡 */
|
||||
/* 缩放 */
|
||||
.fade-scale-enter-active,
|
||||
.fade-scale-leave-active {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
@@ -58,22 +34,7 @@
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.fade-slide-leave-active,
|
||||
.fade-slide-enter-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* 旋转过渡 */
|
||||
/* 旋转 */
|
||||
.fade-rotate-enter-active,
|
||||
.fade-rotate-leave-active {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
@@ -83,3 +44,28 @@
|
||||
.fade-rotate-leave-to {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* 面包屑 */
|
||||
.breadcrumb-transition-enter-active,
|
||||
.breadcrumb-transition-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-transition-enter-from,
|
||||
.breadcrumb-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* Logo动画 */
|
||||
|
||||
// 进入动画，2s内过渡到完全不透明(opacity默认值为1，不需要显示声明)
|
||||
.logo-transition-enter-active {
|
||||
transition: opacity 2s;
|
||||
}
|
||||
|
||||
// 进入动画开始时和离开动画的样式状态(opacity)
|
||||
.logo-transition-enter-from,
|
||||
.logo-transition-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
// 导出 variables.module.scss 变量提供给TypeScript使用
|
||||
/* stylelint-disable property-no-unknown */
|
||||
:export {
|
||||
menuBg: $menuBg;
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
sidebar-width: $sidebar-width;
|
||||
navbar-height: $navbar-height;
|
||||
menu-background: $menu-background;
|
||||
menu-text: $menu-text;
|
||||
menu-active-text: $menu-active-text;
|
||||
menu-hover: $menu-hover;
|
||||
sub-menu-background: $sub-menu-background;
|
||||
sub-menu-active-text: $sub-menu-active-text;
|
||||
sub-menu-hover: $sub-menu-hover;
|
||||
}
|
||||
/* stylelint-enable property-no-unknown */
|
||||
|
||||
@@ -1,27 +1,37 @@
|
||||
// 全局SCSS变量
|
||||
/* 全局SCSS变量 */
|
||||
|
||||
:root {
|
||||
--menuBg: #304156;
|
||||
--menuText: #bfcbd9;
|
||||
--menuActiveText: #409eff;
|
||||
--menuHover: #263445;
|
||||
--subMenuBg: #1f2d3d;
|
||||
--subMenuActiveText: #f4f4f5;
|
||||
--subMenuHover: #001528;
|
||||
|
||||
// wang-editor textarea
|
||||
--w-e-textarea-slight-border-color: var(--el-color-primary);
|
||||
--w-e-textarea-slight-bg-color: rgb(var(--el-color-primary-rgb) 0.1);
|
||||
--w-e-textarea-selected-border-color: var(--el-color-primary);
|
||||
--menu-background: #304156;
|
||||
--menu-text: #bfcbd9;
|
||||
--menu-active-text: #409eff;
|
||||
--menu-hover: #263445;
|
||||
--sub-menu-background: #1f2d3d;
|
||||
--sub-menu-active-text: #f4f4f5;
|
||||
--sub-menu-hover: #001528;
|
||||
--sidebar-logo-background: #2d3748;
|
||||
}
|
||||
|
||||
$menuBg: var(--menuBg);
|
||||
$menuText: var(--menuText);
|
||||
$menuActiveText: var(--menuActiveText);
|
||||
$menuHover: var(--menuHover);
|
||||
html.dark {
|
||||
--menu-background: var(--el-bg-color-overlay);
|
||||
--menu-text: #fff;
|
||||
--menu-active-text: var(--el-menu-active-color);
|
||||
--menu-hover: rgb(0 0 0 / 20%);
|
||||
--sub-menu-background: var(--el-menu-bg-color);
|
||||
--sub-menu-active-text: var(--el-menu-active-color);
|
||||
--sub-menu-hover: rgb(0 0 0 / 20%);
|
||||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
$subMenuBg: var(--subMenuBg);
|
||||
$subMenuActiveText: var(--subMenuActiveText);
|
||||
$subMenuHover: var(--subMenuHover);
|
||||
$menu-background: var(--menu-background);
|
||||
$menu-text: var(--menu-text);
|
||||
$menu-active-text: var(--menu-active-text);
|
||||
$menu-hover: var(--menu-hover);
|
||||
$sub-menu-background: var(--sub-menu-background);
|
||||
$sub-menu-active-text: var(--sub-menu-active-text);
|
||||
$sub-menu-hover: var(--sub-menu-hover);
|
||||
$sidebar-logo-background: var(--sidebar-logo-background); // 侧边栏 Logo 背景色
|
||||
|
||||
$sideBarWidth: 210px;
|
||||
$sidebar-width: 210px; // 侧边栏宽度
|
||||
$sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
|
||||
$navbar-height: 50px; // 导航栏高度
|
||||
$tags-view-height: 34px; // TagsView 高度
|
||||
|
||||
Reference in New Issue
Block a user