github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: record the plugin query conditions in the route query parameters (#5995) 

#### What type of PR is this?

/area ui
/kind feature
/milestone 2.16.x

#### What this PR does / why we need it:

在插件数据管理列表页面路由中记录查询条件，可以保证在刷新页面或者切换路由返回时保留之前的查询状态。

<img width="1663" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/2638dfc9-793b-48c6-81dd-f460a6c9214d">

#### Special notes for your reviewer:

需要测试：

1. 插件管理列表的所有筛选项是否可以正常工作。
2. 尝试设置部分筛选，然后刷新页面，观察筛选条件是否正常保留。

#### Does this PR introduce a user-facing change?

```release-note
Console 端的插件管理列表支持在地址栏记录筛选条件。
```
pull/5994/head^2
Ryan Wang 2024-05-27 16:28:57 +08:00 committed by GitHub
parent 54e088741e
commit 19fb1c2311
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui/console-src/modules/system/plugins/PluginList.vue
View File

@ -1,4 +1,7 @@
<script lang="ts" setup>
import { apiClient } from "@/utils/api-client";
import { usePermission } from "@/utils/permission";
import { PluginStatusPhaseEnum, type Plugin } from "@halo-dev/api-client";
import {
Dialog,
IconAddCircle,
@ -13,16 +16,13 @@ import {
VPageHeader,
VSpace,
} from "@halo-dev/components";
import PluginListItem from "./components/PluginListItem.vue";
import PluginInstallationModal from "./components/PluginInstallationModal.vue";
import { useQuery } from "@tanstack/vue-query";
import { useRouteQuery } from "@vueuse/router";
import type { Ref } from "vue";
import { computed, onMounted, provide, ref, watch } from "vue";
import { apiClient } from "@/utils/api-client";
import { usePermission } from "@/utils/permission";
import { useQuery } from "@tanstack/vue-query";
import { PluginStatusPhaseEnum, type Plugin } from "@halo-dev/api-client";
import { useI18n } from "vue-i18n";
import { useRouteQuery } from "@vueuse/router";
import PluginInstallationModal from "./components/PluginInstallationModal.vue";
import PluginListItem from "./components/PluginListItem.vue";
import { usePluginBatchOperations } from "./composables/use-plugin";
const { t } = useI18n();
@ -30,10 +30,17 @@ const { currentUserHasPermission } = usePermission();
const pluginInstallationModalVisible = ref(false);
const keyword = ref("");
const keyword = useRouteQuery<string>("keyword", "");
const selectedEnabledValue = ref();
const selectedSortValue = ref();
const selectedEnabledValue = useRouteQuery<
string | undefined,
boolean | undefined
>("enabled", undefined, {
transform: (value) => {
return value ? value === "true" : undefined;
},
});
const selectedSortValue = useRouteQuery<string | undefined>("sort");
const hasFilters = computed(() => {
return selectedEnabledValue.value !== undefined || selectedSortValue.value;