修改bug

src/views/system/permission/index.vue

@@ -31,12 +31,27 @@
           :default-expand-all="false"
           :marginTop="10"
           :show-pagination="false"
+          :row-class-name="getRowClassName"
+          @row-contextmenu="handleRowContextMenu"
+          @cell-mouse-enter="handleCellMouseEnter"
+          @cell-mouse-leave="handleCellMouseLeave"
         >
           <template #default>
             <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
           </template>
         </ArtTable>
 
+        <!-- 鼠标悬浮提示 -->
+        <TableContextMenuHint :visible="showContextMenuHint" :position="hintPosition" />
+
+        <!-- 右键菜单 -->
+        <ArtMenuRight
+          ref="contextMenuRef"
+          :menu-items="contextMenuItems"
+          :menu-width="120"
+          @select="handleContextMenuSelect"
+        />
+
         <!-- 新增/编辑对话框 -->
         <ElDialog
           v-model="dialogVisible"
@@ -127,7 +142,11 @@
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import { useAuth } from '@/composables/useAuth'
+  import { useTableContextMenu } from '@/composables/useTableContextMenu'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
+  import TableContextMenuHint from '@/components/core/others/TableContextMenuHint.vue'
+  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
   import {
     PermissionType,
     PERMISSION_TYPE_OPTIONS,
@@ -191,10 +210,8 @@
     { label: '权限类型', prop: 'perm_type' },
     { label: '菜单路径', prop: 'url' },
     { label: '适用端口', prop: 'platform' },
-    // { label: '可用角色类型', prop: 'available_for_role_types' },
     { label: '状态', prop: 'status' },
-    { label: '排序', prop: 'sort' },
-    { label: '操作', prop: 'operation' }
+    { label: '排序', prop: 'sort' }
   ]
 
   // 权限列表（树形结构）
@@ -208,6 +225,16 @@
   const currentRow = ref<PermissionTreeNode | null>(null)
   const currentPermissionId = ref<number>(0)
   const submitLoading = ref(false)
+  const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
+
+  // 使用表格右键菜单功能
+  const {
+    showContextMenuHint,
+    hintPosition,
+    getRowClassName,
+    handleCellMouseEnter,
+    handleCellMouseLeave
+  } = useTableContextMenu()
 
   // 表单引用和数据
   const formRef = ref<FormInstance>()
@@ -315,35 +342,6 @@
       prop: 'sort',
       label: '排序',
       width: 80
-    },
-    {
-      prop: 'operation',
-      label: '操作',
-      width: 120,
-      fixed: 'right',
-      formatter: (row: PermissionTreeNode) => {
-        const buttons = []
-
-        if (hasAuth('permission:edit')) {
-          buttons.push(
-            h(ArtButtonTable, {
-              type: 'edit',
-              onClick: () => showDialog('edit', row)
-            })
-          )
-        }
-
-        if (hasAuth('permission:delete')) {
-          buttons.push(
-            h(ArtButtonTable, {
-              type: 'delete',
-              onClick: () => deletePermission(row)
-            })
-          )
-        }
-
-        return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
-      }
     }
   ])
 
@@ -557,4 +555,47 @@
   onMounted(() => {
     getPermissionList()
   })
+
+  // 右键菜单项配置
+  const contextMenuItems = computed((): MenuItemType[] => {
+    const items: MenuItemType[] = []
+
+    if (hasAuth('permission:edit')) {
+      items.push({ key: 'edit', label: '编辑' })
+    }
+
+    if (hasAuth('permission:delete')) {
+      items.push({ key: 'delete', label: '删除' })
+    }
+
+    return items
+  })
+
+  // 处理表格行右键菜单
+  const handleRowContextMenu = (row: PermissionTreeNode, column: any, event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    currentRow.value = row
+    contextMenuRef.value?.show(event)
+  }
+
+  // 处理右键菜单选择
+  const handleContextMenuSelect = (item: MenuItemType) => {
+    if (!currentRow.value) return
+
+    switch (item.key) {
+      case 'edit':
+        showDialog('edit', currentRow.value)
+        break
+      case 'delete':
+        deletePermission(currentRow.value)
+        break
+    }
+  }
 </script>
+
+<style scoped lang="scss">
+  :deep(.el-table__row.table-row-with-context-menu) {
+    cursor: pointer;
+  }
+</style>

src/views/system/role/index.vue

@@ -32,15 +32,21 @@
           :pageSize="pagination.pageSize"
           :total="pagination.total"
           :marginTop="10"
+          :row-class-name="getRowClassName"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           @row-contextmenu="handleRowContextMenu"
+          @cell-mouse-enter="handleCellMouseEnter"
+          @cell-mouse-leave="handleCellMouseLeave"
         >
           <template #default>
             <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
           </template>
         </ArtTable>
 
+        <!-- 鼠标悬浮提示 -->
+        <TableContextMenuHint :visible="showContextMenuHint" :position="hintPosition" />
+
         <!-- 右键菜单 -->
         <ArtMenuRight
           ref="contextMenuRef"
@@ -234,8 +240,10 @@
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import { useAuth } from '@/composables/useAuth'
+  import { useTableContextMenu } from '@/composables/useTableContextMenu'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
   import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
+  import TableContextMenuHint from '@/components/core/others/TableContextMenuHint.vue'
   import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
   import { formatDateTime } from '@/utils/business/format'
   import { CommonStatus, getStatusText } from '@/config/constants'
@@ -267,6 +275,15 @@
   const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
   const currentRow = ref<PlatformRole | null>(null)
 
+  // 使用表格右键菜单功能
+  const {
+    showContextMenuHint,
+    hintPosition,
+    getRowClassName,
+    handleCellMouseEnter,
+    handleCellMouseLeave
+  } = useTableContextMenu()
+
   // 搜索表单初始值
   const initialSearchState = {
     role_name: '',
@@ -1056,6 +1073,10 @@
 </script>
 
 <style scoped lang="scss">
+  :deep(.el-table__row.table-row-with-context-menu) {
+    cursor: pointer;
+  }
+
   .dialog-header {
     display: flex;
     justify-content: space-between;