feat(product-manage): 新增商品监控/竞品监控页面功能

- 为 DataTableSlot 组件添加评论详情和历史详情按钮
- 优化产品品牌和产品种类页面的标题显示
- 调整产品列表中的 SKU 提示样式
- 重构产品监控页面的选项获取逻辑

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

@@ -6,7 +6,7 @@
  */
 
 import { useCountryInfoStore } from '/@/stores/countryInfo';
-import { Delete, InfoFilled, Operation } from '@element-plus/icons-vue';
+import { Delete, InfoFilled, Operation, Tickets, Timer } from '@element-plus/icons-vue';
 import { getTagType } from '/@/utils/useTagColor';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 import ProductInfo from '/@/views/product-manage/product-list/component/ProductInfo.vue';
@@ -164,10 +164,28 @@ function starsPercent(goods: any) {
       </el-tag>
     </div>
     <div v-else-if="field === 'operate'">
+      <div class="flex justify-center gap-2 mb-2">
+        <el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
+                    placement="top" popper-class="custom-btn-tooltip">
+          <PermissionButton circle plain type="success">
+            <el-icon>
+              <Tickets/>
+            </el-icon>
+          </PermissionButton>
+        </el-tooltip>
+        <el-tooltip :enterable="false" :show-arrow="false" content="历史详情" hide-after="0"
+                    placement="top" popper-class="custom-btn-tooltip">
+          <PermissionButton circle plain type="success">
+            <el-icon>
+              <Timer/>
+            </el-icon>
+          </PermissionButton>
+        </el-tooltip>
+      </div>
       <div class="flex justify-center gap-2">
         <PermissionButton circle plain type="warning" @click="handleEdit">
           <el-icon>
-            <Operation />
+            <Operation/>
           </el-icon>
         </PermissionButton>
         <el-popconfirm
@@ -180,7 +198,7 @@ function starsPercent(goods: any) {
           <template #reference>
             <PermissionButton circle plain type="danger">
               <el-icon>
-                <Delete />
+                <Delete/>
               </el-icon>
             </PermissionButton>
           </template>
@@ -208,3 +226,12 @@ function starsPercent(goods: any) {
   font-size: 14px !important;
 }
 </style>
+
+<style lang="scss">
+.custom-btn-tooltip {
+  background-color: #EFF9EB !important;
+  color: #606266 !important;
+  border: 1px solid #67C23A !important;
+  font-size: 14px;
+}
+</style>

src/views/product-manage/product-list/component/ProductInfo.vue

@@ -23,7 +23,6 @@ const props = defineProps({
     default: false
   }
 });
-console.log('props.item=> ', props.item);
 </script>
 
 <template>
@@ -49,7 +48,7 @@ console.log('props.item=> ', props.item);
       </div>
     </el-image>
     <div class="text-left">
-      <el-tooltip :content="item.title" :disabled="showTitleTooltip" :show-after="300" effect="dark"
+      <el-tooltip :content="item.title" :disabled="showTitleTooltip" show-after="300" effect="dark"
                   placement="top-start">
         <el-link :href=item.url :underline="false" target="_blank" type="primary">
           <span class="line-clamp-1 text-ellipsis whitespace-normal">{{ item.title || '--' }}</span>
@@ -63,7 +62,7 @@ console.log('props.item=> ', props.item);
           </span>
           
         </p>
-        <el-tooltip :content="item.sku" class="">
+        <el-tooltip :content="item.sku" effect="light" show-after="300">
           <p class="m-0 p-0 line-clamp-1 text-ellipsis"> 
             SKU: 
             <span style="color: #1d2129;">

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

@@ -6,7 +6,7 @@
  */
 
 import { useCountryInfoStore } from '/@/stores/countryInfo';
-import { Delete, InfoFilled, Operation } from '@element-plus/icons-vue';
+import { Delete, InfoFilled, Operation, Tickets, Timer } from '@element-plus/icons-vue';
 import { getTagType } from '/@/utils/useTagColor';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 import ProductInfo from '/@/views/product-manage/product-list/component/ProductInfo.vue';
@@ -40,7 +40,7 @@ function onConfirm() {
 <template>
   <div class="font-medium">
     <div v-if="field === 'product_info'">
-      <ProductInfo :img-width="50" :item="row.goods" />
+      <ProductInfo :img-width="50" :item="row.goods"/>
     </div>
     <div v-else-if="field === 'country_code'">
       <el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
@@ -120,10 +120,10 @@ function onConfirm() {
       </template>
     </div>
     <div v-else-if="field === 'stars'" class="flex flex-col font-normal" style="min-width: 170px">
-      <ProgressBar :row="row" percentage="ratings" />
+      <ProgressBar :row="row" percentage="ratings"/>
     </div>
     <div v-else-if="field === 'all_stars'" class="flex flex-col font-normal" style="min-width: 170px">
-      <ProgressBar :row="row" percentage="all_rate" />
+      <ProgressBar :row="row" percentage="all_rate"/>
     </div>
     <div v-else-if="field === 'status'">
       <el-tag :disable-transitions="true" :type=statusType>
@@ -131,10 +131,28 @@ function onConfirm() {
       </el-tag>
     </div>
     <div v-else-if="field === 'operate'">
+      <div class="flex justify-center gap-2 mb-2">
+        <el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
+                    placement="top" popper-class="custom-btn-tooltip">
+          <PermissionButton circle plain type="success">
+            <el-icon>
+              <Tickets/>
+            </el-icon>
+          </PermissionButton>
+        </el-tooltip>
+        <el-tooltip :enterable="false" :show-arrow="false" content="历史详情" hide-after="0"
+                    placement="top" popper-class="custom-btn-tooltip">
+          <PermissionButton circle plain type="success">
+            <el-icon>
+              <Timer/>
+            </el-icon>
+          </PermissionButton>
+        </el-tooltip>
+      </div>
       <div class="flex justify-center gap-2">
         <PermissionButton circle plain type="warning" @click="handleEdit">
           <el-icon>
-            <Operation />
+            <Operation/>
           </el-icon>
         </PermissionButton>
         <el-popconfirm
@@ -147,7 +165,7 @@ function onConfirm() {
           <template #reference>
             <PermissionButton circle plain type="danger">
               <el-icon>
-                <Delete />
+                <Delete/>
               </el-icon>
             </PermissionButton>
           </template>
@@ -174,4 +192,14 @@ function onConfirm() {
 :deep(.flex-1 .el-progress__text) {
   font-size: 14px !important;
 }
+
+</style>
+
+<style lang="scss">
+.custom-btn-tooltip {
+  background-color: #EFF9EB !important;
+  color: #606266 !important;
+  border: 1px solid #67C23A !important;
+  font-size: 14px;
+}
 </style>

src/views/product-manage/product-monitor/index.vue

@@ -38,33 +38,22 @@ const formInline = reactive<any>({
 });
 provide('query-parameter', formInline);
 
-const groupOptions: any = ref([]);
-const brandsOptions: any = ref([]);
-const shopsOptions: any = ref([]);
+const groupOptions = ref<any>([]);
+const brandsOptions = ref<any>([]);
+const shopsOptions = ref<any>([]);
 
 provide('groupOptions', groupOptions);
 provide('brandsOptions', brandsOptions);
 provide('shopOptions', shopsOptions);
 
 onBeforeMount(() => {
-  fetchGroupOptions();
-  fetchBrandsOptions();
-  fetchShopsOptions();
+  fetchOptions();
 });
 
-async function fetchGroupOptions() {
-  const res = await useResponse(api.getGroupOptions);
-  groupOptions.value = res.data;
-}
-
-async function fetchBrandsOptions() {
-  const res = await useResponse(api.getBrandsOptions);
-  brandsOptions.value = res.data;
-}
-
-async function fetchShopsOptions() {
-  const res = await useResponse(api.getShopsOptions);
-  shopsOptions.value = res.data;
+async function fetchOptions() {
+  groupOptions.value = (await useResponse(api.getGroupOptions)).data;
+  brandsOptions.value = (await useResponse(api.getBrandsOptions)).data;
+  shopsOptions.value = (await useResponse(api.getShopsOptions)).data;
 }
 
 const btnLoading = ref(false);

src/views/sku-manage/product-brand/index.vue

@@ -40,7 +40,7 @@ function resetParameter() {
 <template>
   <div class="p-5 flex-grow">
     <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
-      <div ref="titleContainer" class="text-xl font-semibold pb-5">产品属性</div>
+      <div ref="titleContainer" class="text-xl font-semibold pb-5">产品品牌</div>
       <!-- 查询条件 -->
       <div ref="queryContainer" class="flex justify-between">
         <div class="flex flex-1">

src/views/sku-manage/product-category/component/DataTableSlot.vue

@@ -31,7 +31,7 @@ function onConfirm() {
   <div class="font-medium">
     <div v-if="field === 'operate'">
       <div class="flex justify-center gap-2">
-        <PermissionButton circle plain type="warning" @click="handleEdit">
+        <PermissionButton :disabled="row.status == '3'" circle plain type="warning" @click="handleEdit">
           <el-icon>
             <Operation />
           </el-icon>
@@ -44,7 +44,7 @@ function onConfirm() {
             @confirm="onConfirm"
         >
           <template #reference>
-            <PermissionButton circle plain type="danger">
+            <PermissionButton :disabled="row.status == '3'" circle plain type="danger">
               <el-icon>
                 <Delete />
               </el-icon>

src/views/sku-manage/product-category/index.vue

@@ -40,7 +40,7 @@ function resetParameter() {
 <template>
   <div class="p-5 flex-grow">
     <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
-      <div ref="titleContainer" class="text-xl font-semibold pb-5">产品属性</div>
+      <div ref="titleContainer" class="text-xl font-semibold pb-5">产品种类</div>
       <!-- 查询条件 -->
       <div ref="queryContainer" class="flex justify-between">
         <div class="flex flex-1">