Vue-Manage-System版本升级及功能优化

来源：网络更新时间：2024-04-23 11:31:25

近期，Vue-Manage-System进行了一次版本升级，主要新增了更多功能、升级了依赖版本并优化了样式。同时，官方文档网站也已上线，其中大部分功能都有相应的文档或使用示例，更适合新手上手开发。只需根据实际业务简单修改，即可满足产品需求。

视觉优化

为了避免审美疲劳，Vue-Manage-System进行了一些视觉上的改动，使界面更加美观。以下是改动后的效果图：

标签页

之前标签页的样式是自行实现的，最多只支持8个标签页，再多就会覆盖之前的页面。现在直接使用el-tabs组件实现，代码量更少，而且不限制标签数量，超出宽度可以滚动查看。

activePath用当前路由的路径来选中对应的标签页，当路由变化时，通过监听器watch来给activePath赋值新路由，以确保选中的标签一直是当前页面路由。

const tabs = useTabsStore();
const closeTabs = (name: string) => {
    const index = tabs.list.findIndex((item) => item.path === name);
    tabs.delTabsItem(index);
    const item = tabs.list[index] || tabs.list[index - 1];
    router.push(item?item.path:'/')
}

关闭标签时会触发tab-remove事件，把该标签从tabs.list列表中移除。先通过findIndex找到该标签的索引，传到pinia中的delTabsItem方法进行移除标签，移除后路由跳转到下一个标签或者上一个标签，如果标签已清空，则跳到首页。

设置主题

Element Plus的默认主题色是#409EFF，CSS变量是--el-color-primary。要改变主题色时，只需给这个变量赋值即可。

document.documentElement.style.setProperty('--el-color-primary', '#ff0000');

同时要修改它的附属颜色，比如:hover、:active等用到的颜色变量。

--el-color-primary-light-3: #79bbff;
--el-color-primary-light-5: #a0cfff;
--el-color-primary-light-7: #c6e2ff;
--el-color-primary-light-8: #d9ecff;
--el-color-primary-light-9: #ecf5ff;
--el-color-primary-dark-2: #337ecc;

修改附属颜色变量。

const mix = (color1, color2, weight) => {
    let color = '#';
    for (let i = 0; i <= 2; i++) {
        const c1 = parseInt(color1.substring(1 + i * 2, 3 + i * 2), 16);
        const c2 = parseInt(color2.substring(1 + i * 2, 3 + i * 2), 16);
        const c = Math.round(c1 * weight + c2 * (1 - weight));
        color += c.toString(16).padStart(2, '0');
    }
    return color;
};
const setThemeLight (type) => {
    [3, 5, 7, 8, 9].forEach((v) => {
        setProperty(`--el-color-${type}-light-${v}`, mix('#ffffff', this[type], v / 10));
    });
    setProperty(`--el-color-${type}-dark-2`, mix('#000000', this[type], 0.2));
}