diff --git a/src/apis/admin.ts b/src/apis/admin.ts
index 68f6f1b..72c59b0 100644
--- a/src/apis/admin.ts
+++ b/src/apis/admin.ts
@@ -10,4 +10,25 @@ export const useList = (params:any) => request.get('/v1/order/use_list',{params}
 // 容器实例列表
 export const hostCaseList = (params:any) => request.get('/v1/host_case/case_list',{params})
 // 镜像列表
-export const getImageList = (params:any) => request.get('/v1/image/image_list',{params})
\ No newline at end of file
+export const getImageList = (params:any) => request.get('/v1/image/image_list',{params})
+
+// 发票列表
+export const getinvoiceTitleList = (params:any) => request.get('/v1/invoice_title/invoice_title_list',{params})
+
+// 设置是否是默认抬头发票
+export const getDefaultInvoiceTitle = (id:any) => request.get(`/v1/invoice_title/default_invoice_title/${id}`)
+
+// 获取发票详情
+export const invoiceTitleInfo = (id:any) => request.get(`/v1/invoice_title/invoice_title_info/${id}`)
+
+
+// 编辑发票
+export const UpdateDefaultInvoiceTitle = (params:any) => request.put('/v1/invoice_title/update_invoice_title',params)
+
+
+// 新增抬头
+export const AddDefaultInvoiceTitle = (params:any) => request.put('/v1/invoice_title/add_invoice_title',params)
+
+// 删除发票抬头
+export const DelInvoiceTitleInfo = (id:any) => request.delete(`/v1/invoice_title/delete_invoice_title/${id}`)
+
diff --git a/src/views/admin/account/invoices/index.vue b/src/views/admin/account/invoices/index.vue
index 30aaee6..a561b6a 100644
--- a/src/views/admin/account/invoices/index.vue
+++ b/src/views/admin/account/invoices/index.vue
@@ -1,779 +1,743 @@
 <template>
-  <div class="invoice-page">
-    <!-- 头部区域 -->
-    <div class="page-header">
-      <h1 class="page-title">
-        我的发票抬头
-      </h1>
-      <div class="header-actions">
-        <a-button type="primary" @click="showAddModal" size="large">
-          <template #icon><PlusOutlined /></template>
-          新增抬头
-        </a-button>
-      </div>
+    <div class="invoice-page">
+        <!-- 头部区域 -->
+        <div class="page-header">
+            <h1 class="page-title">
+                我的发票抬头
+            </h1>
+            <div class="header-actions">
+                <a-button type="primary" @click="showAddModal" size="large">
+                    <template #icon>
+                        <PlusOutlined />
+                    </template>
+                    新增抬头
+                </a-button>
+            </div>
+        </div>
+
+        <!-- 发票抬头列表 -->
+        <div class="invoice-list-container">
+            <a-alert v-if="invoiceHeaders.length === 0" message="暂无发票抬头" description="点击上方按钮添加您的第一个发票抬头" type="info"
+                show-icon style="margin-bottom: 20px;" />
+
+            <a-row :gutter="[16, 16]">
+                <a-col v-for="header in sortedHeaders" :key="header.invoiceTitleID" :xs="24" :sm="24" :md="12" :lg="8">
+                    <a-card :class="['invoice-card', { 'default-card': header.is_default }]" :bordered="true">
+                        <template #actions>
+                            <span @click="editHeader(header)">
+                                <EditOutlined />
+                                编辑
+                            </span>
+                            <span @click="setDefaultHeader(header.invoiceTitleID)"
+                                :class="{ disabled: header.is_default }">
+                                <StarOutlined />
+                                {{ header.is_default ? '已是默认' : '设为默认' }}
+                            </span>
+                            <span @click="showDeleteConfirm(header)">
+                                <DeleteOutlined />
+                                删除
+                            </span>
+                        </template>
+
+                        <a-card-meta>
+                            <template #title>
+                                <div class="card-title">
+                                    <span class="header-name">
+                                        {{ header.invoice_title }}
+                                        <a-tag :color="getTypeColor(header.title_type)" size="small">
+                                            {{ getTypeText(header.title_type) }}
+                                        </a-tag>
+                                        <span v-if="header.is_default" class="default-badge">
+                                            <CheckCircleFilled style="color: #52c41a; margin-right: 4px;" />
+                                            <span>默认抬头</span>
+                                        </span>
+                                    </span>
+                                </div>
+                            </template>
+
+                            <template #description>
+                                <div class="card-content">
+                                    <!-- 详细信息 -->
+                                    <div class="info-section">
+                                        <div v-if="header.invoice_taxpayer_id" class="info-row">
+                                            <span class="info-label">税号：</span>
+                                            <span class="info-value">{{ header.invoice_taxpayer_id }}</span>
+                                        </div>
+                                        <div v-if="header.invoice_ban_name" class="info-row">
+                                            <span class="info-label">开户银行：</span>
+                                            <span class="info-value">{{ header.invoice_ban_name }}</span>
+                                        </div>
+                                        <div v-if="header.invoice_bank_account" class="info-row">
+                                            <span class="info-label">银行账号：</span>
+                                            <span class="info-value">{{ header.invoice_bank_account }}</span>
+                                        </div>
+                                        <div v-if="header.invoice_address" class="info-row">
+                                            <span class="info-label">企业地址：</span>
+                                            <span class="info-value">{{ header.invoice_address }}</span>
+                                        </div>
+                                        <div v-if="header.invoice_phone" class="info-row">
+                                            <span class="info-label">企业电话：</span>
+                                            <span class="info-value">{{ header.invoice_phone }}</span>
+                                        </div>
+                                        <div class="info-row">
+                                            <span class="info-label">发票类型：</span>
+                                            <a-tag :color="getInvoiceTypeColor(header.invoice_type)" size="small">
+                                                {{ getInvoiceTypeText(header.invoice_type) }}
+                                            </a-tag>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </a-card-meta>
+                    </a-card>
+                </a-col>
+            </a-row>
+        </div>
+
+        <!-- 新增/编辑弹窗 -->
+        <a-modal v-model:visible="modalVisible" :title="modalTitle" width="600px" :maskClosable="false"
+            :keyboard="false" @ok="handleSubmit" @cancel="handleCancel" :confirm-loading="confirmLoading">
+            <a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }" layout="horizontal">
+                <!-- 发票抬头名称 -->
+                <a-form-item label="发票抬头" name="invoice_title" required>
+                    <a-input v-model:value="formData.invoice_title" placeholder="请输入发票抬头名称" :maxlength="100" show-count />
+                </a-form-item>
+
+                <!-- 抬头类型 -->
+                <a-form-item label="抬头类型" name="title_type" required>
+                    <a-radio-group v-model:value="formData.title_type" button-style="solid" @change="handleTypeChange">
+                        <a-radio-button value="USER">个人</a-radio-button>
+                        <a-radio-button value="COMPANY">企业</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+
+                <!-- 发票类型 -->
+                <a-form-item label="发票类型" name="invoice_type" required>
+                    <a-select v-model:value="formData.invoice_type" placeholder="请选择发票类型">
+                        <a-select-option value="vat">增值税专用发票</a-select-option>
+                        <a-select-option value="normal">增值税普通发票</a-select-option>
+                        <a-select-option value="electronic">电子普通发票</a-select-option>
+                        <a-select-option value="special">专用发票</a-select-option>
+                        <a-select-option value="general">通用发票</a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <!-- 税号（非个人时显示） -->
+                <a-form-item v-if="formData.title_type !== 'USER'" label="税号" name="invoice_taxpayer_id" :required="formData.title_type === 'COMPANY'">
+                    <a-input v-model:value="formData.invoice_taxpayer_id" placeholder="请输入纳税人识别号/统一社会信用代码" :maxlength="30" />
+                </a-form-item>
+
+                <!-- 开户银行（非个人时显示） -->
+                <a-form-item v-if="formData.title_type !== 'USER'" label="开户银行" name="invoice_ban_name">
+                    <a-input v-model:value="formData.invoice_ban_name" placeholder="请输入开户银行名称" :maxlength="100" />
+                </a-form-item>
+
+                <!-- 银行账号（非个人时显示） -->
+                <a-form-item v-if="formData.title_type !== 'USER'" label="银行账号" name="invoice_bank_account">
+                    <a-input v-model:value="formData.invoice_bank_account" placeholder="请输入银行账号" :maxlength="30" />
+                </a-form-item>
+
+                <!-- 企业地址（非个人时显示） -->
+                <a-form-item v-if="formData.title_type !== 'USER'" label="企业地址" name="invoice_address">
+                    <a-input v-model:value="formData.invoice_address" placeholder="请输入企业注册地址" :maxlength="200" />
+                </a-form-item>
+
+                <!-- 企业电话（非个人时显示） -->
+                <a-form-item v-if="formData.title_type !== 'USER'" label="企业电话" name="invoice_phone">
+                    <a-input v-model:value="formData.invoice_phone" placeholder="请输入企业联系电话" :maxlength="20" />
+                </a-form-item>
+
+                <!-- 设为默认 -->
+                <a-form-item name="is_default" :wrapper-col="{ offset: 6 }">
+                    <a-checkbox v-model:checked="formData.is_default">
+                        设为默认抬头
+                    </a-checkbox>
+                    <div class="form-tip">设为默认后，下单时将自动选择此抬头</div>
+                </a-form-item>
+            </a-form>
+        </a-modal>
+
+        <!-- 分页固定在底部 -->
+        <div class="pagination-container">
+            <a-pagination v-model:current="pagination.current" v-model:page-size="pagination.pageSize"
+                :total="pagination.total" show-size-changer show-jumper show-less-items
+                :page-size-options="[5, 10, 20, 50]" @change="onPageChange" @showSizeChange="onShowSizeChange" />
+        </div>
     </div>
