qimall/addons/Happiness/backend/views/diy/index.php

<script src="/resources/js/html2canvas.min.js"></script>
<!-- 装修所需的数据 -->
<script type="text/javascript" src="/resources/js/diy-util.js"></script>
<script type="text/javascript" src="/resources/js/hotzone.js"></script>
<?php

use common\helpers\ComponentHelper;
use common\models\diy\DiyComponents;
use common\helpers\AddonHelper;

$diyPath = Yii::$app->viewPath . '/components/common/diy/common';
$stylePath = Yii::$app->viewPath . '/components/common/diy/style-components';
$components = DiyComponents::getDir($diyPath, $diyPath);
$styleComponents = DiyComponents::getDir($stylePath, $stylePath);
ComponentHelper::loadComponentView('diy/diy-func-list');
ComponentHelper::loadComponentView('diy/diy-preview');
ComponentHelper::loadComponentView('diy/diy-style-preview');

if (!empty($addons_components)) {
    // 组件ID
    $view_arr = ['preview', 'style'];
    foreach ($addons_components as $item) {
        $basc_path = Yii::getAlias('@addons') . "/{$item['source']}/backend/views/components/diy/{$item['code']}";
        // 加载组件
        foreach ($view_arr as $view) {
            // 文件
            $file_path = $basc_path . DIRECTORY_SEPARATOR . $view . '.php';
            if (is_file($file_path)) {
                ComponentHelper::loadComponentView($view, $basc_path);
            }
        }
    }
}
foreach ($components as $item) {
    ComponentHelper::loadComponentView("diy/common/{$item}");
}

foreach ($styleComponents as $item) {
    ComponentHelper::loadComponentView("diy/style-components/{$item}");
}
$currentRoute = Yii::$app->controller->route;
?>
<div id="app">
    <div style="padding-bottom: 10px;padding-right: 20px;background: #F4F6F8;" @click="save" flex="main:right">
        <el-button type="primary" size="small" style="width: 80px;">保存</el-button>
    </div>
    <div class="diy-contain flex" v-loading="loading">
        <div class="diy-func-list">
            <diy-func-list @end="onEnd" :test-data="onClick" :list="pageComponentsList"
                           @add-prev-item="onClick"></diy-func-list>
        </div>
        <diy-preview :active-index="activeIndex" :list="previewList" @select-item="selectItme"
                     @change-move="changeMove"></diy-preview>
        <transition name="fade">
            <diy-style-preview :active-item="activeItem" :active-index="activeIndex" :permission="permission"
                               @update="changeDiyItem" v-if="showUpdate"></diy-style-preview>
        </transition>
    </div>

    <!-- 预览弹窗 -->
    <el-dialog title="预览弹窗" :modal-append-to-body="false" :visible.sync="dialogFormVisible">
        <div class="flex flex-x-center" style="height: 600px;overflow:auto">
            <img id="diy-test-preview" :src="previewSrc"></img>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>


</div>
<script>
    function getNavData() {
        const result = {
            "id": getRandomId(),
            "data": {
                "logoSrc": "",
                "backSrc": "",
                "isShowName": "1",
                "isShowSearch": "1",
                "mainPage": { // 主页面设置
                    "defColor": "#fff",
                    "imageUrl": [],
                    "name": "标题",
                    "type": "纯色"
                },
            },
            "computedStyle": {
                "mode": 1,
                "style": 1,
                "titleSwitch": true,
                "titleMode": 1,
                "imageUrl": [],
                "position": 1,
                "searchSwitch": true,
                "searchBgColor": "",
                "defaultForm": {
                    "defColor": "transparer"
                },
                "titleDistance": {
                    "fontSize": 16,
                    "height": 30,
                    "width": 57,
                    "marginLeft": 20
                },
                "statusBar": "1",
                "searchMarPad": {
                    "marginLeft": 20,
                    "paddingLeft": 14
                }
            },
            "permission": [],
            "funcListItem": {
                // "type": "nav",
                // "title": "顶部导航",
                // "is_top": 1
            },
            "isShow": true,
            "is_show_permission": false,
            "is_drag": false,
            "disabled": true,
        }
        return result
    }

    function getNavLocationData() {
        const result = {
            "id": getRandomId(),
            "data": {
                "logoSrc": "",
                "backSrc": "",
                "isShowName": "1",
                "isShowSearch": "1",
                "locationStyle": "1",
                "mainPage": { // 主页面设置
                    "defColor": "#fff",
                    "imageUrl": [],
                    "name": "标题",
                    "type": "纯色"
                },
            },
            "computedStyle": {
                "mode": 1,
                "style": 1,
                "titleSwitch": true,
                "titleMode": 1,
                "imageUrl": [],
                "position": 1,
                "searchSwitch": true,
                "searchBgColor": "",
                "defaultForm": {
                    "defColor": "transparer"
                },
                "titleDistance": {
                    "fontSize": 16,
                    "height": 30,
                    "width": 57,
                    "marginLeft": 20
                },
                "statusBar": "1",
                "statusCapsule": "1",
                "searchMarPad": {
                    "marginLeft": 20,
                    "paddingLeft": 14
                }
            },
            "permission": [],
            "funcListItem": {
                "type": "nav-location",
                "title": "顶部定位导航",
                "is_top": 1
            },
            "isShow": true,
            "is_show_permission": false,
            "is_drag": false,
            "disabled": true,
        }
        return result
    }
