From 50aada884f71835ec06d296df471e016f8156b83 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Wed, 30 Sep 2026 17:03:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E7=9B=91=E6=8E=A7=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E7=94=BB=E5=83=8F=E5=AF=B9=E9=BD=90=E6=8A=96=E9=9F=B3?=
 =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E5=BD=A2=E6=80=81=E2=80=94=E2=80=94=E5=85=B3?=
 =?UTF-8?q?=E6=B3=A8/=E7=B2=89=E4=B8=9D/=E8=8E=B7=E8=B5=9E=E7=8B=AC?=
 =?UTF-8?q?=E7=AB=8B=E6=95=B0=E5=AD=97=E8=A1=8C=EF=BC=8C=E4=BD=9C=E8=80=85?=
 =?UTF-8?q?=E4=BB=8B=E7=BB=8D=E5=8E=BB=20label=20=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E8=A1=8C=EF=BC=8C=E6=98=B5=E7=A7=B0=E5=90=8E=E6=8C=82=E6=8A=96?=
 =?UTF-8?q?=E9=9F=B3=E4=B8=BB=E9=A1=B5=E9=93=BE=E6=8E=A5=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E5=B9=B3=E5=8F=B0=E8=B4=A6=E5=8F=B7=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/accounts/monitoring/$id/index.tsx   | 62 +++++++++++--------
 web/tests/monitoring-account-detail.test.cjs  | 36 ++++++++---
 2 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/web/src/pages/accounts/monitoring/$id/index.tsx b/web/src/pages/accounts/monitoring/$id/index.tsx