-
-    <!-- 发票抬头列表 -->
-    <div class="invoice-list-container">
-      <a-alert 
-        v-if="invoiceHeaders.length === 0" 
-        message="暂无发票抬头" 
-        description="点击上方按钮添加您的第一个发票抬头"
-        type="info"
-        show-icon
-        style="margin-bottom: 20px;"
-      />
-      
-      <a-row :gutter="[16, 16]">
-        <a-col 
-          v-for="header in sortedHeaders" 
-          :key="header.id"
-          :xs="24" 
-          :sm="24" 
-          :md="12" 
-          :lg="8"
-        >
-          <a-card 
-            :class="['invoice-card', { 'default-card': header.isDefault }]"
-            :bordered="true"
-          >
-            <template #actions>
-              <span @click="editHeader(header)">
-                <EditOutlined />
-                编辑
-              </span>
-              <span 
-                @click="setDefaultHeader(header.id)"
-                :class="{ disabled: header.isDefault }"
-              >
-                <StarOutlined />
-                {{ header.isDefault ? '已是默认' : '设为默认' }}
-              </span>
-              <span @click="showDeleteConfirm(header)">
-                <DeleteOutlined />
-                删除
-              </span>
-            </template>
-            
-            <a-card-meta>
-              <template #title>
-                <div class="card-title">
-                  <span class="header-name">{{ header.name }}</span>
-                  <a-tag 
-                    :color="getTypeColor(header.type)" 
-                    size="small"
-                  >
-                    {{ getTypeText(header.type) }}
-                  </a-tag>
-                  <a-tag 
-                    :color="getInvoiceTypeColor(header.invoiceType)" 
-                    size="small"
-                  >
-                    {{ getInvoiceTypeText(header.invoiceType) }}
-                  </a-tag>
-                </div>
-              </template>
-              
-              <template #description>
-                <div class="card-content">
-                  <!-- 默认标识 -->
-                  <div v-if="header.isDefault" class="default-badge">
-                    <CheckCircleFilled style="color: #52c41a; margin-right: 4px;" />
-                    <span>默认抬头</span>
-                  </div>
-                  
-                  <!-- 详细信息 -->
-                  <div class="info-section">
-                    <div v-if="header.taxNumber" class="info-row">
-                      <span class="info-label">税号：</span>
-                      <span class="info-value">{{ header.taxNumber }}</span>
-                    </div>
-                    
-                    <div v-if="header.bankName" class="info-row">
-                      <span class="info-label">开户银行：</span>
-                      <span class="info-value">{{ header.bankName }}</span>
-                    </div>
-                    
-                    <div v-if="header.bankAccount" class="info-row">
-                      <span class="info-label">银行账号：</span>
-                      <span class="info-value">{{ header.bankAccount }}</span>
-                    </div>
-                    
-                    <div v-if="header.companyAddress" class="info-row">
-                      <span class="info-label">企业地址：</span>
-                      <span class="info-value">{{ header.companyAddress }}</span>
-                    </div>
-                    
-                    <div v-if="header.companyPhone" class="info-row">
-                      <span class="info-label">企业电话：</span>
-                      <span class="info-value">{{ header.companyPhone }}</span>
-                    </div>
-                    
-                    <div class="info-row create-time">
-                      <span class="info-label">创建时间：</span>
-                      <span class="info-value">{{ header.createTime }}</span>
-                    </div>
-                  </div>
-                </div>
-              </template>
-            </a-card-meta>
-          </a-card>
-        </a-col>
-      </a-row>
-    </div>
-
-    <!-- 新增/编辑弹窗 -->
-    <a-modal
-      v-model:visible="modalVisible"
-      :title="modalTitle"
-      width="600px"
-      :maskClosable="false"
-      :keyboard="false"
-      @ok="handleSubmit"
-      @cancel="handleCancel"
-      :confirm-loading="confirmLoading"
-    >
-      <a-form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        :label-col="{ span: 6 }"
-        :wrapper-col="{ span: 18 }"
-        layout="horizontal"
-      >
-        <!-- 发票抬头名称 -->
-        <a-form-item label="发票抬头" name="name" required>
-          <a-input
-            v-model:value="formData.name"
-            placeholder="请输入发票抬头名称"
-            :maxlength="100"
-            show-count
-          />
-        </a-form-item>
-
-        <!-- 抬头类型 -->
-        <a-form-item label="抬头类型" name="type" required>
-          <a-radio-group 
-            v-model:value="formData.type" 
-            button-style="solid"
-            @change="handleTypeChange"
-          >
-            <a-radio-button value="personal">个人</a-radio-button>
-            <a-radio-button value="enterprise">企业</a-radio-button>
-            <a-radio-button value="institution">事业单位</a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-
-        <!-- 发票类型 -->
-        <a-form-item label="发票类型" name="invoiceType" required>
-          <a-select
-            v-model:value="formData.invoiceType"
-            placeholder="请选择发票类型"
-          >
-            <a-select-option value="vat">增值税专用发票</a-select-option>
-            <a-select-option value="normal">增值税普通发票</a-select-option>
-            <a-select-option value="electronic">电子普通发票</a-select-option>
-            <a-select-option value="special">专用发票</a-select-option>
-            <a-select-option value="general">通用发票</a-select-option>
-          </a-select>
-        </a-form-item>
-
-        <!-- 税号（非个人时显示） -->
-        <a-form-item 
-          v-if="formData.type !== 'personal'" 
-          label="税号" 
-          name="taxNumber" 
-          required
-        >
-          <a-input
-            v-model:value="formData.taxNumber"
-            placeholder="请输入纳税人识别号/统一社会信用代码"
-            :maxlength="30"
-          />
-        </a-form-item>
-
-        <!-- 开户银行（非个人时显示） -->
-        <a-form-item 
-          v-if="formData.type !== 'personal'" 
-          label="开户银行" 
-          name="bankName"
-        >
-          <a-input
-            v-model:value="formData.bankName"
-            placeholder="请输入开户银行名称"
-            :maxlength="100"
-          />
-        </a-form-item>
-
-        <!-- 银行账号（非个人时显示） -->
-        <a-form-item 
-          v-if="formData.type !== 'personal'" 
-          label="银行账号" 
-          name="bankAccount"
-        >
-          <a-input
-            v-model:value="formData.bankAccount"
-            placeholder="请输入银行账号"
-            :maxlength="30"
-          />
-        </a-form-item>
-
-        <!-- 企业地址（非个人时显示） -->
-        <a-form-item 
-          v-if="formData.type !== 'personal'" 
-          label="企业地址" 
-          name="companyAddress"
-        >
-          <a-input
-            v-model:value="formData.companyAddress"
-            placeholder="请输入企业注册地址"
-            :maxlength="200"
-          />
-        </a-form-item>
-
-        <!-- 企业电话（非个人时显示） -->
-        <a-form-item 
-          v-if="formData.type !== 'personal'" 
-          label="企业电话" 
-          name="companyPhone"
-        >
-          <a-input
-            v-model:value="formData.companyPhone"
-            placeholder="请输入企业联系电话"
-            :maxlength="20"
-          />
-        </a-form-item>
-
-        <!-- 设为默认 -->
-        <a-form-item name="isDefault" :wrapper-col="{ offset: 6 }">
-          <a-checkbox v-model:checked="formData.isDefault">
-            设为默认抬头
-          </a-checkbox>
-          <div class="form-tip">设为默认后，下单时将自动选择此抬头</div>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </div>
 </template>
 
