🐞 fix: 双击才可查看账号详情

src/pages/admin/lepaoAccount/accountList.vue

@@ -298,7 +298,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, h } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, h } from 'vue'
 import { addAccount, adminAccountList, deleteAccount, changeAutoRun, singleRun, adminUpdateAccountInfo, getAdminBindAuditByAccount, getAdminBindAuditList } from '@/api/lepao'
 import { Modal, Notification, Message } from '@arco-design/web-vue'
 import faceModal from '@/components/FaceModal/faceModal.vue'
@@ -310,6 +310,19 @@ import { hasPermission } from '@/utils/permission'
 const faceRecoRef = ref(null)
 const bindBotRef = ref(null)
 const accountDetailRef = ref(null)
+
+const ROW_DETAIL_CONFIRM_MS = 3000
+const pendingDetailAccountId = ref(null)
+let pendingDetailTimer = null
+
+const clearPendingDetail = () => {
+    pendingDetailAccountId.value = null
+    if (pendingDetailTimer) {
+        clearTimeout(pendingDetailTimer)
+        pendingDetailTimer = null
+    }
+}
+
 const bindAuditVisible = ref(false)
 const bindAuditLoading = ref(false)
 const bindAuditData = ref([])
@@ -518,7 +531,20 @@ const getAccounts = async () => {
 
 const onRowClick = (record, ev) => {
     if (ev?.target?.closest?.('.arco-dropdown, .arco-btn')) return
-    accountDetailRef.value?.openModal(record)
+
+    const accountId = record?.id
+    if (accountId == null) return
+
+    if (pendingDetailAccountId.value === accountId) {
+        clearPendingDetail()
+        accountDetailRef.value?.openModal(record)
+        return
+    }
+
+    clearPendingDetail()
+    pendingDetailAccountId.value = accountId
+    Message.info('再点一次即可查看账号详情')
+    pendingDetailTimer = setTimeout(clearPendingDetail, ROW_DETAIL_CONFIRM_MS)
 }
 
 const editAccount = (item) => {
@@ -795,6 +821,10 @@ onMounted(() => {
     getAccounts()
 })
 
+onUnmounted(() => {
+    clearPendingDetail()
+})
+
 const stramptoTime = (time) => {
     return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
 }

src/pages/lepao/accountList/index.vue

@@ -378,6 +378,18 @@ const faceInfo = ref({})
 const bindBotRef = ref(null)
 const accountDetailRef = ref(null)
 
+const ROW_DETAIL_CONFIRM_MS = 3000
+const pendingDetailAccountId = ref(null)
+let pendingDetailTimer = null
+
+const clearPendingDetail = () => {
+  pendingDetailAccountId.value = null
+  if (pendingDetailTimer) {
+    clearTimeout(pendingDetailTimer)
+    pendingDetailTimer = null
+  }
+}
+
 const queryDataForm = reactive({
   area: '',
   student_num: '',
@@ -616,7 +628,20 @@ const handleAutoFill = () => {
 
 const onRowClick = (record, ev) => {
   if (ev?.target?.closest?.('.arco-dropdown, .arco-btn')) return
-  accountDetailRef.value?.openModal(record)
+
+  const accountId = record?.id
+  if (accountId == null) return
+
+  if (pendingDetailAccountId.value === accountId) {
+    clearPendingDetail()
+    accountDetailRef.value?.openModal(record)
+    return
+  }
+
+  clearPendingDetail()
+  pendingDetailAccountId.value = accountId
+  Message.info('再点一次即可查看账号详情')
+  pendingDetailTimer = setTimeout(clearPendingDetail, ROW_DETAIL_CONFIRM_MS)
 }
 
 const editAccount = (item) => {
@@ -857,6 +882,7 @@ onMounted(async () => {
 
 // 组件销毁时停止轮询
 onUnmounted(() => {
+  clearPendingDetail()
   stopPolling()
 })
 </script>