index e9f4c84..b77eedc 100644
--- a/web/src/pages/accounts/monitoring/$id/index.tsx
+++ b/web/src/pages/accounts/monitoring/$id/index.tsx
@@ -136,42 +136,50 @@ export default function Page() {
                 {competitor.nickname || competitor.platform_account_key}
               </Typography.Title>
               <Tag color={syncMeta.color}>{syncMeta.label}</Tag>
+              <Typography.Link
+                href={`https://www.douyin.com/user/${competitor.platform_account_key}`}
+                target="_blank"
+              >
+                抖音主页
+              </Typography.Link>
             </Flex>
+            <Flex align="baseline" gap={24} wrap="wrap">
+              {[
+                { label: '关注', value: competitor.following_count },
+                { label: '粉丝', value: competitor.follower_count },
+                { label: '获赞', value: competitor.total_favorited },
+              ].map(({ label, value }) => (
+                <Flex key={label} align="baseline" gap={4}>
+                  <Typography.Text strong style={{ fontSize: 16 }}>{formatCount(value)}</Typography.Text>
+                  <Typography.Text>{label}</Typography.Text>
+                </Flex>
+              ))}
+            </Flex>
+            {competitor.signature ? (
+              <Flex align="center" gap={8} style={{ minWidth: 0 }}>
+                <Typography.Text ellipsis style={{ flex: 1, minWidth: 0 }}>
+                  {competitor.signature}
+                </Typography.Text>
+                <Popover
+                  title="作者介绍"
+                  content={
+                    <Typography.Paragraph style={{ maxWidth: 420, whiteSpace: 'pre-wrap', marginBottom: 0 }}>
+                      {competitor.signature}
+                    </Typography.Paragraph>
+                  }
+                >
+                  <Typography.Link>更多</Typography.Link>
+                </Popover>
+              </Flex>
+            ) : null}
             <Descriptions
               column={{ xs: 1, sm: 2 }}
               size="small"
               style={{ marginTop: 8 }}
               items={[
-                { key: 'key', label: '平台账号', children: competitor.platform_account_key },
                 { key: 'uid', label: '抖音号', children: competitor.unique_id || '—' },
-                { key: 'follower', label: '粉丝', children: formatCount(competitor.follower_count) },
-                { key: 'following', label: '关注', children: formatCount(competitor.following_count) },
-                { key: 'favorited', label: '获赞', children: formatCount(competitor.total_favorited) },
                 { key: 'aweme', label: '作品总数', children: formatCount(competitor.aweme_count) },
                 { key: 'tags', label: '标签', children: competitor.tags?.length ? competitor.tags.join('、') : '无' },
-                {
-                  key: 'signature',
-                  label: '作者介绍',
-                  // 对齐抖音主页形态：单行省略，结尾「更多」，hover 弹出全文（保留换行）。
-                  children: competitor.signature ? (
-                    <Flex align="center" gap={8} style={{ minWidth: 0 }}>
-                      <Typography.Text type="secondary" ellipsis style={{ flex: 1, minWidth: 0 }}>
-                        {competitor.signature}
-                      </Typography.Text>
-                      <Popover
-                        title="作者介绍"
-                        content={
-                          <Typography.Paragraph style={{ maxWidth: 420, whiteSpace: 'pre-wrap', marginBottom: 0 }}>
-                            {competitor.signature}
-                          </Typography.Paragraph>
-                        }
-                      >
-                        <Typography.Link>更多</Typography.Link>
-                      </Popover>
-                    </Flex>
-                  ) : (
-                    '—'
-                  ) },
                 { key: 'lastSync', label: '上次同步', children: competitor.last_sync_at ? dateTime(competitor.last_sync_at) : '—' },
                 { key: 'nextSync', label: '下次自动同步', children: competitor.next_sync_at ? dateTime(competitor.next_sync_at) : '—' },
                 {
diff --git a/web/tests/monitoring-account-detail.test.cjs b/web/tests/monitoring-account-detail.test.cjs
index 9c17f0e..01cb3b0 100644
--- a/web/tests/monitoring-account-detail.test.cjs
+++ b/web/tests/monitoring-account-detail.test.cjs
@@ -12,21 +12,37 @@ const source = ts.createSourceFile(
 );
 const code = source.getFullText();
 
-test('监控账号详情展示获赞与作者介绍', () => {
-  assert.ok(code.includes('total_favorited'), '接口类型应包含 total_favorited');
-  assert.ok(code.includes("competitor.signature"), '接口类型应包含 signature');
-  assert.ok(code.includes("label: '获赞'"), 'Descriptions 应有获赞项');
-  assert.ok(code.includes("label: '作者介绍'"), 'Descriptions 应有作者介绍项');
-  assert.ok(code.includes('formatCount(competitor.total_favorited)'), '获赞应走 formatCount');
+test('关注、粉丝、获赞单独一行，正常字体颜色', () => {
+  // 从 Descriptions 移出，不再以 label+children 形式出现
+  for (const label of ['粉丝', '关注', '获赞']) {
+    assert.ok(!code.includes(`label: '${label}', children:`), `${label} 不应留在 Descriptions`);
+  }
+  assert.ok(code.includes('competitor.following_count'), '应有关注数');
+  assert.ok(code.includes('competitor.follower_count'), '应有粉丝数');
+  assert.ok(code.includes('competitor.total_favorited'), '应有获赞数');
+  assert.ok(code.includes("{ label: '关注', value: competitor.following_count }"), '关注数据行');
+  assert.ok(code.includes("{ label: '粉丝', value: competitor.follower_count }"), '粉丝数据行');
+  assert.ok(code.includes("{ label: '获赞', value: competitor.total_favorited }"), '获赞数据行');
+  assert.match(code, /formatCount\(value\)/, '计数统一走 formatCount');
+  // 不灰：画像区不得使用 secondary 灰色文本
+  assert.doesNotMatch(code, /type="secondary"/, '画像数据应为正常颜色');
 });
 
-test('作者介绍单行展示，结尾「更多」hover 弹出全文', () => {
-  // 单行省略：Typography.Text ellipsis
+test('作者介绍单独一行，不展示「作者介绍」label', () => {
+  assert.ok(!code.includes("label: '作者介绍'"), '不应有作者介绍 label');
+  assert.ok(code.includes('competitor.signature'), '应有签名数据');
+  // 单行省略 + 结尾「更多」hover 弹出全文，保留换行
   assert.match(code, /<Typography\.Text[^>]*ellipsis/, '作者介绍应为单行省略文本');
-  // 更多触发器 + Popover 展示全文，保留换行
   assert.match(code, /<Popover\b/, '应使用 Popover 承载全文');
   assert.match(code, />更多</, '结尾应有「更多」触发器');
   assert.match(code, /pre-wrap/, '全文应保留换行');
-  // 无签名时展示占位符，不渲染更多入口
   assert.match(code, /competitor\.signature \?/, '签名应判空');
 });
+
+test('昵称后展示抖音主页链接，不再单独展示平台账号', () => {
+  assert.ok(
+    code.includes('https://www.douyin.com/user/${competitor.platform_account_key}'),
+    '主页链接应使用平台账号拼接',
+  );
+  assert.doesNotMatch(code, /label: '平台账号'/, '不应再展示平台账号项');
+});