mirror of
https://github.com/RhenCloud/Cloud-Home.git
synced 2026-01-22 17:39:07 +08:00
refactor:删除已弃用的组件和样式,迁移到 Tailwind CSS
- 改进项目页面、网站页面、友链页面 - 从 styles.css 中移除全局样式。 - 添加 tailwind.config.ts 以配置 Tailwind CSS。 - 更新 tsconfig.json,加入 Vue 组件的新路径映射。
This commit is contained in:
51
app/components/PageSwitcher.vue
Normal file
51
app/components/PageSwitcher.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="my-4 mx-auto max-w-3xl w-full px-4 py-3 grid grid-cols-[auto_1fr_auto] gap-3 items-center">
|
||||
<button :disabled="currentIndex <= 0" @click="goPrev"
|
||||
class="bg-white/10 text-text-primary border border-white/15 rounded-2xl px-3 py-2 cursor-pointer transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
上一页
|
||||
</button>
|
||||
<div class="flex gap-2 flex-wrap justify-center">
|
||||
<button v-for="item in pages" :key="item.name" :class="{
|
||||
'bg-primary/30 border-primary/60 text-primary shadow-lg shadow-primary/25':
|
||||
item.name === route.name,
|
||||
}" @click="router.push({ name: item.name })"
|
||||
class="px-2.5 py-2 bg-white/10 text-text-primary border border-white/15 rounded-2xl cursor-pointer transition-all duration-200 hover:bg-white/15 hover:border-primary/40">
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</div>
|
||||
<button :disabled="currentIndex >= pages.length - 1" @click="goNext"
|
||||
class="bg-white/10 text-text-primary border border-white/15 rounded-2xl px-3 py-2 cursor-pointer transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const pages = [
|
||||
{ name: "index", label: "首页" },
|
||||
{ name: "about", label: "关于" },
|
||||
{ name: "sites", label: "网站" },
|
||||
{ name: "projects", label: "项目" },
|
||||
{ name: "friends", label: "友链" },
|
||||
];
|
||||
|
||||
const currentIndex = computed(() => pages.findIndex((item) => item.name === route.name));
|
||||
|
||||
const goPrev = () => {
|
||||
if (currentIndex.value > 0) {
|
||||
router.push({ name: pages[currentIndex.value - 1].name });
|
||||
}
|
||||
};
|
||||
|
||||
const goNext = () => {
|
||||
if (currentIndex.value < pages.length - 1) {
|
||||
router.push({ name: pages[currentIndex.value + 1].name });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user