From 0d9d2ffe13d79f69b88a5e219999b4b7f5bcf937 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Thu, 24 Sep 2026 17:10:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E8=B4=A6=E5=8F=B7=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E5=B8=83=E5=B1=80=E4=BF=AE=E5=A4=8D=E2=80=94?=
 =?UTF-8?q?=E2=80=94Tab=20=E5=86=85=E5=AE=B9=E7=BA=B5=E5=90=91=E5=88=86?=
 =?UTF-8?q?=E5=B1=82=E3=80=81=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E4=B8=8A?=
 =?UTF-8?q?=E7=A7=BB=E9=A1=B5=E5=A4=B4=E3=80=81=E5=B9=B3=E5=8F=B0/?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E6=96=87=E6=A1=88=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/accounts/$id/index.tsx | 128 ++++++++++++++-------------
 1 file changed, 65 insertions(+), 63 deletions(-)

diff --git a/web/src/pages/accounts/$id/index.tsx b/web/src/pages/accounts/$id/index.tsx
index 4eb8975..f6d4da3 100644
--- a/web/src/pages/accounts/$id/index.tsx
+++ b/web/src/pages/accounts/$id/index.tsx
@@ -18,7 +18,8 @@ import {
   message,
 } from 'antd';
 import { accountAction, createDraft, getOne, getList } from '@/services/api';
