mashen/diary-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善日记系统前端（创建/编辑功能）

Browse Source 
新增功能:
- ✏️ DiaryEditor 组件 - 日记创建/编辑器
- 💡 ExperienceEditor 组件 - 经验总结创建/编辑器
- 🔄 DiaryDetail 组件 - 支持查看/编辑切换
- 🔄 ExperienceList 组件 - 支持创建/编辑经验

改进:
- 📱 优化 UI 样式和交互体验
- 🔐 完善认证流程
- 📅 日历组件保持不变（核心功能）

技术栈:
- React 18 + Axios
- MobX (状态管理)
- 原生 CSS
This commit is contained in:
maoshen
2026-04-15 07:22:11 +00:00
parent 8aa7a34895
commit 6b31779ab4
11 changed files with 17995 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -11,3 +11,5 @@ media/
*.swp
*.swo
*~
frontend-react/node_modules/
frontend-react/build/

13
frontend-react/build/asset-manifest.json Normal file
View File

@@ -0,0 +1,13 @@
{
"files": {
"main.css": "/static/css/main.358dee66.css",
"main.js": "/static/js/main.7934ac80.js",
"index.html": "/index.html",
"main.358dee66.css.map": "/static/css/main.358dee66.css.map",
"main.7934ac80.js.map": "/static/js/main.7934ac80.js.map"
},
"entrypoints": [
"static/css/main.358dee66.css",
"static/js/main.7934ac80.js"
]
}

1
frontend-react/build/index.html Normal file
View File

@@ -0,0 +1 @@
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#667eea"/><meta name="description" content="码神的日记系统 - 记录每天的进步与成长"/><title>码神的日记系统</title><script defer="defer" src="/static/js/main.7934ac80.js"></script><link href="/static/css/main.358dee66.css" rel="stylesheet"></head><body><noscript>需要启用 JavaScript 才能运行此应用。</noscript><div id="root"></div></body></html>

17130
frontend-react/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

108
frontend-react/src/App.js
View File

@@ -16,8 +16,8 @@ const API_BASE = '/api';
* - 用户认证
* - 统计面板
* - 日历组件 ⭐
* - 日记详情
* - 经验总结
* - 日记详情（支持创建/编辑）
* - 经验总结（支持创建/编辑）
*
* ⚠️ 修改前阅读 docs/README.md
*/
@@ -25,7 +25,6 @@ function App() {
const [user, setUser] = useState(null);
const [authView, setAuthView] = useState('login'); // login | register
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
const [diaryDates, setDiaryDates] = useState([]);
const [entries, setEntries] = useState([]);
const [experiences, setExperiences] = useState([]);
const [stats, setStats] = useState({});
@@ -88,7 +87,6 @@ function App() {
setStats(statsRes.data);
setEntries(entriesRes.data);
setExperiences(expRes.data);
setDiaryDates(entriesRes.data.map(e => e.date));
setLoading(false);
} catch (err) {
setError(`加载失败：${err.message}`);
@@ -96,6 +94,25 @@ function App() {
}
};
const handleDateSelect = (date) => {
setSelectedDate(date);
};
const handleDiaryUpdate = async () => {
// 日记更新后重新加载数据
await loadData();
};
const handleExperienceRefresh = () => {
// 经验更新后重新加载经验列表
axios.get(`${API_BASE}/experiences/recent/`)
.then(res => setExperiences(res.data))
.catch(err => console.error('加载经验失败:', err));
};
// 查找选中日期的日记
const selectedEntry = entries.find(e => e.date === selectedDate);
// 未登录显示登录/注册界面
if (!user) {
if (authView === 'register') {
@@ -104,18 +121,61 @@ function App() {
return <Login onLogin={handleLogin} />;
}
const handleDateSelect = (date) => {
setSelectedDate(date);
};
const selectedEntry = entries.find(e => e.date === selectedDate);
if (loading) {
return <div className="loading">加载中...</div>;
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '100vh',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
}}>
<div style={{
background: 'white',
padding: '40px',
borderRadius: '12px',
textAlign: 'center',
}}>
<div style={{ fontSize: '48px', marginBottom: '20px' }}>⚡</div>
<div style={{ color: '#666' }}>加载中...</div>
</div>
</div>
);
}
if (error) {
return <div className="error">{error}</div>;
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '100vh',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
}}>
<div style={{
background: 'white',
padding: '40px',
borderRadius: '12px',
textAlign: 'center',
}}>
<div style={{ fontSize: '48px', marginBottom: '20px' }}>❌</div>
<div style={{ color: '#c00', marginBottom: '20px' }}>{error}</div>
<button
onClick={() => window.location.reload()}
style={{
padding: '10px 20px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '6px',
cursor: 'pointer',
}}
>
刷新页面
</button>
</div>
</div>
);
}
return (
@@ -141,20 +201,36 @@ function App() {
<Calendar
selectedDate={selectedDate}
onDateSelect={handleDateSelect}
diaryDates={diaryDates}
diaryDates={entries.map(e => e.date)}
/>
</div>
<div className="section-box">
<h2>📝 {selectedDate} 的日记</h2>
<DiaryDetail entry={selectedEntry} />
<DiaryDetail
entry={selectedEntry}
date={selectedDate}
onUpdate={handleDiaryUpdate}
/>
</div>
</div>
<div className="section-box">
<h2>💡 经验总结</h2>
<ExperienceList experiences={experiences} />
<ExperienceList
experiences={experiences}
onRefresh={handleExperienceRefresh}
/>
</div>
<footer style={{
textAlign: 'center',
padding: '20px',
color: '#999',
fontSize: '14px',
marginTop: '30px',
}}>
<p>© 2026 码神的日记系统 · 记录每一天的成长</p>
</footer>
</div>
);
}

