feat: i18n for editor

ly525
1 parent 3258468e
Showing 11 changed files with 244 additions and 46 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/edit-panel/action.js
front-end/h5/src/components/core/editor/edit-panel/animation.js
front-end/h5/src/components/core/editor/edit-panel/props.js
front-end/h5/src/components/core/editor/edit-panel/script.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/editor/shortcuts-panel/index.js
front-end/h5/src/locales/lang/en-US.js
front-end/h5/src/locales/lang/zh-CN.js
front-end/h5/src/mixins/load-plugins.js
front-end/h5/src/views/work-manager/index.vue
@@ -3,26 +3,32 @@ import Shape from &#39;../../support/shape&#39;
  
 const contextmenuOptions = [
   {
+    i18nLabel: 'editor.centerPanel.contextMenu.copy',
     label: '复制',
     value: 'copy'
   },
   {
+    i18nLabel: 'editor.centerPanel.contextMenu.delete',
     label: '删除',
     value: 'delete'
   },
   {
+    i18nLabel: 'editor.centerPanel.contextMenu.moveToTop',
     label: '置顶',
     value: 'move2Top'
   },
   {
+    i18nLabel: 'editor.centerPanel.contextMenu.moveToBottom',
     label: '置底',
     value: 'move2Bottom'
   },
   {
+    i18nLabel: 'editor.centerPanel.contextMenu.moveUp',
     label: '上移',
     value: 'addZindex'
   },
   {
+    i18nLabel: 'editor.centerPanel.contextMenu.moveDown',
     label: '下移',
     value: 'minusZindex'
   }
@@ -231,7 +237,7 @@ export default {
                   zIndex: 999
                 }}
               >
-                { contextmenuOptions.map(option => <a-menu-item key={option.value} data-command={option.value}>{option.label}</a-menu-item>) }
+                { contextmenuOptions.map(option => <a-menu-item key={option.value} data-command={option.value}>{this.$t(option.i18nLabel)}</a-menu-item>) }
               </a-menu>
               : null
           }
