feat: 添加版本信息弹窗展示

src/i18n/langs/en.json

@@ -430,6 +430,8 @@
     "ReLoginErr": "Login time has exceeded 5 minutes, please login again"
   },
   "common": {
+    "About": "About",
+    "PermissionCompany": "Permission company",
     "ApproverNumbers": "Approver numbers",
     "Overview": "Overview",
     "Now": "Now",

src/i18n/langs/ja.json

@@ -430,6 +430,8 @@
     "ReLoginErr": "ログイン時間が 5 分を超えました。もう一度ログインしてください"
   },
   "common": {
+    "About": "について",
+    "PermissionCompany": "授权公司",
     "ApproverNumbers": "承認者数",
     "Overview": "概要",
     "Now": "今",

src/i18n/langs/zh.json

@@ -426,6 +426,8 @@
     "ReLoginErr": "登录时长已超过 5 分钟，请重新登录"
   },
   "common": {
+    "About": "关于",
+    "PermissionCompany": "授权公司",
     "Filename": "文件名",
     "ApproverNumbers": "审批人数量",
     "Overview": "概览",

src/layout/components/NavHeader/About.vue

@@ -0,0 +1,114 @@
+<template>
+  <Dialog
+    v-if="iVisible"
+    :title="''"
+    class="about-dialog"
+    :visible.sync="iVisible"
+    width="50%"
+    top="10%"
+    :close-on-click-modal="false"
+    :show-cancel="false"
+    :show-confirm="false"
+  >
+    <div class="box">
+      <div class="head">
+        <img :src="logoTextSrc" class="sidebar-logo-text" alt="logo">
+      </div>
+      <div class="text">{{ $tc('ops.version') }}：<strong> dev </strong> <span v-if="!publicSettings.XPACK_LICENSE_IS_VALID"> GPLv3. </span></div>
+      <div class="text">{{ $tc('common.PermissionCompany') }}：{{ corporation }}</div>
+      <div class="text">
+        <span @click="onClick('github')">
+          <i class="fa fa-github icon" />github
+        </span>
+      </div>
+      <div class="text">
+        <span @click="onClick('download')">
+          <i class="fa fa-download icon" />{{ $tc('common.Download') }}
+        </span>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    Dialog
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      logoTextSrc: require('@/assets/img/logo_text_green.png')
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'publicSettings'
+    ]),
+    iVisible: {
+      set(val) {
+        this.$emit('update:visible', val)
+      },
+      get() {
+        return this.visible
+      }
+    },
+    corporation() {
+      return this.publicSettings.XPACK_LICENSE_INFO.corporation
+    }
+  },
+  methods: {
+    onClick(type) {
+      switch (type) {
+        case 'download':
+          window.open('/core/download/', '_blank')
+          break
+        case 'github':
+          window.open('https://github.com/jumpserver/jumpserver', '_blank')
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.about-dialog {
+  &>>> .el-dialog__header {
+    background-color: #FAFBFD;
+    border-bottom: none;
+  }
+  &>>> .el-dialog__body {
+    background-color: #FAFBFD;
+    padding: 10px 30px 20px;
+  }
+  &>>> .el-dialog__footer {
+    padding: 0;
+  }
+}
+.head {
+  text-align: center;
+}
+.box {
+  .text {
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #666;
+    .icon {
+      margin-right: 4px;
+    }
+    span {
+      color: var(--color-info);
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/layout/components/NavHeader/Help.vue

@@ -1,23 +1,31 @@
 <template>
-  <el-dropdown :show-timeout="50" @command="handleCommand">
-    <span class="el-dropdown-link" style="vertical-align: middle;">
-      <svg-icon icon-class="question-mark" style="font-size: 16px;" />
-    </span>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item command="docs">{{ $t('common.nav.Docs') }}</el-dropdown-item>
-      <el-dropdown-item command="support">{{ $t('common.nav.Support') }}</el-dropdown-item>
-      <el-dropdown-item command="toolsDownload">{{ $t('common.nav.Download') }}</el-dropdown-item>
-      <el-dropdown-item v-if="!hasLicence" command="enterprise">{{ $t('common.nav.EnterpriseEdition') }}</el-dropdown-item>
-      <el-dropdown-item command="github">GITHUB</el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
+  <div>
+    <el-dropdown :show-timeout="50" @command="handleCommand">
+      <span class="el-dropdown-link" style="vertical-align: middle;">
+        <svg-icon icon-class="question-mark" style="font-size: 16px;" />
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="docs">{{ $t('common.nav.Docs') }}</el-dropdown-item>
+        <el-dropdown-item command="support">{{ $t('common.nav.Support') }}</el-dropdown-item>
+        <el-dropdown-item v-if="!hasLicence" command="enterprise">{{ $t('common.nav.EnterpriseEdition') }}</el-dropdown-item>
+        <el-dropdown-item command="about">{{ $tc('common.About') }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <About :visible.sync="visible" />
+  </div>
 </template>
 
 <script>
+import About from './About.vue'
+
 export default {
   name: 'Help',
+  components: {
+    About
+  },
   data() {
     return {
+      visible: false,
       URLSite: {
         HELP_DOCUMENT_URL: '',
         HELP_SUPPORT_URL: ''
@@ -45,11 +53,8 @@ export default {
         case 'enterprise':
           window.open('https://jumpserver.org/enterprise.html', '_blank')
           break
-        case 'toolsDownload':
-          window.open('/core/download/', '_blank')
-          break
-        case 'github':
-          window.open('https://github.com/jumpserver/jumpserver', '_blank')
+        case 'about':
+          this.visible = true
           break
         default:
           window.open(this.URLSite.HELP_DOCUMENT_URL, '_blank')