fix: 修复日期选择器样式和中文支持
- 添加 @mantine/dates 样式导入 - 添加 dayjs 中文语言包 - 使用 DatePickerInput 直接点击展开日历 - 日期时间选择器统一使用 Input 组件样式
This commit is contained in:
ddshi
parent
306cb41516
commit
9f67ae50ed
4
package-lock.json
generated
4
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
15
src/main.tsx
15
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" />
|
||||
<App />
|
||||
<DatesProvider settings={{ firstDayOfWeek: 0, locale: 'zh-cn' }}>
|
||||
<Notifications position="top-right" />
|
||||
<App />
|
||||
</DatesProvider>
|
||||
</MantineProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
)
|
||||
|
||||
@ -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>
|
||||
<Popover.Target>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xs"
|
||||
leftSection={<IconCalendar size={14} />}
|
||||
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',
|
||||
}) : '选择日期'}
|
||||
</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>
|
||||
<DatePickerInput
|
||||
placeholder="选择日期"
|
||||
value={formDate}
|
||||
onChange={(value) => setFormDate(value as Date | null)}
|
||||
leftSection={<IconCalendar size={14} />}
|
||||
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' && (
|
||||
<Popover position="bottom-start" withArrow>
|
||||
<Popover.Target>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xs"
|
||||
leftSection={<IconClock size={14} />}
|
||||
style={{
|
||||
flex: 1,
|
||||
borderColor: '#ddd',
|
||||
color: '#666',
|
||||
borderRadius: 2,
|
||||
height: 32,
|
||||
justifyContent: 'flex-start',
|
||||
}}
|
||||
>
|
||||
{formTime || '选择时间'}
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown style={{ padding: 8 }}>
|
||||
<TimeInput
|
||||
value={formTime}
|
||||
onChange={(e) => setFormTime(e.target.value)}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
<TimeInput
|
||||
placeholder="选择时间"
|
||||
value={formTime}
|
||||
onChange={(e) => setFormTime(e.target.value)}
|
||||
leftSection={<IconClock size={14} />}
|
||||
leftSectionPointerEvents="none"
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
background: '#faf9f7',
|
||||
borderColor: '#ddd',
|
||||
color: '#666',
|
||||
height: 32,
|
||||
paddingLeft: 36,
|
||||
paddingRight: 8,
|
||||
},
|
||||
section: {
|
||||
paddingLeft: 8,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
</Box>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user