diff --git a/ui/src/components/app-icon/icons/menu.ts b/ui/src/components/app-icon/icons/menu.ts
index 40eea6d5..8b692d19 100644
--- a/ui/src/components/app-icon/icons/menu.ts
+++ b/ui/src/components/app-icon/icons/menu.ts
@@ -142,4 +142,72 @@ export default {
       ])
     },
   },
+  'app-role': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M12.5 4.16667C11.35 4.16667 10.4167 5.09958 10.4167 6.25C10.4167 7.40042 11.35 8.33333 12.5 8.33333C13.65 8.33333 14.5833 7.40042 14.5833 6.25C14.5833 5.09958 13.65 4.16667 12.5 4.16667ZM8.75 6.25C8.75 4.17875 10.4292 2.5 12.5 2.5C14.5708 2.5 16.25 4.17875 16.25 6.25C16.25 8.32125 14.5708 10 12.5 10C10.4292 10 8.75 8.32125 8.75 6.25ZM10.2792 12.5C8.7625 12.5 7.5 13.7488 7.5 15.3333V16.6667H17.5V15.3333C17.5 13.7488 16.2375 12.5 14.7208 12.5H10.2792ZM5.83333 15.3333C5.83333 12.8479 7.825 10.8333 10.2792 10.8333H14.7208C17.175 10.8333 19.1667 12.8479 19.1667 15.3333V17.5833C19.1667 17.9975 18.8333 18.3333 18.425 18.3333H6.575C6.16667 18.3333 5.83333 17.9975 5.83333 17.5833V15.3333Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M7.08333 4.99998H2.5V16.6666H3.75C3.98012 16.6666 4.16667 16.8532 4.16667 17.0833V17.9166C4.16667 18.1468 3.98012 18.3333 3.75 18.3333H1.94036C1.25 18.3333 0.833334 17.9166 0.833334 17.0833V4.44034C0.833334 3.74998 1.25 3.33331 1.94036 3.33331H7.08333C7.31345 3.33331 7.5 3.51986 7.5 3.74998V4.58331C7.5 4.81343 7.31345 4.99998 7.08333 4.99998Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M3.66667 7.49998H7.16667C7.25507 7.49998 7.33986 7.54388 7.40237 7.62202C7.46488 7.70016 7.5 7.80614 7.5 7.91665V8.74998C7.5 8.86049 7.46488 8.96647 7.40237 9.04461C7.33986 9.12275 7.25507 9.16665 7.16667 9.16665H3.66667C3.57826 9.16665 3.49348 9.12275 3.43097 9.04461C3.36845 8.96647 3.33333 8.86049 3.33333 8.74998V7.91665C3.33333 7.80614 3.36845 7.70016 3.43097 7.62202C3.49348 7.54388 3.57826 7.49998 3.66667 7.49998Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M3.58333 9.99998H5.58333C5.64964 9.99998 5.71323 10.0439 5.76011 10.122C5.80699 10.2002 5.83333 10.3061 5.83333 10.4166V11.25C5.83333 11.3605 5.80699 11.4665 5.76011 11.5446C5.71323 11.6227 5.64964 11.6666 5.58333 11.6666H3.58333C3.51703 11.6666 3.45344 11.6227 3.40656 11.5446C3.35967 11.4665 3.33333 11.3605 3.33333 11.25V10.4166C3.33333 10.3061 3.35967 10.2002 3.40656 10.122C3.45344 10.0439 3.51703 9.99998 3.58333 9.99998Z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+  'app-role-active': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M12.5 2.5C10.4292 2.5 8.75 4.17875 8.75 6.25C8.75 8.32125 10.4292 10 12.5 10C14.5708 10 16.25 8.32125 16.25 6.25C16.25 4.17875 14.5708 2.5 12.5 2.5Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M10.2792 10.8333C7.825 10.8333 5.83333 12.8479 5.83333 15.3333V17.5833C5.83333 17.9975 6.16667 18.3333 6.575 18.3333H18.425C18.8333 18.3333 19.1667 17.9975 19.1667 17.5833V15.3333C19.1667 12.8479 17.175 10.8333 14.7208 10.8333H10.2792Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M7.08333 4.99998H2.5V16.6666H3.75C3.98012 16.6666 4.16667 16.8532 4.16667 17.0833V17.9166C4.16667 18.1468 3.98012 18.3333 3.75 18.3333H1.94036C1.25 18.3333 0.833334 17.9166 0.833334 17.0833V4.44034C0.833334 3.74998 1.25 3.33331 1.94036 3.33331H7.08333C7.31345 3.33331 7.5 3.51986 7.5 3.74998V4.58331C7.5 4.81343 7.31345 4.99998 7.08333 4.99998Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M3.66667 7.49998H7.16667C7.25507 7.49998 7.33986 7.54388 7.40237 7.62202C7.46488 7.70016 7.5 7.80614 7.5 7.91665V8.74998C7.5 8.86049 7.46488 8.96647 7.40237 9.04461C7.33986 9.12275 7.25507 9.16665 7.16667 9.16665H3.66667C3.57826 9.16665 3.49348 9.12275 3.43097 9.04461C3.36845 8.96647 3.33333 8.86049 3.33333 8.74998V7.91665C3.33333 7.80614 3.36845 7.70016 3.43097 7.62202C3.49348 7.54388 3.57826 7.49998 3.66667 7.49998Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M3.58333 9.99998H5.58333C5.64964 9.99998 5.71323 10.0439 5.76011 10.122C5.80699 10.2002 5.83333 10.3061 5.83333 10.4166V11.25C5.83333 11.3605 5.80699 11.4665 5.76011 11.5446C5.71323 11.6227 5.64964 11.6666 5.58333 11.6666H3.58333C3.51703 11.6666 3.45344 11.6227 3.40656 11.5446C3.35967 11.4665 3.33333 11.3605 3.33333 11.25V10.4166C3.33333 10.3061 3.35967 10.2002 3.40656 10.122C3.45344 10.0439 3.51703 9.99998 3.58333 9.99998Z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
 }
