refactor(product-manage): 重构评论详情功能

- 移除竞品监控和商品监控中的 CommentDetail 组件
- 在 DataTableSlot 组件中添加跳转到评论详情页面的功能
- 重构评论详情页面，使用路由查询参数传递数据
- 调整评论详情相关组件的样式和布局

src/views/product-manage/comment-detail/component/NegativeClassification.vue

@@ -208,6 +208,6 @@ async function fetchLineChartData() {
 <style scoped>
 .chart {
   width: 100%;
-  height: 500px;
+  height: 400px;
 }
 </style>

src/views/product-manage/comment-detail/component/NegativeLabelChart.vue

@@ -56,7 +56,6 @@ async function fetchWordCloudData() {
     }
     hasData.value = true;
     setOption();
-    // initChart(option);
   } catch (error) {
     console.error('==Error==', error);
   } finally {
@@ -138,11 +137,11 @@ function setOption() {
 <template>
   <el-card v-loading="loading" class="border-none" shadow="never">
     <!-- 空状态 和 词云图 -->
-    <div class="w-full" style="min-height: 500px">
-      <div v-show="!loading && !hasData" style="min-height: 500px">
-        <el-empty :image-size="300" />
+    <div class="w-full" style="min-height: 400px">
+      <div v-show="!loading && !hasData" style="min-height: 400px">
+        <el-empty :image-size="200" />
       </div>
-      <div v-show="hasData" ref="chartRef" style="width: 100%; height: 500px"></div>
+      <div v-show="hasData" ref="chartRef" style="width: 100%; height: 400px"></div>
     </div>
   </el-card>
 </template>

src/views/product-manage/comment-detail/component/TitleCard.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   img: String,
   url: String,
   title: String,
-  asin: String
+  asin: String,
 });
 const { img, url, title, asin } = props;
 </script>
@@ -45,9 +45,12 @@ const { img, url, title, asin } = props;
         <div class="flex items-center">
           <div class="font-semibold italic">{{ asin }}</div>
           <VerticalDivider />
-          <el-icon class="ml-2 cursor-pointer" @click="handleCopy(asin || '')">
-            <DocumentCopy />
-          </el-icon>
+          <el-button :icon="DocumentCopy" link class="ml-2 cursor-pointer" :disabled="!asin" @click="handleCopy(asin || '')">
+            
+          </el-button>
+          <!--<el-icon class="ml-2 cursor-pointer" @click="handleCopy(asin || '')">-->
+          <!--  <DocumentCopy />-->
+          <!--</el-icon>-->
         </div>
       </div>
     </div>

src/views/product-manage/comment-detail/index.vue

@@ -11,28 +11,14 @@ import TitleCard from './component/TitleCard.vue';
 import DataTable from '/@/views/product-manage/comment-detail/component/DataTable.vue';
 import NegativeLabelChart from '/@/views/product-manage/comment-detail/component/NegativeLabelChart.vue';
 
+const route = useRoute()
 
-const isShowComment = defineModel({ default: false });
-
-const props = defineProps({
-  rowData: <any>Object,
-  title: String
-});
-const { rowData } = props;
-
+const rowData: any = ref(route.query)
 
 </script>
 
 <template>
-  <div class="drawer-container">
-    <el-drawer
-        ref="editDrawer"
-        v-model="isShowComment"
-        :show-close="false"
-        :title="`${title} - 评论详情`"
-        direction="btt"
-        size="85%"
-        style="background-color:#F3F4FB;">
+  <div v-if="rowData" class="drawer-container">
       <div class="sticky top-0" style="background-color:#F3F4FB; min-height: 20px; z-index: 2"></div>
       <div class="px-5">
         <!-- Title Card -->
@@ -57,19 +43,9 @@ const { rowData } = props;
           </el-card>
         </div>
       </div>
-    </el-drawer>
-
   </div>
 
 </template>
 
 <style scoped>
-.drawer-container :deep(.el-drawer__header) {
-  border-bottom: none;
-  font-weight: 500;
-}
-
-.drawer-container :deep(.el-drawer__title) {
-  font-size: 18px;
-}
 </style>

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

@@ -338,7 +338,7 @@ defineExpose({ fetchList });
   </vxe-grid>
   <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
   <CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
-  <CommentDetail v-if="isShowComment" v-model="isShowComment" :row-data="rowData.goods" title="竞品监控" />
+  <!--<CommentDetail v-if="isShowComment" v-model="isShowComment" :row-data="rowData.goods" title="竞品监控" />-->
   <HistoricalDetail v-if="isShowHistory" v-model="isShowHistory" :row-data="rowData.goods" title="竞品监控" />
 </template>
 

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

@@ -13,13 +13,15 @@ import ProductInfo from '/@/views/product-manage/component/ProductInfo.vue';
 import ProgressBar from '/@/views/product-manage/product-monitor/component/ProgressBar.vue';
 
 
+const router = useRouter();
+
 const props = defineProps<{
   row: any,
   field: any
 }>();
 const { row, field } = props;
 
-const emit: any = defineEmits([ 'edit-row', 'handle-delete', 'show-comment', 'show-history' ]);
+const emit: any = defineEmits([ 'edit-row', 'handle-delete', 'show-history' ]);
 
 const countryInfoStore = useCountryInfoStore();
 const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
@@ -59,6 +61,18 @@ function starsPercent(goods: any) {
 function showDetail(detail: any) {
   emit(`${ detail }`, row);
 }
+
+function goto() {
+  const routeUrl = router.resolve({
+    path: '/product/comment',
+    query: {
+      asin: row.asin,
+      title: row.goods.title,
+      img: row.goods.img
+    }
+  });
+  window.open(routeUrl.href, '_blank');
+}
 </script>
 
 <template>
@@ -172,7 +186,7 @@ function showDetail(detail: any) {
       <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" @click="showDetail('show-comment')">
+          <PermissionButton circle plain type="success" @click="goto">
             <el-icon>
               <Tickets />
             </el-icon>

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

@@ -339,7 +339,6 @@ defineExpose({ fetchList });
   </vxe-grid>
   <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
   <CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
-  <CommentDetail v-if="isShowComment" v-model="isShowComment" :row-data="rowData.goods" title="商品监控" />
   <HistoricalDetail v-if="isShowHistory" v-model="isShowHistory" :row-data="rowData.goods" title="商品监控"  />
 </template>
 

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

@@ -13,13 +13,15 @@ import ProductInfo from '/@/views/product-manage/component/ProductInfo.vue';
 import ProgressBar from '/@/views/product-manage/product-monitor/component/ProgressBar.vue';
 
 
+const router = useRouter();
+
 const props = defineProps<{
   row: any,
   field: any
 }>();
 const { row, field } = props;
 
-const emit: any = defineEmits([ 'edit-row', 'handle-delete', 'show-comment', 'show-history' ]);
+const emit: any = defineEmits([ 'edit-row', 'handle-delete', 'show-history' ]);
 
 const countryInfoStore = useCountryInfoStore();
 const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
@@ -40,6 +42,17 @@ function showDetail(detail: any) {
   emit(`${ detail }`, row);
 }
 
+function goto() {
+  const routeUrl = router.resolve({
+    path: '/product/comment',
+    query: {
+      asin: row.asin,
+      title: row.goods.title,
+      img: row.goods.img
+    }
+  });
+  window.open(routeUrl.href, '_blank');
+}
 </script>
 
 <template>
@@ -141,7 +154,7 @@ function showDetail(detail: any) {
       <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" @click="showDetail('show-comment')">
+          <PermissionButton circle plain type="success" @click="goto">
             <el-icon>
               <Tickets />
             </el-icon>