450 lines
24 KiB
JavaScript
450 lines
24 KiB
JavaScript
import { useState, useEffect } from "react";
|
||
|
||
const STORAGE_KEY = "mama-schedule-v1";
|
||
|
||
const WEEK_SCHEDULE = {
|
||
周一: {
|
||
fixed: [
|
||
{ time: "5:45", task: "起床 · 深度工作 ⭐", type: "work" },
|
||
{ time: "6:45", task: "孩子起床 · 做早饭", type: "family" },
|
||
{ time: "8:00", task: "孩子自己上学 · 继续工作黄金时段", type: "work" },
|
||
{ time: "12:00", task: "午饭", type: "life" },
|
||
{ time: "13:00", task: "下午工作 + 家务30分钟", type: "work" },
|
||
{ time: "15:30", task: "出门接孩子", type: "family" },
|
||
{ time: "16:40", task: "接孩子回家", type: "family" },
|
||
{ time: "17:30", task: "做晚饭", type: "life" },
|
||
{ time: "19:00", task: "陪练琴 / 作业", type: "family" },
|
||
{ time: "20:00", task: "陪读书", type: "family" },
|
||
{ time: "20:30", task: "孩子入睡 · 轻量工作 + 日记", type: "work" },
|
||
{ time: "22:00", task: "🌙 洗漱睡觉", type: "sleep" },
|
||
],
|
||
note: "最自由的一天，保护上午深度工作时间",
|
||
},
|
||
周二: {
|
||
fixed: [
|
||
{ time: "5:45", task: "起床 · 早晨个人时间 / 日记", type: "self" },
|
||
{ time: "6:45", task: "孩子起床 · 做早饭", type: "family" },
|
||
{ time: "7:40", task: "送孩子出门", type: "family" },
|
||
{ time: "8:30", task: "去朋友家工作 ⭐", type: "work" },
|
||
{ time: "15:30", task: "出门接孩子", type: "family" },
|
||
{ time: "16:40", task: "回家 · 做晚饭", type: "life" },
|
||
{ time: "19:00", task: "陪练琴 / 作业", type: "family" },
|
||
{ time: "20:00", task: "陪读书", type: "family" },
|
||
{ time: "20:30", task: "孩子入睡 · 轻量工作 + 回消息", type: "work" },
|
||
{ time: "22:00", task: "🌙 洗漱睡觉", type: "sleep" },
|
||
],
|
||
note: "朋友家是深度工作最佳环境，珍惜这段时间",
|
||
},
|
||
周三: {
|
||
fixed: [
|
||
{ time: "5:45", task: "起床 · 轻量工作 / 回消息", type: "work" },
|
||
{ time: "6:45", task: "孩子起床 · 做早饭", type: "family" },
|
||
{ time: "7:40", task: "送孩子 → 直接去健身 🏋️", type: "self" },
|
||
{ time: "10:30", task: "回家 · 洗澡", type: "self" },
|
||
{ time: "11:00", task: "深度工作 ⭐", type: "work" },
|
||
{ time: "12:30", task: "午饭", type: "life" },
|
||
{ time: "13:00", task: "继续工作", type: "work" },
|
||
{ time: "15:30", task: "出门接孩子", type: "family" },
|
||
{ time: "16:40", task: "回家", type: "family" },
|
||
{ time: "17:30", task: "做晚饭（简化）", type: "life" },
|
||
{ time: "19:00", task: "陪练琴 / 作业", type: "family" },
|
||
{ time: "20:00", task: "陪读书", type: "family" },
|
||
{ time: "20:30", task: "孩子入睡 · 只写日记，不工作", type: "self" },
|
||
{ time: "22:00", task: "🌙 洗漱睡觉", type: "sleep" },
|
||
],
|
||
note: "健身日晚上不安排工作，上午已补回来了",
|
||
},
|
||
周四: {
|
||
fixed: [
|
||
{ time: "5:45", task: "起床 · 深度工作 ⭐", type: "work" },
|
||
{ time: "6:45", task: "孩子起床 · 做早饭", type: "family" },
|
||
{ time: "7:40", task: "送孩子出门", type: "family" },
|
||
{ time: "8:00", task: "回家 · 继续深度工作", type: "work" },
|
||
{ time: "12:00", task: "午饭", type: "life" },
|
||
{ time: "13:00", task: "工作 + 家务30分钟", type: "work" },
|
||
{ time: "15:30", task: "出门接孩子", type: "family" },
|
||
{ time: "16:40", task: "接孩子回家", type: "family" },
|
||
{ time: "17:30", task: "做晚饭", type: "life" },
|
||
{ time: "19:00", task: "陪练琴 / 作业", type: "family" },
|
||
{ time: "20:00", task: "陪读书", type: "family" },
|
||
{ time: "20:30", task: "孩子入睡 · 轻量工作 + 日记", type: "work" },
|
||
{ time: "22:00", task: "🌙 洗漱睡觉", type: "sleep" },
|
||
],
|
||
note: "早晨是黄金深度工作时间，下午被接送切割",
|
||
},
|
||
周五: {
|
||
fixed: [
|
||
{ time: "5:45", task: "起床 · 轻量工作 / 回消息", type: "work" },
|
||
{ time: "6:45", task: "孩子起床 · 做早饭", type: "family" },
|
||
{ time: "7:40", task: "送孩子 → 直接去健身 🏋️", type: "self" },
|
||
{ time: "10:30", task: "回家 · 洗澡", type: "self" },
|
||
{ time: "11:00", task: "深度工作 ⭐", type: "work" },
|
||
{ time: "12:30", task: "午饭", type: "life" },
|
||
{ time: "13:00", task: "继续工作", type: "work" },
|
||
{ time: "15:30", task: "出门接孩子", type: "family" },
|
||
{ time: "16:40", task: "回家", type: "family" },
|
||
{ time: "17:30", task: "做晚饭（简化）", type: "life" },
|
||
{ time: "19:00", task: "陪练琴 / 作业", type: "family" },
|
||
{ time: "20:00", task: "陪读书", type: "family" },
|
||
{ time: "20:30", task: "孩子入睡 · 只写日记，不工作", type: "self" },
|
||
{ time: "22:00", task: "🌙 洗漱睡觉", type: "sleep" },
|
||
],
|
||
note: "周五健身日，晚上放松，迎接周末",
|
||
},
|
||
};
|
||
|
||
const TYPE_STYLE = {
|
||
work: { bg: "#e8f4fd", dot: "#3b82f6", label: "工作" },
|
||
family: { bg: "#fef3c7", dot: "#f59e0b", label: "家庭" },
|
||
self: { bg: "#f0fdf4", dot: "#22c55e", label: "自我" },
|
||
life: { bg: "#fdf4ff", dot: "#a855f7", label: "生活" },
|
||
sleep: { bg: "#f1f5f9", dot: "#64748b", label: "睡眠" },
|
||
};
|
||
|
||
const DAYS = ["周一", "周二", "周三", "周四", "周五"];
|
||
const WEEKS = ["第1-2周", "第3-4周", "第5-6周"];
|
||
const SLEEP_TARGETS = { "第1-2周": "23:00前", "第3-4周": "22:30前", "第5-6周": "22:00前" };
|
||
|
||
function loadData() {
|
||
try {
|
||
const raw = localStorage.getItem(STORAGE_KEY);
|
||
return raw ? JSON.parse(raw) : {};
|
||
} catch { return {}; }
|
||
}
|
||
|
||
function saveData(data) {
|
||
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } catch {}
|
||
}
|
||
|
||
export default function App() {
|
||
const [tab, setTab] = useState("today");
|
||
const [selectedDay, setSelectedDay] = useState(DAYS[new Date().getDay() - 1] || "周一");
|
||
const [data, setData] = useState(loadData);
|
||
const [newTask, setNewTask] = useState({ text: "", type: "brain" });
|
||
const [weekReview, setWeekReview] = useState({ sleep: "", wins: "", issues: "", next: "" });
|
||
const [currentWeek, setCurrentWeek] = useState("第1-2周");
|
||
const [showAddTask, setShowAddTask] = useState(false);
|
||
|
||
const todayKey = new Date().toISOString().slice(0, 10);
|
||
const tasks = data[todayKey]?.tasks || [];
|
||
const reviews = data.reviews || {};
|
||
|
||
function updateData(newData) {
|
||
setData(newData);
|
||
saveData(newData);
|
||
}
|
||
|
||
function addTask() {
|
||
if (!newTask.text.trim()) return;
|
||
const updated = {
|
||
...data,
|
||
[todayKey]: {
|
||
...data[todayKey],
|
||
tasks: [...tasks, { id: Date.now(), text: newTask.text, type: newTask.type, done: false }],
|
||
},
|
||
};
|
||
updateData(updated);
|
||
setNewTask({ text: "", type: "brain" });
|
||
setShowAddTask(false);
|
||
}
|
||
|
||
function toggleTask(id) {
|
||
const updated = {
|
||
...data,
|
||
[todayKey]: {
|
||
...data[todayKey],
|
||
tasks: tasks.map(t => t.id === id ? { ...t, done: !t.done } : t),
|
||
},
|
||
};
|
||
updateData(updated);
|
||
}
|
||
|
||
function deleteTask(id) {
|
||
const updated = {
|
||
...data,
|
||
[todayKey]: {
|
||
...data[todayKey],
|
||
tasks: tasks.filter(t => t.id !== id),
|
||
},
|
||
};
|
||
updateData(updated);
|
||
}
|
||
|
||
function saveReview() {
|
||
const weekKey = `${currentWeek}-${new Date().toISOString().slice(0, 7)}`;
|
||
const updated = {
|
||
...data,
|
||
reviews: { ...reviews, [weekKey]: { ...weekReview, date: new Date().toLocaleDateString("zh-CN") } },
|
||
};
|
||
updateData(updated);
|
||
setWeekReview({ sleep: "", wins: "", issues: "", next: "" });
|
||
alert("回顾已保存 ✓");
|
||
}
|
||
|
||
const brainTasks = tasks.filter(t => t.type === "brain");
|
||
const lightTasks = tasks.filter(t => t.type === "light");
|
||
|
||
return (
|
||
<div style={{ fontFamily: "'Noto Serif SC', 'Georgia', serif", minHeight: "100vh", background: "#faf8f5", color: "#2c2c2c" }}>
|
||
<style>{`
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600&display=swap');
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
button { cursor: pointer; font-family: inherit; }
|
||
textarea, input { font-family: inherit; }
|
||
.tab-btn { background: none; border: none; padding: 10px 18px; font-size: 14px; color: #999; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||
.tab-btn.active { color: #2c2c2c; border-bottom-color: #2c2c2c; font-weight: 500; }
|
||
.tab-btn:hover { color: #2c2c2c; }
|
||
.day-btn { background: none; border: 1px solid #e0dbd4; border-radius: 20px; padding: 6px 14px; font-size: 13px; color: #666; transition: all 0.2s; }
|
||
.day-btn.active { background: #2c2c2c; color: #fff; border-color: #2c2c2c; }
|
||
.day-btn:hover:not(.active) { border-color: #999; color: #333; }
|
||
.task-card { background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid #ede8e1; display: flex; align-items: center; gap: 12px; transition: all 0.2s; }
|
||
.task-card:hover { border-color: #ccc; }
|
||
.task-card.done { opacity: 0.45; }
|
||
.check-btn { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d0c9bf; background: none; flex-shrink: 0; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
|
||
.check-btn.done { background: #2c2c2c; border-color: #2c2c2c; color: #fff; }
|
||
.check-btn:hover { border-color: #2c2c2c; }
|
||
.del-btn { background: none; border: none; color: #ccc; font-size: 16px; padding: 2px 6px; border-radius: 4px; margin-left: auto; flex-shrink: 0; }
|
||
.del-btn:hover { color: #e55; background: #fff0f0; }
|
||
.timeline-item { display: flex; gap: 14px; margin-bottom: 0; position: relative; }
|
||
.timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 36px; top: 28px; bottom: -2px; width: 1px; background: #ede8e1; }
|
||
.add-btn { background: #2c2c2c; color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
|
||
.add-btn:hover { background: #444; }
|
||
.input-field { border: 1px solid #e0dbd4; border-radius: 10px; padding: 10px 14px; font-size: 14px; width: 100%; outline: none; background: #fff; }
|
||
.input-field:focus { border-color: #2c2c2c; }
|
||
.select-field { border: 1px solid #e0dbd4; border-radius: 10px; padding: 10px 14px; font-size: 14px; background: #fff; outline: none; }
|
||
.select-field:focus { border-color: #2c2c2c; }
|
||
.section-title { font-size: 13px; font-weight: 500; color: #888; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
|
||
.review-input { border: 1px solid #e0dbd4; border-radius: 10px; padding: 12px 14px; font-size: 14px; width: 100%; resize: none; outline: none; background: #fff; min-height: 70px; line-height: 1.6; }
|
||
.review-input:focus { border-color: #2c2c2c; }
|
||
.week-badge { display: inline-block; background: #f0ebe3; border-radius: 6px; padding: 3px 10px; font-size: 12px; color: #666; }
|
||
.progress-bar { height: 6px; background: #ede8e1; border-radius: 3px; overflow: hidden; }
|
||
.progress-fill { height: 100%; background: #2c2c2c; border-radius: 3px; transition: width 0.5s; }
|
||
.empty-state { text-align: center; padding: 30px 20px; color: #bbb; font-size: 14px; line-height: 1.8; }
|
||
`}</style>
|
||
|
||
{/* Header */}
|
||
<div style={{ background: "#fff", borderBottom: "1px solid #ede8e1", padding: "20px 20px 0" }}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
|
||
<div>
|
||
<div style={{ fontSize: 11, color: "#aaa", letterSpacing: "0.1em", marginBottom: 4 }}>我的时间管理</div>
|
||
<h1 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>早睡计划</h1>
|
||
</div>
|
||
<div style={{ textAlign: "right" }}>
|
||
<div style={{ fontSize: 11, color: "#aaa", marginBottom: 4 }}>目标睡眠时间</div>
|
||
<div style={{ fontSize: 15, fontWeight: 500, color: "#2c7a2c" }}>{SLEEP_TARGETS[currentWeek]}</div>
|
||
<select value={currentWeek} onChange={e => setCurrentWeek(e.target.value)} style={{ marginTop: 4, border: "1px solid #e0dbd4", borderRadius: 6, padding: "3px 8px", fontSize: 11, color: "#666", background: "#fff", cursor: "pointer" }}>
|
||
{WEEKS.map(w => <option key={w}>{w}</option>)}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 6周进度 */}
|
||
<div style={{ marginBottom: 16 }}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#aaa", marginBottom: 6 }}>
|
||
<span>6周养成计划</span>
|
||
<span>{currentWeek}</span>
|
||
</div>
|
||
<div className="progress-bar">
|
||
<div className="progress-fill" style={{ width: currentWeek === "第1-2周" ? "33%" : currentWeek === "第3-4周" ? "66%" : "100%" }} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div style={{ display: "flex", gap: 4 }}>
|
||
{[["today", "今日任务"], ["schedule", "日程表"], ["review", "周回顾"]].map(([key, label]) => (
|
||
<button key={key} className={`tab-btn ${tab === key ? "active" : ""}`} onClick={() => setTab(key)}>{label}</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ padding: "20px 20px 40px", maxWidth: 600, margin: "0 auto" }}>
|
||
|
||
{/* ===== 今日任务 ===== */}
|
||
{tab === "today" && (
|
||
<div>
|
||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
|
||
<div>
|
||
<div style={{ fontSize: 16, fontWeight: 500 }}>{new Date().toLocaleDateString("zh-CN", { month: "long", day: "numeric", weekday: "long" })}</div>
|
||
<div style={{ fontSize: 12, color: "#aaa", marginTop: 2 }}>记录今天要处理的事情</div>
|
||
</div>
|
||
<button className="add-btn" onClick={() => setShowAddTask(!showAddTask)}>
|
||
<span style={{ fontSize: 18, lineHeight: 1 }}>+</span> 添加任务
|
||
</button>
|
||
</div>
|
||
|
||
{showAddTask && (
|
||
<div style={{ background: "#fff", border: "1px solid #ede8e1", borderRadius: 14, padding: 16, marginBottom: 20 }}>
|
||
<input
|
||
className="input-field"
|
||
placeholder="任务内容..."
|
||
value={newTask.text}
|
||
onChange={e => setNewTask({ ...newTask, text: e.target.value })}
|
||
onKeyDown={e => e.key === "Enter" && addTask()}
|
||
style={{ marginBottom: 10 }}
|
||
autoFocus
|
||
/>
|
||
<div style={{ display: "flex", gap: 10, alignItems: "center" }}>
|
||
<select className="select-field" value={newTask.type} onChange={e => setNewTask({ ...newTask, type: e.target.value })}>
|
||
<option value="brain">🧠 需要脑力</option>
|
||
<option value="light">✅ 不需要思考</option>
|
||
</select>
|
||
<button onClick={addTask} style={{ background: "#2c2c2c", color: "#fff", border: "none", borderRadius: 10, padding: "10px 18px", fontSize: 14, whiteSpace: "nowrap" }}>确认</button>
|
||
<button onClick={() => setShowAddTask(false)} style={{ background: "none", border: "1px solid #e0dbd4", borderRadius: 10, padding: "10px 14px", fontSize: 14, color: "#666" }}>取消</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 脑力任务 */}
|
||
<div style={{ marginBottom: 24 }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
|
||
<span style={{ fontSize: 18 }}>🧠</span>
|
||
<div>
|
||
<div style={{ fontSize: 14, fontWeight: 500 }}>需要脑力的任务</div>
|
||
<div style={{ fontSize: 11, color: "#aaa" }}>安排在早晨 5:45 或上午时段</div>
|
||
</div>
|
||
</div>
|
||
{brainTasks.length === 0 ? (
|
||
<div className="empty-state">还没有脑力任务<br />点击「添加任务」→ 选择「需要脑力」</div>
|
||
) : brainTasks.map(t => (
|
||
<div key={t.id} className={`task-card ${t.done ? "done" : ""}`}>
|
||
<button className={`check-btn ${t.done ? "done" : ""}`} onClick={() => toggleTask(t.id)}>
|
||
{t.done && <span style={{ fontSize: 11 }}>✓</span>}
|
||
</button>
|
||
<span style={{ fontSize: 14, flex: 1, textDecoration: t.done ? "line-through" : "none" }}>{t.text}</span>
|
||
<button className="del-btn" onClick={() => deleteTask(t.id)}>×</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 轻量任务 */}
|
||
<div>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
|
||
<span style={{ fontSize: 18 }}>✅</span>
|
||
<div>
|
||
<div style={{ fontSize: 14, fontWeight: 500 }}>不需要思考的任务</div>
|
||
<div style={{ fontSize: 11, color: "#aaa" }}>留到晚上 20:30 后处理</div>
|
||
</div>
|
||
</div>
|
||
{lightTasks.length === 0 ? (
|
||
<div className="empty-state">还没有轻量任务<br />点击「添加任务」→ 选择「不需要思考」</div>
|
||
) : lightTasks.map(t => (
|
||
<div key={t.id} className={`task-card ${t.done ? "done" : ""}`}>
|
||
<button className={`check-btn ${t.done ? "done" : ""}`} onClick={() => toggleTask(t.id)}>
|
||
{t.done && <span style={{ fontSize: 11 }}>✓</span>}
|
||
</button>
|
||
<span style={{ fontSize: 14, flex: 1, textDecoration: t.done ? "line-through" : "none" }}>{t.text}</span>
|
||
<button className="del-btn" onClick={() => deleteTask(t.id)}>×</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{tasks.length > 0 && (
|
||
<div style={{ marginTop: 20, background: "#fff", borderRadius: 12, padding: "12px 16px", border: "1px solid #ede8e1" }}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "#666" }}>
|
||
<span>完成进度</span>
|
||
<span>{tasks.filter(t => t.done).length} / {tasks.length} 件</span>
|
||
</div>
|
||
<div className="progress-bar" style={{ marginTop: 8 }}>
|
||
<div className="progress-fill" style={{ width: `${tasks.length ? (tasks.filter(t => t.done).length / tasks.length * 100) : 0}%` }} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ===== 日程表 ===== */}
|
||
{tab === "schedule" && (
|
||
<div>
|
||
<div style={{ display: "flex", gap: 8, marginBottom: 20, flexWrap: "wrap" }}>
|
||
{DAYS.map(d => (
|
||
<button key={d} className={`day-btn ${selectedDay === d ? "active" : ""}`} onClick={() => setSelectedDay(d)}>{d}</button>
|
||
))}
|
||
</div>
|
||
|
||
{WEEK_SCHEDULE[selectedDay] && (
|
||
<>
|
||
<div style={{ background: "#fff8e7", border: "1px solid #f5e6bb", borderRadius: 10, padding: "10px 14px", marginBottom: 20, fontSize: 13, color: "#8a6c00" }}>
|
||
💡 {WEEK_SCHEDULE[selectedDay].note}
|
||
</div>
|
||
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||
{WEEK_SCHEDULE[selectedDay].fixed.map((item, i) => {
|
||
const style = TYPE_STYLE[item.type];
|
||
return (
|
||
<div key={i} className="timeline-item" style={{ padding: "4px 0" }}>
|
||
<div style={{ width: 58, flexShrink: 0, fontSize: 12, color: "#999", paddingTop: 8, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{item.time}</div>
|
||
<div style={{ width: 14, flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 10 }}>
|
||
<div style={{ width: 8, height: 8, borderRadius: "50%", background: style.dot, flexShrink: 0 }} />
|
||
</div>
|
||
<div style={{ flex: 1, background: item.type === "sleep" ? "#f1f5f9" : "#fff", border: `1px solid ${item.type === "sleep" ? "#cbd5e1" : "#ede8e1"}`, borderRadius: 10, padding: "8px 12px", marginBottom: 6 }}>
|
||
<span style={{ fontSize: 13.5, fontWeight: item.type === "sleep" ? 500 : 400 }}>{item.task}</span>
|
||
<span style={{ marginLeft: 8, fontSize: 10, color: style.dot, background: style.bg, padding: "2px 6px", borderRadius: 4 }}>{style.label}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ===== 周回顾 ===== */}
|
||
{tab === "review" && (
|
||
<div>
|
||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
|
||
<div>
|
||
<div style={{ fontSize: 16, fontWeight: 500 }}>每周回顾</div>
|
||
<div style={{ fontSize: 12, color: "#aaa", marginTop: 2 }}>每周花10分钟复盘，调整下周计划</div>
|
||
</div>
|
||
<span className="week-badge">{currentWeek}</span>
|
||
</div>
|
||
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
||
{[
|
||
{ key: "sleep", label: "😴 这周睡眠情况", placeholder: "实际几点睡的？有没有改善？" },
|
||
{ key: "wins", label: "✨ 做得好的地方", placeholder: "哪些时间安排运转良好？" },
|
||
{ key: "issues", label: "🔧 遇到的问题", placeholder: "哪里卡住了？什么原因？" },
|
||
{ key: "next", label: "🎯 下周调整计划", placeholder: "下周想改变什么？具体怎么做？" },
|
||
].map(({ key, label, placeholder }) => (
|
||
<div key={key}>
|
||
<div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>{label}</div>
|
||
<textarea
|
||
className="review-input"
|
||
placeholder={placeholder}
|
||
value={weekReview[key]}
|
||
onChange={e => setWeekReview({ ...weekReview, [key]: e.target.value })}
|
||
/>
|
||
</div>
|
||
))}
|
||
|
||
<button onClick={saveReview} style={{ background: "#2c2c2c", color: "#fff", border: "none", borderRadius: 12, padding: "14px", fontSize: 15, fontFamily: "inherit", marginTop: 4 }}>
|
||
保存本周回顾
|
||
</button>
|
||
</div>
|
||
|
||
{/* 历史回顾 */}
|
||
{Object.keys(reviews).length > 0 && (
|
||
<div style={{ marginTop: 32 }}>
|
||
<div className="section-title">历史回顾</div>
|
||
{Object.entries(reviews).reverse().map(([key, r]) => (
|
||
<div key={key} style={{ background: "#fff", border: "1px solid #ede8e1", borderRadius: 12, padding: 16, marginBottom: 12 }}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
|
||
<span className="week-badge">{key.split("-")[0]}{key.split("-")[1] ? "-" + key.split("-")[1] : ""}</span>
|
||
<span style={{ fontSize: 12, color: "#aaa" }}>{r.date}</span>
|
||
</div>
|
||
{r.sleep && <div style={{ fontSize: 13, marginBottom: 6 }}><span style={{ color: "#aaa" }}>睡眠：</span>{r.sleep}</div>}
|
||
{r.wins && <div style={{ fontSize: 13, marginBottom: 6 }}><span style={{ color: "#aaa" }}>亮点：</span>{r.wins}</div>}
|
||
{r.issues && <div style={{ fontSize: 13, marginBottom: 6 }}><span style={{ color: "#aaa" }}>问题：</span>{r.issues}</div>}
|
||
{r.next && <div style={{ fontSize: 13 }}><span style={{ color: "#aaa" }}>下周：</span>{r.next}</div>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|