feat: 拖拽布局-国际化

demoHtml/flex/css/index.css

@@ -53,6 +53,15 @@ html {
     display: none;
 }
 
+.template-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.template-title > span {
+    width: 100px;
+}
+
 /* 组件面板 */
 #components-panel {
     position: relative;
@@ -365,3 +374,8 @@ form {
 .layui-anim {
     box-sizing: unset;
 }
+.layui-input:focus,
+.layui-textarea:focus {
+    border-color: rgb(102, 126, 234) !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.08);
+}

demoHtml/flex/index.html

@@ -99,6 +99,15 @@
                     </div>
                     <!-- 当前选中组件属性 -->
                     <div id="props-panel">
+                        <div class="panel-title template-title">
+                            <span>{{= i18n.$t('user.template_name') }}</span>
+                            <input
+                                id="templateName"
+                                type="text"
+                                placeholder="{{= i18n.$t('user.please_input') }}"
+                                class="layui-input"
+                            />
+                        </div>
                         <div class="panel-title">
                             <span id="component-prop">{{= i18n.$t('user.component_prop') }}</span>
                             <span id="page-prop">{{= i18n.$t('user.page_prop') }}</span>

demoHtml/flex/js/i18n.js

@@ -1,5 +1,5 @@
 var userLangConfig = {
-    zhCN: {
+    'zh-CN': {
         user: {
             // 图片组件默认名称
             image_default_name: '图片',
@@ -13,6 +13,7 @@ var userLangConfig = {
             save_btn: '保存布局',
             welcome_page: '欢迎页',
             main_page: '首页',
+            template_name: '模板名称',
             component_prop: '组件属性',
             page_prop: '页面属性',
             empty_component: '请选择组件',
@@ -20,6 +21,7 @@ var userLangConfig = {
             component_name: '组件名称',
             background_image: '背景图片',
             please_select: '请选择',
+            please_input: '请输入',
             background: '背景颜色',
             font_size: '文字大小',
             font_color: '文字颜色',
@@ -56,6 +58,7 @@ var userLangConfig = {
             save_btn: 'save layout',
             welcome_page: 'welcome page',
             main_page: 'main page',
+            template_name: 'template name',
             component_prop: 'component property',
             page_prop: 'page property',
             empty_component: 'please select component',
@@ -63,6 +66,7 @@ var userLangConfig = {
             component_name: 'component name',
             background_image: 'background image',
             please_select: 'please select',
+            please_input: 'please input',
             background: 'background color',
             font_size: 'font size',
             font_color: 'font color',

demoHtml/flex/js/index.js

@@ -638,14 +638,14 @@
     var i18n = function () {
         return new Promise((resolve) => {
             setTimeout(() => {
-                locale = 'en';
+                locale = 'zh-CN';
                 // 设置语言
                 layui.i18n.set({
                     locale: locale,
                     messages: {
                         // 扩展其他语言包
                         en: userLangConfig.en,
-                        'zh-CN': userLangConfig.zhCN,
+                        'zh-CN': userLangConfig['zh-CN'],
                     },
                 });
                 // 渲染页面模板