From 78322d65cda28377b357aace1549f8a25917f5ab Mon Sep 17 00:00:00 2001
From: xjs <xjs@ycymedu.com>
Date: Thu, 5 Jun 2025 10:33:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A5=E6=9C=9F=E5=92=8C=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E7=BB=84=E4=BB=B6=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/watch/DigitalWatch.vue | 145 +++++++++++++-------------
 src/views/home.vue                    |   7 +-
 src/views/login.vue                   |   6 +-
 3 files changed, 77 insertions(+), 81 deletions(-)

diff --git a/src/components/watch/DigitalWatch.vue b/src/components/watch/DigitalWatch.vue
index 31415d5..e72d7ba 100644
--- a/src/components/watch/DigitalWatch.vue
+++ b/src/components/watch/DigitalWatch.vue
@@ -1,78 +1,81 @@
 <template>
-  <div class="digital-watch" :style="{ 
-    '--size-scale': sizeScale,
-    '--color-led': ledColor,
-    '--color-led-off': ledOffColor,
-    '--color-background': backgroundColor,
-    '--color-glow': glowColor
-  }">
-    <div class="time-container">
-      <div class="digit-group">
-        <div class="seven-segment">
-          <div :class="getSegmentClass(hours[0], 0)" class="segment-a"></div>
-          <div :class="getSegmentClass(hours[0], 1)" class="segment-b"></div>
-          <div :class="getSegmentClass(hours[0], 2)" class="segment-c"></div>
-          <div :class="getSegmentClass(hours[0], 3)" class="segment-d"></div>
-          <div :class="getSegmentClass(hours[0], 4)" class="segment-e"></div>
-          <div :class="getSegmentClass(hours[0], 5)" class="segment-f"></div>
-          <div :class="getSegmentClass(hours[0], 6)" class="segment-g"></div>
+  <div class="flex items-center">
+    <div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }}&nbsp;{{ weekday }}</div>
+    <div class="digital-watch ml-[10px]" :style="{ 
+      '--size-scale': sizeScale,
+      '--color-led': ledColor,
+      '--color-led-off': ledOffColor,
+      '--color-background': backgroundColor,
+      '--color-glow': glowColor
+    }">
+      <div class="time-container">
+        <div class="digit-group">
+          <div class="seven-segment">
+            <div :class="getSegmentClass(hours[0], 0)" class="segment-a"></div>
+            <div :class="getSegmentClass(hours[0], 1)" class="segment-b"></div>
+            <div :class="getSegmentClass(hours[0], 2)" class="segment-c"></div>
+            <div :class="getSegmentClass(hours[0], 3)" class="segment-d"></div>
+            <div :class="getSegmentClass(hours[0], 4)" class="segment-e"></div>
+            <div :class="getSegmentClass(hours[0], 5)" class="segment-f"></div>
+            <div :class="getSegmentClass(hours[0], 6)" class="segment-g"></div>
+          </div>
+          <div class="seven-segment">
+            <div :class="getSegmentClass(hours[1], 0)" class="segment-a"></div>
+            <div :class="getSegmentClass(hours[1], 1)" class="segment-b"></div>
+            <div :class="getSegmentClass(hours[1], 2)" class="segment-c"></div>
+            <div :class="getSegmentClass(hours[1], 3)" class="segment-d"></div>
+            <div :class="getSegmentClass(hours[1], 4)" class="segment-e"></div>
+            <div :class="getSegmentClass(hours[1], 5)" class="segment-f"></div>
+            <div :class="getSegmentClass(hours[1], 6)" class="segment-g"></div>
+          </div>
         </div>
-        <div class="seven-segment">
-          <div :class="getSegmentClass(hours[1], 0)" class="segment-a"></div>
-          <div :class="getSegmentClass(hours[1], 1)" class="segment-b"></div>
-          <div :class="getSegmentClass(hours[1], 2)" class="segment-c"></div>
-          <div :class="getSegmentClass(hours[1], 3)" class="segment-d"></div>
-          <div :class="getSegmentClass(hours[1], 4)" class="segment-e"></div>
-          <div :class="getSegmentClass(hours[1], 5)" class="segment-f"></div>
-          <div :class="getSegmentClass(hours[1], 6)" class="segment-g"></div>
+        <div class="separator">
+          <div class="dot"></div>
+          <div class="dot"></div>
         </div>
