From c2af2179b0a3671b3db1a46242e4dbe3c428c442 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Thu, 20 Feb 2020 17:42:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0Header=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/performance/App.vue              | 14 ++-
 .../performance/components/HeaderTopMenus.vue | 39 +++++++++
 .../src/performance/components/HeaderUser.vue | 85 +++++++++----------
 3 files changed, 89 insertions(+), 49 deletions(-)
 create mode 100644 frontend/src/performance/components/HeaderTopMenus.vue

diff --git a/frontend/src/performance/App.vue b/frontend/src/performance/App.vue
index 45dadf7905..f4754e9ec4 100644
--- a/frontend/src/performance/App.vue
+++ b/frontend/src/performance/App.vue
@@ -1,8 +1,15 @@
 <template>
   <el-col v-if="auth">
     <el-row id="header-top" type="flex" justify="space-between" align="middle">
-      <a class="logo"/>
-      <ms-user/>
+      <el-col :span="4">
+        <a class="logo"/>
+      </el-col>
+      <el-col :span="10">
+        <ms-top-menus/>
+      </el-col>
+      <el-col :span="10">
+       <ms-user/>
+      </el-col>
     </el-row>
     <el-row id="header-bottom" type="flex" justify="space-between" align="middle">
       <el-col :span="10">
@@ -26,6 +33,7 @@
 
 <script>
   import MsMenus from "./components/HeaderMenus";
+  import MsTopMenus from "./components/HeaderTopMenus";
   import MsSetting from "./components/HeaderSetting";
   import MsView from "./components/router/View";
   import MsUser from "./components/HeaderUser";
@@ -49,7 +57,7 @@
         window.location.href = "/login"
       });
     },
-    components: {MsWebSocket, MsUser, MsMenus, MsSetting, MsView},
+    components: {MsWebSocket, MsUser, MsMenus, MsSetting, MsView, MsTopMenus},
     methods: {
     }
   }
diff --git a/frontend/src/performance/components/HeaderTopMenus.vue b/frontend/src/performance/components/HeaderTopMenus.vue
new file mode 100644
index 0000000000..2c374f15fb
--- /dev/null
+++ b/frontend/src/performance/components/HeaderTopMenus.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-menu mode="horizontal" menu-trigger="click"
+           background-color="rgb(44, 42, 72)"
+           class="header-top-menus"
+           text-color="#F2F2F2"
+           active-text-color="#fff"
+           :default-active="$route.path"
+           router>
+    <el-menu-item index="1">功能测试</el-menu-item>
+    <el-menu-item index="/createTest" onselectstart="return false">性能测试</el-menu-item>
+    <el-menu-item index="/setting" onselectstart="return false">系统设置</el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+  export default {
+    name: "MsTopMenus"
+  }
+</script>
+<style>
+  .header-top-menus.el-menu--horizontal > li {
+    height: 40px;
+    line-height: 40px;
+    color: inherit;
+  }
+
+  .header-top-menus.el-menu--horizontal > li.el-submenu > * {
+    height: 39px;
+    line-height: 40px;
+    color: inherit;
+  }
+
+  .header-top-menus.el-menu--horizontal > li.is-active {
+    background: #595591 !important;
+  }
+</style>
+<style scoped>
+
+</style>
diff --git a/frontend/src/performance/components/HeaderUser.vue b/frontend/src/performance/components/HeaderUser.vue
index 276a819539..00d2acb855 100644
--- a/frontend/src/performance/components/HeaderUser.vue
+++ b/frontend/src/performance/components/HeaderUser.vue
@@ -1,46 +1,44 @@
 <template>
-  <div class="ms-org-ws">
-    <el-row :gutter="10" style="height:200px;">
-      <el-col :span="16" :offset="4">
-        <el-menu :unique-opened="true" mode="horizontal" router
-                 menu-trigger="click"
-                 class="header-user-menu"
-                 background-color="rgb(44, 42, 72)"
-                 text-color="#fff">
-          <el-submenu index="1" popper-class="submenu">
-            <template slot="title">组织</template>
-            <label v-for="(item,index) in organizationList" :key="index">
-              <el-menu-item @click="clickMenu(item)">{{item.name}}
-                <i class="el-icon-check"
-                   v-if="item.id === currentUserInfo.lastSourceId || item.id === workspaceParentId"></i>
-              </el-menu-item>
-            </label>
-          </el-submenu>
-          <el-submenu index="2" popper-class="submenu">
-            <template slot="title">工作空间</template>
-            <label v-for="(item,index) in workspaceList" :key="index">
-              <el-menu-item @click="clickMenu(item)">
-                {{item.name}}
-                <i class="el-icon-check" v-if="item.id === currentUserInfo.lastSourceId"></i>
-              </el-menu-item>
-            </label>
-          </el-submenu>
-        </el-menu>
-      </el-col>
+  <el-row>
+    <el-col :span="10" :offset="8">
+      <el-menu :unique-opened="true" mode="horizontal" router
+               menu-trigger="click"
+               class="header-user-menu"
+               background-color="rgb(44, 42, 72)"
+               text-color="#fff">
+        <el-submenu index="1" popper-class="submenu">
+          <template slot="title">组织</template>
+          <label v-for="(item,index) in organizationList" :key="index">
+            <el-menu-item @click="clickMenu(item)">{{item.name}}
+              <i class="el-icon-check"
+                 v-if="item.id === currentUserInfo.lastSourceId || item.id === workspaceParentId"></i>
+            </el-menu-item>
+          </label>
+        </el-submenu>
+        <el-submenu index="2" popper-class="submenu">
+          <template slot="title">工作空间</template>
+          <label v-for="(item,index) in workspaceList" :key="index">
+            <el-menu-item @click="clickMenu(item)">
+              {{item.name}}
+              <i class="el-icon-check" v-if="item.id === currentUserInfo.lastSourceId"></i>
+            </el-menu-item>
+          </label>
+        </el-submenu>
+      </el-menu>
+    </el-col>
 
-      <el-col :span="4">
-        <el-dropdown size="medium" @command="handleCommand">
-          <span class="dropdown-link">
-              {{currentUser.name}}<i class="el-icon-caret-bottom el-icon--right"/>
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="personal">个人信息</el-dropdown-item>
-            <el-dropdown-item command="logout">退出系统</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </el-col>
-    </el-row>
-  </div>
+    <el-col :span="3" :offset="3">
+      <el-dropdown size="medium" @command="handleCommand">
+        <span class="dropdown-link">
+            {{currentUser.name}}<i class="el-icon-caret-bottom el-icon--right"/>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="personal">个人信息</el-dropdown-item>
+          <el-dropdown-item command="logout">退出系统</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
@@ -139,11 +137,6 @@
     cursor: pointer;
     font-size: 12px;
     color: rgb(245, 245, 245);
-  }
-
-  .ms-org-ws {
-    width: 30%;
-    height: 40px;
     line-height: 40px;
   }