170
frontend-react/src/components/DiaryDetail.js
View File

@@ -1,63 +1,181 @@
import React from 'react';
import React, { useState } from 'react';
import DiaryEditor from './DiaryEditor';
/**
* 日记详情组件
* 显示选中日期的日记内容
* 显示日记内容，支持编辑
*/
function DiaryDetail({ entry }) {
if (!entry) {
function DiaryDetail({ entry, date, onUpdate }) {
const [editing, setEditing] = useState(false);
const handleSave = (savedEntry) => {
setEditing(false);
if (onUpdate) {
onUpdate(savedEntry);
}
};
const handleCancel = () => {
setEditing(false);
};
const handleEdit = () => {
setEditing(true);
};
const boxStyle = {
background: 'white',
borderRadius: '8px',
padding: '20px',
minHeight: '300px',
};
const labelStyle = {
fontWeight: '600',
color: '#667eea',
marginBottom: '8px',
display: 'flex',
alignItems: 'center',
gap: '6px',
};
const contentStyle = {
background: '#f8f9fa',
padding: '15px',
borderRadius: '6px',
marginBottom: '20px',
lineHeight: '1.6',
whiteSpace: 'pre-wrap',
};
const emptyStyle = {
color: '#999',
fontStyle: 'italic',
textAlign: 'center',
padding: '40px 20px',
};
const buttonStyle = {
padding: '10px 20px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
marginTop: '15px',
};
// 编辑模式
if (editing) {
return (
<div className="empty-state">
<p>这一天还没有日记</p>
<div style={boxStyle}>
<DiaryEditor
entry={entry}
date={date}
onSave={handleSave}
onCancel={handleCancel}
/>
</div>
);
}
// 查看模式
if (!entry) {
return (
<div className="diary-detail">
<h3>{entry.title || '每日日记'}</h3>
<div style={boxStyle}>
<div style={emptyStyle}>
<p style={{ fontSize: '48px', marginBottom: '15px' }}>📝</p>
<p>这一天还没有日记</p>
<button
onClick={handleEdit}
style={buttonStyle}
>
✏️ 写一篇
</button>
</div>
</div>
);
}
const hasContent = entry.completed_tasks || entry.learned || entry.problems ||
entry.reflections || entry.improvements || entry.plans;
return (
<div style={boxStyle}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
<h3 style={{ margin: 0, color: '#333' }}>{entry.title}</h3>
<button
onClick={handleEdit}
style={{
...buttonStyle,
marginTop: 0,
background: '#f0f0f0',
color: '#666',
}}
>
✏️ 编辑
</button>
</div>
{!hasContent ? (
<div style={emptyStyle}>
<p>这篇日记还没有内容</p>
<button onClick={handleEdit} style={buttonStyle}>
✏️ 编辑
</button>
</div>
) : (
<>
{entry.completed_tasks && (
<div className="diary-section">
<div className="section-title">✅ 完成的任务</div>
<div className="section-content">{entry.completed_tasks}</div>
<div style={{ marginBottom: '20px' }}>
<div style={labelStyle}>✅ 完成的任务</div>
<div style={contentStyle}>{entry.completed_tasks}</div>
</div>
)}
{entry.learned && (
<div className="diary-section">
<div className="section-title">📚 学到的东西</div>
<div className="section-content">{entry.learned}</div>
<div style={{ marginBottom: '20px' }}>
<div style={labelStyle}>💡 学到的东西</div>
<div style={contentStyle}>{entry.learned}</div>
</div>
)}
{entry.problems && (
<div className="diary-section">
<div className="section-title">🐛 遇到的问题</div>
<div className="section-content">{entry.problems}</div>
<div style={{ marginBottom: '20px' }}>
<div style={labelStyle}>🚧 遇到的问题</div>
<div style={contentStyle}>{entry.problems}</div>
</div>
)}
{entry.reflections && (
<div className="diary-section">
<div className="section-title">💡 想法和反思</div>
<div className="section-content">{entry.reflections}</div>
<div style={{ marginBottom: '20px' }}>
<div style={labelStyle}>💭 反思和想法</div>
<div style={contentStyle}>{entry.reflections}</div>
</div>
)}
{entry.improvements && (
<div className="diary-section">
<div className="section-title">📈 进步点</div>
<div className="section-content">{entry.improvements}</div>
<div style={{ marginBottom: '20px' }}>
<div style={labelStyle}>✨ 进步点</div>
<div style={contentStyle}>{entry.improvements}</div>
</div>
)}
{entry.plans && (
<div className="diary-section">
<div className="section-title">🎯 明日计划</div>
<div className="section-content">{entry.plans}</div>
<div style={{ marginBottom: '20px' }}>
<div style={labelStyle}>🎯 明日计划</div>
<div style={contentStyle}>{entry.plans}</div>
</div>
)}
</>
)}
<div style={{ marginTop: '20px', paddingTop: '15px', borderTop: '1px solid #eee', color: '#999', fontSize: '12px' }}>
创建于 {new Date(entry.created_at).toLocaleString('zh-CN')}
{entry.updated_at !== entry.created_at && ` · 更新于 ${new Date(entry.updated_at).toLocaleString('zh-CN')}`}
</div>
</div>
);
}

233
frontend-react/src/components/DiaryEditor.js Normal file
View File

@@ -0,0 +1,233 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
/**
* 日记编辑器组件
* 用于创建和编辑日记
*/
function DiaryEditor({ entry, date, onSave, onCancel }) {
const [formData, setFormData] = useState({
title: '',
content: '',
completed_tasks: '',
learned: '',
problems: '',
reflections: '',
improvements: '',
plans: '',
});
const [saving, setSaving] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
if (entry) {
setFormData({
title: entry.title || `${entry.date} 的日记`,
content: entry.content || '',
completed_tasks: entry.completed_tasks || '',
learned: entry.learned || '',
problems: entry.problems || '',
reflections: entry.reflections || '',
improvements: entry.improvements || '',
plans: entry.plans || '',
});
} else {
setFormData({
title: `${date} 的日记`,
content: '',
completed_tasks: '',
learned: '',
problems: '',
reflections: '',
improvements: '',
plans: '',
});
}
}, [entry, date]);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSubmit = async (e) => {
e.preventDefault();
setSaving(true);
setError(null);
try {
const payload = {
...formData,
date: entry?.date || date,
};
let response;
if (entry && entry.id) {
// 更新已有日记
response = await axios.put(`/api/entries/${entry.id}/`, payload);
} else {
// 创建新日记
response = await axios.post('/api/entries/', payload);
}
onSave(response.data);
} catch (err) {
setError(err.response?.data?.message || '保存失败，请重试');
} finally {
setSaving(false);
}
};
const inputStyle = {
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '6px',
fontSize: '14px',
fontFamily: 'inherit',
resize: 'vertical',
};
const labelStyle = {
display: 'block',
marginBottom: '8px',
fontWeight: '600',
color: '#555',
};
const sectionStyle = {
marginBottom: '20px',
};
return (
<form onSubmit={handleSubmit}>
{error && (
<div style={{
background: '#fee',
color: '#c00',
padding: '10px',
borderRadius: '6px',
marginBottom: '15px',
}}>
{error}
</div>
)}
<div style={sectionStyle}>
<label style={labelStyle}>📝 标题</label>
<input
type="text"
name="title"
value={formData.title}
onChange={handleChange}
style={{ ...inputStyle, fontWeight: '600' }}
placeholder="给今天的日记起个标题"
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}>✅ 完成的任务</label>
<textarea
name="completed_tasks"
value={formData.completed_tasks}
onChange={handleChange}
style={{ ...inputStyle, minHeight: '80px' }}
placeholder="今天完成了哪些任务？"
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}>💡 学到的东西</label>
<textarea
name="learned"
value={formData.learned}
onChange={handleChange}
style={{ ...inputStyle, minHeight: '80px' }}
placeholder="今天学到了什么新知识或技能？"
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}>🚧 遇到的问题</label>
<textarea
name="problems"
value={formData.problems}
onChange={handleChange}
style={{ ...inputStyle, minHeight: '80px' }}
placeholder="遇到了什么问题？如何解决的？"
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}>💭 反思和想法</label>
<textarea
name="reflections"
value={formData.reflections}
onChange={handleChange}
style={{ ...inputStyle, minHeight: '80px' }}
placeholder="有什么感悟、反思或想法？"
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}> 进步点</label>
<textarea
name="improvements"
value={formData.improvements}
onChange={handleChange}
style={{ ...inputStyle, minHeight: '80px' }}
placeholder="今天有哪些进步？"
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}>🎯 明日计划</label>
<textarea
name="plans"
value={formData.plans}
onChange={handleChange}
style={{ ...inputStyle, minHeight: '80px' }}
placeholder="明天计划做什么？"
/>
</div>
<div style={{ display: 'flex', gap: '10px', marginTop: '25px' }}>
<button
type="submit"
disabled={saving}
style={{
padding: '12px 24px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '14px',
fontWeight: '600',
cursor: saving ? 'not-allowed' : 'pointer',
opacity: saving ? 0.7 : 1,
}}
>
{saving ? '保存中...' : '💾 保存'}
</button>
<button
type="button"
onClick={onCancel}
style={{
padding: '12px 24px',
background: '#f0f0f0',
color: '#666',
border: 'none',
borderRadius: '6px',
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
}}
>
✖️ 取消
</button>
</div>
</form>
);
}
export default DiaryEditor;

