yg-yygl 0.0.1

package/src/views/sys/my-msg/components/msg-detail.vue

@@ -0,0 +1,1418 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { RichEditor } from '@udp/component-ui';
+
+import {
+  ChatDotRound,
+  Loading,
+  StarFilled,
+  ArrowDown,
+  ArrowUp,
+} from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+import { Tag } from '../../../../components/custom-tags';
+import { getRequestClient } from '../../../../api/request';
+import { createReply, pageReply } from '../../../../api/msg';
+import type { UdpSysReplyPageResponse } from '../../../../api/msg/types';
+import { useAuthenticatedHtml } from '../../../../utils/useAuthenticatedHtml';
+
+interface Props {
+  msgData?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  msgData: null,
+});
+
+const loading = ref(false);
+const detailData = ref<any>(null);
+
+// 鉴权图片处理
+const rawContentHtml = computed(
+  () => detailData.value?.msgContent || detailData.value?.content || detailData.value?.msgText || detailData.value?.text || '',
+);
+const fetchImageBlob = async (url: string) => {
+  const res = await getRequestClient().get(url, { responseType: 'blob', responseReturn: 'raw' });
+  return URL.createObjectURL(res.data);
+};
+const { processedHtml: authContentHtml } = useAuthenticatedHtml(rawContentHtml, fetchImageBlob);
+const comments = ref<UdpSysReplyPageResponse[]>([]);
+const commentLoading = ref(false);
+const currentPage = ref(1);
+const pageSize = 5;
+const total = ref(0);
+const hasMore = ref(true);
+const newCommentContent = ref('');
+
+// 回复功能状态管理
+const replyingTo = ref<string | null>(null); // 当前正在回复的评论ID
+const replyContent = ref(''); // 回复内容
+const replySubmitting = ref(false); // 回复提交状态
+
+// 子回复展开状态管理
+const expandedReplies = ref<Map<string, boolean>>(new Map()); // 记录哪些评论的子回复是展开的
+
+// 子回复分页状态管理系统
+interface ChildReplyPagination {
+  currentPage: number;
+  pageSize: number;
+  total: number;
+  hasMore: boolean;
+  loading: boolean;
+  loadedReplies: UdpSysReplyPageResponse[]; // 已加载的子回复数据
+}
+
+// 为每个主评论维护独立的子回复分页状态
+const childReplyPagination = ref<Map<string, ChildReplyPagination>>(new Map());
+
+// 初始化子回复分页状态
+const initChildReplyPagination = (commentId: string): ChildReplyPagination => {
+  return {
+    currentPage: 1,
+    pageSize: 5, // 子回复每页显示数量
+    total: 0,
+    hasMore: true,
+    loading: false,
+    loadedReplies: [],
+  };
+};
+
+// 获取子回复分页状态
+const getChildReplyPagination = (commentId: string): ChildReplyPagination => {
+  if (!childReplyPagination.value.has(commentId)) {
+    childReplyPagination.value.set(
+      commentId,
+      initChildReplyPagination(commentId),
+    );
+  }
+  return childReplyPagination.value.get(commentId)!;
+};
+
+// 计算属性
+const noMore = computed(
+  () =>
+    !hasMore.value || (total.value > 0 && comments.value.length >= total.value),
+);
+const infiniteScrollDisabled = computed(
+  () => commentLoading.value || noMore.value,
+);
+
+// 加载更多评论
+const loadMoreComments = async () => {
+  if (commentLoading.value || noMore.value) {
+    return;
+  }
+
+  commentLoading.value = true;
+
+  try {
+    // 调用真实的分页查询API
+    const result = await pageReply({
+      current: currentPage.value,
+      size: pageSize,
+      model: {
+        msgId: props.msgData?.msgId, // 当前消息ID
+        replyId: '0',
+      },
+    });
+
+    // 直接使用API返回的数据，不做额外转换
+    const apiComments = result.records;
+
+    if (currentPage.value === 1) {
+      comments.value = apiComments;
+    } else {
+      comments.value.push(...apiComments);
+    }
+
+    // 为每个有子回复的评论初始化分页状态
+    apiComments.forEach((comment: any) => {
+      if (comment.childCount > 0) {
+        childReplyPagination.value.set(comment.id, {
+          currentPage: 1,
+          pageSize: 5,
+          total: comment.childCount,
+          hasMore: comment.childCount > (comment.childList?.length || 0),
+          loading: false,
+          loadedReplies: comment.childList || [],
+        });
+      }
+    });
+
+    total.value = result.total;
+    hasMore.value = comments.value.length < result.total;
+    currentPage.value++;
+  } catch (error) {
+    console.error('❌ 加载评论失败:', error);
+    ElMessage.error('加载评论失败，请重试');
+  } finally {
+    commentLoading.value = false;
+  }
+};
+
+// 发表评论
+const submitComment = async () => {
+  if (!newCommentContent.value.trim()) {
+    ElMessage.warning('请输入评论内容');
+    return;
+  }
+
+  if (newCommentContent.value.length > 500) {
+    ElMessage.warning('评论内容不能超过500字');
+    return;
+  }
+
+  try {
+    // 保存当前展开状态，用于刷新后恢复
+    const currentExpandedReplies = new Map(expandedReplies.value);
+
+    // 保存当前滚动位置（可选）
+    const scrollElement = document.querySelector('.comment-list-container');
+    const scrollTop = scrollElement?.scrollTop || 0;
+
+    // 调用真实的API接口创建评论
+    const replyId = await createReply({
+      msgId: props.msgData?.msgId, // 消息ID
+      replyId: '0', // 新评论传"0"，回复评论时传被回复评论的ID
+      replyContent: newCommentContent.value.trim(), // 评论内容（必填）
+    });
+
+    // 清空输入框（在API调用成功后立即清空，提升用户体验）
+    newCommentContent.value = '';
+
+    // 智能刷新：重新获取准确的评论数据，同时保持展开状态
+    await refreshCurrentPageComments(currentExpandedReplies);
+
+    // 恢复滚动位置（可选，根据UX需求决定）
+    // nextTick(() => {
+    //   if (scrollElement) {
+    //     scrollElement.scrollTop = scrollTop;
+    //   }
+    // });
+
+    ElMessage.success('评论发表成功');
+  } catch (error) {
+    console.error('发表评论失败:', error);
+    ElMessage.error('发表评论失败，请重试');
+  }
+};
+
+// 点赞评论 - 使用API字段
+const toggleLike = (comment: UdpSysReplyPageResponse) => {
+  // 注意：这里需要根据实际API字段调整
+  // comment.isLiked = !comment.isLiked;
+  // comment.likeCount += comment.isLiked ? 1 : -1;
+  // TODO: 实现点赞功能
+};
+
+// 回复功能相关方法
+const handleReply = (comment: UdpSysReplyPageResponse) => {
+  // 如果点击的是当前正在回复的评论，则取消回复
+  if (replyingTo.value === comment.id) {
+    cancelReply();
+    return;
+  }
+
+  // 设置回复目标
+  replyingTo.value = comment.id;
+  replyContent.value = '';
+
+  // 滚动到回复框位置（可选）
+  nextTick(() => {
+    const replyInput = document.querySelector(`#reply-input-${comment.id}`);
+    if (replyInput) {
+      replyInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      (replyInput as HTMLElement).focus();
+    }
+  });
+};
+
+const cancelReply = () => {
+  replyingTo.value = null;
+  replyContent.value = '';
+};
+
+// 子回复展开/收起逻辑
+const toggleChildReplies = (commentId: string) => {
+  const currentState = expandedReplies.value.get(commentId) || false;
+
+  // 直接切换展开状态，不进行API调用
+  // 展开时显示主评论中已有的childList数据（通常是前2条）
+  expandedReplies.value.set(commentId, !currentState);
+
+  // 如果是展开操作且还没有加载过子回复，则加载子回复
+  if (!currentState) {
+    loadChildReplies(commentId);
+  }
+};
+
+// 加载子回复数据
+const loadChildReplies = async (
+  commentId: string,
+  loadMore: boolean = false,
+) => {
+  const pagination = getChildReplyPagination(commentId);
+
+  // 防止重复加载
+  if (pagination.loading || (!loadMore && !pagination.hasMore)) {
+    return;
+  }
+
+  pagination.loading = true;
+
+  try {
+    const requestParams = {
+      current: pagination.currentPage,
+      size: pagination.pageSize,
+      model: {
+        msgId: props.msgData?.msgId,
+        replyId: commentId, // 获取指定评论的子回复
+      },
+    };
+
+    // 调用API获取子回复数据
+    const result = await pageReply(requestParams);
+
+    const apiReplies = result.records || [];
+
+    if (pagination.currentPage === 1) {
+      // 第一页：直接替换
+      pagination.loadedReplies = apiReplies;
+    } else {
+      // 后续页：追加数据
+      pagination.loadedReplies.push(...apiReplies);
+    }
+
+    // 更新分页状态
+    pagination.total = result.total || 0;
+    pagination.hasMore = pagination.loadedReplies.length < pagination.total;
+
+    // 只有在"加载更多"模式下且成功获取数据后才递增页码
+    // 第一次展开时(loadMore=false)不递增，确保下次"加载更多"请求正确的页码
+    if (loadMore && apiReplies.length > 0) {
+      pagination.currentPage++;
+    }
+
+    // 同步更新主评论的childList，确保数据一致性
+    const mainComment = comments.value.find((c) => c.id === commentId);
+    if (mainComment) {
+      mainComment.childList = pagination.loadedReplies;
+      mainComment.childCount = pagination.total;
+
+      // 确保展开状态被正确设置
+      if (
+        mainComment.childList.length > 0 &&
+        !expandedReplies.value.has(commentId)
+      ) {
+        expandedReplies.value.set(commentId, true);
+      }
+    }
+  } catch (error) {
+    console.error('❌ 加载子回复失败:', error);
+    ElMessage.error('加载子回复失败，请重试');
+  } finally {
+    pagination.loading = false;
+  }
+};
+
+// 加载更多子回复
+const loadMoreChildReplies = async (commentId: string) => {
+  const pagination = getChildReplyPagination(commentId);
+
+  // 检查是否正在加载或已经没有更多数据
+  if (pagination.loading || !pagination.hasMore) {
+    return;
+  }
+
+  pagination.loading = true;
+
+  try {
+    // 构建请求参数 - 使用当前页码进行请求
+    const requestParams = {
+      current: pagination.currentPage, // 使用正确的当前页码
+      size: pagination.pageSize,
+      model: {
+        msgId: props.msgData?.msgId,
+        replyId: commentId,
+      },
+    };
+
+    const response = await pageReply(requestParams);
+    const apiReplies = response.records || [];
+
+    if (apiReplies.length > 0) {
+      // 获取主评论中已显示的子回复
+      const comment = comments.value.find((c) => c.id === commentId);
+      const existingChildList = comment?.childList || [];
+
+      // 去重：过滤掉已经在childList中显示的回复
+      const newReplies = apiReplies.filter(
+        (apiReply) =>
+          !existingChildList.some(
+            (existingReply) => existingReply.id === apiReply.id,
+          ),
+      );
+
+      if (newReplies.length > 0) {
+        // 将新的回复添加到已加载的回复列表中
+        pagination.loadedReplies.push(...newReplies);
+
+        // 同步更新主评论的childList，确保页面显示最新数据
+        const mainComment = comments.value.find((c) => c.id === commentId);
+        if (mainComment) {
+          mainComment.childList = [...pagination.loadedReplies];
+        }
+      }
+
+      // 成功请求数据后递增页码（无论是否有新数据）
+      pagination.currentPage++;
+
+      // 检查是否还有更多数据
+      // 基于API返回的总数和当前已加载的数据量来判断
+      pagination.hasMore = response.total > pagination.loadedReplies.length;
+    } else {
+      pagination.hasMore = false;
+    }
+  } catch (error) {
+    console.error('❌ 加载更多子回复失败:', error);
+    ElMessage.error('加载更多子回复失败，请重试');
+  } finally {
+    pagination.loading = false;
+  }
+};
+
+const isChildRepliesExpanded = (commentId: string) => {
+  // 如果已经手动设置过展开状态，使用设置的状态
+  if (expandedReplies.value.has(commentId)) {
+    const expanded = expandedReplies.value.get(commentId) || false;
+    return expanded;
+  }
+
+  // 默认情况：如果评论有子回复，则默认展开显示前两条
+  const comment = comments.value.find((c) => c.id === commentId);
+  const hasChildReplies =
+    comment && comment.childList && comment.childList.length > 0;
+
+  // 首次访问时，如果有子回复，设置默认展开状态
+  if (hasChildReplies && !expandedReplies.value.has(commentId)) {
+    expandedReplies.value.set(commentId, true);
+  }
+
+  return hasChildReplies;
+};
+
+// 智能刷新当前页评论数据，保持分页状态和展开状态
+const refreshCurrentPageComments = async (
+  preservedExpandedState?: Map<string, boolean>,
+) => {
+  try {
+    commentLoading.value = true;
+
+    // 重新获取当前页的数据
+    const result = await pageReply({
+      current: 1, // 重新获取第一页，确保包含最新回复
+      size: currentPage.value * pageSize, // 获取到当前页为止的所有数据
+      model: {
+        msgId: props.msgData?.msgId,
+        replyId: '0',
+      },
+    });
+
+    // 更新评论列表
+    comments.value = result.records;
+    total.value = result.total;
+    hasMore.value = comments.value.length < result.total;
+
+    // 恢复展开状态
+    if (preservedExpandedState) {
+      expandedReplies.value = preservedExpandedState;
+    }
+  } catch (error) {
+    console.error('刷新评论失败:', error);
+    ElMessage.error('刷新评论失败，请重试');
+  } finally {
+    commentLoading.value = false;
+  }
+};
+
+// 找到主评论ID的辅助函数
+const findMainCommentId = (targetComment: UdpSysReplyPageResponse): string => {
+  // 检查是否是主评论（在comments数组中）
+  const isMainComment = comments.value.some((c) => c.id === targetComment.id);
+  if (isMainComment) {
+    return targetComment.id; // 如果是主评论，返回自己的ID
+  }
+
+  // 如果不是主评论，在所有主评论的childList中查找
+  for (const mainComment of comments.value) {
+    if (
+      mainComment.childList &&
+      mainComment.childList.some((child) => child.id === targetComment.id)
+    ) {
+      return mainComment.id; // 返回主评论的ID
+    }
+  }
+
+  // 兜底：如果都找不到，返回目标评论的ID（理论上不应该发生）
+  console.warn('无法找到主评论ID，使用目标评论ID作为兜底', targetComment.id);
+  return targetComment.id;
+};
+
+// 验证回复输入
+const validateReplyInput = (comment: UdpSysReplyPageResponse): boolean => {
+  if (!replyContent.value.trim()) {
+    ElMessage.warning('请输入回复内容');
+    nextTick(() => {
+      const inputElement = document.getElementById(`reply-input-${comment.id}`);
+      if (inputElement) {
+        inputElement.focus();
+      }
+    });
+    return false;
+  }
+  if (replyContent.value.length > 500) {
+    ElMessage.warning('回复内容不能超过500字');
+    return false;
+  }
+  if (!props.msgData?.msgId) {
+    ElMessage.error('消息ID不能为空');
+    return false;
+  }
+  if (!comment.id) {
+    ElMessage.error('回复目标不能为空');
+    return false;
+  }
+  return true;
+};
+
+// 找到被回复评论所在的主评论ID
+const findTargetMainCommentId = (comment: UdpSysReplyPageResponse): string => {
+  const isReplyToMainComment = comments.value.some((c) => c.id === comment.id);
+  if (isReplyToMainComment) return comment.id;
+  const parentComment = comments.value.find(
+    (c) => c.childList && c.childList.some((child) => child.id === comment.id),
+  );
+  return parentComment?.id ?? comment.id;
+};
+
+// 刷新后同步子回复分页状态
+const syncChildReplyPagination = (targetMainCommentId: string) => {
+  const targetComment = comments.value.find((c) => c.id === targetMainCommentId);
+  if (!targetComment?.childList || targetComment.childList.length <= 0) return;
+  const pagination = getChildReplyPagination(targetMainCommentId);
+  pagination.loadedReplies = [...targetComment.childList];
+  pagination.total = targetComment.childCount || targetComment.childList.length;
+  pagination.hasMore = pagination.total > pagination.loadedReplies.length;
+};
+
+// 提取错误消息
+const extractErrorMessage = (error: any): string => {
+  let errorMessage = '发表回复失败，请重试';
+  if (error && typeof error === 'object') {
+    if ('message' in error && typeof error.message === 'string') {
+      errorMessage = error.message;
+    } else if ('msg' in error && typeof error.msg === 'string') {
+      errorMessage = error.msg;
+    } else if ('error' in error && typeof error.error === 'string') {
+      errorMessage = error.error;
+    }
+  }
+  if (errorMessage.includes('Network Error') || errorMessage.includes('timeout')) {
+    errorMessage = '网络连接失败，请检查网络后重试';
+  }
+  return errorMessage;
+};
+
+const submitReply = async (comment: UdpSysReplyPageResponse) => {
+  if (!validateReplyInput(comment)) return;
+
+  replySubmitting.value = true;
+
+  try {
+    const mainCommentId = findMainCommentId(comment);
+
+    const replyId = await createReply({
+      msgId: props.msgData?.msgId,
+      replyId: mainCommentId,
+      applyAccountId: comment.replyUserMsg?.id || comment.createUser,
+      replyObjectId: comment.id,
+      replyObjectContent: comment.replyContent,
+      replyContent: replyContent.value.trim(),
+    });
+
+    const newReply: UdpSysReplyPageResponse = {
+      id: String(replyId),
+      msgId: String(props.msgData?.msgId),
+      replyId: mainCommentId,
+      replyContent: replyContent.value.trim(),
+      createTime: new Date().toISOString(),
+      createUser: 'current-user-id',
+      childCount: 0,
+      childList: null,
+      replyUserMsg: {
+        id: 'current-user-id',
+        loginCode: 'current-user',
+        nickname: '当前用户',
+        userId: 'current-user-id',
+        tenantId: 'default-tenant',
+        departmentId: 'default-dept',
+        departmentName: '默认部门',
+        type: 1,
+        description: '当前用户',
+        sort: 1,
+        status: 1,
+        createUser: 'system',
+        createTime: new Date().toISOString(),
+        delFlag: 0,
+        isRealNameAuth: 0,
+        thirdAccount: '',
+        avatar:
+          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+      },
+    };
+
+    const currentExpandedReplies = new Map(expandedReplies.value);
+    const targetMainCommentId = findTargetMainCommentId(comment);
+    currentExpandedReplies.set(targetMainCommentId, true);
+
+    cancelReply();
+    childReplyPagination.value.delete(targetMainCommentId);
+
+    await refreshCurrentPageComments(currentExpandedReplies);
+    syncChildReplyPagination(targetMainCommentId);
+
+    ElMessage.success('回复发表成功');
+  } catch (error) {
+    console.error('发表回复失败:', error);
+    ElMessage.error(extractErrorMessage(error));
+  } finally {
+    replySubmitting.value = false;
+  }
+};
+
+// 监听消息数据变化
+watch(
+  () => props.msgData,
+  (newData) => {
+    if (newData) {
+      detailData.value = newData;
+
+      // 重置评论状态并加载初始评论
+      comments.value = [];
+      currentPage.value = 1;
+      total.value = 0;
+      hasMore.value = true;
+
+      // 加载初始评论
+      nextTick(() => {
+        loadMoreComments();
+      });
+    }
+  },
+  { immediate: true },
+);
+
+// 状态选项
+const statusOptions = [
+  { label: '草稿', value: 1, type: 'info' as const },
+  { label: '待发布', value: 2, type: 'warning' as const },
+  { label: '已发布', value: 3, type: 'primary' as const },
+  { label: '发布失败', value: 4, type: 'danger' as const },
+  { label: '审核中', value: 5, type: 'success' as const },
+];
+
+// 格式化时间
+const formatTime = (time: string) => {
+  if (!time) return '-';
+  return new Date(time).toLocaleString();
+};
+
+// 格式化相对时间
+const formatRelativeTime = (time: string) => {
+  if (!time) return '-';
+
+  const now = new Date();
+  const commentTime = new Date(time);
+  const diffMs = now.getTime() - commentTime.getTime();
+  const diffMinutes = Math.floor(diffMs / (1000 * 60));
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffMinutes < 1) return '刚刚';
+  if (diffMinutes < 60) return `${diffMinutes}分钟前`;
+  if (diffHours < 24) return `${diffHours}小时前`;
+  if (diffDays < 7) return `${diffDays}天前`;
+
+  return commentTime.toLocaleDateString();
+};
+
+// 判断是否应该显示"回复@用户名"标识
+const shouldShowReplyToUser = (
+  childReply: UdpSysReplyPageResponse,
+  parentComment: UdpSysReplyPageResponse,
+) => {
+  // 如果没有被回复用户昵称，不显示
+  if (!childReply.applyKickname) {
+    return false;
+  }
+
+  // 如果被回复用户ID与主评论用户ID相同，说明是直接回复主评论，不显示
+  if (childReply.applyAccountId === parentComment.replyUserMsg?.id) {
+    return false;
+  }
+
+  // 其他情况（回复子回复）显示
+  return true;
+};
+</script>
+
+<template>
+  <div v-loading="loading" class="msg-detail">
+    <template v-if="detailData">
+      <!-- 头部信息区域 -->
+      <div class="detail-header">
+        <h1 class="detail-title text-foreground">
+          {{ detailData.msgTitle || '暂无标题' }}
+        </h1>
+
+        <div class="detail-meta">
+          <div class="meta-row">
+            <span class="meta-label text-gray-500">接收时间：</span>
+            <span class="text-foreground">{{
+              detailData.readTime || '-'
+            }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 内容区域 -->
+      <div class="detail-content">
+        <div class="content-body">
+          <!-- 旧方式：RichEditor 只读模式 / v-html 直接渲染，图片无法带 token
+          <RichEditor
+            :model-value="
+              detailData.msgContent ||
+              detailData.content ||
+              detailData.msgText ||
+              detailData.text ||
+              '暂无内容'
+            "
+            height="300px"
+            :read-only="true"
+            :show-toolbar="false"
+          />
+          <div
+            v-html="
+              detailData.msgContent ||
+              detailData.content ||
+              detailData.msgText ||
+              detailData.text ||
+              '暂无内容'
+            "
+          /> -->
+          <div
+            v-html="authContentHtml || '暂无内容'"
+            style="
+              overflow-y: auto;
+              border: 1px solid #dcdfe6;
+              padding: 10px;
+              border-radius: 4px;
+            "
+          ></div>
+        </div>
+      </div>
+
+      <!-- 底部区域 - 根据状态动态显示 -->
+      <div class="detail-footer">
+        <!-- 评论区 - 已发布状态显示 -->
+        <div class="comments-section">
+          <h3 class="section-title text-foreground">评论区</h3>
+
+          <div class="comments-header">
+            <h4>评论 ({{ detailData.commentCount || 0 }})</h4>
+          </div>
+
+          <!-- 评论输入框 -->
+          <div class="comment-input">
+            <el-input
+              v-model="newCommentContent"
+              type="textarea"
+              :rows="3"
+              placeholder="写下你的评论..."
+              maxlength="500"
+              show-word-limit
+              resize="none"
+            />
+            <div class="comment-actions">
+              <el-button
+                type="primary"
+                @click="submitComment"
+                :disabled="!newCommentContent.trim()"
+              >
+                发表评论
+              </el-button>
+            </div>
+          </div>
+
+          <!-- 评论列表 -->
+          <div class="comments-list">
+            <div
+              v-if="comments.length === 0 && !commentLoading"
+              class="no-comments"
+            >
+              <el-empty description="暂无评论，快来发表第一条评论吧！" />
+            </div>
+
+            <div
+              v-else
+              v-infinite-scroll="loadMoreComments"
+              :infinite-scroll-disabled="infiniteScrollDisabled"
+              :infinite-scroll-distance="10"
+              class="infinite-list"
+            >
+              <div
+                v-for="comment in comments"
+                :key="comment.id"
+                class="comment-item"
+              >
+                <div class="comment-avatar">
+                  <el-avatar :src="comment.replyUserMsg?.avatar" :size="40">
+                    {{ (comment.replyUserMsg?.nickname || '匿名').charAt(0) }}
+                  </el-avatar>
+                </div>
+
+                <div class="comment-content">
+                  <div class="comment-header">
+                    <span class="author-name">{{
+                      comment.replyUserMsg?.nickname || '匿名用户'
+                    }}</span>
+                    <span class="comment-time">{{
+                      formatRelativeTime(comment.createTime)
+                    }}</span>
+                  </div>
+
+                  <div class="comment-text">
+                    {{ comment.replyContent }}
+                  </div>
+
+                  <div class="comment-actions">
+                    <!-- <el-button text size="small" @click="toggleLike(comment)">
+                      <el-icon><StarFilled /></el-icon>
+                      点赞
+                    </el-button> -->
+
+                    <el-button text size="small" @click="handleReply(comment)">
+                      <el-icon><ChatDotRound /></el-icon>
+                      回复
+                    </el-button>
+
+                    <!-- 展开/收起子回复按钮 -->
+                    <el-button
+                      v-if="comment.childList && comment.childList.length > 0"
+                      text
+                      size="small"
+                      @click="toggleChildReplies(comment.id)"
+                    >
+                      <el-icon>
+                        <ArrowDown v-if="!isChildRepliesExpanded(comment.id)" />
+                        <ArrowUp v-else />
+                      </el-icon>
+                      {{
+                        isChildRepliesExpanded(comment.id)
+                          ? '收起回复'
+                          : `查看回复 (${comment?.childCount ?? comment.childList.length})`
+                      }}
+                    </el-button>
+                  </div>
+
+                  <!-- 子回复列表 -->
+                  <div
+                    v-if="
+                      comment.childList &&
+                      comment.childList.length > 0 &&
+                      isChildRepliesExpanded(comment.id)
+                    "
+                    class="child-replies"
+                  >
+                    <div
+                      v-for="childReply in comment.childList"
+                      :key="childReply.id"
+                      class="child-reply-item"
+                    >
+                      <div class="child-reply-avatar">
+                        <el-avatar
+                          :src="childReply.replyUserMsg?.avatar"
+                          :size="32"
+                        >
+                          {{
+                            (
+                              childReply.replyUserMsg?.nickname || '匿名'
+                            ).charAt(0)
+                          }}
+                        </el-avatar>
+                      </div>
+
+                      <div class="child-reply-content">
+                        <div class="child-reply-header">
+                          <span class="child-author-name">{{
+                            childReply.replyUserMsg?.nickname || '匿名用户'
+                          }}</span>
+                          <!-- 显示回复对象信息 - 只在楼层内互相回复时显示 -->
+                          <span
+                            v-if="shouldShowReplyToUser(childReply, comment)"
+                            class="reply-to-indicator"
+                          >
+                            回复 @{{ childReply.applyKickname }}
+                          </span>
+                          <span class="child-reply-time">{{
+                            formatRelativeTime(childReply.createTime)
+                          }}</span>
+                        </div>
+
+                        <div class="child-reply-text">
+                          {{ childReply.replyContent }}
+                        </div>
+
+                        <div class="child-reply-actions">
+                          <!-- <el-button
+                            text
+                            size="small"
+                            @click="toggleLike(childReply)"
+                          >
+                            <el-icon><StarFilled /></el-icon>
+                            点赞
+                          </el-button> -->
+
+                          <el-button
+                            text
+                            size="small"
+                            @click="handleReply(childReply)"
+                          >
+                            <el-icon><ChatDotRound /></el-icon>
+                            回复
+                          </el-button>
+                        </div>
+
+                        <!-- 子回复的回复输入框 -->
+                        <div
+                          v-if="replyingTo === childReply.id"
+                          class="reply-form"
+                        >
+                          <div class="reply-input-wrapper">
+                            <el-input
+                              :id="`reply-input-${childReply.id}`"
+                              v-model="replyContent"
+                              type="textarea"
+                              :placeholder="`回复 ${childReply.replyUserMsg?.nickname || '匿名用户'}`"
+                              :rows="3"
+                              maxlength="500"
+                              show-word-limit
+                              resize="none"
+                            />
+                          </div>
+                          <div class="reply-actions">
+                            <el-button size="small" @click="cancelReply">
+                              取消
+                            </el-button>
+                            <el-button
+                              type="primary"
+                              size="small"
+                              :loading="replySubmitting"
+                              @click="submitReply(childReply)"
+                            >
+                              {{ replySubmitting ? '发送中...' : '发送' }}
+                            </el-button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 子回复加载更多按钮 -->
+                    <div
+                      v-if="
+                        getChildReplyPagination(comment.id).hasMore &&
+                        getChildReplyPagination(comment.id).loadedReplies
+                          .length > 0
+                      "
+                      class="child-reply-load-more"
+                    >
+                      <el-button
+                        text
+                        size="small"
+                        :loading="getChildReplyPagination(comment.id).loading"
+                        @click="loadMoreChildReplies(comment.id)"
+                      >
+                        <el-icon
+                          v-if="!getChildReplyPagination(comment.id).loading"
+                        >
+                          <ArrowDown />
+                        </el-icon>
+                        {{
+                          getChildReplyPagination(comment.id).loading
+                            ? '加载中...'
+                            : `加载更多回复 (${getChildReplyPagination(comment.id).total - getChildReplyPagination(comment.id).loadedReplies.length})`
+                        }}
+                      </el-button>
+                    </div>
+                  </div>
+
+                  <!-- 回复输入框 -->
+                  <div v-if="replyingTo === comment.id" class="reply-form">
+                    <div class="reply-input-wrapper">
+                      <el-input
+                        :id="`reply-input-${comment.id}`"
+                        v-model="replyContent"
+                        type="textarea"
+                        :placeholder="`回复 ${comment.replyUserMsg?.nickname || '匿名用户'}`"
+                        :rows="3"
+                        maxlength="500"
+                        show-word-limit
+                        resize="none"
+                      />
+                    </div>
+                    <div class="reply-actions">
+                      <el-button size="small" @click="cancelReply">
+                        取消
+                      </el-button>
+                      <el-button
+                        type="primary"
+                        size="small"
+                        :loading="replySubmitting"
+                        @click="submitReply(comment)"
+                      >
+                        {{ replySubmitting ? '发送中...' : '发送' }}
+                      </el-button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 加载状态 -->
+              <div v-if="commentLoading" class="loading-more">
+                <el-icon class="is-loading"><Loading /></el-icon>
+                <span>加载中...</span>
+              </div>
+
+              <!-- 没有更多数据 -->
+              <div v-if="noMore && comments.length > 0" class="no-more">
+                <el-divider>没有更多评论了</el-divider>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- 加载状态或无数据 -->
+    <div v-else class="no-data">
+      <el-empty description="暂无数据" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.msg-detail {
+  padding: 24px;
+  min-height: 500px;
+
+  .detail-header {
+    border-bottom: 1px solid #e5e7eb;
+    padding-bottom: 24px;
+    margin-bottom: 24px;
+
+    .detail-title {
+      font-size: 24px;
+      font-weight: 600;
+      margin: 0 0 16px 0;
+      line-height: 1.4;
+    }
+
+    .detail-meta {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      margin-bottom: 16px;
+
+      .meta-row {
+        display: flex;
+        align-items: center;
+
+        .meta-label {
+          font-weight: 500;
+          min-width: 80px;
+        }
+      }
+    }
+
+    .detail-stats {
+      display: flex;
+      gap: 24px;
+      padding: 12px 16px;
+      background-color: #f9fafb;
+      border-radius: 8px;
+
+      .stat-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .stat-label {
+          font-size: 14px;
+          color: #6b7280;
+        }
+
+        .stat-value {
+          font-weight: 600;
+          color: #1f2937;
+        }
+      }
+    }
+  }
+
+  .detail-content {
+    margin-bottom: 32px;
+
+    .content-body {
+      font-size: 16px;
+      line-height: 1.6;
+      color: #1f2937;
+
+      // 富文本内容样式
+      :deep(p) {
+        margin-bottom: 16px;
+      }
+
+      :deep(img) {
+        max-width: 100%;
+        height: auto;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .detail-footer {
+    border-top: 1px solid #e5e7eb;
+    padding-top: 24px;
+
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0 0 16px 0;
+    }
+
+    .approval-section {
+      .approval-timeline {
+        max-width: 400px;
+      }
+    }
+
+    /* 评论区样式 */
+    .comments-section {
+      margin-top: 24px;
+
+      .comments-header {
+        margin-bottom: 16px;
+
+        h4 {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+        }
+      }
+
+      .comment-input {
+        margin-bottom: 24px;
+        padding: 16px;
+        background: var(--el-bg-color-page);
+        border-radius: 8px;
+        border: 1px solid var(--el-border-color-light);
+
+        .comment-actions {
+          display: flex;
+          justify-content: flex-end;
+          margin-top: 12px;
+        }
+      }
+
+      .comments-list {
+        .no-comments {
+          padding: 40px 0;
+          text-align: center;
+        }
+
+        .infinite-list {
+          max-height: 600px;
+          overflow-y: auto;
+        }
+
+        .comment-item {
+          display: flex;
+          padding: 16px 0;
+          border-bottom: 1px solid var(--el-border-color-lighter);
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .comment-avatar {
+            margin-right: 12px;
+            flex-shrink: 0;
+          }
+
+          .comment-content {
+            flex: 1;
+            min-width: 0;
+
+            .comment-header {
+              display: flex;
+              align-items: center;
+              margin-bottom: 8px;
+
+              .author-name {
+                font-weight: 600;
+                color: var(--el-text-color-primary);
+                margin-right: 12px;
+              }
+
+              .comment-time {
+                font-size: 12px;
+                color: var(--el-text-color-secondary);
+              }
+            }
+
+            .comment-text {
+              color: var(--el-text-color-regular);
+              line-height: 1.6;
+              margin-bottom: 12px;
+              word-break: break-word;
+            }
+
+            .comment-actions {
+              display: flex;
+              gap: 16px;
+
+              .el-button {
+                padding: 4px 8px;
+                color: var(--el-text-color-secondary);
+
+                &:hover {
+                  color: var(--el-color-primary);
+                }
+
+                &.is-liked {
+                  color: var(--el-color-primary);
+                }
+
+                .el-icon {
+                  margin-right: 4px;
+                }
+              }
+            }
+
+            .reply-form {
+              margin-top: 12px;
+              padding: 12px;
+              background-color: var(--el-fill-color-lighter);
+              border-radius: 6px;
+              border: 1px solid var(--el-border-color-light);
+
+              .reply-input-wrapper {
+                margin-bottom: 12px;
+
+                .el-textarea {
+                  .el-textarea__inner {
+                    background-color: var(--el-bg-color);
+                    border: 1px solid var(--el-border-color);
+                    border-radius: 4px;
+                    resize: none;
+
+                    &:focus {
+                      border-color: var(--el-color-primary);
+                      box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
+                    }
+                  }
+                }
+              }
+
+              .reply-actions {
+                display: flex;
+                justify-content: flex-end;
+                gap: 8px;
+
+                .el-button {
+                  padding: 6px 16px;
+                  font-size: 12px;
+                }
+              }
+            }
+
+            /* 子回复样式 */
+            .child-replies {
+              margin-top: 16px;
+              padding-left: 20px;
+              border-left: 2px solid var(--el-border-color-lighter);
+              background-color: var(--el-fill-color-extra-light);
+              border-radius: 0 6px 6px 0;
+
+              .child-reply-item {
+                display: flex;
+                padding: 12px 16px;
+                border-bottom: 1px solid var(--el-border-color-extra-light);
+
+                &:last-child {
+                  border-bottom: none;
+                }
+
+                .child-reply-avatar {
+                  margin-right: 10px;
+                  flex-shrink: 0;
+                }
+
+                .child-reply-content {
+                  flex: 1;
+                  min-width: 0;
+
+                  .child-reply-header {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 6px;
+
+                    .child-author-name {
+                      font-weight: 500;
+                      font-size: 13px;
+                      color: var(--el-text-color-primary);
+                      margin-right: 10px;
+                    }
+
+                    .reply-to-indicator {
+                      font-size: 12px;
+                      color: var(--el-color-primary);
+                      margin-right: 8px;
+                      background-color: var(--el-color-primary-light-9);
+                      padding: 2px 6px;
+                      border-radius: 10px;
+                      font-weight: 400;
+                    }
+
+                    .child-reply-time {
+                      font-size: 11px;
+                      color: var(--el-text-color-secondary);
+                    }
+                  }
+
+                  .child-reply-text {
+                    color: var(--el-text-color-regular);
+                    line-height: 1.5;
+                    margin-bottom: 8px;
+                    word-break: break-word;
+                    font-size: 14px;
+                  }
+
+                  .child-reply-actions {
+                    display: flex;
+                    gap: 12px;
+
+                    .el-button {
+                      padding: 2px 6px;
+                      font-size: 12px;
+                      color: var(--el-text-color-secondary);
+
+                      &:hover {
+                        color: var(--el-color-primary);
+                      }
+
+                      &.is-liked {
+                        color: var(--el-color-primary);
+                      }
+
+                      .el-icon {
+                        margin-right: 3px;
+                        font-size: 12px;
+                      }
+                    }
+                  }
+
+                  .reply-form {
+                    margin-top: 8px;
+                    padding: 8px;
+                    background-color: var(--el-bg-color);
+                    border: 1px solid var(--el-border-color-light);
+                    border-radius: 4px;
+
+                    .reply-input-wrapper {
+                      margin-bottom: 8px;
+
+                      .el-textarea {
+                        .el-textarea__inner {
+                          font-size: 13px;
+                          min-height: 60px;
+                        }
+                      }
+                    }
+
+                    .reply-actions {
+                      .el-button {
+                        padding: 4px 12px;
+                        font-size: 11px;
+                      }
+                    }
+                  }
+                }
+
+                .child-reply-load-more {
+                  margin-top: 12px;
+                  text-align: center;
+
+                  .el-button {
+                    color: var(--el-text-color-secondary);
+                    font-size: 12px;
+
+                    &:hover {
+                      color: var(--el-color-primary);
+                    }
+
+                    .el-icon {
+                      margin-right: 4px;
+                      font-size: 12px;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .loading-more {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 20px;
+          color: var(--el-text-color-secondary);
+
+          .el-icon {
+            margin-right: 8px;
+          }
+        }
+
+        .no-more {
+          padding: 20px 0;
+
+          .el-divider {
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .no-data {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
+}
+</style>