feat: 数据导出增强 — 日期范围/类型筛选/CSV+JSON 格式

client/src/pages/profile/index.vue

@@ -51,7 +51,7 @@
         <text class="mi-label">分类管理</text>
         <Icon name="chevronRight" :size="24" color="#BFB3B3" />
       </view>
-      <view class="menu-item" @tap="exportData">
+      <view class="menu-item" @tap="openExportPanel">
         <text class="mi-label">数据导出</text>
         <Icon name="chevronRight" :size="24" color="#BFB3B3" />
       </view>
@@ -94,6 +94,60 @@
       </view>
     </view>
 
+    <!-- 导出弹窗 -->
+    <view class="modal-mask" v-if="showExportPanel" @tap="showExportPanel = false">
+      <view class="export-modal" @tap.stop>
+        <text class="modal-title">数据导出</text>
+
+        <!-- 日期范围 -->
+        <view class="export-section">
+          <text class="export-label">日期范围</text>
+          <view class="export-date-row">
+            <picker mode="date" :value="exportStartDate" :end="exportEndDate" @change="e => { exportStartDate = e.detail.value; updateExportCount() }">
+              <view class="export-date-picker">
+                <Icon name="calendar" :size="24" color="#8B7E7E" />
+                <text class="export-date-text">{{ exportStartDate }}</text>
+              </view>
+            </picker>
+            <text class="export-date-sep">至</text>
+            <picker mode="date" :value="exportEndDate" :start="exportStartDate" :end="getLocalDateStr()" @change="e => { exportEndDate = e.detail.value; updateExportCount() }">
+              <view class="export-date-picker">
+                <Icon name="calendar" :size="24" color="#8B7E7E" />
+                <text class="export-date-text">{{ exportEndDate }}</text>
+              </view>
+            </picker>
+          </view>
+        </view>
+
+        <!-- 类型筛选 -->
+        <view class="export-section">
+          <text class="export-label">交易类型</text>
+          <view class="export-tabs">
+            <view class="export-tab" :class="{ active: exportType === 'all' }" @tap="exportType = 'all'; updateExportCount()">全部</view>
+            <view class="export-tab" :class="{ active: exportType === 'expense' }" @tap="exportType = 'expense'; updateExportCount()">仅支出</view>
+            <view class="export-tab" :class="{ active: exportType === 'income' }" @tap="exportType = 'income'; updateExportCount()">仅收入</view>
+          </view>
+        </view>
+
+        <!-- 导出格式 -->
+        <view class="export-section">
+          <text class="export-label">导出格式</text>
+          <view class="export-tabs">
+            <view class="export-tab" :class="{ active: exportFormat === 'csv' }" @tap="exportFormat = 'csv'">CSV</view>
+            <view class="export-tab" :class="{ active: exportFormat === 'json' }" @tap="exportFormat = 'json'">JSON</view>
+          </view>
+        </view>
+
+        <!-- 预览 & 导出 -->
+        <view class="export-footer">
+          <text class="export-preview">共 <text class="export-count">{{ exportCount }}</text> 条记录</text>
+          <view class="export-btn" :class="{ disabled: exportCount === 0 || exportLoading }" @tap="doExport">
+            <text class="export-btn-text">{{ exportLoading ? '导出中...' : '导出 ' + exportFormat.toUpperCase() }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
     <!-- 身份选择弹窗 -->
     <view class="modal-mask" v-if="showIdentity" @tap="showIdentity = false">
       <view class="identity-modal" @tap.stop>
@@ -163,6 +217,35 @@ const showAbout = ref(false)
 const showIdentity = ref(false)
 const initialLoaded = ref(false)
 
+// 导出面板状态
+const showExportPanel = ref(false)
+const exportStartDate = ref(getLocalDateStr().replace(/-/g, '-').replace(/(\d+)$/, '01')) // 本月1日
+const exportEndDate = ref(getLocalDateStr())
+const exportType = ref<'all' | 'expense' | 'income'>('all')
+const exportFormat = ref<'csv' | 'json'>('csv')
+const exportCount = ref(0)
+const exportLoading = ref(false)
+
+function openExportPanel() {
+  showExportPanel.value = true
+  updateExportCount()
+}
+
+async function updateExportCount() {
+  try {
+    const data = await getTransactions({
+      page: 1, pageSize: 1,
+      startDate: exportStartDate.value,
+      endDate: exportEndDate.value,
+      ...(exportType.value !== 'all' ? { type: exportType.value } : {}),
+      group_id: groupStore.currentGroupId
+    })
+    exportCount.value = data.total
+  } catch {
+    exportCount.value = 0
+  }
+}
+
 onMounted(async () => {
   await waitForReady()
   loading.value = true
@@ -323,19 +406,28 @@ function getLocalDateStr(): string {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 }
 
-async function exportData() {
+async function doExport() {
+  if (exportCount.value === 0 || exportLoading.value) return
+  exportLoading.value = true
   uni.showLoading({ title: '导出中 0%' })
   try {
-    // 分页获取全部数据（服务端 pageSize 上限 100）
+    // 分页获取筛选后的数据
     const allList: Transaction[] = []
     let page = 1
     let total = 0
+    const baseParams: Record<string, any> = {
+      pageSize: 100,
+      startDate: exportStartDate.value,
+      endDate: exportEndDate.value,
+      group_id: groupStore.currentGroupId
+    }
+    if (exportType.value !== 'all') baseParams.type = exportType.value
+
     do {
-      const data = await getTransactions({ page, pageSize: 100, group_id: groupStore.currentGroupId })
+      const data = await getTransactions({ page, ...baseParams } as any)
       allList.push(...data.list)
       total = data.total
       page++
-      // 更新进度
       const progress = Math.min(100, Math.round((allList.length / total) * 100))
       uni.showLoading({ title: `导出中 ${progress}%` })
     } while (allList.length < total)
@@ -346,50 +438,71 @@ async function exportData() {
       return
     }
 
-    function csvEscape(val: string): string {
+    if (exportFormat.value === 'json') {
-      if (val.includes(',') || val.includes('"') || val.includes('\n')) {
+      const json = JSON.stringify(allList.map(t => ({
-        return '"' + val.replace(/"/g, '""') + '"'
+        date: t.date,
+        type: t.type === 'expense' ? '支出' : '收入',
+        category: t.category_name || '未分类',
+        amount: (t.amount / 100).toFixed(2),
+        note: t.note || ''
+      })), null, 2)
+
+      const fileName = `小菜记账_${exportStartDate.value}_${exportEndDate.value}.json`
+      saveFile(json, fileName, 'application/json')
+    } else {
+      function csvEscape(val: string): string {
+        if (val.includes(',') || val.includes('"') || val.includes('\n')) {
+          return '"' + val.replace(/"/g, '""') + '"'
+        }
+        return val
       }
-      return val
+      const header = '日期,类型,分类,金额(元),备注\n'
+      const rows = allList.map(t => {
+        const amount = (t.amount / 100).toFixed(2)
+        const type = t.type === 'expense' ? '支出' : '收入'
+        return [t.date, type, t.category_name || '未分类', amount, t.note || ''].map(csvEscape).join(',')
+      }).join('\n')
+
+      const csv = '' + header + rows
+      const fileName = `小菜记账_${exportStartDate.value}_${exportEndDate.value}.csv`
+      saveFile(csv, fileName, 'text/csv')
     }
-    const header = '日期,类型,分类,金额(元),备注\n'
-    const rows = allList.map(t => {
-      const amount = (t.amount / 100).toFixed(2)
-      const type = t.type === 'expense' ? '支出' : '收入'
-      return [t.date, type, t.category_name || '未分类', amount, t.note || ''].map(csvEscape).join(',')
-    }).join('\n')
-
-    const csv = '' + header + rows
-
-    // #ifdef H5
-    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `小菜记账_${getLocalDateStr()}.csv`
-    a.click()
-    URL.revokeObjectURL(url)
-    uni.hideLoading()
-    uni.showToast({ title: '导出成功', icon: 'success' })
-    // #endif
-
-    // #ifdef MP-WEIXIN
-    const fs = uni.getFileSystemManager()
-    const filePath = `${wx.env.USER_DATA_PATH}/小菜记账_${getLocalDateStr()}.csv`
-    fs.writeFileSync(filePath, csv, 'utf-8')
-    uni.hideLoading()
-    uni.openDocument({
-      filePath,
-      fileType: 'csv',
-      success: () => {},
-      fail: () => uni.showToast({ title: '导出失败', icon: 'none' })
-    })
-    // #endif
   } catch {
     uni.hideLoading()
     uni.showToast({ title: '导出失败', icon: 'none' })
+  } finally {
+    exportLoading.value = false
+    showExportPanel.value = false
   }
 }
+
+function saveFile(content: string, fileName: string, mimeType: string) {
+  // #ifdef H5
+  const blob = new Blob([content], { type: `${mimeType};charset=utf-8;` })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = fileName
+  a.click()
+  URL.revokeObjectURL(url)
+  uni.hideLoading()
+  uni.showToast({ title: '导出成功', icon: 'success' })
+  // #endif
+
+  // #ifdef MP-WEIXIN
+  const fs = uni.getFileSystemManager()
+  const filePath = `${wx.env.USER_DATA_PATH}/${fileName}`
+  fs.writeFileSync(filePath, content, 'utf-8')
+  uni.hideLoading()
+  const ext = mimeType === 'application/json' ? 'json' : 'csv'
+  uni.openDocument({
+    filePath,
+    fileType: ext,
+    success: () => {},
+    fail: () => uni.showToast({ title: '导出失败', icon: 'none' })
+  })
+  // #endif
+}
 </script>
 
 <style lang="scss" scoped>
@@ -726,4 +839,122 @@ async function exportData() {
   font-size: $font-base;
   color: $text-sec;
 }
+
+/* 导出弹窗 */
+.export-modal {
+  width: 100%;
+  max-height: 85vh;
+  background: $surface;
+  border-radius: $radius-2xl $radius-2xl 0 0;
+  padding: $space-xl;
+  padding-bottom: calc($space-xl + env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column;
+}
+
+.export-section {
+  margin-bottom: $space-lg;
+}
+
+.export-label {
+  font-size: $font-base;
+  font-weight: 600;
+  color: $text;
+  display: block;
+  margin-bottom: $space-sm;
+}
+
+.export-date-row {
+  display: flex;
+  align-items: center;
+  gap: $space-sm;
+}
+
+.export-date-picker {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: $space-xs;
+  height: 72rpx;
+  padding: 0 $space-md;
+  background: $bg;
+  border-radius: $radius-lg;
+  border: 2rpx solid $border;
+}
+
+.export-date-text {
+  font-size: $font-md;
+  color: $text;
+}
+
+.export-date-sep {
+  font-size: $font-md;
+  color: $text-muted;
+  flex-shrink: 0;
+}
+
+.export-tabs {
+  display: flex;
+  gap: $space-xs;
+}
+
+.export-tab {
+  padding: $space-sm $space-md;
+  border-radius: $radius-lg;
+  font-size: $font-md;
+  color: $text-sec;
+  background: $bg;
+  border: 2rpx solid $border;
+  transition: all $transition-normal;
+
+  &.active {
+    background: $primary;
+    color: $surface;
+    border-color: $primary;
+  }
+}
+
+.export-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: $space-md;
+  border-top: 2rpx solid $border;
+}
+
+.export-preview {
+  font-size: $font-lg;
+  color: $text-sec;
+}
+
+.export-count {
+  font-family: 'Fredoka', sans-serif;
+  font-size: $font-2xl;
+  font-weight: 600;
+  color: $primary;
+}
+
+.export-btn {
+  height: 80rpx;
+  padding: 0 $space-xl;
+  background: linear-gradient(135deg, $primary, #E67355);
+  border-radius: $radius-lg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-xs;
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &:active { opacity: 0.8; }
+}
+
+.export-btn-text {
+  font-size: $font-lg;
+  font-weight: 600;
+  color: $surface;
+}
 </style>