feat(about): 优化技术云渲染和缓存配置
- 添加 CSS `will-change` 属性提升动画性能 - 支持自定义 GitHub 和博客缓存键配置 - 技术标签云支持窗口大小变化时重新初始化 - 为 3D 标签球添加动画防抖标识防止重复执行 - 优化标签位置更新逻辑确保动画同步 - 移除冗余的博客缓存时间键配置项
This commit is contained in:
@@ -271,6 +271,7 @@ body {
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
/* 移除背景色和边框,只保留文字渐变效果 */
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
14
js/about.js
14
js/about.js
@@ -142,7 +142,7 @@ class DataManager {
|
||||
// 优先缓存 -> API -> 默认值
|
||||
async fetchGithub() {
|
||||
const user = (window.SiteConfig?.github?.username) || 'listener-He';
|
||||
const cacheKey = 'gh_data_v2';
|
||||
const cacheKey = (window.SiteConfig?.github?.cache?.cacheKey) || 'gh_data_v2';
|
||||
const cached = JSON.parse(localStorage.getItem(cacheKey));
|
||||
const now = Date.now();
|
||||
|
||||
@@ -220,7 +220,7 @@ class DataManager {
|
||||
// 从RSS获取博客文章
|
||||
async fetchBlog() {
|
||||
const rssUrl = window.SiteConfig?.blog?.rssUrl || 'https://blog.hehouhui.cn/api/rss';
|
||||
const cacheKey = 'blog_data_v2';
|
||||
const cacheKey = window.SiteConfig?.blog?.cache?.key || 'blog_data_v2';
|
||||
const cached = JSON.parse(localStorage.getItem(cacheKey));
|
||||
const now = Date.now();
|
||||
|
||||
@@ -332,6 +332,11 @@ class UIManager {
|
||||
this.initTechCloud();
|
||||
this.initModal();
|
||||
this.initArtalk();
|
||||
let resizeTimer = null;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(() => this.initTechCloud(), 150);
|
||||
});
|
||||
}
|
||||
|
||||
initModal() {
|
||||
@@ -392,6 +397,8 @@ class UIManager {
|
||||
} else {
|
||||
// PC: 3D Sphere
|
||||
container.classList.remove('mobile-scroll');
|
||||
const token = Date.now();
|
||||
container.__animToken = token;
|
||||
const tags = [];
|
||||
|
||||
techStack.forEach((item, index) => {
|
||||
@@ -431,6 +438,7 @@ class UIManager {
|
||||
};
|
||||
|
||||
const update = () => {
|
||||
if (container.__animToken !== token) return;
|
||||
let a, b;
|
||||
if(active) {
|
||||
a = (-Math.min(Math.max(-mouseY, -200), 200)/radius) * 2 + autoAx;
|
||||
@@ -458,7 +466,7 @@ class UIManager {
|
||||
let top = tag.y + container.offsetHeight/2 - tag.el.offsetHeight/2;
|
||||
tag.el.style.transform = `translate(${left}px, ${top}px) scale(${scale})`;
|
||||
});
|
||||
requestAnimationFrame(update);
|
||||
container.__animId = requestAnimationFrame(update);
|
||||
};
|
||||
update();
|
||||
}
|
||||
|
||||
@@ -36,6 +36,7 @@ const SiteConfig = {
|
||||
github: {
|
||||
username: 'listener-He',
|
||||
cache: {
|
||||
cacheKey: "gh_data_v2",
|
||||
stats: {
|
||||
key: 'github_stats_cache',
|
||||
timeKey: 'github_stats_cache_time',
|
||||
@@ -58,7 +59,6 @@ const SiteConfig = {
|
||||
rssUrl: 'https://blog.hehouhui.cn/api/rss',
|
||||
cache: {
|
||||
key: 'blog_articles_cache',
|
||||
timeKey: 'blog_articles_cache_time',
|
||||
expirationDays: 1
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user