✨ feat<TopSearchTerm>: 优化代码, 美化界面提升用户体验

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, Memo, Key, Rank, Goods, Reading, Medal, Pointer, Switch } 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';
@@ -69,15 +82,16 @@ async function handleSelectChange() {
 
 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;
   }
 
@@ -98,7 +112,7 @@ 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);
 }
 
@@ -106,6 +120,19 @@ 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>
@@ -118,8 +145,8 @@ function handleJump() {
         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>
@@ -130,7 +157,6 @@ function handleJump() {
       </el-icon>
     </el-divider>
   </div>
-
   <el-card class="mx-3" v-loading="tableLoading" style="border: none">
     <!-- table筛选栏 -->
     <div class="flex justify-between">
@@ -181,6 +207,7 @@ function handleJump() {
             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="结束日期" />
@@ -191,7 +218,7 @@ function handleJump() {
 
     <!-- table -->
     <el-card shadow="never" class="mt-5">
-      <div style="height: 765px; overflow: auto">
+      <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>
@@ -201,7 +228,9 @@ function handleJump() {
               <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">
@@ -242,7 +271,10 @@ function handleJump() {
               <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="点击分享率">
@@ -273,7 +305,7 @@ function handleJump() {
         <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" />