新增定时器组件

src/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     FsNavbar: typeof import('./components/FsNavbar.vue')['default']
+    FsTimer: typeof import('./components/FsTimer.vue')['default']
     FsTitle: typeof import('./components/FsTitle.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/FsTimer.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+
+const props = withDefaults(defineProps<{ format?: string }>(), {
+  format: 'YYYY-MM-DD HH:mm:ss',
+})
+
+const timer: any = ref('')
+const time: any = ref('')
+
+onMounted(() => {
+  time.value = dayjs().format(props.format)
+  timer.value = setInterval(() => {
+    time.value = dayjs().format(props.format)
+  }, 1000)
+})
+onDeactivated(() => {
+  timer.value && clearInterval(timer.value)
+})
+</script>
+<template>
+  <div>
+    {{ time }}
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/components/FsTitle.vue

@@ -42,13 +42,13 @@ onDeactivated(() => {
     <span class="tracking-widest">
       {{ title }}
     </span>
-    <span
+    <div
+      v-if="showTime"
       class="absolute right-[20px] top-[0] w-[100] h-full flex items-center text-[20px]"
       style="color: #fff"
-      v-if="showTime"
     >
-      {{ time }}
-    </span>
+      <fs-timer></fs-timer>
+    </div>
   </div>
 </template>