diff --git a/frontend/src/views/Role/components/RoleDetail.vue b/frontend/src/views/Role/components/RoleDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af58b7f69c9865fd79464807a3a75ba5d76ec536
--- /dev/null
+++ b/frontend/src/views/Role/components/RoleDetail.vue
@@ -0,0 +1,40 @@
+<template>
+    <div>
+        <el-tree ref="tree" :data="authData" :show-checkbox="showEdit" node-key="menuName" :check-strictly="strictly"
+            :default-expanded-keys="[2, 3]" :default-checked-keys="checkedKeys">
+        </el-tree>
+
+        <div class="footer" v-if="showEdit">
+            <el-button>取 消</el-button>
+            <el-button type="primary">确 定</el-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+
+import { authData } from "./authData";
+
+const props = defineProps({
+    showEdit: {
+        type: Boolean,
+        default: true,
+    }
+})
+
+onMounted(() => {
+
+})
+
+const roleData = ref([])
+const checkedKeys = ref<string[]>([])
+const strictly = ref(true)
+
+</script>
+
+<style lang="scss" scoped>
+.footer {
+    text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/Role/components/authData.ts b/frontend/src/views/Role/components/authData.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f16d73e04fd903224538cdcc6e78d4416756bcf4
--- /dev/null
+++ b/frontend/src/views/Role/components/authData.ts
@@ -0,0 +1,129 @@
+// 整个系统需要控制权限的按钮配置项
+export let authData = [{
+    id: 1,
+    label: '概览',
+    isMenu: true,
+    menuName: 'overview',
+    children: []
+}, {
+    id: 2,
+    label: '系统',
+    isMenu: true,
+    menuName: 'cluster',
+    children: [{
+        id: 8,
+        btnId: 1,
+        label: 'rpm下发',
+        menuName: 'rpm_install',
+    }, {
+        id: 9,
+        btnId: 2,
+        label: 'rpm卸载',
+        menuName: 'rpm_uninstall',
+    }, {
+        id: 22,
+        btnId: 15,
+        label: '变更部门',
+        menuName: 'dept_change',
+    }]
+}, {
+    id: 3,
+    label: '批次',
+    isMenu: true,
+    menuName: 'batch',
+    children: [{
+        id: 10,
+        btnId: 3,
+        label: '编辑批次',
+        menuName: 'batch_update',
+    }, {
+        id: 11,
+        btnId: 4,
+        label: '删除批次',
+        menuName: 'batch_delete',
+    }]
+}, {
+    id: 4,
+    label: '用户管理',
+    isMenu: true,
+    menuName: 'usermanager',
+    children: [{
+        id: 12,
+        btnId: 5,
+        label: '添加用户',
+        menuName: 'user_add',
+    }, {
+        id: 13,
+        btnId: 6,
+        label: '导入用户',
+        menuName: 'user_import',
+    }, {
+        id: 14,
+        btnId: 7,
+        label: '编辑用户',
+        menuName: 'user_edit',
+    }, {
+        id: 15,
+        btnId: 8,
+        label: '重置密码',
+        menuName: 'user_reset',
+    }, {
+        id: 16,
+        btnId: 9,
+        label: '删除用户',
+        menuName: 'user_del',
+    }]
+}, {
+    id: 5,
+    label: '角色管理',
+    isMenu: true,
+    menuName: 'rolemanager',
+    children: [
+        {
+            id: 17,
+            btnId: 10,
+            label: '添加角色',
+            menuName: 'role_add',
+        }, {
+            id: 18,
+            btnId: 11,
+            label: '编辑角色',
+            menuName: 'role_update',
+        }, {
+            id: 19,
+            btnId: 12,
+            label: '删除角色',
+            menuName: 'role_delete',
+        }, {
+            id: 20,
+            btnId: 13,
+            label: '角色授权',
+            menuName: 'role_modify',
+        }]
+},
+{
+    id: 6,
+    label: '配置管理',
+    isMenu: true,
+    menuName: 'config',
+    children: [{
+        id: 21,
+        btnId: 14,
+        label: '配置下发',
+        menuName: 'config_install',
+    }]
+},
+{
+    id: 7,
+    label: '日志管理',
+    isMenu: true,
+    menuName: 'log',
+    children: []
+},
+{
+    id: 8,
+    label: '插件管理',
+    isMenu: true,
+    menuName: 'plugin',
+    children: []
+}];
\ No newline at end of file