feat: enhance table and result components with improved search and time display

- Updated Table.vue to include a search icon in the input field and adjusted its width.
- Modified ColorTime.vue to handle currentTime as either a number or Date, and updated time color logic for better clarity.
- Refactored ResultTable.vue to use a reactive currentTime from VueUse for real-time updates.
- Improved ValidationIcon.vue by changing the tag type computation to a computed property for better performance.
- Enhanced page store filtering to include plugin descriptions and tags in the search functionality.

Author: StarHeartHunt

src/components/Table.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { nextTick, ref, watch } from "vue";
 
+import { mdiMagnify } from "@mdi/js";
 import { NInput, NLayout, type InputInst } from "naive-ui";
 import { storeToRefs } from "pinia";
 
+import Icon from "@/components/Icon.vue";
 import ResultTable from "@/components/result-table/ResultTable.vue";
 import { usePageStore } from "@/stores/page";
 import { debounce } from "@/utils/wrapper";
@@ -35,11 +37,15 @@ watch(searchKeyword, (newValue) => {
     <n-input
       ref="inputInstRef"
       v-model:value="searchKeyword"
-      class="min-w-1/4"
+      class="min-w-60"
       type="text"
       placeholder="搜索"
       clearable
-    />
+    >
+      <template #prefix>
+        <Icon :path="mdiMagnify" :size="18" class="color-gray" />
+      </template>
+    </n-input>
   </n-layout>
   <n-layout class="mt-3">
     <ResultTable
@@ -49,5 +55,3 @@ watch(searchKeyword, (newValue) => {
     />
   </n-layout>
 </template>
-
-<style scoped></style>

src/components/result-table/ColorTime.vue

@@ -6,23 +6,28 @@ import { NPopover, NText, NTime } from "naive-ui";
 
 import Icon from "../Icon.vue";
 
-const props = defineProps<{ time: string; currentTime: number }>();
+const props = defineProps<{ time: string; currentTime: number | Date }>();
 
 function getTimeColor(timeDiff: number) {
   if (timeDiff <= 3_600_000 * 4) {
-    // 4 小时内更新是红色
-    return "error";
+    // 4 小时内更新是绿色（活跃）
+    return "success";
   } else if (timeDiff <= 3_600_000 * 24) {
-    // 24 小时内更新是黄色
-    return "warning";
+    // 24 小时内更新是蓝色
+    return "info";
   } else {
     // 24 小时以上更新是正常
     return "default";
   }
 }
 
+const currentMs = computed(() =>
+  props.currentTime instanceof Date
+    ? props.currentTime.getTime()
+    : props.currentTime,
+);
 const timeType = computed(() =>
-  getTimeColor(props.currentTime - Date.parse(props.time)),
+  getTimeColor(currentMs.value - Date.parse(props.time)),
 );
 </script>
 
@@ -32,7 +37,7 @@ const timeType = computed(() =>
     <n-text :type="timeType">
       <n-popover trigger="hover">
         <template #trigger>
-          <n-time :time="new Date(time)" :to="currentTime" type="relative" />
+          <n-time :time="new Date(time)" :to="currentMs" type="relative" />
         </template>
         {{ new Date(time).toLocaleString() }}
       </n-popover>

src/components/result-table/ResultTable.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, type ComputedRef, h, reactive } from "vue";
 
+import { useNow } from "@vueuse/core";
 import { NDataTable, NSkeleton, NSpace, type DataTableColumns } from "naive-ui";
 import { storeToRefs } from "pinia";
 
@@ -17,7 +18,7 @@ import MetadataIcon from "./MetadataIcon.vue";
 import PluginLink from "./PluginLink.vue";
 import ValidationIcon from "./ValidationIcon.vue";
 
-const currentTime = Date.now();
+const currentTime = useNow({ interval: 60_000 });
 
 const store = usePageStore();
 const { loading } = storeToRefs(store);
@@ -147,7 +148,7 @@ const columns: DataTableColumns<RowData> = [
     render: (rowData: RowData) =>
       h(ColorTime, {
         time: rowData.plugin.time,
-        currentTime,
+        currentTime: currentTime.value,
       }),
     sorter: timeSorter("plugin", "time"),
   },
@@ -158,7 +159,7 @@ const columns: DataTableColumns<RowData> = [
     render: (rowData: RowData) =>
       h(ColorTime, {
         time: rowData.result.time,
-        currentTime,
+        currentTime: currentTime.value,
       }),
     sorter: timeSorter("result", "time"),
   },

src/components/result-table/ValidationIcon.vue

@@ -22,10 +22,10 @@ const props = defineProps<{
 
 const showModal = ref(false);
 
-const getTagType = () => {
+const tagType = computed(() => {
   if (props.plugin.skip_test) return "default";
   return props.result.results.validation ? "success" : "error";
-};
+});
 const tagPath = computed(
   () =>
     (props.plugin.skip_test && mdiProgressCheck) ||
@@ -39,7 +39,7 @@ const tagPath = computed(
     class="mr-[15px] flex justify-center align-middle cursor-pointer"
     @click="showModal = true"
   >
-    <n-tag round :type="getTagType()">
+    <n-tag round :type="tagType">
       {{ `v${plugin.version}` }}
       <template #icon>
         <Icon :path="tagPath" />

src/stores/page.ts

@@ -47,11 +47,14 @@ export const usePageStore = defineStore("page", () => {
   };
 
   const filterPlugins = (keyword: string) => {
+    const kw = keyword.toLowerCase();
     return Object.entries(plugins.value).reduce(
       (acc: Plugins, [key, value]) => {
         if (
-          key.toLowerCase().includes(keyword.toLowerCase()) ||
-          value.author.toLowerCase().includes(keyword.toLowerCase())
+          key.toLowerCase().includes(kw) ||
+          value.author.toLowerCase().includes(kw) ||
+          value.desc.toLowerCase().includes(kw) ||
+          value.tags.some((tag) => tag.label.toLowerCase().includes(kw))
         ) {
           acc[key] = value;
         }