fetch(add): 账户管理

src/views/card-management/card-detail/index.vue

@@ -58,6 +58,13 @@
             <ElButton type="danger" size="small" @click="deleteCard(item)"> 删除 </ElButton>
           </template>
         </ArtDataViewer>
+
+        <!-- 右键菜单 -->
+        <ArtMenuRight
+          ref="contextMenuRef"
+          :menu-items="contextMenuItems"
+          @select="handleContextMenuSelect"
+        />
       </ElCard>
 
       <!-- 网卡分销弹框 -->
@@ -109,6 +116,8 @@
   import { RoutesAlias } from '@/router/routesAlias'
   import ArtDataViewer from '@/components/core/views/ArtDataViewer.vue'
   import CardOperationDialog from '@/components/business/CardOperationDialog.vue'
+  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
+  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
 
   defineOptions({ name: 'CardDetail' })
 
@@ -123,6 +132,30 @@
   const rechargeDialogVisible = ref(false)
   const packageChangeDialogVisible = ref(false)
 
+  // 右键菜单
+  const contextMenuRef = ref()
+  const currentContextRow = ref<any>(null)
+
+  // 右键菜单配置
+  const contextMenuItems: MenuItemType[] = [
+    {
+      key: 'cardOperation',
+      label: '卡务操作',
+      icon: '&#xe72b;'
+    },
+    {
+      key: 'download',
+      label: '下载',
+      icon: '&#xe614;'
+    },
+    {
+      key: 'delete',
+      label: '删除',
+      icon: '&#xe783;',
+      showLine: true
+    }
+  ]
+
   // 定义表单搜索初始值
   const initialSearchState = {
     cardPackage: '',
@@ -734,36 +767,27 @@
     {
       prop: 'operation',
       label: '操作',
-      width: 200,
+      width: 120,
       formatter: (row: any) => {
-        return h('div', { class: 'operation-buttons' }, [
-          h(
-            'button',
-            {
-              class: 'el-button el-button--primary el-button--small',
-              onClick: () => handleCardOperation(row)
-            },
-            '卡务操作'
-          ),
-          h(
-            'button',
-            {
-              class: 'el-button el-button--success el-button--small',
-              onClick: () => downloadCard(row),
-              style: { marginLeft: '5px' }
-            },
-            '下载'
-          ),
-          h(
-            'button',
-            {
-              class: 'el-button el-button--danger el-button--small',
-              onClick: () => deleteCard(row),
-              style: { marginLeft: '5px' }
-            },
-            '删除'
-          )
-        ])
+        return h(
+          'div',
+          {
+            style:
+              'display: flex; justify-content: center; align-items: center; gap: 4px; cursor: pointer; color: var(--el-color-primary);',
+            onClick: (e: MouseEvent) => {
+              e.stopPropagation()
+              handleOperationClick(row, e)
+            }
+          },
+          [
+            h('i', {
+              class: 'iconfont-sys',
+              innerHTML: '&#xe79c;',
+              style: 'font-size: 16px;'
+            }),
+            h('span', { style: 'font-size: 14px;' }, '更多操作')
+          ]
+        )
       }
     }
   ])
@@ -872,7 +896,7 @@
     // 根据查询条件过滤
     let filteredAgents = allAgents
     if (query) {
-      filteredAgents = allAgents.filter(agent =>
+      filteredAgents = allAgents.filter((agent) =>
         agent.label.toLowerCase().includes(query.toLowerCase())
       )
     }
@@ -908,7 +932,7 @@
     // 根据查询条件过滤
     let filteredPackages = allPackages
     if (query) {
-      filteredPackages = allPackages.filter(pkg =>
+      filteredPackages = allPackages.filter((pkg) =>
         pkg.label.toLowerCase().includes(query.toLowerCase())
       )
     }
@@ -939,9 +963,7 @@
       // 模拟API调用
       await new Promise((resolve) => setTimeout(resolve, 1000))
 
-      ElMessage.success(
-        `成功为 ${data.selectedCards.length} 张网卡充值 ${data.amount} 元`
-      )
+      ElMessage.success(`成功为 ${data.selectedCards.length} 张网卡充值 ${data.amount} 元`)
       rechargeDialogVisible.value = false
 
       // 刷新列表
@@ -976,10 +998,9 @@
       ElMessage.success(`成功回收 ${selectedRows.value.length} 张网卡`)
 
       // 从列表中移除回收的网卡
-      const recycledIds = selectedRows.value.map(row => row.id)
-      tableData.value = tableData.value.filter(item => !recycledIds.includes(item.id))
+      const recycledIds = selectedRows.value.map((row) => row.id)
+      tableData.value = tableData.value.filter((item) => !recycledIds.includes(item.id))
       selectedRows.value = []
-
     } catch (error) {
       ElMessage.error('回收操作失败，请重试')
     }
@@ -989,6 +1010,29 @@
   const handleDialogClose = () => {
     // 可以在这里添加额外的关闭逻辑
   }
+
+  // 处理操作列点击
+  const handleOperationClick = (row: any, event: MouseEvent) => {
+    currentContextRow.value = row
+    contextMenuRef.value?.show(event)
+  }
+
+  // 处理右键菜单选择
+  const handleContextMenuSelect = (item: MenuItemType) => {
+    if (!currentContextRow.value) return
+
+    switch (item.key) {
+      case 'cardOperation':
+        handleCardOperation(currentContextRow.value)
+        break
+      case 'download':
+        downloadCard(currentContextRow.value)
+        break
+      case 'delete':
+        deleteCard(currentContextRow.value)
+        break
+    }
+  }
 </script>
 
 <style lang="scss" scoped>