feat: 新增日程面板、复盘页面与 Agent 读写接口

- 日程：单次/每日/每周/每月重复，JSON 存储，月历按优先级着色圆点 + 悬停提示 - 复盘页：可自定义折线图卡片(SVG) + 每日心得总览(按日期/任务展开) - Agent 接口：GET /api/agent/overview 读日程+进度，POST /api/agent/schedules 建日程(PPM_API_TOKEN Bearer 鉴权) - 导出/导入/统计纳入日程与图表；47 项测试全绿
2026-09-04 14:46:41 +08:00
parent 5f50eb54ed
commit 8340d1dbbd
13 changed files with 1027 additions and 19 deletions
--- a/app/static/app.js
+++ b/app/static/app.js
@@ -1,7 +1,10 @@
 const state = {
+  view: "home",
  tasks: [], version: 1, selectedId: null, selectedTask: null,
  daily: null, history: null, summary: null, csrf: "", authEnabled: false,
+  charts: [], notes: null, editingChartId: null,
  filter: "", editingId: null, dragId: null, selectedDate: null, ganttScale: "month",
+  schedules: { calendar: null, today: null }, scheduleMonth: new Intl.DateTimeFormat("en-CA", { timeZone: "Asia/Shanghai" }).format(new Date()).slice(0, 7), editingScheduleId: null,
 };

 const $ = (selector, root = document) => root.querySelector(selector);
@@ -47,7 +50,7 @@ async function bootstrap() {
  } catch (error) { toast(error.message); }
 }

