Adding Language Switching Function and Refactoring Part of Code

deploy.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env sh
+
+# 当发生错误时中止脚本
+set -e
+
+# 构建
+npm run build
+
+# cd 到构建输出的目录下 
+cd dist
+
+# 部署到自定义域域名
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# 部署到 https://<USERNAME>.github.io
+# git push -f git@github.com:HongqingCao/GitDataV.github.io.git master
+
+
+cd -

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "git-datav",
-  "version": "0.1.0",
+  "name": "GitDataV",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",

src/components/loading/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="loading">
     <icon :type="'socialgithuboutline'" :size="'4rem'" :color="'#888'"> </icon>
-    正在疯狂的计算数据中+-*%....
+    {{ $t("nodata.loading") }}
     <particles />
   </div>
 </template>

src/components/nodata/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="nodata">
     <icon :type="'socialgithuboutline'" :size="'2rem'" :color="'#888'"></icon
-    >您没有{{ nodata }}数据
+    >{{ $t("nodata.pOne") }}{{ nodata }}{{ $t("nodata.pTwo") }}
   </div>
 </template>
 

src/components/nouser/index.vue

@@ -7,16 +7,16 @@
             <button type="button" class="close">
               <span @click="closebtn">&times;</span>
             </button>
-            <h4 class="modal-title">温馨提示</h4>
+            <h4 class="modal-title">{{ $t("nouser.title") }}</h4>
           </div>
           <div class="modal-body">
             <icon :type="'socialgithuboutline'" :size="'4rem'" :color="'#888'">
             </icon
-            >用户名有误，或网络原因无法查找到数据<br />请重新输入用户名，或者刷新浏览器
+            >{{ $t("nouser.pOne") }}<br />{{ $t("nouser.pTwo") }}
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" @click="closebtn">
-              关闭
+              {{ $t("nouser.closebtn") }}
             </button>
           </div>
         </div>

src/components/topnav/index.vue

@@ -4,7 +4,7 @@
       <li @click="fullBox">
         <icon :type="'quanping'" :size="'2.2rem'" :color="'#fff'"> </icon>
       </li>
-      <li>
+      <li @click="changeLen">
         <icon :type="'yuyanqiehuan'" :size="'2.2rem'" :color="'#fff'"> </icon>
       </li>
       <li>
@@ -18,32 +18,30 @@
 </template>
 
 <script>
