feat: 拖拽布局-国际化

demoHtml/flex/index.html

@@ -183,25 +183,25 @@
                             <div class="form-item">
                                 <label for="leftId">向左侧移动组件ID</label>
                                 <select id="leftId">
-                                    <option value="">请选择</option>
+                                    <option value="">{{= i18n.$t('user.please_select') }}</option>
                                 </select>
                             </div>
                             <div class="form-item">
                                 <label for="rightId">向右侧移动组件ID</label>
                                 <select id="rightId">
-                                    <option value="">请选择</option>
+                                    <option value="">{{= i18n.$t('user.please_select') }}</option>
                                 </select>
                             </div>
                             <div class="form-item">
                                 <label for="upId">向上侧移动组件ID</label>
                                 <select id="upId">
-                                    <option value="">请选择</option>
+                                    <option value="">{{= i18n.$t('user.please_select') }}</option>
                                 </select>
                             </div>
                             <div class="form-item">
                                 <label for="downId">向下侧移动组件ID</label>
                                 <select id="downId">
-                                    <option value="">请选择</option>
+                                    <option value="">{{= i18n.$t('user.please_select') }}</option>
                                 </select>
                             </div>
                             <div class="form-item">

demoHtml/flex/js/i18n.js

@@ -18,6 +18,12 @@ var userLangConfig = {
             font_size: '文字大小',
             font_color: '文字颜色',
             text_content: '文字内容',
+            // 图片组件默认名称
+            image_default_name: '图片',
+            // 文本组件默认名称
+            text_default_name: '文本',
+            // 文本组件默认内容
+            text_default_content: '文本',
         },
     },
     en: {
@@ -43,6 +49,12 @@ var userLangConfig = {
             font_size: 'font size',
             font_color: 'font color',
             text_content: 'text content',
+            // 图片组件默认名称
+            image_default_name: 'image',
+            // 文本组件默认名称
+            text_default_name: 'text',
+            // 文本组件默认内容
+            text_default_content: 'text',
         },
     },
 };

demoHtml/flex/js/index.js

@@ -9,6 +9,7 @@
     };
     let currentComponent = null;
     let cellHeight = 60;
+    let locale = 'en';
 
     var initGridStack = () => {
         // 让gridstack知道如何渲染，组件children中的content直接渲染html
@@ -21,7 +22,7 @@
                 w: 2,
                 h: 2,
                 type: 'image',
-                name: '图片',
+                name: userLangConfig[locale].user.image_default_name,
                 background: '#fff',
                 image: '',
                 eventsType: 'click',
@@ -41,11 +42,11 @@
                 h: 1,
                 type: 'text',
                 childrenType: '',
-                name: '文本',
+                name: userLangConfig[locale].user.text_default_name,
                 background: '#fff',
                 fontSize: 14,
                 color: '#333',
-                text: '文本',
+                text: userLangConfig[locale].user.text_default_content,
                 fontWeight: 'normal',
                 eventsType: 'click',
                 eventsAction: '',
@@ -225,13 +226,13 @@
     };
 
     var setMoveComponentHtml = function (idName, component, allComponents) {
-        let componentsHtml = [{ value: '', text: '请选择' }];
+        let el = $(`#${idName}`);
+        let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
         allComponents
             .filter((item) => item.id !== component.id)
             .map((item) => {
                 componentsHtml.push({ value: item.id, text: `${item.name}(${item.id})`, selected: item.id === component[idName] });
             });
-        let el = $(`#${idName}`);
         el.empty();
         componentsHtml.forEach((item) => {
             el.append(
@@ -637,9 +638,10 @@
     var i18n = function () {
         return new Promise((resolve) => {
             setTimeout(() => {
+                locale = 'en';
                 // 设置语言
                 layui.i18n.set({
-                    locale: 'en',
+                    locale: locale,
                     messages: {
                         // 扩展其他语言包
                         en: userLangConfig.en,