feat(searchTerm): 优化搜索词页面布局和表格高度

- 修改 .env.development 中的 API_URL
- 优化 topSearchTermRank 和 topSearchTermTable 页面布局
- 添加 useTableHeight 钩子计算表格高度
- 调整 rootWordManageTable 表格高度

.env.development

@@ -4,9 +4,9 @@ ENV='development'
 
 # 本地环境接口地址
 # VITE_API_URL = 'http://127.0.0.1:8000'
-VITE_API_URL='http://192.168.1.225/'
+#VITE_API_URL='http://192.168.1.225/'
 # VITE_API_URL='http://192.168.1.25:8080/'
-# VITE_API_URL = 'http://amzads.zositechc.cn'
+ VITE_API_URL = 'http://amzads.zositechc.cn'
 
 # 是否启用按钮权限
 VITE_PM_ENABLED=true

src/utils/useTableHeight.ts

@@ -0,0 +1,47 @@
+/**
+ * 计算表格高度
+ * @param titleRef 标题容器
+ * @param queryRef 查询条件的容器
+ */
+export function useTableHeight(titleRef: Ref<HTMLElement | null>, queryRef: Ref<HTMLElement | null>) {
+  const computeTableHeight = ref({
+    titleHeight: 0,
+    queryHeight: 0,
+    // headerHeight: 50,
+    dividerHeight: 48,
+    toolbarHeight: 32 + 13 + 40 + 70,
+    padding: 40,
+  });
+
+  const totalOtherHeight = ref(0);
+  const tableHeight = ref(0);
+
+  const computeHeight = () => {
+    const titleElement = unref(titleRef);
+    const queryElement = unref(queryRef);
+
+    computeTableHeight.value.titleHeight = titleElement ? titleElement.scrollHeight : 0;
+    computeTableHeight.value.queryHeight = queryElement ? queryElement.scrollHeight : 0;
+
+    totalOtherHeight.value =
+        computeTableHeight.value.titleHeight +
+        computeTableHeight.value.queryHeight +
+        // computeTableHeight.value.headerHeight +
+        computeTableHeight.value.dividerHeight +
+        computeTableHeight.value.toolbarHeight +
+        computeTableHeight.value.padding;
+// 1355 960
+    tableHeight.value = window.innerHeight - totalOtherHeight.value;
+  };
+
+  onMounted(() => {
+    computeHeight(); // 组件挂载时计算一次高度
+    window.addEventListener('resize', computeHeight); // 监听窗口大小变化
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', computeHeight); // 移除事件监听器
+  });
+
+  return { tableHeight: tableHeight as Ref<number> }; // 返回类型注释
+}

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

