update pagination progress

will update spell error.

Author: NeserCode

src/App.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
-import { ref } from "vue"
 import TitleBar from "./components/native/TitleBar.vue"
 import Dialog from "./components/Dialog.vue"
 import TopLinks from "./components/TopLinks.vue"
 
+import { ref } from "vue"
+import { useStorage } from "@vueuse/core"
+
 const isOpenModelDialog = ref(false)
+const slideDirection = useStorage(
+	"roco-navigation-transition-direction",
+	"slideleft"
+)
 </script>
 
 <template>
@@ -14,9 +20,11 @@ const isOpenModelDialog = ref(false)
 		<TopLinks />
 
 		<router-view id="context" v-slot="{ Component }">
-			<keep-alive>
-				<component :is="Component" :key="$route.fullPath" />
-			</keep-alive>
+			<Transition :name="slideDirection" mode="out-in" :appear="true">
+				<keep-alive :include="['Home', 'About']">
+					<component :is="Component" :key="$route.fullPath" />
+				</keep-alive>
+			</Transition>
 		</router-view>
 	</div>
 </template>
@@ -32,18 +40,37 @@ html.dark {
 }
 </style>
 
+<style lang="postcss" scoped>
+.slideleft-enter-active,
+.slideleft-leave-active,
+.slideright-enter-active,
+.slideright-leave-active {
+	@apply transition-all;
+}
+
+.slideleft-enter-from,
+.slideleft-leave-to {
+	@apply translate-x-4 opacity-0;
+}
+.slideright-enter-from,
+.slideright-leave-to {
+	@apply -translate-x-4 opacity-0;
+}
+</style>
+
 <style scoped lang="postcss">
 #app-main {
 	@apply relative w-[500px] min-h-[600px]
 	border border-slate-400
 	bg-slate-50 dark:bg-slate-700
 	text-slate-700 dark:text-slate-100
-	transition-all duration-200 ease-in-out;
+	transition-all duration-200 ease-in-out
+	overflow-hidden;
 
 	font-family: "SourceHanSerifCN";
 }
 
 #context {
-	@apply relative flex w-full h-full flex-col justify-center items-center px-4;
+	@apply relative flex w-full min-h-[502px] flex-col justify-start items-center px-4;
 }
 </style>

src/components/FeatureFilter.vue

