fix: 修复日期选择器样式和中文支持

- 添加 @mantine/dates 样式导入
- 添加 dayjs 中文语言包
- 使用 DatePickerInput 直接点击展开日历
- 日期时间选择器统一使用 Input 组件样式

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",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/debug": {
       "version": "4.4.3",

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",

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(
   <StrictMode>
     <MantineProvider theme={theme} defaultColorScheme="light">
-      <Notifications position="top-right" />
+      <DatesProvider settings={{ firstDayOfWeek: 0, locale: 'zh-cn' }}>
-      <App />
+        <Notifications position="top-right" />
+        <App />
+      </DatesProvider>
     </MantineProvider>
   </StrictMode>,
 )

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() {
               </Text>
               <Group gap={8} grow>
                 {/* Date selector */}
-                <Popover position="bottom-start" withArrow>
+                <DatePickerInput
-                  <Popover.Target>
+                  placeholder="选择日期"
-                    <Button
+                  value={formDate}
-                      variant="outline"
+                  onChange={(value) => setFormDate(value as Date | null)}
-                      size="xs"
+                  leftSection={<IconCalendar size={14} />}
-                      leftSection={<IconCalendar size={14} />}
+                  leftSectionPointerEvents="none"
-                      style={{
+                  styles={{
-                        flex: 1,
+                    input: {
-                        borderColor: '#ddd',
+                      borderRadius: 2,
-                        color: '#666',
+                      background: '#faf9f7',
-                        borderRadius: 2,
+                      borderColor: '#ddd',
-                        height: 32,
+                      color: '#666',
-                        justifyContent: 'flex-start',
+                      height: 32,
-                      }}
+                      paddingLeft: 36,
-                    >
+                      paddingRight: 8,
-                      {formDate ? new Date(formDate).toLocaleDateString('zh-CN', {
+                    },
-                        month: 'numeric',
+                    section: {
-                        day: 'numeric',
+                      paddingLeft: 8,
-                      }) : '选择日期'}
+                    },
-                    </Button>
+                  }}
-                  </Popover.Target>
+                />
-                  <Popover.Dropdown style={{ padding: 8 }}>
-                    <DatePickerInput
-                      value={formDate}
-                      onChange={(value) => setFormDate(value as Date | null)}
-                      styles={{
-                        input: {
-                          borderRadius: 2,
-                        },
-                      }}
-                    />
-                  </Popover.Dropdown>
-                </Popover>
 
                 {/* Time selector (only for reminders) */}
                 {formType === 'reminder' && (
-                  <Popover position="bottom-start" withArrow>
+                  <TimeInput
-                    <Popover.Target>
+                    placeholder="选择时间"
-                      <Button
+                    value={formTime}
-                        variant="outline"
+                    onChange={(e) => setFormTime(e.target.value)}
-                        size="xs"
+                    leftSection={<IconClock size={14} />}
-                        leftSection={<IconClock size={14} />}
+                    leftSectionPointerEvents="none"
-                        style={{
+                    styles={{
-                          flex: 1,
+                      input: {
-                          borderColor: '#ddd',
+                        borderRadius: 2,
-                          color: '#666',
+                        background: '#faf9f7',
-                          borderRadius: 2,
+                        borderColor: '#ddd',
-                          height: 32,
+                        color: '#666',
-                          justifyContent: 'flex-start',
+                        height: 32,
-                        }}
+                        paddingLeft: 36,
-                      >
+                        paddingRight: 8,
-                        {formTime || '选择时间'}
+                      },
-                      </Button>
+                      section: {
-                    </Popover.Target>
+                        paddingLeft: 8,
-                    <Popover.Dropdown style={{ padding: 8 }}>
+                      },
-                      <TimeInput
+                    }}
-                        value={formTime}
+                  />
-                        onChange={(e) => setFormTime(e.target.value)}
-                        styles={{
-                          input: {
-                            borderRadius: 2,
-                          },
-                        }}
-                      />
-                    </Popover.Dropdown>
-                  </Popover>
                 )}
               </Group>
             </Box>