renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 账户详情页账号信息卡片

Browse Source
This commit is contained in:
rd
2025-07-16 15:16:40 +08:00
parent bd53413ae8
commit 247ed628f6
4 changed files with 82 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/media-account/icon-xhs.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 26 KiB

31
src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
View File

@ -8,14 +8,11 @@
<span class="cts !text-18px !lh-26px title">账号信息</span>
</div>
<div class="account-info-box">
<div class="grid grid-cols-4">
<div
v-for="(row, rowIdx) in getAccountInfoFields(dateType, showMore)"
:key="rowIdx"
class="grid grid-cols-4 mb-24px"
>
<div
v-for="(field, colIdx) in row"
v-for="(field, colIdx) in getAccountInfoFields(dateType, showMore)"
:key="colIdx"
class="mb-24px"
:class="field.dataIndex === 'ai_evaluation' ? 'col-span-2' : ''"
>
<template v-if="field.dataIndex === 'ai_evaluation'">
@ -62,6 +59,28 @@
}}</span>
</div>
</template>
<template v-else-if="field.dataIndex === 'tags'">
<div v-if="detailData.tags?.length" class="flex items-center">
<div v-for="(tag, index) in detailData.tags.slice(0, 2)" :key="index" class="tag-box">
<span class="text">{{ tag.name }}</span>
</div>
<a-tooltip
v-if="detailData.tags.length > 2"
position="top"
:content="
detailData.tags
.slice(2)
.map((v) => v.name)
.join(',')
"
>
<div class="tag-box">
<span class="text">{{ `+${detailData.tags.length - 2}` }}</span>
</div>
</a-tooltip>
</div>
<span class="cts" v-else>-</span>
</template>
<template v-else-if="field.dataIndex === 'like_collect_number'">
{{
formatNumberShow({

26
src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
View File

@ -1,4 +1,9 @@
.account-info-wrap {
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
position: relative;
.status-tag {
width: fit-content;
@ -38,4 +43,25 @@
}
}
}
.tag-box {
display: flex;
height: 20px;
padding: 0px 4px;
align-items: center;
border-radius: 2px;
background: var(--BG-200, #f2f3f5);
max-width: 100px;
.text {
@include ellipsis();
color: var(--Text-2, #3c4043);
font-family: $font-family-medium;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&:not(:last-child) {
margin-right: 4px;
}
}
}

61
src/views/property-marketing/media-account/account-detail/constants.ts
View File

@ -4,56 +4,47 @@
*/
import { CUSTOM_FIELDS, getPropPrefix } from '@/views/property-marketing/media-account/common_constants';
// 不足4个。就补两个null进去
export function groupArrayBySize<T extends { dataIndex: string; prop: string; title: string; tooltip: string }>(
fields: T[],
groupSize = 4,
dateType: string,
): T[][] {
const result: T[][] = [];
for (let i = 0; i < fields.length; i += groupSize) {
result.push(fields.slice(i, i + groupSize));
}
export function groupFieldsWithColSpan<
T extends { dataIndex: string; prop?: string; title: string; tooltip?: string; notDifferentiateDateType?: boolean },
>(fields: T[], dateType: string): (T & { colSpan: number })[] {
const labelPrefix = dateType === 'week' ? '近7天' : '近30天';
return result.map((item) => {
return item.map((item) => {
return fields.map((item) => {
const newItem = { ...item, colSpan: item.dataIndex === 'ai_evaluation' ? 2 : 1 };
if (item.notDifferentiateDateType) {
return newItem;
} else {
return {
...item,
...newItem,
dataIndex: `${getPropPrefix(dateType)}${item.dataIndex}`,
prop: `${getPropPrefix(dateType)}${item.prop}`,
title: `${labelPrefix}${item.title}`,
tooltip: `${labelPrefix}${item.tooltip}`,
tooltip: `${labelPrefix}${item.tooltip}`
};
});
}
});
}
export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
const baseFields = [
[
{ title: '账号名称', dataIndex: 'name' },
{ title: '数据更新时间', dataIndex: 'last_synced_at' },
{ title: '平台', dataIndex: 'platform' },
{ title: '状态', dataIndex: 'status', type: 'status' },
],
[
{ title: '账户ID', dataIndex: 'id' },
{ title: '手机号码', dataIndex: 'mobile' },
{ title: '运营人员', dataIndex: 'operator.name' },
{ title: '项目分组', dataIndex: 'group.name' },
],
[
{ title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。' },
{ title: '账号名称', dataIndex: 'name', notDifferentiateDateType: true },
{ title: '数据更新时间', dataIndex: 'last_synced_at', notDifferentiateDateType: true },
{ title: '平台', dataIndex: 'platform', notDifferentiateDateType: true },
{ title: '状态', dataIndex: 'status', type: 'status', notDifferentiateDateType: true },
{ title: '账户ID', dataIndex: 'id', notDifferentiateDateType: true },
{ title: '手机号码', dataIndex: 'mobile', notDifferentiateDateType: true },
{ title: '运营人员', dataIndex: 'operator.name', notDifferentiateDateType: true },
{ title: '所属项目', dataIndex: 'group.name', notDifferentiateDateType: true },
{ title: '分组', dataIndex: 'group.name', notDifferentiateDateType: true },
{ title: '标签', dataIndex: 'tags', notDifferentiateDateType: true },
{ title: 'AI评价', dataIndex: 'ai_evaluation', notDifferentiateDateType: true },
{ title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。', notDifferentiateDateType: true },
{
title: '总赞藏数',
notDifferentiateDateType: true,
dataIndex: 'like_collect_number',
tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
},
{ title: 'AI评价', dataIndex: 'ai_evaluation' },
],
];
const customFields = groupArrayBySize(CUSTOM_FIELDS, 4, dateType);
return showMore ? [...baseFields, ...customFields] : [...baseFields];
const allFields = showMore ? [...baseFields, ...CUSTOM_FIELDS] : baseFields.slice(0,8);
return groupFieldsWithColSpan(allFields, dateType);
};