feat: 拖拽布局-体验优化

demoHtml/flex/css/index.css

@@ -383,3 +383,7 @@ form {
     border-color: rgb(102, 126, 234) !important;
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.08);
 }
+
+#copy-component {
+    margin: 5px 0 10px;
+}

demoHtml/flex/index.html

@@ -116,14 +116,18 @@
                         </div>
                         <div class="wait-box">{{= i18n.$t('user.empty_component') }}</div>
                         <form class="hidden">
-                            <div id="copy-component">复制组件</div>
+                            <button
+                                id="copy-component"
+                                type="button"
+                                class="layui-btn layui-btn-normal"
+                            >
+                                {{= i18n.$t('user.copy_component') }}
+                            </button>
                             <div class="form-item">
                                 <label for="childrenType">{{= i18n.$t('user.component_child_type') }}</label>
-                                <input
+                                <select id="childrenType">
-                                    type="text"
+                                    <option value="">{{= i18n.$t('user.please_select') }}</option>
-                                    id="childrenType"
+                                </select>
-                                    placeholder="{{= i18n.$t('user.please_input') }}"
-                                />
                             </div>
                             <div class="form-item">
                                 <label for="name">{{= i18n.$t('user.component_name') }}</label>
@@ -137,11 +141,6 @@
                                 <label for="image">{{= i18n.$t('user.background_image') }}</label>
                                 <select id="image">
                                     <option value="">{{= i18n.$t('user.please_select') }}</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png">movie</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png">图片一</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/3.jpg">图片三</option>
-                                    <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/4.jpg">图片四</option>
                                 </select>
                             </div>
                             <div class="form-item">
@@ -186,18 +185,16 @@
                             </div>
                             <div class="form-item">
                                 <label for="eventsAction">{{= i18n.$t('user.events_action') }}</label>
-                                <input
+                                <select id="eventsAction">
-                                    type="text"
+                                    <option value="">{{= i18n.$t('user.please_select') }}</option>
-                                    id="eventsAction"
+                                </select>
-                                    placeholder="{{= i18n.$t('user.please_input') }}"
-                                />
                             </div>
                             <div class="form-item">
                                 <label for="defaultFocus">{{= i18n.$t('user.default_focus') }}</label>
                                 <select id="defaultFocus">
                                     <option value="">{{= i18n.$t('user.please_select') }}</option>
-                                    <option value="true">{{= i18n.$t('user.yes') }}</option>
+                                    <option value="1">{{= i18n.$t('user.yes') }}</option>
-                                    <option value="false">{{= i18n.$t('user.no') }}</option>
+                                    <option value="0">{{= i18n.$t('user.no') }}</option>
                                 </select>
                             </div>
                             <div class="form-item">

demoHtml/flex/js/i18n.js

