wood/certimate
1
0
Fork 0
mirror of https://github.com/woodchen-ink/certimate.git synced 2025-07-18 17:31:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): improve access provider tags appearance

Browse Source
This commit is contained in:
Fu Diwei 2025-04-01 21:23:51 +08:00
parent 8cdb2afa69
commit 899a0b75b0
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/access/AccessForm.tsx
View File

@ -295,7 +295,7 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
}} }}
disabled={scene !== "add"} disabled={scene !== "add"}
placeholder={providerPlaceholder} placeholder={providerPlaceholder}
showOptionTags={range == null || range === "both-dns-hosting"} showOptionTags={range == null || (range === "both-dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
showSearch={!disabled} showSearch={!disabled}
/> />
</Form.Item> </Form.Item>

44
ui/src/components/provider/AccessProviderSelect.tsx
View File

@ -1,15 +1,16 @@
import { memo, useEffect, useState } from "react"; import { memo, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Avatar, Select, type SelectProps, Space, Tag, Typography } from "antd"; import { Avatar, Select, type SelectProps, Space, Tag, Typography } from "antd";
import { ACCESS_USAGES, type AccessProvider, accessProvidersMap } from "@/domain/provider"; import Show from "@/components/Show";
import { ACCESS_USAGES, type AccessProvider, type AccessUsageType, accessProvidersMap } from "@/domain/provider";
export type AccessProviderSelectProps = Omit< export type AccessProviderSelectProps = Omit<
SelectProps, SelectProps,
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender" "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
> & { > & {
filter?: (record: AccessProvider) => boolean; filter?: (record: AccessProvider) => boolean;
showOptionTags?: boolean; showOptionTags?: boolean | { [key in AccessUsageType]?: boolean };
}; };
const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProviderSelectProps = { showOptionTags: true }) => { const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProviderSelectProps = { showOptionTags: true }) => {
@ -30,22 +31,43 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
); );
}, [filter]); }, [filter]);
const showOptionTagsForDNS = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.DNS] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagsForHosting = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.HOSTING] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagsForCA = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.CA] : !!showOptionTags;
}, [showOptionTags]);
const showOptionTagsForNotification = useMemo(() => {
return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.NOTIFICATION] : !!showOptionTags;
}, [showOptionTags]);
const renderOption = (key: string) => { const renderOption = (key: string) => {
const provider = accessProvidersMap.get(key); const provider = accessProvidersMap.get(key) ?? ({ type: "", name: "", icon: "", usages: [] } as unknown as AccessProvider);
return ( return (
<div className="flex max-w-full items-center justify-between gap-4 overflow-hidden"> <div className="flex max-w-full items-center justify-between gap-4 overflow-hidden">
<Space className="max-w-full grow truncate" size={4}> <Space className="max-w-full grow truncate" size={4}>
<Avatar src={provider?.icon} size="small" /> <Avatar src={provider.icon} size="small" />
<Typography.Text className="leading-loose" type={provider?.builtin ? "secondary" : undefined} delete={provider?.builtin ? true : undefined} ellipsis> <Typography.Text className="leading-loose" type={provider.builtin ? "secondary" : undefined} delete={provider.builtin ? true : undefined} ellipsis>
{t(provider?.name ?? "")} {t(provider.name)}
</Typography.Text> </Typography.Text>
</Space> </Space>
{showOptionTags && ( {showOptionTags && (
<div> <div>
{provider?.usages?.includes(ACCESS_USAGES.DNS) && <Tag color="peru">{t("access.props.provider.usage.dns")}</Tag>} <Show when={showOptionTagsForDNS && provider.usages.includes(ACCESS_USAGES.DNS)}>
{provider?.usages?.includes(ACCESS_USAGES.HOSTING) && <Tag color="royalblue">{t("access.props.provider.usage.hosting")}</Tag>} <Tag color="peru">{t("access.props.provider.usage.dns")}</Tag>
{/* {provider?.usages?.includes(ACCESS_USAGES.CA) && <Tag color="crimson">{t("access.props.provider.usage.ca")}</Tag>} */} </Show>
{/* {provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION) && <Tag color="mediumaquamarine">{t("access.props.provider.usage.notification")}</Tag>} */} <Show when={showOptionTagsForHosting && provider.usages.includes(ACCESS_USAGES.HOSTING)}>
<Tag color="royalblue">{t("access.props.provider.usage.hosting")}</Tag>
</Show>
<Show when={showOptionTagsForCA && provider.usages.includes(ACCESS_USAGES.CA)}>
<Tag color="crimson">{t("access.props.provider.usage.ca")}</Tag>
</Show>
<Show when={showOptionTagsForNotification && provider.usages.includes(ACCESS_USAGES.NOTIFICATION)}>
<Tag color="mediumaquamarine">{t("access.props.provider.usage.notification")}</Tag>
</Show>
</div> </div>
)} )}
</div> </div>