Skip to content

feat: Add 12-hour clock format support to TimeCard #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Sunwuyuan merged 2 commits into from
Mar 22, 2026
+48 −4
Merged

feat: Add 12-hour clock format support to TimeCard #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
075ae88
Initial plan
Copilot Mar 21, 2026
1bc9d2f
feat: Add 12-hour clock format support to TimeCard
Copilot Mar 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 42 additions & 4 deletions src/components/TimeCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@
{{ timeString }}<span
class="seconds-text"
:style="secondsStyle"
>{{ secondsString }}</span>
>{{ secondsString }}</span><span
v-if="use12hClock"
class="ampm-text"
Copy link

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

class="ampm-text" is introduced for the AM/PM span, but there is no corresponding .ampm-text rule in this component’s scoped styles. Either add a style (if you intend to differentiate AM/PM) or drop the class to avoid dead/unused selectors.

Suggested change
class="ampm-text"

Copilot uses AI. Check for mistakes.
:style="secondsStyle"
> {{ amPmString }}</span>
Copy link

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AM/PM span content includes a leading literal space (> {{ amPmString }}) while secondsStyle already applies margin-left. This results in double/variable spacing depending on font rendering. Prefer removing the leading whitespace and rely on CSS margin (or handle spacing in one place consistently).

Suggested change
> {{ amPmString }}</span>
>{{ amPmString }}</span>

Copilot uses AI. Check for mistakes.
</div>
<div
class="date-line mt-3"
Expand Down Expand Up @@ -302,7 +306,10 @@
<v-tabs-window-item value="clock">
<div class="d-flex flex-column align-center justify-center">
<div class="fullscreen-time-display">
{{ timeString }}<span class="fullscreen-seconds">{{ secondsString }}</span>
{{ timeString }}<span class="fullscreen-seconds">{{ secondsString }}</span><span
v-if="use12hClock"
class="fullscreen-seconds"
> {{ amPmString }}</span>
Copy link

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fullscreen AM/PM span also includes a leading literal space (> {{ amPmString }}) while .fullscreen-seconds already has margin-left: 4px;. This can cause unintended extra spacing; keep spacing in CSS or template, but not both.

Suggested change
> {{ amPmString }}</span>
>{{ amPmString }}</span>

Copilot uses AI. Check for mistakes.
</div>
<div class="fullscreen-date-line mt-6">
{{ dateString }} {{ weekdayString }} {{ periodOfDay }}
Expand Down Expand Up @@ -677,6 +684,24 @@
/>
</template>
</v-list-item>
<v-list-item>
<template #prepend>
<v-icon
class="mr-3"
icon="mdi-clock-time-six-outline"
/>
</template>
<v-list-item-title>12 小时制</v-list-item-title>
<v-list-item-subtitle>以 12 小时制（AM/PM）显示时间。</v-list-item-subtitle>
<template #append>
<v-switch
:model-value="use12hClock"
hide-details
density="comfortable"
@update:model-value="setUse12hClock"
/>
</template>
</v-list-item>
</v-list>
</v-card-text>
<v-card-actions>
Expand Down Expand Up @@ -720,6 +745,7 @@ export default {
showFullscreen: false,
showSettings: false,
timeCardEnabled: true,
use12hClock: false,
// 全屏模式切换
fullscreenMode: 'clock',
// 工具栏自动隐藏
Expand Down Expand Up @@ -785,9 +811,16 @@ export default {
},
computed: {
timeString() {
const h = String(this.now.getHours()).padStart(2, '0')
const hours = this.now.getHours()
const m = String(this.now.getMinutes()).padStart(2, '0')
return `${h}:${m}`
if (this.use12hClock) {
const h12 = hours % 12 || 12
return `${h12}:${m}`
}
return `${String(hours).padStart(2, '0')}:${m}`
},
amPmString() {
return this.now.getHours() < 12 ? 'AM' : 'PM'
},
secondsString() {
return `:${String(this.now.getSeconds()).padStart(2, '0')}`
Expand Down Expand Up @@ -994,12 +1027,17 @@ export default {
loadSettings() {
this.fontSize = SettingsManager.getSetting('font.size')
this.timeCardEnabled = getSetting('timeCard.enabled')
this.use12hClock = getSetting('timeCard.use12h')
this.noiseEnabled = getSetting('noiseMonitor.enabled')
},
setTimeCardEnabled(val) {
this.timeCardEnabled = val
setSetting('timeCard.enabled', val)
},
setUse12hClock(val) {
this.use12hClock = val
setSetting('timeCard.use12h', val)
},
startTimer() {
this.timer = setInterval(() => {
this.now = new Date()
Expand Down
6 changes: 6 additions & 0 deletions src/utils/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,12 @@ const settingsDefinitions = {
description: "启用时间卡片",
icon: "mdi-clock-outline",
},
"timeCard.use12h": {
type: "boolean",
default: false,
description: "使用 12 小时制显示时间",
icon: "mdi-clock-time-six-outline",
},

// 一言设置
"hitokoto.enabled": {
Expand Down
Loading