dcdev_demo
/
component_index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        #btn {
            width: 60px;
            height: 60px;
            position: fixed;
            /* //固定定位设置 */
            right: 30px;
            bottom: 30px;
            background-color: rgb(207, 207, 207);
            border-radius: 30px;
            display: none;
            justify-content: center;
            align-items: center;
            color: honeydew;
        }

        .box {
            /* border: solid 1px #C9C9C9; */
            margin: 10px;
        }

        /* 如果list没给高度则给一个默认高度 */
        .iframe-card {
            height: 500px;
        }

        .word-card {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;

        }

        .word {
            /* margin:10px !important; */
            /* border: 1px solid #C9C9C9; */
            background-color: #fff;
            font-size: 12px;
            color: #ffffff;
            text-decoration: none;
            cursor: pointer;
            padding: 7px;
            background-color: gray;
            transition: all 0.6s;

        }

        .word:hover {
            transform: scale(1.2);
        }

        .show_component {
            border: 1px solid #C9C9C9;
            display: flex;
            flex-direction: column;
            height: 100%;
            margin-top: 10px;
        }

        .btn-card {
            /* background-color: rgba(0, 0, 0, 0.507); */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin: 10px;
        }

        .btn-card .small {
            margin-right: 5px;
        }
        .avatar{
            margin: 10px;
            margin-bottom: 0px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .author-info{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
        }
        .author-info .name{
            font-size: 14px;
            color: #444;
            line-height: 25px;
        }
        .author-info .tag{
            color: #aaa;
            font-size: 14px;
            line-height: 22px;
        }
        .author-info button{
            margin-left: auto;
            margin-right: 10px;
        }
        .bar{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <a href="javascript:;" id="btn" title="回到顶部"><img style="width: 50px;height: 50px;"
            src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/to_top.svg" /></a>

    <div id="component_list" class="box"></div>
    <!-- <div class="bar"><img style="width: 50px;height: 50px;transform:rotate(180deg);" src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/to_top.svg" /></div> -->
    <div id="component_type_list" class="box"></div>

</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/render_somthing.js"></script>
<link class="_dcdev_preset_" type="text/css" rel="stylesheet"
    href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.6/func/component_index.js"></script>
<script>
    {
        var render_somthing_component_list;
        render_somthing_component_list = new render_somthing();
        render_somthing_component_list.init({
            // div的id
            id: "#component_list",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div class="word-card"></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div data-key="type_click" class="word" style="background-color: #{bgcolor};">#{desc}</div>
`,
            },
            callback: {
                click: function (res) {
                    if (res.key == "type_click") {
                        console.log(res.node);
                        console.log(res.value.desc)
                        //渲染列表
                        render_somthing_component_type_list.render(madeComponent(res.value.desc));
                        //滑动
                        getDivHeight('#component_list');
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [],
        })
        //预处理数据
        var component_name = [];
        component_index.forEach(element => {
            var result = component_name.some(item => {
                if (item.desc == element.desc) {
                    return true
                }
            })
            if (!result) { // 如果不存在
                component_name.push({
                    desc: element.desc,
                    bgcolor: getColor2()
                });
            }
        });
        //console.log(component_name)
        render_somthing_component_list.render(component_name);
        //随机色
        function getColor() {
            var r = Math.floor(Math.random() * 4);
            var google_blue = '#2d85f0';
            var google_red = '#f4433c';
            var google_yellow = '#ffbc32';
            var google_green = '#0aa858';
            switch (r) {
                case 0:
                    return google_blue;
                    break;
                case 1:
                    return google_red;
                    break;
                case 2:
                    return google_yellow;
                    break;
                case 3:
                    return google_green;
                    break;
                default:
                    return google_blue;
                    break;
            }
        }
        //获取循环三原色
        function getColor2() {
            var google_blue = '#2d85f0';
            var google_red = '#f4433c';
            var google_yellow = '#ffbc32';
            var google_green = '#0aa858';
            //console.log(window.flag)
            if (window.flag == undefined || window.flag == 3) {
                window.flag = -1;
            }
            window.flag = window.flag + 1;
            switch (window.flag) {
                case 0:
                    return google_blue;
                    break;
                case 1:
                    return google_red;
                    break;
                case 2:
                    return google_yellow;
                    break;
                case 3:
                    return google_green;
                    break;
                default:
                    return google_blue;
                    break;
            }

            // console.log(window.flag)
        }

        window.onload = function () {
            // 获取页面可视区的高度
            var clientHeight = document.documentElement.clientHeight;
            // 回到顶部，按钮
            var obtn = document.getElementById('btn');
            var timer = null;
            var isTop = true;

            // 滚动条 滚动时触发
            window.onscroll = function () {
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (osTop >= 100) {
                    obtn.style.display = 'flex'; // 显示
                } else {
                    obtn.style.display = 'none'; // 隐藏
                }
                if (!isTop) {
                    clearInterval(timer)
                }
                isTop = false; //
            }
            $('#btn').click(function () {
                $('html , body').animate({
                    scrollTop: 0
                }, 'slow');
            });
        }
        var render_somthing_component_type_list;
        render_somthing_component_type_list = new render_somthing();
        render_somthing_component_type_list.init({
            // div的id
            id: "#component_type_list",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div ></div>
    `
            },
            // 渲染内容的配置

            // <div class="show_component">
            //     <div class="btn-card">
            //         <div class="small">#{desc}</div>
            //         <div class="small">#{vendor}</div>
            //         <button data-key="use_component">使用</button>
            //     </div>
            //     <iframe class="iframe-card" style="height: #{height}px;" src="https://res.dcdev.net/dcdev/v1.0.6/func/#{path}"></iframe>
            // </div>
            content: {
                default: `
                <div class="show_component">
                    <div class="author-info">
                        <img class="avatar" src="http://db.minfish.com/uc_server/avatar.php?uid=76&amp;size=small">
                        <div style="margin-top: 10px;">
                            <div class="name">所属分类:#{desc} 使用模块:#{vendor}</div>
                            <div class="tag">我爱西红柿的作品</div>
                        </div>
                        <button  data-key="use_component">使用</button>
                    </div>
                    <iframe class="iframe-card" style="height: #{height}px;" src="https://res.dcdev.net/dcdev/v1.0.6/func/#{path}"></iframe>
                </div>
`,
            },
            callback: {
                click: function (res) {
                    if (res.key == "use_component") {
                        $.get(`https://res.dcdev.net/dcdev/v1.0.6/func/${res.value.path}`, function (html) {
                            // 调用父窗口函数
                            window.parent["insert_to_code_editor"](res.value, html, true);
                        })
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [],
        })


        //制作对应的组件的数组
        function madeComponent(name) {
            var data = [];
            component_index.forEach(element => {
                if (element.desc == name) {
                    data.push(element);
                }
            })
            return data;
        }
        //实时获取按钮div高度并滑动
        function getDivHeight(name){
            var height = $(name).outerHeight(true);
            $('html , body').animate({
                scrollTop: height
            }, 'slow');
        }
    }
</script>

</html>