主题

1.新增主题文件夹于src/components/frame/Panel/PanelCode/theme目录下

上述目录中新增对应主题文件夹，新增文件夹中包含assets文件夹存放静态资源，而assets文件夹又包含borderTheme文件夹用于存放块的边框，angle文件夹用于存放块的四个角（为了防止拉伸），index.js存放配置内容

2.修改src/views/panel/js/theme.js

重点配置文件中themeList和themeBorderInfo

export default {
    // 面板主题列表 { text: 主题名称, id: 主题code }
    // 其中 code 的值为 @/components/frame/Panel/PanelCode/theme 的主题目录名称
    // 如下面新增主题目录名称为'testNewTheme'
    themeList: [
        { text: '测试新增主题', id: 'testNewTheme' },
    ],
    // 主题边框信息
    themeBorderInfo: {
        // key 为 themeList 中的id，即主题目录的名称
        testNewTheme: [
            // text 为border显示值（自行定义），id 为 testNewTheme目录下/assets/borderTheme/边框图片名
            { text: '768*400型边框', id: 'centerB' },
            { text: '768*542型边框', id: 'centerT' },
            { text: '533*699型边框', id: 'left' },
            { text: '533*550型边框', id: 'rightB' },
            { text: '533*391型边框', id: 'rightT' },
        ]
    }
}

按照以上步骤即可对主题扩展完成，因目前暂无新增主题需求，故此处对目前已有主题进行目录结构等进行详细解析，后续扩展可参照已有主题的目录结构

案例解析

下面以bluePlane主题为例，进行结构解析

如上图所示，bluePlane为新增主题目录，其目录里包含assets文件夹以及index.js配置文件，assets文件夹内又包含borderTheme文件夹和angle文件夹

index.js对应内容

具体可自定义，内容不一定按照以下，以下仅为bluePlane主题的配置

export default {
    // 面板主题色
    primaryColor: '#01F8FE',
    // 内容背景色
    contentBg: 'rgba(0, 0, 0, 0)',
    // 色系
    color: ['#119DFE', '#5E33FF', '#34DF65', '#FFF02A', '#EA2027', '#8E30FF', '#EC8F38'],
    // 面板按钮样式
    panelBtnStyle: {},
    // 块按钮样式
    blockBtnStyle: {},
    // 内容按钮样式
    contentBtnStyle: {},
    // 字体颜色
    textColor: '#CCC',
    // 面板样式
    panel: {
        backgroundImage: `url(${require('./assets/background.png')})`, 
        backgroundSize: '100% 100%',
    },
    // 面板标题样式
    panelTitle: {
        backgroundImage: `url(${require('./assets/head.png')})`,
        fontSize: '3vh',
        backgroundSize: '70% auto',
        color: '#FCFCFC', /* 面板标题字体颜色 */
    },
    // 块的四个角
    angleList: ['top_left', 'top_right', 'bottom_right', 'bottom_left'],
    // 角样式（可对象，可数组）
    angleStyle: {
        width: '18px',
        height: '18px'
    },
    // 表格样式
    table: {
        // 表头背景色
        headerBg: '#032478',
        // 边框颜色
        headerColor: '#57FAF3',
        // 边框颜色
        border: 'rgba(0, 0, 0, 0)',
        // 斑马线背景色
        stripeBg: '#0B2C5A',
        // 单元格颜色
        cellColor: '#fff',
        // 鼠标悬浮时的背景颜色
        hoverBg: '#244675',
    }
}

上述内容对应步骤1，以下内容对应步骤2

以下为bluePlane主题在src/views/panel/js/theme.js的配置

export default {
    themeList: [
        { text: '蓝色大屏', id: 'bluePlane' },
    ],
    // 主题边框信息
    themeBorderInfo: {
        bluePlane: [
            { text: '561*313型无角背景', id: 'noAngle' },
            { text: '768*400型边框', id: 'centerB' },
            { text: '768*542型边框', id: 'centerT' },
            { text: '533*699型边框', id: 'left' },
            { text: '533*550型边框', id: 'rightB' },
            { text: '533*391型边框', id: 'rightT' },
        ]
    }
}

至此，以上就是在系统上使用的bluePlane主题的全部创建步骤和内容，后续新增亦可按照此案例流程