🎨首页控制面板的客户端链接列表新增右键刷新

web/src/views/workbench/index.vue

@@ -27,6 +27,18 @@
         remote
         :columns="connectionsColumns"
         :data="connectionsData.data"
+        :row-props="rowProps"
+      />
+      <n-dropdown
+        placement="bottom-start"
+        trigger="manual"
+        size="small"
+        :x="xRef"
+        :y="yRef"
+        :options="rightMenuOpts"
+        @select="rowSelect"
+        @clickoutside="rowClick"
+        :show="showDropdownRef"
       />
     </n-card>
   </AppPage>
@@ -35,7 +47,7 @@
 <script setup>
 import { useUserStore } from '@/store'
 import api from '@/views/workbench/api'
-import { debounce } from '@/utils'
+import { debounce, renderIcon } from '@/utils'
 import { NTag } from 'naive-ui'
 const userStore = useUserStore()
 
@@ -152,6 +164,49 @@ const connectionsColumns = [
   }
 ]
 
+// 链接列表邮件刷新菜单
+const rightMenuOpts = [
+  {
+    label: () => h('span',{ style: { color: 'green' }}, '刷新'),
+    key: "refresh",
+    icon: renderIcon('tabler:refresh',{ size: 14 })
+  }
+]
+
+// 右键菜单的设置
+const showDropdownRef = ref(false);
+const xRef = ref(0);
+const yRef = ref(0);
+
+// 右键菜单的基本位置逻辑
+function rowProps(row) {
+  return {
+    onContextmenu: (e) => {
+      // $message.info(JSON.stringify(row, null, 2));
+      e.preventDefault();
+      showDropdownRef.value = false;
+      nextTick().then(() => {
+        showDropdownRef.value = true;
+        xRef.value = e.clientX;
+        yRef.value = e.clientY;
+      });
+    }
+  };
+}
+
+// 右键菜单的逻辑
+function rowSelect(row) {
+  switch (row) {
+    case "refresh":
+      getClientConnections()
+      showDropdownRef.value = false
+  }
+}
+
+function rowClick() {
+  showDropdownRef.value = false
+}
+
 // 表格数据
 const tableData = ref({
   data: []