From ff8ef624366f2eb63e92f673d7d701e7c9688a38 Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Sat, 5 Jul 2025 11:57:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B4=A6=E5=8F=B7=E7=9C=8B=E6=9D=BF?= =?UTF-8?q?=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/account-table/constants.ts | 365 ------------------ .../components/account-table/index.vue | 51 ++- .../components/account-table/style.scss | 33 +- .../components/custom-column-modal/index.vue | 6 +- .../account-dashboard/constants.ts | 220 +++++++++++ .../components/account-info/index.vue | 136 +++---- .../components/account-info/style.scss | 38 ++ .../components/note-table/constants.ts | 8 +- .../components/note-table/index.vue | 48 ++- .../media-account/account-detail/constants.ts | 61 ++- .../media-account/account-detail/style.scss | 5 +- .../media-account/common_constants.ts | 191 +++++++++ 12 files changed, 662 insertions(+), 500 deletions(-) delete mode 100644 src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts create mode 100644 src/views/property-marketing/media-account/common_constants.ts diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts b/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts deleted file mode 100644 index 8de46c3..0000000 --- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts +++ /dev/null @@ -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', - }, - ]; -}; diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue index e61d11a..56f8006 100644 --- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue +++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue @@ -84,22 +84,38 @@ + + + @@ -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}`); }; // 处理排序变化 diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss index 4b056ba..15a6387 100644 --- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss +++ b/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); - } - &-3 { - background: #fff7e5; - .status-tag-text { - color: var(--Functional-yellow-6, #ffae00); - } + color: var(--BG-700, #737478); } &-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; } } } diff --git a/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue index 4026a40..f76889b 100644 --- a/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue +++ b/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)) diff --git a/src/views/property-marketing/media-account/account-dashboard/constants.ts b/src/views/property-marketing/media-account/account-dashboard/constants.ts index d1f9c46..c6a67d7 100644 --- a/src/views/property-marketing/media-account/account-dashboard/constants.ts +++ b/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', + // }, + ]; +}; 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 b67262f..7597b1d 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 @@ -5,61 +5,83 @@