leemuzi/nav_devops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add fix

Browse Source
This commit is contained in:
爱喝水的木子
2026-02-09 16:37:34 +08:00
parent 72b9c781f6
commit dc4460fba4
10 changed files with 1531 additions and 7511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3191
dist/1.ts vendored
View File

File diff suppressed because it is too large Load Diff

25
dist/assets/index-49ab660b.js vendored
View File

File diff suppressed because one or more lines are too long

25
dist/assets/index-703585ab.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-743d6731.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-d8480177.css vendored
View File

File diff suppressed because one or more lines are too long

5
dist/index.html vendored
View File

@@ -3,10 +3,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> <script defer src="https://count.020417.xyz/script.js" data-website-id="aa62fe9b-8d52-4542-9d75-7670be99d95a"></script>
<title>导航卡片</title> <title>导航卡片</title>
<script type="module" crossorigin src="/assets/index-49ab660b.js"></script> <script type="module" crossorigin src="/assets/index-703585ab.js"></script>
<link rel="stylesheet" href="/assets/index-d8480177.css"> <link rel="stylesheet" href="/assets/index-743d6731.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

2480
dist/link.json vendored
View File

File diff suppressed because it is too large Load Diff

3152
dist/processed_links.json vendored
View File

File diff suppressed because it is too large Load Diff

43
src/App.vue
View File

@@ -72,6 +72,7 @@
<div v-for="(card, index) in displayCards" :key="card.url + card.index" class="card-wrapper" <div v-for="(card, index) in displayCards" :key="card.url + card.index" class="card-wrapper"
:style="{ animationDelay: `${index * 0.05}s` }"> :style="{ animationDelay: `${index * 0.05}s` }">
<SmartCard :card="card" :index="index" :category-color="getCategoryColor(card.catelog)" <SmartCard :card="card" :index="index" :category-color="getCategoryColor(card.catelog)"
:is-invalid="linkStatus[card.url] === false"
@click="openLink(card.url)" /> @click="openLink(card.url)" />
</div> </div>
</div> </div>
@@ -132,6 +133,7 @@ const allLinks = ref([])
const loading = ref(true) const loading = ref(true)
const searchQuery = ref('') const searchQuery = ref('')
const selectedCategory = ref('') const selectedCategory = ref('')
const linkStatus = ref({}) // 存储链接检测状态
// 搜索功能 // 搜索功能
const filteredCards = computed(() => { const filteredCards = computed(() => {
@@ -248,6 +250,45 @@ const openLink = (url) => {
window.open(url, '_blank') 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 () => { const loadLinks = async () => {
try { try {
@@ -262,6 +303,8 @@ const loadLinks = async () => {
loadFallbackData() loadFallbackData()
} finally { } finally {
loading.value = false loading.value = false
// 数据加载完成后开始检测链接
checkAllLinks()
} }
} }

115
src/components/SmartCard.vue
View File

@@ -3,7 +3,8 @@
class="smart-card" class="smart-card"
:class="{ :class="{
'is-hovered': isHovered, 'is-hovered': isHovered,
'is-pressed': isPressed 'is-pressed': isPressed,
'is-invalid': isInvalid
}" }"
:style="cardStyle" :style="cardStyle"
@click="handleClick" @click="handleClick"
@@ -12,13 +13,13 @@
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
@mouseup="handleMouseUp" @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-content">
<div class="card-header"> <div class="card-header">
<div class="category-badge" :style="{ background: categoryColor }"> <div class="category-badge" :style="{ background: cardGradient }">
{{ card.catelog }} {{ card.catelog }}
</div> </div>
<h3 class="card-title">{{ card.name }}</h3> <h3 class="card-title">{{ card.name }}</h3>
@@ -43,10 +44,18 @@
</div> </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> </div>
</template> </template>
@@ -65,6 +74,10 @@ const props = defineProps({
categoryColor: { categoryColor: {
type: String, type: String,
default: '#667eea' default: '#667eea'
},
isInvalid: {
type: Boolean,
default: false
} }
}) })
@@ -74,6 +87,40 @@ const isHovered = ref(false)
const isPressed = ref(false) const isPressed = ref(false)
const rotation = ref(0) 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 cardStyle = computed(() => {
const baseZIndex = isHovered.value ? 100 + props.index : 10 + props.index const baseZIndex = isHovered.value ? 100 + props.index : 10 + props.index
@@ -395,6 +442,62 @@ const handleClick = (event) => {
transform: scale(0.97); 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) { @media (max-width: 768px) {
.smart-card { .smart-card {