diff --git a/frontend/index.html b/frontend/index.html
index 2b76ecb..b844264 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -17,7 +17,7 @@
             padding: 20px;
         }
         .container {
-            max-width: 1200px;
+            max-width: 1400px;
             margin: 0 auto;
         }
         header {
@@ -26,13 +26,16 @@
             margin-bottom: 30px;
         }
         header h1 {
-            font-size: 2em;
+            font-size: 2.5em;
             margin-bottom: 10px;
         }
+        header p {
+            opacity: 0.9;
+        }
         .stats {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            gap: 15px;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 20px;
             margin-bottom: 30px;
         }
         .stat-card {
@@ -44,12 +47,15 @@
         }
         .stat-card h3 {
             color: #667eea;
-            font-size: 1.6em;
+            font-size: 1.8em;
+            margin-bottom: 5px;
         }
         .stat-card p {
             color: #666;
-            font-size: 0.8em;
+            font-size: 0.9em;
         }
+        
+        /* Tab 切换 */
         .tabs {
             display: flex;
             gap: 10px;
@@ -57,22 +63,31 @@
             flex-wrap: wrap;
         }
         .tab-btn {
-            padding: 10px 20px;
+            padding: 12px 24px;
             background: white;
             border: none;
             border-radius: 8px;
             cursor: pointer;
-            font-size: 0.95em;
+            font-size: 1em;
             font-weight: 500;
             color: #666;
             transition: all 0.3s;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             -webkit-tap-highlight-color: transparent;
+            touch-action: manipulation;
+        }
+        .tab-btn:hover {
+            background: #f8f9fa;
+            transform: translateY(-2px);
+        }
+        .tab-btn:active {
+            transform: scale(0.98);
         }
         .tab-btn.active {
             background: linear-gradient(135deg, #667eea, #764ba2);
             color: white;
         }
+        
         .section-box {
             background: white;
             border-radius: 10px;
@@ -85,184 +100,436 @@
             margin-bottom: 20px;
             padding-bottom: 10px;
             border-bottom: 2px solid #667eea;
-            font-size: 1.4em;
         }
-        .diary-editor {
-            width: 100%;
+        
+        /* 日历组件 */
+        .calendar-wrapper {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
         }
-        .diary-editor textarea {
-            width: 100%;
-            min-height: 200px;
+        .calendar {
+            flex: 0 0 300px;
+            background: #f8f9fa;
             padding: 15px;
-            border: 2px solid #e0e7ff;
             border-radius: 8px;
-            font-size: 1em;
-            font-family: inherit;
-            resize: vertical;
+        }
+        .calendar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             margin-bottom: 15px;
         }
-        .diary-editor textarea:focus {
-            outline: none;
-            border-color: #667eea;
-        }
-        .form-group {
-            margin-bottom: 15px;
-        }
-        .form-group label {
-            display: block;
-            font-weight: 600;
-            color: #555;
-            margin-bottom: 8px;
-            font-size: 0.95em;
-        }
-        .form-group input, .form-group select {
-            width: 100%;
-            padding: 10px;
-            border: 2px solid #e0e7ff;
-            border-radius: 6px;
-            font-size: 0.95em;
-        }
-        .form-group input:focus, .form-group select:focus {
-            outline: none;
-            border-color: #667eea;
-        }
-        .btn {
-            padding: 12px 24px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
+        .calendar-header button {
+            background: #667eea;
             color: white;
             border: none;
-            border-radius: 8px;
+            padding: 8px 12px;
+            border-radius: 5px;
             cursor: pointer;
-            font-size: 1em;
-            font-weight: 600;
-            transition: all 0.3s;
-            -webkit-tap-highlight-color: transparent;
-        }
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-        }
-        .btn:active {
-            transform: scale(0.98);
-        }
-        .btn-secondary {
-            background: #f1f5f9;
-            color: #666;
-        }
-        .task-link-item {
+            min-width: 44px;
+            min-height: 44px;
             display: flex;
             align-items: center;
-            gap: 10px;
-            padding: 10px;
-            background: #f8f9fa;
-            border-radius: 6px;
-            margin-bottom: 8px;
+            justify-content: center;
+            -webkit-tap-highlight-color: transparent;
+            touch-action: manipulation;
         }
-        .task-link-item input[type="checkbox"] {
-            width: 20px;
-            height: 20px;
+        .calendar-header button:hover {
+            background: #5568d3;
         }
-        .task-link-item .task-info {
-            flex: 1;
+        .calendar-header button:active {
+            background: #4857c0;
+            transform: scale(0.95);
         }
-        .task-link-item .task-title {
-            font-weight: 600;
-            color: #333;
+        .calendar-grid {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 2px;
         }
-        .task-link-item .task-status {
-            font-size: 0.8em;
-            padding: 3px 8px;
-            border-radius: 12px;
+        .calendar-day-header {
+            text-align: center;
+            font-size: 0.75em;
+            color: #666;
+            padding: 5px;
+        }
+        .calendar-day {
+            aspect-ratio: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.85em;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.2s;
+            -webkit-tap-highlight-color: transparent;
+            touch-action: manipulation;
+            min-width: 36px;
+            min-height: 36px;
+        }
+        .calendar-day:hover {
+            background: #e0e7ff;
+        }
+        .calendar-day:active {
+            background: #c7d2fe;
+            transform: scale(0.95);
+        }
+        .calendar-day.selected {
             background: #667eea;
             color: white;
         }
-        .diary-item {
-            padding: 20px;
+        .calendar-day.today {
+            border: 2px solid #667eea;
+            font-weight: bold;
+        }
+        .calendar-day.has-data {
+            position: relative;
+        }
+        .calendar-day.has-data::after {
+            content: '';
+            position: absolute;
+            bottom: 2px;
+            width: 6px;
+            height: 6px;
+            background: #10b981;
+            border-radius: 50%;
+        }
+        .calendar-day.empty {
+            cursor: default;
+        }
+        
+        /* 内容区域 */
+        .content-area {
+            flex: 1;
+            min-width: 0;
+        }
+        
+        .task-item, .diary-item {
+            padding: 15px;
             border-left: 4px solid #667eea;
             background: #f8f9fa;
-            margin-bottom: 20px;
-            border-radius: 8px;
+            margin-bottom: 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.2s;
+            -webkit-tap-highlight-color: transparent;
+            touch-action: manipulation;
         }
+        .task-item:hover, .diary-item:hover {
+            transform: translateX(5px);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .task-item:active, .diary-item:active {
+            transform: scale(0.98);
+            background: #eef1f5;
+        }
+        .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.status-cancelled { border-left-color: #ef4444; opacity: 0.6; }
+        
+        .task-item .header, .diary-item .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .task-item .title, .diary-item .title {
+            font-weight: bold;
+            color: #333;
+            font-size: 1.1em;
+        }
+        .task-item .status {
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.85em;
+            color: white;
+        }
+        .status-pending .status { background: #6b7280; }
+        .status-in_progress .status { background: #3b82f6; }
+        .status-blocked .status { background: #f59e0b; }
+        .status-completed .status { background: #10b981; }
+        .status-cancelled .status { background: #ef4444; }
+        
+        .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;
-            font-size: 1.1em;
             margin-bottom: 10px;
         }
         .diary-item .section {
-            margin: 15px 0;
+            margin: 10px 0;
         }
         .diary-item .section-title {
-            font-weight: 600;
+            font-weight: bold;
             color: #555;
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
         }
         .diary-item .section-content {
             color: #666;
-            line-height: 1.6;
+            margin-left: 20px;
             white-space: pre-wrap;
         }
-        .linked-tasks, .linked-experiences {
+        
+        /* 任务详情 */
+        .task-detail {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin-top: 20px;
+        }
+        .task-detail h3 {
+            color: #333;
+            margin-bottom: 15px;
+        }
+        .task-detail .meta {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+        }
+        .task-detail .meta-item {
+            background: white;
+            padding: 8px 15px;
+            border-radius: 5px;
+            font-size: 0.9em;
+        }
+        .task-detail .description {
+            margin-bottom: 15px;
+            white-space: pre-wrap;
+            color: #666;
+        }
+        .task-detail .progress-notes {
+            background: #fffbeb;
+            padding: 15px;
+            border-radius: 5px;
             margin-top: 15px;
-            padding-top: 15px;
-            border-top: 1px solid #e0e7ff;
         }
-        .tag {
-            display: inline-block;
-            padding: 4px 12px;
-            background: #e0e7ff;
-            color: #667eea;
-            border-radius: 12px;
+        .task-detail .progress-notes h4 {
+            color: #92400e;
+            margin-bottom: 10px;
+        }
+        .task-detail .progress-notes .note {
             font-size: 0.85em;
-            margin-right: 8px;
-            margin-bottom: 8px;
+            color: #666;
+            padding: 8px 0;
+            border-bottom: 1px solid #f3e5d5;
         }
+        
         .experience-item {
             padding: 15px;
             border-left: 4px solid #f59e0b;
             background: #fffbeb;
             margin-bottom: 15px;
-            border-radius: 6px;
+            border-radius: 5px;
+        }
+        .experience-item .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
         }
         .experience-item .title {
-            font-weight: 600;
+            font-weight: bold;
             color: #333;
-            margin-bottom: 10px;
+            font-size: 1.1em;
         }
         .experience-item .category {
-            display: inline-block;
             background: #f59e0b;
             color: white;
-            padding: 3px 10px;
-            border-radius: 12px;
-            font-size: 0.8em;
-            margin-bottom: 10px;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.85em;
         }
+        .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;
+        }
+        
         .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: #999;
+            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.6em; }
-            .stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
-            .stat-card { padding: 10px; }
-            .stat-card h3 { font-size: 1.3em; }
-            .tabs { gap: 8px; }
-            .tab-btn { padding: 10px 16px; font-size: 0.9em; flex: 1; text-align: center; }
-            .section-box { padding: 15px; }
+            body {
+                padding: 10px;
+            }
+            header h1 {
+                font-size: 1.8em;
+            }
+            header p {
+                font-size: 0.9em;
+            }
+            .stats {
+                grid-template-columns: repeat(3, 1fr);
+                gap: 10px;
+                margin-bottom: 20px;
+            }
+            .stat-card {
+                padding: 10px;
+            }
+            .stat-card h3 {
+                font-size: 1.4em;
+            }
+            .stat-card p {
+                font-size: 0.75em;
+            }
+            .tabs {
+                gap: 8px;
+                margin-bottom: 15px;
+            }
+            .tab-btn {
+                padding: 10px 16px;
+                font-size: 0.9em;
+                flex: 1;
+                text-align: center;
+            }
+            .section-box {
+                padding: 15px;
+                margin-bottom: 20px;
+            }
+            .section-box h2 {
+                font-size: 1.3em;
+                margin-bottom: 15px;
+            }
+            .calendar-wrapper {
+                flex-direction: column;
+                gap: 15px;
+            }
+            .calendar {
+                flex: none;
+                width: 100%;
+                padding: 10px;
+            }
+            .calendar-header span {
+                font-size: 0.9em;
+            }
+            .calendar-header button {
+                padding: 3px 8px;
+                font-size: 0.9em;
+            }
+            .calendar-day {
+                font-size: 0.75em;
+                aspect-ratio: 1;
+            }
+            .calendar-day-header {
+                font-size: 0.65em;
+            }
+            .content-area {
+                width: 100%;
+            }
+            .task-item, .diary-item {
+                padding: 12px;
+                margin-bottom: 12px;
+            }
+            .task-item .title, .diary-item .title {
+                font-size: 1em;
+            }
+            .task-item .status {
+                font-size: 0.75em;
+                padding: 3px 10px;
+            }
+            .task-item .priority {
+                font-size: 0.75em;
+            }
+            .task-detail .meta {
+                flex-direction: column;
+                gap: 8px;
+            }
+            .task-detail .meta-item {
+                font-size: 0.85em;
+            }
+            .experience-item .title {
+                font-size: 1em;
+            }
+            .experience-item .category {
+                font-size: 0.75em;
+            }
         }
+        
+        /* 超小屏幕（< 400px） */
         @media (max-width: 400px) {
-            .stats { grid-template-columns: repeat(2, 1fr); }
+            .stats {
+                grid-template-columns: repeat(2, 1fr);
+            }
+            .stat-card h3 {
+                font-size: 1.2em;
+            }
+            .stat-card p {
+                font-size: 0.7em;
+            }
+            header h1 {
+                font-size: 1.5em;
+            }
+            .tabs {
+                flex-direction: column;
+            }
+            .tab-btn {
+                width: 100%;
+            }
         }
     </style>
 </head>
@@ -270,7 +537,7 @@
     <div class="container">
         <header>
             <h1>⚡ 码神的日记系统</h1>
-            <p style="color: rgba(255,255,255,0.9); font-size: 0.95em;">日记为中心 · 关联任务和经验</p>
+            <p>记录每天的进步与成长</p>
         </header>
 
         <div id="app">
@@ -281,279 +548,373 @@
     <script>
         const API_BASE = '/api';
         let state = {
-            currentTab: 'write',
-            allDiaries: [],
+            currentTab: 'tasks',
+            selectedDate: new Date().toISOString().split('T')[0],
+            selectedTask: null,
             allTasks: [],
+            allEntries: [],
             allExperiences: [],
-            stats: {},
-            selectedDate: new Date().toISOString().split('T')[0]
+            taskStats: {},
+            diaryStats: {},
+            expStats: {}
         };
 
         async function loadData() {
             try {
-                const [statsRes, diariesRes, tasksRes, experiencesRes] = await Promise.all([
-                    fetch(`${API_BASE}/entries/stats/`),
-                    fetch(`${API_BASE}/entries/recent/`),
+                const [taskStatsRes, tasksRes, diaryStatsRes, entriesRes, expStatsRes, experiencesRes] = await Promise.all([
+                    fetch(`${API_BASE}/tasks/stats/`),
                     fetch(`${API_BASE}/tasks/`),
-                    fetch(`${API_BASE}/experiences/recent/`)
+                    fetch(`${API_BASE}/entries/stats/`),
+                    fetch(`${API_BASE}/entries/`),
+                    fetch(`${API_BASE}/experiences/stats/`),
+                    fetch(`${API_BASE}/experiences/`)
                 ]);
 
-                state.stats = await statsRes.json();
-                state.allDiaries = await diariesRes.json();
+                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>`;
+                document.getElementById('app').innerHTML = `
+                    <div class="error">加载失败：${error.message}</div>
+                `;
             }
         }
 
+        function getTasksByDate(date) {
+            return state.allTasks.filter(task => {
+                const createdDate = task.created_at.split('T')[0];
+                return createdDate === date;
+            });
+        }
+
+        function getEntryByDate(date) {
+            return state.allEntries.find(entry => entry.date === date);
+        }
+
+        function renderCalendar(year, month, selectedDate, hasDataDates) {
+            const firstDay = new Date(year, month, 1);
+            const lastDay = new Date(year, month + 1, 0);
+            const startDay = firstDay.getDay();
+            const today = new Date().toISOString().split('T')[0];
+
+            const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+            const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
+
+            let html = `
+                <div class="calendar">
+                    <div class="calendar-header">
+                        <button onclick="changeMonth(-1)">&#8592;</button>
+                        <span style="font-weight: bold;">${year}年 ${monthNames[month]}</span>
+                        <button onclick="changeMonth(1)">&#8594;</button>
+                    </div>
+                    <div class="calendar-grid">
+                        ${dayNames.map(d => `<div class="calendar-day-header">${d}</div>`).join('')}
+                        ${Array(startDay).fill('<div class="calendar-day empty"></div>').join('')}
+            `;
+
+            for (let day = 1; day <= lastDay.getDate(); day++) {
+                const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+                const isSelected = dateStr === selectedDate;
+                const isToday = dateStr === today;
+                const hasData = hasDataDates.includes(dateStr);
+
+                html += `
+                    <div class="calendar-day ${isSelected ? 'selected' : ''} ${isToday ? 'today' : ''} ${hasData ? 'has-data' : ''}"
+                         onclick="selectDate('${dateStr}')">
+                        ${day}
+                    </div>
+                `;
+            }
+
+            html += `</div></div>`;
+            return html;
+        }
+
+        function renderTasksView() {
+            const current = state.currentCalendar || new Date();
+            
+            // 任务列表视图
+            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>
+                        <div class="content-area">
+                            ${state.allTasks.length === 0 ? `
+                                <div class="empty-state">
+                                    <p>暂无任务</p>
+                                </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="max-height: 60px; overflow: hidden;">${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>
+                            `).join('')}
+                        </div>
+                    </div>
+                `;
+            }
+            
+            // 任务详情视图（带日历）
+            const task = state.selectedTask;
+            const taskProgressDates = task.progress_notes ? 
+                task.progress_notes.match(/\[(\d{4}-\d{2}-\d{2})\]/g)?.map(s => s.slice(1, 11)) || [] : [];
+            const calendarHtml = renderCalendar(current.getFullYear(), current.getMonth(), 
+                state.selectedDate, taskProgressDates, true);
+            
+            const selectedDateProgress = task.progress_notes
+                .split('\n')
+                .filter(line => line.startsWith(`[${state.selectedDate}]`))
+                .map(line => line.slice(13))
+                .join('\n');
+
+            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-detail">
+                        <h3>${task.title}</h3>
+                        <div class="meta">
+                            <div class="meta-item">状态：${task.status_display}</div>
+                            <div class="meta-item">优先级：${task.priority_display}</div>
+                            <div class="meta-item">负责人：${task.assigned_to || '码神'}</div>
+                            <div class="meta-item">创建：${task.created_at.split('T')[0]}</div>
+                            <div class="meta-item">进展：${task.progress_percent}%</div>
+                        </div>
+                        ${task.description ? `<div class="description"><strong>描述：</strong><br>${task.description}</div>` : ''}
+                        
+                        <h3 style="margin-top: 25px; margin-bottom: 15px;">📅 任务进展日历</h3>
+                        <p style="color: #666; margin-bottom: 15px; font-size: 0.9em;">点击日历查看当日的任务记录</p>
+                        <div class="calendar-wrapper">
+                            ${calendarHtml}
+                            <div class="content-area">
+                                <div class="task-detail" style="background: white; border: 1px solid #e0e7ff;">
+                                    <h4 style="color: #667eea; margin-bottom: 10px;">📝 ${state.selectedDate} 的进展记录</h4>
+                                    ${selectedDateProgress ? `
+                                        <div class="progress-notes" style="background: #f8f9fa;">
+                                            <div class="note" style="white-space: pre-wrap;">${selectedDateProgress}</div>
+                                        </div>
+                                    ` : `
+                                        <div class="empty-state" style="padding: 20px;">
+                                            <p style="color: #999;">${state.selectedDate} 暂无记录</p>
+                                        </div>
+                                    `}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+
+        function renderDiaryView() {
+            const entry = getEntryByDate(state.selectedDate);
+            const entryDates = state.allEntries.map(e => e.date);
+            const current = state.currentCalendar || new Date();
+            const calendarHtml = renderCalendar(current.getFullYear(), current.getMonth(), state.selectedDate, entryDates);
+
+            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>📝 日记</h2>
+                    <p style="color: #666; margin-bottom: 15px; font-size: 0.9em;">点击日历选择日期查看日记</p>
+                    <div class="calendar-wrapper">
+                        ${calendarHtml}
+                        <div class="content-area">
+                            ${!entry ? `
+                                <div class="empty-state">
+                                    <p>📅 ${state.selectedDate} 没有日记</p>
+                                    <p style="margin-top: 10px; font-size: 0.9em; color: #999;">点击日历选择其他日期</p>
+                                </div>
+                            ` : `
+                                <div class="diary-item" style="cursor: default;">
+                                    <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.problems ? `
+                                        <div class="section">
+                                            <span class="section-title">🐛 遇到的问题</span>
+                                            <div class="section-content">${entry.problems}</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.plans ? `
+                                        <div class="section">
+                                            <span class="section-title">🎯 明日计划</span>
+                                            <div class="section-content">${entry.plans}</div>
+                                        </div>
+                                    ` : ''}
+                                </div>
+                            `}
+                        </div>
+                    </div>
+                </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">
+                            <p>暂无经验总结</p>
+                        </div>
+                    ` : state.allExperiences.map(exp => `
+                        <div class="experience-item">
+                            <div class="header">
+                                <span class="title">${exp.title}</span>
+                                <span class="category">${exp.category}</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>
+                            ` : ''}
+                        </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.stats.total_entries || 0}</h3>
-                        <p>日记</p>
+                        <h3>${state.diaryStats.total_entries || 0}</h3>
+                        <p>总日记</p>
                     </div>
                     <div class="stat-card">
-                        <h3>${state.stats.total_tasks || 0}</h3>
-                        <p>任务</p>
+                        <h3>${state.taskStats.total || 0}</h3>
+                        <p>总任务</p>
                     </div>
                     <div class="stat-card">
-                        <h3>${state.stats.total_experiences || 0}</h3>
+                        <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>
 
-                <div class="tabs">
-                    <button class="tab-btn ${state.currentTab === 'write' ? 'active' : ''}" onclick="switchTab('write')">✍️ 写日记</button>
-                    <button class="tab-btn ${state.currentTab === 'history' ? 'active' : ''}" onclick="switchTab('history')">📖 日记历史</button>
-                    <button class="tab-btn ${state.currentTab === 'tasks' ? 'active' : ''}" onclick="switchTab('tasks')">📋 任务</button>
-                    <button class="tab-btn ${state.currentTab === 'experiences' ? 'active' : ''}" onclick="switchTab('experiences')">💡 经验</button>
-                </div>
-
-                ${renderContent()}
-            `;
-        }
-
-        function renderContent() {
-            if (state.currentTab === 'write') return renderWriteTab();
-            if (state.currentTab === 'history') return renderHistoryTab();
-            if (state.currentTab === 'tasks') return renderTasksTab();
-            if (state.currentTab === 'experiences') return renderExperiencesTab();
-        }
-
-        function renderWriteTab() {
-            const today = state.selectedDate;
-            const existingDiary = state.allDiaries.find(d => d.date === today);
-            
-            return `
-                <div class="section-box">
-                    <h2>✍️ 写日记 - ${today}</h2>
-                    <div class="diary-editor">
-                        <div class="form-group">
-                            <label>📝 今天做了什么？</label>
-                            <textarea id="completedTasks" placeholder="记录今天完成的任务和工作..." rows="4">${existingDiary ? existingDiary.completed_tasks : ''}</textarea>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label>📚 学到了什么？</label>
-                            <textarea id="learned" placeholder="新的知识、技能、感悟..." rows="3">${existingDiary ? existingDiary.learned : ''}</textarea>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label>🔗 关联任务（自动更新进展）</label>
-                            <div style="max-height: 200px; overflow-y: auto; border: 1px solid #e0e7ff; border-radius: 6px; padding: 10px;">
-                                ${state.allTasks.filter(t => t.status !== 'completed').map(task => `
-                                    <div class="task-link-item">
-                                        <input type="checkbox" id="task-${task.id}" ${existingDiary && existingDiary.linked_tasks?.some(t => t.id === task.id) ? 'checked' : ''}>
-                                        <div class="task-info">
-                                            <div class="task-title">${task.title}</div>
-                                            <div style="font-size: 0.85em; color: #666;">当前进展：${task.progress_percent}%</div>
-                                        </div>
-                                        <span class="task-status">${task.status_display}</span>
-                                    </div>
-                                `).join('')}
-                            </div>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label>💡 想法和反思</label>
-                            <textarea id="reflections" placeholder="今天的思考、反思、改进想法..." rows="3">${existingDiary ? existingDiary.reflections : ''}</textarea>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label>📈 进步点</label>
-                            <textarea id="improvements" placeholder="今天在哪些方面有进步？" rows="2">${existingDiary ? existingDiary.improvements : ''}</textarea>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label>🎯 明日计划</label>
-                            <textarea id="plans" placeholder="明天打算做什么？" rows="2">${existingDiary ? existingDiary.plans : ''}</textarea>
-                        </div>
-                        
-                        <button class="btn" onclick="saveDiary()">💾 保存日记</button>
-                        ${existingDiary ? `<button class="btn btn-secondary" onclick="extractExperience()">✨ 提炼经验</button>` : ''}
-                    </div>
-                </div>
-            `;
-        }
-
-        function renderHistoryTab() {
-            return `
-                <div class="section-box">
-                    <h2>📖 日记历史</h2>
-                    ${state.allDiaries.length === 0 ? '<div class="empty-state">暂无日记</div>' : state.allDiaries.map(diary => `
-                        <div class="diary-item">
-                            <div class="date">${diary.date}</div>
-                            ${diary.completed_tasks ? `
-                                <div class="section">
-                                    <div class="section-title">✅ 完成的任务</div>
-                                    <div class="section-content">${diary.completed_tasks}</div>
-                                </div>
-                            ` : ''}
-                            ${diary.learned ? `
-                                <div class="section">
-                                    <div class="section-title">📚 学到的东西</div>
-                                    <div class="section-content">${diary.learned}</div>
-                                </div>
-                            ` : ''}
-                            ${diary.reflections ? `
-                                <div class="section">
-                                    <div class="section-title">💡 想法和反思</div>
-                                    <div class="section-content">${diary.reflections}</div>
-                                </div>
-                            ` : ''}
-                            ${diary.linked_tasks && diary.linked_tasks.length > 0 ? `
-                                <div class="linked-tasks">
-                                    <div class="section-title">🔗 关联任务</div>
-                                    ${diary.linked_tasks.map(task => `<span class="tag">${task.title}</span>`).join('')}
-                                </div>
-                            ` : ''}
-                            ${diary.experiences && diary.experiences.length > 0 ? `
-                                <div class="linked-experiences">
-                                    <div class="section-title">💡 提炼经验</div>
-                                    ${diary.experiences.map(exp => `<span class="tag" style="background: #fef3c7; color: #92400e;">${exp.title}</span>`).join('')}
-                                </div>
-                            ` : ''}
-                        </div>
-                    `).join('')}
-                </div>
-            `;
-        }
-
-        function renderTasksTab() {
-            return `
-                <div class="section-box">
-                    <h2>📋 所有任务</h2>
-                    ${state.allTasks.length === 0 ? '<div class="empty-state">暂无任务</div>' : state.allTasks.map(task => `
-                        <div class="diary-item" style="border-left-color: ${task.status === 'completed' ? '#10b981' : '#667eea'}">
-                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-                                <div class="task-title" style="font-size: 1.1em;">${task.title}</div>
-                                <span class="task-status">${task.status_display}</span>
-                            </div>
-                            <div style="font-size: 0.9em; color: #666; margin-bottom: 10px;">
-                                优先级：${task.priority_display} | 进展：${task.progress_percent}%
-                            </div>
-                            ${task.diary_entries && task.diary_entries.length > 0 ? `
-                                <div class="linked-tasks">
-                                    <div class="section-title">📝 关联日记</div>
-                                    ${task.diary_entries.map(d => `<span class="tag">${d.date}</span>`).join('')}
-                                </div>
-                            ` : ''}
-                        </div>
-                    `).join('')}
-                </div>
-            `;
-        }
-
-        function renderExperiencesTab() {
-            return `
-                <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="category">${exp.category_display}</div>
-                            <div class="title">${exp.title}</div>
-                            <div style="margin: 10px 0;"><strong>🐛 问题：</strong>${exp.problem}</div>
-                            <div style="margin: 10px 0;"><strong>✅ 解决：</strong>${exp.solution}</div>
-                            ${exp.lesson_learned ? `<div style="margin: 10px 0; padding: 10px; background: #fef3c7; border-radius: 5px;"><strong>📌 教训：</strong>${exp.lesson_learned}</div>` : ''}
-                        </div>
-                    `).join('')}
-                </div>
+                ${content}
             `;
         }
 
         function switchTab(tab) {
             state.currentTab = tab;
+            state.selectedTask = null;
             render();
         }
 
-        async function saveDiary() {
-            const today = state.selectedDate;
-            const existingDiary = state.allDiaries.find(d => d.date === today);
-            
-            const data = {
-                date: today,
-                title: '每日日记',
-                completed_tasks: document.getElementById('completedTasks').value,
-                learned: document.getElementById('learned').value,
-                reflections: document.getElementById('reflections').value,
-                improvements: document.getElementById('improvements').value,
-                plans: document.getElementById('plans').value
-            };
-
-            const linkedTaskIds = state.allTasks
-                .filter(task => document.getElementById(`task-${task.id}`)?.checked)
-                .map(task => task.id);
-
-            try {
-                let response;
-                if (existingDiary) {
-                    response = await fetch(`${API_BASE}/entries/${existingDiary.id}/`, {
-                        method: 'PUT',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(data)
-                    });
-                } else {
-                    response = await fetch(`${API_BASE}/entries/`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(data)
-                    });
-                }
-
-                const diary = await response.json();
-                
-                // 关联任务
-                for (const taskId of linkedTaskIds) {
-                    await fetch(`${API_BASE}/entries/${diary.id}/link_task/`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ task_id: taskId, progress_percent: 100, notes: '日记中完成' })
-                    });
-                }
-
-                alert('✅ 日记已保存！关联任务已自动更新进展。');
-                loadData();
-                switchTab('history');
-            } catch (error) {
-                alert('保存失败：' + error.message);
-            }
+        function selectDate(date) {
+            state.selectedDate = date;
+            render();
         }
 
-        function extractExperience() {
-            const reflections = document.getElementById('reflections').value;
-            if (!reflections) {
-                alert('请先写一些反思内容');
-                return;
-            }
-            alert('💡 功能开发中：选择反思内容，一键提炼为经验总结');
+        function selectTask(taskId) {
+            state.selectedTask = state.allTasks.find(t => t.id === taskId);
+            render();
         }
 
+        function changeMonth(delta) {
+            if (!state.currentCalendar) {
+                state.currentCalendar = new Date();
+            }
+            state.currentCalendar.setMonth(state.currentCalendar.getMonth() + delta);
+            render();
+        }
+
+        // 初始化
         loadData();
     </script>
 </body>