diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 0ad868c..c1c7e38 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -14,6 +14,32 @@ const { title = siteTitle, description = siteConfig.site.description } = Astro.p const pageTitle = title === siteTitle ? siteTitle : `${title} | ${siteTitle}`; const currentYear = new Date().getFullYear(); const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/ @@ -61,6 +87,10 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/ 搜索 + + +
+ {consoleSites.map((item) => ( + + + + {item.name} + {item.description} + + {new URL(item.href).hostname} + + ))} +
+
+
+ 当前站点 + {siteConfig.site.domain} +
+
+ 站点作者 + {siteConfig.author.name} +
+
+ 运行起点 + {siteConfig.site.startTime.slice(0, 10)} +
+
+ +
@@ -154,6 +224,33 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/ { + 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 root = document.documentElement; diff --git a/src/styles/site.css b/src/styles/site.css index 2d71c18..909f449 100644 --- a/src/styles/site.css +++ b/src/styles/site.css @@ -171,6 +171,7 @@ a { .nav-links a, .nav-random, .nav-search, +.nav-console, .theme-toggle { display: inline-flex; align-items: center; @@ -188,6 +189,7 @@ a { .nav-search, .nav-random, +.nav-console, .theme-toggle { color: inherit; font: inherit; @@ -221,6 +223,7 @@ a { .nav-links a:hover, .nav-random:hover, .nav-search:hover, +.nav-console:hover, .theme-toggle:hover, .site-footer a:hover, .section-heading a:hover { @@ -350,6 +353,7 @@ a { .nav-links a:hover, .nav-random:hover, .nav-search:hover, +.nav-console:hover, .theme-toggle:hover, .nav-menu-toggle:hover { border-color: rgba(255, 255, 255, 0.62); @@ -360,6 +364,204 @@ a { 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 { border-color: rgba(174, 205, 197, 0.2); background: @@ -384,6 +586,7 @@ a { :root[data-theme='dark'] .nav-links a:hover, :root[data-theme='dark'] .nav-random: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'] .nav-menu-toggle:hover { border-color: rgba(114, 222, 210, 0.26); @@ -393,6 +596,40 @@ a { 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 { border-color: rgba(174, 205, 197, 0.2); color: #d8e5e2; @@ -3961,17 +4198,49 @@ meting-js { } .nav-actions { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)); } .nav-links a, .nav-random, .nav-search, + .nav-console, .theme-toggle { width: 100%; 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 { min-height: 38px; }