From 4d1bf9094316b30af34821e2fb2628cf55c52720 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Mon, 28 Sep 2026 07:19:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E8=AF=A6=E6=83=85=E9=A1=B5=20Flex?=
 =?UTF-8?q?=20=E8=A1=A5=20vertical=EF=BC=8C=E6=81=A2=E5=A4=8D=E7=BA=B5?=
 =?UTF-8?q?=E5=90=91=E5=8D=A1=E7=89=87=E5=B8=83=E5=B1=80=EF=BC=88=E8=B5=B0?=
 =?UTF-8?q?=E6=9F=A5=20P0-#1=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/attempts/$id/index.tsx      |  2 +-
 web/src/pages/browsers/$id/index.tsx      |  2 +-
 web/src/pages/drafts/$id/index.tsx        | 10 +++++-----
 web/src/pages/network-exits/$id/index.tsx |  2 +-
 web/src/pages/tasks/$id/index.tsx         | 10 +++++-----
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/attempts/$id/index.tsx b/web/src/pages/attempts/$id/index.tsx
index 9bd7b04..af753d6 100644
--- a/web/src/pages/attempts/$id/index.tsx
+++ b/web/src/pages/attempts/$id/index.tsx
@@ -42,7 +42,7 @@ export default function Page() {
         </Typography.Text>
       </div>
       <Card>
-        <Flex>
+        <Flex vertical gap={12}>
           <Descriptions column={1} bordered size="small">
             <Descriptions.Item label="结果">{attempt.outcome || '执行中'}</Descriptions.Item>
             <Descriptions.Item label="开始">{dateTime(attempt.started_at)}</Descriptions.Item>
diff --git a/web/src/pages/browsers/$id/index.tsx b/web/src/pages/browsers/$id/index.tsx
index e46e987..8bb8c52 100644
--- a/web/src/pages/browsers/$id/index.tsx
+++ b/web/src/pages/browsers/$id/index.tsx
@@ -57,7 +57,7 @@ export default function Page() {
         <Button onClick={() => history.push('/browsers')}>返回运行环境</Button>
       </div>
       <Card>
-        <Flex>
+        <Flex vertical gap={12}>
           <Tag color={runtime.state === 'running' ? 'success' : runtime.state === 'stopped' ? 'warning' : 'default'}>
             {stateText[runtime.state] ?? `未知状态：${runtime.state}`}
           </Tag>
diff --git a/web/src/pages/drafts/$id/index.tsx b/web/src/pages/drafts/$id/index.tsx
index a43d8a5..01e0266 100644
--- a/web/src/pages/drafts/$id/index.tsx
+++ b/web/src/pages/drafts/$id/index.tsx
@@ -135,12 +135,12 @@ export default function Page() {
           }
         />
       ) : null}
-      <Flex>
+      <Flex vertical gap={16}>
         <Card title="只读内容快照">
           <Typography.Paragraph style={{ whiteSpace: 'pre-wrap', marginBottom: 0 }}>{draft.content}</Typography.Paragraph>
         </Card>
         <Card title="版本与当前资源">
-          <Flex>
+          <Flex vertical gap={8}>
             <Descriptions column={1} bordered size="small">
               <Descriptions.Item label="账号版本">{draft.account.version}</Descriptions.Item>
               <Descriptions.Item label="草稿版本">{draft.version}</Descriptions.Item>
