[优化] 更新域名列表输入组件，优化按钮样式并支持自定义容器类型

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: '' }]);
         }}

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}

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}

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>
   );
 }