From 55bb5cf502d75936a3549e554d98b022fab6a66d Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Tue, 21 Jul 2026 16:51:53 +0800
Subject: [PATCH 1/7] feat(TAP-12273): complete v2 permission controls

---
 apps/daas/src/router/menu.ts                  |  13 +-
 apps/daas/src/router/routes.ts                |   2 +-
 .../data-import-export/GroupExportDialog.vue  |  12 +-
 .../src/views/data-import-export/List.vue     |  15 +-
 .../data-import-export/ProjectManagement.vue  |  69 ++++--
 apps/daas/src/views/role/Role.vue             | 204 +++++++++++++++++-
 apps/daas/src/views/role/Roles.vue            |   5 +-
 apps/daas/src/views/user/List.vue             | 103 +++++----
 packages/api/src/core/group-info.ts           |   1 +
 .../src/views/heartbeat-table/List.vue        |  27 ++-
 .../business/src/views/shared-cache/List.vue  |  50 +++--
 .../business/src/views/shared-mining/List.vue |  38 ++--
 .../business/src/views/verification/List.vue  |  60 ++----
 13 files changed, 429 insertions(+), 170 deletions(-)

diff --git a/apps/daas/src/router/menu.ts b/apps/daas/src/router/menu.ts
index fbee1f777..69ca6b893 100644
--- a/apps/daas/src/router/menu.ts
+++ b/apps/daas/src/router/menu.ts
@@ -79,10 +79,17 @@ export const MENU = [
         code: 'v2_log_collector',
         parent: 'sharedMining',
       },
-      { name: 'HeartbeatTableList', code: '', parent: 'heartbeatTable' },
+      {
+        name: 'HeartbeatTableList',
+        code: 'v2_conn_heartbeat',
+        parent: 'heartbeatTable',
+      },
       { name: 'dataEncryption' },
-      { name: 'projectManagement' },
-      { name: 'dataImportExport' },
+      { name: 'projectManagement', code: 'v2_project_management' },
+      {
+        name: 'dataImportExport',
+        code: 'v2_project_import_and_export',
+      },
       {
         name: 'taskRebalanceHistory',
         parent: 'taskRebalance',
diff --git a/apps/daas/src/router/routes.ts b/apps/daas/src/router/routes.ts
index f5edd1e0a..8be76d6b1 100644
--- a/apps/daas/src/router/routes.ts
+++ b/apps/daas/src/router/routes.ts
@@ -453,7 +453,7 @@ export const routes = [
         meta: {
           hideTitle: true,
           title: 'page_title_heartbeat_table',
-          code: 'v2_log_collector',
+          code: 'v2_conn_heartbeat',
         },
       },
     ],
