feat: 拖拽布局-接口对接

demoHtml/flex/css/list.css

@@ -7,14 +7,15 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    gap: 10px; /* 调整子项内容间距 */
+    gap: 30px; /* 调整子项内容间距 */
     padding: 20px;
     width: 100%;
     overflow-y: scroll;
 }
 
 .list-item {
-    width: calc(25% - 7.5px);
+    height: 310px;
+    width: calc(25% - 23px);
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
@@ -31,7 +32,7 @@
 }
 
 .list-item-content {
-    padding: 10px 15px; /* 调整子项内容间距 */
+    padding: 5px 15px; /* 调整子项内容间距 */
     display: flex;
     justify-content: space-between;
     align-items: center;

demoHtml/flex/js/i18n.js

@@ -1,5 +1,8 @@
 var userLangConfig = {
     'zh-CN': {
+        base: {
+            success: '操作成功',
+        },
         user: {
             // 图片组件默认名称
             image_default_name: '图片',
@@ -41,12 +44,23 @@ var userLangConfig = {
             focused_border_color: '获得焦点时边框颜色',
             focused_scale: '获得焦点时边框缩放大小',
         },
+        list: {
+            update_time: '更新时间',
+            copy: '复制',
+            delete: '删除',
+            edit: '编辑',
+            apply: '应用',
+            add: '添加',
+        },
     },
     en: {
         colorpicker: {
             clear: 'clear',
             confirm: 'confirm',
         },
+        base: {
+            success: 'action success',
+        },
         user: {
             // 图片组件默认名称
             image_default_name: 'image',
@@ -88,5 +102,13 @@ var userLangConfig = {
             focused_border_color: 'focused border color',
             focused_scale: 'focused border scale',
         },
+        list: {
+            update_time: 'update time',
+            copy: 'copy',
+            delete: 'delete',
+            edit: 'edit',
+            apply: 'apply',
+            add: 'add',
+        },
     },
 };

demoHtml/flex/js/index.js

@@ -723,14 +723,15 @@
     /** 执行方法 */
     $(function () {
         (async function () {
-            getImageData();
-            getMenuData();
-            getComponentData();
-
             // 国际化
             await i18n();
             // 获取模版数据
             await getTemplateData();
+
+            getImageData();
+            getMenuData();
+            getComponentData();
+
             // 初始化
             initGridStack();
             init('welcome', welcome);

demoHtml/flex/js/list.js

@@ -1,80 +1,119 @@
 (function () {
+    let locale = 'en';
+
     // 获取模版列表
     var getTemplateList = function () {
-        // 获取JSON数据
+        requestFN({ url: 'list' }, function (data) {
-        $.ajax({
+            data.forEach(function (item) {
-            url: 'http://www.dtviptvott.com:20018/template/list',
+                item.content = JSON.parse(item.content);
-            type: 'GET',
+            });
-            dataType: 'json',
+            console.log(data);
-            success: function (response) {
+            renderListItem(data);
-                console.log('请求成功:', response);
-                // 处理响应数据
-                $('#result').html(JSON.stringify(response, null, 2));
-            },
-            error: function (xhr, status, error) {
-                console.log('请求失败:', error);
-            },
         });
     };
 
-    $(function () {
+    var renderListItem = function (list) {
-        $.getJSON('data.json', function (data) {
+        var listPanel = $('#list-panel');
-            var listPanel = $('#list-panel');
+        listPanel.empty();
-            $.each(data, function (index, item) {
+        $.each(list, function (index, item) {
-                var listItem = `
+            let background = item.content?.welcomeData?.background || item.content?.mainData?.background || '';
-                    <div class="list-item">
+            let isImage = background.indexOf('http') !== -1;
-                        <img class="list-item-image" src="${item.mainData.image}" alt="${item.name}">
+            let backgroundImage = isImage ? `url(${background})` : background;
+            var listItem = `
+                    <div class="list-item" data-id="${item.id}">
+                        <div class="list-item-image" style="background: ${backgroundImage} no-repeat center center / cover"></div>
                         <div class="list-item-content">
                             <span class="list-item-name">${item.name}</span>
                             <div class="list-item-actions">
                                 <button class="action-btn">...</button>
                                 <div class="action-menu">
-                                    <button class="copy-btn">复制</button>
+                                    <button class="copy-btn">${userLangConfig[locale].list.copy}</button>
-                                    <button class="delete-btn">删除</button>
+                                    <button class="delete-btn">${userLangConfig[locale].list.delete}</button>
-                                    <button class="edit-btn">编辑</button>
+                                    <button class="edit-btn">${userLangConfig[locale].list.edit}</button>
-                                    <button class="apply-btn">应用</button>
+                                    <button class="apply-btn">${userLangConfig[locale].list.apply}</button>
                                 </div>
                             </div>
                         </div>
                         <div class="list-item-date">
-                            <span>更新时间：${item.updateTime}</span>
+                            <span>${userLangConfig[locale].list.update_time}：${item.createTime}</span>
                         </div>
                     </div>
                 `;
-                listPanel.append(listItem);
+            listPanel.append(listItem);
-            });
+        });
+    };
 
-            // Action button click handler
+    // 统一的事件处理函数，在文档加载后只绑定一次
-            listPanel.on('click', '.action-btn', function (e) {
+    var bindEvents = function () {
-                e.stopPropagation();
+        $(document).on('click', '.action-btn', function (e) {
-                var menu = $(this).siblings('.action-menu');
+            e.stopPropagation();
-                $('.action-menu').not(menu).hide();
+            var menu = $(this).siblings('.action-menu');
-                menu.toggle();
+            $('.action-menu').not(menu).hide();
-            });
+            menu.toggle();
+        });
 
-            // Hide menu when clicking outside
+        $(document).on('click', function () {
-            $(document).on('click', function () {
+            $('.action-menu').hide();
-                $('.action-menu').hide();
+        });
-            });
 
-            // Event handlers for action menu buttons
+        $(document).on('click', '.copy-btn', function () {
-            listPanel.on('click', '.copy-btn', function () {
+            var id = $(this).closest('.list-item').data('id');
-                console.log('复制');
+            requestFN({ type: 'POST', url: `copy?id=${id}` }, function (data) {
+                getTemplateList();
             });
+        });
 
-            listPanel.on('click', '.delete-btn', function () {
+        $(document).on('click', '.delete-btn', function () {
-                console.log('删除');
+            var id = $(this).closest('.list-item').data('id');
+            requestFN({ type: 'POST', url: `deleteById?id=${id}` }, function (data) {
+                getTemplateList();
             });
+        });
 
-            listPanel.on('click', '.edit-btn', function () {
+        $(document).on('click', '.edit-btn', function () {
-                console.log('编辑');
+            var id = $(this).closest('.list-item').data('id');
-            });
+            window.location.href = `index.html?id=${id}`;
+        });
 
-            listPanel.on('click', '.apply-btn', function () {
+        $(document).on('click', '.apply-btn', function () {
-                console.log('应用');
+            var id = $(this).closest('.list-item').data('id');
+            requestFN({ type: 'POST', url: `apply?id=${id}` }, function (data) {
+                layer.msg(`${userLangConfig[locale].base.success}`);
             });
         });
+    };
+
+    var i18n = function () {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                locale = 'zh-CN';
+                // locale = 'en';
+                // 设置语言
+                layui.i18n.set({
+                    locale: locale,
+                    messages: {
+                        // 扩展其他语言包
+                        en: userLangConfig.en,
+                        'zh-CN': userLangConfig['zh-CN'],
+                    },
+                });
+                // 渲染页面模板
+                const template = $('#template').html();
+                const html = layui.laytpl(template, { tagStyle: 'modern' }).render();
+                $('#root').html(html);
+                resolve();
+            }, 500);
+        });
+    };
+
+    $(function () {
+        (async function () {
+            // 国际化
+            await i18n();
+
+            getTemplateList();
 
-        getTemplateList();
+            bindEvents();
+        })();
     });
 })();

demoHtml/flex/list.html

@@ -7,6 +7,10 @@
             content="width=device-width, initial-scale=1.0"
         />
         <title>模板列表</title>
+        <link
+            rel="stylesheet"
+            href="./layui/css/layui.css"
+        />
         <link
             rel="stylesheet"
             href="./css/index.css"
@@ -15,17 +19,24 @@
             rel="stylesheet"
             href="./css/list.css"
         />
+        <script src="./js/utils.js"></script>
+        <script src="./js/i18n.js"></script>
         <script src="./js/jquery.min.js"></script>
+        <script src="./layui/layui.js"></script>
     </head>
     <body>
-        <div id="app">
+        <div id="root"></div>
-            <!-- <div id="header">
+        <template id="template">
-                <h1>模板列表</h1>
+            {{ const i18n = layui.i18n; }}
-            </div> -->
+            <div id="app">
-            <div id="main">
+                <!-- <div id="header">
-                <div id="list-panel"></div>
+                    <h1>模板列表</h1>
+                </div> -->
+                <div id="main">
+                    <div id="list-panel"></div>
+                </div>
             </div>
-        </div>
+        </template>
     </body>
 </html>
 <script src="./js/list.js"></script>