+ {/* Silk 背景 */}
+
+ );
+}
diff --git a/src/components/background/BackgroundLayer.tsx b/src/components/background/BackgroundLayer.tsx
index 0d80e5b..780792b 100644
--- a/src/components/background/BackgroundLayer.tsx
+++ b/src/components/background/BackgroundLayer.tsx
@@ -9,7 +9,7 @@ export function BackgroundLayer() {
const { type, image, color, blur, opacity, animationSpeed, fetchConfig } = useBackgroundStore();
const route = useRouteStore((s) => s.current);
const forceDisableContentBlur = useDevStore((s) => s.forceDisableContentBlur);
- const inSetting = route === "setting" || route === "debug";
+ const showContentBlur = route !== "home";
useEffect(() => {
fetchConfig();
@@ -82,7 +82,10 @@ export function BackgroundLayer() {
}
`}
- {inSetting && !forceDisableContentBlur && }
+
);
diff --git a/src/components/silk/Silk.tsx b/src/components/silk/Silk.tsx
new file mode 100644
index 0000000..d534da3
--- /dev/null
+++ b/src/components/silk/Silk.tsx
@@ -0,0 +1,130 @@
+/* eslint-disable react/no-unknown-property */
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { forwardRef, useRef, useMemo, useLayoutEffect } from "react";
+import { Color, type Mesh, type ShaderMaterial } from "three";
+
+const hexToNormalizedRGB = (hex: string) => {
+ hex = hex.replace("#", "");
+ return [
+ parseInt(hex.slice(0, 2), 16) / 255,
+ parseInt(hex.slice(2, 4), 16) / 255,
+ parseInt(hex.slice(4, 6), 16) / 255,
+ ];
+};
+
+const vertexShader = `
+varying vec2 vUv;
+varying vec3 vPosition;
+
+void main() {
+ vPosition = position;
+ vUv = uv;
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+
+const fragmentShader = `
+varying vec2 vUv;
+varying vec3 vPosition;
+
+uniform float uTime;
+uniform vec3 uColor;
+uniform float uSpeed;
+uniform float uScale;
+uniform float uRotation;
+uniform float uNoiseIntensity;
+
+const float e = 2.71828182845904523536;
+
+float noise(vec2 texCoord) {
+ float G = e;
+ vec2 r = (G * sin(G * texCoord));
+ return fract(r.x * r.y * (1.0 + texCoord.x));
+}
+
+vec2 rotateUvs(vec2 uv, float angle) {
+ float c = cos(angle);
+ float s = sin(angle);
+ mat2 rot = mat2(c, -s, s, c);
+ return rot * uv;
+}
+
+void main() {
+ float rnd = noise(gl_FragCoord.xy);
+ vec2 uv = rotateUvs(vUv * uScale, uRotation);
+ vec2 tex = uv * uScale;
+ float tOffset = uSpeed * uTime;
+
+ tex.y += 0.03 * sin(8.0 * tex.x - tOffset);
+
+ float pattern = 0.6 +
+ 0.4 * sin(5.0 * (tex.x + tex.y +
+ cos(3.0 * tex.x + 5.0 * tex.y) +
+ 0.02 * tOffset) +
+ sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));
+
+ vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity;
+ col.a = 1.0;
+ gl_FragColor = col;
+}
+`;
+
+interface SilkPlaneProps {
+ uniforms: Record
+
+
+ {/* 磨砂层 */}
+
+
+ {/* 内容层 */}
+
+ {/* 版本类型 */}
+
+ {label}
+
+
+ {/* Logo */}
+ 
+
+ {/* 版本号 */}
+
+
+
+ {/* 版本号 */}
+ v{VERSION}
+ + {/* 按钮组 */} +
+ {effectiveState === "latest" && (
+ <>
+
+
+
+ )}
+
+ {effectiveState === "hasUpdate" && (
+ <>
+
+ 有新的版本可用
+
+
+
+
+ )}
+
+ {effectiveState === "installed" && (
+ <>
+
+ 更新已下载
+
+
+
+ )}
+
+
+ {showBadge && (
+
+ {badgeLabel}
+
+ )}
{showMinimize && (