diff --git a/demoHtml/flex/css/list.css b/demoHtml/flex/css/list.css index c3d1a0d..a0bdfc7 100644 --- a/demoHtml/flex/css/list.css +++ b/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; diff --git a/demoHtml/flex/js/i18n.js b/demoHtml/flex/js/i18n.js index 5748f79..757b8d4 100644 --- a/demoHtml/flex/js/i18n.js +++ b/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', + }, }, }; diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js index bd4c601..072a8e9 100644 --- a/demoHtml/flex/js/index.js +++ b/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); diff --git a/demoHtml/flex/js/list.js b/demoHtml/flex/js/list.js index de0e56a..89537f0 100644 --- a/demoHtml/flex/js/list.js +++ b/demoHtml/flex/js/list.js @@ -1,80 +1,119 @@ (function () { + let locale = 'en'; + // 获取模版列表 var getTemplateList = function () { - // 获取JSON数据 - $.ajax({ - url: 'http://www.dtviptvott.com:20018/template/list', - type: 'GET', - dataType: 'json', - success: function (response) { - console.log('请求成功:', response); - // 处理响应数据 - $('#result').html(JSON.stringify(response, null, 2)); - }, - error: function (xhr, status, error) { - console.log('请求失败:', error); - }, + requestFN({ url: 'list' }, function (data) { + data.forEach(function (item) { + item.content = JSON.parse(item.content); + }); + console.log(data); + renderListItem(data); }); }; - $(function () { - $.getJSON('data.json', function (data) { - var listPanel = $('#list-panel'); - $.each(data, function (index, item) { - var listItem = ` -
- ${item.name} + var renderListItem = function (list) { + var listPanel = $('#list-panel'); + listPanel.empty(); + $.each(list, function (index, item) { + let background = item.content?.welcomeData?.background || item.content?.mainData?.background || ''; + let isImage = background.indexOf('http') !== -1; + let backgroundImage = isImage ? `url(${background})` : background; + var listItem = ` +
+
${item.name}
- - - - + + + +
- 更新时间：${item.updateTime} + ${userLangConfig[locale].list.update_time}：${item.createTime}
`; - listPanel.append(listItem); - }); + listPanel.append(listItem); + }); + }; - // Action button click handler - listPanel.on('click', '.action-btn', function (e) { - e.stopPropagation(); - var menu = $(this).siblings('.action-menu'); - $('.action-menu').not(menu).hide(); - menu.toggle(); - }); + // 统一的事件处理函数，在文档加载后只绑定一次 + var bindEvents = function () { + $(document).on('click', '.action-btn', function (e) { + e.stopPropagation(); + var menu = $(this).siblings('.action-menu'); + $('.action-menu').not(menu).hide(); + menu.toggle(); + }); - // Hide menu when clicking outside - $(document).on('click', function () { - $('.action-menu').hide(); - }); + $(document).on('click', function () { + $('.action-menu').hide(); + }); - // Event handlers for action menu buttons - listPanel.on('click', '.copy-btn', function () { - console.log('复制'); + $(document).on('click', '.copy-btn', function () { + var id = $(this).closest('.list-item').data('id'); + requestFN({ type: 'POST', url: `copy?id=${id}` }, function (data) { + getTemplateList(); }); + }); - listPanel.on('click', '.delete-btn', function () { - console.log('删除'); + $(document).on('click', '.delete-btn', function () { + var id = $(this).closest('.list-item').data('id'); + requestFN({ type: 'POST', url: `deleteById?id=${id}` }, function (data) { + getTemplateList(); }); + }); - listPanel.on('click', '.edit-btn', function () { - console.log('编辑'); - }); + $(document).on('click', '.edit-btn', function () { + var id = $(this).closest('.list-item').data('id'); + window.location.href = `index.html?id=${id}`; + }); - listPanel.on('click', '.apply-btn', function () { - console.log('应用'); + $(document).on('click', '.apply-btn', function () { + 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(); + })(); }); })(); diff --git a/demoHtml/flex/list.html b/demoHtml/flex/list.html index 47dd684..e454952 100644 --- a/demoHtml/flex/list.html +++ b/demoHtml/flex/list.html @@ -7,6 +7,10 @@ content="width=device-width, initial-scale=1.0" /> 模板列表 + + + + -
- -
-
+
+