From a002d98f3a1592698bbef5835c953f4bdfb99ecb Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Wed, 1 Apr 2026 09:34:17 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BC=98=E5=8C=96]=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=9F=9F=E5=90=8D=E5=88=97=E8=A1=A8=E8=BE=93=E5=85=A5=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=B9=B6=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../proxy-routes/components/domain-list-input.tsx    | 12 ++++++++----
 .../components/proxy-route-config-page.tsx           |  1 +
 .../components/proxy-route-create-drawer.tsx         |  1 +
 .../shared/components/resource-primitives.tsx        |  8 ++++++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/openflare_server/web/features/proxy-routes/components/domain-list-input.tsx b/openflare_server/web/features/proxy-routes/components/domain-list-input.tsx
index a4788e0b..9f7905a6 100644
--- a/openflare_server/web/features/proxy-routes/components/domain-list-input.tsx
+++ b/openflare_server/web/features/proxy-routes/components/domain-list-input.tsx
@@ -14,7 +14,11 @@ export type DomainListRow = {
   certificateId: string;
 };
 
-const actionButtonClassName = 'h-12 w-[72px] shrink-0 rounded-2xl px-0';
+const actionButtonBaseClassName = 'h-11 w-11 shrink-0 rounded-2xl px-0';
+const removeButtonClassName =
+  'border-[var(--border-default)] bg-[var(--surface-elevated)] text-[var(--foreground-secondary)] hover:border-[var(--status-danger-border)] hover:bg-[var(--status-danger-soft)] hover:text-[var(--status-danger-foreground)] disabled:border-[var(--border-default)] disabled:bg-[var(--surface-muted)] disabled:text-[var(--foreground-muted)]';
+const addButtonClassName =
+  'border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-[var(--foreground-secondary)] hover:border-[var(--brand-primary)] hover:bg-[var(--brand-primary-soft)] hover:text-[var(--brand-primary)]';
 
 function ensureRows(rows: DomainListRow[]) {
   return rows.length > 0 ? rows : [{ domain: '', certificateId: '' }];
@@ -146,11 +150,11 @@ export function DomainListInput({
 
         return (
           <div key={`${index}-${safeRows.length}`} className="space-y-2">
-            <div className="grid gap-3 md:grid-cols-[72px_minmax(0,1fr)_280px] md:items-start">
+            <div className="grid gap-3 md:grid-cols-[44px_minmax(0,1fr)_280px] md:items-start">
               <SecondaryButton
                 type="button"
                 aria-label={`删除域名输入框 ${index + 1}`}
-                className={actionButtonClassName}
+                className={`${actionButtonBaseClassName} ${removeButtonClassName}`}
                 disabled={safeRows.length === 1}
                 onClick={() => {
                   if (safeRows.length === 1) {
@@ -242,7 +246,7 @@ export function DomainListInput({
       <SecondaryButton
         type="button"
         aria-label="新增域名输入框"
-        className={actionButtonClassName}
+        className={`${actionButtonBaseClassName} ${addButtonClassName}`}
         onClick={() => {
           updateRows([...safeRows, { domain: '', certificateId: '' }]);
         }}
diff --git a/openflare_server/web/features/proxy-routes/components/proxy-route-config-page.tsx b/openflare_server/web/features/proxy-routes/components/proxy-route-config-page.tsx
index 21f3fb70..1bb13f8e 100644
--- a/openflare_server/web/features/proxy-routes/components/proxy-route-config-page.tsx
+++ b/openflare_server/web/features/proxy-routes/components/proxy-route-config-page.tsx
@@ -352,6 +352,7 @@ function DomainSettingsSection({
           label="域名列表"
           hint="每行配置一个域名。可为不同域名选择不同证书，相同证书也可以重复选择。"
           error={form.formState.errors.domain_rows?.message as string | undefined}
+          container="div"
         >
           <Controller
             control={form.control}
diff --git a/openflare_server/web/features/proxy-routes/components/proxy-route-create-drawer.tsx b/openflare_server/web/features/proxy-routes/components/proxy-route-create-drawer.tsx
index c8ea874e..302bf5a9 100644
--- a/openflare_server/web/features/proxy-routes/components/proxy-route-create-drawer.tsx
+++ b/openflare_server/web/features/proxy-routes/components/proxy-route-create-drawer.tsx
@@ -230,6 +230,7 @@ export function ProxyRouteCreateDrawer({
           label="域名列表"
           hint="每行配置一个域名，可按需为该行选择证书。保存时会自动汇总站点证书集合。"
           error={form.formState.errors.domain_rows?.message as string | undefined}
+          container="div"
         >
           <Controller
             control={form.control}
diff --git a/openflare_server/web/features/shared/components/resource-primitives.tsx b/openflare_server/web/features/shared/components/resource-primitives.tsx
index 18d0f80f..d6333c4a 100644
--- a/openflare_server/web/features/shared/components/resource-primitives.tsx
+++ b/openflare_server/web/features/shared/components/resource-primitives.tsx
@@ -14,6 +14,7 @@ interface ResourceFieldProps {
   error?: string;
   className?: string;
   tooltip?: string;
+  container?: 'label' | 'div';
   children: ReactNode;
 }
 
@@ -36,10 +37,13 @@ export function ResourceField({
   error,
   className,
   tooltip,
+  container = 'label',
   children,
 }: ResourceFieldProps) {
+  const Container = container;
+
   return (
-    <label className={cn('block space-y-2', className)}>
+    <Container className={cn('block space-y-2', className)}>
       <span className="flex items-center gap-2 text-sm font-medium text-[var(--foreground-primary)]">
         <span>{label}</span>
         {tooltip ? <FieldTooltip content={tooltip} /> : null}
@@ -54,7 +58,7 @@ export function ResourceField({
           {hint}
         </span>
       ) : null}
-    </label>
+    </Container>
   );
 }