智源技术

技术中心大约 5 分钟

clzy-web支持自定义主题和支持一键换肤的功能。

样式构成

clzy-web的样式主要由如下这几部分构成：

1. 整体样式
整体样式的入口是 src/styles 文件夹下
- 1） components 文件夹：主要用于定制一些公用组件的样式，方便统一调整组件的样式
- 2） default 文件夹：主要用于引入第三方组件库的样式，定义全局样式变量等
- 3） font 文件夹：主要用于存放字体样式定义
- 4） form 文件夹：主要用于定制表单的统一样式
- 5） layout 文件夹：主要用于定制整体框架的样式
- 6） pages 文件夹：主要用于定制各个业务页面的样式，不过也可以在每个组件页面内部单独定义
- 7） table 文件夹：主要用于定制表格组件的全局统一样式
- 8） common.less: 主要用于定制一些全局通用的样式，例如滚动条等
- 9） index.less: 样式入口文件，所有的样式将在此文件中引入
2. 局部样式
局部样式，例如每个组件页面的样式就可以写在该组件内部，或者单独写在less文件中，在组件中引入

3. 配置样式
在clzy-web框架中，有一部分样式是可以 src/styleSetting.js 样式配置文件进行配置修改的，这些配置会被写入vuex中，在页面中通过vuex引入动态加载。因此可以通过vuex的方法来动态修改这些样式和配置项，我们的一键更换主题就是基于这个逻辑来实现的。

// src/styleSetting.js

 具体用法：通过store引入
 ...mapGetters('admin/style', [
     'themStyle'
 ]),

 ...mapGetters('admin/style', [
     'layoutStyleConf'
 ]),
 ...mapGetters('admin/style', [
     'headerStyleConf'
 ]),
 ...mapGetters('admin/style', [
    'siderStyleConf'
])

const styleSetting = {
    themStyle: 'them-light',
    systemTitle: '管理系统',
    styleConf: {
        // 开始写当前皮肤的样式
        'them-light': {
            header: {
                headerHeight: '4.571429rem',
                backGroundType: 'color',
                background: '#FFFFFF',
                minHeight: '64px',
                color: '#666666',
                headerThem: 'light'
            },
            layout: {
                logo: '',
                offsetTop: '0',
                backGroundType: 'color',
                background: '#FFFFFF'
            },
            sider: {
                width: '18.285714rem',
                minWidth: '200px',
                backGroundType: 'color',
                background: '#191a23',
                siderThem: 'dark'
            }
        },
        'them-dark': {
            header: {
                headerHeight: '4.571429rem',
                backGroundType: 'color',
                background: '#191a23',
                minHeight: '64px',
                color: '#FFFFFF',
                headerThem: 'dark'
            },
            layout: {
                logo: '',
                offsetTop: '0',
                backGroundType: 'color',
                background: '#191a23'
            },
            sider: {
                width: '18.285714rem',
                minWidth: '200px',
                backGroundType: 'color',
                background: '#191a23',
                siderThem: 'dark'
            }
        }
    }
}

export default styleSetting;

主题定制

更改配置

配置文件入口是上述讲到的 src/styleSetting.js

themStyle： 当前应用的主题名，（非常重要，后续所有的样式都是基于该名称来的）
systemTitle： 系统名称
styleConf： 主题具体的样式配置，属性名称就是 themStyle 的值，单独针对这套主题来定制的样式。
- header：顶部样式
- layout：外框架样式
- sider：侧边栏菜单样式

更改整体样式

在clzy-web框架的整体架构中都已经动态引入了src/styleSetting.js 中的 themStyle 作为class 类名，所以如需要根据不同的主题设置不同的外框样式可以在如下样式文件中通过 themStyle 的值作为父级元素来筛选具体的元素，设置不同的样式，达到不同的主题有不同的样式效果。

