feat: 日期和时间组件合并

src/components/watch/DigitalWatch.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="digital-watch" :style="{ 
+  <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,
@@ -77,6 +79,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -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();

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="" />
-        <DigitalWatch class="ml-[10px]" />
         <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();

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="" />
-      <DigitalWatch class="ml-[10px]" />
     </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>