refactor(error-pages): merge trigger policy into one card

Combine enable, GET-only, and status code settings into a single
strategy card with the save action in the header for a cleaner layout.

docs/changelog/index.md

@@ -24,6 +24,7 @@ sidebar: false
 
 ### 改进
 
+- 错误页「触发策略」将启用开关、仅 GET、触发状态码合并为同一卡片，保存按钮置于卡片右上角，布局更紧凑。
 - 升级后端 Go 依赖至最新稳定版（Gin、GORM、OpenTelemetry、ClickHouse 驱动、AWS SDK、Redis 客户端等），并完成升级兼容性适配：OpenTelemetry 资源 schema 与语义约定版本对齐，ClickHouse 驱动新增格式查询/插入接口的测试替身补齐。
 - 升级前端 npm 依赖至最新稳定版（Next.js 16.3、React 19.2、recharts 3、react-day-picker 10、lucide-react 1.x、Tailwind CSS 4.3 等），适配图表/日历组件 API 变化，并将 ESLint 配置迁移为 eslint-config-next 16 的 flat config。
 - 受工具链兼容性限制，TypeScript 固定 6.0.3（typescript-eslint 尚不支持 7.x）、ESLint 固定 9.39.5（eslint-plugin-react 尚不支持 10.x）；react-hooks v7 新增的严格规则暂在 lint 配置中豁免，后续可分批采纳。

frontend/app/(main)/error-pages/page.tsx

@@ -109,51 +109,11 @@ export default function ErrorPagesPage() {
         </div>
 
         <Card className='border-dashed shadow-none'>
-          <CardHeader className='flex flex-row items-center justify-between gap-4'>
+          <CardHeader className='flex flex-row items-start justify-between gap-4 space-y-0'>
-            <div>
-              <CardTitle className='text-base'>启用源站错误页</CardTitle>
-              <CardDescription>
-                关闭后会透传源站或 Nginx 默认错误响应。
-              </CardDescription>
-            </div>
-            <Switch
-              checked={fields.enabled}
-              onCheckedChange={(enabled) =>
-                setFields((prev) => ({ ...prev, enabled }))
-              }
-              aria-label='启用源站错误页'
-            />
-          </CardHeader>
-        </Card>
-
-        <Card className='border-dashed shadow-none'>
-          <CardHeader className='flex flex-row items-center justify-between gap-4'>
-            <div>
-              <CardTitle className='text-base'>仅针对 GET 请求</CardTitle>
-              <CardDescription>
-                开启后仅对 GET
-                请求的匹配错误状态码返回自定义错误页；POST/PUT
-                等其它方法直接透传源站响应。
-              </CardDescription>
-            </div>
-            <Switch
-              checked={fields.getOnly}
-              disabled={!fields.enabled}
-              onCheckedChange={(getOnly) =>
-                setFields((prev) => ({ ...prev, getOnly }))
-              }
-              aria-label='仅针对 GET 请求'
-            />
-          </CardHeader>
-        </Card>
-
-        <Card className='border-dashed shadow-none'>
-          <CardHeader className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between space-y-0'>
             <div className='space-y-1.5'>
-              <CardTitle className='text-base'>触发状态码</CardTitle>
+              <CardTitle className='text-base'>触发策略</CardTitle>
               <CardDescription>
-                支持单码（如 502）或闭区间（如 500-599），范围 400–599。默认
+                配置源站错误页的启用条件与触发状态码。修改后需点击保存。
-                500-599。修改策略开关或状态码后需点击保存。
               </CardDescription>
             </div>
             <Button
@@ -170,24 +130,73 @@ export default function ErrorPagesPage() {
               保存
             </Button>
           </CardHeader>
-          <CardContent className='flex flex-col gap-2'>
+          <CardContent className='space-y-0 divide-y'>
-            <Label htmlFor='origin-error-status-codes' className='sr-only'>
+            <div className='flex items-start justify-between gap-6 pb-5'>
-              状态码标签
+              <div className='space-y-1'>
-            </Label>
+                <Label className='text-sm font-medium'>启用源站错误页</Label>
-            <TagsInput
+                <p className='text-sm text-muted-foreground'>
-              id='origin-error-status-codes'
+                  关闭后会透传源站或 Nginx 默认错误响应。
-              value={fields.statusCodes}
+                </p>
-              onChange={(statusCodes) => {
+              </div>
-                setFields((prev) => ({ ...prev, statusCodes }));
+              <Switch
-                setTagError(null);
+                checked={fields.enabled}
-              }}
+                onCheckedChange={(enabled) =>
-              validateTag={handleValidateTag}
+                  setFields((prev) => ({ ...prev, enabled }))
-              placeholder='例如 502 或 500-599，回车添加'
+                }
-              aria-invalid={!!tagError}
+                aria-label='启用源站错误页'
-            />
+                className='mt-0.5 shrink-0'
-            {tagError ? (
+              />
-              <p className='text-xs text-destructive'>{tagError}</p>
+            </div>
-            ) : null}
+
+            <div className='flex items-start justify-between gap-6 py-5'>
+              <div className='space-y-1'>
+                <Label className='text-sm font-medium'>仅针对 GET 请求</Label>
+                <p className='text-sm text-muted-foreground'>
+                  开启后仅对 GET
+                  请求的匹配错误状态码返回自定义错误页；POST/PUT
+                  等其它方法直接透传源站响应。
+                </p>
+              </div>
+              <Switch
+                checked={fields.getOnly}
+                disabled={!fields.enabled}
+                onCheckedChange={(getOnly) =>
+                  setFields((prev) => ({ ...prev, getOnly }))
+                }
+                aria-label='仅针对 GET 请求'
+                className='mt-0.5 shrink-0'
+              />
+            </div>
+
+            <div className='flex flex-col gap-3 pt-5'>
+              <div className='space-y-1'>
+                <Label
+                  htmlFor='origin-error-status-codes'
+                  className='text-sm font-medium'
+                >
+                  触发状态码
+                </Label>
+                <p className='text-sm text-muted-foreground'>
+                  支持单码（如 502）或闭区间（如 500-599），范围 400–599。默认
+                  500-599。
+                </p>
+              </div>
+              <TagsInput
+                id='origin-error-status-codes'
+                value={fields.statusCodes}
+                onChange={(statusCodes) => {
+                  setFields((prev) => ({ ...prev, statusCodes }));
+                  setTagError(null);
+                }}
+                validateTag={handleValidateTag}
+                placeholder='例如 502 或 500-599，回车添加'
+                aria-invalid={!!tagError}
+                disabled={!fields.enabled}
+              />
+              {tagError ? (
+                <p className='text-xs text-destructive'>{tagError}</p>
+              ) : null}
+            </div>
           </CardContent>
         </Card>