-<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, nextTick } from 'vue'
 import { message, Modal } from 'ant-design-vue'
+import type { FormInstance } from 'ant-design-vue'
 import {
-  PlusOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  StarOutlined,
-  FileTextOutlined,
-  CheckCircleFilled,
-  ExclamationCircleOutlined
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    StarOutlined,
+    CheckCircleFilled,
+    ExclamationCircleOutlined
 } from '@ant-design/icons-vue'
 
-// 初始数据
-const initialData = [
-  {
-    id: 1,
-    name: '张三科技有限公司',
-    type: 'enterprise',
-    invoiceType: 'vat',
-    taxNumber: '91370100MA3C4BQ123',
-    bankName: '中国工商银行北京分行',
-    bankAccount: '6222021234567890123',
-    companyAddress: '北京市海淀区中关村软件园一期1号楼',
-    companyPhone: '010-12345678',
-    isDefault: true,
-    createTime: '2024-01-15 10:30:45'
-  },
-  {
-    id: 2,
-    name: '李四个人',
-    type: 'personal',
-    invoiceType: 'normal',
-    taxNumber: '',
-    bankName: '',
-    bankAccount: '',
-    companyAddress: '',
-    companyPhone: '',
-    isDefault: false,
-    createTime: '2024-01-10 14:20:15'
-  },
-  {
-    id: 3,
-    name: '某某研究所',
-    type: 'institution',
-    invoiceType: 'electronic',
-    taxNumber: '123456789012345',
-    bankName: '中国建设银行上海分行',
-    bankAccount: '6217001234567890123',
-    companyAddress: '上海市浦东新区张江高科技园区',
-    companyPhone: '021-87654321',
-    isDefault: false,
-    createTime: '2024-01-05 09:15:30'
-  },
-  {
-    id: 4,
-    name: '王五网络有限公司',
-    type: 'enterprise',
-    invoiceType: 'vat',
-    taxNumber: '91370200MA3D4CQ456',
-    bankName: '招商银行深圳分行',
-    bankAccount: '6225881234567890',
-    companyAddress: '深圳市南山区科技园',
-    companyPhone: '0755-66889900',
-    isDefault: false,
-    createTime: '2024-01-20 16:45:22'
-  }
-]
+import { 
+    getinvoiceTitleList, 
+    getDefaultInvoiceTitle, 
+    invoiceTitleInfo, 
+    UpdateDefaultInvoiceTitle,
+    AddDefaultInvoiceTitle,
+    DelInvoiceTitleInfo
+} from '@/apis/admin'
 
 // 响应式数据
