refactor(searchTerm): 重构搜索词页面布局和功能

- 更新了TopSearchTerm的布局结构
- 优化了查询条件区域的样式，增加了查询和刷新按钮
- 改进了市场和报告类型选择框的交互逻辑
- 调整了表格高度计算方式，使用自定义高度计算工具
- 优化了数据加载和刷新逻辑

src/views/searchTerm/topSearchTermRank/index.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { Key, PictureRounded, Refresh, Search, TopRight } from '@element-plus/icons-vue';
+import { DataLine, Key, PictureRounded, Refresh, Search, TopRight } from '@element-plus/icons-vue';
 import { nextTick, onBeforeMount, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { marketplaceIdEnum } from '/@/utils/marketplaceIdEnum';
@@ -16,12 +16,15 @@ 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';
+import { useCustomHeight } from '/@/utils/useCustomHeight';
 
 
 const titleContainer = ref();
 const queryContainer = ref();
-const { tableHeight } = useTableHeight(titleContainer, queryContainer);
+const heightObj = {
+  a: 32 + 13 + 40 + 70 + 40 + 48 + 95
+}
+const { tableHeight } = useCustomHeight(heightObj);
 
 const weekDate = ref([
   dayjs().subtract(2, 'week').day(0).format('YYYY-MM-DD'),
@@ -58,8 +61,27 @@ async function refreshTable() {
   await fetchTableData();
 }
 
-async function fetchTableData() {
+async function fetchTableData(isQuery = false) {
+  if (!validateSearchTermInput(searchTermInp.value)) {
+    if (searchTermInp.value.length == 0) {
+      return;
+    } else {
+      ElMessage.warning({ message: '搜索词只能输入数字和英文字母', plain: true });
+      return;
+    }
+  }
+  if (asinInp.value.length > 0 && !validateAsinInput(asinInp.value)) {
+    ElMessage.warning({ message: '不符合匹配规范', plain: true });
+    return;
+  }
+  // await fetchTableData();
+  
   tableLoading.value = true;
+  
+  if (isQuery) {
+    currentPage.value = 1;
+  }
+  
   const query = {
     page: currentPage.value,
     limit: pageSize.value,
@@ -143,8 +165,8 @@ function handleJump() {
     <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" style="width: 90px" @change="handleSelectChange">
+          <span class="font-medium mr-0.5">市 场 </span>
+          <el-select v-model="marketplaceSelect" style="width: 90px" @change="fetchTableData">
             <el-option
                 v-for="item in marketplaceOptions"
                 :key="item.value"
@@ -155,7 +177,7 @@ function handleJump() {
         </div>
         <div>
           <span class="font-medium mr-0.5">报告类型 </span>
-          <el-select v-model="reportTypeSelect" style="width: 90px" @change="handleSelectChange">
+          <el-select v-model="reportTypeSelect" style="width: 90px" @change="fetchTableData">
             <el-option label="周度" value="weekly"/>
             <el-option label="月度" value="monthly"/>
           </el-select>
@@ -166,10 +188,8 @@ function handleJump() {
               v-model="searchTermInp"
               :prefix-icon="Search"
               clearable
-              placeholder="输入后回车查询"
-              style="width: 240px"
-              @clear="handleSelectChange"
-              @keyup.enter="handleQueryChange"/>
+              placeholder="请输入"
+              style="width: 240px" />
         </div>
         <div>
           <span class="font-medium mr-0.5">ASIN </span>
@@ -177,10 +197,8 @@ function handleJump() {
               v-model="asinInp"
               :prefix-icon="Search"
               clearable
-              placeholder="输入后回车查询"
-              style="width: 180px"
-              @clear="handleSelectChange"
-              @keyup.enter="handleQueryChange"/>
+              placeholder="请输入"
+              style="width: 180px" />
         </div>
         <div>
           <span class="font-medium mr-0.5">报告日期 </span>
@@ -189,9 +207,13 @@ function handleJump() {
         </div>
       </div>
       <div class="flex">
-        <el-button :icon="TopRight" plain type="primary" @click="handleJump">搜索词管理</el-button>
-        <el-button :icon="Refresh" circle @click="refreshTable"></el-button>
+        <el-button :icon="Search" type="primary" @click="fetchTableData(true)">查 询</el-button>
+        <el-button :icon="Refresh" @click="refreshTable">刷 新</el-button>
       </div>
+      
+    </div>
+    <div class="mt-6">
+      <el-button :icon="TopRight" plain type="primary" @click="handleJump">搜索词管理</el-button>
     </div>
     <!-- table -->
     <el-card class="mt-5" shadow="never">

src/views/searchTerm/topSearchTermTable/index.vue

@@ -15,6 +15,7 @@ import { ElMessage } from 'element-plus';
 import dayjs from 'dayjs';
 import enLocale from 'element-plus/es/locale/lang/en';
 import { useTableHeight } from '/@/utils/useTableHeight';
+import { useCustomHeight } from '/@/utils/useCustomHeight';
 
 
 const router = useRouter();
@@ -31,7 +32,10 @@ const dateDimension = ref(date.value[0]);
 
 const titleContainer = ref();
 const queryContainer = ref();
-const { tableHeight } = useTableHeight(titleContainer, queryContainer);
+const heightObj = {
+  a: 32 + 13 + 40 + 70 + 40 + 48 + 95
+}
+const { tableHeight } = useCustomHeight(heightObj);
 
 onBeforeMount(() => {
   pageSize.value = 7; // 将usePagination中的pageSize默认修改每页显示21条
@@ -78,7 +82,7 @@ function calculateEndDate(startDate: string) {
 
 async function refreshTable() {
   currentPage.value = 1;
-  pageSize.value = 21;
+  pageSize.value = 7;
   asinInp.value = '';
   searchTermInp.value = '';
   reportTypeSelect.value = 'weekly';
@@ -86,8 +90,13 @@ async function refreshTable() {
   await fetchTableData();
 }
 
-async function fetchTableData() {
+async function fetchTableData(isQuery = false) {
   tableLoading.value = true;
+
+  if (isQuery) {
+    currentPage.value = 1;
+  }
+
   const query = {
     page: currentPage.value,
     limit: pageSize.value * 3,
@@ -115,9 +124,9 @@ async function fetchTableData() {
 /**
  * 下拉框值改变和input清空事件触发
  */
-async function handleSelectChange() {
+function handleSelectChange() {
   calculateDate();
-  await fetchTableData();
+  // await fetchTableData();
 }
 
 /**
@@ -256,7 +265,7 @@ async function handlePageChange(newPage: number, newSize: number) {
     <div ref="queryContainer" class="flex justify-between">
       <div class="flex gap-5 flex-wrap">
         <div>
-          <span class="font-medium mr-0.5">市场 </span>
+          <span class="font-medium mr-0.5">市 场 </span>
           <el-select v-model="marketplaceSelect" style="width: 90px" @change="handleSelectChange">
             <el-option
                 v-for="item in marketplaceOptions"
@@ -279,10 +288,8 @@ async function handlePageChange(newPage: number, newSize: number) {
               v-model="searchTermInp"
               :prefix-icon="Search"
               clearable
-              placeholder="输入后回车查询"
-              style="width: 240px"
-              @clear="handleSelectChange"
-              @keyup.enter="handleQueryChange"/>
+              placeholder="请输入"
+              style="width: 240px" />
         </div>
         <div>
           <span class="font-medium mr-0.5">ASIN </span>
@@ -290,10 +297,8 @@ async function handlePageChange(newPage: number, newSize: number) {
               v-model="asinInp"
               :prefix-icon="Search"
               clearable
-              placeholder="输入后回车查询"
-              style="width: 180px"
-              @clear="handleSelectChange"
-              @keyup.enter="handleQueryChange"/>
+              placeholder="请输入"
+              style="width: 180px" />
         </div>
         <div>
           <span class="font-medium mr-0.5">报告日期 </span>
@@ -321,23 +326,26 @@ async function handlePageChange(newPage: number, newSize: number) {
         </div>
       </div>
       <div class="flex">
-        <el-button :icon="TopRight" plain type="primary" @click="handleJump">搜索词管理</el-button>
-        <el-button
-            :disabled="!tableData.length"
-            :icon="Download"
-            :loading="downloadLoading"
-            plain
-            round
-            type="success"
-            @click="handleDownload"
-        >下载表格
-        </el-button>
-        <el-button :icon="Refresh" circle @click="refreshTable"></el-button>
+        <el-button :icon="Search" type="primary" @click="fetchTableData(true)">查 询</el-button>
+        <el-button :icon="Refresh" @click="refreshTable">刷 新</el-button>
       </div>
     </div>
+    <div class="mt-6">
+      <el-button :icon="TopRight" plain type="primary" @click="handleJump">搜索词管理</el-button>
+      <el-button
+          :disabled="!tableData.length"
+          :icon="Download"
+          :loading="downloadLoading"
+          plain
+          round
+          type="success"
+          @click="handleDownload"
+      >下载表格
+      </el-button>
+    </div>
     <!-- table -->
     <el-card class="mt-5" shadow="never">
-      <div >
+      <div>
         <el-table :data="tableData" :span-method="arraySpanMethod" :height="tableHeight" stripe style="width: 100%">
           <!-- 保持索引是1, 2, 3的顺序 不会收到合并单元格的影响 -->
           <el-table-column :index="(index) => Math.floor(index / 3) + (currentPage - 1) * pageSize + 1" fixed