08-12-周三_14-20-35
This commit is contained in:
AaronXu
@@ -0,0 +1,61 @@
|
||||
/* ==================== Shared Utilities ==================== */
|
||||
|
||||
/* URL parameter helper */
|
||||
function getUrlParam(name) {
|
||||
const url = new URL(window.location.href);
|
||||
return url.searchParams.get(name);
|
||||
}
|
||||
|
||||
/* Toast notification */
|
||||
function showToast(msg, type) {
|
||||
type = type || 'info';
|
||||
var icons = { success: '✅', error: '❌', info: 'ℹ️' };
|
||||
var container = document.getElementById('toastContainer');
|
||||
if (!container) { container = document.createElement('div'); container.id = 'toastContainer'; container.className = 'toast-container'; document.body.appendChild(container); }
|
||||
var t = document.createElement('div');
|
||||
t.className = 'toast toast-' + type;
|
||||
t.innerHTML = '<span>' + (icons[type] || '') + '</span> ' + msg;
|
||||
container.appendChild(t);
|
||||
setTimeout(function () { t.remove(); }, 3000);
|
||||
}
|
||||
|
||||
/* Render shared navbar */
|
||||
function renderNavbar() {
|
||||
var nav = document.getElementById('navbarActions');
|
||||
if (!nav) return;
|
||||
nav.innerHTML =
|
||||
'<a href="index.html" class="btn btn-ghost">🏠 首页</a>' +
|
||||
'<a href="admin.html" class="btn btn-outline btn-sm">⚙️ 后台管理</a>' +
|
||||
'<a href="register.html" class="btn btn-ghost btn-sm">✍️ 注册</a>' +
|
||||
'<a href="login.html" class="btn btn-primary btn-sm">🔑 登录</a>';
|
||||
}
|
||||
|
||||
/* Category badge helper */
|
||||
function categoryBadge(cat) {
|
||||
if (!cat) return '';
|
||||
return '<span class="note-category" style="background:' + cat.color + '15;color:' + cat.color + '">' + cat.icon + ' ' + cat.name + '</span>';
|
||||
}
|
||||
|
||||
/* Empty state helper */
|
||||
function emptyState(icon, text) {
|
||||
return '<div class="empty-state"><div class="empty-icon">' + icon + '</div><p>' + text + '</p></div>';
|
||||
}
|
||||
|
||||
/* Modal helpers */
|
||||
function renderModal(title, content) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'modal-overlay';
|
||||
div.onclick = function (e) { if (e.target === div) closeModal(); };
|
||||
div.innerHTML = '<div class="form-modal" onclick="event.stopPropagation()"><h3>' + title + '</h3>' + content + '</div>';
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
var o = document.querySelector('.modal-overlay');
|
||||
if (o) o.remove();
|
||||
}
|
||||
|
||||
/* ==================== Bootstrap on every page ==================== */
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
renderNavbar();
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
/* ==================== Mock Data Store ==================== */
|
||||
const DATA = {
|
||||
users: [
|
||||
{ id: 1, username: 'admin', password: 'admin123', nickname: '管理员', role: 'admin', avatar: '👑', createdAt: '2024-01-01' },
|
||||
{ id: 2, username: 'xiaoming', password: '123456', nickname: '小明', role: 'user', avatar: '😊', createdAt: '2024-03-15' },
|
||||
{ id: 3, username: 'xiaohong', password: '123456', nickname: '小红', role: 'user', avatar: '🌸', createdAt: '2024-05-20' },
|
||||
],
|
||||
categories: [
|
||||
{ id: 1, name: '技术笔记', icon: '💻', color: '#6366f1' },
|
||||
{ id: 2, name: '生活随笔', icon: '🌿', color: '#10b981' },
|
||||
{ id: 3, name: '读书心得', icon: '📚', color: '#f59e0b' },
|
||||
{ id: 4, name: '旅行记录', icon: '✈️', color: '#06b6d4' },
|
||||
],
|
||||
notes: [
|
||||
{ id: 1, categoryId: 1, title: 'JavaScript 异步编程完全指南', excerpt: '掌握 Promise、async/await 和异步错误处理，让你的 JavaScript 代码更加优雅高效。', content: '在现代 JavaScript 开发中，异步编程是每个开发者必须掌握的技能。\n\n## Promise\nPromise 是 ES6 引入的一种异步编程解决方案。它代表一个异步操作的最终完成或失败。\n\n## async/await\nasync/await 是 ES2017 引入的语法糖，让异步代码看起来像同步代码。使用 try/catch 来处理异步错误比 .catch() 链更清晰易读。\n\n## 并发控制\n使用 Promise.all() 可以同时发起多个请求，显著提升性能。但需要注意控制并发数量。', authorId: 1, authorName: '管理员', views: 1520, likes: 89, createdAt: '2025-08-10' },
|
||||
{ id: 2, categoryId: 1, title: 'CSS Grid 布局实战技巧', excerpt: '从基础到进阶，深入了解 CSS Grid 布局系统，掌握现代网页布局的核心技术。', content: 'CSS Grid 是二维布局系统，让我们能同时控制行和列。\n\n## 容器属性\n- grid-template-columns：定义列\n- grid-template-rows：定义行\n- gap：行列间距\n- grid-template-areas：命名区域\n\n## 项目属性\n- grid-column：控制列跨度\n- grid-row：控制行跨度\n\n使用 Grid 可以轻松实现自适应布局，告别传统 hack 方案。', authorId: 1, authorName: '管理员', views: 980, likes: 56, createdAt: '2025-08-08' },
|
||||
{ id: 3, categoryId: 2, title: '周末烘焙日记：自制法式可颂', excerpt: '金黄酥脆、层次分明的法式可颂，一次成功的家庭烘焙体验全记录。', content: '这周末终于尝试了心心念念的法式可颂！\n\n## 材料准备\n- 高筋面粉 250g\n- 黄油 150g（裹入用）\n- 酵母 5g / 糖 25g / 盐 5g / 温水 130ml\n\n## 步骤\n1. 和面：将面粉、糖、盐、酵母混合，加入温水揉成光滑面团\n2. 一次发酵：室温发酵 1 小时至 2 倍大\n3. 裹黄油：将面团擀开，放入黄油片，进行四折\n4. 冷藏松弛：每次折叠后冷藏 30 分钟\n5. 成型烘烤：切成三角形卷起，200°C 烤 18 分钟\n\n成品金黄酥脆，层次分明，配上一杯拿铁，完美的周末下午！', authorId: 2, authorName: '小明', views: 756, likes: 134, createdAt: '2025-08-06' },
|
||||
{ id: 4, categoryId: 3, title: '《人类简史》读书笔记', excerpt: '认知革命、农业陷阱与科学革命——重新审视人类文明的演进与代价。', content: '尤瓦尔·赫拉利的《人类简史》是一本让人重新思考人类文明的书。\n\n## 认知革命\n大约 7 万年前，智人出现了新的思维和沟通方式。语言不仅能描述现实，还能创造虚构的故事，让大规模合作成为可能。\n\n## 农业革命\n农业革命并非人类的进步，而是一个陷阱。农民的生活比狩猎采集者更辛苦，但人口增长让人无法回头。\n\n## 科学革命\n现代科学与帝国、资本主义的结合，创造了今天的世界。科学的核心是"承认无知"，正是这种谦逊推动了进步。\n\n## 感想\n我们所谓的进步，到底让谁受益？这是个值得深思的问题。', authorId: 3, authorName: '小红', views: 2340, likes: 267, createdAt: '2025-08-04' },
|
||||
{ id: 5, categoryId: 1, title: 'React Hooks 深入解析', excerpt: '从 useState 到自定义 Hook，全面解析 React Hooks 的使用场景与最佳实践。', content: 'React Hooks 是 React 16.8 引入的革命性特性。\n\n## useState\n最基础的 Hook，用于在函数组件中添加状态。\n\n## useEffect\n处理副作用的神器。可以用来做数据获取、订阅、DOM 操作等。记得返回清理函数。\n\n## useCallback & useMemo\n性能优化的关键。useCallback 缓存函数，useMemo 缓存计算结果。\n\n## 自定义 Hook\n封装可复用的逻辑，是 Hooks 最强大的特性之一。', authorId: 1, authorName: '管理员', views: 1890, likes: 145, createdAt: '2025-08-02' },
|
||||
{ id: 6, categoryId: 4, title: '京都红叶季旅行攻略', excerpt: '岚山竹林、清水寺夜枫、永观堂红叶——京都最美的秋日体验全记录。', content: '十一月的京都，是一年中最美的季节。\n\n## 推荐赏枫地点\n### 岚山\n天龙寺的庭院和竹林小径是最佳拍照地，建议清晨前往避开人群。\n\n### 清水寺\n站在清水舞台上俯瞰京都市区，红叶与古建筑交相辉映。\n\n### 永观堂\n被誉为"红叶的永观堂"，夜枫尤其惊艳。\n\n## 交通建议\n购买京都巴士一日券，500日元即可无限次乘坐。\n\n## 美食推荐\n- 抹茶甜品：中村藤吉\n- 汤豆腐：南禅寺顺正\n- 拉面：一兰拉面', authorId: 2, authorName: '小明', views: 2100, likes: 320, createdAt: '2025-07-28' },
|
||||
{ id: 7, categoryId: 2, title: '阳台花园养成记', excerpt: '在城市阳台打造迷你花园，多肉、薄荷、月季——用绿植治愈生活。', content: '在城市的钢筋水泥中，拥有一个属于自己的小花园，是治愈生活最好的方式。\n\n## 适合阳台的植物\n- 多肉植物：耐旱好养，品种丰富\n- 薄荷：清香怡人，还能泡茶\n- 月季：阳台也能开花不断\n- 绿萝：垂吊种植，不占空间\n\n## 养护心得\n每天早晚浇水时，观察植物的变化是最治愈的时刻。看着新芽冒出、花苞绽放，生活的小确幸就在这些细微之处。', authorId: 3, authorName: '小红', views: 645, likes: 89, createdAt: '2025-07-25' },
|
||||
{ id: 8, categoryId: 3, title: '《设计心理学》核心要点', excerpt: '可视性、反馈、映射——六个核心原则，打造用户友好的产品设计。', content: '唐纳德·诺曼的《设计心理学》是每个产品设计师的必读书。\n\n## 六大核心原则\n1. 可视性 - 功能要能被看见\n2. 反馈 - 每个操作都要有反馈\n3. 约束 - 物理、文化、逻辑约束\n4. 映射 - 控制与效果的关系\n5. 一致性 - 统一的设计语言\n6. 容错性 - 允许犯错并方便恢复\n\n## 人本设计\n好的设计应该是"不可见"的——它如此自然，以至于用户感觉不到设计的存在。', authorId: 1, authorName: '管理员', views: 1200, likes: 178, createdAt: '2025-07-20' },
|
||||
],
|
||||
comments: [
|
||||
{ id: 1, noteId: 1, userId: 2, userName: '小明', userAvatar: '😊', content: '写得太清晰了！Promise 那部分解决了我的疑惑。', createdAt: '2025-08-11 14:30' },
|
||||
{ id: 2, noteId: 1, userId: 3, userName: '小红', userAvatar: '🌸', content: 'async/await 示例很好理解，期待更多这类文章！', createdAt: '2025-08-11 16:00' },
|
||||
{ id: 3, noteId: 1, userId: 1, userName: '管理员', userAvatar: '👑', content: '感谢支持！后续会出更多异步相关的文章。', createdAt: '2025-08-11 17:20' },
|
||||
{ id: 4, noteId: 3, userId: 1, userName: '管理员', userAvatar: '👑', content: '看着就很好吃，周末我也要试试！', createdAt: '2025-08-07 09:00' },
|
||||
{ id: 5, noteId: 3, userId: 3, userName: '小红', userAvatar: '🌸', content: '烤箱温度有什么需要注意的吗？', createdAt: '2025-08-07 10:30' },
|
||||
{ id: 6, noteId: 3, userId: 2, userName: '小明', userAvatar: '😊', content: '每个烤箱脾气不同，建议买个烤箱温度计。', createdAt: '2025-08-07 11:00' },
|
||||
{ id: 7, noteId: 4, userId: 2, userName: '小明', userAvatar: '😊', content: '这本书我去年也读了，农业革命那章确实颠覆认知。', createdAt: '2025-08-05 15:00' },
|
||||
{ id: 8, noteId: 4, userId: 3, userName: '小红', userAvatar: '🌸', content: '接着看《未来简史》吧，同样精彩！', createdAt: '2025-08-05 16:30' },
|
||||
{ id: 9, noteId: 6, userId: 3, userName: '小红', userAvatar: '🌸', content: '太美了！今年秋天一定要去一次。', createdAt: '2025-07-30 20:00' },
|
||||
{ id: 10, noteId: 6, userId: 1, userName: '管理员', userAvatar: '👑', content: '岚山的竹林确实值得早起去，体验完全不一样。', createdAt: '2025-07-31 08:00' },
|
||||
{ id: 11, noteId: 8, userId: 2, userName: '小明', userAvatar: '😊', content: '总结得很到位，设计心理学确实值得反复读。', createdAt: '2025-07-22 11:00' },
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user