feat: 账号看板详情

src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts

@@ -1,365 +0,0 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-06-28 10:33:06
- */
-
-export const CUSTOM_FIELDS = [
-  {
-    dataIndex: 'comment_number',
-    prop: 'comment_number',
-    title: '评论数',
-    width: 180,
-    tooltip: '账号所有内容的评论总数',
-    align: 'right',
-  },
-  {
-    dataIndex: 'share_number',
-    prop: 'share_number',
-    title: '分享数',
-    width: 180,
-    tooltip: '账号所有内容的分享总数',
-    align: 'right',
-  },
-  {
-    dataIndex: 'like_number',
-    prop: 'like_number',
-    title: '点赞数',
-    width: 180,
-    tooltip: '账号所有内容的点赞总数',
-    align: 'right',
-  },
-  {
-    dataIndex: 'rise_fans_number',
-    prop: 'rise_fans_number',
-    title: '粉丝增长数',
-    width: 180,
-    tooltip: '账号所有内容的粉丝增长总数',
-    align: 'right',
-  },
-  {
-    dataIndex: 'collect_number',
-    prop: 'collect_number',
-    title: '收藏数',
-    width: 180,
-    tooltip: '账号所有内容的收藏总数',
-    align: 'right',
-  },
-  {
-    dataIndex: 'view_number',
-    prop: 'view_number',
-    title: '浏览数',
-    width: 180,
-    tooltip: '账号所有内容的浏览总数',
-    align: 'right',
-  },
-  {
-    dataIndex: 'avg_view_time',
-    prop: 'avg_view_time',
-    title: '平均浏览数',
-    width: 180,
-    tooltip: '账号所有内容的平均浏览数',
-    align: 'right',
-  },
-  {
-    dataIndex: 'home_view_number',
-    prop: 'home_view_number',
-    title: '主页浏览数',
-    width: 180,
-    tooltip: '账号所有内容的主页浏览数',
-    align: 'right',
-  },
-  {
-    dataIndex: 'barrage_number',
-    prop: 'barrage_number',
-    title: '弹幕数',
-    width: 180,
-    tooltip: '账号所有内容的弹幕总数',
-    align: 'right',
-  },
-  {
-    dataIndex: 'rise_fans_rate',
-    prop: 'rise_fans_rate',
-    title: '粉丝增长率',
-    width: 180,
-    tooltip: '账号所有内容的粉丝增长率',
-    align: 'right',
-    suffix: '%',
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
-  },
-  {
-    dataIndex: 'home_view_rate',
-    prop: 'home_view_rate',
-    title: '主页浏览率',
-    width: 180,
-    tooltip: '账号所有内容的主页浏览率',
-    align: 'right',
-    suffix: '%',
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
-  },
-  {
-    dataIndex: 'share_rate',
-    prop: 'share_rate',
-    title: '分享率',
-    width: 180,
-    tooltip: '账号所有内容的分享率',
-    align: 'right',
-    suffix: '%',
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
-  },
-  {
-    dataIndex: 'collect_rate',
-    prop: 'collect_rate',
-    title: '收藏率',
-    width: 180,
-    tooltip: '账号所有内容的收藏率',
-    align: 'right',
-    suffix: '%',
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
-  },
-  {
-    dataIndex: 'comment_rate',
-    prop: 'comment_rate',
-    title: '评论率',
-    width: 180,
-    tooltip: '账号所有内容的评论率',
-    align: 'right',
-    suffix: '%',
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
-  },
-  {
-    dataIndex: 'avg_view_time_rate',
-    prop: 'avg_view_time_rate',
-    title: '平均访问时长增长比率',
-    width: 180,
-    tooltip: '账号所有内容的平均访问时长增长比率',
-    align: 'right',
-    suffix: '%',
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
-  },
-];
-
-export function getPeriodColumns(type = 'week') {
-  const prefix = type === 'week' ? 'seven' : 'thirty';
-  const labelPrefix = type === 'week' ? '近7天' : '近30天';
-
-  return CUSTOM_FIELDS.map((item) => ({
-    ...item,
-    dataIndex: `${prefix}_${item.dataIndex}`,
-    title: `${labelPrefix}${item.title}`,
-    prop: `${prefix}_${item.prop}`,
-  }));
-}
-
-export const getDefaultColumns = (type = 'week') => {
-  return [
-    {
-      title: '账号名称',
-      dataIndex: 'name',
-      prop: 'name',
-      width: 180,
-      fixed: 'left',
-    },
-    {
-      title: '项目分组',
-      dataIndex: 'group.name',
-      prop: 'group',
-      width: 180,
-      fixed: 'left',
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      prop: 'status',
-      width: 180,
-      fixed: 'left',
-    },
-    {
-      title: '运营人员',
-      dataIndex: 'operator.name',
-      prop: 'operator',
-      width: 180,
-    },
-    {
-      title: 'AI评价',
-      dataIndex: 'ai_evaluate',
-      prop: 'ai_evaluate',
-      width: 260,
-    },
-    {
-      title: '粉丝量',
-      dataIndex: 'fans_number',
-      prop: 'fans_number',
-      width: 180,
-      tooltip: '账号当前粉丝总数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    {
-      title: '总赞藏数',
-      dataIndex: 'like_collect_number',
-      prop: 'like_collect_number',
-      width: 180,
-      tooltip: '账号所有内容的点赞和收藏总数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    ...getPeriodColumns(type),
-
-    {
-      title: '最新内容标题/日期',
-      dataIndex: 'newest_work_title',
-      prop: 'newest_work_title',
-      width: 240,
-      tooltip: '最新发布内容的标题和发布日期',
-    },
-    {
-      title: '最新作品观看数',
-      dataIndex: 'newest_work_view_number',
-      prop: 'newest_work_view_number',
-      width: 180,
-      tooltip: '最新发布内容的观看次数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    {
-      title: '最新作品点赞数',
-      dataIndex: 'newest_work_like_number',
-      prop: 'newest_work_like_number',
-      width: 180,
-      tooltip: '最新发布内容的点赞数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    {
-      title: '最新作品收藏数',
-      dataIndex: 'newest_work_collect_number',
-      prop: 'newest_work_collect_number',
-      width: 180,
-      tooltip: '最新发布内容的收藏数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    {
-      title: '最新作品评论数',
-      dataIndex: 'newest_work_comment_number',
-      prop: 'newest_work_comment_number',
-      width: 180,
-      tooltip: '最新发布内容的评论数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    {
-      title: '最新作品分享数',
-      dataIndex: 'newest_work_share_number',
-      prop: 'newest_work_share_number',
-      width: 180,
-      tooltip: '最新发布内容的分享数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    // {
-    //   title: '最新作品日增长',
-    //   dataIndex: 'newest_work_view_grow_number',
-    //   prop: 'newest_work_view_grow_number',
-    //   width: 180,
-    //   tooltip: '最新作品每日观看量的增长情况',
-    //   align: 'right',
-    //   sortable: {
-    //     sortDirections: ['ascend', 'descend'],
-    //   },
-    // },
-    {
-      title: '次新内容标题/日期',
-      dataIndex: 'second_new_work_title',
-      prop: 'second_new_work_title',
-      width: 240,
-    },
-    {
-      title: '次新作品观看数',
-      dataIndex: 'second_new_work_view_number',
-      prop: 'second_new_work_view_number',
-      width: 180,
-      tooltip: '倒数第二个发布内容的观看次数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    {
-      title: '次新作品点赞数',
-      dataIndex: 'second_new_work_like_number',
-      prop: 'second_new_work_like_number',
-      width: 180,
-      tooltip: '倒数第二个发布内容的点赞数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    {
-      title: '次新作品评论数',
-      dataIndex: 'second_new_work_comment_number',
-      prop: 'second_new_work_comment_number',
-      width: 180,
-      tooltip: '倒数第二个发布内容的评论数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    {
-      title: '次新作品分享数',
-      dataIndex: 'second_new_work_share_number',
-      prop: 'second_new_work_share_number',
-      width: 180,
-      tooltip: '倒数第二个发布内容的分享数',
-      align: 'right',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    // {
-    //   title: '次新作品日增长',
-    //   dataIndex: 'second_new_work_view_grow_number',
-    //   prop: 'second_new_work_view_grow_number',
-    //   width: 180,
-    //   tooltip: '倒数第二个作品每日观看量的增长情况',
-    //   align: 'right',
-    //   sortable: {
-    //     sortDirections: ['ascend', 'descend'],
-    //   },
-    // },
-    {
-      title: '操作',
-      dataIndex: 'operation',
-      width: 100,
-      fixed: 'right',
-    },
-  ];
-};

src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue

@@ -84,22 +84,38 @@
         </template>
         <template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
           <div class="ai-evaluation-row flex">
+            <template v-if="record.ai_evaluate">
               <img
                 width="16"
                 height="16"
-              :src="record.ai_evaluate?.status === 1 ? icon4 : record.ai_evaluate?.status === 2 ? icon3 : icon2"
+                :src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
                 class="mr-8px icon"
               />
               <div>
-              <p class="cts">{{ record.ai_evaluate?.advise }}</p>
+                <p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
                 <p class="cts text-12px lh-20px !color-#939499">
-                {{ `观看: ${record.week_view_chain}%  点赞: ${record.week_like_chain}%` }}
+                  {{
+                    `观看: ${record[`${getPropPrefix(dateType)}view_rate`]}%  点赞: ${
+                      record[`${getPropPrefix(dateType)}like_rate`]
+                    }%`
+                  }}
                 </p>
               </div>
+            </template>
+            <template v-else>
+              <p class="cts">-</p>
+            </template>
           </div>
         </template>
         <template v-else-if="column.dataIndex === 'like_collect_number'" #cell="{ record }">
-          {{ formatNumberShow({ value: record.like_number + record.collect_number, showExactValue: true }) }}
+          {{
+            formatNumberShow({
+              value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
+                record[`${getPropPrefix(dateType)}collect_number`] ?? 0
+              }`,
+              showExactValue: true,
+            })
+          }}
         </template>
         <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
           <a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
@@ -134,6 +150,11 @@
           {{ formatTableField(column, record, true) }}
         </template>
       </a-table-column>
+      <a-table-column data-index="operation" fixed="right" width="100" title="操作">
+        <template #cell="{ record }">
+          <a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
+        </template>
+      </a-table-column>
     </template>
   </a-table>
 
@@ -152,7 +173,7 @@ import { useRouter } from 'vue-router';
 import { getCustomColumns } from '@/api/all/common';
 import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
 import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
-import { getDefaultColumns } from './constants';
+import { getDefaultColumns, getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
 import CustomTableColumnModal from '../custom-column-modal';
 
 import icon1 from '@/assets/img/media-account/icon-custom.png';
@@ -214,7 +235,7 @@ const handleSelectAll = (checked) => {
 };
 
 const handleDetail = (record) => {
-  router.push(`/media-account/detail/${record.id}`);
+  router.push(`/media-account/detail/${record.id}?type=${dateType.value}`);
 };
 
 // 处理排序变化

src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss

@@ -22,27 +22,34 @@
     padding: 0px 8px;
     align-items: center;
     border-radius: 2px;
-    background: var(--Functional-Red-1, #ffe9e7);
+    background: #f2f3f5;
 
     .status-tag-text {
-      color: var(--Functional-Red-6, #f64b31);
+      color: var(--BG-700, #737478);
-    }
-    &-3 {
-      background: #fff7e5;
-      .status-tag-text {
-        color: var(--Functional-yellow-6, #ffae00);
-      }
     }
     &-1 {
-      background: var(--Functional-Green-1, #ebf7f2);
+      background: #ebf7f2;
       .status-tag-text {
-        color: var(--Functional-Green-6, #25c883);
+        color: #25c883;
       }
     }
-    &-0 {
+  
-      background: var(--BG-200, #f2f3f5);
+    &-2,
+    &-4,
+    &-5,
+    &-6,
+    &-7 {
+      background: #ffe7e4;
       .status-tag-text {
-        color: var(--Text-2, #3c4043);
+        color: #f64b31;
+      }
+    }
+  
+    &-3 {
+      background: #fff7e5;
+      color: #ffae00;
+      .status-tag-text {
+        color: #ffae00;
       }
     }
   }

src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue

@@ -77,7 +77,7 @@ import { ref, defineExpose } from 'vue';
 import { VueDraggable } from 'vue-draggable-plus';
 
 import { getCustomColumns, updateCustomColumns } from '@/api/all/common';
-import { CUSTOM_FIELDS } from '../account-table/constants';
+import { getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
 
 import icon1 from './img/icon-lock.png';
 
@@ -135,7 +135,7 @@ const initData = async () => {
 
 // 过滤近7天/近30天字段
 const formatDataSource = () => {
-  const prefix = props.dateType === 'week' ? 'seven_' : 'thirty_';
+  const prefix = getPropPrefix(props.dateType);
   dataSource.value.forEach((group) => {
     group.columns = group.columns.filter((item) => {
       if (item.value.startsWith('seven_') || item.value.startsWith('thirty_')) {
@@ -193,7 +193,7 @@ const onSubmit = async () => {
 };
 
 const setDefaultCheckColumns = (groups, selected_columns) => {
-  const prefix = props.dateType === 'week' ? 'seven_' : 'thirty_';
+  const prefix = getPropPrefix(props.dateType);
   const requiredGroups = groups.filter((group) => group.is_require === 1);
   const requiredValues = requiredGroups
     .flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))

src/views/property-marketing/media-account/account-dashboard/constants.ts

@@ -2,6 +2,8 @@
  * @Author: RenXiaoDong
  * @Date: 2025-07-04 15:50:37
  */
+import { CUSTOM_FIELDS } from '@/views/property-marketing/media-account/common_constants';
+
 import icon1 from '@/assets/img/media-account/icon1.png';
 import icon2 from '@/assets/img/media-account/icon2.png';
 import icon3 from '@/assets/img/media-account/icon3.png';
@@ -42,3 +44,221 @@ export const INITIAL_QUERY = {
   column: '',
   order: '',
 };
+
+export const getPropPrefix = (type: string) => {
+  return type === 'week' ? 'seven_' : 'thirty_';
+};
+
+export function getPeriodColumns(type = 'week') {
+  const prefix = getPropPrefix(type);
+  const labelPrefix = type === 'week' ? '近7天' : '近30天';
+
+  return CUSTOM_FIELDS.map((item) => ({
+    ...item,
+    dataIndex: `${prefix}${item.dataIndex}`,
+    title: `${labelPrefix}${item.title}`,
+    prop: `${prefix}${item.prop}`,
+  }));
+}
+
+export const getDefaultColumns = (type = 'week') => {
+  return [
+    {
+      title: '账号名称',
+      dataIndex: 'name',
+      prop: 'name',
+      width: 180,
+      fixed: 'left',
+    },
+    {
+      title: '项目分组',
+      dataIndex: 'group.name',
+      prop: 'group',
+      width: 180,
+      fixed: 'left',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      prop: 'status',
+      width: 180,
+      fixed: 'left',
+    },
+    {
+      title: '运营人员',
+      dataIndex: 'operator.name',
+      prop: 'operator',
+      width: 180,
+    },
+    {
+      title: 'AI评价',
+      dataIndex: 'ai_evaluate',
+      prop: 'ai_evaluate',
+      width: 260,
+    },
+    {
+      title: '粉丝量',
+      dataIndex: 'fans_number',
+      prop: 'fans_number',
+      width: 180,
+      tooltip: '账号当前粉丝总数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '总赞藏数',
+      dataIndex: 'like_collect_number',
+      prop: 'like_collect_number',
+      width: 180,
+      tooltip: '账号所有内容的点赞和收藏总数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    ...getPeriodColumns(type),
+
+    {
+      title: '最新内容标题/日期',
+      dataIndex: 'newest_work_title',
+      prop: 'newest_work_title',
+      width: 240,
+      tooltip: '最新发布内容的标题和发布日期',
+    },
+    {
+      title: '最新作品观看数',
+      dataIndex: 'newest_work_view_number',
+      prop: 'newest_work_view_number',
+      width: 180,
+      tooltip: '最新发布内容的观看次数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '最新作品点赞数',
+      dataIndex: 'newest_work_like_number',
+      prop: 'newest_work_like_number',
+      width: 180,
+      tooltip: '最新发布内容的点赞数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '最新作品收藏数',
+      dataIndex: 'newest_work_collect_number',
+      prop: 'newest_work_collect_number',
+      width: 180,
+      tooltip: '最新发布内容的收藏数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '最新作品评论数',
+      dataIndex: 'newest_work_comment_number',
+      prop: 'newest_work_comment_number',
+      width: 180,
+      tooltip: '最新发布内容的评论数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '最新作品分享数',
+      dataIndex: 'newest_work_share_number',
+      prop: 'newest_work_share_number',
+      width: 180,
+      tooltip: '最新发布内容的分享数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    // {
+    //   title: '最新作品日增长',
+    //   dataIndex: 'newest_work_view_grow_number',
+    //   prop: 'newest_work_view_grow_number',
+    //   width: 180,
+    //   tooltip: '最新作品每日观看量的增长情况',
+    //   align: 'right',
+    //   sortable: {
+    //     sortDirections: ['ascend', 'descend'],
+    //   },
+    // },
+    {
+      title: '次新内容标题/日期',
+      dataIndex: 'second_new_work_title',
+      prop: 'second_new_work_title',
+      width: 240,
+    },
+    {
+      title: '次新作品观看数',
+      dataIndex: 'second_new_work_view_number',
+      prop: 'second_new_work_view_number',
+      width: 180,
+      tooltip: '倒数第二个发布内容的观看次数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '次新作品点赞数',
+      dataIndex: 'second_new_work_like_number',
+      prop: 'second_new_work_like_number',
+      width: 180,
+      tooltip: '倒数第二个发布内容的点赞数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '次新作品评论数',
+      dataIndex: 'second_new_work_comment_number',
+      prop: 'second_new_work_comment_number',
+      width: 180,
+      tooltip: '倒数第二个发布内容的评论数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '次新作品分享数',
+      dataIndex: 'second_new_work_share_number',
+      prop: 'second_new_work_share_number',
+      width: 180,
+      tooltip: '倒数第二个发布内容的分享数',
+      align: 'right',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    // {
+    //   title: '次新作品日增长',
+    //   dataIndex: 'second_new_work_view_grow_number',
+    //   prop: 'second_new_work_view_grow_number',
+    //   width: 180,
+    //   tooltip: '倒数第二个作品每日观看量的增长情况',
+    //   align: 'right',
+    //   sortable: {
+    //     sortDirections: ['ascend', 'descend'],
+    //   },
+    // },
+    // {
+    //   title: '操作',
+    //   dataIndex: 'operation',
+    //   width: 100,
+    //   fixed: 'right',
+    // },
+  ];
+};

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

@@ -5,61 +5,83 @@
 <template>
   <div class="account-info-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px mb-16px">
     <div class="title-row">
-      <span class="cts !text-18px !lh-26px">账号信息</span>
+      <span class="cts !text-18px !lh-26px title">账号信息</span>
     </div>
     <div class="account-info-box">
-      <div v-for="(row, rowIdx) in accountInfoFields" :key="rowIdx" class="flex mb-24px">
+      <div
+        v-for="(row, rowIdx) in getAccountInfoFields(dateType, showMore)"
+        :key="rowIdx"
+        class="grid grid-cols-4 gap-6 mb-24px"
+      >
         <div
           v-for="(field, colIdx) in row"
           :key="colIdx"
-          :class="field.dataIndex === 'ai_evaluation' ? 'flex-2' : 'flex-1'"
+          :class="field.dataIndex === 'ai_evaluation' ? 'col-span-2' : ''"
         >
-          <!-- 第二组的AI评价占1/2宽度 -->
+          <template v-if="field.dataIndex === 'ai_evaluation'">
-          <template v-if="rowIdx === 1 && colIdx === 0">
             <div class="flex items-center mb-4px">
               <img width="16" height="16" :src="icon1" class="mr-4px" />
               <span class="cts !color-#737478 mr-4px">AI评价</span>
             </div>
             <div class="flex items-center">
+              <template v-if="detailData.ai_evaluate">
                 <img
                   width="16"
                   height="16"
                   :src="
-                  detailData.ai_evaluation?.status === 1
+                    detailData.ai_evaluate?.status === 0 ? icon2 : detailData.ai_evaluate?.status === 1 ? icon3 : icon4
-                    ? icon4
-                    : detailData.ai_evaluation?.status === 2
-                    ? icon3
-                    : icon2
                   "
-                class="mr-8px"
+                  class="mr-4px"
                 />
 
-              <span v-if="detailData.ai_evaluation" class="cts">
+                <div class="flex items-center">
-                {{ detailData.ai_evaluation?.text }}。观看: +{{ detailData.ai_evaluation.look_chain }}% 点赞: +{{
+                  <p class="cts">{{ `${detailData.ai_evaluate?.level} | ${detailData.ai_evaluate?.advise}` }}。</p>
-                  detailData.ai_evaluation.like_chain
+                  <p class="cts text-12px lh-20px">
-                }}%
+                    {{
-              </span>
+                      `观看: ${detailData[`${getPropPrefix(dateType)}view_rate`] ?? '-'}%  点赞: ${
+                        detailData[`${getPropPrefix(dateType)}like_rate`] ?? '-'
+                      }%`
+                    }}
+                  </p>
+                </div>
+              </template>
             </div>
           </template>
           <template v-else>
             <div class="flex items-center mb-4px">
-              <p class="cts !color-#737478 !mr-4px">{{ field.label }}</p>
+              <p class="cts !color-#737478 !mr-4px">{{ field.title }}</p>
               <a-tooltip v-if="field.tooltip" :content="field.tooltip" position="top">
                 <icon-question-circle class="tooltip-icon color-#737478" size="16" />
               </a-tooltip>
             </div>
             <p class="cts">
               <template v-if="field.type === 'status'">
-                <span v-if="detailData.status === 1" style="color: #4ad991">正常</span>
+                <div class="status-tag" :class="`status-tag-${detailData.status}`">
-                <span v-else style="color: #ff4d4f">异常</span>
+                  <span class="cts status-tag-text">{{
+                    STATUS_LIST.find((item) => item.value === detailData.status)?.label
+                  }}</span>
+                </div>
+              </template>
+              <template v-else-if="field.dataIndex === 'like_collect_number'">
+                {{
+                  formatNumberShow({
+                    value: `${detailData[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
+                      detailData[`${getPropPrefix(dateType)}collect_number`] ?? 0
+                    }`,
+                    showExactValue: true,
+                  })
+                }}
               </template>
               <!-- 环比字段特殊渲染 -->
-              <template v-else-if="field.type === 'rate'">
+              <template v-else-if="field.suffix === '%'">
-                <span :style="{ color: detailData[field.dataIndex] > 0 ? 'red' : 'green' }">
+                <div
-                  <icon-arrow-up v-if="detailData[field.dataIndex] > 0" />
+                  class="flex items-center"
-                  <icon-arrow-down v-else />
+                  :class="detailData[field.dataIndex] > 0 ? 'color-#F64B31' : 'color-#25C883'"
-                  {{ detailData[field.dataIndex] }}%
+                >
-                </span>
+                  <icon-arrow-up v-if="detailData[field.dataIndex] > 0" size="16" />
+                  <icon-arrow-down v-else size="16" />
+                  {{ `${(detailData[field.dataIndex] * 100).toFixed(2)}%` }}
+                </div>
               </template>
               <template v-else>
                 {{ formatTableField(field, detailData, true) }}
@@ -69,14 +91,28 @@
         </div>
       </div>
     </div>
+    <div
+      class="more-btn-row flex items-center absolute right-24px bottom-32px cursor-pointer"
+      @click="showMore = !showMore"
+    >
+      <span class="cts mr-8px !color-#6D4CFE"> {{ showMore ? '收起' : '更多' }} </span>
+      <icon-down
+        size="13"
+        class="!color-#6D4CFE transform transition-transform duration-300 ease-in-out"
+        :class="showMore ? 'rotate-180' : ''"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { useRoute } from 'vue-router';
 
-import { formatTableField } from '@/utils/tools';
+import { formatTableField, formatNumberShow } from '@/utils/tools';
-import { accountInfoFields } from '../../constants';
+import { getAccountInfoFields } from '../../constants';
+import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
+import { getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
+
 import { getAccountBoardDetail } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon5.png';
@@ -86,39 +122,9 @@ import icon4 from '@/assets/img/media-account/icon-success.png';
 
 const route = useRoute();
 const id = route.params.id;
+const dateType = route.query.type;
 const detailData = ref({});
-// const detailData = ref({
+const showMore = ref(false);
-//   id: 1,
-//   name: '抖音官方账号',
-//   mobile: '13800138001',
-//   account_id: 'douyin_001',
-//   holder_name: '张三',
-//   operator_id: 1,
-//   platform: 0,
-//   group_id: 1,
-//   status: 1,
-//   is_pause: 0,
-//   fans_number: 1250000,
-//   like_number: 890000,
-//   collect_number: 45000,
-//   view_number: 5600000,
-//   view_chain: -12.5,
-//   like_chain: 8.3,
-//   ai_evaluation: {
-//     status: 1,
-//     text: '表现优质 | 建议保持',
-//     look_chain: 12.5,
-//     like_chain: 8.3,
-//   },
-//   operator: {
-//     id: 1,
-//     name: '李运营',
-//   },
-//   group: {
-//     id: 1,
-//     name: '抖音组',
-//   },
-// });
 
 const getDetail = async () => {
   const { code, data } = await getAccountBoardDetail(id);

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

@@ -1,3 +1,41 @@
 .account-info-wrap {
+  position: relative;
+  .status-tag {
+    width: fit-content;
+    display: flex;
+    height: 20px;
+    padding: 0px 8px;
+    align-items: center;
+    border-radius: 2px;
+    background: #f2f3f5;
 
+    .status-tag-text {
+      color: var(--BG-700, #737478);
+    }
+    &-1 {
+      background: #ebf7f2;
+      .status-tag-text {
+        color: #25c883;
+      }
+    }
+
+    &-2,
+    &-4,
+    &-5,
+    &-6,
+    &-7 {
+      background: #ffe7e4;
+      .status-tag-text {
+        color: #f64b31;
+      }
+    }
+
+    &-3 {
+      background: #fff7e5;
+      color: #ffae00;
+      .status-tag-text {
+        color: #ffae00;
+      }
+    }
+  }
 }

src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts

@@ -4,10 +4,16 @@
  */
 
 export const INITIAL_QUERY = {
-  name: '',
+  title: '',
   published_at: [],
 };
 
+export const INITIAL_PAGE_INFO = {
+  page: 1,
+  page_size: 20,
+  total: 0,
+};
+
 export const TABLE_COLUMNS = [
   {
     title: '笔记标题',

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

@@ -6,7 +6,7 @@
   <div class="note-table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px flex-1 flex flex-col">
     <div class="title-row">
       <div class="flex items-center">
-        <span class="cts !text-18px !lh-26px mr-4px">笔记详情</span>
+        <span class="cts !text-18px !lh-26px mr-4px title">笔记详情</span>
         <icon-question-circle size="16" class="color-#737478" />
       </div>
     </div>
@@ -14,7 +14,7 @@
       <div class="filter-row-item flex items-center">
         <span class="label">笔记标题</span>
         <a-space size="medium" class="w-240px">
-          <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear>
+          <a-input v-model="query.title" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
             <template #prefix>
               <icon-search />
             </template>
@@ -23,13 +23,14 @@
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">发布日期</span>
-        <a-space size="medium" class="w-240px">
+        <a-space size="medium" class="w-260px">
           <a-range-picker
-            v-model="query.published_at"
+            v-model="published_at"
             size="medium"
             allow-clear
-            format="YYYY-MM-DD HH:mm"
+            format="YYYY-MM-DD"
             class="w-100%"
+            @change="onDateChange"
           />
         </a-space>
       </div>
@@ -91,7 +92,7 @@
         show-jumper
         show-page-size
         :current="pageInfo.page"
-        :page-size="pageInfo.pageSize"
+        :page-size="pageInfo.page_size"
         @change="onPageChange"
         @page-size-change="onPageSizeChange"
       />
@@ -100,7 +101,7 @@
 </template>
 
 <script setup>
-import { TABLE_COLUMNS, INITIAL_QUERY } from './constants';
+import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
 import { useRoute } from 'vue-router';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
 import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
@@ -108,33 +109,39 @@ import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
 const route = useRoute();
 const id = route.params.id;
 const dataSource = ref([]);
-const pageInfo = ref({
+const published_at = ref([]);
-  page: 1,
+const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
-  pageSize: 20,
-  total: 0,
-});
 
 const query = ref(cloneDeep(INITIAL_QUERY));
 
 const handleSearch = () => {
-  console.log(query.value);
+  reload();
 };
 
 const handleReset = () => {
-  pageInfo.value.page = 1;
+  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
-  pageInfo.value.pageSize = 20;
-  pageInfo.value.total = 0;
   query.value = cloneDeep(INITIAL_QUERY);
+  published_at.value = [];
   reload();
 };
 
+const onDateChange = (value) => {
+  const FORMAT_DATE = 'YYYY-MM-DD HH:mm:ss';
+  query.value.published_at = [
+    dayjs(value[0]).startOf('day').format(FORMAT_DATE),
+    dayjs(value[1]).endOf('day').format(FORMAT_DATE),
+  ];
+
+  handleSearch();
+};
+
 const onPageChange = (current) => {
   pageInfo.value.page = current;
   getData();
 };
 
 const onPageSizeChange = (pageSize) => {
-  pageInfo.value.pageSize = pageSize;
+  pageInfo.value.page_size = pageSize;
   reload();
 };
 
@@ -144,7 +151,12 @@ const reload = () => {
 };
 
 const getData = async () => {
-  const { code, data } = await getMediaAccountBoardWorks(query.value);
+  const { page, page_size } = pageInfo.value;
+  const { code, data } = await getMediaAccountBoardWorks(id, {
+    ...query.value,
+    page,
+    page_size,
+  });
   if (code === 200) {
     dataSource.value = data?.data || [];
     pageInfo.value.total = data.total;

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

@@ -2,22 +2,45 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-28 12:55:44
  */
-export const accountInfoFields = [
+import { CUSTOM_FIELDS, getPropPrefix } from '@/views/property-marketing/media-account/common_constants';
+
+// 不足4个。就补两个null进去
+export function groupArrayBySize<T extends { dataIndex: string; prop: 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));
+  }
+
+  return result.map((item) => {
+    return item.map((item) => {
+      return {
+        ...item,
+        dataIndex: `${getPropPrefix(dateType)}${item.dataIndex}`,
+        prop: `${getPropPrefix(dateType)}${item.prop}`,
+      };
+    });
+  });
+}
+
+export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
+  const baseFields = [
     [
-    { label: '账号名称', dataIndex: 'name' },
+      { title: '账号名称', dataIndex: 'name' },
-    { label: '项目分组', dataIndex: 'group.name' },
+      { title: '项目分组', dataIndex: 'group.name' },
-    { label: '状态', dataIndex: 'status', type: 'status' },
+      { title: '状态', dataIndex: 'status', type: 'status' },
-    { label: '运营人员', dataIndex: 'operator_name' },
+      { title: '运营人员', dataIndex: 'operator_name' },
     ],
     [
-    { label: 'AI评价', dataIndex: 'ai_evaluation' },
+      { title: 'AI评价', dataIndex: 'ai_evaluation' },
-    { label: '粉丝量', dataIndex: 'fans_number', tooltip: '粉丝量' },
+      { title: '粉丝量', dataIndex: 'fans_number', tooltip: '粉丝量' },
-    { label: '总赞藏数', dataIndex: 'like_number', tooltip: '总赞藏数' },
+      { title: '总赞藏数', dataIndex: 'like_collect_number', tooltip: '总赞藏数' },
     ],
-  [
+  ];
-    { label: '观看量', dataIndex: 'view_number', tooltip: '观看量' },
+  const customFields = groupArrayBySize(CUSTOM_FIELDS, 4, dateType);
-    { label: '观看量环比', dataIndex: 'view_chain', tooltip: '观看量环比', suffix: '%', type: 'rate' },
+  return showMore ? [...baseFields, ...customFields] : [...baseFields];
-    { label: '点赞量', dataIndex: 'like_number', tooltip: '点赞量' },
+};
-    { label: '点赞量环比', dataIndex: 'like_chain', tooltip: '点赞量环比', suffix: '%', type: 'rate' },
-  ],
-];

src/views/property-marketing/media-account/account-detail/style.scss

@@ -4,11 +4,14 @@
   flex-direction: column;
   :deep(.cts) {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: 'PuHuiTi-Regular';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
+    &.title {
+      font-family: 'PuHuiTi-Medium';
+    }
   }
   :deep(.title-row) {
     display: flex;

src/views/property-marketing/media-account/common_constants.ts

@@ -0,0 +1,191 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-07-05 10:49:37
+ */
+export const getPropPrefix = (type: string) => {
+  return type === 'week' ? 'seven_' : 'thirty_';
+};
+
+export const CUSTOM_FIELDS = [
+  {
+    dataIndex: 'view_number',
+    prop: 'view_number',
+    title: '观看量',
+    width: 180,
+    tooltip: '账号所有内容的浏览总数',
+    align: 'right',
+  },
+  {
+    dataIndex: 'view_rate',
+    prop: 'view_rate',
+    title: '观看量环比',
+    width: 180,
+    tooltip: '账号所有内容的观看量环比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    dataIndex: 'home_view_number',
+    prop: 'home_view_number',
+    title: '主页访客数',
+    width: 180,
+    tooltip: '账号所有内容的主页访客数',
+    align: 'right',
+  },
+  {
+    dataIndex: 'home_view_rate',
+    prop: 'home_view_rate',
+    title: '主页访客数环比',
+    width: 180,
+    tooltip: '账号所有内容的主页访客数环比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    dataIndex: 'like_number',
+    prop: 'like_number',
+    title: '点赞量',
+    width: 180,
+    tooltip: '账号所有内容的点赞总数',
+    align: 'right',
+  },
+  {
+    dataIndex: 'like_rate',
+    prop: 'like_rate',
+    title: '点赞量环比',
+    width: 180,
+    tooltip: '账号所有内容的点赞量环比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    dataIndex: 'comment_number',
+    prop: 'comment_number',
+    title: '评论数',
+    width: 180,
+    tooltip: '账号所有内容的评论总数',
+    align: 'right',
+  },
+  {
+    dataIndex: 'comment_rate',
+    prop: 'comment_rate',
+    title: '评论数环比',
+    width: 180,
+    tooltip: '账号所有内容的评论数环比',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    align: 'right',
+  },
+  {
+    dataIndex: 'collect_number',
+    prop: 'collect_number',
+    title: '收藏数',
+    width: 180,
+    tooltip: '账号所有内容的收藏总数',
+    align: 'right',
+  },
+  {
+    dataIndex: 'collect_rate',
+    prop: 'collect_rate',
+    title: '收藏数环比',
+    width: 180,
+    tooltip: '账号所有内容的收藏数环比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    dataIndex: 'barrage_number',
+    prop: 'barrage_number',
+    title: '弹幕数',
+    width: 180,
+    tooltip: '账号所有内容的弹幕总数',
+    align: 'right',
+  },
+  {
+    dataIndex: 'barrage_rate',
+    prop: 'barrage_rate',
+    title: '弹幕数环比',
+    width: 180,
+    tooltip: '账号所有内容的弹幕数环比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    dataIndex: 'rise_fans_number',
+    prop: 'rise_fans_number',
+    title: '笔记涨粉数',
+    width: 180,
+    tooltip: '账号所有内容的笔记涨粉数',
+    align: 'right',
+  },
+  {
+    dataIndex: 'rise_fans_rate',
+    prop: 'rise_fans_rate',
+    title: '笔记涨粉数环比',
+    width: 180,
+    tooltip: '账号所有内容的笔记涨粉数环比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    dataIndex: 'share_number',
+    prop: 'share_number',
+    title: '笔记分享量',
+    width: 180,
+    tooltip: '账号所有内容的笔记分享量',
+    align: 'right',
+  },
+  {
+    dataIndex: 'share_rate',
+    prop: 'share_rate',
+    title: '笔记分享量环比',
+    width: 180,
+    tooltip: '账号所有内容的笔记分享量环比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+
+  {
+    dataIndex: 'avg_view_time',
+    prop: 'avg_view_time',
+    title: '笔记平均浏览数',
+    width: 180,
+    tooltip: '账号所有内容的笔记平均浏览数',
+    align: 'right',
+  },
+  {
+    dataIndex: 'avg_view_time_rate',
+    prop: 'avg_view_time_rate',
+    title: '笔记平均浏览数环比',
+    width: 180,
+    tooltip: '账号所有内容的笔记平均浏览数环比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+];