@@ -163,28 +163,9 @@ watch(checkedOption, (value) => {
 	@apply border-green-400 dark:border-green-500
   bg-green-200 dark:bg-green-700
   transform transition-all;
-	animation: jump 0.2s ease-in-out forwards;
 }
 .feature-item:has(.checked.feature-text) .feature-icon,
 .feature-item:has(.checked.feature-text) .feature-text {
 	@apply bg-green-200 dark:bg-green-700;
 }
-
-@keyframes jump {
-	0% {
-		@apply -translate-y-px;
-	}
-	25% {
-		@apply translate-y-px;
-	}
-	50% {
-		@apply -translate-y-px;
-	}
-	75% {
-		@apply -translate-y-0.5;
-	}
-	100% {
-		@apply translate-y-0;
-	}
-}
 </style>

src/components/native/Paganation.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/20/solid"
 import { useThrottleFn } from "@vueuse/core"
-import { ref, toRefs } from "vue"
+import { Ref, ref, toRefs } from "vue"
 
 const $props = withDefaults(
 	defineProps<{
@@ -32,6 +32,7 @@ const $props = withDefaults(
 const { page, total, canJump, hasNext, hasPrev } = toRefs($props)
 const { pageUpdateFn } = $props
 const innerPage = ref(page.value)
+const bar: Ref<HTMLElement | null> = ref(null)
 
 function getDisabledClass(bool: boolean) {
 	return bool ? "disabled" : null
@@ -46,14 +47,19 @@ function submitPageChange(change?: "plus" | "minus") {
 }
 const throttleSubmitPageChange = useThrottleFn((change?: "plus" | "minus") => {
 	submitPageChange(change)
+	bar.value!.classList.remove("active")
 }, 800)
+const throttleSubmitPageChangeWithProgress = (change?: "plus" | "minus") => {
+	bar.value!.classList.add("active")
+	throttleSubmitPageChange(change)
+}
 </script>
 
 <template>
 	<div class="paganation">
 		<span
 			:class="['prev', 'operation', getDisabledClass(!hasPrev)]"
-			@click="throttleSubmitPageChange('minus')"
+			@click="throttleSubmitPageChangeWithProgress('minus')"
 		>
 			<ChevronLeftIcon class="icon" />
 		</span>
@@ -63,24 +69,25 @@ const throttleSubmitPageChange = useThrottleFn((change?: "plus" | "minus") => {
 			v-if="canJump && total && pageSize"
 			type="number"
 			:min="1"
-			@keyup.enter="throttleSubmitPageChange()"
+			@keyup.enter="throttleSubmitPageChangeWithProgress()"
 		/>
 		<span v-else class="page">{{ page }}</span>
 		<span
 			:class="['next', 'operation', getDisabledClass(!hasNext)]"
-			@click="throttleSubmitPageChange('plus')"
+			@click="throttleSubmitPageChangeWithProgress('plus')"
 		>
 			<ChevronRightIcon class="icon" />
 		</span>
 		<span v-if="canJump && total && pageSize" class="append-text"
 			>共 {{ Math.round(total / pageSize) }} 页</span
 		>
+		<span class="progress-bar" ref="bar"></span>
 	</div>
 </template>
 
 <style lang="postcss" scoped>
 .paganation {
-	@apply inline-flex justify-center items-center flex-wrap mt-4;
+	@apply relative inline-flex justify-center items-center flex-wrap mt-4;
 }
 .operation {
 	@apply inline-flex justify-center items-center px-0.5
@@ -115,4 +122,26 @@ const throttleSubmitPageChange = useThrottleFn((change?: "plus" | "minus") => {
 	@apply inline-block mx-3
 	text-sm font-semibold select-none;
 }
+
+.progress-bar {
+	@apply absolute w-full max-w-[128px] h-0.5 bottom-0 left-0
+	bg-green-400 translate-y-2;
+}
+.progress-bar.active {
+	animation: linearProgress 0.5s linear forwards;
+}
+</style>
+
+<style lang="postcss">
+@keyframes linearProgress {
+	0% {
+		@apply bg-slate-400 w-0;
+	}
+	50% {
+		@apply w-1/2;
+	}
+	100% {
+		@apply bg-green-400 w-full;
+	}
+}
 </style>

src/router.ts

@@ -4,10 +4,12 @@ import type { RouteRecordRaw } from "vue-router"
 const routes: Array<RouteRecordRaw> = [
 	{
 		path: "/",
+		name: "Home",
 		component: () => import("./views/Home.vue"),
 	},
 	{
 		path: "/about",
+		name: "About",
 		component: () => import("./views/About.vue"),
 	},
 ]

src/views/About.vue

@@ -1,16 +1,24 @@
 <script lang="ts" setup>
-// import { ref } from "vue"
+import { onActivated } from "vue"
 import { useStorage } from "@vueuse/core"
 
 const isFullRound = useStorage("roco-avatar-rounded", false)
+const slideDirection = useStorage(
+	"roco-navigation-transition-direction",
+	"slideleft"
+)
 
 function toggleAvatarRounded() {
 	isFullRound.value = !isFullRound.value
 }
+
+onActivated(() => {
+	slideDirection.value = "slideleft"
+})
 </script>
 
 <template>
-	<div id="about">
+	<div>
 		<div class="avatar-container">
 			<img
 				src="https://avatars.githubusercontent.com/u/73767966?v=4"
@@ -25,6 +33,20 @@ function toggleAvatarRounded() {
 				<a draggable="false" target="_blank" href="https://github.com/NeserCode"
 					>NeserCode</a
 				>
+				#
+				<a
+					draggable="false"
+					target="_blank"
+					href="https://github.com/NeserCode-Studio"
+					>NCS</a
+				>
+				·
+				<a
+					draggable="false"
+					target="_blank"
+					href="https://afdian.net/a/nesercode"
+					>支持一下！</a
+				>
 			</span>
 		</div>
 		<span class="mt-8 font-black">致谢</span>
@@ -98,7 +120,7 @@ img {
 }
 
 .avatar-container {
-	@apply w-full flex flex-col justify-center items-center mt-8;
+	@apply w-full flex flex-col justify-center items-center mt-4;
 }
 
 .avatar {
@@ -111,7 +133,7 @@ img {
 
 .author {
 	@apply inline-block py-0.5 mt-4
-	text-xs select-none;
+	text-xs text-center select-none;
 }
 
 .api-provide,

src/views/Home.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { ref, computed, provide } from "vue"
+import { ref, computed, provide, onActivated } from "vue"
+import { useStorage } from "@vueuse/core"
 import SearchFilter from "../components/SearchFilter.vue"
 import FeatureFilter from "../components/FeatureFilter.vue"
 import SpiritList from "../components/SpiritList.vue"
@@ -9,6 +10,14 @@ import {
 	UpdateFeatureFunctionalKey,
 	UpdateSearchFunctionalKey,
 } from "../tokens"
+const slideDirection = useStorage(
+	"roco-navigation-transition-direction",
+	"slideleft"
+)
+
+onActivated(() => {
+	slideDirection.value = "slideright"
+})
 
 const selectedFeature = ref("")
 const inputSearch = ref("")
@@ -60,7 +69,7 @@ function pageUpdateFn(page: number) {
 </script>
 
 <template>
-	<div id="home">
+	<div>
 		<div class="filters">
 			<SearchFilter />
 			<FeatureFilter />