From 9f67ae50edef82d8db83478c6f3ae8ae610705f3 Mon Sep 17 00:00:00 2001
From: ddshi <8811906+ddshi@user.noreply.gitee.com>
Date: Fri, 6 Feb 2026 13:55:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=A5=E6=9C=9F?=
=?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=B8=AD?=
=?UTF-8?q?=E6=96=87=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 添加 @mantine/dates 样式导入
- 添加 dayjs 中文语言包
- 使用 DatePickerInput 直接点击展开日历
- 日期时间选择器统一使用 Input 组件样式
---
package-lock.json | 4 +-
package.json | 1 +
src/main.tsx | 15 ++++--
src/pages/HomePage.tsx | 106 ++++++++++++++++-------------------------
4 files changed, 57 insertions(+), 69 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 4d41fea..dba77ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
"@supabase/supabase-js": "^2.93.2",
"@tabler/icons-react": "^3.36.1",
"date-fns": "^4.1.0",
+ "dayjs": "^1.11.19",
"lunar-javascript": "^1.7.7",
"postcss": "^8.5.6",
"postcss-preset-mantine": "^1.18.0",
@@ -2419,8 +2420,7 @@
"version": "1.11.19",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.19.tgz",
"integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/debug": {
"version": "4.4.3",
diff --git a/package.json b/package.json
index 11375f9..b5d1402 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"@supabase/supabase-js": "^2.93.2",
"@tabler/icons-react": "^3.36.1",
"date-fns": "^4.1.0",
+ "dayjs": "^1.11.19",
"lunar-javascript": "^1.7.7",
"postcss": "^8.5.6",
"postcss-preset-mantine": "^1.18.0",
diff --git a/src/main.tsx b/src/main.tsx
index 9a70d06..92392c6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,16 +1,23 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { MantineProvider, createTheme } from '@mantine/core'
+import { DatesProvider } from '@mantine/dates'
import { Notifications } from '@mantine/notifications'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
import '@mantine/core/styles.css'
+import '@mantine/dates/styles.css'
import '@mantine/notifications/styles.css'
import './index.css'
import App from './App'
+dayjs.locale('zh-cn')
+
// Apple-inspired theme
const theme = createTheme({
primaryColor: 'blue',
fontFamily: '-apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',
+ fontFamilyMonospace: 'Monaco, Consolas, monospace',
defaultRadius: 'md',
colors: {
blue: [
@@ -48,8 +55,10 @@ const theme = createTheme({
createRoot(document.getElementById('root')!).render(
-
-
+
+
+
+
,
-)
\ No newline at end of file
+)
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 7f4d86f..72be462 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -12,7 +12,6 @@ import {
Select,
Stack,
Box,
- Popover,
} from '@mantine/core';
import { DatePickerInput, TimeInput } from '@mantine/dates';
import { IconCalendar, IconClock, IconSettings, IconLogout } from '@tabler/icons-react';
@@ -468,72 +467,51 @@ export function HomePage() {
{/* Date selector */}
-
-
- }
- style={{
- flex: 1,
- borderColor: '#ddd',
- color: '#666',
- borderRadius: 2,
- height: 32,
- justifyContent: 'flex-start',
- }}
- >
- {formDate ? new Date(formDate).toLocaleDateString('zh-CN', {
- month: 'numeric',
- day: 'numeric',
- }) : '选择日期'}
-
-
-
- setFormDate(value as Date | null)}
- styles={{
- input: {
- borderRadius: 2,
- },
- }}
- />
-
-
+ setFormDate(value as Date | null)}
+ leftSection={}
+ leftSectionPointerEvents="none"
+ styles={{
+ input: {
+ borderRadius: 2,
+ background: '#faf9f7',
+ borderColor: '#ddd',
+ color: '#666',
+ height: 32,
+ paddingLeft: 36,
+ paddingRight: 8,
+ },
+ section: {
+ paddingLeft: 8,
+ },
+ }}
+ />
{/* Time selector (only for reminders) */}
{formType === 'reminder' && (
-
-
- }
- style={{
- flex: 1,
- borderColor: '#ddd',
- color: '#666',
- borderRadius: 2,
- height: 32,
- justifyContent: 'flex-start',
- }}
- >
- {formTime || '选择时间'}
-
-
-
- setFormTime(e.target.value)}
- styles={{
- input: {
- borderRadius: 2,
- },
- }}
- />
-
-
+ setFormTime(e.target.value)}
+ leftSection={}
+ leftSectionPointerEvents="none"
+ styles={{
+ input: {
+ borderRadius: 2,
+ background: '#faf9f7',
+ borderColor: '#ddd',
+ color: '#666',
+ height: 32,
+ paddingLeft: 36,
+ paddingRight: 8,
+ },
+ section: {
+ paddingLeft: 8,
+ },
+ }}
+ />
)}