feat: 首页添加时间和todo模块

assets/style.css

@@ -11,7 +11,6 @@
   --text-color: #e4e6eb;
   --text-muted: #8b8c8f;
   --text-bright: #ffffff;
-  --secondary-bg: #3a3b3f;
   --border-color: rgba(255, 255, 255, 0.05);
   --shadow-color: rgba(0, 0, 0, 0.15);
   --highlight-bg: rgba(118, 148, 185, 0.3);
@@ -72,7 +71,6 @@ body.light-theme {
   --text-color: #333333;
   --text-muted: #666666;
   --text-bright: #000000;
-  --secondary-bg: #d9d9d4;
   --border-color: rgba(0, 0, 0, 0.08);
   --shadow-color: rgba(0, 0, 0, 0.1);
   --highlight-bg: rgba(118, 148, 185, 0.15);
@@ -672,7 +670,8 @@ body.loaded .layout {
 .submenu-item:hover {
   background-color: var(--secondary-bg);
   color: var(--text-bright);
-  padding-left: 1.2rem; /* 悬浮时轻微右移增加动感 */
+  padding-left: 1.2rem;
+  /* 悬浮时轻微右移增加动感 */
 }
 
 .submenu-item:hover i {
@@ -3717,12 +3716,15 @@ body.light-theme .page-template-projects .gh-heatmap-category {
 .content-page h3 {
   font-size: 1.25em;
 }
+
 .content-page h4 {
   font-size: 1em;
 }
+
 .content-page h5 {
   font-size: 0.875em;
 }
+
 .content-page h6 {
   font-size: 0.85em;
   color: var(--text-muted);
@@ -3863,3 +3865,337 @@ body.light-theme .page-template-projects .gh-heatmap-category {
 /* GitHub Calendar Fixes (HTML Table Version)
  * 注：此处样式已合并到上方「projects：GitHub 热力图（github-calendar.js）」区域，避免重复维护。
  */
+
+/* =========================================
+   Home Dashboard Styles
+   ========================================= */
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  /* Mobile first: stack vertically */
+  gap: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
+}
+
+@media (min-width: 992px) {
+  .dashboard-grid {
+    grid-template-columns: 5fr 7fr;
+    /* Desktop: 5/12 - 7/12 ratio like 1.html */
+    align-items: stretch;
+    /* Stretch to align bottoms */
+    gap: var(--spacing-lg);
+    /* Reduced gap */
+    margin-bottom: var(--spacing-lg);
+    /* Reduced margin */
+  }
+}
+
+/* --- Left Column: Welcome & Clock --- */
+.dashboard-intro {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  /* Match grid row height */
+  gap: var(--spacing-md);
+  /* Reduced gap */
+  justify-content: space-between;
+  /* Spread welcome and clock */
+}
+
+.dashboard-welcome {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.welcome-title {
+  font-size: 3rem;
+  font-family: var(--font-heading, serif);
+  font-style: italic;
+  color: var(--accent-color);
+  line-height: 1;
+  margin: 0;
+  padding-left: var(--spacing-xl);
+  /* Shift right */
+}
+
+.welcome-subtitle {
+  font-size: 1rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  font-weight: 500;
+  margin-top: 0.5rem;
+  padding-left: var(--spacing-xl);
+  /* Shift right */
+}
+
+@media (min-width: 768px) {
+  .welcome-title {
+    font-size: 3.5rem;
+    padding-left: 2rem;
+    /* Reduced from 5rem */
+  }
+
+  .welcome-subtitle {
+    font-size: 1.125rem;
+    padding-left: 2rem;
+  }
+}
+
+/* Clock Card - Optimized Layout */
+.dashboard-clock-card {
+  position: relative;
+  background-color: var(--card-bg-gradient-1);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 0.15);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+  overflow: hidden;
+  padding: var(--spacing-md);
+}
+
+body.light-theme .dashboard-clock-card {
+  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.2);
+}
+
+.clock-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  z-index: 1;
+}
+
+.clock-meta {
+  display: flex;
+  flex-direction: column;
+}
+
+.clock-main {
+  align-self: flex-end;
+  /* Time at bottom right */
+  z-index: 1;
+}
+
+.clock-time {
+  font-size: 3.5rem;
+  /* Reduced from 4.5rem to prevent overflow */
+  font-weight: 700;
+  color: var(--text-bright);
+  line-height: 1;
+  font-family: var(--font-body);
+  letter-spacing: -0.02em;
+}
+
+.clock-greeting {
+  font-size: 0.85rem;
+  color: var(--accent-color);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.2rem;
+}
+
+.clock-week {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  border: 1px solid var(--border-color);
+  padding: 2px 8px;
+  border-radius: 12px;
+}
+
+.clock-date {
+  font-size: 1.25rem;
+  /* Reduced from 1.5rem */
+  color: var(--text-muted);
+  font-family: var(--font-body);
+}
+
+/* --- Right Column: Stats / Todo --- */
+.dashboard-stats {
+  height: 100%;
+  min-height: 300px;
+}
+
+.dashboard-panel {
+  background-color: var(--card-bg-gradient-1);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl);
+  display: flex;
+  height: 310px;
+  /* Increased from 280px to align with clock card better */
+  overflow: hidden;
+  box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 0.15);
+  transition: box-shadow 0.2s ease;
+}
+
+body.light-theme .dashboard-panel {
+  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.2);
+}
+
+.panel-sidebar {
+  width: 4rem;
+  background-color: var(--sidebar-bg);
+  border-right: 4px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  /* Icon at top, button at bottom */
+  align-items: center;
+  padding: var(--spacing-md) 0;
+}
+
+.panel-static-icon {
+  color: var(--text-muted);
+  font-size: 1.5rem;
+  padding: 0.5rem;
+}
+
+.panel-icon-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: var(--radius-md);
+  transition: color 0.2s;
+}
+
+.panel-icon-btn:hover {
+  color: var(--accent-color);
+}
+
+.panel-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
+
+.panel-content {
+  flex: 1;
+  padding: var(--spacing-lg);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+/* Todo Items */
+.todo-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: 4px 0;
+  /* Tighter spacing */
+  cursor: pointer;
+  transition: opacity 0.2s;
+  opacity: 1;
+  position: relative;
+}
+
+.todo-item:hover .todo-delete-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.todo-checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--text-muted);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+
+.todo-checkbox.checked {
+  background-color: var(--accent-color);
+  border-color: var(--accent-color);
+  color: white;
+}
+
+.todo-checkbox.checked span {
+  font-size: 0.8rem;
+}
+
+.todo-text {
+  font-size: 1.1rem;
+  color: var(--text-bright);
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.todo-item.done .todo-text {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+/* Delete Button */
+.todo-delete-btn {
+  opacity: 0;
+  pointer-events: none;
+  background: none;
+  border: none;
+  color: var(--error-color);
+  padding: 0 0.5rem;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  font-size: 0.85rem;
+}
+
+/* Todo Input Area */
+.todo-input-container {
+  padding-top: var(--spacing-sm);
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  /* Ensure full width */
+  margin-top: auto;
+  /* Push to bottom if flex child */
+}
+
+.todo-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid var(--border-color);
+  color: var(--text-bright);
+  padding: 0.4rem 0;
+  font-size: 1rem;
+  font-family: var(--font-body);
+}
+
+.todo-input:focus {
+  outline: none;
+  border-bottom-color: var(--accent-color);
+}
+
+.todo-add-btn-small {
+  background: none;
+  border: none;
+  color: var(--accent-color);
+  cursor: pointer;
+  font-size: 1.2rem;
+}
+
+/* Light Mode Overrides for Specific Dashboard Colors if needed */
+body.light-theme .welcome-title {
+  /* Ensure visibility if default accent is too light on light bg, 
+       but var(--accent-color) usually handles this. */
+}

src/generator/html/page-data.js

@@ -169,6 +169,9 @@ function applyHomePageTitles(data, pageId, config) {
     if (config.profile.title !== undefined) data.title = config.profile.title;
     if (config.profile.subtitle !== undefined) data.subtitle = config.profile.subtitle;
   }
+
+  data.isHome = pageId === homePageId;
+  data.homePageId = homePageId;
 }
 
 function preparePageData(pageId, config) {

templates/components/home-dashboard.hbs

@@ -0,0 +1,211 @@
+{{!-- home-dashboard.hbs - 首页专用 Dashboard 布局 (Refined Layout) --}}
+<div class="dashboard-grid">
+    {{!-- 左侧：欢迎语 + 时钟 --}}
+    <div class="dashboard-intro">
+        <div class="dashboard-welcome">
+            <h1 class="welcome-title">{{title}}</h1>
+            <p class="welcome-subtitle">{{subtitle}}</p>
+        </div>
+
+        <div class="dashboard-clock-card">
+            <div class="clock-header">
+                <div class="clock-meta">
+                    <div class="clock-greeting" id="dashboard-greeting">Hello</div>
+                    <div class="clock-date" id="dashboard-date">Mon, Jan 01</div>
+                </div>
+                <div class="clock-week" id="dashboard-week">Week 1</div>
+            </div>
+
+            <div class="clock-main">
+                <div class="clock-time" id="dashboard-clock">00:00</div>
+            </div>
+        </div>
+    </div>
+
+    {{!-- 右侧：Todo 面板 --}}
+    <div class="dashboard-stats">
+        <div class="dashboard-panel">
+            <div class="panel-sidebar">
+                <div class="panel-static-icon">
+                    <span class="fas fa-bars"></span>
+                </div>
+                {{!-- 加号移至底部 --}}
+                <button class="panel-icon-btn add-btn" title="Add Todo" onclick="window.menavTodoApp.toggleInput()">
+                    <span class="fas fa-plus"></span>
+                </button>
+            </div>
+
+            <div class="panel-content-wrapper">
+                <div class="panel-content custom-scrollbar" id="todo-list">
+                    {{!-- Todo items will be rendered here via JS --}}
+                </div>
+
+                {{!-- 输入框默认隐藏 --}}
+                <div class="todo-input-container" id="todo-input-container"
+                    style="display: none; padding: var(--spacing-md);">
+                    <input type="text" class="todo-input" id="todo-input-field" placeholder="New task..."
+                        onkeypress="window.menavTodoApp.handleInputKey(event)"
+                        onblur="window.menavTodoApp.handleBlur()">
+                    <button class="todo-add-btn-small" onmousedown="window.menavTodoApp.preventBlur(event)"
+                        onclick="window.menavTodoApp.addFromInput()">
+                        <span class="fas fa-arrow-right"></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    (function () {
+        // --- Clock Logic ---
+        function getWeekNumber(d) {
+            d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+            d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+            var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+            var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+            return weekNo;
+        }
+
+        function getGreeting(hour) {
+            if (hour < 5) return "Good Night";
+            if (hour < 12) return "Good Morning";
+            if (hour < 18) return "Good Afternoon";
+            return "Good Evening";
+        }
+
+        function updateDashboardClock() {
+            const clockEl = document.getElementById('dashboard-clock');
+            const dateEl = document.getElementById('dashboard-date');
+            const greetingEl = document.getElementById('dashboard-greeting');
+            const weekEl = document.getElementById('dashboard-week');
+
+            if (!clockEl || !dateEl) return;
+
+            const now = new Date();
+            clockEl.textContent = now.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
+            dateEl.textContent = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+            if (greetingEl) greetingEl.textContent = getGreeting(now.getHours());
+            if (weekEl) weekEl.textContent = `Week ${getWeekNumber(now)}`;
+        }
+
+        setInterval(updateDashboardClock, 1000);
+        updateDashboardClock();
+
+        // --- Todo App Logic ---
+        const TODO_STORAGE_KEY = 'menav_todos_v1';
+
+        window.menavTodoApp = {
+            todos: [],
+            isIgnoreBlur: false,
+
+            init() {
+                this.load();
+                this.render();
+            },
+
+            load() {
+                try {
+                    const raw = localStorage.getItem(TODO_STORAGE_KEY);
+                    this.todos = raw ? JSON.parse(raw) : [
+                        { text: 'Drink Water', done: false },
+                        { text: 'Explore MeNav', done: true }
+                    ];
+                } catch (e) { this.todos = []; }
+            },
+
+            save() {
+                try { localStorage.setItem(TODO_STORAGE_KEY, JSON.stringify(this.todos)); } catch (e) { }
+            },
+
+            toggleInput() {
+                const container = document.getElementById('todo-input-container');
+                const field = document.getElementById('todo-input-field');
+                if (container.style.display === 'none') {
+                    container.style.display = 'flex';
+                    field.focus();
+                } else {
+                    container.style.display = 'none';
+                }
+            },
+
+            handleBlur() {
+                // Delay to allow button click to process first
+                setTimeout(() => {
+                    if (this.isIgnoreBlur) {
+                        this.isIgnoreBlur = false;
+                        return;
+                    }
+                    const container = document.getElementById('todo-input-container');
+                    if (container) container.style.display = 'none';
+                }, 200);
+            },
+
+            preventBlur(e) {
+                // Prevent input blur when clicking the add button
+                this.isIgnoreBlur = true;
+            },
+
+            addFromInput() {
+                const input = document.getElementById('todo-input-field');
+                if (input && input.value.trim()) {
+                    this.todos.push({ text: input.value.trim(), done: false });
+                    input.value = '';
+                    this.save();
+                    this.render();
+
+                    // 保持底部可见
+                    const list = document.getElementById('todo-list');
+                    list.scrollTop = list.scrollHeight;
+
+                    // Keep input open and focused
+                    input.focus();
+                }
+            },
+
+            handleInputKey(e) { if (e.key === 'Enter') this.addFromInput(); },
+
+            toggle(index) {
+                this.todos[index].done = !this.todos[index].done;
+                this.save(); this.render();
+            },
+
+            remove(index, e) {
+                if (e) e.stopPropagation();
+                this.todos.splice(index, 1);
+                this.save(); this.render();
+            },
+
+            render() {
+                const container = document.getElementById('todo-list');
+                if (!container) return;
+
+                if (this.todos.length === 0) {
+                    container.innerHTML = '<div class="empty-todo-hint">No tasks.</div>';
+                    return;
+                }
+
+                container.innerHTML = this.todos.map((todo, index) => `
+                    <div class="todo-item ${todo.done ? 'done' : ''}" onclick="window.menavTodoApp.toggle(${index})">
+                        <div class="todo-checkbox ${todo.done ? 'checked' : ''}">
+                            ${todo.done ? '<span class="fas fa-check"></span>' : ''}
+                        </div>
+                        <div class="todo-text" title="${this.escapeHtml(todo.text)}">${this.escapeHtml(todo.text)}</div>
+                        <button class="todo-delete-btn" onclick="window.menavTodoApp.remove(${index}, event)" title="Delete">
+                            <span class="fas fa-trash-alt"></span>
+                        </button>
+                    </div>
+                `).join('');
+            },
+
+            escapeHtml(text) {
+                const div = document.createElement('div');
+                div.textContent = text;
+                return div.innerHTML;
+            }
+        };
+
+        window.menavTodoApp.init();
+
+    })();
+</script>

templates/pages/page.hbs

@@ -1,7 +1,11 @@
 {{!-- page.hbs - 通用页面模板：结构与其他页面一致（标题区 + 分类内容） --}}
 <div class="page-template page-template-{{pageId}}">
+    {{#if isHome}}
+    {{> home-dashboard}}
+    {{else}}
     {{> page-header}}
+    {{/if}}
     {{#each categories}}
-        {{> category}}
+    {{> category}}
     {{/each}}
 </div>