-const layoutCache = { home: null, "task-detail": null };
+const layoutCache = { home: null, "task-detail": null, review: null };
 async function ensureLayout(page) { if (!layoutCache[page]) layoutCache[page] = await api(`/api/layouts/${page}`); return layoutCache[page]; }
 async function loadTasks() {
  const result = await api("/api/tasks"); state.tasks = result.items; state.version = result.version;
@@ -55,6 +58,15 @@ async function loadTasks() {
  await render();
 }

+async function loadSchedules() {
+  const day = state.selectedDate || today();
+  const [calendar, todayResult] = await Promise.all([
+    api(`/api/schedules/calendar?month=${encodeURIComponent(state.scheduleMonth)}`),
+    api(`/api/schedules/today?date=${encodeURIComponent(day)}`),
+  ]);
+  state.schedules = { calendar, today: todayResult };
+}
+
 function renderTaskList() {
  const filtered = state.tasks.filter((task) => !state.filter || task.name.toLowerCase().includes(state.filter.toLowerCase()));
  const items = filtered.map((task) => `<div class="task-item ${task.taskId === state.selectedId ? "selected" : ""}" draggable="true" data-task-id="${task.taskId}">
@@ -78,7 +90,7 @@ function rerenderSidebarList() {

 function bindSidebarItems() {
  $$(".task-item").forEach((node) => {
-    node.addEventListener("click", () => { state.selectedId = node.dataset.taskId; render(); });
+    node.addEventListener("click", () => { state.view = "home"; state.selectedId = node.dataset.taskId; render(); });
    node.addEventListener("dragstart", () => { state.dragId = node.dataset.taskId; node.classList.add("dragging"); });
    node.addEventListener("dragend", () => { node.classList.remove("dragging"); state.dragId = null; });
    node.addEventListener("dragover", (event) => event.preventDefault());
@@ -97,6 +109,53 @@ function periodText(task) { const metrics = task.metrics || []; return [...new S
 function summaryFor(taskId) { return state.summary?.tasks?.[taskId] || null; }
 function metricSummary(taskId, metricId) { return summaryFor(taskId)?.metrics?.find((metric) => metric.metricId === metricId) || null; }

+function renderChartSvg(chart) {
+  const points = chart.data?.points || [];
+  if (!points.length || points.every((point) => Number(point.value) === 0)) return `<div class="chart-empty">暂无数据</div>`;
+  const width = 600, height = 200, pad = { left: 34, right: 12, top: 14, bottom: 30 };
+  const max = Math.max(...points.map((point) => Number(point.value) || 0), 1);
+  const x = (index) => pad.left + (points.length === 1 ? 0 : index * (width - pad.left - pad.right) / (points.length - 1));
+  const y = (value) => pad.top + (height - pad.top - pad.bottom) * (1 - value / max);
+  const coords = points.map((point, index) => `${x(index).toFixed(1)},${y(Number(point.value) || 0).toFixed(1)}`).join(" ");
+  const areaPath = `M ${pad.left.toFixed(1)} ${y(0).toFixed(1)} L ${coords.replace(/ /g, " L ")} L ${x(points.length - 1).toFixed(1)} ${y(0).toFixed(1)} Z`;
+  const labels = [points[0], points[Math.floor((points.length - 1) / 2)], points[points.length - 1]].filter((point, index, list) => point && list.findIndex((item) => item.date === point.date) === index).map((point) => {
+    const index = points.indexOf(point); return `<text x="${x(index)}" y="${height - 7}" text-anchor="middle">${escapeHtml(point.date.slice(5))}</text>`;
+  }).join("");
+  const circles = points.map((point, index) => `<circle cx="${x(index).toFixed(1)}" cy="${y(Number(point.value) || 0).toFixed(1)}" r="2.2"/>`).join("");
+  return `<svg class="chart-svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none" role="img" aria-label="${escapeHtml(chart.title)}"><line class="chart-guide" x1="${pad.left}" y1="${y(0)}" x2="${width - pad.right}" y2="${y(0)}"/><line class="chart-guide" x1="${pad.left}" y1="${y(max)}" x2="${width - pad.right}" y2="${y(max)}"/><text class="chart-max" x="4" y="${y(max) + 4}">${max}</text><path class="chart-area" d="${areaPath}"/><polyline points="${coords}"/><g class="chart-points">${circles}</g><g class="chart-labels">${labels}</g></svg>`;
+}
+
+function renderReviewCharts() {
+  const cards = state.charts.map((chart) => `<article class="review-chart-card"><div class="review-chart-head"><h3>${escapeHtml(chart.title)}</h3><span><button class="icon-button chart-edit" data-chart-id="${chart.chartId}" title="编辑图表" aria-label="编辑图表">✎</button><button class="icon-button chart-delete" data-chart-id="${chart.chartId}" title="删除图表" aria-label="删除图表">×</button></span></div>${renderChartSvg(chart)}</article>`).join("");
+  return `<section class="section review-charts"><div class="page-heading review-heading"><div><p class="eyebrow">REVIEW</p><h1>复盘</h1><p>观察完成趋势，回看每日心得</p></div><button class="button primary" id="addChartButton">＋ 添加图表</button></div><div class="review-chart-grid">${cards || `<p class="empty-list">还没有图表，添加一张开始复盘</p>`}</div></section>`;
+}
+
+function renderReviewNotes() {
+  const days = state.notes?.days || [];
+  const content = days.map((day) => `<details class="review-day" open><summary><span class="review-date-badge">${escapeHtml(day.date.slice(5))}</span><strong>${escapeHtml(day.date)}</strong><span class="muted">${day.records.length} 条记录</span></summary><div class="review-day-records">${day.records.map((record) => `<div class="review-note-record"><strong>${escapeHtml(record.taskName)}</strong>${record.completedAt ? `<time>${escapeHtml(record.completedAt.replace("T", " "))}</time>` : ""}${record.note ? `<p>${escapeHtml(record.note)}</p>` : ""}</div>`).join("")}</div></details>`).join("");
+  return `<section class="section review-notes"><div class="section-heading"><div><p class="eyebrow">REVIEW</p><h2>每日心得</h2></div><span>最近 30 天</span></div>${content || `<p class="empty-list">最近没有心得记录</p>`}</section>`;
+}
+
+function fillChartMetrics(taskId, metricId = "") {
+  const select = $("#chartMetricSelect");
+  const task = state.tasks.find((item) => item.taskId === taskId);
+  const options = [`<option value="">完成数</option>`].concat(task ? task.metrics.map((metric) => `<option value="${escapeHtml(metric.metricId)}" ${metric.metricId === metricId ? "selected" : ""}>${escapeHtml(metric.name)}</option>`) : []);
+  select.innerHTML = options.join("");
+}
+
+function openChartDialog(chart = null) {
+  state.editingChartId = chart?.chartId || null;
+  const form = $("#chartForm"); form.reset(); $("#chartDialogTitle").textContent = chart ? "编辑图表" : "添加图表";
+  $("#chartTaskSelect").innerHTML = `<option value="">全部任务</option>${state.tasks.map((task) => `<option value="${escapeHtml(task.taskId)}">${escapeHtml(task.name)}</option>`).join("")}`;
+  form.title.value = chart?.title || ""; form.days.value = chart?.days || 30; $("#chartTaskSelect").value = chart?.taskId || ""; fillChartMetrics($("#chartTaskSelect").value, chart?.metricId || ""); $("#chartDialog").showModal();
+}
+
+function bindReviewCharts() {
+  $("#addChartButton")?.addEventListener("click", () => openChartDialog());
+  $(".chart-edit") && $$(".chart-edit").forEach((button) => button.addEventListener("click", () => openChartDialog(state.charts.find((chart) => chart.chartId === button.dataset.chartId))));
+  $$(".chart-delete").forEach((button) => button.addEventListener("click", async () => { if (!confirm("确认删除这张图表？")) return; try { await api(`/api/charts/${button.dataset.chartId}`, { method: "DELETE" }); toast("图表已删除"); await render(); } catch (error) { toast(error.message); } }));
+}
+
 // ---- 组件注册表：布局白名单对应的渲染器与事件绑定 ----
 // 页面/区域约束与单例约束由服务端 validate_layout 保证（非法布局回退到内置默认），
 // 前端只负责渲染已校验的布局，不再二次过滤以免静默丢组件。
@@ -110,6 +169,9 @@ const components = {
  "metric-progress": { render: renderMetricProgress },
  "activity-heatmap": { render: renderActivityHeatmap },
  "task-settings": { render: renderTaskSettings, bind: bindSettings },
+  "schedule-board": { render: renderScheduleBoard, bind: bindScheduleBoard },
+  "review-charts": { render: renderReviewCharts, bind: bindReviewCharts },
+  "review-notes": { render: renderReviewNotes },
 };

 function componentHtml(item) { const entry = components[item.component]; return entry ? entry.render(item.options || {}) : ""; }
@@ -132,8 +194,17 @@ async function renderLayout(page) {
 }

 async function render() {
+  if (state.view === "review") {
+    try {
+      const [charts, notes] = await Promise.all([api("/api/charts"), api(`/api/review/notes?start=${encodeURIComponent(shanghaiDate(-29))}&end=${encodeURIComponent(today())}`)]);
+      state.notes = notes;
+      state.charts = await Promise.all((charts.items || []).map(async (chart) => ({ ...chart, data: await api(`/api/charts/${chart.chartId}/data`) })));
+    } catch (error) { toast(error.message); return; }
+    await renderLayout("review");
+    return;
+  }
  if (!state.selectedId) {
-    try { state.summary = await api("/api/summary"); } catch (error) { toast(error.message); }
+    try { state.summary = await api("/api/summary"); await loadSchedules(); } catch (error) { toast(error.message); }
    await renderLayout("home");
    return;
  }
@@ -153,6 +224,70 @@ async function render() {
  await renderLayout("task-detail");
 }

+function scheduleMonthOffset(offset) {
+  const [year, month] = state.scheduleMonth.split("-").map(Number);
+  const value = new Date(Date.UTC(year, month - 1 + offset, 1));
+  state.scheduleMonth = `${value.getUTCFullYear()}-${String(value.getUTCMonth() + 1).padStart(2, "0")}`;
+}
+
+function scheduleForSelectedDate() {
+  const selected = state.selectedDate || today();
+  if (state.schedules.today?.date === selected) return state.schedules.today.items || [];
+  return state.schedules.calendar?.days?.find((item) => item.date === selected)?.schedules || [];
+}
+
+function renderScheduleBoard() {
+  const calendar = state.schedules.calendar;
+  if (!calendar) return `<section class="section"><div class="section-heading"><h2>日程</h2></div><p class="muted">正在加载日程…</p></section>`;
+  const selected = state.selectedDate || today();
+  const days = calendar.days || [];
+  const offset = days.length ? (new Date(`${days[0].date}T00:00:00Z`).getUTCDay() + 6) % 7 : 0;
+  const cells = Array.from({ length: offset }, () => `<span class="schedule-day blank"></span>`).join("") + days.map((item) => {
+    const schedules = item.schedules || [];
+    const priorities = [...new Set(schedules.map((schedule) => Number(schedule.priority)).filter((priority) => priority >= 1 && priority <= 5))].sort((a, b) => a - b);
+    const visiblePriorities = priorities.slice(0, 3);
+    const remainingPriorities = Math.max(0, priorities.length - visiblePriorities.length);
+    const dots = visiblePriorities.map((priority) => `<i class="dot priority-${priority}" aria-hidden="true"></i>`).join("");
+    const more = remainingPriorities ? `<span class="schedule-dots-more">+${remainingPriorities}</span>` : "";
+    const tooltip = schedules.map((schedule) => `${schedule.time ? escapeHtml(schedule.time) : "全天"} ${escapeHtml(schedule.title)} · 优先级${Number(schedule.priority) || 3}`).join("\n").replace(/\n/g, "&#10;");
+    const tooltipAttribute = tooltip ? ` data-tooltip="${tooltip}"` : "";
+    return `<button type="button" class="schedule-day ${item.date === selected ? "selected" : ""} ${item.date === today() ? "today" : ""}" data-schedule-date="${item.date}"${tooltipAttribute}><span class="schedule-date">${Number(item.date.slice(-2))}</span><span class="schedule-dots" aria-label="${priorities.length} 种优先级">${dots}${more}</span></button>`;
+  }).join("");
+  const items = scheduleForSelectedDate().map((schedule) => `<div class="schedule-item ${schedule.completed ? "completed" : ""}"><span class="priority-bar priority-${schedule.priority}"></span><div class="schedule-copy"><strong>${escapeHtml(schedule.title)}</strong><small>${schedule.time ? escapeHtml(schedule.time) : "全天"}${schedule.recurrence !== "none" ? ` · ${escapeHtml(schedule.recurrence)}` : ""}</small></div><button type="button" class="button subtle schedule-complete" data-schedule-id="${schedule.scheduleId}" data-schedule-version="${schedule.version}" data-completed="${schedule.completed ? "false" : "true"}">${schedule.completed ? "取消完成" : "完成"}</button><button type="button" class="icon-button schedule-edit" data-schedule-id="${schedule.scheduleId}" title="编辑" aria-label="编辑">✎</button></div>`).join("");
+  const legend = [[1, "紧急"], [2, "高"], [3, "正常"], [4, "低"], [5, "挂起候选"]].map(([priority, label]) => `<span class="schedule-legend-item"><i class="dot priority-${priority}" aria-hidden="true"></i><span>${label}</span></span>`).join("");
+  return `<section class="section schedule-board"><div class="section-heading"><div><p class="eyebrow">SCHEDULE</p><h2>日程安排</h2><span>${selected} · ${scheduleForSelectedDate().length} 项</span></div><div class="schedule-actions"><button type="button" class="icon-button" id="schedulePrev" title="上月" aria-label="上月">‹</button><strong>${calendar.year}-${String(calendar.month).padStart(2, "0")}</strong><button type="button" class="icon-button" id="scheduleNext" title="下月" aria-label="下月">›</button><button type="button" class="button primary" id="addScheduleButton">＋ 新建日程</button></div></div><div class="schedule-weekdays"><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span></div><div class="schedule-calendar">${cells}</div><div class="schedule-legend" aria-label="优先级图例"><span class="schedule-legend-label">优先级图例</span>${legend}</div><div class="schedule-list">${items || `<p class="muted">这一天没有日程</p>`}</div></section>`;
+}
+
+async function refreshSchedules() { try { await loadSchedules(); await renderLayout("home"); } catch (error) { toast(error.message); } }
+function bindScheduleBoard() {
+  $("#schedulePrev")?.addEventListener("click", async () => { scheduleMonthOffset(-1); await refreshSchedules(); });
+  $("#scheduleNext")?.addEventListener("click", async () => { scheduleMonthOffset(1); await refreshSchedules(); });
+  $("#addScheduleButton")?.addEventListener("click", () => openScheduleDialog());
+  $$('[data-schedule-date]').forEach((node) => node.addEventListener("click", async () => { state.selectedDate = node.dataset.scheduleDate; await refreshSchedules(); }));
+  $$(".schedule-edit").forEach((node) => node.addEventListener("click", () => {
+    const schedule = scheduleForSelectedDate().find((item) => item.scheduleId === node.dataset.scheduleId); if (schedule) openScheduleDialog(schedule);
+  }));
+  $$(".schedule-complete").forEach((node) => node.addEventListener("click", async () => {
+    try { await api(`/api/schedules/${node.dataset.scheduleId}/complete`, { method: "POST", body: JSON.stringify({ date: state.selectedDate || today(), completed: node.dataset.completed === "true", expectedVersion: Number(node.dataset.scheduleVersion) }) }); toast("日程状态已更新"); await refreshSchedules(); } catch (error) { toast(error.message); }
+  }));
+}
+
+function openScheduleDialog(schedule = null) {
+  state.editingScheduleId = schedule?.scheduleId || null;
+  const form = $("#scheduleForm"); form.reset(); $("#scheduleDialogTitle").textContent = schedule ? "编辑日程" : "新建日程";
+  form.title.value = schedule?.title || ""; form.description.value = schedule?.description || ""; form.date.value = schedule?.date || state.selectedDate || today(); form.time.value = schedule?.time || ""; form.recurrence.value = schedule?.recurrence || "none"; form.priority.value = schedule?.priority || 3; form.state.value = schedule?.state || "active";
+  $("#scheduleDialog").showModal();
+}
+
+$("#scheduleForm")?.addEventListener("submit", async (event) => {
+  event.preventDefault(); const form = event.currentTarget;
+  const payload = { title: form.title.value, description: form.description.value, date: form.date.value || null, time: form.time.value || null, recurrence: form.recurrence.value, priority: Number(form.priority.value), state: form.state.value };
+  try { const editing = state.editingScheduleId; if (editing) { payload.expectedVersion = scheduleForSelectedDate().find((item) => item.scheduleId === editing)?.version || 1; }
+    const schedule = await api(editing ? `/api/schedules/${editing}` : "/api/schedules", { method: editing ? "PUT" : "POST", body: JSON.stringify(payload) }); $("#scheduleDialog").close(); state.selectedDate = schedule.date; state.scheduleMonth = schedule.date.slice(0, 7); toast(editing ? "日程已更新" : "日程已创建"); await refreshSchedules();
+  } catch (error) { toast(error.message); }
+});
+$("#cancelScheduleButton")?.addEventListener("click", () => $("#scheduleDialog").close()); $("#closeScheduleButton")?.addEventListener("click", () => $("#scheduleDialog").close());
+
 function renderOverviewSummary() {
  const active = state.tasks.filter((task) => !task.deletedAt); const activePlans = active.filter((task) => task.state === "active").length;
  return `<div class="page-heading"><div><p class="eyebrow">OVERVIEW · ${today()}</p><h1>把注意力放回正在发生的事</h1><p>所有计划、记录和节奏，都在这里保持可见。</p></div></div><div class="summary-strip"><div class="summary-cell"><strong>${active.length}</strong><span>进行中的任务</span></div><div class="summary-cell"><strong>${activePlans}</strong><span>活跃计划</span></div><div class="summary-cell"><strong>${active.filter((task) => task.priority <= 2).length}</strong><span>高优先级</span></div></div>`;
@@ -419,9 +554,25 @@ function renderMetricEditor(metrics) {
 $("#addMetricButton").addEventListener("click", () => { const metrics = $$(".metric-row").map((row) => Object.fromEntries($$("[data-field]", row).map((input) => [input.dataset.field, input.value]))); metrics.push({ name: "新指标", kind: "quantity", period: "day", target: "", unit: "次" }); renderMetricEditor(metrics); });
 $("#taskForm").addEventListener("submit", async (event) => { event.preventDefault(); const form = event.currentTarget; const metrics = $$(".metric-row").map((row) => { const result = Object.fromEntries($$("[data-field]", row).map((input) => [input.dataset.field, input.value])); result.metricId = row.dataset.metricId || null; result.target = result.target ? Number(result.target) : null; if (result.kind === "duration") { result.unit = ""; result.durationUnit = result.durationUnit || "minute"; if (result.target != null) result.target = Math.round(result.target * (DURATION_SECONDS[result.durationUnit] || 60)); } else { delete result.durationUnit; } return result; }); const payload = { name: form.name.value, description: form.description.value, startDate: form.startDate.value || null, endDate: form.endDate.value || null, priority: Number(form.priority.value), state: form.state.value, metrics }; try { const endpoint = state.editingId ? `/api/tasks/${state.editingId}` : "/api/tasks"; const method = state.editingId ? "PUT" : "POST"; if (state.editingId) payload.expectedVersion = state.selectedTask.version; const task = await api(endpoint, { method, body: JSON.stringify(payload) }); $("#taskDialog").close(); state.selectedId = task.taskId; toast(state.editingId ? "任务属性已更新" : "任务已创建"); await loadTasks(); } catch (error) { toast(error.message); } });

-$("#addTaskButton").addEventListener("click", () => openTaskDialog()); $("#homeButton").addEventListener("click", () => { state.selectedId = null; render(); });
+$("#addTaskButton").addEventListener("click", () => openTaskDialog());
+$("#reviewButton").addEventListener("click", () => { state.view = "review"; render(); });
+$("#homeButton").addEventListener("click", () => { state.view = "home"; state.selectedId = null; render(); });
 $("#cancelTaskButton").addEventListener("click", () => $("#taskDialog").close());
 $("#closeTaskButton").addEventListener("click", () => $("#taskDialog").close());
+$("#cancelChartButton").addEventListener("click", () => $("#chartDialog").close());
+$("#closeChartButton").addEventListener("click", () => $("#chartDialog").close());
+$("#chartTaskSelect").addEventListener("change", (event) => fillChartMetrics(event.target.value));
+$("#chartForm").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const form = event.currentTarget;
+  const payload = { title: form.title.value, taskId: form.taskId.value || null, metricId: form.metricId.value || null, days: Number(form.days.value) };
+  try {
+    const editing = state.editingChartId ? state.charts.find((chart) => chart.chartId === state.editingChartId) : null;
+    if (editing) payload.expectedVersion = editing.version;
+    await api(editing ? `/api/charts/${editing.chartId}` : "/api/charts", { method: editing ? "PUT" : "POST", body: JSON.stringify(payload) });
+    $("#chartDialog").close(); toast(editing ? "图表已更新" : "图表已创建"); await render();
+  } catch (error) { toast(error.message); }
+});

 function renderAdminStats(stats) {
  const cells = [