feat(web): add version & releases link

emqx · Jul 27, 2022 · 6dbf0c4 · 6dbf0c4
1 parent 8839867
commit 6dbf0c4
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 12 deletions.
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
@@ -46,7 +46,7 @@
           <div class="emq-logo">
             <img :src="emqLogoSrc" alt="emqx" width="40" />
             <span class="copyright">
-              &copy;2022 <a :href="emqWebsite" target="_blank" rel="noopener noreferrer">EMQ</a> Technologies Co., Ltd.
+              &copy;2022 <a :href="emqWebsite" target="_blank" rel="noopener noreferrer">EMQ</a> Technologies Inc.
             </span>
           </div>
           <div class="follow-items">

diff --git a/web/src/components/Leftbar.vue b/web/src/components/Leftbar.vue
@@ -124,7 +124,12 @@ export default class Leftbar extends Vue {
 
   .iconfont {
     color: var(--color-text-light);
-    font-size: $font-size--leftbar_title;
+  }
+  .leftbar-top .iconfont {
+    font-size: 24px;
+  }
+  .leftbar-bottom .iconfont {
+    font-size: 20px;
   }
 
   @media (min-width: 1920px) {

diff --git a/web/src/lang/about.ts b/web/src/lang/about.ts
@@ -25,9 +25,9 @@ export default {
     ja: 'リリース履歴',
   },
   mqttxDesc: {
-    zh: 'MQTT X 是一款由 EMQ 开源的 MQTT 5.0 跨平台桌面客户端，旨在帮助开发者更快的开发、调试 MQTT 服务和应用。',
-    en: 'MQTT X is a cross-platform MQTT 5.0 client tool open-sourced by EMQ, designed to help develop and debug MQTT services and applications faster.',
-    ja: 'MQTT Xは、EMQによるオープンソースのMQTT 5.0クロスプラットフォーム・デスクスクライアントで、開発者がMQTTサービスおよびアプリケーションをより速く開発およびデバッグできるよう設計されています。',
+    zh: 'MQTT X Web 是一款开源的可在浏览器运行的 MQTT 5.0 WebSocket 客户端工具，无需本地安装即可帮助您更快地调试 MQTT 服务及应用。',
+    en: 'MQTT X Web is an open-source MQTT 5.0 WebSocket client on the browser to help you debug your MQTT services and applications faster.',
+    ja: 'MQTT X Webは、オープンソースのMQTT 5.0 WebSocketクライアントで、ブラウザ上でMQTTサービスやアプリケーションのデバッグを高速化することができます。',
   },
   cloudTitle: {
     zh: '需要一个专属的 MQTT 服务器？',

diff --git a/web/src/lang/common.ts b/web/src/lang/common.ts
@@ -104,6 +104,11 @@ export default {
     en: 'Advanced Config',
     ja: '詳細設定',
   },
+  version: {
+    zh: '版本：',
+    en: 'Version: ',
+    ja: 'システムバージョン：',
+  },
   cloud: {
     zh: '需要一个云原生的全托管 MQTT 服务？一键部署 <a href="https://www.emqx.com/zh/cloud/?utm_source=emqx.io&utm_medium=referral&utm_campaign=mqttx-web-to-cloud" target="_blank" rel="noopener noreferrer">EMQX Cloud</a>！14 天免费试用！',
     en: 'Need a Fully Managed, Cloud-Native MQTT Messaging Service? Try <a href="https://www.emqx.com/en/cloud/?utm_source=emqx.io&utm_medium=referral&utm_campaign=mqttx-web-to-cloud" target="_blank" rel="noopener noreferrer">EMQX Cloud</a> now! 14-day trial, no credit card required.',

diff --git a/web/src/views/about/index.vue b/web/src/views/about/index.vue
@@ -7,6 +7,15 @@
       </div>
       <div class="about-content">
         <div class="about-content__header">
+          <p class="version">{{ $t('common.version') }} v{{ version }}</p>
+          <p class="help">
+            <a class="web-link" :href="releasesLink" target="_blank" rel="noopener noreferrer">
+              {{ $t('about.releases') }}
+            </a>
+            <a class="web-link" href="https://github.com/emqx/MQTTX/issues" target="_blank" rel="noopener noreferrer">
+              {{ $t('about.support') }}
+            </a>
+          </p>
           <div class="description">
             <p>{{ $t('about.mqttxDesc') }}</p>
           </div>
@@ -36,7 +45,7 @@
           <div class="emq-logo">
             <img :src="emqLogoSrc" alt="emqx" width="40" />
             <span class="copyright">
-              &copy;2022 <a :href="emqWebsite" target="_blank" rel="noopener noreferrer">EMQ</a> Technologies Co., Ltd.
+              &copy;2022 <a :href="emqWebsite" target="_blank" rel="noopener noreferrer">EMQ</a> Technologies Inc.
             </span>
           </div>
           <div class="follow-items">
@@ -73,6 +82,7 @@ export default class About extends Vue {
 
   private baseUrl = 'https://www.emqx.com'
   private utm = '?utm_source=emqx.io&utm_medium=referral&utm_campaign='
+  private version = `${process.env.VUE_APP_VERSION}`
 
   get mqttxLogoSrc(): string {
     if (this.getterTheme === 'light') {
@@ -112,6 +122,10 @@ export default class About extends Vue {
     return this.getterLang === 'zh' ? `${link}/zh` : link
   }
 
+  get releasesLink(): string {
+    return `${this.mqttxWebsite}/changelogs/v${this.version}`
+  }
+
   private goToLink(url: string) {
     const windowUrl = window.open(url)
     if (windowUrl) {
@@ -142,6 +156,27 @@ export default class About extends Vue {
       max-width: 700px;
       margin-left: 120px;
       margin-right: 60px;
+      .version {
+        font-size: 24px;
+        margin-bottom: 16px;
+        color: var(--color-text-title);
+        font-weight: 600;
+      }
+      .help {
+        margin-bottom: 24px;
+        .web-link {
+          padding-right: 12px;
+          padding-left: 12px;
+          border-right: 1px solid var(--color-border-default);
+          &:first-child {
+            padding-left: 0px;
+          }
+          &:last-child {
+            border-right: none;
+            padding-right: 0px;
+          }
+        }
+      }
       .description {
         max-width: 560px;
         line-height: 1.6;

diff --git a/web/src/views/connections/ConnectionForm.vue b/web/src/views/connections/ConnectionForm.vue
@@ -421,12 +421,6 @@
             </el-row>
           </el-card>
         </el-collapse-transition>
-
-        <a href="javascript:;" @click="save">
-          <el-button>
-            {{ $t('connections.connectBtn') }}
-          </el-button>
-        </a>
       </div>
     </el-form>
   </div>

diff --git a/web/vue.config.js b/web/vue.config.js
@@ -1,5 +1,7 @@
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
+process.env.VUE_APP_VERSION = require('./package.json').version
+
 module.exports = {
   publicPath: '/online-mqtt-client/',
   outputDir: 'dist/online-mqtt-client',