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

feat: 多维度评分 + 批注嵌入内容尾部

Browse Source 
评分维度:
- 📐 完成质量
- ⚡ 效率
- 💡 创新性
- 📚 学习价值

显示方式:
- 批注直接嵌入内容尾部（虚线分隔）
- 每个维度用不同颜色徽章显示
- 综合评分自动计算（维度平均分）
This commit is contained in:
maoshen
2026-04-14 12:05:30 +00:00
parent c1307ab591
commit 7d968bbfe8
1 changed files with 144 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
frontend/index.html
View File

@@ -31,12 +31,7 @@
} }
.stat-card h3 { color: #667eea; font-size: 1.8em; margin-bottom: 5px; } .stat-card h3 { color: #667eea; font-size: 1.8em; margin-bottom: 5px; }
.stat-card p { color: #666; font-size: 0.9em; } .stat-card p { color: #666; font-size: 0.9em; }
.tabs { .tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab-btn { .tab-btn {
padding: 12px 24px; padding: 12px 24px;
background: white; background: white;
@@ -97,16 +92,10 @@
.experience-item .category { background: #f59e0b; } .experience-item .category { background: #f59e0b; }
.task-item .priority { font-size: 0.8em; color: #666; margin-bottom: 8px; } .task-item .priority { font-size: 0.8em; color: #666; margin-bottom: 8px; }
.task-item .progress-bar { .task-item .progress-bar {
height: 8px; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin: 10px 0;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
margin: 10px 0;
} }
.task-item .progress-fill { .task-item .progress-fill {
height: 100%; height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); transition: width 0.3s;
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 .progress-text { font-size: 0.85em; color: #666; text-align: right; }
.diary-item .date { color: #667eea; font-weight: bold; margin-bottom: 10px; } .diary-item .date { color: #667eea; font-weight: bold; margin-bottom: 10px; }
@@ -119,46 +108,64 @@
.experience-item .lesson { padding: 10px; background: #fef3c7; border-radius: 5px; } .experience-item .lesson { padding: 10px; background: #fef3c7; border-radius: 5px; }
.experience-item .lesson-title { font-weight: bold; color: #92400e; margin-bottom: 5px; } .experience-item .lesson-title { font-weight: bold; color: #92400e; margin-bottom: 5px; }
/* 批注和评分样式 */ /* 批注样式 - 直接附加到内容尾部 */
.comments-section { .embedded-comments {
margin-top: 20px; margin-top: 15px;
padding-top: 15px; padding-top: 15px;
border-top: 2px solid #e0e7ff; border-top: 2px dashed #e0e7ff;
} }
.comments-section h4 { .embedded-comment {
color: #667eea; background: linear-gradient(135deg, #fafaff, #f0f0ff);
margin-bottom: 15px; padding: 12px 15px;
font-size: 1em;
display: flex;
align-items: center;
gap: 8px;
}
.comment-item {
background: white;
padding: 12px;
border-radius: 6px; border-radius: 6px;
margin-bottom: 10px; margin-top: 10px;
border: 1px solid #e0e7ff; border-left: 3px solid #667eea;
} }
.comment-item .meta { .embedded-comment .meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 0.85em; font-size: 0.85em;
color: #666;
} }
.comment-item .author { font-weight: 600; color: #667eea; } .embedded-comment .author {
.comment-item .time { color: #999; } font-weight: 600;
.comment-item .score { color: #667eea;
}
.embedded-comment .time {
color: #999;
}
.embedded-comment .scores {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.embedded-comment .score-badge {
background: linear-gradient(135deg, #667eea, #764ba2); background: linear-gradient(135deg, #667eea, #764ba2);
color: white; color: white;
padding: 2px 10px; padding: 3px 10px;
border-radius: 12px; border-radius: 12px;
font-weight: bold; font-size: 0.8em;
font-size: 0.9em; font-weight: 600;
} }
.comment-item .content { color: #333; line-height: 1.5; white-space: pre-wrap; } .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;
}
.add-comment-btn { .add-comment-btn {
padding: 8px 16px; padding: 8px 16px;
background: #f1f5f9; background: #f1f5f9;
@@ -175,10 +182,36 @@
.comment-form { .comment-form {
margin-top: 15px; margin-top: 15px;
padding: 15px; padding: 15px;
background: #f8f9fa; background: linear-gradient(135deg, #fafaff, #f0f0ff);
border-radius: 6px; border-radius: 6px;
border: 2px solid #e0e7ff; border: 2px solid #e0e7ff;
} }
.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;
}
.comment-form textarea { .comment-form textarea {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
@@ -191,19 +224,6 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.comment-form textarea:focus { outline: none; border-color: #667eea; } .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-group { display: flex; gap: 10px; }
.comment-form .btn { .comment-form .btn {
padding: 10px 20px; padding: 10px 20px;
@@ -215,10 +235,7 @@
font-size: 0.95em; font-size: 0.95em;
font-weight: 600; font-weight: 600;
} }
.comment-form .btn-cancel { .comment-form .btn-cancel { background: #f1f5f9; color: #666; }
background: #f1f5f9;
color: #666;
}
.loading { text-align: center; padding: 40px; color: white; font-size: 1.2em; } .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; } .error { background: #fee; color: #c00; padding: 20px; border-radius: 10px; margin-bottom: 20px; }
.empty-state { text-align: center; padding: 40px; color: #666; } .empty-state { text-align: center; padding: 40px; color: #666; }
@@ -234,6 +251,7 @@
.tab-btn { padding: 10px 16px; font-size: 0.9em; flex: 1; text-align: center; } .tab-btn { padding: 10px 16px; font-size: 0.9em; flex: 1; text-align: center; }
.section-box { padding: 15px; } .section-box { padding: 15px; }
.grid-2 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; }
.comment-form .dimension-scores { grid-template-columns: repeat(2, 1fr); }
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.stats { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); }
@@ -260,7 +278,7 @@
taskStats: {}, taskStats: {},
showCommentForm: null, showCommentForm: null,
commentContent: '', commentContent: '',
commentScore: '' scores: { quality: '', efficiency: '', creativity: '', learning: '' }
}; };
async function loadData() { async function loadData() {
@@ -290,7 +308,8 @@
} }
async function submitComment(contentType, objectId) { async function submitComment(contentType, objectId) {
if (!state.commentContent.trim() && !state.commentScore) { const hasScore = Object.values(state.scores).some(s => s !== '');
if (!state.commentContent.trim() && !hasScore) {
alert('请填写批注内容或选择评分'); alert('请填写批注内容或选择评分');
return; return;
} }
@@ -299,10 +318,15 @@
const payload = { const payload = {
content_type: contentType, content_type: contentType,
object_id: objectId, object_id: objectId,
created_by: '北极星' created_by: '北极星',
content: state.commentContent.trim() || '（无文字批注）'
}; };
if (state.commentContent.trim()) payload.content = state.commentContent;
if (state.commentScore) payload.score = parseInt(state.commentScore); // 如果有维度评分，计算平均分作为总评分
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);
}
await fetch(`${API_BASE}/comments/`, { await fetch(`${API_BASE}/comments/`, {
method: 'POST', method: 'POST',
@@ -312,31 +336,38 @@
state.showCommentForm = null; state.showCommentForm = null;
state.commentContent = ''; state.commentContent = '';
state.commentScore = ''; state.scores = { quality: '', efficiency: '', creativity: '', learning: '' };
loadData(); loadData();
} catch (error) { } catch (error) {
alert('保存失败：' + error.message); alert('保存失败：' + error.message);
} }
} }
function renderComments(contentType, objectId, comments) { function renderEmbeddedComments(contentType, objectId, comments) {
if (!comments || comments.length === 0) return ''; if (!comments || comments.length === 0) return '';
return ` return `
<div class="comments-section"> <div class="embedded-comments">
<h4>📝 批注与评分 (${comments.length})</h4> <div class="label">📝 批注与反馈 (${comments.length})</div>
${comments.map(c => ` ${comments.map(c => {
<div class="comment-item"> 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"> <div class="meta">
<span class="author">${c.created_by}</span> <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> <span class="time">${c.created_at.split('T')[0]}</span>
</div> </div>
${scoreBadges.length > 0 ? `<div class="scores">${scoreBadges.join('')}</div>` : ''}
${c.content && c.content !== '（无文字批注）' ? `<div class="content">${c.content}</div>` : ''}
</div> </div>
${c.content ? `<div class="content">${c.content}</div>` : ''} `;
</div> }).join('')}
`).join('')}
</div> </div>
`; `;
} }
@@ -344,26 +375,40 @@
function renderCommentForm(contentType, objectId) { function renderCommentForm(contentType, objectId) {
return ` return `
<div class="comment-form"> <div class="comment-form">
<div class="score-input"> <div class="dimension-scores">
<label>⭐ 评分：</label> <div class="dimension">
<select onchange="state.commentScore = this.value"> <label>📐 完成质量</label>
<option value="">不评分</option> <select onchange="state.scores.quality = this.value">
<option value="10" ${state.commentScore === '10' ? 'selected' : ''}>10 - 完美</option> <option value="">-</option>
<option value="9" ${state.commentScore === '9' ? 'selected' : ''}>9 - 优秀</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('')}
<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> </select>
</div> </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>
</div>
<textarea placeholder="写下你的批注、反馈或指示..." oninput="state.commentContent = this.value">${state.commentContent}</textarea> <textarea placeholder="写下你的批注、反馈或指示..." oninput="state.commentContent = this.value">${state.commentContent}</textarea>
<div class="btn-group"> <div class="btn-group">
<button class="btn" onclick="submitComment('${contentType}', ${objectId})">💾 保存</button> <button class="btn" onclick="submitComment('${contentType}', ${objectId})">💾 保存</button>
<button class="btn btn-cancel" onclick="state.showCommentForm = null; state.commentContent = ''; state.commentScore = ''; render()">取消</button> <button class="btn btn-cancel" onclick="state.showCommentForm = null; state.commentContent = ''; state.scores = {quality:'',efficiency:'',creativity:'',learning:''}; render()">取消</button>
</div> </div>
</div> </div>
`; `;
@@ -387,16 +432,8 @@
</div> </div>
<div class="priority">优先级：${task.priority_display} | 创建：${task.created_at.split('T')[0]}</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>` : ''} ${task.description ? `<div class="description" style="color:#666;margin:10px0;">${task.description}</div>` : ''}
<div class="progress-bar"> <div class="progress-bar"><div class="progress-fill" style="width: ${task.progress_percent}%"></div></div>
<div class="progress-fill" style="width: ${task.progress_percent}%"></div>
</div>
<div class="progress-text">进展：${task.progress_percent}%</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> </div>
`).join('')} `).join('')}
</div> </div>
@@ -423,9 +460,9 @@
<div class="progress-bar"><div class="progress-fill" style="width: ${task.progress_percent}%"></div></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 class="progress-text">进展：${task.progress_percent}%</div>
</div> </div>
${renderComments('task', task.id, task.comments || [])} ${renderEmbeddedComments('task', task.id, task.comments || [])}
${state.showCommentForm === `task-${task.id}` ? renderCommentForm('task', task.id) : ` ${state.showCommentForm === `task-${task.id}` ? renderCommentForm('task', task.id) : `
<button class="add-comment-btn" onclick="state.showCommentForm = 'task-${task.id}'; render()">📝 批注 / 评分</button> <button class="add-comment-btn" onclick="state.showCommentForm = 'task-${task.id}'; render()">📝 添加批注 / 评分</button>
`} `}
</div> </div>
`; `;
@@ -452,9 +489,9 @@
${entry.reflections ? `<div class="section"><span class="section-title">💡 想法和反思</span><div class="section-content">${entry.reflections}</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.improvements ? `<div class="section"><span class="section-title">📈 进步点</span><div class="section-content">${entry.improvements}</div></div>` : ''}
</div> </div>
${renderComments('diary', entry.id, entry.comments || [])} ${renderEmbeddedComments('diary', entry.id, entry.comments || [])}
${state.showCommentForm === `diary-${entry.id}` ? renderCommentForm('diary', entry.id) : ` ${state.showCommentForm === `diary-${entry.id}` ? renderCommentForm('diary', entry.id) : `
<button class="add-comment-btn" onclick="state.showCommentForm = 'diary-${entry.id}'; render()">📝 批注 / 评分</button> <button class="add-comment-btn" onclick="state.showCommentForm = 'diary-${entry.id}'; render()">📝 添加批注 / 评分</button>
`} `}
`} `}
</div> </div>
@@ -479,9 +516,9 @@
<div class="problem"><div class="problem-title">🐛 问题</div><div class="section-content">${exp.problem}</div></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> <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>` : ''} ${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 || [])} ${renderEmbeddedComments('experience', exp.id, exp.comments || [])}
${state.showCommentForm === `experience-${exp.id}` ? renderCommentForm('experience', exp.id) : ` ${state.showCommentForm === `experience-${exp.id}` ? renderCommentForm('experience', exp.id) : `
<button class="add-comment-btn" onclick="state.showCommentForm = 'experience-${exp.id}'; render()">📝 批注 / 评分</button> <button class="add-comment-btn" onclick="state.showCommentForm = 'experience-${exp.id}'; render()">📝 添加批注 / 评分</button>
`} `}
</div> </div>
`).join('')} `).join('')}