diff --git a/ui/src/components/access/AccessForm.tsx b/ui/src/components/access/AccessForm.tsx index 12fd8fc9..49e7dfe0 100644 --- a/ui/src/components/access/AccessForm.tsx +++ b/ui/src/components/access/AccessForm.tsx @@ -292,6 +292,7 @@ const AccessForm = forwardRef(({ className, }} disabled={scene !== "add"} placeholder={providerPlaceholder} + showOptionTags={range == null || range === "both-dns-hosting"} showSearch={!disabled} /> diff --git a/ui/src/components/provider/AccessProviderSelect.tsx b/ui/src/components/provider/AccessProviderSelect.tsx index bd68227c..ba264691 100644 --- a/ui/src/components/provider/AccessProviderSelect.tsx +++ b/ui/src/components/provider/AccessProviderSelect.tsx @@ -40,7 +40,7 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid {t(provider?.name ?? "")} - {!showOptionTags && ( + {showOptionTags && (
{provider?.usages?.includes(ACCESS_USAGES.DNS) && {t("access.props.provider.usage.dns")}} {provider?.usages?.includes(ACCESS_USAGES.HOSTING) && {t("access.props.provider.usage.hosting")}} diff --git a/ui/src/i18n/locales/en/nls.access.json b/ui/src/i18n/locales/en/nls.access.json index 409203d8..806a961d 100644 --- a/ui/src/i18n/locales/en/nls.access.json +++ b/ui/src/i18n/locales/en/nls.access.json @@ -17,8 +17,9 @@ "access.props.provider.usage.hosting": "Hosting provider", "access.props.provider.usage.ca": "Certificate authority", "access.props.provider.usage.notification": "Notification channel", - "access.props.ca": "Certificate authority", - "access.props.channel": "Notification channel", + "access.props.range.both_dns_hosting": "Provider", + "access.props.range.ca_only": "Certificate authority", + "access.props.range.notify_only": "Notification channel", "access.props.created_at": "Created at", "access.props.updated_at": "Updated at", diff --git a/ui/src/i18n/locales/zh/nls.access.json b/ui/src/i18n/locales/zh/nls.access.json index 3f072589..a9a9d468 100644 --- a/ui/src/i18n/locales/zh/nls.access.json +++ b/ui/src/i18n/locales/zh/nls.access.json @@ -17,8 +17,9 @@ "access.props.provider.usage.hosting": "主机提供商", "access.props.provider.usage.ca": "证书颁发机构", "access.props.provider.usage.notification": "通知渠道", - "access.props.ca": "证书颁发机构", - "access.props.channel": "通知渠道", + "access.props.range.both_dns_hosting": "提供商", + "access.props.range.ca_only": "证书颁发机构", + "access.props.range.notify_only": "通知渠道", "access.props.created_at": "创建时间", "access.props.updated_at": "更新时间", diff --git a/ui/src/pages/accesses/AccessList.tsx b/ui/src/pages/accesses/AccessList.tsx index d3c78f65..c401857a 100644 --- a/ui/src/pages/accesses/AccessList.tsx +++ b/ui/src/pages/accesses/AccessList.tsx @@ -14,13 +14,15 @@ import { Avatar, Button, Card, Empty, Flex, Input, Modal, Space, Table, type Tab import dayjs from "dayjs"; import { ClientResponseError } from "pocketbase"; -import AccessEditModal from "@/components/access/AccessEditModal"; +import AccessEditModal, { type AccessEditModalProps } from "@/components/access/AccessEditModal"; import { type AccessModel } from "@/domain/access"; -import { accessProvidersMap } from "@/domain/provider"; +import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider"; import { useZustandShallowSelector } from "@/hooks"; import { useAccessesStore } from "@/stores/access"; import { getErrMsg } from "@/utils/error"; +type AccessRanges = AccessEditModalProps["range"]; + const AccessList = () => { const [searchParams] = useSearchParams(); @@ -85,6 +87,7 @@ const AccessList = () => { @@ -95,6 +98,7 @@ const AccessList = () => { @@ -122,6 +126,7 @@ const AccessList = () => { const [filters, setFilters] = useState>(() => { return { + range: "both-dns-hosting" satisfies AccessRanges, keyword: searchParams.get("keyword"), }; }); @@ -144,14 +149,26 @@ const AccessList = () => { () => { const startIndex = (page - 1) * pageSize; const endIndex = startIndex + pageSize; - const list = accesses.filter((e) => { - const keyword = (filters["keyword"] as string | undefined)?.trim(); - if (keyword) { - return e.name.includes(keyword); - } + const list = accesses + .filter((e) => { + const keyword = (filters["keyword"] as string | undefined)?.trim(); + if (keyword) { + return e.name.includes(keyword); + } - return true; - }); + return true; + }) + .filter((e) => { + const provider = accessProvidersMap.get(e.provider); + switch (filters["range"] as AccessRanges) { + case "both-dns-hosting": + return provider?.usages?.includes(ACCESS_USAGES.DNS) || provider?.usages?.includes(ACCESS_USAGES.HOSTING); + case "ca-only": + return provider?.usages?.includes(ACCESS_USAGES.CA); + case "notify-only": + return provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION); + } + }); return Promise.resolve({ items: list.slice(startIndex, endIndex), totalItems: list.length, @@ -166,6 +183,10 @@ const AccessList = () => { } ); + const handleTabChange = (key: string) => { + setFilters((prev) => ({ ...prev, range: key })); + }; + const handleSearch = (value: string) => { setFilters((prev) => ({ ...prev, keyword: value })); }; @@ -203,6 +224,7 @@ const AccessList = () => { extra={[ }> @@ -213,7 +235,32 @@ const AccessList = () => { ]} /> - + handleTabChange(key)} + /> + +