feat: 首页添加时间和todo模块
This commit is contained in:
rbetree
211
templates/components/home-dashboard.hbs
Normal file
211
templates/components/home-dashboard.hbs
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
</div>
|
||||
Reference in New Issue
Block a user