You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@linkis.apache.org by pe...@apache.org on 2021/10/21 08:59:17 UTC
[incubator-linkis-website] 12/43: ADD: 增加语言切换功能
This is an automated email from the ASF dual-hosted git repository.
peacewong pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-linkis-website.git
commit 1e6cb34678a259804493283cc711a2fbcfc06848
Author: lucaszhu <lu...@webank.com>
AuthorDate: Fri Oct 8 16:47:53 2021 +0800
ADD: 增加语言切换功能
---
package-lock.json | 53 ++++++++++++++++++++++++++++++++++
package.json | 1 +
src/App.vue | 84 ++++++++++++++++++++++++++++++++++++++++++++++++------
src/i18n/en.json | 10 +++++++
src/i18n/index.js | 48 +++++++++++++++++++++++++++++++
src/i18n/zh.json | 10 +++++++
src/main.js | 4 ++-
src/pages/home.vue | 2 +-
8 files changed, 202 insertions(+), 10 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index d195bbd..a56c21f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,48 @@
"resolved": "http://10.107.103.115:8001/@babel/parser/download/@babel/parser-7.15.7.tgz",
"integrity": "sha1-DD7UousHsWXfqFs8xFxyczTE7a4="
},
+ "@intlify/core-base": {
+ "version": "9.2.0-beta.11",
+ "resolved": "http://10.107.103.115:8001/@intlify/core-base/download/@intlify/core-base-9.2.0-beta.11.tgz",
+ "integrity": "sha1-G1eahTLsL33C3c95myXDr+bsq8Q=",
+ "requires": {
+ "@intlify/devtools-if": "9.2.0-beta.11",
+ "@intlify/message-compiler": "9.2.0-beta.11",
+ "@intlify/shared": "9.2.0-beta.11",
+ "@intlify/vue-devtools": "9.2.0-beta.11"
+ }
+ },
+ "@intlify/devtools-if": {
+ "version": "9.2.0-beta.11",
+ "resolved": "http://10.107.103.115:8001/@intlify/devtools-if/download/@intlify/devtools-if-9.2.0-beta.11.tgz",
+ "integrity": "sha1-uclQ7jpkbcobno+4f3qQsth0pPs=",
+ "requires": {
+ "@intlify/shared": "9.2.0-beta.11"
+ }
+ },
+ "@intlify/message-compiler": {
+ "version": "9.2.0-beta.11",
+ "resolved": "http://10.107.103.115:8001/@intlify/message-compiler/download/@intlify/message-compiler-9.2.0-beta.11.tgz",
+ "integrity": "sha1-KkH9WL+UcZFAVTdAbqENN6assE0=",
+ "requires": {
+ "@intlify/shared": "9.2.0-beta.11",
+ "source-map": "0.6.1"
+ }
+ },
+ "@intlify/shared": {
+ "version": "9.2.0-beta.11",
+ "resolved": "http://10.107.103.115:8001/@intlify/shared/download/@intlify/shared-9.2.0-beta.11.tgz",
+ "integrity": "sha1-m+tA3gyIT9fWIxFEWgZmOZOW3pc="
+ },
+ "@intlify/vue-devtools": {
+ "version": "9.2.0-beta.11",
+ "resolved": "http://10.107.103.115:8001/@intlify/vue-devtools/download/@intlify/vue-devtools-9.2.0-beta.11.tgz",
+ "integrity": "sha1-MCJYDdeYQCU4D8cgyLyaVPUJchI=",
+ "requires": {
+ "@intlify/core-base": "9.2.0-beta.11",
+ "@intlify/shared": "9.2.0-beta.11"
+ }
+ },
"@vitejs/plugin-vue": {
"version": "1.9.2",
"resolved": "http://10.107.103.115:8001/@vitejs/plugin-vue/download/@vitejs/plugin-vue-1.9.2.tgz",
@@ -420,6 +462,17 @@
"@vue/shared": "3.2.19"
}
},
+ "vue-i18n": {
+ "version": "9.2.0-beta.11",
+ "resolved": "http://10.107.103.115:8001/vue-i18n/download/vue-i18n-9.2.0-beta.11.tgz",
+ "integrity": "sha1-GZL+2Kagp0GxXOfHM+QVgSbuezo=",
+ "requires": {
+ "@intlify/core-base": "9.2.0-beta.11",
+ "@intlify/shared": "9.2.0-beta.11",
+ "@intlify/vue-devtools": "9.2.0-beta.11",
+ "@vue/devtools-api": "^6.0.0-beta.13"
+ }
+ },
"vue-router": {
"version": "4.0.11",
"resolved": "http://10.107.103.115:8001/vue-router/download/vue-router-4.0.11.tgz",
diff --git a/package.json b/package.json
index 8a18f20..1e0962d 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
},
"dependencies": {
"vue": "^3.2.13",
+ "vue-i18n": "^9.2.0-beta.11",
"vue-router": "^4.0.11"
},
"devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index f8720df..29efbc4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,16 @@
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import { ref } from "vue";
+
+// 初始化语言
+const lang = ref(localStorage.getItem('locale'));
+
+// 切换语言
+const switchLang = (lang) => {
+ localStorage.setItem('locale', lang);
+ location.reload();
+}
</script>
<template>
@@ -12,13 +22,21 @@
</div>
<span class="nav-logo-badge">Incubating</span>
<div class="menu-list">
- <router-link class="menu-item" to="/">Home</router-link>
- <router-link class="menu-item" to="/docs">Docs</router-link>
- <router-link class="menu-item" to="/faq">FAQ</router-link>
- <router-link class="menu-item" to="/download">Download</router-link>
- <router-link class="menu-item" to="/blog">Blog</router-link>
- <router-link class="menu-item" to="/team">Team</router-link>
- <div class="menu-item">Language</div>
+ <router-link class="menu-item" to="/"><span class="label">Home</span></router-link>
+ <router-link class="menu-item" to="/docs"><span class="label">Docs</span></router-link>
+ <router-link class="menu-item" to="/faq"><span class="label">FAQ</span></router-link>
+ <router-link class="menu-item" to="/download"><span class="label">Download</span></router-link>
+ <router-link class="menu-item" to="/blog"><span class="label">Blog</span></router-link>
+ <router-link class="menu-item" to="/team"><span class="label">Team</span></router-link>
+ <div class="menu-item language">
+ Language
+ <div class="dropdown-menu">
+ <ul class="dropdown-menu-ctn">
+ <li class="dropdown-menu-item" :class="{active: lang === 'zh-CN'}" @click="switchLang('zh-CN')">简体中文</li>
+ <li class="dropdown-menu-item" :class="{active: lang === 'en'}" @click="switchLang('en')">English</li>
+ </ul>
+ </div>
+ </div>
</div>
</div>
</nav>
@@ -90,9 +108,59 @@
cursor: pointer;
&:hover,
&.router-link-exact-active{
- color: @active-color;
+ .label{
+ color: @active-color;
+ }
border-color: @active-color;
}
+ &.language{
+ position: relative;
+ &::after{
+ content: '';
+ display: inline-block;
+ vertical-align: middle;
+ width: 0;
+ height: 0;
+ margin-left: 8px;
+ border-bottom: 6px solid #ccc;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ transition: all ease .2s;
+ }
+ &:hover{
+ &::after{
+ transform: rotate(180deg);
+ }
+ .dropdown-menu{
+ display: block;
+ }
+ }
+ .dropdown-menu{
+ display: none;
+ position: absolute;
+ z-index: 10;
+ top: 20px;
+ left: 0;
+ padding-top: 40px;
+ .dropdown-menu-ctn{
+ padding: 10px 0;
+ background: #fff;
+ border-radius: 4px;
+ border: 1px solid #FFFFFF;
+ box-shadow: 0 2px 12px 0 rgba(15,18,34,0.10);
+ .dropdown-menu-item{
+ font-size: 14px;
+ line-height: 32px;
+ padding: 0 16px;
+ cursor: pointer;
+ &.active,
+ &:hover{
+ color: @active-color;
+ }
+ }
+ }
+ }
+ }
}
}
}
diff --git a/src/i18n/en.json b/src/i18n/en.json
new file mode 100644
index 0000000..83add9c
--- /dev/null
+++ b/src/i18n/en.json
@@ -0,0 +1,10 @@
+{
+ "message": {
+ "common": {},
+ "home": {
+ "banner": {
+ "slogan": "Decouple the upper applications and the underlying data engines by building a computation middleware layer."
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 0000000..46092cd
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2019 WeBank
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { createI18n } from 'vue-i18n'
+import en from './en.json';
+import zh from './zh.json';
+
+// 先判断是否有设置语言，没有就用本地语言
+let lang = 'en';
+const locale = localStorage.getItem('locale');
+if (locale) {
+ lang = locale;
+} else {
+ if (navigator.language === 'zh-CN') {
+ lang = 'zh-CN';
+ localStorage.setItem('locale', 'zh-CN');
+ } else {
+ lang = 'en';
+ localStorage.setItem('locale', 'en');
+ }
+}
+
+const messages = {
+ 'en': en,
+ 'zh-CN': zh
+};
+
+const i18n = createI18n({
+ locale: lang, // set locale
+ fallbackLocale: 'en', // set fallback locale
+ messages, // set locale messages
+})
+
+export default i18n;
\ No newline at end of file
diff --git a/src/i18n/zh.json b/src/i18n/zh.json
new file mode 100644
index 0000000..844b8b7
--- /dev/null
+++ b/src/i18n/zh.json
@@ -0,0 +1,10 @@
+{
+ "message": {
+ "common": {},
+ "home": {
+ "banner": {
+ "slogan": "中文的Decouple the upper applications and the underlying data engines by building a computation middleware layer."
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index c8d6c67..1772dd3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,8 @@
import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './router';
-import App from './App.vue'
+import App from './App.vue';
+import i18n from './i18n';
const router = createRouter({
history: createWebHashHistory(),
@@ -14,5 +15,6 @@ router.resolve({
const app = createApp(App);
app.use(router);
+app.use(i18n);
app.mount('#app')
diff --git a/src/pages/home.vue b/src/pages/home.vue
index d5075ec..311f685 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -2,7 +2,7 @@
<div class="ctn-block home-page">
<div class="banner text-center">
<h1 class="home-title"><span class="apache">Apache</span> <span class="linkis">Linkis</span> <span class="badge">Incubating</span></h1>
- <p class="home-desc">Decouple the upper applications and the underlying data<br>engines by building a middleware layer.</p>
+ <p class="home-desc">{{$t('message.home.banner.slogan')}}</p>
<div class="botton-row center">
<a href="/" class="corner-botton black">Get Started</a>
<a href="/" class="corner-botton white">GitHub</a>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@linkis.apache.org
For additional commands, e-mail: commits-help@linkis.apache.org