From 926578d9ad20fbba0e95d85972ca257ee7769564 Mon Sep 17 00:00:00 2001
From: hello8693 <1320998105@qq.com>
Date: Sun, 4 Aug 2024 16:28:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E5=B9=B6=E5=AE=9E=E7=8E=B0=E9=80=80?=
 =?UTF-8?q?=E5=87=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加了一个新的顶部导航栏组件，包括时间显示、应用标题和按钮，用于打开配置页面。实现了一个基于Electron的IPC的退出按钮功能，使用户能够通过点击退出按钮来发送一个退出程序的指令。
---
 src/renderer/src/components/AppTopBar.vue | 29 +++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/renderer/src/components/AppTopBar.vue

diff --git a/src/renderer/src/components/AppTopBar.vue b/src/renderer/src/components/AppTopBar.vue
new file mode 100644
index 0000000..a5a795d
--- /dev/null
+++ b/src/renderer/src/components/AppTopBar.vue
@@ -0,0 +1,29 @@
+<template>
+  <v-system-bar class="position-fixed">
+    <v-icon icon="mdi-window-close" @click="ipcHandleExit"></v-icon>
+    <span class="ms-2">{{
+      new Date().toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true
+      })
+    }}</span>
+  </v-system-bar>
+  <v-app-bar :elevation="2" class="position-fixed">
+    <v-app-bar-title>DSZ考试看板</v-app-bar-title>
+
+    <template #append>
+      <div class="ga-4">
+        <v-btn @click="router.push('/mainWindow')">打开配置</v-btn>
+      </div>
+    </template>
+  </v-app-bar>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+
+const ipcHandleExit = () => window.electron.ipcRenderer.send('prog:exit');
+
+const router = useRouter();
+</script>