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

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

@@ -4,76 +4,6 @@
<el-scrollbar class="layout-mode-style-scrollbar">
<el-form ref="formRef" :model="configStore.layout">
<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>
<div class="layout-config-global">
<el-form-item label="后台页面切换动画">
@@ -97,8 +27,25 @@
:model-value="configStore.getColorVal('elementUiPrimary')"
/>
</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>
<el-divider border-style="dashed">侧边栏</el-divider>
<div class="layout-config-aside">
<el-form-item label="侧边菜单栏背景色">
@@ -147,24 +94,24 @@
<template #append>px</template>
</el-input>
</el-form-item>
<!-- <el-form-item label="侧边菜单默认图标">-->
<!-- <IconSelector-->
<!-- @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"-->
<!-- :model-value="configStore.layout.menuDefaultIcon"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单水平折叠">-->
<!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuCollapse')"-->
<!-- :model-value="configStore.layout.menuCollapse"-->
<!-- ></el-switch>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单手风琴">-->
<!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuUniqueOpened')"-->
<!-- :model-value="configStore.layout.menuUniqueOpened"-->
<!-- ></el-switch>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单默认图标">-->
<!-- <IconSelector-->
<!-- @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"-->
<!-- :model-value="configStore.layout.menuDefaultIcon"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单水平折叠">-->
<!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuCollapse')"-->
<!-- :model-value="configStore.layout.menuCollapse"-->
<!-- ></el-switch>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单手风琴">-->
<!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuUniqueOpened')"-->
<!-- :model-value="configStore.layout.menuUniqueOpened"-->
<!-- ></el-switch>-->
<!-- </el-form-item>-->
</div>
<el-divider border-style="dashed">顶栏</el-divider>
@@ -181,24 +128,24 @@
:model-value="configStore.getColorVal('headerBarTabColor')"
/>
</el-form-item>
<!-- <el-form-item label="顶栏悬停时背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项文字色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏悬停时背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项文字色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
<!-- />-->
<!-- </el-form-item>-->
</div>
<el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
<template #reference>
@@ -268,6 +215,8 @@ const restoreDefault = () => {
</script>
<style scoped lang="scss">
.layout-config-drawer :deep(.el-input__inner) {
padding: 0 0 0 6px;
}

5
src/stores/config.ts
View File

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

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

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

20
src/styles/app.scss
View File

@@ -23,18 +23,24 @@ body,
position: relative;
}
/* 修改纵向滚动条轨道 */
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
/* 修改纵向滚动条拇指（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;
height: 3px;
background-color: var(--el-color-primary) !important;
border-radius: 30px !important;
}
// 阿里 iconfont Symbol引用css
.iconfont-icon {
width: 1em;
@@ -307,5 +313,3 @@ body,
align-items: center;
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-component-css-var('bg-color', $bg-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-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-striped-background-color: var(--el-color-primary-light-9);
// --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-current-background-color: var(--el-color-primary-light-7);
// --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 {
background: var(--el-color-primary);
color: var(--el-color-white);
background: var(--vxe-table-header-background-color);
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 {
color: var(--el-color-primary-light-8);
.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 {
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 {
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 {
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