af-mobile-client-vue3 1.3.91 → 1.3.92

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.3.91",
+  "version": "1.3.92",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/components/core/MessageNotification/MessageNotification.vue

@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import { post } from '@af-mobile-client-vue3/services/restTools'
+import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
+import { Badge as VanBadge, Icon as VanIcon } from 'vant'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { closeWebSocket, initWebSocket } from './webSocket'
+import 'vant/es/badge/style'
+import 'vant/es/icon/style'
+
+const userInfo = useUserStore().getUserInfo()
+
+// 未读消息数量
+const unreadCount = ref(0)
+
+// 打开消息下拉菜单
+const isShowMessageDropdown = ref(false)
+
+// 消息列表数据
+const messages = ref<any[]>([])
+
+// 组件根元素的引用
+const messageNotificationRef = ref<HTMLElement | null>(null)
+
+// 获取消息数据
+async function fetchMessages() {
+  const param = {
+    userId: `${userInfo.id}:phone`, // |phone
+    typeList: '\'phone\'', // phone
+    pageNo: 1,
+    pageSize: 100,
+  }
+  const res = await post('/af-system/logic/getNotificationListByType', param)
+  messages.value = (res || []).map((item: any) => {
+    const event: any = JSON.parse(item.f_event || '{}')
+    return {
+      id: item.id,
+      type: event.type,
+      time: item.f_input_date,
+      title: event.title || '',
+      status: item.f_state,
+      content: event.description || '',
+    }
+  })
+}
+
+// 获取未读消息数量
+async function fetchMessagesCount() {
+  const param = {
+    userId: `${userInfo.id}:phone`, // |phone
+    typeList: '\'phone\'', // phone
+  }
+  const count = await post('/af-system/logic/getNotificationCount', param)
+  unreadCount.value = count.count
+}
+
+// 处理 WebSocket 消息
+function createMessageCallback(message: any) {
+  fetchMessagesCount()
+  fetchMessages()
+}
+// 处理 不同的业务
+function sendMessageCallback(message: any) {
+  console.log('>>>> 处理业务', JSON.stringify(message))
+  if (message.businessType === 'audio') {
+    // 播放响铃, 响铃文件为 message.audioName
+    mobileUtil.execute({
+      funcName: 'playAudio',
+      param: {
+        fileName: message.audioName,
+      },
+      callbackFunc: (result: any) => {
+        // {"status":"success","data":{"message":"音频播放成功","fileName":"anjian.mp3","path":"assets/audio/anjian.mp3"}}
+      },
+    })
+  }
+}
+
+// 全部标记为已读（清空消息列表）
+function markAllAsRead() {
+  if (messages.value.length === 0)
+    return
+
+  const messageIds = messages.value.map(msg => msg.id).join(',')
+  markAsRead(messageIds)
+}
+
+// 单条消息标记为已读
+function markAsRead(id: string | number) {
+  post('/af-system/logic/confirmMessage', {
+    id,
+    f_state: 2,
+  }).then(() => {
+    fetchMessages()
+    fetchMessagesCount()
+  })
+}
+
+function handleIconClick(message: any) {
+  // 乐观更新为已读状态，使图标立刻变绿
+  message.status = 2
+  setTimeout(() => {
+    markAsRead(message.id)
+  }, 200)
+}
+
+function showMessageDropdown() {
+  isShowMessageDropdown.value = !isShowMessageDropdown.value
+  if (isShowMessageDropdown.value) {
+    fetchMessages()
+  }
+}
+
+// 处理全局点击事件
+function handleDocumentClick(event: MouseEvent) {
+  if (messageNotificationRef.value && !messageNotificationRef.value.contains(event.target as Node)) {
+    isShowMessageDropdown.value = false
+  }
+}
+
+onMounted(() => {
+  fetchMessages()
+  fetchMessagesCount()
+  // 初始化 WebSocket 连接
+  initWebSocket(userInfo.id, sendMessageCallback, createMessageCallback)
+  // 添加全局点击事件监听器
+  document.addEventListener('click', handleDocumentClick)
+})
+
+onUnmounted(() => {
+  closeWebSocket()
+  // 移除全局点击事件监听器
+  document.removeEventListener('click', handleDocumentClick)
+})
+</script>
+
+<template>
+  <div ref="messageNotificationRef" class="message_icon" @click="showMessageDropdown">
+    <VanBadge v-if="unreadCount > 0" :content="unreadCount" max="99">
+      <VanIcon name="bell" />
+    </VanBadge>
+    <VanIcon v-else name="bell" />
+  </div>
+
+  <div v-if="isShowMessageDropdown" class="message_overlay" @click="isShowMessageDropdown = false" />
+
+  <div v-show="isShowMessageDropdown" class="message_dropdown" @click.stop>
+    <div class="message_header">
+      <span class="label">消息通知</span>
+      <span class="action" @click="markAllAsRead">全部已读</span>
+    </div>
+    <div class="message_list">
+      <template v-if="messages.length > 0">
+        <div
+          v-for="message in messages"
+          :key="message.id"
+          class="message_item"
+          :class="{ info: message.type === 'info', warning: message.type === 'warning' }"
+        >
+          <!-- 第一行：div1 + div2 -->
+          <div class="message_row">
+            <!-- div1：标题+时间 -->
+            <div class="message_left">
+              <p class="message_title">
+                {{ message.title }}
+              </p>
+              <p class="message_time">
+                {{ message.time }}
+              </p>
+            </div>
+            <!-- div2：图标 -->
+            <div class="message_right">
+              <VanIcon
+                name="checked"
+                :color="message.status === 2 ? '#52c41a' : '#999'"
+                size="28"
+                @click.stop="handleIconClick(message)"
+              />
+            </div>
+          </div>
+          <!-- 第二行：div3 内容 -->
+          <div class="message_content">
+            <p class="message_text">
+              {{ message.content }}
+            </p>
+          </div>
+        </div>
+      </template>
+      <div v-else class="empty_message">
+        暂无未读消息
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.message_dropdown {
+  position: absolute;
+  top: 56px;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+  z-index: 60;
+  max-height: 400px;
+  overflow-y: auto;
+
+  .message_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #eee;
+
+    .label {
+      font-size: 14px;
+      color: #999;
+    }
+    .action {
+      font-size: 14px;
+      color: #1989fa;
+      cursor: pointer;
+    }
+  }
+
+  .message_list {
+    .message_item {
+      padding: 12px 16px;
+      border-bottom: 1px solid #f5f5f5;
+
+      &.info {
+        background-color: #eff6ff;
+      }
+      &.warning {
+        background-color: #fff7ed;
+      }
+
+      .message_row {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+      }
+
+      .message_left {
+        flex: 1;
+        min-width: 0;
+
+        .message_title {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+          margin: 0;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .message_time {
+          font-size: 12px;
+          color: #999;
+          margin: 4px 0 0 0;
+        }
+      }
+
+      .message_right {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        padding-left: 8px;
+
+        .van-icon {
+          font-size: 18px;
+          color: #999;
+        }
+      }
+
+      .message_content {
+        margin-top: 8px;
+
+        .message_text {
+          border-radius: 4px;
+          font-size: 13px;
+          color: #666;
+          background-color: #fafafc;
+          margin: 0;
+          padding: 8px 12px;
+          line-height: 1.4;
+        }
+      }
+    }
+
+    .empty_message {
+      padding: 60px 0;
+      text-align: center;
+      color: #999;
+      font-size: 14px;
+    }
+  }
+}
+
+.message_overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 50;
+  margin-top: 56px;
+  margin-bottom: 50px;
+}
+.message_icon {
+  padding: 8px;
+  position: relative;
+  cursor: pointer;
+
+  .van-icon {
+    font-size: 20px;
+    color: #666;
+  }
+}
+</style>

