chore: 完成钟表部分

app.vue

@@ -2,35 +2,53 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 11:35:10
- * @LastEditTime: 2024-02-18 22:26:06
+ * @LastEditTime: 2024-02-19 22:17:10
  * @LastEditors: NMTuan
  * @Description: 
- * @FilePath: \timeNow\app.vue
+ * @FilePath: /timeNow/app.vue
 -->
 <template>
-  <div class="w-full h-screen overflow-hidden flex flex-col items-center justify-between">
-    <div></div>
-    <!-- <ClientOnly> -->
-    <div class="bg-white/5 w-full flex flex-col items-center justify-center py-[4vw]">
-      <div>
-        <ClockWeek></ClockWeek>
-        <ClockBoard></ClockBoard>
-        <ClockDate></ClockDate>
-      </div>
+    <div
+        class="w-full h-screen overflow-hidden flex flex-col items-center justify-between"
+    >
+        <div></div>
+        <!-- <ClientOnly> -->
+        <div
+            class="bg-white/5 w-full flex flex-col items-center justify-center py-[4vw]"
+        >
+            <div>
+                <ClockWeek></ClockWeek>
+                <ClockBoard></ClockBoard>
+                <ClockDate></ClockDate>
+            </div>
+        </div>
+        <!-- </ClientOnly> -->
+        <TimeLine></TimeLine>
     </div>
-    <!-- </ClientOnly> -->
-    <TimeLine></TimeLine>
-  </div>
 </template>
+<script setup>
+const dateStore = useDateStore()
+let dt
+
+onMounted(() => {
+    dateStore.getNow()
+    dt = setInterval(() => {
+        dateStore.getNow()
+    }, 97)
+})
+onBeforeUnmount(() => {
+    clearInterval(dt)
+})
+</script>
 <style lang="scss">
 @font-face {
-  font-family: "DigitalDismay";
-  src: url("/fonts/DigitalDismay.otf") format("opentype");
+    font-family: 'DigitalDismay';
+    src: url('/fonts/DigitalDismay.otf') format('opentype');
 }
 
 .font {
-  &-digital-dismay {
-    font-family: "DigitalDismay";
-  }
+    &-digital-dismay {
+        font-family: 'DigitalDismay';
+    }
 }
 </style>

components/clock/board.vue

@@ -2,23 +2,22 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 11:48:34
- * @LastEditTime: 2024-02-18 21:54:20
+ * @LastEditTime: 2024-02-19 22:17:35
  * @LastEditors: NMTuan
  * @Description: 
- * @FilePath: \timeNow\components\clock\board.vue
+ * @FilePath: /timeNow/components/clock/board.vue
 -->
 <template>
-    <div class="text-light-400 text-[22vw] leading-[24vw] text-center font-digital-dismay">
-        <span>8</span>
-        <span>8</span>
+    <div
+        class="text-zinc-200 text-[22vw] leading-[24vw] text-center font-digital-dismay"
+    >
+        <span>{{ dateStore.hour }}</span>
         <span>:</span>
-        <span>8</span>
-        <span>8</span>
+        <span>{{ dateStore.minute }}</span>
         <span>:</span>
-        <span>8</span>
-        <span>8</span>
+        <span>{{ dateStore.second }}</span>
     </div>
 </template>
 <script setup>
-
+const dateStore = useDateStore()
 </script>

components/clock/date.vue

@@ -1,5 +1,20 @@
+<!--
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2024-02-19 20:49:39
+ * @LastEditTime: 2024-02-19 22:25:22
+ * @LastEditors: NMTuan
+ * @Description: 
+ * @FilePath: /timeNow/components/clock/date.vue
+-->
 <template>
-    <div class="font-digital-dismay text-[3vw] text-right mr-[1vw]">
-        2024. 02. 18
+    <div
+        class="text-zinc-200 font-digital-dismay text-[1.4vw] text-right mr-[1vw]"
+    >
+        {{ dateStore.year }}. {{ dateStore.month }}.
+        {{ dateStore.date }}
     </div>
 </template>
+<script setup>
+const dateStore = useDateStore()
+</script>

components/clock/week.vue

@@ -2,19 +2,22 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 20:00:36
- * @LastEditTime: 2024-02-18 22:00:22
+ * @LastEditTime: 2024-02-19 22:25:20
  * @LastEditors: NMTuan
  * @Description: 
- * @FilePath: \timeNow\components\clock\week.vue
+ * @FilePath: /timeNow/components/clock/week.vue
 -->
 <template>
