Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主题颜色修改

Browse Source
This commit is contained in:
仲么了
2024-01-30 13:47:03 +08:00
parent 417f6788a3
commit b921e2a7e5
8 changed files with 156 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.vue
View File

@@ -1,19 +1,16 @@
<template> <template>
<el-config-provider :locale='zhCn'> <el-config-provider :locale="zhCn">
<router-view></router-view> <router-view></router-view>
</el-config-provider> </el-config-provider>
</template> </template>
<script lang='ts' setup> <script lang="ts" setup>
import { computed, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useConfig } from '@/stores/config' import useSetTheme from '@/utils/setTheme'
import { useElementPlusTheme } from 'use-element-plus-theme' useSetTheme()
const configStore = useConfig()
useElementPlusTheme(configStore.getColorVal('elementUiPrimary'))
</script> </script>
<style lang='scss'> <style lang="scss">
/* Your SCSS styles here */
</style> </style>

163
src/layouts/admin/components/config.vue
View File

@@ -4,76 +4,6 @@
<el-scrollbar class="layout-mode-style-scrollbar"> <el-scrollbar class="layout-mode-style-scrollbar">
<el-form ref="formRef" :model="configStore.layout"> <el-form ref="formRef" :model="configStore.layout">
<div class="layout-mode-styles-box"> <div class="layout-mode-styles-box">
<!-- <el-divider border-style="dashed">全局</el-divider>-->
<!-- <div class="layout-mode-box-style">-->
<!-- <el-row class="layout-mode-box-style-row" :gutter="10">-->
<!-- <el-col :span="12">-->
<!-- <div-->
<!-- @click="setLayoutMode('Default')"-->
<!-- class="layout-mode-style default"-->
<!-- :class="configStore.layout.layoutMode == 'Default' ? 'active' : ''"-->
<!-- >-->
<!-- <div class="layout-mode-style-box">-->
<!-- <div class="layout-mode-style-aside"></div>-->
<!-- <div class="layout-mode-style-container-box">-->
<!-- <div class="layout-mode-style-header"></div>-->
<!-- <div class="layout-mode-style-container"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layout-mode-style-name">默认</div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <div-->
<!-- @click="setLayoutMode('Classic')"-->
<!-- class="layout-mode-style classic"-->
<!-- :class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''"-->
<!-- >-->
<!-- <div class="layout-mode-style-box">-->
<!-- <div class="layout-mode-style-aside"></div>-->
<!-- <div class="layout-mode-style-container-box">-->
<!-- <div class="layout-mode-style-header"></div>-->
<!-- <div class="layout-mode-style-container"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layout-mode-style-name">经典</div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- &lt;!&ndash; <el-row :gutter="10">-->
<!-- <el-col :span="12">-->
<!-- <div-->
<!-- @click="setLayoutMode('Streamline')"-->
<!-- class="layout-mode-style streamline"-->
<!-- :class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''"-->
<!-- >-->
<!-- <div class="layout-mode-style-box">-->
<!-- <div class="layout-mode-style-container-box">-->
<!-- <div class="layout-mode-style-header"></div>-->
<!-- <div class="layout-mode-style-container"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layout-mode-style-name">单栏</div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <div-->
<!-- @click="setLayoutMode('Double')"-->
<!-- class="layout-mode-style double"-->
<!-- :class="configStore.layout.layoutMode == 'Double' ? 'active' : ''"-->
<!-- >-->
<!-- <div class="layout-mode-style-box">-->
<!-- <div class="layout-mode-style-aside"></div>-->
<!-- <div class="layout-mode-style-container-box">-->
<!-- <div class="layout-mode-style-header"></div>-->
<!-- <div class="layout-mode-style-container"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layout-mode-style-name">双栏</div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row> &ndash;&gt;-->
<!-- </div>-->
<el-divider border-style="dashed">全局</el-divider> <el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global"> <div class="layout-config-global">
<el-form-item label="后台页面切换动画"> <el-form-item label="后台页面切换动画">
@@ -97,8 +27,25 @@
:model-value="configStore.getColorVal('elementUiPrimary')" :model-value="configStore.getColorVal('elementUiPrimary')"
/> />
</el-form-item> </el-form-item>
<el-form-item label="表格标题栏背景颜色">
<el-color-picker
@change="onCommitColorState($event, 'tableHeaderBackground')"
:model-value="configStore.getColorVal('tableHeaderBackground')"
/>
</el-form-item>
<el-form-item label="表格标题栏文字颜色">
<el-color-picker
@change="onCommitColorState($event, 'tableHeaderColor')"
:model-value="configStore.getColorVal('tableHeaderColor')"
/>
</el-form-item>
<el-form-item label="表格激活栏颜色">
<el-color-picker
@change="onCommitColorState($event, 'tableCurrent')"
:model-value="configStore.getColorVal('tableCurrent')"
/>
</el-form-item>
</div> </div>
<el-divider border-style="dashed">侧边栏</el-divider> <el-divider border-style="dashed">侧边栏</el-divider>
<div class="layout-config-aside"> <div class="layout-config-aside">
<el-form-item label="侧边菜单栏背景色"> <el-form-item label="侧边菜单栏背景色">
@@ -147,24 +94,24 @@
<template #append>px</template> <template #append>px</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item label="侧边菜单默认图标">--> <!-- <el-form-item label="侧边菜单默认图标">-->
<!-- <IconSelector--> <!-- <IconSelector-->
<!-- @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"--> <!-- @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"-->
<!-- :model-value="configStore.layout.menuDefaultIcon"--> <!-- :model-value="configStore.layout.menuDefaultIcon"-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单水平折叠">--> <!-- <el-form-item label="侧边菜单水平折叠">-->
<!-- <el-switch--> <!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuCollapse')"--> <!-- @change="onCommitState($event, 'menuCollapse')"-->
<!-- :model-value="configStore.layout.menuCollapse"--> <!-- :model-value="configStore.layout.menuCollapse"-->
<!-- ></el-switch>--> <!-- ></el-switch>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单手风琴">--> <!-- <el-form-item label="侧边菜单手风琴">-->
<!-- <el-switch--> <!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuUniqueOpened')"--> <!-- @change="onCommitState($event, 'menuUniqueOpened')"-->
<!-- :model-value="configStore.layout.menuUniqueOpened"--> <!-- :model-value="configStore.layout.menuUniqueOpened"-->
<!-- ></el-switch>--> <!-- ></el-switch>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
</div> </div>
<el-divider border-style="dashed">顶栏</el-divider> <el-divider border-style="dashed">顶栏</el-divider>
@@ -181,24 +128,24 @@
:model-value="configStore.getColorVal('headerBarTabColor')" :model-value="configStore.getColorVal('headerBarTabColor')"
/> />
</el-form-item> </el-form-item>
<!-- <el-form-item label="顶栏悬停时背景色">--> <!-- <el-form-item label="顶栏悬停时背景色">-->
<!-- <el-color-picker--> <!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarHoverBackground')"--> <!-- @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarHoverBackground')"--> <!-- :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项背景色">--> <!-- <el-form-item label="顶栏菜单激活项背景色">-->
<!-- <el-color-picker--> <!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveBackground')"--> <!-- @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveBackground')"--> <!-- :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项文字色">--> <!-- <el-form-item label="顶栏菜单激活项文字色">-->
<!-- <el-color-picker--> <!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveColor')"--> <!-- @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveColor')"--> <!-- :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
</div> </div>
<el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？"> <el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
<template #reference> <template #reference>
@@ -268,6 +215,8 @@ const restoreDefault = () => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.layout-config-drawer :deep(.el-input__inner) { .layout-config-drawer :deep(.el-input__inner) {
padding: 0 0 0 6px; padding: 0 0 0 6px;
} }

