From 7d968bbfe873fd6258fb472f051d239e9ce91a30 Mon Sep 17 00:00:00 2001 From: maoshen Date: Tue, 14 Apr 2026 12:05:30 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9A=E7=BB=B4=E5=BA=A6=E8=AF=84?= =?UTF-8?q?=E5=88=86=20+=20=E6=89=B9=E6=B3=A8=E5=B5=8C=E5=85=A5=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E5=B0=BE=E9=83=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 评分维度: - 📐 完成质量 - ⚡ 效率 - 💡 创新性 - 📚 学习价值 显示方式: - 批注直接嵌入内容尾部（虚线分隔） - 每个维度用不同颜色徽章显示 - 综合评分自动计算（维度平均分） --- frontend/index.html | 251 +++++++++++++++++++++++++------------------- 1 file changed, 144 insertions(+), 107 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 2d7c3c6..ae48888 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -31,12 +31,7 @@ } .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; - } + .tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .tab-btn { padding: 12px 24px; background: white; @@ -97,16 +92,10 @@ .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; + 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; + 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; } @@ -119,46 +108,64 @@ .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; + /* 批注样式 - 直接附加到内容尾部 */ + .embedded-comments { + margin-top: 15px; padding-top: 15px; - border-top: 2px solid #e0e7ff; + border-top: 2px dashed #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; + .embedded-comment { + background: linear-gradient(135deg, #fafaff, #f0f0ff); + padding: 12px 15px; border-radius: 6px; - margin-bottom: 10px; - border: 1px solid #e0e7ff; + margin-top: 10px; + border-left: 3px solid #667eea; } - .comment-item .meta { + .embedded-comment .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 { + .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 { background: linear-gradient(135deg, #667eea, #764ba2); color: white; - padding: 2px 10px; + padding: 3px 10px; border-radius: 12px; - font-weight: bold; - font-size: 0.9em; + font-size: 0.8em; + 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 { padding: 8px 16px; background: #f1f5f9; @@ -175,10 +182,36 @@ .comment-form { margin-top: 15px; padding: 15px; - background: #f8f9fa; + background: linear-gradient(135deg, #fafaff, #f0f0ff); border-radius: 6px; 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 { width: 100%; padding: 10px; @@ -191,19 +224,6 @@ 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; @@ -215,10 +235,7 @@ font-size: 0.95em; font-weight: 600; } - .comment-form .btn-cancel { - background: #f1f5f9; - color: #666; - } + .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; } @@ -234,6 +251,7 @@ .tab-btn { padding: 10px 16px; font-size: 0.9em; flex: 1; text-align: center; } .section-box { padding: 15px; } .grid-2 { grid-template-columns: 1fr; } + .comment-form .dimension-scores { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .stats { grid-template-columns: repeat(2, 1fr); } @@ -260,7 +278,7 @@ taskStats: {}, showCommentForm: null, commentContent: '', - commentScore: '' + scores: { quality: '', efficiency: '', creativity: '', learning: '' } }; async function loadData() { @@ -290,7 +308,8 @@ } 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('请填写批注内容或选择评分'); return; } @@ -299,10 +318,15 @@ const payload = { content_type: contentType, 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/`, { method: 'POST', @@ -312,31 +336,38 @@ state.showCommentForm = null; state.commentContent = ''; - state.commentScore = ''; + state.scores = { quality: '', efficiency: '', creativity: '', learning: '' }; loadData(); } catch (error) { alert('保存失败：' + error.message); } } - function renderComments(contentType, objectId, comments) { + function renderEmbeddedComments(contentType, objectId, comments) { if (!comments || comments.length === 0) return ''; return ` -
-

📝 批注与评分 (${comments.length})

- ${comments.map(c => ` -
-
- ${c.created_by} -
- ${c.score ? `⭐ ${c.score}分` : ''} +
+
📝 批注与反馈 (${comments.length})
+ ${comments.map(c => { + const scoreBadges = []; + if (c.quality) scoreBadges.push(`质量 ${c.quality}`); + if (c.efficiency) scoreBadges.push(`效率 ${c.efficiency}`); + if (c.creativity) scoreBadges.push(`创新 ${c.creativity}`); + if (c.learning) scoreBadges.push(`学习 ${c.learning}`); + if (c.score && !scoreBadges.length) scoreBadges.push(`综合 ${c.score}`); + + return ` +
+
+ ${c.created_by} ${c.created_at.split('T')[0]}
+ ${scoreBadges.length > 0 ? `
${scoreBadges.join('')}
` : ''} + ${c.content && c.content !== '（无文字批注）' ? `
${c.content}
` : ''}
- ${c.content ? `
${c.content}
` : ''} -
- `).join('')} + `; + }).join('')}
`; } @@ -344,26 +375,40 @@ function renderCommentForm(contentType, objectId) { return `
-
- - +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
- +
`; @@ -387,16 +432,8 @@
优先级：${task.priority_display} | 创建：${task.created_at.split('T')[0]}
${task.description ? `
${task.description}
` : ''} -
-
-
+
进展：${task.progress_percent}%
- ${task.comments && task.comments.length > 0 ? ` -
- 📝 ${task.comments.length} 条批注 - ${task.comments.filter(c => c.score).length > 0 ? `| ⭐ 评分：${task.comments.filter(c => c.score).map(c => c.score).join(', ')}` : ''} -
- ` : ''}
`).join('')}
@@ -423,9 +460,9 @@
进展：${task.progress_percent}%
- ${renderComments('task', task.id, task.comments || [])} + ${renderEmbeddedComments('task', task.id, task.comments || [])} ${state.showCommentForm === `task-${task.id}` ? renderCommentForm('task', task.id) : ` - + `} `; @@ -452,9 +489,9 @@ ${entry.reflections ? `
💡 想法和反思
${entry.reflections}
` : ''} ${entry.improvements ? `
📈 进步点
${entry.improvements}
` : ''} - ${renderComments('diary', entry.id, entry.comments || [])} + ${renderEmbeddedComments('diary', entry.id, entry.comments || [])} ${state.showCommentForm === `diary-${entry.id}` ? renderCommentForm('diary', entry.id) : ` - + `} `} @@ -479,9 +516,9 @@
🐛 问题
${exp.problem}
✅ 解决方案
${exp.solution}
${exp.lesson_learned ? `
📌 经验教训
${exp.lesson_learned}
` : ''} - ${renderComments('experience', exp.id, exp.comments || [])} + ${renderEmbeddedComments('experience', exp.id, exp.comments || [])} ${state.showCommentForm === `experience-${exp.id}` ? renderCommentForm('experience', exp.id) : ` - + `} `).join('')}