Merge pull request #22 from msumshk/feature/finance-report-1to1

feat(@vben/web-antd): implement finance business report module

apps/web-antd/src/api/finance/index.ts

@@ -3,5 +3,6 @@
  */
 export * from './cost';
 export * from './invoice';
+export * from './report';
 export * from './settlement';
 export * from './transaction';

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,
+    },
+  );
+}

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>

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>

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>

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>

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,
+};

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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);
+}

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,
+  };
+}

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>

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;
+}

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;
+}

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';

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;
+  }
+}

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;
+    }
+  }
+}

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;
+      }
+    }
+  }
+}

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;
+}

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;
+}

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:*