中控台

2026-06-20 10:01:30 +08:00
parent d2ba45de91
commit 2abe35fa4e
2 changed files with 367 additions and 1 deletions
@@ -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(/</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>
@@ -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>
              <span>搜索</span>
            </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>
              <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>
@@ -69,6 +99,46 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
        </div>
      </nav>
    </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>
      <slot />
    </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 root = document.documentElement;