CodeCow/certimate
1
0
Fork 0
mirror of https://github.com/certimate-go/certimate.git synced 2026-06-30 21:05:12 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(ui): clean code

Browse Source
This commit is contained in:
Fu Diwei 2025-12-18 16:20:36 +08:00
parent fae60f23af
commit 7b67935768
11 changed files with 82 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/components/access/AccessSelect.tsx
View File

@ -7,8 +7,7 @@ import { accessProvidersMap } from "@/domain/provider";
import { useZustandShallowSelector } from "@/hooks";
import { useAccessesStore } from "@/stores/access";
export interface AccessTypeSelectProps
extends Omit<SelectProps, "filterOption" | "filterSort" | "labelRender" | "loading" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> {
export interface AccessTypeSelectProps extends Omit<SelectProps, "labelRender" | "loading" | "options" | "optionLabelProp" | "optionRender"> {
onFilter?: (value: string, option: AccessModel) => boolean;
}
@ -56,11 +55,14 @@ const AccessSelect = ({ onFilter, ...props }: AccessTypeSelectProps) => {
return (
<Select
{...props}
filterOption={(inputValue, option) => {
if (!option) return false;
showSearch={{
filterOption: (inputValue, option) => {
if (!option) return false;
const value = inputValue.toLowerCase();
return option.label.toLowerCase().includes(value);
const value = inputValue.toLowerCase();
return option.label.toLowerCase().includes(value);
},
optionFilterProp: "label",
}}
labelRender={({ value }) => {
if (value != null) {
@ -71,7 +73,6 @@ const AccessSelect = ({ onFilter, ...props }: AccessTypeSelectProps) => {
}}
loading={!loadedAtOnce}
options={options}
optionFilterProp="label"
optionLabelProp={void 0}
optionRender={(option) => renderOption(option.data.value)}
/>

4
ui/src/components/access/forms/AccessConfigFieldsProviderAzure.tsx
View File

@ -57,7 +57,9 @@ const AccessConfigFormFieldsProviderAzure = () => {
<AutoComplete
options={["public", "azureusgovernment", "azurechina"].map((value) => ({ value }))}
placeholder={t("access.form.azure_cloud_name.placeholder")}
filterOption={(inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase())}
showSearch={{
filterOption: (inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase()),
}}
/>
</Form.Item>
</>

4
ui/src/components/access/forms/AccessConfigFieldsProviderOVHcloud.tsx
View File

@ -29,7 +29,9 @@ const AccessConfigFormFieldsProviderOVHcloud = () => {
<AutoComplete
options={["ovh-eu", "ovh-us", "ovh-ca"].map((value) => ({ value }))}
placeholder={t("access.form.ovhcloud_endpoint.placeholder")}
filterOption={(inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase())}
showSearch={{
filterOption: (inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase()),
}}
/>
</Form.Item>

19
ui/src/components/provider/ACMEDns01ProviderSelect.tsx
View File

@ -56,14 +56,6 @@ const ACMEDns01ProviderSelect = ({ showAvailability, onFilter, ...props }: ACMED
return (
<Select
{...props}
filterOption={(inputValue, option) => {
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
}}
labelRender={({ value }) => {
if (value != null) {
return renderOption(value as string);
@ -72,9 +64,18 @@ const ACMEDns01ProviderSelect = ({ showAvailability, onFilter, ...props }: ACMED
return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
}}
options={options}
optionFilterProp={void 0}
optionLabelProp={void 0}
optionRender={(option) => renderOption(option.data.value as string)}
showSearch={{
filterOption: (inputValue, option) => {
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
},
}}
/>
);
};

19
ui/src/components/provider/ACMEHttp01ProviderSelect.tsx
View File

@ -56,14 +56,6 @@ const ACMEHttp01ProviderSelect = ({ showAvailability, onFilter, ...props }: ACME
return (
<Select
{...props}
filterOption={(inputValue, option) => {
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
}}
labelRender={({ value }) => {
if (value != null) {
return renderOption(value as string);
@ -72,9 +64,18 @@ const ACMEHttp01ProviderSelect = ({ showAvailability, onFilter, ...props }: ACME
return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
}}
options={options}
optionFilterProp={void 0}
optionLabelProp={void 0}
optionRender={(option) => renderOption(option.data.value as string)}
showSearch={{
filterOption: (inputValue, option) => {
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
},
}}
/>
);
};

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

@ -84,12 +84,6 @@ const AccessProviderSelect = ({ showOptionTags, onFilter, ...props }: AccessProv
return (
<Select
{...props}
filterOption={(inputValue, option) => {
if (!option) return false;
const value = inputValue.toLowerCase();
return option.value.toLowerCase().includes(value) || option.label.toLowerCase().includes(value);
}}
labelRender={({ value }) => {
if (value != null) {
return renderOption(value as string);
@ -98,9 +92,19 @@ const AccessProviderSelect = ({ showOptionTags, onFilter, ...props }: AccessProv
return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
}}
options={options}
optionFilterProp={void 0}
optionLabelProp={void 0}
optionRender={(option) => renderOption(option.data.value)}
showSearch={{
filterOption: (inputValue, option) => {
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
},
optionFilterProp: "label",
}}
/>
);
};

22
ui/src/components/provider/CAProviderSelect.tsx
View File

@ -90,15 +90,6 @@ const CAProviderSelect = ({ showAvailability, showDefault, onFilter, ...props }:
return (
<Select
{...props}
filterOption={(inputValue, option) => {
if (option?.value === "") return true;
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
}}
labelRender={({ value }) => {
if (value != null && value !== "") {
return renderOption(value as string);
@ -107,9 +98,20 @@ const CAProviderSelect = ({ showAvailability, showDefault, onFilter, ...props }:
return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
}}
options={options}
optionFilterProp={void 0}
optionLabelProp={void 0}
optionRender={(option) => renderOption(option.data.value as string)}
showSearch={{
filterOption: (inputValue, option) => {
if (option?.value === "") return true; // 始终显示系统默认项
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
},
}}
value={value}
onChange={handleChange}
onSelect={handleChange}

19
ui/src/components/provider/DeploymentProviderSelect.tsx
View File

@ -56,14 +56,6 @@ const DeploymentProviderSelect = ({ showAvailability = false, onFilter, ...props
return (
<Select
{...props}
filterOption={(inputValue, option) => {
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
}}
labelRender={({ value }) => {
if (value != null) {
return renderOption(value as string);
@ -72,9 +64,18 @@ const DeploymentProviderSelect = ({ showAvailability = false, onFilter, ...props
return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
}}
options={options}
optionFilterProp={void 0}
optionLabelProp={void 0}
optionRender={(option) => renderOption(option.data.value as string)}
showSearch={{
filterOption: (inputValue, option) => {
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
},
}}
/>
);
};

19
ui/src/components/provider/NotificationProviderSelect.tsx
View File

@ -56,14 +56,6 @@ const NotificationProviderSelect = ({ showAvailability = false, onFilter, ...pro
return (
<Select
{...props}
filterOption={(inputValue, option) => {
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
}}
labelRender={({ value }) => {
if (value != null) {
return renderOption(value as string);
@ -72,9 +64,18 @@ const NotificationProviderSelect = ({ showAvailability = false, onFilter, ...pro
return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
}}
options={options}
optionFilterProp={void 0}
optionLabelProp={void 0}
optionRender={(option) => renderOption(option.data.value as string)}
showSearch={{
filterOption: (inputValue, option) => {
if (!option) return false;
if (!option.label) return false;
if (!option.value) return false;
const value = inputValue.toLowerCase();
return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
},
}}
/>
);
};

3
ui/src/components/provider/_shared.ts
View File

@ -9,8 +9,7 @@ import { useAccessesStore } from "@/stores/access";
type Provider = { type: string; name: string };
export interface SharedSelectProps<T extends Provider>
extends Omit<SelectProps, "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> {
export interface SharedSelectProps<T extends Provider> extends Omit<SelectProps, "labelRender" | "options" | "optionLabelProp" | "optionRender"> {
className?: string;
style?: React.CSSProperties;
onFilter?: (value: string, option: T) => boolean;

6
ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
View File

@ -11,12 +11,12 @@ import { z } from "zod";
import { validatePrivateKey } from "@/api/certificates";
import AccessEditDrawer from "@/components/access/AccessEditDrawer";
import AccessSelect from "@/components/access/AccessSelect";
import FileTextInput from "@/components/FileTextInput";
import MultipleSplitValueInput from "@/components/MultipleSplitValueInput";
import ACMEDns01ProviderSelect from "@/components/provider/ACMEDns01ProviderSelect";
import ACMEHttp01ProviderSelect from "@/components/provider/ACMEHttp01ProviderSelect";
import CAProviderSelect from "@/components/provider/CAProviderSelect";
import Show from "@/components/Show";
import FileTextInput from "@/components/FileTextInput";
import { type AccessModel } from "@/domain/access";
import { acmeDns01ProvidersMap, acmeHttp01ProvidersMap, caProvidersMap } from "@/domain/provider";
import { type WorkflowNodeConfigForBizApply, defaultNodeConfigForBizApply } from "@/domain/workflow";
@ -524,7 +524,9 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
allowClear
options={["classic", "tlsserver", "shortlived"].map((s) => ({ value: s }))}
placeholder={t("workflow_node.apply.form.acme_profile.placeholder")}
filterOption={(inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase())}
showSearch={{
filterOption: (inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase()),
}}
/>
</Form.Item>
</div>