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

feat: 重构前端 - Tab 切换 + 日历组件

Browse Source 
- 添加 Tab 切换（工作任务/日记/经验总结）
- 共享内容显示区域，节约空间
- 添加日历组件，支持月份切换
- 点击日期筛选当天任务/日记
- 点击任务查看详情
- 标记有数据的日期（绿色圆点）
- 响应式布局优化
This commit is contained in:
maoshen
2026-04-14 10:37:43 +00:00
parent a7893cbad5
commit 20bb42be9f
1 changed files with 526 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

732
frontend/index.html
View File

@@ -34,25 +34,55 @@
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 20px;
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: 2em;
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);
}
.tab-btn:hover {
background: #f8f9fa;
transform: translateY(-2px);
}
.tab-btn.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.section-box {
background: white;
border-radius: 10px;
@@ -66,17 +96,155 @@
padding-bottom: 10px;
border-bottom: 2px solid #667eea;
}
.diary-item {
/* 日历组件 */
.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: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.calendar-header button:hover {
background: #5568d3;
}
.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;
}
.calendar-day:hover {
background: #e0e7ff;
}
.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;
}
.diary-item h3 {
color: #333;
.task-item:hover, .diary-item:hover {
transform: translateX(5px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.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;
@@ -94,6 +262,52 @@
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;
@@ -119,7 +333,7 @@
border-radius: 20px;
font-size: 0.85em;
}
.experience-item .problem {
.experience-item .problem, .experience-item .solution, .experience-item .lesson {
margin: 10px 0;
}
.experience-item .problem-title {
@@ -127,16 +341,12 @@
color: #dc2626;
margin-bottom: 5px;
}
.experience-item .solution {
margin: 10px 0;
}
.experience-item .solution-title {
font-weight: bold;
color: #059669;
margin-bottom: 5px;
}
.experience-item .lesson {
margin: 10px 0;
padding: 10px;
background: #fef3c7;
border-radius: 5px;
@@ -146,6 +356,7 @@
color: #92400e;
margin-bottom: 5px;
}
.loading {
text-align: center;
padding: 40px;
@@ -159,92 +370,24 @@
border-radius: 10px;
margin-bottom: 20px;
}
.emoji {
font-size: 1.2em;
.empty-state {
text-align: center;
padding: 40px;
color: #666;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
gap: 30px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}
@media (max-width: 768px) {
.grid-2, .grid-3 {
.grid-2, .calendar-wrapper {
grid-template-columns: 1fr;
}
}
.task-item {
padding: 15px;
border-left: 4px solid #667eea;
background: #f8f9fa;
margin-bottom: 15px;
border-radius: 5px;
}
.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 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.task-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;
}
.task-item .description {
color: #666;
margin: 10px 0;
white-space: pre-wrap;
}
.task-item .progress-notes {
background: #fef3c7;
padding: 10px;
border-radius: 5px;
font-size: 0.85em;
color: #92400e;
white-space: pre-wrap;
.calendar {
flex: 1;
}
}
</style>
</head>
@@ -262,26 +405,37 @@
<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 loadDiary() {
async function loadData() {
try {
const [statsRes, entriesRes, expStatsRes, experiencesRes, taskStatsRes, tasksRes] = await Promise.all([
fetch(`${API_BASE}/entries/stats/`),
fetch(`${API_BASE}/entries/recent/`),
fetch(`${API_BASE}/experiences/stats/`),
fetch(`${API_BASE}/experiences/recent/`),
const [taskStatsRes, tasksRes, diaryStatsRes, entriesRes, expStatsRes, experiencesRes] = await Promise.all([
fetch(`${API_BASE}/tasks/stats/`),
fetch(`${API_BASE}/tasks/active/`)
fetch(`${API_BASE}/tasks/`),
fetch(`${API_BASE}/entries/stats/`),
fetch(`${API_BASE}/entries/`),
fetch(`${API_BASE}/experiences/stats/`),
fetch(`${API_BASE}/experiences/`)
]);
const stats = await statsRes.json();
const entries = await entriesRes.json();
const expStats = await expStatsRes.json();
const experiences = await experiencesRes.json();
const taskStats = await taskStatsRes.json();
const tasks = await tasksRes.json();
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(stats, entries, expStats, experiences, taskStats, tasks);
render();
} catch (error) {
document.getElementById('app').innerHTML = `
<div class="error">加载失败：${error.message}</div>
@@ -289,121 +443,285 @@
}
}
function render(stats, entries, expStats, experiences, taskStats, tasks) {
const app = document.getElementById('app');
function getTasksByDate(date) {
return state.allTasks.filter(task => {
const createdDate = task.created_at.split('T')[0];
return createdDate === date;
});
}
app.innerHTML = `
<div class="stats">
<div class="stat-card">
<h3>${stats.total_entries || 0}</h3>
<p>总日记数</p>
function getEntryByDate(date) {
return state.allEntries.find(entry => entry.date === date);
}
function renderCalendar(year, month, selectedDate, hasDataDates, onClick) {
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="stat-card">
<h3>${taskStats.total || 0}</h3>
<p>总任务</p>
</div>
<div class="stat-card">
<h3>${taskStats.in_progress || 0}</h3>
<p>进行中</p>
</div>
<div class="stat-card">
<h3>${taskStats.completed || 0}</h3>
<p>已完成</p>
</div>
<div class="stat-card">
<h3>${taskStats.completion_rate || 0}%</h3>
<p>完成率</p>
</div>
<div class="stat-card">
<h3>${expStats.total_experiences || 0}</h3>
<p>经验总结</p>
<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 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);
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" style="margin-bottom: 30px;">
<h2>📋 工作任务</h2>
${tasks.length === 0 ? '<p>暂无活跃任务</p>' : tasks.map(task => `
<div class="task-item status-${task.status}">
<div class="header">
<span class="title">${task.title}</span>
<span class="status">${task.status_display}</span>
</div>
<div class="priority">优先级：${task.priority_display} | 负责人：${task.assigned_to || '码神'}</div>
${task.description ? `<div class="description">${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>
${task.progress_notes ? `<div class="progress-notes"><strong>进展记录：</strong><br>${task.progress_notes}</div>` : ''}
<div class="section-box">
<h2>${state.selectedTask ? '📋 任务详情' : `📋 ${state.selectedDate} 的任务`}</h2>
<div class="calendar-wrapper">
${calendarHtml}
<div class="content-area">
${tasksToShow.length === 0 ? `
<div class="empty-state">
<p>📅 ${state.selectedDate} 没有任务</p>
<p style="margin-top: 10px; font-size: 0.9em; color: #999;">点击日历选择其他日期</p>
</div>
` : tasksToShow.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>` : ''}
<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>
`).join('')}
</div>
<div class="grid-2">
<div class="section-box">
<h2>📝 最近日记</h2>
${entries.length === 0 ? '<p>暂无日记</p>' : entries.map(entry => `
<div class="diary-item">
<div class="date">${entry.date}</div>
<h3>${entry.title || '每日日记'}</h3>
${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.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>
` : ''}
</div>
`).join('')}
</div>
<div class="section-box">
<h2>💡 经验总结</h2>
${experiences.length === 0 ? '<p>暂无经验总结</p>' : experiences.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>
</div>
`;
}
loadDiary();
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>📝 ${state.selectedDate} 的日记</h2>
<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">
<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>