-import { accountReadiness, conflictMessage, dateTime } from '@/utils/helpers';
+import { accountReadiness, conflictMessage, dateTime, platformLabel } from '@/utils/helpers';
+import { usePageActions } from '@/components/PageActions';
 
 export default function Page() {
   const { id = '' } = useParams<{ id: string }>();
@@ -34,6 +35,17 @@ export default function Page() {
   const [draftBusy, setDraftBusy] = useState(false);
   const [messageApi, contextHolder] = message.useMessage();
 
+  // 页头动作槽：编辑/返回注册到 Layout 页头 content 槽（标题下方右侧），不在卡片内重复渲染。
+  usePageActions(
+    account ? (
+      <Space>
+        <Button onClick={() => history.push('/accounts')}>返回社媒账号</Button>
+        <Button type="primary" onClick={() => history.push(`/accounts/${account.id}/edit`)}>编辑账号</Button>
+      </Space>
+    ) : null,
+    [account?.id],
+  );
+
   const readiness = account ? accountReadiness(account, binding, browsersError) : null;
 
   const loadAll = useCallback(async () => {
@@ -119,14 +131,9 @@ export default function Page() {
       key: 'status',
       label: '账号状态',
       children: (
-        <div>
-          <Flex>
-            <div>{statusTag}</div>
-            <Descriptions column={1} bordered size="small">
-              <Descriptions.Item label="授权">{account.authorization_status === 'authorized' ? '已授权' : '已撤销'}</Descriptions.Item>
-              <Descriptions.Item label="运行">{`${account.runtime_status === 'active' ? '启用' : '暂停'} · 版本 ${account.version}`}</Descriptions.Item>
-              <Descriptions.Item label="TAGS">{account.tags?.join('、') || '无'}</Descriptions.Item>
-            </Descriptions>
+        <Flex vertical gap={16}>
+          <Flex justify="space-between" align="center" gap={16}>
+            {statusTag}
             <Space wrap>
               <Button danger disabled={actionBusy || account.runtime_status === 'paused'} onClick={() => setPauseOpen(true)}>
                 暂停账号
@@ -135,9 +142,14 @@ export default function Page() {
                 恢复账号
               </Button>
             </Space>
-            <Alert type="info" showIcon title="暂停会把待领取任务置为 hold；恢复账号只恢复账号可用性，不会自动恢复既有 hold。" />
           </Flex>
-        </div>
+          <Descriptions column={1} bordered size="small">
+            <Descriptions.Item label="授权">{account.authorization_status === 'authorized' ? '已授权' : '已撤销'}</Descriptions.Item>
+            <Descriptions.Item label="运行">{`${account.runtime_status === 'active' ? '启用' : '暂停'} · 版本 ${account.version}`}</Descriptions.Item>
+            <Descriptions.Item label="标签">{account.tags?.join('、') || '无'}</Descriptions.Item>
+          </Descriptions>
+          <Alert type="info" showIcon title="暂停会把待领取任务置为 hold；恢复账号只恢复账号可用性，不会自动恢复既有 hold。" />
+        </Flex>
       ),
     },
     {
@@ -181,44 +193,41 @@ export default function Page() {
       key: 'drafts',
       label: '文本草稿',
       children: (
-        <div>
-          <Flex>
-            <Typography.Text type="secondary">仅支持单用户 Phase A Mock 文本；内部 ID 与版本由系统生成。</Typography.Text>
-            <Form form={draftForm} layout="vertical">
-              <Form.Item
-                name="content"
-                label="草稿内容"
-                extra={readiness?.ready ? '创建后进入只读快照核对并显式确认' : `资源未就绪：${readiness?.label || '正在加载'}`}
-              >
-                <Input.TextArea rows={4} disabled={!readiness?.ready || draftBusy} />
-              </Form.Item>
-              <Button
-                type="primary"
-                loading={draftBusy}
-                disabled={!readiness?.ready}
-                onClick={onCreateDraft}
-              >
-                创建草稿
-              </Button>
-            </Form>
-            <Typography.Text type="secondary">尚无草稿时无需处理；创建后请进入草稿核对。</Typography.Text>
-            {drafts.map((draft) => (
-              <Card key={draft.id} size="small">
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
-                  <div style={{ minWidth: 0 }}>
-                    <Typography.Text strong>草稿版本 {draft.version}</Typography.Text>
-                    <Typography.Paragraph type="secondary" ellipsis style={{ marginBottom: 0, fontSize: 12 }}>
-                      {draft.content}
-                    </Typography.Paragraph>
-                  </div>
-                  <Typography.Link onClick={() => history.push(`/drafts/${draft.id}`)} style={{ flexShrink: 0 }}>
-                    核对草稿
-                  </Typography.Link>
+        <Flex vertical gap={16}>
+          <Typography.Text type="secondary">仅支持单用户 Phase A Mock 文本；内部 ID 与版本由系统生成。</Typography.Text>
+          <Form form={draftForm} layout="vertical">
+            <Form.Item
+              name="content"
+              label="草稿内容"
+              extra={readiness?.ready ? '创建后进入只读快照核对并显式确认' : `资源未就绪：${readiness?.label || '正在加载'}`}
+            >
+              <Input.TextArea rows={4} disabled={!readiness?.ready || draftBusy} />
+            </Form.Item>
+            <Button
+              type="primary"
+              loading={draftBusy}
+              disabled={!readiness?.ready}
+              onClick={onCreateDraft}
+            >
+              创建草稿
+            </Button>
+          </Form>
+          {drafts.map((draft) => (
+            <Card key={draft.id} size="small">
+              <Flex justify="space-between" align="center" gap={12}>
+                <div style={{ minWidth: 0 }}>
+                  <Typography.Text strong>草稿版本 {draft.version}</Typography.Text>
+                  <Typography.Paragraph type="secondary" ellipsis style={{ marginBottom: 0, fontSize: 12 }}>
+                    {draft.content}
+                  </Typography.Paragraph>
                 </div>
-              </Card>
-            ))}
-          </Flex>
-        </div>
+                <Typography.Link onClick={() => history.push(`/drafts/${draft.id}`)} style={{ flexShrink: 0 }}>
+                  核对草稿
+                </Typography.Link>
+              </Flex>
+            </Card>
+          ))}
+        </Flex>
       ),
     },
   ];
@@ -226,21 +235,14 @@ export default function Page() {
   return (
     <div>
       {contextHolder}
-      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
-        <div style={{ minWidth: 0 }}>
-          <Typography.Title level={4} style={{ marginBottom: 4 }} ellipsis>
-            {account.name}
-          </Typography.Title>
-          <Typography.Text type="secondary">
-            {account.platform_account_key} · {account.platform}
-          </Typography.Text>
-        </div>
-        <Space>
-          <Button type="primary" onClick={() => history.push(`/accounts/${account.id}/edit`)}>
-            编辑账号
-          </Button>
-          <Button onClick={() => history.push('/accounts')}>返回社媒账号</Button>
-        </Space>
+      {/* 实体标识行：账号名 + 平台明细（动态数据，非页面标题）；操作按钮在页头槽。 */}
+      <div style={{ marginBottom: 16 }}>
+        <Typography.Title level={4} style={{ marginBottom: 4 }} ellipsis>
+          {account.name}
+        </Typography.Title>
+        <Typography.Text type="secondary">
+          {account.platform_account_key} · {platformLabel(account.platform)}
+        </Typography.Text>
       </div>
       <Tabs defaultActiveKey="status" items={items} />
       <Modal