📝 Docs: 商店插件可用性筛选 & 更新排序 (#3334)

website/src/libs/filter.ts

@@ -3,14 +3,52 @@ import { useCallback, useState } from "react";
 import { translate } from "@docusaurus/Translate";
 
 import type { Resource } from "./store";
+import { ValidStatus } from "./valid";
+
+import { getValidStatus } from "@/components/Resource/ValidStatus";
 
 export type Filter<T extends Resource = Resource> = {
   type: string;
   id: string;
-  displayName: string;
+  displayName?: string;
   filter: (resource: T) => boolean;
 };
 
+const validStatusDisplayName = {
+  [ValidStatus.VALID]: translate({
+    id: "pages.store.filter.validateStatusDisplayName.valid",
+    description: "The display name of validateStatus filter",
+    message: "状态: 通过",
+  }),
+  [ValidStatus.INVALID]: translate({
+    id: "pages.store.filter.validateStatusDisplayName.invalid",
+    description: "The display name of validateStatus filter",
+    message: "状态: 未通过",
+  }),
+  [ValidStatus.SKIP]: translate({
+    id: "pages.store.filter.validateStatusDisplayName.skip",
+    description: "The display name of validateStatus filter",
+    message: "状态: 跳过",
+  }),
+  [ValidStatus.MISSING]: translate({
+    id: "pages.store.filter.validateStatusDisplayName.missing",
+    description: "The display name of validateStatus filter",
+    message: "状态: 缺失",
+  }),
+};
+
+export const validStatusFilter = <T extends Resource = Resource>(
+  validStatus: ValidStatus
+): Filter<T> => ({
+  type: "validStatus",
+  id: `validStatus-${validStatus}`,
+  displayName: validStatusDisplayName[validStatus],
+  filter: (resource: Resource): boolean =>
+    resource.resourceType === "plugin"
+      ? getValidStatus(resource) === validStatus
+      : true,
+});
+
 export const tagFilter = <T extends Resource = Resource>(
   tag: string
 ): Filter<T> => ({
@@ -27,6 +65,7 @@ export const tagFilter = <T extends Resource = Resource>(
   filter: (resource: Resource): boolean =>
     resource.tags.map((tag) => tag.label).includes(tag),
 });
+
 export const officialFilter = <T extends Resource = Resource>(
   official: boolean = true
 ): Filter<T> => ({
@@ -39,6 +78,7 @@ export const officialFilter = <T extends Resource = Resource>(
   }).split("|")[Number(official)],
   filter: (resource: Resource): boolean => resource.is_official === official,
 });
+
 export const authorFilter = <T extends Resource = Resource>(
   author: string
 ): Filter<T> => ({
@@ -54,6 +94,7 @@ export const authorFilter = <T extends Resource = Resource>(
   ),
   filter: (resource: Resource): boolean => resource.author === author,
 });
+
 export const queryFilter = <T extends Resource = Resource>(
   query: string
 ): Filter<T> => ({

website/src/libs/sorter.ts

@@ -0,0 +1,4 @@
+export enum SortMode {
+  Default,
+  UpdateDesc,
+}

website/src/libs/toolbar.ts

@@ -1,5 +1,13 @@
-import { authorFilter, tagFilter, type Filter } from "./filter";
+import { translate } from "@docusaurus/Translate";
+
+import {
+  authorFilter,
+  tagFilter,
+  validStatusFilter,
+  type Filter,
+} from "./filter";
 import type { Resource } from "./store";
+import { ValidStatus } from "./valid";
 
 import type { Filter as FilterTool } from "@/components/Store/Toolbar";
 
@@ -38,7 +46,41 @@ export function useToolbar<T extends Resource = Resource>({
     },
   };
 
+  const validateStatusFilterMapping: Record<string, ValidStatus> = {
+    [translate({
+      id: "pages.store.filter.validateStatusDisplayName.valid",
+      description: "The display name of validateStatus filter",
+      message: "通过",
+    })]: ValidStatus.VALID,
+    [translate({
+      id: "pages.store.filter.validateStatusDisplayName.invalid",
+      description: "The display name of validateStatus filter",
+      message: "未通过",
+    })]: ValidStatus.INVALID,
+    [translate({
+      id: "pages.store.filter.validateStatusDisplayName.skip",
+      description: "The display name of validateStatus filter",
+      message: "跳过",
+    })]: ValidStatus.SKIP,
+    [translate({
+      id: "pages.store.filter.validateStatusDisplayName.missing",
+      description: "The display name of validateStatus filter",
+      message: "缺失",
+    })]: ValidStatus.MISSING,
+  };
+
+  const validStatusFilterTool: FilterTool = {
+    label: "状态",
+    icon: ["fas", "plug"],
+    choices: Object.keys(validateStatusFilterMapping),
+    onSubmit: (type: string) => {
+      const validStatus = validateStatusFilterMapping[type];
+      if (!validStatus) return;
+      addFilter(validStatusFilter(validStatus));
+    },
+  };
+
   return {
-    filters: [authorFilterTool, tagFilterTool],
+    filters: [authorFilterTool, tagFilterTool, validStatusFilterTool],
   };
 }