diff --git a/frontend/index.html b/frontend/index.html
index 9456db6..07f9e10 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -34,25 +34,55 @@
         }
         .stats {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
             gap: 20px;
             margin-bottom: 30px;
         }
         .stat-card {
             background: white;
-            padding: 20px;
+            padding: 15px;
             border-radius: 10px;
             text-align: center;
             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
         }
         .stat-card h3 {
             color: #667eea;
-            font-size: 2em;
+            font-size: 1.8em;
             margin-bottom: 5px;
         }
         .stat-card p {
             color: #666;
+            font-size: 0.9em;
         }
+        
+        /* Tab 切换 */
+        .tabs {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+        .tab-btn {
+            padding: 12px 24px;
+            background: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1em;
+            font-weight: 500;
+            color: #666;
+            transition: all 0.3s;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .tab-btn:hover {
+            background: #f8f9fa;
+            transform: translateY(-2px);
+        }
+        .tab-btn.active {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+        }
+        
         .section-box {
             background: white;
             border-radius: 10px;
@@ -66,17 +96,155 @@
             padding-bottom: 10px;
             border-bottom: 2px solid #667eea;
         }
-        .diary-item {
+        
+        /* 日历组件 */
+        .calendar-wrapper {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+        .calendar {
+            flex: 0 0 300px;
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 8px;
+        }
+        .calendar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .calendar-header button {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .calendar-header button:hover {
+            background: #5568d3;
+        }
+        .calendar-grid {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 2px;
+        }
+        .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;
+        }
+        .calendar-day:hover {
+            background: #e0e7ff;
+        }
+        .calendar-day.selected {
+            background: #667eea;
+            color: white;
+        }
+        .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: 15px;
             border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.2s;
         }
-        .diary-item h3 {
-            color: #333;
+        .task-item:hover, .diary-item:hover {
+            transform: translateX(5px);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .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;
@@ -94,6 +262,52 @@
             margin-left: 20px;
             white-space: pre-wrap;
         }
+        
+        /* 任务详情 */
+        .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;
+        }
+        .task-detail .progress-notes h4 {
+            color: #92400e;
+            margin-bottom: 10px;
+        }
+        .task-detail .progress-notes .note {
+            font-size: 0.85em;
+            color: #666;
+            padding: 8px 0;
+            border-bottom: 1px solid #f3e5d5;
+        }
+        
         .experience-item {
             padding: 15px;
             border-left: 4px solid #f59e0b;
@@ -119,7 +333,7 @@
             border-radius: 20px;
             font-size: 0.85em;
         }
-        .experience-item .problem {
+        .experience-item .problem, .experience-item .solution, .experience-item .lesson {
             margin: 10px 0;
         }
         .experience-item .problem-title {
@@ -127,16 +341,12 @@
             color: #dc2626;
             margin-bottom: 5px;
         }
-        .experience-item .solution {
-            margin: 10px 0;
-        }
         .experience-item .solution-title {
             font-weight: bold;
             color: #059669;
             margin-bottom: 5px;
         }
         .experience-item .lesson {
-            margin: 10px 0;
             padding: 10px;
             background: #fef3c7;
             border-radius: 5px;
@@ -146,6 +356,7 @@
             color: #92400e;
             margin-bottom: 5px;
         }
+        
         .loading {
             text-align: center;
             padding: 40px;
@@ -159,92 +370,24 @@
             border-radius: 10px;
             margin-bottom: 20px;
         }
-        .emoji {
-            font-size: 1.2em;
+        .empty-state {
+            text-align: center;
+            padding: 40px;
+            color: #666;
         }
+        
         .grid-2 {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
-            gap: 30px;
-        }
-        .grid-3 {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
             gap: 30px;
         }
         @media (max-width: 768px) {
-            .grid-2, .grid-3 {
+            .grid-2, .calendar-wrapper {
                 grid-template-columns: 1fr;
             }
-        }
-        .task-item {
-            padding: 15px;
-            border-left: 4px solid #667eea;
-            background: #f8f9fa;
-            margin-bottom: 15px;
-            border-radius: 5px;
-        }
-        .task-item.status-pending { border-left-color: #6b7280; }
-        .task-item.status-in_progress { border-left-color: #3b82f6; }
-        .task-item.status-blocked { border-left-color: #f59e0b; }
-        .task-item.status-completed { border-left-color: #10b981; }
-        .task-item.status-cancelled { border-left-color: #ef4444; opacity: 0.6; }
-        .task-item .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-        .task-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;
-        }
-        .task-item .description {
-            color: #666;
-            margin: 10px 0;
-            white-space: pre-wrap;
-        }
-        .task-item .progress-notes {
-            background: #fef3c7;
-            padding: 10px;
-            border-radius: 5px;
-            font-size: 0.85em;
-            color: #92400e;
-            white-space: pre-wrap;
+            .calendar {
+                flex: 1;
+            }
         }
     </style>
 </head>
@@ -262,26 +405,37 @@
 
     <script>
         const API_BASE = '/api';
+        let state = {
+            currentTab: 'tasks',
+            selectedDate: new Date().toISOString().split('T')[0],
+            selectedTask: null,
+            allTasks: [],
+            allEntries: [],
+            allExperiences: [],
+            taskStats: {},
+            diaryStats: {},
+            expStats: {}
+        };
 
-        async function loadDiary() {
+        async function loadData() {
             try {
-                const [statsRes, entriesRes, expStatsRes, experiencesRes, taskStatsRes, tasksRes] = await Promise.all([
-                    fetch(`${API_BASE}/entries/stats/`),
-                    fetch(`${API_BASE}/entries/recent/`),
-                    fetch(`${API_BASE}/experiences/stats/`),
-                    fetch(`${API_BASE}/experiences/recent/`),
+                const [taskStatsRes, tasksRes, diaryStatsRes, entriesRes, expStatsRes, experiencesRes] = await Promise.all([
                     fetch(`${API_BASE}/tasks/stats/`),
-                    fetch(`${API_BASE}/tasks/active/`)
+                    fetch(`${API_BASE}/tasks/`),
+                    fetch(`${API_BASE}/entries/stats/`),
+                    fetch(`${API_BASE}/entries/`),
+                    fetch(`${API_BASE}/experiences/stats/`),
+                    fetch(`${API_BASE}/experiences/`)
                 ]);
 
-                const stats = await statsRes.json();
-                const entries = await entriesRes.json();
-                const expStats = await expStatsRes.json();
-                const experiences = await experiencesRes.json();
-                const taskStats = await taskStatsRes.json();
-                const tasks = await tasksRes.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(stats, entries, expStats, experiences, taskStats, tasks);
+                render();
             } catch (error) {
                 document.getElementById('app').innerHTML = `
                     <div class="error">加载失败：${error.message}</div>
@@ -289,121 +443,285 @@
             }
         }
 
-        function render(stats, entries, expStats, experiences, taskStats, tasks) {
-            const app = document.getElementById('app');
-            
-            app.innerHTML = `
-                <div class="stats">
-                    <div class="stat-card">
-                        <h3>${stats.total_entries || 0}</h3>
-                        <p>总日记数</p>
+        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, onClick) {
+            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="stat-card">
-                        <h3>${taskStats.total || 0}</h3>
-                        <p>总任务</p>
-                    </div>
-                    <div class="stat-card">
-                        <h3>${taskStats.in_progress || 0}</h3>
-                        <p>进行中</p>
-                    </div>
-                    <div class="stat-card">
-                        <h3>${taskStats.completed || 0}</h3>
-                        <p>已完成</p>
-                    </div>
-                    <div class="stat-card">
-                        <h3>${taskStats.completion_rate || 0}%</h3>
-                        <p>完成率</p>
-                    </div>
-                    <div class="stat-card">
-                        <h3>${expStats.total_experiences || 0}</h3>
-                        <p>经验总结</p>
+                    <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 dateTasks = getTasksByDate(state.selectedDate);
+            const tasksToShow = state.selectedTask ? [state.selectedTask] : dateTasks;
+
+            const taskDates = state.allTasks.map(t => t.created_at.split('T')[0]);
+            const current = state.currentCalendar || new Date();
+            const calendarHtml = renderCalendar(current.getFullYear(), current.getMonth(), state.selectedDate, taskDates);
+
+            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" style="margin-bottom: 30px;">
-                    <h2>📋 工作任务</h2>
-                    ${tasks.length === 0 ? '<p>暂无活跃任务</p>' : tasks.map(task => `
-                        <div class="task-item status-${task.status}">
-                            <div class="header">
-                                <span class="title">${task.title}</span>
-                                <span class="status">${task.status_display}</span>
-                            </div>
-                            <div class="priority">优先级：${task.priority_display} | 负责人：${task.assigned_to || '码神'}</div>
-                            ${task.description ? `<div class="description">${task.description}</div>` : ''}
-                            <div class="progress-bar">
-                                <div class="progress-fill" style="width: ${task.progress_percent}%"></div>
-                            </div>
-                            <div class="progress-text">进展：${task.progress_percent}%</div>
-                            ${task.progress_notes ? `<div class="progress-notes"><strong>进展记录：</strong><br>${task.progress_notes}</div>` : ''}
+                <div class="section-box">
+                    <h2>${state.selectedTask ? '📋 任务详情' : `📋 ${state.selectedDate} 的任务`}</h2>
+                    <div class="calendar-wrapper">
+                        ${calendarHtml}
+                        <div class="content-area">
+                            ${tasksToShow.length === 0 ? `
+                                <div class="empty-state">
+                                    <p>📅 ${state.selectedDate} 没有任务</p>
+                                    <p style="margin-top: 10px; font-size: 0.9em; color: #999;">点击日历选择其他日期</p>
+                                </div>
+                            ` : tasksToShow.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">${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('')}
+                            ${state.selectedTask ? `<button class="tab-btn" onclick="state.selectedTask = null; render();" style="margin-top: 10px;">← 返回列表</button>` : ''}
                         </div>
-                    `).join('')}
-                </div>
-
-                <div class="grid-2">
-                    <div class="section-box">
-                        <h2>📝 最近日记</h2>
-                        ${entries.length === 0 ? '<p>暂无日记</p>' : entries.map(entry => `
-                            <div class="diary-item">
-                                <div class="date">${entry.date}</div>
-                                <h3>${entry.title || '每日日记'}</h3>
-                                ${entry.completed_tasks ? `
-                                    <div class="section">
-                                        <span class="section-title">✅ 完成的任务</span>
-                                        <div class="section-content">${entry.completed_tasks}</div>
-                                    </div>
-                                ` : ''}
-                                ${entry.learned ? `
-                                    <div class="section">
-                                        <span class="section-title">📚 学到的东西</span>
-                                        <div class="section-content">${entry.learned}</div>
-                                    </div>
-                                ` : ''}
-                                ${entry.reflections ? `
-                                    <div class="section">
-                                        <span class="section-title">💡 想法和反思</span>
-                                        <div class="section-content">${entry.reflections}</div>
-                                    </div>
-                                ` : ''}
-                                ${entry.improvements ? `
-                                    <div class="section">
-                                        <span class="section-title">📈 进步点</span>
-                                        <div class="section-content">${entry.improvements}</div>
-                                    </div>
-                                ` : ''}
-                            </div>
-                        `).join('')}
-                    </div>
-
-                    <div class="section-box">
-                        <h2>💡 经验总结</h2>
-                        ${experiences.length === 0 ? '<p>暂无经验总结</p>' : experiences.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>
                 </div>
             `;
         }
 
-        loadDiary();
+        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>📝 ${state.selectedDate} 的日记</h2>
+                    <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">
+                                    <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.diaryStats.total_entries || 0}</h3>
+                        <p>总日记</p>
+                    </div>
+                    <div class="stat-card">
+                        <h3>${state.taskStats.total || 0}</h3>
+                        <p>总任务</p>
+                    </div>
+                    <div class="stat-card">
+                        <h3>${state.taskStats.in_progress || 0}</h3>
+                        <p>进行中</p>
+                    </div>
+                    <div class="stat-card">
+                        <h3>${state.taskStats.completed || 0}</h3>
+                        <p>已完成</p>
+                    </div>
+                    <div class="stat-card">
+                        <h3>${state.taskStats.completion_rate || 0}%</h3>
+                        <p>完成率</p>
+                    </div>
+                    <div class="stat-card">
+                        <h3>${state.expStats.total_experiences || 0}</h3>
+                        <p>经验</p>
+                    </div>
+                </div>
+
+                ${content}
+            `;
+        }
+
+        function switchTab(tab) {
+            state.currentTab = tab;
+            state.selectedTask = null;
+            render();
+        }
+
+        function selectDate(date) {
+            state.selectedDate = date;
+            render();
+        }
+
+        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>
 </html>