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

feat: 账号数据看板/ 统一table、checkbox组件样式

Browse Source
This commit is contained in:
rd
2025-06-28 11:31:49 +08:00
parent 80c6b30701
commit 3b1f85c47d
16 changed files with 542 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/all/propertyMarketing.ts
View File

@ -131,3 +131,13 @@ export const getAccountBoardOverview = (params = {}) => {
export const getAccountBoardList = (params = {}) => {
return Http.get('/v1/media-account-boards', params);
};
// 账号看板-导出
export const postAccountBoardExport = (params = {}) => {
return Http.post('/v1/media-account-boards/export', params);
};
// 账号看板-详情
export const getAccountBoardDetail = (id: string) => {
return Http.get(`/v1/media-account-boards/${id}`);
};

BIN
src/assets/img/media-account/icon5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

10
src/router/routes/modules/propertyMarketing.ts
View File

@ -46,7 +46,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
},
children: [
{
path: 'accountManagement',
path: 'manage',
name: 'MediaAccountAccountManagement',
meta: {
locale: '账号管理',
@ -56,7 +56,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
component: () => import('@/views/property-marketing/media-account/account-manage'),
},
{
path: 'accountDashboard',
path: 'dashboard',
name: 'MediaAccountAccountDashboard',
meta: {
locale: '账号数据看板',
@ -66,14 +66,16 @@ const COMPONENTS: AppRouteRecordRaw[] = [
component: () => import('@/views/property-marketing/media-account/account-dashboard'),
},
{
path: 'accountDetails',
path: 'detail/:id',
name: 'MediaAccountAccountDetails',
meta: {
locale: '账号详情',
requiresAuth: true,
roles: ['*'],
hideInMenu: true,
activeMenu: 'MediaAccountAccountDashboard',
},
component: () => import('@/views/property-marketing/repository/test'),
component: () => import('@/views/property-marketing/media-account/account-detail'),
},
],
},

31
src/styles/components/checkbox.scss Normal file
View File

@ -0,0 +1,31 @@
.arco-checkbox {
.arco-checkbox-icon {
width: 16px;
height: 16px;
border-color: #d7d7d9;
}
&.arco-checkbox-disabled {
.arco-checkbox-icon {
background-color: #f2f3f5;
border-color: #d7d7d9;
}
&.arco-checkbox-checked {
.arco-checkbox-icon {
background-color: #A794FE !important;
}
}
&.arco-checkbox-indeterminate {
.arco-checkbox-icon {
border: none;
background-color: #A794FE !important;
}
}
}
&.arco-checkbox-checked,
&.arco-checkbox-indeterminate {
.arco-checkbox-icon {
background-color: #6D4CFE !important;
}
}
}

4
src/styles/components/index.scss
View File

@ -1 +1,3 @@
@import "./input.scss";
@import './input.scss';
@import './table.scss';
@import './checkbox.scss';

41
src/styles/components/table.scss Normal file
View File

@ -0,0 +1,41 @@
.arco-table {
@mixin table-cell-text {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.arco-table-container {
border: none !important;
.arco-table-element {
thead {
.arco-table-tr {
.arco-table-th {
border-bottom: 1px solid var(--Border-1, #d7d7d9);
background: var(--BG-100, #f7f8fa);
.arco-table-cell {
padding: 13px 16px;
.arco-table-th-title {
@include table-cell-text;
}
}
}
}
}
tbody {
.arco-table-tr {
.arco-table-td {
.arco-table-cell {
padding: 13px 16px;
.arco-table-cell-content {
@include table-cell-text;
}
}
}
}
}
}
}
}

4
src/styles/index.ts
View File

@ -1,3 +1,7 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-27 14:03:21
*/
import './vars.css';
import './components/index.scss';
import 'normalize.css';

28
src/utils/tools.ts
View File

@ -54,3 +54,31 @@ export function formatNumberShow(...args: any[]): string | number {
return split ? `${splitNumber(_n)}亿` : `${toFixed(_n, len)}亿`;
}
}
export function formatTableField(fieldItem: any, rowValue: any, showExactValue = false) {
// 获取嵌套属性值的函数
const getNestedValue = (obj: any, path: string) => {
if (!obj || !path) return undefined;
// 如果路径包含点号，说明是链式取值
if (path.includes('.')) {
return path.split('.').reduce((current, key) => {
return current && current[key] !== undefined ? current[key] : undefined;
}, obj);
}
// 普通属性取值
return obj[path];
};
const _getValue = (value: any) => {
if (isNaN(value)) return value;
return formatNumberShow({ value, showExactValue });
};
// 使用链式取值获取数据
const rawValue = getNestedValue(rowValue, fieldItem.dataIndex);
const value = _getValue(rawValue ?? '-');
return `${fieldItem.prefix || ''}${value}${fieldItem.suffix || ''}`;
}

153
src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts Normal file
View File

@ -0,0 +1,153 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-28 10:33:06
*/
export const tableColumns = [
{
title: '账号名称',
dataIndex: 'name',
width: 180,
fixed: 'left',
},
{
title: '项目分组',
dataIndex: 'group.name',
width: 180,
fixed: 'left',
},
{
title: '状态',
dataIndex: 'status',
width: 180,
fixed: 'left',
},
{
title: '运营人员',
dataIndex: 'operator.name',
width: 180,
},
{
title: 'AI评价',
dataIndex: 'ai_evaluation',
width: 260,
},
{
title: '粉丝量',
dataIndex: 'fans_number',
width: 180,
tooltip: '账号当前粉丝总数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '总赞藏数',
dataIndex: 'like_number',
width: 180,
tooltip: '账号所有内容的点赞和收藏总数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '观看量',
dataIndex: 'view_number',
width: 180,
tooltip: '账号所有内容的总观看次数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '观看量环比',
dataIndex: 'view_chain',
width: 180,
tooltip: '相比上一周期的观看量变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '点赞量',
dataIndex: 'like_number',
width: 180,
tooltip: '账号所有内容的总点赞数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '点赞量环比',
dataIndex: 'like_chain',
width: 180,
tooltip: '相比上一周期的点赞量变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新内容标题/日期',
dataIndex: 'like_chain1',
width: 240,
tooltip: '最新发布内容的标题和发布日期',
},
{
title: '最新作品观看数',
dataIndex: 'latest_view_number',
width: 180,
tooltip: '最新发布内容的观看次数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新作品日增长',
dataIndex: 'latest_daily_growth',
width: 180,
tooltip: '最新作品每日观看量的增长情况',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '次新内容标题/日期',
dataIndex: 'like_chain4',
width: 240,
},
{
title: '次新作品观看数',
dataIndex: 'second_latest_view_number',
width: 180,
tooltip: '倒数第二个发布内容的观看次数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '次新作品日增长',
dataIndex: 'second_latest_daily_growth',
width: 180,
tooltip: '倒数第二个作品每日观看量的增长情况',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '操作',
dataIndex: 'operation',
width: 120,
fixed: 'right',
},
];

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

@ -3,11 +3,10 @@
* @Date: 2025-06-27 18:08:04
-->
<template>
<div class="container">
<div class="action-row mb-12px flex justify-between">
<a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll" />
<a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleSelectAll">全选</a-checkbox>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<template #default>导出数据</template>
</a-button>
@ -24,54 +23,100 @@
:data="dataSource"
row-key="id"
:row-selection="rowSelection"
:selected-keys="selectedItems"
:pagination="false"
class="custom-table w-100%"
:scroll="{ x: '100%' }"
class="account-table w-100%"
bordered
@sorter-change="handleSorterChange"
@select="handleSelect"
@select-all="handleSelectAll"
>
<template #columns>
<a-table-column title="账号名称" data-index="name" />
<a-table-column title="手机号" data-index="mobile" />
<a-table-column title="账号ID" data-index="account_id" />
<a-table-column title="持有人" data-index="holder_name" />
<a-table-column title="平台" data-index="platform">
<template #cell="{ record }">
<a-table-column
v-for="column in tableColumns"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
</template>
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
</a-table-column>
<a-table-column title="分组" data-index="group.name" />
<a-table-column title="运营人员" data-index="operator.name" />
<a-table-column title="粉丝数" data-index="fans_number" />
<a-table-column title="点赞数" data-index="like_number" />
<a-table-column title="收藏数" data-index="collect_number" />
<a-table-column title="观看数" data-index="view_number" />
<a-table-column title="观看环比" data-index="view_chain">
<template #cell="{ record }"> {{ record.view_chain }}% </template>
</a-table-column>
<a-table-column title="点赞环比" data-index="like_chain">
<template #cell="{ record }"> {{ record.like_chain }}% </template>
</a-table-column>
<a-table-column title="状态" data-index="status">
<template #cell="{ record }">
<span v-if="record.status === 0">未授权</span>
<span v-else-if="record.status === 1">正常</span>
<span v-else-if="record.status === 2">异常</span>
<span v-else>-</span>
<span v-if="record.is_pause === 1" class="pause-tag">（暂停）</span>
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
<div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === record.status)?.label
}}</span>
</div>
</template>
</a-table-column>
<a-table-column title="操作" fixed="right" width="120">
<template #cell="{ record }">
<a-button type="text" size="small" @click="handleEdit(record)">详情</a-button>
<template v-else-if="column.dataIndex === 'ai_evaluation'" #cell="{ record }">
<div class="ai-evaluation-row flex">
<img
width="16"
height="16"
:src="record.ai_evaluation?.status === 1 ? icon4 : record.ai_evaluation?.status === 2 ? icon3 : icon2"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ record.ai_evaluation?.text }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `观看: ${record.ai_evaluation?.look_chain}% 点赞: ${record.ai_evaluation?.like_chain}%` }}
</p>
</div>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="['view_chain', 'like_chain'].includes(column.dataIndex)" #cell="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
<p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { STATUS_LIST } from '../../constants';
import { formatTableField } from '@/utils/tools';
import { tableColumns } from './constants';
import { useRouter } from 'vue-router';
import icon1 from '@/assets/img/media-account/icon-custom.png';
import icon2 from '@/assets/img/media-account/icon-warn.png';
import icon3 from '@/assets/img/media-account/icon-warn-1.png';
import icon4 from '@/assets/img/media-account/icon-success.png';
import icon5 from '@/assets/img/media-account/icon5.png';
const props = defineProps({
dataSource: {
@ -80,7 +125,9 @@ const props = defineProps({
},
});
const emit = defineEmits(['edit', 'delete', 'selectionChange']);
const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
const router = useRouter();
const selectedItems = ref([]);
@ -91,41 +138,39 @@ const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
);
const rowSelection = {
const rowSelection = computed(() => ({
type: 'checkbox',
selectedRowKeys: selectedItems.value,
onChange: (selectedRowKeys, selectedRows) => {
selectedItems.value = selectedRowKeys;
emit('selectionChange', selectedRows);
},
};
showCheckedAll: true,
}));
const handleChangeAll = (checked) => {
const handleSelectAll = (checked) => {
if (checked) {
selectedItems.value = props.dataSource.map((item) => item.id);
} else {
selectedItems.value = [];
}
emit('selectionChange', checked ? props.dataSource : []);
emit('selectionChange', checked ? selectedItems.value : []);
};
const handleEdit = (record) => {
emit('edit', record);
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}`);
};
const handleDelete = (record) => {
emit('delete', record);
// 处理排序变化
const handleSorterChange = (column, order) => {
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
};
const handleSelect = (selectedRowKeys, selectedRows) => {
selectedItems.value = selectedRowKeys;
emit('selectionChange', selectedRows);
};
const handleExport = () => {
emit('export');
};
</script>
<style scoped lang="scss">
@import './style.scss';
.custom-table {
:deep(.pause-tag) {
color: #f64b31;
margin-left: 4px;
font-size: 12px;
}
}
</style>

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

@ -1,5 +1,3 @@
.container {
width: 100%;
.action-row {
:deep(.arco-btn) {
.arco-btn-icon {
@ -7,4 +5,59 @@
}
}
}
.account-table {
.cts {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.status-tag {
width: fit-content;
display: flex;
height: 28px;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: var(--Functional-Red-1, #ffe9e7);
.status-tag-text {
color: var(--Functional-Red-6, #f64b31);
}
&-3 {
background: #fff7e5;
.status-tag-text {
color: var(--Functional-yellow-6, #ffae00);
}
}
&-1 {
background: var(--Functional-Green-1, #ebf7f2);
.status-tag-text {
color: var(--Functional-Green-6, #25c883);
}
}
&-0 {
background: var(--BG-200, #f2f3f5);
.status-tag-text {
color: var(--Text-2, #3c4043);
}
}
}
.ai-evaluation-row {
.icon {
position: relative;
top: 1px;
}
}
.rate-row {
&.up {
color: var(--Functional-Red-6, #f64b31);
}
&.down {
color: var(--Functional-Green-6, #25c883);
}
}
}

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

@ -40,6 +40,8 @@ export const INITIAL_QUERY = {
operator_id: '',
group_ids: [],
date_range: '',
column: '',
order: '',
};
export enum EnumStatus {

59
src/views/property-marketing/media-account/account-dashboard/index.vue
View File

@ -21,7 +21,7 @@
<img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
</a-tooltip>
</div>
<span class="s1 color-#211F24 ml-28px">{{
<span class="s1 color-#211F24 ml-32px">{{
item.prop === 'total_like_number'
? formatNumberShow(overviewData.total_like_number + overviewData.total_collect_number)
: formatNumberShow(overviewData[item.prop])
@ -35,9 +35,9 @@
<div class="table-wrap bg-#fff border-radius-8px px-24px py-24px flex-1">
<AccountTable
:dataSource="dataSource"
@edit="handleEdit"
@delete="handleDelete"
@selectionChange="handleSelectionChange"
@export="handleExport"
@sorterChange="handleSorterChange"
/>
<div class="pagination-box">
<a-pagination
@ -60,7 +60,7 @@
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
import { getAccountBoardOverview, getAccountBoardList } from '@/api/all/propertyMarketing';
import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
import { formatNumberShow } from '@/utils/tools';
import { INITIAL_QUERY } from './constants';
@ -71,7 +71,7 @@ import icon1 from '@/assets/img/icon-question.png';
const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const overviewData = ref({});
const selectedItems = ref([]);
const selectedRowKeys = ref([]);
const pageInfo = reactive({
page: 1,
pageSize: 20,
@ -97,6 +97,12 @@ const mockData = [
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: '李运营',
@ -123,6 +129,12 @@ const mockData = [
view_number: 3200000,
view_chain: -5.2,
like_chain: 15.7,
ai_evaluation: {
status: 2,
text: '表现中等 | 建议优化',
look_chain: -12.5,
like_chain: 8.3,
},
operator: {
id: 2,
name: '王运营',
@ -149,6 +161,12 @@ const mockData = [
view_number: 0,
view_chain: 0,
like_chain: 0,
ai_evaluation: {
status: 3,
text: '表现较差 | 建议整改',
look_chain: -12.5,
like_chain: -8.3,
},
operator: {
id: 1,
name: '李运营',
@ -266,19 +284,26 @@ const handleReset = () => {
reload();
};
const handleEdit = (record) => {
console.log('编辑账号:', record);
// 这里可以打开编辑弹窗
};
const handleDelete = (record) => {
console.log('删除账号:', record);
// 这里可以打开删除确认弹窗
};
const handleSelectionChange = (selectedRows) => {
selectedItems.value = selectedRows;
console.log('选中的账号:', selectedRows);
selectedRowKeys.value = selectedRows;
console.log('选中的账号:', selectedRowKeys.value);
};
const handleExport = () => {
postAccountBoardExport({
...query.value,
}).then((res) => {
const { code, data } = res;
if (code === 200) {
console.log(data.download_url);
}
});
};
const handleSorterChange = (column, order) => {
query.value.column = column;
query.value.order = order;
reload();
};
onMounted(() => {

1
src/views/property-marketing/media-account/account-dashboard/style.scss
View File

@ -40,6 +40,7 @@
}
.table-wrap {
width: 100%;
.pagination-box {
display: flex;
width: 100%;

32
src/views/property-marketing/media-account/account-detail/index.vue Normal file
View File

@ -0,0 +1,32 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-28 11:21:10
-->
<template>
<div>
<h1>账号详情</h1>
</div>
</template>
<script setup>
import { getAccountBoardDetail } from '@/api/all/propertyMarketing';
const route = useRoute();
const id = route.params.id;
const detailData = ref({});
const getDetail = async () => {
const { code, data } = await getAccountBoardDetail(id);
if (code === 200) {
detailData.value = data;
}
};
onMounted(() => {
getDetail();
});
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

0
src/views/property-marketing/media-account/account-detail/style.scss Normal file
View File