45 lines
1.6 KiB
Vue
45 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import Icon from '../components/Icon.vue'
|
|
import DayPanel from '../components/log/DayPanel.vue'
|
|
import { addDays, formatDateCN, todayStr } from '../lib/date'
|
|
|
|
// 详情视图：自由切换日期，对任意一天进行详细查看与修改
|
|
const date = ref(todayStr())
|
|
const isToday = computed(() => date.value === todayStr())
|
|
|
|
function prevDay() { date.value = addDays(date.value, -1) }
|
|
function nextDay() { date.value = addDays(date.value, 1) }
|
|
function goToday() { date.value = todayStr() }
|
|
function onDateInput(e: Event) {
|
|
const v = (e.target as HTMLInputElement).value
|
|
if (v) date.value = v
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="detail-page">
|
|
<div class="detail-toolbar">
|
|
<button class="icon-btn" title="前一天" @click="prevDay"><Icon name="chevron-left" :size="16" /></button>
|
|
<span class="date-title num" :class="{ 'is-today': isToday }">{{ formatDateCN(date) }}</span>
|
|
<button class="icon-btn" title="后一天" @click="nextDay"><Icon name="chevron-right" :size="16" /></button>
|
|
<input type="date" class="input w-date" :value="date" @change="onDateInput" />
|
|
<button class="btn btn-sm" :disabled="isToday" @click="goToday">回到今天</button>
|
|
</div>
|
|
<DayPanel :date="date" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.detail-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.date-title { font-size: 14px; font-weight: 600; min-width: 170px; text-align: center; }
|
|
.date-title.is-today { color: var(--accent); }
|
|
.w-date { width: 150px; }
|
|
</style>
|