优化git颜色标记,swup切换视图
This commit is contained in:
parent
2ade032160
commit
32ca728974
@ -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>
|
||||
)}
|
||||
|
@ -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() {
|
||||
// 应用过渡效果
|
||||
|
Loading…
Reference in New Issue
Block a user