优化git颜色标记,swup切换视图

This commit is contained in:
lsy 2025-05-16 16:00:59 +08:00
parent 2ade032160
commit 32ca728974
2 changed files with 48 additions and 53 deletions

View File

@ -230,27 +230,47 @@ const GitProjectCollection: React.FC<GitProjectCollectionProps> = ({
};
const getLanguageColor = (language: string) => {
const colors: Record<string, string> = {
JavaScript: 'bg-yellow-300',
TypeScript: 'bg-blue-400',
Python: 'bg-blue-600',
Java: 'bg-red-500',
Go: 'bg-blue-300',
Rust: 'bg-orange-600',
C: 'bg-gray-500',
'C++': 'bg-pink-500',
'C#': 'bg-green-500',
PHP: 'bg-purple-500',
Ruby: 'bg-red-600',
Swift: 'bg-orange-500',
Kotlin: 'bg-purple-400',
Dart: 'bg-blue-500',
HTML: 'bg-orange-400',
CSS: 'bg-blue-400',
Shell: 'bg-green-600',
// 确保语言名不为空
if (!language || language.trim() === '') {
return '#94a3b8'; // 默认灰色
}
// 哈希函数 - 将字符串转换为数字
const hashCode = (str: string) => {
let hash = 0;
for (let i = 0; i < str.length; i++) {
// 字符的Unicode值乘以位置和一个素数
hash = ((hash << 5) - hash) + str.charCodeAt(i);
hash = hash & hash; // 转换为32位整数
}
return Math.abs(hash);
};
return colors[language] || 'bg-gray-400';
// 从预定义的颜色数组中选择颜色
const colors = [
'#ef4444', // red
'#f97316', // orange
'#f59e0b', // amber
'#eab308', // yellow
'#84cc16', // lime
'#22c55e', // green
'#10b981', // emerald
'#14b8a6', // teal
'#06b6d4', // cyan
'#0ea5e9', // blue
'#6366f1', // indigo
'#8b5cf6', // violet
'#a855f7', // purple
'#d946ef', // fuchsia
'#ec4899', // pink
'#f43f5e' // rose
];
// 基于语言名生成的哈希值选择颜色
const hash = hashCode(language);
const colorIndex = hash % colors.length;
return colors[colorIndex];
};
const breakpointColumnsObj = {
@ -367,7 +387,15 @@ const GitProjectCollection: React.FC<GitProjectCollectionProps> = ({
<div className="flex flex-wrap items-center text-xs gap-4">
{project.language && (
<div className="flex items-center">
<span className={`w-3 h-3 rounded-full mr-1.5 ${getLanguageColor(project.language)}`}></span>
<span
style={{
backgroundColor: getLanguageColor(project.language),
width: '0.75rem',
height: '0.75rem',
borderRadius: '9999px',
marginRight: '0.375rem'
}}
></span>
<span className="text-gray-600 dark:text-gray-400">{project.language}</span>
</div>
)}

View File

@ -308,39 +308,6 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
// 初始化历史状态 - 确保第一个页面正确记录
if (window.history && window.history.replaceState) {
// 获取当前页面的关键信息
const pageData = {
url: window.location.pathname + window.location.search,
title: document.title,
scroll: {
x: window.scrollX,
y: window.scrollY
},
timestamp: Date.now()
};
// 记录初始状态,确保返回时能正确恢复
try {
const currentState = window.history.state || {};
// 保留所有现有状态添加swup需要的内容
const newState = {
...currentState,
url: pageData.url,
title: pageData.title,
scroll: pageData.scroll,
source: 'swup', // 修改为source标记以符合默认skipPopStateHandling
id: Math.random().toString(36).substring(2, 11) // 生成唯一ID
};
// 使用replaceState不增加历史记录
window.history.replaceState(newState, pageData.title, pageData.url);
} catch (e) {
console.error('Failed to initialize history state:', e);
}
}
// 重新设置过渡元素
function setupTransition() {
// 应用过渡效果