就随便敲了一句话，效果出乎意料的强 点赞
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客 — macOS</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%; height: 100%; overflow: hidden;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
user-select: none;
}
/* ========== 桌面壁纸 ========== */
.desktop {
width: 100%; height: 100%; position: relative;
background:
radial-gradient(ellipse at 15% 85%, rgba(245,166,35,0.7) 0%, transparent 45%),
radial-gradient(ellipse at 85% 15%, rgba(123,104,238,0.6) 0%, transparent 45%),
radial-gradient(ellipse at 50% 60%, rgba(232,168,124,0.5) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(65,179,163,0.4) 0%, transparent 45%),
radial-gradient(ellipse at 30% 25%, rgba(195,141,158,0.5) 0%, transparent 45%),
linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #1a1a2e 100%);
}
/* ========== 菜单栏 ========== */
.menubar {
position: fixed; top: 0; left: 0; right: 0; height: 25px;
background: rgba(30,30,30,0.55);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
display: flex; align-items: center; justify-content: space-between;
padding: 0 10px; z-index: 1000;
font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.88);
}
.menubar-left, .menubar-right { display: flex; align-items: center; gap: 0; }
.menubar-item {
padding: 2px 8px; border-radius: 4px; cursor: default;
font-size: 13px; transition: background 0.1s; line-height: 1.3;
}
.menubar-item:hover { background: rgba(255,255,255,0.12); }
.menubar-item.bold { font-weight: 600; }
.menubar-right .menubar-item { font-size: 12px; font-weight: 400; }
.apple-logo { font-size: 15px; padding: 2px 10px 2px 8px; }
.apple-logo svg { display: block; }
/* ========== 窗口 ========== */
.window {
position: absolute; top: 45px; left: 50%; transform: translateX(-50%);
width: 1120px; max-width: calc(100vw - 40px);
height: calc(100vh - 115px);
background: rgba(246,246,246,0.88);
backdrop-filter: blur(50px) saturate(200%);
-webkit-backdrop-filter: blur(50px) saturate(200%);
border-radius: 12px;
box-shadow:
0 0 0 0.5px rgba(0,0,0,0.12),
0 22px 70px rgba(0,0,0,0.28),
0 0 0 0.5px rgba(255,255,255,0.08) inset;
display: flex; flex-direction: column; overflow: hidden; z-index: 100;
animation: windowOpen 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes windowOpen {
from { opacity: 0; transform: translateX(-50%) scale(0.88); }
to { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* ========== 标题栏 ========== */
.titlebar {
height: 40px; min-height: 40px;
background: rgba(236,236,236,0.85);
backdrop-filter: blur(10px);
display: flex; align-items: center; padding: 0 14px;
border-bottom: 0.5px solid rgba(0,0,0,0.08);
flex-shrink: 0; position: relative; cursor: default;
}
.traffic-lights { display: flex; align-items: center; gap: 7px; z-index: 10; }
.traffic-light {
width: 12px; height: 12px; border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.1s; position: relative;
}
.traffic-light::after { opacity: 0; transition: opacity 0.1s; font-family: inherit; }
.traffic-light.red { background: #ff5f57; border: 0.5px solid rgba(0,0,0,0.12); }
.traffic-light.yellow { background: #febc2e; border: 0.5px solid rgba(0,0,0,0.12); }
.traffic-light.green { background: #28c840; border: 0.5px solid rgba(0,0,0,0.12); }
.traffic-lights:hover .traffic-light::after { opacity: 1; }
.traffic-light.red::after { content: '×'; font-size: 10px; font-weight: 800; color: rgba(80,0,0,0.6); }
.traffic-light.yellow::after { content: '−'; font-size: 13px; font-weight: 700; color: rgba(80,50,0,0.6); }
.traffic-light.green::after { content: '⤢'; font-size: 8px; font-weight: 800; color: rgba(0,60,0,0.6); }
.titlebar-title {
position: absolute; left: 50%; transform: translateX(-50%);
font-size: 13px; font-weight: 500; color: #4a4a4a;
white-space: nowrap;
}
.titlebar-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.titlebar-btn {
width: 28px; height: 28px; border-radius: 5px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #888; transition: background 0.12s, color 0.12s;
}
.titlebar-btn:hover { background: rgba(0,0,0,0.06); color: #555; }
.titlebar-btn.active { background: rgba(0,0,0,0.08); color: #333; }
/* ========== 窗口内容 ========== */
.window-content { display: flex; flex: 1; overflow: hidden; }
/* ========== 侧边栏 ========== */
.sidebar {
width: 210px; background: rgba(234,234,234,0.5);
border-right: 0.5px solid rgba(0,0,0,0.07);
padding: 8px; overflow-y: auto; flex-shrink: 0;
transition: width 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.2s, padding 0.25s;
}
.sidebar.collapsed { width: 0; padding: 8px 0; opacity: 0; overflow: hidden; }
.sidebar::-webkit-scrollbar { width: 0; }
.sidebar-section { margin-bottom: 14px; }
.sidebar-section-title {
font-size: 11px; font-weight: 600; color: #999;
text-transform: uppercase; letter-spacing: 0.6px;
padding: 4px 8px 3px; margin-bottom: 1px;
}
.sidebar-item {
display: flex; align-items: center; gap: 8px;
padding: 5px 8px; border-radius: 6px; cursor: pointer;
font-size: 13px; color: #333; transition: background 0.12s;
}
.sidebar-item:hover { background: rgba(0,0,0,0.05); }
.sidebar-item.active { background: rgba(0,122,255,0.12); color: #007aff; }
.sidebar-item.active svg { color: #007aff !important; }
.sidebar-item svg { width: 16px; height: 16px; color: #999; flex-shrink: 0; }
.sidebar-badge {
margin-left: auto; font-size: 11px; color: #aaa;
background: rgba(0,0,0,0.05); padding: 1px 7px;
border-radius: 10px; font-weight: 500;
}
.tag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* ========== 主内容区 ========== */
.main-content { flex: 1; overflow-y: auto; padding: 20px 28px 28px; }
.main-content::-webkit-scrollbar { width: 6px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
.main-content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }
/* 搜索框 */
.search-bar { margin-bottom: 20px; position: relative; }
.search-bar input {
width: 100%; height: 34px;
background: rgba(0,0,0,0.04); border: 0.5px solid rgba(0,0,0,0.07);
border-radius: 8px; padding: 0 12px 0 34px;
font-size: 13px; font-family: inherit; color: #333; outline: none;
transition: all 0.2s;
}
.search-bar input::placeholder { color: #aaa; }
.search-bar input:focus {
background: #fff; border-color: rgba(0,122,255,0.5);
box-shadow: 0 0 0 3px rgba(0,122,255,0.12);
}
.search-bar > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #aaa; }
.section-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; margin-top: 4px; }
/* 置顶文章 */
.featured-post {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 14px; padding: 26px 28px; margin-bottom: 22px;
cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
position: relative; overflow: hidden;
animation: fadeInUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}
.featured-post::before {
content: ''; position: absolute; top: -60%; right: -15%;
width: 320px; height: 320px; background: rgba(255,255,255,0.07); border-radius: 50%;
}
.featured-post::after {
content: ''; position: absolute; bottom: -40%; left: -8%;
width: 220px; height: 220px; background: rgba(255,255,255,0.04); border-radius: 50%;
}
.featured-post:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(102,126,234,0.3); }
.featured-label {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.75);
background: rgba(255,255,255,0.13); padding: 3px 10px;
border-radius: 20px; margin-bottom: 12px;
text-transform: uppercase; letter-spacing: 0.5px;
}
.featured-post h2 { font-size: 21px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.35; position: relative; }
.featured-post p { font-size: 13.5px; color: rgba(255,255,255,0.72); line-height: 1.65; margin-bottom: 16px; position: relative; }
.featured-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255,255,255,0.55); position: relative; }
.featured-avatar {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,255,255,0.18); display: flex;
align-items: center; justify-content: center;
}
/* 文章网格 */
.posts-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 28px; }
.post-card {
background: #fff; border-radius: 11px;
border: 0.5px solid rgba(0,0,0,0.05); overflow: hidden;
cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.post-card:nth-child(1) { animation: fadeInUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.18s both; }
.post-card:nth-child(2) { animation: fadeInUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.24s both; }
.post-card:nth-child(3) { animation: fadeInUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.30s both; }
.post-card:nth-child(4) { animation: fadeInUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.36s both; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.07); }
.post-card-img { width: 100%; height: 136px; object-fit: cover; display: block; }
.post-card-body { padding: 14px 16px 16px; }
.post-tag {
display: inline-block; font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
}
.post-tag.tech { color: #007aff; background: rgba(0,122,255,0.08); }
.post-tag.design { color: #ff9500; background: rgba(255,149,0,0.08); }
.post-tag.essay { color: #34c759; background: rgba(52,199,89,0.08); }
.post-card h3 {
font-size: 14.5px; font-weight: 600; color: #1a1a1a; margin-bottom: 6px;
line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.post-card .excerpt {
font-size: 12.5px; color: #999; line-height: 1.55;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px;
}
.post-card-footer { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #bbb; }
.read-time { display: flex; align-items: center; gap: 3px; }
/* 近期列表 */
.recent-list { margin-bottom: 28px; }
.recent-item {
display: flex; align-items: center; gap: 14px;
padding: 10px 8px; border-bottom: 0.5px solid rgba(0,0,0,0.05);
cursor: pointer; transition: background 0.12s; border-radius: 8px; margin: 0 -8px;
}
.recent-item:hover { background: rgba(0,0,0,0.025); }
.recent-item:last-child { border-bottom: none; }
.recent-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.recent-info { flex: 1; min-width: 0; }
.recent-info h4 {
font-size: 13.5px; font-weight: 500; color: #1a1a1a; margin-bottom: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-info span { font-size: 12px; color: #aaa; }
.recent-arrow { color: #ddd; flex-shrink: 0; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ========== Dock ========== */
.dock {
position: fixed; bottom: 6px; left: 50%; transform: translateX(-50%);
display: flex; align-items: flex-end; gap: 3px;
padding: 4px 8px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border-radius: 18px;
border: 0.5px solid rgba(255,255,255,0.18);
z-index: 1000;
}
.dock-item {
width: 50px; height: 50px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; position: relative;
transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
transform-origin: bottom center;
}
.dock-item:hover { transform: translateY(-10px) scale(1.35); }
.dock-icon {
width: 44px; height: 44px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
color: #fff;
}
.dock-tooltip {
position: absolute; top: -34px;
background: rgba(30,30,30,0.82); backdrop-filter: blur(12px);
color: #fff; font-size: 12px; font-weight: 500;
padding: 4px 10px; border-radius: 6px; white-space: nowrap;
opacity: 0; transform: translateY(4px); transition: all 0.12s;
pointer-events: none;
}
.dock-item:hover .dock-tooltip { opacity: 1; transform: translateY(0); }
.dock-item.running::after {
content: ''; position: absolute; bottom: -3px;
width: 4px; height: 4px; border-radius: 50%;
background: rgba(255,255,255,0.65);
}
.dock-sep { width: 1px; height: 38px; background: rgba(255,255,255,0.18); margin: 0 4px; align-self: center; }
/* ========== 右键菜单 ========== */
.ctx-menu {
position: fixed;
background: rgba(246,246,246,0.88);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border-radius: 8px;
box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.08);
padding: 4px; min-width: 210px; z-index: 2000;
opacity: 0; transform: scale(0.95); pointer-events: none;
transition: opacity 0.12s, transform 0.12s;
}
.ctx-menu.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.ctx-item {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 12px; border-radius: 5px; font-size: 13px;
color: #333; cursor: default; transition: background 0.08s;
}
.ctx-item:hover { background: #007aff; color: #fff; }
.ctx-item .shortcut { font-size: 12px; color: #999; margin-left: 28px; }
.ctx-item:hover .shortcut { color: rgba(255,255,255,0.65); }
.ctx-sep { height: 0.5px; background: rgba(0,0,0,0.08); margin: 4px 10px; }
/* ========== 通知 ========== */
.notification {
position: fixed; top: 34px; right: 12px; width: 320px;
background: rgba(248,248,248,0.9);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border-radius: 14px;
box-shadow: 0 10px 44px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.06);
padding: 14px 16px; z-index: 2000; cursor: pointer;
transform: translateX(calc(100% + 20px));
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.notification.show { transform: translateX(0); }
.notif-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.notif-icon {
width: 20px; height: 20px; border-radius: 5px;
background: linear-gradient(135deg,#667eea,#764ba2);
display: flex; align-items: center; justify-content: center;
}
.notif-app { font-size: 12px; font-weight: 600; color: #444; }
.notif-time { font-size: 11px; color: #aaa; margin-left: auto; }
.notif-title { font-size: 13px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
.notif-body { font-size: 12px; color: #777; line-height: 1.45; }
/* ========== 文章详情模态 ========== */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.3);
backdrop-filter: blur(4px); z-index: 1500;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal {
width: 680px; max-width: 90vw; max-height: 80vh;
background: rgba(252,252,252,0.95);
backdrop-filter: blur(50px);
border-radius: 14px;
box-shadow: 0 20px 70px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.08);
overflow: hidden; transform: scale(0.92) translateY(20px);
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.modal-overlay.show .modal { transform: scale(1) translateY(0); }
.modal-titlebar {
height: 40px; display: flex; align-items: center; padding: 0 14px;
border-bottom: 0.5px solid rgba(0,0,0,0.06);
}
.modal-body { padding: 24px 28px; overflow-y: auto; max-height: calc(80vh - 40px); }
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }
.modal-body h1 { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; line-height: 1.35; }
.modal-body .meta { font-size: 12px; color: #aaa; margin-bottom: 20px; display: flex; gap: 12px; }
.modal-body p { font-size: 14px; color: #555; line-height: 1.75; margin-bottom: 16px; }
.modal-close {
width: 12px; height: 12px; border-radius: 50%; background: #ff5f57;
cursor: pointer; border: 0.5px solid rgba(0,0,0,0.1);
display: flex; align-items: center; justify-content: center;
}
/* ========== 响应式 ========== */
@media (max-width: 860px) {
.sidebar { width: 170px; }
.posts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.sidebar { display: none !important; }
.main-content { padding: 16px; }
.window { max-width: calc(100vw - 12px); }
.dock { gap: 2px; padding: 3px 6px; }
.dock-item { width: 40px; height: 40px; }
.dock-icon { width: 36px; height: 36px; }
}
</style>
</head>
<body>
<div class="desktop" id="desktop">
<!-- 菜单栏 -->
<div class="menubar">
<div class="menubar-left">
<span class="menubar-item apple-logo">
<svg width="14" height="17" viewBox="0 0 170 200" fill="currentColor">
<path d="M150.4 172.2c-4.5 10.3-9.8 19.8-15.8 28.4-8.2 11.7-14.9 19.8-20.2 24.2-8 7.4-16.7 11.2-25.9 11.4-6.6 0-14.6-1.9-23.8-5.7-9.3-3.8-17.8-5.7-25.6-5.7-8.3 0-17.1 1.9-26.6 5.7-9.5 3.8-17.1 5.8-22.9 6-8.9.4-17.7-3.5-26.5-11.7-5.7-4.8-12.7-13.1-21-24.9-8.9-12.7-16.2-27.4-21.9-44.2C13.3 139.2 10.2 122 10.2 105.3c0-19 4.1-35.4 12.3-49.1 6.5-11 15.1-19.7 26-25.2 10.8-5.5 22.5-8.3 35.1-8.5 7 0 16.2 2.2 27.6 6.5 11.3 4.3 18.6 6.6 21.8 6.6 2.4 0 10.5-2.6 24.2-7.9 12.9-4.9 23.8-6.9 32.8-6.2 24.2 2 42.4 11.5 54.5 28.7-21.7 13.1-32.4 31.5-32.1 55.1.3 18.3 6.8 33.6 19.6 45.7 5.8 5.5 12.3 9.8 19.6 12.8-1.6 4.5-3.2 8.8-5 13zM116.4 3.9c0 14.3-5.2 27.7-15.6 40.1-12.6 14.9-27.8 23.5-44.2 22.2-.2-1.7-.3-3.5-.3-5.5 0-13.8 6-28.5 16.6-40.5 5.3-6.1 12-11.1 20.2-15.1 8.1-4 15.8-6.1 22.9-6.5.2 1.8.4 3.6.4 5.3z" transform="scale(0.1) translate(0,-50)"/>
</svg>
</span>
<span class="menubar-item bold">博客</span>
<span class="menubar-item">文件</span>
<span class="menubar-item">编辑</span>
<span class="menubar-item">显示</span>
<span class="menubar-item">窗口</span>
<span class="menubar-item">帮助</span>
</div>
<div class="menubar-right">
<span class="menubar-item" id="mb-wifi"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor"/></svg></span>
<span class="menubar-item" id="mb-bat"><svg width="20" height="12" viewBox="0 0 28 14" fill="none"><rect x=".5" y=".5" width="23" height="13" rx="2.5" stroke="currentColor" stroke-width="1"/><rect x="2" y="2" width="17" height="9" rx="1" fill="currentColor"/><path d="M25 5v4a2 2 0 0 0 0-4z" fill="currentColor" opacity=".4"/></svg></span>
<span class="menubar-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span>
<span class="menubar-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4"/></svg></span>
<span class="menubar-item" id="mb-time"></span>
</div>
</div>
<!-- 窗口 -->
<div class="window" id="win">
<div class="titlebar" id="titlebar">
<div class="traffic-lights">
<div class="traffic-light red" id="btnClose"></div>
<div class="traffic-light yellow" id="btnMin"></div>
<div class="traffic-light green" id="btnMax"></div>
</div>
<div class="titlebar-title" id="winTitle">博客 — 所有文章</div>
<div class="titlebar-actions">
<div class="titlebar-btn active" id="btnSidebar" title="切换侧边栏"><i data-lucide="panel-left" style="width:15px;height:15px"></i></div>
<div class="titlebar-btn" id="btnGrid" title="网格视图"><i data-lucide="layout-grid" style="width:15px;height:15px"></i></div>
<div class="titlebar-btn" id="btnList" title="列表视图"><i data-lucide="list" style="width:15px;height:15px"></i></div>
</div>
</div>
<div class="window-content">
<div class="sidebar" id="sidebar">
<div class="sidebar-section">
<div class="sidebar-section-title">浏览</div>
<div class="sidebar-item active" data-view="all"><i data-lucide="file-text"></i>所有文章<span class="sidebar-badge">12</span></div>
<div class="sidebar-item" data-view="starred"><i data-lucide="star"></i>收藏<span class="sidebar-badge">4</span></div>
<div class="sidebar-item" data-view="recent"><i data-lucide="clock"></i>最近阅读</div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">标签</div>
<div class="sidebar-item" data-view="tech"><span class="tag-dot" style="background:#007aff"></span>技术<span class="sidebar-badge">6</span></div>
<div class="sidebar-item" data-view="design"><span class="tag-dot" style="background:#ff9500"></span>设计<span class="sidebar-badge">3</span></div>
<div class="sidebar-item" data-view="essay"><span class="tag-dot" style="background:#34c759"></span>随笔<span class="sidebar-badge">3</span></div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">归档</div>
<div class="sidebar-item" data-view="2024"><i data-lucide="calendar"></i>2024<span class="sidebar-badge">8</span></div>
<div class="sidebar-item" data-view="2023"><i data-lucide="calendar"></i>2023<span class="sidebar-badge">4</span></div>
</div>
</div>
<div class="main-content" id="mainContent">
<div class="search-bar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<input type="text" placeholder="搜索文章..." id="searchInput">
</div>
<div class="featured-post" id="featuredPost" data-title="探索 WebGPU：下一代 Web 图形渲染技术的前景与实践">
<div class="featured-label"><i data-lucide="sparkles" style="width:11px;height:11px"></i>置顶推荐</div>
<h2>探索 WebGPU：下一代 Web 图形渲染技术的前景与实践</h2>
<p>WebGPU 正在重新定义浏览器中的图形与计算能力。本文从底层架构出发，深入探讨它与 WebGL 的本质差异，以及在实际项目中的应用潜力。</p>
<div class="featured-meta">
<div class="featured-avatar"><i data-lucide="user" style="width:13px;height:13px;color:rgba(255,255,255,0.5)"></i></div>
<span>陈默</span><span>·</span><span>2024年12月15日</span><span>·</span><span>12 分钟阅读</span>
</div>
</div>
<div class="section-title">最新文章</div>
<div class="posts-grid" id="postsGrid">
<div class="post-card" data-title="从零构建一个现代设计系统：从 Token 到组件">
<img src="https://picsum.photos/seed/design-sys-2024/600/300.jpg" class="post-card-img" alt="">
<div class="post-card-body">
<span class="post-tag design">设计</span>
<h3>从零构建一个现代设计系统：从 Token 到组件</h3>
<p class="excerpt">设计系统不只是组件库。本文分享如何从设计 Token 开始，一步步构建可扩展、可维护的设计系统。</p>
<div class="post-card-footer"><span>2024.12.10</span><span class="read-time"><i data-lucide="clock" style="width:11px;height:11px"></i>8 分钟</span></div>
</div>
</div>
<div class="post-card" data-title="macOS Sonoma 背后的设计哲学：克制与留白的艺术">
<img src="https://picsum.photos/seed/sonoma-design/600/300.jpg" class="post-card-img" alt="">
<div class="post-card-body">
<span class="post-tag essay">随笔</span>
<h3>macOS Sonoma 背后的设计哲学：克制与留白的艺术</h3>
<p class="excerpt">每一次 macOS 的迭代都在告诉我们：好的设计不是加法，而是减法。深入解析 Sonoma 的视觉语言变化。</p>
<div class="post-card-footer"><span>2024.12.05</span><span class="read-time"><i data-lucide="clock" style="width:11px;height:11px"></i>6 分钟</span></div>
</div>
</div>
<div class="post-card" data-title="Rust 在前端工具链中的崛起：从 SWC 到 Turbopack">
<img src="https://picsum.photos/seed/rust-frontend-tool/600/300.jpg" class="post-card-img" alt="">
<div class="post-card-body">
<span class="post-tag tech">技术</span>
<h3>Rust 在前端工具链中的崛起：从 SWC 到 Turbopack</h3>
<p class="excerpt">Rust 正在以前所未有的速度渗透前端工具链。从编译器到打包工具，这场性能革命意味着什么？</p>
<div class="post-card-footer"><span>2024.11.28</span><span class="read-time"><i data-lucide="clock" style="width:11px;height:11px"></i>10 分钟</span></div>
</div>
</div>
<div class="post-card" data-title="为什么好的排版是隐形的设计">
<img src="https://picsum.photos/seed/typography-invis/600/300.jpg" class="post-card-img" alt="">
<div class="post-card-body">
<span class="post-tag design">设计</span>
<h3>为什么好的排版是隐形的设计</h3>
<p class="excerpt">排版是最容易被忽视的设计元素，却也是最关键的。探讨字间距、行高、字体选择如何影响阅读体验。</p>
<div class="post-card-footer"><span>2024.11.20</span><span class="read-time"><i data-lucide="clock" style="width:11px;height:11px"></i>7 分钟</span></div>
</div>
</div>
</div>
<div class="section-title">近期更新</div>
<div class="recent-list" id="recentList">
<div class="recent-item" data-title="AI 辅助编程的边界：当 Copilot 遇到复杂架构">
<img src="https://picsum.photos/seed/ai-copilot-edge/100/100.jpg" class="recent-thumb" alt="">
<div class="recent-info"><h4>AI 辅助编程的边界：当 Copilot 遇到复杂架构</h4><span>2024.11.15 · 技术 · 9 分钟</span></div>
<div class="recent-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px"></i></div>
</div>
<div class="recent-item" data-title="程序员的咖啡指南：从选豆到手冲的完整流程">
<img src="https://picsum.photos/seed/coffee-pourover/100/100.jpg" class="recent-thumb" alt="">
<div class="recent-info"><h4>程序员的咖啡指南：从选豆到手冲的完整流程</h4><span>2024.11.08 · 随笔 · 5 分钟</span></div>
<div class="recent-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px"></i></div>
</div>
<div class="recent-item" data-title="CSS Container Queries 实战：响应式设计的新范式">
<img src="https://picsum.photos/seed/css-container-q/100/100.jpg" class="recent-thumb" alt="">
<div class="recent-info"><h4>CSS Container Queries 实战：响应式设计的新范式</h4><span>2024.10.30 · 技术 · 6 分钟</span></div>
<div class="recent-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px"></i></div>
</div>
<div class="recent-item" data-title="我的 2024 年度阅读书单：从技术到人文">
<img src="https://picsum.photos/seed/reading-2024-list/100/100.jpg" class="recent-thumb" alt="">
<div class="recent-info"><h4>我的 2024 年度阅读书单：从技术到人文</h4><span>2024.10.22 · 随笔 · 4 分钟</span></div>
<div class="recent-arrow"><i data-lucide="chevron-right" style="width:16px;height:16px"></i></div>
</div>
</div>
</div>
</div>
</div>
<!-- Dock -->
<div class="dock" id="dock">
<div class="dock-item" data-name="访达"><div class="dock-icon" style="background:linear-gradient(135deg,#4FC3F7,#1976D2)"><i data-lucide="smile" style="width:24px;height:24px"></i></div><div class="dock-tooltip">访达</div></div>
<div class="dock-item running" data-name="信息"><div class="dock-icon" style="background:linear-gradient(135deg,#66BB6A,#2E7D32)"><i data-lucide="message-circle" style="width:22px;height:22px"></i></div><div class="dock-tooltip">信息</div></div>
<div class="dock-item" data-name="Safari"><div class="dock-icon" style="background:linear-gradient(135deg,#42A5F5,#1565C0)"><i data-lucide="compass" style="width:22px;height:22px"></i></div><div class="dock-tooltip">Safari</div></div>
<div class="dock-item" data-name="邮件"><div class="dock-icon" style="background:linear-gradient(135deg,#42A5F5,#1976D2)"><i data-lucide="mail" style="width:22px;height:22px"></i></div><div class="dock-tooltip">邮件</div></div>
<div class="dock-item running" data-name="博客"><div class="dock-icon" style="background:linear-gradient(135deg,#667eea,#764ba2)"><i data-lucide="pen-tool" style="width:22px;height:22px"></i></div><div class="dock-tooltip">博客</div></div>
<div class="dock-item" data-name="音乐"><div class="dock-icon" style="background:linear-gradient(135deg,#EF5350,#C62828)"><i data-lucide="music" style="width:22px;height:22px"></i></div><div class="dock-tooltip">音乐</div></div>
<div class="dock-item" data-name="照片"><div class="dock-icon" style="background:linear-gradient(135deg,#FFA726,#E65100)"><i data-lucide="image" style="width:22px;height:22px"></i></div><div class="dock-tooltip">照片</div></div>
<div class="dock-sep"></div>
<div class="dock-item" data-name="废纸篓"><div class="dock-icon" style="background:linear-gradient(135deg,#BDBDBD,#757575)"><i data-lucide="trash-2" style="width:22px;height:22px"></i></div><div class="dock-tooltip">废纸篓</div></div>
</div>
<!-- 右键菜单 -->
<div class="ctx-menu" id="ctxMenu">
<div class="ctx-item">新建文章<span class="shortcut">⌘N</span></div>
<div class="ctx-item">新建草稿</div>
<div class="ctx-sep"></div>
<div class="ctx-item">刷新<span class="shortcut">⌘R</span></div>
<div class="ctx-item">全选<span class="shortcut">⌘A</span></div>
<div class="ctx-sep"></div>
<div class="ctx-item">排序方式</div>
<div class="ctx-item">显示选项</div>
<div class="ctx-sep"></div>
<div class="ctx-item">获取信息<span class="shortcut">⌘I</span></div>
</div>
<!-- 通知 -->
<div class="notification" id="notif">
<div class="notif-header">
<div class="notif-icon"><i data-lucide="pen-tool" style="width:11px;height:11px;color:#fff"></i></div>
<span class="notif-app">博客</span>
<span class="notif-time">刚刚</span>
</div>
<div class="notif-title">新文章发布通知</div>
<div class="notif-body">「探索 WebGPU」已成功发布，获得 42 次阅读。</div>
</div>
<!-- 文章详情模态 -->
<div class="modal-overlay" id="modalOverlay">
<div class="modal">
<div class="modal-titlebar">
<div class="modal-close" id="modalClose"></div>
<div class="titlebar-title" style="position:static;transform:none;margin-left:12px">文章详情</div>
</div>
<div class="modal-body" id="modalBody">
<h1 id="modalTitle"></h1>
<div class="meta"><span id="modalDate">2024年12月15日</span><span>陈默</span><span>12 分钟阅读</span></div>
<p>这是一个精心设计的 macOS 风格博客界面演示。在实际使用中，这里会展示完整的文章内容，包括正文、代码示例、图片等。</p>
<p>macOS 的设计语言强调清晰、克制与优雅。从窗口的圆角到毛玻璃效果，每一个细节都经过深思熟虑。这个博客页面尝试在 Web 环境中还原这种体验。</p>
<p>你可以尝试拖拽窗口标题栏来移动窗口，点击红黄绿按钮来控制窗口，右键点击桌面打开上下文菜单，或者与 Dock 进行交互。每一个元素都力求真实还原 macOS 的视觉与交互感受。</p>
<p>感谢你的阅读。如果喜欢这个设计，欢迎收藏和分享。</p>
</div>
</div>
</div>
</div>
<script>
lucide.createIcons();
// ========== 菜单栏时间 ==========
function updateTime() {
const now = new Date();
const w = ['日','一','二','三','四','五','六'][now.getDay()];
const s = `周${w} ${now.getMonth()+1}月${now.getDate()}日 ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
document.getElementById('mb-time').textContent = s;
}
updateTime(); setInterval(updateTime, 10000);
// ========== 窗口控制 ==========
const win = document.getElementById('win');
let winHidden = false, isMax = false, origStyle = {};
document.getElementById('btnClose').onclick = () => {
win.style.transition = 'all 0.3s cubic-bezier(0.16,1,0.3,1)';
win.style.opacity = '0';
win.style.transform = (isMax ? 'none' : '') + ' scale(0.9)';
setTimeout(() => { win.style.display = 'none'; winHidden = true; }, 300);
};
document.getElementById('btnMin').onclick = () => {
win.style.transition = 'all 0.45s cubic-bezier(0.16,1,0.3,1)';
win.style.opacity = '0';
win.style.transform = (isMax ? '' : 'translateX(-50%) ') + 'scale(0.5) translateY(300px)';
setTimeout(() => { win.style.display = 'none'; winHidden = true; }, 450);
};
document.getElementById('btnMax').onclick = () => {
win.style.transition = 'all 0.3s cubic-bezier(0.16,1,0.3,1)';
if (!isMax) {
origStyle = {
top: win.style.top, left: win.style.left, width: win.style.width,
height: win.style.height, transform: win.style.transform
};
win.style.top = '25px'; win.style.left = '0'; win.style.transform = 'none';
win.style.width = '100vw'; win.style.height = 'calc(100vh - 78px)';
isMax = true;
} else {
Object.assign(win.style, origStyle);
isMax = false;
}
};
function reopenWin() {
if (!winHidden) return;
winHidden = false;
win.style.display = 'flex';
win.style.transition = 'all 0.35s cubic-bezier(0.16,1,0.3,1)';
requestAnimationFrame(() => {
win.style.opacity = '1';
if (isMax) {
win.style.top = '25px'; win.style.left = '0'; win.style.transform = 'none';
win.style.width = '100vw'; win.style.height = 'calc(100vh - 78px)';
} else {
win.style.top = '45px'; win.style.left = '50%';
win.style.transform = 'translateX(-50%)';
win.style.width = '1120px'; win.style.height = 'calc(100vh - 115px)';
}
});
}
// Dock 博客图标重开
document.querySelectorAll('.dock-item')[4].addEventListener('click', reopenWin);
// ========== 窗口拖拽 ==========
let dragging = false, dragOff = {x:0,y:0};
const titlebar = document.getElementById('titlebar');
titlebar.addEventListener('mousedown', e => {
if (e.target.closest('.traffic-lights') || e.target.closest('.titlebar-actions')) return;
if (isMax) return;
dragging = true;
const r = win.getBoundingClientRect();
dragOff.x = e.clientX - r.left;
dragOff.y = e.clientY - r.top;
win.style.transition = 'none';
win.style.left = r.left + 'px';
win.style.top = r.top + 'px';
win.style.transform = 'none';
});
document.addEventListener('mousemove', e => {
if (!dragging) return;
win.style.left = (e.clientX - dragOff.x) + 'px';
win.style.top = Math.max(25, e.clientY - dragOff.y) + 'px';
});
document.addEventListener('mouseup', () => { if (dragging) { dragging = false; win.style.transition = ''; } });
// ========== 侧边栏 ==========
document.getElementById('btnSidebar').onclick = function() {
const sb = document.getElementById('sidebar');
sb.classList.toggle('collapsed');
this.classList.toggle('active');
};
// ========== 视图切换 ==========
document.getElementById('btnGrid').onclick = function() {
document.getElementById('postsGrid').style.display = 'grid';
this.classList.add('active');
document.getElementById('btnList').classList.remove('active');
};
document.getElementById('btnList').onclick = function() {
document.getElementById('postsGrid').style.display = 'none';
this.classList.add('active');
document.getElementById('btnGrid').classList.remove('active');
};
// ========== 侧边栏导航 ==========
document.querySelectorAll('.sidebar-item').forEach(item => {
item.addEventListener('click', () => {
document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
item.classList.add('active');
const label = item.textContent.trim().split('\n')[0].trim();
document.getElementById('winTitle').textContent = '博客 — ' + label;
});
});
// ========== 搜索 ==========
document.getElementById('searchInput').addEventListener('input', e => {
const q = e.target.value.toLowerCase();
document.querySelectorAll('.post-card').forEach(c => {
c.style.display = c.textContent.toLowerCase().includes(q) ? '' : 'none';
});
document.querySelectorAll('.recent-item').forEach(c => {
c.style.display = c.textContent.toLowerCase().includes(q) ? 'flex' : 'none';
});
document.getElementById('featuredPost').style.display = q ? 'none' : '';
});
// ========== 右键菜单 ==========
const ctx = document.getElementById('ctxMenu');
document.getElementById('desktop').addEventListener('contextmenu', e => {
e.preventDefault();
const x = Math.min(e.clientX, window.innerWidth - 230);
const y = Math.min(e.clientY, window.innerHeight - 250);
ctx.style.left = x + 'px'; ctx.style.top = y + 'px';
ctx.classList.add('show');
});
document.addEventListener('click', () => ctx.classList.remove('show'));
// ========== 通知 ==========
setTimeout(() => {
document.getElementById('notif').classList.add('show');
setTimeout(() => document.getElementById('notif').classList.remove('show'), 4500);
}, 1800);
document.getElementById('notif').addEventListener('click', () => {
document.getElementById('notif').classList.remove('show');
});
// ========== 文章点击打开模态 ==========
const overlay = document.getElementById('modalOverlay');
function openModal(title) {
document.getElementById('modalTitle').textContent = title;
overlay.classList.add('show');
}
document.getElementById('modalClose').onclick = () => overlay.classList.remove('show');
overlay.addEventListener('click', e => { if (e.target === overlay) overlay.classList.remove('show'); });
document.querySelectorAll('[data-title]').forEach(el => {
el.addEventListener('click', () => openModal(el.dataset.title));
});
// ========== Dock 放大邻居效果 ==========
const dock = document.getElementById('dock');
dock.addEventListener('mousemove', e => {
const items = dock.querySelectorAll('.dock-item');
items.forEach(item => {
const rect = item.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const dist = Math.abs(e.clientX - cx);
const maxDist = 100;
const scale = dist < maxDist ? 1 + 0.35 * (1 - dist / maxDist) : 1;
const ty = dist < maxDist ? -12 * (1 - dist / maxDist) : 0;
item.style.transform = `translateY(${ty}px) scale(${scale})`;
});
});
dock.addEventListener('mouseleave', () => {
dock.querySelectorAll('.dock-item').forEach(item => {
item.style.transform = '';
});
});
</script>
</body>
</html>