diff --git a/src/assets/img/media-account/icon-xhs.png b/src/assets/img/media-account/icon-xhs.png
index 7429e58..c66ac71 100644
Binary files a/src/assets/img/media-account/icon-xhs.png and b/src/assets/img/media-account/icon-xhs.png differ
diff --git a/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
index 2d13904..06f1b32 100644
--- a/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
@@ -8,14 +8,11 @@
账号信息
-
+
@@ -62,6 +59,28 @@
}}
+
+
+
+ {{ tag.name }}
+
+
+
+ {{ `+${detailData.tags.length - 2}` }}
+
+
+
+ -
+
{{
formatNumberShow({
diff --git a/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss b/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
index 7147a6f..96cfce5 100644
--- a/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
@@ -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;
+ }
+ }
}
diff --git a/src/views/property-marketing/media-account/account-detail/constants.ts b/src/views/property-marketing/media-account/account-detail/constants.ts
index 9a7b452..fe6737a 100644
--- a/src/views/property-marketing/media-account/account-detail/constants.ts
+++ b/src/views/property-marketing/media-account/account-detail/constants.ts
@@ -4,56 +4,47 @@
*/
import { CUSTOM_FIELDS, getPropPrefix } from '@/views/property-marketing/media-account/common_constants';
-// 不足4个。就补两个null进去
-export function groupArrayBySize(
- 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: 'like_collect_number',
- tooltip: '账号所有内容获得的点赞数与收藏数总和,用于衡量历史内容的整体吸引力与认可度。',
- },
- { title: 'AI评价', dataIndex: 'ai_evaluation' },
- ],
+ { 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: '账号所有内容获得的点赞数与收藏数总和,用于衡量历史内容的整体吸引力与认可度。',
+ },
];
- 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);
};