diff --git a/ui/src/components/common-list/index.vue b/ui/src/components/common-list/index.vue
index 28e16500..95d4cc34 100644
--- a/ui/src/components/common-list/index.vue
+++ b/ui/src/components/common-list/index.vue
@@ -71,11 +71,12 @@ defineExpose({
 /* 通用 ui li样式 */
 .common-list {
   li {
-    padding: 8px 16px;
+    padding: 8px;
     font-weight: 400;
-    color: var(--el-text-color-regular);
     font-size: 14px;
     margin-bottom: 4px;
+    min-height: 24px;
+    line-height: 24px;
     &.active {
       background: var(--el-color-primary-light-9);
       border-radius: 4px;
diff --git a/ui/src/router/modules/system.ts b/ui/src/router/modules/system.ts
index 9433bba0..d3c5c2c9 100644
--- a/ui/src/router/modules/system.ts
+++ b/ui/src/router/modules/system.ts
@@ -18,10 +18,7 @@ const systemRouter = {
         activeMenu: '/system',
         parentPath: '/system',
         parentName: 'system',
-        permission: [
-          RoleConst.ADMIN,
-          PermissionConst.USER_READ
-        ],
+        permission: [RoleConst.ADMIN, PermissionConst.USER_READ],
       },
       component: () => import('@/views/system/user-manage/index.vue'),
     },
@@ -29,8 +26,8 @@ const systemRouter = {
       path: '/system/role',
       name: 'role',
       meta: {
-        icon: 'app-resource-authorization', // TODO
-        iconActive: 'app-resource-authorization-active', // TODO
+        icon: 'app-role',
+        iconActive: 'app-role-active',
         title: 'views.role.title',
         activeMenu: '/system',
         parentPath: '/system',
@@ -59,8 +56,9 @@ const systemRouter = {
         permission: [
           new ComplexPermission(
             [RoleConst.WORKSPACE_MANAGE, RoleConst.ADMIN],
-            [PermissionConst.WORKSPACE_READ.getWorkspacePermissionWorkspaceManageRole,
-             PermissionConst.WORKSPACE_READ 
+            [
+              PermissionConst.WORKSPACE_READ.getWorkspacePermissionWorkspaceManageRole,
+              PermissionConst.WORKSPACE_READ,
             ],
             [EditionConst.IS_EE],
             'OR',
@@ -144,9 +142,9 @@ const systemRouter = {
                 [RoleConst.ADMIN],
                 [PermissionConst.SHARED_KNOWLEDGE_READ],
                 [EditionConst.IS_EE],
-                'OR'
-              )
-            ]
+                'OR',
+              ),
+            ],
           },
           component: () => import('@/views/system-shared/KnowLedgeSharedIndex.vue'),
         },
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 7781c72b..80a62cc1 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -399,7 +399,6 @@ h5 {
 .color-secondary {
   color: var(--app-text-color-secondary);
 }
-
 .color-input-placeholder {
   color: var(--app-input-color-placeholder);
 }
diff --git a/ui/src/views/system/role/component/AddMemberDrawer.vue b/ui/src/views/system/role/component/AddMemberDrawer.vue
index aa25539d..4707de94 100644
--- a/ui/src/views/system/role/component/AddMemberDrawer.vue
+++ b/ui/src/views/system/role/component/AddMemberDrawer.vue
@@ -12,12 +12,10 @@
       />
     </template>
     <template #footer>
-      <div style="flex: auto">
-        <el-button @click="handleCancel">{{ $t('common.cancel') }}</el-button>
-        <el-button type="primary" @click="handleAdd()" :loading="loading">
-          {{ $t('common.add') }}
-        </el-button>
-      </div>
+      <el-button @click="handleCancel">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleAdd()" :loading="loading">
+        {{ $t('common.add') }}
+      </el-button>
     </template>
   </el-drawer>
 </template>
diff --git a/ui/src/views/system/role/component/Member.vue b/ui/src/views/system/role/component/Member.vue
index 7460eeb9..6fc09da0 100644
--- a/ui/src/views/system/role/component/Member.vue
+++ b/ui/src/views/system/role/component/Member.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="p-24 pt-0">
     <div class="flex-between mb-16">
-      <el-button type="primary" @click="handleAdd"
-        v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-        [PermissionConst.ROLE_ADD_MEMBER.getWorkspacePermission],[], 'OR')"
+      <el-button
+        type="primary"
+        @click="handleAdd"
+        v-hasPermission="
+          new ComplexPermission(
+            [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+            [PermissionConst.ROLE_ADD_MEMBER.getWorkspacePermission],
+            [],
+            'OR',
+          )
+        "
       >
         {{ $t('views.role.member.add') }}
       </el-button>
@@ -43,10 +51,20 @@
             :content="`${$t('views.role.member.delete.button')}`"
             placement="top"
           >
-            <el-button type="primary" text @click.stop="handleDelete(row)"
-              v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-              [PermissionConst.ROLE_REMOVE_MEMBER.getWorkspacePermission],[], 'OR')"
+            <el-button
+              type="primary"
+              text
+              @click.stop="handleDelete(row)"
+              v-hasPermission="
+                new ComplexPermission(
+                  [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                  [PermissionConst.ROLE_REMOVE_MEMBER.getWorkspacePermission],
+                  [],
+                  'OR',
+                )
+              "
             >
+              <!-- TODO: 删除图标需要换 -->
               <el-icon>
                 <Delete />
               </el-icon>
diff --git a/ui/src/views/system/role/component/MemberFormContent.vue b/ui/src/views/system/role/component/MemberFormContent.vue
index be7ad270..f408eb0a 100644
--- a/ui/src/views/system/role/component/MemberFormContent.vue
+++ b/ui/src/views/system/role/component/MemberFormContent.vue
@@ -12,7 +12,7 @@
           </el-select>
         </el-form-item>
         <!-- 删除按钮 -->
-        <el-button @click="handleDelete(index)"
+        <el-button @click="handleDelete(index)" text
           :style="{ 'margin-top': index === 0 && props.models.some((item) => item.label) ? '30px' : '' }">
           <el-icon>
             <Delete />
diff --git a/ui/src/views/system/role/component/PermissionConfiguration.vue b/ui/src/views/system/role/component/PermissionConfiguration.vue
index 2390f8c5..428603bd 100644
--- a/ui/src/views/system/role/component/PermissionConfiguration.vue
+++ b/ui/src/views/system/role/component/PermissionConfiguration.vue
@@ -1,13 +1,29 @@
 <template>
   <el-scrollbar v-loading="loading">
     <div class="p-24 pt-0">
-      <el-table :data="tableData" border :span-method="objectSpanMethod">
-        <el-table-column prop="module" :width="130" :label="$t('views.role.permission.moduleName')" />
-        <el-table-column prop="name" :width="150" :label="$t('views.role.permission.operationTarget')" />
-        <el-table-column prop="permission" :label="$t('views.model.modelForm.permissionType.label')">
+      <app-table :data="tableData" border :span-method="objectSpanMethod">
+        <el-table-column
+          prop="module"
+          :width="130"
+          :label="$t('views.role.permission.moduleName')"
+        />
+        <el-table-column
+          prop="name"
+          :width="150"
+          :label="$t('views.role.permission.operationTarget')"
+        />
+        <el-table-column
+          prop="permission"
+          :label="$t('views.model.modelForm.permissionType.label')"
+        >
           <template #default="{ row }">
             <el-checkbox-group v-model="row.perChecked" @change="handleCellChange($event, row)">
-              <el-checkbox v-for="item in row.permission" :key="item.id" :value="item.id" :disabled="disabled">
+              <el-checkbox
+                v-for="item in row.permission"
+                :key="item.id"
+                :value="item.id"
+                :disabled="disabled"
+              >
                 <div class="ellipsis" style="width: 96px">{{ item.name }}</div>
               </el-checkbox>
             </el-checkbox-group>
@@ -15,19 +31,27 @@
         </el-table-column>
         <el-table-column :width="40">
           <template #header>
-            <el-checkbox :model-value="allChecked" :indeterminate="allIndeterminate" :disabled="disabled"
-              @change="handleCheckAll" />
+            <el-checkbox
+              :model-value="allChecked"
+              :indeterminate="allIndeterminate"
+              :disabled="disabled"
+              @change="handleCheckAll"
+            />
           </template>
           <template #default="{ row }">
-            <el-checkbox v-model="row.enable" :indeterminate="row.indeterminate" :disabled="disabled"
-              @change="(value: boolean) => handleRowChange(value, row)" />
+            <el-checkbox
+              v-model="row.enable"
+              :indeterminate="row.indeterminate"
+              :disabled="disabled"
+              @change="(value: boolean) => handleRowChange(value, row)"
+            />
           </template>
         </el-table-column>
-      </el-table>
+      </app-table>
     </div>
   </el-scrollbar>
   <div v-if="!disabled" class="footer border-t">
-    <el-button type="primary" style="width: 80px;" :loading="loading" @click="handleSave">
+    <el-button type="primary" style="width: 80px" :loading="loading" @click="handleSave">
       {{ $t('common.save') }}
     </el-button>
   </div>
@@ -35,7 +59,12 @@
 
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
-import type { RoleItem, RolePermissionItem, RoleTableDataItem, ChildrenPermissionItem } from '@/api/type/role'
+import type {
+  RoleItem,
+  RolePermissionItem,
+  RoleTableDataItem,
+  ChildrenPermissionItem,
+} from '@/api/type/role'
 import RoleApi from '@/api/system/role'
 import { MsgSuccess } from '@/utils/message'
 import { t } from '@/locales'
@@ -50,11 +79,9 @@ const disabled = computed(() => props.currentRole?.internal) // TODO 权限
 
 function transformData(data: RolePermissionItem[]) {
   const transformedData: RoleTableDataItem[] = []
-  data.forEach(module => {
-    module.children.forEach(feature => {
-      const perChecked = feature.permission
-        .filter(p => p.enable)
-        .map(p => p.id)
+  data.forEach((module) => {
+    module.children.forEach((feature) => {
+      const perChecked = feature.permission.filter((p) => p.enable).map((p) => p.id)
 
       transformedData.push({
         module: module.name,
@@ -62,19 +89,19 @@ function transformData(data: RolePermissionItem[]) {
         permission: feature.permission,
         enable: feature.enable,
         perChecked,
-        indeterminate: perChecked.length > 0 && perChecked.length < feature.permission.length
+        indeterminate: perChecked.length > 0 && perChecked.length < feature.permission.length,
       })
     })
   })
-  return transformedData;
-};
+  return transformedData
+}
 
 async function getRolePermission() {
   if (!props.currentRole?.id) return
   try {
-    tableData.value = [];
+    tableData.value = []
     const res = await RoleApi.getRolePermissionList(props.currentRole.id, loading)
-    tableData.value = transformData(res.data);
+    tableData.value = transformData(res.data)
   } catch (error) {
     console.error(error)
   }
@@ -84,52 +111,52 @@ function handleCellChange(checkedValues: string[], row: RoleTableDataItem) {
   row.enable = checkedValues.length === row.permission.length
   row.indeterminate = checkedValues.length > 0 && checkedValues.length < row.permission.length
 
-  row.permission.forEach(p => {
+  row.permission.forEach((p) => {
     p.enable = checkedValues.includes(p.id)
   })
 }
 
 function handleRowChange(checked: boolean, row: RoleTableDataItem) {
   if (checked) {
-    row.perChecked = row.permission.map(p => p.id)
-    row.permission.forEach(p => p.enable = true)
+    row.perChecked = row.permission.map((p) => p.id)
+    row.permission.forEach((p) => (p.enable = true))
   } else {
     row.perChecked = []
-    row.permission.forEach(p => p.enable = false)
+    row.permission.forEach((p) => (p.enable = false))
   }
   row.indeterminate = false
 }
 
 const allChecked = computed(() => {
-  return tableData.value.length > 0 && tableData.value.every(item => item.enable)
+  return tableData.value.length > 0 && tableData.value.every((item) => item.enable)
 })
 
 const allIndeterminate = computed(() => {
-  return !allChecked.value && tableData.value.some(item => item.enable)
+  return !allChecked.value && tableData.value.some((item) => item.enable)
 })
 
 function handleCheckAll(checked: boolean) {
-  tableData.value.forEach(item => {
+  tableData.value.forEach((item) => {
     item.enable = checked
-    item.perChecked = checked ? item.permission.map(p => p.id) : []
+    item.perChecked = checked ? item.permission.map((p) => p.id) : []
     item.indeterminate = false
-    item.permission.forEach(p => p.enable = checked)
+    item.permission.forEach((p) => (p.enable = checked))
   })
 }
 
 const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
   if (columnIndex === 0) {
-    const sameModuleRows = tableData.value.filter(item => item.module === row.module)
-    const firstRowIndex = tableData.value.findIndex(item => item.module === row.module)
+    const sameModuleRows = tableData.value.filter((item) => item.module === row.module)
+    const firstRowIndex = tableData.value.findIndex((item) => item.module === row.module)
     if (rowIndex === firstRowIndex) {
       return {
         rowspan: sameModuleRows.length,
-        colspan: 1
+        colspan: 1,
       }
     } else {
       return {
         rowspan: 0,
-        colspan: 0
+        colspan: 0,
       }
     }
   }
@@ -139,19 +166,19 @@ watch(() => props.currentRole?.id, getRolePermission, { immediate: true })
 
 async function handleSave() {
   try {
-    const permissions: { id: string, enable: boolean }[] = [];
+    const permissions: { id: string; enable: boolean }[] = []
     tableData.value.forEach((e) => {
       e.permission?.forEach((ele: ChildrenPermissionItem) => {
         permissions.push({
           id: ele.id,
           enable: ele.enable,
-        });
-      });
-    });
-    await RoleApi.saveRolePermission(props.currentRole?.id as string, permissions, loading);
+        })
+      })
+    })
+    await RoleApi.saveRolePermission(props.currentRole?.id as string, permissions, loading)
     MsgSuccess(t('common.saveSuccess'))
   } catch (error) {
-    console.log(error);
+    console.log(error)
   }
 }
 </script>
@@ -170,4 +197,4 @@ async function handleSave() {
   padding: 16px 24px;
   box-sizing: border-box;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/views/system/role/index.vue b/ui/src/views/system/role/index.vue
index f7d6d58c..a735208e 100644
--- a/ui/src/views/system/role/index.vue
+++ b/ui/src/views/system/role/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="role">
+  <div class="role-manage p-16-24">
     <h2 class="mb-16">{{ $t('views.role.title') }}</h2>
-    <el-card style="--el-card-padding: 0" body-class="role-card">
+    <el-card style="--el-card-padding: 0">
       <div class="flex h-full">
-        <div class="role-left border-r p-16">
-          <div class="p-8 pb-0">
+        <div class="role-left border-r">
+          <div class="p-24 pb-0">
             <el-input
               v-model="filterText"
               :placeholder="$t('common.search')"
@@ -12,127 +12,141 @@
               clearable
             />
           </div>
-          <div class="list-height-left mt-8">
+          <div class="list-height-left">
             <el-scrollbar v-loading="loading">
-              <div class="role-left_title color-secondary lighter">
-                <span>{{ $t('views.role.internalRole') }}</span>
-              </div>
-              <common-list
-                :data="filterInternalRole"
-                @click="clickRole"
-                :default-active="currentRole?.id"
-              >
-                <template #default="{ row }">
-                  <div class="flex-between">
-                    <span class="mr-8">{{ row.role_name }}</span>
-                    <el-dropdown :teleported="false">
-                      <el-button text>
-                        <el-icon class="color-secondary">
-                          <MoreFilled />
-                        </el-icon>
-                      </el-button>
-                      <template #dropdown>
-                        <el-dropdown-menu style="min-width: 80px">
-                          <el-dropdown-item @click.stop="createOrUpdateRole(row)" class="p-8">
-                            <AppIcon iconName="app-copy"></AppIcon>
-                            {{ $t('common.rename') }}
-                          </el-dropdown-item>
-                          <el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
-                            <AppIcon iconName="app-copy"></AppIcon>
-                            {{ $t('common.delete') }}
-                          </el-dropdown-item>
-                        </el-dropdown-menu>
-                      </template>
-                    </el-dropdown>
-                  </div>
-                </template>
-                <template #empty>
-                  <span></span>
-                </template>
-              </common-list>
-              <div class="role-left_divider">
-                <el-divider />
-              </div>
-              <div class="role-left_title">
-                <span class="color-secondary lighter">{{ $t('views.role.customRole') }}</span>
-                <el-tooltip
-                  effect="dark"
-                  :content="`${$t('common.create')}${$t('views.role.customRole')}`"
-                  placement="top"
+              <div class="p-16">
+                <div class="color-secondary lighter ml-8 mb-8">
+                  <span>{{ $t('views.role.internalRole') }}</span>
+                </div>
+                <common-list
+                  :data="filterInternalRole"
+                  @click="clickRole"
+                  :default-active="currentRole?.id"
+                  @mouseenter="mouseenter"
+                  @mouseleave="mouseId = ''"
                 >
-                  <el-button type="primary" text @click="createOrUpdateRole()"
-                    v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-                    [PermissionConst.ROLE_CREATE.getWorkspacePermission],[], 'OR')"
+                  <template #default="{ row }">
+                    <div class="flex-between">
+                      <span class="mr-8">{{ row.role_name }}</span>
+                      <div @click.stop v-show="mouseId === row.id">
+                        <el-dropdown :teleported="false">
+                          <el-button text>
+                            <el-icon class="color-secondary">
+                              <MoreFilled />
+                            </el-icon>
+                          </el-button>
+                          <template #dropdown>
+                            <el-dropdown-menu style="min-width: 80px">
+                              <el-dropdown-item @click.stop="createOrUpdateRole(row)" class="p-8">
+                                <AppIcon iconName="app-copy"></AppIcon>
+                                {{ $t('common.rename') }}
+                              </el-dropdown-item>
+                              <el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
+                                <AppIcon iconName="app-copy"></AppIcon>
+                                {{ $t('common.delete') }}
+                              </el-dropdown-item>
+                            </el-dropdown-menu>
+                          </template>
+                        </el-dropdown>
+                      </div>
+                    </div>
+                  </template>
+                  <template #empty>
+                    <span></span>
+                  </template>
+                </common-list>
+
+                <div class="ml-8 border-t flex-between mb-12" style="padding-top: 12px">
+                  <span class="color-secondary lighter">{{ $t('views.role.customRole') }}</span>
+                  <el-tooltip
+                    effect="dark"
+                    :content="`${$t('common.create')}${$t('views.role.customRole')}`"
+                    placement="top"
                   >
-                    <AppIcon iconName="app-copy"></AppIcon>
-                  </el-button>
-                </el-tooltip>
+                    <el-button
+                      type="primary"
+                      text
+                      @click="createOrUpdateRole()"
+                      v-hasPermission="
+                        new ComplexPermission(
+                          [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                          [PermissionConst.ROLE_CREATE.getWorkspacePermission],
+                          [],
+                          'OR',
+                        )
+                      "
+                    >
+                      <el-icon :size="18"><Plus /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </div>
+                <common-list
+                  :data="filterCustomRole"
+                  @click="clickRole"
+                  :default-active="currentRole?.id"
+                  @mouseenter="mouseenter"
+                  @mouseleave="mouseId = ''"
+                >
+                  <template #default="{ row }">
+                    <div class="flex-between">
+                      <span>
+                        {{ row.role_name }}
+                        <span class="color-input-placeholder ml-4"
+                          >({{ roleTypeMap[row.type as RoleTypeEnum] }})</span
+                        >
+                      </span>
+                      <div @click.stop v-show="mouseId === row.id">
+                        <el-dropdown :teleported="false">
+                          <el-button text>
+                            <el-icon class="color-secondary">
+                              <MoreFilled />
+                            </el-icon>
+                          </el-button>
+                          <template #dropdown>
+                            <el-dropdown-menu style="min-width: 80px">
+                              <el-dropdown-item @click.stop="createOrUpdateRole(row)" class="p-8">
+                                <AppIcon iconName="app-copy"></AppIcon>
+                                {{ $t('common.rename') }}
+                              </el-dropdown-item>
+                              <el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
+                                <AppIcon iconName="app-copy"></AppIcon>
+                                {{ $t('common.delete') }}
+                              </el-dropdown-item>
+                            </el-dropdown-menu>
+                          </template>
+                        </el-dropdown>
+                      </div>
+                    </div>
+                  </template>
+                  <template #empty>
+                    <span></span>
+                  </template>
+                </common-list>
               </div>
-              <common-list
-                :data="filterCustomRole"
-                @click="clickRole"
-                :default-active="currentRole?.id"
-              >
-                <template #default="{ row }">
-                  <div class="flex-between">
-                    <span>
-                      {{ row.role_name }}
-                      <span class="color-input-placeholder ml-4"
-                        >({{ roleTypeMap[row.type as RoleTypeEnum] }})</span
-                      >
-                    </span>
-                    <el-dropdown :teleported="false">
-                      <el-button text>
-                        <el-icon class="color-secondary">
-                          <MoreFilled />
-                        </el-icon>
-                      </el-button>
-                      <template #dropdown>
-                        <el-dropdown-menu style="min-width: 80px">
-                          <el-dropdown-item @click.stop="createOrUpdateRole(row)" class="p-8">
-                            <AppIcon iconName="app-copy"></AppIcon>
-                            {{ $t('common.rename') }}
-                          </el-dropdown-item>
-                          <el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
-                            <AppIcon iconName="app-copy"></AppIcon>
-                            {{ $t('common.delete') }}
-                          </el-dropdown-item>
-                        </el-dropdown-menu>
-                      </template>
-                    </el-dropdown>
-                  </div>
-                </template>
-                <template #empty>
-                  <span></span>
-                </template>
-              </common-list>
             </el-scrollbar>
           </div>
         </div>
 
         <!-- 右边 -->
-        <div class="role-right" v-loading="loading">
+        <div class="role-right w-full" v-loading="loading">
           <div class="flex-between mb-16 p-24 pb-0">
             <div class="flex align-center">
-              <span>
+              <h4>
                 {{ currentRole?.role_name }}
-                <span
-                  v-if="currentRole?.type && !currentRole.internal"
-                  class="color-input-placeholder ml-4"
-                  >({{ roleTypeMap[currentRole?.type as RoleTypeEnum] }})
-                </span>
+              </h4>
+              <span
+                v-if="currentRole?.type && !currentRole.internal"
+                class="color-input-placeholder ml-4"
+                >({{ roleTypeMap[currentRole?.type as RoleTypeEnum] }})
               </span>
-              <el-divider direction="vertical" class="mr-8 ml-8" />
-              <AppIcon
-                iconName="app-wordspace"
-                style="font-size: 16px"
-                class="color-input-placeholder"
-              ></AppIcon>
+
+              <el-divider direction="vertical" />
+              <el-icon class="color-input-placeholder"><UserFilled /></el-icon>
               <span class="color-input-placeholder ml-4">
                 {{ currentRole?.user_count }}
               </span>
             </div>
-            <el-radio-group v-model="currentTab">
+            <el-radio-group v-model="currentTab" class="app-radio-button-group">
               <el-radio-button
                 v-for="item in tabList"
                 :key="item.value"
@@ -250,51 +264,24 @@ const tabList = [
     label: t('views.role.member.title'),
   },
 ]
+const mouseId = ref('')
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
 </script>
 
 <style lang="scss" scoped>
-.role {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-  padding: 16px 24px;
-
-  :deep(.role-card) {
-    height: 100%;
-    overflow: hidden;
-  }
-
+.role-manage {
   .role-left {
     box-sizing: border-box;
     width: var(--setting-left-width);
     min-width: var(--setting-left-width);
 
-    .role-left_title {
-      padding: 8px;
-      display: flex;
-      justify-content: space-between;
-    }
-
     .list-height-left {
       height: calc(100vh - 213px);
-
-      :deep(.common-list li) {
-        padding-right: 4px;
-        padding-left: 8px;
-      }
-    }
-
-    .role-left_divider {
-      padding: 0 8px;
-
-      :deep(.el-divider) {
-        margin: 4px 0;
-      }
     }
   }
-
   .role-right {
     flex: 1;
     overflow: hidden;