关于页

frontend/package.json

@@ -11,6 +11,7 @@
     "@ckeditor/ckeditor5-build-classic": "^18.0.0",
     "@ckeditor/ckeditor5-vue": "^1.0.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",

frontend/src/business/components/common/head/AboutUs.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-dialog
+    :title="$t('commons.about_us')"
+    :visible.sync="dialogVisible"
+    width="20%">
+
+    <el-row>
+      <el-col >
+        <el-link :underline="false" :href="websiteUrl">
+          <img class="logo" src="../../../../assets/favicon-彩色.png"/>
+        </el-link>
+        <el-link class="url" :href="websiteUrl" >
+          <span>{{websiteUrl}}</span>
+        </el-link>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col>
+        <div class="github">
+          <el-link :underline="false" :href="githubUrl">
+            <font-awesome-icon class="github-icon" :icon="['fab', 'github-square']"/>
+          </el-link>
+        </div>
+        <el-link class="url" :href="githubUrl">
+          <span>{{githubUrl}}</span>
+        </el-link>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col class="version">
+        <span>版本:</span> &nbsp;
+        <span>{{version}}</span>
+      </el-col>
+    </el-row>
+
+  </el-dialog>
+
+</template>
+
+<script>
+    export default {
+      name: "AboutUs",
+      data() {
+        return{
+          dialogVisible: false,
+          githubUrl: 'https://github.com/metersphere/metersphere',
+          websiteUrl: 'https://github.com/metersphere/metersphere',
+          version: '1.0.1'
+        }
+      },
+      created() {
+        this.getVersion();
+      },
+      methods: {
+        open() {
+          this.dialogVisible = true;
+        },
+        getVersion() {
+          this.$get('/system/version', response => {
+            this.version = response.data;
+          });
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .logo {
+    height: 30px;
+    line-height: 30px;
+    vertical-align:middle
+  }
+
+  .version {
+    height: 30px;
+    line-height: 30px;
+    margin-left: 5px;
+  }
+
+  .github-icon {
+    font-size: 20px;
+    margin-left: 5px;
+  }
+
+  .github {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    display: inline-block;
+  }
+
+
+  .el-row {
+    margin-bottom: 3%;
+  }
+
+  .logo:hover{
+    color: deepskyblue;
+  }
+
+  .url {
+    margin-left: 5px;
+  }
+
+
+</style>

frontend/src/business/components/common/head/HeaderUser.vue

@@ -7,16 +7,21 @@
       <el-dropdown-menu>
         <el-dropdown-item command="personal">{{$t('commons.personal_information')}}</el-dropdown-item>
         <el-dropdown-item command="logout">{{$t('commons.exit_system')}}</el-dropdown-item>
+        <el-dropdown-item command="about">{{$t('commons.about_us')}} <i class="el-icon-info"/></el-dropdown-item>
       </el-dropdown-menu>
     </template>
+
+    <about-us ref="aboutUs"/>
   </el-dropdown>
 </template>
 
 <script>
   import {getCurrentUser} from "../../../../common/js/utils";
+  import AboutUs from "./AboutUs";
 
   export default {
     name: "MsUser",
+    components: {AboutUs},
     computed: {
       currentUser: () => {
         return getCurrentUser();
@@ -35,6 +40,9 @@
               window.location.href = "/login";
             });
             break;
+          case "about":
+            this.$refs.aboutUs.open();
+            break;
           default:
             break;
         }

frontend/src/common/js/icon.js

@@ -1,11 +1,12 @@
 import {library} from '@fortawesome/fontawesome-svg-core'
 import {fas} from '@fortawesome/free-solid-svg-icons'
 import {far} from '@fortawesome/free-regular-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
 export default {
   install(Vue) {
-    library.add(fas, far);
+    library.add(fas, far, fab);
     Vue.component('font-awesome-icon', FontAwesomeIcon);
   }
 }

frontend/src/i18n/en-US.js

@@ -4,6 +4,7 @@ export default {
     'organization': 'Organization',
     'setting': 'Setting',
     'project': 'Project',
+    'about_us': 'About Us',
     current_project: 'Current Project',
     'name': 'Name',
     'description': 'Description',

frontend/src/i18n/zh-CN.js

@@ -4,6 +4,7 @@ export default {
     'organization': '组织',
     'setting': '设置',
     'project': '项目',
+    'about_us': '关于',
     current_project: '当前项目',
     'name': '名称',
     'description': '描述',

frontend/src/i18n/zh-TW.js

@@ -4,6 +4,7 @@ export default {
     'organization': '組織',
     'setting': '設置',
     'project': '項目',
+    'about_us': '關於',
     current_project: '當前項目',
     'name': '名稱',
     'description': '描述',