team/zacfrontadmin_v2
2
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

f
Some checks failed
CI / Test (ubuntu-latest) (push) Has been cancelled
Details
CI / Test (windows-latest) (push) Has been cancelled
Details
CI / Lint (ubuntu-latest) (push) Has been cancelled
Details
CI / Lint (windows-latest) (push) Has been cancelled
Details
CI / Check (ubuntu-latest) (push) Has been cancelled
Details
CI / Check (windows-latest) (push) Has been cancelled
Details
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Playground Ftp (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Docs Ftp (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Antd Ftp (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Element Ftp (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Naive Ftp (push) Has been cancelled
Details
Release Drafter / update_release_draft (push) Has been cancelled
Details
CI / CI OK (push) Has been cancelled
Details
Deploy Website on push / Rerun on failure (push) Has been cancelled
Details
Lock Threads / action (push) Has been cancelled
Details
Issue Close Require / close-issues (push) Has been cancelled
Details
Close stale issues / stale (push) Has been cancelled
Details

Browse Source
This commit is contained in:
liangzai
2026-03-02 14:33:02 +08:00
parent 5e04fffec6
commit 01c2a42b08
10 changed files with 761 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
apps/web-antd/src/views/dashboard/analytics/analytics-profit-panel.vue Normal file
View File

@@ -0,0 +1,304 @@
<script lang="ts" setup>
import type { DashboardApi } from '#/api/dashboard';
interface Props {
profitStats?: DashboardApi.ProfitStatistics;
}
const props = defineProps<Props>();
// 格式化金额
const formatAmount = (amount: number) => {
if (amount >= 10000) {
return `${(amount / 10000).toFixed(2)}万`;
}
return amount.toFixed(2);
};
</script>
<template>
<div v-if="profitStats" class="revenue-panel">
<div class="revenue-panel-header">
<h3 class="text-lg font-semibold text-gray-800">收入统计</h3>
</div>
<div class="revenue-panel-content">
<div class="revenue-grid">
<div class="revenue-card">
<div class="card-header">
<span class="card-title">今日</span>
<div class="card-profit">
<span class="profit-label">利润</span>
<span class="profit-value" :class="profitStats.today_profit >= 0 ? 'text-green-600' : 'text-red-600'">
¥{{ formatAmount(profitStats.today_profit) }}
</span>
</div>
</div>
<div class="card-content">
<div class="detail-section">
<div class="section-title">收入</div>
<div class="detail-item">
<span class="detail-label">营收</span>
<span class="detail-value text-green-600">+¥{{ formatAmount(profitStats.today_detail?.revenue || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">提现收税</span>
<span class="detail-value text-green-600">+¥{{ formatAmount(profitStats.today_detail?.tax_income || 0) }}</span>
</div>
<div class="detail-item total">
<span class="detail-label font-semibold">收入合计</span>
<span class="detail-value font-semibold text-green-600">
+¥{{ formatAmount((profitStats.today_detail?.revenue || 0) + (profitStats.today_detail?.tax_income || 0)) }}
</span>
</div>
</div>
<div class="detail-section">
<div class="section-title">成本</div>
<div class="detail-item">
<span class="detail-label">代理佣金</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.today_detail?.commission || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">代理返利</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.today_detail?.rebate || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">税务成本</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.today_detail?.company_tax || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">API调用成本</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.today_detail?.api_cost || 0) }}</span>
</div>
<div class="detail-item total">
<span class="detail-label font-semibold">成本合计</span>
<span class="detail-value font-semibold text-red-600">
-¥{{ formatAmount((profitStats.today_detail?.commission || 0) + (profitStats.today_detail?.rebate || 0) + (profitStats.today_detail?.company_tax || 0) + (profitStats.today_detail?.api_cost || 0)) }}
</span>
</div>
</div>
</div>
</div>
<div class="revenue-card">
<div class="card-header">
<span class="card-title">当月</span>
<div class="card-profit">
<span class="profit-label">利润</span>
<span class="profit-value" :class="profitStats.month_profit >= 0 ? 'text-green-600' : 'text-red-600'">
¥{{ formatAmount(profitStats.month_profit) }}
</span>
</div>
</div>
<div class="card-content">
<div class="detail-section">
<div class="section-title">收入</div>
<div class="detail-item">
<span class="detail-label">营收</span>
<span class="detail-value text-green-600">+¥{{ formatAmount(profitStats.month_detail?.revenue || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">提现收税</span>
<span class="detail-value text-green-600">+¥{{ formatAmount(profitStats.month_detail?.tax_income || 0) }}</span>
</div>
<div class="detail-item total">
<span class="detail-label font-semibold">收入合计</span>
<span class="detail-value font-semibold text-green-600">
+¥{{ formatAmount((profitStats.month_detail?.revenue || 0) + (profitStats.month_detail?.tax_income || 0)) }}
</span>
</div>
</div>
<div class="detail-section">
<div class="section-title">成本</div>
<div class="detail-item">
<span class="detail-label">代理佣金</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.month_detail?.commission || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">代理返利</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.month_detail?.rebate || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">税务成本</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.month_detail?.company_tax || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">API调用成本</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.month_detail?.api_cost || 0) }}</span>
</div>
<div class="detail-item total">
<span class="detail-label font-semibold">成本合计</span>
<span class="detail-value font-semibold text-red-600">
-¥{{ formatAmount((profitStats.month_detail?.commission || 0) + (profitStats.month_detail?.rebate || 0) + (profitStats.month_detail?.company_tax || 0) + (profitStats.month_detail?.api_cost || 0)) }}
</span>
</div>
</div>
</div>
</div>
<div class="revenue-card">
<div class="card-header">
<span class="card-title">总计</span>
<div class="card-profit">
<span class="profit-label">利润</span>
<span class="profit-value" :class="profitStats.total_profit >= 0 ? 'text-green-600' : 'text-red-600'">
¥{{ formatAmount(profitStats.total_profit) }}
</span>
</div>
</div>
<div class="card-content">
<div class="detail-section">
<div class="section-title">收入</div>
<div class="detail-item">
<span class="detail-label">营收</span>
<span class="detail-value text-green-600">+¥{{ formatAmount(profitStats.total_detail?.revenue || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">提现收税</span>
<span class="detail-value text-green-600">+¥{{ formatAmount(profitStats.total_detail?.tax_income || 0) }}</span>
</div>
<div class="detail-item total">
<span class="detail-label font-semibold">收入合计</span>
<span class="detail-value font-semibold text-green-600">
+¥{{ formatAmount((profitStats.total_detail?.revenue || 0) + (profitStats.total_detail?.tax_income || 0)) }}
</span>
</div>
</div>
<div class="detail-section">
<div class="section-title">成本</div>
<div class="detail-item">
<span class="detail-label">代理佣金</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.total_detail?.commission || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">代理返利</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.total_detail?.rebate || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">税务成本</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.total_detail?.company_tax || 0) }}</span>
</div>
<div class="detail-item">
<span class="detail-label">API调用成本</span>
<span class="detail-value text-red-600">-¥{{ formatAmount(profitStats.total_detail?.api_cost || 0) }}</span>
</div>
<div class="detail-item total">
<span class="detail-label font-semibold">成本合计</span>
<span class="detail-value font-semibold text-red-600">
-¥{{ formatAmount((profitStats.total_detail?.commission || 0) + (profitStats.total_detail?.rebate || 0) + (profitStats.total_detail?.company_tax || 0) + (profitStats.total_detail?.api_cost || 0)) }}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="less">
.revenue-panel {
background: #fff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.revenue-panel-header {
margin-bottom: 16px;
}
.revenue-panel-content {
.revenue-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
@media (max-width: 1200px) {
grid-template-columns: 1fr;
}
}
.revenue-card {
border: 1px solid #e8e8e8;
border-radius: 6px;
overflow: hidden;
background: #fafafa;
.card-header {
background: #fff;
padding: 12px 16px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
.card-title {
font-size: 15px;
font-weight: 600;
color: #333;
}
.card-profit {
display: flex;
flex-direction: column;
align-items: flex-end;
.profit-label {
font-size: 11px;
color: #999;
margin-bottom: 2px;
}
.profit-value {
font-size: 16px;
font-weight: 600;
}
}
}
.card-content {
padding: 12px 16px;
.detail-section {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 13px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
&.total {
border-bottom: 2px solid #e0e0e0;
margin-top: 8px;
padding-top: 10px;
}
.detail-label {
color: #666;
font-size: 12px;
}
.detail-value {
font-size: 12px;
font-weight: 500;
}
}
}
}
}
}
}
</style>

112
apps/web-antd/src/views/dashboard/analytics/analytics-revenue-trend.vue Normal file
View File

@@ -0,0 +1,112 @@
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { DashboardApi } from '#/api/dashboard';
import { onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
interface Props {
data?: DashboardApi.TrendData[];
}
const props = defineProps<Props>();
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const updateChart = () => {
if (!props.data || props.data.length === 0) {
return;
}
const dates = props.data.map((item) => item.date);
const values = props.data.map((item) => item.value);
renderEcharts({
grid: {
bottom: 0,
containLabel: true,
left: '1%',
right: '1%',
top: '2%',
},
series: [
{
areaStyle: {},
data: values,
itemStyle: {
color: '#019680',
},
smooth: true,
type: 'line',
name: '营收金额',
},
],
tooltip: {
axisPointer: {
lineStyle: {
color: '#019680',
width: 1,
},
},
trigger: 'axis',
formatter: (params: any) => {
const param = params[0];
return `${param.name}<br/>${param.seriesName}: ¥${param.value.toFixed(2)}`;
},
},
xAxis: {
axisTick: {
show: false,
},
boundaryGap: false,
data: dates,
splitLine: {
lineStyle: {
type: 'solid',
width: 1,
},
show: true,
},
type: 'category',
},
yAxis: [
{
axisTick: {
show: false,
},
splitArea: {
show: true,
},
splitNumber: 4,
type: 'value',
axisLabel: {
formatter: (value: number) => {
if (value >= 10000) {
return `${(value / 10000).toFixed(1)}万`;
}
return value.toString();
},
},
},
],
});
};
watch(
() => props.data,
() => {
updateChart();
},
{ deep: true },
);
onMounted(() => {
updateChart();
});
</script>
<template>
<EchartsUI ref="chartRef" />
</template>

43
apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
View File

@@ -1,14 +1,28 @@
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { DashboardApi } from '#/api/dashboard';
import { onMounted, ref } from 'vue';
import { onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
interface Props {
data?: DashboardApi.TrendData[];
}
const props = defineProps<Props>();
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
onMounted(() => {
const updateChart = () => {
if (!props.data || props.data.length === 0) {
return;
}
const dates = props.data.map((item) => item.date);
const values = props.data.map((item) => item.value);
renderEcharts({
grid: {
bottom: 0,
@@ -20,17 +34,13 @@ onMounted(() => {
series: [
{
areaStyle: {},
data: [
120, 300, 500, 800, 1200, 1800, 2500, 3000, 2800, 2600, 2400, 2200,
2000, 1800, 1600, 1400, 1200, 1000, 800, 600, 400, 200, 100, 50, 30,
20, 10, 5, 2, 1,
],
data: values,
itemStyle: {
color: '#5ab1ef',
},
smooth: true,
type: 'line',
name: '访问量',
name: '订单数',
},
],
tooltip: {
@@ -47,9 +57,7 @@ onMounted(() => {
show: false,
},
boundaryGap: false,
data: Array.from({ length: 30 }).map(
(_item, index) => `Day ${index + 1}`,
),
data: dates,
splitLine: {
lineStyle: {
type: 'solid',
@@ -64,7 +72,6 @@ onMounted(() => {
axisTick: {
show: false,
},
max: 3000,
splitArea: {
show: true,
},
@@ -73,6 +80,18 @@ onMounted(() => {
},
],
});
};
watch(
() => props.data,
() => {
updateChart();
},
{ deep: true },
);
onMounted(() => {
updateChart();
});
</script>

247
apps/web-antd/src/views/dashboard/analytics/index.vue
View File

@@ -1,102 +1,175 @@
<script lang="ts" setup>
import type { AnalysisOverviewItem } from '@vben/common-ui';
import type { TabOption } from '@vben/types';
import {
AnalysisChartCard,
AnalysisChartsTabs,
AnalysisOverview,
} from '@vben/common-ui';
import {
SvgBellIcon,
SvgCakeIcon,
SvgCardIcon,
SvgDownloadIcon,
} from '@vben/icons';
import { onMounted, ref } from 'vue';
import { AnalysisChartCard, AnalysisChartsTabs } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { getDashboardStatistics } from '#/api/dashboard';
import type { DashboardApi } from '#/api/dashboard';
import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisitsData from './analytics-visits-data.vue';
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';
import AnalyticsVisits from './analytics-visits.vue';
import AnalyticsRevenueTrend from './analytics-revenue-trend.vue';
import AnalyticsProfitPanel from './analytics-profit-panel.vue';
const overviewItems: AnalysisOverviewItem[] = [
{
icon: SvgCardIcon,
title: '平台用户数',
totalTitle: '总用户数',
totalValue: 120_000,
value: 2000,
},
{
icon: SvgCakeIcon,
title: '推广访问量',
totalTitle: '总推广访问量',
totalValue: 500_000,
value: 20_000,
},
{
icon: SvgDownloadIcon,
title: '产品数量',
totalTitle: '总产品数量',
totalValue: 120,
value: 8,
},
{
icon: SvgBellIcon,
title: '代理数量',
totalTitle: '总代理数量',
totalValue: 5000,
value: 500,
},
];
const loading = ref(false);
const statistics = ref<DashboardApi.DashboardStatistics | null>(null);
const formatAmount = (amount: number) => {
if (amount >= 10000) {
return `${(amount / 10000).toFixed(2)}万`;
}
return amount.toFixed(2);
};
const formatNumber = (num: number) => {
if (num >= 10000) {
return `${(num / 10000).toFixed(2)}万`;
}
return num.toString();
};
const loadStatistics = async () => {
loading.value = true;
try {
const data = await getDashboardStatistics();
statistics.value = data;
} catch {
message.error('加载统计数据失败');
} finally {
loading.value = false;
}
};
const chartTabs: TabOption[] = [
{
label: '推广访问趋势',
value: 'trends',
},
{
label: '订单趋势',
value: 'visits',
},
{ label: '订单趋势', value: 'order' },
{ label: '营收趋势', value: 'revenue' },
];
onMounted(() => {
loadStatistics();
});
</script>
<template>
<div class="p-5">
<div class="mb-4 ml-4 text-lg text-gray-500">
该数据为演示模拟生成，不为真实数据
</div>
<AnalysisOverview :items="overviewItems" />
<AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
<template #trends>
<AnalyticsTrends />
</template>
<template #visits>
<AnalyticsVisits />
</template>
</AnalysisChartsTabs>
<div class="p-5 dashboard-wrapper">
<a-spin :spinning="loading">
<div v-if="statistics" class="dashboard-container">
<div class="dashboard-main">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<AnalysisChartCard title="订单统计">
<div class="py-2">
<div class="mb-3">
<div class="text-xs text-gray-500 mb-1">今日订单</div>
<div class="flex items-baseline justify-between">
<div class="text-3xl font-bold text-blue-600">
{{ statistics.order_stats.today_count }}<span class="text-lg font-normal ml-1 text-gray-500">单</span>
</div>
<div v-if="statistics.order_stats.change_rate" class="text-xs">
<span :class="statistics.order_stats.change_rate > 0 ? 'text-green-500' : 'text-red-500'">
{{ statistics.order_stats.change_rate > 0 ? '↑' : '↓' }} {{ Math.abs(statistics.order_stats.change_rate).toFixed(1) }}%
</span>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 pt-3 border-t">
<div>
<div class="text-xs text-gray-500 mb-1">当月</div>
<div class="text-lg font-semibold text-gray-700">
{{ formatNumber(statistics.order_stats.month_count) }}<span class="text-sm font-normal text-gray-500 ml-1">单</span>
</div>
</div>
<div>
<div class="text-xs text-gray-500 mb-1">总计</div>
<div class="text-lg font-semibold text-gray-700">
{{ formatNumber(statistics.order_stats.total_count) }}<span class="text-sm font-normal text-gray-500 ml-1">单</span>
</div>
</div>
</div>
</div>
</AnalysisChartCard>
<div class="mt-5 w-full md:flex">
<AnalysisChartCard
class="mt-5 md:mr-4 md:mt-0 md:w-1/3"
title="推广数据分析"
>
<AnalyticsVisitsData />
</AnalysisChartCard>
<AnalysisChartCard
class="mt-5 md:mr-4 md:mt-0 md:w-1/3"
title="订单来源分析"
>
<AnalyticsVisitsSource />
</AnalysisChartCard>
<AnalysisChartCard
class="mt-5 md:mt-0 md:w-1/3"
title="佣金/奖励/提现统计"
>
<AnalyticsVisitsSales />
</AnalysisChartCard>
</div>
<AnalysisChartCard title="代理统计">
<div class="py-2">
<div class="mb-3">
<div class="text-xs text-gray-500 mb-1">代理总数</div>
<div class="text-3xl font-bold text-purple-600">
{{ statistics.agent_stats.total_count }}<span class="text-lg font-normal ml-1 text-gray-500">人</span>
</div>
</div>
<div class="grid grid-cols-2 gap-3 pt-3 border-t">
<div>
<div class="text-xs text-gray-500 mb-1">今日新增</div>
<div class="text-lg font-semibold text-gray-700">
{{ statistics.agent_stats.today_new }}<span class="text-sm font-normal text-gray-500 ml-1">人</span>
</div>
</div>
<div>
<div class="text-xs text-gray-500 mb-1">当月新增</div>
<div class="text-lg font-semibold text-gray-700">
{{ statistics.agent_stats.month_new }}<span class="text-sm font-normal text-gray-500 ml-1">人</span>
</div>
</div>
</div>
</div>
</AnalysisChartCard>
</div>
<AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
<template #order>
<AnalyticsTrends :data="statistics.order_trend" />
</template>
<template #revenue>
<AnalyticsRevenueTrend :data="statistics.revenue_trend" />
</template>
</AnalysisChartsTabs>
</div>
<div class="dashboard-sidebar">
<AnalyticsProfitPanel :profit-stats="statistics.profit_stats" />
</div>
</div>
</a-spin>
</div>
</template>
<style scoped lang="less">
.dashboard-wrapper {
min-height: 100vh;
box-sizing: border-box;
}
.dashboard-container {
display: flex;
gap: 16px;
align-items: flex-start;
.dashboard-main {
flex: 1;
min-width: 0;
}
.dashboard-sidebar {
width: 800px;
flex-shrink: 0;
position: sticky;
top: 16px;
max-height: calc(100vh - 32px);
overflow: auto;
}
}
@media (max-width: 1600px) {
.dashboard-container {
flex-direction: column;
.dashboard-sidebar {
width: 100%;
position: static;
max-height: none;
overflow: visible;
}
}
}
</style>