refactor: clean code

ui/src/components/certimate/AccessEditDialog.tsx

@@ -212,31 +212,32 @@ const AccessEditDialog = ({ trigger, op, data, className }: AccessEditProps) =>
         </DialogHeader>
         <ScrollArea className="max-h-[80vh]">
           <div className="container py-3">
-            <Label>{t("access.authorization.form.type.label")}</Label>
+            <div>
-
+              <Label>{t("access.authorization.form.type.label")}</Label>
-            <Select
+              <Select
-              onValueChange={(val) => {
+                onValueChange={(val) => {
-                setConfigType(val);
+                  setConfigType(val);
-              }}
+                }}
-              defaultValue={configType}
+                defaultValue={configType}
-            >
+              >
-              <SelectTrigger className="mt-3">
+                <SelectTrigger className="mt-3">
-                <SelectValue placeholder={t("access.authorization.form.type.placeholder")} />
+                  <SelectValue placeholder={t("access.authorization.form.type.placeholder")} />
-              </SelectTrigger>
+                </SelectTrigger>
-              <SelectContent>
+                <SelectContent>
-                <SelectGroup>
+                  <SelectGroup>
-                  <SelectLabel>{t("access.authorization.form.type.list")}</SelectLabel>
+                    <SelectLabel>{t("access.authorization.form.type.list")}</SelectLabel>
-                  {typeKeys.map((key) => (
+                    {typeKeys.map((key) => (
-                    <SelectItem value={key} key={key}>
+                      <SelectItem value={key} key={key}>
-                      <div className={cn("flex items-center space-x-2 rounded cursor-pointer", getOptionCls(key))}>
+                        <div className={cn("flex items-center space-x-2 rounded cursor-pointer", getOptionCls(key))}>
-                        <img src={accessTypeMap.get(key)?.[1]} className="h-6 w-6" />
+                          <img src={accessTypeMap.get(key)?.[1]} className="h-6 w-6" />
-                        <div>{t(accessTypeMap.get(key)?.[0] || "")}</div>
+                          <div>{t(accessTypeMap.get(key)?.[0] || "")}</div>
-                      </div>
+                        </div>
-                    </SelectItem>
+                      </SelectItem>
-                  ))}
+                    ))}
-                </SelectGroup>
+                  </SelectGroup>
-              </SelectContent>
+                </SelectContent>
-            </Select>
+              </Select>
+            </div>
 
             <div className="mt-8">{form}</div>
           </div>

ui/src/components/certimate/DeployList.tsx

@@ -477,7 +477,7 @@ const DeployToSSH = () => {
   }, []);
   return (
     <>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col space-y-8">
         <div>
           <Label>{t("domain.deployment.form.ssh_cert_path.label")}</Label>
           <Input
@@ -641,7 +641,7 @@ const DeployToOSS = () => {
   });
 
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-8">
       <div>
         <Label>{t("domain.deployment.form.oss_endpoint.label")}</Label>
 
@@ -760,7 +760,7 @@ const DeployToCDN = () => {
   });
 
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-8">
       <div>
         <Label>{t("domain.deployment.form.domain.label")}</Label>
         <Input
@@ -824,7 +824,7 @@ const DeployToKubernetes = () => {
 
   return (
     <>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col space-y-8">
         <div>
           <Label>{t("domain.deployment.form.k8s_namespace.label")}</Label>
           <Input
@@ -840,6 +840,7 @@ const DeployToKubernetes = () => {
             }}
           />
         </div>
+
         <div>
           <Label>{t("domain.deployment.form.k8s_secret_name.label")}</Label>
           <Input
@@ -855,6 +856,7 @@ const DeployToKubernetes = () => {
             }}
           />
         </div>
+
         <div>
           <Label>{t("domain.deployment.form.k8s_secret_data_key_for_crt.label")}</Label>
           <Input
@@ -870,6 +872,7 @@ const DeployToKubernetes = () => {
             }}
           />
         </div>
+
         <div>
           <Label>{t("domain.deployment.form.k8s_secret_data_key_for_key.label")}</Label>
           <Input

ui/src/components/certimate/KVList.tsx

