af-mobile-client-vue3 1.3.90 → 1.3.92

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.3.90",
+  "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/components/data/XCellList/index.vue

@@ -233,8 +233,22 @@ function initComponent() {
         }
       }
 
-      if (item.btnIcon)
-        btnList.value.push(item)
+      if (item.mobileColumnType === 'mobile_header_column') {
+        try {
+          // 只有在 item.btnIcon 是字符串时才尝试解析
+          if (typeof item.btnIcon === 'string') {
+            const parsed = JSON.parse(item.btnIcon)
+            // 只有解析结果是数组才赋值
+            if (Array.isArray(parsed)) {
+              btnList.value = parsed
+            }
+          }
+        }
+        catch (e) {
+          // 解析失败，不做任何处理（保留原来的值）
+          console.error('btnIcon JSON 解析失败：', e)
+        }
+      }
 
       if (result.showSortIcon && item.sortable) {
         orderList.value.push({
@@ -729,6 +743,30 @@ function handleTitleClick(item: any, event: any) {
   }
 }
 
+// 主标题副标题点击 popover 展示
+const showTitlePopoverKey = ref<string | null>(null)
+const textPopoverLabel = ref('')
+const textPopoverContent = ref('')
+
+function openTextPopover(item: any, column: any, key: string, event: any) {
+  event.stopPropagation()
+
+  if (isMultiSelectMode.value) {
+    toggleItemSelection(item)
+    return
+  }
+
+  textPopoverLabel.value = column?.title || ''
+  const rawValue = item?.[column?.dataIndex]
+  textPopoverContent.value = rawValue === undefined || rawValue === null ? '' : String(rawValue)
+  showTitlePopoverKey.value = key
+}
+
+function handleTextPopoverShow(val: boolean, key: string) {
+  if (!val && showTitlePopoverKey.value === key)
+    showTitlePopoverKey.value = null
+}
+
 function handleCheckboxChange(item: any, checked: boolean) {
   if (!isMultiSelectMode.value)
     return
@@ -865,41 +903,70 @@ function handleCheckboxChange(item: any, checked: boolean) {
                       />
                     </div>
                     <div v-for="(column) in mainColumns" :key="`main_${column.dataIndex}`" class="main-title">
-                      <p
-                        class="card_item_title"
-                        :style="handleFunctionStyle(column.styleFunctionForTitle, item)"
-                        :class="{ 'selectable-title': isMultiSelectMode }"
-                        @click="handleTitleClick(item, $event)"
+                      <VanPopover
+                        :show="showTitlePopoverKey === `main_${index}_${column.dataIndex}`"
+                        placement="bottom-start"
+                        :overlay="false"
+                        @update:show="(v) => handleTextPopoverShow(v, `main_${index}_${column.dataIndex}`)"
                       >
-                        <XBadge
-                          :style="handleFunctionStyle(column.styleFunctionForValue, item)"
-                          :dict-name="column.dictName"
-                          :dict-value="item[column.dataIndex]"
-                          :dict-type="column.slotType"
-                          :service-name="serviceName"
-                        />
-                      </p>
+                        <template #reference>
+                          <p
+                            class="card_item_title"
+                            :style="handleFunctionStyle(column.styleFunctionForTitle, item)"
+                            :class="{ 'selectable-title': isMultiSelectMode }"
+                            @click="(e) => openTextPopover(item, column, `main_${index}_${column.dataIndex}`, e)"
+                          >
+                            <XBadge
+                              :style="handleFunctionStyle(column.styleFunctionForValue, item)"
+                              :dict-name="column.dictName"
+                              :dict-value="item[column.dataIndex]"
+                              :dict-type="column.slotType"
+                              :service-name="serviceName"
+                            />
+                          </p>
+                        </template>
+                        <div style="max-width: 80vw; padding: 6px 8px; font-size: 14px; line-height: 1.5;">
+                          <div style="white-space: normal; word-break: break-word;">
+                            {{ textPopoverContent }}
+                          </div>
+                        </div>
+                      </VanPopover>
                     </div>
                     <div v-for="(column) in subTitleColumns" :key="`subtitle_${column.dataIndex}`" class="sub-title">
-                      <p
-                        class="card_item_subtitle"
-                        :style="handleFunctionStyle(column.styleFunctionForTitle, item)"
+                      <VanPopover
+                        :show="showTitlePopoverKey === `sub_${index}_${column.dataIndex}`"
+                        placement="bottom-start"
+                        :overlay="false"
+                        @update:show="(v) => handleTextPopoverShow(v, `sub_${index}_${column.dataIndex}`)"
                       >
-                        <XBadge
-                          :style="handleFunctionStyle(column.styleFunctionForValue, item)"
-                          :dict-name="column.dictName"
-                          :dict-value="item[column.dataIndex]"
-                          :dict-type="column.slotType"
-                          :service-name="serviceName"
-                        />
-                      </p>
+                        <template #reference>
+                          <p
+                            class="card_item_subtitle"
+                            :style="handleFunctionStyle(column.styleFunctionForTitle, item)"
+                            @click="(e) => openTextPopover(item, column, `sub_${index}_${column.dataIndex}`, e)"
+                          >
+                            <XBadge
+                              :style="handleFunctionStyle(column.styleFunctionForValue, item)"
+                              :dict-name="column.dictName"
+                              :dict-value="item[column.dataIndex]"
+                              :dict-type="column.slotType"
+                              :service-name="serviceName"
+                            />
+                          </p>
+                        </template>
+                        <div style="max-width: 80vw; padding: 6px 8px; font-size: 14px; line-height: 1.5;">
+                          <div style="white-space: normal; word-break: break-word;">
+                            {{ textPopoverContent }}
+                          </div>
+                        </div>
+                      </VanPopover>
                     </div>
                     <div v-if="!hideAllActions" class="action-buttons">
                       <VanButton
                         v-for="btn in btnList"
                         :key="btn.dataIndex"
                         class="action-button"
-                        :icon="btn.btnIcon"
+                        :icon="btn"
                         size="small"
                         :disabled="isMultiSelectMode"
                         @click.stop="handleButtonClick(btn, item)"
@@ -1099,6 +1166,8 @@ function handleCheckboxChange(item: any, checked: boolean) {
           align-items: center;
           margin-bottom: 2px;
           width: 100%;
+          flex-wrap: nowrap; // 不换行，按钮保持同一行最右侧
+          overflow: hidden; // 内容过长时在左侧截断
 
           &.multi-select-title-row {
             padding-left: 0;
@@ -1107,6 +1176,12 @@ function handleCheckboxChange(item: any, checked: boolean) {
           .main-title {
             display: inline-flex;
             align-items: center;
+            min-width: 0; // 允许缩小以便省略号生效
+            :deep(.van-popover__wrapper) {
+              display: inline-flex;
+              max-width: 100%;
+              min-width: 0;
+            }
             .card_item_title {
               font-size: var(--van-font-size-lg);
               font-weight: 700;
@@ -1134,6 +1209,13 @@ function handleCheckboxChange(item: any, checked: boolean) {
             display: inline-flex;
             align-items: center;
             margin-left: 8px;
+            min-width: 0; // 允许缩小以便省略号生效
+            max-width: 40%;
+            :deep(.van-popover__wrapper) {
+              display: inline-flex;
+              max-width: 100%;
+              min-width: 0;
+            }
             .card_item_subtitle {
               font-size: var(--van-font-size-md);
               color: var(--van-text-color-2);
@@ -1143,7 +1225,8 @@ function handleCheckboxChange(item: any, checked: boolean) {
           .action-buttons {
             display: flex;
             align-items: center;
-            margin-left: auto;
+            margin-left: auto; // 占据最右侧
+            flex-shrink: 0; // 不被压缩，避免换行
             .action-button {
               margin-left: 6px;
               width: 32px;

package/src/components/data/XOlMap/types.ts

@@ -188,4 +188,4 @@ export interface PolygonLayerConfig {
   onClick?: (polygon: PolygonData, event: any) => void
   /** 多边形数据提供者 */
   dataProvider?: () => PolygonData[] | Promise<PolygonData[]>
-}
+}