feat: 邮箱账单自动拉取

- 新增邮箱配置、发件人规则、待处理账单三张表（SQLite/MySQL 双脚本）及 CRUD 接口 - 按邮件发件人匹配账单类型，未命中忽略；发件人规则可配置解压密码与默认分类/标签 - 支持 IMAP IDLE 实时监听、定时兜底与手动立即检查；拉取范围可配置（仅新邮件/最近 N 天/最近 N 封） - 附件保存至本地 data/email-bill，解析预览后手动导入，复用账单解析与规则引擎 - 立即检查通过 SSE 实时推送执行进度 - 前端新增「邮箱账单」页（邮箱配置/发件人规则/待处理账单三 Tab），支持子路由与 Tab 偏好记忆，配置弹窗提供常用 IMAP 服务器候选项 - 新用户注册自动初始化默认发件人规则（支付宝/微信/美团/招商银行/交通银行） - 抽取共用账单预览与结果组件，供上传导入与邮箱账单复用同时包含： - 统计新增口径筛选（仅计入/全部/仅不计入），支付方式改为后端动态获取 - 统一实体 createdAt/updatedAt 位置至 id 之后，调整部分日志级别
2026-09-19 17:50:55 +08:00
parent dedf30c74d
commit 9bc858eefc
65 changed files with 5940 additions and 529 deletions
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// 账单导入结果面板：展示导入统计与失败信息，供上传导入与邮箱账单复用
+import { useI18n } from 'vue-i18n'
+import { NSpace, NButton, NAlert, NText } from 'naive-ui'
+
+defineProps<{
+  result: { total: number; imported: number; skipped: number; failed: number; messages: string[] } | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'done'): void
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <NSpace vertical :size="12">
+    <NAlert type="success" :show-icon="true">
+      {{ t('import.resultSummary', { imported: result?.imported ?? 0, skipped: result?.skipped ?? 0, failed: result?.failed ?? 0 }) }}
+    </NAlert>
+    <div v-if="result?.messages?.length" style="max-height: 320px; overflow: auto;">
+      <NText v-for="(msg, i) in result.messages" :key="i" depth="3" style="display: block; font-size: 12px;">
+        {{ msg }}
+      </NText>
+    </div>
+    <NSpace justify="end">
+      <NButton type="primary" @click="emit('done')">{{ t('import.done') }}</NButton>
+    </NSpace>
+  </NSpace>
+</template>
@@ -0,0 +1,403 @@
+<script setup lang="ts">
+// 账单预览面板：预览解析结果、筛选、勾选，并设置默认分类/标签后确认导入
+// 供上传导入（BillImportPanel）与邮箱账单解析弹窗复用；导入动作由父组件执行
+import { ref, computed, h, watch, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  useMessage, NSpace, NButton, NSelect, NDataTable, NCheckbox, NTag, NText, NInput, NInputNumber,
+} from 'naive-ui'
+import type { DataTableColumns } from 'naive-ui'
+import type { ParsedBillRow, BillImportItem } from '../api/transaction'
+import { getCategoryList } from '../api/category'
+import { getTagList } from '../api/tag'
+
+const props = defineProps<{
+  /** 解析结果行 */
+  rows: ParsedBillRow[]
+  /** 父组件导入进行中 */
+  importing?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'confirm', payload: {
+    items: BillImportItem[]
+    expenseCategoryId: number | null
+    incomeCategoryId: number | null
+    tagIds: number[]
+  }): void
+  (e: 'back'): void
+}>()
+
+const message = useMessage()
+const { t } = useI18n()
+
+// 勾选状态
+const checkedRowNos = ref<number[]>([])
+
+// 筛选条件
+const filterKeyword = ref('')
+const filterType = ref<string | null>(null)
+const filterStatus = ref<string | null>(null)
+const filterMinAmount = ref<number | null>(null)
+const filterMaxAmount = ref<number | null>(null)
+
+// 类型筛选选项
+const typeFilterOptions = computed(() => [
+  { label: t('import.typeFilter.income'), value: 'INCOME' },
+  { label: t('import.typeFilter.expense'), value: 'EXPENSE' },
+  { label: t('import.typeFilter.neutral'), value: 'NEUTRAL' },
+])
+
+// 状态筛选选项
+const statusFilterOptions = computed(() => [
+  { label: t('import.statusFilter.importable'), value: 'importable' },
+  { label: t('import.statusFilter.duplicate'), value: 'duplicate' },
+  { label: t('import.statusFilter.error'), value: 'error' },
+])
+
+/** 重置预览筛选条件 */
+function resetFilters() {
+  filterKeyword.value = ''
+  filterType.value = null
+  filterStatus.value = null
+  filterMinAmount.value = null
+  filterMaxAmount.value = null
+}
+
+// 默认分类
+const expenseCategories = ref<{ label: string; value: number; icon: string }[]>([])
+const incomeCategories = ref<{ label: string; value: number; icon: string }[]>([])
+const expenseCategoryId = ref<number | null>(null)
+const incomeCategoryId = ref<number | null>(null)
+
+// 默认标签
+const allTags = ref<{ label: string; value: number }[]>([])
+const importTagIds = ref<number[]>([])
+
+/** 按筛选条件过滤后的账单行 */
+const filteredRows = computed(() => {
+  const kw = filterKeyword.value.trim().toLowerCase()
+  return props.rows.filter((r) => {
+    if (kw) {
+      const text = `${r.counterparty || ''} ${r.product || ''} ${r.externalNo || ''}`.toLowerCase()
+      if (!text.includes(kw)) return false
+    }
+    if (filterType.value === 'NEUTRAL') {
+      if (r.includeInStats) return false
+    } else if (filterType.value && r.type !== filterType.value) {
+      return false
+    }
+    if (filterStatus.value === 'importable' && !r.importable) return false
+    if (filterStatus.value === 'duplicate' && !r.duplicate) return false
+    if (filterStatus.value === 'error' && !r.error) return false
+    if (filterMinAmount.value != null && Number(r.amount) < filterMinAmount.value) return false
+    if (filterMaxAmount.value != null && Number(r.amount) > filterMaxAmount.value) return false
+    return true
+  })
+})
+
+/** 可导入的行（受筛选影响） */
+const selectableRows = computed(() => filteredRows.value.filter((r) => r.importable))
+/** 已勾选的行 */
+const checkedRows = computed(() => props.rows.filter((r) => checkedRowNos.value.includes(r.rowNo)))
+/** 是否全选（基于当前筛选出的可导入行） */
+const allChecked = computed(
+  () => selectableRows.value.length > 0 && selectableRows.value.every((r) => checkedRowNos.value.includes(r.rowNo)),
+)
+/** 是否存在部分勾选（基于当前筛选出的可导入行） */
+const someChecked = computed(() => {
+  const checkedVisible = selectableRows.value.filter((r) => checkedRowNos.value.includes(r.rowNo))
+  return checkedVisible.length > 0 && !allChecked.value
+})
+
+/** 表格列定义（随语言切换响应式更新） */
+const columns = computed<DataTableColumns<ParsedBillRow>>(() => [
+  {
+    title: () =>
+      h(NCheckbox, {
+        checked: allChecked.value,
+        indeterminate: someChecked.value,
+        disabled: selectableRows.value.length === 0,
+        onUpdateChecked: (v: boolean) => toggleAll(v),
+      }),
+    key: 'checked',
+    width: 50,
+    render: (row) =>
+      h(NCheckbox, {
+        checked: checkedRowNos.value.includes(row.rowNo),
+        disabled: !row.importable,
+        onUpdateChecked: (v: boolean) => toggleRow(row, v),
+      }),
+  },
+  {
+    title: t('import.column.transactionTime'),
+    key: 'transactionTime',
+    width: 150,
+    render: (row) => (row.transactionTime ? row.transactionTime.replace('T', ' ').substring(0, 16) : '-'),
+  },
+  {
+    title: t('import.column.type'),
+    key: 'type',
+    width: 90,
+    render: (row) => {
+      if (!row.importable) {
+        return h(NTag, { type: 'error', size: 'small' }, { default: () => t('import.notImportable') })
+      }
+      if (!row.includeInStats) {
+        return h(NTag, { type: 'default', size: 'small' }, { default: () => t('import.notIncluded') })
+      }
+      return h(
+        NTag,
+        { type: row.type === 'INCOME' ? 'success' : 'error', size: 'small' },
+        { default: () => (row.type === 'INCOME' ? t('common.types.income') : t('common.types.expense')) },
+      )
+    },
+  },
+  {
+    title: t('import.column.includeInStats'),
+    key: 'includeInStats',
+    width: 100,
+    align: 'center',
+    render: (row) =>
+      h(NCheckbox, {
+        checked: !!row.includeInStats,
+        disabled: !row.importable,
+        onUpdateChecked: (v: boolean) => toggleIncludeInStats(row, v),
+      }),
+  },
+  {
+    title: t('import.column.amount'),
+    key: 'amount',
+    width: 110,
+    render: (row) => {
+      const color = row.type === 'INCOME' ? '#18a058' : '#d03050'
+      return h('span', { style: { color, fontWeight: 'bold' } }, `${row.type === 'INCOME' ? '+' : '-'}${Number(row.amount).toFixed(2)}`)
+    },
+  },
+  { title: t('import.column.counterparty'), key: 'counterparty', width: 160, ellipsis: { tooltip: true } },
+  { title: t('import.column.product'), key: 'product', ellipsis: { tooltip: true } },
+  {
+    title: t('import.column.status'),
+    key: 'tradeStatus',
+    width: 150,
+    render: (row) => {
+      if (row.error) {
+        return h(NTag, { type: 'error', size: 'small' }, { default: () => row.error })
+      }
+      if (row.duplicate) {
+        return h(NTag, { type: 'warning', size: 'small' }, { default: () => t('import.statusFilter.duplicate') })
+      }
+      return h('span', null, row.tradeStatus || '-')
+    },
+  },
+  {
+    title: t('import.column.matchedRule'),
+    key: 'matchedRule',
+    width: 220,
+    render: (row) => {
+      const ruleNames = row.matchedRuleNames || []
+      const suggestedTags = row.suggestedTags || []
+      if (ruleNames.length === 0 && !row.suggestedCategoryId && suggestedTags.length === 0) {
+        return h('span', { style: { color: '#ccc' } }, '—')
+      }
+      const nodes: any[] = []
+      // 命中规则名，多个时折叠为 +N
+      if (ruleNames.length) {
+        nodes.push(h(NTag, { size: 'small', type: 'warning' }, {
+          default: () => (ruleNames.length > 1 ? `${ruleNames[0]} +${ruleNames.length - 1}` : ruleNames[0]),
+        }))
+      }
+      // 建议分类
+      if (row.suggestedCategoryId) {
+        nodes.push(h(NTag, { size: 'small', type: 'info' }, {
+          default: () => `${row.suggestedCategoryIcon || ''}${row.suggestedCategoryName || ''}`,
+        }))
+      }
+      // 建议标签
+      for (const tag of suggestedTags) {
+        nodes.push(h(NTag, {
+          size: 'small',
+          color: tag.color ? { color: tag.color, textColor: '#fff' } : undefined,
+        }, { default: () => tag.name }))
+      }
+      return h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '4px' } }, nodes)
+    },
+  },
+])
+
+/** 加载分类选项 */
+async function loadCategories() {
+  try {
+    const [expenseRes, incomeRes]: any = await Promise.all([getCategoryList('EXPENSE'), getCategoryList('INCOME')])
+    expenseCategories.value = (expenseRes.data || []).map((c: any) => ({ label: c.name, value: c.id, icon: c.icon || '' }))
+    incomeCategories.value = (incomeRes.data || []).map((c: any) => ({ label: c.name, value: c.id, icon: c.icon || '' }))
+  } catch (e: any) {
+    message.error(e.message || t('import.loadCategoriesFailed'))
+  }
+}
+
+/** 分类下拉项渲染：图标 + 名称 */
+function renderCategoryLabel(option: any) {
+  return h('span', null, [
+    option.icon ? h('span', { style: { marginRight: '6px' } }, option.icon) : null,
+    option.label,
+  ])
+}
+
+/** 加载标签选项 */
+async function loadTags() {
+  try {
+    const res: any = await getTagList()
+    allTags.value = (res.data || []).map((tag: any) => ({ label: tag.name, value: tag.id }))
+  } catch (e: any) {
+    message.error(e.message || t('import.loadTagsFailed'))
+  }
+}
+
+/** 切换单行勾选 */
+function toggleRow(row: ParsedBillRow, checked: boolean) {
+  if (checked) {
+    if (!checkedRowNos.value.includes(row.rowNo)) {
+      checkedRowNos.value = [...checkedRowNos.value, row.rowNo]
+    }
+  } else {
+    checkedRowNos.value = checkedRowNos.value.filter((n) => n !== row.rowNo)
+  }
+}
+
+/** 全选/取消全选 */
+function toggleAll(checked: boolean) {
+  checkedRowNos.value = checked ? selectableRows.value.map((r) => r.rowNo) : []
+}
+
+/** 切换单行是否计入统计 */
+function toggleIncludeInStats(row: ParsedBillRow, value: boolean) {
+  row.includeInStats = value
+}
+
+/** 批量设置已勾选行的计入统计标记 */
+function setCheckedIncludeInStats(value: boolean) {
+  if (checkedRows.value.length === 0) {
+    message.warning(t('import.selectAtLeastOne'))
+    return
+  }
+  checkedRows.value.forEach((row) => {
+    row.includeInStats = value
+  })
+}
+
+/** 确认导入：向父组件抛出勾选行与默认归类 */
+function handleConfirm() {
+  if (checkedRows.value.length === 0) {
+    message.warning(t('import.selectAtLeastOne'))
+    return
+  }
+  const items: BillImportItem[] = checkedRows.value.map((r) => ({
+    externalNo: r.externalNo,
+    transactionTime: r.transactionTime,
+    type: r.type,
+    amount: r.amount,
+    counterparty: r.counterparty,
+    product: r.product,
+    includeInStats: r.includeInStats,
+    rawData: r.rawData,
+  }))
+  emit('confirm', {
+    items,
+    expenseCategoryId: expenseCategoryId.value,
+    incomeCategoryId: incomeCategoryId.value,
+    tagIds: importTagIds.value,
+  })
+}
+
+// 解析结果变化时重置勾选（默认选中解析器建议行）与筛选条件
+watch(() => props.rows, (rows) => {
+  checkedRowNos.value = rows.filter((r) => r.selected).map((r) => r.rowNo)
+  resetFilters()
+}, { immediate: true })
+
+onMounted(() => {
+  loadCategories()
+  loadTags()
+})
+</script>
+
+<template>
+  <NSpace vertical :size="12">
+    <NSpace align="center" :wrap="true" :size="[12, 12]">
+      <NText>{{ t('import.expenseDefaultCategory') }}</NText>
+      <NSelect
+        v-model:value="expenseCategoryId"
+        :options="expenseCategories"
+        :render-label="renderCategoryLabel"
+        filterable
+        clearable
+        :placeholder="t('import.notSetCategory')"
+        style="width: 180px;"
+      />
+      <NText>{{ t('import.incomeDefaultCategory') }}</NText>
+      <NSelect
+        v-model:value="incomeCategoryId"
+        :options="incomeCategories"
+        :render-label="renderCategoryLabel"
+        filterable
+        clearable
+        :placeholder="t('import.notSetCategory')"
+        style="width: 180px;"
+      />
+      <NText>{{ t('import.defaultTags') }}</NText>
+      <NSelect
+        v-model:value="importTagIds"
+        :options="allTags"
+        multiple
+        clearable
+        filterable
+        :max-tag-count="2"
+        :placeholder="t('import.notSetTag')"
+        style="width: 200px;"
+      />
+      <NCheckbox
+        :checked="allChecked"
+        :indeterminate="someChecked"
+        :disabled="selectableRows.length === 0"
+        @update:checked="toggleAll"
+      >
+        {{ t('import.selectAll') }}
+      </NCheckbox>
+      <NButton size="small" :disabled="checkedRows.length === 0" @click="setCheckedIncludeInStats(true)">
+        {{ t('import.setIncluded') }}
+      </NButton>
+      <NButton size="small" :disabled="checkedRows.length === 0" @click="setCheckedIncludeInStats(false)">
+        {{ t('import.setExcluded') }}
+      </NButton>
+      <NText depth="3">{{ t('import.previewSummary', { total: rows.length, filtered: filteredRows.length, checked: checkedRows.length }) }}</NText>
+    </NSpace>
+
+    <!-- 筛选条件 -->
+    <NSpace align="center" :wrap="true" :size="[12, 12]">
+      <NInput v-model:value="filterKeyword" clearable :placeholder="t('import.searchPlaceholder')" style="width: 220px;" />
+      <NSelect v-model:value="filterType" :options="typeFilterOptions" clearable :placeholder="t('import.typePlaceholder')" style="width: 120px;" />
+      <NSelect v-model:value="filterStatus" :options="statusFilterOptions" clearable :placeholder="t('import.statusPlaceholder')" style="width: 130px;" />
+      <NInputNumber v-model:value="filterMinAmount" :min="0" :precision="2" clearable :placeholder="t('common.min')" style="width: 120px;" />
+      <span style="color: #999;">~</span>
+      <NInputNumber v-model:value="filterMaxAmount" :min="0" :precision="2" clearable :placeholder="t('common.max')" style="width: 120px;" />
+      <NButton size="small" @click="resetFilters">{{ t('common.reset') }}</NButton>
+    </NSpace>
+
+    <NDataTable
+      :columns="columns"
+      :data="filteredRows"
+      :max-height="420"
+      :row-key="(row) => row.rowNo"
+      size="small"
+      :bordered="false"
+    />
+
+    <NSpace justify="end">
+      <NButton @click="emit('back')">{{ t('import.prevStep') }}</NButton>
+      <NButton type="primary" :loading="importing" @click="handleConfirm">
+        {{ t('import.confirmImport', { count: checkedRows.length }) }}
+      </NButton>
+    </NSpace>
+  </NSpace>
+</template>