|
|
|
|
@@ -19,7 +19,7 @@ const isSetupComplete = ref(false);
|
|
|
|
|
const savePath = ref("");
|
|
|
|
|
const dbPath = ref("");
|
|
|
|
|
const isPaused = ref(false);
|
|
|
|
|
const currentDate = ref(new Date().toLocaleDateString('sv'));
|
|
|
|
|
const currentDate = ref(new Date(Date.now() - TIME_OFFSET_MINUTES * 60000).toLocaleDateString('sv'));
|
|
|
|
|
const timelineImages = ref<TimelineItem[]>([]);
|
|
|
|
|
const selectedImage = ref<TimelineItem | null>(null);
|
|
|
|
|
const lockedImage = ref<TimelineItem | null>(null);
|
|
|
|
|
@@ -27,6 +27,12 @@ const previewSrc = ref("");
|
|
|
|
|
const isFullscreen = ref(false);
|
|
|
|
|
const isSettingsOpen = ref(false);
|
|
|
|
|
const isTagManagerOpen = ref(false);
|
|
|
|
|
const expandedMainTags = ref<number[]>([]);
|
|
|
|
|
const toggleMainTag = (id: number) => {
|
|
|
|
|
const index = expandedMainTags.value.indexOf(id);
|
|
|
|
|
if (index > -1) expandedMainTags.value.splice(index, 1);
|
|
|
|
|
else expandedMainTags.value.push(id);
|
|
|
|
|
};
|
|
|
|
|
const isEventModalOpen = ref(false);
|
|
|
|
|
|
|
|
|
|
const toast = ref({ message: "", type: "success", visible: false });
|
|
|
|
|
@@ -47,6 +53,33 @@ const dragEndMin = ref<number | null>(null);
|
|
|
|
|
|
|
|
|
|
const editingEvent = ref<DBEvent>({ id: 0, date: "", start_minute: 0, end_minute: 0, main_tag_id: 0, sub_tag_id: null, content: "" });
|
|
|
|
|
const hoveredTime = ref<string | null>(null);
|
|
|
|
|
const hoveredEventDetails = ref<{ event: DBEvent; x: number; y: number } | null>(null);
|
|
|
|
|
|
|
|
|
|
const currentLogicalMinute = ref(-1);
|
|
|
|
|
let currentMinuteInterval: number | null = null;
|
|
|
|
|
const updateCurrentMinute = () => {
|
|
|
|
|
const now = new Date();
|
|
|
|
|
const logicalDateStr = new Date(now.getTime() - TIME_OFFSET_MINUTES * 60000).toLocaleDateString('sv');
|
|
|
|
|
if (logicalDateStr === currentDate.value) {
|
|
|
|
|
const m = now.getHours() * 60 + now.getMinutes();
|
|
|
|
|
currentLogicalMinute.value = (m < TIME_OFFSET_MINUTES ? m + 1440 : m) - TIME_OFFSET_MINUTES;
|
|
|
|
|
} else {
|
|
|
|
|
currentLogicalMinute.value = -1;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleEventMouseEnter = (ev: DBEvent, e: MouseEvent) => {
|
|
|
|
|
hoveredEventDetails.value = { event: ev, x: e.clientX, y: e.clientY };
|
|
|
|
|
};
|
|
|
|
|
const handleEventMouseMove = (e: MouseEvent) => {
|
|
|
|
|
if (hoveredEventDetails.value) {
|
|
|
|
|
hoveredEventDetails.value.x = e.clientX;
|
|
|
|
|
hoveredEventDetails.value.y = e.clientY;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const handleEventMouseLeave = () => {
|
|
|
|
|
hoveredEventDetails.value = null;
|
|
|
|
|
};
|
|
|
|
|
const timelineRef = ref<HTMLElement | null>(null);
|
|
|
|
|
|
|
|
|
|
const rulerHeight = computed(() => TOTAL_MINUTES * timelineZoom.value);
|
|
|
|
|
@@ -130,12 +163,19 @@ const calendarDays = computed(() => {
|
|
|
|
|
const selectCalendarDate = (date: Date) => {
|
|
|
|
|
currentDate.value = date.toLocaleDateString('sv'); // sv locale gives YYYY-MM-DD
|
|
|
|
|
isCalendarOpen.value = false;
|
|
|
|
|
selectedImage.value = null;
|
|
|
|
|
lockedImage.value = null;
|
|
|
|
|
previewSrc.value = "";
|
|
|
|
|
hoveredTime.value = null;
|
|
|
|
|
updateCurrentMinute();
|
|
|
|
|
loadTimeline(true); loadEvents();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// --- Logic ---
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
window.addEventListener('mousedown', handleClickOutside);
|
|
|
|
|
updateCurrentMinute();
|
|
|
|
|
currentMinuteInterval = window.setInterval(updateCurrentMinute, 60000);
|
|
|
|
|
store = await load("config.json");
|
|
|
|
|
const path = await store.get("savePath");
|
|
|
|
|
const dPath = await store.get("dbPath");
|
|
|
|
|
@@ -157,6 +197,7 @@ onMounted(async () => {
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
window.removeEventListener('mousedown', handleClickOutside);
|
|
|
|
|
if (currentMinuteInterval) window.clearInterval(currentMinuteInterval);
|
|
|
|
|
if (captureUnlisten) captureUnlisten();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
@@ -251,6 +292,22 @@ const endTimeInput = computed({
|
|
|
|
|
set: (val) => { editingEvent.value.end_minute = logicalMinutesFromTime(val); }
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const eventDurationFormatted = computed(() => {
|
|
|
|
|
let diff = editingEvent.value.end_minute - editingEvent.value.start_minute;
|
|
|
|
|
if (diff < 0) diff += 1440;
|
|
|
|
|
const h = Math.floor(diff / 60);
|
|
|
|
|
const m = diff % 60;
|
|
|
|
|
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const formatDuration = (start: number, end: number) => {
|
|
|
|
|
let diff = end - start;
|
|
|
|
|
if (diff < 0) diff += 1440;
|
|
|
|
|
const h = Math.floor(diff / 60);
|
|
|
|
|
const m = diff % 60;
|
|
|
|
|
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const updatePreview = async (img: TimelineItem | null) => {
|
|
|
|
|
if (!img || (selectedImage.value?.path === img.path && previewSrc.value)) return;
|
|
|
|
|
selectedImage.value = img;
|
|
|
|
|
@@ -464,7 +521,7 @@ const handleExport = async () => {
|
|
|
|
|
|
|
|
|
|
<div v-else class="flex flex-1 overflow-hidden">
|
|
|
|
|
<div class="w-80 bg-[#F8FAFD] border-r border-[#E5E5E7] flex flex-col select-none relative">
|
|
|
|
|
<div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-50 border-b border-[#E5E5E7]/50">
|
|
|
|
|
<div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-100 border-b border-[#E5E5E7]/50">
|
|
|
|
|
<div class="flex items-center justify-between mb-4"><h2 class="text-lg font-bold">瞬影 - 时间记录</h2><button @click="loadTimeline(true); loadEvents()" class="p-2 hover:bg-white rounded-xl text-[#86868B]"><RefreshCw :size="18" /></button></div>
|
|
|
|
|
<div ref="calendarRef" class="relative group">
|
|
|
|
|
<button @click="isCalendarOpen = !isCalendarOpen" class="w-full bg-white border border-[#E5E5E7] rounded-xl pl-11 pr-4 py-2.5 text-sm font-bold text-left flex items-center hover:bg-[#F2F2F7] transition-all">
|
|
|
|
|
@@ -492,10 +549,17 @@ const handleExport = async () => {
|
|
|
|
|
<div v-for="h in 24" :key="h" class="absolute left-0 w-full border-t border-[#E5E5E7]/60" :style="{ top: (h-1) * 60 * timelineZoom + 'px' }">
|
|
|
|
|
<span v-if="h > 1" class="absolute -left-11 -top-2.5 text-[10px] font-bold text-[#86868B]">{{ String((h - 1 + 3) % 24).padStart(2, '0') }}:00</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-for="ev in dayEvents" :key="ev.id" class="absolute left-0 w-[45%] opacity-80 border-l-4" :style="{ top: ev.start_minute * timelineZoom + 'px', height: (ev.end_minute - ev.start_minute) * timelineZoom + 'px', backgroundColor: getTagColor(ev.main_tag_id) + '22', borderColor: getTagColor(ev.main_tag_id) }" @click.stop="editingEvent = { ...ev }; isEventModalOpen = true"></div>
|
|
|
|
|
<div v-for="ev in dayEvents" :key="ev.id"
|
|
|
|
|
class="absolute left-0 w-[45%] opacity-80 border-l-4 cursor-pointer hover:opacity-100 hover:border-l-[6px] hover:z-50 hover:brightness-110"
|
|
|
|
|
:style="{ top: ev.start_minute * timelineZoom + 'px', height: (ev.end_minute - ev.start_minute) * timelineZoom + 'px', backgroundColor: getTagColor(ev.main_tag_id) + '22', borderColor: getTagColor(ev.main_tag_id) }"
|
|
|
|
|
@mouseenter="handleEventMouseEnter(ev, $event)"
|
|
|
|
|
@mousemove="handleEventMouseMove"
|
|
|
|
|
@mouseleave="handleEventMouseLeave"
|
|
|
|
|
@click.stop="editingEvent = { ...ev }; isEventModalOpen = true">
|
|
|
|
|
</div>
|
|
|
|
|
<div v-for="img in timelineImages" :key="img.path" class="absolute left-[50%] right-2 h-0.5 bg-[#007AFF]/20 rounded-full" :class="[selectedImage?.path === img.path ? 'bg-[#007AFF]/60 h-1 z-10' : '', lockedImage?.path === img.path ? 'bg-[#007AFF] h-1.5 ring-2 ring-[#007AFF]/20 z-20' : '']" :style="{ top: timeToLogicalMinutes(img.time, img.isNextDay) * timelineZoom + 'px' }"></div>
|
|
|
|
|
<div v-if="dragStartMin !== null && dragEndMin !== null" class="absolute left-0 w-full bg-[#007AFF]/10 border-y-2 border-[#007AFF] pointer-events-none z-30" :style="{ top: Math.min(dragStartMin, dragEndMin) * timelineZoom + 'px', height: Math.abs(dragEndMin - dragStartMin) * timelineZoom + 'px' }"></div>
|
|
|
|
|
<div v-if="hoveredTime" class="absolute left-0 right-0 border-t-2 border-[#007AFF] z-40 pointer-events-none" :style="{ top: timeToLogicalMinutes(hoveredTime, hoveredTime < '03:00') * timelineZoom + 'px' }"><div class="absolute -left-12 -top-3 bg-[#007AFF] text-white text-[9px] px-1 py-0.5 rounded font-bold">{{ hoveredTime }}</div></div>
|
|
|
|
|
<div v-if="currentLogicalMinute >= 0" class="absolute left-0 right-0 border-t-2 border-[#FF3B30] z-30 pointer-events-none" :style="{ top: currentLogicalMinute * timelineZoom + 'px' }"><div class="absolute -left-12 -top-2.5 bg-[#FF3B30] text-white text-[9px] px-1 py-0.5 rounded font-bold shadow-[0_0_8px_rgba(255,59,48,0.5)]">{{ logicalMinutesToTime(currentLogicalMinute) }}</div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -525,10 +589,10 @@ const handleExport = async () => {
|
|
|
|
|
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-lg overflow-hidden flex flex-col">
|
|
|
|
|
<div class="p-8 border-b flex justify-between items-center"><h2 class="text-2xl font-bold">{{ editingEvent.id ? '编辑记录' : '新增记录' }}</h2><button @click="isEventModalOpen = false; isStartTimeOpen = false; isEndTimeOpen = false"><X :size="24" /></button></div>
|
|
|
|
|
<div class="p-10 space-y-8">
|
|
|
|
|
<div class="flex gap-4">
|
|
|
|
|
<div class="flex gap-3 items-end">
|
|
|
|
|
<!-- Start Time Custom Picker -->
|
|
|
|
|
<div ref="startTimePickerRef" class="flex-1 space-y-1 relative">
|
|
|
|
|
<label class="text-[10px] font-bold text-[#86868B]">开始时间</label>
|
|
|
|
|
<div ref="startTimePickerRef" class="flex-1 relative">
|
|
|
|
|
<label class="text-[10px] font-bold text-[#86868B] block mb-1">开始时间</label>
|
|
|
|
|
<button @click="openStartTimePicker"
|
|
|
|
|
class="w-full h-12 bg-[#F2F2F7] rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-[#E5E5E7] transition-all border border-transparent focus:border-[#007AFF]/30">
|
|
|
|
|
<!-- <Clock :size="14" class="text-[#86868B] block" /> -->
|
|
|
|
|
@@ -547,16 +611,20 @@ const handleExport = async () => {
|
|
|
|
|
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1">
|
|
|
|
|
<div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-white py-1 text-center border-b border-[#E5E5E7]/30">分</div>
|
|
|
|
|
<button v-for="m in 60" :key="m"
|
|
|
|
|
@click="editingEvent.start_minute = Math.floor(editingEvent.start_minute / 60) * 60 + (m-1)"
|
|
|
|
|
@click="editingEvent.start_minute = Math.floor(editingEvent.start_minute / 60) * 60 + (m-1); isStartTimeOpen = false"
|
|
|
|
|
class="py-2 text-[11px] rounded-lg transition-colors w-full text-center flex items-center justify-center"
|
|
|
|
|
:class="editingEvent.start_minute % 60 === (m-1) ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-[#F2F2F7] text-main'"
|
|
|
|
|
>{{ String(m-1).padStart(2,'0') }}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Duration Badge -->
|
|
|
|
|
<div class="h-12 flex items-center justify-center">
|
|
|
|
|
<span class="text-[11px] font-bold text-[#86868B] bg-[#F2F2F7] px-3 py-1.5 rounded-xl border border-[#E5E5E7]/50">{{ eventDurationFormatted }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- End Time Custom Picker -->
|
|
|
|
|
<div ref="endTimePickerRef" class="flex-1 space-y-1 relative">
|
|
|
|
|
<label class="text-[10px] font-bold text-[#86868B]">结束时间</label>
|
|
|
|
|
<div ref="endTimePickerRef" class="flex-1 relative">
|
|
|
|
|
<label class="text-[10px] font-bold text-[#86868B] block mb-1">结束时间</label>
|
|
|
|
|
<button @click="openEndTimePicker"
|
|
|
|
|
class="w-full h-12 bg-[#F2F2F7] rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-[#E5E5E7] transition-all border border-transparent focus:border-[#007AFF]/30">
|
|
|
|
|
<!-- <Clock :size="14" class="text-[#86868B] block" /> -->
|
|
|
|
|
@@ -575,7 +643,7 @@ const handleExport = async () => {
|
|
|
|
|
<div class="flex-1 overflow-y-auto no-scrollbar flex flex-col gap-1 text-center">
|
|
|
|
|
<div class="text-[12px] font-bold text-sec mb-2 sticky top-0 bg-white py-1">分</div>
|
|
|
|
|
<button v-for="m in 60" :key="m"
|
|
|
|
|
@click="editingEvent.end_minute = Math.floor(editingEvent.end_minute / 60) * 60 + (m-1)"
|
|
|
|
|
@click="editingEvent.end_minute = Math.floor(editingEvent.end_minute / 60) * 60 + (m-1); isEndTimeOpen = false"
|
|
|
|
|
class="py-2 text-xs rounded-lg transition-colors w-full text-center"
|
|
|
|
|
:class="editingEvent.end_minute % 60 === (m-1) ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-[#F2F2F7] text-main'"
|
|
|
|
|
>{{ String(m-1).padStart(2,'0') }}</button>
|
|
|
|
|
@@ -611,8 +679,20 @@ const handleExport = async () => {
|
|
|
|
|
<div class="flex-1 overflow-hidden p-10 flex gap-10">
|
|
|
|
|
<div class="flex-1 overflow-y-auto space-y-2 pr-4 no-scrollbar">
|
|
|
|
|
<div v-for="mt in mainTags" :key="mt.id" class="space-y-2">
|
|
|
|
|
<div class="flex items-center justify-between group p-2 hover:bg-[#F2F2F7] rounded-xl"><div class="flex items-center gap-3"><div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div><span class="font-bold">{{ mt.name }}</span></div><button @click="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button></div>
|
|
|
|
|
<div class="ml-7 space-y-1"><div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-[#F2F2F7] rounded-lg"><span class="text-sm">{{ st.name }}</span><button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button></div></div>
|
|
|
|
|
<div @click="toggleMainTag(mt.id)" class="flex items-center justify-between group p-2 hover:bg-[#F2F2F7] rounded-xl cursor-pointer">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<ChevronRight :size="14" class="text-[#86868B] transition-transform" :class="{ 'rotate-90': expandedMainTags.includes(mt.id) }" />
|
|
|
|
|
<div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div>
|
|
|
|
|
<span class="font-bold">{{ mt.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<button @click.stop="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="expandedMainTags.includes(mt.id)" class="ml-7 space-y-1 animate-in fade-in slide-in-from-top-1 duration-200">
|
|
|
|
|
<div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-[#F2F2F7] rounded-lg">
|
|
|
|
|
<span class="text-sm">{{ st.name }}</span>
|
|
|
|
|
<button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-64 bg-[#F2F2F7] p-6 rounded-3xl space-y-4 h-fit">
|
|
|
|
|
@@ -711,6 +791,23 @@ const handleExport = async () => {
|
|
|
|
|
|
|
|
|
|
<div v-if="isFullscreen && previewSrc" class="fixed inset-0 z-200 bg-black/95 flex items-center justify-center p-6 backdrop-blur-xl"><button @click="isFullscreen = false" class="absolute top-10 right-10 w-12 h-12 bg-white/10 rounded-full flex items-center justify-center"><X :size="32" class="text-white" /></button><img :src="previewSrc" class="max-w-full max-h-full object-contain shadow-2xl" /></div>
|
|
|
|
|
|
|
|
|
|
<div v-if="hoveredEventDetails"
|
|
|
|
|
class="fixed z-300 pointer-events-none bg-white/90 backdrop-blur-xl border border-white/20 shadow-2xl rounded-2xl p-4 w-64 animate-in fade-in zoom-in-95 duration-150"
|
|
|
|
|
:style="{ left: hoveredEventDetails.x + 15 + 'px', top: hoveredEventDetails.y + 15 + 'px' }">
|
|
|
|
|
<div class="flex items-center gap-2 mb-2">
|
|
|
|
|
<div class="w-3 h-3 rounded-full" :style="{ backgroundColor: getTagColor(hoveredEventDetails.event.main_tag_id) }"></div>
|
|
|
|
|
<span class="font-bold text-sm text-[#1D1D1F]">{{ getTagName(hoveredEventDetails.event.main_tag_id) }}</span>
|
|
|
|
|
<span v-if="hoveredEventDetails.event.sub_tag_id" class="text-[10px] font-bold text-[#86868B] bg-[#F2F2F7] px-2 py-0.5 rounded-md border border-[#E5E5E7]/50">{{ getTagName(hoveredEventDetails.event.sub_tag_id) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center justify-between text-[11px] font-bold text-[#86868B] mb-2.5">
|
|
|
|
|
<span>{{ logicalMinutesToTime(hoveredEventDetails.event.start_minute) }} - {{ logicalMinutesToTime(hoveredEventDetails.event.end_minute) }}</span>
|
|
|
|
|
<span class="bg-[#F2F2F7] px-1.5 py-0.5 rounded-lg border border-[#E5E5E7]/30 text-[#007AFF]">{{ formatDuration(hoveredEventDetails.event.start_minute, hoveredEventDetails.event.end_minute) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="hoveredEventDetails.event.content" class="text-xs text-[#1D1D1F] leading-relaxed wrap-break-words whitespace-pre-wrap">
|
|
|
|
|
{{ hoveredEventDetails.event.content }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="toast.visible" class="fixed bottom-10 left-1/2 -translate-x-1/2 z-300 animate-in fade-in slide-in-from-bottom-4 duration-300">
|
|
|
|
|
<div class="px-6 py-3 rounded-2xl shadow-2xl backdrop-blur-md flex items-center gap-3 border border-white/20" :class="toast.type === 'error' ? 'bg-[#FF3B30] text-white' : 'bg-white/90 text-[#1D1D1F]'">
|
|
|
|
|
<div v-if="toast.type === 'error'" class="w-5 h-5 rounded-full border-2 border-white flex items-center justify-center text-[12px] font-black">!</div>
|
|
|
|
|
|
