feat: support display seconds

src/locales/en.yml

@@ -51,6 +51,8 @@ settings:
     title: Show Time
   showDate:
     title: Show Date
+  showSecond:
+    title: Show Second
   showLunar:
     title: Show Lunar
   showFooter:

src/locales/ja.yml

@@ -51,6 +51,8 @@ settings:
     title: 時刻を表示
   showDate:
     title: 日付を表示
+  showSecond:
+    title: 秒を表示
   showLunar:
     title: 旧暦を表示
   showFooter:

src/locales/zh-CN.yml

@@ -51,6 +51,8 @@ settings:
     title: 显示时间
   showDate:
     title: 显示日期
+  showSecond:
+    title: 显示秒钟
   showLunar:
     title: 显示农历
   showFooter:

src/pages/home/components/MainClock.vue

@@ -3,6 +3,8 @@ import solarLunar from 'solarlunar-es'
 
 const settingStore = useSettingStore()
 
+const $time = ref<HTMLDivElement | null>(null)
+
 const date = ref('')
 const time = ref('')
 const lunarDate = ref('')
@@ -15,10 +17,16 @@ function refreshTime() {
   const lang = settingStore.settings.language === 'System' ? navigator.language : settingStore.settings.language
   date.value = now.toLocaleString(lang, { month: 'long', day: 'numeric' })
   week.value = now.toLocaleString(lang, { weekday: 'long' })
-  time.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
+
+  if (settingStore.getSettingValue('showSecond'))
+    time.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
+  else
+    time.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
+  $time.value!.innerText = time.value
+
   // 若为0点 或阴历为空 刷新日期
   // en: If 00:00 or the lunar is empty, refresh date
-  if (!lunarDate.value || time.value === '00:00')
+  if (!lunarDate.value || time.value === '00:00' || time.value === '00:00:00')
     getDate()
   return refreshTime
 }
@@ -42,7 +50,7 @@ function timing() {
     refreshTime()
     // 若 nowMinute !== newMinute 说明开始了新的分钟
     // en: nowMinute !== newMinute means a new minute has started
-    if (nowMinute !== time.value) {
+    if (!settingStore.getSettingValue('showSecond') && nowMinute !== time.value) {
       // 清除每秒定时器 开启分钟定时器
       // en: Clear second timer and start minute timer
       clearInterval(timeInterval)
@@ -61,7 +69,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div text-center>
-    <div v-if="settingStore.getSettingValue('showTime')" text-48>
+    <div v-if="settingStore.getSettingValue('showTime')" ref="$time" text-48 tracking-wide>
       {{ time }}
     </div>
     <p text="14 $text-c-1">

src/pages/home/components/MainSetting.vue

@@ -186,6 +186,14 @@ function loadData(data: any) {
         value-field="key"
         :on-update-value="(key: string) => settingStore.setSettings({ showDate: key })"
       />
+      <SettingSelection
+        v-model="settingStore.settings.showSecond"
+        :title="S.showSecond.name"
+        :options="S.showSecond.children"
+        label-field="name"
+        value-field="key"
+        :on-update-value="(key: string) => settingStore.setSettings({ showSecond: key })"
+      />
       <SettingSelection
         v-model="settingStore.settings.showLunar"
         :title="S.showLunar.name"

src/utils/settings/index.ts

@@ -6,6 +6,7 @@ export * from './website_preference'
 export * from './show_footer'
 export * from './show_time'
 export * from './show_date'
+export * from './show_second'
 export * from './language'
 export * from './tag_mode'
 export * from './link_strategy'

src/utils/settings/show_second.ts

@@ -0,0 +1,13 @@
+import { SettingItem, type SettingItemChildren } from '@/types'
+
+const showSecondList: SettingItemChildren<boolean> = [
+  { name: () => t('settings.common.show'), key: 'Show', value: true },
+  { name: () => t('settings.common.hide'), key: 'Hide', value: false },
+]
+
+export const showSecond = new SettingItem({
+  name: () => t('settings.showSecond.title'),
+  key: 'ShowSecond',
+  children: showSecondList,
+  defaultKey: 'Hide',
+})