feat: 计划模式(时间段+打卡+计时时钟) / 工作详情范围导出 / 工作与记账分类自定义(含历史迁移)

intern-log/src/views/PlanView.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import Icon from '../components/Icon.vue'
+import {
+  addPlan, deletePlan, listPlansByDate, setPlanStatus,
+  startPlanTimer, stopPlanTimer, updatePlan, type PlanItem
+} from '../db/repo'
+import { addDays, parseDateStr, todayStr, toDateStr, formatDateCN } from '../lib/date'
+import { attendanceChanged } from '../lib/bus'
+import { showToast } from '../lib/toast'
+
+const date = ref(todayStr())
+const items = ref<PlanItem[]>([])
+const loading = ref(true)
+const now = ref(Date.now())
+let tick: number | null = null
+
+const title = computed(() => formatDateCN(date.value))
+const isToday = computed(() => date.value === todayStr())
+
+async function load() {
+  loading.value = true
+  items.value = await listPlansByDate(date.value)
+  loading.value = false
+}
+watch(date, load)
+watch(attendanceChanged, load)
+onMounted(() => {
+  load()
+  tick = window.setInterval(() => { now.value = Date.now() }, 30000)
+})
+onUnmounted(() => { if (tick) window.clearInterval(tick) })
+
+function prevDay() { date.value = addDays(date.value, -1) }
+function nextDay() { date.value = addDays(date.value, 1) }
+function goToday() { date.value = todayStr() }
+
+// ---- 汇总 ----
+const summary = computed(() => {
+  const total = items.value.length
+  const done = items.value.filter(p => p.status === 'done').length
+  const plannedMin = items.value.reduce((acc, p) => acc + spanMinutes(p), 0)
+  const actualMin = items.value.reduce((acc, p) => acc + (p.actual_minutes || 0), 0)
+  const runningId = running.value
+  if (runningId) {
+    const rp = items.value.find(p => p.id === runningId)
+    if (rp) actualMin + elapsedMinutes(rp)
+  }
+  return { total, done, plannedMin, actualMin }
+})
+function spanMinutes(p: PlanItem): number {
+  const [sh, sm] = p.start_time.split(':').map(Number)
+  const [eh, em] = p.end_time.split(':').map(Number)
+  return Math.max(0, (eh * 60 + em) - (sh * 60 + sm))
+}
+function fmtMin(n: number): string {
+  if (n < 60) return n + ' 分钟'
+  return Math.floor(n / 60) + ' 小时 ' + (n % 60) + ' 分'
+}
+
+// ---- 计时时钟 ----
+const running = computed(() => {
+  const r = items.value.find(p => !!p.timer_started_at)
+  return r ? (r.id as number) : null
+})
+function liveElapsed(p: PlanItem): number {
+  if (!p.timer_started_at) return p.actual_minutes || 0
+  const extra = Math.max(0, Math.round((now.value - new Date(p.timer_started_at).getTime()) / 60000))
+  return (p.actual_minutes || 0) + extra
+}
+async function toggleTimer(p: PlanItem) {
+  if (p.timer_started_at) {
+    await stopPlanTimer(p.id as number)
+    showToast('已停止计时：' + p.title)
+  } else {
+    await startPlanTimer(p.id as number)
+    showToast('开始计时：' + p.title)
+  }
+  await load()
+}
+
+// ---- 打卡 ----
+async function mark(p: PlanItem, status: 'todo' | 'done' | 'skip') {
+  await setPlanStatus(p.id as number, status)
+  await load()
+}
+
+// ---- 新增 / 编辑 ----
+const dialogOpen = ref(false)
+const editingId = ref<number | null>(null)
+const fTitle = ref('')
+const fKind = ref('学习')
+const fStart = ref('09:00')
+const fEnd = ref('10:00')
+const fNote = ref('')
+const fError = ref('')
+const KINDS = ['学习', '健身', '自律', '工作', '阅读', '其他']
+
+function openCreate() {
+  editingId.value = null
+  fTitle.value = ''
+  fKind.value = '学习'
+  fStart.value = '09:00'
+  fEnd.value = '10:00'
+  fNote.value = ''
+  fError.value = ''
+  dialogOpen.value = true
+}
+function openEdit(p: PlanItem) {
+  editingId.value = p.id as number
+  fTitle.value = p.title
+  fKind.value = p.kind
+  fStart.value = p.start_time
+  fEnd.value = p.end_time
+  fNote.value = p.note || ''
+  fError.value = ''
+  dialogOpen.value = true
+}
+async function submitPlan() {
+  if (!fTitle.value.trim()) { fError.value = '请填写计划内容'; return }
+  if (fEnd.value <= fStart.value) { fError.value = '结束时间需晚于开始时间'; return }
+  if (editingId.value) {
+    await updatePlan(editingId.value, {
+      title: fTitle.value.trim(), kind: fKind.value, start_time: fStart.value,
+      end_time: fEnd.value, note: fNote.value
+    })
+    showToast('计划已更新')
+  } else {
+    await addPlan({ date: date.value, start_time: fStart.value, end_time: fEnd.value, title: fTitle.value, kind: fKind.value, note: fNote.value })
+    showToast('计划已添加')
+  }
+  dialogOpen.value = false
+  await load()
+}
+
+async function remove(p: PlanItem) {
+  await deletePlan(p.id as number)
+  showToast('已删除')
+  await load()
+}
+
+const wdNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+function weekday(s: string): string {
+  return wdNames[parseDateStr(s).getDay()]
+}
+</script>
+
+<template>
+  <div class="plan-page">
+    <div class="card sec plan-head">
+      <div class="nav-row">
+        <button class="icon-btn" @click="prevDay"><Icon name="chevron-left" :size="16" /></button>
+        <div class="date-box">
+          <span class="date-main num">{{ date.slice(5) }} {{ weekday(date) }}</span>
+          <span class="muted date-sub num">{{ date }}</span>
+        </div>
+        <button class="icon-btn" @click="nextDay"><Icon name="chevron-right" :size="16" /></button>
+        <button class="btn btn-sm" :class="{ 'btn-primary': !isToday }" @click="goToday">今天</button>
+        <span class="flex1"></span>
+        <button class="btn btn-primary btn-sm" @click="openCreate"><Icon name="plus" :size="14" /> 添加计划</button>
+      </div>
+      <div class="muted sum-line">
+        共 {{ summary.total }} 项 · 完成 {{ summary.done }} 项 · 计划 {{ fmtMin(summary.plannedMin) }} · 实际投入 {{ fmtMin(summary.actualMin) }}
+        <template v-if="running"> · <span class="timer-live">计时中</span></template>
+      </div>
+    </div>
+
+    <div class="plan-list">
+      <div v-if="!loading && !items.length" class="card sec empty muted">
+        今天还没有计划，点右上角「添加计划」开始规划：学习、健身、自律……
+      </div>
+      <div
+        v-for="p in items" :key="p.id"
+        class="card sec plan-item"
+        :class="{ done: p.status === 'done', skip: p.status === 'skip', running: !!p.timer_started_at }"
+      >
+        <div class="pi-time num">
+          {{ p.start_time }}<span class="muted"> - {{ p.end_time }}</span>
+        </div>
+        <div class="pi-main">
+          <div class="pi-title">
+            <span class="tag">{{ p.kind }}</span>
+            <span class="pi-text" :class="{ strike: p.status === 'done' }">{{ p.title }}</span>
+            <span v-if="p.status === 'done'" class="state-done">已完成</span>
+            <span v-else-if="p.status === 'skip'" class="state-skip">已跳过</span>
+          </div>
+          <div v-if="p.note" class="muted pi-note">{{ p.note }}</div>
+          <div class="muted pi-meta num">
+            <template v-if="p.timer_started_at">
+              <span class="timer-live">计时中 · 已 {{ liveElapsed(p) }} 分钟</span>
+            </template>
+            <template v-else-if="p.actual_minutes > 0">实际投入 {{ p.actual_minutes }} 分钟</template>
+          </div>
+        </div>
+        <div class="pi-ops">
+          <button
+            v-if="p.status !== 'done'" class="btn btn-xs"
+            :class="{ 'timer-on': !!p.timer_started_at }"
+            @click="toggleTimer(p)"
+          >{{ p.timer_started_at ? '停止计时' : '计时' }}</button>
+          <button v-if="p.status !== 'done'" class="btn btn-xs" @click="mark(p, 'done')">完成</button>
+          <button v-if="p.status === 'todo'" class="btn btn-xs" @click="mark(p, 'skip')">跳过</button>
+          <button v-if="p.status !== 'todo'" class="btn btn-xs" @click="mark(p, 'todo')">恢复</button>
+          <button class="icon-btn" title="编辑" @click="openEdit(p)"><Icon name="edit" :size="14" /></button>
+          <button class="icon-btn" title="删除" @click="remove(p)"><Icon name="close" :size="14" /></button>
+        </div>
+      </div>
+    </div>
+
+    <teleport to="body">
+      <div v-if="dialogOpen" class="fixed-mask" @click.self="dialogOpen = false">
+        <div class="dialog" role="dialog" aria-label="计划">
+          <div class="dialog-head">
+            <span class="dialog-title">{{ editingId ? '编辑计划' : '添加计划' }}</span>
+            <button class="icon-btn" @click="dialogOpen = false"><Icon name="close" :size="16" /></button>
+          </div>
+          <div class="dialog-body">
+            <div class="form-row">
+              <label>计划内容（学什么、做什么）</label>
+              <input class="input" v-model="fTitle" placeholder="如：产品文档第三章 / 晨跑 5 公里" @keydown.enter="submitPlan" />
+            </div>
+            <div class="form-row">
+              <label>类别</label>
+              <select class="select" v-model="fKind">
+                <option v-for="k in KINDS" :key="k" :value="k">{{ k }}</option>
+              </select>
+            </div>
+            <div class="form-row two">
+              <div>
+                <label>开始时间</label>
+                <input class="input" type="time" v-model="fStart" />
+              </div>
+              <div>
+                <label>结束时间</label>
+                <input class="input" type="time" v-model="fEnd" />
+              </div>
+            </div>
+            <div class="form-row">
+              <label>备注（选填）</label>
+              <input class="input" v-model="fNote" placeholder="目标、资料、提醒等" @keydown.enter="submitPlan" />
+            </div>
+            <div v-if="fError" class="form-error">{{ fError }}</div>
+          </div>
+          <div class="dialog-btns">
+            <button class="btn btn-sm" @click="dialogOpen = false">取消</button>
+            <button class="btn btn-primary btn-sm" @click="submitPlan">{{ editingId ? '保存' : '添加' }}</button>
+          </div>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<style scoped>
+.plan-page { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
+.plan-head { padding: 12px 16px; }
+.nav-row { display: flex; align-items: center; gap: 8px; }
+.date-box { min-width: 150px; text-align: center; }
+.date-main { font-weight: 600; font-size: 14px; }
+.date-sub { font-size: 11px; margin-left: 6px; }
+.sum-line { font-size: 12px; margin-top: 8px; }
+.timer-live { color: var(--accent); font-weight: 600; }
+.flex1 { flex: 1; }
+
+.plan-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
+.plan-item.done { opacity: 0.62; }
+.plan-item.skip { opacity: 0.5; }
+.plan-item.running { border-left: 3px solid var(--accent); }
+.pi-time { font-size: 13px; font-weight: 600; min-width: 92px; padding-top: 2px; }
+.pi-main { flex: 1; min-width: 0; }
+.pi-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.pi-text { font-size: 14px; font-weight: 500; word-break: break-all; }
+.pi-text.strike { text-decoration: line-through; }
+.state-done { color: var(--ok, #2e9e5b); font-size: 12px; }
+.state-skip { color: var(--text-3); font-size: 12px; }
+.pi-note { font-size: 12px; margin-top: 3px; }
+.pi-meta { font-size: 12px; margin-top: 3px; }
+.pi-ops { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
+.timer-on { color: var(--accent); border-color: var(--accent); }
+.empty { text-align: center; padding: 26px 16px; }
+
+.fixed-mask {
+  position: fixed; inset: 0; z-index: 80;
+  background: rgba(29, 33, 41, 0.35);
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.dialog { background: var(--bg-page); border-radius: 12px; width: 420px; max-width: 100%; }
+.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }
+.dialog-title { font-weight: 600; font-size: 14px; }
+.dialog-body { padding: 6px 16px 4px; }
+.dialog-btns { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px 16px; }
+.form-row { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
+.form-row label { font-size: 12px; color: var(--text-2); }
+.form-row.two { flex-direction: row; gap: 10px; }
+.form-row.two > div { flex: 1; display: flex; flex-direction: column; gap: 5px; }
+
+@media (max-width: 720px) {
+  .plan-item { flex-wrap: wrap; }
+  .pi-ops { width: 100%; justify-content: flex-start; }
+}
+</style>