Merge pull request 'feat(finance): 财务概览页面模块 1:1 还原' (#8 ) from feature/finance-overview-1to1 into main

feat(@vben/web-antd): add finance overview cockpit and fee rate
Merge pull request #22 from msumshk/feature/finance-report-1to1
2026-03-05 03:12:22 +00:00 · 2026-03-05 10:48:43 +08:00 · 2026-03-04 21:23:17 +08:00 · 2026-03-04 21:12:23 +08:00 · 2026-03-04 21:12:23 +08:00 · 2026-03-04 17:00:11 +08:00
50 changed files with 4151 additions and 1 deletions
--- a/apps/web-antd/src/api/finance/index.ts
+++ b/apps/web-antd/src/api/finance/index.ts
@@ -3,5 +3,7 @@
 */
 export * from './cost';
 export * from './invoice';
+export * from './overview';
+export * from './report';
 export * from './settlement';
 export * from './transaction';
--- a/apps/web-antd/src/api/finance/overview.ts
+++ b/apps/web-antd/src/api/finance/overview.ts
@@ -0,0 +1,122 @@
+/**
+ * 文件职责：财务概览 API 契约与请求封装。
+ */
+import { requestClient } from '#/api/request';
+
+/** 财务概览维度。 */
+export type FinanceOverviewDimension = 'store' | 'tenant';
+
+/** 趋势周期值。 */
+export type FinanceOverviewTrendRange = '7' | '30';
+
+/** 财务概览查询参数。 */
+export interface FinanceOverviewDashboardQuery {
+  dimension: FinanceOverviewDimension;
+  storeId?: string;
+}
+
+/** KPI 卡片数据。 */
+export interface FinanceOverviewKpiCardDto {
+  amount: number;
+  changeRate: number;
+  compareAmount: number;
+  compareLabel: string;
+  trend: 'down' | 'flat' | 'up';
+}
+
+/** 收入趋势点。 */
+export interface FinanceOverviewIncomeTrendPointDto {
+  amount: number;
+  date: string;
+  dateLabel: string;
+}
+
+/** 收入趋势数据。 */
+export interface FinanceOverviewIncomeTrendDto {
+  last30Days: FinanceOverviewIncomeTrendPointDto[];
+  last7Days: FinanceOverviewIncomeTrendPointDto[];
+}
+
+/** 利润趋势点。 */
+export interface FinanceOverviewProfitTrendPointDto {
+  costAmount: number;
+  date: string;
+  dateLabel: string;
+  netProfitAmount: number;
+  revenueAmount: number;
+}
+
+/** 利润趋势数据。 */
+export interface FinanceOverviewProfitTrendDto {
+  last30Days: FinanceOverviewProfitTrendPointDto[];
+  last7Days: FinanceOverviewProfitTrendPointDto[];
+}
+
+/** 收入构成项。 */
+export interface FinanceOverviewIncomeCompositionItemDto {
+  amount: number;
+  channel: 'delivery' | 'dine_in' | 'pickup';
+  channelText: string;
+  percentage: number;
+}
+
+/** 收入构成数据。 */
+export interface FinanceOverviewIncomeCompositionDto {
+  items: FinanceOverviewIncomeCompositionItemDto[];
+  totalAmount: number;
+}
+
+/** 成本构成项。 */
+export interface FinanceOverviewCostCompositionItemDto {
+  amount: number;
+  category: 'fixed' | 'food' | 'labor' | 'packaging' | 'platform';
+  categoryText: string;
+  percentage: number;
+}
+
+/** 成本构成数据。 */
+export interface FinanceOverviewCostCompositionDto {
+  items: FinanceOverviewCostCompositionItemDto[];
+  totalAmount: number;
+}
+
+/** TOP 商品项。 */
+export interface FinanceOverviewTopProductItemDto {
+  percentage: number;
+  productName: string;
+  rank: number;
+  revenueAmount: number;
+  salesQuantity: number;
+}
+
+/** TOP 商品排行。 */
+export interface FinanceOverviewTopProductDto {
+  items: FinanceOverviewTopProductItemDto[];
+  periodDays: number;
+}
+
+/** 财务概览驾驶舱数据。 */
+export interface FinanceOverviewDashboardDto {
+  actualReceived: FinanceOverviewKpiCardDto;
+  costComposition: FinanceOverviewCostCompositionDto;
+  dimension: FinanceOverviewDimension;
+  incomeComposition: FinanceOverviewIncomeCompositionDto;
+  incomeTrend: FinanceOverviewIncomeTrendDto;
+  netIncome: FinanceOverviewKpiCardDto;
+  profitTrend: FinanceOverviewProfitTrendDto;
+  refundAmount: FinanceOverviewKpiCardDto;
+  storeId?: string;
+  todayRevenue: FinanceOverviewKpiCardDto;
+  topProducts: FinanceOverviewTopProductDto;
+  withdrawableBalance: FinanceOverviewKpiCardDto;
+}
+
+/** 查询财务概览驾驶舱。 */
+export async function getFinanceOverviewDashboardApi(
+  params: FinanceOverviewDashboardQuery,
+) {
+  return requestClient.get<FinanceOverviewDashboardDto>(
+    '/finance/overview/dashboard',
+    { params },
+  );
+}
--- a/apps/web-antd/src/api/finance/report.ts
+++ b/apps/web-antd/src/api/finance/report.ts
@@ -0,0 +1,156 @@
+/**
+ * 文件职责：财务中心经营报表 API 契约与请求封装。
+ */
+import { requestClient } from '#/api/request';
+
+/** 报表周期筛选值。 */
+export type FinanceBusinessReportPeriodType = 'daily' | 'monthly' | 'weekly';
+
+/** 经营报表状态值。 */
+export type FinanceBusinessReportStatus =
+  | 'failed'
+  | 'queued'
+  | 'running'
+  | 'succeeded';
+
+/** 经营报表列表查询参数。 */
+export interface FinanceBusinessReportListQuery {
+  page: number;
+  pageSize: number;
+  periodType?: FinanceBusinessReportPeriodType;
+  storeId: string;
+}
+
+/** 经营报表详情查询参数。 */
+export interface FinanceBusinessReportDetailQuery {
+  reportId: string;
+  storeId: string;
+}
+
+/** 经营报表批量导出查询参数。 */
+export interface FinanceBusinessReportBatchExportQuery {
+  page: number;
+  pageSize: number;
+  periodType?: FinanceBusinessReportPeriodType;
+  storeId: string;
+}
+
+/** 经营报表列表行。 */
+export interface FinanceBusinessReportListItemDto {
+  averageOrderValue: number;
+  canDownload: boolean;
+  costTotalAmount: number;
+  dateText: string;
+  netProfitAmount: number;
+  orderCount: number;
+  profitRatePercent: number;
+  refundRatePercent: number;
+  reportId: string;
+  revenueAmount: number;
+  status: FinanceBusinessReportStatus;
+  statusText: string;
+}
+
+/** 经营报表列表结果。 */
+export interface FinanceBusinessReportListResultDto {
+  items: FinanceBusinessReportListItemDto[];
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+/** 经营报表 KPI 项。 */
+export interface FinanceBusinessReportKpiDto {
+  key: string;
+  label: string;
+  momChangeRate: number;
+  valueText: string;
+  yoyChangeRate: number;
+}
+
+/** 经营报表明细项。 */
+export interface FinanceBusinessReportBreakdownItemDto {
+  amount: number;
+  key: string;
+  label: string;
+  ratioPercent: number;
+}
+
+/** 经营报表详情。 */
+export interface FinanceBusinessReportDetailDto {
+  costBreakdowns: FinanceBusinessReportBreakdownItemDto[];
+  incomeBreakdowns: FinanceBusinessReportBreakdownItemDto[];
+  kpis: FinanceBusinessReportKpiDto[];
+  periodType: FinanceBusinessReportPeriodType;
+  reportId: string;
+  status: FinanceBusinessReportStatus;
+  statusText: string;
+  title: string;
+}
+
+/** 经营报表导出结果。 */
+export interface FinanceBusinessReportExportDto {
+  fileContentBase64: string;
+  fileName: string;
+  totalCount: number;
+}
+
+/** 查询经营报表列表。 */
+export async function getFinanceBusinessReportListApi(
+  params: FinanceBusinessReportListQuery,
+) {
+  return requestClient.get<FinanceBusinessReportListResultDto>(
+    '/finance/report/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询经营报表详情。 */
+export async function getFinanceBusinessReportDetailApi(
+  params: FinanceBusinessReportDetailQuery,
+) {
+  return requestClient.get<FinanceBusinessReportDetailDto>(
+    '/finance/report/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 导出经营报表 PDF。 */
+export async function exportFinanceBusinessReportPdfApi(
+  params: FinanceBusinessReportDetailQuery,
+) {
+  return requestClient.get<FinanceBusinessReportExportDto>(
+    '/finance/report/export/pdf',
+    {
+      params,
+    },
+  );
+}
+
+/** 导出经营报表 Excel。 */
+export async function exportFinanceBusinessReportExcelApi(
+  params: FinanceBusinessReportDetailQuery,
+) {
+  return requestClient.get<FinanceBusinessReportExportDto>(
+    '/finance/report/export/excel',
+    {
+      params,
+    },
+  );
+}
+
+/** 批量导出经营报表（ZIP）。 */
+export async function exportFinanceBusinessReportBatchApi(
+  params: FinanceBusinessReportBatchExportQuery,
+) {
+  return requestClient.get<FinanceBusinessReportExportDto>(
+    '/finance/report/export/batch',
+    {
+      params,
+    },
+  );
+}
--- a/apps/web-antd/src/api/store-fees/index.ts
+++ b/apps/web-antd/src/api/store-fees/index.ts
@@ -46,6 +46,8 @@ export interface StoreOtherFeesDto {
 export interface StoreFeesSettingsDto {
  /** 基础配送费 */
  baseDeliveryFee: number;
+  /** 平台服务费率（%） */
+  platformServiceRate: number;
  /** 固定包装费 */
  fixedPackagingFee: number;
  /** 免配送费门槛，空值表示关闭 */
@@ -70,6 +72,8 @@ export interface StoreFeesSettingsDto {
 export interface SaveStoreFeesSettingsParams {
  /** 基础配送费 */
  baseDeliveryFee: number;
+  /** 平台服务费率（%） */
+  platformServiceRate: number;
  /** 固定包装费 */
  fixedPackagingFee: number;
  /** 免配送费门槛，空值表示关闭 */
--- a/apps/web-antd/src/views/finance/overview/components/OverviewCompositionCard.vue
+++ b/apps/web-antd/src/views/finance/overview/components/OverviewCompositionCard.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+/**
+ * 文件职责：财务概览构成环图卡片。
+ */
+import type { FinanceOverviewCompositionViewItem } from '../types';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import {
+  formatCurrency,
+  formatPercent,
+} from '../composables/overview-page/helpers';
+
+interface Props {
+  items: FinanceOverviewCompositionViewItem[];
+  title: string;
+  totalAmount: number;
+  totalLabel: string;
+}
+
+const props = defineProps<Props>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+function renderChart() {
+  renderEcharts({
+    tooltip: {
+      trigger: 'item',
+      formatter(params: unknown) {
+        const record = params as {
+          name?: string;
+          percent?: number;
+          value?: number;
+        };
+        return `${record.name ?? ''}<br/>${formatCurrency(Number(record.value ?? 0))} (${formatPercent(Number(record.percent ?? 0))})`;
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['55%', '76%'],
+        center: ['50%', '50%'],
+        avoidLabelOverlap: true,
+        label: {
+          show: false,
+        },
+        data: props.items.map((item) => ({
+          name: item.name,
+          value: item.amount,
+          itemStyle: {
+            color: item.color,
+          },
+        })),
+      },
+    ],
+  });
+}
+
+watch(
+  () => props.items,
+  async () => {
+    await nextTick();
+    renderChart();
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  renderChart();
+});
+</script>
+
+<template>
+  <div class="fo-section-card">
+    <div class="fo-section-title">{{ props.title }}</div>
+
+    <div class="fo-composition-wrap">
+      <div class="fo-composition-chart-wrap">
+        <EchartsUI ref="chartRef" class="fo-composition-chart" />
+
+        <div class="fo-composition-center">
+          <div class="fo-composition-center-value">
+            {{ formatCurrency(props.totalAmount) }}
+          </div>
+          <div class="fo-composition-center-label">{{ props.totalLabel }}</div>
+        </div>
+      </div>
+
+      <div class="fo-composition-legend">
+        <div
+          v-for="item in props.items"
+          :key="item.key"
+          class="fo-composition-legend-item"
+        >
+          <span
+            class="fo-composition-dot"
+            :style="{ backgroundColor: item.color }"
+          ></span>
+          <span class="fo-composition-name">{{ item.name }}</span>
+          <span class="fo-composition-percent">{{
+            formatPercent(item.percentage)
+          }}</span>
+          <span class="fo-composition-amount">{{
+            formatCurrency(item.amount)
+          }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/finance/overview/components/OverviewIncomeTrendCard.vue
+++ b/apps/web-antd/src/views/finance/overview/components/OverviewIncomeTrendCard.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+/**
+ * 文件职责：财务概览收入趋势图卡片。
+ */
+import type {
+  FinanceOverviewIncomeTrendPointDto,
+  FinanceOverviewTrendRange,
+} from '#/api/finance/overview';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import {
+  formatAxisAmount,
+  formatCurrency,
+} from '../composables/overview-page/helpers';
+
+interface Props {
+  points: FinanceOverviewIncomeTrendPointDto[];
+  range: FinanceOverviewTrendRange;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'update:range', value: FinanceOverviewTrendRange): void;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+function renderChart() {
+  renderEcharts({
+    tooltip: {
+      trigger: 'axis',
+      formatter(params: unknown) {
+        if (!Array.isArray(params) || params.length === 0) return '';
+        const records = params as Array<{
+          axisValue?: string;
+          value?: number;
+        }>;
+        const record = records[0] ?? {};
+        return `${record.axisValue ?? ''}<br/>实收：${formatCurrency(Number(record.value ?? 0))}`;
+      },
+    },
+    grid: {
+      left: '1%',
+      right: '2%',
+      bottom: '2%',
+      top: '8%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb',
+        },
+      },
+      data: props.points.map((item) => item.dateLabel),
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        formatter: (value: number) => formatAxisAmount(value),
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f1f5f9',
+          type: 'dashed',
+        },
+      },
+    },
+    series: [
+      {
+        name: '实收',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        itemStyle: {
+          color: '#1677ff',
+        },
+        areaStyle: {
+          color: 'rgba(22,119,255,0.15)',
+        },
+        lineStyle: {
+          color: '#1677ff',
+          width: 2.5,
+        },
+        data: props.points.map((item) => item.amount),
+      },
+    ],
+  });
+}
+
+watch(
+  () => props.points,
+  async () => {
+    await nextTick();
+    renderChart();
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  renderChart();
+});
+</script>
+
+<template>
+  <div class="fo-section-card">
+    <div class="fo-section-head">
+      <div class="fo-section-title">收入趋势</div>
+
+      <div class="fo-pills">
+        <button
+          class="fo-pill"
+          :class="{ 'is-active': props.range === '7' }"
+          type="button"
+          @click="emit('update:range', '7')"
+        >
+          近7天
+        </button>
+        <button
+          class="fo-pill"
+          :class="{ 'is-active': props.range === '30' }"
+          type="button"
+          @click="emit('update:range', '30')"
+        >
+          近30天
+        </button>
+      </div>
+    </div>
+
+    <EchartsUI ref="chartRef" class="fo-trend-chart" />
+  </div>
+</template>
--- a/apps/web-antd/src/views/finance/overview/components/OverviewKpiRow.vue
+++ b/apps/web-antd/src/views/finance/overview/components/OverviewKpiRow.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/**
+ * 文件职责：财务概览 KPI 指标卡。
+ */
+import type { FinanceOverviewKpiKey } from '../composables/overview-page/constants';
+
+import type { FinanceOverviewDashboardDto } from '#/api/finance/overview';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { OVERVIEW_KPI_CONFIG } from '../composables/overview-page/constants';
+import {
+  formatChangeRate,
+  formatCurrency,
+  resolveKpiTrendClass,
+  resolveKpiTrendIcon,
+} from '../composables/overview-page/helpers';
+
+interface Props {
+  dashboard: FinanceOverviewDashboardDto;
+}
+
+const props = defineProps<Props>();
+
+const kpiCards = computed(() =>
+  OVERVIEW_KPI_CONFIG.map((item) => ({
+    ...item,
+    value: props.dashboard[item.key as FinanceOverviewKpiKey],
+  })),
+);
+</script>
+
+<template>
+  <div class="fo-kpi-row">
+    <div
+      v-for="card in kpiCards"
+      :key="card.key"
+      class="fo-kpi-card"
+      :class="`is-${card.tone}`"
+    >
+      <div class="fo-kpi-top">
+        <span class="fo-kpi-label">{{ card.label }}</span>
+        <span class="fo-kpi-icon">
+          <IconifyIcon :icon="card.icon" />
+        </span>
+      </div>
+
+      <div class="fo-kpi-value">{{ formatCurrency(card.value.amount) }}</div>
+
+      <div class="fo-kpi-change" :class="resolveKpiTrendClass(card.value)">
+        <IconifyIcon :icon="resolveKpiTrendIcon(card.value)" />
+        <span>{{ formatChangeRate(card.value.changeRate) }}</span>
+        <span>{{ card.value.compareLabel }}</span>
+      </div>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/finance/overview/components/OverviewProfitTrendCard.vue
+++ b/apps/web-antd/src/views/finance/overview/components/OverviewProfitTrendCard.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+/**
+ * 文件职责：财务概览利润走势图卡片。
+ */
+import type {
+  FinanceOverviewProfitTrendPointDto,
+  FinanceOverviewTrendRange,
+} from '#/api/finance/overview';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import {
+  formatAxisAmount,
+  formatCurrency,
+} from '../composables/overview-page/helpers';
+
+interface Props {
+  points: FinanceOverviewProfitTrendPointDto[];
+  range: FinanceOverviewTrendRange;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'update:range', value: FinanceOverviewTrendRange): void;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+function renderChart() {
+  renderEcharts({
+    tooltip: {
+      trigger: 'axis',
+      formatter(params: unknown) {
+        if (!Array.isArray(params) || params.length === 0) return '';
+        const records = params as Array<{
+          axisValue?: string;
+          seriesName?: string;
+          value?: number;
+        }>;
+
+        const date = records[0]?.axisValue ?? '';
+        const revenue = Number(
+          records.find((item) => item.seriesName === '营收')?.value ?? 0,
+        );
+        const cost = Number(
+          records.find((item) => item.seriesName === '成本')?.value ?? 0,
+        );
+        const netProfit = Number(
+          records.find((item) => item.seriesName === '净利润')?.value ?? 0,
+        );
+
+        return `${date}<br/>营收：${formatCurrency(revenue)}<br/>成本：${formatCurrency(cost)}<br/>净利润：${formatCurrency(netProfit)}`;
+      },
+    },
+    grid: {
+      left: '1%',
+      right: '2%',
+      bottom: '2%',
+      top: '8%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb',
+        },
+      },
+      data: props.points.map((item) => item.dateLabel),
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        formatter: (value: number) => formatAxisAmount(value),
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f1f5f9',
+          type: 'dashed',
+        },
+      },
+    },
+    series: [
+      {
+        name: '营收',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: '#1677ff',
+          width: 2.5,
+        },
+        data: props.points.map((item) => item.revenueAmount),
+      },
+      {
+        name: '成本',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: '#ef4444',
+          width: 2,
+          type: 'dashed',
+        },
+        data: props.points.map((item) => item.costAmount),
+      },
+      {
+        name: '净利润',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: '#22c55e',
+          width: 2.5,
+        },
+        data: props.points.map((item) => item.netProfitAmount),
+      },
+    ],
+  });
+}
+
+watch(
+  () => props.points,
+  async () => {
+    await nextTick();
+    renderChart();
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  renderChart();
+});
+</script>
+
+<template>
+  <div class="fo-section-card">
+    <div class="fo-section-head">
+      <div class="fo-section-title">利润走势</div>
+
+      <div class="fo-pills">
+        <button
+          class="fo-pill"
+          :class="{ 'is-active': props.range === '7' }"
+          type="button"
+          @click="emit('update:range', '7')"
+        >
+          近7天
+        </button>
+        <button
+          class="fo-pill"
+          :class="{ 'is-active': props.range === '30' }"
+          type="button"
+          @click="emit('update:range', '30')"
+        >
+          近30天
+        </button>
+      </div>
+    </div>
+
+    <EchartsUI ref="chartRef" class="fo-profit-chart" />
+
+    <div class="fo-profit-legend">
+      <div class="fo-profit-legend-item">
+        <span class="fo-profit-legend-line is-revenue"></span>
+        营收
+      </div>
+      <div class="fo-profit-legend-item">
+        <span class="fo-profit-legend-line is-cost"></span>
+        成本
+      </div>
+      <div class="fo-profit-legend-item">
+        <span class="fo-profit-legend-line is-net"></span>
+        净利润
+      </div>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/finance/overview/components/OverviewToolbar.vue
+++ b/apps/web-antd/src/views/finance/overview/components/OverviewToolbar.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * 文件职责：财务概览顶部维度工具条。
+ */
+import type { OptionItem } from '../types';
+
+import type { FinanceOverviewDimension } from '#/api/finance/overview';
+
+import { Segmented, Select } from 'ant-design-vue';
+
+interface Props {
+  dimension: FinanceOverviewDimension;
+  dimensionOptions: Array<{ label: string; value: FinanceOverviewDimension }>;
+  isStoreLoading: boolean;
+  showStoreSelect: boolean;
+  storeId: string;
+  storeOptions: OptionItem[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'update:dimension', value: FinanceOverviewDimension): void;
+  (event: 'update:storeId', value: string): void;
+}>();
+
+function handleStoreChange(value: unknown) {
+  if (typeof value === 'number' || typeof value === 'string') {
+    emit('update:storeId', String(value));
+    return;
+  }
+  emit('update:storeId', '');
+}
+</script>
+
+<template>
+  <div class="fo-toolbar">
+    <div class="fo-toolbar-title">财务概览驾驶舱</div>
+
+    <div class="fo-toolbar-right">
+      <Segmented
+        class="fo-dimension-segmented"
+        :value="props.dimension"
+        :options="props.dimensionOptions"
+        @update:value="
+          (value) =>
+            emit(
+              'update:dimension',
+              (value as FinanceOverviewDimension) || 'tenant',
+            )
+        "
+      />
+
+      <Select
+        v-if="props.showStoreSelect"
+        class="fo-store-select"
+        :value="props.storeId"
+        :options="props.storeOptions"
+        :loading="props.isStoreLoading"
+        :disabled="props.storeOptions.length === 0"
+        placeholder="请选择门店"
+        @update:value="(value) => handleStoreChange(value)"
+      />
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/finance/overview/components/OverviewTopProductsCard.vue
+++ b/apps/web-antd/src/views/finance/overview/components/OverviewTopProductsCard.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+/**
+ * 文件职责：财务概览 TOP10 商品排行表。
+ */
+import type { FinanceOverviewTopProductItemDto } from '#/api/finance/overview';
+
+import { computed } from 'vue';
+
+import { Table } from 'ant-design-vue';
+
+import {
+  calcTopProductBarWidth,
+  formatCurrency,
+  formatPercent,
+} from '../composables/overview-page/helpers';
+
+interface Props {
+  items: FinanceOverviewTopProductItemDto[];
+  maxPercentage: number;
+  periodDays: number;
+}
+
+const props = defineProps<Props>();
+
+const columns = [
+  {
+    title: '排名',
+    key: 'rank',
+    width: 86,
+  },
+  {
+    title: '商品名称',
+    dataIndex: 'productName',
+    key: 'productName',
+  },
+  {
+    title: '销量',
+    dataIndex: 'salesQuantity',
+    key: 'salesQuantity',
+    width: 100,
+  },
+  {
+    title: '营收',
+    key: 'revenueAmount',
+    width: 120,
+  },
+  {
+    title: '占比',
+    key: 'percentage',
+    width: 190,
+  },
+];
+
+const dataSource = computed(() => props.items);
+
+function resolveRankClass(rank: number) {
+  if (rank === 1) return 'is-top1';
+  if (rank === 2) return 'is-top2';
+  if (rank === 3) return 'is-top3';
+  return 'is-normal';
+}
+</script>
+
+<template>
+  <div class="fo-section-card fo-top-card">
+    <div class="fo-section-title">
+      TOP10 商品营收排行（近{{ props.periodDays }}天）
+    </div>
+
+    <Table
+      class="fo-top-table"
+      :columns="columns"
+      :data-source="dataSource"
+      :pagination="false"
+      :row-key="(record) => `${record.rank}-${record.productName}`"
+      size="middle"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'rank'">
+          <span class="fo-rank-num" :class="resolveRankClass(record.rank)">
+            {{ record.rank }}
+          </span>
+        </template>
+
+        <template v-else-if="column.key === 'revenueAmount'">
+          <span class="fo-revenue-text">{{
+            formatCurrency(record.revenueAmount)
+          }}</span>
+        </template>
+
+        <template v-else-if="column.key === 'percentage'">
+          <div class="fo-percent-wrap">
+            <div class="fo-percent-track">
+              <div
+                class="fo-percent-fill"
+                :style="{
+                  width: `${calcTopProductBarWidth(record.percentage, props.maxPercentage)}%`,
+                }"
+              ></div>
+            </div>
+            <span class="fo-percent-text">{{
+              formatPercent(record.percentage)
+            }}</span>
+          </div>
+        </template>
+      </template>
+    </Table>
+  </div>
+</template>
--- a/apps/web-antd/src/views/finance/overview/composables/overview-page/constants.ts
+++ b/apps/web-antd/src/views/finance/overview/composables/overview-page/constants.ts
@@ -0,0 +1,153 @@
+import type { FinanceOverviewTrendState } from '../../types';
+
+import type {
+  FinanceOverviewDashboardDto,
+  FinanceOverviewDimension,
+  FinanceOverviewKpiCardDto,
+  FinanceOverviewTrendRange,
+} from '#/api/finance/overview';
+
+/**
+ * 文件职责：财务概览页面常量定义。
+ */
+
+/** 财务概览查看权限。 */
+export const FINANCE_OVERVIEW_VIEW_PERMISSION = 'tenant:finance:overview:view';
+
+/** 维度切换选项。 */
+export const OVERVIEW_DIMENSION_OPTIONS: Array<{
+  label: string;
+  value: FinanceOverviewDimension;
+}> = [
+  { label: '租户汇总', value: 'tenant' },
+  { label: '门店视角', value: 'store' },
+];
+
+/** KPI 键。 */
+export type FinanceOverviewKpiKey =
+  | 'actualReceived'
+  | 'netIncome'
+  | 'refundAmount'
+  | 'todayRevenue'
+  | 'withdrawableBalance';
+
+/** KPI 卡片配置信息。 */
+export const OVERVIEW_KPI_CONFIG: Array<{
+  icon: string;
+  key: FinanceOverviewKpiKey;
+  label: string;
+  tone: 'blue' | 'green' | 'orange' | 'purple' | 'red';
+}> = [
+  {
+    key: 'todayRevenue',
+    label: '今日营业额',
+    icon: 'lucide:coins',
+    tone: 'blue',
+  },
+  {
+    key: 'actualReceived',
+    label: '实收',
+    icon: 'lucide:badge-check',
+    tone: 'green',
+  },
+  {
+    key: 'refundAmount',
+    label: '退款',
+    icon: 'lucide:undo-2',
+    tone: 'red',
+  },
+  {
+    key: 'netIncome',
+    label: '净收入',
+    icon: 'lucide:wallet',
+    tone: 'purple',
+  },
+  {
+    key: 'withdrawableBalance',
+    label: '可提现余额',
+    icon: 'lucide:landmark',
+    tone: 'orange',
+  },
+];
+
+/** 收入构成颜色映射。 */
+export const INCOME_COMPOSITION_COLOR_MAP: Record<string, string> = {
+  delivery: '#1677ff',
+  pickup: '#22c55e',
+  dine_in: '#f59e0b',
+};
+
+/** 成本构成颜色映射。 */
+export const COST_COMPOSITION_COLOR_MAP: Record<string, string> = {
+  food: '#ef4444',
+  labor: '#f59e0b',
+  fixed: '#8b5cf6',
+  packaging: '#06b6d4',
+  platform: '#94a3b8',
+};
+
+/** 默认筛选状态。 */
+export const DEFAULT_OVERVIEW_FILTER = {
+  dimension: 'tenant',
+  storeId: '',
+} as const;
+
+/** 默认趋势状态。 */
+export const DEFAULT_OVERVIEW_TREND_STATE: FinanceOverviewTrendState = {
+  incomeRange: '7',
+  profitRange: '7',
+};
+
+/** 默认 KPI 卡片。 */
+export const EMPTY_KPI_CARD: FinanceOverviewKpiCardDto = {
+  amount: 0,
+  compareAmount: 0,
+  changeRate: 0,
+  compareLabel: '较昨日',
+  trend: 'flat',
+};
+
+/** 默认财务概览数据。 */
+export function createDefaultFinanceOverviewDashboard(): FinanceOverviewDashboardDto {
+  return {
+    dimension: 'tenant',
+    storeId: undefined,
+    todayRevenue: { ...EMPTY_KPI_CARD },
+    actualReceived: { ...EMPTY_KPI_CARD },
+    refundAmount: { ...EMPTY_KPI_CARD },
+    netIncome: { ...EMPTY_KPI_CARD },
+    withdrawableBalance: {
+      ...EMPTY_KPI_CARD,
+      compareLabel: '较上周',
+    },
+    incomeTrend: {
+      last7Days: [],
+      last30Days: [],
+    },
+    profitTrend: {
+      last7Days: [],
+      last30Days: [],
+    },
+    incomeComposition: {
+      totalAmount: 0,
+      items: [],
+    },
+    costComposition: {
+      totalAmount: 0,
+      items: [],
+    },
+    topProducts: {
+      periodDays: 30,
+      items: [],
+    },
+  };
+}
+
+/** 趋势范围枚举。 */
+export const TREND_RANGE_OPTIONS: Array<{
+  label: string;
+  value: FinanceOverviewTrendRange;
+}> = [
+  { label: '近7天', value: '7' },
+  { label: '近30天', value: '30' },
+];
--- a/apps/web-antd/src/views/finance/overview/composables/overview-page/data-actions.ts
+++ b/apps/web-antd/src/views/finance/overview/composables/overview-page/data-actions.ts
@@ -0,0 +1,109 @@
+/**
+ * 文件职责：财务概览页面数据动作。
+ */
+import type { Ref } from 'vue';
+
+import type {
+  FinanceOverviewDashboardState,
+  FinanceOverviewFilterState,
+} from '../../types';
+
+import type { StoreListItemDto } from '#/api/store';
+
+import { message } from 'ant-design-vue';
+
+import { getFinanceOverviewDashboardApi } from '#/api/finance/overview';
+import { getStoreListApi } from '#/api/store';
+
+import { createDefaultFinanceOverviewDashboard } from './constants';
+import { buildDashboardQuery } from './helpers';
+
+interface CreateDataActionsOptions {
+  dashboard: FinanceOverviewDashboardState;
+  filters: FinanceOverviewFilterState;
+  isDashboardLoading: Ref<boolean>;
+  isStoreLoading: Ref<boolean>;
+  stores: Ref<StoreListItemDto[]>;
+}
+
+/** 创建页面数据动作。 */
+export function createDataActions(options: CreateDataActionsOptions) {
+  function syncDashboard(source: FinanceOverviewDashboardState) {
+    options.dashboard.dimension = source.dimension;
+    options.dashboard.storeId = source.storeId;
+    options.dashboard.todayRevenue = { ...source.todayRevenue };
+    options.dashboard.actualReceived = { ...source.actualReceived };
+    options.dashboard.refundAmount = { ...source.refundAmount };
+    options.dashboard.netIncome = { ...source.netIncome };
+    options.dashboard.withdrawableBalance = { ...source.withdrawableBalance };
+    options.dashboard.incomeTrend = {
+      last7Days: [...source.incomeTrend.last7Days],
+      last30Days: [...source.incomeTrend.last30Days],
+    };
+    options.dashboard.profitTrend = {
+      last7Days: [...source.profitTrend.last7Days],
+      last30Days: [...source.profitTrend.last30Days],
+    };
+    options.dashboard.incomeComposition = {
+      totalAmount: source.incomeComposition.totalAmount,
+      items: [...source.incomeComposition.items],
+    };
+    options.dashboard.costComposition = {
+      totalAmount: source.costComposition.totalAmount,
+      items: [...source.costComposition.items],
+    };
+    options.dashboard.topProducts = {
+      periodDays: source.topProducts.periodDays,
+      items: [...source.topProducts.items],
+    };
+  }
+
+  function clearDashboard() {
+    syncDashboard(createDefaultFinanceOverviewDashboard());
+  }
+
+  async function loadStores() {
+    options.isStoreLoading.value = true;
+    try {
+      const result = await getStoreListApi({
+        page: 1,
+        pageSize: 200,
+      });
+      options.stores.value = result.items ?? [];
+    } catch (error) {
+      console.error(error);
+      options.stores.value = [];
+      message.error('加载门店列表失败，请稍后重试');
+    } finally {
+      options.isStoreLoading.value = false;
+    }
+  }
+
+  async function loadDashboard() {
+    if (options.filters.dimension === 'store' && !options.filters.storeId) {
+      clearDashboard();
+      return;
+    }
+
+    options.isDashboardLoading.value = true;
+    try {
+      const result = await getFinanceOverviewDashboardApi(
+        buildDashboardQuery(options.filters),
+      );
+      syncDashboard(result);
+    } catch (error) {
+      console.error(error);
+      clearDashboard();
+      message.error('加载财务概览失败，请稍后重试');
+    } finally {
+      options.isDashboardLoading.value = false;
+    }
+  }
+
+  return {
+    clearDashboard,
+    loadDashboard,
+    loadStores,
+    syncDashboard,
+  };
+}
--- a/apps/web-antd/src/views/finance/overview/composables/overview-page/helpers.ts
+++ b/apps/web-antd/src/views/finance/overview/composables/overview-page/helpers.ts
@@ -0,0 +1,138 @@
+/**
+ * 文件职责：财务概览页面工具方法。
+ */
+import type {
+  FinanceOverviewCompositionViewItem,
+  FinanceOverviewFilterState,
+} from '../../types';
+
+import type {
+  FinanceOverviewDashboardQuery,
+  FinanceOverviewKpiCardDto,
+} from '#/api/finance/overview';
+
+import {
+  COST_COMPOSITION_COLOR_MAP,
+  INCOME_COMPOSITION_COLOR_MAP,
+} from './constants';
+
+const currencyFormatter = new Intl.NumberFormat('zh-CN', {
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+});
+
+const percentFormatter = new Intl.NumberFormat('zh-CN', {
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+});
+
+/** 货币格式化。 */
+export function formatCurrency(value: number) {
+  return `¥${currencyFormatter.format(value)}`;
+}
+
+/** 百分比格式化。 */
+export function formatPercent(value: number) {
+  return `${percentFormatter.format(value)}%`;
+}
+
+/** 变化率格式化（带正负号）。 */
+export function formatChangeRate(value: number) {
+  const sign = value > 0 ? '+' : '';
+  return `${sign}${percentFormatter.format(value)}%`;
+}
+
+/** 图表纵轴金额格式化。 */
+export function formatAxisAmount(value: number) {
+  if (Math.abs(value) >= 10_000) {
+    return `${percentFormatter.format(value / 10_000)}万`;
+  }
+  return currencyFormatter.format(value);
+}
+
+/** 生成查询参数。 */
+export function buildDashboardQuery(
+  filters: FinanceOverviewFilterState,
+): FinanceOverviewDashboardQuery {
+  if (filters.dimension === 'store') {
+    return {
+      dimension: filters.dimension,
+      storeId: filters.storeId,
+    };
+  }
+
+  return {
+    dimension: filters.dimension,
+  };
+}
+
+/** 计算 TOP 占比条宽度。 */
+export function calcTopProductBarWidth(
+  percentage: number,
+  maxPercentage: number,
+) {
+  if (maxPercentage <= 0) return 0;
+  return Math.round((percentage / maxPercentage) * 100);
+}
+
+/** 收入构成转换为视图结构。 */
+export function toIncomeCompositionViewItems(
+  items: Array<{
+    amount: number;
+    channel: string;
+    channelText: string;
+    percentage: number;
+  }>,
+): FinanceOverviewCompositionViewItem[] {
+  return items.map((item) => ({
+    key: item.channel,
+    name: item.channelText,
+    amount: item.amount,
+    percentage: item.percentage,
+    color: INCOME_COMPOSITION_COLOR_MAP[item.channel] ?? '#1677ff',
+  }));
+}
+
+/** 成本构成转换为视图结构。 */
+export function toCostCompositionViewItems(
+  items: Array<{
+    amount: number;
+    category: string;
+    categoryText: string;
+    percentage: number;
+  }>,
+): FinanceOverviewCompositionViewItem[] {
+  return items.map((item) => ({
+    key: item.category,
+    name: item.categoryText,
+    amount: item.amount,
+    percentage: item.percentage,
+    color: COST_COMPOSITION_COLOR_MAP[item.category] ?? '#94a3b8',
+  }));
+}
+
+/** 获取 KPI 趋势样式标识。 */
+export function resolveKpiTrendClass(card: FinanceOverviewKpiCardDto) {
+  if (card.trend === 'up') {
+    return 'is-up';
+  }
+
+  if (card.trend === 'down') {
+    return 'is-down';
+  }
+
+  return 'is-flat';
+}
+
+/** 获取 KPI 趋势图标。 */
+export function resolveKpiTrendIcon(card: FinanceOverviewKpiCardDto) {
+  if (card.trend === 'up') {
+    return 'lucide:trending-up';
+  }
+
+  if (card.trend === 'down') {
+    return 'lucide:trending-down';
+  }
+
+  return 'lucide:minus';
+}
--- a/apps/web-antd/src/views/finance/overview/composables/useFinanceOverviewPage.ts
+++ b/apps/web-antd/src/views/finance/overview/composables/useFinanceOverviewPage.ts
@@ -0,0 +1,249 @@
+/**
+ * 文件职责：财务概览页面状态编排。
+ */
+import type {
+  FinanceOverviewCompositionViewItem,
+  FinanceOverviewDashboardState,
+  FinanceOverviewFilterState,
+  FinanceOverviewTrendState,
+  OptionItem,
+} from '../types';
+
+import type {
+  FinanceOverviewDimension,
+  FinanceOverviewTrendRange,
+} from '#/api/finance/overview';
+import type { StoreListItemDto } from '#/api/store';
+
+import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
+
+import { useAccessStore } from '@vben/stores';
+
+import {
+  createDefaultFinanceOverviewDashboard,
+  DEFAULT_OVERVIEW_FILTER,
+  DEFAULT_OVERVIEW_TREND_STATE,
+  FINANCE_OVERVIEW_VIEW_PERMISSION,
+  OVERVIEW_DIMENSION_OPTIONS,
+} from './overview-page/constants';
+import { createDataActions } from './overview-page/data-actions';
+import {
+  toCostCompositionViewItems,
+  toIncomeCompositionViewItems,
+} from './overview-page/helpers';
+
+/** 创建财务概览页面组合状态。 */
+export function useFinanceOverviewPage() {
+  const accessStore = useAccessStore();
+
+  const stores = ref<StoreListItemDto[]>([]);
+  const filters = reactive<FinanceOverviewFilterState>({
+    ...DEFAULT_OVERVIEW_FILTER,
+  });
+  const trendState = reactive<FinanceOverviewTrendState>({
+    ...DEFAULT_OVERVIEW_TREND_STATE,
+  });
+  const dashboard = reactive<FinanceOverviewDashboardState>(
+    createDefaultFinanceOverviewDashboard(),
+  );
+
+  const isStoreLoading = ref(false);
+  const isDashboardLoading = ref(false);
+
+  const accessCodeSet = computed(
+    () => new Set((accessStore.accessCodes ?? []).map(String)),
+  );
+
+  const canView = computed(() =>
+    accessCodeSet.value.has(FINANCE_OVERVIEW_VIEW_PERMISSION),
+  );
+
+  const storeOptions = computed<OptionItem[]>(() =>
+    stores.value.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })),
+  );
+
+  const showStoreSelect = computed(() => filters.dimension === 'store');
+  const hasStore = computed(() => stores.value.length > 0);
+  const canQueryCurrentScope = computed(
+    () => filters.dimension === 'tenant' || Boolean(filters.storeId),
+  );
+
+  const incomeTrendPoints = computed(() =>
+    trendState.incomeRange === '7'
+      ? dashboard.incomeTrend.last7Days
+      : dashboard.incomeTrend.last30Days,
+  );
+
+  const profitTrendPoints = computed(() =>
+    trendState.profitRange === '7'
+      ? dashboard.profitTrend.last7Days
+      : dashboard.profitTrend.last30Days,
+  );
+
+  const incomeCompositionItems = computed<FinanceOverviewCompositionViewItem[]>(
+    () => toIncomeCompositionViewItems(dashboard.incomeComposition.items),
+  );
+
+  const costCompositionItems = computed<FinanceOverviewCompositionViewItem[]>(
+    () => toCostCompositionViewItems(dashboard.costComposition.items),
+  );
+
+  const topProductMaxPercentage = computed(() => {
+    if (dashboard.topProducts.items.length === 0) {
+      return 0;
+    }
+    return Math.max(
+      ...dashboard.topProducts.items.map((item) => item.percentage),
+    );
+  });
+
+  const dataActions = createDataActions({
+    stores,
+    filters,
+    dashboard,
+    isStoreLoading,
+    isDashboardLoading,
+  });
+
+  function ensureStoreSelection() {
+    if (filters.dimension !== 'store') {
+      return false;
+    }
+
+    if (filters.storeId) {
+      return false;
+    }
+
+    const firstStore = stores.value[0];
+    if (!firstStore) {
+      return false;
+    }
+
+    filters.storeId = firstStore.id;
+    return true;
+  }
+
+  async function loadByCurrentScope() {
+    if (!canView.value) {
+      return;
+    }
+
+    if (filters.dimension === 'store' && !filters.storeId) {
+      dataActions.clearDashboard();
+      return;
+    }
+
+    await dataActions.loadDashboard();
+  }
+
+  async function initPageData() {
+    if (!canView.value) {
+      stores.value = [];
+      filters.storeId = '';
+      dataActions.clearDashboard();
+      return;
+    }
+
+    await dataActions.loadStores();
+
+    if (ensureStoreSelection()) {
+      return;
+    }
+
+    await loadByCurrentScope();
+  }
+
+  function setDimension(value: FinanceOverviewDimension) {
+    filters.dimension = value;
+  }
+
+  function setStoreId(value: string) {
+    filters.storeId = value;
+  }
+
+  function setIncomeRange(value: FinanceOverviewTrendRange) {
+    trendState.incomeRange = value;
+  }
+
+  function setProfitRange(value: FinanceOverviewTrendRange) {
+    trendState.profitRange = value;
+  }
+
+  watch(
+    () => [filters.dimension, filters.storeId],
+    async () => {
+      if (!canView.value) {
+        return;
+      }
+
+      if (filters.dimension === 'store' && ensureStoreSelection()) {
+        return;
+      }
+
+      await loadByCurrentScope();
+    },
+  );
+
+  watch(
+    () => canView.value,
+    async (value, oldValue) => {
+      if (value === oldValue) {
+        return;
+      }
+
+      if (!value) {
+        stores.value = [];
+        filters.storeId = '';
+        dataActions.clearDashboard();
+        return;
+      }
+
+      await initPageData();
+    },
+  );
+
+  onMounted(async () => {
+    await initPageData();
+  });
+
+  onActivated(() => {
+    if (!canView.value) {
+      return;
+    }
+
+    if (stores.value.length === 0) {
+      void initPageData();
+      return;
+    }
+
+    if (!showStoreSelect.value || filters.storeId) {
+      void loadByCurrentScope();
+    }
+  });
+
+  return {
+    canQueryCurrentScope,
+    canView,
+    costCompositionItems,
+    dashboard,
+    hasStore,
+    incomeCompositionItems,
+    incomeTrendPoints,
+    isDashboardLoading,
+    isStoreLoading,
+    OVERVIEW_DIMENSION_OPTIONS,
+    profitTrendPoints,
+    showStoreSelect,
+    storeOptions,
+    topProductMaxPercentage,
+    trendState,
+    filters,
+    setDimension,
+    setStoreId,
+    setIncomeRange,
+    setProfitRange,
+  };
+}
--- a/apps/web-antd/src/views/finance/overview/index.vue
+++ b/apps/web-antd/src/views/finance/overview/index.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+/**
+ * 文件职责：财务概览页面入口编排。
+ */
+import { Page } from '@vben/common-ui';
+
+import { Empty, Spin } from 'ant-design-vue';
+
+import OverviewCompositionCard from './components/OverviewCompositionCard.vue';
+import OverviewIncomeTrendCard from './components/OverviewIncomeTrendCard.vue';
+import OverviewKpiRow from './components/OverviewKpiRow.vue';
+import OverviewProfitTrendCard from './components/OverviewProfitTrendCard.vue';
+import OverviewToolbar from './components/OverviewToolbar.vue';
+import OverviewTopProductsCard from './components/OverviewTopProductsCard.vue';
+import { useFinanceOverviewPage } from './composables/useFinanceOverviewPage';
+
+const {
+  canQueryCurrentScope,
+  canView,
+  costCompositionItems,
+  dashboard,
+  filters,
+  hasStore,
+  incomeCompositionItems,
+  incomeTrendPoints,
+  isDashboardLoading,
+  isStoreLoading,
+  OVERVIEW_DIMENSION_OPTIONS,
+  profitTrendPoints,
+  setDimension,
+  setIncomeRange,
+  setProfitRange,
+  setStoreId,
+  showStoreSelect,
+  storeOptions,
+  topProductMaxPercentage,
+  trendState,
+} = useFinanceOverviewPage();
+</script>
+
+<template>
+  <Page title="财务概览" content-class="page-finance-overview">
+    <div class="fo-page">
+      <OverviewToolbar
+        :dimension="filters.dimension"
+        :dimension-options="OVERVIEW_DIMENSION_OPTIONS"
+        :show-store-select="showStoreSelect"
+        :store-id="filters.storeId"
+        :store-options="storeOptions"
+        :is-store-loading="isStoreLoading"
+        @update:dimension="setDimension"
+        @update:store-id="setStoreId"
+      />
+
+      <Empty v-if="!canView" description="暂无财务概览页面访问权限" />
+
+      <div v-else-if="showStoreSelect && !hasStore" class="fo-empty">
+        <Empty description="暂无门店，请先创建门店" />
+      </div>
+
+      <div v-else-if="!canQueryCurrentScope" class="fo-empty">
+        <Empty description="请选择门店后查看数据" />
+      </div>
+
+      <Spin v-else :spinning="isDashboardLoading">
+        <OverviewKpiRow :dashboard="dashboard" />
+
+        <OverviewIncomeTrendCard
+          :points="incomeTrendPoints"
+          :range="trendState.incomeRange"
+          @update:range="setIncomeRange"
+        />
+
+        <div class="fo-two-col">
+          <OverviewCompositionCard
+            title="收入构成"
+            total-label="总实收"
+            :total-amount="dashboard.incomeComposition.totalAmount"
+            :items="incomeCompositionItems"
+          />
+
+          <OverviewCompositionCard
+            title="成本占比"
+            total-label="总成本"
+            :total-amount="dashboard.costComposition.totalAmount"
+            :items="costCompositionItems"
+          />
+        </div>
+
+        <OverviewProfitTrendCard
+          :points="profitTrendPoints"
+          :range="trendState.profitRange"
+          @update:range="setProfitRange"
+        />
+
+        <OverviewTopProductsCard
+          :items="dashboard.topProducts.items"
+          :period-days="dashboard.topProducts.periodDays"
+          :max-percentage="topProductMaxPercentage"
+        />
+      </Spin>
+    </div>
+  </Page>
+</template>
+
+<style lang="less">
+@import './styles/index.less';
+</style>
--- a/apps/web-antd/src/views/finance/overview/styles/base.less
+++ b/apps/web-antd/src/views/finance/overview/styles/base.less
@@ -0,0 +1,54 @@
+/**
+ * 文件职责：财务概览页面基础样式。
+ */
+.page-finance-overview {
+  .ant-card {
+    border: 1px solid #f0f0f0;
+    border-radius: 10px;
+  }
+}
+
+.fo-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.fo-empty {
+  padding: 36px 0;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+}
+
+.fo-page > * {
+  animation: fo-fade-in 0.38s ease both;
+}
+
+.fo-page > *:nth-child(2) {
+  animation-delay: 0.04s;
+}
+
+.fo-page > *:nth-child(3) {
+  animation-delay: 0.08s;
+}
+
+.fo-page > *:nth-child(4) {
+  animation-delay: 0.12s;
+}
+
+.fo-page > *:nth-child(5) {
+  animation-delay: 0.16s;
+}
+
+@keyframes fo-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
--- a/apps/web-antd/src/views/finance/overview/styles/charts.less
+++ b/apps/web-antd/src/views/finance/overview/styles/charts.less
@@ -0,0 +1,125 @@
+/**
+ * 文件职责：财务概览图表区域样式。
+ */
+.fo-trend-chart,
+.fo-profit-chart {
+  height: 260px;
+}
+
+.fo-composition-wrap {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.fo-composition-chart-wrap {
+  position: relative;
+  flex-shrink: 0;
+  width: 220px;
+  height: 220px;
+}
+
+.fo-composition-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.fo-composition-center {
+  position: absolute;
+  inset: 71px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  pointer-events: none;
+}
+
+.fo-composition-center-value {
+  font-size: 14px;
+  font-weight: 700;
+  color: rgb(0 0 0 / 88%);
+}
+
+.fo-composition-center-label {
+  font-size: 11px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.fo-composition-legend {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.fo-composition-legend-item {
+  display: grid;
+  grid-template-columns: 10px 1fr auto auto;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+}
+
+.fo-composition-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+.fo-composition-name {
+  color: rgb(0 0 0 / 88%);
+}
+
+.fo-composition-percent {
+  min-width: 54px;
+  color: rgb(0 0 0 / 55%);
+  text-align: right;
+}
+
+.fo-composition-amount {
+  min-width: 88px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+  text-align: right;
+}
+
+.fo-profit-legend {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.fo-profit-legend-item {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 12px;
+  color: rgb(0 0 0 / 65%);
+}
+
+.fo-profit-legend-line {
+  display: inline-flex;
+  width: 20px;
+  height: 3px;
+  border-radius: 3px;
+}
+
+.fo-profit-legend-line.is-revenue {
+  background: #1677ff;
+}
+
+.fo-profit-legend-line.is-cost {
+  background: repeating-linear-gradient(
+    90deg,
+    #ef4444 0,
+    #ef4444 6px,
+    rgb(239 68 68 / 10%) 6px,
+    rgb(239 68 68 / 10%) 9px
+  );
+}
+
+.fo-profit-legend-line.is-net {
+  background: #22c55e;
+}
--- a/apps/web-antd/src/views/finance/overview/styles/index.less
+++ b/apps/web-antd/src/views/finance/overview/styles/index.less
@@ -0,0 +1,9 @@
+/**
+ * 文件职责：财务概览页面样式聚合入口。
+ */
+@import './base.less';
+@import './layout.less';
+@import './kpi.less';
+@import './charts.less';
+@import './table.less';
+@import './responsive.less';
--- a/apps/web-antd/src/views/finance/overview/styles/kpi.less
+++ b/apps/web-antd/src/views/finance/overview/styles/kpi.less
@@ -0,0 +1,97 @@
+/**
+ * 文件职责：财务概览 KPI 卡片样式。
+ */
+.fo-kpi-row {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.fo-kpi-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px 18px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
+  transition: all 0.2s ease;
+}
+
+.fo-kpi-card:hover {
+  box-shadow: 0 8px 16px rgb(15 23 42 / 10%);
+  transform: translateY(-1px);
+}
+
+.fo-kpi-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.fo-kpi-label {
+  font-size: 13px;
+  color: rgb(0 0 0 / 60%);
+}
+
+.fo-kpi-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  font-size: 18px;
+  border-radius: 8px;
+}
+
+.fo-kpi-card.is-blue .fo-kpi-icon {
+  color: #1677ff;
+  background: #e6f4ff;
+}
+
+.fo-kpi-card.is-green .fo-kpi-icon {
+  color: #16a34a;
+  background: #f0fdf4;
+}
+
+.fo-kpi-card.is-red .fo-kpi-icon {
+  color: #ef4444;
+  background: #fef2f2;
+}
+
+.fo-kpi-card.is-purple .fo-kpi-icon {
+  color: #7c3aed;
+  background: #f5f3ff;
+}
+
+.fo-kpi-card.is-orange .fo-kpi-icon {
+  color: #f59e0b;
+  background: #fffbeb;
+}
+
+.fo-kpi-value {
+  font-size: 25px;
+  font-weight: 800;
+  color: rgb(0 0 0 / 88%);
+  letter-spacing: -0.2px;
+}
+
+.fo-kpi-change {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  font-size: 12px;
+}
+
+.fo-kpi-change.is-up {
+  color: #16a34a;
+}
+
+.fo-kpi-change.is-down {
+  color: #ef4444;
+}
+
+.fo-kpi-change.is-flat {
+  color: rgb(0 0 0 / 45%);
+}
--- a/apps/web-antd/src/views/finance/overview/styles/layout.less
+++ b/apps/web-antd/src/views/finance/overview/styles/layout.less
@@ -0,0 +1,94 @@
+/**
+ * 文件职责：财务概览页面布局与工具条样式。
+ */
+.fo-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+}
+
+.fo-toolbar-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: rgb(0 0 0 / 88%);
+}
+
+.fo-toolbar-right {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.fo-dimension-segmented {
+  .ant-segmented-item {
+    min-width: 92px;
+    text-align: center;
+  }
+}
+
+.fo-store-select {
+  width: 230px;
+}
+
+.fo-section-card {
+  padding: 18px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
+}
+
+.fo-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.fo-section-title {
+  padding-left: 10px;
+  margin-bottom: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+  border-left: 3px solid #1677ff;
+}
+
+.fo-section-head .fo-section-title {
+  margin-bottom: 0;
+}
+
+.fo-pills {
+  display: flex;
+  gap: 6px;
+}
+
+.fo-pill {
+  padding: 4px 14px;
+  font-size: 12px;
+  color: rgb(0 0 0 / 65%);
+  cursor: pointer;
+  background: #f3f4f6;
+  border: none;
+  border-radius: 99px;
+  transition: all 0.2s ease;
+}
+
+.fo-pill.is-active {
+  color: #fff;
+  background: #1677ff;
+}
+
+.fo-two-col {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
--- a/apps/web-antd/src/views/finance/overview/styles/responsive.less
+++ b/apps/web-antd/src/views/finance/overview/styles/responsive.less
@@ -0,0 +1,66 @@
+/**
+ * 文件职责：财务概览页面响应式样式。
+ */
+.page-finance-overview {
+  @media (max-width: 1200px) {
+    .fo-kpi-row {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 992px) {
+    .fo-two-col {
+      grid-template-columns: 1fr;
+    }
+
+    .fo-kpi-row {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 768px) {
+    .fo-toolbar {
+      align-items: stretch;
+    }
+
+    .fo-toolbar-right {
+      justify-content: flex-start;
+    }
+
+    .fo-store-select {
+      width: 100%;
+    }
+
+    .fo-kpi-row {
+      grid-template-columns: 1fr;
+    }
+
+    .fo-composition-wrap {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .fo-composition-chart-wrap {
+      width: 180px;
+      height: 180px;
+    }
+
+    .fo-composition-center {
+      inset: 56px;
+    }
+
+    .fo-profit-legend {
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+
+    .fo-top-table {
+      .ant-table-thead > tr > th:nth-child(3),
+      .ant-table-thead > tr > th:nth-child(4),
+      .ant-table-tbody > tr > td:nth-child(3),
+      .ant-table-tbody > tr > td:nth-child(4) {
+        display: none;
+      }
+    }
+  }
+}
--- a/apps/web-antd/src/views/finance/overview/styles/table.less
+++ b/apps/web-antd/src/views/finance/overview/styles/table.less
@@ -0,0 +1,90 @@
+/**
+ * 文件职责：财务概览 TOP 排行样式。
+ */
+.fo-top-card {
+  padding-bottom: 10px;
+}
+
+.fo-top-table {
+  .ant-table {
+    overflow: hidden;
+    border: 1px solid #f0f0f0;
+    border-radius: 10px;
+  }
+
+  .ant-table-thead > tr > th {
+    font-size: 12px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 55%);
+    background: #fafafa;
+  }
+
+  .ant-table-tbody > tr > td {
+    font-size: 13px;
+  }
+
+  .ant-table-tbody > tr:hover > td {
+    background: #f8fbff;
+  }
+}
+
+.fo-rank-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  border-radius: 4px;
+}
+
+.fo-rank-num.is-top1 {
+  background: linear-gradient(135deg, #ef4444, #f97316);
+}
+
+.fo-rank-num.is-top2 {
+  background: linear-gradient(135deg, #f59e0b, #fbbf24);
+}
+
+.fo-rank-num.is-top3 {
+  background: linear-gradient(135deg, #1677ff, #69b1ff);
+}
+
+.fo-rank-num.is-normal {
+  color: #4b5563;
+  background: #e5e7eb;
+}
+
+.fo-revenue-text {
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+}
+
+.fo-percent-wrap {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.fo-percent-track {
+  width: 118px;
+  height: 6px;
+  overflow: hidden;
+  background: #e5e7eb;
+  border-radius: 3px;
+}
+
+.fo-percent-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #1677ff, #69b1ff);
+  border-radius: 3px;
+}
+
+.fo-percent-text {
+  min-width: 44px;
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+  text-align: right;
+}
--- a/apps/web-antd/src/views/finance/overview/types.ts
+++ b/apps/web-antd/src/views/finance/overview/types.ts
@@ -0,0 +1,38 @@
+/**
+ * 文件职责：财务概览页面本地类型定义。
+ */
+import type {
+  FinanceOverviewDashboardDto,
+  FinanceOverviewDimension,
+  FinanceOverviewTrendRange,
+} from '#/api/finance/overview';
+
+/** 选项项。 */
+export interface OptionItem {
+  label: string;
+  value: string;
+}
+
+/** 页面筛选状态。 */
+export interface FinanceOverviewFilterState {
+  dimension: FinanceOverviewDimension;
+  storeId: string;
+}
+
+/** 图表构成视图项。 */
+export interface FinanceOverviewCompositionViewItem {
+  amount: number;
+  color: string;
+  key: string;
+  name: string;
+  percentage: number;
+}
+
+/** 概览页面数据状态。 */
+export type FinanceOverviewDashboardState = FinanceOverviewDashboardDto;
+
+/** 趋势切换状态。 */
+export interface FinanceOverviewTrendState {
+  incomeRange: FinanceOverviewTrendRange;
+  profitRange: FinanceOverviewTrendRange;
+}
--- a/apps/web-antd/src/views/finance/report/components/ReportBatchExportModal.vue
+++ b/apps/web-antd/src/views/finance/report/components/ReportBatchExportModal.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+/**
+ * 文件职责：经营报表批量导出确认弹窗。
+ */
+import type { FinanceBusinessReportPeriodType } from '#/api/finance';
+
+import { computed } from 'vue';
+
+import { Modal } from 'ant-design-vue';
+
+import { resolvePeriodTypeLabel } from '../composables/report-page/helpers';
+
+interface PaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+interface Props {
+  currentPageCount: number;
+  open: boolean;
+  pagination: PaginationState;
+  periodType: FinanceBusinessReportPeriodType;
+  selectedStoreName: string;
+  submitting: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'confirm'): void;
+}>();
+
+const periodText = computed(() => resolvePeriodTypeLabel(props.periodType));
+const pageSizeText = computed(() => `${props.pagination.pageSize} 条/页`);
+
+const pageRangeText = computed(() => {
+  const pageSize = Math.max(1, Number(props.pagination.pageSize || 20));
+  const page = Math.max(1, Number(props.pagination.page || 1));
+  const currentCount = Math.max(0, Number(props.currentPageCount || 0));
+
+  if (currentCount === 0) {
+    return '当前页暂无数据';
+  }
+
+  const start = (page - 1) * pageSize + 1;
+  const end = start + currentCount - 1;
+  return `${start}-${end}`;
+});
+</script>
+
+<template>
+  <Modal
+    :open="props.open"
+    title="批量导出经营报表"
+    ok-text="确认导出"
+    cancel-text="取消"
+    :confirm-loading="props.submitting"
+    @ok="emit('confirm')"
+    @cancel="emit('close')"
+  >
+    <div class="frp-batch-modal">
+      <p class="frp-batch-desc">
+        将按当前门店、当前周期和当前分页范围导出 ZIP 文件（包含 PDF 与 Excel）。
+      </p>
+
+      <div class="frp-batch-list">
+        <div class="frp-batch-line">
+          <span class="frp-batch-label">门店</span>
+          <span class="frp-batch-value">{{ props.selectedStoreName }}</span>
+        </div>
+        <div class="frp-batch-line">
+          <span class="frp-batch-label">报表周期</span>
+          <span class="frp-batch-value">{{ periodText }}</span>
+        </div>
+        <div class="frp-batch-line">
+          <span class="frp-batch-label">当前页</span>
+          <span class="frp-batch-value">第 {{ props.pagination.page }} 页</span>
+        </div>
+        <div class="frp-batch-line">
+          <span class="frp-batch-label">分页大小</span>
+          <span class="frp-batch-value">{{ pageSizeText }}</span>
+        </div>
+        <div class="frp-batch-line">
+          <span class="frp-batch-label">导出范围</span>
+          <span class="frp-batch-value">{{ pageRangeText }}</span>
+        </div>
+        <div class="frp-batch-line is-total">
+          <span class="frp-batch-label">总报表数</span>
+          <span class="frp-batch-value">{{ props.pagination.total }} 条</span>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
--- a/apps/web-antd/src/views/finance/report/components/ReportPreviewDrawer.vue
+++ b/apps/web-antd/src/views/finance/report/components/ReportPreviewDrawer.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+/**
+ * 文件职责：经营报表预览抽屉。
+ */
+import type { FinanceBusinessReportDetailDto } from '#/api/finance';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Drawer, Empty, Spin } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  formatPercent,
+  formatSignedRate,
+} from '../composables/report-page/helpers';
+
+interface Props {
+  canExport: boolean;
+  detail: FinanceBusinessReportDetailDto | null;
+  isDownloadingExcel: boolean;
+  isDownloadingPdf: boolean;
+  loading: boolean;
+  open: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'downloadExcel'): void;
+  (event: 'downloadPdf'): void;
+}>();
+
+const drawerTitle = computed(() => props.detail?.title || '经营报表预览');
+
+const canDownload = computed(
+  () => props.canExport && Boolean(props.detail?.reportId),
+);
+
+const incomeIconMap: Record<string, { icon: string; tone: string }> = {
+  delivery: { icon: 'lucide:bike', tone: 'primary' },
+  dine_in: { icon: 'lucide:utensils', tone: 'warning' },
+  pickup: { icon: 'lucide:shopping-bag', tone: 'success' },
+};
+
+const costIconMap: Record<string, { icon: string; tone: string }> = {
+  fixed_expense: { icon: 'lucide:building-2', tone: 'muted' },
+  food_material: { icon: 'lucide:carrot', tone: 'warning' },
+  labor: { icon: 'lucide:users', tone: 'primary' },
+  packaging_consumable: { icon: 'lucide:package', tone: 'success' },
+};
+
+function resolveBreakdownMeta(type: 'cost' | 'income', key: string) {
+  const map = type === 'income' ? incomeIconMap : costIconMap;
+  return map[key] || { icon: 'lucide:circle', tone: 'muted' };
+}
+
+function isPositiveMetric(key: string) {
+  return key !== 'refund_rate';
+}
+
+function resolveKpiChangeTone(key: string, value: number) {
+  if (!Number.isFinite(value) || value === 0) {
+    return 'neutral';
+  }
+
+  const increaseGood = isPositiveMetric(key);
+  const isGood = (value > 0 && increaseGood) || (value < 0 && !increaseGood);
+  return isGood ? 'positive' : 'negative';
+}
+
+function formatKpiChangeText(prefix: '同比' | '环比', value: number) {
+  return `${prefix} ${formatSignedRate(value)}`;
+}
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    class="frp-preview-drawer"
+    width="560"
+    :title="drawerTitle"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loading">
+      <template v-if="props.detail">
+        <div class="frp-section">
+          <div class="frp-section-hd">关键指标</div>
+          <div class="frp-kpi-grid">
+            <div
+              v-for="item in props.detail.kpis"
+              :key="`kpi-${item.key}`"
+              class="frp-kpi-item"
+            >
+              <div class="frp-kpi-label">{{ item.label }}</div>
+              <div
+                class="frp-kpi-val"
+                :class="{ 'is-profit': item.key === 'net_profit' }"
+              >
+                {{ item.valueText }}
+              </div>
+              <div class="frp-kpi-change">
+                <span
+                  :class="`frp-kpi-change-${resolveKpiChangeTone(item.key, item.yoyChangeRate)}`"
+                >
+                  {{ formatKpiChangeText('同比', item.yoyChangeRate) }}
+                </span>
+                <span
+                  :class="`frp-kpi-change-${resolveKpiChangeTone(item.key, item.momChangeRate)}`"
+                >
+                  {{ formatKpiChangeText('环比', item.momChangeRate) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="frp-divider"></div>
+
+        <div class="frp-section">
+          <div class="frp-section-hd">收入明细（按渠道）</div>
+          <div
+            v-for="item in props.detail.incomeBreakdowns"
+            :key="`income-${item.key}`"
+            class="frp-detail-row"
+          >
+            <span class="frp-detail-name">
+              <IconifyIcon
+                :icon="resolveBreakdownMeta('income', item.key).icon"
+                class="frp-breakdown-icon"
+                :class="`is-${resolveBreakdownMeta('income', item.key).tone}`"
+              />
+              {{ item.label }}
+            </span>
+            <div class="frp-detail-right">
+              <span class="frp-detail-pct">{{
+                formatPercent(item.ratioPercent)
+              }}</span>
+              <span class="frp-detail-amount">{{
+                formatCurrency(item.amount)
+              }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="frp-divider"></div>
+
+        <div class="frp-section">
+          <div class="frp-section-hd">成本明细（按类别）</div>
+          <div
+            v-for="item in props.detail.costBreakdowns"
+            :key="`cost-${item.key}`"
+            class="frp-detail-row"
+          >
+            <span class="frp-detail-name">
+              <IconifyIcon
+                :icon="resolveBreakdownMeta('cost', item.key).icon"
+                class="frp-breakdown-icon"
+                :class="`is-${resolveBreakdownMeta('cost', item.key).tone}`"
+              />
+              {{ item.label }}
+            </span>
+            <div class="frp-detail-right">
+              <span class="frp-detail-pct">{{
+                formatPercent(item.ratioPercent)
+              }}</span>
+              <span class="frp-detail-amount">{{
+                formatCurrency(item.amount)
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <Empty v-else description="暂无报表详情" />
+    </Spin>
+
+    <template #footer>
+      <div class="frp-drawer-footer">
+        <Button @click="emit('close')">关闭</Button>
+        <Button
+          type="primary"
+          class="frp-drawer-btn"
+          :disabled="!canDownload"
+          :loading="props.isDownloadingPdf"
+          @click="emit('downloadPdf')"
+        >
+          <template #icon>
+            <IconifyIcon icon="lucide:file-text" />
+          </template>
+          下载PDF
+        </Button>
+        <Button
+          class="frp-drawer-btn"
+          :disabled="!canDownload"
+          :loading="props.isDownloadingExcel"
+          @click="emit('downloadExcel')"
+        >
+          <template #icon>
+            <IconifyIcon icon="lucide:table" />
+          </template>
+          下载Excel
+        </Button>
+      </div>
+    </template>
+  </Drawer>
+</template>
--- a/apps/web-antd/src/views/finance/report/components/ReportTableCard.vue
+++ b/apps/web-antd/src/views/finance/report/components/ReportTableCard.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
+
+/**
+ * 文件职责：经营报表列表表格与分页。
+ */
+import type { FinanceBusinessReportListItemDto } from '#/api/finance';
+
+import { h } from 'vue';
+
+import { Button, Table, Tag } from 'ant-design-vue';
+
+import {
+  formatAverageOrderValue,
+  formatCurrency,
+  formatOrderCount,
+  formatPercent,
+  resolveReportStatusTagColor,
+} from '../composables/report-page/helpers';
+
+interface PaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+interface Props {
+  canExport: boolean;
+  loading: boolean;
+  pagination: PaginationState;
+  rows: FinanceBusinessReportListItemDto[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'downloadExcel', reportId: string): void;
+  (event: 'downloadPdf', reportId: string): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+  (event: 'preview', reportId: string): void;
+}>();
+
+const columns: TableProps['columns'] = [
+  {
+    title: '日期',
+    dataIndex: 'dateText',
+    width: 160,
+    customRender: ({ text }) => h('span', { class: 'frp-date' }, String(text)),
+  },
+  {
+    title: '营业额',
+    dataIndex: 'revenueAmount',
+    width: 130,
+    align: 'right',
+    customRender: ({ record }) =>
+      h('span', { class: 'frp-amount' }, formatCurrency(record.revenueAmount)),
+  },
+  {
+    title: '订单数',
+    dataIndex: 'orderCount',
+    width: 100,
+    align: 'right',
+    customRender: ({ record }) =>
+      h('span', { class: 'frp-value' }, formatOrderCount(record.orderCount)),
+  },
+  {
+    title: '客单价',
+    dataIndex: 'averageOrderValue',
+    width: 120,
+    align: 'right',
+    customRender: ({ record }) =>
+      h(
+        'span',
+        { class: 'frp-value' },
+        formatAverageOrderValue(record.averageOrderValue),
+      ),
+  },
+  {
+    title: '退款率',
+    dataIndex: 'refundRatePercent',
+    width: 100,
+    align: 'right',
+    customRender: ({ record }) =>
+      h(
+        'span',
+        { class: 'frp-value' },
+        formatPercent(record.refundRatePercent),
+      ),
+  },
+  {
+    title: '成本总额',
+    dataIndex: 'costTotalAmount',
+    width: 130,
+    align: 'right',
+    customRender: ({ record }) =>
+      h('span', { class: 'frp-value' }, formatCurrency(record.costTotalAmount)),
+  },
+  {
+    title: '净利润',
+    dataIndex: 'netProfitAmount',
+    width: 130,
+    align: 'right',
+    customRender: ({ record }) => {
+      const amount = Number(record.netProfitAmount || 0);
+      return h(
+        'span',
+        {
+          class: ['frp-amount', amount >= 0 ? 'is-profit' : 'is-loss'],
+        },
+        formatCurrency(amount),
+      );
+    },
+  },
+  {
+    title: '利润率',
+    dataIndex: 'profitRatePercent',
+    width: 100,
+    align: 'right',
+    customRender: ({ record }) =>
+      h(
+        'span',
+        { class: 'frp-value' },
+        formatPercent(record.profitRatePercent),
+      ),
+  },
+  {
+    title: '状态',
+    dataIndex: 'statusText',
+    width: 96,
+    customRender: ({ record }) =>
+      h(
+        Tag,
+        {
+          color: resolveReportStatusTagColor(record.status),
+        },
+        () => String(record.statusText || '--'),
+      ),
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 210,
+    customRender: ({ record }) => {
+      const reportId = String(record.reportId || '');
+      const canDownload = props.canExport && Boolean(record.canDownload);
+
+      return h('div', { class: 'frp-action-group' }, [
+        h(
+          Button,
+          {
+            type: 'link',
+            class: 'frp-action-link',
+            onClick: () => emit('preview', reportId),
+          },
+          () => '预览',
+        ),
+        h(
+          Button,
+          {
+            type: 'link',
+            class: 'frp-action-link',
+            disabled: !canDownload,
+            onClick: () => emit('downloadPdf', reportId),
+          },
+          () => '下载PDF',
+        ),
+        h(
+          Button,
+          {
+            type: 'link',
+            class: 'frp-action-link',
+            disabled: !canDownload,
+            onClick: () => emit('downloadExcel', reportId),
+          },
+          () => '下载Excel',
+        ),
+      ]);
+    },
+  },
+];
+
+function handleTableChange(next: TablePaginationConfig) {
+  emit('pageChange', Number(next.current || 1), Number(next.pageSize || 20));
+}
+</script>
+
+<template>
+  <div class="frp-table-card">
+    <Table
+      row-key="reportId"
+      :columns="columns"
+      :data-source="props.rows"
+      :loading="props.loading"
+      :pagination="{
+        current: props.pagination.page,
+        pageSize: props.pagination.pageSize,
+        total: props.pagination.total,
+        showSizeChanger: true,
+        pageSizeOptions: ['20', '50', '100'],
+        showTotal: (total: number) => `共 ${total} 条`,
+      }"
+      @change="handleTableChange"
+    />
+  </div>
+</template>
--- a/apps/web-antd/src/views/finance/report/components/ReportToolbar.vue
+++ b/apps/web-antd/src/views/finance/report/components/ReportToolbar.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { OptionItem } from '../types';
+
+/**
+ * 文件职责：经营报表工具栏（周期切换、门店选择、批量导出）。
+ */
+import type { FinanceBusinessReportPeriodType } from '#/api/finance';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Segmented, Select } from 'ant-design-vue';
+
+import { REPORT_PERIOD_OPTIONS } from '../composables/report-page/constants';
+
+interface Props {
+  canExport: boolean;
+  isBatchExporting: boolean;
+  isStoreLoading: boolean;
+  periodType: FinanceBusinessReportPeriodType;
+  selectedStoreId: string;
+  storeOptions: OptionItem[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'batchExport'): void;
+  (event: 'update:periodType', value: FinanceBusinessReportPeriodType): void;
+  (event: 'update:selectedStoreId', value: string): void;
+}>();
+
+function handleStoreChange(value: unknown) {
+  if (typeof value === 'number' || typeof value === 'string') {
+    emit('update:selectedStoreId', String(value));
+    return;
+  }
+
+  emit('update:selectedStoreId', '');
+}
+
+function handlePeriodChange(value: unknown) {
+  const period = String(value || 'daily') as FinanceBusinessReportPeriodType;
+  emit('update:periodType', period);
+}
+</script>
+
+<template>
+  <div class="frp-toolbar">
+    <Segmented
+      class="frp-period-segment"
+      :value="props.periodType"
+      :options="REPORT_PERIOD_OPTIONS"
+      @update:value="(value) => handlePeriodChange(value)"
+    />
+
+    <Select
+      class="frp-store-select"
+      :value="props.selectedStoreId"
+      placeholder="选择门店"
+      :loading="props.isStoreLoading"
+      :options="props.storeOptions"
+      :disabled="props.isStoreLoading || props.storeOptions.length === 0"
+      @update:value="(value) => handleStoreChange(value)"
+    />
+
+    <div class="frp-toolbar-right">
+      <Button
+        class="frp-batch-export-btn"
+        :disabled="!props.canExport || !props.selectedStoreId"
+        :loading="props.isBatchExporting"
+        @click="emit('batchExport')"
+      >
+        <template #icon>
+          <IconifyIcon icon="lucide:download" />
+        </template>
+        批量导出
+      </Button>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/finance/report/composables/report-page/constants.ts
+++ b/apps/web-antd/src/views/finance/report/composables/report-page/constants.ts
@@ -0,0 +1,32 @@
+import type {
+  FinanceBusinessReportPaginationState,
+  FinanceBusinessReportPeriodOption,
+} from '../../types';
+
+/**
+ * 文件职责：经营报表页面常量与默认状态定义。
+ */
+
+/** 经营报表查看权限。 */
+export const FINANCE_REPORT_VIEW_PERMISSION = 'tenant:statistics:report:view';
+
+/** 经营报表导出权限。 */
+export const FINANCE_REPORT_EXPORT_PERMISSION =
+  'tenant:statistics:report:export';
+
+/** 报表周期选项。 */
+export const REPORT_PERIOD_OPTIONS: FinanceBusinessReportPeriodOption[] = [
+  { label: '日报', value: 'daily' },
+  { label: '周报', value: 'weekly' },
+  { label: '月报', value: 'monthly' },
+];
+
+/** 默认报表周期。 */
+export const DEFAULT_PERIOD_TYPE = 'daily' as const;
+
+/** 默认分页状态。 */
+export const DEFAULT_PAGINATION: FinanceBusinessReportPaginationState = {
+  page: 1,
+  pageSize: 20,
+  total: 0,
+};
--- a/apps/web-antd/src/views/finance/report/composables/report-page/data-actions.ts
+++ b/apps/web-antd/src/views/finance/report/composables/report-page/data-actions.ts
@@ -0,0 +1,84 @@
+import type { FinanceBusinessReportPaginationState } from '../../types';
+
+/**
+ * 文件职责：经营报表页面数据加载动作。
+ */
+import type { FinanceBusinessReportListItemDto } from '#/api/finance';
+import type { StoreListItemDto } from '#/api/store';
+
+import { getFinanceBusinessReportListApi } from '#/api/finance';
+import { getStoreListApi } from '#/api/store';
+
+import { buildReportListQueryPayload } from './helpers';
+
+interface DataActionOptions {
+  isListLoading: { value: boolean };
+  isStoreLoading: { value: boolean };
+  pagination: FinanceBusinessReportPaginationState;
+  periodType: { value: 'daily' | 'monthly' | 'weekly' };
+  rows: { value: FinanceBusinessReportListItemDto[] };
+  selectedStoreId: { value: string };
+  stores: { value: StoreListItemDto[] };
+}
+
+/** 创建数据相关动作。 */
+export function createDataActions(options: DataActionOptions) {
+  function clearPageData() {
+    options.rows.value = [];
+    options.pagination.total = 0;
+  }
+
+  async function loadStores() {
+    options.isStoreLoading.value = true;
+    try {
+      const result = await getStoreListApi({ page: 1, pageSize: 200 });
+      options.stores.value = result.items;
+
+      if (result.items.length === 0) {
+        options.selectedStoreId.value = '';
+        clearPageData();
+        return;
+      }
+
+      const matched = result.items.some(
+        (item) => item.id === options.selectedStoreId.value,
+      );
+      if (!matched) {
+        options.selectedStoreId.value = result.items[0]?.id ?? '';
+      }
+    } finally {
+      options.isStoreLoading.value = false;
+    }
+  }
+
+  async function loadReportList() {
+    if (!options.selectedStoreId.value) {
+      clearPageData();
+      return;
+    }
+
+    options.isListLoading.value = true;
+    try {
+      const payload = buildReportListQueryPayload(
+        options.selectedStoreId.value,
+        options.periodType.value,
+        options.pagination.page,
+        options.pagination.pageSize,
+      );
+      const result = await getFinanceBusinessReportListApi(payload);
+
+      options.rows.value = result.items;
+      options.pagination.total = result.total;
+      options.pagination.page = result.page;
+      options.pagination.pageSize = result.pageSize;
+    } finally {
+      options.isListLoading.value = false;
+    }
+  }
+
+  return {
+    clearPageData,
+    loadReportList,
+    loadStores,
+  };
+}
--- a/apps/web-antd/src/views/finance/report/composables/report-page/detail-actions.ts
+++ b/apps/web-antd/src/views/finance/report/composables/report-page/detail-actions.ts
@@ -0,0 +1,136 @@
+/**
+ * 文件职责：经营报表预览抽屉与单条导出动作。
+ */
+import type { FinanceBusinessReportDetailDto } from '#/api/finance';
+
+import { message } from 'ant-design-vue';
+
+import {
+  exportFinanceBusinessReportExcelApi,
+  exportFinanceBusinessReportPdfApi,
+  getFinanceBusinessReportDetailApi,
+} from '#/api/finance';
+
+import { buildReportDetailQueryPayload, downloadBase64File } from './helpers';
+
+interface DetailActionOptions {
+  canExport: { value: boolean };
+  currentPreviewReportId: { value: string };
+  isDownloadingExcel: { value: boolean };
+  isDownloadingPdf: { value: boolean };
+  isPreviewDrawerOpen: { value: boolean };
+  isPreviewLoading: { value: boolean };
+  previewDetail: { value: FinanceBusinessReportDetailDto | null };
+  selectedStoreId: { value: string };
+}
+
+/** 创建预览与单条导出动作。 */
+export function createDetailActions(options: DetailActionOptions) {
+  function setPreviewDrawerOpen(value: boolean) {
+    options.isPreviewDrawerOpen.value = value;
+    if (!value) {
+      options.previewDetail.value = null;
+      options.currentPreviewReportId.value = '';
+    }
+  }
+
+  async function openPreview(reportId: string) {
+    if (!options.selectedStoreId.value || !reportId) {
+      return;
+    }
+
+    options.currentPreviewReportId.value = reportId;
+    options.isPreviewDrawerOpen.value = true;
+    options.previewDetail.value = null;
+    options.isPreviewLoading.value = true;
+    try {
+      const payload = buildReportDetailQueryPayload(
+        options.selectedStoreId.value,
+        reportId,
+      );
+      options.previewDetail.value =
+        await getFinanceBusinessReportDetailApi(payload);
+      options.currentPreviewReportId.value =
+        options.previewDetail.value.reportId || reportId;
+    } finally {
+      options.isPreviewLoading.value = false;
+    }
+  }
+
+  function resolveTargetReportId(reportId?: string) {
+    const explicit = String(reportId ?? '').trim();
+    if (explicit) {
+      return explicit;
+    }
+
+    const current = String(options.currentPreviewReportId.value || '').trim();
+    if (current) {
+      return current;
+    }
+
+    return String(options.previewDetail.value?.reportId ?? '').trim();
+  }
+
+  async function downloadPdf(reportId?: string) {
+    if (!options.canExport.value || !options.selectedStoreId.value) {
+      return;
+    }
+
+    const targetReportId = resolveTargetReportId(reportId);
+    if (!targetReportId) {
+      return;
+    }
+
+    options.isDownloadingPdf.value = true;
+    try {
+      const payload = buildReportDetailQueryPayload(
+        options.selectedStoreId.value,
+        targetReportId,
+      );
+      const result = await exportFinanceBusinessReportPdfApi(payload);
+      downloadBase64File(
+        result.fileName,
+        result.fileContentBase64,
+        'application/pdf',
+      );
+      message.success('PDF 下载成功');
+    } finally {
+      options.isDownloadingPdf.value = false;
+    }
+  }
+
+  async function downloadExcel(reportId?: string) {
+    if (!options.canExport.value || !options.selectedStoreId.value) {
+      return;
+    }
+
+    const targetReportId = resolveTargetReportId(reportId);
+    if (!targetReportId) {
+      return;
+    }
+
+    options.isDownloadingExcel.value = true;
+    try {
+      const payload = buildReportDetailQueryPayload(
+        options.selectedStoreId.value,
+        targetReportId,
+      );
+      const result = await exportFinanceBusinessReportExcelApi(payload);
+      downloadBase64File(
+        result.fileName,
+        result.fileContentBase64,
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      );
+      message.success('Excel 下载成功');
+    } finally {
+      options.isDownloadingExcel.value = false;
+    }
+  }
+
+  return {
+    downloadExcel,
+    downloadPdf,
+    openPreview,
+    setPreviewDrawerOpen,
+  };
+}
--- a/apps/web-antd/src/views/finance/report/composables/report-page/export-actions.ts
+++ b/apps/web-antd/src/views/finance/report/composables/report-page/export-actions.ts
@@ -0,0 +1,71 @@
+import type { FinanceBusinessReportPaginationState } from '../../types';
+
+/**
+ * 文件职责：经营报表批量导出弹窗与导出动作。
+ */
+import type { FinanceBusinessReportPeriodType } from '#/api/finance';
+
+import { message } from 'ant-design-vue';
+
+import { exportFinanceBusinessReportBatchApi } from '#/api/finance';
+
+import {
+  buildReportBatchExportQueryPayload,
+  downloadBase64File,
+} from './helpers';
+
+interface ExportActionOptions {
+  canExport: { value: boolean };
+  isBatchExportModalOpen: { value: boolean };
+  isBatchExporting: { value: boolean };
+  pagination: FinanceBusinessReportPaginationState;
+  periodType: { value: FinanceBusinessReportPeriodType };
+  selectedStoreId: { value: string };
+}
+
+/** 创建批量导出动作。 */
+export function createExportActions(options: ExportActionOptions) {
+  function setBatchExportModalOpen(value: boolean) {
+    options.isBatchExportModalOpen.value = value;
+  }
+
+  function openBatchExportModal() {
+    if (!options.canExport.value || !options.selectedStoreId.value) {
+      return;
+    }
+
+    options.isBatchExportModalOpen.value = true;
+  }
+
+  async function handleConfirmBatchExport() {
+    if (!options.canExport.value || !options.selectedStoreId.value) {
+      return;
+    }
+
+    options.isBatchExporting.value = true;
+    try {
+      const payload = buildReportBatchExportQueryPayload(
+        options.selectedStoreId.value,
+        options.periodType.value,
+        options.pagination.page,
+        options.pagination.pageSize,
+      );
+      const result = await exportFinanceBusinessReportBatchApi(payload);
+      downloadBase64File(
+        result.fileName,
+        result.fileContentBase64,
+        'application/zip',
+      );
+      message.success(`批量导出成功，共 ${result.totalCount} 份报表`);
+      setBatchExportModalOpen(false);
+    } finally {
+      options.isBatchExporting.value = false;
+    }
+  }
+
+  return {
+    handleConfirmBatchExport,
+    openBatchExportModal,
+    setBatchExportModalOpen,
+  };
+}
--- a/apps/web-antd/src/views/finance/report/composables/report-page/filter-actions.ts
+++ b/apps/web-antd/src/views/finance/report/composables/report-page/filter-actions.ts
@@ -0,0 +1,30 @@
+import type { FinanceBusinessReportPaginationState } from '../../types';
+
+/**
+ * 文件职责：经营报表页面筛选与分页行为。
+ */
+import type { FinanceBusinessReportPeriodType } from '#/api/finance';
+
+interface FilterActionOptions {
+  loadReportList: () => Promise<void>;
+  pagination: FinanceBusinessReportPaginationState;
+  periodType: { value: FinanceBusinessReportPeriodType };
+}
+
+/** 创建筛选与分页行为。 */
+export function createFilterActions(options: FilterActionOptions) {
+  function setPeriodType(value: FinanceBusinessReportPeriodType) {
+    options.periodType.value = value || 'daily';
+  }
+
+  async function handlePageChange(page: number, pageSize: number) {
+    options.pagination.page = page;
+    options.pagination.pageSize = pageSize;
+    await options.loadReportList();
+  }
+
+  return {
+    handlePageChange,
+    setPeriodType,
+  };
+}
--- a/apps/web-antd/src/views/finance/report/composables/report-page/helpers.ts
+++ b/apps/web-antd/src/views/finance/report/composables/report-page/helpers.ts
@@ -0,0 +1,130 @@
+import type {
+  FinanceBusinessReportBatchExportQuery,
+  FinanceBusinessReportDetailQuery,
+  FinanceBusinessReportPeriodType,
+  FinanceBusinessReportStatus,
+} from '#/api/finance';
+
+/**
+ * 文件职责：经营报表页面纯函数与数据转换工具。
+ */
+
+/** 构建经营报表列表查询请求。 */
+export function buildReportListQueryPayload(
+  storeId: string,
+  periodType: FinanceBusinessReportPeriodType,
+  page: number,
+  pageSize: number,
+) {
+  return {
+    storeId,
+    periodType,
+    page,
+    pageSize,
+  };
+}
+
+/** 构建经营报表详情查询请求。 */
+export function buildReportDetailQueryPayload(
+  storeId: string,
+  reportId: string,
+): FinanceBusinessReportDetailQuery {
+  return {
+    storeId,
+    reportId,
+  };
+}
+
+/** 构建经营报表批量导出查询请求。 */
+export function buildReportBatchExportQueryPayload(
+  storeId: string,
+  periodType: FinanceBusinessReportPeriodType,
+  page: number,
+  pageSize: number,
+): FinanceBusinessReportBatchExportQuery {
+  return {
+    storeId,
+    periodType,
+    page,
+    pageSize,
+  };
+}
+
+/** 报表周期文案。 */
+export function resolvePeriodTypeLabel(value: FinanceBusinessReportPeriodType) {
+  if (value === 'weekly') return '周报';
+  if (value === 'monthly') return '月报';
+  return '日报';
+}
+
+/** 报表状态标签色。 */
+export function resolveReportStatusTagColor(
+  status: FinanceBusinessReportStatus,
+) {
+  if (status === 'succeeded') return 'green';
+  if (status === 'failed') return 'red';
+  if (status === 'running' || status === 'queued') return 'blue';
+  return 'default';
+}
+
+/** 货币格式化（人民币）。 */
+export function formatCurrency(value: number, fractionDigits = 0) {
+  const digits = Math.max(0, Math.min(2, fractionDigits));
+  return new Intl.NumberFormat('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  }).format(Number.isFinite(value) ? value : 0);
+}
+
+/** 订单数格式化。 */
+export function formatOrderCount(value: number) {
+  return `${Math.max(0, Math.round(value || 0))}单`;
+}
+
+/** 客单价格式化。 */
+export function formatAverageOrderValue(value: number) {
+  return formatCurrency(value, 1);
+}
+
+/** 百分比格式化。 */
+export function formatPercent(value: number, digits = 1) {
+  const safeDigits = Math.max(0, Math.min(2, digits));
+  const normalized = Number.isFinite(value) ? value : 0;
+  return `${normalized.toFixed(safeDigits)}%`;
+}
+
+/** 数值符号格式化。 */
+export function formatSignedRate(value: number, digits = 1) {
+  const normalized = Number.isFinite(value) ? value : 0;
+  if (normalized === 0) {
+    return `${normalized.toFixed(digits)}%`;
+  }
+
+  return `${normalized > 0 ? '↑' : '↓'}${Math.abs(normalized).toFixed(digits)}%`;
+}
+
+function decodeBase64ToBlob(base64: string, mimeType: string) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.codePointAt(index) ?? 0;
+  }
+  return new Blob([bytes], { type: mimeType });
+}
+
+/** 下载 Base64 编码文件。 */
+export function downloadBase64File(
+  fileName: string,
+  fileContentBase64: string,
+  mimeType = 'application/octet-stream',
+) {
+  const blob = decodeBase64ToBlob(fileContentBase64, mimeType);
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = fileName;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
--- a/apps/web-antd/src/views/finance/report/composables/useFinanceReportPage.ts
+++ b/apps/web-antd/src/views/finance/report/composables/useFinanceReportPage.ts
@@ -0,0 +1,219 @@
+/**
+ * 文件职责：经营报表页面状态与动作编排。
+ */
+import type {
+  FinanceBusinessReportDetailDto,
+  FinanceBusinessReportListItemDto,
+  FinanceBusinessReportPeriodType,
+} from '#/api/finance';
+import type { StoreListItemDto } from '#/api/store';
+
+import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
+
+import { useAccessStore } from '@vben/stores';
+
+import {
+  DEFAULT_PAGINATION,
+  DEFAULT_PERIOD_TYPE,
+  FINANCE_REPORT_EXPORT_PERMISSION,
+  FINANCE_REPORT_VIEW_PERMISSION,
+} from './report-page/constants';
+import { createDataActions } from './report-page/data-actions';
+import { createDetailActions } from './report-page/detail-actions';
+import { createExportActions } from './report-page/export-actions';
+import { createFilterActions } from './report-page/filter-actions';
+
+/** 创建经营报表页面组合状态。 */
+export function useFinanceReportPage() {
+  const accessStore = useAccessStore();
+
+  const stores = ref<StoreListItemDto[]>([]);
+  const selectedStoreId = ref('');
+  const isStoreLoading = ref(false);
+
+  const periodType = ref<FinanceBusinessReportPeriodType>(DEFAULT_PERIOD_TYPE);
+  const rows = ref<FinanceBusinessReportListItemDto[]>([]);
+  const pagination = reactive({ ...DEFAULT_PAGINATION });
+  const isListLoading = ref(false);
+
+  const previewDetail = ref<FinanceBusinessReportDetailDto | null>(null);
+  const currentPreviewReportId = ref('');
+  const isPreviewDrawerOpen = ref(false);
+  const isPreviewLoading = ref(false);
+  const isDownloadingPdf = ref(false);
+  const isDownloadingExcel = ref(false);
+
+  const isBatchExportModalOpen = ref(false);
+  const isBatchExporting = ref(false);
+
+  const storeOptions = computed(() =>
+    stores.value.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })),
+  );
+
+  const selectedStoreName = computed(
+    () =>
+      storeOptions.value.find((item) => item.value === selectedStoreId.value)
+        ?.label ?? '--',
+  );
+
+  const accessCodeSet = computed(
+    () => new Set((accessStore.accessCodes ?? []).map(String)),
+  );
+
+  const canView = computed(() =>
+    accessCodeSet.value.has(FINANCE_REPORT_VIEW_PERMISSION),
+  );
+
+  const canExport = computed(() =>
+    accessCodeSet.value.has(FINANCE_REPORT_EXPORT_PERMISSION),
+  );
+
+  const { clearPageData, loadReportList, loadStores } = createDataActions({
+    stores,
+    selectedStoreId,
+    periodType,
+    rows,
+    pagination,
+    isStoreLoading,
+    isListLoading,
+  });
+
+  const { handlePageChange, setPeriodType } = createFilterActions({
+    periodType,
+    pagination,
+    loadReportList,
+  });
+
+  const { downloadExcel, downloadPdf, openPreview, setPreviewDrawerOpen } =
+    createDetailActions({
+      canExport,
+      selectedStoreId,
+      previewDetail,
+      currentPreviewReportId,
+      isPreviewDrawerOpen,
+      isPreviewLoading,
+      isDownloadingPdf,
+      isDownloadingExcel,
+    });
+
+  const {
+    handleConfirmBatchExport,
+    openBatchExportModal,
+    setBatchExportModalOpen,
+  } = createExportActions({
+    canExport,
+    selectedStoreId,
+    periodType,
+    pagination,
+    isBatchExportModalOpen,
+    isBatchExporting,
+  });
+
+  function setSelectedStoreId(value: string) {
+    selectedStoreId.value = value;
+  }
+
+  function clearByPermission() {
+    stores.value = [];
+    selectedStoreId.value = '';
+    clearPageData();
+    setPreviewDrawerOpen(false);
+    setBatchExportModalOpen(false);
+  }
+
+  watch(selectedStoreId, async (storeId) => {
+    setPreviewDrawerOpen(false);
+    setBatchExportModalOpen(false);
+
+    if (!storeId) {
+      clearPageData();
+      return;
+    }
+
+    pagination.page = 1;
+    await loadReportList();
+  });
+
+  watch(periodType, async (value, oldValue) => {
+    if (value === oldValue) {
+      return;
+    }
+
+    setPreviewDrawerOpen(false);
+    setBatchExportModalOpen(false);
+
+    if (!selectedStoreId.value) {
+      clearPageData();
+      return;
+    }
+
+    pagination.page = 1;
+    await loadReportList();
+  });
+
+  watch(canView, async (value, oldValue) => {
+    if (value === oldValue) {
+      return;
+    }
+
+    if (!value) {
+      clearByPermission();
+      return;
+    }
+
+    await loadStores();
+  });
+
+  onMounted(async () => {
+    if (!canView.value) {
+      clearByPermission();
+      return;
+    }
+
+    await loadStores();
+  });
+
+  onActivated(() => {
+    if (!canView.value) {
+      return;
+    }
+
+    if (stores.value.length === 0 || !selectedStoreId.value) {
+      void loadStores();
+    }
+  });
+
+  return {
+    canExport,
+    canView,
+    currentPreviewReportId,
+    downloadPreviewExcel: downloadExcel,
+    downloadPreviewPdf: downloadPdf,
+    handleConfirmBatchExport,
+    handlePageChange,
+    isBatchExportModalOpen,
+    isBatchExporting,
+    isDownloadingExcel,
+    isDownloadingPdf,
+    isListLoading,
+    isPreviewDrawerOpen,
+    isPreviewLoading,
+    isStoreLoading,
+    openBatchExportModal,
+    openPreview,
+    pagination,
+    periodType,
+    previewDetail,
+    rows,
+    selectedStoreId,
+    selectedStoreName,
+    setBatchExportModalOpen,
+    setPeriodType,
+    setPreviewDrawerOpen,
+    setSelectedStoreId,
+    storeOptions,
+  };
+}
--- a/apps/web-antd/src/views/finance/report/index.vue
+++ b/apps/web-antd/src/views/finance/report/index.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+/**
+ * 文件职责：财务中心经营报表页面入口编排。
+ */
+import { Page } from '@vben/common-ui';
+
+import { Empty } from 'ant-design-vue';
+
+import ReportBatchExportModal from './components/ReportBatchExportModal.vue';
+import ReportPreviewDrawer from './components/ReportPreviewDrawer.vue';
+import ReportTableCard from './components/ReportTableCard.vue';
+import ReportToolbar from './components/ReportToolbar.vue';
+import { useFinanceReportPage } from './composables/useFinanceReportPage';
+
+const {
+  canExport,
+  canView,
+  downloadPreviewExcel,
+  downloadPreviewPdf,
+  handleConfirmBatchExport,
+  handlePageChange,
+  isBatchExportModalOpen,
+  isBatchExporting,
+  isDownloadingExcel,
+  isDownloadingPdf,
+  isListLoading,
+  isPreviewDrawerOpen,
+  isPreviewLoading,
+  isStoreLoading,
+  openBatchExportModal,
+  openPreview,
+  pagination,
+  periodType,
+  previewDetail,
+  rows,
+  selectedStoreId,
+  selectedStoreName,
+  setBatchExportModalOpen,
+  setPeriodType,
+  setPreviewDrawerOpen,
+  setSelectedStoreId,
+  storeOptions,
+} = useFinanceReportPage();
+</script>
+
+<template>
+  <Page title="经营报表" content-class="page-finance-report">
+    <div class="frp-page">
+      <template v-if="canView">
+        <ReportToolbar
+          :period-type="periodType"
+          :selected-store-id="selectedStoreId"
+          :store-options="storeOptions"
+          :is-store-loading="isStoreLoading"
+          :can-export="canExport"
+          :is-batch-exporting="isBatchExporting"
+          @update:period-type="setPeriodType"
+          @update:selected-store-id="setSelectedStoreId"
+          @batch-export="openBatchExportModal"
+        />
+
+        <ReportTableCard
+          :rows="rows"
+          :loading="isListLoading"
+          :pagination="pagination"
+          :can-export="canExport"
+          @page-change="handlePageChange"
+          @preview="openPreview"
+          @download-pdf="downloadPreviewPdf"
+          @download-excel="downloadPreviewExcel"
+        />
+      </template>
+
+      <Empty v-else description="暂无经营报表页面访问权限" />
+    </div>
+
+    <ReportPreviewDrawer
+      :open="isPreviewDrawerOpen"
+      :loading="isPreviewLoading"
+      :detail="previewDetail"
+      :can-export="canExport"
+      :is-downloading-pdf="isDownloadingPdf"
+      :is-downloading-excel="isDownloadingExcel"
+      @close="setPreviewDrawerOpen(false)"
+      @download-pdf="downloadPreviewPdf"
+      @download-excel="downloadPreviewExcel"
+    />
+
+    <ReportBatchExportModal
+      :open="isBatchExportModalOpen"
+      :submitting="isBatchExporting"
+      :selected-store-name="selectedStoreName"
+      :period-type="periodType"
+      :pagination="pagination"
+      :current-page-count="rows.length"
+      @close="setBatchExportModalOpen(false)"
+      @confirm="handleConfirmBatchExport"
+    />
+  </Page>
+</template>
+
+<style lang="less">
+@import './styles/index.less';
+</style>
--- a/apps/web-antd/src/views/finance/report/styles/base.less
+++ b/apps/web-antd/src/views/finance/report/styles/base.less
@@ -0,0 +1,14 @@
+/**
+ * 文件职责：经营报表页面基础容器样式。
+ */
+.page-finance-report {
+  .ant-card {
+    border-radius: 10px;
+  }
+}
+
+.frp-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
--- a/apps/web-antd/src/views/finance/report/styles/drawer.less
+++ b/apps/web-antd/src/views/finance/report/styles/drawer.less
@@ -0,0 +1,162 @@
+/**
+ * 文件职责：经营报表预览抽屉样式。
+ */
+.page-finance-report {
+  .ant-drawer {
+    .ant-drawer-header {
+      padding: 14px 18px;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .ant-drawer-body {
+      padding: 16px 20px;
+    }
+
+    .ant-drawer-footer {
+      padding: 12px 20px;
+      border-top: 1px solid #f0f0f0;
+    }
+  }
+}
+
+.frp-section {
+  margin-bottom: 22px;
+}
+
+.frp-section-hd {
+  padding-left: 10px;
+  margin-bottom: 14px;
+  font-size: 15px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+  border-left: 3px solid #1677ff;
+}
+
+.frp-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.frp-kpi-item {
+  padding: 14px 16px;
+  background: #f8f9fb;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.frp-kpi-label {
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.frp-kpi-val {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: rgb(0 0 0 / 88%);
+
+  &.is-profit {
+    color: #52c41a;
+  }
+}
+
+.frp-kpi-change {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 4px;
+  font-size: 12px;
+}
+
+.frp-kpi-change-positive {
+  color: #52c41a;
+}
+
+.frp-kpi-change-negative {
+  color: #ff4d4f;
+}
+
+.frp-kpi-change-neutral {
+  color: rgb(0 0 0 / 45%);
+}
+
+.frp-divider {
+  height: 1px;
+  margin: 20px 0;
+  background: linear-gradient(90deg, #f0f0f0, transparent);
+}
+
+.frp-detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  font-size: 13px;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.frp-detail-name {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  color: rgb(0 0 0 / 88%);
+}
+
+.frp-breakdown-icon {
+  width: 14px;
+  height: 14px;
+
+  &.is-primary {
+    color: #1677ff;
+  }
+
+  &.is-success {
+    color: #52c41a;
+  }
+
+  &.is-warning {
+    color: #faad14;
+  }
+
+  &.is-muted {
+    color: rgb(0 0 0 / 45%);
+  }
+}
+
+.frp-detail-right {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.frp-detail-amount {
+  min-width: 80px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+  text-align: right;
+}
+
+.frp-detail-pct {
+  min-width: 50px;
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+  text-align: right;
+}
+
+.frp-drawer-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.frp-drawer-btn {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
--- a/apps/web-antd/src/views/finance/report/styles/index.less
+++ b/apps/web-antd/src/views/finance/report/styles/index.less
@@ -0,0 +1,9 @@
+/**
+ * 文件职责：经营报表页面样式聚合入口。
+ */
+@import './base.less';
+@import './layout.less';
+@import './table.less';
+@import './drawer.less';
+@import './modal.less';
+@import './responsive.less';
--- a/apps/web-antd/src/views/finance/report/styles/layout.less
+++ b/apps/web-antd/src/views/finance/report/styles/layout.less
@@ -0,0 +1,39 @@
+/**
+ * 文件职责：经营报表页面布局与工具栏样式。
+ */
+.frp-toolbar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 16px 20px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+
+  .frp-period-segment {
+    --ant-segmented-item-selected-bg: #fff;
+    --ant-segmented-item-selected-color: #1677ff;
+  }
+
+  .frp-store-select {
+    width: 200px;
+    min-width: 200px;
+  }
+
+  .frp-toolbar-right {
+    margin-left: auto;
+  }
+
+  .frp-batch-export-btn {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    height: 32px;
+  }
+
+  .ant-select-selector {
+    height: 32px;
+    font-size: 13px;
+  }
+}
--- a/apps/web-antd/src/views/finance/report/styles/modal.less
+++ b/apps/web-antd/src/views/finance/report/styles/modal.less
@@ -0,0 +1,51 @@
+/**
+ * 文件职责：经营报表批量导出弹窗样式。
+ */
+.frp-batch-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.frp-batch-desc {
+  margin: 0;
+  font-size: 13px;
+  color: rgb(0 0 0 / 65%);
+}
+
+.frp-batch-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.frp-batch-line {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  font-size: 13px;
+
+  .frp-batch-label {
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .frp-batch-value {
+    color: rgb(0 0 0 / 88%);
+    text-align: right;
+  }
+
+  &.is-total {
+    padding-top: 8px;
+    margin-top: 4px;
+    font-weight: 600;
+    border-top: 1px solid #f0f0f0;
+
+    .frp-batch-value {
+      color: #1677ff;
+    }
+  }
+}
--- a/apps/web-antd/src/views/finance/report/styles/responsive.less
+++ b/apps/web-antd/src/views/finance/report/styles/responsive.less
@@ -0,0 +1,58 @@
+/**
+ * 文件职责：经营报表页面响应式样式。
+ */
+@media (max-width: 1200px) {
+  .frp-kpi-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .frp-toolbar {
+    flex-wrap: wrap;
+    padding: 14px 12px;
+
+    .frp-period-segment,
+    .frp-store-select {
+      width: 100%;
+      min-width: 100%;
+    }
+
+    .frp-toolbar-right {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    .frp-batch-export-btn {
+      justify-content: center;
+      width: 100%;
+    }
+  }
+
+  .frp-table-card {
+    .ant-table-wrapper {
+      overflow-x: auto;
+    }
+  }
+
+  .frp-kpi-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .page-finance-report {
+    .ant-drawer {
+      .ant-drawer-content-wrapper {
+        width: 100% !important;
+        max-width: 100%;
+      }
+
+      .ant-drawer-body {
+        padding: 14px 12px;
+      }
+
+      .ant-drawer-footer {
+        padding: 12px;
+      }
+    }
+  }
+}
--- a/apps/web-antd/src/views/finance/report/styles/table.less
+++ b/apps/web-antd/src/views/finance/report/styles/table.less
@@ -0,0 +1,59 @@
+/**
+ * 文件职责：经营报表表格区域样式。
+ */
+.frp-table-card {
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+
+  .ant-table-wrapper {
+    .ant-table-thead > tr > th {
+      font-size: 13px;
+      white-space: nowrap;
+    }
+
+    .ant-table-tbody > tr > td {
+      font-size: 13px;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
+  }
+
+  .ant-pagination {
+    margin: 14px 16px;
+  }
+}
+
+.frp-date {
+  white-space: nowrap;
+}
+
+.frp-value {
+  color: rgb(0 0 0 / 88%);
+  white-space: nowrap;
+}
+
+.frp-amount {
+  font-weight: 600;
+  white-space: nowrap;
+
+  &.is-profit {
+    color: #52c41a;
+  }
+
+  &.is-loss {
+    color: #ff4d4f;
+  }
+}
+
+.frp-action-group {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}
+
+.frp-action-link {
+  padding-inline: 0;
+  white-space: nowrap;
+}
--- a/apps/web-antd/src/views/finance/report/types.ts
+++ b/apps/web-antd/src/views/finance/report/types.ts
@@ -0,0 +1,23 @@
+/**
+ * 文件职责：经营报表页面本地状态类型定义。
+ */
+import type { FinanceBusinessReportPeriodType } from '#/api/finance';
+
+/** 通用选项项。 */
+export interface OptionItem {
+  label: string;
+  value: string;
+}
+
+/** 报表周期选项。 */
+export interface FinanceBusinessReportPeriodOption {
+  label: string;
+  value: FinanceBusinessReportPeriodType;
+}
+
+/** 经营报表分页状态。 */
+export interface FinanceBusinessReportPaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
--- a/apps/web-antd/src/views/store/fees/components/FeesDeliveryCard.vue
+++ b/apps/web-antd/src/views/store/fees/components/FeesDeliveryCard.vue
@@ -12,9 +12,11 @@ interface Props {
  freeDeliveryThreshold: null | number;
  isSaving: boolean;
  minimumOrderAmount: number;
+  platformServiceRate: number;
  onSetBaseDeliveryFee: (value: number) => void;
  onSetFreeDeliveryThreshold: (value: null | number) => void;
  onSetMinimumOrderAmount: (value: number) => void;
+  onSetPlatformServiceRate: (value: number) => void;
 }

 const props = defineProps<Props>();
@@ -85,6 +87,31 @@ function toNumber(value: null | number | string, fallback = 0) {
        <div class="fees-hint">每笔订单默认收取的配送费</div>
      </div>

+      <div class="fees-field">
+        <label>平台服务费率</label>
+        <div class="fees-input-row">
+          <InputNumber
+            :value="props.platformServiceRate"
+            :min="0"
+            :max="100"
+            :precision="2"
+            :step="0.1"
+            :controls="false"
+            :disabled="!props.canOperate"
+            class="fees-input"
+            placeholder="如：5.00"
+            @update:value="
+              (value) =>
+                props.onSetPlatformServiceRate(
+                  toNumber(value, props.platformServiceRate),
+                )
+            "
+          />
+          <span class="fees-unit">%</span>
+        </div>
+        <div class="fees-hint">按实收金额计算平台服务费成本</div>
+      </div>
+
      <div class="fees-field">
        <label>免配送费门槛</label>
        <div class="fees-input-row">
--- a/apps/web-antd/src/views/store/fees/composables/fees-page/data-actions.ts
+++ b/apps/web-antd/src/views/store/fees/composables/fees-page/data-actions.ts
@@ -62,6 +62,10 @@ export function createDataActions(options: CreateDataActionsOptions) {
      0,
    );
    options.form.baseDeliveryFee = normalizeMoney(next.baseDeliveryFee, 0);
+    options.form.platformServiceRate = normalizeMoney(
+      next.platformServiceRate,
+      0,
+    );
    options.form.freeDeliveryThreshold =
      next.freeDeliveryThreshold === null
        ? null
@@ -109,6 +113,7 @@ export function createDataActions(options: CreateDataActionsOptions) {
    return {
      minimumOrderAmount: normalizeMoney(source?.minimumOrderAmount ?? 0, 0),
      baseDeliveryFee: normalizeMoney(source?.baseDeliveryFee ?? 0, 0),
+      platformServiceRate: normalizeMoney(source?.platformServiceRate ?? 0, 0),
      freeDeliveryThreshold:
        source?.freeDeliveryThreshold === null ||
        source?.freeDeliveryThreshold === undefined
@@ -130,6 +135,7 @@ export function createDataActions(options: CreateDataActionsOptions) {
      storeId,
      minimumOrderAmount: options.form.minimumOrderAmount,
      baseDeliveryFee: options.form.baseDeliveryFee,
+      platformServiceRate: options.form.platformServiceRate,
      freeDeliveryThreshold: options.form.freeDeliveryThreshold,
      packagingFeeMode: options.form.packagingFeeMode,
      orderPackagingFeeMode: options.form.orderPackagingFeeMode,
--- a/apps/web-antd/src/views/store/fees/composables/fees-page/helpers.ts
+++ b/apps/web-antd/src/views/store/fees/composables/fees-page/helpers.ts
@@ -26,6 +26,7 @@ export function cloneFeesForm(source: StoreFeesFormState): StoreFeesFormState {
  return {
    minimumOrderAmount: source.minimumOrderAmount,
    baseDeliveryFee: source.baseDeliveryFee,
+    platformServiceRate: source.platformServiceRate,
    freeDeliveryThreshold: source.freeDeliveryThreshold,
    packagingFeeMode: source.packagingFeeMode,
    orderPackagingFeeMode: source.orderPackagingFeeMode,
--- a/apps/web-antd/src/views/store/fees/composables/useStoreFeesPage.ts
+++ b/apps/web-antd/src/views/store/fees/composables/useStoreFeesPage.ts
@@ -36,6 +36,7 @@ import { createPackagingActions } from './fees-page/packaging-actions';
 const EMPTY_FEES_SETTINGS: StoreFeesFormState = {
  minimumOrderAmount: 0,
  baseDeliveryFee: 0,
+  platformServiceRate: 0,
  freeDeliveryThreshold: null,
  packagingFeeMode: 'order',
  orderPackagingFeeMode: 'fixed',
@@ -207,6 +208,10 @@ export function useStoreFeesPage() {
    form.baseDeliveryFee = normalizeMoney(value, form.baseDeliveryFee);
  }

+  function setPlatformServiceRate(value: number) {
+    form.platformServiceRate = normalizeMoney(value, form.platformServiceRate);
+  }
+
  function setFreeDeliveryThreshold(value: null | number) {
    if (value === null || value === undefined) {
      form.freeDeliveryThreshold = null;
@@ -301,6 +306,7 @@ export function useStoreFeesPage() {
    const source = snapshot.value;
    form.minimumOrderAmount = source.minimumOrderAmount;
    form.baseDeliveryFee = source.baseDeliveryFee;
+    form.platformServiceRate = source.platformServiceRate;
    form.freeDeliveryThreshold = source.freeDeliveryThreshold;
    message.success('已重置起送与配送费');
  }
@@ -449,6 +455,7 @@ export function useStoreFeesPage() {
    setFixedPackagingFee,
    setFreeDeliveryThreshold,
    setMinimumOrderAmount,
+    setPlatformServiceRate,
    setPackagingMode,
    setRushAmount,
    setRushEnabled,
--- a/apps/web-antd/src/views/store/fees/index.vue
+++ b/apps/web-antd/src/views/store/fees/index.vue
@@ -59,6 +59,7 @@ const {
  setFixedPackagingFee,
  setFreeDeliveryThreshold,
  setMinimumOrderAmount,
+  setPlatformServiceRate,
  setPackagingMode,
  setRushAmount,
  setRushEnabled,
@@ -111,10 +112,12 @@ function onEditTier(tier: PackagingFeeTierDto) {
          :can-operate="canOperate"
          :minimum-order-amount="form.minimumOrderAmount"
          :base-delivery-fee="form.baseDeliveryFee"
+          :platform-service-rate="form.platformServiceRate"
          :free-delivery-threshold="form.freeDeliveryThreshold"
          :is-saving="isSavingDelivery"
          :on-set-minimum-order-amount="setMinimumOrderAmount"
          :on-set-base-delivery-fee="setBaseDeliveryFee"
+          :on-set-platform-service-rate="setPlatformServiceRate"
          :on-set-free-delivery-threshold="setFreeDeliveryThreshold"
          @save="saveDeliverySection"
          @reset="resetDeliverySection"
--- a/apps/web-antd/src/views/store/fees/types.ts
+++ b/apps/web-antd/src/views/store/fees/types.ts
@@ -21,6 +21,7 @@ export interface PackagingFeeTierFormState {

 export interface StoreFeesFormState {
  baseDeliveryFee: number;
+  platformServiceRate: number;
  fixedPackagingFee: number;
  freeDeliveryThreshold: null | number;
  minimumOrderAmount: number;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,6 +48,9 @@ catalogs:
    '@manypkg/get-packages':
      specifier: ^3.1.0
      version: 3.1.0
+    '@microsoft/signalr':
+      specifier: ^8.0.7
+      version: 8.0.17
    '@nolebase/vitepress-plugin-git-changelog':
      specifier: ^2.18.2
      version: 2.18.2
@@ -615,7 +618,7 @@ importers:
  apps/web-antd:
    dependencies:
      '@microsoft/signalr':
-        specifier: ^8.0.7
+        specifier: 'catalog:'
        version: 8.0.17
      '@vben/access':
        specifier: workspace:*
Author	SHA1	Message	Date
msumshk	8917bd6579	Merge pull request 'feat(finance): 财务概览页面模块 1:1 还原' (#8 ) from feature/finance-overview-1to1 into main All checks were successful Build and Deploy TenantUI / build-and-deploy (push) Successful in 1m8s Details	2026-03-05 03:12:22 +00:00
MSuMshk	13212d7ff5	feat(@vben/web-antd): add finance overview cockpit and fee rate	2026-03-05 10:48:43 +08:00
MSuMshk	1e3f1be961	Merge pull request #22 from msumshk/feature/finance-report-1to1 All checks were successful Build and Deploy TenantUI / build-and-deploy (push) Successful in 2m19s Details feat(@vben/web-antd): implement finance business report module	2026-03-04 21:23:17 +08:00
MSuMshk	b56745f14b	chore(@vben/web-antd): update lockfile	2026-03-04 21:12:23 +08:00
MSuMshk	67a3c3e36e	feat(@vben/web-antd): implement finance business report module	2026-03-04 21:12:23 +08:00
MSuMshk	d7cc1d63c9	Merge pull request #21 from msumshk/feature/finance-invoice-1to1 feat(finance): 实现发票管理页面与子页面	2026-03-04 17:00:11 +08:00
MSuMshk	0c7adc149b	feat(finance): 实现发票管理页面与子页面	2026-03-04 16:53:06 +08:00
msumshk	e0bef7259a	Merge pull request 'feat(@vben/web-antd): add finance cost management pages' (#6 ) from feature/finance-cost-1to1-clean into main Some checks failed Build and Deploy TenantUI / build-and-deploy (push) Failing after 1s Details Reviewed-on: #6	2026-03-04 08:16:07 +00:00
msumshk	49675f9ca9	Merge pull request 'feature/finance-cost-1to1' (#5 ) from feature/finance-cost-1to1 into main Some checks failed Build and Deploy TenantUI / build-and-deploy (push) Failing after 2s Details Reviewed-on: #5	2026-03-04 08:02:58 +00:00
msumshk	1e8a09896a	Merge pull request 'feature/member-points-mall-1to1' (#4 ) from feature/member-points-mall-1to1 into main Some checks failed Build and Deploy TenantUI / build-and-deploy (push) Failing after 2s Details Reviewed-on: #4	2026-03-04 04:47:35 +00:00
msumshk	e511c87cd2	Merge pull request 'feature/member-message-reach-module' (#3 ) from feature/member-message-reach-module into main Some checks failed Build and Deploy TenantUI / build-and-deploy (push) Failing after 1s Details Reviewed-on: #3	2026-03-04 04:16:58 +00:00
msumshk	bd422c5b86	Merge branch 'main' into feature/member-message-reach-module	2026-03-04 04:16:50 +00:00
msumshk	0d93794250	Merge pull request 'feature/member-message-reach-module-pr' (#2 ) from feature/member-message-reach-module-pr into main Some checks failed Build and Deploy TenantUI / build-and-deploy (push) Failing after 1s Details Reviewed-on: #2	2026-03-04 04:16:39 +00:00
msumshk	d7277212df	Merge branch 'main' into feature/member-message-reach-module-pr	2026-03-04 04:16:34 +00:00
MSuMshk	4e32bf21e1	style: 调整消息触达样式顺序	2026-03-04 11:42:38 +08:00
MSuMshk	0a19610d92	feat: 完成会员消息触达模块页面与交互	2026-03-04 11:42:38 +08:00
msumshk	428d2e4a9a	Merge pull request 'feat: 新增财务交易流水模块页面与接口' (#1 ) from feature/finance-transaction-module into main Some checks failed Build and Deploy TenantUI / build-and-deploy (push) Failing after 2s Details Reviewed-on: #1	2026-03-04 03:13:10 +00:00
MSuMshk	61343b72b9	feat: 新增财务交易流水模块页面与接口	2026-03-04 11:03:37 +08:00