julian/chrono-snap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

fix time selector ui

Browse Source
This commit is contained in:
Julian Freeman
2026-03-22 22:26:38 -04:00
parent e8c53dafc5
commit 8f4dfcebe3
3 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -2,9 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri + Vue + Typescript App</title> <title>Chrono Snap</title>
</head> </head>
<body> <body>

22
src/App.vue
View File

@@ -251,6 +251,14 @@ const endTimeInput = computed({
set: (val) => { editingEvent.value.end_minute = logicalMinutesFromTime(val); } 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 updatePreview = async (img: TimelineItem | null) => { const updatePreview = async (img: TimelineItem | null) => {
if (!img || (selectedImage.value?.path === img.path && previewSrc.value)) return; if (!img || (selectedImage.value?.path === img.path && previewSrc.value)) return;
selectedImage.value = img; selectedImage.value = img;
@@ -525,10 +533,10 @@ const handleExport = async () => {
<div class="bg-white rounded-[40px] shadow-2xl w-full max-w-lg overflow-hidden flex flex-col"> <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-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="p-10 space-y-8">
<div class="flex gap-4"> <div class="flex gap-3 items-end">
<!-- Start Time Custom Picker --> <!-- Start Time Custom Picker -->
<div ref="startTimePickerRef" class="flex-1 space-y-1 relative"> <div ref="startTimePickerRef" class="flex-1 relative">
<label class="text-[10px] font-bold text-[#86868B]">开始时间</label> <label class="text-[10px] font-bold text-[#86868B] block mb-1">开始时间</label>
<button @click="openStartTimePicker" <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"> 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" /> --> <!-- <Clock :size="14" class="text-[#86868B] block" /> -->
@@ -554,9 +562,13 @@ const handleExport = async () => {
</div> </div>
</div> </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 --> <!-- End Time Custom Picker -->
<div ref="endTimePickerRef" class="flex-1 space-y-1 relative"> <div ref="endTimePickerRef" class="flex-1 relative">
<label class="text-[10px] font-bold text-[#86868B]">结束时间</label> <label class="text-[10px] font-bold text-[#86868B] block mb-1">结束时间</label>
<button @click="openEndTimePicker" <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"> 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" /> --> <!-- <Clock :size="14" class="text-[#86868B] block" /> -->

1
src/assets/vue.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 496 B