mirror of
https://github.com/afoim/fuwari.git
synced 2026-01-31 00:53:19 +08:00
feat(settings): 添加开发模式开关和服务器信息显示功能
在设置面板中添加开发模式开关，允许用户手动设置服务器信息 修改页脚显示逻辑，根据开发模式状态显示自定义服务器信息或实际服务器信息 添加服务器图标显示功能，支持EdgeOne和Cloudflare的图标显示
This commit is contained in:
二叉树树
63
public/cdn/cf.svg
Normal file
63
public/cdn/cf.svg
Normal file
@@ -0,0 +1,63 @@
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1239.3 310.1" style="enable-background:new 0 0 1239.3 310.1;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#404041;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
.st2{fill:#F38020;}
|
||||
.st3{fill:#FAAE40;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M1158.5,187.7c-3.4,0-6.1-2.7-6.1-6.1c0-3.3,2.7-6.1,6.1-6.1c3.3,0,6.1,2.7,6.1,6.1
|
||||
C1164.6,185,1161.8,187.7,1158.5,187.7 M1158.5,176.7c-2.7,0-4.9,2.2-4.9,4.9c0,2.7,2.2,4.9,4.9,4.9c2.7,0,4.9-2.2,4.9-4.9
|
||||
C1163.4,178.9,1161.2,176.7,1158.5,176.7 M1161.6,184.8h-1.4l-1.2-2.3h-1.6v2.3h-1.3v-6.7h3.2c1.4,0,2.3,0.9,2.3,2.2
|
||||
c0,1-0.6,1.7-1.4,2L1161.6,184.8z M1159.2,181.3c0.5,0,1-0.3,1-1c0-0.8-0.4-1-1-1h-2v2L1159.2,181.3L1159.2,181.3z">
|
||||
</path>
|
||||
<polygon class="st0" points="523,174.9 538.6,174.9 538.6,217.4 565.7,217.4 565.7,231 523,231 ">
|
||||
</polygon>
|
||||
<path class="st0" d="M581.8,203.1V203c0-16.1,13-29.2,30.3-29.2s30.1,12.9,30.1,29v0.2c0,16.1-13,29.2-30.3,29.2
|
||||
C594.7,232.1,581.8,219.2,581.8,203.1 M626.4,203.1V203c0-8.1-5.8-15.1-14.4-15.1c-8.5,0-14.2,6.9-14.2,15v0.2
|
||||
c0,8.1,5.8,15.1,14.3,15.1C620.7,218.1,626.4,211.2,626.4,203.1">
|
||||
</path>
|
||||
<path class="st0" d="M661.3,206.4v-31.5h15.8v31.2c0,8.1,4.1,11.9,10.3,11.9s10.3-3.7,10.3-11.5v-31.6h15.8V206
|
||||
c0,18.1-10.3,26-26.3,26C671.3,232.1,661.3,224,661.3,206.4">
|
||||
</path>
|
||||
<path class="st0" d="M737.3,174.9H759c20,0,31.7,11.5,31.7,27.7v0.2c0,16.2-11.8,28.2-32,28.2h-21.3L737.3,174.9L737.3,174.9z
|
||||
M759.2,217.2c9.3,0,15.5-5.1,15.5-14.2v-0.2c0-9-6.2-14.2-15.5-14.2h-6.3v28.5L759.2,217.2L759.2,217.2z">
|
||||
</path>
|
||||
<polygon class="st0" points="813.2,174.9 858.1,174.9 858.1,188.6 828.7,188.6 828.7,198.1 855.3,198.1 855.3,211 828.7,211
|
||||
828.7,231 813.2,231 ">
|
||||
</polygon>
|
||||
<polygon class="st0" points="879.7,174.9 895.2,174.9 895.2,217.4 922.4,217.4 922.4,231 879.7,231 ">
|
||||
</polygon>
|
||||
<path class="st0" d="M963,174.5h15l23.9,56.5h-16.7l-4.1-10h-21.6l-4,10h-16.3L963,174.5z M976.7,208.9l-6.2-15.9l-6.3,15.9H976.7
|
||||
z">
|
||||
</path>
|
||||
<path class="st0" d="M1021.9,174.9h26.5c8.6,0,14.5,2.2,18.3,6.1c3.3,3.2,5,7.5,5,13.1v0.2c0,8.6-4.6,14.3-11.5,17.2l13.4,19.6
|
||||
h-18l-11.3-17h-6.8v17h-15.5L1021.9,174.9L1021.9,174.9z M1047.7,201.9c5.3,0,8.3-2.6,8.3-6.6V195c0-4.4-3.2-6.6-8.4-6.6h-10.2
|
||||
v13.5L1047.7,201.9L1047.7,201.9z">
|
||||
</path>
|
||||
<polygon class="st0" points="1094.1,174.9 1139.2,174.9 1139.2,188.2 1109.5,188.2 1109.5,196.6 1136.4,196.6 1136.4,208.9
|
||||
1109.5,208.9 1109.5,217.8 1139.6,217.8 1139.6,231 1094.1,231 ">
|
||||
</polygon>
|
||||
<path class="st0" d="M489,209.7c-2.2,4.9-6.8,8.4-12.8,8.4c-8.5,0-14.3-7.1-14.3-15.1v-0.2c0-8.1,5.7-15,14.2-15
|
||||
c6.4,0,11.3,3.9,13.3,9.3h16.4c-2.6-13.4-14.4-23.3-29.6-23.3c-17.3,0-30.3,13.1-30.3,29.2v0.2c0,16.1,12.8,29,30.1,29
|
||||
c14.8,0,26.4-9.6,29.4-22.4L489,209.7L489,209.7z">
|
||||
</path>
|
||||
</g>
|
||||
<g>
|
||||
<polygon class="st1" points="391.1,169.6 348.2,145 340.8,141.8 165.3,143.1 165.3,232.1 391.1,232.2 ">
|
||||
</polygon>
|
||||
<path class="st2" d="M313,224c2.1-7.2,1.3-13.8-2.2-18.7c-3.2-4.5-8.6-7.1-15.1-7.4l-123.1-1.6c-0.8,0-1.5-0.4-1.9-1
|
||||
c-0.4-0.6-0.5-1.4-0.3-2.2c0.4-1.2,1.6-2.1,2.9-2.2l124.2-1.6c14.7-0.7,30.7-12.6,36.3-27.2l7.1-18.5c0.3-0.8,0.4-1.6,0.2-2.4
|
||||
c-8-36.2-40.3-63.2-78.9-63.2c-35.6,0-65.8,23-76.6,54.9c-7-5.2-15.9-8-25.5-7.1c-17.1,1.7-30.8,15.4-32.5,32.5
|
||||
c-0.4,4.4-0.1,8.7,0.9,12.7c-27.9,0.8-50.2,23.6-50.2,51.7c0,2.5,0.2,5,0.5,7.5c0.2,1.2,1.2,2.1,2.4,2.1l227.2,0
|
||||
c1.3,0,2.5-0.9,2.9-2.2L313,224z">
|
||||
</path>
|
||||
<path class="st3" d="M352.2,144.9c-1.1,0-2.3,0-3.4,0.1c-0.8,0-1.5,0.6-1.8,1.4l-4.8,16.7c-2.1,7.2-1.3,13.8,2.2,18.7
|
||||
c3.2,4.5,8.6,7.1,15.1,7.4l26.2,1.6c0.8,0,1.5,0.4,1.9,1c0.4,0.6,0.5,1.5,0.3,2.2c-0.4,1.2-1.6,2.1-2.9,2.2l-27.3,1.6
|
||||
c-14.8,0.7-30.7,12.6-36.3,27.2l-2,5.1c-0.4,1,0.3,2,1.4,2h93.8c1.1,0,2.1-0.7,2.4-1.8c1.6-5.8,2.5-11.9,2.5-18.2
|
||||
C419.5,175,389.4,144.9,352.2,144.9">
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/cdn/eo.png
Normal file
BIN
public/cdn/eo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
@@ -27,7 +27,7 @@ try {
|
||||
|
||||
|
||||
<!--<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-32"></div>
|
||||
<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">
|
||||
© <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>，采用
|
||||
@@ -47,22 +47,69 @@ try {
|
||||
|
||||
<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>
|
||||
<span id="server-info" class="text-black/30 dark:text-white/30 text-xs"></span>
|
||||
<div class="server-info-wrapper flex items-center justify-center">
|
||||
<span class="server-info text-black/30 dark:text-white/30 text-xs"></span>
|
||||
<img class="server-icon h-5 ml-1 hidden bg-white rounded p-0.5" alt="Server Icon">
|
||||
</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>
|
||||
fetch(window.location.href, { method: "HEAD" }).then(response => {
|
||||
const server = response.headers.get('server');
|
||||
const serverInfo = document.getElementById('server-info');
|
||||
if (serverInfo) {
|
||||
if (server) {
|
||||
serverInfo.innerText = `访问节点：${server}`;
|
||||
} else {
|
||||
serverInfo.innerText = "访问节点：未知";
|
||||
function updateServerInfo(server) {
|
||||
const wrappers = document.querySelectorAll('.server-info-wrapper');
|
||||
wrappers.forEach(wrapper => {
|
||||
const serverInfo = wrapper.querySelector('.server-info');
|
||||
const serverIcon = wrapper.querySelector('.server-icon');
|
||||
if (serverInfo) {
|
||||
if (server) {
|
||||
serverInfo.innerText = `访问节点：${server}`;
|
||||
if (serverIcon) {
|
||||
const serverLower = server.toLowerCase();
|
||||
if (serverLower === 'edgeone-pages') {
|
||||
serverIcon.src = '/cdn/eo.png';
|
||||
serverIcon.classList.remove('hidden');
|
||||
serverInfo.classList.add('hidden');
|
||||
} else if (serverLower === 'cloudflare') {
|
||||
serverIcon.src = '/cdn/cf.svg';
|
||||
serverIcon.classList.remove('hidden');
|
||||
serverInfo.classList.add('hidden');
|
||||
} else {
|
||||
serverIcon.classList.add('hidden');
|
||||
serverInfo.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
serverInfo.innerText = "访问节点：未知";
|
||||
serverInfo.classList.remove('hidden');
|
||||
if (serverIcon) serverIcon.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initServerInfo() {
|
||||
const isDevMode = localStorage.getItem("dev-mode") === "true";
|
||||
if (isDevMode) {
|
||||
const devServer = localStorage.getItem("dev-server");
|
||||
updateServerInfo(devServer);
|
||||
} else {
|
||||
const url = window.location.href;
|
||||
fetch(url, { method: "HEAD" })
|
||||
.then(response => {
|
||||
const server = response.headers.get('server');
|
||||
updateServerInfo(server);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Failed to fetch server info:", error);
|
||||
updateServerInfo(null);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initServerInfo();
|
||||
document.addEventListener('astro:after-swap', initServerInfo); // Support View Transitions if enabled
|
||||
// Support Swup if enabled (listen to content replacement)
|
||||
document.addEventListener('content:replace', initServerInfo);
|
||||
</script>
|
||||
|
||||
@@ -16,6 +16,10 @@ import {
|
||||
setBgHueRotate,
|
||||
getHideBg,
|
||||
setHideBg,
|
||||
getDevMode,
|
||||
setDevMode,
|
||||
getDevServer,
|
||||
setDevServer,
|
||||
} from "@utils/setting-utils";
|
||||
import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "@constants/constants";
|
||||
|
||||
@@ -25,6 +29,8 @@ let isRainbowMode = getRainbowMode();
|
||||
let rainbowSpeed = getRainbowSpeed();
|
||||
let bgBlur = getBgBlur();
|
||||
let hideBg = getHideBg();
|
||||
let isDevMode = getDevMode();
|
||||
let devServer = getDevServer();
|
||||
let animationId: number;
|
||||
let lastUpdate = 0;
|
||||
let rainbowHue = 0; // Independent hue for background rotation
|
||||
@@ -77,6 +83,15 @@ function toggleHideBg() {
|
||||
setHideBg(hideBg);
|
||||
}
|
||||
|
||||
function toggleDevMode() {
|
||||
isDevMode = !isDevMode;
|
||||
setDevMode(isDevMode);
|
||||
}
|
||||
|
||||
function onDevServerChange() {
|
||||
setDevServer(devServer);
|
||||
}
|
||||
|
||||
function onSpeedChange() {
|
||||
setRainbowSpeed(rainbowSpeed);
|
||||
}
|
||||
@@ -207,6 +222,32 @@ onMount(() => {
|
||||
<input aria-label="背景模糊" type="range" min="0" max="20" bind:value={bgBlur}
|
||||
class="slider" step="1" style="width: 100%">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2 mb-3 mt-3 items-center justify-between">
|
||||
<div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
|
||||
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
|
||||
before:absolute before:-left-3 before:top-[0.33rem]"
|
||||
>
|
||||
开发模式
|
||||
</div>
|
||||
<input type="checkbox" class="toggle-switch" checked={isDevMode} on:change={toggleDevMode} />
|
||||
</div>
|
||||
|
||||
{#if isDevMode}
|
||||
<div class="flex flex-row gap-2 mb-3 items-center justify-between transition-all" >
|
||||
<div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
|
||||
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
|
||||
before:absolute before:-left-3 before:top-[0.33rem]"
|
||||
>
|
||||
Server
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<input aria-label="Server Value" type="text" bind:value={devServer} on:input={onDevServerChange}
|
||||
class="transition bg-[var(--btn-regular-bg)] w-32 h-7 rounded-md text-center font-bold text-sm text-[var(--btn-content)] outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -94,6 +94,24 @@ export function setHideBg(hide: boolean): void {
|
||||
}
|
||||
}
|
||||
|
||||
export function getDevMode(): boolean {
|
||||
const stored = localStorage.getItem("dev-mode");
|
||||
return stored === "true";
|
||||
}
|
||||
|
||||
export function setDevMode(enabled: boolean): void {
|
||||
localStorage.setItem("dev-mode", String(enabled));
|
||||
}
|
||||
|
||||
export function getDevServer(): string {
|
||||
const stored = localStorage.getItem("dev-server");
|
||||
return stored || "";
|
||||
}
|
||||
|
||||
export function setDevServer(server: string): void {
|
||||
localStorage.setItem("dev-server", server);
|
||||
}
|
||||
|
||||
export function applyThemeToDocument(theme: LIGHT_DARK_MODE) {
|
||||
switch (theme) {
|
||||
case LIGHT_MODE:
|
||||
|
||||
Reference in New Issue
Block a user