-      </div>
-      <div class="separator">
-        <div class="dot"></div>
-        <div class="dot"></div>
-      </div>
-      <div class="digit-group">
-        <div class="seven-segment">
-          <div :class="getSegmentClass(minutes[0], 0)" class="segment-a"></div>
-          <div :class="getSegmentClass(minutes[0], 1)" class="segment-b"></div>
-          <div :class="getSegmentClass(minutes[0], 2)" class="segment-c"></div>
-          <div :class="getSegmentClass(minutes[0], 3)" class="segment-d"></div>
-          <div :class="getSegmentClass(minutes[0], 4)" class="segment-e"></div>
-          <div :class="getSegmentClass(minutes[0], 5)" class="segment-f"></div>
-          <div :class="getSegmentClass(minutes[0], 6)" class="segment-g"></div>
+        <div class="digit-group">
+          <div class="seven-segment">
+            <div :class="getSegmentClass(minutes[0], 0)" class="segment-a"></div>
+            <div :class="getSegmentClass(minutes[0], 1)" class="segment-b"></div>
+            <div :class="getSegmentClass(minutes[0], 2)" class="segment-c"></div>
+            <div :class="getSegmentClass(minutes[0], 3)" class="segment-d"></div>
+            <div :class="getSegmentClass(minutes[0], 4)" class="segment-e"></div>
+            <div :class="getSegmentClass(minutes[0], 5)" class="segment-f"></div>
+            <div :class="getSegmentClass(minutes[0], 6)" class="segment-g"></div>
+          </div>
+          <div class="seven-segment">
+            <div :class="getSegmentClass(minutes[1], 0)" class="segment-a"></div>
+            <div :class="getSegmentClass(minutes[1], 1)" class="segment-b"></div>
+            <div :class="getSegmentClass(minutes[1], 2)" class="segment-c"></div>
+            <div :class="getSegmentClass(minutes[1], 3)" class="segment-d"></div>
+            <div :class="getSegmentClass(minutes[1], 4)" class="segment-e"></div>
+            <div :class="getSegmentClass(minutes[1], 5)" class="segment-f"></div>
+            <div :class="getSegmentClass(minutes[1], 6)" class="segment-g"></div>
+          </div>
         </div>
-        <div class="seven-segment">
-          <div :class="getSegmentClass(minutes[1], 0)" class="segment-a"></div>
-          <div :class="getSegmentClass(minutes[1], 1)" class="segment-b"></div>
-          <div :class="getSegmentClass(minutes[1], 2)" class="segment-c"></div>
-          <div :class="getSegmentClass(minutes[1], 3)" class="segment-d"></div>
-          <div :class="getSegmentClass(minutes[1], 4)" class="segment-e"></div>
-          <div :class="getSegmentClass(minutes[1], 5)" class="segment-f"></div>
-          <div :class="getSegmentClass(minutes[1], 6)" class="segment-g"></div>
+        <div class="separator">
+          <div class="dot"></div>
+          <div class="dot"></div>
         </div>
-      </div>
-      <div class="separator">
-        <div class="dot"></div>
-        <div class="dot"></div>
-      </div>
-      <div class="digit-group">
-        <div class="seven-segment">
-          <div :class="getSegmentClass(seconds[0], 0)" class="segment-a"></div>
-          <div :class="getSegmentClass(seconds[0], 1)" class="segment-b"></div>
-          <div :class="getSegmentClass(seconds[0], 2)" class="segment-c"></div>
-          <div :class="getSegmentClass(seconds[0], 3)" class="segment-d"></div>
-          <div :class="getSegmentClass(seconds[0], 4)" class="segment-e"></div>
-          <div :class="getSegmentClass(seconds[0], 5)" class="segment-f"></div>
-          <div :class="getSegmentClass(seconds[0], 6)" class="segment-g"></div>
-        </div>
-        <div class="seven-segment">
-          <div :class="getSegmentClass(seconds[1], 0)" class="segment-a"></div>
-          <div :class="getSegmentClass(seconds[1], 1)" class="segment-b"></div>
-          <div :class="getSegmentClass(seconds[1], 2)" class="segment-c"></div>
-          <div :class="getSegmentClass(seconds[1], 3)" class="segment-d"></div>
-          <div :class="getSegmentClass(seconds[1], 4)" class="segment-e"></div>
-          <div :class="getSegmentClass(seconds[1], 5)" class="segment-f"></div>
-          <div :class="getSegmentClass(seconds[1], 6)" class="segment-g"></div>
+        <div class="digit-group">
+          <div class="seven-segment">
+            <div :class="getSegmentClass(seconds[0], 0)" class="segment-a"></div>
+            <div :class="getSegmentClass(seconds[0], 1)" class="segment-b"></div>
+            <div :class="getSegmentClass(seconds[0], 2)" class="segment-c"></div>
+            <div :class="getSegmentClass(seconds[0], 3)" class="segment-d"></div>
+            <div :class="getSegmentClass(seconds[0], 4)" class="segment-e"></div>
+            <div :class="getSegmentClass(seconds[0], 5)" class="segment-f"></div>
+            <div :class="getSegmentClass(seconds[0], 6)" class="segment-g"></div>
+          </div>
+          <div class="seven-segment">
+            <div :class="getSegmentClass(seconds[1], 0)" class="segment-a"></div>
+            <div :class="getSegmentClass(seconds[1], 1)" class="segment-b"></div>
+            <div :class="getSegmentClass(seconds[1], 2)" class="segment-c"></div>
+            <div :class="getSegmentClass(seconds[1], 3)" class="segment-d"></div>
+            <div :class="getSegmentClass(seconds[1], 4)" class="segment-e"></div>
+            <div :class="getSegmentClass(seconds[1], 5)" class="segment-f"></div>
+            <div :class="getSegmentClass(seconds[1], 6)" class="segment-g"></div>
+          </div>
         </div>
       </div>
     </div>
