Files
fuwari/src/components/Footer.astro
二叉树树 7ec997337d feat(Footer): 添加开发模式下的服务器信息显示逻辑
在页脚组件中添加开发模式检测逻辑,当检测到开发模式时,显示本地存储中配置的开发服务器信息,而不是常规服务器信息
2026-01-18 02:13:32 +08:00

182 lines
8.0 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
import { execSync } from "node:child_process";
import { profileConfig, siteConfig } from "../config";
import { url } from "../utils/url-utils";
const currentYear = new Date().getFullYear();
let commitHash = "unknown";
let buildDate = "unknown";
try {
commitHash = execSync("git rev-parse --short=7 HEAD").toString().trim();
const date = new Date();
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const hours = date.getHours().toString().padStart(2, "0");
const minutes = date.getMinutes().toString().padStart(2, "0");
const seconds = date.getSeconds().toString().padStart(2, "0");
buildDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} catch (e) {
console.warn("Failed to get git info", e);
}
---
<!--<div class="border-t border-[var(--primary)] mx-16 border-dashed py-8 max-w-[var(--page-width)] flex flex-col items-center justify-center px-6">-->
<div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-4 md:mx-32"></div>
<div class="card-base w-fit mx-auto rounded-xl mt-4 mb-4">
<div class="transition text-50 text-sm text-center p-6">
&copy; <span id="copyright-year">2024 - {currentYear}</span> <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://space.bilibili.com/325903362"> {profileConfig.name} </a>,采用
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可
<br>
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>网站地图</a>
<br>
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> 和
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a> 强力驱动
<br>
本网站代码
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/afoim/fuwari">已开源</a>
<a class="transition link text-black/30 dark:text-white/30 hover:text-[var(--primary)] text-xs ml-1" target="_blank" href={`https://github.com/afoim/fuwari/commit/${commitHash}`}>({commitHash} @ {buildDate})</a>
<br>
<a class="transition link text-[var(--primary)] font-medium inline-flex items-center" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"><img alt="" src="/favicon/foot-icp.png" class="h-4 mr-1">皖ICP备2025099787号-2</a>
<br>
<div class="server-info-container flex flex-col items-center justify-center gap-1 mt-1">
<!-- Server info will be injected here -->
</div>
<!-- <a class="transition link text-[var(--primary)] font-medium inline-flex items-center" href="https://beian.mps.gov.cn/#/query/webSearch?code=34010302002608" target="_blank"><img alt="" src="/favicon/foot-ga.png" class="h-4 mr-1">皖公网安备34010302002608号</a>
<br> -->
</div>
</div>
<script is:inline define:vars={{ serverConfig: siteConfig.server || [] }}>
(() => {
if (window.__footerServerInit) return;
window.__footerServerInit = true;
function normalizeUrl(input) {
if (!input) return "";
return input.trim().replace(/:+$/, "");
}
function createServerEntry(config) {
const div = document.createElement('div');
div.className = 'flex items-center justify-center';
const label = document.createElement('span');
label.className = 'text-black/30 dark:text-white/30 text-xs mr-1';
label.innerText = `${config.text}`;
div.appendChild(label);
const valueSpan = document.createElement('span');
valueSpan.className = 'server-value text-black/30 dark:text-white/30 text-xs';
valueSpan.innerText = '检测中...';
div.appendChild(valueSpan);
const iconImg = document.createElement('img');
iconImg.className = 'server-icon h-4 ml-1 hidden';
iconImg.alt = 'Server Icon';
div.appendChild(iconImg);
return { div, valueSpan, iconImg };
}
function updateEntryDisplay(elements, server) {
const { valueSpan, iconImg } = elements;
if (server) {
const serverLower = server.toLowerCase();
let iconSrc = null;
if (serverLower.includes('esa')) {
iconSrc = '/cdn/esa.svg';
} else if (serverLower.includes('edgeone')) {
iconSrc = '/cdn/eo.svg';
} else if (serverLower.includes('cloudflare')) {
iconSrc = '/cdn/cf.svg';
}
if (iconSrc) {
iconImg.src = iconSrc;
iconImg.classList.remove('hidden');
valueSpan.classList.add('hidden');
} else {
valueSpan.innerText = server;
iconImg.classList.add('hidden');
valueSpan.classList.remove('hidden');
}
} else {
valueSpan.innerText = "未知";
iconImg.classList.add('hidden');
valueSpan.classList.remove('hidden');
}
}
async function checkServer(url) {
try {
const targetUrl = normalizeUrl(url) || window.location.href;
const response = await fetch(targetUrl, { method: "HEAD" });
return response.headers.get('server');
} catch (error) {
console.warn(`Failed to fetch server info for ${url}:`, error);
return null;
}
}
async function initServerInfo() {
const containers = document.querySelectorAll('.server-info-container');
if (containers.length === 0) return;
// Check for Dev Mode
const isDevMode = localStorage.getItem("dev-mode") === "true";
if (isDevMode) {
const devServer = localStorage.getItem("dev-server");
containers.forEach(container => {
container.innerHTML = '';
const elements = createServerEntry({ text: 'Dev Node' });
container.appendChild(elements.div);
updateEntryDisplay(elements, devServer);
});
return;
}
window.__serverInfoCache = window.__serverInfoCache || {};
const cache = window.__serverInfoCache;
const getServerInfo = (url) => {
const key = normalizeUrl(url);
if (cache[key]) return cache[key];
cache[key] = checkServer(key);
return cache[key];
};
containers.forEach(container => {
container.innerHTML = '';
if (!serverConfig || serverConfig.length === 0) {
const elements = createServerEntry({ text: '访问节点' });
container.appendChild(elements.div);
getServerInfo('').then(server => updateEntryDisplay(elements, server));
return;
}
serverConfig.forEach((config) => {
const elements = createServerEntry(config);
container.appendChild(elements.div);
getServerInfo(config.url).then(server => updateEntryDisplay(elements, server));
});
});
}
initServerInfo();
document.addEventListener('astro:after-swap', initServerInfo);
document.addEventListener('content:replace', initServerInfo);
})();
</script>