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

refactor: 任务板块以任务为中心

Browse Source 
- 任务列表显示所有任务（不以日期筛选）
- 点击任务进入详情页
- 任务详情中显示日历组件
- 点击日历日期，显示该任务当日的进展记录
- 日记板块保留日历选择日期功能
This commit is contained in:
maoshen
2026-04-14 10:55:45 +00:00
parent 20bb42be9f
commit 873995dc09
1 changed files with 77 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
frontend/index.html
View File

@@ -454,7 +454,7 @@
return state.allEntries.find(entry => entry.date === date);
}
function renderCalendar(year, month, selectedDate, hasDataDates, onClick) {
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();
@@ -494,45 +494,96 @@
}
function renderTasksView() {
const dateTasks = getTasksByDate(state.selectedDate);
const tasksToShow = state.selectedTask ? [state.selectedTask] : dateTasks;
const taskDates = state.allTasks.map(t => t.created_at.split('T')[0]);
const current = state.currentCalendar || new Date();
const calendarHtml = renderCalendar(current.getFullYear(), current.getMonth(), state.selectedDate, taskDates);
// 任务列表视图
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>
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>${state.selectedTask ? '📋 任务详情' : `📋 ${state.selectedDate} 的任务`}</h2>
<div class="calendar-wrapper">
${calendarHtml}
<div class="section-box">
<h2>📋 所有任务</h2>
<div class="content-area">
${tasksToShow.length === 0 ? `
${state.allTasks.length === 0 ? `
<div class="empty-state">
<p>📅 ${state.selectedDate} 没有任务</p>
<p style="margin-top: 10px; font-size: 0.9em; color: #999;">点击日历选择其他日期</p>
<p>暂无任务</p>
</div>
` : tasksToShow.map(task => `
` : 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">${task.description}</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('')}
${state.selectedTask ? `<button class="tab-btn" onclick="state.selectedTask = null; render();" style="margin-top: 10px;">← 返回列表</button>` : ''}
</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>
@@ -553,7 +604,8 @@
</div>
<div class="section-box">
<h2>📝 ${state.selectedDate} 的日记</h2>
<h2>📝 日记</h2>
<p style="color: #666; margin-bottom: 15px; font-size: 0.9em;">点击日历选择日期查看日记</p>
<div class="calendar-wrapper">
${calendarHtml}
<div class="content-area">
@@ -563,7 +615,7 @@
<p style="margin-top: 10px; font-size: 0.9em; color: #999;">点击日历选择其他日期</p>
</div>
` : `
<div class="diary-item">
<div class="diary-item" style="cursor: default;">
<div class="header">
<span class="title">${entry.title || '每日日记'}</span>
<span class="date">${entry.date}</span>