github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2025-09-19 09:43:32 +00:00
Code Issues Projects Releases Wiki Activity

perf: 优化 theme

Browse Source
This commit is contained in:
ibuler
2023-02-16 20:15:24 +08:00
parent 4847564447
commit 0a230dcea1
7 changed files with 19 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/TabTree/index.vue
View File

@@ -3,9 +3,9 @@
<el-tabs
v-if="tabIndices.length > 0"
v-model="iActiveMenu"
:class="{ 'only-submenu': tabIndices.length === 1}"
class="page-submenu"
stretch
:class="{ 'only-submenu': tabIndices.length === 1}"
@tab-click="handleTabClick"
>
<template v-for="item in tabIndices">
@@ -183,7 +183,7 @@ export default {
position: static;
.el-tabs__item.is-active {
color: var(--color-primary);
color: var(--menu-text-active);
}
}
.only-submenu {

4
src/layout/components/NavHeader/ViewSwitcher.vue
View File

@@ -203,8 +203,8 @@ export default {
.el-menu-item.is-active {
font-weight: bold;
color: var(--color-primary);
border-left: 4px solid var(--color-primary);
color: var(--menu-text-active);
border-left: 4px solid var(--menu-text-active);
}
.menu-main.mobile-view-switch > > > .el-submenu__icon-arrow {

2
src/layout/components/NavHeader/index.vue
View File

@@ -101,7 +101,7 @@ export default {
height: $header-height;
line-height: $header-height;
overflow: hidden;
background: var(--nav-bg);
background: var(--banner-bg);
.navbar-left {
float: left;

16
src/styles/default-theme.scss
View File

@@ -4,22 +4,24 @@
--color-info: #1c84c6;
--color-warning: #f8ac59;
--color-danger: #ed5565;
--banner-bg: #148f76;
--submenu-bg: #ffffff;
--menu-bg: #ffffff;
--menu-text: #646A73;
--menu-hover: #f4faf9;
--submenu-bg: #ffffff;
--nav-bg: #148f76;
--menu-text-active: #1ab394;
--menu-hover: #ffffff;
}
:export {
--color-primary: #1ab394;
--color-success: #2793d7;
--color-info: #1c84c6;
--color-success: #2793d7;
--color-warning: #f8ac59;
--color-danger: #ed5565;
--banner-bg: #148f76;
--submenu-bg: #ffffff;
--menu-bg: #ffffff;
--menu-text: #646A73;
--menu-hover: #f4faf9;
--submenu-bg: #ffffff;
--nav-bg: #148f76;
--menu-text-active: #1ab394;
--menu-hover: #ffffff;
}

5
src/styles/menu.scss
View File

@@ -22,7 +22,7 @@
.el-submenu, .el-menu-item.submenu-title-noDropdown {
background-color: $menuBg;
border-top: solid 1px white;
border-top: solid 1px $menuBg;
.el-submenu__title {
color: $menuText;
@@ -50,7 +50,6 @@
&.is-active {
color: $subMenuActiveText;
font-weight: 400;
//background-color: $subMenuHover !important;
list-style-type: disc;
}
@@ -116,7 +115,7 @@
// background-color: var(--menu-hover) !important;
//}
border-left: 4px solid var(--color-primary);
border-left: 4px solid var(--menu-text-active);
}
.el-submenu-sidebar .el-menu-item {

4
src/styles/variables.scss
View File

@@ -16,13 +16,13 @@ $--color-link-highlight: #23527c;
// Menu
$menuText: var(--menu-text);
$menuActiveText: var(--color-primary);
$menuActiveText: var(--menu-text-active);
$menuBg: var(--menu-bg);
$menuTextWeight: 600;
$menuHover: var(--menu-hover);
$subMenuBg: var(--submenu-bg);
$subMenuHover: var(--menu-hover);
$subMenuActiveText: var(--color-primary);
$subMenuActiveText: var(--menu-text-active);
$sideBarWidth: 200px;
:export {

7
src/utils/theme/color.js
View File

@@ -74,19 +74,14 @@ export function changeMenuColor(themeColors) {
const elementStyle = document.documentElement.style
const colors = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig
const colorValue = colors['--color-primary'].replace(/#/g, '')
const white = 'ffffff'
const black = '000000'
const menuHoverColor = mix(white, colorValue, 90)
const navBackgroundColor = mix(black, colorValue, 20)
elementStyle.setProperty('--menu-hover', menuHoverColor)
elementStyle.setProperty('--nav-bg', navBackgroundColor)
for (const key in colors) {
const currentColor = colors[key]
elementStyle.setProperty(key, currentColor)
if (key.includes('--color')) {
elementStyle.setProperty(key, currentColor)
const lightColor = mix(white, currentColor.replace(/#/g, ''), 70)
const darkColor = mix(black, currentColor.replace(/#/g, ''), 20)
elementStyle.setProperty(key + '-light', lightColor)