@@ -1,5 +1,5 @@
 var userLangConfig = {
-    'zh-CN': {
+    zh_CN: {
         base: {
             success: '操作成功',
         },
@@ -43,6 +43,8 @@ var userLangConfig = {
             focused_border_width: '获得焦点时边框宽度',
             focused_border_color: '获得焦点时边框颜色',
             focused_scale: '获得焦点时边框缩放大小',
+            copy_component: '复制组件',
+            default_focus_tip: '默认聚焦有且只能存在一个',
         },
         list: {
             update_time: '更新时间',
@@ -53,7 +55,7 @@ var userLangConfig = {
             add: '新建模版',
         },
     },
-    en: {
+    en_US: {
         colorpicker: {
             clear: 'clear',
             confirm: 'confirm',
@@ -101,6 +103,8 @@ var userLangConfig = {
             focused_border_width: 'focused border width',
             focused_border_color: 'focused border color',
             focused_scale: 'focused border scale',
+            copy_component: 'copy component',
+            default_focus_tip: 'default focus have and only one',
         },
         list: {
             update_time: 'update time',

demoHtml/flex/js/index.js

@@ -10,7 +10,7 @@
     let currentComponent = null;
     let currentScreen = 'welcome';
     let cellHeight = 30;
-    let locale = 'en';
+    let locale = 'en_US';
 
     var initGridStack = () => {
         // 让gridstack知道如何渲染，组件children中的content直接渲染html
@@ -28,7 +28,7 @@
                 image: '',
                 eventsType: 'click',
                 eventsAction: '',
-                defaultFocus: false,
+                defaultFocus: '0',
                 leftId: '',
                 rightId: '',
                 upId: '',
@@ -51,7 +51,7 @@
                 fontWeight: 'normal',
                 eventsType: 'click',
                 eventsAction: '',
-                defaultFocus: false,
+                defaultFocus: '0',
                 leftId: '',
                 rightId: '',
                 upId: '',
@@ -322,6 +322,13 @@
             $('#page-prop').hide();
         }
 
+        // 设置复制按钮
+        if (isScreen(component.type)) {
+            $('#copy-component').hide();
+        } else {
+            $('#copy-component').show();
+        }
+
         const form = $('#props-panel').find('form');
         if (component.hasOwnProperty('childrenType')) {
             form.find('#childrenType').val(component.childrenType);
@@ -446,6 +453,18 @@
             if (!value) return;
             el.find('span').css('font-weight', value);
         },
+        defaultFocus: function (el, value, component) {
+            if (value != '1') {
+                return;
+            }
+            // 默认聚焦一个画布只能存在一个true
+            let childrens = currentScreen === 'welcome' ? welcome.grid.engine.nodes : main.grid.engine.nodes;
+            childrens.forEach((item) => {
+                if (item.id !== component.id) {
+                    item.defaultFocus = '0';
+                }
+            });
+        },
         focusedStyle_background: function (el, value, component) {
             initColorPicker('focusedStyle_background', component);
             if (!value) return;
@@ -492,7 +511,7 @@
     // 定义映射关系：元素ID -> 事件类型 -> 组件属性
     const elementMappings = {
         name: { event: 'blur', property: 'name' },
-        childrenType: { event: 'blur', property: 'childrenType' },
+        childrenType: { event: 'change', property: 'childrenType' },
         background: { event: 'blur', property: 'background' },
         image: { event: 'change', property: 'image' },
         fontSize: { event: 'blur', property: 'fontSize' },
@@ -500,7 +519,7 @@
         text: { event: 'blur', property: 'text' },
         fontWeight: { event: 'blur', property: 'fontWeight' },
         eventsType: { event: 'change', property: 'eventsType' },
-        eventsAction: { event: 'blur', property: 'eventsAction' },
+        eventsAction: { event: 'change', property: 'eventsAction' },
         defaultFocus: { event: 'change', property: 'defaultFocus' },
         leftId: { event: 'change', property: 'leftId' },
         rightId: { event: 'change', property: 'rightId' },
@@ -563,6 +582,24 @@
         });
     };
 
+    // 抽取校验函数
+    function validateDefaultFocus(children) {
+        const { default_focus_tip } = userLangConfig[locale].user;
+        if (children.length) {
+            let hasDefaultFocus = false;
+            children.forEach((item) => {
+                if (item.defaultFocus == '1') {
+                    hasDefaultFocus = true;
+                }
+            });
+            if (!hasDefaultFocus) {
+                layer.msg(`${default_focus_tip}`);
+                return false;
+            }
+        }
+        return true;
+    }
+
     // 保存时判断是否满足条件可保存
     var canSave = function () {
         const { please_input, template_name } = userLangConfig[locale].user;
@@ -570,6 +607,16 @@
             layer.msg(`${please_input}${template_name}`);
             return false;
         }
+
+        const welcomeChildrens = welcome.grid.save();
+        const mainChildrens = main.grid.save();
+        if (!validateDefaultFocus(welcomeChildrens)) {
+            return false;
+        }
+        if (!validateDefaultFocus(mainChildrens)) {
+            return false;
+        }
+
         return true;
     };
 
@@ -586,19 +633,28 @@
             localStorage.setItem('mainData', JSON.stringify(conputedInitData('save', main)));
             localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
 
+            let id = getQueryParam('id');
+            let data = {
+                name: $('#templateName').val(),
+                content: JSON.stringify({
+                    mainData: conputedInitData('save', main),
+                    welcomeData: conputedInitData('save', welcome),
+                }),
+            };
+            if (id) {
+                data.id = id;
+            }
+            let loadIndex = layer.load(2, { shade: 0.5 });
             requestFN(
                 {
                     type: 'POST',
-                    url: getQueryParam('id') ? 'update' : 'save',
+                    url: id ? 'update' : 'save',
-                    data: {
+                    data,
-                        name: $('#templateName').val(),
-                        content: JSON.stringify({
-                            mainData: conputedInitData('save', main),
-                            welcomeData: conputedInitData('save', welcome),
-                        }),
-                    },
                 },
-                function () {}
+                function () {
+                    layer.msg(userLangConfig[locale].base.success);
+                    layer.close(loadIndex);
+                }
             );
         });
     };
@@ -618,7 +674,7 @@
                 background: currentComponent.background,
                 eventsType: currentComponent.eventsType,
                 eventsAction: currentComponent.eventsAction,
-                defaultFocus: false,
+                defaultFocus: '0',
                 leftId: currentComponent.leftId,
                 rightId: currentComponent.rightId,
                 upId: currentComponent.upId,
@@ -694,6 +750,7 @@
                 item.hCopy = item.h;
                 item.h = item.h * cellHeight * 2;
                 item.fontSize = item.fontSize ? parseInt(item.fontSize) : item.fontSize;
+                item.defaultFocus = item.defaultFocus == '1' ? true : false;
 
                 // 调用辅助函数处理带下划线的数据
                 Object.assign(item, transformUnderscoreData(item)); // 将转换后的属性合并回item
@@ -707,22 +764,23 @@
                 item.y = item.yCopy;
                 item.w = item.wCopy;
                 item.h = item.hCopy;
+                item.defaultFocus = item.defaultFocus == true ? '1' : '0';
             });
         }
     };
 
     var i18n = function () {
         return new Promise((resolve) => {
-            setTimeout(() => {
+            requestFN({ url: '/getLanguage', hasPreFix: false }, function (data) {
-                locale = 'zh-CN';
+                data.language = 'zh_CN';
-                // locale = 'en';
+                locale = data.language;
                 // 设置语言
                 layui.i18n.set({
                     locale: locale,
                     messages: {
                         // 扩展其他语言包
-                        en: userLangConfig.en,
+                        en_US: userLangConfig['en_US'],
-                        'zh-CN': userLangConfig['zh-CN'],
+                        zh_CN: userLangConfig['zh_CN'],
                     },
                 });
                 // 渲染页面模板
@@ -730,20 +788,68 @@
                 const html = layui.laytpl(template, { tagStyle: 'modern' }).render();
                 $('#root').html(html);
                 resolve();
-            }, 500);
+            });
         });
     };
 
     var getImageData = function () {
-        requestFN({ url: 'listResourceByType', data: { type: 'image' } }, function () {});
+        requestFN({ url: 'listResourceByType', data: { type: 'image' } }, function (data) {
+            let el = $('#image');
+            let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
+            data.map((item) => {
+                componentsHtml.push({ value: api.baseUrl + item.path, text: `${item.name}` });
+            });
+            el.empty();
+            componentsHtml.forEach((item) => {
+                el.append(
+                    $('<option>', {
+                        value: item.value,
+                        text: item.text,
+                        selected: item.selected || false,
+                    })
+                );
+            });
+        });
     };
 
     var getMenuData = function () {
-        requestFN({ url: 'listResourceByType', data: { type: 'menu' } }, function () {});
+        requestFN({ url: 'listResourceByType', data: { type: 'menu' } }, function (data) {
+            let el = $('#eventsAction');
+            let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
+            data.map((item) => {
+                componentsHtml.push({ value: item.name, text: `${item.name}` });
+            });
+            el.empty();
+            componentsHtml.forEach((item) => {
+                el.append(
+                    $('<option>', {
+                        value: item.value,
+                        text: item.text,
+                        selected: item.selected || false,
+                    })
+                );
+            });
+        });
     };
 
     var getComponentData = function () {
-        requestFN({ url: 'listResourceByType', data: { type: 'component' } }, function () {});
+        requestFN({ url: 'listResourceByType', data: { type: 'component' } }, function (data) {
+            let el = $('#childrenType');
+            let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
+            data.map((item) => {
+                componentsHtml.push({ value: item.name, text: `${item.name}` });
+            });
+            el.empty();
+            componentsHtml.forEach((item) => {
+                el.append(
+                    $('<option>', {
+                        value: item.value,
+                        text: item.text,
+                        selected: item.selected || false,
+                    })
+                );
+            });
+        });
     };
 
     // 获取单个参数

