2026-04-14 10:07:27 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>码神的日记系统</title>
|
|
|
|
|
<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;
|
2026-04-14 10:37:43 +00:00
|
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
2026-04-14 10:07:27 +00:00
|
|
|
gap: 20px;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
.stat-card {
|
|
|
|
|
background: white;
|
2026-04-14 10:37:43 +00:00
|
|
|
padding: 15px;
|
2026-04-14 10:07:27 +00:00
|
|
|
border-radius: 10px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
|
|
|
}
|
|
|
|
|
.stat-card h3 {
|
|
|
|
|
color: #667eea;
|
2026-04-14 10:37:43 +00:00
|
|
|
font-size: 1.8em;
|
2026-04-14 10:07:27 +00:00
|
|
|
margin-bottom: 5px;
|
|
|
|
|
}
|
|
|
|
|
.stat-card p {
|
|
|
|
|
color: #666;
|
2026-04-14 10:37:43 +00:00
|
|
|
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;
|
2026-04-14 10:07:27 +00:00
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
|
2026-04-14 10:07:27 +00:00
|
|
|
.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;
|
|
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
|
|
|
|
|
/* 日历组件 */
|
|
|
|
|
.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 {
|
2026-04-14 10:07:27 +00:00
|
|
|
padding: 15px;
|
|
|
|
|
border-left: 4px solid #667eea;
|
|
|
|
|
background: #f8f9fa;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
border-radius: 5px;
|
2026-04-14 10:37:43 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.2s;
|
2026-04-14 10:07:27 +00:00
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
.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;
|
2026-04-14 10:07:27 +00:00
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 10:07:27 +00:00
|
|
|
.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;
|
|
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
|
|
|
|
|
/* 任务详情 */
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 10:07:27 +00:00
|
|
|
.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;
|
|
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
.experience-item .problem, .experience-item .solution, .experience-item .lesson {
|
2026-04-14 10:07:27 +00:00
|
|
|
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;
|
|
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
|
2026-04-14 10:07:27 +00:00
|
|
|
.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;
|
|
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
.empty-state {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 40px;
|
|
|
|
|
color: #666;
|
2026-04-14 10:07:27 +00:00
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
|
2026-04-14 10:07:27 +00:00
|
|
|
.grid-2 {
|
|
|
|
|
display: grid;
|
2026-04-14 10:37:43 +00:00
|
|
|
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
2026-04-14 10:16:14 +00:00
|
|
|
gap: 30px;
|
|
|
|
|
}
|
2026-04-14 10:07:27 +00:00
|
|
|
@media (max-width: 768px) {
|
2026-04-14 10:37:43 +00:00
|
|
|
.grid-2, .calendar-wrapper {
|
2026-04-14 10:07:27 +00:00
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
.calendar {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
2026-04-14 10:16:14 +00:00
|
|
|
}
|
2026-04-14 10:07:27 +00:00
|
|
|
</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';
|
2026-04-14 10:37:43 +00:00
|
|
|
let state = {
|
|
|
|
|
currentTab: 'tasks',
|
|
|
|
|
selectedDate: new Date().toISOString().split('T')[0],
|
|
|
|
|
selectedTask: null,
|
|
|
|
|
allTasks: [],
|
|
|
|
|
allEntries: [],
|
|
|
|
|
allExperiences: [],
|
|
|
|
|
taskStats: {},
|
|
|
|
|
diaryStats: {},
|
|
|
|
|
expStats: {}
|
|
|
|
|
};
|
2026-04-14 10:07:27 +00:00
|
|
|
|
2026-04-14 10:37:43 +00:00
|
|
|
async function loadData() {
|
2026-04-14 10:07:27 +00:00
|
|
|
try {
|
2026-04-14 10:37:43 +00:00
|
|
|
const [taskStatsRes, tasksRes, diaryStatsRes, entriesRes, expStatsRes, experiencesRes] = await Promise.all([
|
|
|
|
|
fetch(`${API_BASE}/tasks/stats/`),
|
|
|
|
|
fetch(`${API_BASE}/tasks/`),
|
2026-04-14 10:07:27 +00:00
|
|
|
fetch(`${API_BASE}/entries/stats/`),
|
2026-04-14 10:37:43 +00:00
|
|
|
fetch(`${API_BASE}/entries/`),
|
2026-04-14 10:07:27 +00:00
|
|
|
fetch(`${API_BASE}/experiences/stats/`),
|
2026-04-14 10:37:43 +00:00
|
|
|
fetch(`${API_BASE}/experiences/`)
|
2026-04-14 10:07:27 +00:00
|
|
|
]);
|
|
|
|
|
|
2026-04-14 10:37:43 +00:00
|
|
|
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();
|
2026-04-14 10:07:27 +00:00
|
|
|
|
2026-04-14 10:37:43 +00:00
|
|
|
render();
|
2026-04-14 10:07:27 +00:00
|
|
|
} catch (error) {
|
|
|
|
|
document.getElementById('app').innerHTML = `
|
|
|
|
|
<div class="error">加载失败：${error.message}</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 10:37:43 +00:00
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 10:55:45 +00:00
|
|
|
function renderCalendar(year, month, selectedDate, hasDataDates) {
|
2026-04-14 10:37:43 +00:00
|
|
|
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();
|
2026-04-14 10:55:45 +00:00
|
|
|
|
|
|
|
|
// 任务列表视图
|
|
|
|
|
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>
|
2026-04-14 10:37:43 +00:00
|
|
|
|
2026-04-14 10:55:45 +00:00
|
|
|
<div class="section-box">
|
|
|
|
|
<h2>📋 所有任务</h2>
|
2026-04-14 10:37:43 +00:00
|
|
|
<div class="content-area">
|
2026-04-14 10:55:45 +00:00
|
|
|
${state.allTasks.length === 0 ? `
|
2026-04-14 10:37:43 +00:00
|
|
|
<div class="empty-state">
|
2026-04-14 10:55:45 +00:00
|
|
|
<p>暂无任务</p>
|
2026-04-14 10:37:43 +00:00
|
|
|
</div>
|
2026-04-14 10:55:45 +00:00
|
|
|
` : state.allTasks.map(task => `
|
2026-04-14 10:37:43 +00:00
|
|
|
<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>
|
2026-04-14 10:55:45 +00:00
|
|
|
${task.description ? `<div class="description" style="max-height: 60px; overflow: hidden;">${task.description}</div>` : ''}
|
2026-04-14 10:37:43 +00:00
|
|
|
<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('')}
|
2026-04-14 10:55:45 +00:00
|
|
|
</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>
|
2026-04-14 10:37:43 +00:00
|
|
|
</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">
|
2026-04-14 10:55:45 +00:00
|
|
|
<h2>📝 日记</h2>
|
|
|
|
|
<p style="color: #666; margin-bottom: 15px; font-size: 0.9em;">点击日历选择日期查看日记</p>
|
2026-04-14 10:37:43 +00:00
|
|
|
<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>
|
|
|
|
|
` : `
|
2026-04-14 10:55:45 +00:00
|
|
|
<div class="diary-item" style="cursor: default;">
|
2026-04-14 10:37:43 +00:00
|
|
|
<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() {
|
2026-04-14 10:07:27 +00:00
|
|
|
const app = document.getElementById('app');
|
|
|
|
|
|
2026-04-14 10:37:43 +00:00
|
|
|
let content = '';
|
|
|
|
|
if (state.currentTab === 'tasks') {
|
|
|
|
|
content = renderTasksView();
|
|
|
|
|
} else if (state.currentTab === 'diary') {
|
|
|
|
|
content = renderDiaryView();
|
|
|
|
|
} else {
|
|
|
|
|
content = renderExperiencesView();
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 10:07:27 +00:00
|
|
|
app.innerHTML = `
|
|
|
|
|
<div class="stats">
|
|
|
|
|
<div class="stat-card">
|
2026-04-14 10:37:43 +00:00
|
|
|
<h3>${state.diaryStats.total_entries || 0}</h3>
|
|
|
|
|
<p>总日记</p>
|
2026-04-14 10:07:27 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="stat-card">
|
2026-04-14 10:37:43 +00:00
|
|
|
<h3>${state.taskStats.total || 0}</h3>
|
2026-04-14 10:16:14 +00:00
|
|
|
<p>总任务</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-card">
|
2026-04-14 10:37:43 +00:00
|
|
|
<h3>${state.taskStats.in_progress || 0}</h3>
|
2026-04-14 10:16:14 +00:00
|
|
|
<p>进行中</p>
|
2026-04-14 10:07:27 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="stat-card">
|
2026-04-14 10:37:43 +00:00
|
|
|
<h3>${state.taskStats.completed || 0}</h3>
|
2026-04-14 10:16:14 +00:00
|
|
|
<p>已完成</p>
|
2026-04-14 10:07:27 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="stat-card">
|
2026-04-14 10:37:43 +00:00
|
|
|
<h3>${state.taskStats.completion_rate || 0}%</h3>
|
2026-04-14 10:16:14 +00:00
|
|
|
<p>完成率</p>
|
2026-04-14 10:07:27 +00:00
|
|
|
</div>
|
2026-04-14 10:16:14 +00:00
|
|
|
<div class="stat-card">
|
2026-04-14 10:37:43 +00:00
|
|
|
<h3>${state.expStats.total_experiences || 0}</h3>
|
|
|
|
|
<p>经验</p>
|
2026-04-14 10:16:14 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-04-14 10:37:43 +00:00
|
|
|
${content}
|
|
|
|
|
`;
|
|
|
|
|
}
|
2026-04-14 10:07:27 +00:00
|
|
|
|
2026-04-14 10:37:43 +00:00
|
|
|
function switchTab(tab) {
|
|
|
|
|
state.currentTab = tab;
|
|
|
|
|
state.selectedTask = null;
|
|
|
|
|
render();
|
|
|
|
|
}
|
2026-04-14 10:07:27 +00:00
|
|
|
|
2026-04-14 10:37:43 +00:00
|
|
|
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();
|
2026-04-14 10:07:27 +00:00
|
|
|
}
|
|
|
|
|
|
2026-04-14 10:37:43 +00:00
|
|
|
// 初始化
|
|
|
|
|
loadData();
|
2026-04-14 10:07:27 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
