chore: 开始写设置页面

app.config.ts

@@ -0,0 +1,23 @@
+/*
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2024-02-20 18:33:28
+ * @LastEditTime: 2024-02-20 19:54:20
+ * @LastEditors: NMTuan
+ * @Description:
+ * @FilePath: \timeNow\app.config.ts
+ */
+export default defineAppConfig({
+    ui: {
+        primary: 'orange',
+        slideover: {
+            background: 'dark:bg-zinc-900',
+            overlay: {
+                background: 'dark:bg-black/50'
+            }
+        },
+        card: {
+            background: 'dark:bg-zinc-900'
+        }
+    }
+})

app.vue

@@ -2,14 +2,14 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 11:35:10
- * @LastEditTime: 2024-02-20 16:07:01
+ * @LastEditTime: 2024-02-20 18:58:18
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: \timeNow\app.vue
 -->
 <template>
-    <div class="w-full h-screen overflow-hidden flex flex-col items-center justify-between">
-        <div></div>
+    <div class="group w-full h-screen overflow-hidden flex flex-col items-center justify-between">
+        <Header class="opacity-0 transition-all group-hover:opacity-100"></Header>
         <div class="bg-white/5 w-full flex flex-col items-center justify-center py-[4vw]">
             <div class="select-none">
                 <ClockWeek></ClockWeek>
@@ -17,7 +17,7 @@
                 <ClockDate></ClockDate>
             </div>
         </div>
-        <div class="w-full px-[4px]">
+        <div class="w-full px-[4px] mt-[26px]">
             <div class="px-[4px]">
                 <TimeLine></TimeLine>
             </div>

components/clock/date.vue

@@ -2,15 +2,13 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-19 20:49:39
- * @LastEditTime: 2024-02-19 22:25:22
+ * @LastEditTime: 2024-02-20 16:15:09
  * @LastEditors: NMTuan
  * @Description: 
- * @FilePath: /timeNow/components/clock/date.vue
+ * @FilePath: \timeNow\components\clock\date.vue
 -->
 <template>
-    <div
-        class="text-zinc-200 font-digital-dismay text-[1.4vw] text-right mr-[1vw]"
-    >
+    <div class="text-zinc-300 font-digital-dismay text-[1.4vw] text-right mr-[1vw]">
         {{ dateStore.year }}. {{ dateStore.month }}.
         {{ dateStore.date }}
     </div>

components/clock/week.vue

@@ -2,20 +2,20 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 20:00:36
- * @LastEditTime: 2024-02-19 22:25:20
+ * @LastEditTime: 2024-02-20 16:15:23
  * @LastEditors: NMTuan
  * @Description: 
- * @FilePath: /timeNow/components/clock/week.vue
+ * @FilePath: \timeNow\components\clock\week.vue
 -->
 <template>
     <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 :class="[dateStore.day === 1 && 'text-zinc-300']">MON.</div>
+        <div :class="[dateStore.day === 2 && 'text-zinc-300']">TUE.</div>
+        <div :class="[dateStore.day === 3 && 'text-zinc-300']">WED.</div>
+        <div :class="[dateStore.day === 4 && 'text-zinc-300']">THU.</div>
+        <div :class="[dateStore.day === 5 && 'text-zinc-300']">FRI.</div>
+        <div :class="[dateStore.day === 6 && 'text-zinc-300']">SAT.</div>
+        <div :class="[dateStore.day === 7 && 'text-zinc-300']">SUN.</div>
     </div>
 </template>
 <script setup>

components/header/icon.vue

@@ -0,0 +1,17 @@
+<template>
+    <UButton :icon="name" :to="href" :target="target" variant="ghost" class="ml-3"></UButton>
+</template>
+<script setup>
+const props = defineProps({
+    name: '',
+    href: ''
+})
+
+const target = computed(() => {
+    if (props.href) {
+        return '_blank'
+    } else {
+        return ''
+    }
+})
+</script>

components/header/index.vue

@@ -0,0 +1,41 @@
+<!--
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2024-02-20 16:11:39
+ * @LastEditTime: 2024-02-20 21:22:21
+ * @LastEditors: NMTuan
+ * @Description: 
+ * @FilePath: \timeNow\components\header\index.vue
+-->
+<template>
+    <div class="w-full text-right pr-6 pt-6">
+        <!--  -->
+        <HeaderIcon name="i-ri-cup-line"></HeaderIcon>
+        <HeaderIcon name="i-ri-github-line" href="https://github.com/NMTuan/timeNow"></HeaderIcon>
+        <ClientOnly>
+            <HeaderToggleFullScreen></HeaderToggleFullScreen>
+        </ClientOnly>
+        <HeaderIcon @click="optionsVisiable = true" name="i-ri-equalizer-line"></HeaderIcon>
+        <!-- <HeaderIcon name="i-ri-twitter-line"></HeaderIcon> -->
+        <USlideover v-model="optionsVisiable">
+            <UCard class="flex flex-col flex-1"
+                :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-zinc-100 dark:divide-zinc-800' }">
+                <template #header>
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-base font-semibold leading-6 text-zinc-900 dark:text-zinc-300">
+                            Settings
+                        </h3>
+                        <UButton color="gray" variant="ghost" icon="i-ri-close-line" @click="optionsVisiable = false" />
+                    </div>
+                </template>
+                <p v-for="i in 100">{{ i }}</p>
+
+            </UCard>
+        </USlideover>
+    </div>
+</template>
+<script setup>
+
+const optionsVisiable = ref(false)
+
+</script>

components/header/toggleFullScreen.vue

@@ -0,0 +1,25 @@
+
+<template>
+    <HeaderIcon v-if="state" @click="fullScreenExit" name="i-ri-fullscreen-exit-line">
+    </HeaderIcon>
+    <HeaderIcon v-else @click="fullScreen" name="i-ri-fullscreen-line"></HeaderIcon>
+</template>
+<script setup>
+const state = ref(false)
+const fullScreen = () => {
+    document.documentElement.requestFullscreen();
+}
+const fullScreenExit = () => {
+    document.exitFullscreen();
+}
+
+onMounted(() => {
+    document.addEventListener('fullscreenchange', () => {
+        state.value = document?.fullscreenElement !== null
+    })
+})
+onBeforeUnmount(() => {
+    document.removeEventListener('fullscreenchange')
+})
+
+</script>

components/time/line.vue

@@ -2,7 +2,7 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 22:03:42
- * @LastEditTime: 2024-02-20 16:06:18
+ * @LastEditTime: 2024-02-20 18:48:40
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: \timeNow\components\time\line.vue
@@ -20,7 +20,7 @@
                 <div class="w-[1px] h-[18px] bg-zinc-800"></div>
             </template>
         </template>
-        <div class="absolute bottom-0 w-[1px] h-[52px] bg-red-900 z-1" :style="progressStyle"></div>
+        <div class="absolute bottom-0 w-[1px] h-[52px] bg-orange-500 z-1" :style="progressStyle"></div>
     </div>
 </template>
 <script setup>

nuxt.config.ts

@@ -2,10 +2,10 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 11:35:10
- * @LastEditTime: 2024-02-19 22:14:11
+ * @LastEditTime: 2024-02-20 18:33:14
  * @LastEditors: NMTuan
  * @Description:
- * @FilePath: /timeNow/nuxt.config.ts
+ * @FilePath: \timeNow\nuxt.config.ts
  */
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -14,6 +14,9 @@ export default defineNuxtConfig({
     colorMode: {
         preference: 'dark'
     },
+    ui: {
+        icons: ['ri']
+    },
     imports: {
         dirs: ['stores']
     }