github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2025-04-28 03:20:24 +00:00
Code Issues Projects Releases Wiki Activity

perf: 修改主题设置方式

Browse Source
This commit is contained in:
ibuler 2024-05-08 16:24:16 +08:00
parent ef7db30658
commit f843dde3d6
22 changed files with 83 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/theme/element-extra.css
View File

@ -34,7 +34,7 @@
.el-pagination__total,
.el-pagination__sizes,
.el-pager {
color: var(--el-icon-color);
color: var(--color-icon-primary);
}
}
@ -48,7 +48,7 @@
.el-pagination.is-background .el-pager li {
margin: 0 5px;
background-color: #fff;
color: var(--el-icon-color);
color: var(--color-icon-primary);
min-width: 28px;
border-radius: 2px;
border: 1px solid #DCDFE6;
@ -237,7 +237,7 @@ td .el-button.el-button--mini {
.el-tag.el-tag--info .el-tag__close {
display: inline-block;
margin-top: 3px;
color: var(--el-text-color);
color: var(--color-text-primary);
background-color: inherit;
}
@ -293,7 +293,7 @@ td .el-button.el-button--mini {
}
.el-textarea__inner {
color: var(--el-text-color);
color: var(--color-text-primary);
}
.el-pagination.is-background .number {
@ -437,7 +437,7 @@ td .el-button.el-button--mini {
}
.el-dialog .el-dialog__header .el-dialog__title {
color: var(--el-text-color);
color: var(--color-text-primary);
}
.el-dialog .el-dialog__body {
@ -449,12 +449,12 @@ td .el-button.el-button--mini {
.el-dialog .el-dialog__body .el-transfer-panel .el-transfer-panel__body .el-input__inner,
.el-dialog .el-dialog__body .el-transfer-panel .el-transfer-panel__header .el-checkbox__label,
.el-dialog .el-dialog__body .el-transfer-panel .el-transfer-panel__body .el-checkbox-group .el-checkbox.el-transfer-panel__item {
color: var(--el-text-color);
color: var(--color-text-primary);
}
.el-dialog .el-dialog__body .opera .el-button.is-disabled,
.el-dialog .el-dialog__body .el-transfer-panel .vip-footer .el-button.is-disabled {
color: var(--el-input-border-color);
color: var(--color-input-border);
}
.el-dialog .el-dialog__body .opera .el-button.is-disabled.el-button--primary {

4
src/App.vue
View File

@ -6,7 +6,6 @@
<script>
import { mapState } from 'vuex'
import { useCommonColor } from '@/styles/commonColor'
export default {
name: 'App',
@ -14,9 +13,6 @@ export default {
...mapState({
isRouterAlive: state => state.common.isRouterAlive
})
},
beforeMount() {
useCommonColor()
}
}
</script>

4
src/components/Cards/DetailCard/index.vue
View File

@ -88,7 +88,7 @@ export default {
>>> .el-form-item__label {
padding-right: 8%;
overflow: hidden;
color: var(--el-icon-color);
color: var(--color-icon-primary);
span {
display: inline-block;
@ -97,7 +97,7 @@ export default {
}
::v-deep .el-form-item__content {
color: var(--el-text-color);
color: var(--color-text-primary);
font-size: 13px;
line-height: 40px;
}

14
src/components/DataActions/index.vue
View File

@ -198,7 +198,7 @@ export default {
}
.el-button.el-button--default {
color: var(--el-text-color);
color: var(--color-text-primary);
}
}
@ -209,7 +209,7 @@ export default {
.more-action.el-button--default {
::v-deep .el-icon-arrow-down.el-icon--right {
color: var(--el-icon-color) !important;
color: var(--color-icon-primary) !important;
}
}
@ -261,7 +261,7 @@ export default {
&.el-dropdown-menu__item--divided {
margin-top: 0;
border-top: none;
color: var(--el-text-color);
color: var(--color-text-primary);
cursor: auto;
font-size: 12px;
line-height: 30px;
@ -274,7 +274,7 @@ export default {
}
.dropdown-item {
color: var(--el-icon-color);
color: var(--color-icon-primary);
.pre-icon {
width: 17px;
@ -296,11 +296,11 @@ export default {
}
.el-dropdown-menu__item {
color: var(--el-icon-color);
color: var(--color-icon-primary);
&:not(.is-disabled):hover {
color: var(--el-text-color);
background-color: var(--el-disabled-background-color);
color: var(--color-text-primary);
background-color: var(--color-disabled-background);
}
}

26
src/components/Form/DataForm/index.vue
View File

@ -158,9 +158,13 @@ export default {
.el-form {
margin-right: 80px;
::v-deep .el-input-group__prepend {
border-radius: 0;
}
::v-deep .form-group-header {
margin-left: 50px;
color: var(--el-text-color);
color: var(--color-text-primary);
}
::v-deep .el-form-item {
@ -173,10 +177,10 @@ export default {
.el-form-item__label {
padding: 0 30px 0 0;
line-height: 32px;
color: var(--el-text-color);
color: var(--color-text-primary);
i {
color: var(--el-icon-color);
color: var(--color-icon-primary);
}
}
@ -186,8 +190,8 @@ export default {
// 禁用的输入框
.el-input.is-disabled .el-input__inner {
color: var(--el-icon-color) !important;
background-color: var(--el-disabled-background-color);
color: var(--color-icon-primary) !important;
background-color: var(--color-disabled-background);
}
// 复合型输入框
@ -207,18 +211,18 @@ export default {
.el-input__inner {
border-radius: 0;
color: var(--el-text-color);
color: var(--color-text-primary);
}
.el-input-group__append {
border: 1px solid var(--el-input-border-color);
border: 1px solid var(--color-input-border);
border-left: 0 !important;
}
}
// 普通的输入框
.el-input .el-input__inner {
color: var(--el-text-color);
color: var(--color-text-primary);
}
// 不符合校验规则的提示信息
@ -236,7 +240,7 @@ export default {
// 选择普通 item 时的样式
.el-input .el-input__inner {
color: var(--el-text-color);
color: var(--color-text-primary);
}
}
@ -247,14 +251,14 @@ export default {
.el-data-table .el-table {
margin: 5px 0;
border-radius: 4px;
border: 1px solid var(--el-input-border-color);
border: 1px solid var(--color-input-border);
}
.help-block {
display: block;
margin-top: 2px;
margin-bottom: 5px;
color: var(--el-form-tip-text-color);
color: var(--color-help-text);
font-size: 12px;
line-height: 18px;
word-break: keep-all;

4
src/components/Form/FormFields/DatetimeRangePicker.vue
View File

@ -94,11 +94,11 @@ export default {
::v-deep .el-range-separator,
::v-deep .el-input__icon {
line-height: 26px;
color: var(--el-icon-color) !important;
color: var(--color-icon-primary) !important;
}
::v-deep .el-range-input {
color: var(--el-text-color) !important;
color: var(--color-text-primary) !important;
}
::v-deep .el-range-input {

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

@ -36,7 +36,7 @@ export default {
}
</script>
<style scoped lang='scss'>
<style lang='scss' scoped>
.ibox {
/*height: 100%;*/
clear: both;
@ -83,6 +83,6 @@ export default {
.ibox >>> .el-card__body {
padding: 15px 30px 20px 30px;
color: var(--el-icon-color);
color: var(--color-icon-primary);
}
</style>

8
src/components/Table/ListTable/TableAction/LabelSearch.vue
View File

@ -151,7 +151,7 @@ export default {
<style lang='scss' scoped>
.label-search {
margin-right: 10px;
border: 1px solid var(--el-disabled-background-color);
border: 1px solid var(--color-disabled-background);
border-radius: 3px;
::v-deep .el-button.label-button {
@ -170,7 +170,7 @@ export default {
}
.el-input__suffix {
color: var(--el-icon-color) !important; ;
color: var(--color-icon-primary) !important; ;
}
}
@ -180,7 +180,7 @@ export default {
overflow: hidden;
.el-tag.el-tag--info {
color: var(--el-text-color) !important;
color: var(--color-text-primary) !important;
}
.el-cascader__search-input {
@ -190,7 +190,7 @@ export default {
}
::v-deep .svg-icon {
color: var(--el-icon-color) !important;
color: var(--color-icon-primary) !important;
}
}
</style>

4
src/components/Table/ListTable/TableAction/RightSide.vue
View File

@ -137,7 +137,7 @@ export default {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.right-side-actions.right-side-item {
display: flex;
align-items: center;
@ -150,7 +150,7 @@ export default {
border: none;
padding: 5px;
font-size: 14px;
color: var(--el-icon-color);
color: var(--color-icon-primary);
background-color: transparent;
&:hover {

6
src/components/Table/TagSearch/index.vue
View File

@ -352,7 +352,7 @@ export default {
align-items: center;
min-width: 198px;
//height: 30px;
border: 1px solid var(--el-disabled-background-color);
border: 1px solid var(--color-disabled-background);
border-radius: 4px;
background-color: #fff;
box-sizing: border-box;
@ -368,7 +368,7 @@ export default {
}
::v-deep .el-input__suffix {
color: var(--el-icon-color) !important;
color: var(--color-icon-primary) !important;
.el-input__suffix-inner {
line-height: 30px;
@ -404,7 +404,7 @@ export default {
i {
line-height: 30px;
font-weight: 500;
color: var(--el-icon-color);
color: var(--color-icon-primary);
}
}

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

@ -24,7 +24,7 @@ export default {
.el-card__body {
padding-top: 30px;
padding-bottom: 30px;
padding-bottom: 60px;
}
}
</style>

6
src/layout/components/Page/PageHeading.vue
View File

@ -66,9 +66,9 @@ export default {
.page-heading-left,
h2 {
font-size: 16px;
font-weight: 500;
line-height: 32px;
color: var(--el-text-color);
font-weight: 600;
line-height: 2;
color: var(--color-text-primary);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

13
src/styles/commonColor/index.js
View File

@ -1,13 +0,0 @@
const commonColor = {
'--el-text-color': '#1F2329',
'--el-icon-color': '#646A73',
'--el-input-border-color': '#BBBFC4',
'--el-disabled-background-color': '#dcdee2',
'--el-form-tip-text-color': '#8F959E'
}
export const useCommonColor = () => {
for (const [key, value] of Object.entries(commonColor)) {
document.documentElement.style.setProperty(key, value)
}
}

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

@ -1,22 +1,3 @@
:root {
--color-primary: #1ab394;
--color-success: #2793d7;
--color-info: #1c84c6;
--color-warning: #f8ac59;
--color-danger: #ed5565;
--color-link: #1c84c6;
--color-text: #1F2329;
--color-text-2: #646a73;
--color-text-3: #8f959e;
--color-text-4: #bbbfc4;
--banner-bg: #148f76;
--submenu-bg: #ffffff;
--menu-bg: #ffffff;
--menu-text: #646A73;
--menu-text-active: #1ab394;
--menu-hover: #ffffff;
}
:export {
--color-primary: #1ab394;
--color-success: #2793d7;
@ -24,6 +5,11 @@
--color-warning: #f8ac59;
--color-danger: #ed5565;
--color-link: #1c84c6;
--color-text-primary: #292827;
--color-icon-primary: #605e5c;
--color-input-border: #BBBFC4;
--color-disabled-background: #dcdee2;
--color-help-text: #8F959E;
--banner-bg: #148f76;
--submenu-bg: #ffffff;
--menu-bg: #ffffff;

18
src/styles/index.scss
View File

@ -35,7 +35,7 @@ body {
height: calc(100% - 50px);
overflow: hidden;
-moz-osx-font-smoothing: grayscale;
color: var(--el-text-color);
color: var(--color-text-primary);
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 1.428;
@ -233,11 +233,11 @@ input[type=file] {
.el-timeline .el-timeline-item {
.el-timeline-item__wrapper {
.el-timeline-item__content {
color: var(--el-text-color);
color: var(--color-text-primary);
}
.el-timeline-item__timestamp.is-bottom {
color: var(--el-form-tip-text-color);
color: var(--color-help-text);
}
}
}
@ -249,7 +249,7 @@ input[type=file] {
font-size: 13px;
line-height: 1.5;
border-right: none;
color: var(--el-text-color);
color: var(--color-text-primary);
}
th {
@ -283,7 +283,7 @@ input[type=file] {
// 表头
.el-table__header thead > tr > th {
.cell {
color: var(--el-icon-color);
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -319,7 +319,7 @@ input[type=file] {
width: auto !important;
.el-tooltip > span {
color: var(--el-text-color);
color: var(--color-text-primary);
}
.label-container .label-formatter-col div {
@ -391,17 +391,17 @@ input[type=file] {
}
.el-cascader__dropdown .el-cascader-panel .el-cascader-menu {
color: var(--el-text-color) !important;
color: var(--color-text-primary) !important;
}
.el-card .el-card__header {
color: var(--el-text-color);
color: var(--color-text-primary);
}
.el-alert {
.el-alert__description,
.el-alert__title{
color: var(--el-text-color) !important;
color: var(--color-text-primary) !important;
}
}

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

@ -70,6 +70,13 @@ export function mix(color_1, color_2, weight) {
return color
}
export function setRootColors() {
const themeColors = defaultThemeConfig || {}
for (const [key, value] of Object.entries(themeColors)) {
document.documentElement.style.setProperty(key, value)
}
}
export function changeMenuColor(themeColors) {
const elementStyle = document.documentElement.style
const colors = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig
@ -80,12 +87,11 @@ export function changeMenuColor(themeColors) {
// 后端不用返回 --menu-hover
const menuActiveTextColor = colors['--menu-text-active']
if (menuActiveTextColor) {
const menuHover = mix(white, menuActiveTextColor.replace(/#/g, ''), 90)
colors['--menu-hover'] = menuHover
colors['--menu-hover'] = mix(white, menuActiveTextColor.replace(/#/g, ''), 90)
}
const lights = [15, 40, 60, 80]
const darks = [15, 30, 40, 60]
const darken = [15, 30, 40, 60]
for (const key in colors) {
const currentColor = colors[key]
@ -96,7 +102,7 @@ export function changeMenuColor(themeColors) {
const color = mix(white, currentColor.replace(/#/g, ''), light)
elementStyle.setProperty(key + '-light' + '-' + i, color)
}
for (const [i, dark] of darks.entries()) {
for (const [i, dark] of darken.entries()) {
const color = mix(black, currentColor.replace(/#/g, ''), dark)
elementStyle.setProperty(key + '-dark' + '-' + i, color)
}

4
src/utils/theme/index.js
View File

@ -1,4 +1,4 @@
import { changeMenuColor, generateColors, mix } from './color'
import { changeMenuColor, generateColors, mix, setRootColors } from './color'
import axios from 'axios'
import formula from './formula.json'
@ -74,6 +74,7 @@ export function changeThemeColors(themeColors) {
resolve()
}
}).then(() => {
setRootColors()
changeMenuColor(themeColors)
changeElementColor(themeColors)
})
@ -92,3 +93,4 @@ export function replaceStyleColors(data) {
return data
}

4
src/views/dashboard/components/DataCard.vue
View File

@ -60,7 +60,7 @@ export default {
.title,
.num{
color: var(--el-text-color);
color: var(--color-text-primary);
}
.title {
@ -76,7 +76,7 @@ export default {
.sub,
.add {
color: var(--el-icon-color);
color: var(--color-icon-primary);
}
.sub {

4
src/views/dashboard/components/SummaryCard.vue
View File

@ -38,7 +38,7 @@ export default {
<style lang="scss" scoped>
.summary-header {
color: var(--el-icon-color);
color: var(--color-icon-primary);
.title {
font-style: normal;
@ -56,7 +56,7 @@ export default {
font-weight: 500;
font-size: 24px;
line-height: 40px;
color: var(--el-text-color);
color: var(--color-text-primary);
}
.disabled-link {

2
src/views/dashboard/components/SwitchDate.vue
View File

@ -73,7 +73,7 @@ export default {
padding: 4px 0;
.el-radio-button__inner {
color: var(--el-text-color);
color: var(--color-text-primary);
background-color: #FFF;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(31 35 41 / 12%) !important;

4
src/views/tickets/components/Steps.vue
View File

@ -139,11 +139,11 @@ export default {
.el-steps {
.el-step__main .el-step__title {
color: var(--el-text-color);
color: var(--color-text-primary);
}
.el-step__main .el-step__description {
color: var(--el-form-tip-text-color);
color: var(--color-help-text);
}
}
</style>

2
src/views/workbench/myhome/components/User.vue
View File

@ -92,7 +92,7 @@ li {
text-overflow: ellipsis;
.title {
color: var(--el-text-color);
color: var(--color-text-primary);
}
}
}