@@ -151,7 +151,7 @@ export default function Page() {
           </Flex>
         </Card>
         <Card title="版本链">
-          <Flex>
+          <Flex vertical gap={4}>
             {versions.map((item: any) =>
               item.id === draft.id ? (
                 <Typography.Text key={item.id} strong>
@@ -166,7 +166,7 @@ export default function Page() {
           </Flex>
         </Card>
         <Card title="显式核对与入队">
-          <Flex>
+          <Flex vertical gap={12}>
             <Checkbox checked={reviewed} onChange={(e) => setReviewed(e.target.checked)}>
               我已核对当前账号、草稿内容、运行环境和网络出口
             </Checkbox>
@@ -193,7 +193,7 @@ export default function Page() {
           {tasks.length === 0 ? (
             <Typography.Text type="secondary">尚未入队。</Typography.Text>
           ) : (
-            <Flex>
+            <Flex vertical gap={8}>
               {tasks.map((task: any) => (
                 <Card key={task.id} size="small">
                   <Typography.Text strong>{task.id}</Typography.Text>
diff --git a/web/src/pages/network-exits/$id/index.tsx b/web/src/pages/network-exits/$id/index.tsx
index 66e1620..642841c 100644
--- a/web/src/pages/network-exits/$id/index.tsx
+++ b/web/src/pages/network-exits/$id/index.tsx
@@ -52,7 +52,7 @@ export default function Page() {
         <Button onClick={() => history.push('/network-exits')}>返回出口列表</Button>
       </div>
       <Card>
-        <Flex>
+        <Flex vertical gap={12}>
           <Tag color={exit.health_status === 'healthy' ? 'success' : exit.health_status === 'disabled' ? 'default' : exit.health_status === 'unchecked' ? 'warning' : 'error'}>
             {known ? healthText[exit.health_status] : `未知状态：${exit.health_status}`}
           </Tag>
diff --git a/web/src/pages/tasks/$id/index.tsx b/web/src/pages/tasks/$id/index.tsx
index a618604..ba749da 100644
--- a/web/src/pages/tasks/$id/index.tsx
+++ b/web/src/pages/tasks/$id/index.tsx
@@ -110,7 +110,7 @@ export default function Page() {
       key: 'status',
       label: '当前状态',
       children: (
-        <Flex>
+        <Flex vertical gap={12}>
           <Tag color={stateColor[task.state] || 'default'}>{stateText[task.state] || `未知状态：${task.state}`}</Tag>
           <Descriptions column={1} bordered size="small">
             <Descriptions.Item label="停止原因">{holdLabel(task.hold_reason)}</Descriptions.Item>
@@ -123,7 +123,7 @@ export default function Page() {
       key: 'confirmation',
       label: '确认快照',
       children: (
-        <Flex>
+        <Flex vertical gap={12}>
           <Descriptions column={1} bordered size="small">
             <Descriptions.Item label="确认">
               <Typography.Text copyable>{confirmation.id || '未记录'}</Typography.Text> · v{confirmation.version || '—'}
@@ -148,7 +148,7 @@ export default function Page() {
       key: 'execution',
       label: '执行关联',
       children: (
-        <Flex>
+        <Flex vertical gap={12}>
           <Descriptions column={1} bordered size="small">
             <Descriptions.Item label="环境">{task.browser_env_alias || '未记录'}</Descriptions.Item>
             <Descriptions.Item label="固定出口">{task.network_exit_id || '未记录'}</Descriptions.Item>
@@ -175,7 +175,7 @@ export default function Page() {
       key: 'action',
       label: '唯一安全动作',
       children: (
-        <Flex>
+        <Flex vertical gap={12}>
           {task.readiness_reason ? <Alert type="info" showIcon title={`当前仍被阻断：${holdLabel(task.readiness_reason)}。修复原资源并刷新后，才会开放恢复。`} /> : null}
           {task.allowed_action === 'verify' ? (
             <>
@@ -237,7 +237,7 @@ export default function Page() {
       <Tabs defaultActiveKey="status" items={items} />
       <Typography.Title level={5} style={{ marginTop: 24, marginBottom: 12 }}>执行尝试</Typography.Title>
       {task.attempts?.length ? (
-        <Flex>
+        <Flex vertical gap={8}>
           {task.attempts.map((attempt: any) => (
             <Card key={attempt.id} size="small">
               <Typography.Link onClick={() => history.push(`/attempts/${encodeURIComponent(attempt.id)}`)}>{attempt.id}</Typography.Link>