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

- 修改 ASIN 视图和品牌视图的卡片样式，使用 flex 布局
- 调整表格高度为自适应，根据视口高度计算
- 在 useTableHeight 钩子中添加日志输出，便于调试

src/utils/useTableHeight.ts

@@ -42,6 +42,6 @@ export function useTableHeight(titleRef: Ref<HTMLElement | null>, queryRef: Ref<
   onUnmounted(() => {
     window.removeEventListener('resize', computeHeight); // 移除事件监听器
   });
-
+  console.log('tableHeight=> ', tableHeight);
   return { tableHeight: tableHeight as Ref<number> }; // 返回类型注释
 }

src/views/searchTerm/asinView/index.vue

@@ -28,7 +28,7 @@ const asinInp = ref('B0');
 const tableLoading = ref(false);
 
 const gridOptions: any = reactive({
-  height: 'auto',
+  height: '100%',
   border: false,
   round: true,
   columnConfig: {
@@ -144,9 +144,9 @@ function validateAsinInput(input: string) {
 </script>
 
 <template>
-  <div class="py-2 px-2.5" style="background-color: #f7f7f7">
+  <div class="py-2 px-2.5 flex" style="background-color: #f7f7f7">
     <el-card shadow="hover" class="mb-2.5" style="border: none; margin-bottom: 10px">
-      <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>
@@ -188,8 +188,8 @@ function validateAsinInput(input: string) {
         </div>
       </div>
     </el-card>
-    <el-card shadow="hover" style="border: none">
-      <div style="overflow: hidden; width: 100%; height: 950px" v-loading="tableLoading">
+    <el-card shadow="hover" style="border: none; flex: 1 1 auto; height: calc(100vh - 154px)">
+      <div style="overflow: hidden; width: 100%; height: calc(100vh - 174px)" v-loading="tableLoading">
         <vxe-grid v-bind="gridOptions">
           <template #toolbar_buttons></template>
           <template v-for="col in asinColumns" #[`${col.field}_default`]="{ row }">

src/views/searchTerm/brandView/index.vue

@@ -178,8 +178,8 @@ function calculateLastWeek() {
         </div>
       </div>
     </el-card>
-    <el-card shadow="hover" style="border: none">
-      <div style="overflow: hidden; width: 100%; height: 950px" v-loading="tableLoading">
+    <el-card shadow="hover" style="border: none; flex: 1 1 auto; height: calc(100vh - 154px)">
+      <div style="overflow: hidden; width: 100%; height: calc(100vh - 174px)" v-loading="tableLoading">
         <vxe-grid v-bind="gridOptions">
           <template #toolbar_buttons></template>
           <template v-for="col in brandColumns" #[`${col.field}_default`]="{ row }">