210
frontend-react/src/components/ExperienceEditor.js Normal file
View File

@@ -0,0 +1,210 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
/**
* 经验总结编辑器组件
* 用于创建和编辑经验总结
*/
function ExperienceEditor({ experience, onSave, onCancel }) {
const [formData, setFormData] = useState({
title: '',
category: 'development',
problem: '',
solution: '',
lesson_learned: '',
date: new Date().toISOString().split('T')[0],
});
const [saving, setSaving] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
if (experience) {
setFormData({
title: experience.title || '',
category: experience.category || 'development',
problem: experience.problem || '',
solution: experience.solution || '',
lesson_learned: experience.lesson_learned || '',
date: experience.date || new Date().toISOString().split('T')[0],
});
}
}, [experience]);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSubmit = async (e) => {
e.preventDefault();
setSaving(true);
setError(null);
try {
let response;
if (experience && experience.id) {
response = await axios.put(`/api/experiences/${experience.id}/`, formData);
} else {
response = await axios.post('/api/experiences/', formData);
}
onSave(response.data);
} catch (err) {
setError(err.response?.data?.message || '保存失败，请重试');
} finally {
setSaving(false);
}
};
const inputStyle = {
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '6px',
fontSize: '14px',
fontFamily: 'inherit',
resize: 'vertical',
};
const labelStyle = {
display: 'block',
marginBottom: '8px',
fontWeight: '600',
color: '#555',
};
const sectionStyle = {
marginBottom: '20px',
};
return (
<form onSubmit={handleSubmit}>
{error && (
<div style={{
background: '#fee',
color: '#c00',
padding: '10px',
borderRadius: '6px',
marginBottom: '15px',
}}>
{error}
</div>
)}
<div style={sectionStyle}>
<label style={labelStyle}>💡 标题</label>
<input
type="text"
name="title"
value={formData.title}
onChange={handleChange}
style={{ ...inputStyle, fontWeight: '600' }}
placeholder="给这个经验起个标题"
required
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}>📦 类别</label>
<select
name="category"
value={formData.category}
onChange={handleChange}
style={{ ...inputStyle, cursor: 'pointer' }}
>
<option value="deployment">📦 部署</option>
<option value="development">💻 开发</option>
<option value="database">🗄️ 数据库</option>
<option value="permission">🔐 权限</option>
<option value="network">🌐 网络</option>
<option value="other">其他</option>
</select>
</div>
<div style={sectionStyle}>
<label style={labelStyle}> 日期</label>
<input
type="date"
name="date"
value={formData.date}
onChange={handleChange}
style={inputStyle}
required
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}>🚨 问题描述</label>
<textarea
name="problem"
value={formData.problem}
onChange={handleChange}
style={{ ...inputStyle, minHeight: '100px' }}
placeholder="遇到了什么问题？详细描述一下"
required
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}>✅ 解决方案</label>
<textarea
name="solution"
value={formData.solution}
onChange={handleChange}
style={{ ...inputStyle, minHeight: '100px' }}
placeholder="如何解决的？步骤和方法"
required
/>
</div>
<div style={sectionStyle}>
<label style={labelStyle}>💎 经验教训</label>
<textarea
name="lesson_learned"
value={formData.lesson_learned}
onChange={handleChange}
style={{ ...inputStyle, minHeight: '80px' }}
placeholder="从中学到了什么？有什么经验可以分享？"
/>
</div>
<div style={{ display: 'flex', gap: '10px', marginTop: '25px' }}>
<button
type="submit"
disabled={saving}
style={{
padding: '12px 24px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '14px',
fontWeight: '600',
cursor: saving ? 'not-allowed' : 'pointer',
opacity: saving ? 0.7 : 1,
}}
>
{saving ? '保存中...' : '💾 保存'}
</button>
<button
type="button"
onClick={onCancel}
style={{
padding: '12px 24px',
background: '#f0f0f0',
color: '#666',
border: 'none',
borderRadius: '6px',
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
}}
>
✖️ 取消
</button>
</div>
</form>
);
}
export default ExperienceEditor;

