diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css index 707fc3d..90e7377 100644 --- a/demoHtml/flex/css/index.css +++ b/demoHtml/flex/css/index.css @@ -49,6 +49,10 @@ html { border-bottom: 2px solid #667eea; } +.panel-title span:nth-child(2) { + display: none; +} + /* 组件面板 */ #components-panel { position: relative; diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html index 3c1fff1..93e7532 100644 --- a/demoHtml/flex/index.html +++ b/demoHtml/flex/index.html @@ -19,212 +19,218 @@ rel="stylesheet" href="./css/index.css" /> + + - -
- -
- -
-
- 组件列表 -
-
-
-
- +
+ +
+
+ {{= i18n.$t('user.component_list') }} +
+
+
+
+ +
+
+
+
{{= i18n.$t('user.component_text') }}
-
-
文本
-
-
-
-
- - 拖动删除 -
-
- - 保存布局 -
-
-
- -
-
- - +
+ + {{= i18n.$t('user.delete_btn') }} +
+
+ + {{= i18n.$t('user.save_btn') }} +
+
- +
+
+ + +
+ -
-
-
- -
-
- 组件属性 +
+
+
+ +
+
+ {{= i18n.$t('user.component_prop') }} + {{= i18n.$t('user.page_prop') }} +
+
{{= i18n.$t('user.empty_component') }}
+
-
请选择组件
-
-
+ diff --git a/demoHtml/flex/js/i18n.js b/demoHtml/flex/js/i18n.js new file mode 100644 index 0000000..b5f0dd7 --- /dev/null +++ b/demoHtml/flex/js/i18n.js @@ -0,0 +1,48 @@ +var userLangConfig = { + zhCN: { + user: { + component_list: '组件列表', + component_text: '文本', + delete_btn: '拖动删除', + save_btn: '保存布局', + welcome_page: '欢迎页', + main_page: '首页', + component_prop: '组件属性', + page_prop: '页面属性', + empty_component: '请选择组件', + component_child_type: '组件子类型', + component_name: '组件名称', + background_image: '背景图片', + please_select: '请选择', + background: '背景颜色', + font_size: '文字大小', + font_color: '文字颜色', + text_content: '文字内容', + }, + }, + en: { + colorpicker: { + clear: 'clear', + confirm: 'confirm', + }, + user: { + component_list: 'component list', + component_text: 'text', + delete_btn: 'drag delete', + save_btn: 'save layout', + welcome_page: 'welcome page', + main_page: 'main page', + component_prop: 'component property', + page_prop: 'page property', + empty_component: 'please select component', + component_child_type: 'component child type', + component_name: 'component name', + background_image: 'background image', + please_select: 'please select', + background: 'background color', + font_size: 'font size', + font_color: 'font color', + text_content: 'text content', + }, + }, +}; diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js index 2899e5f..81b0007 100644 --- a/demoHtml/flex/js/index.js +++ b/demoHtml/flex/js/index.js @@ -10,55 +10,57 @@ let currentComponent = null; let cellHeight = 60; - // 让gridstack知道如何渲染，组件children中的content直接渲染html - GridStack.renderCB = function (el, w) { - el.innerHTML = w.content; - }; + var initGridStack = () => { + // 让gridstack知道如何渲染，组件children中的content直接渲染html + GridStack.renderCB = function (el, w) { + el.innerHTML = w.content; + }; - GridStack.setupDragIn('#components-panel .component-item', undefined, [ - { - w: 2, - h: 2, - type: 'image', - name: '图片', - background: '#fff', - image: '', - eventsType: 'click', - eventsAction: '', - defaultFocus: false, - leftId: '', - rightId: '', - upId: '', - downId: '', - focusedStyle_background: '', - focusedStyle_border_width: 0, - focusedStyle_border_color: '', - focusedStyle_scale: 1, - }, - { - w: 2, - h: 1, - type: 'text', - childrenType: '', - name: '文本', - background: '#fff', - fontSize: 14, - color: '#333', - text: '文本', - fontWeight: 'normal', - eventsType: 'click', - eventsAction: '', - defaultFocus: false, - leftId: '', - rightId: '', - upId: '', - downId: '', - focusedStyle_background: '', - focusedStyle_border_width: 0, - focusedStyle_border_color: '', - focusedStyle_scale: 1, - }, - ]); + GridStack.setupDragIn('#components-panel .component-item', undefined, [ + { + w: 2, + h: 2, + type: 'image', + name: '图片', + background: '#fff', + image: '', + eventsType: 'click', + eventsAction: '', + defaultFocus: false, + leftId: '', + rightId: '', + upId: '', + downId: '', + focusedStyle_background: '', + focusedStyle_border_width: 0, + focusedStyle_border_color: '', + focusedStyle_scale: 1, + }, + { + w: 2, + h: 1, + type: 'text', + childrenType: '', + name: '文本', + background: '#fff', + fontSize: 14, + color: '#333', + text: '文本', + fontWeight: 'normal', + eventsType: 'click', + eventsAction: '', + defaultFocus: false, + leftId: '', + rightId: '', + upId: '', + downId: '', + focusedStyle_background: '', + focusedStyle_border_width: 0, + focusedStyle_border_color: '', + focusedStyle_scale: 1, + }, + ]); + }; // 生成唯一id var generateUniqueId = function () { @@ -310,7 +312,13 @@ //将当前选中组件的属性显示在右侧列表中 var setCurrentComponentProps = function (component) { // 设置标题 - $('#props-panel .panel-title span').text(isScreen(component.type) ? '画布属性' : '组件属性'); + if (isScreen(component.type)) { + $('#component-prop').hide(); + $('#page-prop').show(); + } else { + $('#component-prop').show(); + $('#page-prop').hide(); + } const form = $('#props-panel').find('form'); if (component.hasOwnProperty('childrenType')) { @@ -626,17 +634,44 @@ } }; + var i18n = function () { + return new Promise((resolve) => { + setTimeout(() => { + // 设置语言 + layui.i18n.set({ + locale: 'en', + messages: { + // 扩展其他语言包 + en: userLangConfig.en, + 'zh-CN': userLangConfig.zhCN, + }, + }); + // 渲染页面模板 + const template = $('#template').html(); + const html = layui.laytpl(template, { tagStyle: 'modern' }).render(); + $('#root').html(html); + resolve(); + }, 500); + }); + }; + /** 执行方法 */ $(function () { - init('welcome', welcome); - init('main', main); - // 调用绑定 - bindComponentEvents(); - // 处理Tab切换 - handleTabSwitch(); - // 处理保存按钮 - handleSaveClick(); - // 处理画布点击事件 - handleCanvasClick(); + (async function () { + // 国际化 + await i18n(); + // 初始化 + initGridStack(); + init('welcome', welcome); + init('main', main); + // 调用绑定 + bindComponentEvents(); + // 处理Tab切换 + handleTabSwitch(); + // 处理保存按钮 + handleSaveClick(); + // 处理画布点击事件 + handleCanvasClick(); + })(); }); })();