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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

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

9
src/App.vue
View File

@ -1,5 +1,14 @@
<script lang="ts" setup> <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> </script>
<template> <template>

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

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

9
src/main.ts
View File

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

18
src/style.css
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;
}

1
src/utils/mitt.ts
View File

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

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

@ -8,6 +8,7 @@ import CardTitle from "@/components/card/CardTitle.vue";
import SectionCard from "@/components/card/SectionCard.vue"; import SectionCard from "@/components/card/SectionCard.vue";
import {getActivity} from "@/api/git.ts"; import {getActivity} from "@/api/git.ts";
import GitCard from "@/components/card/GitCard.vue"; import GitCard from "@/components/card/GitCard.vue";
import emitter from "@/utils/mitt.ts";
const recentPosts = ref<IPost[] | null>(null); const recentPosts = ref<IPost[] | null>(null);
const recentActivities = ref<IActivity[] | null>(null); const recentActivities = ref<IActivity[] | null>(null);
@ -59,7 +60,6 @@ const reloadActivities = async () => {
try { try {
isLoading.value.git = true isLoading.value.git = true
recentActivities.value = await getActivity() recentActivities.value = await getActivity()
console.log(recentActivities.value)
isLoading.value.git = false isLoading.value.git = false
} catch (e) { } catch (e) {
isLoading.value.git = false isLoading.value.git = false
@ -70,6 +70,8 @@ const reloadActivities = async () => {
onMounted(async () => { onMounted(async () => {
await reloadPosts() await reloadPosts()
await reloadActivities() await reloadActivities()
emitter.emit('startLoading', false)
}) })
</script> </script>
@ -97,7 +99,7 @@ onMounted(async () => {
<!-- Git部分 --> <!-- Git部分 -->
<section class="my-4 w-full px-4 sm:px-0"> <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/"/> url="/git/"/>
<section-card :empty="!hasActivities" :error="isError.git" :loading="isLoading.git" @reload="reloadActivities"> <section-card :empty="!hasActivities" :error="isError.git" :loading="isLoading.git" @reload="reloadActivities">
@ -111,7 +113,7 @@ onMounted(async () => {
</div> </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"> <div class="container mx-auto">
<p class="text-center leading-8">&copy;2024 All rights reserved.</p> <p class="text-center leading-8">&copy;2024 All rights reserved.</p>
<div class="flex justify-center gap-4"> <div class="flex justify-center gap-4">