150
frontend-react/src/components/ExperienceList.js
View File

@@ -1,38 +1,146 @@
import React from 'react';
import React, { useState } from 'react';
import ExperienceEditor from './ExperienceEditor';
/**
* 经验总结列表组件
* 显示经验列表，支持创建新经验
*/
function ExperienceList({ experiences }) {
if (!experiences || experiences.length === 0) {
return <div className="empty-state">暂无经验总结</div>;
function ExperienceList({ experiences, onRefresh }) {
const [creating, setCreating] = useState(false);
const [selectedExp, setSelectedExp] = useState(null);
const handleSave = () => {
setCreating(false);
setSelectedExp(null);
if (onRefresh) {
onRefresh();
}
};
const handleCancel = () => {
setCreating(false);
setSelectedExp(null);
};
const handleEdit = (exp) => {
setSelectedExp(exp);
};
const getCategoryIcon = (category) => {
const icons = {
deployment: '📦',
development: '💻',
database: '🗄️',
permission: '🔐',
network: '🌐',
other: '📝',
};
return icons[category] || '📝';
};
const boxStyle = {
background: 'white',
borderRadius: '8px',
padding: '20px',
minHeight: '200px',
};
const itemStyle = {
padding: '15px',
background: '#f8f9fa',
borderRadius: '6px',
marginBottom: '12px',
cursor: 'pointer',
transition: 'all 0.2s',
};
const buttonStyle = {
padding: '10px 20px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '6px',
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
};
// 创建/编辑模式
if (creating || selectedExp) {
return (
<div style={boxStyle}>
<ExperienceEditor
experience={selectedExp}
onSave={handleSave}
onCancel={handleCancel}
/>
</div>
);
}
// 列表模式
return (
<div className="experience-list">
{experiences.map(exp => (
<div key={exp.id} className="experience-item">
<div className="experience-header">
<span className="experience-title">{exp.title}</span>
<span className="experience-category">{exp.category}</span>
<div style={boxStyle}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
<h3 style={{ margin: 0, color: '#333' }}>💡 经验总结</h3>
<button
onClick={() => setCreating(true)}
style={buttonStyle}
>
➕ 新建
</button>
</div>
<div className="experience-problem">
<div className="experience-problem-title">🐛 问题</div>
<div>{exp.problem}</div>
{!experiences || experiences.length === 0 ? (
<div style={{
color: '#999',
fontStyle: 'italic',
textAlign: 'center',
padding: '40px 20px',
}}>
<p style={{ fontSize: '48px', marginBottom: '15px' }}>💡</p>
<p>还没有经验总结</p>
<button onClick={() => setCreating(true)} style={{ ...buttonStyle, marginTop: '15px' }}>
➕ 创建第一条
</button>
</div>
<div className="experience-solution">
<div className="experience-solution-title">✅ 解决方案</div>
<div>{exp.solution}</div>
) : (
<div>
{experiences.map((exp) => (
<div
key={exp.id}
style={itemStyle}
onClick={() => handleEdit(exp)}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#e9ecef';
e.currentTarget.style.transform = 'translateX(5px)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = '#f8f9fa';
e.currentTarget.style.transform = 'translateX(0)';
}}
>
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
<span style={{ fontSize: '24px' }}>{getCategoryIcon(exp.category)}</span>
<div style={{ flex: 1 }}>
<div style={{ fontWeight: '600', color: '#333', marginBottom: '5px' }}>
{exp.title}
</div>
{exp.lesson_learned && (
<div className="experience-lesson">
<div className="experience-lesson-title">📌 经验教训</div>
<div>{exp.lesson_learned}</div>
<div style={{ fontSize: '13px', color: '#666', marginBottom: '8px' }}>
{exp.problem?.substring(0, 100)}{exp.problem?.length > 100 ? '...' : ''}
</div>
<div style={{ fontSize: '12px', color: '#999' }}>
📅 {new Date(exp.date).toLocaleDateString('zh-CN')} ·
📝 {exp.get_category_display || exp.category}
</div>
</div>
<span style={{ fontSize: '18px', color: '#999' }}>›</span>
</div>
)}
</div>
))}
</div>
)}
</div>
);
}

13
frontend/asset-manifest.json Normal file
View File

@@ -0,0 +1,13 @@
{
"files": {
"main.css": "/static/css/main.358dee66.css",
"main.js": "/static/js/main.7934ac80.js",
"index.html": "/index.html",
"main.358dee66.css.map": "/static/css/main.358dee66.css.map",
"main.7934ac80.js.map": "/static/js/main.7934ac80.js.map"
},
"entrypoints": [
"static/css/main.358dee66.css",
"static/js/main.7934ac80.js"
]
}

938
frontend/index.html
View File

@@ -1,937 +1 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>码神的日记系统</title>
<!--
⚠️⚠️⚠️ 核心功能：日历组件 ⚠️⚠️⚠️
修改此文件前必须：
1. 阅读 docs/CALENDAR.md 了解日历功能
2. 确认不会删除日历相关代码
3. 修改后运行 test_frontend.py diary 验证
日历功能包括：
- 月历视图显示
- 点击日期显示日记
- 上月/下月切换
- 有日记的日期标记 📝
-->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
color: white;
margin-bottom: 30px;
}
header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
header p {
opacity: 0.9;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 15px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.stat-card h3 {
color: #667eea;
font-size: 1.8em;
margin-bottom: 5px;
}
.stat-card p {
color: #666;
font-size: 0.9em;
}
/* Tab 切换 */
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab-btn {
padding: 12px 24px;
background: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
font-weight: 500;
color: #666;
transition: all 0.3s;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.tab-btn:hover {
background: #f8f9fa;
transform: translateY(-2px);
}
.tab-btn:active {
transform: scale(0.98);
}
.tab-btn.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.section-box {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.section-box h2 {
color: #333;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #667eea;
}
/* ⚠️ 日历组件样式 - 核心功能，不可删除 */
.calendar-wrapper {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.calendar {
flex: 0 0 300px;
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.calendar-header button {
background: #667eea;
color: white;
border: none;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.calendar-header button:hover {
background: #5568d3;
}
.calendar-header button:active {
background: #4857c0;
transform: scale(0.95);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.calendar-day-header {
text-align: center;
font-size: 0.75em;
color: #666;
padding: 5px;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85em;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
min-width: 36px;
min-height: 36px;
}
.calendar-day:hover {
background: #e0e7ff;
}
.calendar-day:active {
background: #c7d2fe;
transform: scale(0.95);
}
.calendar-day.selected {
background: #667eea;
color: white;
}
.calendar-day.today {
border: 2px solid #667eea;
font-weight: bold;
}
.calendar-day.has-data {
position: relative;
}
.calendar-day.has-data::after {
content: '';
position: absolute;
bottom: 2px;
width: 6px;
height: 6px;
background: #10b981;
border-radius: 50%;
}
.calendar-day.empty {
cursor: default;
}
/* 内容区域 */
.content-area {
flex: 1;
min-width: 0;
}
.task-item, .diary-item {
padding: 15px;
border-left: 4px solid #667eea;
background: #f8f9fa;
margin-bottom: 15px;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.task-item:hover, .diary-item:hover {
transform: translateX(5px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.task-item:active, .diary-item:active {
transform: scale(0.98);
background: #eef1f5;
}
.task-item.status-pending { border-left-color: #6b7280; }
.task-item.status-in_progress { border-left-color: #3b82f6; }
.task-item.status-blocked { border-left-color: #f59e0b; }
.task-item.status-completed { border-left-color: #10b981; }
.task-item.status-cancelled { border-left-color: #ef4444; opacity: 0.6; }
.task-item .header, .diary-item .header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.task-item .title, .diary-item .title {
font-weight: bold;
color: #333;
font-size: 1.1em;
}
.task-item .status {
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85em;
color: white;
}
.status-pending .status { background: #6b7280; }
.status-in_progress .status { background: #3b82f6; }
.status-blocked .status { background: #f59e0b; }
.status-completed .status { background: #10b981; }
.status-cancelled .status { background: #ef4444; }
.task-item .priority {
font-size: 0.8em;
color: #666;
margin-bottom: 8px;
}
.task-item .progress-bar {
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
margin: 10px 0;
}
.task-item .progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.3s;
}
.task-item .progress-text {
font-size: 0.85em;
color: #666;
text-align: right;
}
.diary-item .date {
color: #667eea;
font-weight: bold;
margin-bottom: 10px;
}
.diary-item .section {
margin: 10px 0;
}
.diary-item .section-title {
font-weight: bold;
color: #555;
}
.diary-item .section-content {
color: #666;
margin-left: 20px;
white-space: pre-wrap;
}
/* 任务详情 */
.task-detail {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
.task-detail h3 {
color: #333;
margin-bottom: 15px;
}
.task-detail .meta {
display: flex;
gap: 20px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.task-detail .meta-item {
background: white;
padding: 8px 15px;
border-radius: 5px;
font-size: 0.9em;
}
.task-detail .description {
margin-bottom: 15px;
white-space: pre-wrap;
color: #666;
}
.task-detail .progress-notes {
background: #fffbeb;
padding: 15px;
border-radius: 5px;
margin-top: 15px;
}
.task-detail .progress-notes h4 {
color: #92400e;
margin-bottom: 10px;
}
.task-detail .progress-notes .note {
font-size: 0.85em;
color: #666;
padding: 8px 0;
border-bottom: 1px solid #f3e5d5;
}
.experience-item {
padding: 15px;
border-left: 4px solid #f59e0b;
background: #fffbeb;
margin-bottom: 15px;
border-radius: 5px;
}
.experience-item .header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.experience-item .title {
font-weight: bold;
color: #333;
font-size: 1.1em;
}
.experience-item .category {
background: #f59e0b;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85em;
}
.experience-item .problem, .experience-item .solution, .experience-item .lesson {
margin: 10px 0;
}
.experience-item .problem-title {
font-weight: bold;
color: #dc2626;
margin-bottom: 5px;
}
.experience-item .solution-title {
font-weight: bold;
color: #059669;
margin-bottom: 5px;
}
.experience-item .lesson {
padding: 10px;
background: #fef3c7;
border-radius: 5px;
}
.experience-item .lesson-title {
font-weight: bold;
color: #92400e;
margin-bottom: 5px;
}
.loading {
text-align: center;
padding: 40px;
color: white;
font-size: 1.2em;
}
.error {
background: #fee;
color: #c00;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.empty-state {
text-align: center;
padding: 40px;
color: #666;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}
/* 移动端优化 */
@media (max-width: 768px) {
body {
padding: 10px;
}
header h1 {
font-size: 1.8em;
}
header p {
font-size: 0.9em;
}
.stats {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.stat-card {
padding: 10px;
}
.stat-card h3 {
font-size: 1.4em;
}
.stat-card p {
font-size: 0.75em;
}
.tabs {
gap: 8px;
margin-bottom: 15px;
}
.tab-btn {
padding: 10px 16px;
font-size: 0.9em;
flex: 1;
text-align: center;
}
.section-box {
padding: 15px;
margin-bottom: 20px;
}
.section-box h2 {
font-size: 1.3em;
margin-bottom: 15px;
}
.calendar-wrapper {
flex-direction: column;
gap: 15px;
}
.calendar {
flex: none;
width: 100%;
padding: 10px;
}
.calendar-header span {
font-size: 0.9em;
}
.calendar-header button {
padding: 3px 8px;
font-size: 0.9em;
}
.calendar-day {
font-size: 0.75em;
aspect-ratio: 1;
}
.calendar-day-header {
font-size: 0.65em;
}
.content-area {
width: 100%;
}
.task-item, .diary-item {
padding: 12px;
margin-bottom: 12px;
}
.task-item .title, .diary-item .title {
font-size: 1em;
}
.task-item .status {
font-size: 0.75em;
padding: 3px 10px;
}
.task-item .priority {
font-size: 0.75em;
}
.task-detail .meta {
flex-direction: column;
gap: 8px;
}
.task-detail .meta-item {
font-size: 0.85em;
}
.experience-item .title {
font-size: 1em;
}
.experience-item .category {
font-size: 0.75em;
}
}
/* 超小屏幕（< 400px） */
@media (max-width: 400px) {
.stats {
grid-template-columns: repeat(2, 1fr);
}
.stat-card h3 {
font-size: 1.2em;
}
.stat-card p {
font-size: 0.7em;
}
header h1 {
font-size: 1.5em;
}
.tabs {
flex-direction: column;
}
.tab-btn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>⚡ 码神的日记系统</h1>
<p>记录每天的进步与成长</p>
</header>
<div id="app">
<div class="loading">加载中...</div>
</div>
</div>
<script>
const API_BASE = '/api';
let state = {
currentTab: 'tasks',
selectedDate: new Date().toISOString().split('T')[0],
selectedTask: null,
allTasks: [],
allEntries: [],
allExperiences: [],
taskStats: {},
diaryStats: {},
expStats: {}
};
async function loadData() {
try {
const [taskStatsRes, tasksRes, diaryStatsRes, entriesRes, expStatsRes, experiencesRes] = await Promise.all([
fetch(`${API_BASE}/tasks/stats/`),
fetch(`${API_BASE}/tasks/`),
fetch(`${API_BASE}/entries/stats/`),
fetch(`${API_BASE}/entries/`),
fetch(`${API_BASE}/experiences/stats/`),
fetch(`${API_BASE}/experiences/`)
]);
state.taskStats = await taskStatsRes.json();
state.allTasks = await tasksRes.json();
state.diaryStats = await diaryStatsRes.json();
state.allEntries = await entriesRes.json();
state.expStats = await expStatsRes.json();
state.allExperiences = await experiencesRes.json();
render();
} catch (error) {
document.getElementById('app').innerHTML = `
<div class="error">加载失败：${error.message}</div>
`;
}
}
function getTasksByDate(date) {
return state.allTasks.filter(task => {
const createdDate = task.created_at.split('T')[0];
return createdDate === date;
});
}
function getEntryByDate(date) {
return state.allEntries.find(entry => entry.date === date);
}
// ⚠️ 核心功能：渲染日历 - 不可删除
function renderCalendar(year, month, selectedDate, hasDataDates) {
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const startDay = firstDay.getDay();
const today = new Date().toISOString().split('T')[0];
const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
let html = `
<div class="calendar">
<div class="calendar-header">
<button onclick="changeMonth(-1)">&#8592;</button>
<span style="font-weight: bold;">${year}年 ${monthNames[month]}</span>
<button onclick="changeMonth(1)">&#8594;</button>
</div>
<div class="calendar-grid">
${dayNames.map(d => `<div class="calendar-day-header">${d}</div>`).join('')}
${Array(startDay).fill('<div class="calendar-day empty"></div>').join('')}
`;
for (let day = 1; day <= lastDay.getDate(); day++) {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const isSelected = dateStr === selectedDate;
const isToday = dateStr === today;
const hasData = hasDataDates.includes(dateStr);
html += `
<div class="calendar-day ${isSelected ? 'selected' : ''} ${isToday ? 'today' : ''} ${hasData ? 'has-data' : ''}"
onclick="selectDate('${dateStr}')">
${day}
</div>
`;
}
html += `</div></div>`;
return html;
}
function renderTasksView() {
const current = state.currentCalendar || new Date();
// 任务列表视图
if (!state.selectedTask) {
return `
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('tasks')">📋 工作任务</button>
<button class="tab-btn" onclick="switchTab('diary')">📝 日记</button>
<button class="tab-btn" onclick="switchTab('experiences')">💡 经验总结</button>
</div>
<div class="section-box">
<h2>📋 所有任务</h2>
<div class="content-area">
${state.allTasks.length === 0 ? `
<div class="empty-state">
<p>暂无任务</p>
</div>
` : state.allTasks.map(task => `
<div class="task-item status-${task.status}" onclick="selectTask(${task.id})">
<div class="header">
<span class="title">${task.title}</span>
<span class="status">${task.status_display}</span>
</div>
<div class="priority">优先级：${task.priority_display} | 创建：${task.created_at.split('T')[0]}</div>
${task.description ? `<div class="description" style="max-height: 60px; overflow: hidden;">${task.description}</div>` : ''}
<div class="progress-bar">
<div class="progress-fill" style="width: ${task.progress_percent}%"></div>
</div>
<div class="progress-text">进展：${task.progress_percent}%</div>
</div>
`).join('')}
</div>
</div>
`;
}
// 任务详情视图（带日历）
const task = state.selectedTask;
const taskProgressDates = task.progress_notes ?
task.progress_notes.match(/\[(\d{4}-\d{2}-\d{2})\]/g)?.map(s => s.slice(1, 11)) || [] : [];
const calendarHtml = renderCalendar(current.getFullYear(), current.getMonth(),
state.selectedDate, taskProgressDates, true);
const selectedDateProgress = task.progress_notes
.split('\n')
.filter(line => line.startsWith(`[${state.selectedDate}]`))
.map(line => line.slice(13))
.join('\n');
return `
<div class="tabs">
<button class="tab-btn" onclick="switchTab('tasks')">📋 工作任务</button>
<button class="tab-btn" onclick="switchTab('diary')">📝 日记</button>
<button class="tab-btn" onclick="switchTab('experiences')">💡 经验总结</button>
</div>
<div class="section-box">
<h2>📋 任务详情</h2>
<button class="tab-btn" onclick="state.selectedTask = null; render();" style="margin-bottom: 20px;">← 返回列表</button>
<div class="task-detail">
<h3>${task.title}</h3>
<div class="meta">
<div class="meta-item">状态：${task.status_display}</div>
<div class="meta-item">优先级：${task.priority_display}</div>
<div class="meta-item">负责人：${task.assigned_to || '码神'}</div>
<div class="meta-item">创建：${task.created_at.split('T')[0]}</div>
<div class="meta-item">进展：${task.progress_percent}%</div>
</div>
${task.description ? `<div class="description"><strong>描述：</strong><br>${task.description}</div>` : ''}
<h3 style="margin-top: 25px; margin-bottom: 15px;">📅 任务进展日历</h3>
<p style="color: #666; margin-bottom: 15px; font-size: 0.9em;">点击日历查看当日的任务记录</p>
<div class="calendar-wrapper">
${calendarHtml}
<div class="content-area">
<div class="task-detail" style="background: white; border: 1px solid #e0e7ff;">
<h4 style="color: #667eea; margin-bottom: 10px;">📝 ${state.selectedDate} 的进展记录</h4>
${selectedDateProgress ? `
<div class="progress-notes" style="background: #f8f9fa;">
<div class="note" style="white-space: pre-wrap;">${selectedDateProgress}</div>
</div>
` : `
<div class="empty-state" style="padding: 20px;">
<p style="color: #999;">${state.selectedDate} 暂无记录</p>
</div>
`}
</div>
</div>
</div>
</div>
</div>
`;
}
function renderDiaryView() {
const entry = getEntryByDate(state.selectedDate);
const entryDates = state.allEntries.map(e => e.date);
const current = state.currentCalendar || new Date();
const calendarHtml = renderCalendar(current.getFullYear(), current.getMonth(), state.selectedDate, entryDates);
return `
<div class="tabs">
<button class="tab-btn" onclick="switchTab('tasks')">📋 工作任务</button>
<button class="tab-btn active" onclick="switchTab('diary')">📝 日记</button>
<button class="tab-btn" onclick="switchTab('experiences')">💡 经验总结</button>
</div>
<div class="section-box">
<h2>📝 日记</h2>
<p style="color: #666; margin-bottom: 15px; font-size: 0.9em;">点击日历选择日期查看日记</p>
<div class="calendar-wrapper">
${calendarHtml}
<div class="content-area">
${!entry ? `
<div class="empty-state">
<p>📅 ${state.selectedDate} 没有日记</p>
<p style="margin-top: 10px; font-size: 0.9em; color: #999;">点击日历选择其他日期</p>
</div>
` : `
<div class="diary-item" style="cursor: default;">
<div class="header">
<span class="title">${entry.title || '每日日记'}</span>
<span class="date">${entry.date}</span>
</div>
${entry.completed_tasks ? `
<div class="section">
<span class="section-title">✅ 完成的任务</span>
<div class="section-content">${entry.completed_tasks}</div>
</div>
` : ''}
${entry.learned ? `
<div class="section">
<span class="section-title">📚 学到的东西</span>
<div class="section-content">${entry.learned}</div>
</div>
` : ''}
${entry.problems ? `
<div class="section">
<span class="section-title">🐛 遇到的问题</span>
<div class="section-content">${entry.problems}</div>
</div>
` : ''}
${entry.reflections ? `
<div class="section">
<span class="section-title">💡 想法和反思</span>
<div class="section-content">${entry.reflections}</div>
</div>
` : ''}
${entry.improvements ? `
<div class="section">
<span class="section-title">📈 进步点</span>
<div class="section-content">${entry.improvements}</div>
</div>
` : ''}
${entry.plans ? `
<div class="section">
<span class="section-title">🎯 明日计划</span>
<div class="section-content">${entry.plans}</div>
</div>
` : ''}
</div>
`}
</div>
</div>
</div>
`;
}
function renderExperiencesView() {
return `
<div class="tabs">
<button class="tab-btn" onclick="switchTab('tasks')">📋 工作任务</button>
<button class="tab-btn" onclick="switchTab('diary')">📝 日记</button>
<button class="tab-btn active" onclick="switchTab('experiences')">💡 经验总结</button>
</div>
<div class="section-box">
<h2>💡 经验总结</h2>
${state.allExperiences.length === 0 ? `
<div class="empty-state">
<p>暂无经验总结</p>
</div>
` : state.allExperiences.map(exp => `
<div class="experience-item">
<div class="header">
<span class="title">${exp.title}</span>
<span class="category">${exp.category}</span>
</div>
<div class="problem">
<div class="problem-title">🐛 问题</div>
<div class="section-content">${exp.problem}</div>
</div>
<div class="solution">
<div class="solution-title">✅ 解决方案</div>
<div class="section-content">${exp.solution}</div>
</div>
${exp.lesson_learned ? `
<div class="lesson">
<div class="lesson-title">📌 经验教训</div>
<div class="section-content">${exp.lesson_learned}</div>
</div>
` : ''}
</div>
`).join('')}
</div>
`;
}
function render() {
const app = document.getElementById('app');
let content = '';
if (state.currentTab === 'tasks') {
content = renderTasksView();
} else if (state.currentTab === 'diary') {
content = renderDiaryView();
} else {
content = renderExperiencesView();
}
app.innerHTML = `
<div class="stats">
<div class="stat-card">
<h3>${state.diaryStats.total_entries || 0}</h3>
<p>总日记</p>
</div>
<div class="stat-card">
<h3>${state.taskStats.total || 0}</h3>
<p>总任务</p>
</div>
<div class="stat-card">
<h3>${state.taskStats.in_progress || 0}</h3>
<p>进行中</p>
</div>
<div class="stat-card">
<h3>${state.taskStats.completed || 0}</h3>
<p>已完成</p>
</div>
<div class="stat-card">
<h3>${state.taskStats.completion_rate || 0}%</h3>
<p>完成率</p>
</div>
<div class="stat-card">
<h3>${state.expStats.total_experiences || 0}</h3>
<p>经验</p>
</div>
</div>
${content}
`;
}
function switchTab(tab) {
state.currentTab = tab;
state.selectedTask = null;
render();
}
// ⚠️ 核心功能：选择日期显示日记 - 不可删除
function selectDate(date) {
state.selectedDate = date;
render();
}
function selectTask(taskId) {
state.selectedTask = state.allTasks.find(t => t.id === taskId);
render();
}
// ⚠️ 核心功能：切换月份 - 不可删除
function changeMonth(delta) {
if (!state.currentCalendar) {
state.currentCalendar = new Date();
}
state.currentCalendar.setMonth(state.currentCalendar.getMonth() + delta);
render();
}
// 初始化
loadData();
</script>
</body>
</html>
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#667eea"/><meta name="description" content="码神的日记系统 - 记录每天的进步与成长"/><title>码神的日记系统</title><script defer="defer" src="/static/js/main.7934ac80.js"></script><link href="/static/css/main.358dee66.css" rel="stylesheet"></head><body><noscript>需要启用 JavaScript 才能运行此应用。</noscript><div id="root"></div></body></html>