+import screenfull from "screenfull";
 export default {
   name: "topnav",
+  computed: {
+    lang: {
+      get() {
+        return this.$store.state.language;
+      }
+    }
+  },
   methods: {
     fullBox() {
-      console.log("点击");
-      if (
-        (document.fullScreenElement && document.fullScreenElement !== null) ||
-        (!document.mozFullScreen && !document.webkitIsFullScreen)
-      ) {
-        if (document.documentElement.requestFullScreen) {
-          document.documentElement.requestFullScreen();
-        } else if (document.documentElement.mozRequestFullScreen) {
-          document.documentElement.mozRequestFullScreen();
-        } else if (document.documentElement.webkitRequestFullScreen) {
-          document.documentElement.webkitRequestFullScreen(
-            Element.ALLOW_KEYBOARD_INPUT
-          );
-        }
+      if (!screenfull.enabled) {
+        return false;
+      }
+      screenfull.toggle();
+    },
+    changeLen() {
+      if (this.lang === "en") {
+        this.$i18n.locale = "zh";
+        this.$store.dispatch("setLanguage", "zh");
       } else {
-        if (document.cancelFullScreen) {
-          document.cancelFullScreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        }
+        this.$i18n.locale = "en";
+        this.$store.dispatch("setLanguage", "en");
       }
     }
   }

src/lang/en.js

@@ -0,0 +1,74 @@
+export default {
+  app: {
+    appIntroduce:
+      "A Github visualization large data platform based on Vue is presented. With it, you can get a more intuitive view of some of your data in Github",
+    inputPlaceholder: "Enter your GitHub account, and then click Generate.",
+    namelg: "Please enter your account number and click Generate again!",
+    account: "Account",
+    notFound: " not found！",
+    clickP:
+      " Clicking on the [Generate]button will be considered as your agreement.",
+    clickB: "GitDataV Terms of Service",
+    subscribe: "generate",
+    pmodal: {
+      title: "GitDataV Terms of Service",
+      thanksP:
+        "Thank you for using GitDataV! We're glad you're here. Before visiting or using GitDataV, please read the Terms of Service Agreement carefully:",
+      aPone: "A、GitDataV passes",
+      aPtwo: "GitHub official API provides interface platform",
+      bP:
+        "B. This website only queries your publicly related data through the official interface through the user account, combs and displays these data on the website. The website itself does not store any of your relevant data.",
+      cPone:
+        "C. Due to the dependence on the official interface provided by github, the number of queries is limited. Do not attack maliciously or press queries. If there is any problem with the website, please contact the developer in time:",
+      cPtwo: "contact",
+      dP:
+        "Contact D, this website is non-profit nature, do not use for commercial purposes, the source code has been open source.",
+      ePone: "E. Compliance with other provisions",
+      ePtwo: "GitHub Terms of Service",
+      closebtn: "Got it"
+    }
+  },
+  data: {
+    index: "Warm Tip: please pay attention to my GitHub update.",
+    myevent: {
+      pubRepos: "Public Repositories",
+      followers: "Followers",
+      following: "Following",
+      accountData: "Repositories Data",
+      noRepoSize: "Repositories",
+      myevent: "Details of recent operations",
+      noMyevent: "Recent operation",
+      table: {
+        time: "Operation time",
+        type: "Type",
+        repos: "Operation repositories",
+        remarks: "Remarks"
+      }
+    },
+    dheader: "GitDataV Data Platform",
+    dleft: {
+      accountStars: "Repositories Stars",
+      accountLeng: "Repositories Language classification",
+      noStarData: "One Stars",
+      nolanguageData: "A language"
+    },
+    dright: {
+      index: {
+        followers: "New followers",
+        noFollowers: "noFollowers",
+        following: "New following",
+        noFollowing: "noFollowing",
+        messege: "New Messege"
+      },
+      message: {
+        pOne: "Give you one.",
+        pTwo: "operation"
+      }
+    }
+  },
+  loading: "Crazy computing data+-*%....",
+  nodata: {
+    pOne: "You do not have",
+    pTwo: "data"
+  }
+};

src/lang/index.js

@@ -0,0 +1,37 @@
+import Vue from "vue";
+import VueI18n from "vue-i18n";
+import Cookies from "js-cookie";
+import enLocale from "./en";
+import zhLocale from "./zh";
+
+Vue.use(VueI18n);
+
+const messages = {
+  en: {
+    ...enLocale
+  },
+  zh: {
+    ...zhLocale
+  }
+};
+export function getLanguage() {
+  const chooseLanguage = Cookies.get("language");
+  if (chooseLanguage) return chooseLanguage;
+
+  const language = (
+    navigator.language || navigator.browserLanguage
+  ).toLowerCase();
+  const locales = Object.keys(messages);
+  for (const locale of locales) {
+    if (language.indexOf(locale) > -1) {
+      return locale;
+    }
+  }
+  return "en";
+}
+const i18n = new VueI18n({
+  locale: getLanguage(),
+  messages
+});
+
+export default i18n;

src/lang/zh.js

@@ -0,0 +1,72 @@
+export default {
+  app: {
+    appIntroduce:
+      "一个用Vue构建的Github可视化大数据平台。通过它，您可以更加直观看到您在Github里的一些数据情况",
+    inputPlaceholder: "输入您的github账号，然后点击生成...",
+    namelg: "请输入您的账号，再点生成!",
+    account: "账号",
+    notFound: " 未找到！",
+    clickP: " 点击「生成」按钮将视为您同意",
+    clickB: "GitDataV服务条款",
+    subscribe: "生成",
+    pmodal: {
+      title: "GitDataV服务条款",
+      thanksP:
+        "感谢您使用GitDataV！我们很高兴你在这里。在访问或使用GitDataV之前，请仔细阅读本服务条款协议:",
+      aPone: "A、GitDataV通过",
+      aPtwo: "github官方api提供接口平台",
+      bP:
+        "B、本网站只通过用户账号通过官方接口进行查询您的公开相关数据，并对这些数据进行梳理和在网页上展示，网站本身并不存储您任何相关数据",
+      cPone:
+        "C、本网站由于依赖github官方提供接口，对查询的次数有限制，请勿恶意攻击和压力查询,如果网站有问题请及时与开发者：",
+      cPtwo: "联系",
+      dP: "D、本网站属于非盈利性质，请勿进行商业用途，源码已开源",
+      ePone: "E、其他条款遵循",
+      ePtwo: "GitHub服务条款",
+      closebtn: "知道了"
+    }
+  },
+  data: {
+    index: "温馨提示: 后续还会继续加功能，请关注我github更新...",
+    myevent: {
+      pubRepos: "公开仓库数",
+      followers: "粉丝",
+      following: "跟随",
+      accountData: "仓库数据",
+      noRepoSize: "仓库",
+      myevent: "最近操作详情",
+      noMyevent: "最近操作",
+      table: {
+        time: "操作时间",
+        type: "类型",
+        repos: "操作仓库",
+        remarks: "备注"
+      }
+    },
+    dheader: "GitDataV数据平台",
+    dleft: {
+      accountStars: "仓库Stars详情",
+      accountLeng: "仓库语言分类",
+      noStarData: "一个Stars",
+      nolanguageData: "一种语言"
+    },
+    dright: {
+      index: {
+        followers: "新增粉丝",
+        noFollowers: "一个粉丝",
+        following: "最近跟随",
+        noFollowing: "一个跟随",
+        messege: "最新消息"
+      },
+      message: {
+        pOne: "给了你一个",
+        pTwo: "操作"
+      }
+    }
+  },
+  loading: "正在疯狂的计算数据中+-*%....",
+  nodata: {
+    pOne: "您没有",
+    pTwo: "数据"
+  }
+};

src/main.js

@@ -9,10 +9,15 @@ import Axios from "axios";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "./assets/iconfont/iconfont.css";
 import "./assets/css/global.scss";
+import i18n from "./lang";
+import VueI18n from "vue-i18n";
 
 Vue.use(VueParticles);
 Vue.use(VCharts);
 Vue.use(Vcomp);
+Vue.use(VueI18n, {
+  i18n: (key, value) => i18n.t(key, value)
+});
 
 Vue.prototype.$axios = Axios;
 Vue.config.productionTip = "/api";
@@ -21,5 +26,6 @@ Vue.config.productionTip = false;
 new Vue({
   router,
   store,
+  i18n,
   render: h => h(App)
 }).$mount("#app");

src/store.js

@@ -1,10 +1,23 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import Cookies from "js-cookie";
+import { getLanguage } from "@/lang/index";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {}
+  state: {
+    language: getLanguage()
+  },
+  mutations: {
+    SET_LANGUAGE: (state, language) => {
+      state.language = language;
+      Cookies.set("language", language);
+    }
+  },
+  actions: {
+    setLanguage({ commit }, language) {
+      commit("SET_LANGUAGE", language);
+    }
+  }
 });