-    <div class="font-digital-dismay text-[2vw] flex gap-[3vw]">
-        <div>MON.</div>
-        <div>TUE.</div>
-        <div>WED.</div>
-        <div>THU.</div>
-        <div>FRI.</div>
-        <div>SAT.</div>
-        <div>SUN.</div>
+    <div class="text-zinc-600 font-digital-dismay text-[1.2vw] flex gap-[3vw]">
+        <div :class="[dateStore.day === 1 && 'text-zinc-200']">MON.</div>
+        <div :class="[dateStore.day === 2 && 'text-zinc-200']">TUE.</div>
+        <div :class="[dateStore.day === 3 && 'text-zinc-200']">WED.</div>
+        <div :class="[dateStore.day === 4 && 'text-zinc-200']">THU.</div>
+        <div :class="[dateStore.day === 5 && 'text-zinc-200']">FRI.</div>
+        <div :class="[dateStore.day === 6 && 'text-zinc-200']">SAT.</div>
+        <div :class="[dateStore.day === 7 && 'text-zinc-200']">SUN.</div>
     </div>
 </template>
+<script setup>
+const dateStore = useDateStore()
+</script>

nuxt.config.ts

@@ -2,13 +2,19 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 11:35:10
- * @LastEditTime: 2024-02-18 11:41:32
+ * @LastEditTime: 2024-02-19 22:14:11
  * @LastEditors: NMTuan
  * @Description:
- * @FilePath: \timeNow\nuxt.config.ts
+ * @FilePath: /timeNow/nuxt.config.ts
  */
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     devtools: { enabled: false },
-    modules: ['@nuxt/ui']
+    modules: ['@nuxt/ui', '@pinia/nuxt'],
+    colorMode: {
+        preference: 'dark'
+    },
+    imports: {
+        dirs: ['stores']
+    }
 })

package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "@nuxt/ui": "^2.13.0",
+    "@pinia/nuxt": "^0.5.1",
     "nuxt": "^3.10.2",
+    "pinia": "^2.1.7",
     "sass": "^1.71.0",
     "vue": "^3.4.19",
     "vue-router": "^4.2.5"

pnpm-lock.yaml

@@ -1,12 +1,22 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@nuxt/ui':
     specifier: ^2.13.0
     version: 2.13.0(nuxt@3.10.2)(vite@5.1.3)(vue@3.4.19)
+  '@pinia/nuxt':
+    specifier: ^0.5.1
+    version: 0.5.1(vue@3.4.19)
   nuxt:
     specifier: ^3.10.2
     version: 3.10.2(sass@1.71.0)(vite@5.1.3)
+  pinia:
+    specifier: ^2.1.7
+    version: 2.1.7(vue@3.4.19)
   sass:
     specifier: ^1.71.0
     version: 1.71.0
@@ -1588,6 +1598,19 @@ packages:
       '@parcel/watcher-win32-x64': 2.4.0
     dev: false
 
+  /@pinia/nuxt@0.5.1(vue@3.4.19):
+    resolution: {integrity: sha512-6wT6TqY81n+7/x3Yhf0yfaJVKkZU42AGqOR0T3+UvChcaOJhSma7OWPN64v+ptYlznat+fS1VTwNAcbi2lzHnw==}
+    dependencies:
+      '@nuxt/kit': 3.10.2
+      pinia: 2.1.7(vue@3.4.19)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - rollup
+      - supports-color
+      - typescript
+      - vue
+    dev: false
+
   /@pkgjs/parseargs@0.11.0:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -5329,6 +5352,23 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /pinia@2.1.7(vue@3.4.19):
+    resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 6.6.1
+      vue: 3.4.19
+      vue-demi: 0.14.7(vue@3.4.19)
+    dev: false
+
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -7254,7 +7294,3 @@ packages:
       compress-commons: 5.0.1
       readable-stream: 3.6.2
     dev: false
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

stores/date.ts

@@ -0,0 +1,45 @@
+/*
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2024-02-19 22:13:33
+ * @LastEditTime: 2024-02-19 22:25:25
+ * @LastEditors: NMTuan
+ * @Description:
+ * @FilePath: /timeNow/stores/date.ts
+ */
+import { defineStore } from 'pinia'
+
+export const useDateStore = defineStore('date', () => {
+    const year = ref('1970')
+    const month = ref('01')
+    const date = ref('01')
+    const hour = ref('00')
+    const minute = ref('00')
+    const second = ref('00')
+    const millisecond = ref(0)
+    const day = ref(1)
+
+    const getNow = () => {
+        const today = new Date()
+        year.value = today.getFullYear().toString()
+        month.value = (today.getMonth() + 1).toString().padStart(2, '0')
+        date.value = today.getDate().toString().padStart(2, '0')
+        hour.value = today.getHours().toString().padStart(2, '0')
+        minute.value = today.getMinutes().toString().padStart(2, '0')
+        second.value = today.getSeconds().toString().padStart(2, '0')
+        millisecond.value = today.getMilliseconds()
+        day.value = today.getDay()
+    }
+
+    return {
+        year,
+        month,
+        date,
+        hour,
+        minute,
+        second,
+        millisecond,
+        day,
+        getNow
+    }
+})