demoHtml/flex/js/list.js

@@ -1,5 +1,5 @@
 (function () {
-    let locale = 'en';
+    let locale = 'en_US';
 
     // 获取模版列表
     var getTemplateList = function () {
@@ -89,16 +89,15 @@
 
     var i18n = function () {
         return new Promise((resolve) => {
-            setTimeout(() => {
+            requestFN({ url: '/getLanguage', hasPreFix: false }, function (data) {
-                locale = 'zh-CN';
+                locale = data.language;
-                // locale = 'en';
                 // 设置语言
                 layui.i18n.set({
                     locale: locale,
                     messages: {
                         // 扩展其他语言包
-                        en: userLangConfig.en,
+                        en_US: userLangConfig['en_US'],
-                        'zh-CN': userLangConfig['zh-CN'],
+                        zh_CN: userLangConfig['zh_CN'],
                     },
                 });
                 // 渲染页面模板
@@ -106,7 +105,7 @@
                 const html = layui.laytpl(template, { tagStyle: 'modern' }).render();
                 $('#root').html(html);
                 resolve();
-            }, 500);
+            });
         });
     };
 

demoHtml/flex/js/utils.js

@@ -138,9 +138,9 @@ var api = {
     preFix: '/template/',
 };
 
-var requestFN = function ({ type = 'GET', url, data = {} }, successCallback, errorCallback) {
+var requestFN = function ({ type = 'GET', url, data = {}, hasPreFix = true }, successCallback, errorCallback) {
     $.ajax({
-        url: api.baseUrl + api.preFix + url,
+        url: `${api.baseUrl}${hasPreFix ? api.preFix : ''}${url}`,
         type,
         data: type === 'GET' ? data : JSON.stringify(data),
         dataType: 'json',