chore: 增加配置项

app.vue

@@ -18,18 +18,19 @@
             </div>
         </div>
         <div class="w-full px-[4px] mt-[26px]">
-            <div class="px-[4px]">
+            <div v-if="settingStore.showTimeLine" class="px-[4px]">
                 <TimeLine></TimeLine>
             </div>
             <div class="my-[4px]">
-                <DayLine></DayLine>
-                <MonthLine></MonthLine>
+                <DayLine v-if="settingStore.showDayLine"></DayLine>
+                <MonthLine v-if="settingStore.showMonthLine"></MonthLine>
             </div>
         </div>
     </div>
 </template>
 <script setup>
 const dateStore = useDateStore()
+const settingStore = useSettingStore()
 let dt
 
 onMounted(() => {

components/clock/board.vue

@@ -2,22 +2,25 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 11:48:34
- * @LastEditTime: 2024-02-19 22:17:35
+ * @LastEditTime: 2024-02-22 10:23:06
  * @LastEditors: NMTuan
  * @Description: 
- * @FilePath: /timeNow/components/clock/board.vue
+ * @FilePath: \timeNow\components\clock\board.vue
 -->
 <template>
-    <div
-        class="text-zinc-200 text-[22vw] leading-[24vw] text-center font-digital-dismay"
-    >
-        <span>{{ dateStore.hour }}</span>
-        <span>:</span>
+    <div class="text-zinc-200 text-[22vw] leading-[24vw] text-center font-digital-dismay">
+        <span>{{ settingStore.hour24 ? dateStore.hour : dateStore.hour % 12 }}</span>
+        <span class="transition-all"
+            :class="[settingStore.flicker && (dateStore.second % 2 === 0 ? 'opacity-1' : 'opacity-0')]">:</span>
         <span>{{ dateStore.minute }}</span>
-        <span>:</span>
-        <span>{{ dateStore.second }}</span>
+        <template v-if="settingStore.showSecond">
+            <span class="transition-all"
+                :class="[settingStore.flicker && (dateStore.second % 2 === 0 ? 'opacity-1' : 'opacity-0')]">:</span>
+            <span>{{ dateStore.second }}</span>
+        </template>
     </div>
 </template>
 <script setup>
 const dateStore = useDateStore()
+const settingStore = useSettingStore()
 </script>

components/header/index.vue

@@ -2,7 +2,7 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-20 16:11:39
- * @LastEditTime: 2024-02-20 21:22:21
+ * @LastEditTime: 2024-02-22 11:53:57
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: \timeNow\components\header\index.vue
@@ -15,8 +15,8 @@
         <ClientOnly>
             <HeaderToggleFullScreen></HeaderToggleFullScreen>
         </ClientOnly>
-        <HeaderIcon @click="optionsVisiable = true" name="i-ri-equalizer-line"></HeaderIcon>
         <!-- <HeaderIcon name="i-ri-twitter-line"></HeaderIcon> -->
+        <HeaderIcon @click="optionsVisiable = true" name="i-ri-equalizer-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' }">
@@ -28,14 +28,28 @@
                         <UButton color="gray" variant="ghost" icon="i-ri-close-line" @click="optionsVisiable = false" />
                     </div>
                 </template>
-                <p v-for="i in 100">{{ i }}</p>
-
+                <UFormGroup class="mb-6">
+                    <template #label>
+                        <div class="text-base">表盘</div>
+                    </template>
+                    <UCheckbox class="my-4" v-model="settingStore.hour24" label="24小时制"></UCheckbox>
+                    <UCheckbox class="my-4" v-model="settingStore.showSecond" label="显示秒数"></UCheckbox>
+                    <UCheckbox class="my-4" v-model="settingStore.flicker" label="冒号闪动"></UCheckbox>
+                </UFormGroup>
+                <UFormGroup class="mb-6">
+                    <template #label>
+                        <div class="text-base">底部</div>
+                    </template>
+                    <UCheckbox class="my-4" v-model="settingStore.showTimeLine" label="显示日进度"></UCheckbox>
+                    <UCheckbox class="my-4" v-model="settingStore.showDayLine" label="显示月进度"></UCheckbox>
+                    <UCheckbox class="my-4" v-model="settingStore.showMonthLine" label="显示年进度"></UCheckbox>
+                </UFormGroup>
             </UCard>
         </USlideover>
     </div>
 </template>
 <script setup>
-
+const settingStore = useSettingStore()
 const optionsVisiable = ref(false)
 
 </script>

stores/setting.ts

@@ -0,0 +1,27 @@
+/*
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2024-02-21 21:47:50
+ * @LastEditTime: 2024-02-21 21:56:15
+ * @LastEditors: NMTuan
+ * @Description:
+ * @FilePath: \timeNow\stores\setting.ts
+ */
+import { defineStore } from 'pinia'
+
+export const useSettingStore = defineStore('setting', () => {
+    const hour24 = ref(true) // 24小时制
+    const showSecond = ref(true) // 显示秒数
+    const flicker = ref(false) // 闪烁冒号
+    const showMonthLine = ref(true)
+    const showDayLine = ref(true)
+    const showTimeLine = ref(true)
+    return {
+        hour24,
+        showSecond,
+        flicker,
+        showMonthLine,
+        showDayLine,
+        showTimeLine
+    }
+})