</script>
<script>
    Vue.prototype.$capitals = []; // 用户信息对象

    Vue.prototype.$eventBus = new Vue();
    var PageShareData = {
        pageIndex: false // 点击页面设置标识 => nav/style
    }; // 全局共享数据 - 没有响应式
    new Vue({
        el: '#app',
        data() {
            return {
                /**
                 * @descriptions 浮动（）、普通（）、置顶（isTop）、弹窗（alert）四种显示组件
                 * @param {string} type // diy组件类型
                 * @param {string} title // 二级标题
                 * @param {string} img // diy组件图片
                 * @param {number} count // 可添加diy组件数量
                 * @param {boolean} is_top // diy组件是否置顶组件 - 待添加 - 分添加等级 1 2 3 数字靠前权限越高
                 * @param {object} permission // 组件的不可操作权限 {"is_delete": false,"is_drag": false,"disabled": true, // 禁用操作}
                 */
                pageComponentsList: [{
                    title: '常用组件', // 一级标题
                    list: [{
                        type: 'search', // diy组件类型
                        title: '搜索', // 二级标题
                        img: 'resources/img/decorate/func/search.png',
                    }, {
                        type: 'button-group', // diy组件类型
                        title: '按钮组', // 二级标题
                        img: 'resources/img/decorate/func/button-group.png',
                    }, {
                        type: 'placard', // diy组件类型
                        title: '公告', // 二级标题
                        img: 'resources/img/decorate/func/placard.png',
                    }, {
                        type: 'video', // diy组件类型
                        title: '视频', // 二级标题
                        img: 'resources/img/decorate/func/video.png',
                    },
                        {
                            type: 'graphic-details', // diy组件类型
                            title: '图文详情', // 二级标题
                            img: 'resources/img/decorate/func/graphic-details.png',
                        },
                        {
                            type: 'auxiliary-blank', // diy组件类型
                            title: '辅助空白', // 二级标题
                            img: 'resources/img/decorate/func/auxiliary-blank.png',
                        },
                        {
                            type: 'auxiliary-line', // diy组件类型
                            title: '辅助线', // 二级标题
                            img: 'resources/img/decorate/func/auxiliary-line.png',
                        },
                        {
                            type: "title-block",
                            title: "标签栏",
                            img: 'resources/img/decorate/func/title-block.png',
                        },
                        {
                            type: 'rubik-cube', // diy组件类型
                            title: '魔方', // 二级标题
                            img: 'resources/img/decorate/func/rubik-cube.png',
                        },
                        {
                            type: 'img-ad', // diy组件类型
                            title: '图片广告', // 二级标题
                            img: 'resources/img/decorate/func/img-ad.png',
                        },
                        {
                            type: 'micro-theme', // diy组件类型
                            title: '微主题', // 二级标题
                            img: 'resources/img/decorate/func/micro-theme.png',
                        },
                        {
                            type: 'carousel-img', // diy组件类型
                            title: '轮播广告', // 二级标题
                            img: 'resources/img/decorate/func/carousel-img.png',
                        },
                        {
                            type: 'graphic-details', // diy组件类型
                            title: '模板', // 二级标题
                            img: 'resources/img/decorate/func/search.png',
                        },
                        {
                            type: 'commodity-group', // diy组件类型
                            title: '商品组', // 二级标题
                            img: 'resources/img/decorate/func/commodity-group.png',
                        }
                    ]
                },
                    {
                        title: '小店组件', // 一级标题
                        list: [{
                            type: 'happiness-store-goods', // diy组件类型
                            title: '小店商品', // 二级标题
                            img: 'resources/img/decorate/func/happiness-store-goods.png',
                        }, {
                            type: 'happiness-member-card', // diy组件类型
                            title: '小店会员卡', // 二级标题
                            img: 'resources/img/decorate/func/happiness-member-card.png',
                        }
                        ]
                    },
                ],
                capital: [],
                dialogFormVisible: false,
                /**
                 * @param {boolean} is_show_permission // 显示权限
                 * @param {boolean} is_delete // 是否可删除
                 * @param {boolean} is_up // 是否可上移
                 * @param {boolean} is_down // 是否可下移
                 * @param {boolean} is_drag // 是否可拖拽
                 * @param {boolean} is_copy // 是否可复制
                 * @param {boolean} disabled // 全部禁用操作
                 */
                previewList: [], // 预览数组对象
                activeIndex: -1, // 预览激活索引
                activeItem: null, // 预览激活对象
                type: "add", // add新增 - edit编辑
                test: ["a", "b", "c"],
                showUpdate: true,

                responentData: null, // 详情响应的总数据
                permission: [], // 权限数组

                isClickPage: false, // 是否点击分页设置
                loading: false, // 数据加载
                saveLoading: false, // 保存数据

                fields: {
                    upload_type: 'images'
                },
                previewSrc: "",
            }
        },
        provide() {
            return {
                capitals: this.capital
            }
        },
        watch: {
            activeIndex() {
                this.showUpdate = false
                setTimeout(() => {
                    this.showUpdate = true
                }, 0)
            },
        },
        created() {
            // console.log(this.dynamicImgSrc('/abc/ss'));
            // 添加不同的模板nav
            this.previewList.push(getNavData())
            this.init()
            this.detail()
        },
        methods: {
            savePreview() {
                this.activeIndex = -1
                this.activeItem = null
                this.$nextTick(() => {
                    const contain = document.getElementById("diy-preview-contain");
                    this.deepNode(contain);

                    setTimeout(() => {
                        this.dialogFormVisible = true
                        html2canvas(contain, {
                            useCORS: true
                        }).then(canvas => {
                            const src = canvas.toDataURL("image/png")
                            this.upload(this.dataURLtoFile(src)).then(res => {
                                if (res.code == 0) {
                                    this.previewSrc = res.data.url
                                    this.save(false)
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                            })
                        })
                    }, 0)
                })
            },
            dataURLtoFile(dataurl) { // 生成Blob
                var arr = dataurl.split(',');
                var mime = arr[0].match(/:(.*?);/)[1];
                var bstr = atob(arr[1]);
                var n = bstr.length;
                var u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], {
                    type: mime
                });
            },
            upload(file) {
                let formData = new FormData();
                const params = {
                    upload_type: 'images'
                };
                params['r'] = 'common/file/upload';
                for (let i in this.fields) {
                    formData.append(i, this.fields[i]);
                }
                formData.append('file', file, "image.png");
                return new Promise(successCallback => {
                    this.$request({
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        },
                        params: params,
                        method: 'post',
                        data: formData,
                    }).then(e => {
                        successCallback(e.data)
                    }).catch(e => {
                        file._complete = true;
                    });
                })
            },
            deepNode(contain) {
                if (contain.tagName === "IMG") {
                    contain.src = contain.src + '?t=' + Date.now()
                    contain.setAttribute('crossorigin', 'anonymous')
                }

                if (contain.children && contain.children.length) {
                    [].forEach.call(contain.children, (item => {
                        this.deepNode(item)
                    }))
                }
            },
            pageSet() {
                PageShareData.pageIndex = true
                this.$eventBus.$emit("onPageClick")
                var index = 0;
                this.activeIndex = index
                this.activeItem = this.previewList[index]
                // this.changeDiyItem()
            },
            detail() {
                // 详情
                this.loading = true
                request({
                    params: {
                        r: 'happiness/diy/index'
                    },
                    method: 'get',
                }).then(res => {
                    if (res.data.code == 0) {
                        if (res.data.data.length == 0) {
                            return;
                        }
                        const previewList = JSON.parse(res.data.data.content)
                        if (!previewList.length) return
                        this.previewList = previewList
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    /* const {
                       data
                    } = res.data
                    if (res.data.code != 0) {
                       this.$message({
                          message: res.data.msg,
                          type: 'error'
                       });
                       return false
                    }
                    const previewList = JSON.parse(data.content)
                    this.previewList = previewList */
                }).finally(res => {
                    this.loading = false
                })
            },
            save: debounce(function (isLoading = true) {
                // 对接保存数据接口
                if (this.saveFlag) {
                    console.log("重复提交");
                    return
                }
                const title = this.previewList[0].data.name
                // if (!title) {
                //     this.$message({
                //         message: '请输入标题',
                //         type: 'warning'
                //     });
                //     return
                // }
                isLoading && (this.saveLoading = true)
                this.saveFlag = true // 防止重复提交限制
                request({
                    params: {
                        r: 'happiness/diy/index'
                    },
                    method: 'post',
                    data: {
                        content: JSON.stringify(this.previewList),
                    }
                }).then(res => {
                    if (res.data.code != 0) {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    }
                }).finally(res => {
                    this.saveFlag = false
                    this.saveLoading = false
                })
            }, 400),
            init() {
                this.$eventBus.$on("diy-preview-copy", (item = {}) => {
                    this.copy(item)
                })
                this.$eventBus.$on("diy-preview-operateFn", (item = {}) => {
                    this.operateFn(item)
                })
                this.$eventBus.$on("diy-back-set", () => {
                    this.updateView(null, -1)
                })
            },
            onEnd(e, index) { // 左侧拖拽结束手动添加进去
                this.activeIndex = index - 1
                console.log(this.activeIndex, "=======> activeIndex");
                this.onClick(e)
            },
            setInitObj(data, e) {
                if (!e.permission) {
                    return false
                }
                const target = typeof e.permission === "object" ? e.permission : JSON.parse(e.permission)
                for (const key in target) {
                    data[key] = e.permission[key]
                }
            },
            onClick(e) {
                console.log(e, "=======> e");
                const flag = this.validateCount(e) // 校验组件可添加个数
                if (flag) return // 不通过

                var initObj = {
                    id: getRandomId(this.previewList),
                    data: {}, // 对应数据
                    computedStyle: {}, // 对应组件样式-尺寸
                    permission: [], // 展示权限列表 ==> 对应用户等级or其他
                    funcListItem: e,
                    isShow: true, // 前端是否显示
                    is_show_permission: true, // 是否显示权限
                } // 创建的初始数据
                this.setInitObj(initObj, e) // 设置可操作方法

                // 弹窗组件
                if (e.type === "popup-advertisement") {
                    this.handleAlertComponent(initObj) // 单独处理全局弹窗组件
                    return false
                }

                if (e.is_top) { // 置顶组件操作 - 不操作以前
                    const index = this.previewList.findIndex(item => {
                        const e1 = item.funcListItem || {}
                        return e1.is_top === undefined || (e1.is_top >= e.is_top)
                    })
                    this.activeItem = initObj
                    if (index < 0) {
                        this.previewList.push(initObj)
                        this.activeIndex = Math.max(0, this.previewList.length - 1)
                    } else {
                        this.previewList.splice(index, 0, initObj)
                        this.activeIndex = index
                    }
                    return false
                }

                // 不置顶组件添加
                this.activeIndex = Math.max(this.getIsTopArrLength() - 1, this.activeIndex) // 限制普通组件到istop前面
                var length = this.previewList.length;
                var isLast = length - 1 === this.activeIndex;
                this.previewList = this.addIndexItem(this.previewList, initObj, this.activeIndex)


                if (length && (isLast || this.activeIndex == -1)) {
                    // 有值是否最后一项
                    this.activeIndex = length - 1
                }
                this.activeItem = initObj
                this.activeIndex += 1
            },
            validateCount(e) {
                // 校验组件能添加几个
                var msg = "";
                var list = this.previewList.filter(item => {
                    return item.funcListItem.type === e.type
                });
                if (e && e.count && list.length >= e.count) {
                    msg = `该组件只能添加${e.count}个哦`
                }
                if (msg) {
                    this.$message({
                        message: msg,
                        type: 'warning'
                    });
                }
                return msg
            },
            getIsTopArrLength() {
                return this.previewList.filter(item => {
                    const e1 = item.funcListItem || {}
                    return e1.is_top
                }).length
            },
            changeDiyItem(item, index, params = {}) {
                var {
                    type
                } = params
                var list = deepClone(this.previewList) // 克隆一下
                if (type !== "isShow") {
                    // 显示问题  -- 样式组件不让修改
                    item.isShow = list[this.activeIndex].isShow;
                }
                // 直接全部覆盖
                list[this.activeIndex] = deepClone(item)
                this.activeItem = deepClone(item)
                this.previewList = list
            },
            selectItme(item, index) {
                console.info(item);
                if (this.activeIndex == index) {
                    this.activeIndex = -1
                    this.activeItem = null
                } else {
                    this.activeIndex = index
                    this.activeItem = item
                }
                console.info();
                this.$forceUpdate()
            },
            pushItem(list = [], target = {}) {
                var result = deepClone(list)
                result.push(target)
                return result
            },
            /**
             * 两种形式，一种push，追加index
             */
            addIndexItem(list = [], target = {}, index) { // 往指定的index添加item
                var result = deepClone(list)
                if (this.activeIndex < 0) {
                    result.push(target)
                } else {
                    var handleArr = [deepClone(result[index]), target]
                    result.splice(index, 1, ...handleArr)
                }
                return result
            },
            // 操作相关
            copy() {
                if (!this.activeItem || this.activeItem.disabled || this.activeItem.is_copy === false) {
                    return
                }
                var item = deepClone(this.activeItem)
                item.id = getRandomId()
                this.previewList = this.addIndexItem(this.previewList, item, this.activeIndex)
            },
            /**
             * @params {string} obj.type up - down - show
             */
            operateFn(obj) {
                const methods = {
                    show: 'showItem',
                    up: 'upItem',
                    down: 'downItem',
                    delete: 'deleteItem',
                    replace: 'replaceItem'
                }
                this[methods[obj.type]](obj.index)
            },
            replaceItem(index) {
                let type = this.activeItem.funcListItem.type;
                let activeItem = type === 'nav' ? getNavLocationData() : getNavData();
                this.previewList.splice(index, 1, activeItem);
                this.updateView(this.previewList[index], index);
            },
            showItem(index) {
                var item = deepClone(this.activeItem);
                item.isShow = !item.isShow
                this.changeDiyItem(item, index, {
                    type: "isShow"
                })
            },
            updateView(item, index) {
                this.activeItem = item
                this.activeIndex = index
            },
            deleteItem(index) {
                if (this.activeItem.disabled || this.activeItem.is_delete === false) {
                    return false
                }

                this.previewList.splice(index, 1);
                // 删除后失去焦点
                this.activeIndex = -1;
                this.activeItem = null;
            },
            upItem(index) {
                const topArr = this.previewList.filter(item => {
                    const e1 = item.funcListItem || {}
                    return e1.is_top
                }) // 操作上限
                const topIndex = Math.max(0, topArr.length)
                if (index <= 0 || this.activeItem.disabled || this.activeItem.is_up === false) {
                    return false
                } else if (index <= topIndex) {
                    alert("不可以再操作了噢");
                    return false
                }
                var previewList = deepClone(this.previewList);
                this.previewList = this.swapItems(previewList, index, index - 1);
                this.updateView(this.previewList[index - 1], index - 1);
            },
            downItem(index) {
                if (this.activeItem.disabled || this.activeItem.is_down === false) {
                    return false
                } else if (index === this.previewList.length - 1) {
                    alert("不可以再操作了噢");
                    return false
                }
                var previewList = deepClone(this.previewList);
                this.previewList = this.swapItems(previewList, index, index + 1);
                this.updateView(this.previewList[index + 1], index + 1);
            },
            swapItems(arr, index1, index2) {
                var item = deepClone(arr[index1]);
                arr[index1] = arr[index2]
                arr[index2] = item
                return arr
            },
            changeMove(e) {
                const {
                    newIndex,
                    list
                } = e
                // 移动拖拽改变索引
                this.previewList = deepClone(list);
                this.updateView(this.previewList[newIndex], newIndex);
            },
            // 更新主页面
            updateMainPage(item) {
                this.mainPage = deepClone(item);
            },
            // 处理兼容老数据
            addIsTop(list, type) {
                const obj = {
                    ['nav']: 1,
                    ['member-info']: 2
                }
                const top = obj[type]
                list.forEach(item => {
                    if (item.funcListItem.type === type && !item.funcListItem.is_top) {
                        item.funcListItem.is_top = top
                    }
                });
                return list
            },

        }
    })

    // 拦截页面卸载
    /* window.onbeforeunload = function(e) {
       var e = window.event || e;
       e.returnValue = ("确定离开当前页面吗？");
    } */
