rating

src/views/systemManagement/robot/components/RobotCommentView.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-dialog title="用户评论" :visible.sync="dialogVisible" width="600px" @close="close">
+    <div v-if="commentList && commentList.length > 0" class="comment-list">
+      <div v-for="item in commentList" :key="item.id" class="comment-item">
+        <div class="comment-header">
+          <el-image
+            v-if="item.itemAvatarUrl"
+            class="comment-avatar"
+            :preview-src-list="[item.itemAvatarUrl]"
+            :src="getThumbUrl(item.itemAvatarUrl)"
+          />
+          <div class="comment-meta">
+            <div class="comment-title">
+              <span class="topic-name">[{{ item.topicName }}]</span>
+              <span class="item-name">{{ item.itemName }}</span>
+            </div>
+            <div class="comment-time">{{ formatTime(item.createdAt) }}</div>
+          </div>
+          <el-tag size="mini" :type="item.status === 2 ? 'success' : 'info'">
+            {{ item.status === 2 ? '已展示' : '隐藏/待审' }}
+          </el-tag>
+        </div>
+        <div class="comment-content">
+          {{ item.content }}
+        </div>
+        <div class="comment-footer">
+          <span>
+            <i class="el-icon-thumb" />
+            {{ item.likeCount || 0 }}
+          </span>
+          <span>
+            <i class="el-icon-chat-dot-round" />
+            {{ item.replyCount || 0 }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <el-empty v-else description="暂无评论数据" />
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { formatTime } from '@/utils'
+  import { getThumbUrl } from '@/utils/blessing'
+
+  export default {
+    name: 'RobotCommentView',
+    data() {
+      return {
+        dialogVisible: false,
+        commentList: [],
+      }
+    },
+    methods: {
+      formatTime,
+      getThumbUrl,
+      show(comments) {
+        this.commentList = comments || []
+        this.dialogVisible = true
+      },
+      close() {
+        this.commentList = []
+        this.dialogVisible = false
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .comment-list {
+    max-height: 500px;
+    overflow-y: auto;
+    padding-right: 10px;
+  }
+
+  .comment-item {
+    padding: 15px;
+    margin-bottom: 15px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #ebeef5;
+  }
+
+  .comment-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .comment-header {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 10px;
+  }
+
+  .comment-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+
+  .comment-meta {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .comment-title {
+    font-size: 14px;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+  }
+
+  .topic-name {
+    color: #409eff;
+    margin-right: 5px;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+  }
+
+  .item-name {
+    font-weight: bold;
+    color: #303133;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+
+  .comment-time {
+    font-size: 12px;
+    color: #909399;
+  }
+
+  .comment-content {
+    font-size: 14px;
+    color: #606266;
+    line-height: 1.6;
+    margin-bottom: 10px;
+    word-break: break-all;
+    white-space: pre-wrap;
+    background-color: #fff;
+    padding: 10px;
+    border-radius: 4px;
+  }
+
+  .comment-footer {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    font-size: 12px;
+    color: #909399;
+  }
+
+  .comment-footer span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+</style>