rating

src/api/system/robot.js

@@ -8,6 +8,14 @@ export function getList(data) {
   })
 }
 
+export function getListBase(data) {
+  return request({
+    url: 'management/api/system/robot/list/base',
+    method: 'get',
+    params: data,
+  })
+}
+
 export function generate(appId) {
   return request({
     url: 'management/api/system/robot',

src/views/rating/topicItem/index.vue

@@ -31,19 +31,18 @@
     />
 
     <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
-      <el-table-column align="center" label="头像" width="100">
+      <el-table-column align="left" label="评价项" min-width="200">
         <template #default="{ row }">
-          <el-image
+          <div class="item-info-cell">
-            v-if="row.avatarUrl"
+            <el-image v-if="row.avatarUrl" class="item-avatar" :preview-src-list="[row.avatarUrl]" :src="getThumbUrl(row.avatarUrl)" />
-            :preview-src-list="[row.avatarUrl]"
+            <div v-else class="item-avatar-placeholder"><i class="el-icon-picture-outline" /></div>
-            :src="getThumbUrl(row.avatarUrl)"
+            <div class="item-details">
-            style="width: 50px; height: 50px; border-radius: 50%"
+              <div class="item-name">{{ row.name }}</div>
-          />
+              <div v-if="row.description" class="item-desc" :title="row.description">{{ row.description }}</div>
-          <span v-else>-</span>
+            </div>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="评价项名称" min-width="150" prop="name" show-overflow-tooltip />
-      <el-table-column align="center" label="描述" min-width="200" prop="description" show-overflow-tooltip />
 
       <el-table-column align="center" label="状态" width="100">
         <template #default="{ row }">
@@ -55,18 +54,65 @@
         </template>
       </el-table-column>
 
+      <el-table-column align="left" label="分数统计">
+        <template #default="{ row }">
+          <div class="stat-cell">
+            <div class="stat-row">
+              <span class="stat-label">排名分：</span>
+              <span class="stat-value highlight">{{ row.rankScore }}</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">平均分数：</span>
+              <span class="stat-value highlight">{{ row.scoreAvg }}</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">累计总分：</span>
+              <span class="stat-value">{{ row.scoreTotal }}</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">热门分：</span>
+              <span class="stat-value">{{ row.hotScore }}</span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="left" label="互动数据" min-width="150">
+        <template #default="{ row }">
+          <div class="stat-cell">
+            <div class="stat-row">
+              <span class="stat-label">
+                <i class="el-icon-view" />
+                浏览数：
+              </span>
+              <span class="stat-value">{{ row.viewCount }}</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">
+                <i class="el-icon-chat-dot-round" />
+                评论数：
+              </span>
+              <span class="stat-value">{{ row.commentCount }}</span>
+            </div>
+            <!-- <div class="stat-row">
+              <span class="stat-label">
+                <i class="el-icon-star-off" />
+                打分次数：
+              </span>
+              <span class="stat-value">{{ row.ratingCount }}</span>
+            </div> -->
+            <div class="stat-row">
+              <span class="stat-label">
+                <i class="el-icon-user" />
+                评价人数：
+              </span>
+              <span class="stat-value">{{ row.scoreCount }}</span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+
       <el-table-column align="center" label="排序" prop="sortOrder" width="80" />
-      <el-table-column align="center" label="分数" prop="score" width="80" />
-      <el-table-column align="center" label="总分数" prop="scoreTotal" width="100" />
-      <el-table-column align="center" label="评价人数" prop="scoreCount" width="100" />
-      <el-table-column align="center" label="平均分" prop="scoreAvg" width="100" />
-
-      <el-table-column align="center" label="浏览数" prop="viewCount" width="80" />
-      <el-table-column align="center" label="评论数" prop="commentCount" width="80" />
-      <el-table-column align="center" label="打分人数" prop="ratingCount" width="100" />
-
-      <el-table-column align="center" label="排名分" prop="rankScore" width="100" />
-      <el-table-column align="center" label="热门分" prop="hotScore" width="100" />
 
       <el-table-column align="center" label="创建时间" prop="createdAt" width="160">
         <template #default="{ row }">
@@ -178,4 +224,76 @@
   .rating-topic-item-container {
     padding: 20px;
   }
+
+  .item-info-cell {
+    display: flex;
+    align-items: center;
+  }
+
+  .item-avatar,
+  .item-avatar-placeholder {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 12px;
+    flex-shrink: 0;
+  }
+
+  .item-avatar-placeholder {
+    background-color: #f0f2f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #909399;
+    font-size: 20px;
+  }
+
+  .item-details {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .item-name {
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .item-desc {
+    font-size: 12px;
+    color: #909399;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .stat-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .stat-row {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+  }
+
+  .stat-label {
+    color: #909399;
+    width: 90px;
+  }
+
+  .stat-value {
+    color: #606266;
+  }
+
+  .stat-value.highlight {
+    color: #409eff;
+    font-weight: bold;
+  }
 </style>