feat: i18n for editor

Author: ly525

front-end/h5/src/components/core/editor/canvas/edit.js

@@ -3,26 +3,32 @@ import Shape from '../../support/shape'
 
 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
           }

front-end/h5/src/components/core/editor/edit-panel/action.js

@@ -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>)

front-end/h5/src/components/core/editor/edit-panel/animation.js

@@ -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,15 +133,15 @@ export default {
                 min={0}
                 max={20}
                 size="small"
-                formatter={value => `${value}秒`}
+                formatter={value => `${value}秒(s)`}
                 value={animationOption.duration}
                 onChange={value => {
                   animationOption.duration = value
                 }}
               />
             </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,15 +158,15 @@ export default {
                 min={0}
                 max={20}
                 size="small"
-                formatter={value => `${value}秒`}
+                formatter={value => `${value}秒(s)`}
                 value={animationOption.delay}
                 onChange={value => {
                   animationOption.delay = value
                 }}
               />
             </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,15 +183,15 @@ export default {
                 min={0}
                 max={20}
                 size="small"
-                formatter={value => `${value}次`}
+                formatter={value => `${value}次(times)`}
                 value={animationOption.interationCount}
                 onChange={value => {
                   animationOption.interationCount = value
                 }}
               />
             </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>

front-end/h5/src/components/core/editor/edit-panel/props.js

@@ -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)
   }

front-end/h5/src/components/core/editor/edit-panel/script.js

@@ -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>

front-end/h5/src/components/core/editor/index.js

@@ -20,16 +20,19 @@ import LangSelect from '@/components/common/header/LangSelect.vue'
 
 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,43 +41,50 @@ 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': '',
     'action': '',
     '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,19 +173,22 @@ 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"
             mode="horizontal"
             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>
 

front-end/h5/src/components/core/editor/shortcuts-panel/index.js

@@ -1,5 +1,7 @@
 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}
               />