-const invoiceHeaders = ref([...initialData])
+const invoiceHeaders = ref([])
 const modalVisible = ref(false)
 const modalMode = ref('add') // 'add' | 'edit'
 const confirmLoading = ref(false)
-const formRef = ref()
+const formRef = ref<FormInstance>()
 
-// 表单数据
-const formData = reactive({
-  id: null,
-  name: '',
-  type: 'personal',
-  invoiceType: 'normal',
-  taxNumber: '',
-  bankName: '',
-  bankAccount: '',
-  companyAddress: '',
-  companyPhone: '',
-  isDefault: false
+// 分页配置
+const pagination = reactive({
+    current: 1,
+    pageSize: 10,
+    total: 0,
 })
 
-// 表单验证规则
+// 表单数据（使用下划线命名）
+const formData = reactive({
+    invoiceTitleID: null as string | null,
+    invoice_title: '',
+    title_type: 'USER',
+    invoice_type: '',
+    invoice_taxpayer_id: '',
+    invoice_ban_name: '',
+    invoice_bank_account: '',
+    invoice_address: '',
+    invoice_phone: '',
+    is_default: false,
+})
+
+// 表单验证规则（使用下划线命名）
 const formRules = {
-  name: [
-    { required: true, message: '请输入发票抬头名称', trigger: 'blur' },
-    { min: 2, max: 100, message: '抬头名称长度为2-100个字符', trigger: 'blur' }
-  ],
-  type: [
-    { required: true, message: '请选择抬头类型', trigger: 'change' }
-  ],
-  invoiceType: [
-    { required: true, message: '请选择发票类型', trigger: 'change' }
-  ],
-  taxNumber: [
-    { 
-      required: formData.type !== 'personal', 
-      message: '请输入税号', 
-      trigger: 'blur' 
-    },
-    { 
-      pattern: /^[A-Z0-9]{15,20}$/, 
-      message: '税号格式不正确（15-20位字母或数字）', 
-      trigger: 'blur' 
-    }
-  ],
-  bankAccount: [
-    { 
-      pattern: /^[0-9]{12,20}$/, 
-      message: '银行账号格式不正确（12-20位数字）', 
-      trigger: 'blur' 
-    }
-  ],
-  companyPhone: [
-    { 
-      pattern: /^(\d{3,4}-)?\d{7,8}$/, 
-      message: '电话号码格式不正确（例：010-12345678）', 
-      trigger: 'blur' 
-    }
-  ]
+    invoice_title: [
+        { required: true, message: '请输入发票抬头名称', trigger: 'blur' },
+        { min: 2, max: 100, message: '抬头名称长度为2-100个字符', trigger: 'blur' }
+    ],
+    title_type: [
+        { required: true, message: '请选择抬头类型', trigger: 'change' }
+    ],
+    invoice_type: [
+        { required: true, message: '请选择发票类型', trigger: 'change' }
+    ],
+    invoice_taxpayer_id: [
+        {
+            required: formData.title_type === 'COMPANY',
+            message: '请输入税号',
+            trigger: 'blur'
+        },
+        {
+            pattern: /^[A-Z0-9]{15,20}$/,
+            message: '税号格式不正确（15-20位字母或数字）',
+            trigger: 'blur'
+        }
+    ],
+    invoice_bank_account: [
+        {
+            pattern: /^[0-9]{12,20}$/,
+            message: '银行账号格式不正确（12-20位数字）',
+            trigger: 'blur'
+        }
+    ],
+    invoice_phone: [
+        {
+            pattern: /^(\d{3,4}-)?\d{7,8}$/,
+            message: '电话号码格式不正确（例：010-12345678）',
+            trigger: 'blur'
+        }
+    ]
 }
 
 // 计算属性
 const modalTitle = computed(() => {
-  return modalMode.value === 'add' ? '新增发票抬头' : '编辑发票抬头'
+    return modalMode.value === 'add' ? '新增发票抬头' : '编辑发票抬头'
 })
 
 const sortedHeaders = computed(() => {
-  return [...invoiceHeaders.value].sort((a, b) => {
-    // 默认的排在最前面
-    if (a.isDefault && !b.isDefault) return -1
-    if (!a.isDefault && b.isDefault) return 1
-    // 其次按创建时间倒序
-    return new Date(b.createTime) - new Date(a.createTime)
-  })
+    return [...invoiceHeaders.value].sort((a, b) => {
+        // 默认的排在最前面
+        if (a.is_default && !b.is_default) return -1
+        if (!a.is_default && b.is_default) return 1
+        // 其次按创建时间倒序
+        return new Date(b.createTime) - new Date(a.createTime)
+    })
 })
 
 // 方法
 const showAddModal = () => {
-  modalMode.value = 'add'
-  resetForm()
-  modalVisible.value = true
+    modalMode.value = 'add'
+    resetForm()
+    modalVisible.value = true
 }
 
-const editHeader = (header) => {
-  modalMode.value = 'edit'
-  Object.assign(formData, { ...header })
-  modalVisible.value = true
+const editHeader = async (header: any) => {
+    try {
+        modalMode.value = 'edit'
+        // 保存当前编辑的ID
+        formData.invoiceTitleID = header.invoiceTitleID
+        
+        // 调用API获取详情
+        const res: any = await invoiceTitleInfo(header.invoiceTitleID)
+        console.log('API返回的发票详情:', res)
+        
+        // 根据API响应结构：{code: 1, msg: 'success', data: {...}}
+        if (res) {
+            // 直接将API返回的data对象赋值给表单数据
+            Object.assign(formData, {
+                invoice_title: res.invoice_title || '',
+                title_type: res.title_type || 'USER',
+                invoice_type: res.invoice_type || '',
+                invoice_taxpayer_id: res.invoice_taxpayer_id || '',
+                invoice_ban_name: res.invoice_ban_name || '',
+                invoice_bank_account: res.invoice_bank_account || '',
+                invoice_address: res.invoice_address || '',
+                invoice_phone: res.invoice_phone || '',
+                is_default: res.is_default || false
+            })
+            console.log('赋值后的表单数据:', formData)
+            
+            modalVisible.value = true
+            
+            // 清空验证状态
+            nextTick(() => {
+                if (formRef.value) {
+                    formRef.value.clearValidate()
+                }
+            })
+        } else {
+            console.log('API响应格式不正确:', res)
+            message.error('获取发票详情失败：' + (res?.msg || '未知错误'))
+        }
+    } catch (error) {
+        console.error('获取发票详情失败:', error)
+        message.error('获取发票详情失败')
+    }
 }
 
 const resetForm = () => {
-  Object.assign(formData, {
-    id: null,
-    name: '',
-    type: 'personal',
-    invoiceType: 'normal',
-    taxNumber: '',
-    bankName: '',
-    bankAccount: '',
-    companyAddress: '',
-    companyPhone: '',
-    isDefault: false
-  })
-  if (formRef.value) {
-    formRef.value.clearValidate()
-  }
+    Object.assign(formData, {
+        invoiceTitleID: null,
+        invoice_title: '',
+        title_type: 'USER',
+        invoice_type: '',
+        invoice_taxpayer_id: '',
+        invoice_ban_name: '',
+        invoice_bank_account: '',
+        invoice_address: '',
+        invoice_phone: '',
+        is_default: false
+    })
+    
+    // 清空验证状态
+    nextTick(() => {
+        if (formRef.value) {
+            formRef.value.clearValidate()
+        }
+    })
 }
 
 const handleTypeChange = () => {
-  // 类型切换时，如果是个人类型，清除非必填字段
-  if (formData.type === 'personal') {
-    formData.taxNumber = ''
-    formData.bankName = ''
-    formData.bankAccount = ''
-    formData.companyAddress = ''
-    formData.companyPhone = ''
-  }
+    // 类型切换时，如果是个人类型，清除非必填字段
+    if (formData.title_type === 'USER') {
+        formData.invoice_taxpayer_id = ''
+        formData.invoice_ban_name = ''
+        formData.invoice_bank_account = ''
+        formData.invoice_address = ''
+        formData.invoice_phone = ''
+    }
 }
 
-const handleSubmit = () => {
-  formRef.value.validate().then(() => {
-    confirmLoading.value = true
+const handleSubmit = async () => {
+    if (!formRef.value) return
     
-    // 模拟API调用延迟
-    setTimeout(() => {
-      if (modalMode.value === 'add') {
-        addNewHeader()
-      } else {
-        updateHeader()
-      }
+    try {
+        await formRef.value.validate()
+        confirmLoading.value = true
+
+        // 准备提交数据 - 将下划线字段名映射到驼峰字段名
+        const submitData = {
+            invoiceTitleID: formData.invoiceTitleID,
+            invoiceTitle: formData.invoice_title,
+            titleType: formData.title_type,
+            invoiceType: formData.invoice_type,
+            invoiceTaxpayerID: formData.invoice_taxpayer_id,
+            invoiceBankName: formData.invoice_ban_name,
+            invoiceBankAccount: formData.invoice_bank_account,
+            invoiceAddress: formData.invoice_address,
+            invoicePhone: formData.invoice_phone,
+            isDefault: formData.is_default
+        }
+
+        console.log('提交的数据:', submitData)
+        console.log('当前模式:', modalMode.value)
+
+        let res: any
+
+        if (modalMode.value === 'add') {
+            // 新增逻辑 - 不需要传递 invoiceTitleID 字段
+            const addData = { ...submitData }
+            // 删除 invoiceTitleID 字段，因为新增时不需要
+            delete addData.invoiceTitleID
+            console.log('新增数据:', addData)
+            
+            res = await AddDefaultInvoiceTitle(addData)
+            
+            if (res?.code === 1) {
+                message.success('新增发票抬头成功')
+                modalVisible.value = false
+                resetForm()
+                // 刷新列表
+                getDataList()
+            } else {
+                message.error(res?.msg || '新增失败')
+            }
+        } else {
+            // 编辑逻辑
+            console.log('调用更新接口，invoiceTitleID:', formData.invoiceTitleID)
+            
+            // 确保invoiceTitleID有值
+            if (!formData.invoiceTitleID) {
+                message.error('发票抬头ID不能为空')
+                confirmLoading.value = false
+                return
+            }
+            
+            res = await UpdateDefaultInvoiceTitle(submitData)
+            
+            if (res?.code === 1) {
+                message.success('修改发票抬头成功')
+                modalVisible.value = false
+                resetForm()
+                // 刷新列表
+                getDataList()
+            } else {
+                message.error(res?.msg || '修改失败')
+            }
+        }
+        
+    } catch (error) {
+        console.log('表单验证失败:', error)
+        message.error('请检查表单填写是否正确')
+    } finally {
+        confirmLoading.value = false
+    }
+}
+
+const setDefaultHeader = async (id: string) => {
+    try {
+        const res: any = await getDefaultInvoiceTitle(id)
+        if (res?.code === 1) {
+            message.success('设置默认抬头成功')
+            getDataList()
+        } else {
+            message.error(res?.msg || '操作失败')
+        }
+    } catch (error) {
+        console.error('设置默认抬头失败:', error)
+        message.error('设置默认抬头失败')
+    }
+}
+
+const showDeleteConfirm = (header: any) => {
+    Modal.confirm({
+        title: '确认删除',
       
-      confirmLoading.value = false
-      modalVisible.value = false
-    }, 500)
-  }).catch(error => {
-    console.log('表单验证失败:', error)
-  })
-}
-
-const addNewHeader = () => {
-  const newHeader = {
-    ...formData,
-    id: Date.now(), // 生成唯一ID
-    createTime: new Date().toLocaleString('zh-CN')
-  }
-  
-  // 如果设置为默认，清除其他默认设置
-  if (newHeader.isDefault) {
-    invoiceHeaders.value.forEach(header => {
-      header.isDefault = false
+        content: `确定要删除发票抬头"${header.invoice_title}"吗？此操作不可恢复。`,
+        okText: '删除',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk() {
+            deleteHeader(header.invoiceTitleID)
+        }
     })
-  }
-  
-  invoiceHeaders.value.unshift(newHeader)
-  message.success('新增发票抬头成功')
 }
 
-const updateHeader = () => {
-  const index = invoiceHeaders.value.findIndex(item => item.id === formData.id)
-  if (index !== -1) {
-    const oldHeader = invoiceHeaders.value[index]
-    
-    // 如果设置为默认，清除其他默认设置
-    if (formData.isDefault && !oldHeader.isDefault) {
-      invoiceHeaders.value.forEach(header => {
-        header.isDefault = false
-      })
+const deleteHeader = async (id: string) => {
+    try {
+        const res: any = await DelInvoiceTitleInfo(id)    
+        if (res?.code === 1) {
+            message.success('删除发票抬头成功')
+            getDataList()
+        } else {
+            message.error(res?.msg || '删除失败')
+        }
+    } catch (error) {
+        console.error('删除发票抬头失败:', error)
+        message.error('删除发票抬头失败')
     }
-    
-    // 更新数据
-    Object.assign(invoiceHeaders.value[index], formData, {
-      createTime: oldHeader.createTime // 保留创建时间
-    })
-    
-    message.success('修改发票抬头成功')
-  }
-}
-
-const setDefaultHeader = (id) => {
-  invoiceHeaders.value.forEach(header => {
-    header.isDefault = header.id === id
-  })
-  message.success('设置默认抬头成功')
-}
-
-const showDeleteConfirm = (header) => {
-  Modal.confirm({
-    title: '确认删除',
-    icon: ExclamationCircleOutlined, // 这里直接传递图标组件
-    content: `确定要删除发票抬头"${header.name}"吗？此操作不可恢复。`,
-    okText: '删除',
-    okType: 'danger',
-    cancelText: '取消',
-    onOk() {
-      deleteHeader(header.id)
-    }
-  })
-}
-
-const deleteHeader = (id) => {
-  const index = invoiceHeaders.value.findIndex(item => item.id === id)
-  if (index !== -1) {
-    const isDefault = invoiceHeaders.value[index].isDefault
-    invoiceHeaders.value.splice(index, 1)
-    
-    // 如果删除的是默认抬头，且还有其他抬头，设置第一个为默认
-    if (isDefault && invoiceHeaders.value.length > 0) {
-      invoiceHeaders.value[0].isDefault = true
-      message.success('已自动设置第一个抬头为默认')
-    }
-    
-    message.success('删除发票抬头成功')
-  }
 }
 
 const handleCancel = () => {
-  modalVisible.value = false
-  resetForm()
+    modalVisible.value = false
+    resetForm()
+}
+
+const onPageChange = (page: number, pageSize: number) => {
+    pagination.current = page
+    pagination.pageSize = pageSize
+    getDataList()
+}
+
+const onShowSizeChange = (current: number, size: number) => {
+    pagination.current = 1
+    pagination.pageSize = size
+    getDataList()
 }
 
 // 辅助函数
-const getTypeText = (type) => {
-  const typeMap = {
-    personal: '个人',
-    enterprise: '企业',
-    institution: '事业单位'
-  }
-  return typeMap[type] || '未知'
+const getTypeText = (type: string) => {
+    const typeMap: Record<string, string> = {
+        USER: '个人',
+        COMPANY: '企业',
+        institution: '事业单位'
+    }
+    return typeMap[type] || '未知'
 }
 
-const getTypeColor = (type) => {
-  const colorMap = {
-    personal: 'blue',
-    enterprise: 'green',
-    institution: 'orange'
-  }
-  return colorMap[type] || 'default'
+const getTypeColor = (type: string) => {
+    const colorMap: Record<string, string> = {
+        USER: 'blue',
+        COMPANY: 'green',
+        institution: 'orange'
+    }
+    return colorMap[type] || 'default'
 }
 
-const getInvoiceTypeText = (type) => {
-  const typeMap = {
-    vat: '增值税专用',
-    normal: '增值税普通',
-    electronic: '电子普通',
-    special: '专用发票',
-    general: '通用发票'
-  }
-  return typeMap[type] || '未知'
+const getInvoiceTypeText = (type: string) => {
+    const typeMap: Record<string, string> = {
+        vat: '增值税专用',
+        normal: '增值税普通',
+        electronic: '电子普通',
+        special: '专用发票',
+        general: '通用发票'
+    }
+    return typeMap[type] || '未知'
 }
 
-const getInvoiceTypeColor = (type) => {
-  const colorMap = {
-    vat: 'red',
-    normal: 'purple',
-    electronic: 'cyan',
-    special: 'magenta',
-    general: 'gray'
-  }
-  return colorMap[type] || 'default'
+const getInvoiceTypeColor = (type: string) => {
+    const colorMap: Record<string, string> = {
+        vat: 'red',
+        normal: 'purple',
+        electronic: 'cyan',
+        special: 'magenta',
+        general: 'gray'
+    }
+    return colorMap[type] || 'default'
+}
+
+// 获取发票列表
+const getDataList = async () => {
+    try {
+        const res: any = await getinvoiceTitleList({ 
+            page_num: pagination.current, 
+            page_size: pagination.pageSize 
+        })
+        console.log('发票列表:', res)
+        invoiceHeaders.value = res || []
+        // pagination.total = res.total || 0
+    } catch (error) {
+        console.error('获取发票列表错误:', error)
+        message.error('获取发票列表失败')
+    }
 }
 
-// 初始化
 onMounted(() => {
-  console.log('发票抬头管理页面已加载')
+    getDataList()
 })
 </script>
 
 <style scoped>
 .invoice-page {
-  /* padding: 10px; */
-  /* background-color: #f5f5f5; */
-  min-height: 100vh;
+    min-height: 100vh;
 }
 
 .page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding: 20px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
 .page-title {
-  margin: 0;
-  /* color: #1890ff; */
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.page-title .anticon {
-  font-size: 28px;
+    margin: 0;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
 .header-actions {
-  display: flex;
-  gap: 12px;
+    display: flex;
+    gap: 12px;
 }
 
 .invoice-list-container {
-  background: white;
-  padding: 24px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    background: white;
+    padding: 24px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
 .invoice-card {
-  height: 100%;
-  transition: all 0.3s ease;
-  border: 1px solid #e8e8e8;
-  border-radius: 8px;
+    height: 100%;
+    transition: all 0.3s ease;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
 }
 
 .invoice-card:hover {
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
-  border-color: #1890ff;
-  transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+    border-color: #1890ff;
+    transform: translateY(-2px);
 }
 
 .invoice-card.default-card {
-  border: 2px solid #52c41a;
-  background: linear-gradient(135deg, #f6ffed 0%, #e6ffd1 100%);
+    border: 2px solid #52c41a;
+    background: linear-gradient(135deg, #f6ffed 0%, #e6ffd1 100%);
 }
 
 .card-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
 }
 
 .header-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  line-height: 1.4;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    line-height: 1.4;
 }
 
 .card-content {
-  margin-top: 12px;
+    margin-top: 12px;
 }
 
 .default-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 8px;
-  background: #f6ffed;
-  border: 1px solid #b7eb8f;
-  border-radius: 4px;
-  font-size: 12px;
-  color: #52c41a;
-  margin-bottom: 12px;
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    background: #f6ffed;
+    border: 1px solid #b7eb8f;
+    border-radius: 4px;
+    font-size: 11px;
+    color: #52c41a;
+    margin-left: 8px;
 }
 
 .info-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 
 .info-row {
-  display: flex;
-  font-size: 13px;
-  line-height: 1.5;
-  word-break: break-all;
+    display: flex;
+    font-size: 13px;
+    line-height: 1.5;
+    word-break: break-all;
 }
 
 .info-label {
-  color: #666;
-  min-width: 70px;
-  flex-shrink: 0;
+    color: #666;
+    min-width: 70px;
+    flex-shrink: 0;
 }
 
 .info-value {
-  color: #333;
-  flex: 1;
+    color: #333;
+    flex: 1;
 }
 
 .create-time {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px dashed #f0f0f0;
-  color: #999;
-  font-size: 12px;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px dashed #f0f0f0;
+    color: #999;
+    font-size: 12px;
 }
 
 :deep(.ant-card-actions) {
-  border-top: 1px solid #f0f0f0;
-  background: #fafafa;
+    border-top: 1px solid #f0f0f0;
+    background: #fafafa;
 }
 
 :deep(.ant-card-actions > li) {
-  margin: 12px 0;
-  color: #666;
-  cursor: pointer;
-  transition: color 0.3s;
+    margin: 12px 0;
+    color: #666;
+    cursor: pointer;
+    transition: color 0.3s;
 }
 
 :deep(.ant-card-actions > li:hover) {
-  color: #1890ff;
+    color: #1890ff;
 }
 
 :deep(.ant-card-actions > li.disabled) {
-  color: #ccc;
-  cursor: not-allowed;
+    color: #ccc;
+    cursor: not-allowed;
 }
 
 :deep(.ant-card-actions > li span) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
 }
 
 :deep(.ant-modal-body) {
-  padding: 24px;
+    padding: 24px;
 }
 
 :deep(.ant-form-item) {
-  margin-bottom: 16px;
+    margin-bottom: 16px;
 }
 
 .form-tip {
-  font-size: 12px;
-  color: #999;
-  margin-top: 4px;
+    font-size: 12px;
+    color: #999;
+    margin-top: 4px;
+}
+
+.pagination-container {
+    margin-top: 24px;
+    padding-top: 24px;
+    text-align: right;
+    border-top: 1px solid #e8e8e8;
 }
 
 /* 响应式调整 */
 @media (max-width: 768px) {
-  .page-header {
-    flex-direction: column;
-    gap: 16px;
-    align-items: stretch;
-  }
-  
-  .header-actions {
-    justify-content: flex-end;
-  }
-  
-  :deep(.ant-form .ant-form-item .ant-form-item-label) {
-    text-align: left;
-  }
-  
-  :deep(.ant-form .ant-form-item .ant-form-item-control) {
-    width: 100%;
-  }
+    .page-header {
+        flex-direction: column;
+        gap: 16px;
+        align-items: stretch;
+    }
+
+    .header-actions {
+        justify-content: flex-end;
+    }
+
+    :deep(.ant-form .ant-form-item .ant-form-item-label) {
+        text-align: left;
+    }
+
+    :deep(.ant-form .ant-form-item .ant-form-item-control) {
+        width: 100%;
+    }
 }
 </style>
\ No newline at end of file