Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

⏳增加加载进度条 #33

Draft
wants to merge 1 commit into
base: dev
Choose a base branch
from
+322 −253
Draft

⏳增加加载进度条 #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
220 changes: 73 additions & 147 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,16 @@
* _(:з」∠)_
-->
<script setup lang="ts">
import { GlobalThemeOverrides, NIcon, darkTheme, lightTheme, useOsTheme } from 'naive-ui'
import LightThemeOverrides from '@/utils/naive-ui-light-theme-overrides.json';
import DarkThemeOverrides from '@/utils/naive-ui-dark-theme-overrides.json';
import { NIcon, useLoadingBar } from "naive-ui"
import { useRouter, useRoute } from 'vue-router';
import { h, ref, onMounted, watch } from 'vue';
import { MenuRound, HomeOutlined, FingerprintOutlined, PersonOutlined, SchoolOutlined, ArticleOutlined, RefreshOutlined, BookOutlined, ArrowBackOutlined, CalendarMonthOutlined, MailOutlined, MapOutlined, PagesOutlined, ForumOutlined } from '@vicons/material';
import { QuestionCircleOutlined } from "@vicons/antd"
import GlobalComponents from './components/GlobalComponents.vue';
import { hitokoto,WatchNetwork } from './utils/tools';
import { hitokoto, WatchNetwork } from './utils/tools';
import http from './utils/request';
import axios from 'axios';
import { loadingBarRef } from "@/router"

import "@/utils/globalThemeVars.css"

const isDark = useOsTheme()
watch(isDark, () => {
theme.value = isDark.value === "dark" ? darkTheme : lightTheme
})
const theme = ref<typeof darkTheme | typeof lightTheme>(isDark.value === "dark" ? darkTheme : lightTheme)
const themeOverrides = ref<GlobalThemeOverrides>(isDark.value === "dark" ? DarkThemeOverrides : LightThemeOverrides);
const router = useRouter();
const route = useRoute();

Expand Down Expand Up @@ -106,6 +96,8 @@ function LoadUnreadNum() {
})
}

const loadingBar = useLoadingBar()

