feat: 完善日记系统前端（创建/编辑功能）
新增功能: - ✏️ DiaryEditor 组件 - 日记创建/编辑器 - 💡 ExperienceEditor 组件 - 经验总结创建/编辑器 - 🔄 DiaryDetail 组件 - 支持查看/编辑切换 - 🔄 ExperienceList 组件 - 支持创建/编辑经验 改进: - 📱 优化 UI 样式和交互体验 - 🔐 完善认证流程 - 📅 日历组件保持不变（核心功能） 技术栈: - React 18 + Axios - MobX (状态管理) - 原生 CSS
This commit is contained in:
maoshen
13
frontend/asset-manifest.json
Normal file
13
frontend/asset-manifest.json
Normal 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,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)">←</button>
|
||||
<span style="font-weight: bold;">${year}年 ${monthNames[month]}</span>
|
||||
<button onclick="changeMonth(1)">→</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>
|
||||
Reference in New Issue
Block a user