From 21679fcd7562949e163ada89913ad2da4663f6f9 Mon Sep 17 00:00:00 2001
From: hello8693 <1320998105@qq.com>
Date: Mon, 5 Aug 2024 18:05:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=AF=8F=E5=88=86?=
 =?UTF-8?q?=E9=92=9F=E6=9B=B4=E6=96=B0=E7=9A=84=E6=97=B6=E9=92=9F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

实现了一个新的Vue组件，即一个数字时钟，它每分钟更新一次显示的时间。该组件使用Vue的Composition API和VueUse的间隔函数进行实现。时间显示格式为HH:mm:ss，采用Moment库进行格式化。
---
 src/renderer/src/components/Clock.vue | 40 +++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/renderer/src/components/Clock.vue

diff --git a/src/renderer/src/components/Clock.vue b/src/renderer/src/components/Clock.vue
new file mode 100644
index 0000000..bec4779
--- /dev/null
+++ b/src/renderer/src/components/Clock.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-card class="mx-auto" max-width="600">
+    <v-card-text class="text-center">
+      <div class="display-1 font-weight-bold">
+        {{ formattedTime }}
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+import moment from 'moment';
+
+// 使用ref来存储当前时间
+const formattedTime = ref('');
+
+// 在页面加载完成后初始化时间
+onMounted(() => {
+  updateTime();
+});
+
+const formatDateTime = (isoString) => moment(isoString).format('HH:mm:ss');
+
+// 更新时间的函数
+function updateTime() {
+  const now = new Date();
+  formattedTime.value = formatDateTime(now);
+}
+
+// 每隔一分钟更新一次时间
+useIntervalFn(updateTime, 250);
+</script>
+
+<style scoped>
+.display-1 {
+  font-size: 5rem; /* 调整字号以适应大屏幕 */
+}
+</style>