Merge branch 'refs/heads/wang' into test

src/views/keyword/topSearchTermTable/index.vue

@@ -9,7 +9,20 @@ import { onMounted, ref, watch } from 'vue';
 import { usePagination } from '/@/utils/usePagination';
 import { getTopSearchTermTable } from './api';
 import { marketplaceIdEnum } from '/@/utils/marketplaceIdEnum';
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import {
+  Download,
+  Goods,
+  Key,
+  Medal,
+  Memo,
+  Pointer,
+  Rank,
+  Reading,
+  RefreshRight,
+  Search,
+  Switch,
+  TopRight,
+} from '@element-plus/icons-vue';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import dayjs from 'dayjs';
@@ -63,28 +76,28 @@ async function fetchTableData() {
   tableLoading.value = false;
 }
 
+async function handleSelectChange() {
+  await fetchTableData();
+}
+
 async function handleQueryChange() {
   if (!validateSearchTermInput(searchTermInp.value)) {
-    ElMessage.warning({ message: '关键词只能输入数字和英文字母', plain: true });
-    return;
+    if (searchTermInp.value.length == 0) {
+      return;
+    } else {
+      ElMessage.warning({ message: '关键词只能输入数字和英文字母', plain: true });
+      return;
+    }
   }
 
-  if (!validateAsinInput(asinInp.value)) {
-    if (asinInp.value.length == 0) return;
-    else {
-      ElMessage.warning({ message: '不符合匹配规范', plain: true });
-    }
+  if (asinInp.value.length > 0 && !validateAsinInput(asinInp.value)) {
+    ElMessage.warning({ message: '不符合匹配规范', plain: true });
     return;
   }
 
   await fetchTableData();
 }
 
-function handleJump() {
-  // console.log('All defined routes:', router.getRoutes());
-  router.push({ path: '/keyword/rootWordManage' });
-}
-
 /**
  * 校验SearchTerm输入是否合法
  * @param input 输入的字符串
@@ -99,9 +112,27 @@ function validateSearchTermInput(input: string) {
  * @param input 输入的字符串
  */
 function validateAsinInput(input: string) {
-  const regex = /^[Bb]0[A-Za-z0-9\s]+$/i;
+  const regex = /^[Bb]0[A-Za-z0-9\s]*$/i;
   return regex.test(input);
 }
+
+function handleJump() {
+  // console.log('All defined routes:', router.getRoutes());
+  router.push({ path: '/keyword/rootWordManage' });
+}
+
+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: '#e0e0e0', color: '#000', border: '1px solid #e0e0e0' }; // 默认颜色
+  }
+}
 </script>
 
 <template>
@@ -114,8 +145,8 @@ function validateAsinInput(input: string) {
         Top Search Term - Table
       </div>
       <div>
-        <el-button type="primary" plain @click="handleJump">关键词管理</el-button>
-        <el-button type="success" plain round>下载表格</el-button>
+        <el-button type="primary" plain @click="handleJump" :icon="TopRight">关键词管理</el-button>
+        <el-button type="success" plain round :icon="Download">下载表格</el-button>
       </div>
     </div>
   </div>
@@ -126,14 +157,13 @@ function validateAsinInput(input: string) {
       </el-icon>
     </el-divider>
   </div>
-
   <el-card class="mx-3" v-loading="tableLoading" style="border: none">
     <!-- table筛选栏 -->
     <div class="flex justify-between">
       <div class="flex gap-6 flex-wrap">
         <div>
           <span class="font-medium mr-0.5">市场 </span>
-          <el-select v-model="marketplaceSelect" @change="handleQueryChange" style="width: 130px">
+          <el-select v-model="marketplaceSelect" @change="handleSelectChange" style="width: 130px">
             <el-option
               v-for="item in marketplaceOptions"
               :disabled="item.disabled"
@@ -144,7 +174,7 @@ function validateAsinInput(input: string) {
         </div>
         <div>
           <span class="font-medium mr-0.5">报告类型 </span>
-          <el-select v-model="reportTypeSelect" @change="handleQueryChange" style="width: 100px">
+          <el-select v-model="reportTypeSelect" @change="handleSelectChange" style="width: 100px">
             <el-option label="周度" value="weekly" />
             <el-option label="月度" value="monthly" />
           </el-select>
@@ -177,6 +207,7 @@ function validateAsinInput(input: string) {
             value-format="YYYY-MM-DD"
             :popper-options="{ placement: 'bottom-end' }"
             :clearable="false"
+            :disabled-date="(time: Date) => time > new Date()"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期" />
@@ -187,8 +218,8 @@ function validateAsinInput(input: string) {
 
     <!-- table -->
     <el-card shadow="never" class="mt-5">
-      <div style="height: 765px">
-        <el-table :data="tableData" stripe height="765px" style="width: 100%">
+      <div style="height: 795px; overflow: auto">
+        <el-table :data="tableData" stripe style="width: 100%">
           <el-table-column fixed prop="searchTerm" label="关键词" width="260">
             <template #header>
               <el-icon style="top: 2px; margin-right: 3px">
@@ -197,7 +228,9 @@ function validateAsinInput(input: string) {
               <span>关键词</span>
             </template>
             <template #default="{ row }">
-              <span class="font-medium text-lg" style="color: #0b3289">{{ row.searchTerm }}</span>
+              <el-link :underline="false" href="https://www.bilibili.com/" target="_blank" style="color: #0b3289">{{
+                row.searchTerm
+              }}</el-link>
             </template>
           </el-table-column>
           <el-table-column prop="searchFrequencyRank" label="关键词搜索排名" align="center" width="150">
@@ -238,7 +271,10 @@ function validateAsinInput(input: string) {
               <span>点击分享率排名</span>
             </template>
             <template #default="{ row }">
-              <span class="font-semibold">{{ row.clickShareRank }}</span>
+              <!--<span class="font-semibold">{{ row.clickShareRank }}</span>-->
+              <el-tag :style="getTagStyle(row.clickShareRank)">
+                {{ row.clickShareRank }}
+              </el-tag>
             </template>
           </el-table-column>
           <el-table-column prop="clickShare" align="center" label="点击分享率">
@@ -269,7 +305,7 @@ function validateAsinInput(input: string) {
         <el-pagination
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
-          :page-sizes="[10, 20, 30, 50]"
+          :page-sizes="[10, 20, 30, 50, 100, 200]"
           layout="sizes, prev, pager, next"
           :total="total"
           @change="handlePageChange" />