Skip to content

Commit

Permalink
feat(debug): support i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
erha19 committed Feb 12, 2019
1 parent df336ce commit 45270a2
Show file tree
Hide file tree
Showing 16 changed files with 394 additions and 155 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
<span class="iconfont icon-gaojishezhi">

</span>
环境设置
{{$t('navbar.environmentSetting')}}
</b-nav-item>
<b-nav-item class="wx-navbar-item operate" @click="toggleHelpSetting" :class="{'active': helpSetting}">
<span class="iconfont icon-bangzhu">

</span>
帮助
{{$t('navbar.help')}}
</b-nav-item>
</b-navbar-nav>
</b-navbar>
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export class NavbarComponent extends Vue {
}

get title () {
return this.$route.meta.title
return this.$t(`${this.$route.meta.title}.title`)
}

@Watch('$route.path')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export class Link {
icon: string
type: number

constructor (name: string, path: string, icon: string, type: number = LINKTYPE.LINK) {
constructor (name: any, path: string, icon: string, type: number = LINKTYPE.LINK) {
this.name = name
this.path = path
this.icon = icon
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ export class SidebarComponent extends Vue {

initLinks (type?: string) {
this.links = [
new Link('WEEX 调试', `/client/weex/${this.channelId}?type=${type}`, 'icon-debug'),
new Link(this.$t('sideBar.weex.title'), `/client/weex/${this.channelId}?type=${type}`, 'icon-debug'),
new Link('', '', '', LINKTYPE.DEVIDING),
new Link('性能面板', `/client/analyze/${this.channelId}?type=${type}`, 'icon-ceshi')
new Link(this.$t('sideBar.analyze.title'), `/client/analyze/${this.channelId}?type=${type}`, 'icon-ceshi')
// new Link('页面评价', `/client/eval/${this.channelId}?type=${type}`, 'icon-tongjibaobiao'),
// new Link('', '', '', LINKTYPE.DEVIDING),
// new Link('资源分析', `/client/source/${this.channelId}?type=${type}`, 'icon-number'),
Expand Down
14 changes: 14 additions & 0 deletions packages/@weex/plugins/debug/frontend/src/lang.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { en } from './langs/en'
import { cn } from './langs/cn'

Vue.use(VueI18n)

export default new VueI18n({
locale: localStorage.getItem('language') || 'cn',
fallbackLocale: 'en',
messages: {
en, cn
}
})
81 changes: 81 additions & 0 deletions packages/@weex/plugins/debug/frontend/src/langs/cn.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
export const cn = {
title: 'Weex 真机调试工具',
navbar: {
help: '帮助',
environmentSetting: '环境设置'
},
home: {
languageTitle: 'Languages',
welcomMessage: '欢迎使用 Weex 调试工具',
tabs: {
debugName: '调试',
pageName: '页面'
},
tips: {
quickStartTitle: '快速使用',
quickStartDesc: '快速了解如何在你的开发中使用 weex 调试工具',
quickStartUrl: 'http://weex.apache.org/tools/toolkit.html#debug',
guideTitle: '使用教程',
guideDesc: '详细介绍各个功能的使用说明',
guideUrl: 'http://weex.apache.org/tools/toolkit.html#debug',
integerTitle: '集成 Weex Devtool 到你的应用',
integerDesc: '了解如何在你的应用中集成 Weex Devtool SDK',
integerUrl: 'http://weex.apache.org/cn/guide/integrate-devtool-to-ios.html',
helpTitle: '帮助和意见反馈',
helpDesc: '提交Github issue 和帮助提高 Weex Devtool',
helpUrl: 'https://github.com/weexteam/weex-toolkit/issues/new?labels=@weex-cli/debug',
noJsBundle: '暂无可预览页面,你可以通过下面的命令进行页面编译'
},
toastTips: {
copySuccess: '复制成功',
openPage: '打开页面'
},
version: '当前版本'
},
defaultPage: {
title: '性能面板',
pageDescription: '页面正在施工中...'
},
weexDebugPage: {
title: 'Weex 调试',
appInfo: '应用信息',
sdkVersion: 'SDK版本',
jsDebug: 'JS调试',
network: '网络审查',
logLevel: '日志等级',
elementMode: '切换视图',
clearHistory: '清空历史',
workerJsDesc: 'WorkerJS为调试中间文件,文件开头为[Runtime]-的文件',
jsServiceDesc: 'JSService是weex在运行中使用<a href="http://weex.apache.org/cn/references/js-service.html" target="_blank">JSService接口</a>注入的JS文件,多个文件用逗号隔开',
dependenceJsDesc: 'DependenceJS是weex在创建实例前在JS环境中注入的JS文件',
jsFrameworkDesc: 'JSFramework是为weex运行提供初始环境的JS',
environmentSettingOkDesc: '更改设置',
environmentSettingCancelDesc: '重置',
reloadDesc: '刷新',
restoreDesc: '恢复',
mockTips: 'mock 文件',
generatorFile: '生成文件'
},
sideBar: {
weex: {
title: 'WEEX 调试'
},
analyze: {
title: '性能面板'
}
},
tour: {
step_1: '点击这里可以控制<strong>JS Debug</strong>开关,开启后即可开始JS调试!',
step_2: '点击这里可以选择Log日志等级',
step_3: '进入调试页面后点击这里可以刷新Weex页面',
step_4: '在这里可以输入你本地想访问的JSBundle文件,回车键跳转',
step_5: '点击这里可以针对Weex运行环境进行配置',
step_6: '点击这里可以对文件进行Mock替换',
step_7: '点击这里可以让环境配置生效',
step_8: '点击这里重置环境',
nextText: '下一个',
prevText: '上一个',
finishText: '完成',
skip: '跳过'
}
}
81 changes: 81 additions & 0 deletions packages/@weex/plugins/debug/frontend/src/langs/en.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
export const en = {
title: 'Weex Debug Tool',
navbar: {
help: 'Help',
environmentSetting: 'Environment'
},
home: {
languageTitle: '切换语言',
welcomMessage: 'Welcome to weex debugging tool',
tabs: {
debugName: 'Debug',
pageName: 'Pages'
},
tips: {
quickStartTitle: 'Quick start',
quickStartDesc: 'Quickly learn how to use the weex debugging tool',
quickStartUrl: 'http://weex.apache.org/tools/toolkit.html#debug',
guideTitle: 'Tutorial',
guideDesc: 'Detailed instructions for using each function',
guideUrl: 'http://weex.apache.org/tools/toolkit.html#debug',
integerTitle: 'Integrate Weex Devtool',
integerDesc: 'Learn how to integrate the Weex Devtool SDK into your app',
integerUrl: 'http://weex.apache.org/cn/guide/integrate-devtool-to-ios.html',
helpTitle: 'Help & Feedback',
helpDesc: 'Submit a Github issue to help Weex Devtool be better',
helpUrl: 'https://github.com/weexteam/weex-toolkit/issues/new?labels=@weex-cli/debug',
noJsBundle: 'There is no preview page yet, you can compile the page with the following command'
},
toastTips: {
copySuccess: 'Copy success',
openPage: 'Open page'
},
version: 'Version'
},
defaultPage: {
title: 'Performance',
pageDescription: 'The page is under development...'
},
weexDebugPage: {
title: 'Weex Debug',
appInfo: 'APP Info',
sdkVersion: 'SDK Version',
jsDebug: 'JS Debug',
network: 'Network',
logLevel: 'LogLevel',
elementMode: 'ElementMode',
clearHistory: 'Clean',
workerJsDesc: 'WorkerJS is a debugging intermediate file, the file starts with \`[Runtime]-\`',
jsServiceDesc: 'JSService is using <a href="http://weex.apache.org/cn/references/js-service.html" target="_blank">JSService API</a>register in the run, multiple files separated by commas',
dependenceJsDesc: 'DependenceJS is the JS file injected by Weex in the JS environment before creating the instance',
jsFrameworkDesc: 'JSFramework is the JS that provides the initial environment for weex to run',
environmentSettingOkDesc: 'Change Setting',
environmentSettingCancelDesc: 'Reset',
reloadDesc: 'Refresh',
restoreDesc: 'Restore',
mockTips: 'Mock file',
generatorFile: 'Generate File'
},
sideBar: {
weex: {
title: 'WEEX DEBUG'
},
analyze: {
title: 'PERFORMENCE'
}
},
tour: {
step_1: 'Click here to control the <strong>JS Debug</strong> switch, and start JS debugging after opening!',
step_2: 'Click here to select Log log level',
step_3: 'Click here to refresh the Weex page after entering the debug page',
step_4: 'Enter the JSBundle file you want to access locally, press Enter to jump',
step_5: 'Click here to configure for the Weex runtime environment',
step_6: 'Click here to Mock replace the file',
step_7: 'Click here to make the environment configuration take effect',
step_8: 'Click here to reset the environment',
nextText: 'Next',
prevText: 'Prev',
finishText: 'Finish',
skip: 'Skip'
}
}
2 changes: 2 additions & 0 deletions packages/@weex/plugins/debug/frontend/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import TreeView from 'vue-json-tree-view'
import VueClipboard from 'vue-clipboard2'
import vBTooltip from 'bootstrap-vue/es/directives/tooltip/tooltip'
import vBPopover from 'bootstrap-vue/es/directives/popover/popover'
import i18n from './lang'

// const navbarComponent = () => import('./components/navbar').then(({ NavbarComponent }) => NavbarComponent)
// const navbarComponent = () => import(/* webpackChunkName: 'navbar' */'./components/navbar').then(({ NavbarComponent }) => NavbarComponent)
Expand Down Expand Up @@ -45,6 +46,7 @@ Vue.use(Snotify, options)
// tslint:disable-next-line:no-unused-expression
new Vue({
el: '#app-main',
i18n,
store,
router: createRouter(),
components: {}
Expand Down
14 changes: 7 additions & 7 deletions packages/@weex/plugins/debug/frontend/src/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,48 +57,48 @@ export const createRoutes: () => RouteConfig[] = () => [
props: (route) => ({ channelId: route.params.channelId }),
component: weexComponent,
meta: {
title: 'Weex 调试',
title: 'weexDebugPage',
setting: true
}
},
{
path: 'analyze/:channelId',
props: (route) => ({ channelId: route.params.channelId }),
component: analyzeComponent,
component: defaultComponent,
meta: {
title: '性能面板'
title: 'defaultPage'
}
},
{
path: 'eval/:channelId',
props: (route) => ({ channelId: route.params.channelId }),
component: defaultComponent,
meta: {
title: '页面评价'
title: 'defaultPage'
}
},
{
path: 'source/:channelId',
props: (route) => ({ channelId: route.params.channelId }),
component: defaultComponent,
meta: {
title: '资源分析'
title: 'defaultPage'
}
},
{
path: 'health/:channelId',
props: (route) => ({ channelId: route.params.channelId }),
component: defaultComponent,
meta: {
title: '健康检查'
title: 'defaultPage'
}
},
{
path: 'setting/:channelId',
props: (route) => ({ channelId: route.params.channelId }),
component: defaultComponent,
meta: {
title: '开发设置'
title: 'defaultPage'
}
}
]
Expand Down
5 changes: 5 additions & 0 deletions packages/@weex/plugins/debug/frontend/src/sass/bcheckbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,9 @@
}
.custom-control-input:active ~ .custom-control-label::before {
background-color: #ffd9ae !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #ffd9ae;
background-color: #ffd9ae;
}
19 changes: 14 additions & 5 deletions packages/@weex/plugins/debug/frontend/src/views/home/home.html
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
<b-container class="wx-home-content">
<div class="language">
<div class="language-title">
{{$t('home.languageTitle')}} <span class="iconfont icon-xiala"></span>
</div>
<ul>
<li @click="handleLanguageSetting('cn')">简体中文</li>
<li @click="handleLanguageSetting('en')">English</li>
</ul>
</div>
<b-row class="justify-content-md-center">
<b-col>
<b-container class="box" :class="{ready: connectUrl}">
<div class="wx-home-tabs">
<div class="wx-home-tab-border">
<div class="wx-home-tab" :class="{'active': activeType === 'debug'}" @click = "toggleType('debug')">调试</div>
<div class="wx-home-tab" :class="{'active': activeType === 'pages'}" @click = "toggleType('pages')">页面</div>
<div class="wx-home-tab" :class="{'active': activeType === 'debug'}" @click = "toggleType('debug')">{{$t("home.tabs.debugName")}}</div>
<div class="wx-home-tab" :class="{'active': activeType === 'pages'}" @click = "toggleType('pages')">{{$t("home.tabs.pageName")}}</div>
</div>
</div>
<div v-if="activeType === 'debug'">
Expand All @@ -19,10 +28,10 @@
<b-row class="header">
<img class='logo' src="" alt="">
<div class="title">
Welcome to Weex Debugger
{{$t("home.welcomMessage")}}
</div>
<div class="version">
Version {{version}}
{{$t("home.version")}} {{version}}
</div>
</b-row>
<b-row class="items" v-for="(tip, index) in tips" :key="index" >
Expand All @@ -47,7 +56,7 @@
<i class="iconfont icon-bangzhu"></i>
</div>
<div class="tip">
暂无可预览页面,你可以通过下面的命令进行页面编译
{{$t("home.tips.noJsBundle")}}}
</div>
<code>
$ weex debug [ folder | file ]
Expand Down
38 changes: 38 additions & 0 deletions packages/@weex/plugins/debug/frontend/src/views/home/home.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,44 @@
align-items: center;
justify-content: center;
height: 100%;
.language {
position: absolute;
top: 20px;
right: 20px;
text-align: center;
.language-title {
font-size: 16px;
color: #4c4c4c;
cursor: pointer;
&:hover + ul{
display: block;
}
}
ul {
position: absolute;
width: 90px;
padding-top: 30px;
top: 0;
left: -5px;
display: none;
&:hover {
display: block;
}
li {
color: #4c4c4c;
line-height: 30px;
text-align: center;
cursor: pointer;
background: #fff;
&:hover {
background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
background-repeat: repeat-x;
border-color: #f37327;
color: #fff;
}
}
}
}
.box {
width: 450px;
border: 1px #ddd solid;
Expand Down
Loading

0 comments on commit 45270a2

Please sign in to comment.