|
|
|
|
@@ -2,7 +2,7 @@
|
|
|
|
|
import { ref, computed, onMounted, onUnmounted } from "vue";
|
|
|
|
|
import { BarChart2, Calendar, ChevronLeft, ChevronRight } from "lucide-vue-next";
|
|
|
|
|
import {
|
|
|
|
|
dashboardStats, dashboardRange, dailyAverageMode, dashboardStartDate, dashboardEndDate,
|
|
|
|
|
dashboardStats, dashboardRange, dailyAverageMode,
|
|
|
|
|
customStartDate, customEndDate,
|
|
|
|
|
isStartCalendarOpen, isEndCalendarOpen,
|
|
|
|
|
formatMinutes, getTagColor, getTagName
|
|
|
|
|
@@ -71,19 +71,19 @@ const endCalendarDays = computed(() => getCalendarDays(endCalendarMonth.value));
|
|
|
|
|
<div v-if="dashboardRange === 'custom'" class="flex items-center gap-4 animate-in slide-in-from-top-2 duration-300">
|
|
|
|
|
<div class="relative flex-1" ref="startCalendarRef">
|
|
|
|
|
<button @click="isStartCalendarOpen = !isStartCalendarOpen; isEndCalendarOpen = false" class="w-full bg-bg-card border border-border-main rounded-xl pl-10 pr-4 py-2.5 text-xs font-bold text-left flex items-center hover:bg-bg-input transition-all">
|
|
|
|
|
<Calendar :size="14" class="absolute left-3.5 text-[#007AFF]" />
|
|
|
|
|
<Calendar :size="16" class="absolute left-3.5 text-[#007AFF]" />
|
|
|
|
|
<span class="text-text-sec mr-2">从</span> {{ customStartDate }}
|
|
|
|
|
</button>
|
|
|
|
|
<div v-if="isStartCalendarOpen" class="absolute top-full left-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 w-72 animate-in fade-in zoom-in-95">
|
|
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
|
|
|
<button @click="startCalendarMonth = new Date(startCalendarMonth.getFullYear(), startCalendarMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="16"/></button>
|
|
|
|
|
<span class="text-xs font-black">{{ startCalendarMonth.getFullYear() }}年 {{ startCalendarMonth.getMonth()+1 }}月</span>
|
|
|
|
|
<span class="text-sm font-black">{{ startCalendarMonth.getFullYear() }}年 {{ startCalendarMonth.getMonth()+1 }}月</span>
|
|
|
|
|
<button @click="startCalendarMonth = new Date(startCalendarMonth.getFullYear(), startCalendarMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="16"/></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[9px] font-bold text-text-sec">{{d}}</div></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 startCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
|
|
|
|
|
<button v-if="date" @click="customStartDate = toISODate(date); isStartCalendarOpen = false" class="w-7 h-7 rounded-full text-[10px] font-medium transition-all" :class="toISODate(date) === customStartDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
|
|
|
|
|
<button v-if="date" @click="customStartDate = toISODate(date); isStartCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="toISODate(date) === customStartDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -91,19 +91,19 @@ const endCalendarDays = computed(() => getCalendarDays(endCalendarMonth.value));
|
|
|
|
|
<div class="text-text-sec font-black text-xs">至</div>
|
|
|
|
|
<div class="relative flex-1" ref="endCalendarRef">
|
|
|
|
|
<button @click="isEndCalendarOpen = !isEndCalendarOpen; isStartCalendarOpen = false" class="w-full bg-bg-card border border-border-main rounded-xl pl-10 pr-4 py-2.5 text-xs font-bold text-left flex items-center hover:bg-bg-input transition-all">
|
|
|
|
|
<Calendar :size="14" class="absolute left-3.5 text-[#007AFF]" />
|
|
|
|
|
<Calendar :size="16" class="absolute left-3.5 text-[#007AFF]" />
|
|
|
|
|
<span class="text-text-sec mr-2">至</span> {{ customEndDate }}
|
|
|
|
|
</button>
|
|
|
|
|
<div v-if="isEndCalendarOpen" class="absolute top-full right-0 mt-2 bg-bg-card rounded-3xl shadow-2xl border border-border-main z-120 p-5 w-72 animate-in fade-in zoom-in-95">
|
|
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
|
|
|
<button @click="endCalendarMonth = new Date(endCalendarMonth.getFullYear(), endCalendarMonth.getMonth()-1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronLeft :size="16"/></button>
|
|
|
|
|
<span class="text-xs font-black">{{ endCalendarMonth.getFullYear() }}年 {{ endCalendarMonth.getMonth()+1 }}月</span>
|
|
|
|
|
<span class="text-sm font-black">{{ endCalendarMonth.getFullYear() }}年 {{ endCalendarMonth.getMonth()+1 }}月</span>
|
|
|
|
|
<button @click="endCalendarMonth = new Date(endCalendarMonth.getFullYear(), endCalendarMonth.getMonth()+1, 1)" class="p-2 hover:bg-bg-input rounded-xl"><ChevronRight :size="16"/></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid grid-cols-7 gap-1 text-center mb-2"><div v-for="d in ['一','二','三','四','五','六','日']" :key="d" class="text-[9px] font-bold text-text-sec">{{d}}</div></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 endCalendarDays" :key="i" class="aspect-square flex items-center justify-center">
|
|
|
|
|
<button v-if="date" @click="customEndDate = toISODate(date); isEndCalendarOpen = false" class="w-7 h-7 rounded-full text-[10px] font-medium transition-all" :class="toISODate(date) === customEndDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
|
|
|
|
|
<button v-if="date" @click="customEndDate = toISODate(date); isEndCalendarOpen = false" class="w-8 h-8 rounded-full text-xs font-medium transition-all" :class="toISODate(date) === customEndDate ? 'bg-[#007AFF] text-white font-bold' : 'hover:bg-bg-input text-main'">{{ date.getDate() }}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -160,10 +160,10 @@ const endCalendarDays = computed(() => getCalendarDays(endCalendarMonth.value));
|
|
|
|
|
<div v-for="sub in tag.subTags" :key="sub.id" class="flex justify-between items-center group gap-4">
|
|
|
|
|
<span class="text-xs text-text-main font-bold w-16 truncate">{{ getTagName(sub.id) }}</span>
|
|
|
|
|
<div class="flex items-center gap-3 flex-1 justify-end">
|
|
|
|
|
<div class="w-full max-w-[200px] h-1.5 bg-bg-input rounded-full overflow-hidden shadow-inner">
|
|
|
|
|
<div class="w-full max-w-50 h-1.5 bg-bg-input rounded-full overflow-hidden shadow-inner">
|
|
|
|
|
<div class="h-full rounded-full opacity-80" :style="{ width: sub.percentage + '%', backgroundColor: getTagColor(tag.id) }"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-[10px] font-bold text-text-sec whitespace-nowrap min-w-[40px] text-right">{{ formatMinutes(sub.total) }}</span>
|
|
|
|
|
<span class="text-[10px] font-bold text-text-sec whitespace-nowrap min-w-10 text-right">{{ formatMinutes(sub.total) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|