样式优化

package.json

@@ -10,12 +10,12 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
-    "axios": "^0.21.4",
+    "axios": "^0.25.0",
     "element-ui": "^2.15.6",
     "lodash": "^4.17.21",
-    "query-string": "^7.0.1",
+    "query-string": "^7.1.0",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.2",
+    "vue-router": "^3.5.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
@@ -30,8 +30,8 @@
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "^7.18.0",
     "sass": "1.32.13",
-    "vite": "^2.5.10",
-    "vite-plugin-vue2": "^1.8.2",
+    "vite": "^2.7.13",
+    "vite-plugin-vue2": "^1.9.2",
     "vue-template-compiler": "^2.6.14"
   }
 }

src/components/base/AppCard.vue

@@ -24,9 +24,11 @@ export default {
   background: #ffffff;
   box-shadow: 0 1px 6px 0 rgb(228 232 235 / 20%);
   border-radius: 8px;
-  margin-bottom: 20px;
   padding: 32px;
 }
+.app-card + .app-card {
+  margin-top: 20px;
+}
 .app-card-hd {
   display: flex;
 }

src/components/layout/Aside.vue

@@ -61,17 +61,17 @@ export default {
 
 <style lang="scss">
 .app-aside {
-  position: sticky;
-  top: 0;
   width: 200px;
-  z-index: 100;
   background: #fff;
   border-right: 1px solid rgba(0, 0, 0, 0.12);
   overflow-x: hidden;
   overflow-y: auto;
   flex: 0 0 200px;
+  box-sizing: content-box;
 }
 .nav {
+  position: fixed;
+  width: 200px;
   margin: 20px 0;
   .el-menu {
     border-right: 0;

src/components/layout/Header.vue

@@ -9,12 +9,20 @@
     <div class="app-header-right">
       <el-dropdown>
         <div class="avatar">
-          <img :src="user.avatar || 'https://zws-imgs-pub.ezijing.com/pc/base/logo.png'" />
+          <img :src="user.avatar || 'https://webapp-pub.ezijing.com/website/base/images/avatar.svg'" />
+        </div>
+        <el-dropdown-menu slot="dropdown" style="width: 280px">
+          <div class="app-header-user">
+            <div class="app-header-user-avatar">
+              <img :src="user.avatar || 'https://webapp-pub.ezijing.com/website/base/images/avatar.svg'" />
+            </div>
+            <div class="app-header-user-main">
+              <h3>{{ user.realname || user.nickname }}</h3>
+              <p>{{ user.email || user.mobile }}</p>
+            </div>
+            <div class="app-header-user-buttons">
+              <el-button size="medium" round @click="logout">退出登录</el-button>
             </div>
-        <el-dropdown-menu slot="dropdown">
-          <div class="user">
-            <div class="user-name">{{ user.realname || user.nickname }}</div>
-            <el-button round size="medium" class="btn-logout" @click="logout">退出登录</el-button>
           </div>
         </el-dropdown-menu>
       </el-dropdown>
@@ -46,6 +54,9 @@ export default {
 
 <style lang="scss">
 .app-header {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
   padding: 0 20px;
   display: flex;
   align-items: center;
@@ -53,7 +64,6 @@ export default {
   height: 64px;
   background-color: #3276fc;
   color: #fff;
-
   .logo {
     width: 120px;
   }
@@ -83,15 +93,50 @@ export default {
       border-radius: 50%;
       overflow: hidden;
     }
+    &:hover {
+      background-color: rgba(60, 64, 67, 0.08);
+    }
   }
 }
-.user {
+.app-header-user {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
   padding: 16px;
 }
-.user-name {
-  margin-bottom: 20px;
+.app-header-user-avatar {
+  margin-bottom: 6px;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.app-header-user-main {
+  h3 {
+    color: #202124;
+    font: 500 16px/22px Helvetica, Arial, sans-serif;
+    letter-spacing: 0.29px;
+    margin: 0;
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  p {
+    color: #5f6368;
+    font: 400 14px/19px Helvetica, Arial, sans-serif;
+    letter-spacing: normal;
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 }
-.btn-logout {
-  width: 200px;
+.app-header-user-buttons {
+  padding-top: 16px;
 }
 </style>

src/modules/settings/roles/api.js

@@ -7,6 +7,13 @@ export function getRoleList(params) {
   return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/application/roles`, { params })
 }
 
+/**
+ * 获取角色详情
+ */
+export function getRole(params) {
+  return httpRequest.get(`/api/permissions/admin/v1/application/${params.id}/role`, { params })
+}
+
 /**
  * 创建角色
  */

src/modules/settings/roles/views/Users.vue

@@ -2,6 +2,7 @@
   <app-card>
     <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
       <template #header-aside>
+        <h2>{{ role.name }}</h2>
         <el-button type="primary" icon="el-icon-plus" @click="visible = true">添加成员</el-button>
       </template>
       <template #footer>
@@ -16,14 +17,14 @@
 // 组件
 
 // 接口
-import { getRoleUsers, addRoleUsers, deleteRoleUsers } from '../api'
+import { getRole, getRoleUsers, addRoleUsers, deleteRoleUsers } from '../api'
 
 export default {
   props: { id: { type: String, required: true } },
   components: { UserSelect: () => import('@/components/base/UserSelect.vue') },
   data() {
     return {
-      roles: [],
+      role: {},
       visible: false,
       multipleSelection: [] // 已选择的数据
     }
@@ -50,6 +51,9 @@ export default {
       }
     }
   },
+  beforeMount() {
+    this.getRole()
+  },
   methods: {
     // 选择
     handleSelectionChange(value) {
@@ -79,7 +83,26 @@ export default {
         this.visible = false
         this.$refs.list.refetch()
       })
+    },
+    // 获取角色详情
+    getRole() {
+      getRole({ id: this.id }).then(res => {
+        this.role = res.data
+      })
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+::v-deep .table-list-hd-aside {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  h2 {
+    font-size: 18px;
+    font-weight: 700;
+  }
+}
+</style>