add fix
This commit is contained in:
25
dist/assets/index-49ab660b.js
vendored
25
dist/assets/index-49ab660b.js
vendored
File diff suppressed because one or more lines are too long
25
dist/assets/index-703585ab.js
vendored
Normal file
25
dist/assets/index-703585ab.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/assets/index-743d6731.css
vendored
Normal file
1
dist/assets/index-743d6731.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/assets/index-d8480177.css
vendored
1
dist/assets/index-d8480177.css
vendored
File diff suppressed because one or more lines are too long
7
dist/index.html
vendored
7
dist/index.html
vendored
@@ -3,13 +3,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path d='M605.848435 958.708971c-0.36225 0-0.724501-0.008186-1.088798-0.026606-9.098215-0.468674-16.872273-6.712889-19.288299-15.495926L476.898551 548.458353 80.07064 437.83486c-8.760524-2.442632-14.976086-10.218736-15.427364-19.304671-0.451278-9.083889 4.965082-17.437138 13.44215-20.73423L929.251056 66.728774c7.80885-3.038196 16.669658-1.174756 22.597671 4.750187 5.922896 5.92392 7.788383 14.789844 4.751211 22.597671L625.531729 958.708971C622.361527 953.390849 614.518908 958.708971 605.848435 958.708971zM152.537092 414.172951l347.232352 96.79658c7.148817 1.9934 12.726859 7.591909 14.696724 14.746866l94.821599 344.730369 290.525839-746.93166L152.537092 414.172951z' fill='%231296db'/></svg>">
|
||||
<script defer src="https://count.020417.xyz/script.js" data-website-id="aa62fe9b-8d52-4542-9d75-7670be99d95a"></script>
|
||||
<title>导航卡片</title>
|
||||
<script type="module" crossorigin src="/assets/index-49ab660b.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-d8480177.css">
|
||||
<script type="module" crossorigin src="/assets/index-703585ab.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-743d6731.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
2482
dist/link.json
vendored
2482
dist/link.json
vendored
File diff suppressed because it is too large
Load Diff
3152
dist/processed_links.json
vendored
3152
dist/processed_links.json
vendored
File diff suppressed because it is too large
Load Diff
43
src/App.vue
43
src/App.vue
@@ -72,6 +72,7 @@
|
||||
<div v-for="(card, index) in displayCards" :key="card.url + card.index" class="card-wrapper"
|
||||
:style="{ animationDelay: `${index * 0.05}s` }">
|
||||
<SmartCard :card="card" :index="index" :category-color="getCategoryColor(card.catelog)"
|
||||
:is-invalid="linkStatus[card.url] === false"
|
||||
@click="openLink(card.url)" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,6 +133,7 @@ const allLinks = ref([])
|
||||
const loading = ref(true)
|
||||
const searchQuery = ref('')
|
||||
const selectedCategory = ref('')
|
||||
const linkStatus = ref({}) // 存储链接检测状态
|
||||
|
||||
// 搜索功能
|
||||
const filteredCards = computed(() => {
|
||||
@@ -248,6 +250,45 @@ const openLink = (url) => {
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
|
||||
// 检测单个链接是否有效
|
||||
const checkLinkStatus = async (url) => {
|
||||
try {
|
||||
const controller = new AbortController()
|
||||
const timeoutId = setTimeout(() => controller.abort(), 5000)
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'HEAD',
|
||||
mode: 'no-cors',
|
||||
signal: controller.signal
|
||||
})
|
||||
|
||||
clearTimeout(timeoutId)
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 批量检测所有链接
|
||||
const checkAllLinks = async () => {
|
||||
const links = allLinks.value
|
||||
const batchSize = 5 // 每批检测5个,避免过多请求
|
||||
|
||||
for (let i = 0; i < links.length; i += batchSize) {
|
||||
const batch = links.slice(i, i + batchSize)
|
||||
const promises = batch.map(async (link) => {
|
||||
const isValid = await checkLinkStatus(link.url)
|
||||
linkStatus.value[link.url] = isValid
|
||||
})
|
||||
|
||||
await Promise.all(promises)
|
||||
// 每批之间延迟 500ms,避免请求过快
|
||||
if (i + batchSize < links.length) {
|
||||
await new Promise(resolve => setTimeout(resolve, 500))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const loadLinks = async () => {
|
||||
try {
|
||||
@@ -262,6 +303,8 @@ const loadLinks = async () => {
|
||||
loadFallbackData()
|
||||
} finally {
|
||||
loading.value = false
|
||||
// 数据加载完成后开始检测链接
|
||||
checkAllLinks()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
class="smart-card"
|
||||
:class="{
|
||||
'is-hovered': isHovered,
|
||||
'is-pressed': isPressed
|
||||
'is-pressed': isPressed,
|
||||
'is-invalid': isInvalid
|
||||
}"
|
||||
:style="cardStyle"
|
||||
@click="handleClick"
|
||||
@@ -12,13 +13,13 @@
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseup="handleMouseUp"
|
||||
>
|
||||
<!-- 卡片背景装饰 -->
|
||||
<div class="card-decoration" :style="{ background: categoryColor }"></div>
|
||||
<!-- 卡片背景装饰 - 使用随机渐变色 -->
|
||||
<div class="card-decoration" :style="{ background: cardGradient }"></div>
|
||||
|
||||
<!-- 卡片内容 -->
|
||||
<div class="card-content">
|
||||
<div class="card-header">
|
||||
<div class="category-badge" :style="{ background: categoryColor }">
|
||||
<div class="category-badge" :style="{ background: cardGradient }">
|
||||
{{ card.catelog }}
|
||||
</div>
|
||||
<h3 class="card-title">{{ card.name }}</h3>
|
||||
@@ -43,10 +44,18 @@
|
||||
</div>
|
||||
|
||||
<!-- 悬停光效层 -->
|
||||
<div v-if="isHovered" class="hover-glow" :style="{ background: categoryColor }"></div>
|
||||
<div v-if="isHovered" class="hover-glow" :style="{ background: cardGradient }"></div>
|
||||
|
||||
<!-- 点击涟漪效果 -->
|
||||
<div v-if="isPressed" class="ripple-effect" :style="{ background: categoryColor }"></div>
|
||||
<div v-if="isPressed" class="ripple-effect" :style="{ background: cardGradient }"></div>
|
||||
|
||||
<!-- 无效链接蒙版 -->
|
||||
<div v-if="isInvalid" class="invalid-overlay">
|
||||
<div class="invalid-content">
|
||||
<span class="invalid-icon">✕</span>
|
||||
<span class="invalid-text">链接失效</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -65,6 +74,10 @@ const props = defineProps({
|
||||
categoryColor: {
|
||||
type: String,
|
||||
default: '#667eea'
|
||||
},
|
||||
isInvalid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
@@ -74,6 +87,40 @@ const isHovered = ref(false)
|
||||
const isPressed = ref(false)
|
||||
const rotation = ref(0)
|
||||
|
||||
// 预设渐变色方案
|
||||
const gradientPresets = [
|
||||
'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||||
'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||||
'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
|
||||
'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
|
||||
'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
|
||||
'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
|
||||
'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
|
||||
'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
|
||||
'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)',
|
||||
'linear-gradient(135deg, #fc466b 0%, #3f5efb 100%)',
|
||||
'linear-gradient(135deg, #3f2b96 0%, #a8c0ff 100%)',
|
||||
'linear-gradient(135deg, #f857a6 0%, #ff5858 100%)',
|
||||
'linear-gradient(135deg, #00b09b 0%, #96c93d 100%)',
|
||||
'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
|
||||
'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
|
||||
'linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%)'
|
||||
]
|
||||
|
||||
// 根据 URL 生成固定的随机渐变色
|
||||
const cardGradient = computed(() => {
|
||||
let hash = 0
|
||||
for (let i = 0; i < props.card.url.length; i++) {
|
||||
const char = props.card.url.charCodeAt(i)
|
||||
hash = ((hash << 5) - hash) + char
|
||||
hash = hash & hash
|
||||
}
|
||||
const index = Math.abs(hash) % gradientPresets.length
|
||||
return gradientPresets[index]
|
||||
})
|
||||
|
||||
// 计算卡片样式
|
||||
const cardStyle = computed(() => {
|
||||
const baseZIndex = isHovered.value ? 100 + props.index : 10 + props.index
|
||||
@@ -395,6 +442,62 @@ const handleClick = (event) => {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* 无效链接蒙版 */
|
||||
.invalid-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
border-radius: 14px;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.invalid-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.invalid-icon {
|
||||
font-size: 2.5rem;
|
||||
color: #ff4444;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 8px rgba(255, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
.invalid-text {
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.smart-card.is-invalid {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.smart-card.is-invalid .card-content {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.smart-card {
|
||||
|
||||
Reference in New Issue
Block a user