@@ -117,7 +120,7 @@ const getSegmentClass = (digit: string, index: number) => {
 
 let timer: number | null = null;
 
-let { hours, minutes, seconds, formateTime } = useDate()
+let { year, month, day, weekday,hours, minutes, seconds, formateTime } = useDate()
 
 onMounted(() => {
   formateTime();
diff --git a/src/views/home.vue b/src/views/home.vue
index 1d880e8..b69df0f 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -4,8 +4,7 @@
       <SvgComponent :content="headerSvg" class="w-full h-[98px]" />
       <SvgComponent :content="titleSvg" class="w-[50%] h-[69px] absolute top-0 left-50% translate-x-[-50%]" />
       <div class="absolute top-[25%] right-[24px] translate-y-[-25%] z-1 flex items-center justify-center w-max">
-        <div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }}&nbsp;{{ weekday }}</div>
-        <DigitalWatch class="ml-[10px]" />
+        <DigitalWatch class="" />
         <div class="text-[#45A2FF] flex items-center ml-[10px]">
           <SvgIcon name="avatar" class="w-[16px] h-[16px]"/>
           <div class="mx-[5px]">{{ username }}</div>
@@ -116,7 +115,7 @@
     loader: () => import("./components/WinCustomer.vue")
   });
 
-  import { useDate } from "@/composables/useDate";
+
   import { useFetchAllData } from "./composables/useFetchData"
   import { runImmediatelyAll, updateTime } from "@/composables/usePolling";
   import { formatDatetime } from "@/utils/date";
@@ -124,7 +123,6 @@
   import { getRequest, postRequest } from "@/api/customFetch";
   import { useUserStore } from "@/store/user";
 
-  const { year, month, day, weekday, formateTime } = useDate();
   const router = useRouter();
 
 
@@ -173,7 +171,6 @@
   }
 
   onBeforeMount(() => {
-    formateTime();
     headerBackgroundSvg();
     headerTitleSvg();
     getUserInfo();
diff --git a/src/views/login.vue b/src/views/login.vue
index ee2b6c3..383ec2c 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="login-bg">
     <div class="flex items-center justify-end mt-[17px] mr-[24px]">
-      <div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }}&nbsp;{{ weekday }}</div>
-      <DigitalWatch class="ml-[10px]" />
+      <DigitalWatch class="" />
     </div>
     <SvgComponent :content="titleSvg" class="h-[156px] mt-[95px]" />
     <div class="login-form-wrapper w-[622px] h-[419px] mx-auto mt-[87px]">
@@ -40,9 +39,7 @@
   import { postRequest } from "@/api/customFetch";
   import { useUserStore } from "@/store/user";
   import DigitalWatch from "@/components/watch/DigitalWatch.vue";
-  import { useDate } from "@/composables/useDate";
 
-  const { year, month, day, weekday, formateTime } = useDate();
 
   const router = useRouter();
   const userStore = useUserStore();
@@ -105,7 +102,6 @@
   };
 
   onBeforeMount(() => {
-    formateTime();
     getTitleSvg();
   });
 </script>