feat(web): 监控账号详情展示获赞与作者介绍——介绍单行省略,「更多」hover 弹出全文
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
// 作品列表走 GET /creator/works?source_id=<competitor_id>&source_type=competitor,定时采集由后端调度器维护。
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { history, useParams } from '@umijs/max';
|
||||
import { Alert, App, Avatar, Button, Card, Descriptions, Flex, Space, Tag, Typography } from 'antd';
|
||||
import { Alert, App, Avatar, Button, Card, Descriptions, Flex, Popover, Space, Tag, Typography } from 'antd';
|
||||
import { creatorAction, getOne } from '@/services/api';
|
||||
import { conflictMessage, dateTime } from '@/utils/helpers';
|
||||
import { usePageActions } from '@/components/PageActions';
|
||||
@@ -18,9 +18,11 @@ interface CompetitorDetail {
|
||||
avatar_url: string;
|
||||
homepage_url?: string;
|
||||
tags?: string[];
|
||||
signature?: string;
|
||||
enabled: boolean;
|
||||
follower_count?: number | null;
|
||||
following_count?: number | null;
|
||||
total_favorited?: number | null;
|
||||
aweme_count?: number | null;
|
||||
sync_status?: string;
|
||||
sync_error?: string;
|
||||
@@ -144,8 +146,32 @@ export default function Page() {
|
||||
{ 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) : '—' },
|
||||
{
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
const assert = require('node:assert/strict');
|
||||
const { readFileSync } = require('node:fs');
|
||||
const { test } = require('node:test');
|
||||
const ts = require('typescript');
|
||||
|
||||
const source = ts.createSourceFile(
|
||||
'index.tsx',
|
||||
readFileSync(`${__dirname}/../src/pages/accounts/monitoring/$id/index.tsx`, 'utf8'),
|
||||
ts.ScriptTarget.Latest,
|
||||
true,
|
||||
ts.ScriptKind.TSX,
|
||||
);
|
||||
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('作者介绍单行展示,结尾「更多」hover 弹出全文', () => {
|
||||
// 单行省略:Typography.Text ellipsis
|
||||
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 \?/, '签名应判空');
|
||||
});
|
||||
Reference in New Issue
Block a user