Merge pull request #2 from Qsgz2023ji5ban/master

src/renderer/src/components/AppTopBar.vue

@@ -5,7 +5,7 @@
       new Date().toLocaleTimeString('en-US', {
         hour: 'numeric',
         minute: 'numeric',
-        hour12: true
+        hour12: false
       })
     }}</span>
   </v-system-bar>
@@ -14,7 +14,7 @@
 
     <template #append>
       <div class="ga-4">
-        <v-btn @click="router.push('/mainWindow')">菜单</v-btn>
+        <v-btn @click="router.push('/mainWindow')">回到主页</v-btn>
       </div>
     </template>
   </v-app-bar>

src/renderer/src/components/Clock.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-card class="mx-auto" max-width="600">
+  <v-card class="mx-auto" max-width="750">
     <v-card-text class="text-center">
-      <div class="display-1 font-weight-bold">
+      <div class="display-1 font-weight-bold" @click="cycleFontSize">
         {{ formattedTime }}
       </div>
     </v-card-text>
@@ -15,13 +15,15 @@ import moment from 'moment';
 
 // 使用ref来存储当前时间
 const formattedTime = ref('');
+const fontSizeIndex = ref(2); // 默认字体大小为7rem
+const fontSizes = ['3rem', '5rem', '7rem'];//不同分辨率适合使用不同大小的字体
 
 // 在页面加载完成后初始化时间
 onMounted(() => {
   updateTime();
 });
 
-const formatDateTime = (isoString) => moment(isoString).format('HH:mm:ss');
+const formatDateTime = (isoString: moment.MomentInput) => moment(isoString).format('HH:mm:ss');
 
 // 更新时间的函数
 function updateTime() {
@@ -31,10 +33,15 @@ function updateTime() {
 
 // 每隔一分钟更新一次时间
 useIntervalFn(updateTime, 250);
+
+// 切换字体大小的函数
+function cycleFontSize() {
+  fontSizeIndex.value = (fontSizeIndex.value + 1) % fontSizes.length;
+}
 </script>
 
 <style scoped>
 .display-1 {
-  font-size: 5rem; /* 调整字号以适应大屏幕 */
+  font-size: v-bind(fontSizes[fontSizeIndex]); /* 动态绑定字体大小 */
 }
 </style>

src/renderer/src/pages/mainWindow.vue

@@ -2,14 +2,14 @@
   <v-container class="main-container" fill-height>
     <v-row justify="center" align="center">
       <v-col cols="12" md="4">
-        <v-card class="pa-4" outlined>
-          <v-btn block color="primary" dark @click="openDialog"> 打开配置 </v-btn>
+        <v-card class="pa-4 fade-in slide-in" outlined>
+          <v-btn block color="deep-purple accent-4" dark @click="openDialog">打开配置</v-btn>
           <p class="mt-2 text-center">打开 JSON 配置文件</p>
         </v-card>
       </v-col>
       <v-col cols="12" md="4" class="mt-4 mt-md-0">
-        <v-card class="pa-4" outlined>
-          <v-btn block color="success" dark @click="gotoInfoPage"> 直接进入看板 </v-btn>
+        <v-card class="pa-4 fade-in slide-in" outlined>
+          <v-btn block color="teal accent-4" dark @click="gotoInfoPage">直接进入看板</v-btn>
           <p class="mt-2 text-center">直接进入看板，将继续使用上次加载的配置</p>
         </v-card>
       </v-col>
@@ -50,6 +50,10 @@ window.electron.ipcRenderer.on('common:openFile', (event, message) => {
   width: 100%;
   max-width: 300px;
   margin: auto;
+  transition: transform 0.3s ease-in-out;
+}
+.v-card:hover {
+  transform: scale(1.05);
 }
 .v-btn {
   height: 48px;
@@ -57,4 +61,26 @@ window.electron.ipcRenderer.on('common:openFile', (event, message) => {
 .text-center {
   text-align: center;
 }
+.fade-in {
+  animation: fadeIn 1s ease-in-out;
+}
+.slide-in {
+  animation: slideIn 1s ease-in-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  from {
+    transform: translateY(20px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
 </style>