update: 显示使用手册

src/components/layout/Header.vue

@@ -4,7 +4,7 @@
       <router-link to="/"><img src="https://zws-imgs-pub.ezijing.com/pc/base/ezijing-logo-white.svg" /></router-link>
     </div>
     <div class="app-header-right">
-      <i class="el-icon-question"></i>
+      <i class="el-icon-question" @click="handleManual"></i>
       <el-dropdown>
         <div class="avatar">
           <img :src="user.avatar || 'https://zws-imgs-pub.ezijing.com/pc/base/logo.png'" />
@@ -33,6 +33,9 @@ export default {
       this.$store.dispatch('logout').then(() => {
         window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}`
       })
+    },
+    handleManual(id) {
+      this.$router.push({ path: '/system/user-manual', query: { id }})
     }
   }
 }
@@ -57,7 +60,8 @@ export default {
   i{
     font-size:20px;
     line-height:40px;
-    margin-right:10px;
+    margin-right:20px;
+    cursor: pointer;
   }
   .avatar {
     width: 40px;

src/modules/system/views/manual/ShowManual.vue

+<template>
+  <app-card>
+    <el-tabs v-model="tabsActive" type="card">
+      <el-tab-pane label="使用说明" name="INSTRUCTIONS">
+        <div v-html="intro_content"></div>
+      </el-tab-pane>
+      <el-tab-pane label="常见问题" name="COMMON_PROBLEM">
+        <div v-html="ques_content"></div>
+      </el-tab-pane>
+    </el-tabs>
+  </app-card>
+</template>
+<script>
+import AppCard from '@/components/base/AppCard.vue'
+import { getUserManual } from '../api'
+export default {
+  components: { AppCard },
+  data() {
+    return {
+      tabsActive: 'INSTRUCTIONS',
+      intro_content: '',
+      ques_content: ''
+    }
+  },
+  created() {
+    this.fetchGetManual()
+  },
+  methods: {
+    fetchGetManual() {
+      getUserManual().then(res => {
+        if (res.code === 0) {
+          this.intro_content = res.data.instructions
+          this.ques_content = res.data.common_problem
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file

src/modules/system/views/route.js

@@ -18,5 +18,9 @@ export default [
     path: 'manual',
     component: () => import('./manual/Index.vue'),
     meta: { roles: ['administrator'] }
+  },
+  {
+    path: 'user-manual',
+    component: () => import('./manual/ShowManual.vue')
   }
 ]
\ No newline at end of file