biss/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

中控台

Browse Source
This commit is contained in:
biss
2026-06-20 10:01:30 +08:00 Unverified
parent d2ba45de91
commit 2abe35fa4e
2 changed files with 367 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/BaseLayout.astro
+97
View File
@@ -14,6 +14,32 @@ const { title = siteTitle, description = siteConfig.site.description } = Astro.p
const pageTitle = title === siteTitle ? siteTitle : `${title} | ${siteTitle}`; const pageTitle = title === siteTitle ? siteTitle : `${title} | ${siteTitle}`;
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c'); const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c');
const consoleSites = [
{
name: '主站入口',
href: 'https://biss.click',
description: '个人主页与常用入口集合',
icon: 'fa-solid fa-house-chimney',
},
{
name: '说说动态',
href: 'https://mm.biss.click',
description: '短句、碎片记录和近况更新',
icon: 'fa-regular fa-comments',
},
{
name: '评论系统',
href: siteConfig.comments.envId,
description: 'Twikoo 评论服务与访客互动',
icon: 'fa-solid fa-message',
},
{
name: '站点统计',
href: siteConfig.analytics.umami.script.replace('/script.js', ''),
description: 'Umami 访问统计与站点数据',
icon: 'fa-solid fa-chart-line',
},
];
--- ---
<!doctype html> <!doctype html>
@@ -61,6 +87,10 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
<i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i> <i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i>
<span>搜索</span> <span>搜索</span>
</button> </button>
<button class="nav-console" type="button" aria-label="打开中控台" title="中控台" data-console-open>
<i class="fa-solid fa-gauge-high nav-icon" aria-hidden="true"></i>
<span>中控台</span>
</button>
<button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle> <button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle>
<i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i> <i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i>
<i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i> <i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i>
@@ -69,6 +99,46 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
</div> </div>
</nav> </nav>
</header> </header>
<div class="control-console" data-console-modal aria-hidden="true">
<div class="control-console-backdrop" data-console-close></div>
<section class="control-console-panel" role="dialog" aria-modal="true" aria-labelledby="control-console-title" tabindex="-1">
<header class="control-console-head">
<div>
<p>CONTROL CENTER</p>
<h2 id="control-console-title">中控台</h2>
</div>
<button class="control-console-close" type="button" aria-label="关闭中控台" title="关闭" data-console-close>
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</button>
</header>
<div class="control-console-grid">
{consoleSites.map((item) => (
<a class="control-site-card" href={item.href} target="_blank" rel="noreferrer">
<i class={item.icon} aria-hidden="true"></i>
<span>
<strong>{item.name}</strong>
<em>{item.description}</em>
</span>
<small>{new URL(item.href).hostname}</small>
</a>
))}
</div>
<div class="control-console-info" aria-label="站点信息">
<section>
<span>当前站点</span>
<strong>{siteConfig.site.domain}</strong>
</section>
<section>
<span>站点作者</span>
<strong>{siteConfig.author.name}</strong>
</section>
<section>
<span>运行起点</span>
<strong>{siteConfig.site.startTime.slice(0, 10)}</strong>
</section>
</div>
</section>
</div>
<main> <main>
<slot /> <slot />
</main> </main>
@@ -154,6 +224,33 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
}); });
})(); })();
(() => {
const modal = document.querySelector('[data-console-modal]');
const panel = modal?.querySelector('.control-console-panel');
const openButtons = document.querySelectorAll('[data-console-open]');
const closeButtons = modal?.querySelectorAll('[data-console-close]') || [];
if (!modal || !panel || openButtons.length === 0) return;
function setConsole(open) {
modal.classList.toggle('is-open', open);
modal.setAttribute('aria-hidden', String(!open));
document.body.classList.toggle('has-control-console', open);
if (open) panel.focus();
}
openButtons.forEach((button) => {
button.addEventListener('click', () => setConsole(true));
});
closeButtons.forEach((button) => {
button.addEventListener('click', () => setConsole(false));
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && modal.classList.contains('is-open')) setConsole(false);
});
})();
(() => { (() => {
const storageKey = 'site-theme'; const storageKey = 'site-theme';
const root = document.documentElement; const root = document.documentElement;
src/styles/site.css
+270 -1
View File
@@ -171,6 +171,7 @@ a {
.nav-links a, .nav-links a,
.nav-random, .nav-random,
.nav-search, .nav-search,
.nav-console,
.theme-toggle { .theme-toggle {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -188,6 +189,7 @@ a {
.nav-search, .nav-search,
.nav-random, .nav-random,
.nav-console,
.theme-toggle { .theme-toggle {
color: inherit; color: inherit;
font: inherit; font: inherit;
@@ -221,6 +223,7 @@ a {
.nav-links a:hover, .nav-links a:hover,
.nav-random:hover, .nav-random:hover,
.nav-search:hover, .nav-search:hover,
.nav-console:hover,
.theme-toggle:hover, .theme-toggle:hover,
.site-footer a:hover, .site-footer a:hover,
.section-heading a:hover { .section-heading a:hover {
@@ -350,6 +353,7 @@ a {
.nav-links a:hover, .nav-links a:hover,
.nav-random:hover, .nav-random:hover,
.nav-search:hover, .nav-search:hover,
.nav-console:hover,
.theme-toggle:hover, .theme-toggle:hover,
.nav-menu-toggle:hover { .nav-menu-toggle:hover {
border-color: rgba(255, 255, 255, 0.62); border-color: rgba(255, 255, 255, 0.62);
@@ -360,6 +364,204 @@ a {
transform: translateY(-1px); transform: translateY(-1px);
} }
.has-control-console {
overflow: hidden;
}
.control-console {
position: fixed;
inset: 0;
z-index: 900;
display: grid;
place-items: center;
padding: var(--page-gutter);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.control-console.is-open {
opacity: 1;
pointer-events: auto;
}
.control-console-backdrop {
position: absolute;
inset: 0;
background: rgba(28, 37, 42, 0.36);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.control-console-panel {
position: relative;
width: min(880px, 100%);
max-height: min(760px, calc(100vh - (var(--page-gutter) * 2)));
overflow: auto;
border: 1px solid rgba(255, 255, 255, 0.58);
border-radius: 8px;
padding: clamp(20px, 4vw, 30px);
background:
radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.76), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(226, 248, 241, 0.48)),
rgba(255, 253, 248, 0.88);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 28px 80px rgba(44, 55, 63, 0.24);
backdrop-filter: blur(20px) saturate(165%);
-webkit-backdrop-filter: blur(20px) saturate(165%);
transform: translateY(10px) scale(0.98);
transition: transform 0.18s ease;
}
.control-console.is-open .control-console-panel {
transform: translateY(0) scale(1);
}
.control-console-panel:focus {
outline: 0;
}
.control-console-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.control-console-head p {
margin: 0 0 4px;
color: var(--accent);
font-size: 0.78rem;
font-weight: 800;
}
.control-console-head h2 {
margin: 0;
color: #20242a;
font-size: clamp(1.8rem, 5vw, 2.7rem);
line-height: 1.08;
}
.control-console-close {
display: grid;
width: 40px;
height: 40px;
place-items: center;
flex: 0 0 auto;
border: 1px solid rgba(15, 118, 110, 0.16);
border-radius: 999px;
color: var(--accent);
font: inherit;
background: rgba(236, 253, 245, 0.64);
cursor: pointer;
transition:
color 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease;
}
.control-console-close:hover {
color: #fff;
background: #3eb8be;
transform: translateY(-1px);
}
.control-console-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.control-site-card {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 14px;
align-items: center;
min-width: 0;
border: 1px solid rgba(15, 118, 110, 0.14);
border-radius: 8px;
padding: 16px;
background: rgba(236, 253, 245, 0.58);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
transition:
border-color 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease;
}
.control-site-card:hover {
border-color: rgba(15, 118, 110, 0.28);
background: rgba(236, 253, 245, 0.78);
transform: translateY(-2px);
}
.control-site-card > i {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border-radius: 8px;
color: #fff;
background: #3eb8be;
}
.control-site-card span {
display: grid;
min-width: 0;
gap: 3px;
}
.control-site-card strong {
color: #33433f;
font-size: 1.04rem;
line-height: 1.25;
}
.control-site-card em,
.control-site-card small {
overflow: hidden;
color: var(--muted);
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
.control-site-card small {
grid-column: 2;
font-size: 0.82rem;
}
.control-console-info {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.control-console-info section {
display: grid;
gap: 4px;
border: 1px solid rgba(222, 216, 204, 0.72);
border-radius: 8px;
padding: 14px;
background: rgba(255, 253, 248, 0.56);
}
.control-console-info span {
color: var(--muted);
font-size: 0.84rem;
font-weight: 700;
}
.control-console-info strong {
min-width: 0;
overflow-wrap: anywhere;
color: #2f4358;
font-size: 1rem;
}
:root[data-theme='dark'] .nav { :root[data-theme='dark'] .nav {
border-color: rgba(174, 205, 197, 0.2); border-color: rgba(174, 205, 197, 0.2);
background: background:
@@ -384,6 +586,7 @@ a {
:root[data-theme='dark'] .nav-links a:hover, :root[data-theme='dark'] .nav-links a:hover,
:root[data-theme='dark'] .nav-random:hover, :root[data-theme='dark'] .nav-random:hover,
:root[data-theme='dark'] .nav-search:hover, :root[data-theme='dark'] .nav-search:hover,
:root[data-theme='dark'] .nav-console:hover,
:root[data-theme='dark'] .theme-toggle:hover, :root[data-theme='dark'] .theme-toggle:hover,
:root[data-theme='dark'] .nav-menu-toggle:hover { :root[data-theme='dark'] .nav-menu-toggle:hover {
border-color: rgba(114, 222, 210, 0.26); border-color: rgba(114, 222, 210, 0.26);
@@ -393,6 +596,40 @@ a {
0 8px 18px rgba(0, 0, 0, 0.18); 0 8px 18px rgba(0, 0, 0, 0.18);
} }
:root[data-theme='dark'] .control-console-backdrop {
background: rgba(3, 10, 12, 0.58);
}
:root[data-theme='dark'] .control-console-panel {
border-color: rgba(174, 205, 197, 0.18);
background:
radial-gradient(circle at 14% 0%, rgba(114, 222, 210, 0.1), transparent 34%),
linear-gradient(145deg, rgba(28, 43, 47, 0.88), rgba(12, 22, 25, 0.8)),
rgba(17, 28, 31, 0.82);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 28px 80px rgba(0, 0, 0, 0.38);
}
:root[data-theme='dark'] .control-console-head h2,
:root[data-theme='dark'] .control-site-card strong,
:root[data-theme='dark'] .control-console-info strong {
color: #edf7f5;
}
:root[data-theme='dark'] .control-site-card,
:root[data-theme='dark'] .control-console-info section,
:root[data-theme='dark'] .control-console-close {
border-color: rgba(114, 222, 210, 0.2);
background: rgba(114, 222, 210, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:root[data-theme='dark'] .control-console-close:hover {
color: #081315;
background: var(--accent);
}
:root[data-theme='dark'] .custom-context-menu { :root[data-theme='dark'] .custom-context-menu {
border-color: rgba(174, 205, 197, 0.2); border-color: rgba(174, 205, 197, 0.2);
color: #d8e5e2; color: #d8e5e2;
@@ -3961,17 +4198,49 @@ meting-js {
} }
.nav-actions { .nav-actions {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
} }
.nav-links a, .nav-links a,
.nav-random, .nav-random,
.nav-search, .nav-search,
.nav-console,
.theme-toggle { .theme-toggle {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
.control-console {
align-items: end;
padding: 14px;
}
.control-console-panel {
max-height: calc(100vh - 28px);
border-radius: 8px;
padding: 18px;
}
.control-console-grid,
.control-console-info {
grid-template-columns: 1fr;
}
.control-site-card {
grid-template-columns: 40px minmax(0, 1fr);
gap: 12px;
padding: 14px;
}
.control-site-card > i {
width: 40px;
height: 40px;
}
.control-site-card small {
grid-column: 1 / -1;
}
.theme-toggle { .theme-toggle {
min-height: 38px; min-height: 38px;
} }