EmailBill/Web/src/views/SettingView.vue

<template>
  <div class="page-container-flex">
    <van-nav-bar title="设置" placeholder/>
    <div class="scroll-content">
      <div class="detail-header" style="padding-bottom: 5px;">
        <p>账单</p>
      </div>
      <van-cell-group inset>
        <van-cell title="从支付宝导入" is-link @click="handleImportClick('Alipay')" />
        <van-cell title="从微信导入" is-link @click="handleImportClick('WeChat')" />
        <van-cell title="周期记录" is-link @click="handlePeriodicRecord" />
      </van-cell-group>

      <!-- 隐藏的文件选择器 -->
      <input ref="fileInputRef" type="file" accept=".csv,.xlsx,.xls" style="display: none" @change="handleFileChange" />

      <div class="detail-header" style="padding-bottom: 5px;">
        <p>分类</p>
      </div>
      <van-cell-group inset>
        <van-cell title="编辑分类" is-link @click="handleEditClassification" />
        <van-cell title="批量分类" is-link @click="handleBatchClassification" />
        <van-cell title="智能分类" is-link @click="handleSmartClassification" />
        <!-- <van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" /> -->
      </van-cell-group>
      <div class="detail-header" style="padding-bottom: 5px;">
        <p>开发者</p>
      </div>
      <van-cell-group inset>
        <van-cell title="查看日志" is-link @click="handleLogView" />
      </van-cell-group>

      <div class="detail-header" style="padding-bottom: 5px;">
        <p>账户</p>
      </div>
      <van-cell-group inset>
        <van-cell title="退出登录" is-link @click="handleLogout" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showLoadingToast, showSuccessToast, showToast, closeToast, showConfirmDialog } from 'vant'
import { uploadBillFile } from '@/api/billImport'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()
const fileInputRef = ref(null)
const currentType = ref('')

/**
 * 处理导入按钮点击
 */
const handleImportClick = (type) => {
  currentType.value = type
  // 触发文件选择
  fileInputRef.value?.click()
}

const handlePeriodicRecord = () => {
  router.push({ name: 'periodic-record' })
}

/**
 * 处理文件选择
 */
const handleFileChange = async (event) => {
  const file = event.target.files?.[0]
  if (!file) {
    return
  }

  // 验证文件类型
  const validTypes = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
  if (!validTypes.includes(file.type)) {
    showToast('请选择 CSV 或 Excel 文件')
    return
  }

  // 验证文件大小（限制为 10MB）
  const maxSize = 10 * 1024 * 1024
  if (file.size > maxSize) {
    showToast('文件大小不能超过 10MB')
    return
  }

  try {
    // 显示加载提示
    showLoadingToast({
      message: '上传中...',
      forbidClick: true,
      duration: 0
    })

    // 上传文件
    const typeName = currentType.value === 'Alipay' ? '支付宝' : '微信'
    const { success, message } = await uploadBillFile(file, currentType.value)

    if (!success) {
      showToast(message || `${typeName}账单导入失败`)
      return
    }

    showSuccessToast(message || `${typeName}账单导入成功`)
  } catch (error) {
    console.error('上传失败:', error)
    showToast('上传失败: ' + (error.message || '未知错误'))
  }
  finally {
    closeToast()
    // 清空文件输入，允许重复选择同一文件
    event.target.value = ''
  }
}

const handleEditClassification = () => {
  router.push({ name: 'classification-edit' })
}

const handleBatchClassification = () => {
  router.push({ name: 'classification-batch' })
}

const handleSmartClassification = () => {
  router.push({ name: 'smart-classification' })
}

// const handleNaturalLanguageClassification = () => {
//   router.push({ name: 'classification-nlp' })
// }

/**
 * 处理退出登录
 */
const handleLogout = async () => {
  try {
    await showConfirmDialog({
      title: '提示',
      message: '确定要退出登录吗？',
    })
    
    authStore.logout()
    showSuccessToast('已退出登录')
    router.push({ name: 'login' })
  } catch (error) {
    console.error('取消退出登录:', error)
    showToast('已取消退出登录')
  }
}

/**
 * 处理查看日志
 */
const handleLogView = () => {
  router.push({ name: 'log' })
}
</script>

<style scoped>
/* 页面背景色 */
:deep(body) {
  background-color: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  :deep(body) {
    background-color: #1a1a1a;
  }
}

/* 增加卡片对比度 */
:deep(.van-cell-group--inset) {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
  :deep(.van-cell-group--inset) {
    background-color: #2c2c2c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

.detail-header {
  padding: 16px 16px 5px 16px;
  margin-bottom: 5px;
}

.detail-header p {
  margin: 0;
  font-size: 14px;
  color: #969799;
  font-weight: normal;
}

/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
  background: transparent !important;
}
</style>