Compare commits

..

No commits in common. "8725108195067836749c58728b60133f35a49497" and "5f1c6208df1d320287887f46777313fb1a74a161" have entirely different histories.

6 changed files with 30 additions and 129 deletions

View File

@ -27,10 +27,9 @@ import { notifications } from '@mantine/notifications';
interface FloatingAIChatProps {
onEventCreated?: () => void;
hidden?: boolean;
}
export function FloatingAIChat({ onEventCreated, hidden = false }: FloatingAIChatProps) {
export function FloatingAIChat({ onEventCreated }: FloatingAIChatProps) {
const [isFocused, setIsFocused] = useState(false);
const [message, setMessage] = useState('');
const [loading, setLoading] = useState(false);
@ -213,11 +212,6 @@ export function FloatingAIChat({ onEventCreated, hidden = false }: FloatingAICha
return editForm.type === 'anniversary' ? '纪念日' : '提醒';
};
// 当 hidden 为 true 时,不渲染组件
if (hidden) {
return null;
}
return (
<>
{/* 遮罩层 */}
@ -252,13 +246,13 @@ export function FloatingAIChat({ onEventCreated, hidden = false }: FloatingAICha
<Paper
style={{
width: '100%',
background: isFocused ? 'var(--mantine-color-body)' : 'rgba(255, 255, 255, 0.75)',
backdropFilter: isFocused ? 'none' : 'blur(12px)',
background: isFocused ? 'var(--mantine-color-body)' : 'rgba(255, 255, 255, 0.4)',
backdropFilter: isFocused ? 'none' : 'blur(8px)',
borderRadius: 16,
boxShadow: isFocused
? '0 8px 32px rgba(0, 0, 0, 0.12)'
: '0 2px 12px rgba(0, 0, 0, 0.08)',
border: '1px solid rgba(0, 0, 0, 0.08)',
: '0 2px 12px rgba(0, 0, 0, 0.06)',
border: '1px solid var(--mantine-color-gray-2)',
transition: 'all 0.3s ease',
overflow: 'visible',
}}
@ -529,9 +523,8 @@ export function FloatingAIChat({ onEventCreated, hidden = false }: FloatingAICha
styles={{
input: {
borderRadius: 12,
borderColor: 'var(--mantine-color-gray-3)',
background: isFocused ? 'rgba(255, 255, 255, 0.95)' : 'rgba(0, 0, 0, 0.06)',
color: '#1a1a1a',
borderColor: 'var(--mantine-color-gray-2)',
background: isFocused ? 'rgba(255, 255, 255, 0.95)' : 'rgba(255, 255, 255, 0.6)',
paddingLeft: 12,
paddingRight: 12,
transition: 'all 0.3s ease',

View File

@ -1,4 +1,4 @@
import { useMemo, useRef, useState, useEffect } from 'react';
import { useMemo, useRef } from 'react';
import { Stack, Text, Paper, Group, Button, Box } from '@mantine/core';
import { IconPlus } from '@tabler/icons-react';
import { AnniversaryCard } from './AnniversaryCard';
@ -29,39 +29,6 @@ export function AnniversaryList({ events, onEventClick, onAddClick }: Anniversar
const anniversaries = events.filter((e) => e.type === 'anniversary');
const showHolidays = useAppStore((state) => state.settings?.showHolidays ?? true);
const scrollContainerRef = useRef<HTMLDivElement>(null);
const [bottomPadding, setBottomPadding] = useState(0);
// 检测列表内容,添加底部填充避免被 AI 输入框遮挡
useEffect(() => {
const updatePadding = () => {
const container = scrollContainerRef.current;
if (!container) return;
// 判断是否可滚动(内容高度 > 容器高度)
const isScrollable = container.scrollHeight > container.clientHeight;
// 计算内容底部到容器底部的距离
const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
// 如果可滚动,始终添加填充;如果不可滚动但内容接近底部,也添加填充
const needsPadding = isScrollable || scrollBottom < 100;
// 底部填充高度AI 输入框高度(约50px) + 底部间距(48px) + 额外缓冲(20px)
setBottomPadding(needsPadding ? 120 : 20);
};
// 延迟执行确保 DOM 完全渲染
const timer = setTimeout(updatePadding, 100);
// 监听容器和内容变化
const container = scrollContainerRef.current;
if (container) {
const observer = new ResizeObserver(updatePadding);
observer.observe(container);
return () => {
observer.disconnect();
clearTimeout(timer);
};
}
return () => clearTimeout(timer);
}, [events]);
// 滚动条样式 - 仅在悬停时显示
const scrollbarStyle = `
@ -212,7 +179,7 @@ export function AnniversaryList({ events, onEventClick, onAddClick }: Anniversar
ref={scrollContainerRef}
onWheel={handleWheel}
className="anniversary-scroll"
style={{ flex: 1, overflowY: 'auto', minHeight: 0, paddingBottom: bottomPadding }}
style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}
>
<Stack gap="xs">
{/* 内置节假日 */}

View File

@ -23,30 +23,22 @@ type ViewMode = 'edit' | 'preview';
export function NoteEditor({ onSave }: NoteEditorProps) {
const notes = useAppStore((state) => state.notes);
const updateNotesContent = useAppStore((state) => state.updateNotesContent);
const saveNotes = useAppStore((state) => state.saveNotes);
const fetchNotes = useAppStore((state) => state.fetchNotes);
const [content, setContent] = useState('');
const [saving, setSaving] = useState(false);
const [lastSaved, setLastSaved] = useState<Date | null>(null);
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
const [viewMode] = useState<ViewMode>('edit');
// Initialize content from notes
useEffect(() => {
if (notes) {
setContent(notes.content);
setHasUnsavedChanges(false);
}
}, [notes]);
// Track unsaved changes
useEffect(() => {
if (notes && content !== notes.content) {
setHasUnsavedChanges(true);
}
}, [content, notes]);
// Fetch notes on mount
useEffect(() => {
fetchNotes();
@ -73,21 +65,21 @@ export function NoteEditor({ onSave }: NoteEditorProps) {
}
`;
useEffect(() => {
if (debouncedContent !== undefined && notes && debouncedContent !== content) {
handleSave(debouncedContent);
}
}, [debouncedContent]);
const handleSave = useCallback(
async (value: string) => {
// 即使 notes 为 nullsaveNotes 也会自动创建便签
if (!value) return;
// 防止重复保存
if (saving) return;
if (!notes) return;
setSaving(true);
try {
// 注意:不要在这里调用 updateNotesContent
// 因为 saveNotes 会在成功后更新 store 中的 notes
// 如果这里先更新,会触发 notes useEffect导致 content 被重置
updateNotesContent(value);
await saveNotes(value);
setLastSaved(new Date());
setHasUnsavedChanges(false);
onSave?.();
} catch (error) {
console.error('Failed to save note:', error);
@ -95,30 +87,20 @@ export function NoteEditor({ onSave }: NoteEditorProps) {
setSaving(false);
}
},
[saving, saveNotes, onSave]
[notes, updateNotesContent, saveNotes, onSave]
);
// Auto-save with debounce
useEffect(() => {
// 即使 notes 为 null 也可以自动保存(会创建新便签)
if (debouncedContent !== undefined && debouncedContent !== content) {
handleSave(debouncedContent);
}
}, [debouncedContent, content, handleSave]);
const formatLastSaved = () => {
if (saving) return '保存中...';
if (hasUnsavedChanges && !lastSaved) return '未保存';
if (!lastSaved) return '';
if (!lastSaved) return '未保存';
const now = new Date();
const diff = now.getTime() - lastSaved.getTime();
if (diff < 1000) return '保存';
if (diff < 1000) return '刚刚保存';
if (diff < 60000) return `${Math.floor(diff / 1000)}秒前保存`;
return lastSaved.toLocaleTimeString('zh-CN');
};
const handleManualSave = () => {
if (content) {
if (content && notes) {
handleSave(content);
}
};
@ -168,8 +150,8 @@ export function NoteEditor({ onSave }: NoteEditorProps) {
>
</Button>
<Text size="xs" c={saving ? '#666' : hasUnsavedChanges ? '#e6a23c' : '#999'}>
{formatLastSaved()}
<Text size="xs" c={saving ? '#666' : lastSaved ? '#999' : '#bbb'}>
{saving ? '保存中...' : formatLastSaved()}
</Text>
</Group>
</Group>

View File

@ -1,4 +1,4 @@
import { useMemo, useRef, useState, useEffect } from 'react';
import { useMemo, useRef, useState } from 'react';
import {
Stack,
Text,
@ -43,39 +43,6 @@ export function ReminderList({
}: ReminderListProps) {
const navigate = useNavigate();
const scrollContainerRef = useRef<HTMLDivElement>(null);
const [bottomPadding, setBottomPadding] = useState(0);
// 检测列表内容,添加底部填充避免被 AI 输入框遮挡
useEffect(() => {
const updatePadding = () => {
const container = scrollContainerRef.current;
if (!container) return;
// 判断是否可滚动(内容高度 > 容器高度)
const isScrollable = container.scrollHeight > container.clientHeight;
// 计算内容底部到容器底部的距离
const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
// 如果可滚动,始终添加填充;如果不可滚动但内容接近底部,也添加填充
const needsPadding = isScrollable || scrollBottom < 100;
// 底部填充高度AI 输入框高度(约50px) + 底部间距(48px) + 额外缓冲(20px)
setBottomPadding(needsPadding ? 120 : 20);
};
// 延迟执行确保 DOM 完全渲染
const timer = setTimeout(updatePadding, 100);
// 监听容器和内容变化
const container = scrollContainerRef.current;
if (container) {
const observer = new ResizeObserver(updatePadding);
observer.observe(container);
return () => {
observer.disconnect();
clearTimeout(timer);
};
}
return () => clearTimeout(timer);
}, [events]);
// 分类折叠状态
const [collapsed, setCollapsed] = useState({
@ -311,7 +278,6 @@ export function ReminderList({
flex: 1,
overflowY: 'auto',
minHeight: 0,
paddingBottom: bottomPadding,
}}
>
<Stack gap="xs">

View File

@ -22,7 +22,6 @@ import { FixedCalendar } from '../components/common/FixedCalendar';
import { TimePicker } from '../components/common/TimePicker';
import { useNavigate } from 'react-router-dom';
import { useAppStore } from '../stores';
import { useContextMenuStore } from '../stores/contextMenu';
import { AnniversaryList } from '../components/anniversary/AnniversaryList';
import { ReminderList } from '../components/reminder/ReminderList';
import { NoteEditor } from '../components/note/NoteEditor';
@ -35,7 +34,6 @@ export function HomePage() {
const navigate = useNavigate();
const user = useAppStore((state) => state.user);
const logout = useAppStore((state) => state.logout);
const openEventId = useContextMenuStore((state) => state.openEventId);
const checkAuth = useAppStore((state) => state.checkAuth);
const events = useAppStore((state) => state.events);
const fetchEvents = useAppStore((state) => state.fetchEvents);
@ -182,8 +180,8 @@ export function HomePage() {
});
if (result.error) {
console.error('更新失败:', result.error);
// stores 会在更新失败时自动回滚数据
}
// 乐观更新已处理 UI 响应,无需 fetchEvents
};
const handleDelete = async (event: Event) => {
@ -225,8 +223,6 @@ export function HomePage() {
if (result.error) {
console.error('顺延失败:', result.error);
}
// 刷新列表以更新 UI
fetchEvents();
};
const handleDateChange = async (
@ -395,6 +391,8 @@ export function HomePage() {
onDateChange={handleDateChange}
onPriorityChange={handlePriorityChange}
/>
{/* 底部空白区域 - 避免被 AI 输入框遮挡 */}
<Box style={{ height: 120 }} />
</div>
{/* Right column - Note */}
@ -404,7 +402,7 @@ export function HomePage() {
</div>
{/* AI Chat - Floating */}
<FloatingAIChat onEventCreated={handleAIEventCreated} hidden={opened || !!openEventId} />
<FloatingAIChat onEventCreated={handleAIEventCreated} />
{/* Add/Edit Event Modal */}
<Modal

View File

@ -39,12 +39,7 @@ export const api = {
const data = await response.json();
if (!response.ok) {
const errorMsg = data.error || 'Request failed';
// 如果有详细信息,显示出来
if (data.details) {
console.error('Validation details:', JSON.stringify(data.details));
}
throw new Error(errorMsg);
throw new Error(data.error || 'Request failed');
}
return data;