fix(web): 账号详情页布局修复——Tab 内容纵向分层、操作按钮上移页头、平台/标签文案统一

2026-09-24 17:10:28 +08:00
parent 04bec3aa84
commit 0d9d2ffe13
1 changed files with 65 additions and 63 deletions
@@ -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