diff --git a/apps/daas/src/views/data-import-export/GroupExportDialog.vue b/apps/daas/src/views/data-import-export/GroupExportDialog.vue
index 68cc8dafa..89cc4103d 100644
--- a/apps/daas/src/views/data-import-export/GroupExportDialog.vue
+++ b/apps/daas/src/views/data-import-export/GroupExportDialog.vue
@@ -398,7 +398,12 @@ const handleCreateProject = () => {
                 :image-size="80"
               >
                 <template #description>
-                  <el-button v-if="!searchKeyword" @click="handleCreateProject">
+                  <el-button
+                    v-if="
+                      !searchKeyword && $has('v2_project_management_creation')
+                    "
+                    @click="handleCreateProject"
+                  >
                     <template #icon>
                       <i-lucide-plus />
                     </template>
@@ -413,7 +418,10 @@ const handleCreateProject = () => {
           </el-scrollbar>
 
           <el-button
-            v-if="filteredGroupList.length || searchKeyword"
+            v-if="
+              $has('v2_project_management_creation') &&
+              (filteredGroupList.length || searchKeyword)
+            "
             class="border-dashed m-2"
             @click="handleCreateProject"
           >
diff --git a/apps/daas/src/views/data-import-export/List.vue b/apps/daas/src/views/data-import-export/List.vue
index dced5e1ce..9a44cf33a 100644
--- a/apps/daas/src/views/data-import-export/List.vue
+++ b/apps/daas/src/views/data-import-export/List.vue
@@ -219,19 +219,28 @@ const handleImportSuccess = () => {
 <template>
   <PageContainer>
     <template #actions>
-      <el-button @click="handleOpenGroupManagement">
+      <el-button
+        v-if="$has('v2_project_management')"
+        @click="handleOpenGroupManagement"
+      >
         <template #icon>
           <i-lucide-layers />
         </template>
         {{ t('data_import_export_group_management') }}
       </el-button>
-      <el-button @click="importDialogVisible = true">
+      <el-button
+        v-if="$has('v2_project_import_and_export_import')"
+        @click="importDialogVisible = true"
+      >
         <template #icon>
           <i-lucide-download />
         </template>
         {{ t('data_import_export_import') }}
       </el-button>
-      <el-button @click="exportDialogVisible = true">
+      <el-button
+        v-if="$has('v2_project_import_and_export_export')"
+        @click="exportDialogVisible = true"
+      >
         <template #icon>
           <i-lucide-upload />
         </template>
diff --git a/apps/daas/src/views/data-import-export/ProjectManagement.vue b/apps/daas/src/views/data-import-export/ProjectManagement.vue
index 1c3fdba07..df41a3b02 100644
--- a/apps/daas/src/views/data-import-export/ProjectManagement.vue
+++ b/apps/daas/src/views/data-import-export/ProjectManagement.vue
@@ -16,7 +16,7 @@ import { makeStatusAndDisabled } from '@tap/business/src/shared'
 import { OverflowTooltip } from '@tap/component/src/overflow-tooltip'
 import { useI18n } from '@tap/i18n'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import GitConfigDialog from './GitConfigDialog.vue'
 import GroupExportDialog from './GroupExportDialog.vue'
@@ -24,6 +24,9 @@ import GroupExportDialog from './GroupExportDialog.vue'
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
+const hasPermissionByCode = inject<(code: string) => boolean>(
+  'hasPermissionByCode',
+)
 
 // 导出对话框
 const exportDialogVisible = ref(false)
@@ -40,6 +43,13 @@ const groupFilterText = ref('')
 const showGroupSearch = ref(false)
 const groupSearchInput = ref()
 
+const havePermission = (group: GroupInfoDto | null, type: string) =>
+  !!group?.permissionActions?.includes(type)
+
+const canEditSelectedGroup = computed(() =>
+  havePermission(selectedGroup.value, 'Edit'),
+)
+
 // 中间资源列表
 const activeTab = ref<'SYNC_TASK' | 'MIGRATE_TASK' | 'MODULE'>('MIGRATE_TASK')
 const searchKeyword = ref('')
@@ -119,6 +129,8 @@ const openGroupSearch = () => {
 
 // 添加项目
 const handleAddGroup = async () => {
+  if (!hasPermissionByCode?.('v2_project_management_creation')) return
+
   ElMessageBox.prompt(
     t('data_import_export_group_name_placeholder'),
     t('data_import_export_add_group'),
@@ -308,7 +320,11 @@ const isResourceAdded = (id: string) => {
 
 // 判断资源是否不可操作（已添加或属于其他分组）
 const isResourceDisabled = (resource: any) => {
-  return isResourceAdded(resource.id) || isResourceInOtherGroup(resource)
+  return (
+    !canEditSelectedGroup.value ||
+    isResourceAdded(resource.id) ||
+    isResourceInOtherGroup(resource)
+  )
 }
 
 // 切换资源选中状态
@@ -564,13 +580,19 @@ const handleSelectAll = (checked: any) => {
       </div>
     </template>
     <template #actions>
-      <el-button @click="handleGitConfig">
+      <el-button
+        v-if="$has('v2_project_management_git_config') && canEditSelectedGroup"
+        @click="handleGitConfig"
+      >
         <template #icon>
           <i-lucide-github />
         </template>
         {{ t('data_import_export_git_config') }}
       </el-button>
-      <el-button @click="handleExport">
+      <el-button
+        v-if="$has('v2_project_import_and_export_export')"
+        @click="handleExport"
+      >
         <template #icon>
           <i-lucide-download />
         </template>
@@ -596,7 +618,11 @@ const handleSelectAll = (checked: any) => {
                 <i-lucide-search />
               </template>
             </el-button>
-            <el-button text @click="handleAddGroup">
+            <el-button
+              v-if="$has('v2_project_management_creation')"
+              text
+              @click="handleAddGroup"
+            >
               <template #icon>
                 <i-lucide-plus />
               </template>
@@ -649,6 +675,10 @@ const handleSelectAll = (checked: any) => {
                   </div>
                 </div>
                 <el-dropdown
+                  v-if="
+                    havePermission(group, 'Edit') ||
+                    havePermission(group, 'Delete')
+                  "
                   class="btn-menu"
                   @command="handleGroupCommand($event, group)"
                 >
@@ -659,13 +689,20 @@ const handleSelectAll = (checked: any) => {
                   </el-button>
                   <template #dropdown>
                     <el-dropdown-menu>
-                      <el-dropdown-item command="edit">
+                      <el-dropdown-item
+                        v-if="havePermission(group, 'Edit')"
+                        command="edit"
+                      >
                         <el-icon class="mr-2">
                           <i-lucide-edit />
                         </el-icon>
                         {{ t('public_button_edit') }}
                       </el-dropdown-item>
-                      <el-dropdown-item command="delete" class="is-danger">
+                      <el-dropdown-item
+                        v-if="havePermission(group, 'Delete')"
+                        command="delete"
+                        class="is-danger"
+                      >
                         <el-icon class="mr-2">
                           <i-lucide-trash-2 />
                         </el-icon>
@@ -682,7 +719,10 @@ const handleSelectAll = (checked: any) => {
               :image-size="60"
             >
               <template #description>
-                <el-button @click="handleAddGroup">
+                <el-button
+                  v-if="$has('v2_project_management_creation')"
+                  @click="handleAddGroup"
+                >
                   <template #icon>
                     <i-lucide-plus />
                   </template>
@@ -761,7 +801,9 @@ const handleSelectAll = (checked: any) => {
                   {{ resource.groupName }}
                 </el-tag>
                 <el-button
-                  v-else-if="!isResourceAdded(resource.id)"
+                  v-else-if="
+                    canEditSelectedGroup && !isResourceAdded(resource.id)
+                  "
                   text
                   class="add-btn"
                   @click.stop="addSingleResource(resource)"
@@ -782,6 +824,7 @@ const handleSelectAll = (checked: any) => {
               <el-checkbox
                 :model-value="isAllSelected"
                 :indeterminate="selectedResources.length > 0 && !isAllSelected"
+                :disabled="!canEditSelectedGroup"
                 @change="handleSelectAll"
               >
                 {{ t('public_all_selected') }}
@@ -800,6 +843,7 @@ const handleSelectAll = (checked: any) => {
                 <span class="mr-2">{{ totalPage }}</span>
               </el-pagination>
               <el-button
+                v-if="canEditSelectedGroup"
                 type="primary"
                 :disabled="canAddCount === 0"
                 @click="addSelectedResources"
@@ -822,7 +866,7 @@ const handleSelectAll = (checked: any) => {
             }}</span>
             <div class="flex gap-2" style="--btn-space: 0">
               <el-button
-                v-if="nonExistentResourcesCount > 0"
+                v-if="canEditSelectedGroup && nonExistentResourcesCount > 0"
                 text
                 type="warning"
                 @click="removeNonExistentResources"
@@ -835,7 +879,7 @@ const handleSelectAll = (checked: any) => {
                 }})
               </el-button>
               <el-button
-                v-if="selectedAddedResources.length > 0"
+                v-if="canEditSelectedGroup && selectedAddedResources.length > 0"
                 text
                 type="danger"
                 @click="removeSelectedResources"
@@ -858,7 +902,7 @@ const handleSelectAll = (checked: any) => {
               :data="treeData"
               node-key="id"
               :indent="8"
-              show-checkbox
+              :show-checkbox="canEditSelectedGroup"
               default-expand-all
               :props="{
                 label: (data: any) => data.name || data.label,
@@ -915,6 +959,7 @@ const handleSelectAll = (checked: any) => {
           <!-- 底部统计和保存 -->
           <div class="panel-footer p-3">
             <el-button
+              v-if="canEditSelectedGroup"
               class="w-100"
               type="primary"
               :loading="saving"
diff --git a/apps/daas/src/views/role/Role.vue b/apps/daas/src/views/role/Role.vue
index c7fd1a327..bb6b0fdf0 100644
--- a/apps/daas/src/views/role/Role.vue
+++ b/apps/daas/src/views/role/Role.vue
@@ -145,7 +145,39 @@ const pageSort = [
           { label: t('public_stop_all'), name: 'v2_data_flow_all_data_Stop' },
         ],
       },
-      { name: 'v2_data_check' },
+      {
+        name: 'v2_data_check',
+        buttons: [
+          {
+            label: t('public_task_create'),
+            name: 'v2_data_check_creation',
+            checked: false,
+          },
+          {
+            label: t('public_task_import'),
+            name: 'v2_data_check_import',
+            checked: false,
+          },
+          {
+            label: t('public_task_export'),
+            name: 'v2_data_check_export',
+            checked: false,
+          },
+        ],
+        filterData: [
+          { label: t('public_view_all'), name: 'v2_data_check_all_data' },
+          { label: t('public_edit_all'), name: 'v2_data_check_all_data_Edit' },
+          {
+            label: t('public_delete_all'),
+            name: 'v2_data_check_all_data_Delete',
+          },
+          {
+            label: t('public_start_all'),
+            name: 'v2_data_check_all_data_Start',
+          },
+          { label: t('public_stop_all'), name: 'v2_data_check_all_data_Stop' },
+        ],
+      },
     ],
   },
   {
@@ -243,12 +275,149 @@ const pageSort = [
   {
     name: 'v2_advanced_features',
     children: [
-      { name: 'v2_log_collector' },
+      {
+        name: 'v2_log_collector',
+        filterData: [
+          { label: t('public_view_all'), name: 'v2_log_collector_all_data' },
+          {
+            label: t('public_edit_all'),
+            name: 'v2_log_collector_all_data_Edit',
+          },
+          {
+            label: t('public_delete_all'),
+            name: 'v2_log_collector_all_data_Delete',
+          },
+          {
+            label: t('public_reset_all'),
+            name: 'v2_log_collector_all_data_Reset',
+          },
+          {
+            label: t('public_start_all'),
+            name: 'v2_log_collector_all_data_Start',
+          },
+          {
+            label: t('public_stop_all'),
+            name: 'v2_log_collector_all_data_Stop',
+          },
+        ],
+      },
       { name: 'v2_function_management' },
       { name: 'v2_custom_node' },
-      { name: 'v2_shared_cache' },
-      { name: 'v2_project_management' },
-      { name: 'v2_project_import_and_export' },
+      {
+        name: 'v2_shared_cache',
+        buttons: [
+          {
+            label: t('public_task_create'),
+            name: 'v2_shared_cache_creation',
+            checked: false,
+          },
+          {
+            label: t('public_task_import'),
+            name: 'v2_shared_cache_import',
+            checked: false,
+          },
+          {
+            label: t('public_task_export'),
+            name: 'v2_shared_cache_export',
+            checked: false,
+          },
+        ],
+        filterData: [
+          { label: t('public_view_all'), name: 'v2_shared_cache_all_data' },
+          {
+            label: t('public_edit_all'),
+            name: 'v2_shared_cache_all_data_Edit',
+          },
+          {
+            label: t('public_delete_all'),
+            name: 'v2_shared_cache_all_data_Delete',
+          },
+          {
+            label: t('public_reset_all'),
+            name: 'v2_shared_cache_all_data_Reset',
+          },
+          {
+            label: t('public_start_all'),
+            name: 'v2_shared_cache_all_data_Start',
+          },
+          {
+            label: t('public_stop_all'),
+            name: 'v2_shared_cache_all_data_Stop',
+          },
+        ],
+      },
+      {
+        name: 'v2_conn_heartbeat',
+        filterData: [
+          { label: t('public_view_all'), name: 'v2_conn_heartbeat_all_data' },
+          {
+            label: t('public_delete_all'),
+            name: 'v2_conn_heartbeat_all_data_Delete',
+          },
+          {
+            label: t('public_reset_all'),
+            name: 'v2_conn_heartbeat_all_data_Reset',
+          },
+          {
+            label: t('public_start_all'),
+            name: 'v2_conn_heartbeat_all_data_Start',
+          },
+          {
+            label: t('public_stop_all'),
+            name: 'v2_conn_heartbeat_all_data_Stop',
+          },
+        ],
+      },
+      {
+        name: 'v2_project_management',
+        buttons: [
+          {
+            label: t('data_import_export_add_group'),
+            name: 'v2_project_management_creation',
+            checked: false,
+          },
+          {
+            label: t('data_import_export_git_config'),
+            name: 'v2_project_management_git_config',
+            checked: false,
+          },
+        ],
+        filterData: [
+          {
+            label: t('public_view_all'),
+            name: 'v2_project_management_all_data',
+          },
+          {
+            label: t('public_edit_all'),
+            name: 'v2_project_management_all_data_Edit',
+          },
+          {
+            label: t('public_delete_all'),
+            name: 'v2_project_management_all_data_Delete',
+          },
+        ],
+      },
+      {
+        name: 'v2_project_import_and_export',
+        buttons: [
+          {
+            label: t('data_import_export_import'),
+            name: 'v2_project_import_and_export_import',
+            checked: false,
+          },
+          {
+            label: t('data_import_export_export'),
+            name: 'v2_project_import_and_export_export',
+            checked: false,
+          },
+        ],
+        filterData: [
+          {
+            label: t('public_view_all'),
+            name: 'v2_project_import_and_export_all_data',
+          },
+        ],
+      },
       {
         name: 'v2_task_rebalance',
         buttons: [
@@ -266,7 +435,30 @@ const pageSort = [
     children: [
       { name: 'v2_cluster-management_menu' },
       { name: 'v2_external-storage_menu' },
-      { name: 'v2_user_management_menu' },
+      {
+        name: 'v2_user_management_menu',
+        buttons: [
+          {
+            label: t('public_button_create'),
+            name: 'v2_user_management_menu_creation',
+            checked: false,
+          },
+        ],
+        filterData: [
+          {
+            label: t('public_view_all'),
+            name: 'v2_user_management_menu_all_data',
+          },
+          {
+            label: t('public_edit_all'),
+            name: 'v2_user_management_menu_all_data_Edit',
+          },
+          {
+            label: t('public_delete_all'),
+            name: 'v2_user_management_menu_all_data_Delete',
+          },
+        ],
+      },
       { name: 'v2_role_management' },
     ],
   },
diff --git a/apps/daas/src/views/role/Roles.vue b/apps/daas/src/views/role/Roles.vue
index a17ae0544..d5dccc195 100644
--- a/apps/daas/src/views/role/Roles.vue
+++ b/apps/daas/src/views/role/Roles.vue
@@ -371,10 +371,7 @@ export default {
             text
             type="primary"
             :disabled="
-              $disabledByPermission(
-                'role_edition_all_data',
-                scope.row.user_id,
-              ) || scope.row.name === 'admin'
+              $disabledByPermission('role_edition_all_data', scope.row.user_id)
             "
             @click="handleAssociatUsers(scope.row.id)"
           >
diff --git a/apps/daas/src/views/user/List.vue b/apps/daas/src/views/user/List.vue
index 881c0f0e3..9ccc001bb 100644
--- a/apps/daas/src/views/user/List.vue
+++ b/apps/daas/src/views/user/List.vue
@@ -410,6 +410,17 @@ export default {
       this.multipleSelection = val
     },
 
+    havePermission(item, type) {
+      return item.permissionActions?.includes(type)
+    },
+
+    hasSelectedPermission(type) {
+      return (
+        this.multipleSelection.length > 0 &&
+        this.multipleSelection.every((item) => this.havePermission(item, type))
+      )
+    },
+
     // 选择分类
     handleSelectTag() {
       const tagList = []
@@ -744,7 +755,7 @@ export default {
   >
     <template #actions>
       <el-button
-        v-readonlybtn="'new_model_creation'"
+        v-if="$has('v2_user_management_menu_creation')"
         class="btn btn-create"
         type="primary"
         @click="openCreateDialog"
@@ -844,7 +855,7 @@ export default {
           <span> {{ $t('public_set_user_group') }}</span>
         </el-button>
         <el-dropdown
-          v-readonlybtn="'user_edition'"
+          v-if="hasSelectedPermission('Edit')"
           @command="handleCommand($event)"
         >
           <el-button class="btn btn-dropdowm">
@@ -855,18 +866,13 @@ export default {
           </el-button>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item v-if="$has('user_edition')" command="activated">
+              <el-dropdown-item command="activated">
                 {{ $t('user_list_bulk_activation') }}
               </el-dropdown-item>
-              <el-dropdown-item
-                v-if="$has('user_edition')"
-                command="rejected"
-                >{{ $t('user_list_bulk_freeze') }}</el-dropdown-item
-              >
-              <el-dropdown-item
-                v-if="$has('user_edition')"
-                command="notActivated"
-              >
+              <el-dropdown-item command="rejected">{{
+                $t('user_list_bulk_freeze')
+              }}</el-dropdown-item>
+              <el-dropdown-item command="notActivated">
                 {{ $t('user_list_bulk_check') }}
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -956,90 +962,83 @@ export default {
         <template #default="scope">
           <div>
             <el-button
-              v-if="['rejected', 'notActivated'].includes(scope.row.status)"
-              v-readonlybtn="'user_edition'"
+              v-if="
+                ['rejected', 'notActivated'].includes(scope.row.status) &&
+                havePermission(scope.row, 'Edit')
+              "
               text
               type="primary"
-              :disabled="
-                $disabledByPermission(
-                  'user_edition_all_data',
-                  scope.row.user_id,
-                )
-              "
               @click="handleActive(scope.row)"
             >
               {{ $t('user_list_activation') }}
             </el-button>
             <ElDivider
-              v-if="['rejected', 'notActivated'].includes(scope.row.status)"
+              v-if="
+                ['rejected', 'notActivated'].includes(scope.row.status) &&
+                havePermission(scope.row, 'Edit')
+              "
               class="mx-1"
               direction="vertical"
             />
             <el-button
-              v-if="!['rejected'].includes(scope.row.status)"
-              v-readonlybtn="'user_edition'"
+              v-if="
+                !['rejected'].includes(scope.row.status) &&
+                havePermission(scope.row, 'Edit')
+              "
               text
               type="primary"
-              :disabled="
-                $disabledByPermission(
-                  'user_edition_all_data',
-                  scope.row.user_id,
-                )
-              "
               @click="handleFreeze(scope.row)"
             >
               {{ $t('user_list_freeze') }}
             </el-button>
             <ElDivider
-              v-if="!['rejected'].includes(scope.row.status)"
+              v-if="
+                !['rejected'].includes(scope.row.status) &&
+                havePermission(scope.row, 'Edit')
+              "
               class="mx-1"
               direction="vertical"
             />
             <el-button
-              v-if="['notVerified'].includes(scope.row.status)"
-              v-readonlybtn="'user_edition'"
+              v-if="
+                ['notVerified'].includes(scope.row.status) &&
+                havePermission(scope.row, 'Edit')
+              "
               text
               type="primary"
-              :disabled="
-                $disabledByPermission(
-                  'user_edition_all_data',
-                  scope.row.user_id,
-                )
-              "
               @click="handleCheck(scope.row)"
               >{{ $t('user_list_check') }}</el-button
             >
             <ElDivider
-              v-if="['notVerified'].includes(scope.row.status)"
+              v-if="
+                ['notVerified'].includes(scope.row.status) &&
+                havePermission(scope.row, 'Edit')
+              "
               class="mx-1"
               direction="vertical"
             />
             <el-button
-              v-if="['activated', 'rejected'].includes(scope.row.status)"
-              v-readonlybtn="'user_edition'"
+              v-if="
+                ['activated', 'rejected'].includes(scope.row.status) &&
+                havePermission(scope.row, 'Edit')
+              "
               text
               type="primary"
-              :disabled="
-                $disabledByPermission(
-                  'user_edition_all_data',
-                  scope.row.user_id,
-                )
-              "
               @click="edit(scope.row)"
               >{{ $t('public_button_edit') }}</el-button
             >
             <ElDivider
-              v-if="['activated', 'rejected'].includes(scope.row.status)"
+              v-if="
+                ['activated', 'rejected'].includes(scope.row.status) &&
+                havePermission(scope.row, 'Edit')
+              "
               class="mx-1"
               direction="vertical"
             />
             <el-button
-              v-readonlybtn="'user_delete'"
+              v-if="havePermission(scope.row, 'Delete')"
               text
               type="primary"
-              :disabled="
-                $disabledByPermission('user_delete_all_data', scope.row.user_id)
-              "
               @click="remove(scope.row)"
               >{{ $t('public_button_delete') }}</el-button
             >
diff --git a/packages/api/src/core/group-info.ts b/packages/api/src/core/group-info.ts
index 6e99509fa..b61424943 100644
--- a/packages/api/src/core/group-info.ts
+++ b/packages/api/src/core/group-info.ts
@@ -46,6 +46,7 @@ export interface GroupInfoDto {
   lastUpdAt?: Date | string
   createUser?: string
   lastUpdBy?: string
+  permissionActions?: string[]
   gitInfo?: {
     repoUrl: string
     token: string
diff --git a/packages/business/src/views/heartbeat-table/List.vue b/packages/business/src/views/heartbeat-table/List.vue
index 45641677b..8e49ad0ab 100644
--- a/packages/business/src/views/heartbeat-table/List.vue
+++ b/packages/business/src/views/heartbeat-table/List.vue
@@ -28,6 +28,11 @@ const buried =
   inject<(name: string, extra?: string, params?: object) => void>('buried')
 const isDaas = import.meta.env.VUE_APP_PLATFORM === 'DAAS'
 
+const havePermission = (row: any, type: string) => {
+  if (!isDaas) return true
+  return row.permissionActions?.includes(type)
+}
+
 // ── Refs ──────────────────────────────────────────────────────────────────────
 
 const table = ref<any>()
@@ -311,8 +316,11 @@ onUnmounted(() => {
         <template #default="{ row }">
           <div class="table-operations">
             <ElButton
-              v-if="row.btnDisabled.stop && row.btnDisabled.forceStop"
-              v-readonlybtn="'SYNC_job_operation'"
+              v-if="
+                row.btnDisabled.stop &&
+                row.btnDisabled.forceStop &&
+                havePermission(row, 'Start')
+              "
               text
               type="primary"
               :disabled="row.btnDisabled.start"
@@ -320,10 +328,9 @@ onUnmounted(() => {
             >
               {{ $t('public_button_start') }}
             </ElButton>
-            <template v-else>
+            <template v-else-if="havePermission(row, 'Stop')">
               <ElButton
                 v-if="row.status === 'stopping'"
-                v-readonlybtn="'SYNC_job_operation'"
                 text
                 type="primary"
                 :disabled="row.btnDisabled.forceStop"
@@ -333,7 +340,6 @@ onUnmounted(() => {
               </ElButton>
               <ElButton
                 v-else
-                v-readonlybtn="'SYNC_job_operation'"
                 text
                 type="primary"
                 :disabled="row.btnDisabled.stop"
@@ -343,12 +349,11 @@ onUnmounted(() => {
               </ElButton>
             </template>
             <ElDivider
-              v-readonlybtn="'SYNC_job_operation'"
+              v-if="havePermission(row, 'Start') || havePermission(row, 'Stop')"
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
               text
               type="primary"
               :disabled="row.btnDisabled.monitor && !row.lastStartDate"
@@ -357,12 +362,12 @@ onUnmounted(() => {
               {{ $t('packages_business_task_list_button_monitor') }}
             </ElButton>
             <ElDivider
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Reset')"
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Reset')"
               text
               type="primary"
               :disabled="row.btnDisabled.reset"
@@ -371,12 +376,12 @@ onUnmounted(() => {
               {{ $t('public_button_reset') }}
             </ElButton>
             <ElDivider
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Delete')"
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Delete')"
               text
               type="primary"
               :disabled="row.btnDisabled.delete"
diff --git a/packages/business/src/views/shared-cache/List.vue b/packages/business/src/views/shared-cache/List.vue
index 5a9f72b87..89fbfeb8b 100644
--- a/packages/business/src/views/shared-cache/List.vue
+++ b/packages/business/src/views/shared-cache/List.vue
@@ -36,6 +36,11 @@ const buried =
   inject<(name: string, extra?: string, params?: object) => void>('buried')
 const isDaas = import.meta.env.VUE_APP_PLATFORM === 'DAAS'
 
+const havePermission = (row: any, type: string) => {
+  if (!isDaas) return true
+  return row.permissionActions?.includes(type)
+}
+
 // ── Refs ──────────────────────────────────────────────────────────────────────
 
 const table = ref<any>()
@@ -317,22 +322,26 @@ onUnmounted(() => {
   <PageContainer>
     <template #actions>
       <el-button
+        v-if="$has('v2_shared_cache_export')"
         v-show="multipleSelection.length > 0 && isDaas"
-        v-readonlybtn="'SYNC_job_export'"
         class="btn message-button-cancel"
         @click="handleExport"
       >
         <span> {{ $t('public_button_export') }}</span>
       </el-button>
       <el-button
-        v-if="isDaas"
-        v-readonlybtn="'SYNC_job_import'"
+        v-if="isDaas && $has('v2_shared_cache_import')"
         class="btn"
         @click="handleImport"
       >
         <span> {{ $t('packages_business_button_bulk_import') }}</span>
       </el-button>
-      <ElButton class="btn btn-create" type="primary" @click="create">
+      <ElButton
+        v-if="$has('v2_shared_cache_creation')"
+        class="btn btn-create"
+        type="primary"
+        @click="create"
+      >
         <span> {{ $t('packages_business_shared_cache_button_create') }}</span>
       </ElButton>
     </template>
@@ -415,8 +424,11 @@ onUnmounted(() => {
         <template #default="{ row }">
           <div class="table-operations">
             <ElButton
-              v-if="row.btnDisabled.stop && row.btnDisabled.forceStop"
-              v-readonlybtn="'SYNC_job_operation'"
+              v-if="
+                row.btnDisabled.stop &&
+                row.btnDisabled.forceStop &&
+                havePermission(row, 'Start')
+              "
               text
               type="primary"
               :disabled="row.btnDisabled.start"
@@ -424,10 +436,9 @@ onUnmounted(() => {
             >
               {{ $t('public_button_start') }}
             </ElButton>
-            <template v-else>
+            <template v-else-if="havePermission(row, 'Stop')">
               <ElButton
                 v-if="row.status === 'stopping'"
-                v-readonlybtn="'SYNC_job_operation'"
                 text
                 type="primary"
                 :disabled="row.btnDisabled.forceStop"
@@ -437,7 +448,6 @@ onUnmounted(() => {
               </ElButton>
               <ElButton
                 v-else
-                v-readonlybtn="'SYNC_job_operation'"
                 text
                 type="primary"
                 :disabled="row.btnDisabled.stop"
@@ -447,12 +457,15 @@ onUnmounted(() => {
               </ElButton>
             </template>
             <ElDivider
-              v-readonlybtn="'SYNC_job_operation'"
+              v-if="
+                havePermission(row, 'Edit') &&
+                (havePermission(row, 'Start') || havePermission(row, 'Stop'))
+              "
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Edit')"
               text
               type="primary"
               :disabled="row.btnDisabled.edit"
@@ -461,12 +474,15 @@ onUnmounted(() => {
               {{ $t('public_button_edit') }}
             </ElButton>
             <ElDivider
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="
+                havePermission(row, 'Start') ||
+                havePermission(row, 'Stop') ||
+                havePermission(row, 'Edit')
+              "
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
               text
               type="primary"
               :disabled="row.btnDisabled.monitor && !row.lastStartDate"
@@ -475,12 +491,12 @@ onUnmounted(() => {
               {{ $t('packages_business_task_list_button_monitor') }}
             </ElButton>
             <ElDivider
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Reset')"
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Reset')"
               text
               type="primary"
               :disabled="row.btnDisabled.reset"
@@ -489,12 +505,12 @@ onUnmounted(() => {
               {{ $t('public_button_reset') }}
             </ElButton>
             <ElDivider
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Delete')"
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Delete')"
               text
               type="primary"
               :disabled="row.btnDisabled.delete"
diff --git a/packages/business/src/views/shared-mining/List.vue b/packages/business/src/views/shared-mining/List.vue
index 0492ac1cc..2274a0a0b 100644
--- a/packages/business/src/views/shared-mining/List.vue
+++ b/packages/business/src/views/shared-mining/List.vue
@@ -38,6 +38,11 @@ const buried =
   inject<(name: string, extra?: string, params?: object) => void>('buried')
 const isDaas = import.meta.env.VUE_APP_PLATFORM === 'DAAS'
 
+const havePermission = (row: any, type: string) => {
+  if (!isDaas) return true
+  return row.permissionActions?.includes(type)
+}
+
 // ── Refs ──────────────────────────────────────────────────────────────────────
 
 const table = ref<any>()
@@ -492,8 +497,11 @@ onUnmounted(() => {
         <template #default="{ row }">
           <div class="table-operations">
             <ElButton
-              v-if="row.btnDisabled.stop && row.btnDisabled.forceStop"
-              v-readonlybtn="'SYNC_job_operation'"
+              v-if="
+                row.btnDisabled.stop &&
+                row.btnDisabled.forceStop &&
+                havePermission(row, 'Start')
+              "
               text
               type="primary"
               :disabled="row.btnDisabled.start"
@@ -501,10 +509,9 @@ onUnmounted(() => {
             >
               {{ $t('public_button_start') }}
             </ElButton>
-            <template v-else>
+            <template v-else-if="havePermission(row, 'Stop')">
               <ElButton
                 v-if="row.status === 'stopping'"
-                v-readonlybtn="'SYNC_job_operation'"
                 text
                 type="primary"
                 :disabled="row.btnDisabled.forceStop"
@@ -514,7 +521,6 @@ onUnmounted(() => {
               </ElButton>
               <ElButton
                 v-else
-                v-readonlybtn="'SYNC_job_operation'"
                 text
                 type="primary"
                 :disabled="row.btnDisabled.stop"
@@ -524,12 +530,15 @@ onUnmounted(() => {
               </ElButton>
             </template>
             <ElDivider
-              v-readonlybtn="'SYNC_job_operation'"
+              v-if="
+                havePermission(row, 'Edit') &&
+                (havePermission(row, 'Start') || havePermission(row, 'Stop'))
+              "
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Edit')"
               text
               type="primary"
               :disabled="row.btnDisabled.edit"
@@ -538,12 +547,15 @@ onUnmounted(() => {
               {{ $t('public_button_edit') }}
             </ElButton>
             <ElDivider
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="
+                havePermission(row, 'Start') ||
+                havePermission(row, 'Stop') ||
+                havePermission(row, 'Edit')
+              "
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
               text
               type="primary"
               :disabled="row.btnDisabled.monitor && !row.lastStartDate"
@@ -552,12 +564,12 @@ onUnmounted(() => {
               {{ $t('packages_business_task_list_button_monitor') }}
             </ElButton>
             <ElDivider
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Reset')"
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Reset')"
               text
               type="primary"
               :disabled="row.btnDisabled.reset"
@@ -566,12 +578,12 @@ onUnmounted(() => {
               {{ $t('public_button_reset') }}
             </ElButton>
             <ElDivider
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Delete')"
               class="mx-1"
               direction="vertical"
             />
             <ElButton
-              v-readonlybtn="'SYNC_job_edition'"
+              v-if="havePermission(row, 'Delete')"
               text
               type="primary"
               :disabled="row.btnDisabled.delete"
diff --git a/packages/business/src/views/verification/List.vue b/packages/business/src/views/verification/List.vue
index e70bcb451..272df7d2f 100644
--- a/packages/business/src/views/verification/List.vue
+++ b/packages/business/src/views/verification/List.vue
@@ -540,11 +540,15 @@ onUnmounted(() => {
 <template>
   <PageContainer>
     <template #actions>
-      <ElButton :icon="ImportOutlined" @click="handleImport">
+      <ElButton
+        v-if="$has('v2_data_check_import')"
+        :icon="ImportOutlined"
+        @click="handleImport"
+      >
         {{ $t('public_task_import') }}
       </ElButton>
       <ElButton
-        v-readonlybtn="'datasource_creation'"
+        v-if="$has('v2_data_check_creation')"
         class="btn btn-create"
         type="primary"
         @click="handleCreate('pipeline')"
@@ -554,7 +558,7 @@ onUnmounted(() => {
         }}</span>
       </ElButton>
       <ElButton
-        v-readonlybtn="'datasource_creation'"
+        v-if="$has('v2_data_check_creation')"
         class="btn btn-create"
         type="primary"
         @click="handleCreate('random')"
@@ -687,7 +691,7 @@ onUnmounted(() => {
         <ElButton @click="$refs.table.showClassify(handleSelectTag())">
           <span> {{ $t('public_button_bulk_tag') }}</span>
         </ElButton>
-        <ElButton @click="handleExport">
+        <ElButton v-if="$has('v2_data_check_export')" @click="handleExport">
           <el-icon><ExportOutlined /></el-icon>
           <span> {{ $t('public_button_export') }}</span>
         </ElButton>
@@ -887,22 +891,8 @@ onUnmounted(() => {
               row.status === 'running'
             "
           >
-            <ElDivider
-              v-readonlybtn="'verify_job_edition'"
-              class="mx-1"
-              direction="vertical"
-            />
-            <ElButton
-              v-readonlybtn="'verify_job_edition'"
-              text
-              type="primary"
-              :disabled="
-                $disabledByPermission(
-                  'verify_job_edition_all_data',
-                  row.user_id,
-                )
-              "
-              @click="stop(row.id)"
+            <ElDivider class="mx-1" direction="vertical" />
+            <ElButton text type="primary" @click="stop(row.id)"
               >{{ $t('public_button_stop') }}
             </ElButton>
           </template>
@@ -915,14 +905,10 @@ onUnmounted(() => {
           >
             <ElDivider class="mx-1" direction="vertical" />
             <ElButton
-              v-readonlybtn="'verify_job_edition'"
               text
               type="primary"
               :disabled="
-                $disabledByPermission(
-                  'verify_job_edition_all_data',
-                  row.user_id,
-                ) || ['running', 'scheduling', 'stopping'].includes(row.status)
+                ['running', 'scheduling', 'stopping'].includes(row.status)
               "
               @click="startTask(row.id)"
               >{{ $t('packages_business_verification_executeVerifyTip') }}
@@ -931,7 +917,6 @@ onUnmounted(() => {
 
           <ElDivider class="mx-1" direction="vertical" />
           <ElButton
-            v-readonlybtn="'verify_job_edition'"
             text
             type="primary"
             :disabled="!row.InspectResult"
@@ -940,21 +925,11 @@ onUnmounted(() => {
           </ElButton>
 
           <template v-if="havePermission(row.permissionActions, 'Edit')">
-            <ElDivider
-              v-readonlybtn="'verify_job_edition'"
-              class="mx-1"
-              direction="vertical"
-            />
+            <ElDivider class="mx-1" direction="vertical" />
             <ElButton
-              v-readonlybtn="'verify_job_edition'"
               text
               type="primary"
-              :disabled="
-                $disabledByPermission(
-                  'verify_job_edition_all_data',
-                  row.user_id,
-                ) || ['running', 'scheduling'].includes(row.status)
-              "
+              :disabled="['running', 'scheduling'].includes(row.status)"
               @click="goEdit(row.id, row.flowId)"
               >{{ $t('packages_business_verification_configurationTip') }}
             </ElButton>
@@ -962,14 +937,7 @@ onUnmounted(() => {
 
           <template v-if="havePermission(row.permissionActions, 'Delete')">
             <ElDivider class="mx-1" direction="vertical" />
-            <ElButton
-              v-readonlybtn="'verify_job_edition'"
-              text
-              type="primary"
-              :disabled="
-                $disabledByPermission('verify_job_delete_all_data', row.user_id)
-              "
-              @click="remove(row.id, row)"
+            <ElButton text type="primary" @click="remove(row.id, row)"
               >{{ $t('public_button_delete') }}
             </ElButton>
           </template>

From c9d6ba089a0dfc85d6fba520540b0d10a52400e9 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Tue, 21 Jul 2026 17:44:32 +0800
Subject: [PATCH 2/7] fix: update button properties in Roles.vue to enhance UI
 consistency

---
 apps/daas/src/views/role/Roles.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/daas/src/views/role/Roles.vue b/apps/daas/src/views/role/Roles.vue
index d5dccc195..8aeacba8e 100644
--- a/apps/daas/src/views/role/Roles.vue
+++ b/apps/daas/src/views/role/Roles.vue
@@ -357,7 +357,8 @@ export default {
           <ElDivider class="mx-1" direction="vertical" />
           <ElButton
             v-readonlybtn="'role_edition'"
-            type="text"
+            text
+            type="primary"
             :disabled="
               $disabledByPermission('role_edition_all_data', scope.row.user_id)
             "

From 9691de55e0af24dc79553c45892d0a6a3e43ea7f Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Tue, 21 Jul 2026 17:59:09 +0800
Subject: [PATCH 3/7] fix(TAP-12273): normalize operation separators

---
 apps/daas/src/views/role/Roles.vue            | 137 ++++++++++--------
 apps/daas/src/views/user/List.vue             |  39 +----
 .../src/views/heartbeat-table/List.vue        |  62 +++-----
 .../business/src/views/shared-cache/List.vue  |  72 +++------
 .../business/src/views/shared-mining/List.vue |  72 +++------
 .../business/src/views/verification/List.vue  |  80 +++++-----
 6 files changed, 188 insertions(+), 274 deletions(-)

diff --git a/apps/daas/src/views/role/Roles.vue b/apps/daas/src/views/role/Roles.vue
index 8aeacba8e..c10068904 100644
--- a/apps/daas/src/views/role/Roles.vue
+++ b/apps/daas/src/views/role/Roles.vue
@@ -10,7 +10,9 @@ import { fetchUsers, getUserRoles } from '@tap/api/src/core/users'
 import PageContainer from '@tap/business/src/components/PageContainer.vue'
 import TablePage from '@tap/business/src/components/TablePage.vue'
 import { FilterBar } from '@tap/component/src/filter-bar'
+import { ElDivider } from 'element-plus'
 import { escapeRegExp } from 'lodash-es'
+import { h } from 'vue'
 import ApiAccessDialog from './ApiAccessDialog.vue'
 
 export default {
@@ -27,6 +29,7 @@ export default {
         // time: ''
       },
       order: 'last_updated DESC',
+      spacer: h(ElDivider, { direction: 'vertical', class: 'mx-1' }),
       tableData: [],
       roleusers: [],
       userGroup: [],
@@ -343,68 +346,78 @@ export default {
       </ElTableColumn>
       <ElTableColumn :label="$t('public_operation')" width="350">
         <template #default="scope">
-          <ElButton
-            v-readonlybtn="'role_edition'"
-            text
-            type="primary"
-            :disabled="
-              $disabledByPermission('role_edition_all_data', scope.row.user_id)
-            "
-            @click="handleSettingPermissions(scope.row.id, scope.row.name)"
-          >
-            {{ $t('role_list_setting_permissions') }}
-          </ElButton>
-          <ElDivider class="mx-1" direction="vertical" />
-          <ElButton
-            v-readonlybtn="'role_edition'"
-            text
-            type="primary"
-            :disabled="
-              $disabledByPermission('role_edition_all_data', scope.row.user_id)
-            "
-            @click="handleSettingApi(scope.row.id, scope.row.name)"
-          >
-            {{ $t('role_list_setting_api') }}
-          </ElButton>
-          <ElDivider class="mx-1" direction="vertical" />
-          <ElButton
-            v-readonlybtn="'role_edition'"
-            text
-            type="primary"
-            :disabled="
-              $disabledByPermission('role_edition_all_data', scope.row.user_id)
-            "
-            @click="handleAssociatUsers(scope.row.id)"
-          >
-            {{ $t('role_list_associat_users') }}
-          </ElButton>
-          <ElDivider class="mx-1" direction="vertical" />
-          <ElButton
-            v-readonlybtn="'role_edition'"
-            text
-            type="primary"
-            :disabled="
-              $disabledByPermission('role_edition_all_data', scope.row.user_id)
-            "
-            @click="openCreateDialog(scope.row.id, scope.row)"
-          >
-            {{ $t('public_button_edit') }}
-          </ElButton>
-          <ElDivider class="mx-1" direction="vertical" />
-          <ElButton
-            v-readonlybtn="'role_delete'"
-            text
-            type="primary"
-            :disabled="
-              $disabledByPermission(
-                'role_delete_all_data',
-                scope.row.user_id,
-              ) || scope.row.name === 'admin'
-            "
-            @click="handleDelete(scope.row)"
-          >
-            {{ $t('public_button_delete') }}
-          </ElButton>
+          <el-space :spacer="spacer" :size="0" class="flex-wrap">
+            <ElButton
+              v-readonlybtn="'role_edition'"
+              text
+              type="primary"
+              :disabled="
+                $disabledByPermission(
+                  'role_edition_all_data',
+                  scope.row.user_id,
+                )
+              "
+              @click="handleSettingPermissions(scope.row.id, scope.row.name)"
+            >
+              {{ $t('role_list_setting_permissions') }}
+            </ElButton>
+            <ElButton
+              v-readonlybtn="'role_edition'"
+              text
+              type="primary"
+              :disabled="
+                $disabledByPermission(
+                  'role_edition_all_data',
+                  scope.row.user_id,
+                )
+              "
+              @click="handleSettingApi(scope.row.id, scope.row.name)"
+            >
+              {{ $t('role_list_setting_api') }}
+            </ElButton>
+            <ElButton
+              v-readonlybtn="'role_edition'"
+              text
+              type="primary"
+              :disabled="
+                $disabledByPermission(
+                  'role_edition_all_data',
+                  scope.row.user_id,
+                )
+              "
+              @click="handleAssociatUsers(scope.row.id)"
+            >
+              {{ $t('role_list_associat_users') }}
+            </ElButton>
+            <ElButton
+              v-readonlybtn="'role_edition'"
+              text
+              type="primary"
+              :disabled="
+                $disabledByPermission(
+                  'role_edition_all_data',
+                  scope.row.user_id,
+                )
+              "
+              @click="openCreateDialog(scope.row.id, scope.row)"
+            >
+              {{ $t('public_button_edit') }}
+            </ElButton>
+            <ElButton
+              v-readonlybtn="'role_delete'"
+              text
+              type="primary"
+              :disabled="
+                $disabledByPermission(
+                  'role_delete_all_data',
+                  scope.row.user_id,
+                ) || scope.row.name === 'admin'
+              "
+              @click="handleDelete(scope.row)"
+            >
+              {{ $t('public_button_delete') }}
+            </ElButton>
+          </el-space>
         </template>
       </ElTableColumn>
     </TablePage>
diff --git a/apps/daas/src/views/user/List.vue b/apps/daas/src/views/user/List.vue
index 9ccc001bb..719e92e46 100644
--- a/apps/daas/src/views/user/List.vue
+++ b/apps/daas/src/views/user/List.vue
@@ -16,7 +16,9 @@ import TablePage from '@tap/business/src/components/TablePage.vue'
 import { DownBoldOutlined } from '@tap/component/src/DownBoldOutlined'
 import { FilterBar } from '@tap/component/src/filter-bar'
 import dayjs from 'dayjs'
+import { ElDivider } from 'element-plus'
 import { escapeRegExp } from 'lodash-es'
+import { h } from 'vue'
 
 export default {
   components: {
@@ -34,6 +36,7 @@ export default {
       },
       showTooltip: false,
       order: 'last_updated DESC',
+      spacer: h(ElDivider, { direction: 'vertical', class: 'mx-1' }),
       list: null,
       multipleSelection: [],
       roleMappding: [],
@@ -960,7 +963,7 @@ export default {
       </el-table-column>
       <el-table-column :label="$t('public_operation')" width="210">
         <template #default="scope">
-          <div>
+          <el-space :spacer="spacer" :size="0" class="flex-wrap">
             <el-button
               v-if="
                 ['rejected', 'notActivated'].includes(scope.row.status) &&
@@ -972,14 +975,6 @@ export default {
             >
               {{ $t('user_list_activation') }}
             </el-button>
-            <ElDivider
-              v-if="
-                ['rejected', 'notActivated'].includes(scope.row.status) &&
-                havePermission(scope.row, 'Edit')
-              "
-              class="mx-1"
-              direction="vertical"
-            />
             <el-button
               v-if="
                 !['rejected'].includes(scope.row.status) &&
@@ -991,14 +986,6 @@ export default {
             >
               {{ $t('user_list_freeze') }}
             </el-button>
-            <ElDivider
-              v-if="
-                !['rejected'].includes(scope.row.status) &&
-                havePermission(scope.row, 'Edit')
-              "
-              class="mx-1"
-              direction="vertical"
-            />
             <el-button
               v-if="
                 ['notVerified'].includes(scope.row.status) &&
@@ -1009,14 +996,6 @@ export default {
               @click="handleCheck(scope.row)"
               >{{ $t('user_list_check') }}</el-button
             >
-            <ElDivider
-              v-if="
-                ['notVerified'].includes(scope.row.status) &&
-                havePermission(scope.row, 'Edit')
-              "
-              class="mx-1"
-              direction="vertical"
-            />
             <el-button
               v-if="
                 ['activated', 'rejected'].includes(scope.row.status) &&
@@ -1027,14 +1006,6 @@ export default {
               @click="edit(scope.row)"
               >{{ $t('public_button_edit') }}</el-button
             >
-            <ElDivider
-              v-if="
-                ['activated', 'rejected'].includes(scope.row.status) &&
-                havePermission(scope.row, 'Edit')
-              "
-              class="mx-1"
-              direction="vertical"
-            />
             <el-button
               v-if="havePermission(scope.row, 'Delete')"
               text
@@ -1042,7 +1013,7 @@ export default {
               @click="remove(scope.row)"
               >{{ $t('public_button_delete') }}</el-button
             >
-          </div>
+          </el-space>
         </template>
       </el-table-column>
     </TablePage>
diff --git a/packages/business/src/views/heartbeat-table/List.vue b/packages/business/src/views/heartbeat-table/List.vue
index 8e49ad0ab..9d379d561 100644
--- a/packages/business/src/views/heartbeat-table/List.vue
+++ b/packages/business/src/views/heartbeat-table/List.vue
@@ -14,7 +14,7 @@ import { useI18n } from '@tap/i18n'
 import dayjs from 'dayjs'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { escapeRegExp, uniqBy } from 'lodash-es'
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, h, inject, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PageContainer from '../../components/PageContainer.vue'
 import TablePage from '../../components/TablePage.vue'
@@ -44,6 +44,7 @@ const searchParams = ref({
 })
 
 const order = ref('createTime DESC')
+const spacer = h(ElDivider, { direction: 'vertical', class: 'mx-1' })
 let timer: ReturnType<typeof setInterval> | null = null
 const taskBuried = { start: 'heartbeatStart' }
 
@@ -314,7 +315,7 @@ onUnmounted(() => {
         :label="$t('public_operation')"
       >
         <template #default="{ row }">
-          <div class="table-operations">
+          <el-space :spacer="spacer" :size="0" class="flex-wrap">
             <ElButton
               v-if="
                 row.btnDisabled.stop &&
@@ -328,31 +329,26 @@ onUnmounted(() => {
             >
               {{ $t('public_button_start') }}
             </ElButton>
-            <template v-else-if="havePermission(row, 'Stop')">
-              <ElButton
-                v-if="row.status === 'stopping'"
-                text
-                type="primary"
-                :disabled="row.btnDisabled.forceStop"
-                @click="forceStop([row.id], row)"
-              >
-                {{ $t('public_button_force_stop') }}
-              </ElButton>
-              <ElButton
-                v-else
-                text
-                type="primary"
-                :disabled="row.btnDisabled.stop"
-                @click="stop([row.id])"
-              >
-                {{ $t('public_button_stop') }}
-              </ElButton>
-            </template>
-            <ElDivider
-              v-if="havePermission(row, 'Start') || havePermission(row, 'Stop')"
-              class="mx-1"
-              direction="vertical"
-            />
+            <ElButton
+              v-else-if="
+                havePermission(row, 'Stop') && row.status === 'stopping'
+              "
+              text
+              type="primary"
+              :disabled="row.btnDisabled.forceStop"
+              @click="forceStop([row.id], row)"
+            >
+              {{ $t('public_button_force_stop') }}
+            </ElButton>
+            <ElButton
+              v-else-if="havePermission(row, 'Stop')"
+              text
+              type="primary"
+              :disabled="row.btnDisabled.stop"
+              @click="stop([row.id])"
+            >
+              {{ $t('public_button_stop') }}
+            </ElButton>
             <ElButton
               text
               type="primary"
@@ -361,11 +357,6 @@ onUnmounted(() => {
             >
               {{ $t('packages_business_task_list_button_monitor') }}
             </ElButton>
-            <ElDivider
-              v-if="havePermission(row, 'Reset')"
-              class="mx-1"
-              direction="vertical"
-            />
             <ElButton
               v-if="havePermission(row, 'Reset')"
               text
@@ -375,11 +366,6 @@ onUnmounted(() => {
             >
               {{ $t('public_button_reset') }}
             </ElButton>
-            <ElDivider
-              v-if="havePermission(row, 'Delete')"
-              class="mx-1"
-              direction="vertical"
-            />
             <ElButton
               v-if="havePermission(row, 'Delete')"
               text
@@ -389,7 +375,7 @@ onUnmounted(() => {
             >
               {{ $t('public_button_delete') }}
             </ElButton>
-          </div>
+          </el-space>
         </template>
       </el-table-column>
     </TablePage>
diff --git a/packages/business/src/views/shared-cache/List.vue b/packages/business/src/views/shared-cache/List.vue
index 89fbfeb8b..8efa8cdfe 100644
--- a/packages/business/src/views/shared-cache/List.vue
+++ b/packages/business/src/views/shared-cache/List.vue
@@ -19,7 +19,7 @@ import { useI18n } from '@tap/i18n'
 import dayjs from 'dayjs'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { escapeRegExp, uniqBy } from 'lodash-es'
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, h, inject, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PageContainer from '../../components/PageContainer.vue'
 import TablePage from '../../components/TablePage.vue'
@@ -56,6 +56,7 @@ const searchParams = ref({
 })
 
 const order = ref('cacheTimeAt DESC')
+const spacer = h(ElDivider, { direction: 'vertical', class: 'mx-1' })
 let timer: ReturnType<typeof setInterval> | null = null
 const taskBuried = { start: 'sharedMiningStart' }
 const multipleSelection = ref<any[]>([])
@@ -422,7 +423,7 @@ onUnmounted(() => {
       </ElTableColumn>
       <ElTableColumn width="290" :label="$t('public_operation')" fixed="right">
         <template #default="{ row }">
-          <div class="table-operations">
+          <el-space :spacer="spacer" :size="0" class="flex-wrap">
             <ElButton
               v-if="
                 row.btnDisabled.stop &&
@@ -436,34 +437,26 @@ onUnmounted(() => {
             >
               {{ $t('public_button_start') }}
             </ElButton>
-            <template v-else-if="havePermission(row, 'Stop')">
-              <ElButton
-                v-if="row.status === 'stopping'"
-                text
-                type="primary"
-                :disabled="row.btnDisabled.forceStop"
-                @click="forceStop([row.id], row)"
-              >
-                {{ $t('public_button_force_stop') }}
-              </ElButton>
-              <ElButton
-                v-else
-                text
-                type="primary"
-                :disabled="row.btnDisabled.stop"
-                @click="stop([row.id])"
-              >
-                {{ $t('public_button_stop') }}
-              </ElButton>
-            </template>
-            <ElDivider
-              v-if="
-                havePermission(row, 'Edit') &&
-                (havePermission(row, 'Start') || havePermission(row, 'Stop'))
+            <ElButton
+              v-else-if="
+                havePermission(row, 'Stop') && row.status === 'stopping'
               "
-              class="mx-1"
-              direction="vertical"
-            />
+              text
+              type="primary"
+              :disabled="row.btnDisabled.forceStop"
+              @click="forceStop([row.id], row)"
+            >
+              {{ $t('public_button_force_stop') }}
+            </ElButton>
+            <ElButton
+              v-else-if="havePermission(row, 'Stop')"
+              text
+              type="primary"
+              :disabled="row.btnDisabled.stop"
+              @click="stop([row.id])"
+            >
+              {{ $t('public_button_stop') }}
+            </ElButton>
             <ElButton
               v-if="havePermission(row, 'Edit')"
               text
@@ -473,15 +466,6 @@ onUnmounted(() => {
             >
               {{ $t('public_button_edit') }}
             </ElButton>
-            <ElDivider
-              v-if="
-                havePermission(row, 'Start') ||
-                havePermission(row, 'Stop') ||
-                havePermission(row, 'Edit')
-              "
-              class="mx-1"
-              direction="vertical"
-            />
             <ElButton
               text
               type="primary"
@@ -490,11 +474,6 @@ onUnmounted(() => {
             >
               {{ $t('packages_business_task_list_button_monitor') }}
             </ElButton>
-            <ElDivider
-              v-if="havePermission(row, 'Reset')"
-              class="mx-1"
-              direction="vertical"
-            />
             <ElButton
               v-if="havePermission(row, 'Reset')"
               text
@@ -504,11 +483,6 @@ onUnmounted(() => {
             >
               {{ $t('public_button_reset') }}
             </ElButton>
-            <ElDivider
-              v-if="havePermission(row, 'Delete')"
-              class="mx-1"
-              direction="vertical"
-            />
             <ElButton
               v-if="havePermission(row, 'Delete')"
               text
@@ -518,7 +492,7 @@ onUnmounted(() => {
             >
               {{ $t('public_button_delete') }}
             </ElButton>
-          </div>
+          </el-space>
         </template>
       </ElTableColumn>
     </TablePage>
diff --git a/packages/business/src/views/shared-mining/List.vue b/packages/business/src/views/shared-mining/List.vue
index 2274a0a0b..276cd272b 100644
--- a/packages/business/src/views/shared-mining/List.vue
+++ b/packages/business/src/views/shared-mining/List.vue
@@ -23,7 +23,7 @@ import { calcTimeUnit, openUrl } from '@tap/shared'
 import dayjs from 'dayjs'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { escapeRegExp, uniqBy } from 'lodash-es'
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, h, inject, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PageContainer from '../../components/PageContainer.vue'
 import TablePage from '../../components/TablePage.vue'
@@ -57,6 +57,7 @@ const searchParams = ref({
 })
 
 const order = ref('createTime DESC')
+const spacer = h(ElDivider, { direction: 'vertical', class: 'mx-1' })
 let timer: ReturnType<typeof setInterval> | null = null
 const taskBuried = { start: 'sharedMiningStart' }
 
@@ -495,7 +496,7 @@ onUnmounted(() => {
         :label="$t('public_operation')"
       >
         <template #default="{ row }">
-          <div class="table-operations">
+          <el-space :spacer="spacer" :size="0" class="flex-wrap">
             <ElButton
               v-if="
                 row.btnDisabled.stop &&
@@ -509,34 +510,26 @@ onUnmounted(() => {
             >
               {{ $t('public_button_start') }}
             </ElButton>
-            <template v-else-if="havePermission(row, 'Stop')">
-              <ElButton
-                v-if="row.status === 'stopping'"
-                text
-                type="primary"
-                :disabled="row.btnDisabled.forceStop"
-                @click="forceStop([row.id], row)"
-              >
-                {{ $t('public_button_force_stop') }}
-              </ElButton>
-              <ElButton
-                v-else
-                text
-                type="primary"
-                :disabled="row.btnDisabled.stop"
-                @click="stop([row.id])"
-              >
-                {{ $t('public_button_stop') }}
-              </ElButton>
-            </template>
-            <ElDivider
-              v-if="
-                havePermission(row, 'Edit') &&
-                (havePermission(row, 'Start') || havePermission(row, 'Stop'))
+            <ElButton
+              v-else-if="
+                havePermission(row, 'Stop') && row.status === 'stopping'
               "
-              class="mx-1"
-              direction="vertical"
-            />
+              text
+              type="primary"
+              :disabled="row.btnDisabled.forceStop"
+              @click="forceStop([row.id], row)"
+            >
+              {{ $t('public_button_force_stop') }}
+            </ElButton>
+            <ElButton
+              v-else-if="havePermission(row, 'Stop')"
+              text
+              type="primary"
+              :disabled="row.btnDisabled.stop"
+              @click="stop([row.id])"
+            >
+              {{ $t('public_button_stop') }}
+            </ElButton>
             <ElButton
               v-if="havePermission(row, 'Edit')"
               text
@@ -546,15 +539,6 @@ onUnmounted(() => {
             >
               {{ $t('public_button_edit') }}
             </ElButton>
-            <ElDivider
-              v-if="
-                havePermission(row, 'Start') ||
-                havePermission(row, 'Stop') ||
-                havePermission(row, 'Edit')
-              "
-              class="mx-1"
-              direction="vertical"
-            />
             <ElButton
               text
               type="primary"
@@ -563,11 +547,6 @@ onUnmounted(() => {
             >
               {{ $t('packages_business_task_list_button_monitor') }}
             </ElButton>
-            <ElDivider
-              v-if="havePermission(row, 'Reset')"
-              class="mx-1"
-              direction="vertical"
-            />
             <ElButton
               v-if="havePermission(row, 'Reset')"
               text
@@ -577,11 +556,6 @@ onUnmounted(() => {
             >
               {{ $t('public_button_reset') }}
             </ElButton>
-            <ElDivider
-              v-if="havePermission(row, 'Delete')"
-              class="mx-1"
-              direction="vertical"
-            />
             <ElButton
               v-if="havePermission(row, 'Delete')"
               text
@@ -591,7 +565,7 @@ onUnmounted(() => {
             >
               {{ $t('public_button_delete') }}
             </ElButton>
-          </div>
+          </el-space>
         </template>
       </el-table-column>
     </TablePage>
diff --git a/packages/business/src/views/verification/List.vue b/packages/business/src/views/verification/List.vue
index 272df7d2f..41ed5c16c 100644
--- a/packages/business/src/views/verification/List.vue
+++ b/packages/business/src/views/verification/List.vue
@@ -23,7 +23,7 @@ import { useI18n } from '@tap/i18n'
 import { calcUnit } from '@tap/shared'
 import dayjs from 'dayjs'
 import { escapeRegExp } from 'lodash-es'
-import { computed, onBeforeMount, onUnmounted, ref, watch } from 'vue'
+import { computed, h, onBeforeMount, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ErrorMessage } from '../../components/error-message'
 import PageContainer from '../../components/PageContainer.vue'
@@ -109,6 +109,7 @@ const importLoading = ref(false)
 // Reactive data
 const isDaas = import.meta.env.VUE_APP_PLATFORM === 'DAAS'
 const order = ref('last_updated DESC')
+const spacer = h(ElDivider, { direction: 'vertical', class: 'mx-1' })
 const multipleSelection = ref<InspectItem[]>([])
 
 const searchParams = ref<SearchParams>({
@@ -877,34 +878,31 @@ onUnmounted(() => {
         </template>
 
         <template #default="{ row }">
-          <ElButton
-            text
-            type="primary"
-            :disabled="!row.InspectResult"
-            @click="toTableInfo(row.id)"
-            >{{ $t('packages_business_verification_result_title') }}
-          </ElButton>
-
-          <template
-            v-if="
-              havePermission(row.permissionActions, 'Stop') &&
-              row.status === 'running'
-            "
-          >
-            <ElDivider class="mx-1" direction="vertical" />
-            <ElButton text type="primary" @click="stop(row.id)"
+          <el-space :spacer="spacer" :size="0" class="flex-wrap">
+            <ElButton
+              text
+              type="primary"
+              :disabled="!row.InspectResult"
+              @click="toTableInfo(row.id)"
+              >{{ $t('packages_business_verification_result_title') }}
+            </ElButton>
+
+            <ElButton
+              v-if="
+                havePermission(row.permissionActions, 'Stop') &&
+                row.status === 'running'
+              "
+              text
+              type="primary"
+              @click="stop(row.id)"
               >{{ $t('public_button_stop') }}
             </ElButton>
-          </template>
 
-          <template
-            v-if="
-              havePermission(row.permissionActions, 'Start') &&
-              row.status !== 'running'
-            "
-          >
-            <ElDivider class="mx-1" direction="vertical" />
             <ElButton
+              v-if="
+                havePermission(row.permissionActions, 'Start') &&
+                row.status !== 'running'
+              "
               text
               type="primary"
               :disabled="
@@ -913,34 +911,32 @@ onUnmounted(() => {
               @click="startTask(row.id)"
               >{{ $t('packages_business_verification_executeVerifyTip') }}
             </ElButton>
-          </template>
 
-          <ElDivider class="mx-1" direction="vertical" />
-          <ElButton
-            text
-            type="primary"
-            :disabled="!row.InspectResult"
-            @click="history(row.id)"
-            >{{ $t('packages_business_verification_historyTip') }}
-          </ElButton>
-
-          <template v-if="havePermission(row.permissionActions, 'Edit')">
-            <ElDivider class="mx-1" direction="vertical" />
             <ElButton
+              text
+              type="primary"
+              :disabled="!row.InspectResult"
+              @click="history(row.id)"
+              >{{ $t('packages_business_verification_historyTip') }}
+            </ElButton>
+
+            <ElButton
+              v-if="havePermission(row.permissionActions, 'Edit')"
               text
               type="primary"
               :disabled="['running', 'scheduling'].includes(row.status)"
               @click="goEdit(row.id, row.flowId)"
               >{{ $t('packages_business_verification_configurationTip') }}
             </ElButton>
-          </template>
 
-          <template v-if="havePermission(row.permissionActions, 'Delete')">
-            <ElDivider class="mx-1" direction="vertical" />
-            <ElButton text type="primary" @click="remove(row.id, row)"
+            <ElButton
+              v-if="havePermission(row.permissionActions, 'Delete')"
+              text
+              type="primary"
+              @click="remove(row.id, row)"
               >{{ $t('public_button_delete') }}
             </ElButton>
-          </template>
+          </el-space>
         </template>
       </el-table-column>
     </TablePage>

From d619e9b11d152fb1fafdfdc6452035b9d30382ba Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 23 Jul 2026 10:18:04 +0800
Subject: [PATCH 4/7] feat(TAP-12273): redesign role permission workspace

---
 apps/daas/src/i18n/langs/en.js    |   16 +
 apps/daas/src/i18n/langs/zh-CN.js |   14 +
 apps/daas/src/i18n/langs/zh-TW.js |   14 +
 apps/daas/src/views/role/Role.vue | 1382 +++++++++++++++++++++--------
 4 files changed, 1052 insertions(+), 374 deletions(-)

diff --git a/apps/daas/src/i18n/langs/en.js b/apps/daas/src/i18n/langs/en.js
index 430d96b28..8332d840d 100644
--- a/apps/daas/src/i18n/langs/en.js
+++ b/apps/daas/src/i18n/langs/en.js
@@ -2044,6 +2044,22 @@ export default {
     'Please select the functions and data permissions available for this role (checking all role data means you can browse or operate the data of all roles, unchecking means you can only browse or operate your own data )',
   role_funcPermission: 'Function permission settings',
   role_currentRole: 'Current role',
+  role_permission_overview_subtitle:
+    'Configure the pages and actions available to this role',
+  role_permission_default_role: 'System default',
+  role_permission_accessible_pages: 'Accessible pages',
+  role_permission_enabled_permissions: 'Enabled permissions',
+  role_permission_enabled_modules: 'Active modules',
+  role_permission_coverage: 'Permission coverage',
+  role_permission_search_placeholder: 'Search pages or modules',
+  role_permission_page_access: 'Page access',
+  role_permission_inaccessible: 'No access',
+  role_permission_page_subtitle: 'Manage access and permission scope',
+  role_permission_function_description: 'Actions available on this page',
+  role_permission_data_description: 'Read and write control for data scope',
+  role_permission_deselect_all: 'Deselect all',
+  role_permission_no_extra_config:
+    'No additional configuration is required. Enable access to use this page.',
   role_pageVisible: 'Page permission settings',
   role_pageShowTip:
     'Checked means navigation and page are visible to the current character, unchecked will not display',
diff --git a/apps/daas/src/i18n/langs/zh-CN.js b/apps/daas/src/i18n/langs/zh-CN.js
index 592b96aee..141918b77 100644
--- a/apps/daas/src/i18n/langs/zh-CN.js
+++ b/apps/daas/src/i18n/langs/zh-CN.js
@@ -1944,6 +1944,20 @@ export default {
     '请选择此角色可用的功能和数据权限 （勾选全部角色数据表示可对全部角色的数据进行浏览或操作，不勾选则表示只能对自己的数据进行浏览或操作）',
   role_funcPermission: '功能权限设置',
   role_currentRole: '当前角色',
+  role_permission_overview_subtitle: '配置该角色可访问的页面及操作范围',
+  role_permission_default_role: '系统默认',
+  role_permission_accessible_pages: '可访问页面',
+  role_permission_enabled_permissions: '已启用权限',
+  role_permission_enabled_modules: '功能模块',
+  role_permission_coverage: '权限覆盖率',
+  role_permission_search_placeholder: '搜索页面或功能模块',
+  role_permission_page_access: '页面访问',
+  role_permission_inaccessible: '不可访问',
+  role_permission_page_subtitle: '管理此页面的访问与权限范围',
+  role_permission_function_description: '页面内可执行的操作',
+  role_permission_data_description: '对数据范围的读写控制',
+  role_permission_deselect_all: '取消全选',
+  role_permission_no_extra_config: '无需额外配置，开启访问即可使用',
   role_pageVisible: '页面权限设置',
   role_pageShowTip: '勾选相应模块表示此导航对当前角色可见，不勾选则不显示',
   role_choosePage: '选择页面权限',
diff --git a/apps/daas/src/i18n/langs/zh-TW.js b/apps/daas/src/i18n/langs/zh-TW.js
index 370b4df54..23dcebb13 100644
--- a/apps/daas/src/i18n/langs/zh-TW.js
+++ b/apps/daas/src/i18n/langs/zh-TW.js
@@ -1935,6 +1935,20 @@ export default {
     '請選擇此角色可用的功能和數據權限 （勾選全部角色數據表示可對全部角色的數據進行瀏覽或操作，不勾選則表示只能對自己的數據進行瀏覽或操作）',
   role_funcPermission: '功能權限',
   role_currentRole: '當前角色',
+  role_permission_overview_subtitle: '配置該角色可訪問的頁面及操作範圍',
+  role_permission_default_role: '系統默認',
+  role_permission_accessible_pages: '可訪問頁面',
+  role_permission_enabled_permissions: '已啟用權限',
+  role_permission_enabled_modules: '功能模塊',
+  role_permission_coverage: '權限覆蓋率',
+  role_permission_search_placeholder: '搜索頁面或功能模塊',
+  role_permission_page_access: '頁面訪問',
+  role_permission_inaccessible: '不可訪問',
+  role_permission_page_subtitle: '管理此頁面的訪問與權限範圍',
+  role_permission_function_description: '頁面內可執行的操作',
+  role_permission_data_description: '對數據範圍的讀寫控制',
+  role_permission_deselect_all: '取消全選',
+  role_permission_no_extra_config: '無需額外配置，開啟訪問即可使用',
   role_pageVisible: '頁面權限',
   role_pageShowTip: '請勾選此角色可見的頁面，不勾選表示頁面不顯示',
   role_choosePage: '選擇頁面',
diff --git a/apps/daas/src/views/role/Role.vue b/apps/daas/src/views/role/Role.vue
index bb6b0fdf0..f1ee0036f 100644
--- a/apps/daas/src/views/role/Role.vue
+++ b/apps/daas/src/views/role/Role.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { Check } from '@element-plus/icons-vue'
 import { fetchPermissions } from '@tap/api/src/core/permissions'
 import { fetchRoleMappings } from '@tap/api/src/core/role-mappings'
+import { fetchRoles } from '@tap/api/src/core/roles'
 import { updatePermissionRoleMapping } from '@tap/api/src/core/users'
 import PageContainer from '@tap/business/src/components/PageContainer.vue'
-import { Modal } from '@tap/component/src/modal'
 import { useI18n } from '@tap/i18n'
 import { ElMessage } from 'element-plus'
 import { computed, onMounted, reactive, ref } from 'vue'
@@ -19,14 +18,14 @@ const emit = defineEmits<{
   saveBack: []
 }>()
 
-// ---- 模块图标映射（与 menu.ts 中 icon 对应） ----
-const MODULE_ICONS: Record<string, string> = {
-  'v2_data-console': 'process-platform',
-  v2_datasource_menu: 'agent',
-  v2_data_pipeline: 'migrate',
-  v2_advanced_features: 'vip-one',
-  'v2_data-server': 'apiServer_navbar',
-  'v2_system-management': 'setting',
+// ---- 模块图标映射 ----
+const MODULE_ICONS: Record<string, any> = {
+  'v2_data-console': IconLucideLayoutDashboard,
+  v2_datasource_menu: IconLucideDatabase,
+  v2_data_pipeline: IconLucideGitBranch,
+  v2_advanced_features: IconLucideBoxes,
+  'v2_data-server': IconLucideServerCog,
+  'v2_system-management': IconLucideSettings,
 }
 
 // ---- pageSort 配置 ----
@@ -475,61 +474,119 @@ const roleusers = ref<string[]>([])
 const adds = ref<any[]>([])
 const deletes = ref<any[]>([])
 const searchKeyword = ref('')
-const expandedModules = reactive<Record<string, boolean>>({})
-
-const roleName = computed(() => (route.query.name as string) || '')
+const expandedPages = reactive<Record<string, boolean>>({})
+const roleDetail = ref<any>({})
+
+const roleName = computed(
+  () => roleDetail.value.name || (route.query.name as string) || '',
+)
+const roleDescription = computed(
+  () => roleDetail.value.description || t('role_permission_overview_subtitle'),
+)
+const isDefaultRole = computed(
+  () => roleDetail.value.register_user_default === true,
+)
 
 // ---- 计算属性 ----
 
-// 计算每个模块的权限统计
+function getCheckedStats(items: any[] = []) {
+  return {
+    total: items.length,
+    enabled: items.filter((item: any) => item.checked).length,
+  }
+}
+
+function getModuleIcon(name: string) {
+  return MODULE_ICONS[name] || IconLucidePanelTop
+}
+
+function getPageAccessLabel(page: any) {
+  return `${page.description} ${t('role_permission_page_access')}`
+}
+
+function getPageStats(page: any) {
+  return {
+    functions: getCheckedStats(page.buttons),
+    data: getCheckedStats(page.filterData),
+  }
+}
+
 function getModuleStats(item: any) {
-  let total = 0
-  let enabled = 0
-  item.children?.forEach((child: any) => {
-    total++ // 页面权限
-    if (child.checked) enabled++
-    child.buttons?.forEach((btn: any) => {
-      total++
-      if (btn.checked) enabled++
-    })
-    child.filterData?.forEach((fd: any) => {
-      total++
-      if (fd.checked) enabled++
-    })
-  })
-  return { total, enabled }
+  return getCheckedStats(item.children)
 }
 
+const overviewStats = computed(() => {
+  const modules = dataList.value
+  const pages = modules.flatMap((item: any) => item.children || [])
+  const permissions = pages.flatMap((page: any) => [
+    ...(page.buttons || []),
+    ...(page.filterData || []),
+  ])
+  const enabledPermissions = pages.reduce((total: number, page: any) => {
+    if (!page.checked) return total
+    return (
+      total +
+      [...(page.buttons || []), ...(page.filterData || [])].filter(
+        (permission: any) => permission.checked,
+      ).length
+    )
+  }, 0)
+
+  return {
+    pages: getCheckedStats(pages),
+    permissions: {
+      enabled: enabledPermissions,
+      total: permissions.length,
+    },
+    modules: modules.filter((item: any) =>
+      item.children?.some((page: any) => page.checked),
+    ).length,
+    coverage: permissions.length
+      ? Math.round((enabledPermissions / permissions.length) * 100)
+      : 0,
+  }
+})
+
+const overviewProgressStyle = computed(() => ({
+  width: `${overviewStats.value.coverage}%`,
+}))
+
 const filteredDataList = computed(() => {
   if (!searchKeyword.value) return dataList.value
-  const kw = searchKeyword.value.toLowerCase()
-  return dataList.value.filter((item: any) => {
-    // 匹配模块名
-    if (item.description?.toLowerCase().includes(kw)) return true
-    // 匹配页面权限名称
-    return item.children?.some((child: any) =>
-      child.description?.toLowerCase().includes(kw),
-    )
-  })
+  const keyword = searchKeyword.value.trim().toLowerCase()
+
+  return dataList.value
+    .map((item: any) => {
+      const moduleMatched = item.description?.toLowerCase().includes(keyword)
+      const children = moduleMatched
+        ? item.children
+        : item.children?.filter((child: any) =>
+            child.description?.toLowerCase().includes(keyword),
+          )
+      return { ...item, children }
+    })
+    .filter((item: any) => item.children?.length)
 })
 
 function isExpanded(name: string) {
-  return expandedModules[name] ?? false
+  return expandedPages[name] ?? false
 }
 
 function toggleExpand(name: string) {
-  expandedModules[name] = !isExpanded(name)
+  expandedPages[name] = !isExpanded(name)
 }
 
 function expandAll() {
   filteredDataList.value.forEach((item: any) => {
-    expandedModules[item.name] = true
+    item.children?.forEach((page: any) => {
+      expandedPages[page.name] = true
+    })
   })
 }
 
 function collapseAll() {
-  Object.keys(expandedModules).forEach((key) => {
-    expandedModules[key] = false
+  Object.keys(expandedPages).forEach((key) => {
+    expandedPages[key] = false
   })
 }
 
@@ -540,6 +597,8 @@ function getMappingData(pageData: any[]) {
   const filter = { where: { roleId: route.query.id } }
   fetchRoleMappings(filter)
     .then((data: any) => {
+      selectRole.value = []
+      roleusers.value = []
       if (data?.length) {
         data.forEach((item: any) => {
           if (item.principalType === 'USER') {
@@ -555,22 +614,22 @@ function getMappingData(pageData: any[]) {
             }
           }
         })
+      }
 
-        pageData?.forEach((item: any) => {
-          item.children?.forEach((childItem: any) => {
-            childItem.checked = selectRole.value.includes(childItem.name)
-            childItem.checkOrigin = selectRole.value.includes(childItem.name)
-            childItem.buttons?.forEach((el: any) => {
-              el.checked = selectRole.value.includes(el.name)
-              el.checkOrigin = selectRole.value.includes(el.name)
-            })
-            childItem.filterData?.forEach((el: any) => {
-              el.checked = selectRole.value.includes(el.name)
-              el.checkOrigin = selectRole.value.includes(el.name)
-            })
+      pageData?.forEach((item: any) => {
+        item.children?.forEach((childItem: any) => {
+          childItem.checked = selectRole.value.includes(childItem.name)
+          childItem.checkOrigin = childItem.checked
+          childItem.buttons?.forEach((permission: any) => {
+            permission.checked = selectRole.value.includes(permission.name)
+            permission.checkOrigin = permission.checked
+          })
+          childItem.filterData?.forEach((permission: any) => {
+            permission.checked = selectRole.value.includes(permission.name)
+            permission.checkOrigin = permission.checked
           })
         })
-      }
+      })
     })
     .finally(() => {
       loading.value = false
@@ -600,9 +659,10 @@ function getPermission() {
           })
         }
         dataList.value = pageMenu(pageSort)
-        // 默认全部展开
         dataList.value.forEach((item: any) => {
-          expandedModules[item.name] = true
+          item.children?.forEach((page: any) => {
+            expandedPages[page.name] = true
+          })
         })
         getMappingData(dataList.value)
       }
@@ -612,62 +672,52 @@ function getPermission() {
     })
 }
 
-// ---- 复选框逻辑 ----
+function getRoleDetail() {
+  const roleId = route.query.id as string
+  if (!roleId) return
+
+  fetchRoles({ where: { id: roleId }, limit: 1 }).then((data: any) => {
+    roleDetail.value = data?.items?.[0] || data?.[0] || {}
+  })
+}
 
-function handleCheckChange(data: any, parentData: any, type = 'page') {
-  updateData(data.checked, data)
+// ---- 权限联动 ----
 
-  if (type === 'page' && data.checked) {
-    data.buttons?.forEach((el: any) => {
-      el.checked = true
-      updateData(el.checked, el)
-    })
-  }
+function handlePageAccessChange(page: any, module: any) {
+  updateData(page.checked, page)
 
-  if (type === 'page' && !data.checked) {
-    if (
-      !!parentData.children?.every((t: any) => !t.checked) &&
-      !checkPrincipalId(deletes.value, parentData.name)?.length
-    ) {
-      parentData.checked = false
-      updateData(false, parentData)
-    }
-    data.buttons?.forEach((el: any) => {
-      el.checked = false
-      updateData(el.checked, el)
-    })
+  if (
+    !page.checked &&
+    module.children?.every((item: any) => !item.checked) &&
+    !checkPrincipalId(deletes.value, module.name)?.length
+  ) {
+    module.checked = false
+    updateData(false, module)
   }
+}
 
-  if (type === 'button' && data.checked) {
-    parentData.checked = true
-    updateData(parentData.checked, parentData)
+function ensurePageAccess(page: any) {
+  if (!page.checked) {
+    page.checked = true
+    updateData(true, page)
   }
 }
 
-// ---- 数据权限全选 ----
-
-function isDataAllChecked(second: any) {
-  return (
-    second.filterData?.length > 0 &&
-    second.filterData.every((d: any) => d.checked)
-  )
+function handlePermissionChange(permission: any, page: any) {
+  updateData(permission.checked, permission)
+  if (permission.checked) ensurePageAccess(page)
 }
 
-function isDataIndeterminate(second: any) {
-  if (!second.filterData?.length) return false
-  const checkedCount = second.filterData.filter((d: any) => d.checked).length
-  return checkedCount > 0 && checkedCount < second.filterData.length
+function isPermissionAllChecked(items: any[] = []) {
+  return items.length > 0 && items.every((item: any) => item.checked)
 }
 
-function toggleDataAll(checked: any, second: any) {
-  second.filterData?.forEach((sItem: any) => {
-    sItem.checked = checked
-    updateData(checked, sItem)
+function togglePermissionAll(checked: any, page: any, key: string) {
+  page[key]?.forEach((permission: any) => {
+    permission.checked = checked
+    updateData(checked, permission)
   })
-  if (checked) {
-    second.checked = true
-    updateData(true, second)
-  }
+  if (checked) ensurePageAccess(page)
 }
 
 function updateData(checked: boolean, data: any) {
@@ -728,48 +778,80 @@ function save() {
     })
 }
 
-function back() {
-  if (!adds.value.length && !deletes.value.length) {
-    router.push({ name: 'roles' })
-    return
-  }
-  Modal.confirm(
-    t('public_message_title_prompt'),
-    t('daas_role_role_ninhaiweibaocun'),
-  ).then((flag: any) => {
-    flag && save()
-  })
-}
-
 onMounted(() => {
+  getRoleDetail()
   getPermission()
 })
 </script>
 
 <template>
   <PageContainer mode="auto">
-    <template #left-actions>
-      <el-divider direction="vertical" />
-      <span class="flex align-center gap-2 bg-color-main rounded-lg px-2 py-1">
-        <span class="font-color-light">{{ t('role_currentRole') }}</span>
-        <el-tag type="primary" class="border-0 bg-white shadow-sm">{{
-          roleName
-        }}</el-tag>
-      </span>
-    </template>
     <template #actions>
       <el-button type="primary" :loading="saveloading" @click="save">
-        <template #icon><Check /></template>
+        <template #icon><i-lucide-save /></template>
         {{ t('public_button_save') }}
       </el-button>
     </template>
 
-    <div v-loading="loading" class="role-permission-wrap">
-      <!-- 工具栏：搜索 + 展开/收起 -->
+    <div v-loading="loading || permissLoading" class="role-permission-wrap">
+      <section class="role-overview" aria-labelledby="role-overview-title">
+        <div class="role-overview__content">
+          <div class="role-overview__identity">
+            <span class="role-overview__icon">
+              <el-icon :size="26"><i-lucide-shield-check /></el-icon>
+            </span>
+            <div class="role-overview__copy">
+              <div class="role-overview__title-row">
+                <h2 id="role-overview-title" class="role-overview__title">
+                  {{ roleName }}
+                </h2>
+                <span v-if="isDefaultRole" class="role-overview__tag">
+                  {{ t('role_permission_default_role') }}
+                </span>
+              </div>
+              <p class="role-overview__description">{{ roleDescription }}</p>
+            </div>
+          </div>
+
+          <dl class="role-overview__metrics">
+            <div class="role-overview__metric">
+              <dt>{{ t('role_permission_accessible_pages') }}</dt>
+              <dd>
+                {{ overviewStats.pages.enabled }}/{{
+                  overviewStats.pages.total
+                }}
+              </dd>
+            </div>
+            <div class="role-overview__metric">
+              <dt>{{ t('role_permission_enabled_permissions') }}</dt>
+              <dd>
+                {{ overviewStats.permissions.enabled }}/{{
+                  overviewStats.permissions.total
+                }}
+              </dd>
+            </div>
+            <div class="role-overview__metric">
+              <dt>{{ t('role_permission_enabled_modules') }}</dt>
+              <dd>{{ overviewStats.modules }}</dd>
+            </div>
+          </dl>
+        </div>
+        <div
+          class="role-overview__progress"
+          role="progressbar"
+          :aria-label="t('role_permission_coverage')"
+          :aria-valuenow="overviewStats.coverage"
+          aria-valuemin="0"
+          aria-valuemax="100"
+        >
+          <span :style="overviewProgressStyle" />
+        </div>
+      </section>
+
       <div class="role-toolbar">
         <el-input
           v-model="searchKeyword"
-          :placeholder="t('public_input_placeholder_search')"
+          :placeholder="t('role_permission_search_placeholder')"
           clearable
           class="role-toolbar__search"
         >
@@ -778,165 +860,246 @@ onMounted(() => {
           </template>
         </el-input>
         <div class="role-toolbar__actions">
-          <el-button text @click="expandAll">
+          <el-button @click="expandAll">
             <template #icon><i-lucide-unfold-vertical /></template>
             {{ t('public_button_expand_all') }}
           </el-button>
-          <el-button text @click="collapseAll">
+          <el-button @click="collapseAll">
             <template #icon><i-lucide-fold-vertical /></template>
             {{ t('public_button_collapse_all') }}
           </el-button>
         </div>
       </div>
 
-      <!-- 模块卡片列表 -->
       <div v-if="filteredDataList.length" class="role-module-list">
-        <div
+        <section
           v-for="item in filteredDataList"
           :key="item.name"
-          class="role-module-card"
+          class="role-module-group"
         >
-          <!-- 卡片头部 -->
-          <div
-            class="role-module-card__header"
-            @click="toggleExpand(item.name)"
-          >
-            <span class="role-module-card__icon">
-              <VIcon size="20">{{
-                MODULE_ICONS[item.name] || 'setting'
-              }}</VIcon>
+          <header class="role-module-group__header">
+            <span class="role-module-group__icon">
+              <el-icon :size="16">
+                <component :is="getModuleIcon(item.name)" />
+              </el-icon>
             </span>
-            <div class="role-module-card__info">
-              <span class="role-module-card__name">{{ item.description }}</span>
-              <span class="role-module-card__stats">
-                {{ getModuleStats(item).enabled }} /
-                {{ getModuleStats(item).total }}
-                {{ t('public_permissions_enabled') }}
-              </span>
-            </div>
-            <div class="role-module-card__progress">
-              <div class="role-progress-bar">
-                <div
-                  class="role-progress-bar__fill"
-                  :style="{
-                    width: getModuleStats(item).total
-                      ? `${
-                          (getModuleStats(item).enabled /
-                            getModuleStats(item).total) *
-                          100
-                        }%`
-                      : '0%',
-                  }"
-                />
-              </div>
-            </div>
-            <el-button
-              text
-              class="role-module-card__arrow"
-              :class="{ 'is-expanded': isExpanded(item.name) }"
-            >
-              <template #icon>
-                <!-- <el-icon
-                  class="role-module-card__arrow"
-                  :class="{ 'is-expanded': isExpanded(item.name) }"
-                >
-                  <i-lucide-chevron-down />
-                </el-icon> -->
-                <i-lucide-chevron-down />
-              </template>
-            </el-button>
-          </div>
-
-          <!-- 卡片内容 -->
-          <div v-show="isExpanded(item.name)" class="role-module-card__body">
-            <div
-              v-for="(second, secondIndex) in item.children"
-              :key="secondIndex"
-              class="role-permission-row"
-              :class="{ 'role-permission-row--bordered': secondIndex !== 0 }"
+            <h3 class="role-module-group__title">{{ item.description }}</h3>
+            <span class="role-module-group__count">
+              {{ getModuleStats(item).enabled }}/{{
+                getModuleStats(item).total
+              }}
+            </span>
+            <span class="role-module-group__line" aria-hidden="true" />
+          </header>
+
+          <div class="role-module-group__pages">
+            <article
+              v-for="second in item.children"
+              :key="second.name"
+              class="role-page-card"
+              :class="{
+                'is-expanded': isExpanded(second.name),
+                'is-inaccessible': !second.checked,
+              }"
             >
-              <!-- 页面权限 -->
-              <div class="role-permission-col role-permission-col--page">
-                <div class="role-permission-col__title">
-                  {{ t('daas_role_role_yemianquanxian') }}
-                </div>
-                <div v-if="second.id" class="role-checkbox-item">
-                  <el-checkbox
+              <header class="role-page-card__header">
+                <div class="role-page-card__access">
+                  <el-switch
                     v-model="second.checked"
-                    @change="handleCheckChange(second, item, 'page')"
-                  >
-                    {{ second.description }}
-                  </el-checkbox>
+                    :aria-label="getPageAccessLabel(second)"
+                    @change="handlePageAccessChange(second, item)"
+                  />
                 </div>
-              </div>
 
-              <!-- 功能权限 -->
-              <div class="role-permission-col role-permission-col--func">
-                <div class="role-permission-col__title">
-                  {{ t('daas_role_role_gongnengquanxian') }}
-                </div>
-                <div
-                  v-if="!second.buttons || !second.buttons.length"
-                  class="role-checkbox-item"
+                <button
+                  type="button"
+                  class="role-page-card__summary"
+                  :aria-expanded="isExpanded(second.name)"
+                  @click="toggleExpand(second.name)"
                 >
-                  <el-checkbox :model-value="true" disabled>
-                    {{ t('daas_role_role_quanbugongneng') }}
-                  </el-checkbox>
-                </div>
-                <div v-else class="role-checkbox-group">
-                  <div
-                    v-for="(sItem, sIndex) in second.buttons"
-                    :key="sIndex"
-                    class="role-checkbox-item"
+                  <span class="role-page-card__identity">
+                    <span class="role-page-card__title-row">
+                      <span class="role-page-card__title">
+                        {{ second.description }}
+                      </span>
+                      <span
+                        v-if="!second.checked"
+                        class="role-page-card__status"
+                      >
+                        {{ t('role_permission_inaccessible') }}
+                      </span>
+                    </span>
+                    <span class="role-page-card__description">
+                      {{ t('role_permission_page_subtitle') }}
+                    </span>
+                  </span>
+
+                  <span class="role-page-card__summary-stats">
+                    <span class="role-page-card__summary-stat">
+                      {{ t('daas_role_role_gongnengquanxian') }}
+                      <span
+                        v-if="getPageStats(second).functions.total"
+                        class="role-page-card__summary-count"
+                      >
+                        {{ getPageStats(second).functions.enabled }}/{{
+                          getPageStats(second).functions.total
+                        }}
+                      </span>
+                      <span v-else class="role-page-card__summary-empty"
+                        >&mdash;</span
+                      >
+                    </span>
+                    <span class="role-page-card__summary-stat">
+                      {{ t('role_dataPermission') }}
+                      <span
+                        v-if="getPageStats(second).data.total"
+                        class="role-page-card__summary-count"
+                      >
+                        {{ getPageStats(second).data.enabled }}/{{
+                          getPageStats(second).data.total
+                        }}
+                      </span>
+                      <span v-else class="role-page-card__summary-empty"
+                        >&mdash;</span
+                      >
+                    </span>
+                  </span>
+
+                  <span
+                    class="role-page-card__chevron"
+                    :class="{ 'is-expanded': isExpanded(second.name) }"
                   >
+                    <el-icon :size="18"><i-lucide-chevron-down /></el-icon>
+                  </span>
+                </button>
+              </header>
+
+              <div
+                v-show="isExpanded(second.name)"
+                class="role-page-card__body"
+                :class="{ 'is-inactive': !second.checked }"
+              >
+                <section
+                  v-if="second.buttons?.length"
+                  class="role-permission-section"
+                >
+                  <header class="role-permission-section__header">
+                    <div class="role-permission-section__heading">
+                      <span class="role-permission-section__icon is-function">
+                        <el-icon :size="16"><i-lucide-zap /></el-icon>
+                      </span>
+                      <div>
+                        <div class="role-permission-section__title-row">
+                          <h4>{{ t('daas_role_role_gongnengquanxian') }}</h4>
+                          <span class="role-permission-section__count">
+                            {{ getPageStats(second).functions.enabled }}/{{
+                              getPageStats(second).functions.total
+                            }}
+                          </span>
+                        </div>
+                        <p>{{ t('role_permission_function_description') }}</p>
+                      </div>
+                    </div>
+                    <el-button
+                      text
+                      type="primary"
+                      @click="
+                        togglePermissionAll(
+                          !isPermissionAllChecked(second.buttons),
+                          second,
+                          'buttons',
+                        )
+                      "
+                    >
+                      {{
+                        isPermissionAllChecked(second.buttons)
+                          ? t('role_permission_deselect_all')
+                          : t('public_select_all')
+                      }}
+                    </el-button>
+                  </header>
+
+                  <div class="role-permission-options">
                     <el-checkbox
-                      v-model="sItem.checked"
-                      @change="handleCheckChange(sItem, second, 'button')"
+                      v-for="permission in second.buttons"
+                      :key="permission.name"
+                      v-model="permission.checked"
+                      class="role-permission-option"
+                      :class="{ 'is-selected': permission.checked }"
+                      @change="handlePermissionChange(permission, second)"
                     >
-                      {{ sItem.label }}
+                      {{ permission.label }}
                     </el-checkbox>
                   </div>
-                </div>
-              </div>
+                </section>
 
-              <!-- 数据权限 -->
-              <div class="role-permission-col role-permission-col--data">
-                <div class="role-permission-col__title">
-                  {{ t('role_dataPermission') }}
-                </div>
-                <div v-if="!second.filterData" class="role-permission-empty">
-                  <span class="font-color-light fs-7">--</span>
-                </div>
-                <div v-else class="role-checkbox-group">
-                  <div class="role-checkbox-item role-checkbox-item--all">
-                    <el-checkbox
-                      :model-value="isDataAllChecked(second)"
-                      :indeterminate="isDataIndeterminate(second)"
-                      @change="(val: any) => toggleDataAll(val, second)"
+                <section
+                  v-if="second.filterData?.length"
+                  class="role-permission-section"
+                >
+                  <header class="role-permission-section__header">
+                    <div class="role-permission-section__heading">
+                      <span class="role-permission-section__icon is-data">
+                        <el-icon :size="16"><i-lucide-database /></el-icon>
+                      </span>
+                      <div>
+                        <div class="role-permission-section__title-row">
+                          <h4>{{ t('role_dataPermission') }}</h4>
+                          <span class="role-permission-section__count">
+                            {{ getPageStats(second).data.enabled }}/{{
+                              getPageStats(second).data.total
+                            }}
+                          </span>
+                        </div>
+                        <p>{{ t('role_permission_data_description') }}</p>
+                      </div>
+                    </div>
+                    <el-button
+                      text
+                      type="primary"
+                      @click="
+                        togglePermissionAll(
+                          !isPermissionAllChecked(second.filterData),
+                          second,
+                          'filterData',
+                        )
+                      "
                     >
-                      {{ t('public_select_all') }}
-                    </el-checkbox>
-                  </div>
-                  <div
-                    v-for="(sItem, sIndex) in second.filterData"
-                    :key="sIndex"
-                    class="role-checkbox-item"
-                  >
+                      {{
+                        isPermissionAllChecked(second.filterData)
+                          ? t('role_permission_deselect_all')
+                          : t('public_select_all')
+                      }}
+                    </el-button>
+                  </header>
+
+                  <div class="role-permission-options">
                     <el-checkbox
-                      v-model="sItem.checked"
-                      @change="handleCheckChange(sItem, second, 'data')"
+                      v-for="permission in second.filterData"
+                      :key="permission.name"
+                      v-model="permission.checked"
+                      class="role-permission-option"
+                      :class="{ 'is-selected': permission.checked }"
+                      @change="handlePermissionChange(permission, second)"
                     >
-                      {{ sItem.label }}
+                      {{ permission.label }}
                     </el-checkbox>
                   </div>
+                </section>
+
+                <div
+                  v-if="!second.buttons?.length && !second.filterData?.length"
+                  class="role-page-card__empty"
+                >
+                  <el-icon :size="18"><i-lucide-circle-check /></el-icon>
+                  <span>{{ t('role_permission_no_extra_config') }}</span>
                 </div>
               </div>
-            </div>
+            </article>
           </div>
-        </div>
+        </section>
       </div>
 
-      <!-- 空状态 -->
       <div v-else class="role-empty">
         <el-empty
           :description="
@@ -952,223 +1115,694 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .role-permission-wrap {
-  // max-width: 1200px;
+  --role-border: #dfe3eb;
+  --role-border-subtle: #e9ecf2;
+  --role-canvas: #f7f8fb;
+  --role-text: #20222a;
+  --role-text-secondary: #6f7482;
+  --role-text-muted: #9da2ad;
+
   margin: 0 auto;
+  padding-bottom: 32px;
+  color: var(--role-text);
 }
 
-// 提示信息栏
-.role-tip-bar {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 12px 16px;
-  margin-bottom: 16px;
-  background-color: #f0faf0;
-  border: 1px solid #b7e4b7;
+.role-overview {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid var(--role-border);
   border-radius: 8px;
-  color: #2e7d32;
-  font-size: 13px;
-  line-height: 1.6;
+  box-shadow: 0 1px 3px rgba(31, 35, 48, 0.1);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 32px;
+    padding: 24px 28px 26px;
+  }
+
+  &__identity {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 16px;
+  }
 
   &__icon {
+    display: inline-flex;
+    flex: 0 0 52px;
+    align-items: center;
+    justify-content: center;
+    width: 52px;
+    height: 52px;
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    border-radius: 8px;
+  }
+
+  &__copy {
+    min-width: 0;
+  }
+
+  &__title-row {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 10px;
+  }
+
+  &__title {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--role-text);
+    font-size: 20px;
+    font-weight: 650;
+    line-height: 1.35;
+  }
+
+  &__tag {
     flex-shrink: 0;
-    margin-top: 2px;
-    font-size: 16px;
+    padding: 3px 8px;
+    color: var(--role-text-secondary);
+    background: #f1f2f5;
+    border: 1px solid #e1e4ea;
+    border-radius: 999px;
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  &__description {
+    margin: 4px 0 0;
+    overflow-wrap: anywhere;
+    color: var(--role-text-secondary);
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  &__metrics {
+    display: grid;
+    flex: 0 0 auto;
+    grid-template-columns: repeat(3, minmax(112px, auto));
+    margin: 0;
+  }
+
+  &__metric {
+    min-width: 112px;
+    padding: 0 24px;
+    border-left: 1px solid var(--role-border-subtle);
+
+    dt {
+      color: var(--role-text-secondary);
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    dd {
+      margin: 4px 0 0;
+      color: var(--role-text);
+      font-size: 22px;
+      font-variant-numeric: tabular-nums;
+      font-weight: 650;
+      line-height: 28px;
+    }
+  }
+
+  &__progress {
+    height: 4px;
+    background: #eceef3;
+
+    span {
+      display: block;
+      height: 100%;
+      background: var(--el-color-primary);
+      transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
   }
 }
 
-// 工具栏
 .role-toolbar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
+  gap: 12px;
+  margin: 24px 0 28px;
 
   &__search {
-    max-width: 300px;
+    flex: 1;
+    min-width: 0;
+
+    :deep(.el-input__wrapper) {
+      min-height: 42px;
+      border-radius: 8px;
+    }
   }
 
   &__actions {
     display: flex;
-    gap: 4px;
+    flex-shrink: 0;
+    gap: 8px;
+
+    :deep(.el-button) {
+      min-height: 42px;
+      margin: 0;
+      border-radius: 8px;
+    }
   }
 }
 
-// 模块卡片列表
 .role-module-list {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 28px;
 }
 
-// 模块卡片
-.role-module-card {
-  border: 1px solid #e8e8e8;
-  border-radius: 12px;
-  overflow: hidden;
-  background: #fff;
-
+.role-module-group {
   &__header {
     display: flex;
     align-items: center;
+    gap: 10px;
+    min-height: 34px;
+    margin-bottom: 10px;
+  }
+
+  &__icon {
+    display: inline-flex;
+    flex: 0 0 32px;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    border-radius: 8px;
+  }
+
+  &__title {
+    margin: 0;
+    color: var(--role-text-secondary);
+    font-size: 13px;
+    font-weight: 650;
+    line-height: 20px;
+    text-transform: uppercase;
+  }
+
+  &__count {
+    flex-shrink: 0;
+    padding: 2px 8px;
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    border-radius: 999px;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    line-height: 20px;
+  }
+
+  &__line {
+    flex: 1;
+    height: 1px;
+    background: var(--role-border-subtle);
+  }
+
+  &__pages {
+    display: flex;
+    flex-direction: column;
     gap: 12px;
-    padding: 16px 20px;
-    cursor: pointer;
-    transition: background-color 0.2s;
+  }
+}
 
-    &:hover {
-      background-color: #fafafa;
+.role-page-card {
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid var(--role-border);
+  border-radius: 8px;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+
+  &.is-expanded {
+    border-color: var(--el-color-primary-light-5);
+    box-shadow: 0 1px 3px rgba(31, 35, 48, 0.12);
+  }
+
+  &.is-inaccessible {
+    .role-page-card__title,
+    .role-page-card__description {
+      color: var(--role-text-muted);
     }
   }
 
-  &__icon {
-    flex-shrink: 0;
-    width: 36px;
-    height: 36px;
+  &__header {
+    display: flex;
+    align-items: stretch;
+    min-height: 80px;
+  }
+
+  &__access {
     display: flex;
+    flex: 0 0 72px;
     align-items: center;
     justify-content: center;
-    background: #f5f5f5;
-    border-radius: 8px;
-    color: var(--el-color-primary, #4caf50);
+    padding-left: 8px;
   }
 
-  &__info {
+  &__summary {
+    display: grid;
+    flex: 1;
+    grid-template-columns: minmax(220px, 1fr) auto 40px;
+    align-items: center;
+    gap: 20px;
+    min-width: 0;
+    padding: 14px 18px 14px 4px;
+    color: inherit;
+    text-align: left;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px var(--el-color-primary-light-5) inset;
+      outline: 0;
+    }
+  }
+
+  &__identity {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    align-items: flex-start;
+    gap: 3px;
+    min-width: 0;
+  }
+
+  &__title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     min-width: 0;
   }
 
-  &__name {
+  &__title {
+    overflow-wrap: anywhere;
+    color: var(--role-text);
     font-size: 15px;
-    font-weight: 500;
-    color: var(--color-title, #1a1a1a);
+    font-weight: 650;
+    line-height: 22px;
   }
 
-  &__stats {
+  &__status {
+    flex-shrink: 0;
+    padding: 2px 7px;
+    color: var(--role-text-muted);
+    background: #f1f2f5;
+    border-radius: 999px;
+    font-size: 11px;
+    line-height: 18px;
+  }
+
+  &__description {
+    overflow-wrap: anywhere;
+    color: var(--role-text-secondary);
     font-size: 12px;
-    color: var(--text-light, #999);
+    line-height: 18px;
   }
 
-  &__progress {
-    margin-left: auto;
-    width: 100px;
-    flex-shrink: 0;
+  &__summary-stats {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 22px;
+    color: var(--role-text-secondary);
+    font-size: 12px;
+    white-space: nowrap;
   }
 
-  &__arrow {
-    // flex-shrink: 0;
-    // font-size: 16px;
-    // transition: transform 0.25s;
+  &__summary-stat {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+  }
+
+  &__summary-count {
+    padding: 2px 7px;
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    border-radius: 999px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__summary-empty {
+    min-width: 20px;
+    color: #c3c7cf;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  &__chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    color: var(--role-text-secondary);
+    background: var(--role-canvas);
+    border-radius: 8px;
+    transition:
+      color 180ms ease,
+      transform 180ms ease;
 
     &.is-expanded {
+      color: var(--el-color-primary);
       transform: rotate(180deg);
     }
   }
 
   &__body {
-    border-top: 1px solid #f0f0f0;
-    padding: 0 20px;
-  }
-}
+    padding: 22px 24px 24px;
+    background: var(--role-canvas);
+    border-top: 1px solid var(--role-border-subtle);
+
+    &.is-inactive {
+      .role-permission-section__heading,
+      .role-page-card__empty {
+        opacity: 0.55;
+      }
 
-// 进度条
-.role-progress-bar {
-  height: 6px;
-  border-radius: 3px;
-  background: #e8e8e8;
-  overflow: hidden;
+      .role-permission-option {
+        --el-checkbox-checked-bg-color: #aeb3bd;
+        --el-checkbox-checked-input-border-color: #aeb3bd;
+
+        background: #f2f3f5;
+        border-color: #e2e5ea;
+
+        &.is-selected {
+          background: #eceef2;
+          border-color: #d9dce3;
+        }
+
+        :deep(.el-checkbox__label) {
+          color: var(--role-text-muted);
+        }
+      }
+
+      :deep(.el-button:not(.is-disabled)) {
+        color: var(--role-text-muted);
+      }
+    }
+  }
 
-  &__fill {
-    height: 100%;
-    border-radius: 3px;
-    background: var(--el-color-primary, #4caf50);
-    transition: width 0.3s;
+  &__empty {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 44px;
+    color: var(--role-text-secondary);
+    font-size: 13px;
   }
 }
 
-// 权限行
-.role-permission-row {
-  display: flex;
-  padding: 16px 0;
+.role-permission-section {
+  & + & {
+    padding-top: 20px;
+    margin-top: 20px;
+    border-top: 1px solid var(--role-border-subtle);
+  }
 
-  &--bordered {
-    border-top: 1px solid #f0f0f0;
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 20px;
+    margin-bottom: 14px;
   }
-}
 
-// 权限列
-.role-permission-col {
-  &--page {
-    flex: 0 0 calc(2 / 12 * 100%);
+  &__heading {
+    display: flex;
+    align-items: flex-start;
     min-width: 0;
+    gap: 10px;
   }
 
-  &--func {
-    flex: 0 0 calc(5 / 12 * 100%);
-    min-width: 0;
+  &__icon {
+    display: inline-flex;
+    flex: 0 0 32px;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+
+    &.is-function {
+      color: var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
+    }
+
+    &.is-data {
+      color: #18775b;
+      background: #eaf6f1;
+    }
   }
 
-  &--data {
-    flex: 0 0 calc(5 / 12 * 100%);
-    min-width: 0;
+  &__title-row {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+
+    h4 {
+      margin: 0;
+      color: var(--role-text);
+      font-size: 14px;
+      font-weight: 650;
+      line-height: 20px;
+    }
   }
 
-  &__title {
+  &__count {
+    padding: 1px 7px;
+    color: var(--role-text-secondary);
+    background: #eceef3;
+    border-radius: 999px;
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    line-height: 18px;
+  }
+
+  p {
+    margin: 2px 0 0;
+    color: var(--role-text-muted);
     font-size: 12px;
-    font-weight: 600;
-    color: var(--text-light, #999);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 8px;
+    line-height: 18px;
   }
 }
 
-// 复选框
-.role-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 16px;
+.role-permission-options {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
 }
 
-.role-checkbox-item {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 8px;
-  border-radius: 10px;
-  transition: background-color 0.15s;
+.role-permission-option {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 48px;
+  padding: 0 14px;
+  margin: 0;
+  background: #fff;
+  border: 1px solid var(--role-border);
+  border-radius: 6px;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
+
+  &.is-selected {
+    background: var(--el-color-primary-light-9);
+    border-color: var(--el-color-primary-light-5);
+  }
 
-  &:hover {
-    background-color: #f5f5f5;
+  :deep(.el-checkbox__label) {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    color: var(--role-text-secondary);
+    font-size: 13px;
+    line-height: 20px;
+    white-space: normal;
   }
 
-  :deep(.el-checkbox) {
-    --el-checkbox-height: 20px;
+  &.is-selected :deep(.el-checkbox__label) {
+    color: var(--role-text);
   }
+}
+
+.role-empty {
+  padding: 60px 0;
+  text-align: center;
+}
 
-  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
-    border-radius: 4px;
+@media (hover: hover) {
+  .role-page-card__summary:hover {
+    background: #fafbfc;
   }
 
-  :deep(.el-checkbox__inner) {
-    border-radius: 4px;
+  .role-permission-option:not(.is-disabled):hover {
+    border-color: var(--el-color-primary-light-5);
   }
+}
 
-  &--all {
-    font-weight: 500;
-    margin-bottom: 2px;
+@media (max-width: 960px) {
+  .role-overview {
+    &__content {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 22px;
+    }
+
+    &__metrics {
+      width: 100%;
+    }
+
+    &__metric {
+      padding: 0 20px;
+
+      &:first-child {
+        padding-left: 0;
+        border-left: 0;
+      }
+    }
+  }
+
+  .role-page-card__summary {
+    grid-template-columns: minmax(180px, 1fr) 40px;
+    gap: 12px;
+  }
+
+  .role-page-card__summary-stats {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-content: flex-start;
+  }
+
+  .role-page-card__chevron {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .role-permission-options {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-.role-permission-empty {
-  padding: 3px 6px;
-  font-style: italic;
+@media (max-width: 640px) {
+  .role-overview {
+    &__content {
+      padding: 18px;
+    }
+
+    &__identity {
+      align-items: flex-start;
+    }
+
+    &__icon {
+      flex-basis: 44px;
+      width: 44px;
+      height: 44px;
+    }
+
+    &__title-row {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    &__title {
+      font-size: 18px;
+    }
+
+    &__metrics {
+      grid-template-columns: 1fr;
+      gap: 14px;
+    }
+
+    &__metric {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      min-width: 0;
+      padding: 12px 0 0;
+      border-top: 1px solid var(--role-border-subtle);
+      border-left: 0;
+
+      &:first-child {
+        padding-top: 0;
+        border-top: 0;
+      }
+
+      dd {
+        margin: 0;
+        font-size: 19px;
+      }
+    }
+  }
+
+  .role-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+
+    &__actions {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+
+      :deep(.el-button) {
+        width: 100%;
+      }
+    }
+  }
+
+  .role-module-group__title {
+    overflow-wrap: anywhere;
+  }
+
+  .role-page-card {
+    &__header {
+      align-items: flex-start;
+    }
+
+    &__access {
+      flex-basis: 56px;
+      min-height: 68px;
+      padding-left: 6px;
+    }
+
+    &__summary {
+      grid-template-columns: minmax(0, 1fr) 40px;
+      padding: 14px 12px 14px 0;
+    }
+
+    &__summary-stats {
+      flex-wrap: wrap;
+      gap: 8px 16px;
+    }
+
+    &__body {
+      padding: 18px 16px 20px;
+    }
+  }
+
+  .role-permission-section__header {
+    gap: 8px;
+  }
+
+  .role-permission-options {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
-// 空状态
-.role-empty {
-  padding: 60px 0;
-  text-align: center;
+@media (prefers-reduced-motion: reduce) {
+  .role-overview__progress span,
+  .role-page-card,
+  .role-page-card__chevron,
+  .role-permission-option {
+    transition: none;
+  }
 }
 </style>

From b6593d28fdbcd1b53b5ddc60c55da4de4e76f411 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 23 Jul 2026 11:19:30 +0800
Subject: [PATCH 5/7] fix(TAP-12273): align role permission styling

---
 apps/daas/src/views/role/Role.vue | 123 +++++++++++++++++++-----------
 1 file changed, 77 insertions(+), 46 deletions(-)

diff --git a/apps/daas/src/views/role/Role.vue b/apps/daas/src/views/role/Role.vue
index f1ee0036f..6757f31c0 100644
--- a/apps/daas/src/views/role/Role.vue
+++ b/apps/daas/src/views/role/Role.vue
@@ -1026,6 +1026,7 @@ onMounted(() => {
                       v-model="permission.checked"
                       class="role-permission-option"
                       :class="{ 'is-selected': permission.checked }"
+                      size="small"
                       @change="handlePermissionChange(permission, second)"
                     >
                       {{ permission.label }}
@@ -1080,6 +1081,7 @@ onMounted(() => {
                       v-model="permission.checked"
                       class="role-permission-option"
                       :class="{ 'is-selected': permission.checked }"
+                      size="small"
                       @change="handlePermissionChange(permission, second)"
                     >
                       {{ permission.label }}
@@ -1117,10 +1119,15 @@ onMounted(() => {
 .role-permission-wrap {
   --role-border: #dfe3eb;
   --role-border-subtle: #e9ecf2;
-  --role-canvas: #f7f8fb;
+  --role-canvas: #f7f7fb;
+  --role-muted-panel: lab(96.2466% 0.28044 -2.2576);
   --role-text: #20222a;
   --role-text-secondary: #6f7482;
   --role-text-muted: #9da2ad;
+  --role-primary: #5b50e6;
+  --role-primary-soft: #eeedff;
+  --role-primary-border: #c7c3ff;
+  --role-chevron-bg: #eef1fb;
 
   margin: 0 auto;
   padding-bottom: 32px;
@@ -1132,7 +1139,7 @@ onMounted(() => {
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--role-border);
-  border-radius: 8px;
+  border-radius: 14px;
   box-shadow: 0 1px 3px rgba(31, 35, 48, 0.1);
 
   &__content {
@@ -1157,9 +1164,9 @@ onMounted(() => {
     justify-content: center;
     width: 52px;
     height: 52px;
-    color: var(--el-color-primary);
-    background: var(--el-color-primary-light-9);
-    border-radius: 8px;
+    color: var(--role-primary);
+    background: var(--role-primary-soft);
+    border-radius: 14px;
   }
 
   &__copy {
@@ -1237,7 +1244,7 @@ onMounted(() => {
     span {
       display: block;
       height: 100%;
-      background: var(--el-color-primary);
+      background: var(--role-primary);
       transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
     }
   }
@@ -1255,7 +1262,7 @@ onMounted(() => {
 
     :deep(.el-input__wrapper) {
       min-height: 42px;
-      border-radius: 8px;
+      border-radius: 12px;
     }
   }
 
@@ -1267,7 +1274,7 @@ onMounted(() => {
     :deep(.el-button) {
       min-height: 42px;
       margin: 0;
-      border-radius: 8px;
+      border-radius: 10px;
     }
   }
 }
@@ -1294,9 +1301,9 @@ onMounted(() => {
     justify-content: center;
     width: 32px;
     height: 32px;
-    color: var(--el-color-primary);
-    background: var(--el-color-primary-light-9);
-    border-radius: 8px;
+    color: var(--role-primary);
+    background: var(--role-primary-soft);
+    border-radius: 10px;
   }
 
   &__title {
@@ -1311,8 +1318,8 @@ onMounted(() => {
   &__count {
     flex-shrink: 0;
     padding: 2px 8px;
-    color: var(--el-color-primary);
-    background: var(--el-color-primary-light-9);
+    color: var(--role-primary);
+    background: var(--role-primary-soft);
     border-radius: 999px;
     font-size: 12px;
     font-variant-numeric: tabular-nums;
@@ -1336,14 +1343,14 @@ onMounted(() => {
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--role-border);
-  border-radius: 8px;
+  border-radius: 14px;
   transition:
     border-color 180ms ease,
     box-shadow 180ms ease;
 
   &.is-expanded {
-    border-color: var(--el-color-primary-light-5);
-    box-shadow: 0 1px 3px rgba(31, 35, 48, 0.12);
+    border-color: var(--role-primary-border);
+    box-shadow: 0 2px 8px rgba(91, 80, 230, 0.12);
   }
 
   &.is-inaccessible {
@@ -1356,7 +1363,7 @@ onMounted(() => {
   &__header {
     display: flex;
     align-items: stretch;
-    min-height: 80px;
+    min-height: 76px;
   }
 
   &__access {
@@ -1374,7 +1381,7 @@ onMounted(() => {
     align-items: center;
     gap: 20px;
     min-width: 0;
-    padding: 14px 18px 14px 4px;
+    padding: 12px 18px 12px 4px;
     color: inherit;
     text-align: left;
     background: transparent;
@@ -1382,7 +1389,7 @@ onMounted(() => {
     cursor: pointer;
 
     &:focus-visible {
-      box-shadow: 0 0 0 2px var(--el-color-primary-light-5) inset;
+      box-shadow: 0 0 0 2px var(--role-primary-border) inset;
       outline: 0;
     }
   }
@@ -1445,8 +1452,8 @@ onMounted(() => {
 
   &__summary-count {
     padding: 2px 7px;
-    color: var(--el-color-primary);
-    background: var(--el-color-primary-light-9);
+    color: var(--role-primary);
+    background: var(--role-primary-soft);
     border-radius: 999px;
     font-variant-numeric: tabular-nums;
   }
@@ -1465,21 +1472,24 @@ onMounted(() => {
     width: 40px;
     height: 40px;
     color: var(--role-text-secondary);
-    background: var(--role-canvas);
-    border-radius: 8px;
+    background: var(--role-chevron-bg);
+    border-radius: 12px;
     transition:
       color 180ms ease,
       transform 180ms ease;
 
     &.is-expanded {
-      color: var(--el-color-primary);
+      color: var(--role-primary);
       transform: rotate(180deg);
     }
   }
 
   &__body {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 24px;
     padding: 22px 24px 24px;
-    background: var(--role-canvas);
+    background: var(--role-muted-panel);
     border-top: 1px solid var(--role-border-subtle);
 
     &.is-inactive {
@@ -1492,7 +1502,7 @@ onMounted(() => {
         --el-checkbox-checked-bg-color: #aeb3bd;
         --el-checkbox-checked-input-border-color: #aeb3bd;
 
-        background: #f2f3f5;
+        background: var(--role-muted-panel);
         border-color: #e2e5ea;
 
         &.is-selected {
@@ -1513,6 +1523,7 @@ onMounted(() => {
 
   &__empty {
     display: flex;
+    grid-column: 1 / -1;
     align-items: center;
     gap: 8px;
     min-height: 44px;
@@ -1522,10 +1533,10 @@ onMounted(() => {
 }
 
 .role-permission-section {
-  & + & {
-    padding-top: 20px;
-    margin-top: 20px;
-    border-top: 1px solid var(--role-border-subtle);
+  min-width: 0;
+
+  &:only-child {
+    grid-column: 1 / -1;
   }
 
   &__header {
@@ -1550,16 +1561,16 @@ onMounted(() => {
     justify-content: center;
     width: 32px;
     height: 32px;
-    border-radius: 8px;
+    border-radius: 10px;
 
     &.is-function {
-      color: var(--el-color-primary);
-      background: var(--el-color-primary-light-9);
+      color: var(--role-primary);
+      background: var(--role-primary-soft);
     }
 
     &.is-data {
-      color: #18775b;
-      background: #eaf6f1;
+      color: var(--role-text-secondary);
+      background: #eef0f5;
     }
   }
 
@@ -1597,35 +1608,51 @@ onMounted(() => {
 
 .role-permission-options {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 }
 
 .role-permission-option {
+  --el-checkbox-checked-bg-color: var(--role-primary);
+  --el-checkbox-checked-input-border-color: var(--role-primary);
+
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
   width: 100%;
   min-width: 0;
-  min-height: 48px;
-  padding: 0 14px;
+  min-height: 38px;
+  padding: 0 10px;
   margin: 0;
   background: #fff;
   border: 1px solid var(--role-border);
-  border-radius: 6px;
+  border-radius: 10px;
   transition:
     background-color 160ms ease,
     border-color 160ms ease;
 
   &.is-selected {
-    background: var(--el-color-primary-light-9);
-    border-color: var(--el-color-primary-light-5);
+    background: var(--role-primary-soft);
+    border-color: var(--role-primary-border);
+  }
+
+  :deep(.el-checkbox__input) {
+    flex-shrink: 0;
+  }
+
+  :deep(.el-checkbox__inner) {
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
   }
 
   :deep(.el-checkbox__label) {
     min-width: 0;
+    padding-left: 8px;
     overflow-wrap: anywhere;
     color: var(--role-text-secondary);
-    font-size: 13px;
-    line-height: 20px;
+    font-size: 12px;
+    line-height: 18px;
     white-space: normal;
   }
 
@@ -1645,7 +1672,7 @@ onMounted(() => {
   }
 
   .role-permission-option:not(.is-disabled):hover {
-    border-color: var(--el-color-primary-light-5);
+    border-color: var(--role-primary-border);
   }
 }
 
@@ -1688,7 +1715,11 @@ onMounted(() => {
   }
 
   .role-permission-options {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .role-page-card__body {
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 

From a6c1d428aad3223c62f1f127debfbe3c1824e75d Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 23 Jul 2026 16:02:32 +0800
Subject: [PATCH 6/7] refactor: improve role permission handling and UI
 consistency

---
 apps/daas/src/i18n/langs/en.js    |  26 ++-
 apps/daas/src/views/role/Role.vue | 356 +++++++++++++++++-------------
 2 files changed, 221 insertions(+), 161 deletions(-)

diff --git a/apps/daas/src/i18n/langs/en.js b/apps/daas/src/i18n/langs/en.js
index 8332d840d..308aa204a 100644
--- a/apps/daas/src/i18n/langs/en.js
+++ b/apps/daas/src/i18n/langs/en.js
@@ -791,7 +791,8 @@ export default {
     'Switch to batch insert mode interval in cdc. ',
   setting_share_cdc: 'Share cdc',
   setting_global_share_cdc_enable: 'Default global enable share cdc',
-  setting_global_share_cdc_enable_doc: 'When enabled by default, use the default external storage specified in the external storage list and apply it as the default setting to subsequent newly created connections and tasks. (Only after enabling can change logs be queried in Data trace)',
+  setting_global_share_cdc_enable_doc:
+    'When enabled by default, use the default external storage specified in the external storage list and apply it as the default setting to subsequent newly created connections and tasks. (Only after enabling can change logs be queried in Data trace)',
   setting_share_cdc_persistence_mode: 'Share cdc persistence mode',
   setting_share_cdc_persistence_memory_size:
     'Shared incremental memory cache line count',
@@ -811,8 +812,10 @@ export default {
     'The local path to the RocksDB store',
   setting_share_cdc_persistence_rocksdb_path_doc:
     'This configuration takes effect only when RocksDB is selected as the mode, and the local path stored by RocksDB',
-  setting_task_start_transform_wait_seconds: 'Task start transform wait time (seconds)',
-  setting_task_start_transform_wait_seconds_doc: 'After clicking to start the task, it will proceed with simulation or trial operation. If the set waiting duration is exceeded, the start will fail, requiring another click to initiate or increasing the simulation waiting duration. The default waiting duration is 60 seconds',
+  setting_task_start_transform_wait_seconds:
+    'Task start transform wait time (seconds)',
+  setting_task_start_transform_wait_seconds_doc:
+    'After clicking to start the task, it will proceed with simulation or trial operation. If the set waiting duration is exceeded, the start will fail, requiring another click to initiate or increasing the simulation waiting duration. The default waiting duration is 60 seconds',
   setting_task_log_file_save_time: 'Task log retention time (days)',
   setting_task_log_file_save_size: 'Task log retention size (MB)',
   setting_task_log_file_save_count: 'Task log retention total count',
@@ -828,8 +831,10 @@ export default {
   setting_Login_Brief_Tips: 'Login brief tips',
   setting_Login_Brief_Tips_doc:
     'Once enabled, the login prompt will be simplified',
-  setting_Access_Token_Idle_Timeout_Minutes: 'Session idle timeout (in minutes)',
-  setting_Access_Token_Idle_Timeout_Minutes_doc: 'When the session is inactive for more than the set value, the session becomes invalid and needs to be logged in again',
+  setting_Access_Token_Idle_Timeout_Minutes:
+    'Session idle timeout (in minutes)',
+  setting_Access_Token_Idle_Timeout_Minutes_doc:
+    'When the session is inactive for more than the set value, the session becomes invalid and needs to be logged in again',
   setting_LDAP: 'LDAP Authentication',
   setting_Ldap_Login_Enable: 'Use LDAP Login',
   setting_Ldap_Server_Host: 'LDAP Server Address',
@@ -1031,12 +1036,12 @@ export default {
   notify_noticeInterval: 'Send interval',
   notify_operator: 'Operator',
   role_list_select_role_name: 'Please enter the role name',
-  role_list_role_name: 'role name',
-  role_list_description: 'role description',
+  role_list_role_name: 'Role Name',
+  role_list_description: 'Role Description',
   role_list_associat_users: 'Associate User',
-  role_list_create: 'Create roles',
+  role_list_create: 'Create Roles',
   role_list_edit: 'Edit roles',
-  role_list_default_role: 'Default role',
+  role_list_default_role: 'Default Role',
   role_list_setting_permissions: 'Set Permissions',
   role_list_setting_api: 'Set API access',
   role_list_delete_remind: 'Confirm to delete role {0}',
@@ -2316,7 +2321,8 @@ export default {
   daas_task_rebalance_confirm: 'Confirm Rebalance',
   daas_task_rebalance_create: 'Create Rebalance',
   daas_task_rebalance_empty: 'No tasks available for rebalancing',
-  daas_task_rebalance_create_success: 'Rebalance plan created, migration started',
+  daas_task_rebalance_create_success:
+    'Rebalance plan created, migration started',
   daas_task_rebalance_type_initial_sync: 'Full',
   daas_task_rebalance_type_cdc: 'Incremental',
   daas_task_rebalance_type_full_cdc: 'Full + Incremental',
diff --git a/apps/daas/src/views/role/Role.vue b/apps/daas/src/views/role/Role.vue
index 6757f31c0..adb9862e1 100644
--- a/apps/daas/src/views/role/Role.vue
+++ b/apps/daas/src/views/role/Role.vue
@@ -18,14 +18,13 @@ const emit = defineEmits<{
   saveBack: []
 }>()
 
-// ---- 模块图标映射 ----
-const MODULE_ICONS: Record<string, any> = {
-  'v2_data-console': IconLucideLayoutDashboard,
-  v2_datasource_menu: IconLucideDatabase,
-  v2_data_pipeline: IconLucideGitBranch,
-  v2_advanced_features: IconLucideBoxes,
-  'v2_data-server': IconLucideServerCog,
-  'v2_system-management': IconLucideSettings,
+const MODULE_ICONS: Record<string, string> = {
+  'v2_data-console': 'process-platform',
+  v2_datasource_menu: 'agent',
+  v2_data_pipeline: 'migrate',
+  v2_advanced_features: 'vip-one',
+  'v2_data-server': 'apiServer_navbar',
+  'v2_system-management': 'setting',
 }
 
 // ---- pageSort 配置 ----
@@ -497,7 +496,7 @@ function getCheckedStats(items: any[] = []) {
 }
 
 function getModuleIcon(name: string) {
-  return MODULE_ICONS[name] || IconLucidePanelTop
+  return MODULE_ICONS[name] || 'page'
 }
 
 function getPageAccessLabel(page: any) {
@@ -511,6 +510,10 @@ function getPageStats(page: any) {
   }
 }
 
+function hasPageExtraPermissions(page: any) {
+  return Boolean(page.buttons?.length || page.filterData?.length)
+}
+
 function getModuleStats(item: any) {
   return getCheckedStats(item.children)
 }
@@ -579,7 +582,9 @@ function toggleExpand(name: string) {
 function expandAll() {
   filteredDataList.value.forEach((item: any) => {
     item.children?.forEach((page: any) => {
-      expandedPages[page.name] = true
+      if (hasPageExtraPermissions(page)) {
+        expandedPages[page.name] = true
+      }
     })
   })
 }
@@ -628,6 +633,8 @@ function getMappingData(pageData: any[]) {
             permission.checked = selectRole.value.includes(permission.name)
             permission.checkOrigin = permission.checked
           })
+          expandedPages[childItem.name] =
+            childItem.checked && hasPageExtraPermissions(childItem)
         })
       })
     })
@@ -659,11 +666,6 @@ function getPermission() {
           })
         }
         dataList.value = pageMenu(pageSort)
-        dataList.value.forEach((item: any) => {
-          item.children?.forEach((page: any) => {
-            expandedPages[page.name] = true
-          })
-        })
         getMappingData(dataList.value)
       }
     })
@@ -686,8 +688,17 @@ function getRoleDetail() {
 function handlePageAccessChange(page: any, module: any) {
   updateData(page.checked, page)
 
+  if (page.checked) {
+    if (hasPageExtraPermissions(page)) {
+      expandedPages[page.name] = true
+    }
+    return
+  }
+
+  setPagePermissionsChecked(page, false)
+  expandedPages[page.name] = false
+
   if (
-    !page.checked &&
     module.children?.every((item: any) => !item.checked) &&
     !checkPrincipalId(deletes.value, module.name)?.length
   ) {
@@ -701,6 +712,9 @@ function ensurePageAccess(page: any) {
     page.checked = true
     updateData(true, page)
   }
+  if (hasPageExtraPermissions(page)) {
+    expandedPages[page.name] = true
+  }
 }
 
 function handlePermissionChange(permission: any, page: any) {
@@ -720,6 +734,17 @@ function togglePermissionAll(checked: any, page: any, key: string) {
   if (checked) ensurePageAccess(page)
 }
 
+function setPagePermissionsChecked(page: any, checked: boolean) {
+  ;['buttons', 'filterData'].forEach((key) => {
+    page[key]?.forEach((permission: any) => {
+      if (permission.checked === checked) return
+
+      permission.checked = checked
+      updateData(checked, permission)
+    })
+  })
+}
+
 function updateData(checked: boolean, data: any) {
   const roleId = route.query.id as string
   if (checked) {
@@ -740,7 +765,7 @@ function updateData(checked: boolean, data: any) {
   } else {
     if (
       checked !== data.checkOrigin &&
-      checkPrincipalId(deletes.value, data.name)
+      checkPrincipalId(deletes.value, data.name)?.length === 0
     ) {
       deletes.value.push({
         principalType: 'PERMISSION',
@@ -859,7 +884,7 @@ onMounted(() => {
             <el-icon><i-lucide-search /></el-icon>
           </template>
         </el-input>
-        <div class="role-toolbar__actions">
+        <div class="role-toolbar__actions gap-3" style="--btn-space: 0">
           <el-button @click="expandAll">
             <template #icon><i-lucide-unfold-vertical /></template>
             {{ t('public_button_expand_all') }}
@@ -879,9 +904,7 @@ onMounted(() => {
         >
           <header class="role-module-group__header">
             <span class="role-module-group__icon">
-              <el-icon :size="16">
-                <component :is="getModuleIcon(item.name)" />
-              </el-icon>
+              <VIcon size="16">{{ getModuleIcon(item.name) }}</VIcon>
             </span>
             <h3 class="role-module-group__title">{{ item.description }}</h3>
             <span class="role-module-group__count">
@@ -911,11 +934,19 @@ onMounted(() => {
                   />
                 </div>
 
-                <button
-                  type="button"
+                <component
+                  :is="hasPageExtraPermissions(second) ? 'button' : 'div'"
+                  :type="hasPageExtraPermissions(second) ? 'button' : null"
                   class="role-page-card__summary"
-                  :aria-expanded="isExpanded(second.name)"
-                  @click="toggleExpand(second.name)"
+                  :class="{ 'is-static': !hasPageExtraPermissions(second) }"
+                  :aria-expanded="
+                    hasPageExtraPermissions(second)
+                      ? isExpanded(second.name)
+                      : null
+                  "
+                  @click="
+                    hasPageExtraPermissions(second) && toggleExpand(second.name)
+                  "
                 >
                   <span class="role-page-card__identity">
                     <span class="role-page-card__title-row">
@@ -924,57 +955,50 @@ onMounted(() => {
                       </span>
                       <span
                         v-if="!second.checked"
-                        class="role-page-card__status"
+                        class="role-page-card__status rounded-lg"
                       >
                         {{ t('role_permission_inaccessible') }}
                       </span>
                     </span>
-                    <span class="role-page-card__description">
-                      {{ t('role_permission_page_subtitle') }}
-                    </span>
                   </span>
 
                   <span class="role-page-card__summary-stats">
-                    <span class="role-page-card__summary-stat">
+                    <span
+                      v-if="getPageStats(second).functions.total"
+                      class="role-page-card__summary-stat"
+                    >
                       {{ t('daas_role_role_gongnengquanxian') }}
-                      <span
-                        v-if="getPageStats(second).functions.total"
-                        class="role-page-card__summary-count"
-                      >
+                      <span class="role-page-card__summary-count rounded-lg">
                         {{ getPageStats(second).functions.enabled }}/{{
                           getPageStats(second).functions.total
                         }}
                       </span>
-                      <span v-else class="role-page-card__summary-empty"
-                        >&mdash;</span
-                      >
                     </span>
-                    <span class="role-page-card__summary-stat">
+                    <span
+                      v-if="getPageStats(second).data.total"
+                      class="role-page-card__summary-stat"
+                    >
                       {{ t('role_dataPermission') }}
-                      <span
-                        v-if="getPageStats(second).data.total"
-                        class="role-page-card__summary-count"
-                      >
+                      <span class="role-page-card__summary-count rounded-lg">
                         {{ getPageStats(second).data.enabled }}/{{
                           getPageStats(second).data.total
                         }}
                       </span>
-                      <span v-else class="role-page-card__summary-empty"
-                        >&mdash;</span
-                      >
                     </span>
                   </span>
 
                   <span
+                    v-if="hasPageExtraPermissions(second)"
                     class="role-page-card__chevron"
                     :class="{ 'is-expanded': isExpanded(second.name) }"
                   >
                     <el-icon :size="18"><i-lucide-chevron-down /></el-icon>
                   </span>
-                </button>
+                </component>
               </header>
 
               <div
+                v-if="hasPageExtraPermissions(second)"
                 v-show="isExpanded(second.name)"
                 class="role-page-card__body"
                 :class="{ 'is-inactive': !second.checked }"
@@ -997,7 +1021,6 @@ onMounted(() => {
                             }}
                           </span>
                         </div>
-                        <p>{{ t('role_permission_function_description') }}</p>
                       </div>
                     </div>
                     <el-button
@@ -1052,7 +1075,6 @@ onMounted(() => {
                             }}
                           </span>
                         </div>
-                        <p>{{ t('role_permission_data_description') }}</p>
                       </div>
                     </div>
                     <el-button
@@ -1088,14 +1110,6 @@ onMounted(() => {
                     </el-checkbox>
                   </div>
                 </section>
-
-                <div
-                  v-if="!second.buttons?.length && !second.filterData?.length"
-                  class="role-page-card__empty"
-                >
-                  <el-icon :size="18"><i-lucide-circle-check /></el-icon>
-                  <span>{{ t('role_permission_no_extra_config') }}</span>
-                </div>
               </div>
             </article>
           </div>
@@ -1117,37 +1131,75 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .role-permission-wrap {
-  --role-border: #dfe3eb;
-  --role-border-subtle: #e9ecf2;
+  --role-border: var(--el-border-color-light);
+  --role-border-subtle: var(--el-border-color-lighter);
   --role-canvas: #f7f7fb;
-  --role-muted-panel: lab(96.2466% 0.28044 -2.2576);
-  --role-text: #20222a;
-  --role-text-secondary: #6f7482;
-  --role-text-muted: #9da2ad;
-  --role-primary: #5b50e6;
-  --role-primary-soft: #eeedff;
-  --role-primary-border: #c7c3ff;
-  --role-chevron-bg: #eef1fb;
+  --role-surface: var(--el-bg-color);
+  --role-hover: #fafbfc;
+  --role-divider: #f1f2f5;
+  --role-badge-bg: #f1f2f5;
+  --role-progress-bg: #eceef3;
+  --role-option-bg: var(--el-bg-color);
+  --role-option-inactive-selected-bg: #eceef2;
+  --role-option-inactive-border: #d9dce3;
+  --role-summary-empty: #c3c7cf;
+  --role-disabled-check: #aeb3bd;
+  --role-muted-panel: #f3f4f966;
+  --role-muted-control: #f1f2f5;
+  --role-text: var(--el-text-color-primary);
+  --role-text-secondary: var(--el-text-color-secondary);
+  --role-text-muted: var(--el-text-color-placeholder);
+  --role-primary: var(--el-color-primary);
+  --role-primary-soft: color-mix(
+    in srgb,
+    var(--role-primary) 10%,
+    var(--role-surface)
+  );
+  --role-primary-border: color-mix(
+    in srgb,
+    var(--role-primary) 34%,
+    var(--role-surface)
+  );
+  --role-chevron-bg: var(--role-primary-soft);
+  --role-toolbar-bg: rgba(255, 255, 255, 0.86);
+  --role-shadow: 0 1px 3px rgba(31, 35, 48, 0.1);
 
   margin: 0 auto;
   padding-bottom: 32px;
   color: var(--role-text);
+
+  &:where(html.dark *) {
+    --role-canvas: var(--el-bg-color);
+    --role-hover: rgba(255, 255, 255, 0.05);
+    --role-divider: var(--el-border-color-lighter);
+    --role-badge-bg: rgba(255, 255, 255, 0.08);
+    --role-progress-bg: rgba(255, 255, 255, 0.08);
+    --role-option-inactive-selected-bg: rgba(255, 255, 255, 0.07);
+    --role-option-inactive-border: rgba(255, 255, 255, 0.12);
+    --role-summary-empty: rgba(255, 255, 255, 0.32);
+    --role-disabled-check: rgba(255, 255, 255, 0.36);
+    --role-muted-panel: rgba(255, 255, 255, 0.04);
+    --role-muted-control: rgba(255, 255, 255, 0.08);
+    --role-toolbar-bg: rgba(20, 20, 24, 0.78);
+    --role-shadow: none;
+    color-scheme: dark;
+  }
 }
 
 .role-overview {
   position: relative;
   overflow: hidden;
-  background: #fff;
+  background: var(--role-surface);
   border: 1px solid var(--role-border);
   border-radius: 14px;
-  box-shadow: 0 1px 3px rgba(31, 35, 48, 0.1);
+  box-shadow: var(--role-shadow);
 
   &__content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 32px;
-    padding: 24px 28px 26px;
+    padding: 20px;
   }
 
   &__identity {
@@ -1159,11 +1211,11 @@ onMounted(() => {
 
   &__icon {
     display: inline-flex;
-    flex: 0 0 52px;
+    flex: 0 0 44px;
     align-items: center;
     justify-content: center;
-    width: 52px;
-    height: 52px;
+    width: 44px;
+    height: 44px;
     color: var(--role-primary);
     background: var(--role-primary-soft);
     border-radius: 14px;
@@ -1185,8 +1237,8 @@ onMounted(() => {
     margin: 0;
     overflow-wrap: anywhere;
     color: var(--role-text);
-    font-size: 20px;
-    font-weight: 650;
+    font-size: 16px;
+    font-weight: 500;
     line-height: 1.35;
   }
 
@@ -1194,8 +1246,8 @@ onMounted(() => {
     flex-shrink: 0;
     padding: 3px 8px;
     color: var(--role-text-secondary);
-    background: #f1f2f5;
-    border: 1px solid #e1e4ea;
+    background: var(--role-badge-bg);
+    border: 1px solid var(--role-border);
     border-radius: 999px;
     font-size: 12px;
     line-height: 18px;
@@ -1239,7 +1291,7 @@ onMounted(() => {
 
   &__progress {
     height: 4px;
-    background: #eceef3;
+    background: var(--role-progress-bg);
 
     span {
       display: block;
@@ -1252,16 +1304,23 @@ onMounted(() => {
 
 .role-toolbar {
   display: flex;
+  position: sticky;
+  top: 0;
+  z-index: 20;
   align-items: center;
   gap: 12px;
-  margin: 24px 0 28px;
+  padding: 12px 0;
+  margin: 12px 0 20px;
+  background: var(--role-toolbar-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 
   &__search {
     flex: 1;
     min-width: 0;
 
     :deep(.el-input__wrapper) {
-      min-height: 42px;
+      min-height: 36px;
       border-radius: 12px;
     }
   }
@@ -1272,7 +1331,7 @@ onMounted(() => {
     gap: 8px;
 
     :deep(.el-button) {
-      min-height: 42px;
+      min-height: 36px;
       margin: 0;
       border-radius: 10px;
     }
@@ -1290,7 +1349,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     gap: 10px;
-    min-height: 34px;
+    min-height: 32px;
     margin-bottom: 10px;
   }
 
@@ -1333,24 +1392,18 @@ onMounted(() => {
   }
 
   &__pages {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+    overflow: hidden;
+    background: var(--role-surface);
+    border: 1px solid var(--role-border);
+    border-radius: 14px;
   }
 }
 
 .role-page-card {
-  overflow: hidden;
-  background: #fff;
-  border: 1px solid var(--role-border);
-  border-radius: 14px;
-  transition:
-    border-color 180ms ease,
-    box-shadow 180ms ease;
+  background: var(--role-surface);
 
-  &.is-expanded {
-    border-color: var(--role-primary-border);
-    box-shadow: 0 2px 8px rgba(91, 80, 230, 0.12);
+  & + & {
+    border-top: 1px solid var(--role-divider);
   }
 
   &.is-inaccessible {
@@ -1363,12 +1416,12 @@ onMounted(() => {
   &__header {
     display: flex;
     align-items: stretch;
-    min-height: 76px;
+    min-height: 56px;
   }
 
   &__access {
     display: flex;
-    flex: 0 0 72px;
+    flex: 0 0 64px;
     align-items: center;
     justify-content: center;
     padding-left: 8px;
@@ -1381,7 +1434,7 @@ onMounted(() => {
     align-items: center;
     gap: 20px;
     min-width: 0;
-    padding: 12px 18px 12px 4px;
+    padding: 10px 16px 10px 2px;
     color: inherit;
     text-align: left;
     background: transparent;
@@ -1392,6 +1445,12 @@ onMounted(() => {
       box-shadow: 0 0 0 2px var(--role-primary-border) inset;
       outline: 0;
     }
+
+    &.is-static {
+      grid-template-columns: minmax(220px, 1fr) auto;
+      padding-right: 24px;
+      cursor: default;
+    }
   }
 
   &__identity {
@@ -1412,7 +1471,7 @@ onMounted(() => {
   &__title {
     overflow-wrap: anywhere;
     color: var(--role-text);
-    font-size: 15px;
+    font-size: 14px;
     font-weight: 650;
     line-height: 22px;
   }
@@ -1421,8 +1480,7 @@ onMounted(() => {
     flex-shrink: 0;
     padding: 2px 7px;
     color: var(--role-text-muted);
-    background: #f1f2f5;
-    border-radius: 999px;
+    background: var(--role-badge-bg);
     font-size: 11px;
     line-height: 18px;
   }
@@ -1454,13 +1512,12 @@ onMounted(() => {
     padding: 2px 7px;
     color: var(--role-primary);
     background: var(--role-primary-soft);
-    border-radius: 999px;
     font-variant-numeric: tabular-nums;
   }
 
   &__summary-empty {
     min-width: 20px;
-    color: #c3c7cf;
+    color: var(--role-summary-empty);
     font-size: 14px;
     text-align: center;
   }
@@ -1469,18 +1526,20 @@ onMounted(() => {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 28px;
+    height: 28px;
     color: var(--role-text-secondary);
-    background: var(--role-chevron-bg);
-    border-radius: 12px;
-    transition:
-      color 180ms ease,
-      transform 180ms ease;
-
+    border-radius: 10px;
+    transition: all 180ms ease;
+    .el-icon {
+      transition: all 180ms ease;
+    }
     &.is-expanded {
       color: var(--role-primary);
-      transform: rotate(180deg);
+      background: var(--role-chevron-bg);
+      .el-icon {
+        transform: rotate(180deg);
+      }
     }
   }
 
@@ -1488,9 +1547,9 @@ onMounted(() => {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 24px;
-    padding: 22px 24px 24px;
+    padding: 1rem 20px 20px;
     background: var(--role-muted-panel);
-    border-top: 1px solid var(--role-border-subtle);
+    border-top: 1px solid var(--role-divider);
 
     &.is-inactive {
       .role-permission-section__heading,
@@ -1499,15 +1558,15 @@ onMounted(() => {
       }
 
       .role-permission-option {
-        --el-checkbox-checked-bg-color: #aeb3bd;
-        --el-checkbox-checked-input-border-color: #aeb3bd;
+        --el-checkbox-checked-bg-color: var(--role-disabled-check);
+        --el-checkbox-checked-input-border-color: var(--role-disabled-check);
 
         background: var(--role-muted-panel);
-        border-color: #e2e5ea;
+        border-color: var(--role-border);
 
         &.is-selected {
-          background: #eceef2;
-          border-color: #d9dce3;
+          background: var(--role-option-inactive-selected-bg);
+          border-color: var(--role-option-inactive-border);
         }
 
         :deep(.el-checkbox__label) {
@@ -1541,36 +1600,30 @@ onMounted(() => {
 
   &__header {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-between;
     gap: 20px;
-    margin-bottom: 14px;
+    margin-bottom: 12px;
   }
 
   &__heading {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     min-width: 0;
-    gap: 10px;
+    gap: 8px;
   }
 
   &__icon {
     display: inline-flex;
-    flex: 0 0 32px;
+    flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-
-    &.is-function {
-      color: var(--role-primary);
-      background: var(--role-primary-soft);
-    }
+    width: 16px;
+    height: 20px;
+    color: var(--role-text-secondary);
 
     &.is-data {
       color: var(--role-text-secondary);
-      background: #eef0f5;
     }
   }
 
@@ -1582,8 +1635,7 @@ onMounted(() => {
     h4 {
       margin: 0;
       color: var(--role-text);
-      font-size: 14px;
-      font-weight: 650;
+      font-size: 13px;
       line-height: 20px;
     }
   }
@@ -1591,7 +1643,7 @@ onMounted(() => {
   &__count {
     padding: 1px 7px;
     color: var(--role-text-secondary);
-    background: #eceef3;
+    background: var(--role-badge-bg);
     border-radius: 999px;
     font-size: 11px;
     font-variant-numeric: tabular-nums;
@@ -1607,8 +1659,8 @@ onMounted(() => {
 }
 
 .role-permission-options {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
@@ -1619,12 +1671,13 @@ onMounted(() => {
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  width: 100%;
+  width: auto;
+  max-width: 100%;
   min-width: 0;
-  min-height: 38px;
+  min-height: 32px;
   padding: 0 10px;
   margin: 0;
-  background: #fff;
+  background: var(--role-option-bg);
   border: 1px solid var(--role-border);
   border-radius: 10px;
   transition:
@@ -1651,7 +1704,7 @@ onMounted(() => {
     padding-left: 8px;
     overflow-wrap: anywhere;
     color: var(--role-text-secondary);
-    font-size: 12px;
+    font-size: 13px;
     line-height: 18px;
     white-space: normal;
   }
@@ -1667,8 +1720,8 @@ onMounted(() => {
 }
 
 @media (hover: hover) {
-  .role-page-card__summary:hover {
-    background: #fafbfc;
+  .role-page-card__header:has(.role-page-card__summary:not(.is-static)):hover {
+    background: var(--role-hover);
   }
 
   .role-permission-option:not(.is-disabled):hover {
@@ -1701,6 +1754,10 @@ onMounted(() => {
   .role-page-card__summary {
     grid-template-columns: minmax(180px, 1fr) 40px;
     gap: 12px;
+
+    &.is-static {
+      grid-template-columns: minmax(180px, 1fr);
+    }
   }
 
   .role-page-card__summary-stats {
@@ -1714,10 +1771,6 @@ onMounted(() => {
     grid-row: 1;
   }
 
-  .role-permission-options {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
   .role-page-card__body {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -1807,6 +1860,11 @@ onMounted(() => {
     &__summary {
       grid-template-columns: minmax(0, 1fr) 40px;
       padding: 14px 12px 14px 0;
+
+      &.is-static {
+        grid-template-columns: minmax(0, 1fr);
+        padding-right: 12px;
+      }
     }
 
     &__summary-stats {
@@ -1822,10 +1880,6 @@ onMounted(() => {
   .role-permission-section__header {
     gap: 8px;
   }
-
-  .role-permission-options {
-    grid-template-columns: minmax(0, 1fr);
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {

From 65ed02f341169ff594624a817260d271191b8f75 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 23 Jul 2026 16:04:04 +0800
Subject: [PATCH 7/7] refactor: update label positioning in Roles.vue form for
 improved UI clarity

---
 apps/daas/src/views/role/Roles.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/daas/src/views/role/Roles.vue b/apps/daas/src/views/role/Roles.vue
index c10068904..bb3b1de29 100644
--- a/apps/daas/src/views/role/Roles.vue
+++ b/apps/daas/src/views/role/Roles.vue
@@ -429,7 +429,7 @@ export default {
       class="create-role"
       width="600px"
     >
-      <ElForm ref="form" :model="form" label-width="120px">
+      <ElForm ref="form" :model="form" label-position="top">
         <ElFormItem
           :label="$t('role_list_role_name')"
           prop="name"