cantyonion/WebIndex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加了一点新内容

Browse Source
This commit is contained in:
Jeffrey Hsu 2024-11-12 08:47:02 +08:00
parent 271f0608d7
commit c8083bd025
10 changed files with 123 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/App.vue
View File

@ -3,6 +3,7 @@ import {onMounted} from "vue";
import emitter from "@/utils/mitt.ts";
import NavBar from "@/components/nav/NavBar.vue";
import {removeMobileTopColor, setMobileTopColor} from "@/utils/function.ts";
import MainFooter from "@/components/footer/MainFooter.vue";
const loadingElement = document.getElementById("loading") as HTMLDivElement;
@ -21,52 +22,13 @@ onMounted(() => {
</script>
<template>
<div class="relative min-h-screen overflow-hidden bg-blue-50">
<div class="relative flex min-h-screen flex-col overflow-hidden bg-blue-50">
<nav-bar/>
<router-view/>
<footer class="mt-8 items-end pt-48 pb-8 min-h-48 bg">
<div class="container mx-auto px-4 md:px-0 xl:max-w-screen-xl">
<div class="grid-cols-4 gird min-h-48">
<div>
<div class="flex items-center gap-4">
<img alt="" class="h-20 w-20" src="@/assets/logo-c.png">
<div class="text-4xl leading-7 text-gray-500" style="font-family: BaconyScript, sans-serif">
<p>CantyOn_ion's</p>
<p>Index</p>
</div>
</div>
<p class="mt-20 leading-8 text-gray-500">&copy;2024 All rights reserved.</p>
</div>
</div>
<div class="flex flex-col text-gray-500 md:flex-row">
<a class="mr-4 hover:text-black" href="https://beian.miit.gov.cn/"
target="_blank">苏ICP备2022016243号-1</a>
<div>
<img alt="" class="inline-block w-4 pb-1" src="@/assets/beian.png"/>
<a class="hover:text-black" href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641/"
target="_blank">苏公网安备32050602011641</a>
</div>
</div>
<!-- <div class="flex justify-center gap-4">-->
<!-- <a href="https://beian.miit.gov.cn/" target="_blank">-->
<!-- <img alt="苏ICP备2022016243号-1"-->
<!-- src="https://img.shields.io/badge/%E8%8B%8FICP%E5%A4%87-2022016243%E5%8F%B7&#45;&#45;1-green?style=for-the-badge">-->
<!-- </a>-->
<!-- <a href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641" rel="noreferrer" target="_blank">-->
<!-- <img alt="苏公网安备32050602011641"-->
<!-- src="https://img.shields.io/badge/%E8%8B%8F%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87-32050602011641-blue?style=for-the-badge&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAFQklEQVRYw%2B3Wa1BUdRjH8SOpMeg4WhZGpDIxiaaTeUFgWrxE4AVRQJGlRRAVIV1JkbgMgQLi5AVBQSVLSp0xlEAUKBEEFZCrCstll8UV2AV2YbmoGCrYv31%2BR95UL5pmmtamZ%2Bbz6rz5nvOc%2F5zDcX9jGLs%2FiTxuyvIlWYkRFeTHA2HVRFtzfhthTG5KuH96%2FvUgNlC4mMgyw1NJit%2FaAXLKazYje9xtIMZ%2FOZz50gW%2B9hcNkvoLEemEPbnrSP47QYwxQ5Ifv54RqzcXwFFvSyjaOhfavN8F7Y5ZcC%2FHH9JOB4LNa9Zw5YA76OZV8vIGMdZtSp7cDrtOnOavYiQhTAiPwi1AMtIQaqyngsxpBtw2GAGDKfaQmpUAa6xc4Vfp4UtEdzAMycsT9JQ1Tyctl%2F2eEkuTlYysF%2FrCUNxMqDEzgTqzSXBnpgnIHCzgjvEEuD52DLBr3rA1MAaWmNtB582wdtIljZ9G9D%2BIPU6aTxIPBjHCcXvg3CEh9K2fDLWvjIH6D6fwTIyheuwEqLUyhzLOALq8pkN%2BbgRw3HY4FBsMzxojZxP9DequLjAlQwVrbpIjhyIY4UYGQ%2FbuhdBqPxlk3Gion2IMDQIz3kJe%2FZS34I7uHkmD7VSQVgYDNyIAwsNCgfXGXoOBPjP9DKrOCAogA2etGTmTHAMcFwFZye7wS5QlVHGjoEw4A2qPCUBZ6AzNcQ5Q%2FYYRdO%2BYB1U3dsDwypLio4FJ3ECryIzWz6Cm3NgTRHN8HiPF6eHAGSbAdh8feFZkB7krzaHE9h2o85sDsiAbkIsXQMN%2Be2CtGyF0kzdwXCgU5%2B%2BD%2FouLQFV4OEU%2Fg2Q%2FiNuIPNaKkQflAWBqexxGjhLDVUcL6IwSQN3SGVChe6FJg9dckCx6D1QBliDZLIAxo7eA8eyv4KE0BJqTrHkZvnL9DJKn%2BTwmt0NsGGHZy2Dn3kQYfsQ53Hh4%2Fr4RNGz8AIpdzKEuaAF0RC2E57MmQgE3ATjuM%2FCPiANW7AqSfQJQ5vk362eQKmd3JrmXsoSRocpNIMnbB9zbceDIWUPmuHFQNMkISqa9DpUvNK6YDpW2s8DfwBK48WFQnhMCgzUBoLy0BrRVe5P0NWjPLdKUsJiR1tR1wGp8IeZwMgx%2FSrgRvjxuAziNcwLvyathLOcJHLflhRDYGRYFrNET2rJ5yvPLoas0tOj%2FoL8UpC4JHyTSU%2B6MNCS4gvKoAB5WiKG%2BMAQSg0WwLXQ%2FZJ3xhao0FxB5hYCbUwAEfhEF3Td8QP2dAOQnPwFlxgrolUVq9TPoaX%2BZB2nLc2Gk6awj1MU78HZZwJMid2Byb550JQwVO0NfxlJgdz14vWKeRAiK6DlQF28PLZdcoLNcBIO92bb6GTQ8Q%2F13RURT6tlH2gvXMlITLYD6uI%2Bgp2ozdF0VQXumM6ivCqGvahM8kPiDItkeGo8tB025GFQ3xFrSr06zI3%2F4yde7oN7m0sWk5eKWDqK5JWJQvAHac9ygq3Adr9gTNNc3QG85rzPfHe5%2F7wDtPwuhp%2FZz6CjyhaZzwi6ivfetHdH%2FoP77%2B3PJQOsuRnqkQdCa4wWqyx6gyecpL64GTaEX7ycXUJz4GJp1B4O0X%2FHg0Xp1tFV%2B8Ei1k6c5coHofxBrrzQinbKYo0SVJ%2Bwn6iurGHlY5gY911aDJnMFaHXXiDp9GQyvtKfUA9QFTtBZ7gPdit0tpFd9OpwwFmlA9D%2Fo9yNLDpxIKmI8PMnNSNtviCLVpYTITzrXEGWaq4qos0WgOPdpCenIF%2BeRrurjB4k0PXopYZG6gMg%2FD%2FgNBUxhAbSAmKMAAAAASUVORK5CYII%3D">-->
<!-- </a>-->
<!-- </div>-->
</div>
</footer>
<main-footer/>
</div>
</template>
<style lang="scss" scoped>
.bg {
background: url("@/assets/footer-bg.svg");
background-size: 100% auto;
background-color: white;
background-repeat: no-repeat;
}
<style scoped>
</style>

11
src/components/alert/UnderMaintenance.vue → src/components/alert/Alert.vue
View File

@ -1,13 +1,16 @@
<script lang="ts" setup>
defineProps<{
title: string
message: string
}>()
</script>
<template>
<div class="flex min-h-screen items-center justify-center bg-blue-50">
<div class="flex flex-grow items-center justify-center bg-blue-50 min-h-96">
<div class="w-full max-w-md rounded-lg bg-white p-6 text-center shadow-lg">
<h1 class="mb-4 text-4xl font-bold text-gray-800">建设中 🚧</h1>
<h1 class="mb-4 text-4xl font-bold text-gray-800">{{ title }}</h1>
<p class="text-lg text-gray-600">
此页面正在建设中，请稍后再来查看更新。
{{ message }}
</p>
</div>
</div>

2
src/components/card/FullScreenIntroCard.vue
View File

@ -44,7 +44,7 @@ const handleMouseMove = (event: MouseEvent) => {
mouseY.value = -(event.clientY / window.innerHeight - 0.5) * 100
}
const debouncedMouseMove = debounce(handleMouseMove, 10)
const debouncedMouseMove = debounce(handleMouseMove, 5)
// 根据鼠标位置动态调整背景图像的位置
const backgroundStyle = computed(() => ({

40
src/components/footer/MainFooter.vue Normal file
View File

@ -0,0 +1,40 @@
<script setup lang="ts">
</script>
<template>
<footer class="mt-8 items-end pt-48 pb-8 min-h-48 bg">
<div class="container mx-auto px-4 md:px-0 xl:max-w-screen-xl">
<div class="grid-cols-4 gird min-h-48">
<div>
<div class="flex items-center gap-4">
<img alt="" class="h-20 w-20" src="@/assets/logo-c.png">
<div class="text-4xl leading-7 text-gray-500" style="font-family: BaconyScript, sans-serif">
<p>CantyOn_ion's</p>
<p>Index</p>
</div>
</div>
<p class="mt-20 leading-8 text-gray-500">&copy;2024 All rights reserved.</p>
</div>
</div>
<div class="flex flex-col text-gray-500 md:flex-row">
<a class="mr-4 hover:text-black" href="https://beian.miit.gov.cn/"
target="_blank">苏ICP备2022016243号-1</a>
<div>
<img alt="" class="inline-block w-4 pb-1" src="@/assets/beian.png"/>
<a class="hover:text-black" href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641/"
target="_blank">苏公网安备32050602011641</a>
</div>
</div>
</div>
</footer>
</template>
<style scoped lang="scss">
.bg {
background: url("@/assets/footer-bg.svg");
background-size: 100% auto;
background-color: white;
background-repeat: no-repeat;
}
</style>

6
src/components/nav/NavBar.vue
View File

@ -21,8 +21,8 @@ const littleWidget: Widget[] = [
},
{
icon: ['fas', 'cloud'],
url: "/files/",
title: "Tiny File Manager",
url: "/nas/",
title: "Nextcloud",
},
{
icon: ['fas', 'code-branch'],
@ -157,8 +157,6 @@ onUnmounted(() => {
</div>
</div>
</nav>
<!-- 用于隔开元素的 -->
<!-- <div class="mb-4 h-16 w-full"></div>-->
</template>
<style scoped>

21
src/router/index.ts
View File

@ -57,12 +57,31 @@ const router = createRouter({
path: "/maintenance",
component: () => import('@/views/error/MaintenanceView.vue'),
name: 'maintenance'
},
{
name: 'error',
children: [
{
name: '404',
path: '/error/404',
component: () => import('@/views/error/NotFoundView.vue')
},
{
name: '502',
path: '/error/502',
component: () => import('@/views/error/BadGateway.vue')
}
]
},
{
path: '/:catchAll(.*)',
redirect: '/error/404'
}
]
});
router.beforeEach((to, _, next) => {
if (to.meta.maintenance === true && !import.meta.env.DEV) next({name: 'maintenance'})
if (to.meta.maintenance === true && import.meta.env.DEV) next({name: 'maintenance'})
else next()
})

17
src/views/error/BadGateway.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup lang="ts">
import Alert from "@/components/alert/Alert.vue";
import {onMounted} from "vue";
import emitter from "@/utils/mitt.ts";
onMounted(() => {
emitter.emit('startLoading', false)
})
</script>
<template>
<alert title="502 Bad Gateway 😵" message="上游服务器响应无效，这不是你的问题，稍后再来吧。"/>
</template>
<style scoped>
</style>

9
src/views/error/MaintenanceView.vue
View File

@ -1,10 +1,15 @@
<script lang="ts" setup>
import {onMounted} from "vue";
import emitter from "@/utils/mitt.ts";
import Alert from "@/components/alert/Alert.vue";
import UnderMaintenance from "@/components/alert/UnderMaintenance.vue";
onMounted(() => {
emitter.emit('startLoading', false)
})
</script>
<template>
<under-maintenance/>
<alert title="建设中 🚧" message="此页面正在建设中，请稍后再来查看更新。"/>
</template>
<style scoped>

17
src/views/error/NotFoundView.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup lang="ts">
import Alert from "@/components/alert/Alert.vue";
import {onMounted} from "vue";
import emitter from "@/utils/mitt.ts";
onMounted(() => {
emitter.emit('startLoading', false)
})
</script>
<template>
<alert title="404 Not Found 🫥" message="你要访问页面或资源不存在"/>
</template>
<style scoped>
</style>

6
src/views/home/HomeView.vue
View File

@ -34,10 +34,12 @@ const activitiesData = computed((): IActivity<IContent>[] => {
if (!recentActivities.value) return [];
return recentActivities.value.map(item => {
try {
if (item.op_type === "commit_repo")
return {
...item,
content: JSON.parse(item.content)
}
else return null
} catch (e) {
return null
}
@ -76,12 +78,10 @@ onMounted(async () => {
</script>
<template>
<!-- 个人介绍 -->
<full-screen-intro-card/>
<div class="container mx-auto mt-8 xl:max-w-screen-xl">
<!-- 个人介绍 -->
<!-- <intro-card/>-->
<!-- 博客部分 -->
<section class="w-full px-4 sm:px-0">
<!-- 标题部分 -->