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,7 +116,13 @@
                         </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

demoHtml/flex/js/i18n.js

@@ -1,5 +1,5 @@
 var userLangConfig = {
-    'zh-CN': {
+    zh_CN: {
         base: {
             success: '操作成功',
         },
@@ -43,6 +43,7 @@ var userLangConfig = {
             focused_border_width: '获得焦点时边框宽度',
             focused_border_color: '获得焦点时边框颜色',
             focused_scale: '获得焦点时边框缩放大小',
+            copy_component: '复制组件',
         },
         list: {
             update_time: '更新时间',
@@ -53,7 +54,7 @@ var userLangConfig = {
             add: '新建模版',
         },
     },
-    en: {
+    en_US: {
         colorpicker: {
             clear: 'clear',
             confirm: 'confirm',
@@ -101,6 +102,7 @@ var userLangConfig = {
             focused_border_width: 'focused border width',
             focused_border_color: 'focused border color',
             focused_scale: 'focused border scale',
+            copy_component: 'copy component',
         },
         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
@@ -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);
@@ -586,17 +593,22 @@
             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;
+            }
             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 () {}
             );
@@ -713,16 +725,16 @@
 
     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,7 +742,7 @@
                 const html = layui.laytpl(template, { tagStyle: 'modern' }).render();
                 $('#root').html(html);
                 resolve();
-            }, 500);
+            });
         });
     };
 

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

@@ -134,13 +134,13 @@ function rgbaToHexWithValidation(rgbaStr) {
 }
 
 var api = {
-    baseUrl: 'http://www.dtviptvott.com:20018',
+    baseUrl: 'http://www.dtviptvott.com:20018/',
-    preFix: '/template/',
+    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',