feat: store query params to location href in app store page (#36)

将应用市场页面的接口查询参数存储在地址栏。 <img width="1111" alt="image" src="https://github.com/halo-dev/plugin-app-store/assets/21301288/16d2401f-bad6-4ea9-81a3-6b04cd5fd2c4"> /kind feature ```release-note 保存应用市场页面的查询参数到地址栏。 ```
halo-dev · Sep 27, 2023 · d5cf47b · d5cf47b
1 parent 807524b
commit d5cf47b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/console/package.json b/console/package.json
@@ -13,6 +13,7 @@
     "@halo-dev/console-shared": "^2.9.0",
     "@tanstack/vue-query": "^4.34.4",
     "@vueuse/core": "^10.4.1",
+    "@vueuse/router": "^10.4.1",
     "axios": "^1.5.0",
     "dayjs": "^1.11.9",
     "github-markdown-css": "^5.2.0",

diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
diff --git a/console/src/views/AppStore.vue b/console/src/views/AppStore.vue
@@ -26,6 +26,7 @@ import { useLocalStorage } from "@vueuse/core";
 import { computed, nextTick, watch } from "vue";
 import { ref } from "vue";
 import RiApps2Line from "~icons/ri/apps-2-line";
+import { useRouteQuery } from "@vueuse/router";
 
 const Types = [
   {
@@ -70,22 +71,32 @@ const viewTypes = [
 
 const viewType = useLocalStorage<string>("app-store-list-view", "grid");
 
-const keyword = ref("");
-const page = ref(1);
-const size = ref(20);
-const selectedSort = ref("latestReleaseTimestamp,desc");
-const selectedPriceMode = ref();
-const selectedType = ref();
-const onlyQueryInstalled = ref(false);
+const keyword = useRouteQuery<string>("keyword", "");
+const page = useRouteQuery<number>("page", 1, { transform: Number });
+const size = useRouteQuery<number>("size", 20, { transform: Number });
+const selectedSort = useRouteQuery<string | undefined>("sort", "latestReleaseTimestamp,desc");
+const selectedPriceMode = useRouteQuery("price-mode");
+const selectedType = useRouteQuery<string | undefined>("type");
+const onlyQueryInstalled = useRouteQuery<string>("installed", "false");
+const onlyQueryInstalledAsBoolean = computed(() => onlyQueryInstalled.value === "true");
 
-const { installedPlugins } = useFetchInstalledPlugins(onlyQueryInstalled);
-const { installedThemes } = useFetchInstalledThemes(onlyQueryInstalled);
+const { installedPlugins } = useFetchInstalledPlugins(onlyQueryInstalledAsBoolean);
+const { installedThemes } = useFetchInstalledThemes(onlyQueryInstalledAsBoolean);
 
 const { data, isFetching, isLoading, refetch } = useQuery<ListResponse<ApplicationSearchResult>>({
-  queryKey: ["store-apps", keyword, selectedSort, page, size, selectedPriceMode, selectedType, onlyQueryInstalled],
+  queryKey: [
+    "store-apps",
+    keyword,
+    selectedSort,
+    page,
+    size,
+    selectedPriceMode,
+    selectedType,
+    onlyQueryInstalledAsBoolean,
+  ],
   queryFn: async () => {
     const appIds: string[] = [];
-    if (onlyQueryInstalled.value) {
+    if (onlyQueryInstalledAsBoolean.value) {
       if (installedPlugins.value?.length) {
         appIds.push(
           ...((installedPlugins.value?.map((plugin) => plugin.metadata.annotations?.[STORE_APP_ID]) || []).filter(
@@ -122,7 +133,7 @@ const { data, isFetching, isLoading, refetch } = useQuery<ListResponse<Applicati
     size.value = data.size;
   },
   enabled: computed(() => {
-    if (onlyQueryInstalled.value) {
+    if (onlyQueryInstalledAsBoolean.value) {
       return !!installedPlugins.value && !!installedThemes.value;
     }
     return true;
@@ -203,14 +214,15 @@ watch([selectedPriceMode, selectedType, selectedSort, onlyQueryInstalled, keywor
                       id="onlyQueryInstalled"
                       v-model="onlyQueryInstalled"
                       type="checkbox"
+                      value="true"
                       class="as-h-3.5 as-w-3.5 as-rounded as-border-gray-300 as-text-indigo-600 focus:as-ring-indigo-600"
                     />
                   </div>
                   <div class="as-text-sm">
                     <label
                       for="onlyQueryInstalled"
                       class="as-text-sm as-text-gray-700 hover:as-text-black"
-                      :class="{ 'as-font-semibold as-text-gray-700': onlyQueryInstalled }"
+                      :class="{ 'as-font-semibold as-text-gray-700': onlyQueryInstalledAsBoolean }"
                     >
                       已安装
                     </label>