feat(kfxt): 新增客户留言查看与标记已读功能

- 实现客户留言列表展示，支持分页加载
- 添加留言标记为已读功能，包含确认弹窗
- 集成时间格式化显示留言创建时间
- 使用Element Plus组件库实现UI交互- 支持根据留言状态显示不同操作按钮和标签- 添加空状态提示与页面加载状态管理

src/views/kfxt/jqrfh/index.vue

@@ -0,0 +1,174 @@
+<script setup>
+import {onMounted, ref} from 'vue'
+import {ElMessage, ElMessageBox} from 'element-plus'
+import {Clock, MessageSquare, User} from 'lucide-vue-next'
+import request from '@/utils/request.js'
+
+const messages = ref([])
+const total = ref(0)
+const loading = ref(false)
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const res = await request.get('/chat/getRobotMessage', {
+      params: {
+        page: currentPage.value,
+        size: pageSize.value
+      }
+    })
+
+    if (res.code !== 200) {
+      ElMessage.error(res.msg)
+      return
+    }
+
+    messages.value = res.data.records
+    total.value = res.data.total
+  } catch (error) {
+    ElMessage.error('获取留言列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handlePageChange = (page) => {
+  currentPage.value = page
+  getList()
+}
+
+const formatTime = (time) => {
+  return new Date(time).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+onMounted(() => {
+  getList()
+})
+
+const readMessage = async (messageId) => {
+  try {
+    await ElMessageBox.confirm(
+        '确认要将该留言标记为已读吗？',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+    )
+
+    const res = await request.get('/chat/readMessage', {
+      params: { messageId }
+    })
+
+    if (res.code !== 200) {
+      ElMessage.error(res.msg)
+      return
+    }
+
+    ElMessage.success('标记为已读')
+    getList()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('标记为已读失败')
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-[calc(100vh-90px)] bg-gray-50 p-6">
+    <div class="max-w-full mx-auto">
+      <div class="mb-6">
+        <div class="flex items-center gap-3 mb-2">
+          <MessageSquare class="w-8 h-8 text-blue-600" />
+          <h1 class="text-3xl font-bold text-gray-800">客户留言</h1>
+        </div>
+        <p class="text-gray-500">共 {{ total }} 条留言</p>
+      </div>
+
+      <el-card v-loading="loading" shadow="never" class="mb-6">
+        <div v-if="messages.length === 0 && !loading" class="text-center py-12">
+          <MessageSquare class="w-16 h-16 text-gray-300 mx-auto mb-4" />
+          <p class="text-gray-400 text-lg">暂无留言</p>
+        </div>
+
+        <div v-else class="space-y-4">
+          <div
+              v-for="message in messages"
+              :key="message.id"
+              class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow bg-white"
+          >
+            <!-- 顶部信息 -->
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <User class="w-5 h-5 text-blue-600" />
+                <span class="text-sm font-medium text-gray-700">
+                  客户ID: {{ message.fromId }}
+                </span>
+              </div>
+
+              <div class="flex items-center gap-2">
+                <!-- 状态：未读时显示按钮，已读显示标签 -->
+                <el-button
+                    v-if="message.status !== 'read'"
+                    type="primary"
+                    size="small"
+                    @click="readMessage(message.id)"
+                >
+                  标记已读
+                </el-button>
+                <el-tag
+                    v-else
+                    size="small"
+                    type="success"
+                >
+                  已读
+                </el-tag>
+              </div>
+            </div>
+
+            <!-- 内容 -->
+            <div class="mb-3 pl-2 border-l-3 border-blue-500">
+              <p class="text-gray-800 text-base leading-relaxed">
+                {{ message.content }}
+              </p>
+            </div>
+
+            <!-- 时间 & ID -->
+            <div class="flex items-center gap-2 text-gray-400 text-sm">
+              <Clock class="w-4 h-4" />
+              <span>{{ formatTime(message.createdAt) }}</span>
+              <span class="ml-auto text-xs text-gray-400">ID: {{ message.id }}</span>
+            </div>
+          </div>
+        </div>
+      </el-card>
+
+      <div class="flex justify-center">
+        <el-pagination
+            v-model:current-page="currentPage"
+            :page-size="pageSize"
+            :total="total"
+            layout="prev, pager, next, total"
+            background
+            @current-change="handlePageChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.el-card {
+  border-radius: 12px;
+}
+</style>