前端：修复粒子动画，模式切换，滚动导致导航栏被覆盖
This commit is contained in:
parent
76ee04bdde
commit
3f52d609a3
@ -7,41 +7,54 @@ import {
|
||||
} from "@remix-run/react";
|
||||
import { NotificationProvider } from "hooks/notification";
|
||||
import { Theme } from "@radix-ui/themes";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ThemeScript } from "hooks/themeMode";
|
||||
|
||||
import "~/index.css";
|
||||
|
||||
export function Layout() {
|
||||
return (
|
||||
<html lang="en" className="h-full light" suppressHydrationWarning={true}>
|
||||
<html
|
||||
lang="en"
|
||||
className="h-full"
|
||||
suppressHydrationWarning={true}
|
||||
>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="generator" content="echoes" />
|
||||
<title>Echoes</title>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
function getInitialTheme() {
|
||||
const savedTheme = localStorage.getItem('theme-preference');
|
||||
if (savedTheme) return savedTheme;
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
}
|
||||
|
||||
document.documentElement.className = getInitialTheme();
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1"
|
||||
/>
|
||||
<meta
|
||||
name="generator"
|
||||
content="echoes"
|
||||
/>
|
||||
<meta
|
||||
httpEquiv="Cache-Control"
|
||||
content="no-cache, no-store, must-revalidate"
|
||||
/>
|
||||
<meta
|
||||
httpEquiv="Pragma"
|
||||
content="no-cache"
|
||||
/>
|
||||
<meta
|
||||
httpEquiv="Expires"
|
||||
content="0"
|
||||
/>
|
||||
|
||||
<title>Echoes</title>
|
||||
<ThemeScript/>
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body className="h-full" suppressHydrationWarning={true}>
|
||||
<Theme grayColor="slate" radius="medium" scaling="100%">
|
||||
<body
|
||||
className="h-full"
|
||||
suppressHydrationWarning={true}
|
||||
>
|
||||
<Theme
|
||||
grayColor="slate"
|
||||
radius="medium"
|
||||
scaling="100%"
|
||||
>
|
||||
<NotificationProvider>
|
||||
<Outlet />
|
||||
</NotificationProvider>
|
||||
|
||||
@ -2,14 +2,35 @@ import ErrorPage from "hooks/error";
|
||||
import layout from "themes/echoes/layout";
|
||||
import article from "themes/echoes/article";
|
||||
import about from "themes/echoes/about";
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
export default function Routes() {
|
||||
const location = useLocation();
|
||||
let path = location.pathname;
|
||||
|
||||
const args = {
|
||||
title: "我的页面",
|
||||
theme: "dark",
|
||||
nav: '<a href="h">a</a>'
|
||||
nav: '<a href="/">index</a><a href="error">error</a><a href="about">about</a>',
|
||||
};
|
||||
|
||||
console.log(path);
|
||||
path =path.split("/")[1];
|
||||
|
||||
if (path[1] === "error") {
|
||||
return layout.render({
|
||||
children: ErrorPage.render(args),
|
||||
args,
|
||||
});
|
||||
}
|
||||
|
||||
if (path[1] === "about") {
|
||||
return layout.render({
|
||||
children: about.render(args),
|
||||
args,
|
||||
});
|
||||
}
|
||||
|
||||
return layout.render({
|
||||
children: article.render(args),
|
||||
args,
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { gsap } from 'gsap';
|
||||
import throttle from 'lodash/throttle';
|
||||
|
||||
interface Particle {
|
||||
x: number;
|
||||
@ -17,7 +18,10 @@ const createErrorParticles = (width: number, height: number) => {
|
||||
const positionArray: number[] = [];
|
||||
const colorArray: number[] = [];
|
||||
|
||||
const errorColor = new THREE.Color(0.8, 0, 0); // 更深的红色
|
||||
const errorColor = new THREE.Color(0.8, 0, 0);
|
||||
const size = Math.min(width, height);
|
||||
const scaleFactor = size * 0.3;
|
||||
const particlesPerLine = 50;
|
||||
|
||||
// X 形状的两条线
|
||||
const lines = [
|
||||
@ -27,9 +31,6 @@ const createErrorParticles = (width: number, height: number) => {
|
||||
{ start: [1, 1], end: [-1, -1] }
|
||||
];
|
||||
|
||||
// 每条线上的粒子数量
|
||||
const particlesPerLine = 50;
|
||||
|
||||
lines.forEach(line => {
|
||||
for (let i = 0; i < particlesPerLine; i++) {
|
||||
const t = i / (particlesPerLine - 1);
|
||||
@ -41,9 +42,6 @@ const createErrorParticles = (width: number, height: number) => {
|
||||
const randomX = x + (Math.random() - 0.5) * randomOffset;
|
||||
const randomY = y + (Math.random() - 0.5) * randomOffset;
|
||||
|
||||
// 缩放到适合容器的大小
|
||||
const size = Math.min(width, height);
|
||||
const scaleFactor = size * 0.3;
|
||||
const scaledX = randomX * scaleFactor;
|
||||
const scaledY = randomY * scaleFactor;
|
||||
|
||||
@ -57,21 +55,21 @@ const createErrorParticles = (width: number, height: number) => {
|
||||
delay: 0
|
||||
});
|
||||
|
||||
// 随机初始位置
|
||||
// 修改初始位置生成方式
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
const distance = size * 2;
|
||||
positionArray.push(
|
||||
(Math.random() - 0.5) * size * 2,
|
||||
(Math.random() - 0.5) * size * 2,
|
||||
(Math.random() - 0.5) * 50
|
||||
Math.cos(angle) * distance,
|
||||
Math.sin(angle) * distance,
|
||||
0
|
||||
);
|
||||
|
||||
// 随机初始颜色
|
||||
colorArray.push(errorColor.r, errorColor.g, errorColor.b);
|
||||
// 初始颜色设置为最终颜色的一半亮度
|
||||
colorArray.push(errorColor.r * 0.5, errorColor.g * 0.5, errorColor.b * 0.5);
|
||||
}
|
||||
});
|
||||
|
||||
const size = Math.min(width, height);
|
||||
const scale = size / 200;
|
||||
const particleSize = Math.max(1.2, scale * 1.2);
|
||||
const particleSize = Math.max(1.2, (size / 200) * 1.2);
|
||||
|
||||
return { particles, positionArray, colorArray, particleSize };
|
||||
};
|
||||
@ -82,99 +80,96 @@ const createSmileParticles = (width: number, height: number) => {
|
||||
const positionArray: number[] = [];
|
||||
const colorArray: number[] = [];
|
||||
|
||||
// 根据容器大小动态调整参数
|
||||
const size = Math.min(width, height);
|
||||
const scale = size / 200; // 基准子
|
||||
|
||||
// 调整笑脸参数
|
||||
const radius = size * 0.25; // 更合理的脸部大小比例
|
||||
const particlesCount = Math.floor(150 * scale); // 减少粒子数量
|
||||
const particleSize = Math.max(1.2, scale * 1.2); // 确保粒子大小适应屏幕
|
||||
|
||||
const scale = size / 200;
|
||||
const radius = size * 0.35;
|
||||
const particleSize = Math.max(1.2, scale * 1.2);
|
||||
const particleColor = new THREE.Color(0.8, 0.6, 0);
|
||||
|
||||
// 创建圆形脸部轮廓
|
||||
for (let i = 0; i < particlesCount / 2; i++) {
|
||||
const angle = (i / (particlesCount / 2)) * Math.PI * 2;
|
||||
const x = Math.cos(angle) * radius;
|
||||
const y = Math.sin(angle) * radius;
|
||||
// 预先计算所有需要的粒子位置
|
||||
const allPoints: { x: number; y: number }[] = [];
|
||||
|
||||
particles.push({
|
||||
x, y, z: 0,
|
||||
originalX: x,
|
||||
originalY: y,
|
||||
originalColor: particleColor,
|
||||
delay: 0
|
||||
// 计算脸部轮廓的点
|
||||
const outlinePoints = Math.floor(60 * scale);
|
||||
for (let i = 0; i < outlinePoints; i++) {
|
||||
const angle = (i / outlinePoints) * Math.PI * 2;
|
||||
allPoints.push({
|
||||
x: Math.cos(angle) * radius,
|
||||
y: Math.sin(angle) * radius
|
||||
});
|
||||
|
||||
positionArray.push(
|
||||
(Math.random() - 0.5) * size * 4,
|
||||
(Math.random() - 0.5) * size * 4,
|
||||
(Math.random() - 0.5) * 150
|
||||
);
|
||||
colorArray.push(particleColor.r, particleColor.g, particleColor.b);
|
||||
}
|
||||
|
||||
// 眼睛参数调整
|
||||
const eyeOffset = radius * 0.3; // 增加眼睛间距
|
||||
const eyeY = radius * 0.15; // 调整眼睛垂直位置
|
||||
const eyeSize = radius * 0.12; // 增加眼睛大小
|
||||
|
||||
// 眼睛粒子数量也要根据比例调整
|
||||
const eyeParticles = Math.floor(20 * scale);
|
||||
|
||||
// 修改眼睛的生成方式
|
||||
const eyeOffset = radius * 0.3;
|
||||
const eyeY = radius * 0.15;
|
||||
const eyeSize = radius * 0.1; // 稍微减小眼睛尺寸
|
||||
const eyePoints = Math.floor(20 * scale);
|
||||
|
||||
[-1, 1].forEach(side => {
|
||||
for (let i = 0; i < eyeParticles; i++) {
|
||||
const r = Math.random() * eyeSize;
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
const x = side * eyeOffset + Math.cos(angle) * r;
|
||||
const y = eyeY + Math.sin(angle) * r;
|
||||
|
||||
particles.push({
|
||||
x, y, z: 0,
|
||||
originalX: x,
|
||||
originalY: y,
|
||||
originalColor: particleColor,
|
||||
delay: 0
|
||||
});
|
||||
|
||||
positionArray.push(
|
||||
(Math.random() - 0.5) * size * 4,
|
||||
(Math.random() - 0.5) * size * 4,
|
||||
(Math.random() - 0.5) * 150
|
||||
);
|
||||
colorArray.push(particleColor.r, particleColor.g, particleColor.b);
|
||||
// 使用同心圆的方式生成眼睛
|
||||
const eyeCenterX = side * eyeOffset;
|
||||
const rings = 3; // 同心圆的数量
|
||||
|
||||
for (let ring = 0; ring < rings; ring++) {
|
||||
const ringRadius = eyeSize * (1 - ring / rings); // 从外到内递减半径
|
||||
const pointsInRing = Math.floor(eyePoints / rings);
|
||||
|
||||
for (let i = 0; i < pointsInRing; i++) {
|
||||
const angle = (i / pointsInRing) * Math.PI * 2;
|
||||
allPoints.push({
|
||||
x: eyeCenterX + Math.cos(angle) * ringRadius,
|
||||
y: eyeY + Math.sin(angle) * ringRadius
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 添加中心点
|
||||
allPoints.push({
|
||||
x: eyeCenterX,
|
||||
y: eyeY
|
||||
});
|
||||
});
|
||||
|
||||
// 嘴巴参数调整
|
||||
const smileWidth = radius * 0.6; // 增加嘴巴宽度
|
||||
const smileY = -radius * 0.25; // 调整嘴巴位置
|
||||
const smilePoints = Math.floor(30 * scale); // 根据大小调整嘴巴粒子数量
|
||||
// 计算嘴巴的点
|
||||
const smileWidth = radius * 0.6;
|
||||
const smileY = -radius * 0.35;
|
||||
const smilePoints = Math.floor(25 * scale);
|
||||
|
||||
// 创建微笑
|
||||
for (let i = 0; i < smilePoints; i++) {
|
||||
const t = i / (smilePoints - 1);
|
||||
const x = (t * 2 - 1) * smileWidth;
|
||||
|
||||
// 简单的抛物线，向上弯曲的笑脸
|
||||
const y = smileY + (Math.pow(x / smileWidth, 2) * radius * 0.2);
|
||||
const y = smileY + Math.pow(x / smileWidth, 2) * radius * 0.2;
|
||||
allPoints.push({ x, y });
|
||||
}
|
||||
|
||||
// 为所有点创建粒子
|
||||
allPoints.forEach(point => {
|
||||
particles.push({
|
||||
x, y, z: 0,
|
||||
originalX: x,
|
||||
originalY: y,
|
||||
x: point.x,
|
||||
y: point.y,
|
||||
z: 0,
|
||||
originalX: point.x,
|
||||
originalY: point.y,
|
||||
originalColor: particleColor,
|
||||
delay: 0
|
||||
});
|
||||
|
||||
// 生成初始位置（从外围圆形区域开始）
|
||||
const initAngle = Math.random() * Math.PI * 2;
|
||||
const distance = size * 2;
|
||||
positionArray.push(
|
||||
(Math.random() - 0.5) * size * 4,
|
||||
(Math.random() - 0.5) * size * 4,
|
||||
(Math.random() - 0.5) * 150
|
||||
Math.cos(initAngle) * distance,
|
||||
Math.sin(initAngle) * distance,
|
||||
0
|
||||
);
|
||||
colorArray.push(particleColor.r, particleColor.g, particleColor.b);
|
||||
}
|
||||
|
||||
// 初始颜色设置为最终颜色的一半亮度
|
||||
colorArray.push(
|
||||
particleColor.r * 0.5,
|
||||
particleColor.g * 0.5,
|
||||
particleColor.b * 0.5
|
||||
);
|
||||
});
|
||||
|
||||
return { particles, positionArray, colorArray, particleSize };
|
||||
};
|
||||
@ -201,7 +196,7 @@ export const ParticleImage = ({
|
||||
src,
|
||||
onLoad,
|
||||
onError,
|
||||
performanceMode = false // 默认关闭
|
||||
performanceMode = false
|
||||
}: ParticleImageProps) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const sceneRef = useRef<THREE.Scene>();
|
||||
@ -209,23 +204,14 @@ export const ParticleImage = ({
|
||||
const rendererRef = useRef<THREE.WebGLRenderer>();
|
||||
const animationFrameRef = useRef<number>();
|
||||
|
||||
const width = containerRef.current?.offsetWidth || 0;
|
||||
const height = containerRef.current?.offsetHeight || 0;
|
||||
const size = Math.min(width, height);
|
||||
const scale = size / 200; // 基准因子
|
||||
|
||||
// 在性能模式下使用更保守的参数
|
||||
const particleCount = performanceMode ?
|
||||
Math.floor(100 * scale) :
|
||||
Math.floor(200 * scale);
|
||||
|
||||
// 添 resize 处理函数
|
||||
// 将 resize 处理逻辑移到组件顶层
|
||||
const handleResize = useCallback(() => {
|
||||
if (!containerRef.current || !cameraRef.current || !rendererRef.current || !sceneRef.current) return;
|
||||
|
||||
const width = containerRef.current.offsetWidth;
|
||||
const height = containerRef.current.offsetHeight;
|
||||
|
||||
// 更新相机视图
|
||||
const camera = cameraRef.current;
|
||||
camera.left = width / -2;
|
||||
camera.right = width / 2;
|
||||
@ -233,65 +219,75 @@ export const ParticleImage = ({
|
||||
camera.bottom = height / -2;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
// 更新渲染器大小
|
||||
rendererRef.current.setSize(width, height);
|
||||
|
||||
// 重新生成粒子
|
||||
if (src === '') {
|
||||
// 清除现有的 GSAP 动画
|
||||
gsap.killTweensOf('*');
|
||||
|
||||
// 重新生成笑脸
|
||||
const { particles, positionArray, colorArray, particleSize } = createSmileParticles(width, height);
|
||||
|
||||
const material = new THREE.PointsMaterial({
|
||||
size: particleSize,
|
||||
vertexColors: true,
|
||||
transparent: true,
|
||||
opacity: 1,
|
||||
sizeAttenuation: true,
|
||||
blending: THREE.AdditiveBlending,
|
||||
depthWrite: false,
|
||||
depthTest: false
|
||||
});
|
||||
// 只有当尺寸变化超过阈值时才重新生成粒子
|
||||
const currentSize = Math.min(width, height);
|
||||
const previousSize = sceneRef.current.userData.previousSize || currentSize;
|
||||
const sizeChange = Math.abs(currentSize - previousSize) / previousSize;
|
||||
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
|
||||
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
|
||||
|
||||
sceneRef.current.clear();
|
||||
const points = new THREE.Points(geometry, material);
|
||||
sceneRef.current.add(points);
|
||||
|
||||
// 修改这部分，添加动画而不是直接设置位置
|
||||
const positionAttribute = geometry.attributes.position;
|
||||
|
||||
particles.forEach((particle, i) => {
|
||||
const i3 = i * 3;
|
||||
const distanceToCenter = Math.sqrt(
|
||||
Math.pow(particle.originalX, 2) +
|
||||
Math.pow(particle.originalY, 2)
|
||||
);
|
||||
const maxDistance = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2));
|
||||
const normalizedDistance = distanceToCenter / maxDistance;
|
||||
|
||||
gsap.to(positionAttribute.array, {
|
||||
duration: 0.8,
|
||||
delay: normalizedDistance * 0.6,
|
||||
[i3]: particle.originalX,
|
||||
[i3 + 1]: particle.originalY,
|
||||
[i3 + 2]: 0,
|
||||
ease: "sine.inOut",
|
||||
onUpdate: () => {
|
||||
positionAttribute.needsUpdate = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
if (sizeChange > 0.2 && src === '') {
|
||||
sceneRef.current.userData.previousSize = currentSize;
|
||||
updateParticles(width, height);
|
||||
}
|
||||
}, [src]);
|
||||
|
||||
// 将粒子更新逻辑抽取为单独的函数
|
||||
const updateParticles = useCallback((width: number, height: number) => {
|
||||
if (!sceneRef.current) return;
|
||||
|
||||
gsap.killTweensOf('*');
|
||||
|
||||
const { particles, positionArray, colorArray, particleSize } = createSmileParticles(width, height);
|
||||
|
||||
const material = new THREE.PointsMaterial({
|
||||
size: particleSize,
|
||||
vertexColors: true,
|
||||
transparent: true,
|
||||
opacity: 1,
|
||||
sizeAttenuation: true,
|
||||
blending: THREE.AdditiveBlending,
|
||||
depthWrite: false,
|
||||
depthTest: false
|
||||
});
|
||||
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
|
||||
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
|
||||
|
||||
sceneRef.current.clear();
|
||||
const points = new THREE.Points(geometry, material);
|
||||
sceneRef.current.add(points);
|
||||
|
||||
const positionAttribute = geometry.attributes.position;
|
||||
|
||||
particles.forEach((particle, i) => {
|
||||
const i3 = i * 3;
|
||||
const distanceToCenter = Math.sqrt(
|
||||
Math.pow(particle.originalX, 2) +
|
||||
Math.pow(particle.originalY, 2)
|
||||
);
|
||||
const maxDistance = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2));
|
||||
const normalizedDistance = distanceToCenter / maxDistance;
|
||||
|
||||
gsap.to(positionAttribute.array, {
|
||||
duration: 0.8,
|
||||
delay: normalizedDistance * 0.6,
|
||||
[i3]: particle.originalX,
|
||||
[i3 + 1]: particle.originalY,
|
||||
[i3 + 2]: 0,
|
||||
ease: "sine.inOut",
|
||||
onUpdate: () => {
|
||||
positionAttribute.needsUpdate = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 主要的 useEffect
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
console.log('Current src:', src);
|
||||
|
||||
const width = containerRef.current.offsetWidth;
|
||||
const height = containerRef.current.offsetHeight;
|
||||
@ -322,7 +318,6 @@ export const ParticleImage = ({
|
||||
|
||||
// 检查是否应该显示笑脸
|
||||
if (src === '') {
|
||||
console.log('Showing smile animation');
|
||||
const { particles, positionArray, colorArray, particleSize } = createSmileParticles(width, height);
|
||||
|
||||
const material = new THREE.PointsMaterial({
|
||||
@ -346,7 +341,7 @@ export const ParticleImage = ({
|
||||
// 修改动画效果
|
||||
const positionAttribute = geometry.attributes.position;
|
||||
|
||||
// 计算到中心的距离用于延迟
|
||||
// 算到中心的距离用于延迟
|
||||
particles.forEach((particle, i) => {
|
||||
const i3 = i * 3;
|
||||
const distanceToCenter = Math.sqrt(
|
||||
@ -378,30 +373,30 @@ export const ParticleImage = ({
|
||||
};
|
||||
animate();
|
||||
|
||||
// 添加 resize 监听
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
if (containerRef.current) {
|
||||
handleResize();
|
||||
}
|
||||
// 设置 resize 监听
|
||||
const throttledResize = throttle(handleResize, 200, {
|
||||
leading: true,
|
||||
trailing: true
|
||||
});
|
||||
resizeObserver.observe(containerRef.current);
|
||||
|
||||
// 添加窗口 resize 监听
|
||||
window.addEventListener('resize', handleResize);
|
||||
const resizeObserver = new ResizeObserver(throttledResize);
|
||||
resizeObserver.observe(containerRef.current);
|
||||
window.addEventListener('resize', throttledResize);
|
||||
|
||||
return () => {
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
}
|
||||
if (renderer && containerRef.current) {
|
||||
containerRef.current.removeChild(renderer.domElement);
|
||||
renderer.dispose();
|
||||
}
|
||||
gsap.killTweensOf('*');
|
||||
throttledResize.cancel();
|
||||
if (containerRef.current) {
|
||||
resizeObserver.unobserve(containerRef.current);
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
window.removeEventListener('resize', throttledResize);
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
}
|
||||
if (rendererRef.current && containerRef.current) {
|
||||
containerRef.current.removeChild(rendererRef.current.domElement);
|
||||
rendererRef.current.dispose();
|
||||
}
|
||||
gsap.killTweensOf('*');
|
||||
};
|
||||
}
|
||||
|
||||
@ -465,40 +460,45 @@ export const ParticleImage = ({
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
if (ctx) {
|
||||
// 计算目标尺寸和裁剪区域
|
||||
const targetAspect = width / height;
|
||||
const imgAspect = img.width / img.height;
|
||||
|
||||
let sourceWidth = img.width;
|
||||
let sourceHeight = img.height;
|
||||
let sourceX = 0;
|
||||
let sourceY = 0;
|
||||
|
||||
// 裁源图片，确保比例匹配目标容器
|
||||
if (imgAspect > targetAspect) {
|
||||
// 图片较宽，需要裁剪两边
|
||||
sourceWidth = img.height * targetAspect;
|
||||
sourceX = (img.width - sourceWidth) / 2;
|
||||
} else {
|
||||
// 图片较高，需要裁剪上下
|
||||
sourceHeight = img.width / targetAspect;
|
||||
sourceY = (img.height - sourceHeight) / 2;
|
||||
}
|
||||
|
||||
// 设置画布尺寸为目标显示尺寸
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
// 计算图片绘制尺寸和位置，确保不会超出容器
|
||||
const imgAspect = img.width / img.height;
|
||||
const containerAspect = width / height;
|
||||
// 直接绘制裁剪后的图片到目标尺寸
|
||||
ctx.drawImage(
|
||||
img,
|
||||
sourceX, sourceY, sourceWidth, sourceHeight, // 源图片的裁剪区域
|
||||
0, 0, width, height // 目标区域（填满画布）
|
||||
);
|
||||
|
||||
let drawWidth = width;
|
||||
let drawHeight = height;
|
||||
let offsetX = 0;
|
||||
let offsetY = 0;
|
||||
|
||||
if (imgAspect > containerAspect) {
|
||||
// 图片较宽，以容器宽度为准，确保高度不超出
|
||||
drawWidth = width;
|
||||
drawHeight = width / imgAspect;
|
||||
offsetY = (height - drawHeight) / 2;
|
||||
} else {
|
||||
// 图片较高，以容器高度为准，确保宽度不超出
|
||||
drawHeight = height;
|
||||
drawWidth = height * imgAspect;
|
||||
offsetX = (width - drawWidth) / 2;
|
||||
}
|
||||
|
||||
// 绘制片
|
||||
ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
|
||||
const imageData = ctx.getImageData(0, 0, width, height);
|
||||
|
||||
const particles: Particle[] = [];
|
||||
const positionArray = [];
|
||||
const colorArray = [];
|
||||
const samplingGap = Math.ceil(Math.max(width, height) / 80); // 减少采样密度
|
||||
const samplingGap = Math.ceil(Math.max(width, height) / 80);
|
||||
|
||||
// 采样图片像素
|
||||
// 采样已裁剪的图片像素
|
||||
for (let y = 0; y < height; y += samplingGap) {
|
||||
for (let x = 0; x < width; x += samplingGap) {
|
||||
const i = (y * width + x) * 4;
|
||||
@ -508,7 +508,6 @@ export const ParticleImage = ({
|
||||
const a = imageData.data[i + 3] / 255;
|
||||
|
||||
if (a > 0.3) {
|
||||
// 计算距离中心的距离，用于动画延迟
|
||||
const distanceToCenter = Math.sqrt(
|
||||
Math.pow(x - width/2, 2) +
|
||||
Math.pow(y - height/2, 2)
|
||||
@ -526,7 +525,7 @@ export const ParticleImage = ({
|
||||
originalX: px,
|
||||
originalY: py,
|
||||
originalColor: new THREE.Color(r, g, b),
|
||||
delay: normalizedDistance * 0.3 // 基于距离的延迟
|
||||
delay: normalizedDistance * 0.3
|
||||
});
|
||||
|
||||
// 随机初始位置（根据距离调整范围）
|
||||
@ -565,7 +564,7 @@ export const ParticleImage = ({
|
||||
const points = new THREE.Points(geometry, material);
|
||||
scene.add(points);
|
||||
|
||||
// 动画
|
||||
// 画
|
||||
const positionAttribute = geometry.attributes.position;
|
||||
const colorAttribute = geometry.attributes.color;
|
||||
|
||||
@ -693,7 +692,7 @@ export const ImageLoader = ({ src, alt, className }: {
|
||||
const [hasError, setHasError] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="relative w-[100px] md:w-[140px] h-[100px] md:h-[140px] shrink-0 overflow-hidden">
|
||||
<div className="relative w-[140px] md:w-[180px] h-[140px] md:h-[180px] shrink-0 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[rgb(10,37,77)] via-[rgb(8,27,57)] to-[rgb(2,8,23)] rounded-lg overflow-hidden">
|
||||
<ParticleImage
|
||||
src={src}
|
||||
|
||||
@ -1,13 +1,39 @@
|
||||
import React from "react";
|
||||
import "styles/echoes.css"
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import "styles/echoes.css";
|
||||
|
||||
export const Echoes: React.FC = () => {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// 优化动画性能
|
||||
if (svgRef.current) {
|
||||
svgRef.current.style.willChange = 'transform';
|
||||
|
||||
// 使用 requestAnimationFrame 来优化动画
|
||||
const paths = svgRef.current.querySelectorAll('path');
|
||||
paths.forEach(path => {
|
||||
path.style.willChange = 'transform';
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (svgRef.current) {
|
||||
svgRef.current.style.willChange = 'auto';
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
className="animated-text w-full h-full"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="50.4 44.600006 234.1 86"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{
|
||||
transform: 'translateZ(0)', // 启用硬件加速
|
||||
backfaceVisibility: 'hidden'
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d="M 77.6 116.50001 Q 75.5 118.30001 72.75 118.600006 Q 70 118.90001 67.4 117.75001 Q 64.8 116.600006 63.1 114.200005 Q 61.4 112.00001 60.9 109.15001 Q 60.4 106.30001 60.8 101.700005 Q 61.1 97.8 63.3 93.850006 Q 65.5 89.90001 68.65 86.8 Q 71.8 83.70001 74.9 82.50001 Q 76.4 81.50001 77.45 81.55 Q 78.5 81.600006 80.7 81.8 Q 83 82.100006 84.15 82.70001 Q 85.3 83.3 86 84.3 Q 87.5 85.8 88 87.25001 Q 88.5 88.700005 88.5 90.100006 Q 88.100006 92.3 85.55 95.450005 Q 83 98.600006 78.9 100.600006 Q 76.7 101.3 74.1 101.200005 Q 71.5 101.100006 69.8 99.90001 Q 67.9 99.100006 67.3 100.15001 Q 66.7 101.200005 66.2 105.200005 Q 65.8 109.00001 66.8 110.75001 Q 67.8 112.50001 69.5 112.80001 Q 71.5 113.200005 72.65 113.350006 Q 73.8 113.50001 75.5 112.50001 Q 77.1 111.50001 77.5 111.350006 Q 77.9 111.200005 78.15 110.950005 Q 78.4 110.700005 79.4 109.700005 Q 80.1 109.00001 80.5 108.65001 Q 80.9 108.30001 81.4 108.30001 Q 81.9 108.30001 82.3 108.75001 Q 82.7 109.200005 83.100006 109.40001 Q 84.100006 109.40001 83.55 110.600006 Q 83 111.80001 81.4 113.450005 Q 79.8 115.100006 77.6 116.50001 ZM 77.5 95.3 Q 78.6 94.8 79.8 93.850006 Q 81 92.90001 81.85 91.75001 Q 82.7 90.600006 82.7 89.8 Q 82.7 88.40001 81.4 87.45001 Q 80.1 86.50001 77.5 87.20001 Q 76.4 87.50001 75 88.65001 Q 73.6 89.8 72.35 91.200005 Q 71.1 92.600006 70.35 93.700005 Q 69.6 94.8 69.8 95.00001 Q 70.1 95.50001 71.5 95.75001 Q 72.9 96.00001 74.65 95.90001 Q 76.4 95.8 77.5 95.3 Z"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Template } from "interface/template";
|
||||
|
||||
const ErrorPage = () => {
|
||||
export default new Template({}, ({ args }) => {
|
||||
const [text, setText] = useState("");
|
||||
const fullText = "404 - 页面不见了 :(";
|
||||
const typingSpeed = 100;
|
||||
@ -38,6 +39,4 @@ const ErrorPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
||||
});
|
||||
|
||||
@ -4,29 +4,57 @@ import { Button } from "@radix-ui/themes";
|
||||
|
||||
const THEME_KEY = "theme-preference";
|
||||
|
||||
// 添加这个脚本来预先设置主题，避免闪烁
|
||||
const themeScript = `
|
||||
(function() {
|
||||
function getInitialTheme() {
|
||||
const savedTheme = localStorage.getItem("${THEME_KEY}");
|
||||
if (savedTheme) return savedTheme;
|
||||
|
||||
const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
const theme = isDark ? "dark" : "light";
|
||||
localStorage.setItem("${THEME_KEY}", theme);
|
||||
return theme;
|
||||
}
|
||||
document.documentElement.className = getInitialTheme();
|
||||
})()
|
||||
`;
|
||||
|
||||
export const ThemeScript = () => {
|
||||
return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
|
||||
};
|
||||
|
||||
export const ThemeModeToggle: React.FC = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [isDark, setIsDark] = useState(false);
|
||||
const [isDark, setIsDark] = useState<boolean | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const savedTheme = localStorage.getItem(THEME_KEY);
|
||||
const initialIsDark = savedTheme === 'dark' || document.documentElement.className === 'dark';
|
||||
setIsDark(initialIsDark);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const saved = localStorage.getItem(THEME_KEY);
|
||||
const initialTheme =
|
||||
saved ||
|
||||
(window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light");
|
||||
setIsDark(initialTheme === "dark");
|
||||
if (saved) {
|
||||
document.documentElement.className = saved;
|
||||
} else {
|
||||
document.documentElement.className = initialTheme;
|
||||
}
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.attributeName === 'class') {
|
||||
const isDarkTheme = document.documentElement.className === 'dark';
|
||||
setIsDark(isDarkTheme);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class']
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
if (isDark === null) return;
|
||||
const newIsDark = !isDark;
|
||||
setIsDark(newIsDark);
|
||||
const newTheme = newIsDark ? "dark" : "light";
|
||||
@ -34,7 +62,17 @@ export const ThemeModeToggle: React.FC = () => {
|
||||
localStorage.setItem(THEME_KEY, newTheme);
|
||||
};
|
||||
|
||||
if (!mounted) return null;
|
||||
if (isDark === null) {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full h-full p-0 rounded-lg transition-all duration-300 transform"
|
||||
aria-label="Loading theme"
|
||||
>
|
||||
<MoonIcon className="w-full h-full" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
@ -44,7 +82,7 @@ export const ThemeModeToggle: React.FC = () => {
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
{isDark ? (
|
||||
<SunIcon className="w-full h-full"/>
|
||||
<SunIcon className="w-full h-full" />
|
||||
) : (
|
||||
<MoonIcon className="w-full h-full" />
|
||||
)}
|
||||
@ -52,6 +90,13 @@ export const ThemeModeToggle: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// 更新类型定义
|
||||
declare global {
|
||||
interface Window {
|
||||
__THEME__?: "light" | "dark";
|
||||
}
|
||||
}
|
||||
|
||||
export const useThemeMode = () => {
|
||||
const [mode, setMode] = useState<"light" | "dark">("light");
|
||||
|
||||
|
||||
@ -10,6 +10,8 @@ export class Layout {
|
||||
public element: (props: {
|
||||
children: React.ReactNode;
|
||||
args?: Serializable;
|
||||
onTouchStart?: (e: TouchEvent) => void;
|
||||
onTouchEnd?: (e: TouchEvent) => void;
|
||||
}) => React.ReactNode,
|
||||
services?: {
|
||||
http?: HttpClient;
|
||||
@ -20,7 +22,16 @@ export class Layout {
|
||||
this.capability = services?.capability || CapabilityService.getInstance();
|
||||
}
|
||||
|
||||
render(props: { children: React.ReactNode; args?: Serializable }) {
|
||||
return this.element(props);
|
||||
render(props: {
|
||||
children: React.ReactNode;
|
||||
args?: Serializable;
|
||||
onTouchStart?: (e: TouchEvent) => void;
|
||||
onTouchEnd?: (e: TouchEvent) => void;
|
||||
}) {
|
||||
return this.element({
|
||||
...props,
|
||||
onTouchStart: props.onTouchStart,
|
||||
onTouchEnd: props.onTouchEnd
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
export interface Post {
|
||||
id: number; // 自增整数
|
||||
authorName: string; // 作者名称
|
||||
coverImage?: string; // 封面图片
|
||||
title?: string; // 标题
|
||||
metaKeywords: string; // 元关键词
|
||||
metaDescription: string; // 元描述
|
||||
content: string; // 内容
|
||||
status: string; // 状态
|
||||
isEditor: boolean; // 是否为编辑器
|
||||
draftContent?: string; // 草稿内容
|
||||
createdAt: Date; // 创建时间
|
||||
updatedAt: Date; // 更新时间
|
||||
publishedAt?: Date; // 发布时间
|
||||
}
|
||||
id: number; // 自增整数
|
||||
authorName: string; // 作者名称
|
||||
coverImage?: string; // 封面图片
|
||||
title?: string; // 标题
|
||||
metaKeywords: string; // 元关键词
|
||||
metaDescription: string; // 元描述
|
||||
content: string; // 内容
|
||||
status: string; // 状态
|
||||
isEditor: boolean; // 是否为编辑器
|
||||
draftContent?: string; // 草稿内容
|
||||
createdAt: Date; // 创建时间
|
||||
updatedAt: Date; // 更新时间
|
||||
publishedAt?: Date; // 发布时间
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ export class Template {
|
||||
services?: {
|
||||
http?: HttpClient;
|
||||
capability?: CapabilityService;
|
||||
}
|
||||
},
|
||||
) {
|
||||
this.http = services?.http || HttpClient.getInstance();
|
||||
this.capability = services?.capability || CapabilityService.getInstance();
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
.animated-text {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.animated-text path {
|
||||
@ -13,6 +20,8 @@
|
||||
transform-origin: center;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
animation-play-state: running !important;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@keyframes logo-anim {
|
||||
@ -69,4 +78,11 @@
|
||||
stroke: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.animated-text {
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,8 +25,8 @@ export default {
|
||||
progress: "progress 3s linear",
|
||||
},
|
||||
zIndex: {
|
||||
'-10': '-10',
|
||||
}
|
||||
"-10": "-10",
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Config;
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
import { Template } from "interface/template";
|
||||
import { Container, Heading, Text, Box, Flex, Link } from "@radix-ui/themes";
|
||||
import { GitHubLogoIcon, TwitterLogoIcon, LinkedInLogoIcon, EnvelopeClosedIcon } from "@radix-ui/react-icons";
|
||||
import {
|
||||
GitHubLogoIcon,
|
||||
TwitterLogoIcon,
|
||||
LinkedInLogoIcon,
|
||||
EnvelopeClosedIcon,
|
||||
} from "@radix-ui/react-icons";
|
||||
import { ParticleImage } from "hooks/ParticleImage";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { gsap } from "gsap";
|
||||
@ -9,23 +14,23 @@ const socialLinks = [
|
||||
{
|
||||
icon: <GitHubLogoIcon className="w-5 h-5" />,
|
||||
url: "https://github.com/yourusername",
|
||||
label: "GitHub"
|
||||
label: "GitHub",
|
||||
},
|
||||
{
|
||||
icon: <TwitterLogoIcon className="w-5 h-5" />,
|
||||
url: "https://twitter.com/yourusername",
|
||||
label: "Twitter"
|
||||
label: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: <LinkedInLogoIcon className="w-5 h-5" />,
|
||||
url: "https://linkedin.com/in/yourusername",
|
||||
label: "LinkedIn"
|
||||
label: "LinkedIn",
|
||||
},
|
||||
{
|
||||
icon: <EnvelopeClosedIcon className="w-5 h-5" />,
|
||||
url: "mailto:your.email@example.com",
|
||||
label: "Email"
|
||||
}
|
||||
label: "Email",
|
||||
},
|
||||
];
|
||||
|
||||
const skills = [
|
||||
@ -33,124 +38,119 @@ const skills = [
|
||||
{ name: "TypeScript", level: 85 },
|
||||
{ name: "Node.js", level: 80 },
|
||||
{ name: "Three.js", level: 75 },
|
||||
{ name: "Python", level: 70 }
|
||||
{ name: "Python", level: 70 },
|
||||
];
|
||||
|
||||
export default new Template(
|
||||
{},
|
||||
({ http, args }) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
export default new Template({}, ({ http, args }) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsVisible(true);
|
||||
useEffect(() => {
|
||||
setIsVisible(true);
|
||||
|
||||
const ctx = gsap.context(() => {
|
||||
// 标题动画
|
||||
gsap.from(".animate-title", {
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
ease: "power3.out",
|
||||
stagger: 0.2
|
||||
});
|
||||
const ctx = gsap.context(() => {
|
||||
// 标题动画
|
||||
gsap.from(".animate-title", {
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
ease: "power3.out",
|
||||
stagger: 0.2,
|
||||
});
|
||||
|
||||
// 技能条动画
|
||||
gsap.from(".skill-bar", {
|
||||
width: 0,
|
||||
duration: 1.5,
|
||||
ease: "power3.out",
|
||||
stagger: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: ".skills-section",
|
||||
start: "top center+=100",
|
||||
}
|
||||
});
|
||||
// 技能条动画
|
||||
gsap.from(".skill-bar", {
|
||||
width: 0,
|
||||
duration: 1.5,
|
||||
ease: "power3.out",
|
||||
stagger: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: ".skills-section",
|
||||
start: "top center+=100",
|
||||
},
|
||||
});
|
||||
|
||||
// 社交链接动画
|
||||
gsap.from(".social-link", {
|
||||
scale: 0,
|
||||
opacity: 0,
|
||||
duration: 0.5,
|
||||
ease: "back.out(1.7)",
|
||||
stagger: 0.1
|
||||
});
|
||||
}, containerRef);
|
||||
// 社交链接动画
|
||||
gsap.from(".social-link", {
|
||||
scale: 0,
|
||||
opacity: 0,
|
||||
duration: 0.5,
|
||||
ease: "back.out(1.7)",
|
||||
stagger: 0.1,
|
||||
});
|
||||
}, containerRef);
|
||||
|
||||
return () => ctx.revert();
|
||||
}, []);
|
||||
return () => ctx.revert();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Container
|
||||
ref={containerRef}
|
||||
className={`transition-opacity duration-1000 ${isVisible ? 'opacity-100' : 'opacity-0'}`}
|
||||
>
|
||||
<Box className="max-w-4xl mx-auto px-4">
|
||||
{/* 头部个人介绍 */}
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<Box className="w-40 h-40 mb-8 relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[rgb(10,37,77)] via-[rgb(8,27,57)] to-[rgb(2,8,23)] rounded-full overflow-hidden">
|
||||
<ParticleImage src="/path/to/your/avatar.jpg" />
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Heading size="8" className="animate-title mb-4">
|
||||
你的名字
|
||||
</Heading>
|
||||
<Text size="5" className="animate-title text-[--gray-11] mb-6">
|
||||
全栈开发者 / 设计爱好者
|
||||
</Text>
|
||||
<Text className="animate-title text-[--gray-11] max-w-2xl leading-relaxed">
|
||||
热爱编程和创新的全栈开发者，专注于创建优雅且高性能的web应用。
|
||||
擅长将复杂的问题简化，追求代码的优雅和用户体验的完美统一。
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
{/* 技能展示 */}
|
||||
<Box className="skills-section mb-16">
|
||||
<Heading size="4" className="mb-8">专业技能</Heading>
|
||||
<Flex direction="column" gap="4">
|
||||
{skills.map((skill) => (
|
||||
<Box key={skill.name}>
|
||||
<Flex justify="between" className="mb-2">
|
||||
<Text weight="medium">{skill.name}</Text>
|
||||
<Text className="text-[--gray-11]">{skill.level}%</Text>
|
||||
</Flex>
|
||||
<Box className="h-2 bg-[--gray-4] rounded-full overflow-hidden">
|
||||
<Box
|
||||
className="skill-bar h-full bg-[--accent-9] rounded-full"
|
||||
style={{ width: `${skill.level}%` }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Flex>
|
||||
return (
|
||||
<Container
|
||||
ref={containerRef}
|
||||
className={`transition-opacity duration-1000 ${isVisible ? "opacity-100" : "opacity-0"}`}
|
||||
>
|
||||
<Box className="max-w-4xl mx-auto px-4">
|
||||
{/* 头部个人介绍 */}
|
||||
<Flex direction="column" align="center" className="text-center mb-16">
|
||||
<Box className="w-40 h-40 mb-8 relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[rgb(10,37,77)] via-[rgb(8,27,57)] to-[rgb(2,8,23)] rounded-full overflow-hidden">
|
||||
<ParticleImage src="/path/to/your/avatar.jpg" />
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* 社交链接 */}
|
||||
<Flex
|
||||
gap="4"
|
||||
justify="center"
|
||||
className="pt-8 border-t border-[--gray-5]"
|
||||
>
|
||||
{socialLinks.map((link, index) => (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="social-link p-3 rounded-full hover:bg-[--gray-3] transition-colors"
|
||||
>
|
||||
{link.icon}
|
||||
</Link>
|
||||
<Heading size="8" className="animate-title mb-4">
|
||||
你的名字
|
||||
</Heading>
|
||||
<Text size="5" className="animate-title text-[--gray-11] mb-6">
|
||||
全栈开发者 / 设计爱好者
|
||||
</Text>
|
||||
<Text className="animate-title text-[--gray-11] max-w-2xl leading-relaxed">
|
||||
热爱编程和创新的全栈开发者，专注于创建优雅且高性能的web应用。
|
||||
擅长将复杂的问题简化，追求代码的优雅和用户体验的完美统一。
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
{/* 技能展示 */}
|
||||
<Box className="skills-section mb-16">
|
||||
<Heading size="4" className="mb-8">
|
||||
专业技能
|
||||
</Heading>
|
||||
<Flex direction="column" gap="4">
|
||||
{skills.map((skill) => (
|
||||
<Box key={skill.name}>
|
||||
<Flex justify="between" className="mb-2">
|
||||
<Text weight="medium">{skill.name}</Text>
|
||||
<Text className="text-[--gray-11]">{skill.level}%</Text>
|
||||
</Flex>
|
||||
<Box className="h-2 bg-[--gray-4] rounded-full overflow-hidden">
|
||||
<Box
|
||||
className="skill-bar h-full bg-[--accent-9] rounded-full"
|
||||
style={{ width: `${skill.level}%` }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
{/* 社交链接 */}
|
||||
<Flex
|
||||
gap="4"
|
||||
justify="center"
|
||||
className="pt-8 border-t border-[--gray-5]"
|
||||
>
|
||||
{socialLinks.map((link, index) => (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="social-link p-3 rounded-full hover:bg-[--gray-3] transition-colors"
|
||||
>
|
||||
{link.icon}
|
||||
</Link>
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
import { Template } from "interface/template";
|
||||
import { Container, Heading, Text, Flex, Card, Button } from "@radix-ui/themes";
|
||||
import { CalendarIcon, PersonIcon, ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
|
||||
import {
|
||||
CalendarIcon,
|
||||
PersonIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from "@radix-ui/react-icons";
|
||||
import { Post } from "interface/post";
|
||||
import { useMemo} from "react";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { ImageLoader } from "hooks/ParticleImage";
|
||||
|
||||
@ -20,200 +25,223 @@ const mockArticles: Post[] = [
|
||||
status: "published",
|
||||
isEditor: false,
|
||||
createdAt: new Date("2024-03-15"),
|
||||
updatedAt: new Date("2024-03-15")
|
||||
updatedAt: new Date("2024-03-15"),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "React 18 新特性详解",
|
||||
content: "React 18 带来了许多令人兴奋的新特性，包括并发渲染、自动批处理更新...",
|
||||
content:
|
||||
"React 18 带来了许多令人兴奋的新特性，包括并发渲染、自动批处理更新...",
|
||||
authorName: "李四",
|
||||
publishedAt: new Date("2024-03-14"),
|
||||
coverImage: "https://avatars.githubusercontent.com/u/2?v=4",
|
||||
coverImage: "https://haowallpaper.com/link/common/file/previewFileIm",
|
||||
metaKeywords: "",
|
||||
metaDescription: "",
|
||||
status: "published",
|
||||
isEditor: false,
|
||||
createdAt: new Date("2024-03-14"),
|
||||
updatedAt: new Date("2024-03-14")
|
||||
updatedAt: new Date("2024-03-14"),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "JavaScript 性能优化技巧",
|
||||
content: "在这篇文章中，我们将探讨一些提高 JavaScript 性能的技巧和最佳实践...",
|
||||
content:
|
||||
"在这篇文章中，我们将探讨一些提高 JavaScript 性能的技巧和最佳实践...",
|
||||
authorName: "王五",
|
||||
publishedAt: new Date("2024-03-13"),
|
||||
coverImage: "https://avatars.githubusercontent.com/u/",
|
||||
coverImage: "https://haowallpaper.com/link/common/file/previewFileImg/15789130517090624",
|
||||
metaKeywords: "",
|
||||
metaDescription: "",
|
||||
status: "published",
|
||||
isEditor: false,
|
||||
createdAt: new Date("2024-03-13"),
|
||||
updatedAt: new Date("2024-03-13")
|
||||
updatedAt: new Date("2024-03-13"),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "JavaScript 性能优化技巧",
|
||||
content:
|
||||
"在这篇文章中，我们将探讨一些提高 JavaScript 性能的技巧和最佳实践...",
|
||||
authorName: "田六",
|
||||
publishedAt: new Date("2024-03-13"),
|
||||
coverImage: "https://avatars.githubusercontent.com/u/2?v=4",
|
||||
metaKeywords: "",
|
||||
metaDescription: "",
|
||||
status: "published",
|
||||
isEditor: false,
|
||||
createdAt: new Date("2024-03-13"),
|
||||
updatedAt: new Date("2024-03-13"),
|
||||
},
|
||||
// 可以添加更多模拟文章
|
||||
];
|
||||
|
||||
// 修改颜色组合数组，增加更多颜色选项
|
||||
const colorSchemes = [
|
||||
{ bg: 'bg-blue-100', text: 'text-blue-600' },
|
||||
{ bg: 'bg-green-100', text: 'text-green-600' },
|
||||
{ bg: 'bg-purple-100', text: 'text-purple-600' },
|
||||
{ bg: 'bg-pink-100', text: 'text-pink-600' },
|
||||
{ bg: 'bg-orange-100', text: 'text-orange-600' },
|
||||
{ bg: 'bg-teal-100', text: 'text-teal-600' },
|
||||
{ bg: 'bg-red-100', text: 'text-red-600' },
|
||||
{ bg: 'bg-indigo-100', text: 'text-indigo-600' },
|
||||
{ bg: 'bg-yellow-100', text: 'text-yellow-600' },
|
||||
{ bg: 'bg-cyan-100', text: 'text-cyan-600' },
|
||||
{ bg: "bg-blue-100", text: "text-blue-600" },
|
||||
{ bg: "bg-green-100", text: "text-green-600" },
|
||||
{ bg: "bg-purple-100", text: "text-purple-600" },
|
||||
{ bg: "bg-pink-100", text: "text-pink-600" },
|
||||
{ bg: "bg-orange-100", text: "text-orange-600" },
|
||||
{ bg: "bg-teal-100", text: "text-teal-600" },
|
||||
{ bg: "bg-red-100", text: "text-red-600" },
|
||||
{ bg: "bg-indigo-100", text: "text-indigo-600" },
|
||||
{ bg: "bg-yellow-100", text: "text-yellow-600" },
|
||||
{ bg: "bg-cyan-100", text: "text-cyan-600" },
|
||||
];
|
||||
|
||||
const categories = ['前端开发', '后端开发', 'UI设计', '移动开发', '人工智能'];
|
||||
const tags = ['React', 'TypeScript', 'Vue', 'Node.js', 'Flutter', 'Python', 'Docker'];
|
||||
const categories = ["前端开发", "后端开发", "UI设计", "移动开发", "人工智能"];
|
||||
const tags = [
|
||||
"React",
|
||||
"TypeScript",
|
||||
"Vue",
|
||||
"Node.js",
|
||||
"Flutter",
|
||||
"Python",
|
||||
"Docker",
|
||||
];
|
||||
|
||||
// 定义 SlideGeometry 类
|
||||
|
||||
export default new Template({}, ({ http, args }) => {
|
||||
const articleData = useMemo(() => {
|
||||
return mockArticles.map((article) => {
|
||||
// 使用更复杂的散列函数来生成看起来更随机的索引
|
||||
const hash = (str: string) => {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
const char = str.charCodeAt(i);
|
||||
hash = (hash << 5) - hash + char;
|
||||
hash = hash & hash;
|
||||
}
|
||||
return Math.abs(hash);
|
||||
};
|
||||
|
||||
// 使用文章的不同属性来生成索引
|
||||
const categoryIndex =
|
||||
hash(article.title + article.id.toString()) % categories.length;
|
||||
const colorIndex =
|
||||
hash(article.authorName + article.id.toString()) % colorSchemes.length;
|
||||
|
||||
export default new Template(
|
||||
{
|
||||
},
|
||||
({ http, args }) => {
|
||||
const articleData = useMemo(() => {
|
||||
return mockArticles.map((article) => {
|
||||
// 使用更复杂的散列函数来生成看起来更随机的索引
|
||||
const hash = (str: string) => {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
const char = str.charCodeAt(i);
|
||||
hash = ((hash << 5) - hash) + char;
|
||||
hash = hash & hash;
|
||||
}
|
||||
return Math.abs(hash);
|
||||
};
|
||||
// 为标签生成不同的索引
|
||||
const tagIndices = tags
|
||||
.map((_, index) => ({
|
||||
index,
|
||||
sort: hash(article.title + index.toString() + article.id.toString()),
|
||||
}))
|
||||
.sort((a, b) => a.sort - b.sort)
|
||||
.slice(0, 2)
|
||||
.map((item) => item.index);
|
||||
|
||||
// 使用文章的不同属性来生成索引
|
||||
const categoryIndex = hash(article.title + article.id.toString()) % categories.length;
|
||||
const colorIndex = hash(article.authorName + article.id.toString()) % colorSchemes.length;
|
||||
|
||||
// 为标签生成不同的索引
|
||||
const tagIndices = tags
|
||||
.map((_, index) => ({
|
||||
index,
|
||||
sort: hash(article.title + index.toString() + article.id.toString())
|
||||
}))
|
||||
.sort((a, b) => a.sort - b.sort)
|
||||
.slice(0, 2)
|
||||
.map(item => item.index);
|
||||
return {
|
||||
...article,
|
||||
category: categories[categoryIndex],
|
||||
categoryColor: colorSchemes[colorIndex],
|
||||
tags: tagIndices.map((index) => ({
|
||||
name: tags[index],
|
||||
color:
|
||||
colorSchemes[
|
||||
hash(tags[index] + article.id.toString()) % colorSchemes.length
|
||||
],
|
||||
})),
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
|
||||
return {
|
||||
...article,
|
||||
category: categories[categoryIndex],
|
||||
categoryColor: colorSchemes[colorIndex],
|
||||
tags: tagIndices.map(index => ({
|
||||
name: tags[index],
|
||||
color: colorSchemes[hash(tags[index] + article.id.toString()) % colorSchemes.length]
|
||||
}))
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<Container size="3" className="pt-2 pb-4 md:pb-6 relative">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 px-4 md:px-0">
|
||||
{articleData.map((article) => (
|
||||
<Card
|
||||
key={article.id}
|
||||
className="group cursor-pointer hover:shadow-lg transition-all duration-300 border border-[--gray-5] hover:border-[--accent-8] relative overflow-hidden"
|
||||
>
|
||||
<div className={`p-5 relative flex gap-4`}>
|
||||
<ImageLoader
|
||||
src={article.coverImage}
|
||||
alt={article.title || ""}
|
||||
className="group-hover:scale-105 transition-transform duration-500 relative z-[1] w-[140px] h-[140px] md:w-[180px] md:h-[180px] object-cover rounded-lg shrink-0"
|
||||
/>
|
||||
|
||||
return (
|
||||
<Container size="3" className="pt-2 pb-4 md:pb-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 px-4 md:px-0">
|
||||
{articleData.map(article => (
|
||||
<Card
|
||||
key={article.id}
|
||||
className="group cursor-pointer hover:shadow-lg transition-all duration-300 border border-[--gray-5] hover:border-[--accent-8] relative overflow-visible"
|
||||
>
|
||||
<div className={`p-5 relative flex gap-5`}>
|
||||
<ImageLoader
|
||||
src={article.coverImage}
|
||||
alt={article.title || ''}
|
||||
className="group-hover:scale-105 transition-transform duration-500 relative z-10"
|
||||
/>
|
||||
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<div className="flex items-start justify-between gap-3 mb-2">
|
||||
<Heading
|
||||
size="3"
|
||||
className="group-hover:text-[--accent-9] transition-colors duration-200 line-clamp-2 text-base md:text-lg flex-1"
|
||||
>
|
||||
{article.title}
|
||||
</Heading>
|
||||
<Text
|
||||
size="1"
|
||||
className={`px-2 py-0.5 rounded-full shrink-0 ${article.categoryColor.bg} ${article.categoryColor.text}`}
|
||||
>
|
||||
{article.category}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Flex gap="2" align="center" className="text-[--gray-11] mb-3 flex-wrap">
|
||||
<CalendarIcon className="w-3 h-3" />
|
||||
<Text size="1">
|
||||
{article.publishedAt?.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</Text>
|
||||
<span className="mx-1">·</span>
|
||||
<Text size="1" weight="medium">{article.authorName}</Text>
|
||||
</Flex>
|
||||
|
||||
<Text className="text-[--gray-11] text-xs md:text-sm line-clamp-2 md:line-clamp-3 leading-relaxed">
|
||||
{article.content}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<div className="flex items-start justify-between gap-3 mb-2">
|
||||
<Heading
|
||||
size="3"
|
||||
className="group-hover:text-[--accent-9] transition-colors duration-200 line-clamp-2 text-base md:text-lg flex-1"
|
||||
>
|
||||
{article.title}
|
||||
</Heading>
|
||||
<Text
|
||||
size="1"
|
||||
className={`px-2 py-0.5 rounded-full shrink-0 ${article.categoryColor.bg} ${article.categoryColor.text}`}
|
||||
>
|
||||
{article.category}
|
||||
</Text>
|
||||
|
||||
<Flex gap="2" className="mt-auto pt-3 flex-wrap">
|
||||
{article.tags.map(tag => (
|
||||
<Text
|
||||
key={tag.name}
|
||||
size="1"
|
||||
className={`px-2 py-0.5 rounded-full ${tag.color.bg} ${tag.color.text}`}
|
||||
>
|
||||
{tag.name}
|
||||
</Text>
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<Flex
|
||||
gap="2"
|
||||
align="center"
|
||||
className="text-[--gray-11] mb-3 flex-wrap"
|
||||
>
|
||||
<CalendarIcon className="w-3 h-3" />
|
||||
<Text size="1">
|
||||
{article.publishedAt?.toLocaleDateString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
</Text>
|
||||
<span className="mx-1">·</span>
|
||||
<Text size="1" weight="medium">
|
||||
{article.authorName}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Text className="text-[--gray-11] text-xs md:text-sm line-clamp-2 md:line-clamp-3 leading-relaxed">
|
||||
{article.content}
|
||||
</Text>
|
||||
|
||||
<Flex gap="2" className="mt-auto pt-3 flex-wrap">
|
||||
{article.tags.map((tag) => (
|
||||
<Text
|
||||
key={tag.name}
|
||||
size="1"
|
||||
className={`px-2 py-0.5 rounded-full ${tag.color.bg} ${tag.color.text}`}
|
||||
>
|
||||
{tag.name}
|
||||
</Text>
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Flex justify="center" align="center" gap="2" className="mt-8">
|
||||
<Button
|
||||
variant="soft"
|
||||
className="group"
|
||||
disabled
|
||||
<Flex justify="center" align="center" gap="2" className="mt-8">
|
||||
<Button variant="soft" className="group" disabled>
|
||||
<ChevronLeftIcon className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
|
||||
上一页
|
||||
</Button>
|
||||
|
||||
<Flex gap="1">
|
||||
<Button
|
||||
variant="solid"
|
||||
className="bg-[--accent-9] text-white hover:bg-[--accent-10]"
|
||||
>
|
||||
<ChevronLeftIcon className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
|
||||
上一页
|
||||
</Button>
|
||||
|
||||
<Flex gap="1">
|
||||
<Button
|
||||
variant="solid"
|
||||
className="bg-[--accent-9] text-white hover:bg-[--accent-10]"
|
||||
>
|
||||
1
|
||||
</Button>
|
||||
<Button variant="soft">2</Button>
|
||||
<Button variant="soft">3</Button>
|
||||
<div className="flex items-center px-2 text-[--gray-11]">...</div>
|
||||
<Button variant="soft">10</Button>
|
||||
</Flex>
|
||||
|
||||
<Button
|
||||
variant="soft"
|
||||
className="group"
|
||||
>
|
||||
下一页
|
||||
<ChevronRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
|
||||
1
|
||||
</Button>
|
||||
<Button variant="soft">2</Button>
|
||||
<Button variant="soft">3</Button>
|
||||
<div className="flex items-center px-2 text-[--gray-11]">...</div>
|
||||
<Button variant="soft">10</Button>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
<Button variant="soft" className="group">
|
||||
下一页
|
||||
<ChevronRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Layout } from "interface/layout";
|
||||
import { ThemeModeToggle } from "hooks/themeMode";
|
||||
import { Echoes } from "hooks/echoes";
|
||||
import { Container, Flex, Box, Link, TextField } from "@radix-ui/themes";
|
||||
import { Container, Flex, Box, Link, TextField, Button } from "@radix-ui/themes";
|
||||
import {
|
||||
MagnifyingGlassIcon,
|
||||
HamburgerMenuIcon,
|
||||
@ -59,13 +59,13 @@ export default new Layout(({ children, args }) => {
|
||||
panelBackground="solid"
|
||||
>
|
||||
<Box
|
||||
className="min-h-screen flex flex-col"
|
||||
className="h-screen flex flex-col overflow-hidden"
|
||||
id="nav"
|
||||
>
|
||||
{/* 导航栏 */}
|
||||
<Box
|
||||
asChild
|
||||
className="fixed top-0 w-full backdrop-blur-sm border-b border-[--gray-a5] z-60"
|
||||
className="w-full backdrop-blur-sm border-b border-[--gray-a5] z-60"
|
||||
>
|
||||
<nav>
|
||||
<Container size="4">
|
||||
@ -98,14 +98,14 @@ export default new Layout(({ children, args }) => {
|
||||
size="2"
|
||||
variant="surface"
|
||||
placeholder="搜索..."
|
||||
className="w-[240px] [&_input]:pl-3"
|
||||
className="w-[240px] [&_input]:pl-3 hover:opacity-70 transition-opacity"
|
||||
id="search"
|
||||
>
|
||||
<TextField.Slot
|
||||
side="right"
|
||||
className="p-2"
|
||||
>
|
||||
<MagnifyingGlassIcon className="h-4 w-4 text-[--gray-a12]" />
|
||||
<MagnifyingGlassIcon className="h-4 w-4 text-[--gray-a11]" />
|
||||
</TextField.Slot>
|
||||
</TextField.Root>
|
||||
|
||||
@ -115,25 +115,22 @@ export default new Layout(({ children, args }) => {
|
||||
|
||||
<DropdownMenuPrimitive.Root>
|
||||
<DropdownMenuPrimitive.Trigger asChild>
|
||||
<button className="hover:opacity-70 transition-opacity cursor-pointer">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-10 h-10 p-0 hover:opacity-70 transition-opacity flex items-center justify-center"
|
||||
>
|
||||
{loginState ? (
|
||||
<AvatarIcon className="w-6 h-6 text-[--gray-a12]" />
|
||||
<AvatarIcon className="w-6 h-6 text-[--gray-a11]" />
|
||||
) : (
|
||||
<PersonIcon className="w-6 h-6 text-[--gray-a12]" />
|
||||
<PersonIcon className="w-6 h-6 text-[--gray-a11]" />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</DropdownMenuPrimitive.Trigger>
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<Theme
|
||||
grayColor="gray"
|
||||
accentColor="gray"
|
||||
radius="large"
|
||||
panelBackground="solid"
|
||||
>
|
||||
<DropdownMenuPrimitive.Content
|
||||
align="end"
|
||||
sideOffset={10}
|
||||
className="mt-3 p-1 min-w-[180px] rounded-md bg-[--color-background] border border-[--gray-a5] shadow-lg animate-in fade-in slide-in-from-top-2"
|
||||
className="mt-3 p-1 min-w-[180px] rounded-md bg-[--color-panel] border border-[--gray-a5] shadow-lg animate-in fade-in slide-in-from-top-2"
|
||||
>
|
||||
{loginState ? (
|
||||
<>
|
||||
@ -154,7 +151,6 @@ export default new Layout(({ children, args }) => {
|
||||
</DropdownMenuPrimitive.Item>
|
||||
)}
|
||||
</DropdownMenuPrimitive.Content>
|
||||
</Theme>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
</DropdownMenuPrimitive.Root>
|
||||
</Box>
|
||||
@ -168,13 +164,16 @@ export default new Layout(({ children, args }) => {
|
||||
onOpenChange={setMoreState}
|
||||
>
|
||||
<DropdownMenuPrimitive.Trigger asChild>
|
||||
<button className="hover:opacity-70 transition-opacity p-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-10 h-10 p-0 hover:opacity-70 transition-opacity flex items-center justify-center"
|
||||
>
|
||||
{moreState ? (
|
||||
<Cross1Icon className="h-6 w-6 text-[--gray-a12]" />
|
||||
<Cross1Icon className="h-5 w-5 text-[--gray-a11]" />
|
||||
) : (
|
||||
<HamburgerMenuIcon className="h-6 w-6 text-[--gray-a12]" />
|
||||
<HamburgerMenuIcon className="h-5 w-5 text-[--gray-a11]" />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</DropdownMenuPrimitive.Trigger>
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<Theme
|
||||
@ -186,7 +185,7 @@ export default new Layout(({ children, args }) => {
|
||||
<DropdownMenuPrimitive.Content
|
||||
align="end"
|
||||
sideOffset={5}
|
||||
className="mt-2 p-3 min-w-[280px] rounded-md bg-[--color-background] border border-[--gray-a5] shadow-lg animate-in fade-in slide-in-from-top-2"
|
||||
className="mt-2 p-3 min-w-[280px] rounded-md bg-[--color-panel] border border-[--gray-a5] shadow-lg animate-in fade-in slide-in-from-top-2"
|
||||
>
|
||||
<Box className="flex flex-col gap-2">
|
||||
{parse(navString)}
|
||||
@ -215,8 +214,10 @@ export default new Layout(({ children, args }) => {
|
||||
)}
|
||||
|
||||
{/* 主题切换按钮 */}
|
||||
<Box className="w-6 h-6 flex items-center justify-center">
|
||||
<ThemeModeToggle />
|
||||
<Box className="flex items-center">
|
||||
<Box className="w-6 h-6 flex items-center justify-center">
|
||||
<ThemeModeToggle />
|
||||
</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
@ -225,7 +226,7 @@ export default new Layout(({ children, args }) => {
|
||||
</Box>
|
||||
|
||||
{/* 主要内容区域 */}
|
||||
<Box className="flex-1 w-full mt-16">
|
||||
<Box className="flex-1 w-full overflow-auto">
|
||||
<Container
|
||||
size="4"
|
||||
className="py-8"
|
||||
|
||||
@ -7,10 +7,10 @@ const themeConfig: ThemeConfig = {
|
||||
description: "一个简约风格的博客主题",
|
||||
author: "lsy",
|
||||
configuration: {
|
||||
"nav": {
|
||||
nav: {
|
||||
title: "导航配置",
|
||||
data: '<a href="h">你好</a> <a href="h">不好</a>'
|
||||
}
|
||||
data: '<a href="h">你好</a> <a href="h">不好</a>',
|
||||
},
|
||||
},
|
||||
layout: "layout.tsx",
|
||||
templates: new Map([
|
||||
@ -24,7 +24,7 @@ const themeConfig: ThemeConfig = {
|
||||
],
|
||||
]),
|
||||
|
||||
routes: new Map<string, string>([])
|
||||
routes: new Map<string, string>([]),
|
||||
};
|
||||
|
||||
export default themeConfig;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user