feat(searchTerm): 优化搜索词表格功能

- 修改每页显示条数为 7 条
- 更新分页逻辑，支持自定义每页条数, 更改分页按钮顺序
- 添加搜索词总数显示
- 优化表格列宽和样式
- 注释掉回到顶部按钮

src/layout/component/main.vue

@@ -6,7 +6,7 @@
 			<LayoutParentView />
 			<!-- <LayoutFooter v-if="isFooter" /> -->
 		</el-scrollbar>
-		<el-backtop :target="setBacktopClass" />
+		<!--<el-backtop :target="setBacktopClass" />-->
 	</el-main>
 </template>
 

src/views/searchTerm/rootWordManage/components/root-word-manage-table.vue

@@ -437,7 +437,7 @@ function handleResponse(response: any) {
             v-model:page-size="pageSize"
             :page-sizes="[20, 40, 50, 100]"
             :total="total"
-            layout="total, sizes, prev, pager, next"
+            layout="prev, pager, next, sizes, total"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"/>
       </div>

src/views/searchTerm/targetingSearchTerm/index.vue

@@ -212,7 +212,6 @@ async function fetchSearchTermData() {
             <vxe-pager
                 v-model:current-page="targetingPage.currentPage"
                 v-model:page-size="targetingPage.pageSize"
-                :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                 :total="targetingPage.total"
                 @page-change="targetingPageChange">
             </vxe-pager>

src/views/searchTerm/topSearchTermRank/index.vue

@@ -222,7 +222,7 @@ function handleJump() {
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
           :page-sizes="[10, 20, 30, 50, 100, 200]"
-          layout="sizes, prev, pager, next, total"
+          layout="prev, pager, next, sizes, total"
           :total="total"
           @change="handlePageChange" />
       </div>

src/views/searchTerm/topSearchTermTable/index.vue

@@ -17,7 +17,7 @@ import enLocale from 'element-plus/es/locale/lang/en';
 
 
 const router = useRouter();
-const { tableData, total, currentPage, pageSize, handlePageChange } = usePagination(fetchTableData);
+const { tableData, total, currentPage, pageSize } = usePagination(fetchTableData);
 const marketplaceSelect = ref(marketplaceIdEnum[0].value); // 当前只有美国区 默认第一个为美国
 const marketplaceOptions = marketplaceIdEnum;
 const reportTypeSelect = ref('weekly');
@@ -29,7 +29,7 @@ const date = ref(calculateLastWeek()); // 设置默认日期为上周的周日
 const dateDimension = ref(date.value[0]);
 
 onBeforeMount(() => {
-  pageSize.value = 21; // 将usePagination中的pageSize默认修改每页显示21条
+  pageSize.value = 7; // 将usePagination中的pageSize默认修改每页显示21条
   fetchTableData();
 });
 
@@ -85,7 +85,7 @@ async function fetchTableData() {
   tableLoading.value = true;
   const query = {
     page: currentPage.value,
-    limit: pageSize.value,
+    limit: pageSize.value * 3,
     asin: asinInp.value,
     search_term: searchTermInp.value,
     report_type: reportTypeSelect.value,
@@ -227,6 +227,12 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
   }
   return [ 1, 1 ];
 }
+
+async function handlePageChange(newPage: number, newSize: number) {
+  currentPage.value = newPage;
+  pageSize.value = newSize;
+  await fetchTableData();
+}
 </script>
 
 <template>
@@ -324,13 +330,17 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
         <el-button :icon="Refresh" circle @click="refreshTable"></el-button>
       </div>
     </div>
+    <div class="mt-3.5">
+      <span class="font-medium" style="color: #606266">当前搜索词总数: </span>
+      <span class="font-medium">{{ total }}</span>
+    </div>
     <!-- table -->
     <el-card class="mt-5" shadow="never">
       <div style="height: 100%; overflow: auto">
         <el-table :data="tableData" :span-method="arraySpanMethod" height="920" stripe style="width: 100%">
           <!-- 保持索引是1, 2, 3的顺序 不会收到合并单元格的影响 -->
-          <el-table-column :index="(index) => Math.floor(index / 3) + 1" fixed type="index" width="50"/>
-          <el-table-column label="搜索词" prop="searchTerm" width="260">
+          <el-table-column label="No." :index="(index) => Math.floor(index / 3) + (currentPage - 1) * pageSize + 1" fixed type="index" width="50"/>
+          <el-table-column label="搜索词" prop="searchTerm" width="245">
             <template #header>
               <el-icon style="top: 2px; margin-right: 3px">
                 <Key/>
@@ -343,7 +353,7 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
               </el-link>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="搜索词搜索排名" prop="searchFrequencyRank" width="150">
+          <el-table-column align="center" label="搜索词搜索排名" prop="searchFrequencyRank" width="140">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
                 <Rank/>
@@ -354,7 +364,7 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
               <span class="font-medium">{{ row.searchFrequencyRank }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="点击分享率(SUM)" prop="clickShareSummary" width="150">
+          <el-table-column align="center" label="点击分享率(SUM)" prop="clickShareSummary" width="140">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
                 <Star/>
@@ -365,7 +375,7 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
               <span class="font-medium">{{ row.clickShareSummary }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="转化分享率(SUM)" prop="conversionShareSummary" width="150">
+          <el-table-column align="center" label="转化分享率(SUM)" prop="conversionShareSummary" width="140">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
                 <Star/>
@@ -376,7 +386,7 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
               <span class="font-medium">{{ row.conversionShareSummary }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="Asin" prop="clickedAsin">
+          <el-table-column align="center" label="Asin" prop="clickedAsin" width="160">
             <template #header>
               <el-icon style="top: 2px; margin-right: 5px">
                 <Goods/>
@@ -395,12 +405,12 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
               <!--</div>-->
             </template>
           </el-table-column>
-          <el-table-column label="标题" prop="clickedItemName">
+          <el-table-column label="标 题" prop="clickedItemName" width="160">
             <template #header>
               <el-icon style="top: 2px; margin-right: 5px">
                 <Reading/>
               </el-icon>
-              <span>标题</span>
+              <span>标 题</span>
             </template>
             <template #default="{ row }">
               <div class="text-sm text-left">
@@ -413,7 +423,7 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
               </div>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="点击分享率排名" prop="clickShareRank" width="150">
+          <el-table-column align="center" label="点击分享率排名" prop="clickShareRank" width="140">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
                 <Medal/>
@@ -454,9 +464,9 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
         <el-pagination
             v-model:current-page="currentPage"
             v-model:page-size="pageSize"
-            :page-sizes="[21, 42, 72, 102, 132, 162]"
-            :total="total"
-            layout="sizes, prev, pager, next, total"
+            :page-sizes="[7, 14, 21, 28, 35]"
+            :total="total / 3"
+            layout="prev, pager, next, sizes, total"
             @change="handlePageChange"/>
       </div>
     </el-card>