From 60ec1127ca1f82a77fbdb45504c0aefd484ab658 Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Wed, 31 May 2023 17:02:17 +0800
Subject: [PATCH] feat(help): add mqtt ebook download link

---
 src/views/help/index.vue     | 28 +++++++++++++++++++++++++++-
 web/src/views/help/index.vue | 28 +++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/views/help/index.vue b/src/views/help/index.vue
index 6ae717b545..f5e7d48b5c 100644
--- a/src/views/help/index.vue
+++ b/src/views/help/index.vue
@@ -1,6 +1,24 @@
 <template>
   <div class="help-view rightbar">
-    <h1 class="titlebar">{{ $t('help.helpMQTT') }}</h1>
+    <div class="help-view-header">
+      <h1 class="titlebar">{{ $t('help.helpMQTT') }}</h1>
+      <el-tooltip
+        v-if="getterLang === 'zh'"
+        placement="bottom"
+        :effect="theme !== 'light' ? 'light' : 'dark'"
+        content="2023 MQTT 协议入门教程"
+      >
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          class="ebook-link"
+          href="https://www.emqx.com/zh/resources/beginners-guide-to-the-mqtt-protocol?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-mqtt-ebook-zh"
+        >
+          下载 MQTT 电子书
+          <span>→</span>
+        </a>
+      </el-tooltip>
+    </div>
     <section class="help-top">
       <div v-for="item in helpTop" :key="item.icon" class="card" @click="goToLink(item.link)">
         <img :src="require(`@/assets/images/help/${item.icon}.png`)" :alt="item.icon" width="24" height="24" />
@@ -246,6 +264,14 @@ export default class Help extends Vue {
   > section:not(:last-child) {
     margin-bottom: 64px;
   }
+  .help-view-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .ebook-link {
+      display: block;
+    }
+  }
   .help-top {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
diff --git a/web/src/views/help/index.vue b/web/src/views/help/index.vue
index 6ae717b545..f5e7d48b5c 100644
--- a/web/src/views/help/index.vue
+++ b/web/src/views/help/index.vue
@@ -1,6 +1,24 @@
 <template>
   <div class="help-view rightbar">
-    <h1 class="titlebar">{{ $t('help.helpMQTT') }}</h1>
+    <div class="help-view-header">
+      <h1 class="titlebar">{{ $t('help.helpMQTT') }}</h1>
+      <el-tooltip
+        v-if="getterLang === 'zh'"
+        placement="bottom"
+        :effect="theme !== 'light' ? 'light' : 'dark'"
+        content="2023 MQTT 协议入门教程"
+      >
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          class="ebook-link"
+          href="https://www.emqx.com/zh/resources/beginners-guide-to-the-mqtt-protocol?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-mqtt-ebook-zh"
+        >
+          下载 MQTT 电子书
+          <span>→</span>
+        </a>
+      </el-tooltip>
+    </div>
     <section class="help-top">
       <div v-for="item in helpTop" :key="item.icon" class="card" @click="goToLink(item.link)">
         <img :src="require(`@/assets/images/help/${item.icon}.png`)" :alt="item.icon" width="24" height="24" />
@@ -246,6 +264,14 @@ export default class Help extends Vue {
   > section:not(:last-child) {
     margin-bottom: 64px;
   }
+  .help-view-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .ebook-link {
+      display: block;
+    }
+  }
   .help-top {
     display: grid;
     grid-template-columns: repeat(3, 1fr);