jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): new WorkflowElements using antd

Browse Source
This commit is contained in:
Fu Diwei
2025-01-03 20:29:34 +08:00
parent c6a8f923e4
commit 8a16893082
43 changed files with 805 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@ import { Form, type FormInstance, Input } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
import { type AccessModel } from "@/domain/access";
import { ACCESS_PROVIDERS } from "@/domain/provider";
import { useAntdForm } from "@/hooks";
@@ -28,7 +29,6 @@ import AccessEditFormSSHConfig from "./AccessEditFormSSHConfig";
import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig";
import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
import AccessProviderSelect from "./AccessProviderSelect";
type AccessEditFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
type AccessEditFormPresets = "add" | "edit";

71
ui/src/components/access/AccessProviderSelect.tsx
View File

@@ -1,71 +0,0 @@
import { memo } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Select, type SelectProps, Space, Tag, Typography } from "antd";
import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
export type AccessProviderSelectProps = Omit<
SelectProps,
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
>;
const AccessProviderSelect = (props: AccessProviderSelectProps) => {
const { t } = useTranslation();
const options = Array.from(accessProvidersMap.values()).map((item) => ({
key: item.type,
value: item.type,
label: t(item.name),
}));
const renderOption = (key: string) => {
const provider = accessProvidersMap.get(key);
return (
<div className="flex items-center justify-between gap-4 max-w-full overflow-hidden">
<Space className="flex-grow max-w-full truncate" size={4}>
<Avatar src={provider?.icon} size="small" />
<Typography.Text className="leading-loose" ellipsis>
{t(provider?.name ?? "")}
</Typography.Text>
</Space>
<div>
{provider?.usage === ACCESS_USAGES.APPLY && (
<>
<Tag color="orange">{t("access.props.provider.usage.dns")}</Tag>
</>
)}
{provider?.usage === ACCESS_USAGES.DEPLOY && (
<>
<Tag color="blue">{t("access.props.provider.usage.host")}</Tag>
</>
)}
{provider?.usage === ACCESS_USAGES.ALL && (
<>
<Tag color="orange">{t("access.props.provider.usage.dns")}</Tag>
<Tag color="blue">{t("access.props.provider.usage.host")}</Tag>
</>
)}
</div>
</div>
);
};
return (
<Select
{...props}
labelRender={({ label, value }) => {
if (label) {
return renderOption(value as string);
}
return <Typography.Text type="secondary">{props.placeholder}</Typography.Text>;
}}
options={options}
optionFilterProp={undefined}
optionLabelProp={undefined}
optionRender={(option) => renderOption(option.data.value)}
/>
);
};
export default memo(AccessProviderSelect);