优化坐席状态UI展示

src/assets/style/common.scss

@@ -270,7 +270,9 @@ html{
 .p-h-16{
     @include basePadding(0, $size16);
 }
-
+.p-8-16{
+    @include basePadding($size8, $size16);
+}
 .pl-22{
   padding-left: $size22;
 }

src/pages/layout/components/LayoutHeader.vue

@@ -18,21 +18,37 @@
         <!-- <el-badge :value="1" :max="99" class="item">
             <el-avatar size="medium" icon="el-icon-user-solid"></el-avatar>
         </el-badge> -->
-        <div class="mr-8 cursor-pointer layou-header-right-box " @mouseover="showInfo=true">
+        <div class="mr-16 cursor-pointer flex-row-center align-items-center" @mouseover="showInfo=true">
           <el-avatar size="medium" :src="userInfo.headUrl?userInfo.headUrl:defaultHeadUrl" ></el-avatar>
+          <span class="f16 color-fff ml-16">{{ userInfo.realName || userInfo.showName || '-' }}</span>
+        </div>
+        <div class="cursor-pointer border-radius-8 p-8-16" style="background-color:#00000010 ;">
+          <el-dropdown @command="handleCommand">
+            <div class="flex-row align-items-center">
+              <img :src="require(`@/assets/image/${agentStatus}.png`)" alt="" class="mr-8">
+              <span class="el-dropdown-link" style="color: white;">
+                {{agentStatusName}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="free">
+                空闲
+              </el-dropdown-item>
+              <el-dropdown-item command="busy">
+                忙碌
+              </el-dropdown-item>
+              <el-dropdown-item command="arrange">
+                话后整理
+              </el-dropdown-item>
+              <el-dropdown-item command="notReady">
+                示忙
+              </el-dropdown-item>
+              <el-dropdown-item command="rest">
+                小休
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </div>
-        <el-dropdown @command="handleCommand">
-          <span class="el-dropdown-link" style="color: white;">
-            {{agentStatusName}}<i class="el-icon-arrow-down el-icon--right"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="free">空闲</el-dropdown-item>
-            <el-dropdown-item command="busy">忙碌</el-dropdown-item>
-            <el-dropdown-item command="arrange">话后整理</el-dropdown-item>
-            <el-dropdown-item command="notReady">示忙</el-dropdown-item>
-            <el-dropdown-item command="rest">小休</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
         <!-- <div class="flex-row justify-content-between align-items-center border-t-solid-lighter-1 p-16 cursor-pointer">
           <div class="f16 color-text-regular">坐席状态</div>
           <div class="f16 color-text-secondary">