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 `
-                <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>` : ''}
+                <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>
                                     <span class="time">${c.created_at.split('T')[0]}</span>
                                 </div>
+                                ${scoreBadges.length > 0 ? `<div class="scores">${scoreBadges.join('')}</div>` : ''}
+                                ${c.content && c.content !== '（无文字批注）' ? `<div class="content">${c.content}</div>` : ''}
                             </div>
-                            ${c.content ? `<div class="content">${c.content}</div>` : ''}
-                        </div>
-                    `).join('')}
+                        `;
+                    }).join('')}
                 </div>
             `;
         }
@@ -344,26 +375,40 @@
         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 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>
                     </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>
+                        <button class="btn btn-cancel" onclick="state.showCommentForm = null; state.commentContent = ''; state.scores = {quality:'',efficiency:'',creativity:'',learning:''}; render()">取消</button>
                     </div>
                 </div>
             `;
@@ -387,16 +432,8 @@
                                 </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-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>
@@ -423,9 +460,9 @@
                         <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 || [])}
+                    ${renderEmbeddedComments('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>
+                        <button class="add-comment-btn" onclick="state.showCommentForm = 'task-${task.id}'; render()">📝 添加批注 / 评分</button>
                     `}
                 </div>
             `;
@@ -452,9 +489,9 @@
                             ${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 || [])}
+                        ${renderEmbeddedComments('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>
+                            <button class="add-comment-btn" onclick="state.showCommentForm = 'diary-${entry.id}'; render()">📝 添加批注 / 评分</button>
                         `}
                     `}
                 </div>
@@ -479,9 +516,9 @@
                             <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 || [])}
+                            ${renderEmbeddedComments('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>
+                                <button class="add-comment-btn" onclick="state.showCommentForm = 'experience-${exp.id}'; render()">📝 添加批注 / 评分</button>
                             `}
                         </div>
                     `).join('')}