一大波优化，完善了关于，作品页增加搜索缓存等

src/App.vue

@@ -1,11 +1,23 @@
 <script setup>
 import { RouterView } from 'vue-router'
-import HeaderNav from './components/HeaderNav.vue';
+import HeaderNav from './components/HeaderNav.vue'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+// 路由缓存
+const keepAliveRoutes = computed(() => {
+  const routes = useRouter().options.routes
+  // 存在meta.keepAlive的路由，会根据name进行缓存
+  return routes.filter((item) => item.meta?.keepAlive).map((item) => item.name)
+})
 </script>
 
 <template>
-    <HeaderNav />
-    <RouterView />
+  <HeaderNav />
+  <router-view v-slot="{ Component }">
+    <keep-alive :include="keepAliveRoutes">
+      <component :is="Component" />
+    </keep-alive>
+  </router-view>
 </template>
 
 <style lang="scss" scoped></style>

src/components/HeaderNav.vue

@@ -3,6 +3,9 @@ import 'element-plus/es/components/message/style/css'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { emitBus } from '@/utils/bus.js'
+import defaultSet from '../settings'
+import IconGithub from '@/components/icons/github.vue'
+import IconEmail from '@/components/icons/email.vue'
 const navs = [
   {
     name: '作品',
@@ -40,8 +43,6 @@ const navMobileShow = ref(false)
 watch(
   () => $route.path,
   () => {
-    searchInputValue.value = ''
-    searchInputShow.value = false
     navMobileShow.value = false
     document.body.style.overflow = 'auto'
   }
@@ -180,6 +181,35 @@ const toTop = () => {
             >
           </div>
         </div>
+        <div
+          class="absolute w-full bottom-12 left-0 px-12 box-border text-stone-800 text-sm font-bold"
+        >
+          <p class="mb-2 flex items-center">
+            <IconEmail class="mr-2" />
+            <a
+              :href="'mailto:' + defaultSet.email"
+              class="text-stone-800 text-sm font-bold hover:opacity-50 hover:no-underline"
+              rel="email"
+              >{{ defaultSet.email }}</a
+            >
+          </p>
+          <p class="mb-2 flex items-center">
+            <IconGithub class="mr-2" />
+            <a
+              :href="defaultSet.github"
+              class="text-stone-800 text-sm font-bold hover:opacity-50 hover:no-underline"
+              target="_blank"
+              >Github.com</a
+            >
+          </p>
+          <p
+            class="my-0 mt-10 text-xs flex justify-between"
+            style="font-family: 'Rajdhani', sans-serif"
+          >
+            <span>©2023 {{ defaultSet.userName }}</span>
+            <span>github.io</span>
+          </p>
+        </div>
       </div>
     </div>
   </div>

src/components/SearchButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 // 悬浮跟随鼠标的搜索按钮
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, onDeactivated, onActivated } from 'vue'
 import { gsap } from 'gsap'
 import { isMobileDevice } from '@/utils/index.js'
 const props = defineProps({
@@ -12,7 +12,20 @@ const searchBtnRef = ref(null),
   searchInputRef = ref(null),
   searchInputValue = ref('')
 let mouseDownTimeout = null
+onActivated(() => {
+  addEventListener()
+})
 onMounted(() => {
+  addEventListener()
+})
+onUnmounted(() => {
+  removeEventListener()
+})
+onDeactivated(() => {
+  removeEventListener()
+})
+// 添加相关监听事件
+const addEventListener = () => {
   document.body.style.cursor = 'none'
   //   非移动端才执行自定义的鼠标样式
   if (!isMobileDevice()) {
@@ -23,13 +36,14 @@ onMounted(() => {
     })
     window.addEventListener('keydown', keydownSearchBtnListener)
   }
-})
-onUnmounted(() => {
+}
+// 清除相关监听事件
+const removeEventListener = () => {
   document.body.style.cursor = 'auto'
   window.removeEventListener('mousemove', mousemoveSearchBtnListener)
   window.removeEventListener('mousedown', mousedownSearchBtnListener)
   window.removeEventListener('keydown', keydownSearchBtnListener)
-})
+}
 const keydownSearchBtnListener = (e) => {
   if (e.key === 'Enter') {
     // 在这里执行回车键按下后的操作

src/components/icons/date.vue

@@ -0,0 +1,3 @@
+<template>
+ <svg class="icon" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 22h18a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-4V3a1 1 0 0 0-2 0v2H9V3a1 1 0 0 0-2 0v2H3a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1ZM4 7h16v3H4Zm0 5h16v8H4Z"/></svg>
+</template>

src/components/icons/email.vue

@@ -0,0 +1,3 @@
+<template>
+<svg class="icon" width="800" height="800" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><path class="clr-i-outline clr-i-outline-path-1" d="M32 6H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm-1.54 22H5.66l7-7.24-1.44-1.39L4 26.84V9.52l12.43 12.37a2 2 0 0 0 2.82 0L32 9.21v17.5l-7.36-7.36-1.41 1.41ZM5.31 8h25.07L17.84 20.47Z"/><path fill="none" d="M0 0h36v36H0z"/></svg>
+</template>

src/components/icons/IconImage.vue → src/components/icons/image.vue

@@ -1,5 +1,6 @@
 <template>
   <svg
+    class="icon"
     width="25px"
     height="25px"
     viewBox="0 0 17 17"

src/router/index.js

@@ -14,7 +14,7 @@ const router = createRouter({
       path: '/works',
       name: 'Works',
       component: () => import('../views/Works.vue'),
-      meta: { title: '作品' }
+      meta: { title: '作品', keepAlive: true }
     },
     {
       path: '/about',

src/settings.js

@@ -1,3 +1,7 @@
 export default {
+    userName:'sunwenxu',
+    email:'[email protected]',
+    github:'https://github.com/sunwenxu1997',
+    juejin:'https://juejin.cn/user/1291397693',
     githubLink: 'https://github.com/sunwenxu1997/sunwenxu1997.github.io',
 }

src/views/About.vue

@@ -1,32 +1,67 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-onMounted(() => { })
+import IconGithub from '@/components/icons/github.vue'
+import IconEmail from '@/components/icons/email.vue'
+import defaultSet from '../settings'
+onMounted(() => {})
 </script>
 <template>
-    <div
-        class="pt-28 px-12 sm:px-60 text-xs tracking-widest  sm:max-w-screen-sm sm:m-auto selection:bg-stone-700 selection:text-white">
-        <p>关于作者是个菜鸡🐔。</p>
-        <br><br><br>
-        <p>
-            日常划水积累的小项目，包含
-            <span class="font-bold underline text-sm">css</span>、
-            <span class="font-bold underline text-sm">html</span>、
-            <span class="font-bold underline text-sm">js</span>、
-            <span class="font-bold underline text-sm">vue</span>、
-            <span class="font-bold underline text-sm">gsap</span>、
-            <span class="font-bold underline text-sm">threejs</span>、
-            <span class="font-bold underline text-sm">tailwindcss</span>等。
-        </p>
-        <p>大多是以动画效果形式展示，方便有效理解和提起我的兴趣。偶尔我自己也会翻着看🤣</p>
-        <p>
-            自己也有写相关的文章，主要在平台
-            <a class="text-sm text-stone-800 font-bold" href="https://juejin.cn/user/1011206430666551/posts?sort=popular"
-                target="_blank">掘金</a>、
-            <a class="text-sm text-stone-800 font-bold" href="https://www.jianshu.com/u/5294c349f0f1"
-                target="_blank">简书(弃用)</a>都有记录，你也可以通过
-            <a class="text-sm text-stone-800 font-bold" href="https://github.com/sunwenxu1997"
-                target="_blank">Github</a>找到我， 欢迎交流👾。
-        </p>
-    </div>
+  <div
+    class="pt-28 px-12 sm:px-60 text-xs tracking-widest sm:max-w-screen-sm sm:m-auto selection:bg-stone-700 selection:text-white"
+  >
+    <p>关于作者是个菜鸡🐔。</p>
+    <br />
+    <p>
+      日常划水积累的小项目，包含
+      <span class="font-bold underline text-sm">css</span>、
+      <span class="font-bold underline text-sm">html</span>、
+      <span class="font-bold underline text-sm">js</span>、
+      <span class="font-bold underline text-sm">vue</span>、
+      <span class="font-bold underline text-sm">gsap</span>、
+      <span class="font-bold underline text-sm">threejs</span>、
+      <span class="font-bold underline text-sm">tailwindcss</span>等。
+    </p>
+    <p>大多是以动画效果形式展示，方便有效理解和提起我的兴趣。偶尔我自己也会翻着看🤣</p>
+    <p>
+      自己也有写相关的文章，主要在平台
+      <a
+        class="text-sm text-stone-800 font-bold"
+        href="https://juejin.cn/user/1011206430666551/posts?sort=popular"
+        target="_blank"
+        >掘金</a
+      >、
+      <a
+        class="text-sm text-stone-800 font-bold"
+        href="https://www.jianshu.com/u/5294c349f0f1"
+        target="_blank"
+        >简书(弃用)</a
+      >都有记录，你也可以通过
+      <a
+        class="text-sm text-stone-800 font-bold"
+        href="https://github.com/sunwenxu1997"
+        target="_blank"
+        >Github</a
+      >找到我， 欢迎交流👾。
+    </p>
+    <br /><br /><br />
+    <p class="mb-2 flex items-center select-none">
+      <IconEmail class="mr-2" />
+      <a
+        :href="'mailto:' + defaultSet.email"
+        class="text-stone-800 text-sm font-bold hover:opacity-50 hover:no-underline"
+        rel="email"
+        >{{ defaultSet.email }}</a
+      >
+    </p>
+    <p class="mb-2 flex items-center select-none">
+      <IconGithub class="mr-2" />
+      <a
+        :href="defaultSet.github"
+        class="text-stone-800 text-sm font-bold hover:opacity-50 hover:no-underline"
+        target="_blank"
+        >Github.com</a
+      >
+    </p>
+  </div>
 </template>
 <style lang="scss" scoped></style>

src/views/Home.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { gsap } from 'gsap'
+import defaultSet from '../settings'
 const layer = ref(null)
 onMounted(() => {
   window.addEventListener('mousemove', mouseListener)
@@ -41,10 +42,10 @@ const mouseListener = function (event) {
       </div>
     </div>
     <div
-      class="absolute bottom-12 left-12 sm:left-24 font-bold text-white sm:text-black"
+      class="absolute bottom-12 left-12 sm:left-24 font-bold text-white sm:text-black text-xs"
       style="font-family: 'Rajdhani', sans-serif"
     >
-      ©2023 sunwenxu
+      ©2023 {{ defaultSet.userName }}
     </div>
     <svg width="0" height="0">
       <defs>

src/views/Works.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { ref, onMounted, computed, onUnmounted } from 'vue'
+import { ref, onMounted, computed, onUnmounted, onActivated, watch, onDeactivated } from 'vue'
 import works from '@/router/works.js'
-import IconGithub from '@/components/icons/IconGithub.vue'
-import IconLink from '@/components/icons/IconLink.vue'
+import IconGithub from '@/components/icons/github.vue'
+import IconLink from '@/components/icons/link.vue'
 import IconSkip from '@/components/icons/IconSkip.vue'
-import IconImage from '@/components/icons/IconImage.vue'
+import IconImage from '@/components/icons/image.vue'
+import IconDate from '@/components/icons/date.vue'
 import { gsap } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger.js'
 import SearchButton from '@/components/SearchButton.vue'
@@ -22,14 +23,20 @@ const workRoutes = computed(() => {
     .sort((a, b) => new Date(b.meta.date).getTime() - new Date(a.meta.date).getTime())
     .sort((a, b) => b.meta.sort - a.meta.sort)
 })
-onMounted(() => {
+// 通过监听works作品变化，重新执行动画 避免快速搜索时，部分元素未执行动画
+watch(workRoutes, () => {
+  elementScrollAnimation(titleRef.value)
+  elementScrollAnimation(textContentRef.value, 0.2)
+})
+onActivated(() => {
   onBus('searchInput', searchInput)
+  searchIconShow.value = true
   gsap.registerPlugin(ScrollTrigger)
   bodyScrollTrigger()
   elementScrollAnimation(titleRef.value)
   elementScrollAnimation(textContentRef.value, 0.2)
 })
-onUnmounted(() => {
+onDeactivated(() => {
   ScrollTrigger.killAll()
 })
 const toTop = () => {
@@ -49,6 +56,8 @@ const bodyScrollTrigger = () => {
 }
 // 元素滚动动画
 const elementScrollAnimation = (elements, delay = 0) => {
+  // 清除指定目标元素的所有动画
+  gsap.killTweensOf(elements)
   elements.forEach((el) => {
     gsap.fromTo(
       el,
@@ -94,8 +103,9 @@ const onMouseleaveElement = () => {
     >
       <div
         v-if="item.meta.date"
-        class="hidden text-xs font-bold -mb-4 leading-4 translate-x-24 text-right sticky top-4 text-black sm:block"
+        class="hidden text-xs font-bold -mb-4 leading-4 translate-x-28 items-center justify-end sticky top-4 text-black sm:flex"
       >
+        <IconDate class="mr-1 relative -top-[1px]" />
         {{ item.meta.date }}
       </div>
       <div class="w-full aspect-video relative bg-stone-100">
@@ -130,8 +140,9 @@ const onMouseleaveElement = () => {
             </router-link>
           </div>
         </div>
-        <div v-if="item.meta.date" class="text-xs font-bold text-stone-400 mb-2 sm:hidden">
-          📅 {{ item.meta.date }}
+        <div v-if="item.meta.date" class="text-stone-500 mb-2 flex items-center sm:hidden">
+          <IconDate class="mr-1 relative -top-[1px]" />
+          <span class="text-xs font-bold">{{ item.meta.date }}</span>
         </div>
         <div
           ref="textContentRef"

src/views/works/cssHtml/tailwindcss使用.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  link:'https://juejin.cn/post/7290740395914362921'
+  link: 'https://juejin.cn/post/7290740395914362921'
 }
 </script>
 
@@ -24,7 +24,7 @@ onMounted(() => {})
 <template>
   <div class="grid h-screen place-content-center">
     <AppleWindow>
-      <iframe class="w-full h-full" src="/#/cssHtml/tailwindcss使用1" frameborder="0"></iframe>
+      <iframe class="w-full h-full" src="/#/" frameborder="0"></iframe>
     </AppleWindow>
   </div>
 </template>