自定义配置样式整理

支持传入样式微调面板、块。内容的样式，对于改动较多的情况，建议还是 拓展主题

调整面板样式

优先级

js 配置的样式 > 主题样式

export default {
    // 修改面板容器的样式
    style: {},
    // 修改面板标题样式
    title: {},
    // 面板色系
    color: [],
    // 按钮样式
    btnStyle: {},
    // 面板背景色
    contentBg: '',
    // 字体颜色
    textColor: '',
    // 内容loading 指令的属性，参考：https://element.eleme.cn/2.13/#/zh-CN/component/loading
    loading: {
        // 加载文案
        'element-loading-text': '加载中',
        // 设定图标类名
        'element-loading-spinner': 'el-icon-loading',
        // 背景色值
        'element-loading-background': 'rgba(0, 0, 0, 0.6)'
    },
}

调整块样式

优先级

js 配置的样式 > 面板配置的color、contentBg、textColor > 主题样式

export default {
    // 修改块容器的样式
    blockStyle: {},
    // 当前块的色系
    color: [],
    // 当前块的背景色
    contentBg: '',
    // 当前块的字体颜色
    textColor: '',
    // 按钮样式
    btnStyle: {},
    customTitleAttrs: {
        // 块标题样式配置
        style: {},
        // 图标组件的prop属性
        iconAttrs: {
            name: '',
            style: {},
        },
    },
    // 包含搜索框、块按钮、内容在内的容器样式设置
    contentStyle: {},
    // 搜索组件的样式
    filterStyle: {},
    // 是否需要隐藏块的边角（以下angleList、angleStyle的配置）
    hiddenAngle: false,
    // 块的四个角，对于一些块的边角不规则设计，如果全部使用背景图片，边角模块会失真或被拉扯
    // 此参数允许一定范围内设置块的四个边角的样式；顺序 从左上角 开始顺时针
    angleStyle: [{}, {}, {}, {}],  // Array || Object
    // 内容loading 指令的属性，参考：https://element.eleme.cn/2.13/#/zh-CN/component/loading
    loading: {
        // 加载文案
        'element-loading-text': '加载中',
        // 设定图标类名
        'element-loading-spinner': 'el-icon-loading',
        // 背景色值
        'element-loading-background': 'rgba(0, 0, 0, 0.6)'
    },

}

调整内容样式

优先级

js 配置的样式 > 块配置的color、contentBg、textColor > 面板配置的color、contentBg、textColor > 主题样式

export default {
    // 当前内容的色系
    color: [],
    // 当前内容的背景色
    contentBg: '',
    // 当前内容的字体颜色
    textColor: '',
    // 按钮样式
    btnStyle: {},
    // 内容容器的样式（包含内容搜索条件、内容按钮在内）
    contentStyle: {},
    // 内容标题样式
    customTitleAttrs: {
        // 内容标题样式配置
        style: {},
        // 图标组件的prop属性
        iconAttrs: {
            name: '',
            style: {},
        },
    },
    // 内容loading 指令的属性，参考：https://element.eleme.cn/2.13/#/zh-CN/component/loading
    loading: {
        // 加载文案
        'element-loading-text': '加载中',
        // 设定图标类名
        'element-loading-spinner': 'el-icon-loading',
        // 背景色值
        'element-loading-background': 'rgba(0, 0, 0, 0.6)'
    },
    // 数据请求失败时，src/components/frame/NoData.vue （暂无数据）组件的属性
    failAttrs: {
        // 自定义图片路径传入
        src: '',
        // 是否不显示文本
        noText: false,
        // 图片大小（相对大小，传入%）
        imgSize: '60%',
    },
    // 报表类型为【列表】的样式设置
    table: {
        // 表头背景色
        headerBg: '',
        // 表头字体颜色
        headerColor: '',
        // 边框颜色
        border: '',
        // 斑马线背景色
        stripeBg: '',
        // 单元格字体颜色
        cellColor: '',
        // 鼠标悬浮时的背景颜色
        hoverBg: '',
        // ============= 除以上外，亦可书写 src/components/frame/Panel/BlockContent/items/PList.vue 组件容器的样式
        // 如设置此内容的边框类型为双线：
        borderType: 'double',
        borderWidth: '4px',
    }
}