feat: unify public and admin interfaces
This commit is contained in:
admin_gitea
+105
-158
@@ -1,158 +1,105 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div v-for="(siteChunk, index) in chunkedSites" :key="index" class="swiper-slide">
|
||||
<div class="site-grid">
|
||||
<div v-for="(site, i) in siteChunk" :key="i" class="site-box" @click="openLink(site.url)">
|
||||
<div class="site-content">
|
||||
<i :class="site.icon" aria-hidden="true"></i>
|
||||
<span class="site-name">{{ site.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Swiper from 'swiper/bundle';
|
||||
import 'swiper/swiper-bundle.css';
|
||||
import { getSites } from '../api';
|
||||
|
||||
const sites = ref([]);
|
||||
const chunkedSites = ref([]);
|
||||
|
||||
const loadSites = async () => {
|
||||
try {
|
||||
const res = await getSites();
|
||||
sites.value = res.data;
|
||||
// 将站点数据分块（每页6个）
|
||||
chunkedSites.value = sites.value.reduce((acc, site, index) => {
|
||||
const chunkIndex = Math.floor(index / 6);
|
||||
if (!acc[chunkIndex]) acc[chunkIndex] = [];
|
||||
acc[chunkIndex].push(site);
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
// 如果数据加载后需要重新初始化Swiper
|
||||
if (chunkedSites.value.length > 0) {
|
||||
setTimeout(() => {
|
||||
initSwiper();
|
||||
}, 100);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载站点数据失败:', error);
|
||||
// 如果API失败，使用空数组
|
||||
chunkedSites.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
let swiperInstance = null;
|
||||
|
||||
const initSwiper = () => {
|
||||
if (swiperInstance) {
|
||||
swiperInstance.destroy();
|
||||
}
|
||||
swiperInstance = new Swiper('.swiper-container', {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20,
|
||||
pagination: { el: '.swiper-pagination', clickable: true },
|
||||
mousewheel: true,
|
||||
});
|
||||
};
|
||||
|
||||
const openLink = (url) => {
|
||||
if (url) window.open(url, '_blank');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadSites();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
bottom: inherit;
|
||||
}
|
||||
|
||||
.site-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.site-box {
|
||||
padding: 30px;
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: rgba(var(--background-color-rgb), 0.2);
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 1px 8px var(--shadow-color);
|
||||
}
|
||||
}
|
||||
|
||||
.site-content {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: var(--icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.site-name {
|
||||
margin: 0;
|
||||
font-size: 1.17em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.site-content {
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.site-box {
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.site-content i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.swiper-pagination-bullet-active) {
|
||||
background: #8c8c8c94;
|
||||
width: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<section class="sites" aria-label="站点导航" :aria-busy="loading">
|
||||
<div v-if="loading" class="site-grid site-grid--loading" aria-label="正在加载站点">
|
||||
<span v-for="index in 6" :key="index" class="site-skeleton"></span>
|
||||
</div>
|
||||
<div v-else ref="swiperElement" class="swiper sites-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div v-for="(siteChunk, index) in chunkedSites" :key="index" class="swiper-slide">
|
||||
<div class="site-grid">
|
||||
<a
|
||||
v-for="site in siteChunk"
|
||||
:key="site.id || site.url"
|
||||
:href="site.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="site-box"
|
||||
>
|
||||
<i :class="site.icon" aria-hidden="true"></i>
|
||||
<span>{{ site.name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="paginationElement" class="swiper-pagination"></div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||
import Swiper from 'swiper/bundle'
|
||||
import 'swiper/swiper-bundle.css'
|
||||
import { getSites } from '../api'
|
||||
import fallbackSites from '../config/site.json'
|
||||
|
||||
const sites = ref([])
|
||||
const loading = ref(true)
|
||||
const swiperElement = ref(null)
|
||||
const paginationElement = ref(null)
|
||||
const chunkedSites = computed(() => sites.value.reduce((chunks, site, index) => {
|
||||
const chunkIndex = Math.floor(index / 6)
|
||||
if (!chunks[chunkIndex]) chunks[chunkIndex] = []
|
||||
chunks[chunkIndex].push(site)
|
||||
return chunks
|
||||
}, []))
|
||||
let swiperInstance = null
|
||||
|
||||
const initializeSwiper = async () => {
|
||||
await nextTick()
|
||||
swiperInstance?.destroy(true, true)
|
||||
if (!swiperElement.value || chunkedSites.value.length < 1) return
|
||||
swiperInstance = new Swiper(swiperElement.value, {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 18,
|
||||
pagination: { el: paginationElement.value, clickable: true },
|
||||
mousewheel: { forceToAxis: true },
|
||||
keyboard: { enabled: true },
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const { data } = await getSites()
|
||||
sites.value = Array.isArray(data) && data.length ? data : fallbackSites
|
||||
} catch {
|
||||
sites.value = fallbackSites
|
||||
} finally {
|
||||
loading.value = false
|
||||
initializeSwiper()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => swiperInstance?.destroy(true, true))
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sites { width: min(100%, 700px); min-height: 185px; margin: 2px 0 0; }
|
||||
.sites-swiper { overflow: hidden; padding: 10px 10px 28px; }
|
||||
.site-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
||||
.site-box,
|
||||
.site-skeleton {
|
||||
min-width: 0;
|
||||
min-height: 72px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
.site-box { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 18px; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
|
||||
.site-box:hover { transform: translateY(-2px); border-color: var(--hover-link-color); box-shadow: 0 3px 10px var(--shadow-color); }
|
||||
.site-box i { flex: 0 0 auto; font-size: var(--icon-size); }
|
||||
.site-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.site-grid--loading { padding: 10px; }
|
||||
.site-skeleton { animation: pulse 1.2s ease-in-out infinite alternate; }
|
||||
@keyframes pulse { to { opacity: 0.45; } }
|
||||
:deep(.swiper-pagination-bullet) { background: var(--text-muted); }
|
||||
:deep(.swiper-pagination-bullet-active) { width: 20px; border-radius: 5px; background: var(--hover-link-color); }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.sites { min-height: 160px; }
|
||||
.site-grid { gap: 9px; }
|
||||
.site-box,
|
||||
.site-skeleton { min-height: 60px; }
|
||||
.site-box { flex-direction: column; gap: 5px; padding: 10px 6px; font-size: 14px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user