添加加载页面
Some checks failed
CI / build (push) Failing after 27s

This commit is contained in:
Jeffrey Hsu 2024-10-05 20:48:22 +08:00
parent c59c94ebbb
commit 00279abafc
8 changed files with 55 additions and 26 deletions

View File

@ -7,6 +7,7 @@
<title>CANTYONION.SITE</title>
</head>
<body>
<div id="loading" class="loading"></div>
<div id="app"></div>
<script src="/src/main.ts" type="module"></script>
</body>

View File

@ -1,5 +1,14 @@
<script lang="ts" setup>
import {onMounted} from "vue";
import emitter from "@/utils/mitt.ts";
const loadingElement = document.getElementById("loading") as HTMLDivElement;
onMounted(() => {
emitter.on('startLoading', on =>
on ? loadingElement.classList.remove('stop') : loadingElement.classList.add('stop')
)
})
</script>
<template>

View File

@ -9,7 +9,7 @@ type Widget = {
const littleWidget: Widget[] = [
{
icon: ['fas', 'gauge'],
url: "/pi-dashboard/",
url: "/netdata/",
title: "Pi Dashboard",
},
{

View File

@ -1,5 +1,5 @@
import {createApp} from 'vue'
import './style.css'
import './style.scss'
import App from './App.vue'
// import VueTypedJs from 'vue-typed-js'
import router from "@/router";
@ -13,13 +13,14 @@ import {
faCodeBranch,
faCloud,
faChevronRight,
faCodeCommit
faCodeCommit,
faCode
} from '@fortawesome/free-solid-svg-icons'
import {faWeibo, faQq, faGithubAlt, faSteamSymbol, faGitAlt} from '@fortawesome/free-brands-svg-icons'
import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'
library.add(
faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight,
faCodeCommit, faGitAlt
faCodeCommit, faCode
)
createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app')

View File

@ -1,18 +0,0 @@
@import 'lxgw-wenkai-lite-webfont/style.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'BaconyScript';
src: url("./assets/BaconyScript_PERSONAL_USE_ONLY.otf") format("opentype");
}
body {
font-family: "LXGW WenKai Lite", sans-serif;
}
pre, code {
font-family: "LXGW WenKai Mono Lite", sans-serif;
}

33
src/style.scss Normal file
View File

@ -0,0 +1,33 @@
@import 'lxgw-wenkai-lite-webfont/style.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'BaconyScript';
src: url("./assets/BaconyScript_PERSONAL_USE_ONLY.otf") format("opentype");
}
body {
font-family: "LXGW WenKai Lite", sans-serif;
}
pre, code {
font-family: "LXGW WenKai Mono Lite", sans-serif;
}
.loading {
@apply fixed h-screen w-screen flex justify-center items-center z-[999] bg-blue-50 backdrop-blur-3xl bg-opacity-45 transition-all duration-500 opacity-100;
&::before {
content: 'CantyOni_on\'s Index';
font-family: 'BaconyScript', sans-serif;
@apply text-5xl lg:text-7xl text-gray-600;
}
}
.stop {
@apply invisible opacity-0;
}

View File

@ -2,6 +2,7 @@ import mitt from 'mitt'
type Events = {
openPost: IPost
startLoading: boolean
}
const emitter = mitt<Events>()

View File

@ -8,6 +8,7 @@ import CardTitle from "@/components/card/CardTitle.vue";
import SectionCard from "@/components/card/SectionCard.vue";
import {getActivity} from "@/api/git.ts";
import GitCard from "@/components/card/GitCard.vue";
import emitter from "@/utils/mitt.ts";
const recentPosts = ref<IPost[] | null>(null);
const recentActivities = ref<IActivity[] | null>(null);
@ -59,7 +60,6 @@ const reloadActivities = async () => {
try {
isLoading.value.git = true
recentActivities.value = await getActivity()
console.log(recentActivities.value)
isLoading.value.git = false
} catch (e) {
isLoading.value.git = false
@ -70,6 +70,8 @@ const reloadActivities = async () => {
onMounted(async () => {
await reloadPosts()
await reloadActivities()
emitter.emit('startLoading', false)
})
</script>
@ -97,7 +99,7 @@ onMounted(async () => {
<!-- Git部分 -->
<section class="my-4 w-full px-4 sm:px-0">
<card-title :icon="['fab', 'git-alt']" main-color="bg-green-500" sub-color="bg-green-600" title="最近活动"
<card-title :icon="['fas', 'code']" main-color="bg-green-500" sub-color="bg-green-600" title="最近活动"
url="/git/"/>
<section-card :empty="!hasActivities" :error="isError.git" :loading="isLoading.git" @reload="reloadActivities">
@ -111,7 +113,7 @@ onMounted(async () => {
</div>
<footer class="mt-8 flex w-full items-end bg-white py-4 min-h-48">
<footer class="mt-8 flex w-full items-end py-4 min-h-48 bg-gradient-to-t from-white">
<div class="container mx-auto">
<p class="text-center leading-8">&copy;2024 All rights reserved.</p>
<div class="flex justify-center gap-4">