fix: comment

src/api/rating/pk.js

@@ -97,3 +97,18 @@ export function toggleEnable(data) {
     data,
   })
 }
+
+/**
+ * 修改评论状态
+ * @param {*} { id, enable: boolean }
+ * @param { enable: boolean } data 是否启用
+ * @param { id: string } data 评论id
+ * @returns
+ */
+export function commentStatus(data) {
+  return request({
+    url: 'management/api/rating/pk/comment/toggle',
+    method: 'post',
+    data,
+  })
+}

src/api/rating/topicCategory.js

@@ -52,3 +52,16 @@ export function doEdit(id, data) {
     data,
   })
 }
+
+/**
+ * 创建话题分类
+ * @param {title: string} data
+ * @returns
+ */
+export function doAdd(data) {
+  return request({
+    url: '/management/api/rating/topic_category',
+    method: 'post',
+    data,
+  })
+}

src/api/rating/topicOperate.js

@@ -29,7 +29,7 @@ export function scoreRecordList(data) {
 
 /**
  * 评论记录
- * @param {*} { pageNo, pageSize, userId?, topicId?, itemId?, trueUser? }
+ * @param {*} { pageNo, pageSize, userId?, topicId?, itemId?, trueUser?, rootCommentId? }
  * @returns
  */
 export function userCommentList(data) {
@@ -42,7 +42,9 @@ export function userCommentList(data) {
 
 /**
  * 评论
- * @param {*} { topicId, itemId, comment, userId }
+ * @param {*} { topicId, itemId, comment, userId,parentCommentId, replyToCommentId, }
+ * @param { parentCommentId: string } data 评论回复必传
+ * @param { replyToCommentId: string } data 回复必传
  * @returns
  */
 export function comment(data) {
@@ -53,6 +55,21 @@ export function comment(data) {
   })
 }
 
+/**
+ * 修改评论状态
+ * @param {*} { id, enable: boolean }
+ * @param { enable: boolean } data 是否启用
+ * @param { id: string } data 评论id
+ * @returns
+ */
+export function commentStatus(data) {
+  return request({
+    url: 'management/api/rating/topicItemOperate/comment/toggle',
+    method: 'post',
+    data,
+  })
+}
+
 /**
  * 评论点赞
  * @param {*} { commentId, userId }

src/components/UserInfo/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="user-info-component">
+    <div v-if="user" class="user-info-cell" :class="{ 'is-clickable': !user.isRobot }" @click="handleUserClick">
+      <el-image v-if="user.avatar" class="user-avatar" :preview-src-list="[user.avatar]" :src="getThumbUrl(user.avatar)" @click.stop />
+      <div v-else class="user-avatar-placeholder"><i class="el-icon-user" /></div>
+      <div class="user-details">
+        <div class="user-nickname" :class="{ 'hover-link': !user.isRobot }">
+          {{ user.nickname || '未知用户' }}
+          <el-tag v-if="user.isRobot" size="mini" style="margin-left: 4px" type="info">机器人</el-tag>
+          <el-tag v-else size="mini" style="margin-left: 4px" type="success">真人</el-tag>
+        </div>
+        <div class="user-id">{{ user.id }}</div>
+      </div>
+    </div>
+    <div v-else class="user-details">
+      <div class="user-id">{{ userId }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getThumbUrl } from '@/utils/blessing'
+
+  export default {
+    name: 'UserInfo',
+    props: {
+      user: {
+        type: Object,
+        default: () => null,
+      },
+      userId: {
+        type: String,
+        default: '',
+      },
+    },
+    methods: {
+      getThumbUrl,
+      handleUserClick() {
+        if (this.user && !this.user.isRobot) {
+          // 跳转到用户页面
+          this.$router.push({
+            path: '/spring/user/user',
+            query: { userId: this.user.id },
+          })
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .user-info-component {
+    display: block;
+  }
+
+  .user-info-cell {
+    display: flex;
+    align-items: center;
+  }
+
+  .is-clickable {
+    cursor: pointer;
+  }
+
+  .is-clickable:hover .hover-link {
+    color: #409eff;
+    text-decoration: underline;
+  }
+
+  .user-avatar,
+  .user-avatar-placeholder {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 12px;
+    flex-shrink: 0;
+  }
+
+  .user-avatar-placeholder {
+    background-color: #f0f2f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #909399;
+    font-size: 20px;
+  }
+
+  .user-details {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .user-nickname {
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: color 0.2s;
+  }
+
+  .user-id {
+    font-size: 12px;
+    color: #909399;
+  }
+</style>

src/views/rating/pk/comment/components/CommentReplyList.vue

@@ -27,31 +27,13 @@
 
       <el-table-column align="left" label="用户信息" min-width="180">
         <template #default="{ row }">
-          <div v-if="row.user" class="user-info-cell">
+          <user-info :user="row.user" :user-id="row.userId" />
-            <el-image
-              v-if="row.user.avatar"
-              class="user-avatar"
-              :preview-src-list="[row.user.avatar]"
-              :src="getThumbUrl(row.user.avatar)"
-            />
-            <div v-else class="user-avatar-placeholder"><i class="el-icon-user" /></div>
-            <div class="user-details">
-              <div class="user-nickname">
-                {{ row.user.nickname || '未知用户' }}
-                <el-tag v-if="row.user.isRobot" size="mini" style="margin-left: 4px" type="info">机器人</el-tag>
-                <el-tag v-else size="mini" style="margin-left: 4px" type="success">真人</el-tag>
-              </div>
-            </div>
-          </div>
-          <div v-else class="user-details">
-            <div class="user-id">{{ row.userId }}</div>
-          </div>
         </template>
       </el-table-column>
 
       <el-table-column align="center" label="状态切换" width="80">
         <template #default="{ row }">
-          <el-switch v-model="row.enable" :active-value="true" :inactive-value="false" @change="handleToggleStatus(row)" />
+          <el-switch v-model="row.status" :active-value="2" :inactive-value="4" @change="handleToggleStatus(row)" />
         </template>
       </el-table-column>
 
@@ -75,12 +57,14 @@
 </template>
 
 <script>
-  import { getCommentList, toggleEnable } from '@/api/rating/pk'
+  import { getCommentList, commentStatus } from '@/api/rating/pk'
   import { formatTime } from '@/utils'
   import { getThumbUrl } from '@/utils/blessing'
+  import UserInfo from '@/components/UserInfo'
 
   export default {
     name: 'CommentReplyList',
+    components: { UserInfo },
     data() {
       return {
         title: '回复列表',
@@ -142,11 +126,12 @@
       },
       async handleToggleStatus(row) {
         try {
-          const { msg } = await toggleEnable({ id: row.id, enable: row.enable })
+          const enable = row.status === 2
+          const { msg } = await commentStatus({ id: row.id, enable })
           this.$baseMessage(msg || '状态切换成功', 'success')
         } catch (error) {
           console.error(error)
-          row.enable = !row.enable
+          row.status = row.status === 2 ? 4 : 2
         }
       },
     },
@@ -188,46 +173,4 @@
   .meta-item i {
     margin-right: 4px;
   }
-
-  .user-info-cell {
-    display: flex;
-    align-items: center;
-  }
-
-  .user-avatar,
-  .user-avatar-placeholder {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    margin-right: 8px;
-    flex-shrink: 0;
-  }
-
-  .user-avatar-placeholder {
-    background-color: #f0f2f5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #909399;
-    font-size: 16px;
-  }
-
-  .user-details {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .user-nickname {
-    font-weight: bold;
-    color: #303133;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .user-id {
-    font-size: 12px;
-    color: #909399;
-  }
 </style>

src/views/rating/pk/comment/index.vue

@@ -79,32 +79,13 @@
 
       <el-table-column align="left" label="用户信息" min-width="200">
         <template #default="{ row }">
-          <div v-if="row.user" class="user-info-cell">
+          <user-info :user="row.user" :user-id="row.userId" />
-            <el-image
-              v-if="row.user.avatar"
-              class="user-avatar"
-              :preview-src-list="[row.user.avatar]"
-              :src="getThumbUrl(row.user.avatar)"
-            />
-            <div v-else class="user-avatar-placeholder"><i class="el-icon-user" /></div>
-            <div class="user-details">
-              <div class="user-nickname">
-                {{ row.user.nickname || '未知用户' }}
-                <el-tag v-if="row.user.isRobot" size="mini" style="margin-left: 4px" type="info">机器人</el-tag>
-                <el-tag v-else size="mini" style="margin-left: 4px" type="success">真人</el-tag>
-              </div>
-              <div class="user-id">{{ row.user.id }}</div>
-            </div>
-          </div>
-          <div v-else class="user-details">
-            <div class="user-id">{{ row.userId }}</div>
-          </div>
         </template>
       </el-table-column>
 
       <el-table-column align="center" label="状态切换" width="100">
         <template #default="{ row }">
-          <el-switch v-model="row.enable" :active-value="true" :inactive-value="false" @change="handleToggleStatus(row)" />
+          <el-switch v-model="row.status" :active-value="2" :inactive-value="4" @change="handleToggleStatus(row)" />
         </template>
       </el-table-column>
 
@@ -132,16 +113,17 @@
 </template>
 
 <script>
-  import { getCommentList, toggleEnable, getList as getPkList } from '@/api/rating/pk'
+  import { getCommentList, commentStatus, getList as getPkList } from '@/api/rating/pk'
   import { formatTime } from '@/utils'
   import { getThumbUrl } from '@/utils/blessing'
+  import UserInfo from '@/components/UserInfo'
   import PkCommentEdit from './components/PkCommentEdit'
   import PkCommentLikeEdit from './components/PkCommentLikeEdit'
   import CommentReplyList from './components/CommentReplyList'
 
   export default {
     name: 'PkComment',
-    components: { PkCommentEdit, PkCommentLikeEdit, CommentReplyList },
+    components: { PkCommentEdit, PkCommentLikeEdit, CommentReplyList, UserInfo },
     directives: {
       loadmore: {
         bind(el, binding) {
@@ -260,11 +242,13 @@
       },
       async handleToggleStatus(row) {
         try {
-          const { msg } = await toggleEnable({ id: row.id, enable: row.enable })
+          // status: 2为启用，4为禁用
+          const enable = row.status === 2
+          const { msg } = await commentStatus({ id: row.id, enable })
           this.$baseMessage(msg || '状态切换成功', 'success')
         } catch (error) {
           console.error(error)
-          row.enable = !row.enable
+          row.status = row.status === 2 ? 4 : 2
         }
       },
 
@@ -330,47 +314,4 @@
     font-weight: bold;
     color: #303133;
   }
-
-  .user-info-cell {
-    display: flex;
-    align-items: center;
-  }
-
-  .user-avatar,
-  .user-avatar-placeholder {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 12px;
-    flex-shrink: 0;
-  }
-
-  .user-avatar-placeholder {
-    background-color: #f0f2f5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #909399;
-    font-size: 20px;
-  }
-
-  .user-details {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .user-nickname {
-    font-weight: bold;
-    color: #303133;
-    margin-bottom: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .user-id {
-    font-size: 12px;
-    color: #909399;
-  }
 </style>

src/views/rating/pk/list/components/PkParticipantList.vue

@@ -3,14 +3,7 @@
     <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
       <el-table-column align="left" label="投票用户" min-width="150">
         <template #default="{ row }">
-          <div class="user-info-cell">
+          <user-info :user="row" :user-id="row.id" />
-            <el-image v-if="row.avatar" class="user-avatar" :preview-src-list="[row.avatar]" :src="getThumbUrl(row.avatar)" />
-            <div v-else class="user-avatar-placeholder"><i class="el-icon-user" /></div>
-            <div class="user-details">
-              <div class="user-nickname">{{ row.nickname || '未知用户' }}</div>
-              <div class="user-id">{{ row.id }}</div>
-            </div>
-          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -30,9 +23,11 @@
 <script>
   import { getParticipantList } from '@/api/rating/pk'
   import { getThumbUrl } from '@/utils/blessing'
+  import UserInfo from '@/components/UserInfo'
 
   export default {
     name: 'PkParticipantList',
+    components: { UserInfo },
     data() {
       return {
         title: '投票用户列表',
@@ -87,47 +82,3 @@
     },
   }
 </script>
-
-<style scoped>
-  .user-info-cell {
-    display: flex;
-    align-items: center;
-  }
-
-  .user-avatar,
-  .user-avatar-placeholder {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    margin-right: 10px;
-    flex-shrink: 0;
-  }
-
-  .user-avatar-placeholder {
-    background-color: #f0f2f5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #909399;
-    font-size: 18px;
-  }
-
-  .user-details {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .user-nickname {
-    font-weight: bold;
-    color: #303133;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .user-id {
-    font-size: 12px;
-    color: #909399;
-  }
-</style>

src/views/rating/topic/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="rating-topic-container">
     <vab-query-form>
-      <vab-query-form-left-panel :span="12">
+      <vab-query-form-left-panel>
         <el-button icon="el-icon-plus" type="primary" @click="handleAdd">创建话题</el-button>
       </vab-query-form-left-panel>
-      <vab-query-form-right-panel :span="12">
+      <vab-query-form-left-panel>
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
           <el-form-item>
             <el-select v-model="queryForm.status" clearable placeholder="请选择状态" @change="queryData">
@@ -21,7 +21,7 @@
             <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
           </el-form-item>
         </el-form>
-      </vab-query-form-right-panel>
+      </vab-query-form-left-panel>
     </vab-query-form>
 
     <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
@@ -46,10 +46,10 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="允许评论" width="100">
+      <el-table-column align="left" label="用户信息" min-width="200" width="300">
         <template #default="{ row }">
-          <el-tag v-if="row.allowComment === 1 || row.allowComment === true" type="success">是</el-tag>
+          <user-info v-if="row.user" :user="row.user" :user-id="row.userId" />
-          <el-tag v-else type="danger">否</el-tag>
+          <span v-else>系统创建</span>
         </template>
       </el-table-column>
 
@@ -125,10 +125,11 @@
   import { formatTime } from '@/utils'
   import { getThumbUrl } from '@/utils/blessing'
   import TopicEdit from './components/TopicEdit'
+  import UserInfo from '@/components/UserInfo'
 
   export default {
     name: 'RatingTopicIndex',
-    components: { TopicEdit },
+    components: { TopicEdit, UserInfo },
     data() {
       return {
         list: [],
@@ -145,6 +146,9 @@
       }
     },
     created() {
+      if (this.$route.query.topicId) {
+        this.queryForm.keyword = this.$route.query.topicId
+      }
       this.fetchData()
     },
     methods: {

src/views/rating/topicCategory/components/TopicCategoryEdit.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-  import { doEdit } from '@/api/rating/topicCategory'
+  import { doEdit, doAdd } from '@/api/rating/topicCategory'
 
   export default {
     name: 'TopicCategoryEdit',
@@ -38,12 +38,11 @@
     methods: {
       showEdit(row) {
         if (!row) {
-          // 当前接口似乎只提供了编辑，如果需要新增可在此扩展
+          this.title = '创建分类'
-          this.title = '添加话题分类'
           this.id = ''
           this.form = this.$options.data().form
         } else {
-          this.title = '编辑话题分类'
+          this.title = '编辑分类'
           this.id = row.id
           this.form = {
             title: row.title || '',
@@ -67,6 +66,9 @@
               if (this.id) {
                 const { msg } = await doEdit(this.id, this.form)
                 this.$baseMessage(msg || '编辑成功', 'success')
+              } else {
+                const { msg } = await doAdd({ title: this.form.title })
+                this.$baseMessage(msg || '创建成功', 'success')
               }
               this.$emit('fetch-data')
               this.close()

src/views/rating/topicCategory/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="topic-category-container">
     <vab-query-form>
-      <vab-query-form-right-panel :span="24">
+      <vab-query-form-left-panel :span="12">
+        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">创建类别</el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
           <el-form-item>
             <el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入分类名称" />
@@ -75,6 +78,9 @@
     },
     methods: {
       formatTime,
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
       handleSizeChange(val) {
         this.queryForm.pageSize = val
         this.fetchData()

src/views/rating/topicCommentRecord/components/RecordCommentEdit.vue

@@ -18,7 +18,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="评价主题" prop="topicId">
+      <el-form-item v-if="!isReply" label="评价主题" prop="topicId">
         <el-select
           v-model="form.topicId"
           v-loadmore="loadMoreTopics"
@@ -31,7 +31,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="评价项" prop="itemId">
+      <el-form-item v-if="!isReply" label="评价项" prop="itemId">
         <el-select
           v-model="form.itemId"
           v-loadmore="loadMoreItems"
@@ -54,7 +54,7 @@
       </el-form-item>
 
       <el-form-item label="评论内容" prop="content">
-        <el-input v-model="form.content" maxlength="500" placeholder="请输入您的评论文字" :rows="4" show-word-limit type="textarea" />
+        <el-input v-model="form.content" maxlength="500" :placeholder="contentPlaceholder" :rows="4" show-word-limit type="textarea" />
       </el-form-item>
     </el-form>
 
@@ -96,11 +96,15 @@
         title: '立即评论',
         dialogFormVisible: false,
         saving: false,
+        isReply: false,
+        contentPlaceholder: '请输入您的评论文字',
         form: {
           userId: '',
           topicId: '',
           itemId: '',
           content: '',
+          parentCommentId: '',
+          replyToCommentId: '',
         },
         rules: {
           userId: [{ required: true, trigger: 'change', message: '请选择用户' }],
@@ -130,11 +134,31 @@
     },
     methods: {
       getThumbUrl,
-      showEdit() {
+      showEdit(row = null, parentCommentId = null) {
-        this.title = '立即评论'
         this.dialogFormVisible = true
         this.form = this.$options.data().form
 
+        if (row) {
+          this.isReply = true
+          this.title = '回复评论'
+          this.contentPlaceholder = `回复 @${row.user ? row.user.nickname : '未知用户'}:`
+
+          this.form.parentCommentId = parentCommentId || row.id
+          this.form.replyToCommentId = row.id
+
+          if (row.rating) {
+            this.form.topicId = row.rating.topicId || row.rating.topic?.id || row.topicId
+            this.form.itemId = row.rating.itemId || row.rating.item?.id || row.itemId
+          } else {
+            this.form.topicId = row.topicId
+            this.form.itemId = row.itemId
+          }
+        } else {
+          this.isReply = false
+          this.title = '立即评论'
+          this.contentPlaceholder = '请输入您的评论文字'
+        }
+
         // 重置列表数据
         this.userList = []
         this.userQuery.pageNo = 1
@@ -151,7 +175,9 @@
 
         // 初始化加载第一页数据
         this.fetchUserList()
-        this.fetchTopicList()
+        if (!this.isReply) {
+          this.fetchTopicList()
+        }
       },
       close() {
         this.$refs['form'].resetFields()

src/views/rating/topicCommentRecord/components/RecordCommentReplyList.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" @close="close">
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
+      <el-table-column align="center" fixed="left" label="操作" width="120">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleLike(row)">点赞</el-button>
+          <el-button type="text" @click="handleReply(row)">回复</el-button>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="left" label="回复内容" min-width="250">
+        <template #default="{ row }">
+          <div class="comment-content-cell">
+            <div v-if="row.replyToUser" class="reply-target">回复 @{{ row.replyToUser.nickname || '未知用户' }}:</div>
+            <div class="content-text">{{ row.content }}</div>
+            <div class="comment-meta">
+              <span class="meta-item">
+                <i class="el-icon-thumb" />
+                {{ row.likeCount || 0 }}
+              </span>
+              <el-tag v-if="row.status === 2" size="mini" style="margin-left: 8px" type="success">已展示</el-tag>
+              <el-tag v-else size="mini" style="margin-left: 8px" type="info">隐藏/待审</el-tag>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="left" label="用户信息" min-width="180">
+        <template #default="{ row }">
+          <user-info :user="row.user" :user-id="row.userId" />
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="状态切换" width="80">
+        <template #default="{ row }">
+          <el-switch v-model="row.status" :active-value="2" :inactive-value="4" @change="handleToggleStatus(row)" />
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="时间" prop="createdAt" width="160">
+        <template #default="{ row }">
+          {{ formatTime(row.createdAt) }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </el-dialog>
+</template>
+
+<script>
+  import { userCommentList, commentStatus } from '@/api/rating/topicOperate'
+  import { formatTime } from '@/utils'
+  import { getThumbUrl } from '@/utils/blessing'
+  import UserInfo from '@/components/UserInfo'
+
+  export default {
+    name: 'RecordCommentReplyList',
+    components: { UserInfo },
+    data() {
+      return {
+        title: '回复列表',
+        dialogVisible: false,
+        list: [],
+        listLoading: false,
+        layout: 'total, prev, pager, next',
+        total: 0,
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          rootCommentId: '',
+        },
+        parentRow: null,
+      }
+    },
+    methods: {
+      formatTime,
+      getThumbUrl,
+      show(row) {
+        this.parentRow = row
+        this.title = `回复列表`
+        this.dialogVisible = true
+        this.queryForm.rootCommentId = row.id
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      close() {
+        this.dialogVisible = false
+        this.list = []
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        try {
+          const { data } = await userCommentList(this.queryForm)
+          this.list = data.list || []
+          this.total = data.totalCount || 0
+        } catch (error) {
+          console.error(error)
+        } finally {
+          this.listLoading = false
+        }
+      },
+      handleLike(row) {
+        this.$emit('like', row)
+      },
+      handleReply(row) {
+        // 传递当前行作为被回复对象，同时传递根评论ID
+        this.$emit('reply', row, this.queryForm.rootCommentId)
+      },
+      async handleToggleStatus(row) {
+        try {
+          const enable = row.status === 2
+          const { msg } = await commentStatus({ id: row.id, enable })
+          this.$baseMessage(msg || '状态切换成功', 'success')
+        } catch (error) {
+          console.error(error)
+          row.status = row.status === 2 ? 4 : 2
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .comment-content-cell {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .reply-target {
+    font-size: 12px;
+    color: #409eff;
+    margin-bottom: 4px;
+  }
+
+  .content-text {
+    font-size: 14px;
+    color: #303133;
+    margin-bottom: 8px;
+    word-break: break-all;
+  }
+
+  .comment-meta {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #909399;
+  }
+
+  .meta-item {
+    display: flex;
+    align-items: center;
+    margin-right: 12px;
+  }
+
+  .meta-item i {
+    margin-right: 4px;
+  }
+</style>

src/views/rating/topicCommentRecord/index.vue

@@ -83,9 +83,11 @@
     </vab-query-form>
 
     <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
-      <el-table-column align="center" fixed="left" label="操作" width="100">
+      <el-table-column align="center" fixed="left" label="操作" width="160">
         <template #default="{ row }">
           <el-button type="text" @click="handleLike(row)">点赞</el-button>
+          <el-button type="text" @click="handleReply(row)">回复</el-button>
+          <el-button v-if="row.replyCount > 0" type="text" @click="handleViewReplies(row)">查看回复</el-button>
         </template>
       </el-table-column>
 
@@ -130,26 +132,13 @@
 
       <el-table-column align="left" label="用户信息" min-width="200">
         <template #default="{ row }">
-          <div v-if="row.user" class="user-info-cell">
+          <user-info :user="row.user" :user-id="row.userId" />
-            <el-image
+        </template>
-              v-if="row.user.avatar"
+      </el-table-column>
-              class="user-avatar"
+
-              :preview-src-list="[row.user.avatar]"
+      <el-table-column align="center" label="状态切换" width="100">
-              :src="getThumbUrl(row.user.avatar)"
+        <template #default="{ row }">
-            />
+          <el-switch v-model="row.status" :active-value="2" :inactive-value="4" @change="handleToggleStatus(row)" />
-            <div v-else class="user-avatar-placeholder"><i class="el-icon-user" /></div>
-            <div class="user-details">
-              <div class="user-nickname">
-                {{ row.user.nickname || '未知用户' }}
-                <el-tag v-if="row.user.isRobot" size="mini" style="margin-left: 4px" type="info">机器人</el-tag>
-                <el-tag v-else size="mini" style="margin-left: 4px" type="success">真人</el-tag>
-              </div>
-              <div class="user-id">{{ row.user.id }}</div>
-            </div>
-          </div>
-          <div v-else class="user-details">
-            <div class="user-id">{{ row.userId }}</div>
-          </div>
         </template>
       </el-table-column>
 
@@ -172,22 +161,25 @@
 
     <record-comment-edit ref="commentEdit" @fetch-data="fetchData" />
     <record-comment-like-edit ref="likeEdit" @fetch-data="fetchData" />
+    <record-comment-reply-list ref="replyList" @like="handleLikeFromList" @reply="handleReplyFromList" />
   </div>
 </template>
 
 <script>
-  import { userCommentList } from '@/api/rating/topicOperate'
+  import { userCommentList, commentStatus } from '@/api/rating/topicOperate'
   import { getList as getUserList } from '@/api/system/user'
   import { getList as getTopicList } from '@/api/rating/topic'
   import { getList as getItemList } from '@/api/rating/topicItem'
   import { formatTime } from '@/utils'
   import { getThumbUrl } from '@/utils/blessing'
+  import UserInfo from '@/components/UserInfo'
   import RecordCommentEdit from './components/RecordCommentEdit'
   import RecordCommentLikeEdit from './components/RecordCommentLikeEdit'
+  import RecordCommentReplyList from './components/RecordCommentReplyList'
 
   export default {
     name: 'RatingTopicCommentIndex',
-    components: { RecordCommentEdit, RecordCommentLikeEdit },
+    components: { RecordCommentEdit, RecordCommentLikeEdit, RecordCommentReplyList, UserInfo },
     directives: {
       loadmore: {
         bind(el, binding) {
@@ -351,9 +343,32 @@
       handleLike(row) {
         this.$refs['likeEdit'].showEdit(row)
       },
+      handleReply(row) {
+        this.$refs['commentEdit'].showEdit(row)
+      },
+      handleViewReplies(row) {
+        this.$refs['replyList'].show(row)
+      },
       handleCommentNow() {
         this.$refs['commentEdit'].showEdit()
       },
+      async handleToggleStatus(row) {
+        try {
+          const enable = row.status === 2
+          const { msg } = await commentStatus({ id: row.id, enable })
+          this.$baseMessage(msg || '状态切换成功', 'success')
+        } catch (error) {
+          console.error(error)
+          row.status = row.status === 2 ? 4 : 2
+        }
+      },
+      // 子组件触发的方法
+      handleReplyFromList(row, parentCommentId) {
+        this.$refs['commentEdit'].showEdit(row, parentCommentId)
+      },
+      handleLikeFromList(row) {
+        this.$refs['likeEdit'].showEdit(row)
+      },
       handleSizeChange(val) {
         this.queryForm.pageSize = val
         this.fetchData()
@@ -420,45 +435,6 @@
     margin-right: 4px;
   }
 
-  /* 用户信息列样式 */
-  .user-info-cell {
-    display: flex;
-    align-items: center;
-  }
-  .user-avatar,
-  .user-avatar-placeholder {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 12px;
-    flex-shrink: 0;
-  }
-  .user-avatar-placeholder {
-    background-color: #f0f2f5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #909399;
-    font-size: 20px;
-  }
-  .user-details {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  .user-nickname {
-    font-weight: bold;
-    color: #303133;
-    margin-bottom: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .user-id {
-    font-size: 12px;
-    color: #909399;
-  }
-
   /* 评价目标列样式 */
   .target-info-cell {
     display: flex;

src/views/rating/topicItem/index.vue

@@ -61,6 +61,13 @@
         </template>
       </el-table-column>
 
+      <el-table-column align="left" label="用户信息" min-width="200" width="300">
+        <template #default="{ row }">
+          <user-info v-if="row.user" :user="row.user" :user-id="row.userId" />
+          <span v-else>系统创建</span>
+        </template>
+      </el-table-column>
+
       <el-table-column align="left" label="分数统计">
         <template #default="{ row }">
           <div class="stat-cell">
@@ -150,10 +157,11 @@
   import { getThumbUrl } from '@/utils/blessing'
   import TopicItemRatingEdit from './components/TopicItemRatingEdit'
   import TopicItemCommentEdit from './components/TopicItemCommentEdit'
+  import UserInfo from '@/components/UserInfo'
 
   export default {
     name: 'RatingTopicItemIndex',
-    components: { TopicItemRatingEdit, TopicItemCommentEdit },
+    components: { TopicItemRatingEdit, TopicItemCommentEdit, UserInfo },
     data() {
       return {
         list: [],

src/views/rating/topicRecommend/index.vue

@@ -9,7 +9,7 @@
     <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
       <el-table-column align="left" label="推荐话题" min-width="220" width="220">
         <template #default="{ row }">
-          <div class="topic-cell">
+          <div class="topic-cell" @click="handleClick(row.topic)">
             <div class="topic-title">{{ row.topic ? row.topic.title : '-' }}</div>
             <div class="topic-meta">
               <span class="meta-label">Topic ID:</span>
@@ -91,6 +91,14 @@
         this.queryForm.pageNo = val
         this.fetchData()
       },
+      handleClick(topic) {
+        this.$router.push({
+          path: '/rating/topic',
+          query: {
+            topicId: topic.id,
+          },
+        })
+      },
       async fetchData() {
         this.listLoading = true
         try {
@@ -142,6 +150,7 @@
   .topic-cell {
     display: flex;
     flex-direction: column;
+    cursor: pointer;
   }
 
   .topic-title {

src/views/rating/topicScoreRecord/index.vue

@@ -108,26 +108,7 @@
       </el-table-column>
       <el-table-column align="left" label="用户信息" min-width="200">
         <template #default="{ row }">
-          <div v-if="row.user" class="user-info-cell">
+          <user-info :user="row.user" :user-id="row.userId" />
-            <el-image
-              v-if="row.user.avatar"
-              class="user-avatar"
-              :preview-src-list="[row.user.avatar]"
-              :src="getThumbUrl(row.user.avatar)"
-            />
-            <div v-else class="user-avatar-placeholder"><i class="el-icon-user" /></div>
-            <div class="user-details">
-              <div class="user-nickname">
-                {{ row.user.nickname || '未知用户' }}
-                <el-tag v-if="row.user.isRobot" size="mini" style="margin-left: 4px" type="info">机器人</el-tag>
-                <el-tag v-else size="mini" style="margin-left: 4px" type="success">真人</el-tag>
-              </div>
-              <div class="user-id">{{ row.user.id }}</div>
-            </div>
-          </div>
-          <div v-else class="user-details">
-            <div class="user-id">{{ row.userId }}</div>
-          </div>
         </template>
       </el-table-column>
 
@@ -161,11 +142,12 @@
   import { getList as getItemList } from '@/api/rating/topicItem'
   import { formatTime } from '@/utils'
   import { getThumbUrl } from '@/utils/blessing'
+  import UserInfo from '@/components/UserInfo'
   import RecordRatingEdit from './components/RecordRatingEdit'
 
   export default {
     name: 'RatingTopicRecordIndex',
-    components: { RecordRatingEdit },
+    components: { RecordRatingEdit, UserInfo },
     directives: {
       loadmore: {
         bind(el, binding) {
@@ -392,45 +374,6 @@
     padding: 20px;
   }
 
-  /* 用户信息列样式 */
-  .user-info-cell {
-    display: flex;
-    align-items: center;
-  }
-  .user-avatar,
-  .user-avatar-placeholder {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 12px;
-    flex-shrink: 0;
-  }
-  .user-avatar-placeholder {
-    background-color: #f0f2f5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #909399;
-    font-size: 20px;
-  }
-  .user-details {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  .user-nickname {
-    font-weight: bold;
-    color: #303133;
-    margin-bottom: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .user-id {
-    font-size: 12px;
-    color: #909399;
-  }
-
   /* 评价目标列样式 */
   .target-info-cell {
     display: flex;