1） components 文件夹：主要用于定制一些公用组件的样式，方便统一调整组件的样式
2） default 文件夹：主要用于引入第三方组件库的样式，定义全局样式变量等
3） font 文件夹：主要用于存放字体样式定义
4） form 文件夹：主要用于定制表单的统一样式
5） layout 文件夹：主要用于定制整体框架的样式
6） pages 文件夹：主要用于定制各个业务页面的样式，不过也可以在每个组件页面内部单独定义
7） table 文件夹：主要用于定制表格组件的全局统一样式
8） common.less: 主要用于定制一些全局通用的样式，例如滚动条等
9） index.less: 样式入口文件，所有的样式将在此文件中引入

示例

// src/styles/layout/basic-layout/layout.less

// 根据主题来定制框架不同的样式
.them-light.i-layout {
    .i-layout-inside {
        .i-layout-header-light{
            .i-layout-header-trigger:hover {
                background: #f8f8f9;
            }
        }
    }
}
.them-dark.i-layout {
    background: #000000;
    .i-layout-inside {
        background: #000000;
        .i-layout-header-dark{
            .i-layout-header-trigger:hover {
                background: hsla(0,0%,100%,.2);
            }
        }
        .i-layout-tabs {
            background: #000000;
            .i-layout-tabs-main {
                background: #000000;
                .ivu-tabs.ivu-tabs-card {
                    > .ivu-tabs-bar {
                        .ivu-tabs-tab {
                            background: #515a6e;
                            color: #FFFFFF;
                        }
                        .ivu-tabs-tab.ivu-tabs-tab-active, .ivu-tabs-tab.ivu-tabs-tab-focused {
                            background: #515a6e;
                            color: #2d8cf0;
                        }
                    }
                }
                .i-layout-tabs-close-main {
                    background-color: #515a6e;
                }
            }
        }
        .i-layout-content {
            color: #FFFFFF;
        }
    }
}

// src/styles/components/index.less
.them-dark {
    .ivu-input {
        background-color: #191a23;
        border-color: #999;
        color: #FFFFFF;
    }
    .ivu-btn-default {
        background-color: #191a23;
        border-color: #999;
        color: #FFFFFF;
    }
    .ivu-btn-default:hover {
        background-color: #5a5a5a;
    }
}

更改局部样式

更改局部样式跟更改全局样式是一个模式，需要先在组件中通过vuex的getter引入 themStyle ，然后将 themStyle 作为该组件的最外层根元素的class, 再通过这个class去查找下面的子元素来设置样式。每套主题都设置不同的样式，这样加载的是哪套样式的时候就能自动应用上该套样式了。

1. 引入themStyle

import { mapGetters } from 'vuex';

export default {
    ...
    computed: {
        // 主题样式相关的配置
        ...mapGetters('admin/style', [
            'themStyle'
        ])
    }
    ...
}

1. 给最外层根元素绑定 themStyle 作为class

<div class="custom-page" :class="themStyle">
</div>

1. 编写主题的样式

// 亮色主题的样式
custom-page.them-light {
    ...
}

// 暗黑主题的样式
custom-page.them-dark {
    ...
}

切换主题

通过上述我们已经知道了如何对不同的主题的样式进行定制，其中核心就是 src/styleSetting.js 中的 themStyle。themStyle最终是存放于vuex中的，通过vuex的getter来获取。那我们在切换主题的时候就只需要通过vuex的 mutations 方法来更改 themStyle 的值，这样引用了 themStyle 的组件就会自动生效，然后就可以动态切换组件根元素的class，就会应用和显示不同的样式。

import { mapMutations } from 'vuex';
export default {
    ...
    methods: {
        ...mapMutations('admin/style', [
            'updateStyle'
        ]),
        handleChangeStyle (them) {
            if (them === 'light') {
                this.updateStyle({
                    type: 'them', // 类型，有them 和 themDetail 两个值。
                    // them就是更改 src/styleSetting.js 中第一层的属性的值，themDetail的话就是更改 styleConf 中的值。
                    key: 'themStyle', // 要更改的属性名称
                    style: 'them-light' // 要更改的属性的额值
                })
            } else if (them === 'dark') {
                this.updateStyle({
                    type: 'them',
                    key: 'themStyle',
                    style: 'them-dark'
                })
            }
        }
    }
    ...
}

# 样式构成

# 主题定制

# 更改配置

# 更改整体样式

# 示例

# 更改局部样式

# 切换主题