多语言OK

jae-jae · jae-jae · commit 26f4d7088835 · 2017-09-01T02:11:36.000+08:00
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/common/js/locale.js b/src/common/js/locale.js
@@ -0,0 +1,14 @@
+const langContext = require.context('../lang/', false, /\.js$/)
+
+let message = {}
+
+let getName = (path)=>{
+    return path.match(/([^\/]+)\.js$/)[1]
+}
+
+langContext.keys().map((lang)=>{
+    let name = getName(lang)
+    message[name] =  require('../lang/'+ name).default;
+})
+
+export default message
diff --git a/src/common/js/tools.js b/src/common/js/tools.js
@@ -2,16 +2,14 @@ import timeago from 'timeago.js'
 
 export default {
     timeagoFormat(time) {
-        return timeago(null, 'zh_CN').format(time)
+        let lang = navigator.language === 'zh-CN'?'zh-CN':'en-US';
+        return timeago(null, lang).format(time)
     },
     installUserJs(uri) {
         let link = parent.document.createElement("a");
         link.href = uri;
         link.click();
     },
-    msg(msg) {
-        app.$Message.info(msg);
-    },
     dispatchEvent(eventName) {
         parent.document.getElementById('jae_fetch_userjs').dispatchEvent(new Event(eventName))
     },
diff --git a/src/common/lang/en-US.js b/src/common/lang/en-US.js
@@ -0,0 +1,23 @@
+export default {
+    table:{
+        tips: 'Found {count} user scripts for the current page',
+        install: 'Install',
+        title: 'Title',
+        author: 'Suthor',
+        authorTips: 'Click to access the {name} home page',
+        dailyInstalls: 'Daily',
+        updatedTime: 'Updated',
+        action: 'Action',
+        version: 'Version',
+        score: 'Score',
+        totalInstalls: 'Total Installs',
+        description: 'Description',
+        donate: 'Donate',
+        wechat: 'Wechat',
+        alipay: 'Alipay',
+        paypal: 'PayPal',
+        closeDonate: 'Close Donate',
+        feedback: 'Feedback',
+        close: 'No longer show'
+    }
+}
diff --git a/src/common/lang/zh-CN.js b/src/common/lang/zh-CN.js
@@ -0,0 +1,23 @@
+export default {
+    table:{
+        tips: '发现{count}个脚本适用于当前页面',
+        install: '安装',
+        title: '标题',
+        author: '作者',
+        authorTips: '点击访问{name}主页',
+        dailyInstalls: '今日安装',
+        updatedTime: '更新时间',
+        action: '操作',
+        version: '版本',
+        score: '评分',
+        totalInstalls: '总安装量',
+        description: '描述',
+        donate: '打赏',
+        wechat: '微信',
+        alipay: '支付宝',
+        paypal: 'PayPal',
+        closeDonate: '关闭打赏',
+        feedback: '反馈',
+        close: '该网站本次会话的所有页面都不再显示'
+    }
+}
diff --git a/src/components/Info.vue b/src/components/Info.vue
@@ -2,21 +2,21 @@
     <div>
         <Row style="margin-bottom: 16px;">
             <Col span="8">
-            <span class="expand-key">版本：</span>
+            <span class="expand-key">{{$t('table.version')}}：</span>
             <span class="expand-value">{{ row.version }}</span>
             </Col>
             <Col span="8">
-            <span class="expand-key">评分：</span>
+            <span class="expand-key">{{$t('table.score')}}：</span>
             <span class="expand-value">{{ row.fan_score }}</span>
             </Col>
             <Col span="8">
-            <span class="expand-key">总安装量：</span>
+            <span class="expand-key">{{$t('table.totalInstalls')}}：</span>
             <span class="expand-value">{{ row.total_installs }}</span>
             </Col>
         </Row>
         <Row>
             <Col span="24">
-            <span class="expand-key">描述：</span>
+            <span class="expand-key">{{$t('table.description')}}：</span>
             <span class="expand-value">{{ row.description }}</span>
             </Col>
         </Row>
diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -3,29 +3,44 @@
         <Card :padding="0">
             <div slot="title" @click="bodySwitch" class="card-title">
                 <Icon :type="titleIcon"></Icon>
-                <span>发现 <Badge :count="count"></Badge> 个脚本适用于当前页面</span>
+                <!--<span>发现 <Badge :count="count"></Badge> 个脚本适用于当前页面</span>-->
+                <i18n path="table.tips" tag="span">
+                    <Badge place="count" :count="count"></Badge>
+                </i18n>
             </div>
             <div slot="extra">
                 <span v-show="showBody">
-                     <Button type="dashed" @click="open('https://greasyfork.org/zh-CN/scripts/24508/feedback')">
-                        <Icon type="bug"></Icon>
-                    </Button>
+                    <Tooltip :content="$t('table.feedback')" placement="bottom">
+                        <Button type="dashed" @click="open('https://greasyfork.org/zh-CN/scripts/24508/feedback')">
+                            <Icon type="bug"></Icon>
+                        </Button>
+                    </Tooltip>
 
-                    <Button type="dashed" @click="open('https://greasyfork.org/zh-CN/scripts/24508')">
-                        <Icon type="fork"></Icon>
-                    </Button>
+                    <Tooltip content="GreasyFork" placement="bottom">
+                        <Button type="dashed" @click="open('https://greasyfork.org/zh-CN/scripts/24508')">
+                            <Icon type="fork"></Icon>
+                        </Button>
+                    </Tooltip>
 
-                    <Button type="dashed" @click="open('https://github.com/jae-jae/Show-Site-All-UserJS')">
-                        <Icon type="social-github"></Icon>
-                    </Button>
+                    <Tooltip content="GitHub" placement="bottom">
+                        <Button type="dashed" @click="open('https://github.com/jae-jae/Show-Site-All-UserJS')">
+                            <Icon type="social-github"></Icon>
+                        </Button>
+                    </Tooltip>
 
-                     <Button type="dashed" @click="showDonate = true">
-                        <Icon type="card"></Icon>
-                    </Button>
+                    <Tooltip :content="$t('table.donate')" placement="bottom">
+                         <Button type="dashed" @click="showDonate = true">
+                            <Icon type="card"></Icon>
+                        </Button>
+                    </Tooltip>
                 </span>
-                <Button type="dashed" @click="close">
-                    <Icon type="close-round"></Icon>
-                </Button>
+
+                <Tooltip :content="$t('table.close')" placement="left">
+                    <Button type="dashed" @click="close">
+                        <Icon type="close-round"></Icon>
+                    </Button>
+                </Tooltip>
+
             </div>
             <transition name="custom-classes-transition" enter-active-class="animated jello" leave-active-class="animated bounceOutRight">
                 <div v-show="showBody">
@@ -37,19 +52,19 @@
 
             <Tabs value="wechat">
 
-                <Tab-Pane label="微信打赏" name="wechat">
+                <Tab-Pane :label="$t('table.wechat')" name="wechat">
                     <div style="text-align: center;">
                         <img width="200px" src="http://ww1.sinaimg.cn/large/7de3675bly1fizyy2pivwj2074074js6.jpg">
                     </div>
                 </Tab-Pane>
 
-                <Tab-Pane label="支付宝打赏" name="alipay">
+                <Tab-Pane :label="$t('table.alipay')" name="alipay">
                     <div style="text-align: center;">
                         <img width="200px" src="http://ww1.sinaimg.cn/large/7de3675bly1fizyyh7m7yj20ci0ciwfl.jpg">
                     </div>
                 </Tab-Pane>
 
-                <Tab-Pane label="PayPal打赏" name="paypal">
+                <Tab-Pane :label="$t('table.paypal')" name="paypal">
                     <div style="text-align: center;">
                         <a href="https://paypal.me/jaepay/10" target="_blank">
                             <img src="http://ww1.sinaimg.cn/large/7de3675bly1fizzsw92owj207s03s748.jpg">
@@ -60,7 +75,7 @@
             </Tabs>
 
             <div slot="footer">
-                <Button type="info" size="large" long @click="showDonate=false">关闭</Button>
+                <Button type="info" size="large" long @click="showDonate=false">{{$t('table.closeDonate')}}</Button>
             </div>
 
         </Modal>
@@ -70,6 +85,7 @@
 <script>
     import Tools from '../common/js/tools'
     import Info from './Info.vue'
+    import Vue from 'vue'
     export default {
         components: { Info },
         mounted: function() {
@@ -83,7 +99,7 @@
                 })*/
             this.data = Tools.getData()
         },