package/src/components/core/MessageNotification/webSocket.tsx

@@ -0,0 +1,112 @@
+let heartCheckTimer: number | null = null
+let reconnectTimer: number | null = null
+let websocket: WebSocket | null = null
+
+let notifyId = ''
+let sendMessageCallback: ((message: any) => void) | null = null
+let createMessageCallback: ((message: any) => void) | null = null
+
+function reloadInitWebSocket() {
+  initWebSocket(notifyId, sendMessageCallback, createMessageCallback)
+}
+
+export function initWebSocket(notify: string | null = null, sendCallback: (message: any) => void, createCallback: (message: any) => void) {
+  if (notify) {
+    notifyId = notify
+  }
+  if (sendCallback) {
+    sendMessageCallback = sendCallback
+  }
+  if (createCallback) {
+    createMessageCallback = createCallback
+  }
+
+  // 已有连接则不重复连接（包括正在连接或已连接的状态）
+  if (websocket && (websocket.readyState === WebSocket.OPEN || websocket.readyState === WebSocket.CONNECTING)) {
+    console.log('>>>> webSocket 连接 已存在')
+    return
+  }
+
+  // 初始化 WebSocket
+  websocket = new WebSocket(`ws:${window.location.host}/socket/af-system/sendMessage?userId=${notifyId}:phone`)
+
+  // WebSocket 打开连接时触发
+  websocket.onopen = () => {
+    startHeartCheck()
+  }
+
+  // WebSocket 连接发生错误时触发
+  websocket.onerror = () => {
+    reconnect()
+  }
+
+  // WebSocket 接收到消息时触发
+  websocket.onmessage = (event: MessageEvent) => {
+    try {
+      if (event.data === 'phone_ping')
+        return
+      const message = JSON.parse(event.data)
+      if (message && message.sendMessage === true) {
+        // 接收消息 处理自己的业务, 不再 提示列表中展示 (后端直接调用system-sendMessage)
+        sendMessageCallback?.(message)
+      }
+      else {
+        // 消息数据 处理 更新消息列表展示
+        createMessageCallback?.(message)
+        sendMessageCallback?.(message)
+      }
+    }
+    catch (e) {
+      console.error('WebSocket message parsing error:', e)
+    }
+  }
+
+  // WebSocket 连接关闭时触发
+  websocket.onclose = () => {
+    stopHeartCheck()
+    reconnect()
+  }
+}
+
+// 停止心跳检测
+function stopHeartCheck() {
+  if (heartCheckTimer !== null) {
+    clearInterval(heartCheckTimer)
+    heartCheckTimer = null
+  }
+}
+
+// 心跳机制
+function startHeartCheck() {
+  stopHeartCheck()
+  heartCheckTimer = window.setInterval(() => {
+    if (websocket && websocket.readyState === WebSocket.OPEN) {
+      websocket.send(JSON.stringify({ event: 'phone_ping', userList: [`${notifyId}:phone`] }))
+    }
+  }, 30000)
+}
+
+function reconnect() {
+  // 防止频繁重连
+  if (reconnectTimer !== null) {
+    return
+  }
+
+  reconnectTimer = window.setTimeout(() => {
+    reloadInitWebSocket() // 重新初始化 WebSocket
+    reconnectTimer = null
+  }, 5000) // 5秒尝试重连
+}
+
+// 关闭 WebSocket 连接
+export function closeWebSocket() {
+  if (websocket) {
+    websocket.close()
+    websocket = null
+  }
+  stopHeartCheck()
+  if (reconnectTimer !== null) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+}