@@ -16,7 +16,7 @@ export default {
   created () {},
   render (h) {
     const ele = this.editingElement
-    if (!ele) return (<span>请先选择一个元素</span>)
+    if (!ele) return (<span>{this.$t('editor.editPanel.common.empty')}</span>)
     return (<div>
       TODO
     </div>)
@@ -106,16 +106,17 @@ export default {
     renderAnimationOptions (animationOption) {
       return (
         <a-form layout="horizontal">
-          <a-form-item label="动画类型" labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }}>
+          <a-form-item label={this.$t('editor.editPanel.animation.type')} labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }}>
             {/* <a-popover placement="left" title="动画列表" trigger="click">
               <template slot="content">
                 {this.renderAvaiableAnimations()}
               </template>
               <a-button type="primary">动画列表</a-button>
             </a-popover> */}
-            <a-button type="link" size="small" icon="ordered-list" onClick={() => { this.drawerVisible = true }}>动画列表</a-button>
+            {/* 动画列表 */}
+            <a-button type="link" size="small" icon="ordered-list" onClick={() => { this.drawerVisible = true }}>{this.$t('editor.editPanel.animation.list')}</a-button>
           </a-form-item>
-          <a-form-item label="动画时间" labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
+          <a-form-item label={this.$t('editor.editPanel.animation.duration')} labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
             <a-form-item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
               <a-slider
                 defaultValue={2}
@@ -132,7 +133,7 @@ export default {
                 min={0}
                 max={20}
                 size="small"
-                formatter={value => `${value}秒`}
+                formatter={value => `${value}秒(s)`}
                 value={animationOption.duration}
                 onChange={value => {
                   animationOption.duration = value
@@ -140,7 +141,7 @@ export default {
               />
             </a-form-item>
           </a-form-item>
-          <a-form-item label="延迟时间" labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
+          <a-form-item label={this.$t('editor.editPanel.animation.type')} labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
             <a-form-item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
               <a-slider
                 defaultValue={2}
@@ -157,7 +158,7 @@ export default {
                 min={0}
                 max={20}
                 size="small"
-                formatter={value => `${value}秒`}
+                formatter={value => `${value}秒(s)`}
                 value={animationOption.delay}
                 onChange={value => {
                   animationOption.delay = value
@@ -165,7 +166,7 @@ export default {
               />
             </a-form-item>
           </a-form-item>
-          <a-form-item label="运行次数" labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
+          <a-form-item label={this.$t('editor.editPanel.animation.iteration')} labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
             <a-form-item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
               <a-slider
                 defaultValue={2}
@@ -182,7 +183,7 @@ export default {
                 min={0}
                 max={20}
                 size="small"
-                formatter={value => `${value}次`}
+                formatter={value => `${value}次(times)`}
                 value={animationOption.interationCount}
                 onChange={value => {
                   animationOption.interationCount = value
@@ -190,7 +191,7 @@ export default {
               />
             </a-form-item>
           </a-form-item>
-          <a-form-item label="循环播放" labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
+          <a-form-item label={this.$t('editor.editPanel.animation.inifinite')} labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
             <a-switch
               value={animationOption.infinite}
               onChange={value => {
@@ -204,12 +205,13 @@ export default {
   },
   render (h) {
     const ele = this.editingElement
-    if (!ele) return (<span>请先选择一个元素</span>)
+    if (!ele) return (<span>{this.$t('editor.editPanel.common.empty')}</span>)
     return (
       <div class="main-animate widget" id="animation-edit-panel">
         <a-button-group>
-          <a-button type="primary" onClick={this.addAnimation}><a-icon type="plus" />添加动画</a-button>
-          <a-button type="primary" onClick={this.runAnimate}>运行动画<a-icon type="right-circle" /></a-button>
+          {/* 添加动画、运行动画 */}
+          <a-button type="primary" onClick={this.addAnimation}><a-icon type="plus" />{this.$t('editor.editPanel.animation.add')}</a-button>
+          <a-button type="primary" onClick={this.runAnimate}>{this.$t('editor.editPanel.animation.run')}<a-icon type="right-circle" /></a-button>
         </a-button-group>
         {
           // Q：这边为何这样写：this.animationQueue.length && ?
@@ -228,7 +230,9 @@ export default {
               this.animationQueue.map((addedAnimation, index) => (
                 <a-collapse-panel key={`${index}`}>
                   <template slot="header">
-                    <span>动画{index + 1}</span>
+                    {/* #!zh: 动画{index + 1} */}
+                    {/* #!en: Animation{index + 1}</span> */}
+                    <span>{this.$t('editor.editPanel.animation.title', { index: index + 1 })}</span>
                     <a-tag color="orange">{animationValue2Name[addedAnimation.type] || addedAnimation.type }</a-tag>
                     <a-icon type="delete" onClick={() => this.deleteAnimate(index)} title="删除动画"></a-icon>
                   </template>
@@ -69,7 +69,7 @@ export default {
   },
   render (h) {
     const ele = this.editingElement
-    if (!ele) return (<span>请先选择一个元素</span>)
+    if (!ele) return (<span>{this.$t('editor.editPanel.common.empty')}</span>)
     this.mixinEnhancedPropsEditor(ele)
     return this.renderPropsEditorPanel(h, ele)
   }
@@ -46,7 +46,7 @@ export default {
   },
   render (h) {
     const ele = this.editingElement
-    if (!ele) return (<span>请先选择一个元素</span>)
+    if (!ele) return (<span>{this.$t('editor.editPanel.common.empty')}</span>)
     return <div>
       <a-button onClick={this.mixinScript} disabled>使用脚本</a-button>
       <div style={{ margin: '20px' }}></div>
@@ -20,16 +20,19 @@ import LangSelect from &#39;@/components/common/header/LangSelect.vue&#39;
  
 const sidebarMenus = [
   {
+    i18nLabel: 'editor.sidebar.components',
     label: '组件列表',
     value: 'pluginList',
     antIcon: 'bars'
   },
   {
+    i18nLabel: 'editor.sidebar.pages',
     label: '页面管理',
     value: 'pageManagement',
     antIcon: 'snippets'
   },
   {
+    i18nLabel: 'editor.sidebar.templates',
     label: '免费模板',
     value: 'freeTemplate',
     antIcon: 'appstore'
@@ -38,30 +41,35 @@ const sidebarMenus = [
  
 const fixedTools = [
   {
+    i18nTooltip: 'editor.fixedTool.undo',
     'tooltip': '撤消', // TODO 支持快捷键
     'text': '撤消',
     'icon': 'mail-reply',
     'action': () => undoRedoHistory.undo()
   },
   {
+    i18nTooltip: 'editor.fixedTool.redo',
     'tooltip': '恢复',
     'text': '恢复',
     'icon': 'mail-forward',
     'action': () => undoRedoHistory.redo()
   },
   {
+    i18nTooltip: 'editor.fixedTool.preview',
     'tooltip': '刷新预览',
     'text': '刷新预览',
     'icon': 'eye',
     'action': function () { this.previewVisible = true }
   },
   {
+    i18nTooltip: 'editor.fixedTool.copyCurrentPage',
     'tooltip': '复制当前页',
     'text': '复制当前页',
     'icon': 'copy',
     'action': function () { this.pageManager({ type: 'copy' }) }
   },
   {
+    i18nTooltip: 'editor.fixedTool.importPSD',
     'tooltip': '导入PSD',
     'text': 'Ps',
     'icon': '',
@@ -69,12 +77,14 @@ const fixedTools = [
     'disabled': true
   },
   {
+    i18nTooltip: 'editor.fixedTool.zoomOut',
     'tooltip': '放大画布',
     'text': '放大画布',
     'icon': 'plus',
     'action': function () { this.scaleRate += 0.25 }
   },
   {
+    i18nTooltip: 'editor.fixedTool.zoomIn',
     'tooltip': '缩小画布',
     'text': '缩小画布',
     'icon': 'minus',
@@ -139,15 +149,15 @@ export default {
           return (
             this.pages.map((page, index) => (
               <span style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0' }}>
-                <span>第{index + 1}页</span>
+                {/* #!en: Page<Index> */}
+                {/* #!zh: 第<Index>页面 */}
+                <span>{this.$t('editor.pageManager.title', { index })}</span>
                 <a-dropdown trigger={['hover']} placement='bottomCenter'>
-                  <a class="ant-dropdown-link" href="#">
-                    <a-icon type="down" />
-                  </a>
+                  <a class="ant-dropdown-link" href="#"><a-icon type="down" /></a>
                   <a-menu slot="overlay" onClick={({ key }) => { this.pageManager({ type: key }) }}>
-                    <a-menu-item key="add"><a-icon type="user" />新增页面</a-menu-item>
-                    <a-menu-item key="copy"><a-icon type="user" />复制页面</a-menu-item>
-                    <a-menu-item key="delete"><a-icon type="user" />删除页面</a-menu-item>
+                    <a-menu-item key="add"><a-icon type="user" />{this.$t('editor.pageManager.actions.add')}</a-menu-item>
+                    <a-menu-item key="copy"><a-icon type="user" />{this.$t('editor.pageManager.actions.copy')}</a-menu-item>
+                    <a-menu-item key="delete"><a-icon type="user" />{this.$t('editor.pageManager.actions.delete')}</a-menu-item>
                   </a-menu>
                 </a-dropdown>
               </span>
@@ -163,6 +173,7 @@ export default {
       <a-layout id="luban-editor-layout" style={{ height: '100vh' }}>
         <a-layout-header class="header">
           <LogoOfHeader />
+          <LangSelect style="float: right;cursor: pointer;" />
           {/* TODO we can show the plugins shortcuts here */}
           <a-menu
             theme="dark"
@@ -170,12 +181,14 @@ export default {
             defaultSelectedKeys={['2']}
             style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
           >
-            <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.previewVisible = true }}>预览</a-button></a-menu-item>
-            <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork({ isSaveCover: true })} loading={this.saveWork_loading || this.uploadWorkCover_loading}>保存</a-button></a-menu-item>
+            {/* 保存、预览、发布、设置为模板 */}
+            <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.previewVisible = true }}>{this.$t('editor.header.preview')}</a-button></a-menu-item>
+            <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork({ isSaveCover: true })} loading={this.saveWork_loading || this.uploadWorkCover_loading}>{this.$t('editor.header.save')}</a-button></a-menu-item>
             {/* <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item> */}
             <a-menu-item key="3" class="transparent-bg">
               <a-dropdown-button onClick={() => {}} size="small">
-                发布
+                {/* 发布 */}
+                {this.$t('editor.header.publish')}
                 <a-menu slot="overlay" onClick={({ key }) => {
                   switch (key) {
                     case 'setAsTemplate':
@@ -187,7 +200,8 @@ export default {
                 }}>
                   <a-menu-item key="setAsTemplate">
                     <a-spin spinning={this.setWorkAsTemplate_loading} size="small">
-                      <a-icon type="cloud-upload" />设置为模板
+                      {/* 设置为模板 */}
+                      <a-icon type="cloud-upload" />{this.$t('editor.header.setAsTemplate')}
                     </a-spin>
                   </a-menu-item>
                   {/* <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item> */}
@@ -197,7 +211,6 @@ export default {
             </a-menu-item>
           </a-menu>
           <ExternalLinksOfHeader />
-          <LangSelect />
         </a-layout-header>
         <a-layout>
           <a-layout-sider width="160" style="background: #fff" collapsed>
@@ -211,7 +224,8 @@ export default {
                 sidebarMenus.map(menu => (
                   <a-menu-item key={menu.value}>
                     <a-icon type={menu.antIcon} />
-                    <span>{menu.label}</span>
+                    {/* <span>{menu.label}</span> */}
+                    <span>{this.$t(menu.i18nLabel)}</span>
                   </a-menu-item>
                 ))
               }
@@ -234,8 +248,9 @@ export default {
                     }
                   }}
                 >
-                  <a-radio-button label={false} value={false}>编辑模式</a-radio-button>
-                  <a-radio-button label={true} value={true}>预览模式</a-radio-button>
+                  {/* 编辑模式、预览模式 */}
+                  <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button>
+                  <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
                 </a-radio-group>
               </div>
               <div class='canvas-wrapper' style={{ transform: `scale(${this.scaleRate})` }}>
@@ -256,7 +271,8 @@ export default {
             <a-button-group style={{ display: 'flex', flexDirection: 'column' }}>
               {
                 fixedTools.map(tool => (
-                  <a-tooltip effect="dark" placement="left" title={tool.tooltip}>
+                  // <a-tooltip effect="dark" placement="left" title={tool.tooltip}>
+                  <a-tooltip effect="dark" placement="left" title={this.$t(tool.i18nTooltip)}>
                     <a-button block class="transparent-bg" type="link" size="small" style={{ height: '40px', color: '#000' }} onClick={() => tool.action && tool.action.call(this) } disabled={!!tool.disabled}>
                       { tool.icon ? <i class={['shortcut-icon', 'fa', `fa-${tool.icon}`]} aria-hidden='true'/> : tool.text }
                     </a-button>
@@ -278,17 +294,10 @@ export default {
                   ElementUI：label
                   Ant Design Vue：tab
               */}
-              <a-tab-pane key="属性">
-                <span slot="tab">
-                  <a-icon type="apple" />
-                  属性
-                </span>
-                {/* { this.renderPropsEditorPanel(h) } */}
-                <RenderPropsEditor/>
-              </a-tab-pane>
-              <a-tab-pane label="动画" key='动画' tab='动画'><RenderAnimationEditor /></a-tab-pane>
-              <a-tab-pane label="动作" key='动作' tab='动作'>{this.activeTabKey === '动作'}{ this.activeTabKey === '动作' && <RenderActoionEditor/> }</a-tab-pane>
-              <a-tab-pane label="脚本" key='脚本' tab='脚本'><RenderScriptEditor/></a-tab-pane>
+              <a-tab-pane key="属性"><span slot="tab"><a-icon type="apple" />{this.$t('editor.editPanel.tab.prop')}</span><RenderPropsEditor/></a-tab-pane>
+              <a-tab-pane label="动画" key='动画' tab={this.$t('editor.editPanel.tab.animation')}><RenderAnimationEditor /></a-tab-pane>
+              <a-tab-pane label="动作" key='动作' tab={this.$t('editor.editPanel.tab.action')}>{ this.activeTabKey === '动作' && <RenderActoionEditor/> }</a-tab-pane>
+              <a-tab-pane label="脚本" key='脚本' tab={this.$t('editor.editPanel.tab.script')}><RenderScriptEditor/></a-tab-pane>
             </a-tabs>
           </a-layout-sider>
  
 import ShortcutButton from './shortcut-button'
+import langMixin from '@/mixins/i18n'
 export default {
+  mixins: [langMixin],
   props: {
     pluginsList: {
       required: false,
@@ -91,7 +93,8 @@ export default {
             <a-col span={12} style={{ marginTop: '10px' }}>
               <ShortcutButton
                 clickFn={this.onClickShortcut.bind(this, plugin)}
-                title={plugin.title}
+                // title={plugin.title}
+                title={plugin.i18nTitle[this.currentLang] || plugin.title}
                 faIcon={plugin.icon}
                 disabled={plugin.disabled}
               />
@@ -26,5 +26,72 @@ export default {
   },
   basicData: {
     viewData: 'View Data'
+  },
+  editor: {
+    sidebar: {
+      components: 'Components',
+      pages: 'Pages',
+      templates: 'Templates'
+    },
+    pageManager: {
+      title: 'Page {index}',
+      action: {
+        add: 'Add Page',
+        copy: 'Copy Page',
+        delete: 'Delete Page'
+      }
+    },
+    header: {
+      preview: 'Preview',
+      save: 'Save',
+      publish: 'Publish',
+      setAsTemplate: 'Set As Template'
+    },
+
+    centerPanel: {
+      mode: {
+        edit: 'Edit',
+        preview: 'Preview'
+      },
+      contextMenu: {
+        copy: 'Copy',
+        delete: 'Delete',
+        moveToTop: 'Move To Top',
+        moveToBottom: 'Move To Bottom',
+        moveUp: 'Move Up',
+        moveDown: 'Move Down'
+      }
+    },
+    fixedTool: {
+      undo: 'Undo',
+      redo: 'Redo',
+      preview: 'Preview',
+      copyCurrentPage: 'CopyCurrentPage',
+      importPSD: 'Import PSD',
+      zoomIn: 'Zoom In',
+      zoomOut: 'Zoom Out'
+    },
+    editPanel: {
+      tab: {
+        prop: 'Prop',
+        animation: 'Animation',
+        action: 'Action',
+        script: 'Script'
+      },
+      animation: {
+        add: 'Add',
+        run: 'Run',
+        type: 'Type',
+        duration: 'Duration',
+        delay: 'Delay',
+        iteration: 'Iteration',
+        inifinite: 'Inifinite',
+        list: 'Select Animation',
+        title: 'Animation {index}'
+      },
+      common: {
+        empty: 'Select an element first please!'
+      }
+    }
   }
 }
 export default {
+  app: {
+    title: '鲁班 H5'
+  },
   header: {
     chineseDocument: '中文文档',
     englishDocument: '英文文档',
@@ -23,5 +26,71 @@ export default {
   },
   basicData: {
     viewData: 'View Data'
+  },
+  editor: {
+    sidebar: {
+      components: '组件列表',
+      pages: '页面管理',
+      templates: '模板'
+    },
+    pageManager: {
+      title: '第{index}页面',
+      action: {
+        add: '新增页面',
+        copy: '复制页面',
+        delete: '删除页面'
+      }
+    },
+    header: {
+      preview: '预览',
+      save: '保存',
+      publish: '发布',
+      setAsTemplate: '设置为模板'
+    },
+    centerPanel: {
+      mode: {
+        edit: 'Edit',
+        preview: 'Preview'
+      },
+      contextMenu: {
+        copy: '复制',
+        delete: '删除',
+        moveToTop: '置顶',
+        moveToBottom: '置底',
+        moveUp: '上移',
+        moveDown: '下移'
+      }
+    },
+    fixedTool: {
+      undo: '撤销',
+      redo: '重做',
+      preview: '预览',
+      copyCurrentPage: '复制当前页面',
+      importPSD: '导入PSD',
+      zoomIn: '缩小',
+      zoomOut: '放大'
+    },
+    editPanel: {
+      tab: {
+        prop: '属性',
+        animation: '动画',
+        action: '动作',
+        script: '脚本'
+      },
+      animation: {
+        add: '添加动画',
+        run: '运行动画',
+        type: '动画类型',
+        duration: '动画时长',
+        delay: '动画延时',
+        iteration: '运行次数',
+        inifinite: '循环播放',
+        list: '选择动画',
+        title: 'Animation {index}'
+      },
+      common: {
+        empty: 'Select an element first please!'
+      }
+    }
   }
 }
@@ -9,12 +9,20 @@ import LbpFormRadioGroup from &#39;../components/plugins/lbp-form-radio-group&#39;
 export const pluginsList = [
   {
     title: '图片',
+    i18nTitle: {
+      'en-US': 'Picture',
+      'zh-CN': '图片'
+    },
     icon: 'photo',
     component: LbpPicture,
     visible: true,
     name: LbpPicture.name
   },
   {
+    i18nTitle: {
+      'en-US': 'Text',
+      'zh-CN': '文字'
+    },
     title: '文字',
     icon: 'text-width',
     component: LbpText,
@@ -22,6 +30,10 @@ export const pluginsList = [
     name: LbpText.name
   },
   {
+    i18nTitle: {
+      'en-US': 'Button',
+      'zh-CN': '普通按钮'
+    },
     title: '普通按钮',
     icon: 'hand-pointer-o',
     component: LbpButton,
@@ -29,6 +41,10 @@ export const pluginsList = [
     name: LbpButton.name
   },
   {
+    i18nTitle: {
+      'en-US': 'Carousel',
+      'zh-CN': '轮播图'
+    },
     title: '轮播图',
     icon: 'photo',
     component: LbpFormRadioGroup,
@@ -37,6 +53,10 @@ export const pluginsList = [
     disabled: true
   },
   {
+    i18nTitle: {
+      'en-US': 'Map',
+      'zh-CN': '地图'
+    },
     title: '地图',
     icon: 'map-o',
     component: LbpFormRadioGroup,
@@ -45,6 +65,10 @@ export const pluginsList = [
     disabled: true
   },
   {
+    i18nTitle: {
+      'en-US': 'Video',
+      'zh-CN': '视频'
+    },
     title: '视频',
     icon: 'file-video-o',
     component: LbpFormRadioGroup,
@@ -60,6 +84,10 @@ export const pluginsList = [
   //   name: LbpVideo.name
   // },
   {
+    i18nTitle: {
+      'en-US': 'Form Input',
+      'zh-CN': '表单输入'
+    },
     title: '表单输入',
     icon: 'pencil-square-o',
     component: LbpFormInput,
@@ -67,6 +95,10 @@ export const pluginsList = [
     name: LbpFormInput.name
   },
   {
+    i18nTitle: {
+      'en-US': 'Form Submit',
+      'zh-CN': '表单提交'
+    },
     title: '表单提交',
     icon: 'hand-pointer-o',
     component: LbpFormButton,
@@ -81,6 +113,10 @@ export const pluginsList = [
   //   name: LbpFormRadio.name
   // },
   {
+    i18nTitle: {
+      'en-US': 'Form Checkbox',
+      'zh-CN': '表单多选'
+    },
     title: '表单单选',
     icon: 'check-square-o',
     component: LbpFormRadioGroup,
@@ -88,6 +124,10 @@ export const pluginsList = [
     name: LbpFormRadioGroup.name
   },
   {
+    i18nTitle: {
+      'en-US': 'Form Radio',
+      'zh-CN': '表单单选'
+    },
     title: '表单单选',
     icon: 'dot-circle-o',
     component: LbpFormRadioGroup,
@@ -99,7 +99,7 @@ export default {
       <a-layout id="luban-work-manager-layout" style={{ height: '100vh' }}>
         <a-layout-header class="header">
           <LogoOfHeader />
-          <LangSelect />
+          <LangSelect style="float: right;cursor: pointer;" />
           {/* TODO we can show the plugins shortcuts here */}
           <a-dropdown>
             <a-menu slot="overlay" onClick={() => {}}>