diff --git a/apps/web-antd/src/api/finance/index.ts b/apps/web-antd/src/api/finance/index.ts
index 5171a66..e6b37ec 100644
--- a/apps/web-antd/src/api/finance/index.ts
+++ b/apps/web-antd/src/api/finance/index.ts
@@ -1,161 +1,6 @@
 /**
- * 文件职责：财务中心交易流水 API 契约与请求封装。
+ * 文件职责：财务中心 API 聚合导出。
  */
-import { requestClient } from '#/api/request';
-
+export * from './invoice';
 export * from './settlement';
-
-/** 交易类型筛选值。 */
-export type FinanceTransactionTypeFilter =
-  | 'all'
-  | 'income'
-  | 'point_redeem'
-  | 'refund'
-  | 'stored_card_recharge';
-
-/** 交易渠道筛选值。 */
-export type FinanceTransactionChannelFilter =
-  | 'all'
-  | 'delivery'
-  | 'dine_in'
-  | 'pickup';
-
-/** 交易支付方式筛选值。 */
-export type FinanceTransactionPaymentFilter =
-  | 'alipay'
-  | 'all'
-  | 'balance'
-  | 'card'
-  | 'cash'
-  | 'wechat';
-
-/** 交易流水筛选参数。 */
-export interface FinanceTransactionFilterQuery {
-  channel?: FinanceTransactionChannelFilter;
-  endDate?: string;
-  keyword?: string;
-  paymentMethod?: FinanceTransactionPaymentFilter;
-  startDate?: string;
-  storeId: string;
-  type?: FinanceTransactionTypeFilter;
-}
-
-/** 交易流水列表查询参数。 */
-export interface FinanceTransactionListQuery extends FinanceTransactionFilterQuery {
-  page: number;
-  pageSize: number;
-}
-
-/** 交易流水列表行。 */
-export interface FinanceTransactionListItemDto {
-  amount: number;
-  channel: string;
-  isIncome: boolean;
-  occurredAt: string;
-  orderNo?: string;
-  paymentMethod: string;
-  remark: string;
-  transactionId: string;
-  transactionNo: string;
-  type: string;
-  typeText: string;
-}
-
-/** 交易流水列表结果。 */
-export interface FinanceTransactionListResultDto {
-  items: FinanceTransactionListItemDto[];
-  page: number;
-  pageIncomeAmount: number;
-  pageRefundAmount: number;
-  pageSize: number;
-  total: number;
-}
-
-/** 交易流水统计结果。 */
-export interface FinanceTransactionStatsDto {
-  totalCount: number;
-  totalIncome: number;
-  totalRefund: number;
-}
-
-/** 交易流水详情。 */
-export interface FinanceTransactionDetailDto {
-  amount: number;
-  arrivedAmount?: number;
-  channel: string;
-  customerName: string;
-  customerPhone: string;
-  giftAmount?: number;
-  memberMobileMasked?: string;
-  memberName?: string;
-  occurredAt: string;
-  orderNo?: string;
-  paymentMethod: string;
-  pointBalanceAfterChange?: number;
-  pointChangeAmount?: number;
-  rechargeAmount?: number;
-  refundNo?: string;
-  refundReason?: string;
-  remark: string;
-  storeId: string;
-  transactionId: string;
-  transactionNo: string;
-  type: string;
-  typeText: string;
-}
-
-/** 交易流水导出结果。 */
-export interface FinanceTransactionExportDto {
-  fileContentBase64: string;
-  fileName: string;
-  totalCount: number;
-}
-
-/** 查询交易流水列表。 */
-export async function getFinanceTransactionListApi(
-  params: FinanceTransactionListQuery,
-) {
-  return requestClient.get<FinanceTransactionListResultDto>(
-    '/finance/transaction/list',
-    {
-      params,
-    },
-  );
-}
-
-/** 查询交易流水统计。 */
-export async function getFinanceTransactionStatsApi(
-  params: FinanceTransactionFilterQuery,
-) {
-  return requestClient.get<FinanceTransactionStatsDto>(
-    '/finance/transaction/stats',
-    {
-      params,
-    },
-  );
-}
-
-/** 查询交易流水详情。 */
-export async function getFinanceTransactionDetailApi(params: {
-  storeId: string;
-  transactionId: string;
-}) {
-  return requestClient.get<FinanceTransactionDetailDto>(
-    '/finance/transaction/detail',
-    {
-      params,
-    },
-  );
-}
-
-/** 导出交易流水 CSV。 */
-export async function exportFinanceTransactionCsvApi(
-  params: FinanceTransactionFilterQuery,
-) {
-  return requestClient.get<FinanceTransactionExportDto>(
-    '/finance/transaction/export',
-    {
-      params,
-    },
-  );
-}
+export * from './transaction';
diff --git a/apps/web-antd/src/api/finance/invoice.ts b/apps/web-antd/src/api/finance/invoice.ts
new file mode 100644
index 0000000..e8b85e3
--- /dev/null
+++ b/apps/web-antd/src/api/finance/invoice.ts
@@ -0,0 +1,206 @@
+/**
+ * 文件职责：财务中心发票管理 API 契约与请求封装。
+ */
+import { requestClient } from '#/api/request';
+
+/** 发票状态筛选值。 */
+export type FinanceInvoiceStatusFilter = 'all' | 'issued' | 'pending' | 'voided';
+
+/** 发票类型筛选值。 */
+export type FinanceInvoiceTypeFilter = 'all' | 'normal' | 'special';
+
+/** 发票设置详情。 */
+export interface FinanceInvoiceSettingDto {
+  autoIssueMaxAmount: number;
+  bankAccount?: string;
+  bankName?: string;
+  companyName: string;
+  enableAutoIssue: boolean;
+  enableElectronicNormalInvoice: boolean;
+  enableElectronicSpecialInvoice: boolean;
+  registeredAddress?: string;
+  registeredPhone?: string;
+  taxpayerNumber: string;
+}
+
+/** 保存发票设置请求。 */
+export interface SaveFinanceInvoiceSettingPayload
+  extends FinanceInvoiceSettingDto {}
+
+/** 发票记录列表查询参数。 */
+export interface FinanceInvoiceRecordListQuery {
+  endDate?: string;
+  invoiceType?: Exclude<FinanceInvoiceTypeFilter, 'all'>;
+  keyword?: string;
+  page: number;
+  pageSize: number;
+  startDate?: string;
+  status?: Exclude<FinanceInvoiceStatusFilter, 'all'>;
+}
+
+/** 发票统计结果。 */
+export interface FinanceInvoiceStatsDto {
+  currentMonthIssuedAmount: number;
+  currentMonthIssuedCount: number;
+  pendingCount: number;
+  voidedCount: number;
+}
+
+/** 发票记录列表项。 */
+export interface FinanceInvoiceRecordListItemDto {
+  amount: number;
+  applicantName: string;
+  appliedAt: string;
+  companyName: string;
+  invoiceNo: string;
+  invoiceType: string;
+  invoiceTypeText: string;
+  orderNo: string;
+  recordId: string;
+  status: string;
+  statusText: string;
+}
+
+/** 发票记录分页结果。 */
+export interface FinanceInvoiceRecordListResultDto {
+  items: FinanceInvoiceRecordListItemDto[];
+  page: number;
+  pageSize: number;
+  stats: FinanceInvoiceStatsDto;
+  totalCount: number;
+}
+
+/** 发票记录详情。 */
+export interface FinanceInvoiceRecordDetailDto {
+  amount: number;
+  applicantName: string;
+  appliedAt: string;
+  applyRemark?: string;
+  companyName: string;
+  contactEmail?: string;
+  contactPhone?: string;
+  invoiceNo: string;
+  invoiceType: string;
+  invoiceTypeText: string;
+  issueRemark?: string;
+  issuedAt?: string;
+  issuedByUserId?: string;
+  orderNo: string;
+  recordId: string;
+  status: string;
+  statusText: string;
+  taxpayerNumber?: string;
+  voidReason?: string;
+  voidedAt?: string;
+  voidedByUserId?: string;
+}
+
+/** 发票开票请求。 */
+export interface FinanceInvoiceIssuePayload {
+  contactEmail?: string;
+  issueRemark?: string;
+  recordId: string;
+}
+
+/** 发票开票结果。 */
+export interface FinanceInvoiceIssueResultDto {
+  amount: number;
+  companyName: string;
+  contactEmail?: string;
+  invoiceNo: string;
+  issuedAt: string;
+  recordId: string;
+  status: string;
+  statusText: string;
+}
+
+/** 发票作废请求。 */
+export interface FinanceInvoiceVoidPayload {
+  recordId: string;
+  voidReason: string;
+}
+
+/** 发票申请请求。 */
+export interface FinanceInvoiceApplyPayload {
+  amount: number;
+  applicantName: string;
+  appliedAt?: string;
+  applyRemark?: string;
+  companyName: string;
+  contactEmail?: string;
+  contactPhone?: string;
+  invoiceType: Exclude<FinanceInvoiceTypeFilter, 'all'>;
+  orderNo: string;
+  taxpayerNumber?: string;
+}
+
+/** 查询发票设置。 */
+export async function getFinanceInvoiceSettingDetailApi() {
+  return requestClient.get<FinanceInvoiceSettingDto>(
+    '/finance/invoice/settings/detail',
+  );
+}
+
+/** 保存发票设置。 */
+export async function saveFinanceInvoiceSettingApi(
+  payload: SaveFinanceInvoiceSettingPayload,
+) {
+  return requestClient.post<FinanceInvoiceSettingDto>(
+    '/finance/invoice/settings/save',
+    payload,
+  );
+}
+
+/** 查询发票记录列表。 */
+export async function getFinanceInvoiceRecordListApi(
+  params: FinanceInvoiceRecordListQuery,
+) {
+  return requestClient.get<FinanceInvoiceRecordListResultDto>(
+    '/finance/invoice/record/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询发票记录详情。 */
+export async function getFinanceInvoiceRecordDetailApi(params: {
+  recordId: string;
+}) {
+  return requestClient.get<FinanceInvoiceRecordDetailDto>(
+    '/finance/invoice/record/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 执行发票开票。 */
+export async function issueFinanceInvoiceRecordApi(
+  payload: FinanceInvoiceIssuePayload,
+) {
+  return requestClient.post<FinanceInvoiceIssueResultDto>(
+    '/finance/invoice/record/issue',
+    payload,
+  );
+}
+
+/** 执行发票作废。 */
+export async function voidFinanceInvoiceRecordApi(
+  payload: FinanceInvoiceVoidPayload,
+) {
+  return requestClient.post<FinanceInvoiceRecordDetailDto>(
+    '/finance/invoice/record/void',
+    payload,
+  );
+}
+
+/** 发起发票申请。 */
+export async function applyFinanceInvoiceRecordApi(
+  payload: FinanceInvoiceApplyPayload,
+) {
+  return requestClient.post<FinanceInvoiceRecordDetailDto>(
+    '/finance/invoice/record/apply',
+    payload,
+  );
+}
diff --git a/apps/web-antd/src/api/finance/transaction.ts b/apps/web-antd/src/api/finance/transaction.ts
new file mode 100644
index 0000000..44f9611
--- /dev/null
+++ b/apps/web-antd/src/api/finance/transaction.ts
@@ -0,0 +1,159 @@
+/**
+ * 文件职责：财务中心交易流水 API 契约与请求封装。
+ */
+import { requestClient } from '#/api/request';
+
+/** 交易类型筛选值。 */
+export type FinanceTransactionTypeFilter =
+  | 'all'
+  | 'income'
+  | 'point_redeem'
+  | 'refund'
+  | 'stored_card_recharge';
+
+/** 交易渠道筛选值。 */
+export type FinanceTransactionChannelFilter =
+  | 'all'
+  | 'delivery'
+  | 'dine_in'
+  | 'pickup';
+
+/** 交易支付方式筛选值。 */
+export type FinanceTransactionPaymentFilter =
+  | 'alipay'
+  | 'all'
+  | 'balance'
+  | 'card'
+  | 'cash'
+  | 'wechat';
+
+/** 交易流水筛选参数。 */
+export interface FinanceTransactionFilterQuery {
+  channel?: FinanceTransactionChannelFilter;
+  endDate?: string;
+  keyword?: string;
+  paymentMethod?: FinanceTransactionPaymentFilter;
+  startDate?: string;
+  storeId: string;
+  type?: FinanceTransactionTypeFilter;
+}
+
+/** 交易流水列表查询参数。 */
+export interface FinanceTransactionListQuery extends FinanceTransactionFilterQuery {
+  page: number;
+  pageSize: number;
+}
+
+/** 交易流水列表行。 */
+export interface FinanceTransactionListItemDto {
+  amount: number;
+  channel: string;
+  isIncome: boolean;
+  occurredAt: string;
+  orderNo?: string;
+  paymentMethod: string;
+  remark: string;
+  transactionId: string;
+  transactionNo: string;
+  type: string;
+  typeText: string;
+}
+
+/** 交易流水列表结果。 */
+export interface FinanceTransactionListResultDto {
+  items: FinanceTransactionListItemDto[];
+  page: number;
+  pageIncomeAmount: number;
+  pageRefundAmount: number;
+  pageSize: number;
+  total: number;
+}
+
+/** 交易流水统计结果。 */
+export interface FinanceTransactionStatsDto {
+  totalCount: number;
+  totalIncome: number;
+  totalRefund: number;
+}
+
+/** 交易流水详情。 */
+export interface FinanceTransactionDetailDto {
+  amount: number;
+  arrivedAmount?: number;
+  channel: string;
+  customerName: string;
+  customerPhone: string;
+  giftAmount?: number;
+  memberMobileMasked?: string;
+  memberName?: string;
+  occurredAt: string;
+  orderNo?: string;
+  paymentMethod: string;
+  pointBalanceAfterChange?: number;
+  pointChangeAmount?: number;
+  rechargeAmount?: number;
+  refundNo?: string;
+  refundReason?: string;
+  remark: string;
+  storeId: string;
+  transactionId: string;
+  transactionNo: string;
+  type: string;
+  typeText: string;
+}
+
+/** 交易流水导出结果。 */
+export interface FinanceTransactionExportDto {
+  fileContentBase64: string;
+  fileName: string;
+  totalCount: number;
+}
+
+/** 查询交易流水列表。 */
+export async function getFinanceTransactionListApi(
+  params: FinanceTransactionListQuery,
+) {
+  return requestClient.get<FinanceTransactionListResultDto>(
+    '/finance/transaction/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询交易流水统计。 */
+export async function getFinanceTransactionStatsApi(
+  params: FinanceTransactionFilterQuery,
+) {
+  return requestClient.get<FinanceTransactionStatsDto>(
+    '/finance/transaction/stats',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询交易流水详情。 */
+export async function getFinanceTransactionDetailApi(params: {
+  storeId: string;
+  transactionId: string;
+}) {
+  return requestClient.get<FinanceTransactionDetailDto>(
+    '/finance/transaction/detail',
+    {
+      params,
+    },
+  );
+}
+
+/** 导出交易流水 CSV。 */
+export async function exportFinanceTransactionCsvApi(
+  params: FinanceTransactionFilterQuery,
+) {
+  return requestClient.get<FinanceTransactionExportDto>(
+    '/finance/transaction/export',
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceDetailDrawer.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceDetailDrawer.vue
new file mode 100644
index 0000000..7ed69be
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceDetailDrawer.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票记录详情抽屉。
+ */
+import type { FinanceInvoiceRecordDetailDto } from '#/api/finance';
+
+import { Button, Drawer, Empty, Spin, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  resolveInvoiceStatusTagColor,
+  resolveInvoiceTypeTagColor,
+} from '../composables/invoice-page/helpers';
+
+interface Props {
+  detail: FinanceInvoiceRecordDetailDto | null;
+  loading: boolean;
+  open: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="620"
+    :title="`发票详情 ${props.detail?.invoiceNo ?? ''}`"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loading">
+      <template v-if="props.detail">
+        <div class="fi-section">
+          <div class="fi-section-title">基本信息</div>
+          <div class="fi-info-grid">
+            <div>
+              <span class="label">发票号码：</span>
+              <span class="fi-mono">{{ props.detail.invoiceNo }}</span>
+            </div>
+            <div>
+              <span class="label">状态：</span>
+              <Tag :color="resolveInvoiceStatusTagColor(props.detail.status)">
+                {{ props.detail.statusText }}
+              </Tag>
+            </div>
+            <div>
+              <span class="label">申请人：</span>
+              <span>{{ props.detail.applicantName || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">发票类型：</span>
+              <Tag :color="resolveInvoiceTypeTagColor(props.detail.invoiceType)">
+                {{ props.detail.invoiceTypeText || '--' }}
+              </Tag>
+            </div>
+            <div class="full">
+              <span class="label">公司抬头：</span>
+              <span>{{ props.detail.companyName || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">纳税人识别号：</span>
+              <span class="fi-mono">{{ props.detail.taxpayerNumber || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">开票金额：</span>
+              <span class="fi-amount-strong">{{ formatCurrency(props.detail.amount) }}</span>
+            </div>
+            <div class="full">
+              <span class="label">关联订单：</span>
+              <span class="fi-mono">{{ props.detail.orderNo || '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="fi-section">
+          <div class="fi-section-title">联系信息</div>
+          <div class="fi-info-grid">
+            <div>
+              <span class="label">接收邮箱：</span>
+              <span>{{ props.detail.contactEmail || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">联系电话：</span>
+              <span>{{ props.detail.contactPhone || '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="fi-section">
+          <div class="fi-section-title">状态记录</div>
+          <div class="fi-timeline">
+            <div class="fi-timeline-item">
+              <span class="text">提交申请</span>
+              <span class="time">{{ props.detail.appliedAt }}</span>
+            </div>
+            <div v-if="props.detail.issuedAt" class="fi-timeline-item">
+              <span class="text">开票完成</span>
+              <span class="time">{{ props.detail.issuedAt }}</span>
+            </div>
+            <div v-if="props.detail.voidedAt" class="fi-timeline-item">
+              <span class="text">发票作废</span>
+              <span class="time">{{ props.detail.voidedAt }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="fi-section">
+          <div class="fi-section-title">备注信息</div>
+          <div class="fi-remark-box">
+            <div class="fi-remark-line">
+              <span class="label">申请备注：</span>
+              <span>{{ props.detail.applyRemark || '无' }}</span>
+            </div>
+            <div class="fi-remark-line">
+              <span class="label">开票备注：</span>
+              <span>{{ props.detail.issueRemark || '无' }}</span>
+            </div>
+            <div class="fi-remark-line">
+              <span class="label">作废原因：</span>
+              <span>{{ props.detail.voidReason || '无' }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <Empty v-else description="暂无发票详情" />
+    </Spin>
+
+    <template #footer>
+      <Button @click="emit('close')">关闭</Button>
+    </template>
+  </Drawer>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceFilterBar.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceFilterBar.vue
new file mode 100644
index 0000000..56590b7
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceFilterBar.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票记录筛选工具栏。
+ */
+import type { FinanceInvoiceFilterState } from '../types';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input, Select } from 'ant-design-vue';
+
+import {
+  INVOICE_STATUS_OPTIONS,
+  INVOICE_TYPE_OPTIONS,
+} from '../composables/invoice-page/constants';
+
+interface Props {
+  filters: FinanceInvoiceFilterState;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'search'): void;
+  (event: 'update:endDate', value: string): void;
+  (event: 'update:invoiceType', value: string): void;
+  (event: 'update:keyword', value: string): void;
+  (event: 'update:startDate', value: string): void;
+  (event: 'update:status', value: string): void;
+}>();
+
+function handleStartDateChange(value: string | undefined) {
+  emit('update:startDate', String(value ?? ''));
+  emit('search');
+}
+
+function handleEndDateChange(value: string | undefined) {
+  emit('update:endDate', String(value ?? ''));
+  emit('search');
+}
+
+function handleStatusChange(value: unknown) {
+  emit('update:status', String(value ?? 'all'));
+  emit('search');
+}
+
+function handleInvoiceTypeChange(value: unknown) {
+  emit('update:invoiceType', String(value ?? 'all'));
+  emit('search');
+}
+
+function handleKeywordChange(value: string | undefined) {
+  emit('update:keyword', String(value ?? ''));
+}
+</script>
+
+<template>
+  <div class="fi-toolbar">
+    <Input
+      class="fi-date-input"
+      type="date"
+      :value="props.filters.startDate"
+      @update:value="(value) => handleStartDateChange(value)"
+    />
+    <span class="fi-date-sep">至</span>
+    <Input
+      class="fi-date-input"
+      type="date"
+      :value="props.filters.endDate"
+      @update:value="(value) => handleEndDateChange(value)"
+    />
+
+    <Select
+      class="fi-status-select"
+      :value="props.filters.status"
+      :options="INVOICE_STATUS_OPTIONS"
+      @update:value="(value) => handleStatusChange(value)"
+    />
+
+    <Select
+      class="fi-type-select"
+      :value="props.filters.invoiceType"
+      :options="INVOICE_TYPE_OPTIONS"
+      @update:value="(value) => handleInvoiceTypeChange(value)"
+    />
+
+    <div class="fi-toolbar-spacer" />
+
+    <Input
+      class="fi-search"
+      :value="props.filters.keyword"
+      placeholder="搜索发票号码/公司名"
+      allow-clear
+      @update:value="(value) => handleKeywordChange(value)"
+      @press-enter="emit('search')"
+    >
+      <template #prefix>
+        <IconifyIcon icon="lucide:search" class="fi-search-icon" />
+      </template>
+    </Input>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceIssueDrawer.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceIssueDrawer.vue
new file mode 100644
index 0000000..b6805a7
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceIssueDrawer.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票开票抽屉。
+ */
+import type {
+  FinanceInvoiceRecordDetailDto,
+  FinanceInvoiceRecordListItemDto,
+} from '#/api/finance';
+import type { FinanceInvoiceIssueFormState } from '../types';
+
+import { Button, Drawer, Form, Input, Spin, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  resolveInvoiceTypeTagColor,
+} from '../composables/invoice-page/helpers';
+
+interface Props {
+  detail: FinanceInvoiceRecordDetailDto | null;
+  form: FinanceInvoiceIssueFormState;
+  loadingDetail: boolean;
+  open: boolean;
+  submitting: boolean;
+  targetRecord: FinanceInvoiceRecordListItemDto | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'submit'): void;
+  (event: 'update:contactEmail', value: string): void;
+  (event: 'update:issueRemark', value: string): void;
+}>();
+
+function toStringValue(value: string | undefined) {
+  return String(value ?? '');
+}
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="560"
+    title="发票开票"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loadingDetail">
+      <div class="fi-section">
+        <div class="fi-section-title">开票信息</div>
+        <div class="fi-info-grid">
+          <div>
+            <span class="label">发票号码：</span>
+            <span class="fi-mono">{{ props.targetRecord?.invoiceNo || '--' }}</span>
+          </div>
+          <div>
+            <span class="label">发票类型：</span>
+            <Tag
+              :color="resolveInvoiceTypeTagColor(props.targetRecord?.invoiceType || '')"
+            >
+              {{ props.targetRecord?.invoiceTypeText || '--' }}
+            </Tag>
+          </div>
+          <div>
+            <span class="label">申请人：</span>
+            <span>{{ props.targetRecord?.applicantName || '--' }}</span>
+          </div>
+          <div>
+            <span class="label">开票金额：</span>
+            <span class="fi-amount-strong">{{ formatCurrency(Number(props.targetRecord?.amount || 0)) }}</span>
+          </div>
+          <div class="full">
+            <span class="label">公司抬头：</span>
+            <span>{{ props.targetRecord?.companyName || '--' }}</span>
+          </div>
+          <div class="full">
+            <span class="label">关联订单：</span>
+            <span class="fi-mono">{{ props.targetRecord?.orderNo || '--' }}</span>
+          </div>
+          <div class="full">
+            <span class="label">纳税人识别号：</span>
+            <span class="fi-mono">{{ props.detail?.taxpayerNumber || '--' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="fi-section">
+        <div class="fi-section-title">开票补充信息</div>
+        <Form layout="vertical">
+          <Form.Item label="接收邮箱">
+            <Input
+              :value="props.form.contactEmail"
+              placeholder="请输入开票接收邮箱"
+              @update:value="(value) => emit('update:contactEmail', toStringValue(value))"
+            />
+          </Form.Item>
+
+          <Form.Item label="开票备注">
+            <Input.TextArea
+              :value="props.form.issueRemark"
+              placeholder="请输入开票备注（选填）"
+              :maxlength="200"
+              :rows="4"
+              show-count
+              @update:value="(value) => emit('update:issueRemark', toStringValue(value))"
+            />
+          </Form.Item>
+        </Form>
+      </div>
+    </Spin>
+
+    <template #footer>
+      <div class="fi-drawer-footer">
+        <Button @click="emit('close')">取消</Button>
+        <Button type="primary" :loading="props.submitting" @click="emit('submit')">
+          确认开票
+        </Button>
+      </div>
+    </template>
+  </Drawer>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceIssueResultModal.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceIssueResultModal.vue
new file mode 100644
index 0000000..78965ac
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceIssueResultModal.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票开票成功结果弹窗。
+ */
+import type { FinanceInvoiceIssueResultDto } from '#/api/finance';
+
+import { Button } from 'ant-design-vue';
+import { Modal } from 'ant-design-vue';
+
+import { formatCurrency } from '../composables/invoice-page/helpers';
+
+interface Props {
+  open: boolean;
+  result: FinanceInvoiceIssueResultDto | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+</script>
+
+<template>
+  <Modal
+    :open="props.open"
+    title="开票完成"
+    :footer="null"
+    @cancel="emit('close')"
+  >
+    <div class="fi-issue-result">
+      <div class="fi-result-title">发票已成功开具</div>
+
+      <div class="fi-result-list">
+        <div class="fi-result-line">
+          <span class="label">发票号码</span>
+          <span class="value fi-mono">{{ props.result?.invoiceNo || '--' }}</span>
+        </div>
+        <div class="fi-result-line">
+          <span class="label">公司抬头</span>
+          <span class="value">{{ props.result?.companyName || '--' }}</span>
+        </div>
+        <div class="fi-result-line">
+          <span class="label">开票金额</span>
+          <span class="value">{{ formatCurrency(Number(props.result?.amount || 0)) }}</span>
+        </div>
+        <div class="fi-result-line">
+          <span class="label">接收邮箱</span>
+          <span class="value">{{ props.result?.contactEmail || '--' }}</span>
+        </div>
+        <div class="fi-result-line">
+          <span class="label">开票时间</span>
+          <span class="value">{{ props.result?.issuedAt || '--' }}</span>
+        </div>
+      </div>
+
+      <div class="fi-result-footer">
+        <Button type="primary" @click="emit('close')">我知道了</Button>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceSegmentTabs.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceSegmentTabs.vue
new file mode 100644
index 0000000..41a4113
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceSegmentTabs.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票管理分段切换栏。
+ */
+import type { FinanceInvoiceTabKey } from '../types';
+
+import { Segmented } from 'ant-design-vue';
+
+interface Props {
+  activeTab: FinanceInvoiceTabKey;
+  options: Array<{ label: string; value: FinanceInvoiceTabKey }>;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'update:activeTab', value: FinanceInvoiceTabKey): void;
+}>();
+</script>
+
+<template>
+  <div v-if="props.options.length > 0" class="fi-seg-wrap">
+    <Segmented
+      :value="props.activeTab"
+      :options="props.options"
+      @update:value="(value) => emit('update:activeTab', value as FinanceInvoiceTabKey)"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceSettingsConfirmModal.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceSettingsConfirmModal.vue
new file mode 100644
index 0000000..7131334
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceSettingsConfirmModal.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * 文件职责：保存发票设置确认弹窗。
+ */
+import type { FinanceInvoiceSettingFormState } from '../types';
+
+import { Modal } from 'ant-design-vue';
+
+import { formatCurrency } from '../composables/invoice-page/helpers';
+
+interface Props {
+  form: FinanceInvoiceSettingFormState;
+  open: boolean;
+  submitting: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'confirm'): void;
+}>();
+
+function resolveEnabledText(value: boolean) {
+  return value ? '已开启' : '已关闭';
+}
+</script>
+
+<template>
+  <Modal
+    :open="props.open"
+    title="确认保存发票设置"
+    ok-text="确认保存"
+    cancel-text="取消"
+    :confirm-loading="props.submitting"
+    @ok="emit('confirm')"
+    @cancel="emit('close')"
+  >
+    <div class="fi-settings-confirm">
+      <p class="fi-settings-desc">
+        即将更新企业开票信息与开票规则，请确认以下关键配置：
+      </p>
+
+      <div class="fi-settings-list">
+        <div class="fi-settings-line">
+          <span class="label">企业名称</span>
+          <span class="value">{{ props.form.companyName || '--' }}</span>
+        </div>
+        <div class="fi-settings-line">
+          <span class="label">纳税人识别号</span>
+          <span class="value fi-mono">{{ props.form.taxpayerNumber || '--' }}</span>
+        </div>
+        <div class="fi-settings-line">
+          <span class="label">电子普通发票</span>
+          <span class="value">{{ resolveEnabledText(props.form.enableElectronicNormalInvoice) }}</span>
+        </div>
+        <div class="fi-settings-line">
+          <span class="label">电子专用发票</span>
+          <span class="value">{{ resolveEnabledText(props.form.enableElectronicSpecialInvoice) }}</span>
+        </div>
+        <div class="fi-settings-line">
+          <span class="label">自动开票</span>
+          <span class="value">{{ resolveEnabledText(props.form.enableAutoIssue) }}</span>
+        </div>
+        <div class="fi-settings-line">
+          <span class="label">自动开票上限</span>
+          <span class="value">{{ formatCurrency(Number(props.form.autoIssueMaxAmount || 0)) }}</span>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceSettingsPanel.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceSettingsPanel.vue
new file mode 100644
index 0000000..eebcb93
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceSettingsPanel.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票设置表单区域。
+ */
+import type { FinanceInvoiceSettingFormState } from '../types';
+
+import { Button, Card, Divider, Form, Input, InputNumber, Switch } from 'ant-design-vue';
+
+interface Props {
+  canManageSettings: boolean;
+  form: FinanceInvoiceSettingFormState;
+  saving: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'reset'): void;
+  (event: 'save'): void;
+  (event: 'update:autoIssueMaxAmount', value: number): void;
+  (event: 'update:bankAccount', value: string): void;
+  (event: 'update:bankName', value: string): void;
+  (event: 'update:companyName', value: string): void;
+  (event: 'update:enableAutoIssue', value: boolean): void;
+  (event: 'update:enableElectronicNormalInvoice', value: boolean): void;
+  (event: 'update:enableElectronicSpecialInvoice', value: boolean): void;
+  (event: 'update:registeredAddress', value: string): void;
+  (event: 'update:registeredPhone', value: string): void;
+  (event: 'update:taxpayerNumber', value: string): void;
+}>();
+
+function toStringValue(value: string | undefined) {
+  return String(value ?? '');
+}
+
+function toNumberValue(value: null | number | string) {
+  const numeric = Number(value ?? 0);
+  return Number.isFinite(numeric) ? numeric : 0;
+}
+</script>
+
+<template>
+  <div class="fi-settings">
+    <Card>
+      <div class="fi-section-hd">企业开票信息</div>
+      <Form layout="vertical">
+        <div class="fi-form-grid">
+          <Form.Item label="企业名称" required>
+            <Input
+              :value="props.form.companyName"
+              placeholder="请输入企业全称"
+              :disabled="!props.canManageSettings"
+              @update:value="(value) => emit('update:companyName', toStringValue(value))"
+            />
+          </Form.Item>
+
+          <Form.Item label="纳税人识别号" required>
+            <Input
+              :value="props.form.taxpayerNumber"
+              placeholder="请输入统一社会信用代码"
+              :disabled="!props.canManageSettings"
+              @update:value="(value) => emit('update:taxpayerNumber', toStringValue(value))"
+            />
+          </Form.Item>
+
+          <Form.Item label="注册地址">
+            <Input
+              :value="props.form.registeredAddress"
+              placeholder="请输入注册地址"
+              :disabled="!props.canManageSettings"
+              @update:value="(value) => emit('update:registeredAddress', toStringValue(value))"
+            />
+          </Form.Item>
+
+          <Form.Item label="注册电话">
+            <Input
+              :value="props.form.registeredPhone"
+              placeholder="请输入注册电话"
+              :disabled="!props.canManageSettings"
+              @update:value="(value) => emit('update:registeredPhone', toStringValue(value))"
+            />
+          </Form.Item>
+
+          <Form.Item label="开户银行">
+            <Input
+              :value="props.form.bankName"
+              placeholder="请输入开户银行名称"
+              :disabled="!props.canManageSettings"
+              @update:value="(value) => emit('update:bankName', toStringValue(value))"
+            />
+          </Form.Item>
+
+          <Form.Item label="银行账号">
+            <Input
+              :value="props.form.bankAccount"
+              placeholder="请输入银行账号"
+              :disabled="!props.canManageSettings"
+              @update:value="(value) => emit('update:bankAccount', toStringValue(value))"
+            />
+          </Form.Item>
+        </div>
+      </Form>
+    </Card>
+
+    <Card>
+      <div class="fi-section-hd">发票类型设置</div>
+      <div class="fi-toggle-row">
+        <Switch
+          :checked="props.form.enableElectronicNormalInvoice"
+          :disabled="!props.canManageSettings"
+          @update:checked="(value) => emit('update:enableElectronicNormalInvoice', Boolean(value))"
+        />
+        <span class="fi-toggle-label">电子普通发票</span>
+      </div>
+
+      <div class="fi-toggle-row">
+        <Switch
+          :checked="props.form.enableElectronicSpecialInvoice"
+          :disabled="!props.canManageSettings"
+          @update:checked="(value) => emit('update:enableElectronicSpecialInvoice', Boolean(value))"
+        />
+        <span class="fi-toggle-label">电子专用发票</span>
+        <span class="fi-toggle-hint">（需先完成税务资质认证）</span>
+      </div>
+    </Card>
+
+    <Card>
+      <div class="fi-section-hd">自动开票设置</div>
+      <div class="fi-toggle-row">
+        <Switch
+          :checked="props.form.enableAutoIssue"
+          :disabled="!props.canManageSettings"
+          @update:checked="(value) => emit('update:enableAutoIssue', Boolean(value))"
+        />
+        <span class="fi-toggle-label">自动开票</span>
+        <span class="fi-toggle-hint">开启后，顾客申请发票将自动开具</span>
+      </div>
+
+      <Divider />
+
+      <Form layout="vertical" class="fi-auto-form">
+        <Form.Item label="单张发票最大金额">
+          <InputNumber
+            class="fi-max-amount-input"
+            :value="props.form.autoIssueMaxAmount"
+            :min="0"
+            :precision="2"
+            :step="100"
+            :disabled="!props.canManageSettings"
+            :formatter="(value) => `￥ ${value}`"
+            :parser="(value) => String(value || '').replace(/￥\s?/g, '')"
+            @update:value="(value) => emit('update:autoIssueMaxAmount', toNumberValue(value))"
+          />
+          <div class="fi-toggle-hint">超过此金额的发票需人工审核后开具</div>
+        </Form.Item>
+      </Form>
+    </Card>
+
+    <div class="fi-save-bar">
+      <Button :disabled="!props.canManageSettings" @click="emit('reset')">重置</Button>
+      <Button
+        type="primary"
+        :disabled="!props.canManageSettings"
+        :loading="props.saving"
+        @click="emit('save')"
+      >
+        保存设置
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceStatsBar.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceStatsBar.vue
new file mode 100644
index 0000000..c6a0673
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceStatsBar.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票记录统计卡片栏。
+ */
+import type { FinanceInvoiceStatsDto } from '#/api/finance';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { formatCurrency } from '../composables/invoice-page/helpers';
+
+interface Props {
+  stats: FinanceInvoiceStatsDto;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="fi-stats">
+    <div class="fi-stat-card">
+      <div class="fi-stat-label">
+        <IconifyIcon icon="lucide:receipt-text" class="fi-stat-icon" />
+        <span>本月开票</span>
+      </div>
+      <div class="fi-stat-val">{{ formatCurrency(props.stats.currentMonthIssuedAmount) }}</div>
+      <div class="fi-stat-sub">共 {{ props.stats.currentMonthIssuedCount }} 张</div>
+    </div>
+
+    <div class="fi-stat-card warn">
+      <div class="fi-stat-label">
+        <IconifyIcon icon="lucide:clock" class="fi-stat-icon" />
+        <span>待开票</span>
+      </div>
+      <div class="fi-stat-val">{{ props.stats.pendingCount }}</div>
+      <div class="fi-stat-sub">张待处理</div>
+    </div>
+
+    <div class="fi-stat-card danger">
+      <div class="fi-stat-label">
+        <IconifyIcon icon="lucide:ban" class="fi-stat-icon" />
+        <span>已作废</span>
+      </div>
+      <div class="fi-stat-val">{{ props.stats.voidedCount }}</div>
+      <div class="fi-stat-sub">张已作废</div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceTableCard.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceTableCard.vue
new file mode 100644
index 0000000..c6b6894
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceTableCard.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票记录表格与分页。
+ */
+import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
+
+import type { FinanceInvoiceRecordListItemDto } from '#/api/finance';
+import type { VNode } from 'vue';
+
+import { h } from 'vue';
+
+import { Button, Table, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  isIssuedInvoice,
+  isPendingInvoice,
+  resolveInvoiceStatusTagColor,
+  resolveInvoiceTypeTagColor,
+} from '../composables/invoice-page/helpers';
+
+interface PaginationState {
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
+interface Props {
+  canIssue: boolean;
+  canVoid: boolean;
+  loading: boolean;
+  pagination: PaginationState;
+  rows: FinanceInvoiceRecordListItemDto[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'detail', recordId: string): void;
+  (event: 'issue', row: FinanceInvoiceRecordListItemDto): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+  (event: 'void', row: FinanceInvoiceRecordListItemDto): void;
+}>();
+
+function renderActionButtons(row: FinanceInvoiceRecordListItemDto) {
+  const buttons: VNode[] = [];
+
+  if (isPendingInvoice(row.status)) {
+    if (props.canIssue) {
+      buttons.push(
+        h(
+          Button,
+          {
+            type: 'link',
+            class: 'fi-link-action',
+            onClick: () => emit('issue', row),
+          },
+          () => '开票',
+        ),
+      );
+    } else {
+      buttons.push(
+        h(
+          Button,
+          {
+            type: 'link',
+            class: 'fi-link-action',
+            onClick: () => emit('detail', row.recordId),
+          },
+          () => '查看',
+        ),
+      );
+    }
+
+    return h('div', { class: 'fi-action-wrap' }, buttons);
+  }
+
+  buttons.push(
+    h(
+      Button,
+      {
+        type: 'link',
+        class: 'fi-link-action',
+        onClick: () => emit('detail', row.recordId),
+      },
+      () => '查看',
+    ),
+  );
+
+  if (isIssuedInvoice(row.status) && props.canVoid) {
+    buttons.push(
+      h(
+        Button,
+        {
+          type: 'link',
+          danger: true,
+          class: 'fi-link-action',
+          onClick: () => emit('void', row),
+        },
+        () => '作废',
+      ),
+    );
+  }
+
+  return h('div', { class: 'fi-action-wrap' }, buttons);
+}
+
+const columns: TableProps['columns'] = [
+  {
+    title: '发票号码',
+    dataIndex: 'invoiceNo',
+    width: 190,
+    customRender: ({ record }) =>
+      h(
+        'span',
+        {
+          class: 'fi-mono',
+        },
+        String(record.invoiceNo || '--'),
+      ),
+  },
+  {
+    title: '申请人 / 公司名',
+    dataIndex: 'companyName',
+    width: 220,
+    customRender: ({ record }) =>
+      h('div', { class: 'fi-company-cell' }, [
+        h('div', { class: 'fi-applicant' }, String(record.applicantName || '--')),
+        h('div', { class: 'fi-company' }, String(record.companyName || '--')),
+      ]),
+  },
+  {
+    title: '发票类型',
+    dataIndex: 'invoiceTypeText',
+    width: 110,
+    customRender: ({ record }) =>
+      h(
+        Tag,
+        { color: resolveInvoiceTypeTagColor(String(record.invoiceType || '')) },
+        () => String(record.invoiceTypeText || '--'),
+      ),
+  },
+  {
+    title: '金额',
+    dataIndex: 'amount',
+    width: 130,
+    align: 'right',
+    customRender: ({ record }) =>
+      h('span', { class: 'fi-amount' }, formatCurrency(Number(record.amount || 0))),
+  },
+  {
+    title: '关联订单',
+    dataIndex: 'orderNo',
+    width: 170,
+    customRender: ({ text }) =>
+      h('span', { class: 'fi-mono' }, String(text || '--')),
+  },
+  {
+    title: '状态',
+    dataIndex: 'statusText',
+    width: 100,
+    customRender: ({ record }) =>
+      h(
+        Tag,
+        { color: resolveInvoiceStatusTagColor(String(record.status || '')) },
+        () => String(record.statusText || '--'),
+      ),
+  },
+  {
+    title: '申请时间',
+    dataIndex: 'appliedAt',
+    width: 180,
+    customRender: ({ text }) => h('span', { class: 'fi-time' }, String(text || '--')),
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 150,
+    customRender: ({ record }) => renderActionButtons(record),
+  },
+];
+
+function handleTableChange(next: TablePaginationConfig) {
+  emit('pageChange', Number(next.current || 1), Number(next.pageSize || 10));
+}
+</script>
+
+<template>
+  <div class="fi-table-card">
+    <Table
+      row-key="recordId"
+      :columns="columns"
+      :data-source="props.rows"
+      :loading="props.loading"
+      :pagination="{
+        current: props.pagination.page,
+        pageSize: props.pagination.pageSize,
+        total: props.pagination.totalCount,
+        showSizeChanger: true,
+        pageSizeOptions: ['10', '20', '50'],
+        showTotal: (total: number) => `共 ${total} 条`,
+      }"
+      @change="handleTableChange"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/components/InvoiceVoidConfirmModal.vue b/apps/web-antd/src/views/finance/invoice/components/InvoiceVoidConfirmModal.vue
new file mode 100644
index 0000000..07cb1a5
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/components/InvoiceVoidConfirmModal.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票作废确认弹窗。
+ */
+import type { FinanceInvoiceRecordListItemDto } from '#/api/finance';
+import type { FinanceInvoiceVoidFormState } from '../types';
+
+import { Modal, Input } from 'ant-design-vue';
+
+import { formatCurrency } from '../composables/invoice-page/helpers';
+
+interface Props {
+  form: FinanceInvoiceVoidFormState;
+  open: boolean;
+  submitting: boolean;
+  targetRecord: FinanceInvoiceRecordListItemDto | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'submit'): void;
+  (event: 'update:voidReason', value: string): void;
+}>();
+
+function toStringValue(value: string | undefined) {
+  return String(value ?? '');
+}
+</script>
+
+<template>
+  <Modal
+    :open="props.open"
+    title="确认作废发票"
+    ok-text="确认作废"
+    cancel-text="取消"
+    ok-type="danger"
+    :confirm-loading="props.submitting"
+    @ok="emit('submit')"
+    @cancel="emit('close')"
+  >
+    <div class="fi-void-modal">
+      <p class="fi-void-warning">发票作废后不可恢复，请确认本次操作。</p>
+
+      <div class="fi-void-summary">
+        <div class="fi-void-line">
+          <span class="label">发票号码</span>
+          <span class="value fi-mono">{{ props.targetRecord?.invoiceNo || '--' }}</span>
+        </div>
+        <div class="fi-void-line">
+          <span class="label">公司抬头</span>
+          <span class="value">{{ props.targetRecord?.companyName || '--' }}</span>
+        </div>
+        <div class="fi-void-line">
+          <span class="label">开票金额</span>
+          <span class="value">{{ formatCurrency(Number(props.targetRecord?.amount || 0)) }}</span>
+        </div>
+      </div>
+
+      <Input.TextArea
+        :value="props.form.voidReason"
+        :rows="4"
+        :maxlength="200"
+        show-count
+        placeholder="请输入作废原因"
+        @update:value="(value) => emit('update:voidReason', toStringValue(value))"
+      />
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/finance/invoice/composables/invoice-page/constants.ts b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/constants.ts
new file mode 100644
index 0000000..bed2d41
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/constants.ts
@@ -0,0 +1,108 @@
+import type {
+  FinanceInvoiceSettingFormState,
+  FinanceInvoiceTabKey,
+  OptionItem,
+} from '../../types';
+
+/**
+ * 文件职责：发票管理页面常量定义。
+ */
+import type { FinanceInvoiceStatsDto } from '#/api/finance';
+
+import { getMonthFirstDateString, getTodayDateString } from './helpers';
+
+/** 发票管理页面查看权限。 */
+export const FINANCE_INVOICE_VIEW_PERMISSION = 'tenant:finance:invoice:view';
+
+/** 发票开票权限。 */
+export const FINANCE_INVOICE_ISSUE_PERMISSION = 'tenant:finance:invoice:issue';
+
+/** 发票作废权限。 */
+export const FINANCE_INVOICE_VOID_PERMISSION = 'tenant:finance:invoice:void';
+
+/** 发票设置权限。 */
+export const FINANCE_INVOICE_SETTINGS_PERMISSION =
+  'tenant:finance:invoice:settings';
+
+/** 分段选项。 */
+export const INVOICE_TAB_OPTIONS: Array<{
+  label: string;
+  value: FinanceInvoiceTabKey;
+}> = [
+  { label: '开票记录', value: 'records' },
+  { label: '发票设置', value: 'settings' },
+];
+
+/** 发票状态筛选项。 */
+export const INVOICE_STATUS_OPTIONS: OptionItem[] = [
+  { label: '全部状态', value: 'all' },
+  { label: '待开票', value: 'pending' },
+  { label: '已开票', value: 'issued' },
+  { label: '已作废', value: 'voided' },
+];
+
+/** 发票类型筛选项。 */
+export const INVOICE_TYPE_OPTIONS: OptionItem[] = [
+  { label: '全部类型', value: 'all' },
+  { label: '普通发票', value: 'normal' },
+  { label: '专用发票', value: 'special' },
+];
+
+/** 默认统计数据。 */
+export const DEFAULT_INVOICE_STATS: FinanceInvoiceStatsDto = {
+  currentMonthIssuedAmount: 0,
+  currentMonthIssuedCount: 0,
+  pendingCount: 0,
+  voidedCount: 0,
+};
+
+/** 创建默认筛选条件。 */
+export function createDefaultFilters() {
+  return {
+    startDate: getMonthFirstDateString(),
+    endDate: getTodayDateString(),
+    status: 'all',
+    invoiceType: 'all',
+    keyword: '',
+  };
+}
+
+/** 创建默认分页。 */
+export function createDefaultPagination() {
+  return {
+    page: 1,
+    pageSize: 10,
+    totalCount: 0,
+  };
+}
+
+/** 创建默认设置表单。 */
+export function createDefaultSettingsForm(): FinanceInvoiceSettingFormState {
+  return {
+    companyName: '',
+    taxpayerNumber: '',
+    registeredAddress: '',
+    registeredPhone: '',
+    bankName: '',
+    bankAccount: '',
+    enableElectronicNormalInvoice: true,
+    enableElectronicSpecialInvoice: false,
+    enableAutoIssue: false,
+    autoIssueMaxAmount: 10_000,
+  };
+}
+
+/** 创建默认开票表单。 */
+export function createDefaultIssueForm() {
+  return {
+    contactEmail: '',
+    issueRemark: '',
+  };
+}
+
+/** 创建默认作废表单。 */
+export function createDefaultVoidForm() {
+  return {
+    voidReason: '',
+  };
+}
diff --git a/apps/web-antd/src/views/finance/invoice/composables/invoice-page/data-actions.ts b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/data-actions.ts
new file mode 100644
index 0000000..b56c6b5
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/data-actions.ts
@@ -0,0 +1,126 @@
+import type {
+  FinanceInvoiceRecordListItemDto,
+  FinanceInvoiceSettingDto,
+  FinanceInvoiceStatsDto,
+} from '#/api/finance';
+import type {
+  FinanceInvoiceFilterState,
+  FinanceInvoicePaginationState,
+  FinanceInvoiceSettingFormState,
+} from '../../types';
+
+/**
+ * 文件职责：发票管理页面数据加载动作。
+ */
+import {
+  getFinanceInvoiceRecordListApi,
+  getFinanceInvoiceSettingDetailApi,
+} from '#/api/finance';
+
+import {
+  applySettingDtoToForm,
+  buildInvoiceListQuery,
+  cloneSettingsForm,
+} from './helpers';
+
+interface DataActionOptions {
+  canViewRecords: { value: boolean };
+  canViewSettings: { value: boolean };
+  createDefaultSettingsForm: () => FinanceInvoiceSettingFormState;
+  filters: FinanceInvoiceFilterState;
+  isListLoading: { value: boolean };
+  isSettingsLoading: { value: boolean };
+  pagination: FinanceInvoicePaginationState;
+  rows: { value: FinanceInvoiceRecordListItemDto[] };
+  settingForm: FinanceInvoiceSettingFormState;
+  settingSnapshot: { value: FinanceInvoiceSettingFormState };
+  stats: FinanceInvoiceStatsDto;
+}
+
+/** 创建页面数据动作。 */
+export function createDataActions(options: DataActionOptions) {
+  function resetStats() {
+    options.stats.currentMonthIssuedAmount = 0;
+    options.stats.currentMonthIssuedCount = 0;
+    options.stats.pendingCount = 0;
+    options.stats.voidedCount = 0;
+  }
+
+  function clearRecordData() {
+    options.rows.value = [];
+    options.pagination.totalCount = 0;
+    resetStats();
+  }
+
+  function resetSettings() {
+    const defaults = options.createDefaultSettingsForm();
+    Object.assign(options.settingForm, defaults);
+    options.settingSnapshot.value = cloneSettingsForm(defaults);
+  }
+
+  function applySettingsResult(result: FinanceInvoiceSettingDto) {
+    applySettingDtoToForm(options.settingForm, result);
+    options.settingSnapshot.value = cloneSettingsForm(options.settingForm);
+  }
+
+  async function loadRecordList() {
+    if (!options.canViewRecords.value) {
+      clearRecordData();
+      return;
+    }
+
+    options.isListLoading.value = true;
+    try {
+      const result = await getFinanceInvoiceRecordListApi(
+        buildInvoiceListQuery(options.filters, options.pagination),
+      );
+
+      options.rows.value = result.items;
+      options.pagination.page = result.page;
+      options.pagination.pageSize = result.pageSize;
+      options.pagination.totalCount = result.totalCount;
+
+      options.stats.currentMonthIssuedAmount =
+        result.stats.currentMonthIssuedAmount;
+      options.stats.currentMonthIssuedCount = result.stats.currentMonthIssuedCount;
+      options.stats.pendingCount = result.stats.pendingCount;
+      options.stats.voidedCount = result.stats.voidedCount;
+    } finally {
+      options.isListLoading.value = false;
+    }
+  }
+
+  async function loadSettings() {
+    if (!options.canViewSettings.value) {
+      resetSettings();
+      return;
+    }
+
+    options.isSettingsLoading.value = true;
+    try {
+      const result = await getFinanceInvoiceSettingDetailApi();
+      applySettingsResult(result);
+    } finally {
+      options.isSettingsLoading.value = false;
+    }
+  }
+
+  function clearByPermission() {
+    if (!options.canViewRecords.value) {
+      clearRecordData();
+    }
+
+    if (!options.canViewSettings.value) {
+      resetSettings();
+    }
+  }
+
+  return {
+    applySettingsResult,
+    clearByPermission,
+    clearRecordData,
+    loadRecordList,
+    loadSettings,
+    resetSettings,
+  };
+}
diff --git a/apps/web-antd/src/views/finance/invoice/composables/invoice-page/drawer-actions.ts b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/drawer-actions.ts
new file mode 100644
index 0000000..b3a4e35
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/drawer-actions.ts
@@ -0,0 +1,253 @@
+import type {
+  FinanceInvoiceIssueResultDto,
+  FinanceInvoiceRecordDetailDto,
+  FinanceInvoiceRecordListItemDto,
+} from '#/api/finance';
+import type {
+  FinanceInvoiceIssueFormState,
+  FinanceInvoiceVoidFormState,
+} from '../../types';
+
+/**
+ * 文件职责：发票管理页面抽屉与弹窗动作。
+ */
+import {
+  getFinanceInvoiceRecordDetailApi,
+  issueFinanceInvoiceRecordApi,
+  voidFinanceInvoiceRecordApi,
+} from '#/api/finance';
+
+import { message } from 'ant-design-vue';
+
+import { isPendingInvoice, toOptionalTrimmed } from './helpers';
+
+interface DrawerActionOptions {
+  canIssue: { value: boolean };
+  canVoid: { value: boolean };
+  detail: { value: FinanceInvoiceRecordDetailDto | null };
+  isDetailDrawerOpen: { value: boolean };
+  isDetailLoading: { value: boolean };
+  isIssueDetailLoading: { value: boolean };
+  isIssueDrawerOpen: { value: boolean };
+  isIssueResultModalOpen: { value: boolean };
+  isIssueSubmitting: { value: boolean };
+  isVoidModalOpen: { value: boolean };
+  isVoidSubmitting: { value: boolean };
+  issueDetail: { value: FinanceInvoiceRecordDetailDto | null };
+  issueForm: FinanceInvoiceIssueFormState;
+  issueResult: { value: FinanceInvoiceIssueResultDto | null };
+  issueTargetRecord: { value: FinanceInvoiceRecordListItemDto | null };
+  reloadRecordList: () => Promise<void>;
+  voidForm: FinanceInvoiceVoidFormState;
+  voidTargetRecord: { value: FinanceInvoiceRecordListItemDto | null };
+}
+
+/** 创建抽屉与弹窗动作。 */
+export function createDrawerActions(options: DrawerActionOptions) {
+  async function loadDetail(recordId: string) {
+    const result = await getFinanceInvoiceRecordDetailApi({ recordId });
+    options.detail.value = result;
+    return result;
+  }
+
+  function setDetailDrawerOpen(value: boolean) {
+    options.isDetailDrawerOpen.value = value;
+    if (!value) {
+      options.detail.value = null;
+    }
+  }
+
+  function setIssueDrawerOpen(value: boolean) {
+    options.isIssueDrawerOpen.value = value;
+    if (!value) {
+      options.issueTargetRecord.value = null;
+      options.issueDetail.value = null;
+      options.issueForm.contactEmail = '';
+      options.issueForm.issueRemark = '';
+    }
+  }
+
+  function setVoidModalOpen(value: boolean) {
+    options.isVoidModalOpen.value = value;
+    if (!value) {
+      options.voidTargetRecord.value = null;
+      options.voidForm.voidReason = '';
+    }
+  }
+
+  function setIssueResultModalOpen(value: boolean) {
+    options.isIssueResultModalOpen.value = value;
+    if (!value) {
+      options.issueResult.value = null;
+    }
+  }
+
+  async function openDetail(recordId: string) {
+    if (!recordId) {
+      return;
+    }
+
+    options.isDetailDrawerOpen.value = true;
+    options.isDetailLoading.value = true;
+    try {
+      await loadDetail(recordId);
+    } finally {
+      options.isDetailLoading.value = false;
+    }
+  }
+
+  async function openIssue(record: FinanceInvoiceRecordListItemDto) {
+    if (!options.canIssue.value) {
+      message.warning('当前账号暂无开票权限');
+      return;
+    }
+
+    if (!isPendingInvoice(record.status)) {
+      message.warning('仅待开票记录可执行开票');
+      return;
+    }
+
+    options.issueTargetRecord.value = record;
+    options.issueForm.contactEmail = '';
+    options.issueForm.issueRemark = '';
+    options.issueDetail.value = null;
+    options.isIssueDrawerOpen.value = true;
+
+    options.isIssueDetailLoading.value = true;
+    try {
+      const detail = await getFinanceInvoiceRecordDetailApi({
+        recordId: record.recordId,
+      });
+      options.issueDetail.value = detail;
+      options.issueForm.contactEmail = detail.contactEmail ?? '';
+    } finally {
+      options.isIssueDetailLoading.value = false;
+    }
+  }
+
+  async function refreshOpenDetailAfterMutation(recordId: string) {
+    if (!options.isDetailDrawerOpen.value) {
+      return;
+    }
+
+    if (options.detail.value?.recordId !== recordId) {
+      return;
+    }
+
+    options.isDetailLoading.value = true;
+    try {
+      await loadDetail(recordId);
+    } finally {
+      options.isDetailLoading.value = false;
+    }
+  }
+
+  async function submitIssue() {
+    if (!options.canIssue.value) {
+      message.warning('当前账号暂无开票权限');
+      return;
+    }
+
+    const target = options.issueTargetRecord.value;
+    if (!target?.recordId) {
+      message.warning('请选择待开票记录');
+      return;
+    }
+
+    if (!isPendingInvoice(target.status)) {
+      message.warning('当前记录状态不可开票');
+      return;
+    }
+
+    const email = options.issueForm.contactEmail.trim();
+    if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      message.warning('请填写正确的邮箱地址');
+      return;
+    }
+
+    options.isIssueSubmitting.value = true;
+    try {
+      const result = await issueFinanceInvoiceRecordApi({
+        recordId: target.recordId,
+        contactEmail: toOptionalTrimmed(options.issueForm.contactEmail),
+        issueRemark: toOptionalTrimmed(options.issueForm.issueRemark),
+      });
+
+      options.issueResult.value = result;
+      options.isIssueDrawerOpen.value = false;
+      options.isIssueResultModalOpen.value = true;
+      message.success('发票开具成功');
+
+      await options.reloadRecordList();
+      await refreshOpenDetailAfterMutation(target.recordId);
+    } finally {
+      options.isIssueSubmitting.value = false;
+    }
+  }
+
+  function openVoid(record: FinanceInvoiceRecordListItemDto) {
+    if (!options.canVoid.value) {
+      message.warning('当前账号暂无作废权限');
+      return;
+    }
+
+    options.voidTargetRecord.value = record;
+    options.voidForm.voidReason = '';
+    options.isVoidModalOpen.value = true;
+  }
+
+  async function submitVoid() {
+    if (!options.canVoid.value) {
+      message.warning('当前账号暂无作废权限');
+      return;
+    }
+
+    const target = options.voidTargetRecord.value;
+    if (!target?.recordId) {
+      message.warning('请选择需要作废的发票');
+      return;
+    }
+
+    const reason = options.voidForm.voidReason.trim();
+    if (!reason) {
+      message.warning('请填写作废原因');
+      return;
+    }
+
+    options.isVoidSubmitting.value = true;
+    try {
+      const detail = await voidFinanceInvoiceRecordApi({
+        recordId: target.recordId,
+        voidReason: reason,
+      });
+
+      message.success('发票已作废');
+      options.isVoidModalOpen.value = false;
+      options.voidTargetRecord.value = null;
+      options.voidForm.voidReason = '';
+
+      if (
+        options.isDetailDrawerOpen.value &&
+        options.detail.value?.recordId === detail.recordId
+      ) {
+        options.detail.value = detail;
+      }
+
+      await options.reloadRecordList();
+    } finally {
+      options.isVoidSubmitting.value = false;
+    }
+  }
+
+  return {
+    openDetail,
+    openIssue,
+    openVoid,
+    setDetailDrawerOpen,
+    setIssueDrawerOpen,
+    setIssueResultModalOpen,
+    setVoidModalOpen,
+    submitIssue,
+    submitVoid,
+  };
+}
diff --git a/apps/web-antd/src/views/finance/invoice/composables/invoice-page/helpers.ts b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/helpers.ts
new file mode 100644
index 0000000..e05c28e
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/helpers.ts
@@ -0,0 +1,173 @@
+import type {
+  FinanceInvoiceRecordListQuery,
+  FinanceInvoiceSettingDto,
+  FinanceInvoiceStatusFilter,
+  FinanceInvoiceTypeFilter,
+} from '#/api/finance';
+import type {
+  FinanceInvoiceFilterState,
+  FinanceInvoicePaginationState,
+  FinanceInvoiceSettingFormState,
+} from '../../types';
+
+/**
+ * 文件职责：发票管理页面纯函数工具。
+ */
+
+function formatDate(date: Date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function normalizeStatus(
+  status: FinanceInvoiceStatusFilter,
+): Exclude<FinanceInvoiceStatusFilter, 'all'> | undefined {
+  return status === 'all' ? undefined : status;
+}
+
+function normalizeInvoiceType(
+  invoiceType: FinanceInvoiceTypeFilter,
+): Exclude<FinanceInvoiceTypeFilter, 'all'> | undefined {
+  return invoiceType === 'all' ? undefined : invoiceType;
+}
+
+/** 获取今天日期字符串（yyyy-MM-dd）。 */
+export function getTodayDateString() {
+  return formatDate(new Date());
+}
+
+/** 获取当月第一天日期字符串（yyyy-MM-dd）。 */
+export function getMonthFirstDateString() {
+  const now = new Date();
+  return formatDate(new Date(now.getFullYear(), now.getMonth(), 1));
+}
+
+/** 构建发票记录列表查询参数。 */
+export function buildInvoiceListQuery(
+  filters: FinanceInvoiceFilterState,
+  pagination: FinanceInvoicePaginationState,
+): FinanceInvoiceRecordListQuery {
+  return {
+    page: pagination.page,
+    pageSize: pagination.pageSize,
+    startDate: filters.startDate || undefined,
+    endDate: filters.endDate || undefined,
+    status: normalizeStatus(filters.status),
+    invoiceType: normalizeInvoiceType(filters.invoiceType),
+    keyword: filters.keyword.trim() || undefined,
+  };
+}
+
+/** 判断日期范围是否合法。 */
+export function isDateRangeInvalid(filters: FinanceInvoiceFilterState) {
+  if (!filters.startDate || !filters.endDate) {
+    return false;
+  }
+  return filters.startDate > filters.endDate;
+}
+
+/** 货币格式化（人民币）。 */
+export function formatCurrency(value: number) {
+  return new Intl.NumberFormat('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(Number.isFinite(value) ? value : 0);
+}
+
+/** 发票类型标签颜色。 */
+export function resolveInvoiceTypeTagColor(type: string) {
+  if (type === 'normal') return 'blue';
+  if (type === 'special') return 'purple';
+  return 'default';
+}
+
+/** 发票状态标签颜色。 */
+export function resolveInvoiceStatusTagColor(status: string) {
+  if (status === 'pending') return 'orange';
+  if (status === 'issued') return 'green';
+  if (status === 'voided') return 'default';
+  return 'default';
+}
+
+/** 是否为待开票状态。 */
+export function isPendingInvoice(status: string) {
+  return status === 'pending';
+}
+
+/** 是否为已开票状态。 */
+export function isIssuedInvoice(status: string) {
+  return status === 'issued';
+}
+
+/** 应用设置 DTO 到表单。 */
+export function applySettingDtoToForm(
+  target: FinanceInvoiceSettingFormState,
+  source: FinanceInvoiceSettingDto,
+) {
+  target.companyName = source.companyName || '';
+  target.taxpayerNumber = source.taxpayerNumber || '';
+  target.registeredAddress = source.registeredAddress || '';
+  target.registeredPhone = source.registeredPhone || '';
+  target.bankName = source.bankName || '';
+  target.bankAccount = source.bankAccount || '';
+  target.enableElectronicNormalInvoice = Boolean(
+    source.enableElectronicNormalInvoice,
+  );
+  target.enableElectronicSpecialInvoice = Boolean(
+    source.enableElectronicSpecialInvoice,
+  );
+  target.enableAutoIssue = Boolean(source.enableAutoIssue);
+  target.autoIssueMaxAmount = Number(source.autoIssueMaxAmount || 0);
+}
+
+/** 深拷贝设置表单快照。 */
+export function cloneSettingsForm(
+  source: FinanceInvoiceSettingFormState,
+): FinanceInvoiceSettingFormState {
+  return {
+    companyName: source.companyName,
+    taxpayerNumber: source.taxpayerNumber,
+    registeredAddress: source.registeredAddress,
+    registeredPhone: source.registeredPhone,
+    bankName: source.bankName,
+    bankAccount: source.bankAccount,
+    enableElectronicNormalInvoice: source.enableElectronicNormalInvoice,
+    enableElectronicSpecialInvoice: source.enableElectronicSpecialInvoice,
+    enableAutoIssue: source.enableAutoIssue,
+    autoIssueMaxAmount: source.autoIssueMaxAmount,
+  };
+}
+
+/** 比较设置表单是否发生变化。 */
+export function isSettingsChanged(
+  current: FinanceInvoiceSettingFormState,
+  snapshot: FinanceInvoiceSettingFormState,
+) {
+  return JSON.stringify(current) !== JSON.stringify(snapshot);
+}
+
+/** 生成保存设置请求体。 */
+export function buildSettingSavePayload(form: FinanceInvoiceSettingFormState) {
+  return {
+    companyName: form.companyName.trim(),
+    taxpayerNumber: form.taxpayerNumber.trim(),
+    registeredAddress: form.registeredAddress.trim() || undefined,
+    registeredPhone: form.registeredPhone.trim() || undefined,
+    bankName: form.bankName.trim() || undefined,
+    bankAccount: form.bankAccount.trim() || undefined,
+    enableElectronicNormalInvoice: form.enableElectronicNormalInvoice,
+    enableElectronicSpecialInvoice: form.enableElectronicSpecialInvoice,
+    enableAutoIssue: form.enableAutoIssue,
+    autoIssueMaxAmount: Number(form.autoIssueMaxAmount || 0),
+  };
+}
+
+/** 文本转空值。 */
+export function toOptionalTrimmed(value: string) {
+  const normalized = value.trim();
+  return normalized ? normalized : undefined;
+}
diff --git a/apps/web-antd/src/views/finance/invoice/composables/invoice-page/settings-actions.ts b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/settings-actions.ts
new file mode 100644
index 0000000..9ecb15d
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/composables/invoice-page/settings-actions.ts
@@ -0,0 +1,120 @@
+import type { FinanceInvoiceSettingFormState } from '../../types';
+
+/**
+ * 文件职责：发票设置保存与确认动作。
+ */
+import type { FinanceInvoiceSettingDto } from '#/api/finance';
+
+import { saveFinanceInvoiceSettingApi } from '#/api/finance';
+
+import { message } from 'ant-design-vue';
+
+import {
+  buildSettingSavePayload,
+  cloneSettingsForm,
+  isSettingsChanged,
+} from './helpers';
+
+interface SettingsActionOptions {
+  applySettingsResult: (result: FinanceInvoiceSettingDto) => void;
+  canManageSettings: { value: boolean };
+  isSettingsConfirmModalOpen: { value: boolean };
+  isSettingsSaving: { value: boolean };
+  settingForm: FinanceInvoiceSettingFormState;
+  settingSnapshot: { value: FinanceInvoiceSettingFormState };
+}
+
+/** 创建发票设置动作。 */
+export function createSettingsActions(options: SettingsActionOptions) {
+  function setSettingsConfirmModalOpen(value: boolean) {
+    options.isSettingsConfirmModalOpen.value = value;
+  }
+
+  function resetSettings() {
+    Object.assign(options.settingForm, cloneSettingsForm(options.settingSnapshot.value));
+  }
+
+  function hasSettingsChanged() {
+    return isSettingsChanged(options.settingForm, options.settingSnapshot.value);
+  }
+
+  function validateSettings() {
+    if (!options.settingForm.companyName.trim()) {
+      message.warning('请输入企业名称');
+      return false;
+    }
+
+    if (!options.settingForm.taxpayerNumber.trim()) {
+      message.warning('请输入纳税人识别号');
+      return false;
+    }
+
+    if (
+      !options.settingForm.enableElectronicNormalInvoice &&
+      !options.settingForm.enableElectronicSpecialInvoice
+    ) {
+      message.warning('请至少启用一种发票类型');
+      return false;
+    }
+
+    if (options.settingForm.enableAutoIssue) {
+      const maxAmount = Number(options.settingForm.autoIssueMaxAmount || 0);
+      if (!Number.isFinite(maxAmount) || maxAmount <= 0) {
+        message.warning('自动开票最大金额必须大于 0');
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  function openSettingsConfirmModal() {
+    if (!options.canManageSettings.value) {
+      message.warning('当前账号暂无发票设置权限');
+      return;
+    }
+
+    if (!validateSettings()) {
+      return;
+    }
+
+    if (!hasSettingsChanged()) {
+      message.info('未检测到设置变更');
+      return;
+    }
+
+    options.isSettingsConfirmModalOpen.value = true;
+  }
+
+  async function submitSettings() {
+    if (!options.canManageSettings.value) {
+      message.warning('当前账号暂无发票设置权限');
+      return;
+    }
+
+    if (!validateSettings()) {
+      return;
+    }
+
+    options.isSettingsSaving.value = true;
+    try {
+      const result = await saveFinanceInvoiceSettingApi(
+        buildSettingSavePayload(options.settingForm),
+      );
+      options.applySettingsResult(result);
+      options.isSettingsConfirmModalOpen.value = false;
+      message.success('发票设置已保存');
+    } finally {
+      options.isSettingsSaving.value = false;
+    }
+  }
+
+  return {
+    hasSettingsChanged,
+    openSettingsConfirmModal,
+    resetSettings,
+    setSettingsConfirmModalOpen,
+    submitSettings,
+    validateSettings,
+  };
+}
diff --git a/apps/web-antd/src/views/finance/invoice/composables/useFinanceInvoicePage.ts b/apps/web-antd/src/views/finance/invoice/composables/useFinanceInvoicePage.ts
new file mode 100644
index 0000000..e9b49a1
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/composables/useFinanceInvoicePage.ts
@@ -0,0 +1,397 @@
+/**
+ * 文件职责：发票管理页面状态与动作编排。
+ */
+import type {
+  FinanceInvoiceIssueResultDto,
+  FinanceInvoiceRecordDetailDto,
+  FinanceInvoiceRecordListItemDto,
+  FinanceInvoiceStatsDto,
+} from '#/api/finance';
+import type {
+  FinanceInvoiceFilterState,
+  FinanceInvoiceIssueFormState,
+  FinanceInvoicePaginationState,
+  FinanceInvoiceSettingFormState,
+  FinanceInvoiceTabKey,
+  FinanceInvoiceVoidFormState,
+} from '../types';
+
+import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
+
+import { useAccessStore } from '@vben/stores';
+
+import { message } from 'ant-design-vue';
+
+import {
+  createDefaultFilters,
+  createDefaultIssueForm,
+  createDefaultPagination,
+  createDefaultSettingsForm,
+  createDefaultVoidForm,
+  DEFAULT_INVOICE_STATS,
+  FINANCE_INVOICE_ISSUE_PERMISSION,
+  FINANCE_INVOICE_SETTINGS_PERMISSION,
+  FINANCE_INVOICE_VIEW_PERMISSION,
+  FINANCE_INVOICE_VOID_PERMISSION,
+  INVOICE_TAB_OPTIONS,
+} from './invoice-page/constants';
+import { createDataActions } from './invoice-page/data-actions';
+import { createDrawerActions } from './invoice-page/drawer-actions';
+import { isDateRangeInvalid } from './invoice-page/helpers';
+import { createSettingsActions } from './invoice-page/settings-actions';
+
+/** 创建发票管理页面组合状态。 */
+export function useFinanceInvoicePage() {
+  const accessStore = useAccessStore();
+
+  const activeTab = ref<FinanceInvoiceTabKey>('records');
+
+  const filters = reactive<FinanceInvoiceFilterState>(
+    createDefaultFilters() as FinanceInvoiceFilterState,
+  );
+  const pagination = reactive<FinanceInvoicePaginationState>(
+    createDefaultPagination(),
+  );
+  const rows = ref<FinanceInvoiceRecordListItemDto[]>([]);
+
+  const stats = reactive<FinanceInvoiceStatsDto>({ ...DEFAULT_INVOICE_STATS });
+
+  const settingForm = reactive<FinanceInvoiceSettingFormState>(
+    createDefaultSettingsForm(),
+  );
+  const settingSnapshot = ref<FinanceInvoiceSettingFormState>(
+    createDefaultSettingsForm(),
+  );
+
+  const issueForm = reactive<FinanceInvoiceIssueFormState>(
+    createDefaultIssueForm(),
+  );
+  const voidForm = reactive<FinanceInvoiceVoidFormState>(createDefaultVoidForm());
+
+  const detail = ref<FinanceInvoiceRecordDetailDto | null>(null);
+  const issueDetail = ref<FinanceInvoiceRecordDetailDto | null>(null);
+  const issueResult = ref<FinanceInvoiceIssueResultDto | null>(null);
+
+  const issueTargetRecord = ref<FinanceInvoiceRecordListItemDto | null>(null);
+  const voidTargetRecord = ref<FinanceInvoiceRecordListItemDto | null>(null);
+
+  const isListLoading = ref(false);
+  const isSettingsLoading = ref(false);
+  const isDetailLoading = ref(false);
+  const isIssueDetailLoading = ref(false);
+  const isIssueSubmitting = ref(false);
+  const isVoidSubmitting = ref(false);
+  const isSettingsSaving = ref(false);
+
+  const isDetailDrawerOpen = ref(false);
+  const isIssueDrawerOpen = ref(false);
+  const isVoidModalOpen = ref(false);
+  const isIssueResultModalOpen = ref(false);
+  const isSettingsConfirmModalOpen = ref(false);
+
+  const accessCodeSet = computed(
+    () => new Set((accessStore.accessCodes ?? []).map(String)),
+  );
+
+  const canViewRecords = computed(() => {
+    const accessCodes = accessCodeSet.value;
+    return (
+      accessCodes.has(FINANCE_INVOICE_VIEW_PERMISSION) ||
+      accessCodes.has(FINANCE_INVOICE_ISSUE_PERMISSION) ||
+      accessCodes.has(FINANCE_INVOICE_VOID_PERMISSION)
+    );
+  });
+
+  const canIssue = computed(() =>
+    accessCodeSet.value.has(FINANCE_INVOICE_ISSUE_PERMISSION),
+  );
+
+  const canVoid = computed(() =>
+    accessCodeSet.value.has(FINANCE_INVOICE_VOID_PERMISSION),
+  );
+
+  const canViewSettings = computed(() => {
+    const accessCodes = accessCodeSet.value;
+    return (
+      accessCodes.has(FINANCE_INVOICE_VIEW_PERMISSION) ||
+      accessCodes.has(FINANCE_INVOICE_SETTINGS_PERMISSION)
+    );
+  });
+
+  const canManageSettings = computed(() =>
+    accessCodeSet.value.has(FINANCE_INVOICE_SETTINGS_PERMISSION),
+  );
+
+  const canViewPage = computed(
+    () => canViewRecords.value || canViewSettings.value,
+  );
+
+  const tabOptions = computed(() =>
+    INVOICE_TAB_OPTIONS.filter((item) => {
+      if (item.value === 'records') {
+        return canViewRecords.value;
+      }
+      if (item.value === 'settings') {
+        return canViewSettings.value;
+      }
+      return false;
+    }),
+  );
+
+  const {
+    applySettingsResult,
+    clearByPermission,
+    clearRecordData,
+    loadRecordList,
+    loadSettings,
+  } = createDataActions({
+    canViewRecords,
+    canViewSettings,
+    createDefaultSettingsForm,
+    filters,
+    isListLoading,
+    isSettingsLoading,
+    pagination,
+    rows,
+    settingForm,
+    settingSnapshot,
+    stats,
+  });
+
+  const {
+    openDetail,
+    openIssue,
+    openVoid,
+    setDetailDrawerOpen,
+    setIssueDrawerOpen,
+    setIssueResultModalOpen,
+    setVoidModalOpen,
+    submitIssue,
+    submitVoid,
+  } = createDrawerActions({
+    canIssue,
+    canVoid,
+    detail,
+    isDetailDrawerOpen,
+    isDetailLoading,
+    isIssueDetailLoading,
+    isIssueDrawerOpen,
+    isIssueResultModalOpen,
+    isIssueSubmitting,
+    isVoidModalOpen,
+    isVoidSubmitting,
+    issueDetail,
+    issueForm,
+    issueResult,
+    issueTargetRecord,
+    reloadRecordList: loadRecordList,
+    voidForm,
+    voidTargetRecord,
+  });
+
+  const {
+    hasSettingsChanged,
+    openSettingsConfirmModal,
+    resetSettings,
+    setSettingsConfirmModalOpen,
+    submitSettings,
+  } = createSettingsActions({
+    applySettingsResult,
+    canManageSettings,
+    isSettingsConfirmModalOpen,
+    isSettingsSaving,
+    settingForm,
+    settingSnapshot,
+  });
+
+  function setActiveTab(value: FinanceInvoiceTabKey) {
+    activeTab.value = value;
+  }
+
+  function setStartDate(value: string) {
+    filters.startDate = value;
+  }
+
+  function setEndDate(value: string) {
+    filters.endDate = value;
+  }
+
+  function setStatus(value: string) {
+    filters.status = (value || 'all') as FinanceInvoiceFilterState['status'];
+  }
+
+  function setInvoiceType(value: string) {
+    filters.invoiceType = (value || 'all') as FinanceInvoiceFilterState['invoiceType'];
+  }
+
+  function setKeyword(value: string) {
+    filters.keyword = value;
+  }
+
+  function setIssueFormContactEmail(value: string) {
+    issueForm.contactEmail = value;
+  }
+
+  function setIssueFormRemark(value: string) {
+    issueForm.issueRemark = value;
+  }
+
+  function setVoidReason(value: string) {
+    voidForm.voidReason = value;
+  }
+
+  function setSettingsField<K extends keyof FinanceInvoiceSettingFormState>(
+    field: K,
+    value: FinanceInvoiceSettingFormState[K],
+  ) {
+    settingForm[field] = value;
+  }
+
+  async function handleSearch() {
+    if (isDateRangeInvalid(filters)) {
+      message.warning('开始日期不能晚于结束日期');
+      return;
+    }
+
+    pagination.page = 1;
+    await loadRecordList();
+  }
+
+  async function handlePageChange(page: number, pageSize: number) {
+    pagination.page = page;
+    pagination.pageSize = pageSize;
+    await loadRecordList();
+  }
+
+  function closeTransientPanels() {
+    setDetailDrawerOpen(false);
+    setIssueDrawerOpen(false);
+    setVoidModalOpen(false);
+    setIssueResultModalOpen(false);
+    setSettingsConfirmModalOpen(false);
+  }
+
+  async function loadByPermission() {
+    const tasks: Array<Promise<void>> = [];
+
+    if (canViewRecords.value) {
+      tasks.push(loadRecordList());
+    } else {
+      clearRecordData();
+    }
+
+    if (canViewSettings.value) {
+      tasks.push(loadSettings());
+    }
+
+    await Promise.all(tasks);
+  }
+
+  watch(tabOptions, (next) => {
+    const values = next.map((item) => item.value);
+    if (values.length === 0) {
+      return;
+    }
+
+    if (!values.includes(activeTab.value)) {
+      activeTab.value = values[0] as FinanceInvoiceTabKey;
+    }
+  });
+
+  watch(
+    canViewPage,
+    async (value, oldValue) => {
+      if (value === oldValue) {
+        return;
+      }
+
+      if (!value) {
+        clearByPermission();
+        closeTransientPanels();
+        return;
+      }
+
+      await loadByPermission();
+    },
+    { immediate: false },
+  );
+
+  onMounted(async () => {
+    if (!canViewPage.value) {
+      clearByPermission();
+      closeTransientPanels();
+      return;
+    }
+
+    await loadByPermission();
+  });
+
+  onActivated(() => {
+    if (!canViewPage.value) {
+      return;
+    }
+
+    void loadByPermission();
+  });
+
+  return {
+    activeTab,
+    canIssue,
+    canManageSettings,
+    canViewPage,
+    canViewRecords,
+    canViewSettings,
+    canVoid,
+    detail,
+    filters,
+    handlePageChange,
+    handleSearch,
+    hasSettingsChanged,
+    isDetailDrawerOpen,
+    isDetailLoading,
+    isIssueDetailLoading,
+    isIssueDrawerOpen,
+    isIssueResultModalOpen,
+    isIssueSubmitting,
+    isListLoading,
+    isSettingsConfirmModalOpen,
+    isSettingsLoading,
+    isSettingsSaving,
+    isVoidModalOpen,
+    isVoidSubmitting,
+    issueDetail,
+    issueForm,
+    issueResult,
+    issueTargetRecord,
+    openDetail,
+    openIssue,
+    openSettingsConfirmModal,
+    openVoid,
+    pagination,
+    resetSettings,
+    rows,
+    setActiveTab,
+    setDetailDrawerOpen,
+    setEndDate,
+    setInvoiceType,
+    setIssueDrawerOpen,
+    setIssueFormContactEmail,
+    setIssueFormRemark,
+    setIssueResultModalOpen,
+    setKeyword,
+    setSettingsConfirmModalOpen,
+    setSettingsField,
+    setStartDate,
+    setStatus,
+    setVoidModalOpen,
+    setVoidReason,
+    settingForm,
+    stats,
+    submitIssue,
+    submitSettings,
+    submitVoid,
+    tabOptions,
+    voidForm,
+    voidTargetRecord,
+  };
+}
diff --git a/apps/web-antd/src/views/finance/invoice/index.vue b/apps/web-antd/src/views/finance/invoice/index.vue
new file mode 100644
index 0000000..254fffd
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/index.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+/**
+ * 文件职责：财务中心发票管理页面入口编排。
+ */
+import { Page } from '@vben/common-ui';
+
+import { Empty, Spin } from 'ant-design-vue';
+
+import InvoiceDetailDrawer from './components/InvoiceDetailDrawer.vue';
+import InvoiceFilterBar from './components/InvoiceFilterBar.vue';
+import InvoiceIssueDrawer from './components/InvoiceIssueDrawer.vue';
+import InvoiceIssueResultModal from './components/InvoiceIssueResultModal.vue';
+import InvoiceSegmentTabs from './components/InvoiceSegmentTabs.vue';
+import InvoiceSettingsConfirmModal from './components/InvoiceSettingsConfirmModal.vue';
+import InvoiceSettingsPanel from './components/InvoiceSettingsPanel.vue';
+import InvoiceStatsBar from './components/InvoiceStatsBar.vue';
+import InvoiceTableCard from './components/InvoiceTableCard.vue';
+import InvoiceVoidConfirmModal from './components/InvoiceVoidConfirmModal.vue';
+import { useFinanceInvoicePage } from './composables/useFinanceInvoicePage';
+
+const {
+  activeTab,
+  canIssue,
+  canManageSettings,
+  canViewPage,
+  canViewRecords,
+  canViewSettings,
+  canVoid,
+  detail,
+  filters,
+  handlePageChange,
+  handleSearch,
+  isDetailDrawerOpen,
+  isDetailLoading,
+  isIssueDetailLoading,
+  isIssueDrawerOpen,
+  isIssueResultModalOpen,
+  isIssueSubmitting,
+  isListLoading,
+  isSettingsConfirmModalOpen,
+  isSettingsLoading,
+  isSettingsSaving,
+  isVoidModalOpen,
+  isVoidSubmitting,
+  issueDetail,
+  issueForm,
+  issueResult,
+  issueTargetRecord,
+  openDetail,
+  openIssue,
+  openSettingsConfirmModal,
+  openVoid,
+  pagination,
+  resetSettings,
+  rows,
+  setActiveTab,
+  setDetailDrawerOpen,
+  setEndDate,
+  setInvoiceType,
+  setIssueDrawerOpen,
+  setIssueFormContactEmail,
+  setIssueFormRemark,
+  setIssueResultModalOpen,
+  setKeyword,
+  setSettingsConfirmModalOpen,
+  setSettingsField,
+  setStartDate,
+  setStatus,
+  setVoidModalOpen,
+  setVoidReason,
+  settingForm,
+  stats,
+  submitIssue,
+  submitSettings,
+  submitVoid,
+  tabOptions,
+  voidForm,
+  voidTargetRecord,
+} = useFinanceInvoicePage();
+</script>
+
+<template>
+  <Page title="发票管理" content-class="page-finance-invoice">
+    <div class="fi-page">
+      <Empty v-if="!canViewPage" description="暂无发票管理页面访问权限" />
+
+      <template v-else>
+        <InvoiceSegmentTabs
+          :active-tab="activeTab"
+          :options="tabOptions"
+          @update:active-tab="setActiveTab"
+        />
+
+        <section v-show="activeTab === 'records'" class="fi-tab-panel">
+          <template v-if="canViewRecords">
+            <InvoiceStatsBar :stats="stats" />
+
+            <InvoiceFilterBar
+              :filters="filters"
+              @update:start-date="setStartDate"
+              @update:end-date="setEndDate"
+              @update:status="setStatus"
+              @update:invoice-type="setInvoiceType"
+              @update:keyword="setKeyword"
+              @search="handleSearch"
+            />
+
+            <InvoiceTableCard
+              :rows="rows"
+              :loading="isListLoading"
+              :pagination="pagination"
+              :can-issue="canIssue"
+              :can-void="canVoid"
+              @page-change="handlePageChange"
+              @detail="openDetail"
+              @issue="openIssue"
+              @void="openVoid"
+            />
+          </template>
+          <Empty v-else description="暂无开票记录访问权限" />
+        </section>
+
+        <section v-show="activeTab === 'settings'" class="fi-tab-panel">
+          <template v-if="canViewSettings">
+            <Spin :spinning="isSettingsLoading">
+              <InvoiceSettingsPanel
+                :form="settingForm"
+                :can-manage-settings="canManageSettings"
+                :saving="isSettingsSaving"
+                @update:company-name="(value) => setSettingsField('companyName', value)"
+                @update:taxpayer-number="(value) => setSettingsField('taxpayerNumber', value)"
+                @update:registered-address="(value) => setSettingsField('registeredAddress', value)"
+                @update:registered-phone="(value) => setSettingsField('registeredPhone', value)"
+                @update:bank-name="(value) => setSettingsField('bankName', value)"
+                @update:bank-account="(value) => setSettingsField('bankAccount', value)"
+                @update:enable-electronic-normal-invoice="(value) => setSettingsField('enableElectronicNormalInvoice', value)"
+                @update:enable-electronic-special-invoice="(value) => setSettingsField('enableElectronicSpecialInvoice', value)"
+                @update:enable-auto-issue="(value) => setSettingsField('enableAutoIssue', value)"
+                @update:auto-issue-max-amount="(value) => setSettingsField('autoIssueMaxAmount', value)"
+                @reset="resetSettings"
+                @save="openSettingsConfirmModal"
+              />
+            </Spin>
+          </template>
+          <Empty v-else description="暂无发票设置访问权限" />
+        </section>
+      </template>
+    </div>
+
+    <InvoiceIssueDrawer
+      :open="isIssueDrawerOpen"
+      :submitting="isIssueSubmitting"
+      :loading-detail="isIssueDetailLoading"
+      :target-record="issueTargetRecord"
+      :detail="issueDetail"
+      :form="issueForm"
+      @close="setIssueDrawerOpen(false)"
+      @update:contact-email="setIssueFormContactEmail"
+      @update:issue-remark="setIssueFormRemark"
+      @submit="submitIssue"
+    />
+
+    <InvoiceDetailDrawer
+      :open="isDetailDrawerOpen"
+      :loading="isDetailLoading"
+      :detail="detail"
+      @close="setDetailDrawerOpen(false)"
+    />
+
+    <InvoiceVoidConfirmModal
+      :open="isVoidModalOpen"
+      :submitting="isVoidSubmitting"
+      :target-record="voidTargetRecord"
+      :form="voidForm"
+      @close="setVoidModalOpen(false)"
+      @update:void-reason="setVoidReason"
+      @submit="submitVoid"
+    />
+
+    <InvoiceIssueResultModal
+      :open="isIssueResultModalOpen"
+      :result="issueResult"
+      @close="setIssueResultModalOpen(false)"
+    />
+
+    <InvoiceSettingsConfirmModal
+      :open="isSettingsConfirmModalOpen"
+      :submitting="isSettingsSaving"
+      :form="settingForm"
+      @close="setSettingsConfirmModalOpen(false)"
+      @confirm="submitSettings"
+    />
+  </Page>
+</template>
+
+<style lang="less">
+@import './styles/index.less';
+</style>
diff --git a/apps/web-antd/src/views/finance/invoice/styles/base.less b/apps/web-antd/src/views/finance/invoice/styles/base.less
new file mode 100644
index 0000000..8ef50dd
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/styles/base.less
@@ -0,0 +1,24 @@
+/**
+ * 文件职责：发票管理页面基础样式。
+ */
+.page-finance-invoice {
+  .ant-card {
+    border-radius: 10px;
+  }
+}
+
+.fi-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fi-tab-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fi-mono {
+  font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
+}
diff --git a/apps/web-antd/src/views/finance/invoice/styles/drawer.less b/apps/web-antd/src/views/finance/invoice/styles/drawer.less
new file mode 100644
index 0000000..fb9801e
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/styles/drawer.less
@@ -0,0 +1,135 @@
+/**
+ * 文件职责：发票抽屉样式。
+ */
+.page-finance-invoice {
+  .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;
+    }
+  }
+}
+
+.fi-section {
+  margin-bottom: 20px;
+}
+
+.fi-section-title {
+  padding-left: 10px;
+  margin-bottom: 14px;
+  font-size: 14px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+  border-left: 3px solid #1677ff;
+}
+
+.fi-info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 20px;
+  font-size: 13px;
+
+  .label {
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .full {
+    grid-column: 1 / -1;
+  }
+}
+
+.fi-amount-strong {
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+}
+
+.fi-drawer-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.fi-timeline {
+  position: relative;
+  padding-left: 22px;
+}
+
+.fi-timeline-item {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-bottom: 18px;
+  font-size: 13px;
+
+  &::before {
+    position: absolute;
+    top: 5px;
+    left: -22px;
+    width: 10px;
+    height: 10px;
+    content: '';
+    background: #1677ff;
+    border: 2px solid #d6e4ff;
+    border-radius: 50%;
+  }
+
+  &::after {
+    position: absolute;
+    top: 17px;
+    left: -18px;
+    width: 2px;
+    height: calc(100% - 12px);
+    content: '';
+    background: #e8e8e8;
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .text {
+    font-weight: 500;
+    color: rgb(0 0 0 / 88%);
+  }
+
+  .time {
+    color: rgb(0 0 0 / 45%);
+  }
+}
+
+.fi-remark-box {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 14px;
+  font-size: 13px;
+  color: rgb(0 0 0 / 65%);
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.fi-remark-line {
+  display: flex;
+  gap: 8px;
+
+  .label {
+    width: 70px;
+    flex-shrink: 0;
+    color: rgb(0 0 0 / 45%);
+  }
+}
diff --git a/apps/web-antd/src/views/finance/invoice/styles/index.less b/apps/web-antd/src/views/finance/invoice/styles/index.less
new file mode 100644
index 0000000..364fe8d
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/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';
diff --git a/apps/web-antd/src/views/finance/invoice/styles/layout.less b/apps/web-antd/src/views/finance/invoice/styles/layout.less
new file mode 100644
index 0000000..2ae09c9
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/styles/layout.less
@@ -0,0 +1,166 @@
+/**
+ * 文件职责：发票管理页面布局样式。
+ */
+.fi-seg-wrap {
+  margin-bottom: 2px;
+}
+
+.fi-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.fi-stat-card {
+  padding: 18px 20px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+  transition: all 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 6px 14px rgb(15 23 42 / 10%);
+    transform: translateY(-1px);
+  }
+
+  &.warn .fi-stat-val {
+    color: #fa8c16;
+  }
+
+  &.danger .fi-stat-val {
+    color: #ff4d4f;
+  }
+}
+
+.fi-stat-label {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.fi-stat-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.fi-stat-val {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: rgb(0 0 0 / 88%);
+}
+
+.fi-stat-sub {
+  margin-top: 4px;
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.fi-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  padding: 14px 16px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
+
+  .fi-date-input {
+    width: 146px;
+  }
+
+  .fi-status-select,
+  .fi-type-select {
+    width: 124px;
+  }
+
+  .fi-date-sep {
+    font-size: 13px;
+    line-height: 32px;
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .fi-toolbar-spacer {
+    flex: 1;
+  }
+
+  .fi-search {
+    width: 220px;
+  }
+
+  .fi-search-icon {
+    width: 14px;
+    height: 14px;
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .ant-select-selector,
+  .ant-input,
+  .ant-input-affix-wrapper {
+    height: 32px;
+    font-size: 13px;
+  }
+
+  .ant-input-affix-wrapper .ant-input {
+    height: 100%;
+  }
+}
+
+.fi-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fi-section-hd {
+  padding-left: 10px;
+  margin-bottom: 16px;
+  font-size: 15px;
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+  border-left: 3px solid #1677ff;
+}
+
+.fi-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 24px;
+}
+
+.fi-toggle-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.fi-toggle-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: rgb(0 0 0 / 88%);
+}
+
+.fi-toggle-hint {
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+}
+
+.fi-auto-form {
+  max-width: 340px;
+}
+
+.fi-max-amount-input {
+  width: 100%;
+}
+
+.fi-save-bar {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
diff --git a/apps/web-antd/src/views/finance/invoice/styles/modal.less b/apps/web-antd/src/views/finance/invoice/styles/modal.less
new file mode 100644
index 0000000..125eb9b
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/styles/modal.less
@@ -0,0 +1,63 @@
+/**
+ * 文件职责：发票弹窗样式。
+ */
+.fi-void-modal,
+.fi-issue-result,
+.fi-settings-confirm {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fi-void-warning {
+  margin: 0;
+  font-size: 13px;
+  color: #cf1322;
+}
+
+.fi-void-summary,
+.fi-result-list,
+.fi-settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.fi-void-line,
+.fi-result-line,
+.fi-settings-line {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  font-size: 13px;
+
+  .label {
+    color: rgb(0 0 0 / 45%);
+  }
+
+  .value {
+    color: rgb(0 0 0 / 88%);
+    text-align: right;
+  }
+}
+
+.fi-result-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1677ff;
+}
+
+.fi-result-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fi-settings-desc {
+  margin: 0;
+  font-size: 13px;
+  color: rgb(0 0 0 / 65%);
+}
diff --git a/apps/web-antd/src/views/finance/invoice/styles/responsive.less b/apps/web-antd/src/views/finance/invoice/styles/responsive.less
new file mode 100644
index 0000000..e199dda
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/styles/responsive.less
@@ -0,0 +1,47 @@
+/**
+ * 文件职责：发票管理页面响应式样式。
+ */
+@media (max-width: 1600px) {
+  .fi-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .fi-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .fi-toolbar {
+    padding: 14px 12px;
+
+    .fi-date-input,
+    .fi-status-select,
+    .fi-type-select,
+    .fi-search {
+      width: 100%;
+    }
+
+    .fi-date-sep,
+    .fi-toolbar-spacer {
+      display: none;
+    }
+  }
+
+  .fi-form-grid,
+  .fi-info-grid {
+    grid-template-columns: 1fr;
+
+    .full {
+      grid-column: auto;
+    }
+  }
+
+  .fi-save-bar {
+    justify-content: stretch;
+
+    .ant-btn {
+      flex: 1;
+    }
+  }
+}
diff --git a/apps/web-antd/src/views/finance/invoice/styles/table.less b/apps/web-antd/src/views/finance/invoice/styles/table.less
new file mode 100644
index 0000000..971724f
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/styles/table.less
@@ -0,0 +1,62 @@
+/**
+ * 文件职责：发票记录表格样式。
+ */
+.fi-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;
+    }
+  }
+
+  .ant-pagination {
+    margin: 14px 16px;
+  }
+}
+
+.fi-company-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  .fi-applicant {
+    font-weight: 500;
+    color: rgb(0 0 0 / 88%);
+  }
+
+  .fi-company {
+    font-size: 12px;
+    color: rgb(0 0 0 / 45%);
+  }
+}
+
+.fi-amount {
+  font-weight: 600;
+  color: rgb(0 0 0 / 88%);
+}
+
+.fi-time {
+  font-size: 12px;
+  color: rgb(0 0 0 / 45%);
+  white-space: nowrap;
+}
+
+.fi-link-action {
+  padding-inline: 0;
+}
+
+.fi-action-wrap {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
diff --git a/apps/web-antd/src/views/finance/invoice/types.ts b/apps/web-antd/src/views/finance/invoice/types.ts
new file mode 100644
index 0000000..b885452
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice/types.ts
@@ -0,0 +1,57 @@
+/**
+ * 文件职责：发票管理页面本地状态类型定义。
+ */
+import type {
+  FinanceInvoiceStatusFilter,
+  FinanceInvoiceTypeFilter,
+} from '#/api/finance';
+
+/** 页面分段键。 */
+export type FinanceInvoiceTabKey = 'records' | 'settings';
+
+/** 发票记录筛选状态。 */
+export interface FinanceInvoiceFilterState {
+  endDate: string;
+  invoiceType: FinanceInvoiceTypeFilter;
+  keyword: string;
+  startDate: string;
+  status: FinanceInvoiceStatusFilter;
+}
+
+/** 发票记录分页状态。 */
+export interface FinanceInvoicePaginationState {
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
+/** 发票设置表单状态。 */
+export interface FinanceInvoiceSettingFormState {
+  autoIssueMaxAmount: number;
+  bankAccount: string;
+  bankName: string;
+  companyName: string;
+  enableAutoIssue: boolean;
+  enableElectronicNormalInvoice: boolean;
+  enableElectronicSpecialInvoice: boolean;
+  registeredAddress: string;
+  registeredPhone: string;
+  taxpayerNumber: string;
+}
+
+/** 发票开票抽屉表单状态。 */
+export interface FinanceInvoiceIssueFormState {
+  contactEmail: string;
+  issueRemark: string;
+}
+
+/** 发票作废弹窗表单状态。 */
+export interface FinanceInvoiceVoidFormState {
+  voidReason: string;
+}
+
+/** 通用选项项。 */
+export interface OptionItem {
+  label: string;
+  value: string;
+}