refactor
This commit is contained in:
Julian Freeman
126
src/components/modals/ExportModal.vue
Normal file
126
src/components/modals/ExportModal.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { save } from "@tauri-apps/plugin-dialog";
|
||||
import { X, Calendar, ChevronLeft, ChevronRight } from "lucide-vue-next";
|
||||
import { currentDate, showToast, getTagName, logicalMinutesToTime } from "../../store";
|
||||
import { DBEvent } from "../../types";
|
||||
|
||||
defineEmits(['close']);
|
||||
|
||||
const exportStartDate = ref(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('sv'));
|
||||
const exportEndDate = ref(currentDate.value);
|
||||
const exportStartMonth = ref(new Date(exportStartDate.value));
|
||||
const exportEndMonth = ref(new Date(exportEndDate.value));
|
||||
const isExportStartCalendarOpen = ref(false);
|
||||
const isExportEndCalendarOpen = ref(false);
|
||||
|
||||
const exportStartCalendarDays = computed(() => {
|
||||
const y = exportStartMonth.value.getFullYear();
|
||||
const m = exportStartMonth.value.getMonth();
|
||||
const firstDay = new Date(y, m, 1).getDay();
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate();
|
||||
const days = [];
|
||||
const padding = (firstDay + 6) % 7;
|
||||
for (let i = 0; i < padding; i++) days.push(null);
|
||||
for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
|
||||
return days;
|
||||
});
|
||||
|
||||
const exportEndCalendarDays = computed(() => {
|
||||
const y = exportEndMonth.value.getFullYear();
|
||||
const m = exportEndMonth.value.getMonth();
|
||||
const firstDay = new Date(y, m, 1).getDay();
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate();
|
||||
const days = [];
|
||||
const padding = (firstDay + 6) % 7;
|
||||
for (let i = 0; i < padding; i++) days.push(null);
|
||||
for (let i = 1; i <= daysInMonth; i++) days.push(new Date(y, m, i));
|
||||
return days;
|
||||
});
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const events: DBEvent[] = await invoke("get_events_range", { startDate: exportStartDate.value, endDate: exportEndDate.value });
|
||||
if (events.length === 0) {
|
||||
showToast("所选范围内没有找到记录", "error");
|
||||
return;
|
||||
}
|
||||
const savePath = await save({
|
||||
filters: [{ name: "JSON 文件", extensions: ["json"] }],
|
||||
defaultPath: `ChronoSnap_Export_${exportStartDate.value}_${exportEndDate.value}.json`
|
||||
});
|
||||
if (savePath) {
|
||||
const exportData = events.map(e => ({
|
||||
date: e.date,
|
||||
start_time: logicalMinutesToTime(e.start_minute),
|
||||
end_time: logicalMinutesToTime(e.end_minute),
|
||||
main_tag: getTagName(e.main_tag_id),
|
||||
sub_tag: getTagName(e.sub_tag_id),
|
||||
content: e.content
|
||||
}));
|
||||
await invoke("write_file", { path: savePath, content: JSON.stringify(exportData, null, 2) });
|
||||
showToast("导出成功");
|
||||
}
|
||||
} catch (e) {
|
||||
showToast("导出失败: " + e, "error");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fixed inset-0 z-100 bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="$emit('close')">
|
||||
<div class="bg-bg-card rounded-[40px] shadow-2xl w-full max-w-2xl overflow-visible flex flex-col animate-in fade-in zoom-in duration-200">
|
||||
<div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">导出记录</h2><button @click="$emit('close')"><X :size="24" /></button></div>
|
||||
<div class="p-10 space-y-8">
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-bold text-text-sec">日期范围</label>
|
||||
<div class="flex gap-4 items-center">
|
||||
<div class="relative flex-1">
|
||||
<button @click="isExportStartCalendarOpen = !isExportStartCalendarOpen; isExportEndCalendarOpen = false" class="w-full bg-bg-input rounded-xl pl-10 pr-4 py-3 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all text-left flex items-center">
|
||||
<Calendar :size="16" class="absolute left-4 text-text-sec" />
|
||||
{{ exportStartDate }}
|
||||
</button>
|
||||
<div v-if="isExportStartCalendarOpen" class="absolute top-full left-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<button @click="exportStartMonth = new Date(exportStartMonth.getFullYear(), exportStartMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="18"/></button>
|
||||
<span class="text-sm font-black">{{ exportStartMonth.getFullYear() }}年 {{ exportStartMonth.getMonth()+1 }}月</span>
|
||||
<button @click="exportStartMonth = new Date(exportStartMonth.getFullYear(), exportStartMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="18"/></button>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
|
||||
<div class="grid grid-cols-7 gap-1">
|
||||
<div v-for="(date, i) in exportStartCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
|
||||
<button v-if="date" @click="exportStartDate = date.toLocaleDateString('sv'); isExportStartCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="date.toLocaleDateString('sv') === exportStartDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-text-sec font-black text-xs">至</span>
|
||||
<div class="relative flex-1">
|
||||
<button @click="isExportEndCalendarOpen = !isExportEndCalendarOpen; isExportStartCalendarOpen = false" class="w-full bg-bg-input rounded-xl pl-10 pr-4 py-3 text-sm outline-none border border-transparent focus:border-[#007AFF] transition-all text-left flex items-center">
|
||||
<Calendar :size="16" class="absolute left-4 text-text-sec" />
|
||||
{{ exportEndDate }}
|
||||
</button>
|
||||
<div v-if="isExportEndCalendarOpen" class="absolute top-full right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 animate-in fade-in zoom-in-95 duration-200 w-72">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<button @click="exportEndMonth = new Date(exportEndMonth.getFullYear(), exportEndMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="18"/></button>
|
||||
<span class="text-sm font-black">{{ exportEndMonth.getFullYear() }}年 {{ exportEndMonth.getMonth()+1 }}月</span>
|
||||
<button @click="exportEndMonth = new Date(exportEndMonth.getFullYear(), exportEndMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="18"/></button>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[10px] font-bold text-text-sec">{{d}}</div></div>
|
||||
<div class="grid grid-cols-7 gap-1">
|
||||
<div v-for="(date, i) in exportEndCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
|
||||
<button v-if="date" @click="exportEndDate = date.toLocaleDateString('sv'); isExportEndCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="date.toLocaleDateString('sv') === exportEndDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="handleExport" :disabled="!exportStartDate || !exportEndDate" class="w-full bg-[#007AFF] text-white py-4 rounded-2xl font-bold shadow-lg shadow-[#007AFF]/20 active:scale-95 transition-all disabled:opacity-50 disabled:active:scale-100">导出为 JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user