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>
|
2026-04-14 11:57:24 +00:00
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
2026-04-14 10:07:27 +00:00
|
|
|
body {
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.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; }
|
2026-04-14 10:07:27 +00:00
|
|
|
.stats {
|
|
|
|
|
display: grid;
|
2026-04-14 11:40:04 +00:00
|
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
|
|
|
gap: 20px;
|
2026-04-14 10:07:27 +00:00
|
|
|
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);
|
|
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.stat-card h3 { color: #667eea; font-size: 1.8em; margin-bottom: 5px; }
|
|
|
|
|
.stat-card p { color: #666; font-size: 0.9em; }
|
2026-04-14 12:05:30 +00:00
|
|
|
.tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
|
2026-04-14 10:37:43 +00:00
|
|
|
.tab-btn {
|
2026-04-14 11:40:04 +00:00
|
|
|
padding: 12px 24px;
|
2026-04-14 10:37:43 +00:00
|
|
|
background: white;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
cursor: pointer;
|
2026-04-14 11:40:04 +00:00
|
|
|
font-size: 1em;
|
2026-04-14 10:37:43 +00:00
|
|
|
font-weight: 500;
|
|
|
|
|
color: #666;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
2026-04-14 11:17:29 +00:00
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.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
|
|
|
.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 11:57:24 +00:00
|
|
|
.task-item, .diary-item, .experience-item {
|
2026-04-14 11:40:04 +00:00
|
|
|
padding: 15px;
|
2026-04-14 11:35:42 +00:00
|
|
|
border-left: 4px solid #667eea;
|
|
|
|
|
background: #f8f9fa;
|
2026-04-14 11:40:04 +00:00
|
|
|
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; }
|
2026-04-14 11:57:24 +00:00
|
|
|
.task-item .header, .diary-item .header, .experience-item .header {
|
2026-04-14 11:40:04 +00:00
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.task-item .title, .diary-item .title, .experience-item .title {
|
2026-04-14 11:40:04 +00:00
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333;
|
|
|
|
|
font-size: 1.1em;
|
|
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.task-item .status, .experience-item .category {
|
2026-04-14 11:40:04 +00:00
|
|
|
padding: 4px 12px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
font-size: 0.85em;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.task-item .status { background: #6b7280; }
|
|
|
|
|
.task-item.status-completed .status { background: #10b981; }
|
|
|
|
|
.experience-item .category { background: #f59e0b; }
|
|
|
|
|
.task-item .priority { font-size: 0.8em; color: #666; margin-bottom: 8px; }
|
2026-04-14 11:40:04 +00:00
|
|
|
.task-item .progress-bar {
|
2026-04-14 12:05:30 +00:00
|
|
|
height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin: 10px 0;
|
2026-04-14 11:40:04 +00:00
|
|
|
}
|
|
|
|
|
.task-item .progress-fill {
|
2026-04-14 12:05:30 +00:00
|
|
|
height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); transition: width 0.3s;
|
2026-04-14 10:37:43 +00:00
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.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; }
|
|
|
|
|
.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; }
|
2026-04-14 11:40:04 +00:00
|
|
|
|
2026-04-14 12:05:30 +00:00
|
|
|
/* 批注样式 - 直接附加到内容尾部 */
|
|
|
|
|
.embedded-comments {
|
|
|
|
|
margin-top: 15px;
|
2026-04-14 11:57:24 +00:00
|
|
|
padding-top: 15px;
|
2026-04-14 12:05:30 +00:00
|
|
|
border-top: 2px dashed #e0e7ff;
|
2026-04-14 11:40:04 +00:00
|
|
|
}
|
2026-04-14 12:05:30 +00:00
|
|
|
.embedded-comment {
|
|
|
|
|
background: linear-gradient(135deg, #fafaff, #f0f0ff);
|
|
|
|
|
padding: 12px 15px;
|
2026-04-14 11:57:24 +00:00
|
|
|
border-radius: 6px;
|
2026-04-14 12:05:30 +00:00
|
|
|
margin-top: 10px;
|
|
|
|
|
border-left: 3px solid #667eea;
|
2026-04-14 11:40:04 +00:00
|
|
|
}
|
2026-04-14 12:05:30 +00:00
|
|
|
.embedded-comment .meta {
|
2026-04-14 11:40:04 +00:00
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
2026-04-14 11:57:24 +00:00
|
|
|
margin-bottom: 8px;
|
2026-04-14 11:40:04 +00:00
|
|
|
font-size: 0.85em;
|
|
|
|
|
}
|
2026-04-14 12:05:30 +00:00
|
|
|
.embedded-comment .author {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #667eea;
|
|
|
|
|
}
|
|
|
|
|
.embedded-comment .time {
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
.embedded-comment .scores {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
.embedded-comment .score-badge {
|
2026-04-14 11:57:24 +00:00
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
|
|
color: white;
|
2026-04-14 12:05:30 +00:00
|
|
|
padding: 3px 10px;
|
2026-04-14 11:57:24 +00:00
|
|
|
border-radius: 12px;
|
2026-04-14 12:05:30 +00:00
|
|
|
font-size: 0.8em;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.embedded-comment .score-badge.quality { background: linear-gradient(135deg, #10b981, #059669); }
|
|
|
|
|
.embedded-comment .score-badge.efficiency { background: linear-gradient(135deg, #3b82f6, #2563eb); }
|
|
|
|
|
.embedded-comment .score-badge.creativity { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
|
|
|
|
|
.embedded-comment .score-badge.learning { background: linear-gradient(135deg, #f59e0b, #d97706); }
|
|
|
|
|
.embedded-comment .content {
|
|
|
|
|
color: #333;
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
font-size: 0.95em;
|
|
|
|
|
}
|
|
|
|
|
.embedded-comment .label {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #667eea;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
font-size: 0.85em;
|
2026-04-14 10:07:27 +00:00
|
|
|
}
|
2026-04-14 12:05:30 +00:00
|
|
|
|
2026-04-14 11:57:24 +00:00
|
|
|
.add-comment-btn {
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
background: #f1f5f9;
|
|
|
|
|
color: #667eea;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 0.9em;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
transition: all 0.3s;
|
2026-04-14 11:40:04 +00:00
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.add-comment-btn:hover { background: #e0e7ff; }
|
|
|
|
|
.comment-form {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
padding: 15px;
|
2026-04-14 12:05:30 +00:00
|
|
|
background: linear-gradient(135deg, #fafaff, #f0f0ff);
|
2026-04-14 11:57:24 +00:00
|
|
|
border-radius: 6px;
|
|
|
|
|
border: 2px solid #e0e7ff;
|
|
|
|
|
}
|
2026-04-14 12:05:30 +00:00
|
|
|
.comment-form .dimension-scores {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
|
|
|
gap: 10px;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
.comment-form .dimension {
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
border: 1px solid #e0e7ff;
|
|
|
|
|
}
|
|
|
|
|
.comment-form .dimension label {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 0.85em;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #555;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
}
|
|
|
|
|
.comment-form .dimension select {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 6px;
|
|
|
|
|
border: 2px solid #e0e7ff;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 0.9em;
|
|
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.comment-form textarea {
|
|
|
|
|
width: 100%;
|
2026-04-14 11:40:04 +00:00
|
|
|
padding: 10px;
|
2026-04-14 11:57:24 +00:00
|
|
|
border: 2px solid #e0e7ff;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 0.95em;
|
|
|
|
|
resize: vertical;
|
|
|
|
|
min-height: 80px;
|
|
|
|
|
margin-bottom: 10px;
|
2026-04-14 11:40:04 +00:00
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
.comment-form textarea:focus { outline: none; border-color: #667eea; }
|
|
|
|
|
.comment-form .btn-group { display: flex; gap: 10px; }
|
|
|
|
|
.comment-form .btn {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
|
|
color: white;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 0.95em;
|
|
|
|
|
font-weight: 600;
|
2026-04-14 10:07:27 +00:00
|
|
|
}
|
2026-04-14 12:05:30 +00:00
|
|
|
.comment-form .btn-cancel { background: #f1f5f9; color: #666; }
|
2026-04-14 11:57:24 +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; }
|
|
|
|
|
.empty-state { text-align: center; padding: 40px; color: #666; }
|
|
|
|
|
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 30px; }
|
2026-04-14 11:40:04 +00:00
|
|
|
|
2026-04-14 10:07:27 +00:00
|
|
|
@media (max-width: 768px) {
|
2026-04-14 11:57:24 +00:00
|
|
|
body { padding: 10px; }
|
|
|
|
|
header h1 { font-size: 1.8em; }
|
|
|
|
|
.stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
|
|
|
|
.stat-card { padding: 10px; }
|
|
|
|
|
.stat-card h3 { font-size: 1.4em; }
|
|
|
|
|
.tabs { gap: 8px; }
|
|
|
|
|
.tab-btn { padding: 10px 16px; font-size: 0.9em; flex: 1; text-align: center; }
|
|
|
|
|
.section-box { padding: 15px; }
|
|
|
|
|
.grid-2 { grid-template-columns: 1fr; }
|
2026-04-14 12:05:30 +00:00
|
|
|
.comment-form .dimension-scores { grid-template-columns: repeat(2, 1fr); }
|
2026-04-14 11:17:29 +00:00
|
|
|
}
|
|
|
|
|
@media (max-width: 400px) {
|
2026-04-14 11:57:24 +00:00
|
|
|
.stats { grid-template-columns: repeat(2, 1fr); }
|
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>
|
2026-04-14 11:40:04 +00:00
|
|
|
<p>记录每天的进步与成长</p>
|
2026-04-14 10:07:27 +00:00
|
|
|
</header>
|
2026-04-14 11:57:24 +00:00
|
|
|
<div id="app"><div class="loading">加载中...</div></div>
|
2026-04-14 10:07:27 +00:00
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
const API_BASE = '/api';
|
2026-04-14 10:37:43 +00:00
|
|
|
let state = {
|
2026-04-14 11:40:04 +00:00
|
|
|
currentTab: 'tasks',
|
|
|
|
|
selectedDate: new Date().toISOString().split('T')[0],
|
|
|
|
|
selectedTask: null,
|
2026-04-14 10:37:43 +00:00
|
|
|
allTasks: [],
|
2026-04-14 11:40:04 +00:00
|
|
|
allEntries: [],
|
2026-04-14 10:37:43 +00:00
|
|
|
allExperiences: [],
|
2026-04-14 11:40:04 +00:00
|
|
|
taskStats: {},
|
2026-04-14 11:57:24 +00:00
|
|
|
showCommentForm: null,
|
|
|
|
|
commentContent: '',
|
2026-04-14 12:05:30 +00:00
|
|
|
scores: { quality: '', efficiency: '', creativity: '', learning: '' }
|
2026-04-14 10:37:43 +00:00
|
|
|
};
|
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 11:40:04 +00:00
|
|
|
const [taskStatsRes, tasksRes, diaryStatsRes, entriesRes, expStatsRes, experiencesRes] = await Promise.all([
|
|
|
|
|
fetch(`${API_BASE}/tasks/stats/`),
|
2026-04-14 11:35:42 +00:00
|
|
|
fetch(`${API_BASE}/tasks/`),
|
2026-04-14 11:40:04 +00:00
|
|
|
fetch(`${API_BASE}/entries/stats/`),
|
|
|
|
|
fetch(`${API_BASE}/entries/`),
|
|
|
|
|
fetch(`${API_BASE}/experiences/stats/`),
|
|
|
|
|
fetch(`${API_BASE}/experiences/`)
|
2026-04-14 10:07:27 +00:00
|
|
|
]);
|
2026-04-14 11:40:04 +00:00
|
|
|
state.taskStats = await taskStatsRes.json();
|
2026-04-14 10:37:43 +00:00
|
|
|
state.allTasks = await tasksRes.json();
|
2026-04-14 11:40:04 +00:00
|
|
|
state.diaryStats = await diaryStatsRes.json();
|
|
|
|
|
state.allEntries = await entriesRes.json();
|
|
|
|
|
state.expStats = await expStatsRes.json();
|
2026-04-14 10:37:43 +00:00
|
|
|
state.allExperiences = await experiencesRes.json();
|
|
|
|
|
render();
|
2026-04-14 10:07:27 +00:00
|
|
|
} catch (error) {
|
2026-04-14 11:57:24 +00:00
|
|
|
document.getElementById('app').innerHTML = `<div class="error">加载失败：${error.message}</div>`;
|
2026-04-14 10:07:27 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 11:40:04 +00:00
|
|
|
function getEntryByDate(date) {
|
|
|
|
|
return state.allEntries.find(entry => entry.date === date);
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 11:57:24 +00:00
|
|
|
async function submitComment(contentType, objectId) {
|
2026-04-14 12:05:30 +00:00
|
|
|
const hasScore = Object.values(state.scores).some(s => s !== '');
|
|
|
|
|
if (!state.commentContent.trim() && !hasScore) {
|
2026-04-14 11:57:24 +00:00
|
|
|
alert('请填写批注内容或选择评分');
|
|
|
|
|
return;
|
|
|
|
|
}
|
2026-04-14 11:40:04 +00:00
|
|
|
|
2026-04-14 11:57:24 +00:00
|
|
|
try {
|
|
|
|
|
const payload = {
|
|
|
|
|
content_type: contentType,
|
|
|
|
|
object_id: objectId,
|
2026-04-14 12:05:30 +00:00
|
|
|
created_by: '北极星',
|
|
|
|
|
content: state.commentContent.trim() || '（无文字批注）'
|
2026-04-14 11:57:24 +00:00
|
|
|
};
|
2026-04-14 12:05:30 +00:00
|
|
|
|
|
|
|
|
// 如果有维度评分，计算平均分作为总评分
|
|
|
|
|
const scoreValues = Object.values(state.scores).filter(s => s !== '').map(Number);
|
|
|
|
|
if (scoreValues.length > 0) {
|
|
|
|
|
payload.score = Math.round(scoreValues.reduce((a, b) => a + b, 0) / scoreValues.length);
|
|
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
|
2026-04-14 11:57:24 +00:00
|
|
|
await fetch(`${API_BASE}/comments/`, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
|
|
body: JSON.stringify(payload)
|
|
|
|
|
});
|
2026-04-14 11:40:04 +00:00
|
|
|
|
2026-04-14 11:57:24 +00:00
|
|
|
state.showCommentForm = null;
|
|
|
|
|
state.commentContent = '';
|
2026-04-14 12:05:30 +00:00
|
|
|
state.scores = { quality: '', efficiency: '', creativity: '', learning: '' };
|
2026-04-14 11:57:24 +00:00
|
|
|
loadData();
|
|
|
|
|
} catch (error) {
|
|
|
|
|
alert('保存失败：' + error.message);
|
2026-04-14 11:40:04 +00:00
|
|
|
}
|
2026-04-14 11:57:24 +00:00
|
|
|
}
|
2026-04-14 11:40:04 +00:00
|
|
|
|
2026-04-14 12:05:30 +00:00
|
|
|
function renderEmbeddedComments(contentType, objectId, comments) {
|
2026-04-14 11:57:24 +00:00
|
|
|
if (!comments || comments.length === 0) return '';
|
|
|
|
|
|
|
|
|
|
return `
|
2026-04-14 12:05:30 +00:00
|
|
|
<div class="embedded-comments">
|
|
|
|
|
<div class="label">📝 批注与反馈 (${comments.length})</div>
|
|
|
|
|
${comments.map(c => {
|
|
|
|
|
const scoreBadges = [];
|
|
|
|
|
if (c.quality) scoreBadges.push(`<span class="score-badge quality">质量 ${c.quality}</span>`);
|
|
|
|
|
if (c.efficiency) scoreBadges.push(`<span class="score-badge efficiency">效率 ${c.efficiency}</span>`);
|
|
|
|
|
if (c.creativity) scoreBadges.push(`<span class="score-badge creativity">创新 ${c.creativity}</span>`);
|
|
|
|
|
if (c.learning) scoreBadges.push(`<span class="score-badge learning">学习 ${c.learning}</span>`);
|
|
|
|
|
if (c.score && !scoreBadges.length) scoreBadges.push(`<span class="score-badge">综合 ${c.score}</span>`);
|
|
|
|
|
|
|
|
|
|
return `
|
|
|
|
|
<div class="embedded-comment">
|
|
|
|
|
<div class="meta">
|
|
|
|
|
<span class="author">${c.created_by}</span>
|
2026-04-14 11:57:24 +00:00
|
|
|
<span class="time">${c.created_at.split('T')[0]}</span>
|
|
|
|
|
</div>
|
2026-04-14 12:05:30 +00:00
|
|
|
${scoreBadges.length > 0 ? `<div class="scores">${scoreBadges.join('')}</div>` : ''}
|
|
|
|
|
${c.content && c.content !== '（无文字批注）' ? `<div class="content">${c.content}</div>` : ''}
|
2026-04-14 11:57:24 +00:00
|
|
|
</div>
|
2026-04-14 12:05:30 +00:00
|
|
|
`;
|
|
|
|
|
}).join('')}
|
2026-04-14 11:57:24 +00:00
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function renderCommentForm(contentType, objectId) {
|
|
|
|
|
return `
|
|
|
|
|
<div class="comment-form">
|
2026-04-14 12:05:30 +00:00
|
|
|
<div class="dimension-scores">
|
|
|
|
|
<div class="dimension">
|
|
|
|
|
<label>📐 完成质量</label>
|
|
|
|
|
<select onchange="state.scores.quality = this.value">
|
|
|
|
|
<option value="">-</option>
|
|
|
|
|
${[10,9,8,7,6,5,4,3,2,1].map(n => `<option value="${n}" ${state.scores.quality === String(n) ? 'selected' : ''}>${n}</option>`).join('')}
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dimension">
|
|
|
|
|
<label>⚡ 效率</label>
|
|
|
|
|
<select onchange="state.scores.efficiency = this.value">
|
|
|
|
|
<option value="">-</option>
|
|
|
|
|
${[10,9,8,7,6,5,4,3,2,1].map(n => `<option value="${n}" ${state.scores.efficiency === String(n) ? 'selected' : ''}>${n}</option>`).join('')}
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dimension">
|
|
|
|
|
<label>💡 创新性</label>
|
|
|
|
|
<select onchange="state.scores.creativity = this.value">
|
|
|
|
|
<option value="">-</option>
|
|
|
|
|
${[10,9,8,7,6,5,4,3,2,1].map(n => `<option value="${n}" ${state.scores.creativity === String(n) ? 'selected' : ''}>${n}</option>`).join('')}
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dimension">
|
|
|
|
|
<label>📚 学习价值</label>
|
|
|
|
|
<select onchange="state.scores.learning = this.value">
|
|
|
|
|
<option value="">-</option>
|
|
|
|
|
${[10,9,8,7,6,5,4,3,2,1].map(n => `<option value="${n}" ${state.scores.learning === String(n) ? 'selected' : ''}>${n}</option>`).join('')}
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2026-04-14 11:57:24 +00:00
|
|
|
</div>
|
|
|
|
|
<textarea placeholder="写下你的批注、反馈或指示..." oninput="state.commentContent = this.value">${state.commentContent}</textarea>
|
|
|
|
|
<div class="btn-group">
|
|
|
|
|
<button class="btn" onclick="submitComment('${contentType}', ${objectId})">💾 保存</button>
|
2026-04-14 12:05:30 +00:00
|
|
|
<button class="btn btn-cancel" onclick="state.showCommentForm = null; state.commentContent = ''; state.scores = {quality:'',efficiency:'',creativity:'',learning:''}; render()">取消</button>
|
2026-04-14 11:57:24 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
2026-04-14 11:35:42 +00:00
|
|
|
}
|
2026-04-14 10:37:43 +00:00
|
|
|
|
2026-04-14 11:40:04 +00:00
|
|
|
function renderTasksView() {
|
|
|
|
|
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>
|
2026-04-14 11:57:24 +00:00
|
|
|
${state.allTasks.length === 0 ? '<div class="empty-state">暂无任务</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>
|
2026-04-14 11:40:04 +00:00
|
|
|
</div>
|
2026-04-14 11:57:24 +00:00
|
|
|
<div class="priority">优先级：${task.priority_display} | 创建：${task.created_at.split('T')[0]}</div>
|
|
|
|
|
${task.description ? `<div class="description" style="color:#666;margin:10px0;">${task.description}</div>` : ''}
|
2026-04-14 12:05:30 +00:00
|
|
|
<div class="progress-bar"><div class="progress-fill" style="width: ${task.progress_percent}%"></div></div>
|
2026-04-14 11:57:24 +00:00
|
|
|
<div class="progress-text">进展：${task.progress_percent}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
`).join('')}
|
2026-04-14 11:40:04 +00:00
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 11:57:24 +00:00
|
|
|
const task = state.selectedTask;
|
2026-04-14 10:55:45 +00:00
|
|
|
return `
|
2026-04-14 11:40:04 +00:00
|
|
|
<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>
|
2026-04-14 10:55:45 +00:00
|
|
|
<div class="section-box">
|
2026-04-14 11:40:04 +00:00
|
|
|
<h2>📋 任务详情</h2>
|
2026-04-14 11:57:24 +00:00
|
|
|
<button class="tab-btn" onclick="state.selectedTask = null; render();" style="margin-bottom:20px;">← 返回列表</button>
|
|
|
|
|
<div class="task-item status-${task.status}">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<span class="title">${task.title}</span>
|
|
|
|
|
<span class="status">${task.status_display}</span>
|
2026-04-14 10:37:43 +00:00
|
|
|
</div>
|
2026-04-14 11:57:24 +00:00
|
|
|
<div class="priority">优先级：${task.priority_display} | 负责人：${task.assigned_to || '码神'}</div>
|
|
|
|
|
${task.description ? `<div class="description" style="margin:15px0;color:#666;white-space:pre-wrap;">${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>
|
2026-04-14 10:37:43 +00:00
|
|
|
</div>
|
2026-04-14 12:05:30 +00:00
|
|
|
${renderEmbeddedComments('task', task.id, task.comments || [])}
|
2026-04-14 11:57:24 +00:00
|
|
|
${state.showCommentForm === `task-${task.id}` ? renderCommentForm('task', task.id) : `
|
2026-04-14 12:05:30 +00:00
|
|
|
<button class="add-comment-btn" onclick="state.showCommentForm = 'task-${task.id}'; render()">📝 添加批注 / 评分</button>
|
2026-04-14 11:57:24 +00:00
|
|
|
`}
|
2026-04-14 10:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 11:40:04 +00:00
|
|
|
function renderDiaryView() {
|
|
|
|
|
const entry = getEntryByDate(state.selectedDate);
|
2026-04-14 10:37:43 +00:00
|
|
|
return `
|
2026-04-14 11:40:04 +00:00
|
|
|
<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>
|
2026-04-14 10:37:43 +00:00
|
|
|
<div class="section-box">
|
2026-04-14 11:57:24 +00:00
|
|
|
<h2>📝 ${state.selectedDate} 的日记</h2>
|
|
|
|
|
${!entry ? '<div class="empty-state">📅 这一天没有日记</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.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>` : ''}
|
2026-04-14 10:37:43 +00:00
|
|
|
</div>
|
2026-04-14 12:05:30 +00:00
|
|
|
${renderEmbeddedComments('diary', entry.id, entry.comments || [])}
|
2026-04-14 11:57:24 +00:00
|
|
|
${state.showCommentForm === `diary-${entry.id}` ? renderCommentForm('diary', entry.id) : `
|
2026-04-14 12:05:30 +00:00
|
|
|
<button class="add-comment-btn" onclick="state.showCommentForm = 'diary-${entry.id}'; render()">📝 添加批注 / 评分</button>
|
2026-04-14 11:57:24 +00:00
|
|
|
`}
|
|
|
|
|
`}
|
2026-04-14 10:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 11:40:04 +00:00
|
|
|
function renderExperiencesView() {
|
2026-04-14 10:37:43 +00:00
|
|
|
return `
|
2026-04-14 11:40:04 +00:00
|
|
|
<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>
|
2026-04-14 10:37:43 +00:00
|
|
|
<div class="section-box">
|
2026-04-14 11:40:04 +00:00
|
|
|
<h2>💡 经验总结</h2>
|
2026-04-14 11:57:24 +00:00
|
|
|
${state.allExperiences.length === 0 ? '<div class="empty-state">暂无经验总结</div>' : state.allExperiences.map(exp => `
|
2026-04-14 11:40:04 +00:00
|
|
|
<div class="experience-item">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<span class="title">${exp.title}</span>
|
2026-04-14 11:57:24 +00:00
|
|
|
<span class="category">${exp.category_display}</span>
|
2026-04-14 11:40:04 +00:00
|
|
|
</div>
|
2026-04-14 11:57:24 +00:00
|
|
|
<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>` : ''}
|
2026-04-14 12:05:30 +00:00
|
|
|
${renderEmbeddedComments('experience', exp.id, exp.comments || [])}
|
2026-04-14 11:57:24 +00:00
|
|
|
${state.showCommentForm === `experience-${exp.id}` ? renderCommentForm('experience', exp.id) : `
|
2026-04-14 12:05:30 +00:00
|
|
|
<button class="add-comment-btn" onclick="state.showCommentForm = 'experience-${exp.id}'; render()">📝 添加批注 / 评分</button>
|
2026-04-14 11:57:24 +00:00
|
|
|
`}
|
2026-04-14 10:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
`).join('')}
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 11:40:04 +00:00
|
|
|
function render() {
|
|
|
|
|
const app = document.getElementById('app');
|
|
|
|
|
let content = '';
|
2026-04-14 11:57:24 +00:00
|
|
|
if (state.currentTab === 'tasks') content = renderTasksView();
|
|
|
|
|
else if (state.currentTab === 'diary') content = renderDiaryView();
|
|
|
|
|
else content = renderExperiencesView();
|
2026-04-14 11:40:04 +00:00
|
|
|
|
|
|
|
|
app.innerHTML = `
|
|
|
|
|
<div class="stats">
|
2026-04-14 11:57:24 +00:00
|
|
|
<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>
|
2026-04-14 10:16:14 +00:00
|
|
|
</div>
|
2026-04-14 11:40:04 +00:00
|
|
|
${content}
|
2026-04-14 10:37:43 +00:00
|
|
|
`;
|
|
|
|
|
}
|
2026-04-14 10:07:27 +00:00
|
|
|
|
2026-04-14 11:57:24 +00:00
|
|
|
function switchTab(tab) { state.currentTab = tab; state.selectedTask = null; render(); }
|
|
|
|
|
function selectTask(taskId) { state.selectedTask = state.allTasks.find(t => t.id === taskId); 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>
|
