Skip to content

Commit

Permalink
feat(i18n) i18n for homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@ly525
ly525 committed Sep 16, 2019
1 parent 90d0b6a commit 3258468
Show file tree
Hide file tree
Showing 8 changed files with 54 additions and 36 deletions.
7 changes: 4 additions & 3 deletions front-end/h5/src/components/common/header/links.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion front-end/h5/src/components/common/header/logo.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
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>
}
}
4 changes: 2 additions & 2 deletions front-end/h5/src/views/work-manager/form-stat/column.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const columns = [
{
title: '标题',
title: 'Title',
dataIndex: 'title',
key: 'title'
},
Expand All @@ -15,7 +15,7 @@ export const columns = [
key: 'uv'
},
{
title: '表单数',
title: 'Form Count',
key: 'formCount',
dataIndex: 'formCount'
},
Expand Down
3 changes: 2 additions & 1 deletion front-end/h5/src/views/work-manager/form-stat/detail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion front-end/h5/src/views/work-manager/form-stat/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
21 changes: 16 additions & 5 deletions front-end/h5/src/views/work-manager/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,27 @@
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',
routerName: 'work-manager-list'
},
{
label: '数据中心',
i18nLabel: 'sidebar.dataCenter',
value: 'dataCenter',
antIcon: 'snippets',
key: '2',
children: [
{
label: '基础数据',
i18nLabel: 'sidebar.basicData',
value: 'basicData',
antIcon: 'snippets',
key: '2-1',
Expand All @@ -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',
Expand All @@ -45,6 +51,7 @@ const sidebarMenus = [
},
{
label: '账号中心',
i18nLabel: 'sidebar.accountCenter',
value: 'freeTemplate',
antIcon: 'appstore',
key: '4'
Expand All @@ -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>
Expand All @@ -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={() => {}}>
Expand Down Expand Up @@ -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>
Expand Down
23 changes: 14 additions & 9 deletions front-end/h5/src/views/work-manager/list.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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>
)
Expand Down Expand Up @@ -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>
Expand Down
23 changes: 9 additions & 14 deletions front-end/h5/src/views/work-manager/templates.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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);">
Expand Down

0 comments on commit 3258468

Please sign in to comment.