From b5f6c045061b380223cde922c298b30e1a18dc85 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Wed, 15 Oct 2025 21:00:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=B8=BA=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=A9=BA=E7=8A=B6=E6=80=81=E5=A4=84=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加智能空状态提示信息
- 新增getEmptyTitle、getEmptyDescription等辅助函数
- 升级CoiEmpty组件配置，支持重置搜索和刷新操作
- 搜索无结果时显示重置搜索按钮
- 完全无数据时显示刷新数据按钮
- 统一空状态交互体验
---
 src/views/heritage/comments/index.vue | 1062 +++++++++++++++++++++++++
 1 file changed, 1062 insertions(+)
 create mode 100644 src/views/heritage/comments/index.vue

diff --git a/src/views/heritage/comments/index.vue b/src/views/heritage/comments/index.vue
new file mode 100644
index 0000000..afab024
--- /dev/null
+++ b/src/views/heritage/comments/index.vue
@@ -0,0 +1,1062 @@
+<template>
+  <div class="comment-management p-1 bg-gray-50 h-screen flex flex-col">
+    <!-- 单一白色卡片容器 -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-100 flex-1 flex flex-col overflow-hidden">
+      <!-- 搜索区域 -->
+      <div class="px-4 py-2 border-b border-gray-100">
+        <n-form
+          ref="searchFormRef"
+          :model="searchForm"
+          label-placement="left"
+          label-width="auto"
+          class="search-form"
+        >
+          <n-grid :cols="6" :x-gap="8" :y-gap="4">
+            <n-grid-item>
+              <n-form-item label="评论内容" path="content">
+                <n-input
+                  v-model:value="searchForm.content"
+                  placeholder="请输入评论内容"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="目标类型" path="targetType">
+                <n-select
+                  v-model:value="searchForm.targetType"
+                  placeholder="请选择目标类型"
+                  clearable
+                  :options="targetTypeOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="审核状态" path="status">
+                <n-select
+                  v-model:value="searchForm.status"
+                  placeholder="请选择审核状态"
+                  clearable
+                  :options="statusOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="用户关键词" path="userKeyword">
+                <n-input
+                  v-model:value="searchForm.userKeyword"
+                  placeholder="请输入用户名或昵称"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <!-- 按钮区域 -->
+            <n-grid-item>
+              <n-form-item label="" path="">
+                <NSpace>
+                  <NButton type="primary" @click="handleSearch">
+                    <template #icon>
+                      <NIcon><icon-park-outline:search /></NIcon>
+                    </template>
+                    搜索
+                  </NButton>
+                  <NButton @click="handleReset">
+                    <template #icon>
+                      <NIcon><icon-park-outline:refresh /></NIcon>
+                    </template>
+                    重置
+                  </NButton>
+                </NSpace>
+              </n-form-item>
+            </n-grid-item>
+          </n-grid>
+        </n-form>
+      </div>
+
+      <!-- 操作按钮区域 -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+        <div class="flex items-center gap-4">
+          <NButton
+            type="success"
+            :disabled="selectedRowKeys.length === 0"
+            @click="handleBatchApprove"
+          >
+            <template #icon>
+              <NIcon><icon-park-outline:check /></NIcon>
+            </template>
+            批量通过
+          </NButton>
+          <NButton
+            type="warning"
+            :disabled="selectedRowKeys.length === 0"
+            @click="handleBatchReject"
+          >
+            <template #icon>
+              <NIcon><icon-park-outline:close /></NIcon>
+            </template>
+            批量拒绝
+          </NButton>
+          <NButton
+            type="error"
+            :disabled="selectedRowKeys.length === 0"
+            @click="handleBatchDelete"
+          >
+            <template #icon>
+              <NIcon><icon-park-outline:delete /></NIcon>
+            </template>
+            批量删除
+          </NButton>
+        </div>
+        <div class="flex items-center gap-4 text-sm text-gray-500">
+          <span>共 {{ pagination.itemCount }} 条</span>
+          <span v-if="pendingCount > 0" class="text-orange-500 font-medium">待审核 {{ pendingCount }} 条</span>
+          <NButton text @click="loadTableData">
+            <template #icon>
+              <NIcon><IconParkOutlineRefresh /></NIcon>
+            </template>
+          </NButton>
+        </div>
+      </div>
+
+      <!-- 表格包裹器 -->
+      <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <n-data-table
+          v-if="tableData.length > 0 || loading"
+          :columns="columns"
+          :data="tableData"
+          :loading="loading"
+          :row-key="(row: CommentAdminVo) => row.id"
+          :checked-row-keys="selectedRowKeys"
+          :bordered="false"
+          :single-line="false"
+          class="custom-table"
+          @update:checked-row-keys="handleRowSelectionChange"
+        />
+        <CoiEmpty
+          v-else
+          :type="getEmptyType()"
+          :title="getEmptyTitle()"
+          :description="getEmptyDescription()"
+          :show-action="true"
+          :action-text="getEmptyActionText()"
+          size="medium"
+          @action="handleEmptyAction"
+        >
+          <template #action>
+            <NButton
+              type="primary"
+              size="medium"
+              round
+              @click="handleEmptyAction"
+            >
+              <template #icon>
+                <NIcon>
+                  <IconParkOutlineRefresh v-if="hasSearchConditions()" />
+                  <IconParkOutlineRefresh v-else />
+                </NIcon>
+              </template>
+              {{ getEmptyActionText() }}
+            </NButton>
+          </template>
+        </CoiEmpty>
+      </div>
+
+      <!-- 分页区域 -->
+      <div v-if="tableData.length > 0" class="border-t border-gray-100">
+        <CoiPagination
+          v-model:page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :item-count="pagination.itemCount"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 审核弹框 -->
+    <CoiDialog
+      ref="auditDialogRef"
+      title="审核评论"
+      :width="600"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @coi-confirm="handleAuditSubmit"
+      @coi-cancel="handleAuditCancel"
+    >
+      <template #content>
+        <div class="px-3 py-2">
+          <n-form
+            ref="auditFormRef"
+            :model="auditForm"
+            :rules="auditRules"
+            label-placement="left"
+            label-width="90px"
+            require-mark-placement="right-hanging"
+            class="compact-form"
+          >
+            <n-form-item label="审核状态" path="status" class="mb-2">
+              <NRadioGroup v-model:value="auditForm.status">
+                <NSpace>
+                  <n-radio :value="1">
+                    通过
+                  </n-radio>
+                  <n-radio :value="2">
+                    拒绝
+                  </n-radio>
+                </NSpace>
+              </NRadioGroup>
+            </n-form-item>
+            <n-form-item label="审核备注" path="remark" class="mb-2">
+              <n-input
+                v-model:value="auditForm.remark"
+                type="textarea"
+                placeholder="请输入审核备注（选填）"
+                :rows="3"
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </CoiDialog>
+
+    <!-- 详情弹框 -->
+    <CoiDialog
+      ref="detailDialogRef"
+      title="评论详情"
+      :width="700"
+      height="auto"
+      :show-confirm="false"
+      cancel-text="关闭"
+      @coi-cancel="handleDetailCancel"
+    >
+      <template #content>
+        <div v-if="detailLoading" class="px-3 py-8 flex items-center justify-center">
+          <NSpin size="medium" />
+        </div>
+        <div v-else-if="commentDetail" class="px-4 py-3">
+          <n-descriptions :column="2" bordered size="small">
+            <n-descriptions-item label="用户昵称">
+              {{ commentDetail.nickname || '-' }}
+            </n-descriptions-item>
+            <n-descriptions-item label="用户名">
+              {{ commentDetail.username || '-' }}
+            </n-descriptions-item>
+            <n-descriptions-item label="目标类型">
+              <NTag :type="getTargetTypeColor(commentDetail.targetType)" size="small">
+                {{ getTargetTypeLabel(commentDetail.targetType) }}
+              </NTag>
+            </n-descriptions-item>
+            <n-descriptions-item label="目标标题">
+              {{ commentDetail.targetTitle || '-' }}
+            </n-descriptions-item>
+            <n-descriptions-item v-if="commentDetail.rating" label="评分">
+              <span class="text-yellow-500 text-lg">
+                {{ '★'.repeat(commentDetail.rating) }}{{ '☆'.repeat(5 - commentDetail.rating) }}
+              </span>
+            </n-descriptions-item>
+            <n-descriptions-item label="点赞数">
+              {{ commentDetail.likeCount || 0 }}
+            </n-descriptions-item>
+            <n-descriptions-item label="审核状态">
+              <NTag :type="getStatusColor(commentDetail.status)" size="small">
+                {{ getStatusText(commentDetail.status) }}
+              </NTag>
+            </n-descriptions-item>
+            <n-descriptions-item label="创建时间">
+              {{ commentDetail.createTime || '-' }}
+            </n-descriptions-item>
+            <n-descriptions-item label="评论内容" :span="2">
+              <div class="whitespace-pre-wrap text-gray-700 leading-relaxed">
+                {{ commentDetail.content || '-' }}
+              </div>
+            </n-descriptions-item>
+          </n-descriptions>
+        </div>
+        <div v-else class="px-3 py-8 text-center text-gray-400">
+          暂无数据
+        </div>
+      </template>
+    </CoiDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, nextTick, onMounted, ref } from 'vue'
+import type { DataTableColumns, FormInst, FormRules } from 'naive-ui'
+import { NButton, NIcon, NPopconfirm, NRadioGroup, NSpace, NSpin, NTag } from 'naive-ui'
+import { coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+import CoiDialog from '@/components/common/CoiDialog.vue'
+import CoiPagination from '@/components/common/CoiPagination.vue'
+import CoiEmpty from '@/components/common/CoiEmpty.vue'
+import type {
+  CommentAdminDetailVo,
+  CommentAdminSearchForm,
+  CommentAdminVo,
+} from '@/service/api/heritage/comments'
+import {
+  auditComment,
+  batchAuditComments,
+  batchDeleteComments,
+  deleteComment,
+  getCommentAdminDetail,
+  getCommentAdminList,
+  getPendingCommentCount,
+} from '@/service/api/heritage/comments'
+// render函数中使用的图标组件需要显式导入
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlineRefresh from '~icons/icon-park-outline/refresh'
+import IconParkOutlineCheck from '~icons/icon-park-outline/check'
+import IconParkOutlinePreviewOpen from '~icons/icon-park-outline/preview-open'
+
+// 引用
+const searchFormRef = ref<FormInst>()
+const auditFormRef = ref<FormInst>()
+const auditDialogRef = ref()
+const detailDialogRef = ref()
+
+// 数据状态
+const loading = ref(false)
+const tableData = ref<CommentAdminVo[]>([])
+const selectedRowKeys = ref<string[]>([])
+const pendingCount = ref(0)
+const detailLoading = ref(false)
+const commentDetail = ref<CommentAdminDetailVo | null>(null)
+
+// 搜索表单
+const searchForm = ref<CommentAdminSearchForm>({
+  content: '',
+  targetType: '',
+  status: null,
+  userKeyword: '',
+})
+
+// 分页配置
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+})
+
+// 审核表单
+const auditForm = ref({
+  id: '',
+  status: 1,
+  remark: '',
+})
+
+// 下拉选项
+const targetTypeOptions = [
+  { label: '非遗项目', value: 'heritage' },
+  { label: '传承人', value: 'inheritor' },
+  { label: '新闻资讯', value: 'news' },
+  { label: '活动', value: 'event' },
+]
+
+const statusOptions = [
+  { label: '待审核', value: 0 },
+  { label: '已通过', value: 1 },
+  { label: '已拒绝', value: 2 },
+]
+
+// 审核表单验证规则
+const auditRules: FormRules = {
+  status: [{ required: true, message: '请选择审核状态', trigger: 'change', type: 'number' }],
+}
+
+// 表格列配置
+const columns: DataTableColumns<CommentAdminVo> = [
+  { type: 'selection' },
+  {
+    title: '序号',
+    key: 'index',
+    width: 60,
+    align: 'center',
+    render: (_row, index) => {
+      return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
+    },
+  },
+  {
+    title: '用户信息',
+    key: 'userInfo',
+    width: 200,
+    render: (row) => {
+      return h('div', { class: 'flex items-center gap-2' }, [
+        row.avatar
+          ? h('img', {
+              src: row.avatar,
+              class: 'w-8 h-8 rounded-full object-cover',
+            })
+          : h('div', { class: 'w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs' }, row.nickname?.[0] || '?'),
+        h('div', { class: 'flex flex-col' }, [
+          h('span', { class: 'text-sm font-medium' }, row.nickname || row.username),
+          h('span', { class: 'text-xs text-gray-500' }, row.username),
+        ]),
+      ])
+    },
+  },
+  {
+    title: '目标类型',
+    key: 'targetType',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      const typeMap: Record<string, { label: string, type: 'primary' | 'success' | 'warning' | 'info' }> = {
+        heritage: { label: '非遗项目', type: 'primary' },
+        inheritor: { label: '传承人', type: 'success' },
+        news: { label: '新闻资讯', type: 'warning' },
+        event: { label: '活动', type: 'info' },
+      }
+      const config = typeMap[row.targetType] || { label: row.targetType, type: 'primary' as const }
+      return h(NTag, {
+        type: config.type,
+        size: 'small',
+      }, { default: () => config.label })
+    },
+  },
+  {
+    title: '目标标题',
+    key: 'targetTitle',
+    width: 200,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '评论内容',
+    key: 'content',
+    width: 300,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '评分',
+    key: 'rating',
+    width: 80,
+    align: 'center',
+    render: (row) => {
+      if (row.rating) {
+        return h('span', { class: 'text-yellow-500' }, `${'★'.repeat(row.rating)}${'☆'.repeat(5 - row.rating)}`)
+      }
+      return h('span', { class: 'text-gray-400' }, '-')
+    },
+  },
+  {
+    title: '点赞数',
+    key: 'likeCount',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '审核状态',
+    key: 'status',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      const statusMap = {
+        0: { type: 'warning' as const, text: '待审核' },
+        1: { type: 'success' as const, text: '已通过' },
+        2: { type: 'error' as const, text: '已拒绝' },
+      }
+      const config = statusMap[row.status as keyof typeof statusMap] || { type: 'default' as const, text: '未知' }
+      return h(NTag, {
+        type: config.type,
+        size: 'small',
+      }, { default: () => config.text })
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 280,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => {
+      const buttons = []
+
+      // 审核按钮（仅待审核状态显示）
+      if (row.status === 0) {
+        buttons.push(h(NButton, {
+          type: 'primary',
+          size: 'small',
+          class: 'action-btn-primary',
+          onClick: () => handleAudit(row),
+        }, {
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+            default: () => h(IconParkOutlineCheck),
+          }),
+          default: () => '审核',
+        }))
+      }
+
+      // 查看按钮
+      buttons.push(h(NButton, {
+        type: 'info',
+        secondary: true,
+        size: 'small',
+        class: 'action-btn-secondary action-btn-info',
+        onClick: () => handleView(row),
+      }, {
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(IconParkOutlinePreviewOpen),
+        }),
+        default: () => '查看',
+      }))
+
+      // 删除按钮
+      buttons.push(h(NPopconfirm, {
+        onPositiveClick: () => handleDelete(row.id),
+      }, {
+        trigger: () => h(NButton, {
+          type: 'error',
+          secondary: true,
+          size: 'small',
+          class: 'action-btn-secondary action-btn-danger',
+        }, {
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+            default: () => h(IconParkOutlineDelete),
+          }),
+          default: () => '删除',
+        }),
+        default: () => '确定删除此评论吗？删除后无法恢复，且会删除所有回复！',
+      }))
+
+      return h('div', { class: 'flex items-center justify-center gap-2' }, buttons)
+    },
+  },
+]
+
+// 加载表格数据
+async function loadTableData() {
+  try {
+    loading.value = true
+
+    // 过滤掉空值和null值，只保留有效的搜索条件
+    const filteredParams = Object.entries(searchForm.value).reduce((acc, [key, value]) => {
+      if (value !== null && value !== undefined && value !== '') {
+        acc[key] = value
+      }
+      return acc
+    }, {} as Record<string, any>)
+
+    const params = {
+      pageNum: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+      ...filteredParams,
+    }
+
+    const { data, isSuccess } = await getCommentAdminList(params)
+
+    if (isSuccess && data) {
+      tableData.value = data.records || []
+      pagination.value.itemCount = data.total || 0
+    }
+    else {
+      coiMsgError('加载数据失败')
+    }
+  }
+  catch {
+    coiMsgError('加载数据失败，请检查网络连接')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 加载待审核数量
+async function loadPendingCount() {
+  try {
+    const { data, isSuccess } = await getPendingCommentCount()
+    if (isSuccess && data !== undefined) {
+      pendingCount.value = data
+    }
+  }
+  catch {
+    console.error('加载待审核数量失败')
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pagination.value.page = 1
+  loadTableData()
+}
+
+// 重置
+async function handleReset() {
+  // 重置搜索表单的所有字段 - 使用null和空字符串确保组件正确重置
+  searchForm.value = {
+    content: '',
+    targetType: '',
+    status: null,
+    userKeyword: '',
+  }
+
+  // 使用 nextTick 确保 DOM 更新后再重置表单状态
+  await nextTick()
+
+  // 重置表单验证状态
+  searchFormRef.value?.restoreValidation()
+
+  // 重置分页到第一页并重新加载数据
+  pagination.value.page = 1
+  loadTableData()
+}
+
+// 审核
+function handleAudit(row: CommentAdminVo) {
+  auditForm.value = {
+    id: row.id,
+    status: 1,
+    remark: '',
+  }
+  auditDialogRef.value?.coiOpen()
+}
+
+// 查看详情
+async function handleView(row: CommentAdminVo) {
+  try {
+    detailLoading.value = true
+    commentDetail.value = null
+    detailDialogRef.value?.coiOpen()
+
+    const { data, isSuccess } = await getCommentAdminDetail(row.id)
+
+    if (isSuccess && data) {
+      commentDetail.value = data
+    }
+    else {
+      coiMsgError('加载详情失败')
+    }
+  }
+  catch {
+    coiMsgError('加载详情失败，请检查网络连接')
+  }
+  finally {
+    detailLoading.value = false
+  }
+}
+
+// 关闭详情弹框
+function handleDetailCancel() {
+  detailDialogRef.value?.coiClose()
+  commentDetail.value = null
+}
+
+// 获取目标类型标签
+function getTargetTypeLabel(type: string): string {
+  const typeMap: Record<string, string> = {
+    heritage: '非遗项目',
+    inheritor: '传承人',
+    news: '新闻资讯',
+    event: '活动',
+  }
+  return typeMap[type] || type
+}
+
+// 获取目标类型颜色
+function getTargetTypeColor(type: string): 'primary' | 'success' | 'warning' | 'info' {
+  const colorMap: Record<string, 'primary' | 'success' | 'warning' | 'info'> = {
+    heritage: 'primary',
+    inheritor: 'success',
+    news: 'warning',
+    event: 'info',
+  }
+  return colorMap[type] || 'primary'
+}
+
+// 获取状态文本
+function getStatusText(status: number): string {
+  const statusMap: Record<number, string> = {
+    0: '待审核',
+    1: '已通过',
+    2: '已拒绝',
+  }
+  return statusMap[status] || '未知'
+}
+
+// 获取状态颜色
+function getStatusColor(status: number): 'warning' | 'success' | 'error' | 'default' {
+  const colorMap: Record<number, 'warning' | 'success' | 'error'> = {
+    0: 'warning',
+    1: 'success',
+    2: 'error',
+  }
+  return colorMap[status] || 'default'
+}
+
+// 删除
+async function handleDelete(id: string) {
+  try {
+    const { isSuccess } = await deleteComment(id)
+
+    if (isSuccess) {
+      coiMsgSuccess('删除成功')
+      await loadTableData()
+      await loadPendingCount()
+    }
+    else {
+      coiMsgError('删除失败，请稍后重试')
+    }
+  }
+  catch {
+    coiMsgError('删除失败，请检查网络连接')
+  }
+}
+
+// 批量通过
+async function handleBatchApprove() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要审核的评论')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定要批量通过选中的 ${selectedRowKeys.value.length} 条评论吗？`, '批量审核确认')
+
+    const { isSuccess } = await batchAuditComments(selectedRowKeys.value, 1)
+
+    if (isSuccess) {
+      coiMsgSuccess('批量审核成功')
+      selectedRowKeys.value = []
+      await loadTableData()
+      await loadPendingCount()
+    }
+    else {
+      coiMsgError('批量审核失败，请稍后重试')
+    }
+  }
+  catch {
+    // 用户取消操作
+  }
+}
+
+// 批量拒绝
+async function handleBatchReject() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要审核的评论')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定要批量拒绝选中的 ${selectedRowKeys.value.length} 条评论吗？`, '批量审核确认')
+
+    const { isSuccess } = await batchAuditComments(selectedRowKeys.value, 2)
+
+    if (isSuccess) {
+      coiMsgSuccess('批量审核成功')
+      selectedRowKeys.value = []
+      await loadTableData()
+      await loadPendingCount()
+    }
+    else {
+      coiMsgError('批量审核失败，请稍后重试')
+    }
+  }
+  catch {
+    // 用户取消操作
+  }
+}
+
+// 批量删除
+async function handleBatchDelete() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要删除的记录')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定要删除选中的 ${selectedRowKeys.value.length} 条记录吗？删除后无法恢复！`, '批量删除确认')
+
+    const { isSuccess } = await batchDeleteComments(selectedRowKeys.value)
+
+    if (isSuccess) {
+      coiMsgSuccess('批量删除成功')
+      selectedRowKeys.value = []
+      await loadTableData()
+      await loadPendingCount()
+    }
+    else {
+      coiMsgError('批量删除失败，请稍后重试')
+    }
+  }
+  catch {
+    // 用户取消操作
+  }
+}
+
+// 行选择变化
+function handleRowSelectionChange(rowKeys: string[]) {
+  selectedRowKeys.value = rowKeys
+}
+
+// 提交审核
+async function handleAuditSubmit() {
+  if (!auditFormRef.value)
+    return
+
+  try {
+    await auditFormRef.value.validate()
+  }
+  catch {
+    coiMsgWarning('验证失败，请检查填写内容')
+    return
+  }
+
+  try {
+    const { isSuccess } = await auditComment(auditForm.value)
+
+    if (isSuccess) {
+      coiMsgSuccess('审核成功')
+      auditDialogRef.value?.coiClose()
+      await loadTableData()
+      await loadPendingCount()
+    }
+    else {
+      coiMsgError('审核失败，请稍后重试')
+    }
+  }
+  catch {
+    coiMsgError('审核失败，请检查网络连接')
+  }
+}
+
+// 取消审核
+function handleAuditCancel() {
+  auditDialogRef.value?.coiClose()
+}
+
+// 分页处理函数
+function handlePageChange(page: number) {
+  pagination.value.page = page
+  loadTableData()
+}
+
+function handlePageSizeChange(pageSize: number) {
+  pagination.value.pageSize = pageSize
+  pagination.value.page = 1
+  loadTableData()
+}
+
+// 判断空状态类型
+function getEmptyType() {
+  if (hasSearchConditions()) {
+    return 'search'
+  }
+  return 'default'
+}
+
+// 判断是否有搜索条件
+function hasSearchConditions() {
+  return !!(
+    searchForm.value.content
+    || searchForm.value.targetType
+    || searchForm.value.status !== null
+    || searchForm.value.userKeyword
+  )
+}
+
+// 获取空状态标题
+function getEmptyTitle() {
+  if (hasSearchConditions()) {
+    return '未找到相关评论'
+  }
+  return '暂无评论数据'
+}
+
+// 获取空状态描述
+function getEmptyDescription() {
+  if (hasSearchConditions()) {
+    return '没有找到符合条件的评论，请尝试调整搜索条件'
+  }
+  return '当前还没有评论数据'
+}
+
+// 获取空状态操作按钮文字
+function getEmptyActionText() {
+  if (hasSearchConditions()) {
+    return '重置搜索'
+  }
+  return '刷新数据'
+}
+
+// 处理空状态操作
+function handleEmptyAction() {
+  if (hasSearchConditions()) {
+    handleReset()
+  }
+  else {
+    loadTableData()
+  }
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+  loadTableData()
+  loadPendingCount()
+})
+</script>
+
+<style scoped>
+/* 页面容器样式 */
+.comment-management {
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* 搜索表单样式 */
+.search-form :deep(.n-form-item) {
+  margin-bottom: 4px !important;
+}
+
+.search-form :deep(.n-form-item-label) {
+  padding-right: 8px !important;
+}
+
+/* 表格包裹器样式 */
+.table-wrapper {
+  padding: 0 16px 16px 16px;
+}
+
+.table-wrapper :deep(.n-data-table) {
+  overflow-x: auto;
+}
+
+.table-wrapper :deep(.n-data-table-wrapper) {
+  overflow: visible;
+}
+
+/* 自定义滚动条样式 */
+.table-wrapper {
+  min-height: 0;
+}
+
+.table-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.table-wrapper::-webkit-scrollbar-corner {
+  background: #f1f1f1;
+}
+
+/* 表格滚动条样式 */
+.custom-table :deep(.n-data-table-base-table) {
+  overflow: auto;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-track {
+  background: #f8f9fa;
+  border-radius: 3px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb {
+  background: #dee2e6;
+  border-radius: 3px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb:hover {
+  background: #adb5bd;
+}
+
+/* 表格操作按钮样式 */
+.action-btn-primary {
+  transition: all 0.3s ease;
+}
+
+.action-btn-secondary {
+  transition: all 0.3s ease;
+}
+
+.action-btn-danger {
+  transition: all 0.3s ease;
+}
+
+.action-btn-info {
+  transition: all 0.3s ease;
+}
+
+/* 紧凑表单样式 */
+.compact-form :deep(.n-form-item) {
+  margin-bottom: 8px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
+  min-height: 0 !important;
+  padding-top: 2px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-label) {
+  padding-bottom: 2px !important;
+}
+
+.compact-form :deep(.n-input),
+.compact-form :deep(.n-input-number),
+.compact-form :deep(.n-select),
+.compact-form :deep(.n-cascader),
+.compact-form :deep(.n-radio-group) {
+  font-size: 14px !important;
+}
+
+.compact-form :deep(.n-input .n-input__input-el),
+.compact-form :deep(.n-input-number .n-input__input-el) {
+  padding: 2px 1px !important;
+  min-height: 32px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
+  padding: 0 6px !important;
+  min-height: 30px !important;
+  line-height: 30px !important;
+}
+
+/* 自定义表格样式 */
+.custom-table :deep(.n-data-table-td) {
+  padding: 7px 12px;
+  font-size: 14px;
+}
+
+.custom-table :deep(.n-data-table-th) {
+  padding: 9px 12px;
+  background-color: #fafafa;
+  font-weight: normal;
+  font-size: 14px;
+  color: #262626;
+}
+
+.custom-table :deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f8faff;
+}
+</style>