-        data: ()=>{
+        data: function (){
             return {
                 showBody: false,
                 titleIcon: 'chevron-up',
@@ -107,7 +123,7 @@
                         align: 'center'
                     },
                     {
-                        title: '标题',
+                        title: this.$t('table.title'),
                         key: 'name',
                         width: '35%',
                         ellipsis: false,
@@ -128,11 +144,11 @@
                         }
                     },
                     {
-                        title: '作者',
+                        title: this.$t('table.author'),
                         render: (h, params) => {
                             return h('span', {
                                 attrs: {
-                                    title: `点击访问${params.row.user.name}主页`
+                                    title:this.$t('table.authorTips',{name:params.row.user.name})
                                 },
                                 style: {
                                     cursor: 'pointer'
@@ -146,20 +162,20 @@
                         }
                     },
                     {
-                        title: '今日安装',
+                        title: this.$t('table.dailyInstalls'),
                         key: 'daily_installs',
                         sortable: true
                     },
                     {
-                        title: '更新时间',
+                        title: this.$t('table.updatedTime'),
                         key: 'code_updated_at',
                         render: (h, params) => {
                             return h('span', Tools.timeagoFormat(params.row.code_updated_at))
                         },
                         sortable: true
                     },
                     {
-                        title: '操作',
+                        title: this.$t('table.action'),
                         key: 'code_url',
                         align: 'center',
                         render: (h, params) => {
@@ -175,11 +191,12 @@
                                     },
                                     on: {
                                         click: (event) => {
-                                            Tools.msg('脚本安装中...')
+                                            //Tools.msg('脚本安装中...')
+                                            this.$Message.info('脚本安装中...');
                                             Tools.installUserJs(params.row.code_url)
                                         }
                                     }
-                                }, '安装')
+                                }, this.$t('table.install'))
                             ])
                         }
                     }
