From 58e8145f0ea644462eecde723bc1753ea8bd2855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Wed, 8 Feb 2023 16:25:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=BC=B9=E7=AA=97=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/logo_text_green.png        | Bin 0 -> 3703 bytes
 src/i18n/langs/en.json                    |   2 +
 src/i18n/langs/ja.json                    |   2 +
 src/i18n/langs/zh.json                    |   2 +
 src/layout/components/NavHeader/About.vue | 114 ++++++++++++++++++++++
 src/layout/components/NavHeader/Help.vue  |  39 ++++----
 6 files changed, 142 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/img/logo_text_green.png
 create mode 100644 src/layout/components/NavHeader/About.vue

diff --git a/src/assets/img/logo_text_green.png b/src/assets/img/logo_text_green.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d7ae3fb42a9ab306869daa5473f9e004e4e591c
GIT binary patch
literal 3703
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
VqsU~eY54#E002ovPDHLkV1mwYG1veA

literal 0
HcmV?d00001

diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index ce499bfd8..35c364deb 100644
--- a/src/i18n/langs/en.json
+++ b/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",
diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
index 3a273f1ab..ad1a36c00 100644
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -430,6 +430,8 @@
     "ReLoginErr": "ログイン時間が 5 分を超えました。もう一度ログインしてください"
   },
   "common": {
+    "About": "について",
+    "PermissionCompany": "授权公司",
     "ApproverNumbers": "承認者数",
     "Overview": "概要",
     "Now": "今",
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index 6de9a4c6c..058e6d3d9 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -426,6 +426,8 @@
     "ReLoginErr": "登录时长已超过 5 分钟，请重新登录"
   },
   "common": {
+    "About": "关于",
+    "PermissionCompany": "授权公司",
     "Filename": "文件名",
     "ApproverNumbers": "审批人数量",
     "Overview": "概览",
diff --git a/src/layout/components/NavHeader/About.vue b/src/layout/components/NavHeader/About.vue
new file mode 100644
index 000000000..a5806271a
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/NavHeader/Help.vue b/src/layout/components/NavHeader/Help.vue
index d0cab80f0..4f670f98e 100644
--- a/src/layout/components/NavHeader/Help.vue
+++ b/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')