【若依】主题封装（Vue+element plus）

需求：若依原有系统有黑白主题加主题色设置的功能，需求想调整成固定几个主题配色，让用户直观选择。

最终效果如图：

以下记录修改涉及文件及思路：

一，改变设置页面：layout--components--Settings--index.vue

将原有的侧边抽屉布局的设置，修改为弹框，隐藏部分不开放功能，同时保存原有代码，以防后期业务变动。

<template>
    <el-dialog v-model="showSettings" title="主题选择" width="900px">
        <div class="themeDiv">
            <el-row>
                <template v-for="(item, index) in themes">
                    <el-col :span="8">
                        <span class="themeItem" 
                        :class="{ themeSel: theme===item.color }"
                        @click="themeSel(item.color)">
                            <img style="width: 100%; height: 150px" :src="item.src" />
                        </span>
                    </el-col>
                </template>
            </el-row>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="saveSetting">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

以上为template相关代码，同时设置themes主题ref，为后期扩展更多做准备。

<script setup lang="ts">
import defaultTheme from '@/assets/images/themes/default.png';
import blueTheme from '@/assets/images/themes/blue.png';
import newYear from '@/assets/images/themes/newYear.png';
//注意：vue中不能使用require直接导入静态资源，需要通过import将资源引入后，通过变量调用。

//通过全局module保存theme主题色，方便全局调用
import useSettingsStore from '@/store/modules/settings';
const settingsStore = useSettingsStore();
const theme = ref(settingsStore.theme);

const themes = ref([
    {
        src: defaultTheme,
        color: '#f18d2c',
        ifImage: false,//保留参数，为后期配置颜色主题或图片主题做区分
    },
    {
        src: blueTheme,
        color: '#6b65d8',
        ifImage: false,
    },
    {
        src: newYear,
        color: '#e83636',
        ifImage: true,
    },
]);

</script>

二，修改顶部导航栏：layout--components--Navbar.vue

主要改动：

1，删除hamburger，移到侧边栏底部

2，增加Skin图标（在iconfont中下载合适图标进行封装），作为settings页面打开入口。

3，依据主题色修改头部导航的背景色或增加背景图片

<template>
    <div class="navbar" 
        :style="setBackground()"
    >
    </div>
</template>

//setBackground的实现逻辑
function setBackground() {
    switch (theme.value){
        case '#e83636':
            //特殊颜色背景为图片，后期如果新增图片主题，在此处新增case
            //注意此处URL的引入方式，防止渲染时解析失败，找不到静态文件
            return  { background: 'url('+newYearHEAD+')' } 
            break;
        default:
            return  { background: theme.value }
    }
}

三，修改侧边栏：layout--components--Sidebar 以及assets--styles--sidebar.scss

主要改动：

1，hamburger移到侧边栏底部，并与主题色调同时变化。

.hamburger {
    fill:var(--el-menu-active-color)
 }

2，侧边栏展开及回收状态下，每个条目的svg，文字，背景色等的展示及鼠标浮动时效果调整

  修改内容均在sidebar.scss文件中

        //使用--el-menu-active-color来获取当前主题色
        //浮动时背景色取--el-color-primary-light-9
        // menu hover
        .sub-menu-title-noDropdown,
        .el-sub-menu__title {
            &:hover {
                background-color: var(--el-color-primary-light-9)  !important;
                color: var(--el-menu-active-color) !important;
                .svg-icon {
                  fill: var(--el-menu-active-color) !important;
              }
            }
        }

3，图片主题下，侧边栏新增图片效果

//此处待优化，当图片主题增多时，需要通过数组保存
 <div v-if="theme=='#e83636' && appStore.sidebar.opened">
    <img class="layoutSiderBgImg" :src="newYearSIDE" alt="" />
 </div>