519 lines
24 KiB
HTML
519 lines
24 KiB
HTML
<!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;
|
|
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; }
|
|
.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;
|
|
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;
|
|
}
|
|
.task-item, .diary-item, .experience-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 .header, .diary-item .header, .experience-item .header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
.task-item .title, .diary-item .title, .experience-item .title {
|
|
font-weight: bold;
|
|
color: #333;
|
|
font-size: 1.1em;
|
|
}
|
|
.task-item .status, .experience-item .category {
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.85em;
|
|
color: white;
|
|
}
|
|
.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; }
|
|
.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; }
|
|
.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; }
|
|
|
|
/* 批注和评分样式 */
|
|
.comments-section {
|
|
margin-top: 20px;
|
|
padding-top: 15px;
|
|
border-top: 2px solid #e0e7ff;
|
|
}
|
|
.comments-section h4 {
|
|
color: #667eea;
|
|
margin-bottom: 15px;
|
|
font-size: 1em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.comment-item {
|
|
background: white;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid #e0e7ff;
|
|
}
|
|
.comment-item .meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
font-size: 0.85em;
|
|
color: #666;
|
|
}
|
|
.comment-item .author { font-weight: 600; color: #667eea; }
|
|
.comment-item .time { color: #999; }
|
|
.comment-item .score {
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
font-weight: bold;
|
|
font-size: 0.9em;
|
|
}
|
|
.comment-item .content { color: #333; line-height: 1.5; white-space: pre-wrap; }
|
|
.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;
|
|
}
|
|
.add-comment-btn:hover { background: #e0e7ff; }
|
|
.comment-form {
|
|
margin-top: 15px;
|
|
padding: 15px;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
border: 2px solid #e0e7ff;
|
|
}
|
|
.comment-form textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 2px solid #e0e7ff;
|
|
border-radius: 6px;
|
|
font-family: inherit;
|
|
font-size: 0.95em;
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.comment-form textarea:focus { outline: none; border-color: #667eea; }
|
|
.comment-form .score-input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.comment-form .score-input label { font-weight: 600; color: #555; }
|
|
.comment-form .score-input select {
|
|
padding: 8px 12px;
|
|
border: 2px solid #e0e7ff;
|
|
border-radius: 6px;
|
|
font-size: 0.95em;
|
|
}
|
|
.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;
|
|
}
|
|
.comment-form .btn-cancel {
|
|
background: #f1f5f9;
|
|
color: #666;
|
|
}
|
|
.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; }
|
|
.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; }
|
|
}
|
|
@media (max-width: 400px) {
|
|
.stats { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
</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: {},
|
|
showCommentForm: null,
|
|
commentContent: '',
|
|
commentScore: ''
|
|
};
|
|
|
|
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 getEntryByDate(date) {
|
|
return state.allEntries.find(entry => entry.date === date);
|
|
}
|
|
|
|
async function submitComment(contentType, objectId) {
|
|
if (!state.commentContent.trim() && !state.commentScore) {
|
|
alert('请填写批注内容或选择评分');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const payload = {
|
|
content_type: contentType,
|
|
object_id: objectId,
|
|
created_by: '北极星'
|
|
};
|
|
if (state.commentContent.trim()) payload.content = state.commentContent;
|
|
if (state.commentScore) payload.score = parseInt(state.commentScore);
|
|
|
|
await fetch(`${API_BASE}/comments/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
state.showCommentForm = null;
|
|
state.commentContent = '';
|
|
state.commentScore = '';
|
|
loadData();
|
|
} catch (error) {
|
|
alert('保存失败：' + error.message);
|
|
}
|
|
}
|
|
|
|
function renderComments(contentType, objectId, comments) {
|
|
if (!comments || comments.length === 0) return '';
|
|
|
|
return `
|
|
<div class="comments-section">
|
|
<h4>📝 批注与评分 (${comments.length})</h4>
|
|
${comments.map(c => `
|
|
<div class="comment-item">
|
|
<div class="meta">
|
|
<span class="author">${c.created_by}</span>
|
|
<div style="display:flex;gap:10px;align-items:center;">
|
|
${c.score ? `<span class="score">⭐ ${c.score}分</span>` : ''}
|
|
<span class="time">${c.created_at.split('T')[0]}</span>
|
|
</div>
|
|
</div>
|
|
${c.content ? `<div class="content">${c.content}</div>` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderCommentForm(contentType, objectId) {
|
|
return `
|
|
<div class="comment-form">
|
|
<div class="score-input">
|
|
<label>⭐ 评分：</label>
|
|
<select onchange="state.commentScore = this.value">
|
|
<option value="">不评分</option>
|
|
<option value="10" ${state.commentScore === '10' ? 'selected' : ''}>10 - 完美</option>
|
|
<option value="9" ${state.commentScore === '9' ? 'selected' : ''}>9 - 优秀</option>
|
|
<option value="8" ${state.commentScore === '8' ? 'selected' : ''}>8 - 很好</option>
|
|
<option value="7" ${state.commentScore === '7' ? 'selected' : ''}>7 - 好</option>
|
|
<option value="6" ${state.commentScore === '6' ? 'selected' : ''}>6 - 不错</option>
|
|
<option value="5" ${state.commentScore === '5' ? 'selected' : ''}>5 - 一般</option>
|
|
<option value="4" ${state.commentScore === '4' ? 'selected' : ''}>4 - 需改进</option>
|
|
<option value="3" ${state.commentScore === '3' ? 'selected' : ''}>3 - 较差</option>
|
|
<option value="2" ${state.commentScore === '2' ? 'selected' : ''}>2 - 差</option>
|
|
<option value="1" ${state.commentScore === '1' ? 'selected' : ''}>1 - 很差</option>
|
|
</select>
|
|
</div>
|
|
<textarea placeholder="写下你的批注、反馈或指示..." oninput="state.commentContent = this.value">${state.commentContent}</textarea>
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="submitComment('${contentType}', ${objectId})">💾 保存</button>
|
|
<button class="btn btn-cancel" onclick="state.showCommentForm = null; state.commentContent = ''; state.commentScore = ''; render()">取消</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
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>
|
|
${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>
|
|
</div>
|
|
<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>` : ''}
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${task.progress_percent}%"></div>
|
|
</div>
|
|
<div class="progress-text">进展：${task.progress_percent}%</div>
|
|
${task.comments && task.comments.length > 0 ? `
|
|
<div style="margin-top:10px;font-size:0.85em;color:#667eea;">
|
|
📝 ${task.comments.length} 条批注
|
|
${task.comments.filter(c => c.score).length > 0 ? `| ⭐ 评分：${task.comments.filter(c => c.score).map(c => c.score).join(', ')}` : ''}
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const task = state.selectedTask;
|
|
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-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" 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>
|
|
</div>
|
|
${renderComments('task', task.id, task.comments || [])}
|
|
${state.showCommentForm === `task-${task.id}` ? renderCommentForm('task', task.id) : `
|
|
<button class="add-comment-btn" onclick="state.showCommentForm = 'task-${task.id}'; render()">📝 批注 / 评分</button>
|
|
`}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderDiaryView() {
|
|
const entry = getEntryByDate(state.selectedDate);
|
|
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>
|
|
${!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>` : ''}
|
|
</div>
|
|
${renderComments('diary', entry.id, entry.comments || [])}
|
|
${state.showCommentForm === `diary-${entry.id}` ? renderCommentForm('diary', entry.id) : `
|
|
<button class="add-comment-btn" onclick="state.showCommentForm = 'diary-${entry.id}'; render()">📝 批注 / 评分</button>
|
|
`}
|
|
`}
|
|
</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">暂无经验总结</div>' : state.allExperiences.map(exp => `
|
|
<div class="experience-item">
|
|
<div class="header">
|
|
<span class="title">${exp.title}</span>
|
|
<span class="category">${exp.category_display}</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>` : ''}
|
|
${renderComments('experience', exp.id, exp.comments || [])}
|
|
${state.showCommentForm === `experience-${exp.id}` ? renderCommentForm('experience', exp.id) : `
|
|
<button class="add-comment-btn" onclick="state.showCommentForm = 'experience-${exp.id}'; render()">📝 批注 / 评分</button>
|
|
`}
|
|
</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 selectTask(taskId) { state.selectedTask = state.allTasks.find(t => t.id === taskId); render(); }
|
|
|
|
loadData();
|
|
</script>
|
|
</body>
|
|
</html>
|