5
src/stores/config.ts
View File

@@ -17,7 +17,10 @@ export const useConfig = defineStore(
mainAnimation: 'slide-right', mainAnimation: 'slide-right',
// 是否暗黑模式 // 是否暗黑模式
isDark: false, isDark: false,
elementUiPrimary:['#002B6A','#002B6A'], elementUiPrimary: ['#002B6A', '#002B6A'],
tableHeaderBackground: ['#F3F6F9', '#F3F6F9'],
tableHeaderColor: ['#111', '#fff'],
tableCurrent: ['#F3F6F9', '#F3F6F9'],
/* 侧边菜单 */ /* 侧边菜单 */
// 侧边菜单背景色 // 侧边菜单背景色
menuBackground: ['#002B6A', '#1d1e1f'], menuBackground: ['#002B6A', '#1d1e1f'],

3
src/stores/interface/index.ts
View File

@@ -13,6 +13,9 @@ export interface Layout {
menuUniqueOpened: boolean menuUniqueOpened: boolean
menuShowTopBar: boolean menuShowTopBar: boolean
elementUiPrimary: string[] elementUiPrimary: string[]
tableHeaderBackground: string[]
tableHeaderColor: string[]
tableCurrent: string[]
menuBackground: string[] menuBackground: string[]
menuColor: string[] menuColor: string[]
menuActiveBackground: string[] menuActiveBackground: string[]

20
src/styles/app.scss
View File

@@ -23,18 +23,24 @@ body,
position: relative; position: relative;
} }
/* 修改纵向滚动条轨道 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 10px;
} }
/* 修改纵向滚动条拇指（thumb） */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--el-color-primary);
border-radius: 5px;
}
/* 修改横向滚动条轨道 */
::-webkit-scrollbar:horizontal {
height: 8px;
}
/* 修改横向滚动条拇指（thumb） */
::-webkit-scrollbar-thumb:horizontal {
background-color: var(--el-color-primary);
border-radius: 5px; border-radius: 5px;
height: 3px;
background-color: var(--el-color-primary) !important;
border-radius: 30px !important;
} }
// 阿里 iconfont Symbol引用css // 阿里 iconfont Symbol引用css
.iconfont-icon { .iconfont-icon {
width: 1em; width: 1em;
@@ -307,5 +313,3 @@ body,
align-items: center; align-items: center;
border: 1px solid var(--el-border-color); border: 1px solid var(--el-border-color);
} }

