feat(domain): improve domain form UX

- Make name field optional (defaults to domain if empty)
- Simplify domain placeholder and error messages
- Add test connection button for credential validation before save
This commit is contained in:
2026-03-12 11:03:52 +08:00
parent 8b0805bebf
commit a5da34e1eb
5 changed files with 128 additions and 18 deletions

View File

@@ -24,6 +24,7 @@ import type { Result } from "@renderer/types/ipc";
import type { import type {
CreateDomainParams, CreateDomainParams,
UpdateDomainParams, UpdateDomainParams,
TestDomainConnectionParams,
GetSpacesParams, GetSpacesParams,
GetAppsParams, GetAppsParams,
GetAppDetailParams, GetAppDetailParams,
@@ -206,6 +207,37 @@ function registerTestConnection(): void {
}); });
} }
/**
* Test domain connection with temporary credentials
*/
function registerTestDomainConnection(): void {
handleWithParams<TestDomainConnectionParams, boolean>(
"testDomainConnection",
async (params) => {
const tempDomain: DomainWithPassword = {
id: "temp",
name: "temp",
domain: params.domain,
username: params.username,
password: params.password || "",
authType: params.authType,
apiToken: params.apiToken,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
};
const client = new KintoneClient(tempDomain);
const result = await client.testConnection();
if (!result.success) {
throw new Error(result.error || "Connection failed");
}
return true;
},
);
}
// ==================== Browse IPC Handlers ==================== // ==================== Browse IPC Handlers ====================
/** /**
@@ -521,6 +553,7 @@ export function registerIpcHandlers(): void {
registerUpdateDomain(); registerUpdateDomain();
registerDeleteDomain(); registerDeleteDomain();
registerTestConnection(); registerTestConnection();
registerTestDomainConnection();
// Browse // Browse
registerGetSpaces(); registerGetSpaces();

View File

@@ -3,6 +3,7 @@ import type {
Result, Result,
CreateDomainParams, CreateDomainParams,
UpdateDomainParams, UpdateDomainParams,
TestDomainConnectionParams,
GetSpacesParams, GetSpacesParams,
GetAppsParams, GetAppsParams,
GetAppDetailParams, GetAppDetailParams,
@@ -40,6 +41,7 @@ export interface ElectronAPI {
updateDomain: (params: UpdateDomainParams) => Promise<Result<Domain>>; updateDomain: (params: UpdateDomainParams) => Promise<Result<Domain>>;
deleteDomain: (id: string) => Promise<Result<void>>; deleteDomain: (id: string) => Promise<Result<void>>;
testConnection: (id: string) => Promise<Result<DomainWithStatus>>; testConnection: (id: string) => Promise<Result<DomainWithStatus>>;
testDomainConnection: (params: TestDomainConnectionParams) => Promise<Result<boolean>>;
// ==================== Browse ==================== // ==================== Browse ====================
getSpaces: (params: GetSpacesParams) => Promise<Result<KintoneSpace[]>>; getSpaces: (params: GetSpacesParams) => Promise<Result<KintoneSpace[]>>;

View File

@@ -13,6 +13,7 @@ const api: ElectronAPI = {
updateDomain: (params) => ipcRenderer.invoke("updateDomain", params), updateDomain: (params) => ipcRenderer.invoke("updateDomain", params),
deleteDomain: (id) => ipcRenderer.invoke("deleteDomain", id), deleteDomain: (id) => ipcRenderer.invoke("deleteDomain", id),
testConnection: (id) => ipcRenderer.invoke("testConnection", id), testConnection: (id) => ipcRenderer.invoke("testConnection", id),
testDomainConnection: (params) => ipcRenderer.invoke("testDomainConnection", params),
// ==================== Browse ==================== // ==================== Browse ====================
getSpaces: (params) => ipcRenderer.invoke("getSpaces", params), getSpaces: (params) => ipcRenderer.invoke("getSpaces", params),

View File

@@ -64,11 +64,23 @@ const DomainForm: React.FC<DomainFormProps> = ({ open, onClose, domainId }) => {
try { try {
const values = await form.validateFields(); const values = await form.validateFields();
// Process domain: remove protocol prefix and trailing slashes
let processedDomain = values.domain.trim();
if (processedDomain.startsWith("https://")) {
processedDomain = processedDomain.slice(8);
} else if (processedDomain.startsWith("http://")) {
processedDomain = processedDomain.slice(7);
}
processedDomain = processedDomain.replace(/\/+$/, "");
// Use domain as name if name is empty
const name = values.name?.trim() || processedDomain;
if (isEdit && editingDomain) { if (isEdit && editingDomain) {
const params: UpdateDomainParams = { const params: UpdateDomainParams = {
id: domainId, id: domainId,
name: values.name, name,
domain: values.domain, domain: processedDomain,
username: values.username, username: values.username,
authType: values.authType, authType: values.authType,
apiToken: apiToken:
@@ -89,8 +101,8 @@ const DomainForm: React.FC<DomainFormProps> = ({ open, onClose, domainId }) => {
} }
} else { } else {
const params: CreateDomainParams = { const params: CreateDomainParams = {
name: values.name, name,
domain: values.domain, domain: processedDomain,
username: values.username, username: values.username,
password: values.password, password: values.password,
authType: values.authType, authType: values.authType,
@@ -112,6 +124,48 @@ const DomainForm: React.FC<DomainFormProps> = ({ open, onClose, domainId }) => {
}; };
const authType = Form.useWatch("authType", form); const authType = Form.useWatch("authType", form);
const [testing, setTesting] = React.useState(false);
// Test connection with current form values
const handleTestConnection = async () => {
try {
const values = await form.validateFields([
"domain",
"username",
"authType",
"password",
"apiToken",
]);
// Process domain
let processedDomain = values.domain.trim();
if (processedDomain.startsWith("https://")) {
processedDomain = processedDomain.slice(8);
} else if (processedDomain.startsWith("http://")) {
processedDomain = processedDomain.slice(7);
}
processedDomain = processedDomain.replace(/\/+$/, "");
setTesting(true);
const result = await window.api.testDomainConnection({
domain: processedDomain,
username: values.username,
authType: values.authType,
password: values.authType === "password" ? values.password : undefined,
apiToken: values.authType === "api_token" ? values.apiToken : undefined,
});
if (result.success) {
message.success("连接成功");
} else {
message.error(result.error || "连接失败");
}
} catch (error) {
console.error("Test connection failed:", error);
} finally {
setTesting(false);
}
};
return ( return (
<Modal <Modal
@@ -128,12 +182,8 @@ const DomainForm: React.FC<DomainFormProps> = ({ open, onClose, domainId }) => {
className={styles.form} className={styles.form}
initialValues={{ authType: "password" }} initialValues={{ authType: "password" }}
> >
<Form.Item <Form.Item name="name" label="名称">
name="name" <Input placeholder="可选,留空则使用域名" />
label="名称"
rules={[{ required: true, message: "请输入名称" }]}
>
<Input placeholder="例如:生产环境" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
@@ -142,23 +192,35 @@ const DomainForm: React.FC<DomainFormProps> = ({ open, onClose, domainId }) => {
rules={[ rules={[
{ required: true, message: "请输入域名" }, { required: true, message: "请输入域名" },
{ {
pattern: /^[\w.-]+$/, validator: (_, value) => {
message: "请输入有效的域名例如company.kintone.com", if (!value) return Promise.resolve();
// Allow https:// or http:// prefix
let domain = value.trim();
if (domain.startsWith("https://")) {
domain = domain.slice(8);
} else if (domain.startsWith("http://")) {
domain = domain.slice(7);
}
// Remove trailing slashes
domain = domain.replace(/\/+$/, "");
// Validate domain format
if (/^[\w.-]+$/.test(domain)) {
return Promise.resolve();
}
return Promise.reject(new Error("请输入有效的域名"));
},
}, },
]} ]}
> >
<Input placeholder="例如:company.kintone.com" /> <Input placeholder="https://company.kintone.com" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="username" name="username"
label="用户名" label="用户名"
rules={[ rules={[{ required: true, message: "请输入用户名" }]}
{ required: true, message: "请输入用户名" },
{ type: "email", message: "请输入有效的邮箱地址" },
]}
> >
<Input placeholder="登录 Kintone 的邮箱地址" /> <Input placeholder="登录 Kintone 的用户名" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
@@ -197,6 +259,9 @@ const DomainForm: React.FC<DomainFormProps> = ({ open, onClose, domainId }) => {
<Form.Item style={{ marginTop: 24, marginBottom: 0 }}> <Form.Item style={{ marginTop: 24, marginBottom: 0 }}>
<Space style={{ width: "100%", justifyContent: "flex-end" }}> <Space style={{ width: "100%", justifyContent: "flex-end" }}>
<Button onClick={onClose}></Button> <Button onClick={onClose}></Button>
<Button onClick={handleTestConnection} loading={testing}>
</Button>
<Button type="primary" onClick={handleSubmit} loading={loading}> <Button type="primary" onClick={handleSubmit} loading={loading}>
{isEdit ? "更新" : "创建"} {isEdit ? "更新" : "创建"}
</Button> </Button>

View File

@@ -38,6 +38,14 @@ export interface UpdateDomainParams {
apiToken?: string; apiToken?: string;
} }
export interface TestDomainConnectionParams {
domain: string;
username: string;
authType: "password" | "api_token";
password?: string;
apiToken?: string;
}
// ==================== Browse IPC Types ==================== // ==================== Browse IPC Types ====================
export interface GetSpacesParams { export interface GetSpacesParams {
@@ -126,6 +134,7 @@ export interface ElectronAPI {
updateDomain: (params: UpdateDomainParams) => Promise<Result<Domain>>; updateDomain: (params: UpdateDomainParams) => Promise<Result<Domain>>;
deleteDomain: (id: string) => Promise<Result<void>>; deleteDomain: (id: string) => Promise<Result<void>>;
testConnection: (id: string) => Promise<Result<DomainWithStatus>>; testConnection: (id: string) => Promise<Result<DomainWithStatus>>;
testDomainConnection: (params: TestDomainConnectionParams) => Promise<Result<boolean>>;
// Browse // Browse
getSpaces: (params: GetSpacesParams) => Promise<Result<KintoneSpace[]>>; getSpaces: (params: GetSpacesParams) => Promise<Result<KintoneSpace[]>>;