Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 更新一下火神80HUB组件 #201

Merged
merged 2 commits into from
Nov 28, 2024
+111 −65
Merged

feat: 更新一下火神80HUB组件 #201

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38651f9
feat: 更新一下火神80HUB组件
pysio2007 Nov 28, 2024
cae4316
feat: 添加加载获取提示容器
pysio2007 Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 111 additions & 65 deletions src/.vuepress/components/HuoShen80Hub.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,122 @@
<!-- 展示Github项目 https://github.com/pysio2007/HuoShen80Hub 中的图片 -->

<template>
<div class="image-gallery">
<div v-for="(url, index) in sortedUrls" :key="index">
<h3>{{ getFileName(url) }}</h3>
<div v-if="info[getFileName(url)]" class="hint-container info">
<p class="hint-container-title">相关信息</p>
<p>{{ info[getFileName(url)] }}</p>
</div>
<img :src="url" :alt="getFileName(url)">
<!-- 只在非加载状态显示搜索框 -->
<div v-if="!loading" class="search-container">
<input v-model="searchQuery" type="text" placeholder="搜索图片..." class="search-input">
</div>

<!-- 加载提示 -->
<div v-if="loading" class="hint-container note">
<p class="hint-container-title">加载中</p>
<p>正在获取图片列表...</p>
</div>

<div class="image-gallery">
<div v-for="(url, index) in filteredUrls" :key="index">
<h3>{{ getFileName(url) }}</h3>
<div v-if="info[getFileName(url)]" class="hint-container info">
<p class="hint-container-title">相关信息</p>
<p>{{ info[getFileName(url)] }}</p>
</div>
<img :src="url" :alt="getFileName(url)" :data-title="getFileName(url)" class="vp-image">
</div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'

export default {
name: 'HuoShen80Hub',
setup() {
const urls = ref([])
const info = ref({})

const fetchUrls = async () => {
try {
const response = await fetch('https://cdn.akaere.online/raw.githubusercontent.com/pysio2007/HuoShen80Hub/refs/heads/master/url.csv')
const text = await response.text()
urls.value = text.split('\n').filter(url => url.trim() !== '')
} catch (error) {
console.error('Error fetching URLs:', error)
}
</div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'

export default {
name: 'HuoShen80Hub',
setup() {
const urls = ref([])
const info = ref({})
const searchQuery = ref('')
const loading = ref(true) // 添加loading状态

const fetchUrls = async () => {
try {
const response = await fetch('https://cdn.akaere.online/raw.githubusercontent.com/pysio2007/HuoShen80Hub/refs/heads/master/url.csv')
const text = await response.text()
urls.value = text.split('\n').filter(url => url.trim() !== '')
} catch (error) {
console.error('Error fetching URLs:', error)
}

const fetchInfo = async () => {
try {
const response = await fetch('https://cdn.akaere.online/raw.githubusercontent.com/pysio2007/HuoShen80Hub/refs/heads/master/info.json')
info.value = await response.json()
} catch (error) {
console.error('Error fetching info:', error)
}
}

const fetchInfo = async () => {
try {
const response = await fetch('https://cdn.akaere.online/raw.githubusercontent.com/pysio2007/HuoShen80Hub/refs/heads/master/info.json')
info.value = await response.json()
} catch (error) {
console.error('Error fetching info:', error)
} finally {
loading.value = false // 数据加载完成
}

const getFileName = (url) => {
return url.split('/').pop()
}

const getFileName = (url) => {
return url.split('/').pop()
}

const filteredUrls = computed(() => {
if (!searchQuery.value) {
return sortedUrls.value
}

const sortedUrls = computed(() => {
return [...urls.value].sort((a, b) => {
const fileNameA = getFileName(a).toLowerCase()
const fileNameB = getFileName(b).toLowerCase()
return fileNameA.localeCompare(fileNameB)
})
})

onMounted(() => {
fetchUrls()
fetchInfo()
return sortedUrls.value.filter(url =>
getFileName(url).toLowerCase().includes(searchQuery.value.toLowerCase()) ||
(info.value[getFileName(url)] || '').toLowerCase().includes(searchQuery.value.toLowerCase())
)
})

const sortedUrls = computed(() => {
return [...urls.value].sort((a, b) => {
const fileNameA = getFileName(a).toLowerCase()
const fileNameB = getFileName(b).toLowerCase()
return fileNameA.localeCompare(fileNameB)
})

return {
sortedUrls,
info,
getFileName
}
})

onMounted(() => {
fetchUrls()
fetchInfo()
})

return {
filteredUrls,
info,
getFileName,
searchQuery,
loading
}
}
</script>

<style scoped>
.image-gallery img {
max-width: 100%;
height: auto;
}

</style>
}
</script>

<style scoped>
.search-container {
margin: 20px 0;
text-align: center;
}

.search-input {
width: 100%;
max-width: 500px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}

.image-gallery img {
max-width: 100%;
height: auto;
cursor: zoom-in;
transition: transform 0.3s ease;
}

.image-gallery img:hover {
transform: scale(1.02);
}
</style>