@@ -360,8 +360,8 @@ function handleResponse(response: any) {
     </el-card>
     <!-- 表格 -->
     <el-card shadow="hover" style="border: none">
-      <div style="height: 800px">
-        <el-table :data="tableData" height="800" stripe style="width: 100%">
+      <div>
+        <el-table :data="tableData" height="600" stripe style="width: 100%">
           <el-table-column align="center" type="index" width="60">
             <template #header>
               <span>序号</span>

src/views/searchTerm/topSearchTermRank/index.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 /**
  * @Name: index.vue
  * @Description: 搜索词-TopSearchTerm Rank
@@ -16,14 +16,20 @@ import ColumnChart from '/src/views/searchTerm/topSearchTermRank/column-chart.vu
 import dayjs from 'dayjs';
 import WeekRangePicker from '/@/components/WeekRangePicker/index.vue';
 import MonthRangePicker from '/@/components/MonthRangePicker/index.vue';
+import { useTableHeight } from '/@/utils/useTableHeight';
+
+
+const titleContainer = ref();
+const queryContainer = ref();
+const { tableHeight } = useTableHeight(titleContainer, queryContainer);
 
 const weekDate = ref([
   dayjs().subtract(2, 'week').day(0).format('YYYY-MM-DD'),
-  dayjs().subtract(1, 'week').day(6).format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'week').day(6).format('YYYY-MM-DD')
 ]);
 const monthDate = ref([
   dayjs().subtract(2, 'month').startOf('month').format('YYYY-MM-DD'),
-  dayjs().subtract(0, 'month').startOf('month').format('YYYY-MM-DD'),
+  dayjs().subtract(0, 'month').startOf('month').format('YYYY-MM-DD')
 ]);
 const router = useRouter();
 const { tableData, total, currentPage, pageSize, handlePageChange } = usePagination(fetchTableData);
@@ -38,7 +44,7 @@ onBeforeMount(() => {
   fetchTableData();
 });
 
-watch([weekDate, monthDate], () => {
+watch([ weekDate, monthDate ], () => {
   fetchTableData();
 });
 
@@ -62,7 +68,7 @@ async function fetchTableData() {
     report_type: reportTypeSelect.value,
     marketplace_Ids: marketplaceSelect.value,
     date_start: reportTypeSelect.value == 'weekly' ? weekDate.value[0] : monthDate.value[0],
-    date_end: reportTypeSelect.value == 'weekly' ? weekDate.value[1] : monthDate.value[1],
+    date_end: reportTypeSelect.value == 'weekly' ? weekDate.value[1] : monthDate.value[1]
   };
   try {
     const response = await getTopSearchTermTable(query);
@@ -122,109 +128,109 @@ function handleJump() {
 </script>
 
 <template>
-  <div class="mx-3">
+  <div ref="titleContainer" class="mx-3">
     <el-divider>
       <div class="font-bold text-xl">
         <el-icon style="top: 3px">
-          <DataLine />
+          <DataLine/>
         </el-icon>
         Top Search Term - Rank
       </div>
     </el-divider>
   </div>
-  <el-card class="mx-3 mb-2.5" v-loading="tableLoading" style="border: none">
+  <el-card v-loading="tableLoading" class="mx-3 mb-2.5" style="border: none">
     <!-- table筛选栏 -->
-    <div class="flex justify-between">
+    <div ref="queryContainer" class="flex justify-between">
       <div class="flex gap-5 flex-wrap">
         <div>
           <span class="font-medium mr-0.5">市场 </span>
-          <el-select v-model="marketplaceSelect" @change="handleSelectChange" style="width: 90px">
+          <el-select v-model="marketplaceSelect" style="width: 90px" @change="handleSelectChange">
             <el-option
-              v-for="item in marketplaceOptions"
-              :disabled="item.disabled"
-              :key="item.value"
-              :value="item.value"
-              :label="item.label" />
+                v-for="item in marketplaceOptions"
+                :key="item.value"
+                :disabled="item.disabled"
+                :label="item.label"
+                :value="item.value"/>
           </el-select>
         </div>
         <div>
           <span class="font-medium mr-0.5">报告类型 </span>
-          <el-select v-model="reportTypeSelect" @change="handleSelectChange" style="width: 90px">
-            <el-option label="周度" value="weekly" />
-            <el-option label="月度" value="monthly" />
+          <el-select v-model="reportTypeSelect" style="width: 90px" @change="handleSelectChange">
+            <el-option label="周度" value="weekly"/>
+            <el-option label="月度" value="monthly"/>
           </el-select>
         </div>
         <div>
           <span class="font-medium mr-0.5">搜索词 </span>
           <el-input
-            v-model="searchTermInp"
-            @keyup.enter="handleQueryChange"
-            :prefix-icon="Search"
-            placeholder="输入后回车查询"
-            clearable
-            @clear="handleSelectChange"
-            style="width: 240px" />
+              v-model="searchTermInp"
+              :prefix-icon="Search"
+              clearable
+              placeholder="输入后回车查询"
+              style="width: 240px"
+              @clear="handleSelectChange"
+              @keyup.enter="handleQueryChange"/>
         </div>
         <div>
           <span class="font-medium mr-0.5">ASIN </span>
           <el-input
-            v-model="asinInp"
-            @keyup.enter="handleQueryChange"
-            :prefix-icon="Search"
-            placeholder="输入后回车查询"
-            clearable
-            @clear="handleSelectChange"
-            style="width: 180px" />
+              v-model="asinInp"
+              :prefix-icon="Search"
+              clearable
+              placeholder="输入后回车查询"
+              style="width: 180px"
+              @clear="handleSelectChange"
+              @keyup.enter="handleQueryChange"/>
         </div>
         <div>
           <span class="font-medium mr-0.5">报告日期 </span>
-          <MonthRangePicker v-model="monthDate" v-if="reportTypeSelect === 'monthly'" />
-          <WeekRangePicker v-model="weekDate" v-else />
+          <MonthRangePicker v-if="reportTypeSelect === 'monthly'" v-model="monthDate"/>
+          <WeekRangePicker v-else v-model="weekDate"/>
         </div>
       </div>
       <div class="flex">
-        <el-button type="primary" plain @click="handleJump" :icon="TopRight">搜索词管理</el-button>
-        <el-button @click="refreshTable" :icon="Refresh" circle></el-button>
+        <el-button :icon="TopRight" plain type="primary" @click="handleJump">搜索词管理</el-button>
+        <el-button :icon="Refresh" circle @click="refreshTable"></el-button>
       </div>
     </div>
     <!-- table -->
-    <el-card shadow="never" class="mt-5">
-      <div style="height: 100%; overflow: auto">
-        <el-table :data="tableData" height="920" stripe style="width: 100%">
-          <el-table-column fixed prop="searchTerm" label="搜索词" width="260">
+    <el-card class="mt-5" shadow="never">
+      <div>
+        <el-table :data="tableData" :height="tableHeight" stripe style="width: 100%">
+          <el-table-column fixed label="搜索词" prop="searchTerm" width="260">
             <template #header>
               <el-icon style="top: 2px; margin-right: 3px">
-                <Key />
+                <Key/>
               </el-icon>
               <span>搜索词</span>
             </template>
             <template #default="{ row }">
-              <el-link :underline="false" target="_blank" style="color: #5a6fc0">
+              <el-link :underline="false" style="color: #5a6fc0" target="_blank">
                 {{ row.searchTerm }}
               </el-link>
             </template>
           </el-table-column>
-          <el-table-column prop="rank" label="搜索词搜索排名" align="center">
+          <el-table-column align="center" label="搜索词搜索排名" prop="rank">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
-                <PictureRounded />
+                <PictureRounded/>
               </el-icon>
               <span>Tendency</span>
             </template>
             <template #default="{ row }">
-              <ColumnChart :rowData="row" />
+              <ColumnChart :rowData="row"/>
             </template>
           </el-table-column>
         </el-table>
       </div>
       <div class="mt-3.5 flex justify-end">
         <el-pagination
-          v-model:current-page="currentPage"
-          v-model:page-size="pageSize"
-          :page-sizes="[10, 20, 30, 50, 100, 200]"
-          layout="prev, pager, next, sizes, total"
-          :total="total"
-          @change="handlePageChange" />
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :page-sizes="[10, 20, 30, 50, 100, 200]"
+            :total="total"
+            layout="prev, pager, next, sizes, total"
+            @change="handlePageChange"/>
       </div>
     </el-card>
   </el-card>

src/views/searchTerm/topSearchTermTable/index.vue

@@ -14,6 +14,7 @@ import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import dayjs from 'dayjs';
 import enLocale from 'element-plus/es/locale/lang/en';
+import { useTableHeight } from '/@/utils/useTableHeight';
 
 
 const router = useRouter();
@@ -28,6 +29,10 @@ const downloadLoading = ref(false);
 const date = ref(calculateLastWeek()); // 设置默认日期为上周的周日到周六
 const dateDimension = ref(date.value[0]);
 
+const titleContainer = ref();
+const queryContainer = ref();
+const { tableHeight } = useTableHeight(titleContainer, queryContainer);
+
 onBeforeMount(() => {
   pageSize.value = 7; // 将usePagination中的pageSize默认修改每页显示21条
   fetchTableData();
@@ -203,18 +208,18 @@ async function handleDownload() {
   }
 }
 
-function getTagStyle(clickShareRank: number): Record<string, string> {
-  switch (clickShareRank) {
-    case 1:
-      return { backgroundColor: '#fbbf24', color: '#fff', border: '1px solid #fbbf24' }; // 金色
-    case 2:
-      return { backgroundColor: '#C0C0C0', color: '#fff', border: '1px solid #C0C0C0' }; // 银色
-    case 3:
-      return { backgroundColor: '#CD7F32', color: '#fff', border: '1px solid #CD7F32' }; // 铜色
-    default:
-      return { backgroundColor: '#f0f0f0', color: '#000', border: '1px solid #e0e0e0' };
-  }
-}
+// function getTagStyle(clickShareRank: number): Record<string, string> {
+//   switch (clickShareRank) {
+//     case 1:
+//       return { backgroundColor: '#fbbf24', color: '#fff', border: '1px solid #fbbf24' }; // 金色
+//     case 2:
+//       return { backgroundColor: '#C0C0C0', color: '#fff', border: '1px solid #C0C0C0' }; // 银色
+//     case 3:
+//       return { backgroundColor: '#CD7F32', color: '#fff', border: '1px solid #CD7F32' }; // 铜色
+//     default:
+//       return { backgroundColor: '#f0f0f0', color: '#000', border: '1px solid #e0e0e0' };
+//   }
+// }
 
 function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
   // 每三个合并为一个单元格
@@ -236,7 +241,7 @@ async function handlePageChange(newPage: number, newSize: number) {
 </script>
 
 <template>
-  <div class="mx-3">
+  <div ref="titleContainer" class="mx-3">
     <el-divider>
       <div class="font-bold text-xl">
         <el-icon style="top: 3px">
@@ -248,7 +253,7 @@ async function handlePageChange(newPage: number, newSize: number) {
   </div>
   <el-card v-loading="tableLoading" class="mx-3 mb-2.5" style="border: none;">
     <!-- table筛选栏 -->
-    <div class="flex justify-between">
+    <div ref="queryContainer" class="flex justify-between">
       <div class="flex gap-5 flex-wrap">
         <div>
           <span class="font-medium mr-0.5">市场 </span>
@@ -330,17 +335,14 @@ async function handlePageChange(newPage: number, newSize: number) {
         <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%">
+      <div >
+        <el-table :data="tableData" :span-method="arraySpanMethod" :height="tableHeight" stripe style="width: 100%">
           <!-- 保持索引是1, 2, 3的顺序 不会收到合并单元格的影响 -->
-          <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">
+          <el-table-column :index="(index) => Math.floor(index / 3) + (currentPage - 1) * pageSize + 1" fixed
+                           label="No." type="index" width="80"/>
+          <el-table-column label="搜索词" prop="searchTerm">
             <template #header>
               <el-icon style="top: 2px; margin-right: 3px">
                 <Key/>
@@ -348,12 +350,12 @@ async function handlePageChange(newPage: number, newSize: number) {
               <span>搜索词</span>
             </template>
             <template #default="{ row }">
-              <el-link :underline="false" style="color: #5a6fc0" target="_blank"
-              >{{ row.searchTerm }}
+              <el-link :underline="false" style="font-size: 18px;" target="_blank" type="primary">
+                {{ row.searchTerm }}
               </el-link>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="搜索词搜索排名" prop="searchFrequencyRank" width="140">
+          <el-table-column align="center" label="搜索词搜索排名" prop="searchFrequencyRank" width="90">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
                 <Rank/>
@@ -364,7 +366,7 @@ async function handlePageChange(newPage: number, newSize: number) {
               <span class="font-medium">{{ row.searchFrequencyRank }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="点击分享率(SUM)" prop="clickShareSummary" width="140">
+          <el-table-column align="center" label="点击分享率(SUM)" prop="clickShareSummary" width="90">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
                 <Star/>
@@ -375,7 +377,7 @@ async function handlePageChange(newPage: number, newSize: number) {
               <span class="font-medium">{{ row.clickShareSummary }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="转化分享率(SUM)" prop="conversionShareSummary" width="140">
+          <el-table-column align="center" label="转化分享率(SUM)" prop="conversionShareSummary" width="90">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
                 <Star/>
@@ -405,7 +407,7 @@ async function handlePageChange(newPage: number, newSize: number) {
               <!--</div>-->
             </template>
           </el-table-column>
-          <el-table-column label="标 题" prop="clickedItemName" width="160">
+          <el-table-column label="标 题" prop="clickedItemName">
             <template #header>
               <el-icon style="top: 2px; margin-right: 5px">
                 <Reading/>
@@ -423,7 +425,7 @@ async function handlePageChange(newPage: number, newSize: number) {
               </div>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="点击分享率排名" prop="clickShareRank" width="140">
+          <el-table-column align="center" label="点击分享率排名" prop="clickShareRank" width="90">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
                 <Medal/>
@@ -431,12 +433,12 @@ async function handlePageChange(newPage: number, newSize: number) {
               <span>点击分享率排名</span>
             </template>
             <template #default="{ row }">
-              <el-tag :style="getTagStyle(row.clickShareRank)">
-                {{ row.clickShareRank }}
-              </el-tag>
+              <!--<el-tag :style="getTagStyle(row.clickShareRank)">-->
+              {{ row.clickShareRank }}
+              <!--</el-tag>-->
             </template>
           </el-table-column>
-          <el-table-column align="center" label="点击分享率" prop="clickShare">
+          <el-table-column align="center" label="点击分享率" prop="clickShare" width="90">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
                 <Pointer/>
@@ -447,7 +449,7 @@ async function handlePageChange(newPage: number, newSize: number) {
               <span class="font-semibold">{{ row.clickShare }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="转化分享率" prop="conversionShare">
+          <el-table-column align="center" label="转化分享率" prop="conversionShare" width="90">
             <template #header>
               <el-icon style="top: 2px; margin-right: 5px">
                 <Switch/>