添加权限管理模块

admin/src/layout/components/Menu.vue

@@ -44,6 +44,14 @@
       <el-menu-item index="/user/list">用户列表</el-menu-item>
       <el-menu-item index="/user/account">账号设置</el-menu-item>
     </el-sub-menu>
+    <!-- 权限管理 -->
+    <el-sub-menu index="5">
+      <template #title>
+        <el-icon><Key /></el-icon>
+        <span>权限管理</span>
+      </template>
+      <el-menu-item index="/authority">权限设置</el-menu-item>
+    </el-sub-menu>
   </el-menu>
 </template>
 

admin/src/router/index.js

@@ -56,6 +56,11 @@ const routes = [
         path: '/website',
         name: '网站管理',
         component: () => import('@/views/website/Website.vue')
+      },
+      {
+        path: '/authority',
+        name: '权限管理',
+        component: () => import('@/views/authority/Authority.vue')
       }
     ]
   },

admin/src/views/authority/Authority.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-card>
+    <el-table :data="authorityTable" border style="width: 100%">
+      <el-table-column prop="name" label="角色名" align="center" />
+      <el-table-column prop="tag" label="权限标签" align="center">
+        <template #default="scope">
+          <el-tag :type="scope.row.tag !== 'admin' ? '' : 'success'" disable-transitions>{{
+            scope.row.tag
+          }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <el-button color="#626AEF" plain @click="authorityDialogVisible = true">权限设置</el-button>
+      </el-table-column>
+    </el-table>
+    <!-- 后台权限设置弹窗 -->
+    <el-dialog
+      v-model="authorityDialogVisible"
+      title="后台权限设置"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <span>This is a message</span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button color="#626AEF" plain @click="authorityDialogVisible = false"
+            >Cancel</el-button
+          >
+          <el-button color="#626AEF" @click="authorityDialogVisible = false"> Confirm </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const authorityTable = [
+  {
+    name: '管理员',
+    tag: 'admin'
+  },
+  {
+    name: '用户',
+    tag: 'user'
+  },
+  {
+    name: '测试',
+    tag: 'test'
+  }
+]
+const authorityDialogVisible = ref(false)
+</script>
+
+<style lang="scss" scoped></style>