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

68
apps/web-antd/src/api/dashboard/dashboard.ts Normal file
View File

@@ -0,0 +1,68 @@
import { requestClient } from '#/api/request';
export namespace DashboardApi {
export interface OrderStatistics {
today_count: number;
month_count: number;
total_count: number;
yesterday_count: number;
change_rate: number;
}
export interface RevenueStatistics {
today_amount: number;
month_amount: number;
total_amount: number;
yesterday_amount: number;
change_rate: number;
}
export interface AgentStatistics {
total_count: number;
today_new: number;
month_new: number;
}
export interface ProfitDetail {
revenue: number;
commission: number;
rebate: number;
company_tax: number;
api_cost: number;
tax_income: number;
profit: number;
profit_rate: number;
}
export interface ProfitStatistics {
today_profit: number;
month_profit: number;
total_profit: number;
today_profit_rate: number;
month_profit_rate: number;
total_profit_rate: number;
today_detail: ProfitDetail;
month_detail: ProfitDetail;
total_detail: ProfitDetail;
}
export interface TrendData {
date: string;
value: number;
}
export interface DashboardStatistics {
order_stats: OrderStatistics;
revenue_stats: RevenueStatistics;
agent_stats: AgentStatistics;
profit_stats: ProfitStatistics;
order_trend: TrendData[];
revenue_trend: TrendData[];
}
}
export async function getDashboardStatistics(): Promise<DashboardApi.DashboardStatistics> {
return await requestClient.get<DashboardApi.DashboardStatistics>(
'/dashboard/statistics',
);
}

1
apps/web-antd/src/api/dashboard/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dashboard';

1
apps/web-antd/src/api/index.ts
View File

@@ -1,5 +1,6 @@
export * from './agent';
export * from './core';
export * from './dashboard';
export * from './notification';
export * from './order';
export * from './platform-user';

26
apps/web-antd/src/api/product-manage/feature.ts
View File

@@ -4,9 +4,11 @@ import { requestClient } from '#/api/request';
export namespace FeatureApi {
export interface FeatureItem {
id: number;
id: string;
api_id: string;
name: string;
whitelist_price: number;
cost_price: number;
create_time: string;
update_time: string;
}
@@ -19,11 +21,15 @@ export namespace FeatureApi {
export interface CreateFeatureRequest {
api_id: string;
name: string;
whitelist_price?: number;
cost_price?: number;
}
export interface UpdateFeatureRequest {
api_id?: string;
name?: string;
whitelist_price?: number;
cost_price?: number;
}
export interface FeatureExampleItem {
@@ -36,7 +42,7 @@ export namespace FeatureApi {
}
export interface ConfigFeatureExampleRequest {
feature_id: number;
feature_id: string;
data: string;
}
@@ -45,12 +51,12 @@ export namespace FeatureApi {
}
export interface GetFeatureExampleRequest {
feature_id: number;
feature_id: string;
}
export interface GetFeatureExampleResponse {
id: number;
feature_id: number;
id: string;
feature_id: string;
api_id: string;
data: string;
create_time: string;
@@ -71,7 +77,7 @@ async function getFeatureList(params: Recordable<any>) {
* 获取模块详情
* @param id 模块ID
*/
async function getFeatureDetail(id: number) {
async function getFeatureDetail(id: string) {
return requestClient.get<FeatureApi.FeatureItem>(`/feature/detail/${id}`);
}
@@ -80,7 +86,7 @@ async function getFeatureDetail(id: number) {
* @param data 模块数据
*/
async function createFeature(data: FeatureApi.CreateFeatureRequest) {
return requestClient.post<{ id: number }>('/feature/create', data);
return requestClient.post<{ id: string }>('/feature/create', data);
}
/**
@@ -89,7 +95,7 @@ async function createFeature(data: FeatureApi.CreateFeatureRequest) {
* @param data 模块数据
*/
async function updateFeature(
id: number,
id: string,
data: FeatureApi.UpdateFeatureRequest,
) {
return requestClient.put<{ success: boolean }>(`/feature/update/${id}`, data);
@@ -99,7 +105,7 @@ async function updateFeature(
* 删除模块
* @param id 模块ID
*/
async function deleteFeature(id: number) {
async function deleteFeature(id: string) {
return requestClient.delete<{ success: boolean }>(`/feature/delete/${id}`);
}
@@ -120,7 +126,7 @@ async function configFeatureExample(
* 获取功能示例数据
* @param featureId 功能ID
*/
async function getFeatureExample(featureId: number) {
async function getFeatureExample(featureId: string) {
return requestClient.get<FeatureApi.GetFeatureExampleResponse>(
`/feature/example/${featureId}`,
);

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>

55
apps/web-antd/src/views/product-manage/feature/data.ts
View File

@@ -17,6 +17,39 @@ export function useFormSchema(): VbenFormSchema[] {
label: '描述',
rules: 'required',
},
{
component: 'Switch',
fieldName: 'no_offline',
label: '不支持下架',
defaultValue: false,
help: '勾选后该模块不开放下架功能，提交时白名单价格传 -1',
},
{
component: 'InputNumber',
fieldName: 'whitelist_price',
label: '白名单屏蔽价格（元）',
componentProps: {
min: 0,
precision: 2,
placeholder: '0=免费下架，>0=付费下架；勾选「不支持下架」时此项忽略',
},
dependencies: {
triggerFields: ['no_offline'],
if(values) {
return !values?.no_offline;
},
},
},
{
component: 'InputNumber',
componentProps: {
min: 0,
precision: 2,
},
fieldName: 'cost_price',
label: '成本价（元）',
rules: 'required',
},
];
}
@@ -51,6 +84,28 @@ export function useColumns<T = FeatureApi.FeatureItem>(
title: '描述',
minWidth: 200,
},
{
field: 'whitelist_price',
title: '白名单屏蔽价格（元）',
minWidth: 150,
cellRender: {
name: 'VxeCellRender',
props: {
render: ({ row }: { row: FeatureApi.FeatureItem }) => {
const price = (row as FeatureApi.FeatureItem).whitelist_price ?? 0;
if (price < 0) return '不支持下架';
if (price === 0) return '免费下架';
return `¥${price.toFixed(2)}`;
},
},
},
},
{
field: 'cost_price',
formatter: ({ cellValue }) => `¥${(cellValue || 0).toFixed(2)}`,
title: '成本价（元）',
minWidth: 120,
},
{
field: 'create_time',
title: '创建时间',

15
apps/web-antd/src/views/product-manage/feature/modules/form.vue
View File

@@ -24,7 +24,12 @@ const [Drawer, drawerApi] = useVbenDrawer({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) return;
const values = await formApi.getValues();
const values = (await formApi.getValues()) as Record<string, unknown>;
// 「不支持下架」时给后端传 whitelist_price: -1
if (values.no_offline) {
values.whitelist_price = -1;
}
delete values.no_offline;
drawerApi.lock();
try {
await (id.value
@@ -43,7 +48,13 @@ const [Drawer, drawerApi] = useVbenDrawer({
if (data) {
formData.value = data;
id.value = data.id;
formApi.setValues(data);
// 回显：whitelist_price < 0 表示不支持下架，勾选「不支持下架」并隐藏价格输入
const noOffline = (data.whitelist_price ?? 0) < 0;
formApi.setValues({
...data,
no_offline: noOffline,
whitelist_price: noOffline ? 0 : (data.whitelist_price ?? 0),
});
} else {
id.value = undefined;
}