8
src/styles/var.scss
View File

@@ -29,8 +29,8 @@ $border-color: map.merge(
@include set-css-var-value('color-primary-light', $primary-light); @include set-css-var-value('color-primary-light', $primary-light);
@include set-component-css-var('bg-color', $bg-color); @include set-component-css-var('bg-color', $bg-color);
@include set-component-css-var('border-color', $border-color); @include set-component-css-var('border-color', $border-color);
--vxe-table-row-current-background-color: var(--el-color-primary-light-7); // --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
--vxe-table-row-hover-background-color: var(--el-color-primary-light-9); // --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
--vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7); // --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
--vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9); // --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
} }

36
src/styles/vxeTable.scss
View File

@@ -20,15 +20,37 @@
// } // }
.vxe-header--row { .vxe-header--row {
background: var(--el-color-primary); background: var(--vxe-table-header-background-color);
color: var(--el-color-white); color: var(--vxe-table-header-font-color);
} }
.is--checked.vxe-checkbox, .is--checked.vxe-checkbox .vxe-checkbox--icon, .is--checked.vxe-custom--checkbox-option, .is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon, .is--checked.vxe-export--panel-column-option, .is--checked.vxe-export--panel-column-option .vxe-checkbox--icon, .is--checked.vxe-table--filter-option, .is--checked.vxe-table--filter-option .vxe-checkbox--icon, .is--indeterminate.vxe-checkbox, .is--indeterminate.vxe-checkbox .vxe-checkbox--icon, .is--indeterminate.vxe-custom--checkbox-option, .is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon, .is--indeterminate.vxe-export--panel-column-option, .is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon, .is--indeterminate.vxe-table--filter-option, .is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon, .vxe-table--render-default .is--checked.vxe-cell--checkbox, .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon, .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox, .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon { .is--checked.vxe-checkbox,
color: var(--el-color-primary-light-8); .is--checked.vxe-checkbox .vxe-checkbox--icon,
.is--checked.vxe-custom--checkbox-option,
.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,
.is--checked.vxe-export--panel-column-option,
.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
.is--checked.vxe-table--filter-option,
.is--checked.vxe-table--filter-option .vxe-checkbox--icon,
.is--indeterminate.vxe-checkbox,
.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
.is--indeterminate.vxe-custom--checkbox-option,
.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,
.is--indeterminate.vxe-export--panel-column-option,
.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
.is--indeterminate.vxe-table--filter-option,
.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
.vxe-table--render-default .is--checked.vxe-cell--checkbox,
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon {
color: var(--el-color-primary-light-8);
} }
.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon { .vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
color: var(--el-color-primary-light-8); .vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
color: var(--el-color-primary-light-8);
} }

42
src/utils/setTheme.ts Normal file
View File

@@ -0,0 +1,42 @@
import { onMounted, watch } from 'vue'
import { useElementPlusTheme } from 'use-element-plus-theme'
import { useConfig } from '@/stores/config'
const useSetTheme = () => {
const configStore = useConfig()
const elementPlusTheme = useElementPlusTheme(configStore.getColorVal('elementUiPrimary'))
const updateTheme = () => {
const root = document.documentElement
root.style.setProperty('--vxe-table-header-background-color', configStore.getColorVal('tableHeaderBackground'))
root.style.setProperty('--vxe-table-header-font-color', configStore.getColorVal('tableHeaderColor'))
root.style.setProperty('--vxe-table-row-current-background-color', configStore.getColorVal('tableCurrent'))
root.style.setProperty('--vxe-table-row-hover-background-color', configStore.getColorVal('tableCurrent'))
root.style.setProperty(
'--vxe-table-row-hover-current-background-color',
configStore.getColorVal('tableCurrent')
)
root.style.setProperty(
'--vxe-table-row-hover-striped-background-color',
configStore.getColorVal('tableCurrent')
)
}
onMounted(updateTheme)
watch(
() => configStore.getColorVal('elementUiPrimary'),
() => {
elementPlusTheme.changeTheme(configStore.getColorVal('elementUiPrimary'))
}
)
watch(
[
() => configStore.getColorVal('tableHeaderBackground'),
() => configStore.getColorVal('tableHeaderColor'),
() => configStore.getColorVal('tableCurrent')
],
() => {
updateTheme()
}
)
}
export default useSetTheme