@@ -88,7 +88,7 @@ const KVList = ({ variables, onValueChange }: KVListProps) => {
       <Show
         when={!!locVariables?.length}
         fallback={
-          <div className="border rounded-md p-3 text-sm mt-2 flex flex-col items-center">
+          <div className="border rounded-md p-3 text-sm flex flex-col items-center">
             <div className="text-muted-foreground">{t("domain.deployment.form.variables.empty")}</div>
 
             <KVEdit

ui/src/components/certimate/StringList.tsx

@@ -6,7 +6,7 @@ import { Edit, Plus, Trash2 } from "lucide-react";
 import Show from "@/components/Show";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import { FormControl, FormLabel } from "@/components/ui/form";
+import { FormControl, FormItem, FormLabel } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 
@@ -63,65 +63,67 @@ const StringList = ({ value, className, onValueChange, valueType = "domain" }: S
   return (
     <>
       <div className={cn(className)}>
-        <FormLabel className="flex justify-between items-center">
+        <FormItem>
-          <div>{t(titles[valueType])}</div>
+          <FormLabel className="flex justify-between items-center">
+            <div>{t(titles[valueType])}</div>
 
-          <Show when={list.length > 0}>
+            <Show when={list.length > 0}>
-            <StringEdit
+              <StringEdit
-              op="add"
+                op="add"
-              onValueChange={(val: string) => {
+                onValueChange={(val: string) => {
-                addVal(val);
+                  addVal(val);
-              }}
+                }}
-              valueType={valueType}
+                valueType={valueType}
-              value={""}
+                value={""}
-              trigger={
+                trigger={
-                <div className="flex items-center text-primary">
+                  <div className="flex items-center text-primary">
-                  <Plus size={16} className="cursor-pointer " />
+                    <Plus size={16} className="cursor-pointer " />
 
-                  <div className="text-sm ">{t("common.add")}</div>
+                    <div className="text-sm ">{t("common.add")}</div>
+                  </div>
+                }
+              />
+            </Show>
+          </FormLabel>
+          <FormControl>
+            <Show
+              when={list.length > 0}
+              fallback={
+                <div className="border rounded-md p-3 text-sm flex flex-col items-center">
+                  <div className="text-muted-foreground">{t("common.text." + valueType + ".empty")}</div>
+
+                  <StringEdit value={""} trigger={t("common.add")} onValueChange={addVal} valueType={valueType} />
                 </div>
               }
-            />
+            >
-          </Show>
+              <div className="border rounded-md p-3 text-sm text-gray-700 space-y-2 dark:text-white dark:border-stone-700 dark:bg-stone-950">
-        </FormLabel>
+                {list.map((item, index) => (
-        <FormControl>
+                  <div key={index} className="flex justify-between items-center">
-          <Show
+                    <div>{item}</div>
-            when={list.length > 0}
+                    <div className="flex space-x-2">
-            fallback={
+                      <StringEdit
-              <div className="border rounded-md p-3 text-sm mt-2 flex flex-col items-center">
+                        op="edit"
-                <div className="text-muted-foreground">{t("common.text." + valueType + ".empty")}</div>
+                        valueType={valueType}
-
+                        trigger={<Edit size={16} className="cursor-pointer text-gray-600 dark:text-white" />}
-                <StringEdit value={""} trigger={t("common.add")} onValueChange={addVal} valueType={valueType} />
+                        value={item}
-              </div>
+                        onValueChange={(val: string) => {
-            }
+                          editVal(index, val);
-          >
+                        }}
-            <div className="border rounded-md p-3 text-sm mt-2 text-gray-700 space-y-2 dark:text-white dark:border-stone-700 dark:bg-stone-950">
+                      />
-              {list.map((item, index) => (
+                      <Trash2
-                <div key={index} className="flex justify-between items-center">
+                        size={16}
-                  <div>{item}</div>
+                        className="cursor-pointer"
-                  <div className="flex space-x-2">
+                        onClick={() => {
-                    <StringEdit
+                          onRemoveClick(index);
-                      op="edit"
+                        }}
-                      valueType={valueType}
+                      />
-                      trigger={<Edit size={16} className="cursor-pointer text-gray-600 dark:text-white" />}
+                    </div>
-                      value={item}
-                      onValueChange={(val: string) => {
-                        editVal(index, val);
-                      }}
-                    />
-                    <Trash2
-                      size={16}
-                      className="cursor-pointer"
-                      onClick={() => {
-                        onRemoveClick(index);
-                      }}
-                    />
                   </div>
-                </div>
+                ))}
-              ))}
+              </div>
-            </div>
+            </Show>
-          </Show>
+          </FormControl>
-        </FormControl>
+        </FormItem>
       </div>
     </>
   );

ui/src/i18n/locales/en/nls.domain.json

@@ -37,7 +37,7 @@
   "domain.application.form.access.placeholder": "Please select DNS provider authorization configuration",
   "domain.application.form.access.list": "Provider Authorization Configurations",
   "domain.application.form.advanced_settings.label": "Advanced Settings",
-  "domain.application.form.key_algorithm.label": "Certificate Key Algorithm",
+  "domain.application.form.key_algorithm.label": "Certificate Key Algorithm (Default: RSA2048)",
   "domain.application.form.key_algorithm.placeholder": "Please select certificate key algorithm",
   "domain.application.form.timeout.label": "DNS Propagation Timeout (Seconds)",
   "domain.application.form.timeoue.placeholder": "Please enter maximum waiting time for DNS propagation",

ui/src/i18n/locales/zh/nls.domain.json

@@ -37,7 +37,7 @@
   "domain.application.form.access.placeholder": "请选择 DNS 服务商授权配置",
   "domain.application.form.access.list": "DNS 服务商授权配置列表",
   "domain.application.form.advanced_settings.label": "高级设置",
-  "domain.application.form.key_algorithm.label": "数字证书算法",
+  "domain.application.form.key_algorithm.label": "数字证书算法（默认：RSA2048）",
   "domain.application.form.key_algorithm.placeholder": "请选择数字证书算法",
   "domain.application.form.timeout.label": "DNS 传播检查超时时间（单位：秒）",
   "domain.application.form.timeoue.placeholder": "请输入 DNS 传播检查超时时间",