diff --git a/website/src/components/Resource/Card/index.tsx b/website/src/components/Resource/Card/index.tsx index 33678489..1e312707 100644 --- a/website/src/components/Resource/Card/index.tsx +++ b/website/src/components/Resource/Card/index.tsx @@ -7,6 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import "./styles.css"; import Tag from "@/components/Resource/Tag"; +import ValidStatus from "@/components/Resource/ValidStatus"; import type { Resource } from "@/libs/store"; export type Props = { @@ -39,7 +40,7 @@ export default function ResourceCard({ return (
-
+
{resource.name} {resource.is_official && ( )} +
diff --git a/website/src/components/Resource/Card/styles.css b/website/src/components/Resource/Card/styles.css index 406507a3..4b52b38e 100644 --- a/website/src/components/Resource/Card/styles.css +++ b/website/src/components/Resource/Card/styles.css @@ -14,7 +14,7 @@ } &-check { - @apply ml-2 text-success w-5 h-5 fill-current; + @apply ml-2 text-success/90 fill-current; } &-expand { diff --git a/website/src/components/Resource/DetailCard/index.tsx b/website/src/components/Resource/DetailCard/index.tsx index 5d72cc6f..eab73809 100644 --- a/website/src/components/Resource/DetailCard/index.tsx +++ b/website/src/components/Resource/DetailCard/index.tsx @@ -7,6 +7,7 @@ import copy from "copy-text-to-clipboard"; import { PyPIData } from "./types"; import Tag from "@/components/Resource/Tag"; +import ValidStatus from "@/components/Resource/ValidStatus"; import type { Resource } from "@/libs/store"; import "./styles.css"; @@ -22,6 +23,11 @@ export default function ResourceDetailCard({ resource }: Props) { const authorLink = `https://github.com/${resource.author}`; const authorAvatar = `${authorLink}.png?size=100`; + const isPlugin = resource.resourceType === "plugin"; + const registryLink = + isPlugin && + `https://registry.nonebot.dev/plugin/${resource.project_link}:${resource.module_name}`; + const getProjectLink = (resource: Resource) => { switch (resource.resourceType) { case "plugin": @@ -60,7 +66,6 @@ export default function ResourceDetailCard({ resource }: Props) { switch (resource.resourceType) { case "plugin": case "adapter": - case "driver": return `https://pypi.org/project/${resource.project_link}`; default: return null; @@ -106,7 +111,14 @@ export default function ResourceDetailCard({ resource }: Props) { decoding="async" />
- {resource.name} + + {resource.name} + {resource.is_official && ( +
+ 官方 +
+ )} +
- +
+ + +
+
{resource.desc} @@ -192,12 +212,19 @@ export default function ResourceDetailCard({ resource }: Props) { {projectLink}
- +
+ + +
diff --git a/website/src/components/Resource/DetailCard/styles.css b/website/src/components/Resource/DetailCard/styles.css index c315d5f6..79433cf4 100644 --- a/website/src/components/Resource/DetailCard/styles.css +++ b/website/src/components/Resource/DetailCard/styles.css @@ -1,6 +1,10 @@ .detail-card { &-header { @apply flex items-center align-middle; + + &-divider { + @apply m-0; + } } &-avatar { @@ -19,8 +23,12 @@ } } - &-copy-button { - @apply ml-auto btn btn-sm; + &-actions { + @apply flex items-center gap-x-2 ml-auto; + + &-button { + @apply btn btn-sm; + } &-mobile { @apply lg:hidden; diff --git a/website/src/components/Resource/ValidStatus/index.tsx b/website/src/components/Resource/ValidStatus/index.tsx new file mode 100644 index 00000000..c5fd8cd2 --- /dev/null +++ b/website/src/components/Resource/ValidStatus/index.tsx @@ -0,0 +1,83 @@ +import React from "react"; + +import clsx from "clsx"; + +import type { IconName } from "@fortawesome/fontawesome-common-types"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +import { Resource } from "@/libs/store"; +import { ValidStatus } from "@/libs/valid"; + +export const getValidStatus = (resource: Resource) => { + switch (resource.resourceType) { + case "plugin": + if (resource.skip_test) return ValidStatus.SKIP; + if (resource.valid) return ValidStatus.VALID; + return ValidStatus.INVALID; + default: + return ValidStatus.MISSING; + } +}; + +export const validIcons: { + [key in ValidStatus]: IconName; +} = { + [ValidStatus.VALID]: "plug-circle-check", + [ValidStatus.INVALID]: "plug-circle-xmark", + [ValidStatus.SKIP]: "plug-circle-exclamation", + [ValidStatus.MISSING]: "plug-circle-exclamation", +}; + +export type Props = { + resource: Resource; + validLink: string; + className?: string; + simple?: boolean; +}; + +export default function ValidDisplay({ + resource, + validLink, + className, + simple, +}: Props) { + const validStatus = getValidStatus(resource); + + const isValid = validStatus === ValidStatus.VALID; + const isInvalid = validStatus === ValidStatus.INVALID; + const isSkip = validStatus === ValidStatus.SKIP; + + return ( + validStatus !== ValidStatus.MISSING && ( + +
+ + {!simple && ( + <> + {isValid &&

插件已通过测试

} + {isInvalid &&

插件未通过测试

} + {isSkip &&

插件跳过测试

} + + )} +
+
+ ) + ); +} diff --git a/website/src/libs/valid.ts b/website/src/libs/valid.ts new file mode 100644 index 00000000..7de6c817 --- /dev/null +++ b/website/src/libs/valid.ts @@ -0,0 +1,6 @@ +export enum ValidStatus { + VALID = "valid", + INVALID = "invalid", + SKIP = "skip", + MISSING = "missing", +}