add export to json

src/components/modals/ExportModal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import { invoke } from "@tauri-apps/api/core";
-import { X, Calendar, ChevronLeft, ChevronRight, Copy, ArrowDown, ArrowUp } from "lucide-vue-next";
+import { save } from "@tauri-apps/plugin-dialog";
+import { X, Calendar, ChevronLeft, ChevronRight, Copy, ArrowDown, ArrowUp, Download } from "lucide-vue-next";
 import { currentDate, showToast, getTagName, logicalMinutesToTime, toISODate, mainTags } from "../../store";
 import { DBEvent } from "../../types";
 
@@ -203,6 +204,47 @@ const handlePreview = async () => {
   }
 };
 
+const exportToJson = async () => {
+  if (selectedTags.value.length === 0) {
+    showToast("请至少选择一个主标签", "error");
+    return;
+  }
+
+  const curDate = parseDateStr(exportStartDate.value);
+  const endDate = parseDateStr(exportEndDate.value);
+  if (curDate > endDate) {
+    showToast("开始日期不能晚于结束日期", "error");
+    return;
+  }
+
+  try {
+    const events: DBEvent[] = await invoke("get_events_range", { startDate: exportStartDate.value, endDate: exportEndDate.value });
+    const filteredEvents = events.filter(e => selectedTags.value.includes(e.main_tag_id));
+    
+    // Add tag names to the exported data for better readability
+    const exportData = filteredEvents.map(e => ({
+      ...e,
+      main_tag_name: getTagName(e.main_tag_id),
+      sub_tag_name: getTagName(e.sub_tag_id),
+      start_time_str: logicalMinutesToTime(e.start_minute),
+      end_time_str: logicalMinutesToTime(e.end_minute),
+    }));
+
+    const jsonStr = JSON.stringify(exportData, null, 2);
+    const filePath = await save({
+      filters: [{ name: 'JSON', extensions: ['json'] }],
+      defaultPath: `chrono-snap-export-${exportStartDate.value}-to-${exportEndDate.value}.json`
+    });
+
+    if (filePath) {
+      await invoke("write_file", { path: filePath, content: jsonStr });
+      showToast("导出成功");
+    }
+  } catch (e) {
+    showToast("导出失败: " + e, "error");
+  }
+};
+
 const copyColumn = async (tagId: number | 'date') => {
   let lines: string[] = [];
   
@@ -323,10 +365,15 @@ const copyToClipboard = async () => {
             </div>
           </div>
 
-          <button @click="handlePreview" :disabled="!exportStartDate || !exportEndDate" class="w-full bg-bg-main border border-border-main text-text-main hover:bg-bg-input py-3.5 rounded-2xl font-bold shadow-sm transition-all disabled:opacity-50">
+          <div class="flex gap-4">
+            <button @click="exportToJson" :disabled="!exportStartDate || !exportEndDate" class="flex-1 bg-bg-input border border-border-main text-text-sec hover:bg-border-main hover:text-text-main py-3.5 rounded-2xl font-bold shadow-sm transition-all disabled:opacity-50 flex items-center justify-center gap-2">
+              <Download :size="16" /> 导出为 JSON
+            </button>
+            <button @click="handlePreview" :disabled="!exportStartDate || !exportEndDate" class="flex-1 bg-[#007AFF] text-white py-3.5 rounded-2xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all disabled:opacity-50 disabled:active:scale-100">
               生成预览表格
             </button>
           </div>
+        </div>
 
         <!-- 表格预览区域 -->
         <div v-if="dateList.length > 0" class="flex-1 flex flex-col border-t border-border-main pt-6">