diff --git a/web/src/api/index.js b/web/src/api/index.js
index 69a66d2..b0b7f6c 100644
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -45,4 +45,12 @@ export default {
   createAppUser: (data = {}) => request.post('/app-user/register', data),
   updateAppUser: (data = {}) => request.post('/app-user/update', data),
   deleteAppUser: (params = {}) => request.delete('/app-user/delete', { params }),
+  // invoice (开票记录)
+  getInvoiceList: (params = {}) => request.get('/invoice/list', { params }),
+  getInvoiceById: (params = {}) => request.get('/invoice/detail', { params }),
+  createInvoice: (data = {}) => request.post('/invoice/create', data),
+  updateInvoice: (data = {}) => request.post('/invoice/update', data),
+  deleteInvoice: (params = {}) => request.delete('/invoice/delete', { params }),
+  updateInvoiceStatus: (data = {}) => request.post('/invoice/update-status', data),
+  remindInvoice: (data = {}) => request.post('/invoice/remind', data),
 }
diff --git a/web/src/views/transaction/invoice/index.vue b/web/src/views/transaction/invoice/index.vue
new file mode 100644
index 0000000..ddd602b
--- /dev/null
+++ b/web/src/views/transaction/invoice/index.vue
@@ -0,0 +1,455 @@
+<script setup>
+import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NInput,
+  NTag,
+  NPopconfirm,
+  NSelect,
+  NDatePicker,
+} from 'naive-ui'
+
+import CommonPage from '@/components/page/CommonPage.vue'
+import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
+import CrudModal from '@/components/table/CrudModal.vue'
+import CrudTable from '@/components/table/CrudTable.vue'
+
+import { formatDate, renderIcon } from '@/utils'
+import { useCRUD } from '@/composables'
+import api from '@/api'
+import TheIcon from '@/components/icon/TheIcon.vue'
+
+defineOptions({ name: '开票记录' })
+
+const $table = ref(null)
+const queryItems = ref({})
+const vPermission = resolveDirective('permission')
+
+// 状态选项
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '未开票', value: 'pending' },
+  { label: '已开票', value: 'invoiced' },
+  { label: '已拒绝', value: 'rejected' },
+]
+
+// 开票类型选项
+const invoiceTypeOptions = [
+  { label: '增值税普通发票', value: 'normal' },
+  { label: '增值税专用发票', value: 'special' },
+]
+
+// 供票类型选项
+const ticketTypeOptions = [
+  { label: '纸质发票', value: 'paper' },
+  { label: '电子发票', value: 'electronic' },
+]
+
+const {
+  modalVisible,
+  modalTitle,
+  modalAction,
+  modalLoading,
+  handleSave,
+  modalForm,
+  modalFormRef,
+  handleEdit,
+  handleDelete,
+  handleAdd,
+} = useCRUD({
+  name: '开票记录',
+  initForm: {},
+  doCreate: api.createInvoice,
+  doUpdate: api.updateInvoice,
+  doDelete: api.deleteInvoice,
+  refresh: () => $table.value?.handleSearch(),
+})
+
+onMounted(() => {
+  $table.value?.handleSearch()
+})
+
+// 状态标签渲染
+const renderStatus = (status) => {
+  const statusMap = {
+    pending: { type: 'warning', text: '未开票' },
+    invoiced: { type: 'success', text: '已开票' },
+    rejected: { type: 'error', text: '已拒绝' },
+  }
+  const config = statusMap[status] || { type: 'default', text: '未知' }
+  return h(NTag, { type: config.type }, { default: () => config.text })
+}
+
+// 开票类型渲染
+const renderInvoiceType = (type) => {
+  const typeMap = {
+    normal: '增值税普通发票',
+    special: '增值税专用发票',
+  }
+  return typeMap[type] || type
+}
+
+// 供票类型渲染
+const renderTicketType = (type) => {
+  const typeMap = {
+    paper: '纸质发票',
+    electronic: '电子发票',
+  }
+  return typeMap[type] || type
+}
+
+const columns = [
+  {
+    title: 'ID',
+    key: 'id',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: '提交时间',
+    key: 'created_at',
+    width: 100,
+    align: 'center',
+    render(row) {
+      return formatDate(row.created_at)
+    },
+  },
+  {
+    title: '供票类型',
+    key: 'ticket_type',
+    width: 80,
+    align: 'center',
+    render(row) {
+      return renderTicketType(row.ticket_type)
+    },
+  },
+  {
+    title: '手机号',
+    key: 'phone',
+    width: 100,
+    align: 'center',
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '邮箱号',
+    key: 'email',
+    width: 120,
+    align: 'center',
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '公司名称',
+    key: 'company_name',
+    width: 150,
+    align: 'center',
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '公司税号',
+    key: 'tax_number',
+    width: 150,
+    align: 'center',
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '注册地址',
+    key: 'register_address',
+    width: 150,
+    align: 'center',
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '注册电话',
+    key: 'register_phone',
+    width: 100,
+    align: 'center',
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '开户银行',
+    key: 'bank_name',
+    width: 120,
+    align: 'center',
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '银行账号',
+    key: 'bank_account',
+    width: 150,
+    align: 'center',
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '开票类型',
+    key: 'invoice_type',
+    width: 120,
+    align: 'center',
+    render(row) {
+      return renderInvoiceType(row.invoice_type)
+    },
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 80,
+    align: 'center',
+    render(row) {
+      return renderStatus(row.status)
+    },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 200,
+    align: 'center',
+    fixed: 'right',
+    render(row) {
+      return [
+        // 开票提醒按钮
+        row.status === 'pending' &&
+          h(
+            NButton,
+            {
+              size: 'small',
+              type: 'info',
+              style: 'margin-right: 8px;',
+              onClick: () => handleRemind(row),
+            },
+            {
+              default: () => '开票提醒',
+              icon: renderIcon('mdi:bell-outline', { size: 16 }),
+            }
+          ),
+        // 已开票按钮
+        row.status === 'pending' &&
+          h(
+            NPopconfirm,
+            {
+              onPositiveClick: () => handleUpdateStatus(row, 'invoiced'),
+            },
+            {
+              trigger: () =>
+                h(
+                  NButton,
+                  {
+                    size: 'small',
+                    type: 'success',
+                    style: 'margin-right: 8px;',
+                  },
+                  {
+                    default: () => '已开票',
+                    icon: renderIcon('mdi:check-circle-outline', { size: 16 }),
+                  }
+                ),
+              default: () => h('div', {}, '确认已开票？'),
+            }
+          ),
+        // 已拒绝按钮
+        row.status === 'pending' &&
+          h(
+            NPopconfirm,
+            {
+              onPositiveClick: () => handleUpdateStatus(row, 'rejected'),
+            },
+            {
+              trigger: () =>
+                h(
+                  NButton,
+                  {
+                    size: 'small',
+                    type: 'error',
+                    style: 'margin-right: 8px;',
+                  },
+                  {
+                    default: () => '已拒绝',
+                    icon: renderIcon('mdi:close-circle-outline', { size: 16 }),
+                  }
+                ),
+              default: () => h('div', {}, '确认拒绝开票？'),
+            }
+          ),
+      ]
+    },
+  },
+]
+
+// 开票提醒
+async function handleRemind(row) {
+  try {
+    await api.remindInvoice({ id: row.id })
+    $message.success('提醒发送成功')
+  } catch (error) {
+    $message.error('提醒发送失败: ' + error.message)
+  }
+}
+
+// 更新状态
+async function handleUpdateStatus(row, status) {
+  try {
+    await api.updateInvoiceStatus({ id: row.id, status })
+    $message.success('状态更新成功')
+    $table.value?.handleSearch()
+  } catch (error) {
+    $message.error('状态更新失败: ' + error.message)
+  }
+}
+
+const validateForm = {
+  company_name: [
+    {
+      required: true,
+      message: '请输入公司名称',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  tax_number: [
+    {
+      required: true,
+      message: '请输入公司税号',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  phone: [
+    {
+      required: true,
+      message: '请输入手机号',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  email: [
+    {
+      required: true,
+      message: '请输入邮箱',
+      trigger: ['input', 'blur'],
+    },
+  ],
+}
+</script>
+
+<template>
+  <CommonPage show-footer title="开票记录">
+    <!-- 表格 -->
+    <CrudTable
+      ref="$table"
+      v-model:query-items="queryItems"
+      :columns="columns"
+      :get-data="api.getInvoiceList"
+    >
+      <template #queryBar>
+        <QueryBarItem label="提交时间" :label-width="80">
+          <NDatePicker
+            v-model:value="queryItems.created_at"
+            type="daterange"
+            clearable
+            placeholder="请选择提交时间"
+            style="width: 240px"
+            @update:value="$table?.handleSearch()"
+          />
+        </QueryBarItem>
+        <QueryBarItem label="手机号" :label-width="60">
+          <NInput
+            v-model:value="queryItems.phone"
+            clearable
+            type="text"
+            placeholder="请输入手机号"
+            @keypress.enter="$table?.handleSearch()"
+          />
+        </QueryBarItem>
+        <QueryBarItem label="状态" :label-width="40">
+          <NSelect
+            v-model:value="queryItems.status"
+            :options="statusOptions"
+            placeholder="请选择状态"
+            clearable
+            style="width: 150px"
+            @update:value="$table?.handleSearch()"
+          />
+        </QueryBarItem>
+        <QueryBarItem label="公司名称" :label-width="80">
+          <NInput
+            v-model:value="queryItems.company_name"
+            clearable
+            type="text"
+            placeholder="请输入公司名称"
+            @keypress.enter="$table?.handleSearch()"
+          />
+        </QueryBarItem>
+        <QueryBarItem label="公司税号" :label-width="80">
+          <NInput
+            v-model:value="queryItems.tax_number"
+            clearable
+            type="text"
+            placeholder="请输入公司税号"
+            @keypress.enter="$table?.handleSearch()"
+          />
+        </QueryBarItem>
+      </template>
+    </CrudTable>
+
+    <!-- 新增/编辑 弹窗 -->
+    <CrudModal
+      v-model:visible="modalVisible"
+      :title="modalTitle"
+      :loading="modalLoading"
+      @save="handleSave"
+    >
+      <NForm
+        ref="modalFormRef"
+        label-placement="left"
+        label-align="left"
+        :label-width="100"
+        :model="modalForm"
+        :rules="validateForm"
+      >
+        <NFormItem label="公司名称" path="company_name">
+          <NInput v-model:value="modalForm.company_name" clearable placeholder="请输入公司名称" />
+        </NFormItem>
+        <NFormItem label="公司税号" path="tax_number">
+          <NInput v-model:value="modalForm.tax_number" clearable placeholder="请输入公司税号" />
+        </NFormItem>
+        <NFormItem label="手机号" path="phone">
+          <NInput v-model:value="modalForm.phone" clearable placeholder="请输入手机号" />
+        </NFormItem>
+        <NFormItem label="邮箱" path="email">
+          <NInput v-model:value="modalForm.email" clearable placeholder="请输入邮箱" />
+        </NFormItem>
+        <NFormItem label="注册地址" path="register_address">
+          <NInput
+            v-model:value="modalForm.register_address"
+            clearable
+            placeholder="请输入注册地址"
+          />
+        </NFormItem>
+        <NFormItem label="注册电话" path="register_phone">
+          <NInput
+            v-model:value="modalForm.register_phone"
+            clearable
+            placeholder="请输入注册电话"
+          />
+        </NFormItem>
+        <NFormItem label="开户银行" path="bank_name">
+          <NInput v-model:value="modalForm.bank_name" clearable placeholder="请输入开户银行" />
+        </NFormItem>
+        <NFormItem label="银行账号" path="bank_account">
+          <NInput v-model:value="modalForm.bank_account" clearable placeholder="请输入银行账号" />
+        </NFormItem>
+        <NFormItem label="供票类型" path="ticket_type">
+          <NSelect
+            v-model:value="modalForm.ticket_type"
+            :options="ticketTypeOptions"
+            placeholder="请选择供票类型"
+          />
+        </NFormItem>
+        <NFormItem label="开票类型" path="invoice_type">
+          <NSelect
+            v-model:value="modalForm.invoice_type"
+            :options="invoiceTypeOptions"
+            placeholder="请选择开票类型"
+          />
+        </NFormItem>
+      </NForm>
+    </CrudModal>
+  </CommonPage>
+</template>