diff --git a/src/main.js b/src/main.js
@@ -3,12 +3,30 @@ import App from './App.vue'
 import iView from 'iview';
 import 'iview/dist/styles/iview.css';    // 使用 CSS
 import 'animate.css'
+import VueI18n from 'vue-i18n'
+import localeMessage from './common/js/locale'
+
+console.log(localeMessage)
+
+Vue.locale = (locale) => {
+
+};
+
+Vue.use(VueI18n)
+
+Vue.use(iView)
+
+const i18n = new VueI18n({
+    //locale: navigator.language,    // 语言标识
+    locale: 'en-US',
+    messages: localeMessage
+})
 
-Vue.use(iView);
 
 let appEl = window.document.getElementById('app')
 
-window.app = new Vue({
+new Vue({
+    i18n,
     el: appEl,
     render: h => h(App)
 })
diff --git a/src/user.js b/src/user.js
@@ -40,7 +40,7 @@ var inline_src = (<><![CDATA[
             this.showTime = 10;
             this.quietKey = 'jae_fetch_userjs_quiet';
             this.cacheKey = 'jae_fetch_userjs_cache';
-            this.tplBox = '<div id="jae_fetch_userjs_wrapper"><style>    #jae_fetch_userjs {        position: fixed;        width: 350px;                bottom: 10px;        right: 20px;        z-index: 9999;        height: 51px;box-shadow: 0px 1px 4px rgba(0,0,0,0.3),\t\t\t\t0px 0px 20px rgba(0,0,0,0.1) inset;    }#jae_fetch_userjs::before,#jae_fetch_userjs::after {   content:"";   position:absolute;   z-index:-1;}#jae_fetch_userjs::before,#jae_fetch_userjs::after {   content:"";   position:absolute;   z-index:-1;   bottom:15px;   left:10px;   width:50%;   height:20%;}#jae_fetch_userjs::before,#jae_fetch_userjs::after {   content:"";   position:absolute;   z-index:-1;   bottom:15px;   left:10px;   width:50%;   height:20%;   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   transform:rotate(-3deg);}#jae_fetch_userjs::after{   right:10px;   left:auto;   transform:rotate(3deg); }</style><div id="jae_fetch_userjs" class=""></div></div>';
+            this.tplBox = '<div id="jae_fetch_userjs_wrapper"><style>    #jae_fetch_userjs {        position: fixed;        width: 370px;                bottom: 10px;        right: 20px;        z-index: 9999999999;        height: 51px;box-shadow: 0px 1px 4px rgba(0,0,0,0.3),\t\t\t\t0px 0px 20px rgba(0,0,0,0.1) inset;    }#jae_fetch_userjs::before,#jae_fetch_userjs::after {   content:"";   position:absolute;   z-index:-1;}#jae_fetch_userjs::before,#jae_fetch_userjs::after {   content:"";   position:absolute;   z-index:-1;   bottom:15px;   left:10px;   width:50%;   height:20%;}#jae_fetch_userjs::before,#jae_fetch_userjs::after {   content:"";   position:absolute;   z-index:-1;   bottom:15px;   left:10px;   width:50%;   height:20%;   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   transform:rotate(-3deg);}#jae_fetch_userjs::after{   right:10px;   left:auto;   transform:rotate(3deg); }</style><div id="jae_fetch_userjs" class=""></div></div>';
         }
 
         getJSON(url,callback){
@@ -93,7 +93,7 @@ var inline_src = (<><![CDATA[
 
             this.addEventListener('min',()=>{
                 setTimeout(()=>{
-                    this.setSize(350,51)
+                    this.setSize(370,51)
                 },800)
             })
 
