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

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

@@ -8,14 +8,11 @@
       <span class="cts !text-18px !lh-26px title">账号信息</span>
     </div>
     <div class="account-info-box">
-      <div
+      <div class="grid grid-cols-4">
-        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({

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;
+    }
+  }
 }

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