feat: 禅意设计风格重构与体验优化
- LandingPage: 全新水墨晕染算法背景，循环墨迹动画 - 登录/注册页: 禅意黑白极简风格 - HomePage: 三栏布局优化，标题颜色语义化 - 纪念日组件: 分类逻辑优化，颜色语义统一 - 提醒组件: 分组标题颜色优化，逾期提示更醒目 - 修复农历日期边界问题（29/30天月份） - 添加 lunar-javascript 类型声明 - 清理未使用的导入和代码
This commit is contained in:
ddshi
parent
a118346238
commit
250c05e85e
1507
package-lock.json
generated
1507
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -23,7 +23,10 @@
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-router-dom": "^7.13.0",
|
||||
"rehype-sanitize": "^6.0.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"zustand": "^5.0.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
BIN
src/assets/icon.png
Normal file
BIN
src/assets/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
@ -8,9 +8,7 @@ import {
|
||||
ActionIcon,
|
||||
Loader,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Badge,
|
||||
} from '@mantine/core';
|
||||
import { IconSend, IconSparkles } from '@tabler/icons-react';
|
||||
import { api } from '../../services/api';
|
||||
@ -24,7 +22,6 @@ interface AIChatBoxProps {
|
||||
export function AIChatBox({ onEventCreated }: AIChatBoxProps) {
|
||||
const [message, setMessage] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [conversation, setConversation] = useState<AIConversation | null>(null);
|
||||
const [history, setHistory] = useState<AIConversation[]>([]);
|
||||
const addConversation = useAppStore((state) => state.addConversation);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
@ -55,7 +52,6 @@ export function AIChatBox({ onEventCreated }: AIChatBoxProps) {
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setConversation(newConversation);
|
||||
setHistory((prev) => [...prev, newConversation]);
|
||||
addConversation(newConversation);
|
||||
|
||||
|
||||
262
src/components/ai/FloatingAIChat.tsx
Normal file
262
src/components/ai/FloatingAIChat.tsx
Normal file
@ -0,0 +1,262 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import {
|
||||
Paper,
|
||||
Text,
|
||||
Stack,
|
||||
Group,
|
||||
TextInput,
|
||||
ActionIcon,
|
||||
Loader,
|
||||
Box,
|
||||
Transition,
|
||||
} from '@mantine/core';
|
||||
import { IconSparkles, IconX, IconSend, IconMessage } from '@tabler/icons-react';
|
||||
import { api } from '../../services/api';
|
||||
import { useAppStore } from '../../stores';
|
||||
import type { AIConversation } from '../../types';
|
||||
|
||||
interface FloatingAIChatProps {
|
||||
onEventCreated?: () => void;
|
||||
}
|
||||
|
||||
export function FloatingAIChat({ onEventCreated }: FloatingAIChatProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [history, setHistory] = useState<AIConversation[]>([]);
|
||||
const addConversation = useAppStore((state) => state.addConversation);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
scrollRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [history]);
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!message.trim() || loading) return;
|
||||
|
||||
const userMessage = message.trim();
|
||||
setMessage('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const result = await api.ai.parse(userMessage);
|
||||
|
||||
const newConversation: AIConversation = {
|
||||
id: Date.now().toString(),
|
||||
user_id: '',
|
||||
message: userMessage,
|
||||
response: result.response,
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setHistory((prev) => [...prev, newConversation]);
|
||||
addConversation(newConversation);
|
||||
|
||||
if (onEventCreated) {
|
||||
onEventCreated();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('AI parse error:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Floating button */}
|
||||
<ActionIcon
|
||||
size="xl"
|
||||
radius="xl"
|
||||
variant="filled"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: 24,
|
||||
right: 24,
|
||||
zIndex: 1000,
|
||||
background: '#1a1a1a',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
|
||||
}}
|
||||
>
|
||||
{isOpen ? <IconX size={24} /> : <IconMessage size={24} />}
|
||||
</ActionIcon>
|
||||
|
||||
{/* Chat window */}
|
||||
<Transition mounted={isOpen} transition="slide-up" duration={300}>
|
||||
{(styles) => (
|
||||
<Paper
|
||||
shadow="lg"
|
||||
radius={4}
|
||||
style={{
|
||||
...styles,
|
||||
position: 'fixed',
|
||||
bottom: 90,
|
||||
right: 24,
|
||||
width: 360,
|
||||
maxHeight: 'calc(100vh - 150px)',
|
||||
zIndex: 1000,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: '#faf9f7',
|
||||
border: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<Group
|
||||
p="md"
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
background: '#1a1a1a',
|
||||
borderRadius: '4px 4px 0 0',
|
||||
}}
|
||||
>
|
||||
<Group gap={8}>
|
||||
<IconSparkles size={16} color="#faf9f7" />
|
||||
<Text
|
||||
fw={400}
|
||||
size="sm"
|
||||
c="#faf9f7"
|
||||
style={{ letterSpacing: '0.1em' }}
|
||||
>
|
||||
AI 助手
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
{/* Chat history */}
|
||||
<Box
|
||||
p="md"
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
minHeight: 280,
|
||||
maxHeight: 380,
|
||||
}}
|
||||
>
|
||||
{history.length === 0 ? (
|
||||
<Stack align="center" justify="center" h="100%" gap="sm">
|
||||
<IconSparkles size={32} color="rgba(0, 0, 0, 0.2)" />
|
||||
<Text size="xs" c="#888" ta="center" style={{ letterSpacing: '0.05em' }}>
|
||||
告诉我你想记住的事情
|
||||
<br />
|
||||
<Text span size="xs" c="#aaa">
|
||||
例如：下周三见客户、每月15号还房贷
|
||||
</Text>
|
||||
</Text>
|
||||
</Stack>
|
||||
) : (
|
||||
history.map((conv) => (
|
||||
<Box key={conv.id}>
|
||||
<Group gap={8} mb={6}>
|
||||
<Text size="xs" c="#666" fw={400} style={{ letterSpacing: '0.05em' }}>
|
||||
你
|
||||
</Text>
|
||||
</Group>
|
||||
<Paper
|
||||
withBorder
|
||||
p="sm"
|
||||
radius={2}
|
||||
mb="sm"
|
||||
style={{
|
||||
background: 'rgba(0, 0, 0, 0.02)',
|
||||
borderColor: 'rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<Text size="xs" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
|
||||
{conv.message}
|
||||
</Text>
|
||||
</Paper>
|
||||
|
||||
<Group gap={8} mb={6}>
|
||||
<IconSparkles size={10} color="#1a1a1a" />
|
||||
<Text size="xs" c="#1a1a1a" fw={400} style={{ letterSpacing: '0.05em' }}>
|
||||
AI
|
||||
</Text>
|
||||
</Group>
|
||||
<Paper
|
||||
withBorder
|
||||
p="sm"
|
||||
radius={2}
|
||||
style={{
|
||||
background: 'rgba(0, 0, 0, 0.03)',
|
||||
borderColor: 'rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<Text size="xs" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
|
||||
{conv.response}
|
||||
</Text>
|
||||
</Paper>
|
||||
</Box>
|
||||
))
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<Group gap={8}>
|
||||
<Loader size="xs" color="#1a1a1a" />
|
||||
<Text size="xs" c="#888" style={{ letterSpacing: '0.05em' }}>
|
||||
AI 正在思考...
|
||||
</Text>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
<div ref={scrollRef} />
|
||||
</Box>
|
||||
|
||||
{/* Input */}
|
||||
<Group
|
||||
p="md"
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
borderRadius: '0 0 4px 4px',
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="输入你的提醒事项..."
|
||||
size="sm"
|
||||
style={{ flex: 1 }}
|
||||
disabled={loading}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
borderColor: 'rgba(0, 0, 0, 0.1)',
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ActionIcon
|
||||
size="lg"
|
||||
radius={2}
|
||||
variant="filled"
|
||||
onClick={handleSend}
|
||||
disabled={!message.trim() || loading}
|
||||
style={{
|
||||
background: '#1a1a1a',
|
||||
}}
|
||||
>
|
||||
<IconSend size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Paper>
|
||||
)}
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import { Card, Text, Badge, Group, Stack, ThemeIcon } from '@mantine/core';
|
||||
import { IconHeart, IconRepeat, IconCalendar } from '@tabler/icons-react';
|
||||
import { Paper, Text, Group, Stack } from '@mantine/core';
|
||||
import type { Event } from '../../types';
|
||||
import { calculateCountdown, formatCountdown } from '../../utils/countdown';
|
||||
import { getHolidayById } from '../../constants/holidays';
|
||||
@ -17,37 +16,40 @@ export function AnniversaryCard({ event, onClick }: AnniversaryCardProps) {
|
||||
const holiday = event.is_holiday ? getHolidayById(event.title) || event.is_holiday : false;
|
||||
|
||||
return (
|
||||
<Card
|
||||
shadow="sm"
|
||||
padding="sm"
|
||||
radius="md"
|
||||
<Paper
|
||||
p="sm"
|
||||
radius={2}
|
||||
onClick={onClick}
|
||||
style={{ cursor: 'pointer', transition: 'transform 0.2s' }}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.transform = 'translateY(-2px)')}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.2s',
|
||||
background: 'rgba(0, 0, 0, 0.02)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.04)',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.transform = 'translateY(-1px)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Stack gap={4} style={{ flex: 1 }}>
|
||||
<Group gap={6}>
|
||||
<IconHeart size={14} color="pink" />
|
||||
<Text fw={500} size="sm" lineClamp={1} style={{ flex: 1 }}>
|
||||
{event.title}
|
||||
</Text>
|
||||
<Text size="xs" c="#c41c1c">{event.title}</Text>
|
||||
</Group>
|
||||
|
||||
<Group gap="xs">
|
||||
{/* Countdown badge */}
|
||||
<Badge
|
||||
size="sm"
|
||||
variant="filled"
|
||||
color={countdown.isPast ? 'gray' : countdown.isToday ? 'red' : 'blue'}
|
||||
leftSection={<IconCalendar size={10} />}
|
||||
{/* Countdown */}
|
||||
<Text
|
||||
size="xs"
|
||||
fw={400}
|
||||
style={{
|
||||
letterSpacing: '0.05em',
|
||||
color: countdown.isToday ? '#c41c1c' : '#666',
|
||||
}}
|
||||
>
|
||||
{formattedCountdown}
|
||||
</Badge>
|
||||
</Text>
|
||||
|
||||
{/* Date display */}
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text size="xs" c="#999">
|
||||
{countdown.isPast
|
||||
? '已过'
|
||||
: `${countdown.nextDate.getMonth() + 1}月${countdown.nextDate.getDate()}日`}
|
||||
@ -58,22 +60,17 @@ export function AnniversaryCard({ event, onClick }: AnniversaryCardProps) {
|
||||
|
||||
<Group gap={6}>
|
||||
{repeatType !== 'none' && (
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="light"
|
||||
color="blue"
|
||||
leftSection={<IconRepeat size={10} />}
|
||||
>
|
||||
<Text size="xs" c="#888">
|
||||
{repeatType === 'yearly' ? '每年' : '每月'}
|
||||
</Badge>
|
||||
</Text>
|
||||
)}
|
||||
{(event.is_holiday || holiday) && (
|
||||
<Badge size="xs" variant="light" color="green">
|
||||
<Text size="xs" c="#888">
|
||||
节假日
|
||||
</Badge>
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { useMemo } from 'react';
|
||||
import { Stack, Text, Paper, Group, Button, Badge, ThemeIcon, Card } from '@mantine/core';
|
||||
import { IconPlus, IconHeart, IconCalendar } from '@tabler/icons-react';
|
||||
import { Stack, Text, Paper, Group, Button } from '@mantine/core';
|
||||
import { IconPlus } from '@tabler/icons-react';
|
||||
import { AnniversaryCard } from './AnniversaryCard';
|
||||
import { getHolidaysForYear, getUpcomingHolidays } from '../../constants/holidays';
|
||||
import { getHolidaysForYear } from '../../constants/holidays';
|
||||
import { calculateCountdown, formatCountdown } from '../../utils/countdown';
|
||||
import type { Event } from '../../types';
|
||||
import { Lunar, Solar } from 'lunar-javascript';
|
||||
|
||||
interface AnniversaryListProps {
|
||||
events: Event[];
|
||||
@ -85,16 +84,21 @@ export function AnniversaryList({ events, onEventClick, onAddClick }: Anniversar
|
||||
// 空状态
|
||||
if (allAnniversaries.total === 0) {
|
||||
return (
|
||||
<Paper p="md" withBorder radius="md" h="100%">
|
||||
<Paper p="md" withBorder radius={4} h="100%">
|
||||
<Stack align="center" justify="center" h="100%">
|
||||
<Text c="dimmed" size="sm">
|
||||
<Text c="#999" size="sm" style={{ letterSpacing: '0.05em' }}>
|
||||
暂无纪念日
|
||||
</Text>
|
||||
<Button
|
||||
variant="light"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
leftSection={<IconPlus size={14} />}
|
||||
leftSection={<IconPlus size={12} />}
|
||||
onClick={onAddClick}
|
||||
style={{
|
||||
borderColor: '#ccc',
|
||||
color: '#1a1a1a',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
添加纪念日
|
||||
</Button>
|
||||
@ -104,21 +108,25 @@ export function AnniversaryList({ events, onEventClick, onAddClick }: Anniversar
|
||||
}
|
||||
|
||||
return (
|
||||
<Paper p="md" withBorder radius="md" h="100%">
|
||||
<Paper p="md" withBorder radius={4} h="100%">
|
||||
<Group justify="space-between" mb="sm">
|
||||
<Group gap={8}>
|
||||
<Text fw={500} size="sm">
|
||||
<Text fw={500} size="sm" style={{ letterSpacing: '0.1em', color: '#1a1a1a' }}>
|
||||
纪念日
|
||||
</Text>
|
||||
<Badge size="xs" variant="light" color="gray">
|
||||
<Text size="xs" c="#999">
|
||||
{anniversaries.length}
|
||||
</Badge>
|
||||
</Text>
|
||||
</Group>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
leftSection={<IconPlus size={14} />}
|
||||
leftSection={<IconPlus size={12} />}
|
||||
onClick={onAddClick}
|
||||
style={{
|
||||
color: '#666',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
@ -128,37 +136,37 @@ export function AnniversaryList({ events, onEventClick, onAddClick }: Anniversar
|
||||
{/* 内置节假日 */}
|
||||
{allAnniversaries.builtIn.length > 0 && (
|
||||
<>
|
||||
<Text size="xs" c="dimmed" fw={500} tt="uppercase">
|
||||
<Text size="xs" c="#888" fw={400} style={{ letterSpacing: '0.05em' }}>
|
||||
即将到来
|
||||
</Text>
|
||||
{allAnniversaries.builtIn.map((holiday) => {
|
||||
const countdown = calculateCountdown(holiday.date, holiday.repeat_type, holiday.is_lunar);
|
||||
return (
|
||||
<Card
|
||||
<Paper
|
||||
key={holiday.id}
|
||||
shadow="sm"
|
||||
padding="sm"
|
||||
radius="md"
|
||||
style={{ cursor: 'pointer', opacity: 0.8, backgroundColor: '#f8f9fa' }}
|
||||
p="sm"
|
||||
radius={2}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
opacity: 0.7,
|
||||
background: 'rgba(0, 0, 0, 0.02)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.04)',
|
||||
}}
|
||||
onClick={() => onEventClick(holiday as unknown as Event)}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap={6}>
|
||||
<ThemeIcon size="xs" variant="light" color="green">
|
||||
<IconCalendar size={10} />
|
||||
</ThemeIcon>
|
||||
<Text fw={500} size="sm">
|
||||
{holiday.title}
|
||||
</Text>
|
||||
<Text size="xs" c="#666">{holiday.title}</Text>
|
||||
</Group>
|
||||
<Badge
|
||||
<Text
|
||||
size="xs"
|
||||
variant="filled"
|
||||
color={countdown.isToday ? 'red' : 'green'}
|
||||
c={countdown.isToday ? '#c41c1c' : '#888'}
|
||||
style={{ letterSpacing: '0.05em' }}
|
||||
>
|
||||
{formatCountdown(countdown)}
|
||||
</Badge>
|
||||
</Text>
|
||||
</Group>
|
||||
</Card>
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
@ -168,7 +176,7 @@ export function AnniversaryList({ events, onEventClick, onAddClick }: Anniversar
|
||||
{allAnniversaries.user.length > 0 && (
|
||||
<>
|
||||
{allAnniversaries.builtIn.length > 0 && (
|
||||
<Text size="xs" c="dimmed" fw={500} tt="uppercase" mt="xs">
|
||||
<Text size="xs" c="#666" fw={500} style={{ letterSpacing: '0.05em' }} mt="xs">
|
||||
我的纪念日
|
||||
</Text>
|
||||
)}
|
||||
|
||||
@ -1,12 +1,26 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Paper, Textarea, Group, Text, Stack } from '@mantine/core';
|
||||
import {
|
||||
Paper,
|
||||
Textarea,
|
||||
Group,
|
||||
Text,
|
||||
Stack,
|
||||
Button,
|
||||
Box,
|
||||
} from '@mantine/core';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import rehypeSanitize from 'rehype-sanitize';
|
||||
import { IconDeviceFloppy } from '@tabler/icons-react';
|
||||
import { useAppStore } from '../../stores';
|
||||
|
||||
interface NoteEditorProps {
|
||||
onSave?: () => void;
|
||||
}
|
||||
|
||||
type ViewMode = 'edit' | 'preview';
|
||||
|
||||
export function NoteEditor({ onSave }: NoteEditorProps) {
|
||||
const notes = useAppStore((state) => state.notes);
|
||||
const updateNotesContent = useAppStore((state) => state.updateNotesContent);
|
||||
@ -16,6 +30,7 @@ export function NoteEditor({ onSave }: NoteEditorProps) {
|
||||
const [content, setContent] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [lastSaved, setLastSaved] = useState<Date | null>(null);
|
||||
const [viewMode] = useState<ViewMode>('edit');
|
||||
|
||||
// Initialize content from notes
|
||||
useEffect(() => {
|
||||
@ -29,11 +44,11 @@ export function NoteEditor({ onSave }: NoteEditorProps) {
|
||||
fetchNotes();
|
||||
}, [fetchNotes]);
|
||||
|
||||
// Auto-save with debounce
|
||||
const [debouncedContent] = useDebouncedValue(content, 1000);
|
||||
// Auto-save with 3 second debounce
|
||||
const [debouncedContent] = useDebouncedValue(content, 3000);
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedContent !== undefined && notes) {
|
||||
if (debouncedContent !== undefined && notes && debouncedContent !== content) {
|
||||
handleSave(debouncedContent);
|
||||
}
|
||||
}, [debouncedContent]);
|
||||
@ -47,13 +62,14 @@ export function NoteEditor({ onSave }: NoteEditorProps) {
|
||||
updateNotesContent(value);
|
||||
await saveNotes(value);
|
||||
setLastSaved(new Date());
|
||||
onSave?.();
|
||||
} catch (error) {
|
||||
console.error('Failed to save note:', error);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
},
|
||||
[notes, updateNotesContent, saveNotes]
|
||||
[notes, updateNotesContent, saveNotes, onSave]
|
||||
);
|
||||
|
||||
const formatLastSaved = () => {
|
||||
@ -65,34 +81,140 @@ export function NoteEditor({ onSave }: NoteEditorProps) {
|
||||
return lastSaved.toLocaleTimeString('zh-CN');
|
||||
};
|
||||
|
||||
const handleManualSave = () => {
|
||||
if (content && notes) {
|
||||
handleSave(content);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper p="md" withBorder radius="md" h="100%">
|
||||
<Stack gap="sm" h="100%">
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} size="sm">
|
||||
便签
|
||||
</Text>
|
||||
<Text size="xs" c={saving ? 'yellow' : lastSaved ? 'dimmed' : 'gray'}>
|
||||
{saving ? '保存中...' : formatLastSaved()}
|
||||
</Text>
|
||||
<Paper p="md" withBorder radius={4} h="100%" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Stack gap="sm" style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Header */}
|
||||
<Group justify="space-between" style={{ flexShrink: 0 }}>
|
||||
<Group gap="sm">
|
||||
<Text fw={400} size="sm" style={{ letterSpacing: '0.1em', color: '#1a1a1a' }}>
|
||||
便签
|
||||
</Text>
|
||||
</Group>
|
||||
<Group gap="sm">
|
||||
<Button
|
||||
size="xs"
|
||||
variant="outline"
|
||||
leftSection={<IconDeviceFloppy size={12} />}
|
||||
onClick={handleManualSave}
|
||||
loading={saving}
|
||||
style={{
|
||||
borderColor: '#ccc',
|
||||
color: '#1a1a1a',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
<Text size="xs" c={saving ? '#666' : lastSaved ? '#999' : '#bbb'}>
|
||||
{saving ? '保存中...' : formatLastSaved()}
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Textarea
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
placeholder="在这里记录你的想法..."
|
||||
autosize
|
||||
minRows={8}
|
||||
maxRows={20}
|
||||
styles={{
|
||||
input: {
|
||||
border: 'none',
|
||||
resize: 'none',
|
||||
fontFamily: 'inherit',
|
||||
'&:focus': { outline: 'none' },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{/* Editor/Preview Area */}
|
||||
<Box style={{ flex: 1, minHeight: 0, display: 'flex' }}>
|
||||
{viewMode === 'edit' && (
|
||||
<Textarea
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
placeholder="在这里记录你的想法... 支持 Markdown 语法： - # 一级标题 - **粗体** - *斜体* - [链接](url)"
|
||||
autosize
|
||||
minRows={8}
|
||||
styles={{
|
||||
input: {
|
||||
border: 'none',
|
||||
resize: 'none',
|
||||
fontFamily: 'Monaco, Menlo, Ubuntu Mono, monospace',
|
||||
fontSize: '13px',
|
||||
lineHeight: '1.6',
|
||||
background: 'transparent',
|
||||
'&:focus': { outline: 'none' },
|
||||
},
|
||||
}}
|
||||
style={{ flex: 1, width: '100%' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{viewMode === 'preview' && (
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
padding: '8px',
|
||||
fontSize: '13px',
|
||||
lineHeight: '1.6',
|
||||
}}
|
||||
>
|
||||
{content ? (
|
||||
<Box
|
||||
style={{
|
||||
'& h1, & h2, & h3': {
|
||||
marginTop: '1em',
|
||||
marginBottom: '0.5em',
|
||||
fontWeight: 500,
|
||||
},
|
||||
'& h1': { fontSize: '1.25em', borderBottom: '1px solid rgba(0,0,0,0.08)', paddingBottom: '0.3em' },
|
||||
'& h2': { fontSize: '1.1em', borderBottom: '1px solid rgba(0,0,0,0.06)', paddingBottom: '0.3em' },
|
||||
'& p': { marginBottom: '0.8em', color: '#333' },
|
||||
'& ul, & ol': { paddingLeft: '1.5em', marginBottom: '0.8em' },
|
||||
'& li': { marginBottom: '0.3em', color: '#333' },
|
||||
'& blockquote': {
|
||||
borderLeft: '3px solid rgba(0,0,0,0.1)',
|
||||
paddingLeft: '1em',
|
||||
marginLeft: 0,
|
||||
color: '#888',
|
||||
},
|
||||
'& code': {
|
||||
backgroundColor: 'rgba(0,0,0,0.04)',
|
||||
padding: '0.2em 0.4em',
|
||||
borderRadius: '2px',
|
||||
fontSize: '0.9em',
|
||||
},
|
||||
'& pre': {
|
||||
backgroundColor: 'rgba(0,0,0,0.03)',
|
||||
padding: '1em',
|
||||
borderRadius: '2px',
|
||||
overflow: 'auto',
|
||||
},
|
||||
'& pre code': {
|
||||
backgroundColor: 'transparent',
|
||||
padding: 0,
|
||||
},
|
||||
'& a': {
|
||||
color: '#1a1a1a',
|
||||
textDecoration: 'underline',
|
||||
textUnderlineOffset: 2,
|
||||
},
|
||||
'& hr': {
|
||||
border: 'none',
|
||||
borderTop: '1px solid rgba(0,0,0,0.06)',
|
||||
margin: '1em 0',
|
||||
},
|
||||
} as any}
|
||||
>
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSanitize]}>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
</Box>
|
||||
) : (
|
||||
<Text c="#999" ta="center" py="xl" size="sm" style={{ letterSpacing: '0.05em' }}>
|
||||
暂无内容
|
||||
<br />
|
||||
<Text size="xs" c="#bbb" mt={4}>
|
||||
使用 Markdown 格式记录你的想法
|
||||
</Text>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
|
||||
140
src/components/reminder/ArchiveReminderModal.tsx
Normal file
140
src/components/reminder/ArchiveReminderModal.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
import { useMemo } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
Stack,
|
||||
Text,
|
||||
Group,
|
||||
Button,
|
||||
Paper,
|
||||
ActionIcon,
|
||||
} from '@mantine/core';
|
||||
import { IconRotateClockwise, IconTrash } from '@tabler/icons-react';
|
||||
import type { Event } from '../../types';
|
||||
|
||||
interface ArchiveReminderModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
completedReminders: Event[];
|
||||
onRestore: (event: Event) => void;
|
||||
onDelete: (event: Event) => void;
|
||||
}
|
||||
|
||||
export function ArchiveReminderModal({
|
||||
opened,
|
||||
onClose,
|
||||
completedReminders,
|
||||
onRestore,
|
||||
onDelete,
|
||||
}: ArchiveReminderModalProps) {
|
||||
const sortedReminders = useMemo(() => {
|
||||
return [...completedReminders].sort(
|
||||
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||
);
|
||||
}, [completedReminders]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
title={
|
||||
<Text
|
||||
fw={400}
|
||||
style={{
|
||||
letterSpacing: '0.1em',
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
已归档提醒
|
||||
</Text>
|
||||
}
|
||||
size="md"
|
||||
styles={{
|
||||
header: {
|
||||
borderBottom: '1px solid rgba(0,0,0,0.06)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{completedReminders.length === 0 ? (
|
||||
<Paper p="xl" withBorder radius={4} ta="center">
|
||||
<Text c="#999" size="sm" style={{ letterSpacing: '0.05em' }}>
|
||||
暂无已归档的提醒
|
||||
</Text>
|
||||
<Text size="xs" c="#bbb" mt={4}>
|
||||
完成的提醒会自动归档到这里
|
||||
</Text>
|
||||
</Paper>
|
||||
) : (
|
||||
<Stack gap="sm">
|
||||
{sortedReminders.map((event) => (
|
||||
<Paper
|
||||
key={event.id}
|
||||
p="sm"
|
||||
radius={2}
|
||||
withBorder
|
||||
style={{
|
||||
background: 'rgba(0, 0, 0, 0.02)',
|
||||
borderColor: 'rgba(0, 0, 0, 0.06)',
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Stack gap={4} style={{ flex: 1 }}>
|
||||
<Text
|
||||
size="sm"
|
||||
fw={400}
|
||||
lineClamp={1}
|
||||
style={{
|
||||
textDecoration: 'line-through',
|
||||
color: '#999',
|
||||
letterSpacing: '0.03em',
|
||||
}}
|
||||
>
|
||||
{event.title}
|
||||
</Text>
|
||||
<Text size="xs" c="#bbb">
|
||||
{new Date(event.date).toLocaleString('zh-CN', {
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Group gap={4}>
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
onClick={() => onRestore(event)}
|
||||
style={{ color: '#666' }}
|
||||
>
|
||||
<IconRotateClockwise size={12} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
onClick={() => onDelete(event)}
|
||||
style={{ color: '#999' }}
|
||||
>
|
||||
<IconTrash size={12} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Group>
|
||||
</Paper>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
color: '#666',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
关闭
|
||||
</Button>
|
||||
</Group>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -1,29 +1,13 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import {
|
||||
Card,
|
||||
Text,
|
||||
Checkbox,
|
||||
Group,
|
||||
Stack,
|
||||
ThemeIcon,
|
||||
Tooltip,
|
||||
ActionIcon,
|
||||
Menu,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconBell,
|
||||
IconCheck,
|
||||
IconDots,
|
||||
IconTrash,
|
||||
IconEdit,
|
||||
IconClock,
|
||||
} from '@tabler/icons-react';
|
||||
import { Paper, Text, Checkbox, Group, Stack, ActionIcon } from '@mantine/core';
|
||||
import { IconCheck, IconDots } from '@tabler/icons-react';
|
||||
import type { Event } from '../../types';
|
||||
|
||||
interface ReminderCardProps {
|
||||
event: Event;
|
||||
onToggle: () => void;
|
||||
onClick: () => void;
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
export function ReminderCard({ event, onToggle, onClick }: ReminderCardProps) {
|
||||
@ -40,7 +24,7 @@ export function ReminderCard({ event, onToggle, onClick }: ReminderCardProps) {
|
||||
|
||||
// 格式化时间显示
|
||||
const timeStr = eventDate.toLocaleString('zh-CN', {
|
||||
month: 'short',
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
@ -51,31 +35,32 @@ export function ReminderCard({ event, onToggle, onClick }: ReminderCardProps) {
|
||||
|
||||
// 颜色主题
|
||||
const getThemeColor = () => {
|
||||
if (isCompleted) return 'gray';
|
||||
if (timeInfo.isPast) return 'red';
|
||||
if (timeInfo.isToday) return 'orange';
|
||||
return 'blue';
|
||||
if (isCompleted) return '#999';
|
||||
if (timeInfo.isPast) return '#c41c1c';
|
||||
if (timeInfo.isToday) return '#666';
|
||||
return '#888';
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
shadow="sm"
|
||||
padding="sm"
|
||||
radius="md"
|
||||
<Paper
|
||||
p="sm"
|
||||
radius={2}
|
||||
onClick={onClick}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
opacity: isCompleted ? 0.5 : 1,
|
||||
opacity: isCompleted ? 0.4 : 1,
|
||||
transition: 'all 0.2s ease',
|
||||
transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
|
||||
borderLeft: `3px solid var(--mantine-color-${getThemeColor()}-6)`,
|
||||
transform: isHovered ? 'translateY(-1px)' : 'translateY(0)',
|
||||
borderLeft: `2px solid ${getThemeColor()}`,
|
||||
background: 'rgba(0, 0, 0, 0.02)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.04)',
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm" style={{ flex: 1, minWidth: 0 }}>
|
||||
{/* Checkbox */}
|
||||
{/* Checkbox - 点击切换完成状态 */}
|
||||
<Checkbox
|
||||
checked={isCompleted}
|
||||
onChange={(e) => {
|
||||
@ -83,19 +68,20 @@ export function ReminderCard({ event, onToggle, onClick }: ReminderCardProps) {
|
||||
onToggle();
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
color="green"
|
||||
size="sm"
|
||||
size="xs"
|
||||
color="#1a1a1a"
|
||||
/>
|
||||
|
||||
<Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
|
||||
{/* Title */}
|
||||
<Text
|
||||
fw={500}
|
||||
size="sm"
|
||||
fw={400}
|
||||
size="xs"
|
||||
lineClamp={1}
|
||||
style={{
|
||||
textDecoration: isCompleted ? 'line-through' : 'none',
|
||||
color: isCompleted ? 'dimmed' : undefined,
|
||||
color: isCompleted ? '#bbb' : '#1a1a1a',
|
||||
letterSpacing: '0.03em',
|
||||
}}
|
||||
>
|
||||
{event.title}
|
||||
@ -103,9 +89,6 @@ export function ReminderCard({ event, onToggle, onClick }: ReminderCardProps) {
|
||||
|
||||
{/* Time and content */}
|
||||
<Group gap="xs">
|
||||
<ThemeIcon size="xs" variant="light" color={getThemeColor()}>
|
||||
<IconClock size={10} />
|
||||
</ThemeIcon>
|
||||
<Text size="xs" c={getThemeColor()}>
|
||||
{timeInfo.timeStr}
|
||||
</Text>
|
||||
@ -113,7 +96,7 @@ export function ReminderCard({ event, onToggle, onClick }: ReminderCardProps) {
|
||||
|
||||
{/* Content preview */}
|
||||
{event.content && !isCompleted && (
|
||||
<Text size="xs" c="dimmed" lineClamp={1}>
|
||||
<Text size="xs" c="#999" lineClamp={1}>
|
||||
{event.content}
|
||||
</Text>
|
||||
)}
|
||||
@ -123,51 +106,30 @@ export function ReminderCard({ event, onToggle, onClick }: ReminderCardProps) {
|
||||
{/* Quick actions */}
|
||||
<Group gap={4}>
|
||||
{isHovered && !isCompleted && (
|
||||
<Tooltip label="完成">
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggle();
|
||||
}}
|
||||
>
|
||||
<IconCheck size={14} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggle();
|
||||
}}
|
||||
style={{ color: '#666' }}
|
||||
>
|
||||
<IconCheck size={12} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
|
||||
<Menu shadow="md" width={120}>
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<IconDots size={14} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown onClick={(e) => e.stopPropagation()}>
|
||||
<Menu.Item
|
||||
leftSection={<IconEdit size={14} />}
|
||||
onClick={onClick}
|
||||
>
|
||||
编辑
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconTrash size={14} />}
|
||||
color="red"
|
||||
onClick={onToggle}
|
||||
>
|
||||
{isCompleted ? '恢复' : '删除'}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{ color: '#999' }}
|
||||
>
|
||||
<IconDots size={12} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,21 @@
|
||||
import { useMemo } from 'react';
|
||||
import { Stack, Text, Paper, Group, Button, Badge, ThemeIcon, Alert } from '@mantine/core';
|
||||
import { IconPlus, IconBell, IconAlertCircle } from '@tabler/icons-react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import {
|
||||
Stack,
|
||||
Text,
|
||||
Paper,
|
||||
Group,
|
||||
Button,
|
||||
Alert,
|
||||
ActionIcon,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconPlus,
|
||||
IconAlertCircle,
|
||||
IconArchive,
|
||||
} from '@tabler/icons-react';
|
||||
import { ReminderCard } from './ReminderCard';
|
||||
import { ArchiveReminderModal } from './ArchiveReminderModal';
|
||||
import type { Event } from '../../types';
|
||||
|
||||
interface ReminderListProps {
|
||||
@ -9,6 +23,8 @@ interface ReminderListProps {
|
||||
onEventClick: (event: Event) => void;
|
||||
onToggleComplete: (event: Event) => void;
|
||||
onAddClick: () => void;
|
||||
onDelete?: (event: Event) => void;
|
||||
onRestore?: (event: Event) => void;
|
||||
}
|
||||
|
||||
export function ReminderList({
|
||||
@ -16,7 +32,11 @@ export function ReminderList({
|
||||
onEventClick,
|
||||
onToggleComplete,
|
||||
onAddClick,
|
||||
onDelete,
|
||||
onRestore,
|
||||
}: ReminderListProps) {
|
||||
const [archiveOpened, setArchiveOpened] = useState(false);
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
@ -81,23 +101,25 @@ export function ReminderList({
|
||||
// 空状态
|
||||
if (!hasActiveReminders) {
|
||||
return (
|
||||
<Paper p="md" withBorder radius="md" h="100%">
|
||||
<Paper p="md" withBorder radius={4} h="100%">
|
||||
<Stack align="center" justify="center" h="100%">
|
||||
<ThemeIcon size={40} variant="light" color="gray" radius="xl">
|
||||
<IconBell size={20} />
|
||||
</ThemeIcon>
|
||||
<Text c="dimmed" size="sm" ta="center">
|
||||
<Text c="#999" size="sm" ta="center" style={{ letterSpacing: '0.05em' }}>
|
||||
暂无提醒
|
||||
<br />
|
||||
<Text size="xs" c="dimmed" mt={4}>
|
||||
记得添加提醒事项哦
|
||||
</Text>
|
||||
</Text>
|
||||
<Text size="xs" c="#bbb" ta="center" mt={4}>
|
||||
记得添加提醒事项哦
|
||||
</Text>
|
||||
<Button
|
||||
variant="light"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
leftSection={<IconPlus size={14} />}
|
||||
leftSection={<IconPlus size={12} />}
|
||||
onClick={onAddClick}
|
||||
style={{
|
||||
borderColor: '#ccc',
|
||||
color: '#1a1a1a',
|
||||
borderRadius: 2,
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
添加提醒
|
||||
</Button>
|
||||
@ -110,149 +132,169 @@ export function ReminderList({
|
||||
const missedCount = grouped.missed.length;
|
||||
|
||||
return (
|
||||
<Paper p="md" withBorder radius="md" h="100%" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Header */}
|
||||
<Group justify="space-between" mb="sm" style={{ flexShrink: 0 }}>
|
||||
<Group gap={8}>
|
||||
<ThemeIcon size="sm" variant="light" color="orange">
|
||||
<IconBell size={12} />
|
||||
</ThemeIcon>
|
||||
<Text fw={500} size="sm">
|
||||
提醒
|
||||
</Text>
|
||||
{missedCount > 0 && (
|
||||
<Badge size="xs" variant="filled" color="red">
|
||||
{missedCount}个逾期
|
||||
</Badge>
|
||||
)}
|
||||
<>
|
||||
<Paper p="md" withBorder radius={4} h="100%" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Header */}
|
||||
<Group justify="space-between" mb="sm" style={{ flexShrink: 0 }}>
|
||||
<Group gap={8}>
|
||||
<Text fw={500} size="sm" style={{ letterSpacing: '0.1em', color: '#1a1a1a' }}>
|
||||
提醒
|
||||
</Text>
|
||||
{missedCount > 0 && (
|
||||
<Text size="xs" c="#c41c1c" fw={500}>
|
||||
{missedCount}个逾期
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
<Group gap={4}>
|
||||
{grouped.completed.length > 0 && (
|
||||
<Tooltip label="查看已归档">
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
onClick={() => setArchiveOpened(true)}
|
||||
style={{ color: '#999' }}
|
||||
>
|
||||
<IconArchive size={12} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
leftSection={<IconPlus size={12} />}
|
||||
onClick={onAddClick}
|
||||
style={{
|
||||
color: '#666',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
leftSection={<IconPlus size={14} />}
|
||||
onClick={onAddClick}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Content */}
|
||||
<Stack gap="xs" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
|
||||
{/* 逾期提醒 */}
|
||||
{grouped.missed.length > 0 && (
|
||||
<Alert
|
||||
icon={<IconAlertCircle size={14} />}
|
||||
color="red"
|
||||
variant="light"
|
||||
p="xs"
|
||||
title={<Text size="xs" fw={500}>已错过 {grouped.missed.length}个</Text>}
|
||||
>
|
||||
<Stack gap={4}>
|
||||
{grouped.missed.slice(0, 3).map((event) => (
|
||||
{/* Content */}
|
||||
<Stack gap="xs" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
|
||||
{/* 逾期提醒 */}
|
||||
{grouped.missed.length > 0 && (
|
||||
<Alert
|
||||
icon={<IconAlertCircle size={14} />}
|
||||
color="dark"
|
||||
variant="light"
|
||||
p="xs"
|
||||
title={<Text size="xs" fw={500} c="#c41c1c">已错过 {grouped.missed.length}个</Text>}
|
||||
>
|
||||
<Stack gap={4}>
|
||||
{grouped.missed.slice(0, 3).map((event) => (
|
||||
<ReminderCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => onEventClick(event)}
|
||||
onToggle={() => onToggleComplete(event)}
|
||||
onDelete={onDelete ? () => onDelete(event) : undefined}
|
||||
/>
|
||||
))}
|
||||
{grouped.missed.length > 3 && (
|
||||
<Text size="xs" c="#999" ta="center">
|
||||
还有 {grouped.missed.length - 3} 个逾期提醒...
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 今天 */}
|
||||
{grouped.today.length > 0 && (
|
||||
<>
|
||||
<Group gap={4}>
|
||||
<Text size="xs" c="#c41c1c" fw={400} style={{ letterSpacing: '0.05em' }}>
|
||||
今天
|
||||
</Text>
|
||||
</Group>
|
||||
{grouped.today.map((event) => (
|
||||
<ReminderCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => onEventClick(event)}
|
||||
onToggle={() => onToggleComplete(event)}
|
||||
onDelete={onDelete ? () => onDelete(event) : undefined}
|
||||
/>
|
||||
))}
|
||||
{grouped.missed.length > 3 && (
|
||||
<Text size="xs" c="dimmed" ta="center">
|
||||
还有 {grouped.missed.length - 3} 个逾期提醒...
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 明天 */}
|
||||
{grouped.tomorrow.length > 0 && (
|
||||
<>
|
||||
<Group gap={4}>
|
||||
<Text size="xs" c="#666" fw={400} style={{ letterSpacing: '0.05em' }}>
|
||||
明天
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Alert>
|
||||
)}
|
||||
</Group>
|
||||
{grouped.tomorrow.map((event) => (
|
||||
<ReminderCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => onEventClick(event)}
|
||||
onToggle={() => onToggleComplete(event)}
|
||||
onDelete={onDelete ? () => onDelete(event) : undefined}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 今天 */}
|
||||
{grouped.today.length > 0 && (
|
||||
<>
|
||||
<Group gap={4}>
|
||||
<Text size="xs" c="red" fw={600}>
|
||||
今天
|
||||
</Text>
|
||||
<Badge size="xs" variant="light" color="red">
|
||||
{grouped.today.length}
|
||||
</Badge>
|
||||
</Group>
|
||||
{grouped.today.map((event) => (
|
||||
<ReminderCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => onEventClick(event)}
|
||||
onToggle={() => onToggleComplete(event)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{/* 本周 */}
|
||||
{grouped.thisWeek.length > 0 && (
|
||||
<>
|
||||
<Group gap={4}>
|
||||
<Text size="xs" c="#888" fw={400} style={{ letterSpacing: '0.05em' }}>
|
||||
本周
|
||||
</Text>
|
||||
</Group>
|
||||
{grouped.thisWeek.map((event) => (
|
||||
<ReminderCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => onEventClick(event)}
|
||||
onToggle={() => onToggleComplete(event)}
|
||||
onDelete={onDelete ? () => onDelete(event) : undefined}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 明天 */}
|
||||
{grouped.tomorrow.length > 0 && (
|
||||
<>
|
||||
<Group gap={4}>
|
||||
<Text size="xs" c="teal" fw={600}>
|
||||
明天
|
||||
</Text>
|
||||
<Badge size="xs" variant="light" color="teal">
|
||||
{grouped.tomorrow.length}
|
||||
</Badge>
|
||||
</Group>
|
||||
{grouped.tomorrow.map((event) => (
|
||||
<ReminderCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => onEventClick(event)}
|
||||
onToggle={() => onToggleComplete(event)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{/* 更久 */}
|
||||
{grouped.later.length > 0 && (
|
||||
<>
|
||||
<Group gap={4}>
|
||||
<Text size="xs" c="#999" fw={400} style={{ letterSpacing: '0.05em' }}>
|
||||
以后
|
||||
</Text>
|
||||
</Group>
|
||||
{grouped.later.map((event) => (
|
||||
<ReminderCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => onEventClick(event)}
|
||||
onToggle={() => onToggleComplete(event)}
|
||||
onDelete={onDelete ? () => onDelete(event) : undefined}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* 本周 */}
|
||||
{grouped.thisWeek.length > 0 && (
|
||||
<>
|
||||
<Group gap={4}>
|
||||
<Text size="xs" c="blue" fw={600}>
|
||||
本周
|
||||
</Text>
|
||||
<Badge size="xs" variant="light" color="blue">
|
||||
{grouped.thisWeek.length}
|
||||
</Badge>
|
||||
</Group>
|
||||
{grouped.thisWeek.map((event) => (
|
||||
<ReminderCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => onEventClick(event)}
|
||||
onToggle={() => onToggleComplete(event)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 更久 */}
|
||||
{grouped.later.length > 0 && (
|
||||
<>
|
||||
<Group gap={4}>
|
||||
<Text size="xs" c="gray" fw={600}>
|
||||
以后
|
||||
</Text>
|
||||
<Badge size="xs" variant="light" color="gray">
|
||||
{grouped.later.length}
|
||||
</Badge>
|
||||
</Group>
|
||||
{grouped.later.map((event) => (
|
||||
<ReminderCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => onEventClick(event)}
|
||||
onToggle={() => onToggleComplete(event)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
{/* Archive Modal */}
|
||||
<ArchiveReminderModal
|
||||
opened={archiveOpened}
|
||||
onClose={() => setArchiveOpened(false)}
|
||||
completedReminders={grouped.completed}
|
||||
onRestore={onRestore || (() => {})}
|
||||
onDelete={onDelete || (() => {})}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,12 +3,13 @@
|
||||
* 基于2024年节假日安排
|
||||
* 每个节日包含：名称、日期（公历/农历）、是否放假日
|
||||
*/
|
||||
import { Lunar } from 'lunar-javascript';
|
||||
|
||||
export interface Holiday {
|
||||
id: string;
|
||||
name: string;
|
||||
month: number; // 公历月份
|
||||
day: number; // 公历日期
|
||||
month?: number; // 公历月份（非农历时使用）
|
||||
day?: number; // 公历日期（非农历时使用）
|
||||
isLunar: boolean; // 是否为农历日期
|
||||
lunarMonth?: number; // 农历月份（农历日期时使用）
|
||||
lunarDay?: number; // 农历日期（农历日期时使用）
|
||||
@ -168,9 +169,10 @@ export function isHoliday(
|
||||
// 农历日期需要转换
|
||||
try {
|
||||
const lunar = Lunar.fromYmd(year, month, day);
|
||||
const solar = lunar.getSolar();
|
||||
if (
|
||||
lunar.getMonth() === holiday.lunarMonth &&
|
||||
lunar.getDay() === holiday.lunarDay
|
||||
solar.getMonth() === holiday.lunarMonth &&
|
||||
solar.getDay() === holiday.lunarDay
|
||||
) {
|
||||
return holiday;
|
||||
}
|
||||
|
||||
@ -13,14 +13,14 @@ import {
|
||||
Select,
|
||||
Stack,
|
||||
} from '@mantine/core';
|
||||
import { DateInput, TimeInput } from '@mantine/dates';
|
||||
import { IconLogout, IconPlus } from '@tabler/icons-react';
|
||||
import { DatePickerInput, TimeInput } from '@mantine/dates';
|
||||
import { IconLogout } from '@tabler/icons-react';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { useAppStore } from '../stores';
|
||||
import { AnniversaryList } from '../components/anniversary/AnniversaryList';
|
||||
import { ReminderList } from '../components/reminder/ReminderList';
|
||||
import { NoteEditor } from '../components/note/NoteEditor';
|
||||
import { AIChatBox } from '../components/ai/AIChatBox';
|
||||
import { FloatingAIChat } from '../components/ai/FloatingAIChat';
|
||||
import type { Event, EventType, RepeatType } from '../types';
|
||||
|
||||
export function HomePage() {
|
||||
@ -115,7 +115,7 @@ export function HomePage() {
|
||||
fetchEvents();
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
const handleDeleteFromModal = async () => {
|
||||
if (!selectedEvent) return;
|
||||
await deleteEventById(selectedEvent.id);
|
||||
close();
|
||||
@ -130,6 +130,20 @@ export function HomePage() {
|
||||
fetchEvents();
|
||||
};
|
||||
|
||||
const handleDelete = async (event: Event) => {
|
||||
if (event.type !== 'reminder') return;
|
||||
await deleteEventById(event.id);
|
||||
fetchEvents();
|
||||
};
|
||||
|
||||
const handleRestore = async (event: Event) => {
|
||||
if (event.type !== 'reminder') return;
|
||||
await updateEventById(event.id, {
|
||||
is_completed: false,
|
||||
});
|
||||
fetchEvents();
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setFormType('anniversary');
|
||||
setFormTitle('');
|
||||
@ -148,180 +162,302 @@ export function HomePage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Container size="xl" py="md" h="100vh" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Header */}
|
||||
<Group justify="space-between" mb="md" style={{ flexShrink: 0 }}>
|
||||
<Title order={2} c="blue">
|
||||
掐日子
|
||||
</Title>
|
||||
<Group>
|
||||
<Text size="sm" c="dimmed">
|
||||
{user?.nickname || user?.email}
|
||||
</Text>
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="xs"
|
||||
leftSection={<IconLogout size={14} />}
|
||||
onClick={handleLogout}
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
background: '#faf9f7',
|
||||
}}
|
||||
>
|
||||
<Container size="xl" py="md" h="100vh" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Header */}
|
||||
<Group justify="space-between" mb="md" style={{ flexShrink: 0 }}>
|
||||
<Title
|
||||
order={2}
|
||||
style={{
|
||||
fontWeight: 300,
|
||||
fontSize: '1.25rem',
|
||||
letterSpacing: '0.15em',
|
||||
color: '#1a1a1a',
|
||||
}}
|
||||
>
|
||||
退出
|
||||
</Button>
|
||||
掐日子
|
||||
</Title>
|
||||
<Group>
|
||||
<Text
|
||||
size="xs"
|
||||
c="#888"
|
||||
style={{ letterSpacing: '0.05em' }}
|
||||
>
|
||||
{user?.nickname || user?.email}
|
||||
</Text>
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="xs"
|
||||
leftSection={<IconLogout size={12} />}
|
||||
onClick={handleLogout}
|
||||
style={{
|
||||
letterSpacing: '0.1em',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
退出
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
{/* Main Content - 4 panel layout */}
|
||||
<Grid grow style={{ flex: 1, minHeight: 0 }}>
|
||||
{/* Left column - 40% */}
|
||||
<Grid.Col span={4}>
|
||||
<Stack gap="md" h="100%">
|
||||
{/* Anniversary list */}
|
||||
<div style={{ flex: 1, minHeight: 0 }}>
|
||||
{/* Main Content - 3 column horizontal layout */}
|
||||
<Grid grow style={{ flex: 1, minHeight: 0 }} gutter="md">
|
||||
{/* Left column - Anniversary */}
|
||||
<Grid.Col span={4}>
|
||||
<div style={{ height: '100%', minHeight: 0 }}>
|
||||
<AnniversaryList
|
||||
events={events}
|
||||
onEventClick={handleEventClick}
|
||||
onAddClick={() => handleAddClick('anniversary')}
|
||||
/>
|
||||
</div>
|
||||
</Grid.Col>
|
||||
|
||||
{/* Reminder list */}
|
||||
<div style={{ flex: 1, minHeight: 0 }}>
|
||||
{/* Middle column - Reminder */}
|
||||
<Grid.Col span={4}>
|
||||
<div style={{ height: '100%', minHeight: 0 }}>
|
||||
<ReminderList
|
||||
events={events}
|
||||
onEventClick={handleEventClick}
|
||||
onToggleComplete={handleToggleComplete}
|
||||
onAddClick={() => handleAddClick('reminder')}
|
||||
onDelete={handleDelete}
|
||||
onRestore={handleRestore}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid.Col>
|
||||
|
||||
{/* Right column - 60% */}
|
||||
<Grid.Col span={8}>
|
||||
<Stack gap="md" h="100%">
|
||||
{/* Note editor */}
|
||||
<div style={{ flex: 1, minHeight: 0 }}>
|
||||
{/* Right column - Note */}
|
||||
<Grid.Col span={4}>
|
||||
<div style={{ height: '100%', minHeight: 0 }}>
|
||||
<NoteEditor />
|
||||
</div>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* AI Chat */}
|
||||
<div style={{ flex: 1, minHeight: 0 }}>
|
||||
<AIChatBox onEventCreated={handleAIEventCreated} />
|
||||
</div>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
{/* AI Chat - Floating */}
|
||||
<FloatingAIChat onEventCreated={handleAIEventCreated} />
|
||||
|
||||
{/* Add/Edit Event Modal */}
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={
|
||||
<Group gap={8}>
|
||||
<IconPlus size={18} />
|
||||
<Text fw={500}>{isEdit ? '编辑事件' : '添加事件'}</Text>
|
||||
</Group>
|
||||
}
|
||||
size="md"
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Event type */}
|
||||
<Select
|
||||
label="类型"
|
||||
data={[
|
||||
{ value: 'anniversary', label: '纪念日' },
|
||||
{ value: 'reminder', label: '提醒' },
|
||||
]}
|
||||
value={formType}
|
||||
onChange={(value) => value && setFormType(value as EventType)}
|
||||
disabled={isEdit}
|
||||
/>
|
||||
|
||||
{/* Title */}
|
||||
<TextInput
|
||||
label="标题"
|
||||
placeholder="输入标题"
|
||||
value={formTitle}
|
||||
onChange={(e) => setFormTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Content (only for reminders) */}
|
||||
{formType === 'reminder' && (
|
||||
<Textarea
|
||||
label="内容"
|
||||
placeholder="输入详细内容"
|
||||
value={formContent}
|
||||
onChange={(e) => setFormContent(e.target.value)}
|
||||
rows={3}
|
||||
{/* Add/Edit Event Modal */}
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={
|
||||
<Text
|
||||
fw={400}
|
||||
style={{
|
||||
letterSpacing: '0.1em',
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
{isEdit ? '编辑事件' : '添加事件'}
|
||||
</Text>
|
||||
}
|
||||
size="md"
|
||||
styles={{
|
||||
header: {
|
||||
borderBottom: '1px solid rgba(0,0,0,0.06)',
|
||||
},
|
||||
body: {
|
||||
paddingTop: 20,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Event type */}
|
||||
<Select
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 4 }}>
|
||||
类型
|
||||
</Text>
|
||||
}
|
||||
data={[
|
||||
{ value: 'anniversary', label: '纪念日' },
|
||||
{ value: 'reminder', label: '提醒' },
|
||||
]}
|
||||
value={formType}
|
||||
onChange={(value) => value && setFormType(value as EventType)}
|
||||
disabled={isEdit}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Date */}
|
||||
<DateInput
|
||||
label="日期"
|
||||
placeholder="选择日期"
|
||||
value={formDate}
|
||||
onChange={setFormDate}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Time (only for reminders) */}
|
||||
{formType === 'reminder' && (
|
||||
<TimeInput
|
||||
label="时间"
|
||||
placeholder="选择时间"
|
||||
value={formTime}
|
||||
onChange={(e) => setFormTime(e.target.value)}
|
||||
{/* Title */}
|
||||
<TextInput
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 4 }}>
|
||||
标题
|
||||
</Text>
|
||||
}
|
||||
placeholder="输入标题"
|
||||
value={formTitle}
|
||||
onChange={(e) => setFormTitle(e.target.value)}
|
||||
required
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Lunar switch */}
|
||||
<Switch
|
||||
label="农历日期"
|
||||
checked={formIsLunar}
|
||||
onChange={(e) => setFormIsLunar(e.currentTarget.checked)}
|
||||
/>
|
||||
|
||||
{/* Repeat type */}
|
||||
<Select
|
||||
label="重复"
|
||||
data={[
|
||||
{ value: 'none', label: '不重复' },
|
||||
{ value: 'yearly', label: '每年' },
|
||||
{ value: 'monthly', label: '每月' },
|
||||
]}
|
||||
value={formRepeatType}
|
||||
onChange={(value) => value && setFormRepeatType(value as RepeatType)}
|
||||
/>
|
||||
|
||||
{/* Holiday switch (only for anniversaries) */}
|
||||
{formType === 'anniversary' && (
|
||||
<Switch
|
||||
label="节假日"
|
||||
checked={formIsHoliday}
|
||||
onChange={(e) => setFormIsHoliday(e.currentTarget.checked)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<Group justify="space-between" mt="md">
|
||||
{isEdit && (
|
||||
<Button color="red" variant="light" onClick={handleDelete}>
|
||||
删除
|
||||
</Button>
|
||||
{/* Content (only for reminders) */}
|
||||
{formType === 'reminder' && (
|
||||
<Textarea
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 4 }}>
|
||||
内容
|
||||
</Text>
|
||||
}
|
||||
placeholder="输入详细内容"
|
||||
value={formContent}
|
||||
onChange={(e) => setFormContent(e.target.value)}
|
||||
rows={3}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Group ml="auto">
|
||||
<Button variant="subtle" onClick={close}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={!formTitle.trim() || !formDate}>
|
||||
{isEdit ? '保存' : '添加'}
|
||||
</Button>
|
||||
|
||||
{/* Date */}
|
||||
<DatePickerInput
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 4 }}>
|
||||
日期
|
||||
</Text>
|
||||
}
|
||||
placeholder="选择日期"
|
||||
value={formDate}
|
||||
onChange={(value) => setFormDate(value as Date | null)}
|
||||
required
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Time (only for reminders) */}
|
||||
{formType === 'reminder' && (
|
||||
<TimeInput
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 4 }}>
|
||||
时间
|
||||
</Text>
|
||||
}
|
||||
placeholder="选择时间"
|
||||
value={formTime}
|
||||
onChange={(e) => setFormTime(e.target.value)}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Lunar switch */}
|
||||
<Switch
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.05em' }}>
|
||||
农历日期
|
||||
</Text>
|
||||
}
|
||||
checked={formIsLunar}
|
||||
onChange={(e) => setFormIsLunar(e.currentTarget.checked)}
|
||||
/>
|
||||
|
||||
{/* Repeat type */}
|
||||
<Select
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 4 }}>
|
||||
重复
|
||||
</Text>
|
||||
}
|
||||
data={[
|
||||
{ value: 'none', label: '不重复' },
|
||||
{ value: 'yearly', label: '每年' },
|
||||
{ value: 'monthly', label: '每月' },
|
||||
]}
|
||||
value={formRepeatType}
|
||||
onChange={(value) => value && setFormRepeatType(value as RepeatType)}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Holiday switch (only for anniversaries) */}
|
||||
{formType === 'anniversary' && (
|
||||
<Switch
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.05em' }}>
|
||||
节假日
|
||||
</Text>
|
||||
}
|
||||
checked={formIsHoliday}
|
||||
onChange={(e) => setFormIsHoliday(e.currentTarget.checked)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<Group justify="space-between" mt="md">
|
||||
{isEdit && (
|
||||
<Button
|
||||
color="dark"
|
||||
variant="light"
|
||||
onClick={handleDeleteFromModal}
|
||||
style={{
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
)}
|
||||
<Group ml="auto">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={close}
|
||||
style={{
|
||||
borderRadius: 2,
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={!formTitle.trim() || !formDate}
|
||||
style={{
|
||||
background: '#1a1a1a',
|
||||
border: '1px solid #1a1a1a',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
{isEdit ? '保存' : '添加'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Container>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,25 +1,418 @@
|
||||
import { Button, Container, Title, Text, Paper } from '@mantine/core';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { Button, Container, Title, Text, Group, Stack } from '@mantine/core';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import iconUrl from '../assets/icon.png';
|
||||
|
||||
// 禅意算法背景 - 手印静寂（循环墨晕效果）
|
||||
function ZenBackground() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const animationRef = useRef<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
const resize = () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
};
|
||||
resize();
|
||||
window.addEventListener('resize', resize);
|
||||
|
||||
// 简化的伪随机
|
||||
const random = (min = 0, max = 1) => {
|
||||
return min + Math.random() * (max - min);
|
||||
};
|
||||
|
||||
// 简化的噪声函数
|
||||
const noise = (x: number, y: number, t: number) => {
|
||||
return (Math.sin(x * 0.01 + t) * Math.cos(y * 0.01 + t * 0.7) + 1) * 0.5;
|
||||
};
|
||||
|
||||
interface InkStroke {
|
||||
points: { x: number; y: number; weight: number }[];
|
||||
x: number;
|
||||
y: number;
|
||||
angle: number;
|
||||
speed: number;
|
||||
inkAlpha: number;
|
||||
baseWeight: number;
|
||||
maxLength: number;
|
||||
currentLength: number;
|
||||
complete: boolean;
|
||||
}
|
||||
|
||||
let strokes: InkStroke[] = [];
|
||||
let time = 0;
|
||||
let lastStrokeTime = 0;
|
||||
const strokeInterval = 30; // 每隔一段时间生成新笔触
|
||||
|
||||
// 生成随机笔触
|
||||
const createStroke = (): InkStroke | null => {
|
||||
const angle = random(0, Math.PI * 2);
|
||||
const radius = random(canvas.width * 0.1, canvas.width * 0.4);
|
||||
const x = canvas.width / 2 + Math.cos(angle) * radius;
|
||||
const y = canvas.height / 2 + Math.sin(angle) * radius;
|
||||
|
||||
return {
|
||||
points: [{ x, y, weight: random(0.3, 1.5) }],
|
||||
x,
|
||||
y,
|
||||
angle: random(0, Math.PI * 2),
|
||||
speed: random(0.4, 1.0),
|
||||
inkAlpha: random(10, 30),
|
||||
baseWeight: random(0.3, 1.5),
|
||||
maxLength: random(30, 90), // 缩短笔触长度，加快消失
|
||||
currentLength: 0,
|
||||
complete: false,
|
||||
};
|
||||
};
|
||||
|
||||
// 初始化一些笔触
|
||||
const initStrokes = () => {
|
||||
strokes = [];
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const stroke = createStroke();
|
||||
if (stroke) {
|
||||
// 随机偏移起始位置
|
||||
stroke.currentLength = random(0, stroke.maxLength * 0.5);
|
||||
strokes.push(stroke);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
initStrokes();
|
||||
|
||||
// 清空画布
|
||||
ctx.fillStyle = '#faf9f7';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const animate = () => {
|
||||
time += 0.008;
|
||||
|
||||
// 快速淡出背景 - 让水墨痕迹更快消失
|
||||
if (Math.floor(time * 125) % 3 === 0) {
|
||||
ctx.fillStyle = 'rgba(250, 249, 247, 0.12)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
// 定期生成新笔触
|
||||
if (time - lastStrokeTime > strokeInterval * 0.01) {
|
||||
lastStrokeTime = time;
|
||||
// 移除已完成太久的笔触
|
||||
strokes = strokes.filter(s => !s.complete || s.currentLength < s.maxLength);
|
||||
// 添加新笔触（随机数量）
|
||||
const newCount = Math.floor(random(0, 2));
|
||||
for (let i = 0; i < newCount; i++) {
|
||||
const stroke = createStroke();
|
||||
if (stroke) strokes.push(stroke!);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新和绘制笔触
|
||||
for (const stroke of strokes) {
|
||||
if (stroke.complete) continue;
|
||||
|
||||
// 噪声驱动
|
||||
const n = noise(stroke.x, stroke.y, time);
|
||||
stroke.angle += (n - 0.5) * 0.12;
|
||||
|
||||
// 呼吸感 - 更柔和
|
||||
const breath = Math.sin(time * 1.5 + stroke.x * 0.01) * 0.25;
|
||||
const currentSpeed = stroke.speed * (1 + breath * 0.2);
|
||||
|
||||
stroke.x += Math.cos(stroke.angle) * currentSpeed;
|
||||
stroke.y += Math.sin(stroke.angle) * currentSpeed;
|
||||
|
||||
// 笔触粗细 - 模拟提按
|
||||
const progress = stroke.currentLength / stroke.maxLength;
|
||||
const weightVar = Math.sin(progress * Math.PI) * 1.0;
|
||||
const weight = Math.max(0.2, stroke.baseWeight + weightVar);
|
||||
|
||||
stroke.points.push({ x: stroke.x, y: stroke.y, weight });
|
||||
stroke.currentLength++;
|
||||
|
||||
if (
|
||||
stroke.currentLength >= stroke.maxLength ||
|
||||
stroke.x < -50 || stroke.x > canvas.width + 50 ||
|
||||
stroke.y < -50 || stroke.y > canvas.height + 50
|
||||
) {
|
||||
stroke.complete = true;
|
||||
}
|
||||
|
||||
// 绘制 - 水墨晕染效果
|
||||
if (stroke.points.length > 1) {
|
||||
for (let i = 1; i < stroke.points.length; i++) {
|
||||
const p1 = stroke.points[i - 1];
|
||||
const p2 = stroke.points[i];
|
||||
// 渐变透明度
|
||||
const alpha = stroke.inkAlpha * (1 - i / stroke.points.length * 0.4) / 100;
|
||||
const size = p2.weight * random(0.8, 1.2);
|
||||
|
||||
// 绘制柔和的笔触
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(p1.x, p1.y);
|
||||
ctx.lineTo(p2.x, p2.y);
|
||||
ctx.strokeStyle = `rgba(25, 25, 25, ${alpha})`;
|
||||
ctx.lineWidth = size;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.stroke();
|
||||
|
||||
// 添加淡淡的墨点晕染
|
||||
if (random(0, 1) < 0.3) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(p2.x, p2.y, size * random(0.5, 1.5), 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(25, 25, 25, ${alpha * 0.3})`;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制圆相（Ensō）- 缓慢呼吸
|
||||
const centerX = canvas.width / 2;
|
||||
const centerY = canvas.height / 2;
|
||||
const breathScale = 1 + Math.sin(time * 0.3) * 0.015;
|
||||
const radius = Math.min(canvas.width, canvas.height) * 0.18 * breathScale;
|
||||
const gap = Math.PI * 0.18; // 开口
|
||||
const startAngle = -Math.PI / 2 + time * 0.05;
|
||||
|
||||
ctx.beginPath();
|
||||
for (let a = startAngle; a < startAngle + Math.PI * 2 - gap; a += 0.04) {
|
||||
const noiseOffset = noise(Math.cos(a) * 2, Math.sin(a) * 2, time * 0.2) * 5 - 2.5;
|
||||
const r = radius + noiseOffset;
|
||||
const x = centerX + Math.cos(a) * r;
|
||||
const y = centerY + Math.sin(a) * r;
|
||||
if (a === startAngle) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
ctx.strokeStyle = 'rgba(25, 25, 25, 0.06)';
|
||||
ctx.lineWidth = 0.8;
|
||||
ctx.stroke();
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', resize);
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function LandingPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Container size="sm" style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<Paper p="xl" style={{ textAlign: 'center' }}>
|
||||
<Title order={1} mb="md" c="blue">
|
||||
掐日子
|
||||
</Title>
|
||||
<Text size="lg" c="dimmed" mb="xl">
|
||||
AI 纪念日 · 提醒
|
||||
</Text>
|
||||
<Text size="sm" c="gray.6" mb="xl">
|
||||
轻便、灵活的倒数日和提醒App，专注提醒功能
|
||||
</Text>
|
||||
<Button size="lg" variant="filled" onClick={() => navigate('/login')}>
|
||||
开始使用
|
||||
</Button>
|
||||
</Paper>
|
||||
</Container>
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
background: '#faf9f7',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<ZenBackground />
|
||||
|
||||
{/* 装饰性圆相 */}
|
||||
<svg
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: '8%',
|
||||
right: '12%',
|
||||
width: 200,
|
||||
height: 200,
|
||||
opacity: 0.05,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="#1a1a1a"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="250 30"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '12%',
|
||||
left: '10%',
|
||||
width: 160,
|
||||
height: 160,
|
||||
opacity: 0.04,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
fill="none"
|
||||
stroke="#1a1a1a"
|
||||
strokeWidth="0.8"
|
||||
strokeDasharray="200 50"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<Container
|
||||
size="sm"
|
||||
style={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
padding: '2rem',
|
||||
}}
|
||||
>
|
||||
<Stack align="center" gap="lg">
|
||||
{/* 产品图标 */}
|
||||
<div
|
||||
style={{
|
||||
width: 90,
|
||||
height: 90,
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(26, 26, 26, 0.03)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt="掐日子"
|
||||
style={{
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Title
|
||||
order={1}
|
||||
style={{
|
||||
fontWeight: 300,
|
||||
fontSize: 'clamp(2.2rem, 7vw, 3.2rem)',
|
||||
letterSpacing: '0.25em',
|
||||
color: '#1a1a1a',
|
||||
fontFamily: 'Noto Serif SC, serif',
|
||||
}}
|
||||
>
|
||||
掐日子
|
||||
</Title>
|
||||
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
letterSpacing: '0.35em',
|
||||
color: '#888',
|
||||
fontWeight: 300,
|
||||
}}
|
||||
>
|
||||
AI 纪念日 · 提醒
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
size="xs"
|
||||
style={{
|
||||
color: '#999',
|
||||
maxWidth: 300,
|
||||
lineHeight: 1.9,
|
||||
fontWeight: 300,
|
||||
}}
|
||||
>
|
||||
轻便、灵活的倒数日和提醒应用
|
||||
<br />
|
||||
让每一个重要的日子都被铭记
|
||||
</Text>
|
||||
|
||||
<Group gap="md" mt="lg">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => navigate('/login')}
|
||||
style={{
|
||||
background: '#1a1a1a',
|
||||
border: '1px solid #1a1a1a',
|
||||
padding: '0 2rem',
|
||||
fontWeight: 400,
|
||||
letterSpacing: '0.15em',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
登录
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => navigate('/register')}
|
||||
style={{
|
||||
borderColor: '#ccc',
|
||||
color: '#1a1a1a',
|
||||
padding: '0 2rem',
|
||||
fontWeight: 400,
|
||||
letterSpacing: '0.15em',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
注册
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Group gap={40} mt={50} style={{ opacity: 0.7 }}>
|
||||
<Stack gap={3} align="center">
|
||||
<Text size="xs" fw={300} c="#444">◯</Text>
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.1em' }}>纪念日</Text>
|
||||
</Stack>
|
||||
<Stack gap={3} align="center">
|
||||
<Text size="xs" fw={300} c="#444">◎</Text>
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.1em' }}>提醒</Text>
|
||||
</Stack>
|
||||
<Stack gap={3} align="center">
|
||||
<Text size="xs" fw={300} c="#444">◇</Text>
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.1em' }}>AI</Text>
|
||||
</Stack>
|
||||
<Stack gap={3} align="center">
|
||||
<Text size="xs" fw={300} c="#444">▫</Text>
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.1em' }}>便签</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -26,43 +26,122 @@ export function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Container size="sm" style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<Paper p="xl" shadow="md" radius="lg">
|
||||
<Title order={2} ta="center" mb="xl">
|
||||
登录
|
||||
</Title>
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
background: '#faf9f7',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Container size="sm" style={{ width: '100%', maxWidth: 360 }}>
|
||||
<Paper
|
||||
p={40}
|
||||
radius={4}
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<Title
|
||||
order={2}
|
||||
ta="center"
|
||||
mb={32}
|
||||
style={{
|
||||
fontWeight: 300,
|
||||
fontSize: '1.5rem',
|
||||
letterSpacing: '0.2em',
|
||||
color: '#1a1a1a',
|
||||
}}
|
||||
>
|
||||
登录
|
||||
</Title>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="邮箱"
|
||||
placeholder="your@email.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label="密码"
|
||||
type="password"
|
||||
placeholder="Your password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
{error && <Text c="red" size="sm">{error}</Text>}
|
||||
<Button type="submit" loading={loading} fullWidth>
|
||||
登录
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.1em', marginBottom: 4 }}>
|
||||
邮箱
|
||||
</Text>
|
||||
}
|
||||
placeholder="your@email.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
borderColor: '#e0e0e0',
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.1em', marginBottom: 4 }}>
|
||||
密码
|
||||
</Text>
|
||||
}
|
||||
type="password"
|
||||
placeholder="Your password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
borderColor: '#e0e0e0',
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{error && (
|
||||
<Text c="#c41c1c" size="xs" style={{ letterSpacing: '0.05em' }}>
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
loading={loading}
|
||||
fullWidth
|
||||
mt="sm"
|
||||
style={{
|
||||
background: '#1a1a1a',
|
||||
border: '1px solid #1a1a1a',
|
||||
borderRadius: 2,
|
||||
fontWeight: 400,
|
||||
letterSpacing: '0.15em',
|
||||
}}
|
||||
>
|
||||
登录
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
|
||||
<Text ta="center" mt="md" size="sm" c="dimmed">
|
||||
还没有账号？{' '}
|
||||
<Anchor component="button" onClick={() => navigate('/register')}>
|
||||
立即注册
|
||||
</Anchor>
|
||||
</Text>
|
||||
</Paper>
|
||||
</Container>
|
||||
<Text
|
||||
ta="center"
|
||||
mt="lg"
|
||||
size="xs"
|
||||
c="#888"
|
||||
style={{ letterSpacing: '0.05em' }}
|
||||
>
|
||||
还没有账号？{' '}
|
||||
<Anchor
|
||||
component="button"
|
||||
onClick={() => navigate('/register')}
|
||||
style={{
|
||||
color: '#1a1a1a',
|
||||
textDecoration: 'underline',
|
||||
textUnderlineOffset: 3,
|
||||
}}
|
||||
>
|
||||
立即注册
|
||||
</Anchor>
|
||||
</Text>
|
||||
</Paper>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -37,71 +37,175 @@ export function RegisterPage() {
|
||||
if (error) {
|
||||
setError(error);
|
||||
} else {
|
||||
// 注册成功后直接跳转到首页（已登录状态）
|
||||
navigate('/');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container size="sm" style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<Paper p="xl" shadow="md" radius="lg">
|
||||
<Title order={2} ta="center" mb="xl">
|
||||
注册
|
||||
</Title>
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
background: '#faf9f7',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Container size="sm" style={{ width: '100%', maxWidth: 360 }}>
|
||||
<Paper
|
||||
p={40}
|
||||
radius={4}
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<Title
|
||||
order={2}
|
||||
ta="center"
|
||||
mb={32}
|
||||
style={{
|
||||
fontWeight: 300,
|
||||
fontSize: '1.5rem',
|
||||
letterSpacing: '0.2em',
|
||||
color: '#1a1a1a',
|
||||
}}
|
||||
>
|
||||
注册
|
||||
</Title>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="昵称"
|
||||
placeholder="Your nickname"
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
/>
|
||||
<TextInput
|
||||
label="邮箱"
|
||||
placeholder="your@email.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="密码"
|
||||
type="password"
|
||||
placeholder="Create password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
{/* 密码要求提示 */}
|
||||
<Stack gap={4} mt={6}>
|
||||
{passwordRequirements.map((req, index) => (
|
||||
<Text
|
||||
key={index}
|
||||
size="xs"
|
||||
c={req.met ? 'green' : 'dimmed'}
|
||||
style={{ display: 'flex', alignItems: 'center', gap: 4 }}
|
||||
>
|
||||
{req.met ? '✓' : '○'} {req.label}
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.1em', marginBottom: 4 }}>
|
||||
昵称
|
||||
</Text>
|
||||
))}
|
||||
</Stack>
|
||||
</div>
|
||||
{error && <Text c="red" size="sm">{error}</Text>}
|
||||
<Button type="submit" loading={loading} fullWidth disabled={!meetsAllRequirements && password.length > 0}>
|
||||
注册
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
}
|
||||
placeholder="Your nickname"
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
borderColor: '#e0e0e0',
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.1em', marginBottom: 4 }}>
|
||||
邮箱
|
||||
</Text>
|
||||
}
|
||||
placeholder="your@email.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
borderColor: '#e0e0e0',
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<TextInput
|
||||
label={
|
||||
<Text size="xs" c="#666" style={{ letterSpacing: '0.1em', marginBottom: 4 }}>
|
||||
密码
|
||||
</Text>
|
||||
}
|
||||
type="password"
|
||||
placeholder="Create password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: 2,
|
||||
borderColor: '#e0e0e0',
|
||||
background: '#faf9f7',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{/* 密码要求提示 */}
|
||||
<Stack gap={4} mt={8}>
|
||||
{passwordRequirements.map((req, index) => (
|
||||
<Text
|
||||
key={index}
|
||||
size="xs"
|
||||
c={req.met ? '#4a9c6d' : '#999'}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: 10,
|
||||
display: 'inline-block',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{req.met ? '●' : '○'}
|
||||
</span>
|
||||
{req.label}
|
||||
</Text>
|
||||
))}
|
||||
</Stack>
|
||||
</div>
|
||||
{error && (
|
||||
<Text c="#c41c1c" size="xs" style={{ letterSpacing: '0.05em' }}>
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
loading={loading}
|
||||
fullWidth
|
||||
mt="sm"
|
||||
disabled={!meetsAllRequirements && password.length > 0}
|
||||
style={{
|
||||
background: '#1a1a1a',
|
||||
border: '1px solid #1a1a1a',
|
||||
borderRadius: 2,
|
||||
fontWeight: 400,
|
||||
letterSpacing: '0.15em',
|
||||
}}
|
||||
>
|
||||
注册
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
|
||||
<Text ta="center" mt="md" size="sm" c="dimmed">
|
||||
已有账号？{' '}
|
||||
<Anchor component="button" onClick={() => navigate('/login')}>
|
||||
立即登录
|
||||
</Anchor>
|
||||
</Text>
|
||||
</Paper>
|
||||
</Container>
|
||||
<Text
|
||||
ta="center"
|
||||
mt="lg"
|
||||
size="xs"
|
||||
c="#888"
|
||||
style={{ letterSpacing: '0.05em' }}
|
||||
>
|
||||
已有账号？{' '}
|
||||
<Anchor
|
||||
component="button"
|
||||
onClick={() => navigate('/login')}
|
||||
style={{
|
||||
color: '#1a1a1a',
|
||||
textDecoration: 'underline',
|
||||
textUnderlineOffset: 3,
|
||||
}}
|
||||
>
|
||||
立即登录
|
||||
</Anchor>
|
||||
</Text>
|
||||
</Paper>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { LoginPage } from './pages/LoginPage';
|
||||
import { RegisterPage } from './pages/RegisterPage';
|
||||
import { HomePage } from './pages/HomePage';
|
||||
import { useAppStore } from './stores';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
// Loading spinner component
|
||||
function AuthLoading() {
|
||||
@ -91,10 +91,25 @@ function PublicRoute({ children }: { children: React.ReactNode }) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
// Root redirect - 根据登录状态重定向
|
||||
function RootRedirect() {
|
||||
const { isAuthenticated, isLoading } = useAuthLoader();
|
||||
|
||||
if (isLoading) {
|
||||
return <AuthLoading />;
|
||||
}
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Navigate to="/home" replace />;
|
||||
}
|
||||
|
||||
return <Navigate to="/landing" replace />;
|
||||
}
|
||||
|
||||
export const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <Navigate to="/home" replace />,
|
||||
element: <RootRedirect />,
|
||||
},
|
||||
{
|
||||
path: '/landing',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { User, Event, Note, AIConversation, EventType } from '../types';
|
||||
import type { User, Event, Note, EventType } from '../types';
|
||||
|
||||
// API Base URL - from environment variable
|
||||
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000/api';
|
||||
@ -33,6 +33,7 @@ export const api = {
|
||||
const response = await fetch(`${API_URL}${endpoint}`, {
|
||||
...options,
|
||||
headers,
|
||||
credentials: 'include', // 确保跨域请求时发送凭证（cookie）
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
@ -80,11 +80,3 @@ export interface ApiResponse<T> {
|
||||
|
||||
// Loading state types
|
||||
export type LoadingState = 'idle' | 'loading' | 'success' | 'error';
|
||||
|
||||
// Grouped reminder types
|
||||
export interface GroupedReminders {
|
||||
today: Reminder[];
|
||||
tomorrow: Reminder[];
|
||||
later: Reminder[];
|
||||
missed: Reminder[];
|
||||
}
|
||||
|
||||
16
src/types/lunar-javascript.d.ts
vendored
Normal file
16
src/types/lunar-javascript.d.ts
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
declare module 'lunar-javascript' {
|
||||
export class Lunar {
|
||||
static fromYmd(year: number, month: number, day: number): Lunar;
|
||||
getSolar(): Solar;
|
||||
getMonth(): number;
|
||||
getDay(): number;
|
||||
getMonthInChinese(): string;
|
||||
getDayInChinese(): string;
|
||||
}
|
||||
|
||||
export class Solar {
|
||||
getYear(): number;
|
||||
getMonth(): number;
|
||||
getDay(): number;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { Lunar, Solar } from 'lunar-javascript';
|
||||
import { Lunar } from 'lunar-javascript';
|
||||
|
||||
export interface CountdownResult {
|
||||
days: number;
|
||||
@ -12,6 +12,7 @@ export interface CountdownResult {
|
||||
|
||||
/**
|
||||
* 安全地创建日期，处理月末边界情况
|
||||
* 某些月份只有28/29/30/31天
|
||||
*/
|
||||
function safeCreateDate(year: number, month: number, day: number): Date {
|
||||
const date = new Date(year, month, day);
|
||||
@ -22,6 +23,32 @@ function safeCreateDate(year: number, month: number, day: number): Date {
|
||||
return date;
|
||||
}
|
||||
|
||||
/**
|
||||
* 安全地创建农历日期，处理月末边界情况
|
||||
* 某些农历月份只有29或30天，需要检查并调整
|
||||
*/
|
||||
function safeCreateLunarDate(year: number, month: number, day: number): { lunar: Lunar; solar: Solar } | null {
|
||||
try {
|
||||
const lunar = Lunar.fromYmd(year, month, day);
|
||||
return { lunar, solar: lunar.getSolar() };
|
||||
} catch {
|
||||
// 如果日期不存在（如农历12月30日在只有29天的月份），
|
||||
// 尝试获取该月的最后一天
|
||||
try {
|
||||
// 获取下个月的农历日期，然后往前推一天
|
||||
const nextMonthLunar = Lunar.fromYmd(year, month + 1, 1);
|
||||
const lastDayOfMonth = nextMonthLunar.getLunar().getDay() - 1;
|
||||
if (lastDayOfMonth > 0) {
|
||||
const lunar = Lunar.fromYmd(year, month, lastDayOfMonth);
|
||||
return { lunar, solar: lunar.getSolar() };
|
||||
}
|
||||
} catch {
|
||||
// 仍然失败，返回null
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算纪念日的倒计时
|
||||
* 考虑重复规则，计算下一个 occurrence 的倒计时
|
||||
@ -44,10 +71,14 @@ export function calculateCountdown(
|
||||
const originalDay = dateParts[2];
|
||||
|
||||
if (isLunar) {
|
||||
// 农历日期：直接用原始农历年/月/日创建农历对象
|
||||
const lunarDate = Lunar.fromYmd(originalYear, originalMonth + 1, originalDay);
|
||||
const solar = lunarDate.getSolar();
|
||||
targetDate = new Date(solar.getYear(), solar.getMonth() - 1, solar.getDay());
|
||||
// 农历日期：使用安全方法创建，处理月末边界
|
||||
const result = safeCreateLunarDate(originalYear, originalMonth + 1, originalDay);
|
||||
if (result) {
|
||||
targetDate = new Date(result.solar.getYear(), result.solar.getMonth() - 1, result.solar.getDay());
|
||||
} else {
|
||||
// 无法解析农历日期，使用原始公历日期作为后备
|
||||
targetDate = new Date(originalYear, originalMonth, originalDay);
|
||||
}
|
||||
} else {
|
||||
// 公历日期
|
||||
targetDate = new Date(originalYear, originalMonth, originalDay);
|
||||
@ -158,13 +189,11 @@ export function getFriendlyDateDescription(
|
||||
|
||||
if (isLunar) {
|
||||
// 显示农历
|
||||
try {
|
||||
const solar = Solar.fromYmd(targetDate.getFullYear(), month, day);
|
||||
const lunar = solar.getLunar();
|
||||
return `${lunar.getMonthInChinese()}月${lunar.getDayInChinese()}`;
|
||||
} catch {
|
||||
return `${month}月${day}日`;
|
||||
const result = safeCreateLunarDate(targetDate.getFullYear(), month, day);
|
||||
if (result) {
|
||||
return `${result.lunar.getMonthInChinese()}月${result.lunar.getDayInChinese()}`;
|
||||
}
|
||||
return `${month}月${day}日`;
|
||||
}
|
||||
|
||||
return `${month}月${day}日`;
|
||||
@ -184,8 +213,7 @@ export function getSolarFromLunar(lunarMonth: number, lunarDay: number, year?: n
|
||||
* 获取公历日期的农历日期
|
||||
*/
|
||||
export function getLunarFromSolar(solarDate: Date): { month: number; day: number; monthInChinese: string; dayInChinese: string } {
|
||||
const solar = Solar.fromYmd(solarDate.getFullYear(), solarDate.getMonth() + 1, solarDate.getDate());
|
||||
const lunar = solar.getLunar();
|
||||
const lunar = Lunar.fromYmd(solarDate.getFullYear(), solarDate.getMonth() + 1, solarDate.getDate());
|
||||
return {
|
||||
month: lunar.getMonth(),
|
||||
day: lunar.getDay(),
|
||||
|
||||
1
tmpclaude-1682-cwd
Normal file
1
tmpclaude-1682-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-51ef-cwd
Normal file
1
tmpclaude-51ef-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-53b7-cwd
Normal file
1
tmpclaude-53b7-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-5843-cwd
Normal file
1
tmpclaude-5843-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-7db7-cwd
Normal file
1
tmpclaude-7db7-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-8b3b-cwd
Normal file
1
tmpclaude-8b3b-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-90be-cwd
Normal file
1
tmpclaude-90be-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-90fc-cwd
Normal file
1
tmpclaude-90fc-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-c0a2-cwd
Normal file
1
tmpclaude-c0a2-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-ca71-cwd
Normal file
1
tmpclaude-ca71-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-d261-cwd
Normal file
1
tmpclaude-d261-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-d732-cwd
Normal file
1
tmpclaude-d732-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-ea09-cwd
Normal file
1
tmpclaude-ea09-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-f30f-cwd
Normal file
1
tmpclaude-f30f-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-f858-cwd
Normal file
1
tmpclaude-f858-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
1
tmpclaude-fec8-cwd
Normal file
1
tmpclaude-fec8-cwd
Normal file
@ -0,0 +1 @@
|
||||
/e/qia/client
|
||||
Loading…
x
Reference in New Issue
Block a user