</script>

<style>
    #app {
        display: flex;
        flex-direction: column;
        min-width: 1250px;
    }

    #diy-test-preview {
        margin: auto;
    }

    .diy-header-backs {
        cursor: pointer;
    }

    .fixed {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
    }

    .diy-header {
        height: 60px;
        background: #313131;
        opacity: 1;
        border-radius: 0px;
        justify-content: space-between;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        padding: 0 30px;
    }

    .diy-contain {
        flex: 1;
        overflow: auto;
        background: #F4F6F8;
        justify-content: space-between;
    }

    .diy-func-list {
        box-sizing: border-box;
        width: 354px;
        background: #FFFFFF;
        border-radius: 0px;
    }

    .diy-preview {
        flex: 1;
        background: #F4F6F8;
        justify-content: space-around;
    }

    .fill-box {
        position: relative;
        width: 467px;
        height: 100%;
    }

    .flex {
        display: flex;
    }

    .flex-x-center {
        justify-content: center;
    }

    .flex-y-center {
        align-items: center;
    }

    /*  */
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 1s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .diy-text-font {
        font-size: 13px;
        font-weight: 700;
        color: #999999;
    }

    .fill-border-top {
        border-top: 10px solid #F4F6F8;
    }

    .fill-border-bottom {
        border-bottom: 10px solid #F4F6F8;
    }

    /* 导航栏 */
    .custom-page {
        width: 181px;
        height: 60px;
        line-height: 60px;
        background: var(--diy-theme);
        font-weight: 700;
        border-radius: 0px;
        text-align: center;
    }

    .save {
        font-size: 24px;
        vertical-align: middle;
    }

    .save + span {
        vertical-align: middle;
    }

    .sava_btn .el-button--primary {
        background: var(--diy-theme);
        border-color: var(--diy-theme);
        padding: 8px 14px;
    }

    .diy_nav_right > div {
        padding: 8px 14px;
    }

    .diy_nav_right .sava_btn {
        padding: 0;
    }

    .page_set > i {
        font-size: 24px;
        vertical-align: middle;
    }

    .page_set > span {
        vertical-align: middle;
    }

    .xiaoshou {
        cursor: pointer;
    }

    :root {
        /* 主题色 */
        --diy-theme: #F10009;
        /* 主要字体颜色 */
        --diy-color: #F10009;
    }

    /* 修改ele默认样式 */
    /* slider组件 */
    .el-slider__bar {
        background-color: var(--diy-theme);
    }

    .el-slider__button {
        border-color: var(--diy-theme);
    }

    /* input组件 */
    .el-input .el-input__inner:focus {
        border: 1px solid var(--diy-theme);
    }

    /* textarea */
    .el-textarea .el-textarea__inner:focus {
        border: 1px solid var(--diy-theme);
    }

    /* radio单选组件 */
    .el-radio__input.is-checked + .el-radio__label {
        color: var(--diy-color);
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: var(--diy-theme);
        background: var(--diy-theme);
    }

    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        border-color: var(--diy-theme);
        box-shadow: -1px 0 0 0 var(--diy-theme);
    }

    /* 多选 */
    .el-checkbox__input.is-checked + .el-checkbox__label {
        color: var(--diy-color);
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        border-color: var(--diy-theme);
        background: var(--diy-theme);
    }
</style>