Front_Team/SPDM
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update:主题色同步

Browse Source
This commit is contained in:
lijing1
2025-12-18 16:11:48 +08:00
parent 8c705de722
commit 1a772c5e0a
2 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@@ -4,6 +4,7 @@ import { RouterView, useRouter } from 'vue-router';
import { VxeUI } from 'vxe-table';
import { useDark } from '@vueuse/core';
import i18n from '@/utils/i18n';
import { setThemeColor } from '@/utils/theme';
const isDark = useDark();
const router = useRouter();
@@ -29,6 +30,10 @@ if ($wujie) {
$wujie.bus.$on('DARK_THEME_CHANGE', (darkMode: boolean) => {
darkToggleFun(darkMode);
});
// primary颜色变化
$wujie.bus.$on('PRIMARY_COLOR_CHANGE', (color: string) => {
setThemeColor('--el-color-primary', color);
});
}
onMounted(() => {

31
src/components/layout/head.vue
View File

@@ -10,30 +10,41 @@
<el-icon :size="20"><Setting /></el-icon>
</div>
</div>
<el-drawer
v-model="drawer"
:size="300"
:title="$t('主题.主题')"
>
<el-drawer v-model="drawer" :size="300" :title="$t('主题.主题')">
<div class="setting">
<el-form label-width="auto">
<el-form-item :label="$t('主题.黑夜模式')">
<el-switch v-model="isDark" @change="darkToggleFun" />
</el-form-item>
<el-form-item :label="`${$t('主题.主题色')}：${$t('主题.默认')}`">
<el-color-picker v-model="colors.primary" @change="(color: string) => changeColorFun('--el-color-primary', color)" />
<el-color-picker
v-model="colors.primary"
@change="(color: string) => changeColorFun('--el-color-primary', color)"
/>
</el-form-item>
<el-form-item :label="`${$t('主题.主题色')}：${$t('主题.成功')}`">
<el-color-picker v-model="colors.success" @change="(color: string) => changeColorFun('--el-color-success', color)" />
<el-color-picker
v-model="colors.success"
@change="(color: string) => changeColorFun('--el-color-success', color)"
/>
</el-form-item>
<el-form-item :label="`${$t('主题.主题色')}：${$t('主题.警告')}`">
<el-color-picker v-model="colors.warning" @change="(color: string) => changeColorFun('--el-color-warning', color)" />
<el-color-picker
v-model="colors.warning"
@change="(color: string) => changeColorFun('--el-color-warning', color)"
/>
</el-form-item>
<el-form-item :label="`${$t('主题.主题色')}：${$t('主题.错误')}`">
<el-color-picker v-model="colors.danger" @change="(color: string) => changeColorFun('--el-color-danger', color)" />
<el-color-picker
v-model="colors.danger"
@change="(color: string) => changeColorFun('--el-color-danger', color)"
/>
</el-form-item>
<el-form-item :label="`${$t('主题.主题色')}：${$t('主题.信息')}`">
<el-color-picker v-model="colors.info" @change="(color: string) => changeColorFun('--el-color-info', color)" />
<el-color-picker
v-model="colors.info"
@change="(color: string) => changeColorFun('--el-color-info', color)"
/>
</el-form-item>
</el-form>
</div>