Skip to content

Commit 7727ad1

Browse files
committed
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.
1 parent e9704ab commit 7727ad1

5 files changed

Lines changed: 32 additions & 19 deletions

File tree

src/components/Table.vue

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script setup lang="ts">
22
import { nextTick, ref, watch } from "vue";
33
4+
import { mdiMagnify } from "@mdi/js";
45
import { NInput, NLayout, type InputInst } from "naive-ui";
56
import { storeToRefs } from "pinia";
67
8+
import Icon from "@/components/Icon.vue";
79
import ResultTable from "@/components/result-table/ResultTable.vue";
810
import { usePageStore } from "@/stores/page";
911
import { debounce } from "@/utils/wrapper";
@@ -35,11 +37,15 @@ watch(searchKeyword, (newValue) => {
3537
<n-input
3638
ref="inputInstRef"
3739
v-model:value="searchKeyword"
38-
class="min-w-1/4"
40+
class="min-w-60"
3941
type="text"
4042
placeholder="搜索"
4143
clearable
42-
/>
44+
>
45+
<template #prefix>
46+
<Icon :path="mdiMagnify" :size="18" class="color-gray" />
47+
</template>
48+
</n-input>
4349
</n-layout>
4450
<n-layout class="mt-3">
4551
<ResultTable
@@ -49,5 +55,3 @@ watch(searchKeyword, (newValue) => {
4955
/>
5056
</n-layout>
5157
</template>
52-
53-
<style scoped></style>

src/components/result-table/ColorTime.vue

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,28 @@ import { NPopover, NText, NTime } from "naive-ui";
66
77
import Icon from "../Icon.vue";
88
9-
const props = defineProps<{ time: string; currentTime: number }>();
9+
const props = defineProps<{ time: string; currentTime: number | Date }>();
1010
1111
function getTimeColor(timeDiff: number) {
1212
if (timeDiff <= 3_600_000 * 4) {
13-
// 4 小时内更新是红色
14-
return "error";
13+
// 4 小时内更新是绿色(活跃)
14+
return "success";
1515
} else if (timeDiff <= 3_600_000 * 24) {
16-
// 24 小时内更新是黄色
17-
return "warning";
16+
// 24 小时内更新是蓝色
17+
return "info";
1818
} else {
1919
// 24 小时以上更新是正常
2020
return "default";
2121
}
2222
}
2323
24+
const currentMs = computed(() =>
25+
props.currentTime instanceof Date
26+
? props.currentTime.getTime()
27+
: props.currentTime,
28+
);
2429
const timeType = computed(() =>
25-
getTimeColor(props.currentTime - Date.parse(props.time)),
30+
getTimeColor(currentMs.value - Date.parse(props.time)),
2631
);
2732
</script>
2833

@@ -32,7 +37,7 @@ const timeType = computed(() =>
3237
<n-text :type="timeType">
3338
<n-popover trigger="hover">
3439
<template #trigger>
35-
<n-time :time="new Date(time)" :to="currentTime" type="relative" />
40+
<n-time :time="new Date(time)" :to="currentMs" type="relative" />
3641
</template>
3742
{{ new Date(time).toLocaleString() }}
3843
</n-popover>

src/components/result-table/ResultTable.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import { computed, type ComputedRef, h, reactive } from "vue";
33
4+
import { useNow } from "@vueuse/core";
45
import { NDataTable, NSkeleton, NSpace, type DataTableColumns } from "naive-ui";
56
import { storeToRefs } from "pinia";
67
@@ -17,7 +18,7 @@ import MetadataIcon from "./MetadataIcon.vue";
1718
import PluginLink from "./PluginLink.vue";
1819
import ValidationIcon from "./ValidationIcon.vue";
1920
20-
const currentTime = Date.now();
21+
const currentTime = useNow({ interval: 60_000 });
2122
2223
const store = usePageStore();
2324
const { loading } = storeToRefs(store);
@@ -147,7 +148,7 @@ const columns: DataTableColumns<RowData> = [
147148
render: (rowData: RowData) =>
148149
h(ColorTime, {
149150
time: rowData.plugin.time,
150-
currentTime,
151+
currentTime: currentTime.value,
151152
}),
152153
sorter: timeSorter("plugin", "time"),
153154
},
@@ -158,7 +159,7 @@ const columns: DataTableColumns<RowData> = [
158159
render: (rowData: RowData) =>
159160
h(ColorTime, {
160161
time: rowData.result.time,
161-
currentTime,
162+
currentTime: currentTime.value,
162163
}),
163164
sorter: timeSorter("result", "time"),
164165
},

src/components/result-table/ValidationIcon.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ const props = defineProps<{
2222
2323
const showModal = ref(false);
2424
25-
const getTagType = () => {
25+
const tagType = computed(() => {
2626
if (props.plugin.skip_test) return "default";
2727
return props.result.results.validation ? "success" : "error";
28-
};
28+
});
2929
const tagPath = computed(
3030
() =>
3131
(props.plugin.skip_test && mdiProgressCheck) ||
@@ -39,7 +39,7 @@ const tagPath = computed(
3939
class="mr-[15px] flex justify-center align-middle cursor-pointer"
4040
@click="showModal = true"
4141
>
42-
<n-tag round :type="getTagType()">
42+
<n-tag round :type="tagType">
4343
{{ `v${plugin.version}` }}
4444
<template #icon>
4545
<Icon :path="tagPath" />

src/stores/page.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,14 @@ export const usePageStore = defineStore("page", () => {
4747
};
4848

4949
const filterPlugins = (keyword: string) => {
50+
const kw = keyword.toLowerCase();
5051
return Object.entries(plugins.value).reduce(
5152
(acc: Plugins, [key, value]) => {
5253
if (
53-
key.toLowerCase().includes(keyword.toLowerCase()) ||
54-
value.author.toLowerCase().includes(keyword.toLowerCase())
54+
key.toLowerCase().includes(kw) ||
55+
value.author.toLowerCase().includes(kw) ||
56+
value.desc.toLowerCase().includes(kw) ||
57+
value.tags.some((tag) => tag.label.toLowerCase().includes(kw))
5558
) {
5659
acc[key] = value;
5760
}

0 commit comments

Comments
 (0)