package/src/views/component/XCellListView/index.vue

@@ -9,27 +9,87 @@ const emit = defineEmits(['deleteRow'])
 // 访问路由
 const router = useRouter()
 // 获取默认值
-const idKey = ref('o_id')
+// const idKey = ref('o_id')
 
 // 简易crud表单测试
 const configName = ref('ceshiCRUD')
-const serviceName = ref('af-linepatrol')
+const serviceName = ref('af-safecheck')
 
-function add(row) {
-  console.log('>>>> add')
-}
+// 资源权限测试
+// const configName = ref('crud_sources_test')
+// const serviceName = ref('af-system')
 
-function addO(row) {
-  console.log('>>>> addO')
-}
+// 实际业务测试
+// const configName = ref('lngChargeAuditMobileCRUD')
+// const serviceName = ref('af-gaslink')
 
-function aaa(row) {
-  console.log('>>>> add')
-}
+// 跳转到详情页面
+// function toDetail(item) {
+//   router.push({
+//     name: 'XCellDetailView',
+//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
+//     query: {
+//       operName: item[operNameKey.value],
+//       method:item[methodKey.value],
+//       requestMethod:item[requestMethodKey.value],
+//       operatorType:item[operatorTypeKey.value],
+//       operUrl:item[operUrlKey.value],
+//       operIp:item[operIpKey.value],
+//       costTime:item[costTimeKey.value],
+//       operTime:item[operTimeKey.value],
+//
+//       title: item[titleKey.value],
+//       businessType: item[businessTypeKey.value],
+//       status:item[statusKey.value]
+//     }
+//   })
+// }
 
-function toDetail(row) {
-  console.log('>>>> toDetail')
-}
+// 跳转到表单——以表单组来渲染纯表单
+// function toDetail(item) {
+//   router.push({
+//     name: 'XFormGroupView',
+//     query: {
+//       id: item[idKey.value],
+//       // id: item.rr_id,
+//       // o_id: item.o_id,
+//     },
+//   })
+// }
+
+// 新增功能
+// function addOption(totalCount) {
+//   router.push({
+//     name: 'XFormView',
+//     params: { id: totalCount, openid: totalCount },
+//     query: {
+//       configName: configName.value,
+//       serviceName: serviceName.value,
+//       mode: '新增',
+//     },
+//   })
+// }
+
+// 修改功能
+// function updateRow(result) {
+//   router.push({
+//     name: 'XFormView',
+//     params: { id: result.o_id, openid: result.o_id },
+//     query: {
+//       configName: configName.value,
+//       serviceName: serviceName.value,
+//       mode: '修改',
+//     },
+//   })
+// }
+
+// 删除功能
+// function deleteRow(result) {
+//   emit('deleteRow', result.o_id)
+// }
+// const fixQueryForm = ref({
+//   f_operator_id: '487184754014158848',
+// })
 </script>
 
 <template>
@@ -38,10 +98,6 @@ function toDetail(row) {
       <XCellList
         :config-name="configName"
         :service-name="serviceName"
-        @add="add"
-        @add-o="addO"
-        @aaa="aaa"
-        @toDetail="toDetail"
       />
     </template>
   </NormalDataLayout>

package/src/views/user/my/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PhoneLocationStatus } from '@af-mobile-client-vue3/components/data/XOlMap/types'
+import MessageNotification from '@af-mobile-client-vue3/components/core/MessageNotification/MessageNotification.vue'
 import useSettingStore from '@af-mobile-client-vue3/stores/modules/setting'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
@@ -165,6 +166,9 @@ const webMobileConfig = useSettingStore().getSetting()
           <!--        <div class="setting_section"> -->
           <!--          <van-icon name="setting-o" class="setting-icon" /> -->
           <!--        </div> -->
+          <div class="action_section">
+            <MessageNotification />
+          </div>
         </div>
       </nav>
     </VanSticky>
@@ -481,5 +485,9 @@ const webMobileConfig = useSettingStore().getSetting()
       }
     }
   }
+  .action_section {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>