feat(i18n) i18n for homepage

ly525
1 parent 90d0b6a4
Showing 8 changed files with 54 additions and 36 deletions
front-end/h5/src/components/common/header/links.js
front-end/h5/src/components/common/header/logo.js
front-end/h5/src/views/work-manager/form-stat/column.js
front-end/h5/src/views/work-manager/form-stat/detail.vue
front-end/h5/src/views/work-manager/form-stat/index.vue
front-end/h5/src/views/work-manager/index.vue
front-end/h5/src/views/work-manager/list.vue
front-end/h5/src/views/work-manager/templates.vue
@@ -15,16 +15,17 @@ export default {
         <a-menu-item key="dingtalk" >
           <a-popover title="👨🏻‍💻👩🏻‍💻欢迎加入鲁班-H5交流群">
             <template slot="content">
-              <p>For users in other languages, <br />please keep using Github issue tracker. 🤟 </p>
+              <p>For users in other languages(not zh-CN), <br />please keep using Github issue tracker. 🤟 </p>
               <p>扫描二维码加入 钉钉 讨论组</p>
               <img src="https://user-images.githubusercontent.com/12668546/61447488-a379f700-a983-11e9-9956-139352a2585d.png" width="200" />
               <p>因为微信群二维码会过期，<br />请前往<a href="https://github.com/ly525/luban-h5/issues/57" target="_blank" rel="noopener">微信群和QQ群</a> 查看</p>
             </template>
-            <span style={{ color: 'white', lineHeight: '64px', height: '64px', display: 'inline-block' }}><a-icon type="qrcode" />交流群</span>
+            <span style={{ color: 'white', lineHeight: '64px', height: '64px', display: 'inline-block' }}><a-icon type="qrcode" />{this.$t('header.chat')}</span>
           </a-popover>
         </a-menu-item>
         <a-menu-item key="document">
-          <a href="https://ly525.github.io/luban-h5" target="_blank" rel="noopener" style={{ color: 'white' }}><a-icon type="read" />文档</a>
+          {/* <a href="https://ly525.github.io/luban-h5" target="_blank" rel="noopener" style={{ color: 'white' }}><a-icon type="read" />文档</a> */}
+          <a href="https://ly525.github.io/luban-h5" target="_blank" rel="noopener" style={{ color: 'white' }}><a-icon type="read" />{this.$t('header.chineseDocument')}</a>
         </a-menu-item>
         <a-menu-item key="document-en">
           <a href="https://www.yuque.com/liuyan-ew1qk/oh5d0n?language=en-us" target="_blank" rel="noopener" style={{ color: 'white' }}><a-icon type="read" />Document(En)</a>
 export default {
   render () {
-    return <div class="logo"><router-link to={{ path: '/' }}>鲁班 H5</router-link></div>
+    return <div class="logo"><router-link to={{ path: '/' }}>
+      {/* 鲁班 H5 Luban H5 */}
+      {this.$t('app.title')}
+    </router-link></div>
   }
 }
 export const columns = [
   {
-    title: '标题',
+    title: 'Title',
     dataIndex: 'title',
     key: 'title'
   },
@@ -15,7 +15,7 @@ export const columns = [
     key: 'uv'
   },
   {
-    title: '表单数',
+    title: 'Form Count',
     key: 'formCount',
     dataIndex: 'formCount'
   },
@@ -81,7 +81,8 @@ export default {
       <div class="works-wrapper">
         <a-table columns={this.columns} dataSource={this.rows} row-key="id" scopedSlots={{
           action: function (props) {
-            return [<router-link to={{ name: 'stat-detail', params: { id: props.id } }} >查看数据</router-link>]
+            // 查看数据
+            return [<router-link to={{ name: 'stat-detail', params: { id: props.id } }} >{this.$t('basicData.viewData')}</router-link>]
           }
         }}>
         </a-table>
@@ -37,11 +37,13 @@ export default {
     }
   },
   render (h) {
+    const that = this
     return (
       <div class="works-wrapper" style="background-color:white;padding: 12px;margin-top: 24px;">
         <a-table size="middle" columns={columns} dataSource={this.computedWorks} row-key="id" scopedSlots={{
           action: function (props) {
-            return [<router-link to={{ name: 'stat-detail', params: { id: props.id } }} >查看数据</router-link>]
+            // 查看数据
+            return [<router-link to={{ name: 'stat-detail', params: { id: props.id } }} >{that.$t('basicData.viewData')}</router-link>]
           }
         }}>
         </a-table>
@@ -4,10 +4,12 @@
 import '@/components/core/styles/index.scss'
 import LogoOfHeader from '@/components/common/header/logo.js'
 import ExternalLinksOfHeader from '@/components/common/header/links.js'
+import LangSelect from '@/components/common/header/LangSelect.vue'
  
 const sidebarMenus = [
   {
     label: '我的作品',
+    i18nLabel: 'sidebar.myWorks',
     value: 'workManager',
     antIcon: 'bars',
     key: '1',
@@ -15,12 +17,14 @@ const sidebarMenus = [
   },
   {
     label: '数据中心',
+    i18nLabel: 'sidebar.dataCenter',
     value: 'dataCenter',
     antIcon: 'snippets',
     key: '2',
     children: [
       {
         label: '基础数据',
+        i18nLabel: 'sidebar.basicData',
         value: 'basicData',
         antIcon: 'snippets',
         key: '2-1',
@@ -30,12 +34,14 @@ const sidebarMenus = [
   },
   {
     label: '模板中心',
+    i18nLabel: 'sidebar.templateCenter',
     value: 'templateCenter',
     antIcon: 'snippets',
     key: '3',
     children: [
       {
-        label: '免费模板',
+        label: '模板列表',
+        i18nLabel: 'sidebar.freeTemplates',
         value: 'freeTemplates',
         antIcon: 'snippets',
         key: '3-1',
@@ -45,6 +51,7 @@ const sidebarMenus = [
   },
   {
     label: '账号中心',
+    i18nLabel: 'sidebar.accountCenter',
     value: 'freeTemplate',
     antIcon: 'appstore',
     key: '4'
@@ -56,17 +63,20 @@ export default {
     // PreView,
     // Sidebar
     LogoOfHeader,
-    ExternalLinksOfHeader
+    ExternalLinksOfHeader,
+    LangSelect
   },
   methods: {
     renderSidebar (menus) {
-      const renderLabel = menu => menu.routerName ? <router-link class="default-router-link" to={{ name: menu.routerName }}>{menu.label}</router-link> : menu.label
+      // const renderLabel = menu => menu.routerName ? <router-link class="default-router-link" to={{ name: menu.routerName }}>{menu.label}</router-link> : menu.label
+      const renderLabel = menu => menu.routerName ? <router-link class="default-router-link" to={{ name: menu.routerName }}>{this.$t(menu.i18nLabel)}</router-link> : this.$t(menu.i18nLabel)
  
       return menus.map(menu => (
         menu.children
           ? (
             <a-sub-menu key={menu.key}>
-              <span slot="title"><a-icon type={menu.antIcon} />{menu.label}</span>
+              {/** <span slot="title"><a-icon type={menu.antIcon} />{menu.label}</span> */}
+              <span slot="title"><a-icon type={menu.antIcon} />{this.$t(menu.i18nLabel)}</span>
               {
                 (menu.children).map(submenu => (
                   <a-menu-item key={submenu.key}>{renderLabel(submenu)}</a-menu-item>
@@ -89,6 +99,7 @@ export default {
       <a-layout id="luban-work-manager-layout" style={{ height: '100vh' }}>
         <a-layout-header class="header">
           <LogoOfHeader />
+          <LangSelect />
           {/* TODO we can show the plugins shortcuts here */}
           <a-dropdown>
             <a-menu slot="overlay" onClick={() => {}}>
@@ -116,7 +127,7 @@ export default {
               {this.renderSidebar(sidebarMenus)}
             </a-menu>
           </a-layout-sider>
-          <a-layout style="padding: 0 24px 24px">
+          <a-layout style="padding: 0 0 24px">
             <a-layout-content style={{ padding: '24px', minHeight: '280px' }}>
               <router-view />
             </a-layout-content>
@@ -45,13 +45,15 @@ const ListItemCard = {
           <CardCover qrcodeUrl={this.qrcodeUrl} coverImageUrl={this.work.cover_image_url} />
         </div>
         <template class="ant-card-actions" slot="actions">
-          <a-tooltip effect="dark" placement="bottom" title="编辑">
+          {/** 编辑 */}
+          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.edit')}>
             <router-link to={{ name: 'editor', params: { workId: this.work.id } }} target="_blank">
-              <a-icon type="edit" title="编辑"/>
+              <a-icon type="edit" title={this.$t('workCard.edit')}/>
             </router-link>
           </a-tooltip>
-          <a-tooltip effect="dark" placement="bottom" title="预览">
-            <a-icon type="eye" title="预览" onClick={this.handleClickPreview} />
+          {/** 预览 */}
+          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.preview')}>
+            <a-icon type="eye" title={this.$t('workCard.preview')} onClick={this.handleClickPreview} />
           </a-tooltip>
           {
             this.qrcodeUrl
@@ -69,8 +71,9 @@ const ListItemCard = {
             {this.work.title}({this.work.id})
           </div>
           <div slot="description" style="font-size: 12px;">
-            <div>描述：{this.work.description}</div>
-            <div>时间：{this.timeFmt(this.work.created_at)}</div>
+            {/** 描述 时间 */}
+            <div>{this.$t('workCard.description')}: {this.work.description}</div>
+            <div>{this.$t('workCard.createTime')}: {this.timeFmt(this.work.created_at)}</div>
           </div>
         </a-card-meta>
       </a-card>
@@ -80,14 +83,16 @@ const ListItemCard = {
  
 const AddNewCard = {
   functional: true,
-  render (h, { props }) {
+  render (h, { props, parent }) {
     return (
       <a-card hoverable>
         <div slot="cover" class="flex-center" style="height: 305px;background: #f7f5f557;" onClick={props.handleCreate}>
           <a-icon type="plus" />
         </div>
         <template class="ant-card-actions" slot="actions">
-          <span onClick={props.handleCreate}>创建新作品</span>
+          {/** 创建新作品 */}
+          {/** https://kazupon.github.io/vue-i18n/guide/component.html#translation-in-functional-component */}
+          <span onClick={props.handleCreate}>{parent.$t('workCard.createNewWork')}</span>
         </template>
       </a-card>
     )
@@ -121,7 +126,7 @@ export default {
   render (h) {
     return (
       <div class="works-wrapper">
-        <a-row gutter={48}>
+        <a-row gutter={12}>
           <a-col span={6} style="margin-bottom: 10px;">
             <AddNewCard handleCreate={this.createWork} />
           </a-col>
@@ -49,20 +49,14 @@ const ListItemCard = {
           <CardCover qrcodeUrl={this.qrcodeUrl} coverImageUrl={this.work.cover_image_url} />
         </div>
         <template class="ant-card-actions" slot="actions">
-          {/**
-          <router-link to={{ name: 'editor', params: { workId: this.work.id } }} target="_blank">
-            <a-tooltip effect="dark" placement="bottom" title="立即使用">
-              <a-icon type="plus-square" title="立即使用"/>
-            </a-tooltip>
-          </router-link>
-          */}
-          <a-tooltip effect="dark" placement="bottom" title="立即使用">
-            <a-icon type="plus-square" title="立即使用" onClick={() => {
+          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.useNow')}>
+            <a-icon type="plus-square" title={this.$t('workCard.useNow')} onClick={() => {
               this.handleUseTemplate(this.work)
             }} />
           </a-tooltip>
-          <a-tooltip effect="dark" placement="bottom" title="预览">
-            <a-icon type="eye" title="预览" onClick={this.handleClickPreview} />
+          {/** 预览 */}
+          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.preview')}>
+            <a-icon type="eye" title={this.$t('workCard.preview')} onClick={this.handleClickPreview} />
           </a-tooltip>
           {
             this.qrcodeUrl
@@ -80,8 +74,9 @@ const ListItemCard = {
             {this.work.title}({this.work.id})
           </div>
           <div slot="description" style="font-size: 12px;">
-            <div>描述：{this.work.description}</div>
-            <div>时间：{this.timeFmt(this.work.created_at)}</div>
+            {/** 描述 时间 */}
+            <div>{this.$t('workCard.description')}: {this.work.description}</div>
+            <div>{this.$t('workCard.createTime')}: {this.timeFmt(this.work.created_at)}</div>
           </div>
         </a-card-meta>
       </a-card>
@@ -120,7 +115,7 @@ export default {
   render (h) {
     return (
       <div class="works-wrapper">
-        <a-row gutter={24}>
+        <a-row gutter={12}>
           {
             this.fetchWorkTemplates_loading
               ? <a-col span={24} style="margin-bottom: 10px;text-align: center;height: 355px;line-height: 355px;border-bottom: 1px solid #ebedf0;background: rgba(255, 255, 255, 0.5);">