feat: 今日视图升级为详情视图(自由切换日期)

This commit is contained in:
root
2026-10-16 10:50:40 +08:00
parent 838753a058
commit ee795eeefb
3 changed files with 39 additions and 6 deletions
+1 -1
View File
@@ -102,7 +102,7 @@ function onGlobalKey(e: KeyboardEvent) {
const VIEWS = [ const VIEWS = [
{ key: 'calendar', name: '日历', icon: 'calendar' }, { key: 'calendar', name: '日历', icon: 'calendar' },
{ key: 'today', name: '今日', icon: 'edit' }, { key: 'today', name: '详情', icon: 'edit' },
{ key: 'stats', name: '统计', icon: 'chart' }, { key: 'stats', name: '统计', icon: 'chart' },
{ key: 'report', name: '总结', icon: 'export' }, { key: 'report', name: '总结', icon: 'export' },
{ key: 'ledger', name: '记账', icon: 'wallet' }, { key: 'ledger', name: '记账', icon: 'wallet' },
+36 -4
View File
@@ -1,12 +1,44 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'
import Icon from '../components/Icon.vue'
import DayPanel from '../components/log/DayPanel.vue' import DayPanel from '../components/log/DayPanel.vue'
import { todayStr } from '../lib/date' import { addDays, formatDateCN, todayStr } from '../lib/date'
const today = todayStr() // 详情视图:自由切换日期,对任意一天进行详细查看与修改
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> </script>
<template> <template>
<div class="today-page"> <div class="detail-page">
<DayPanel :date="today" /> <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> </div>
</template> </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>
+2 -1
View File
@@ -306,7 +306,7 @@ dev 开发 / bugfix BUG修复 / test 测试 / learning 学习成长 / meeting
| 视图 | 内容 | | 视图 | 内容 |
|---|---| |---|---|
| 日历(默认首页) | 月历网格;点击日期开右侧当日抽屉:打卡时间线 + 条目列表 + 快速记录 | | 日历(默认首页) | 月历网格;点击日期开右侧当日抽屉:打卡时间线 + 条目列表 + 快速记录 |
| 今日 | 打卡状态卡 / 快速记录区 / 今日条目列表 / 自动小结(x 条 · y 小时) | | 详情(原今日) | 日期自由切换(前后翻页 + 日期选择器 + 回到今天);DayPanel 提供打卡、快速记录、条目编辑与删除等全部当日操作 |
| 统计 | 概览卡片行 / 记录热力图 / 分类与项目条形图 | | 统计 | 概览卡片行 / 记录热力图 / 分类与项目条形图 |
| 总结 | 范围选择 + 左侧草稿编辑 + 右侧数据摘要 + 导出 Markdown | | 总结 | 范围选择 + 左侧草稿编辑 + 右侧数据摘要 + 导出 Markdown |
| 设置 | 打卡规则 / 项目管理 / 周记提醒 / JSON 备份导入导出 | | 设置 | 打卡规则 / 项目管理 / 周记提醒 / JSON 备份导入导出 |
@@ -505,3 +505,4 @@ src/
- v1.9:PWA 应用化——新增 Web 应用清单、Service Worker 离线缓存与自绘应用图标;在 Edge/Chrome 中可一键安装为独立窗口应用(桌面图标、开始菜单入口),离线可用,数据随浏览器配置文件存储 - v1.9:PWA 应用化——新增 Web 应用清单、Service Worker 离线缓存与自绘应用图标;在 Edge/Chrome 中可一键安装为独立窗口应用(桌面图标、开始菜单入口),离线可用,数据随浏览器配置文件存储
- v1.10:Electron 桌面应用——pnpm dist 一键产出 NSIS 安装包与免安装目录;主进程加载本地构建产物,数据存于系统用户目录;窗口禁用菜单栏、外部链接交由系统浏览器打开 - v1.10:Electron 桌面应用——pnpm dist 一键产出 NSIS 安装包与免安装目录;主进程加载本地构建产物,数据存于系统用户目录;窗口禁用菜单栏、外部链接交由系统浏览器打开
- v1.11:新增记账系统——支出/收入录入(金额以分存储)、固定分类枚举、报销跟踪(待报销/已报销与待报销金额汇总)、月度汇总卡片与支出分类分布、月度流水筛选与弹窗编辑;备份格式升级至 v3 并向下兼容 - v1.11:新增记账系统——支出/收入录入(金额以分存储)、固定分类枚举、报销跟踪(待报销/已报销与待报销金额汇总)、月度汇总卡片与支出分类分布、月度流水筛选与弹窗编辑;备份格式升级至 v3 并向下兼容
- v1.12:「今日」视图升级为「详情」——支持前后翻页、日期选择器自由切换日期,对任意一天进行查看、打卡、记录与修改