feat(product-monitor): 添加商品评分和评论功能

- 在产品监控页面添加子ASIN计算评分和亚马逊显示评分列
- 添加子ASIN评论人数和亚马逊显示评论人数列
- 新增星级分布展示功能，包括子ASIN和亚马逊的星级分布
- 优化表格列的排序功能
-调整表格样式，增加进度条和评分图标

components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     ManyToMany: typeof import('./src/components/manyToMany/index.vue')['default']
     NoticeBar: typeof import('./src/components/noticeBar/index.vue')['default']
     PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
+    ProgressBar: typeof import('./src/components/ProgressBar/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/svgIcon/index.vue')['default']

src/views/product-manage/product-monitor/ColumnsTsx.tsx

@@ -46,29 +46,37 @@ export const productColumns = [
     slots: { default: 'minimum_price' }
   },
   {
-    field: 'ratings', title: '子ASIN评分人数', minWidth: 'auto', align: 'center',
+    field: 'ratings', title: '子ASIN评分人数', minWidth: 'auto', align: 'center', sortable: true,
     slots: { default: 'ratings' }
   },
   {
-    field: 'all_ratings', title: '亚马逊显示评分人数', minWidth: 'auto', align: 'center',
+    field: 'all_ratings', title: '亚马逊显示评分人数', minWidth: 'auto', align: 'center', sortable: true,
     slots: { default: 'all_ratings' }
   },
   {
-    field: 'reviews', title: '子ASIN评论人数', minWidth: 'auto', align: 'center',
+    field: 'reviews', title: '子ASIN评论人数', minWidth: 'auto', align: 'center', sortable: true,
     slots: { default: 'reviews' }
   },
   {
-    field: 'all_reviews', title: '亚马逊显示评论人数', minWidth: 'auto', align: 'center',
+    field: 'all_reviews', title: '亚马逊显示评论人数', minWidth: 'auto', align: 'center', sortable: true,
     slots: { default: 'all_reviews' }
   },
   {
-    field: 'score', title: '子ASIN计算评分', minWidth: 'auto', align: 'center',
+    field: 'score', title: '子ASIN计算评分', minWidth: 'auto', align: 'center', sortable: true,
     slots: { default: 'score' }
   },
   {
-    field: 'all_score', title: '亚马逊显示评分', minWidth: 'auto', align: 'center',
+    field: 'all_score', title: '亚马逊显示评分', minWidth: 'auto', align: 'center', sortable: true,
     slots: { default: 'all_score' }
   },
+  {
+    field: 'stars', title: '子ASIN星级分布', minWidth: 'auto', headerAlign: 'center', align: 'center',
+    slots: { default: 'stars' }
+  },
+  {
+    field: 'all_stars', title: '亚马逊星级分布', minWidth: 'auto', headerAlign: 'center', align: 'center',
+    slots: { default: 'all_stars' }
+  },
   {
     field: 'launch_date', title: '上架日期', minWidth: 'auto', align: 'center', sortable: true,
     slots: { default: 'launch_date' }

src/views/product-manage/product-monitor/component/DataTableSlot.vue

@@ -6,7 +6,7 @@
  */
 
 import { useCountryInfoStore } from '/@/stores/countryInfo';
-import { Operation, Delete } from '@element-plus/icons-vue';
+import { Delete, Operation } from '@element-plus/icons-vue';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 import ProductInfo from '/@/views/product-manage/product-list/component/ProductInfo.vue';
 import { getTagType } from '/@/utils/useTagColor';
@@ -53,7 +53,7 @@ function handleDelete(row: any) {
     </div>
     <div v-else-if="field === 'tag'">
       <el-tag :disable-transitions="true" :type=getTagType(row.goods.tag)>
-        {{  row.goods.tag ??  '--'  }}
+        {{ row.goods.tag ?? '--' }}
       </el-tag>
     </div>
     <div v-else-if="field === 'brand'">
@@ -83,6 +83,65 @@ function handleDelete(row: any) {
         {{ row.goods.minimum_price ? row.goods.currency_code + row.goods.minimum_price : '--' }}
       </div>
     </div>
+    <div v-else-if="field === 'score'">
+      <template v-if="row.goods.score !== null && row.goods.score !== undefined && row.goods.score !== ''">
+        <el-rate
+            v-if="row.goods.score > 0"
+            v-model="row.goods.score"
+            :colors="['#FF0000', '#FF9900', '#67C23A']"
+            disabled
+            show-score
+            text-color="#1e293b"
+        />
+        <span v-else>{{ row.goods.score }}</span> <!-- 值为0时显示0 -->
+      </template>
+      <template v-else>
+        <span>--</span> <!-- 无值时显示'--' -->
+      </template>
+    </div>
+
+    <div v-else-if="field === 'all_score'">
+      <template v-if="row.goods.all_score !== null && row.goods.all_score !== undefined && row.goods.all_score !== ''">
+        <el-rate
+            v-if="row.goods.all_score > 0"
+            v-model="row.goods.all_score"
+            :colors="['#FF0000', '#FF9900', '#67C23A']"
+            disabled
+            show-score
+            text-color="#1e293b"
+        />
+        <span v-else>{{ row.goods.all_score }}</span>
+      </template>
+      <template v-else>
+        <span>--</span>
+      </template>
+    </div>
+    <div v-else-if="field === 'stars'" class="flex flex-col font-normal" style="min-width: 170px">
+      <div v-for="i in [5,4,3,2,1]" :key="i" class="w-full flex items-center">
+        <span class="w-10 text-right mr-2">{{ i }}星</span>
+        <el-progress
+            striped
+            striped-flow
+            :color="'#3A8EE6'"
+            :percentage="row.goods[`ratings${i}`]"
+            :stroke-width="10"
+            class="flex-1"
+        />
+      </div>
+    </div>
+    <div v-else-if="field === 'all_stars'" class="flex flex-col font-normal" style="min-width: 170px">
+      <div v-for="i in [5,4,3,2,1]" :key="i" class="w-full flex items-center">
+        <span class="w-10 text-right mr-2">{{ i }}星</span>
+        <el-progress
+            striped
+            striped-flow
+            :color="'#3A8EE6'"
+            :percentage="row.goods[`all_rate${i}`]"
+            :stroke-width="10"
+            class="flex-1"
+        />
+      </div>
+    </div>
     <div v-else-if="field === 'status'">
       <el-tag :disable-transitions="true" :type=statusType>
         {{ statusText }}
@@ -109,5 +168,7 @@ function handleDelete(row: any) {
 </template>
 
 <style scoped>
-
+:deep(.flex-1 .el-progress__text) {
+  font-size: 14px !important;
+}
 </style>