onMounted(() => {
// 自动升级到https
if (location.protocol == 'http:') {
Expand All @@ -118,147 +110,81 @@ onMounted(() => {
WatchNetwork();

LoadUnreadNum();

loadingBarRef.value = loadingBar
loadingBarRef.value.finish()
})

</script>

<template>
<n-config-provider
:theme-overrides="themeOverrides"
:theme="theme"
>
<n-global-style />
<GlobalComponents></GlobalComponents>
<n-layout>
<n-layout-header bordered style="background-color:var(--header-bg-color);">
<n-space class="container" justify="space-between">
<div style="height:42px;display: flex;align-items: center;padding: 4px;">
<n-button @click="drawer_model = true" circle color="#FF9A57" text-color="#FFF"
style="font-size: 33px;margin-top:3px;" size="large">
<n-layout>
<n-layout-header bordered style="background-color:var(--header-bg-color);">
<n-space class="container" justify="space-between">
<div style="height:42px;display: flex;align-items: center;padding: 4px;">
<n-button @click="drawer_model = true" circle color="#FF9A57" text-color="#FFF"
style="font-size: 33px;margin-top:3px;" size="large">
<n-icon>
<MenuRound />
</n-icon>
</n-button>
<n-button @click="router.push('/home')" text style="font-size: 24px;color:#FFF">BIT101</n-button>
</div>
<div style="display:flex;align-items:center;height:100%;">
<n-button @click="router.go(-1)" quaternary circle size="large" color="white">
<template #icon>
<n-icon>
<MenuRound />
<ArrowBackOutlined />
</n-icon>
</n-button>
<n-button @click="router.push('/home')" text style="font-size: 24px;color:#FFF">BIT101</n-button>
</div>
<div style="display:flex;align-items:center;height:100%;">
<n-button @click="router.go(-1)" quaternary circle size="large" color="white">
<template #icon>
<n-icon>
<ArrowBackOutlined />
</n-icon>
</template>
</n-button>
<n-button @click="Refresh" quaternary circle size="large" color="white">
<template #icon>
<n-icon>
<RefreshOutlined />
</template>
</n-button>
<n-button @click="Refresh" quaternary circle size="large" color="white">
<template #icon>
<n-icon>
<RefreshOutlined />
</n-icon>
</template>
</n-button>
<n-button @click="unread_num = 0, router.push('/message/')" quaternary circle size="large" color="white"
style="margin-right:4px">
<template #icon>
<n-badge :value="unread_num" :max="99">
<n-icon color="white">
<MailOutlined />
</n-icon>
</template>
</n-button>
<n-button @click="unread_num = 0, router.push('/message/')" quaternary circle size="large" color="white"
style="margin-right:4px">
<template #icon>
<n-badge :value="unread_num" :max="99">
<n-icon color="white">
<MailOutlined />
</n-icon>
</n-badge>
</template>
</n-button>
</div>
</n-space>
</n-layout-header>

<n-drawer v-model:show="drawer_model" placement="left" :width="224">
<n-drawer-content title="BIT101" body-content-style="padding: 4px;">
<n-menu :options="menu_options" @update:value="MenuHandler" :indent="24"></n-menu>
</n-drawer-content>
</n-drawer>

<n-layout-content justify="center" style="margin: 11px;min-height: 89vh;">
<router-view v-slot="{ Component }">
<keep-alive :max="42">
<component :is="Component" v-if="route.meta.keepAlive != false" :key="route.fullPath" />
</keep-alive>
<component :is="Component" v-if="route.meta.keepAlive == false" />
</router-view>
</n-layout-content>


<n-layout-footer style="text-align:center;min-height: 11vh;">
<h4 style="color: #607d8b;margin: auto;font-size: 14px;">{{ hitokoto }}</h4>
<div><n-button @click="ToTop" text size="large">👆回到顶部👆</n-button></div>
<div>
<n-a href="https://github.com/BIT101-dev" target="_blank">GitHub</n-a>
｜
<n-a href="https://bit101-project.feishu.cn/wiki/OY1Xw6y27iNZqgkSDCkc5Cfdnjc" target="_blank">加入BIT101</n-a>
</n-badge>
</template>
</n-button>
</div>
<div style="font-size: 14px;">Powered⚡ by BIT101 Project Team with 💖.</div>

</n-layout-footer>
</n-layout>
</n-config-provider>
</n-space>
</n-layout-header>

<n-drawer v-model:show="drawer_model" placement="left" :width="224">
<n-drawer-content title="BIT101" body-content-style="padding: 4px;">
<n-menu :options="menu_options" @update:value="MenuHandler" :indent="24"></n-menu>
</n-drawer-content>
</n-drawer>

<n-layout-content justify="center" style="margin: 11px;min-height: 89vh;">
<router-view v-slot="{ Component }">
<keep-alive :max="42">
<component :is="Component" v-if="route.meta.keepAlive != false" :key="route.fullPath" />
</keep-alive>
<component :is="Component" v-if="route.meta.keepAlive == false" />
</router-view>
</n-layout-content>


<n-layout-footer style="text-align:center;min-height: 11vh;">
<h4 style="color: #607d8b;margin: auto;font-size: 14px;">{{ hitokoto }}</h4>
<div><n-button @click="ToTop" text size="large">👆回到顶部👆</n-button></div>
<div>
<n-a href="https://github.com/BIT101-dev" target="_blank">GitHub</n-a>
｜
<n-a href="https://bit101-project.feishu.cn/wiki/OY1Xw6y27iNZqgkSDCkc5Cfdnjc" target="_blank">加入BIT101</n-a>
</div>
<div style="font-size: 14px;">Powered⚡ by BIT101 Project Team with 💖.</div>

</n-layout-footer>
</n-layout>
</template>

<style>
@font-face {
font-family: "Noto Serif";
src: local("Noto Serif SC Light"),
local("Noto Serif SC"),
local("Noto Serif CJK Light"),
local("Noto Serif CJK"),
local("Source Han Serif CN Light"),
local("Source Han Serif CN");
font-display: swap;
font-weight: 300;
}

@font-face {
font-family: "Noto Serif";
src: local("Noto Serif SC Medium"),
local("Noto Serif SC"),
local("Noto Serif CJK Medium"),
local("Noto Serif CJK"),
local("Source Han Serif CN Medium"),
local("Source Han Serif CN");
font-display: swap;
font-weight: 500;
}

@font-face {
font-family: "Noto Serif";
src: local("Noto Serif SC Bold"),
local("Noto Serif CJK Bold"),
local("Source Han Serif CN Bold");
font-display: swap;
font-weight: 700;
}

@font-face {
font-family: "Noto Serif";
src: local("Noto Serif SC Heavy"),
local("Noto Serif CJK Heavy"),
local("Source Han Serif CN Heavy");
font-display: swap;
font-weight: 800;
}

#app,
body {
font-family: "Noto Serif", "Noto Serif SC", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 16px;
}

.container {
max-width: 666px;
margin: auto;
}

::selection {
color: #fff;
background: #00bcd4;
}
</style>
97 changes: 97 additions & 0 deletions src/AppRoot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<template>
<n-config-provider
:theme-overrides="themeOverrides"
:theme="theme"
>
<n-loading-bar-provider :loading-bar-style="{
loading: {
backgroundColor: 'var(--loading-bar-color)',
boxShadow: 'var(--loading-bar-shadow)'
}
}">
<GlobalComponents></GlobalComponents>
<App />
</n-loading-bar-provider>
</n-config-provider>
</template>

<script setup lang="ts">
import { GlobalThemeOverrides, darkTheme, lightTheme, useOsTheme } from 'naive-ui'
import LightThemeOverrides from '@/utils/naive-ui-light-theme-overrides.json'
import DarkThemeOverrides from '@/utils/naive-ui-dark-theme-overrides.json'
import GlobalComponents from '@/components/GlobalComponents.vue';
import App from "@/App.vue"

import "@/utils/globalThemeVars.css"
import { ref, watch } from 'vue';

const isDark = useOsTheme()
watch(isDark, () => {
theme.value = isDark.value === "dark" ? darkTheme : lightTheme
})

const theme = ref<typeof darkTheme | typeof lightTheme>(isDark.value === "dark" ? darkTheme : lightTheme)
const themeOverrides = ref<GlobalThemeOverrides>(isDark.value === "dark" ? DarkThemeOverrides : LightThemeOverrides);
</script>

<style>
@font-face {
font-family: "Noto Serif";
src: local("Noto Serif SC Light"),
local("Noto Serif SC"),
local("Noto Serif CJK Light"),
local("Noto Serif CJK"),
local("Source Han Serif CN Light"),
local("Source Han Serif CN");
font-display: swap;
font-weight: 300;
}

@font-face {
font-family: "Noto Serif";
src: local("Noto Serif SC Medium"),
local("Noto Serif SC"),
local("Noto Serif CJK Medium"),
local("Noto Serif CJK"),
local("Source Han Serif CN Medium"),
local("Source Han Serif CN");
font-display: swap;
font-weight: 500;
}

@font-face {
font-family: "Noto Serif";
src: local("Noto Serif SC Bold"),
local("Noto Serif CJK Bold"),
local("Source Han Serif CN Bold");
font-display: swap;
font-weight: 700;
}

@font-face {
font-family: "Noto Serif";
src: local("Noto Serif SC Heavy"),
local("Noto Serif CJK Heavy"),
local("Source Han Serif CN Heavy");
font-display: swap;
font-weight: 800;
}

#app,
body {
font-family: "Noto Serif", "Noto Serif SC", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 16px;
}

.container {
max-width: 666px;
margin: auto;
}

::selection {
color: #fff;
background: #00bcd4;
}
</style>
11 changes: 9 additions & 2 deletions src/components/Posters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<script setup lang="ts">
import router from '@/router';
import http from '@/utils/request';
import { PropType, onMounted, reactive, ref, watch } from 'vue';
import { PropType, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { Poster } from '@/utils/types';
import { FormatTime, OpenLink } from '@/utils/tools';
Expand All @@ -16,6 +16,7 @@ import Avatar from '@/components/Avatar.vue';
import store from '@/utils/store';
import ImageViewer from '@/components/ImageViewer/ImageViewer.vue';
import ImageBox from "@/components/ImageViewer/ImageBox.vue";
import { loadingBarRef } from '@/router';

export interface PostersStatus {
mode: 'recommend' | 'search' | 'follow' | 'hot';
Expand All @@ -41,7 +42,10 @@ const posters = reactive({

function LoadPosters() {
if (posters.loading || posters.end) return;

posters.loading = true;
loadingBarRef.value.start()

let refresh_time = posters.refresh_time;
http.get("/posters", {
params: {
Expand All @@ -52,6 +56,7 @@ function LoadPosters() {
uid: props.value.uid
}
}).then(res => {
loadingBarRef.value.finish()
// 状态更新后可能之前的请求还没完成 得加上时间戳保证更新的是最新的
if (refresh_time != posters.refresh_time) return;
if (res.data.length == 0) posters.end = true;
Expand All @@ -64,7 +69,9 @@ function LoadPosters() {
}

const load_more_observer = ref(null as any);
onMounted(() => {
onMounted(async () => {
await nextTick()
loadingBarRef.value.start()
LoadPosters();

// 构建滚动观察器
Expand Down
Loading