package-lock.json

@@ -15,7 +15,6 @@
         "@supabase/supabase-js": "^2.93.2",
         "@tabler/icons-react": "^3.36.1",
         "date-fns": "^4.1.0",
-        "dayjs": "^1.11.19",
         "lunar-javascript": "^1.7.7",
         "postcss": "^8.5.6",
         "postcss-preset-mantine": "^1.18.0",
@@ -2420,7 +2419,8 @@
       "version": "1.11.19",
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.19.tgz",
       "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/debug": {
       "version": "4.4.3",

package.json

@@ -17,7 +17,6 @@
     "@supabase/supabase-js": "^2.93.2",
     "@tabler/icons-react": "^3.36.1",
     "date-fns": "^4.1.0",
-    "dayjs": "^1.11.19",
     "lunar-javascript": "^1.7.7",
     "postcss": "^8.5.6",
     "postcss-preset-mantine": "^1.18.0",

src/components/common/FixedCalendar.tsx

@@ -1,245 +0,0 @@
-import { useState, useMemo } from 'react';
-import {
-  Box,
-  Text,
-  Group,
-  ActionIcon,
-} from '@mantine/core';
-import {
-  IconChevronLeft,
-  IconChevronRight,
-} from '@tabler/icons-react';
-
-interface FixedCalendarProps {
-  value: Date | null;
-  onChange: (date: Date | null) => void;
-  minDate?: Date;
-  maxDate?: Date;
-}
-
-// 获取某月的第一天是星期几
-function getFirstDayOfMonth(date: Date): number {
-  return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
-}
-
-// 获取某月有多少天
-function getDaysInMonth(date: Date): number {
-  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
-}
-
-// 检查两个日期是否是同一天
-function isSameDay(d1: Date | null, d2: Date | null): boolean {
-  if (!d1 || !d2) return false;
-  return d1.getFullYear() === d2.getFullYear() &&
-    d1.getMonth() === d2.getMonth() &&
-    d1.getDate() === d2.getDate();
-}
-
-// 检查日期是否在范围内
-function isDateInRange(date: Date, min?: Date, max?: Date): boolean {
-  if (min && date < min) return false;
-  if (max && date > max) return false;
-  return true;
-}
-
-const WEEKDAYS = ['日', '一', '二', '三', '四', '五', '六'];
-const MONTH_NAMES = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
-
-export function FixedCalendar({ value, onChange, minDate, maxDate }: FixedCalendarProps) {
-  const [currentMonth, setCurrentMonth] = useState(value || new Date());
-
-  // 生成日历数据（固定6行7列 = 42天）
-  const calendarDays = useMemo(() => {
-    const year = currentMonth.getFullYear();
-    const month = currentMonth.getMonth();
-
-    const firstDay = getFirstDayOfMonth(new Date(year, month, 1));
-    const daysInMonth = getDaysInMonth(new Date(year, month, 1));
-
-    const days: Array<{
-      date: Date;
-      isCurrentMonth: boolean;
-      isToday: boolean;
-      isSelected: boolean;
-      isDisabled: boolean;
-    }> = [];
-
-    // 上月剩余的天数
-    const prevMonthDays = getDaysInMonth(new Date(year, month - 1, 1));
-    for (let i = firstDay - 1; i >= 0; i--) {
-      const date = new Date(year, month - 1, prevMonthDays - i);
-      days.push({
-        date,
-        isCurrentMonth: false,
-        isToday: isSameDay(date, new Date()),
-        isSelected: isSameDay(date, value),
-        isDisabled: !isDateInRange(date, minDate, maxDate),
-      });
-    }
-
-    // 当月的天数
-    for (let i = 1; i <= daysInMonth; i++) {
-      const date = new Date(year, month, i);
-      days.push({
-        date,
-        isCurrentMonth: true,
-        isToday: isSameDay(date, new Date()),
-        isSelected: isSameDay(date, value),
-        isDisabled: !isDateInRange(date, minDate, maxDate),
-      });
-    }
-
-    // 下月需要填充的天数
-    const remainingDays = 42 - days.length;
-    for (let i = 1; i <= remainingDays; i++) {
-      const date = new Date(year, month + 1, i);
-      days.push({
-        date,
-        isCurrentMonth: false,
-        isToday: isSameDay(date, new Date()),
-        isSelected: isSameDay(date, value),
-        isDisabled: !isDateInRange(date, minDate, maxDate),
-      });
-    }
-
-    return days;
-  }, [currentMonth, value, minDate, maxDate]);
-
-  const handlePrevMonth = () => {
-    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
-  };
-
-  const handleNextMonth = () => {
-    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
-  };
-
-  const handleDateClick = (date: Date, isDisabled: boolean) => {
-    if (!isDisabled) {
-      onChange(date);
-    }
-  };
-
-  return (
-    <Box
-      style={{
-        background: '#fff',
-        borderRadius: 12,
-        padding: 16,
-        width: 280,
-        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
-      }}
-    >
-      {/* 头部：月份选择 */}
-      <Group justify="space-between" mb={12}>
-        <ActionIcon
-          variant="subtle"
-          size="sm"
-          radius="md"
-          onClick={handlePrevMonth}
-          style={{ color: '#666' }}
-        >
-          <IconChevronLeft size={18} />
-        </ActionIcon>
-        <Text
-          size="sm"
-          fw={600}
-          style={{
-            minWidth: 100,
-            textAlign: 'center',
-            color: '#1a1a1a',
-            letterSpacing: '0.02em',
-          }}
-        >
-          {MONTH_NAMES[currentMonth.getMonth()]} {currentMonth.getFullYear()}
-        </Text>
-        <ActionIcon
-          variant="subtle"
-          size="sm"
-          radius="md"
-          onClick={handleNextMonth}
-          style={{ color: '#666' }}
-        >
-          <IconChevronRight size={18} />
-        </ActionIcon>
-      </Group>
-
-      {/* 星期行 */}
-      <Group gap={0} mb={8}>
-        {WEEKDAYS.map((day) => (
-          <Box
-            key={day}
-            style={{
-              flex: 1,
-              textAlign: 'center',
-              fontSize: 11,
-              color: '#999',
-              fontWeight: 500,
-              padding: '6px 0',
-              letterSpacing: '0.05em',
-            }}
-          >
-            {day}
-          </Box>
-        ))}
-      </Group>
-
-      {/* 日期网格 - 固定6行7列 */}
-      <Box style={{ display: 'flex', flexDirection: 'column' }}>
-        {Array.from({ length: 6 }).map((_, weekIndex) => (
-          <Group key={weekIndex} gap={0} style={{ flex: 1 }}>
-            {Array.from({ length: 7 }).map((_, dayIndex) => {
-              const dayIndex_ = weekIndex * 7 + dayIndex;
-              const day = calendarDays[dayIndex_];
-              if (!day) return null;
-
-              return (
-                <Box
-                  key={dayIndex_}
-                  onClick={() => handleDateClick(day.date, day.isDisabled)}
-                  style={{
-                    flex: 1,
-                    aspectRatio: '1',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: 13,
-                    cursor: day.isDisabled ? 'not-allowed' : 'pointer',
-                    borderRadius: 8,
-                    background: day.isSelected
-                      ? '#007AFF'
-                      : day.isToday
-                      ? 'rgba(0, 122, 255, 0.12)'
-                      : 'transparent',
-                    color: day.isCurrentMonth
-                      ? day.isDisabled
-                        ? '#d1d5db'
-                        : day.isSelected
-                        ? '#fff'
-                        : '#374151'
-                      : day.isDisabled
-                      ? '#e5e7eb'
-                      : '#9ca3af',
-                    fontWeight: day.isSelected ? 600 : 500,
-                    transition: 'all 0.15s ease',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!day.isDisabled && !day.isSelected) {
-                      e.currentTarget.style.background = 'rgba(0, 122, 255, 0.06)';
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!day.isDisabled && !day.isSelected) {
-                      e.currentTarget.style.background = 'transparent';
-                    }
-                  }}
-                >
-                  {day.date.getDate()}
-                </Box>
-              );
-            })}
-          </Group>
-        ))}
-      </Box>
-    </Box>
-  );
-}

src/components/common/WheelTimePicker.tsx

@@ -1,312 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { Box, Group, Text } from '@mantine/core';
-
-interface WheelTimePickerProps {
-  value: string; // "HH:mm" format
-  onChange: (time: string) => void;
-}
-
-function padZero(num: number): string {
-  return String(num).padStart(2, '0');
-}
-
-const ITEM_HEIGHT = 36;
-const VISIBLE_ITEMS = 5;
-const CONTAINER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
-
-export function WheelTimePicker({ value, onChange }: WheelTimePickerProps) {
-  // 处理空值情况
-  const parseInitialValue = () => {
-    if (!value || value === ':') return { hours: 0, minutes: 0 };
-    const parts = value.split(':');
-    if (parts.length !== 2) return { hours: 0, minutes: 0 };
-    const h = parseInt(parts[0], 10);
-    const m = parseInt(parts[1], 10);
-    return {
-      hours: isNaN(h) || h < 0 || h > 23 ? 0 : h,
-      minutes: isNaN(m) || m < 0 || m > 59 ? 0 : m,
-    };
-  };
-
-  const { hours: initialHours, minutes: initialMinutes } = parseInitialValue();
-  const [hours, setHours] = useState(initialHours);
-  const [minutes, setMinutes] = useState(initialMinutes);
-
-  const hourScrollRef = useRef<HTMLDivElement>(null);
-  const minuteScrollRef = useRef<HTMLDivElement>(null);
-
-  // 获取中心位置对应的索引
-  const getIndexFromScroll = (scrollTop: number): number => {
-    const centerOffset = (CONTAINER_HEIGHT - ITEM_HEIGHT) / 2;
-    return Math.round((scrollTop - centerOffset) / ITEM_HEIGHT);
-  };
-
-  // 获取索引对应的滚动位置
-  const getScrollFromIndex = (index: number): number => {
-    const centerOffset = (CONTAINER_HEIGHT - ITEM_HEIGHT) / 2;
-    return index * ITEM_HEIGHT + centerOffset;
-  };
-
-  // 同步滚动到选中值
-  const syncScrollToValue = useCallback(() => {
-    if (hourScrollRef.current) {
-      hourScrollRef.current.scrollTop = getScrollFromIndex(hours);
-    }
-    if (minuteScrollRef.current) {
-      minuteScrollRef.current.scrollTop = getScrollFromIndex(minutes);
-    }
-  }, [hours, minutes]);
-
-  // 初始化滚动位置
-  useEffect(() => {
-    syncScrollToValue();
-  }, [syncScrollToValue]);
-
-  // 处理滚动事件
-  const handleScroll = useCallback((type: 'hour' | 'minute') => {
-    const scrollRef = type === 'hour' ? hourScrollRef : minuteScrollRef;
-    if (!scrollRef.current) return;
-
-    const scrollTop = scrollRef.current.scrollTop;
-    const index = getIndexFromScroll(scrollTop);
-
-    if (type === 'hour') {
-      const clampedIndex = Math.max(0, Math.min(23, index));
-      if (clampedIndex !== hours) {
-        setHours(clampedIndex);
-        onChange(`${padZero(clampedIndex)}:${padZero(minutes)}`);
-      }
-    } else {
-      const clampedIndex = Math.max(0, Math.min(59, index));
-      if (clampedIndex !== minutes) {
-        setMinutes(clampedIndex);
-        onChange(`${padZero(hours)}:${padZero(clampedIndex)}`);
-      }
-    }
-  }, [hours, minutes, minutes, onChange]);
-
-  // 绑定滚动事件
-  useEffect(() => {
-    const hourEl = hourScrollRef.current;
-    const minuteEl = minuteScrollRef.current;
-
-    if (hourEl) {
-      hourEl.addEventListener('scroll', () => handleScroll('hour'));
-    }
-    if (minuteEl) {
-      minuteEl.addEventListener('scroll', () => handleScroll('minute'));
-    }
-
-    return () => {
-      if (hourEl) {
-        hourEl.removeEventListener('scroll', () => handleScroll('hour'));
-      }
-      if (minuteEl) {
-        minuteEl.removeEventListener('scroll', () => handleScroll('minute'));
-      }
-    };
-  }, [handleScroll]);
-
-  // 点击选择
-  const handleClick = (index: number, type: 'hour' | 'minute') => {
-    if (type === 'hour') {
-      setHours(index);
-      onChange(`${padZero(index)}:${padZero(minutes)}`);
-    } else {
-      setMinutes(index);
-      onChange(`${padZero(hours)}:${padZero(index)}`);
-    }
-  };
-
-  const hourOptions = Array.from({ length: 24 }, (_, i) => i);
-  const minuteOptions = Array.from({ length: 60 }, (_, i) => i);
-
-  // 生成带填充的选项数组（用于循环滚动效果）
-  const getExtendedOptions = (options: number[], selected: number) => {
-    // 让当前选中项居中显示
-    const paddingBefore = Math.floor(VISIBLE_ITEMS / 2);
-    const paddingAfter = VISIBLE_ITEMS - 1 - paddingBefore;
-
-    const extended: { value: number; isSelected: boolean }[] = [];
-
-    // 添加前面的填充（使用末尾元素）
-    for (let i = paddingBefore - 1; i >= 0; i--) {
-      const value = options[options.length - 1 - i % options.length];
-      extended.push({ value, isSelected: false });
-    }
-
-    // 添加当前选项
-    options.forEach((opt) => {
-      extended.push({ value: opt, isSelected: opt === selected });
-    });
-
-    // 添加后面的填充（使用开头元素）
-    for (let i = 1; i <= paddingAfter; i++) {
-      const value = options[i % options.length];
-      extended.push({ value, isSelected: false });
-    }
-
-    return extended;
-  };
-
-  const extendedHours = getExtendedOptions(hourOptions, hours);
-  const extendedMinutes = getExtendedOptions(minuteOptions, minutes);
-
-  return (
-    <Box
-      style={{
-        background: '#fff',
-        borderRadius: 12,
-        padding: '8px 0',
-        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
-      }}
-    >
-      <Group gap={0} justify="center">
-        {/* 小时列 */}
-        <Box
-          ref={hourScrollRef}
-          style={{
-            width: 48,
-            height: CONTAINER_HEIGHT,
-            overflowY: 'auto',
-            textAlign: 'center',
-            position: 'relative',
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
-          }}
-          css={{
-            '&::-webkit-scrollbar': {
-              display: 'none',
-            },
-          }}
-          onWheel={(e) => {
-            e.preventDefault();
-            const delta = e.deltaY > 0 ? ITEM_HEIGHT : -ITEM_HEIGHT;
-            const scrollRef = hourScrollRef.current;
-            if (scrollRef) {
-              const newScrollTop = scrollRef.scrollTop + delta;
-              scrollRef.scrollTop = Math.max(0, Math.min(newScrollTop, 24 * ITEM_HEIGHT));
-            }
-          }}
-        >
-          {/* 选中区域背景 */}
-          <Box
-            style={{
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              top: '50%',
-              height: ITEM_HEIGHT,
-              transform: 'translateY(-50%)',
-              background: 'rgba(0, 122, 255, 0.08)',
-              borderRadius: 8,
-              pointerEvents: 'none',
-            }}
-          />
-          <Box style={{ paddingTop: (CONTAINER_HEIGHT - ITEM_HEIGHT) / 2 }}>
-            {extendedHours.map((item, idx) => (
-              <Box
-                key={`hour-${idx}`}
-                onClick={() => handleClick(item.value % 24, 'hour')}
-                style={{
-                  height: ITEM_HEIGHT,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  color: item.isSelected ? '#007AFF' : '#374151',
-                  fontSize: 14,
-                  fontWeight: item.isSelected ? 600 : 400,
-                  letterSpacing: '0.02em',
-                  cursor: 'pointer',
-                  userSelect: 'none',
-                }}
-              >
-                {padZero(item.value % 24)}
-              </Box>
-            ))}
-          </Box>
-        </Box>
-
-        <Text
-          size="lg"
-          fw={400}
-          style={{
-            color: '#666',
-            padding: '0 8px',
-            fontFeatureSettings: '"tnum"',
-            lineHeight: `${CONTAINER_HEIGHT}px`,
-            alignSelf: 'flex-start',
-            marginTop: (CONTAINER_HEIGHT - ITEM_HEIGHT) / 2,
-          }}
-        >
-          :
-        </Text>
-
-        {/* 分钟列 */}
-        <Box
-          ref={minuteScrollRef}
-          style={{
-            width: 48,
-            height: CONTAINER_HEIGHT,
-            overflowY: 'auto',
-            textAlign: 'center',
-            position: 'relative',
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
-          }}
-          css={{
-            '&::-webkit-scrollbar': {
-              display: 'none',
-            },
-          }}
-          onWheel={(e) => {
-            e.preventDefault();
-            const delta = e.deltaY > 0 ? ITEM_HEIGHT : -ITEM_HEIGHT;
-            const scrollRef = minuteScrollRef.current;
-            if (scrollRef) {
-              const newScrollTop = scrollRef.scrollTop + delta;
-              scrollRef.scrollTop = Math.max(0, Math.min(newScrollTop, 60 * ITEM_HEIGHT));
-            }
-          }}
-        >
-          {/* 选中区域背景 */}
-          <Box
-            style={{
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              top: '50%',
-              height: ITEM_HEIGHT,
-              transform: 'translateY(-50%)',
-              background: 'rgba(0, 122, 255, 0.08)',
-              borderRadius: 8,
-              pointerEvents: 'none',
-            }}
-          />
-          <Box style={{ paddingTop: (CONTAINER_HEIGHT - ITEM_HEIGHT) / 2 }}>
-            {extendedMinutes.map((item, idx) => (
-              <Box
-                key={`minute-${idx}`}
-                onClick={() => handleClick(item.value % 60, 'minute')}
-                style={{
-                  height: ITEM_HEIGHT,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  color: item.isSelected ? '#007AFF' : '#374151',
-                  fontSize: 14,
-                  fontWeight: item.isSelected ? 600 : 400,
-                  letterSpacing: '0.02em',
-                  cursor: 'pointer',
-                  userSelect: 'none',
-                }}
-              >
-                {padZero(item.value % 60)}
-              </Box>
-            ))}
-          </Box>
-        </Box>
-      </Group>
-    </Box>
-  );
-}

src/components/reminder/ReminderCard.tsx

@@ -73,7 +73,6 @@ export function ReminderCard({
 
   // 使用全局状态管理右键菜单
   const openEventId = useContextMenuStore((state) => state.openEventId);
-  const menuPosition = useContextMenuStore((state) => state.menuPosition);
   const { openMenu, closeMenu } = useContextMenuStore();
   const isMenuOpen = openEventId === event.id;
 
@@ -85,10 +84,10 @@ export function ReminderCard({
   // 右键点击处理
   const handleContextMenu = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
-    console.log('[ContextMenu] 右键点击事件, eventId:', event.id, 'x:', e.clientX, 'y:', e.clientY);
+    console.log('[ContextMenu] 右键点击事件, eventId:', event.id);
 
-    // 打开菜单，传入鼠标位置
-    openMenu(event.id, { x: e.clientX, y: e.clientY });
+    // 打开菜单
+    openMenu(event.id);
   }, [event.id, openMenu]);
 
   // 点击外部关闭菜单
@@ -121,35 +120,25 @@ export function ReminderCard({
 
   // 计算菜单位置（带边缘保护）
   const getMenuPosition = () => {
+    if (!cardRef.current) return { left: 0, top: 0 };
+
+    const cardRect = cardRef.current.getBoundingClientRect();
     const menuWidth = 180; // 菜单宽度
     const menuHeight = 150; // 估算菜单高度
     const padding = 8; // 边缘padding
 
-    // 如果有鼠标位置，使用鼠标位置
-    let left = padding;
-    let top = padding;
-
-    if (menuPosition) {
-      // 水平位置跟随鼠标，添加偏移避免遮挡
-      left = menuPosition.x + 4;
-      // 垂直位置优先显示在鼠标下方
-      top = menuPosition.y + 4;
-    } else if (cardRef.current) {
-      // 回退到卡片位置
-      const cardRect = cardRef.current.getBoundingClientRect();
-      left = cardRect.left;
-      top = cardRect.bottom + 4;
-    }
-
-    // 边缘保护：确保不超出视口
+    // 计算左侧位置
+    let left = cardRect.left;
     if (left + menuWidth > window.innerWidth - padding) {
       left = window.innerWidth - menuWidth - padding;
     }
     if (left < padding) left = padding;
 
+    // 计算顶部位置（优先显示在下方）
+    let top = cardRect.bottom + 4;
     if (top + menuHeight > window.innerHeight - padding) {
       // 如果下方空间不足，显示在上方
-      top = menuPosition ? menuPosition.y - menuHeight - 4 : top;
+      top = cardRect.top - menuHeight - 4;
     }
     if (top < padding) top = padding;
 
@@ -389,13 +378,7 @@ export function ReminderCard({
             </Box>
 
             {/* 右侧：循环图标 + 日期时间 */}
-            <Box
-              style={{ flex: '0 0 auto', minWidth: 0, paddingLeft: 12, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}
-              onClick={(e) => {
-                e.stopPropagation();
-                onClick();
-              }}
-            >
+            <Box style={{ flex: '0 0 auto', minWidth: 0, paddingLeft: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
               {event.repeat_type !== 'none' && (
                 <Box
                   style={{

src/index.css

@@ -37,32 +37,3 @@
            placeholder:text-gray-400;
   }
 }
-
-/* 固定日期选择器高度为6行 */
-.mantine-DatePickerInput-calendar,
-.mantine-DatePicker-calendar {
-  min-height: 264px !important;
-}
-
-.mantine-DatePickerInput-calendarBody,
-.mantine-DatePicker-calendarBody {
-  min-height: 220px;
-}
-
-.mantine-DatePickerInput-weekdayRow,
-.mantine-DatePicker-weekdayRow {
-  font-size: 12px;
-}
-
-.mantine-DatePickerInput-day,
-.mantine-DatePicker-day {
-  width: 32px !important;
-  height: 32px !important;
-  font-size: 13px;
-}
-
-/* 确保日历主体高度固定 */
-.mantine-DatePickerInput-calendarHeader,
-.mantine-DatePicker-calendarHeader {
-  min-height: 36px;
-}

src/main.tsx

@@ -1,23 +1,16 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { MantineProvider, createTheme } from '@mantine/core'
-import { DatesProvider } from '@mantine/dates'
 import { Notifications } from '@mantine/notifications'
-import dayjs from 'dayjs'
-import 'dayjs/locale/zh-cn'
 import '@mantine/core/styles.css'
-import '@mantine/dates/styles.css'
 import '@mantine/notifications/styles.css'
 import './index.css'
 import App from './App'
 
-dayjs.locale('zh-cn')
-
 // Apple-inspired theme
 const theme = createTheme({
   primaryColor: 'blue',
   fontFamily: '-apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',
-  fontFamilyMonospace: 'Monaco, Consolas, monospace',
   defaultRadius: 'md',
   colors: {
     blue: [
@@ -55,10 +48,8 @@ const theme = createTheme({
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <MantineProvider theme={theme} defaultColorScheme="light">
-      <DatesProvider settings={{ firstDayOfWeek: 0, locale: 'zh-cn' }}>
       <Notifications position="top-right" />
       <App />
-      </DatesProvider>
     </MantineProvider>
   </StrictMode>,
 )

src/pages/ArchivePage.tsx

@@ -62,12 +62,8 @@ export function ArchivePage() {
     if (e.type !== 'reminder' || !e.is_completed) return false;
     if (!e.date) return false; // 跳过无日期的
     const eventDate = new Date(e.date);
-    // 获取今天的开始时间（只比较日期部分）
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const eventDateOnly = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate());
-    // 仅显示已过期的（日期早于今天）
-    return eventDateOnly < today;
+    const now = new Date();
+    return eventDate < now; // 仅已过期的
   }).sort((a, b) => {
     if (!a.date || !b.date) return 0;
     return new Date(b.date).getTime() - new Date(a.date).getTime();

src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Container,
   Title,
@@ -12,14 +12,10 @@ import {
   Select,
   Stack,
   Box,
-  ActionIcon,
 } from '@mantine/core';
-import { DatePickerInput } from '@mantine/dates';
-import { Popover } from '@mantine/core';
-import { IconCalendar, IconClock, IconSettings, IconLogout, IconX } from '@tabler/icons-react';
+import { DatePickerInput, TimeInput } from '@mantine/dates';
+import { IconLogout, IconSettings } from '@tabler/icons-react';
 import { useDisclosure } from '@mantine/hooks';
-import { FixedCalendar } from '../components/common/FixedCalendar';
-import { WheelTimePicker } from '../components/common/WheelTimePicker';
 import { useNavigate } from 'react-router-dom';
 import { useAppStore } from '../stores';
 import { AnniversaryList } from '../components/anniversary/AnniversaryList';
@@ -445,148 +441,65 @@ export function HomePage() {
 
             {/* Content (only for reminders) */}
             {formType === 'reminder' && (
-              <Box style={{ position: 'relative' }}>
+              <Textarea
+                label={
                   <Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 4 }}>
                     内容
                   </Text>
-                <Box
-                  style={{
-                    position: 'relative',
-                    background: '#faf9f7',
-                    borderRadius: 2,
-                    border: '1px solid #ddd',
-                  }}
-                >
-                  <textarea
-                    id="content-input"
+                }
                 placeholder="输入详细内容"
                 value={formContent}
                 onChange={(e) => setFormContent(e.target.value)}
                 rows={3}
-                    style={{
-                      width: '100%',
-                      border: 'none',
-                      background: 'transparent',
-                      padding: '8px 12px',
-                      fontSize: '14px',
-                      resize: 'vertical',
-                      fontFamily: 'inherit',
-                      outline: 'none',
-                      minHeight: '72px',
-                      boxSizing: 'border-box',
+                styles={{
+                  input: {
+                    borderRadius: 2,
+                    background: '#faf9f7',
+                  },
                 }}
               />
-                </Box>
-              </Box>
             )}
 
-            {/* Date & Time - Combined selector */}
-            <Box>
-              <Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 8 }}>
+            {/* Date */}
+            <DatePickerInput
+              label={
+                <Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 4 }}>
                   日期
                 </Text>
-              <Group gap={8} grow>
-                {/* Date selector - Fixed 6-row calendar */}
-                <Popover
-                  position="bottom"
-                  withArrow
-                  shadow="md"
-                  onOpenChange={(opened) => {
-                    if (!opened && formDate) {
-                      // Keep the date
               }
-                  }}
-                >
-                  <Popover.Target>
-                    <TextInput
               placeholder="选择日期"
-                      value={formDate ? `${formDate.getFullYear()}-${String(formDate.getMonth() + 1).padStart(2, '0')}-${String(formDate.getDate()).padStart(2, '0')}` : ''}
-                      readOnly
-                      leftSection={<IconCalendar size={14} />}
-                      leftSectionPointerEvents="none"
+              value={formDate}
+              onChange={(value) => setFormDate(value as Date | null)}
+              required
               styles={{
                 input: {
                   borderRadius: 2,
                   background: '#faf9f7',
-                          borderColor: '#ddd',
-                          color: '#666',
-                          height: 32,
-                          paddingLeft: 36,
-                          paddingRight: 8,
-                          cursor: 'pointer',
-                        },
-                        section: {
-                          paddingLeft: 8,
                 },
               }}
             />
-                  </Popover.Target>
-                  <Popover.Dropdown style={{ background: 'transparent', border: 'none', padding: 0, boxShadow: 'none' }}>
-                    <FixedCalendar
-                      value={formDate}
-                      onChange={(date) => setFormDate(date)}
-                    />
-                  </Popover.Dropdown>
-                </Popover>
 
-                {/* Time selector (only for reminders) - Wheel picker */}
+            {/* Time (only for reminders) */}
             {formType === 'reminder' && (
-                  <Popover
-                    position="bottom"
-                    withArrow
-                    shadow="md"
-                  >
-                    <Popover.Target>
-                      <Group gap={4} style={{ flex: 1 }}>
-                        <TextInput
+              <TimeInput
+                label={
+                  <Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 4 }}>
+                    时间
+                  </Text>
+                }
                 placeholder="选择时间"
                 value={formTime}
-                          leftSection={<IconClock size={14} />}
-                          leftSectionPointerEvents="none"
-                          rightSection={
-                            formTime ? (
-                              <ActionIcon
-                                variant="subtle"
-                                size="xs"
-                                radius="md"
-                                onClick={() => setFormTime('')}
-                                style={{ color: '#9ca3af' }}
-                              >
-                                <IconX size={12} />
-                              </ActionIcon>
-                            ) : null
-                          }
+                onChange={(e) => setFormTime(e.target.value)}
                 styles={{
                   input: {
                     borderRadius: 2,
                     background: '#faf9f7',
-                              borderColor: '#ddd',
-                              color: '#666',
-                              height: 32,
-                              paddingLeft: 36,
-                              paddingRight: formTime ? 28 : 8,
-                              cursor: 'pointer',
-                            },
-                            section: {
-                              paddingLeft: 8,
                   },
                 }}
               />
-                      </Group>
-                    </Popover.Target>
-                    <Popover.Dropdown style={{ background: 'transparent', border: 'none', padding: 0, boxShadow: 'none' }}>
-                      <WheelTimePicker
-                        value={formTime}
-                        onChange={(time) => setFormTime(time)}
-                      />
-                    </Popover.Dropdown>
-                  </Popover>
             )}
-              </Group>
-            </Box>
 
-            {/* Lunar switch (only for anniversaries) */}
-            {formType === 'anniversary' && (
+            {/* Lunar switch */}
             <Switch
               label={
                 <Text size="xs" c="#666" style={{ letterSpacing: '0.05em' }}>
@@ -596,7 +509,6 @@ export function HomePage() {
               checked={formIsLunar}
               onChange={(e) => setFormIsLunar(e.currentTarget.checked)}
             />
-            )}
 
             {/* Repeat type */}
             <Select
@@ -622,11 +534,11 @@ export function HomePage() {
               }}
             />
 
-            {/* Color (only for reminders) */}
+            {/* Priority (only for reminders) */}
             {formType === 'reminder' && (
               <Box>
                 <Text size="xs" c="#666" style={{ letterSpacing: '0.05em', marginBottom: 8 }}>
-                  颜色
+                  优先级
                 </Text>
                 <Group gap={8}>
                   {([

src/stores/contextMenu.ts

@@ -1,43 +1,33 @@
 import { create } from 'zustand';
 
-// 右键菜单位置类型
-interface MenuPosition {
-  x: number;
-  y: number;
-}
-
 // 右键菜单状态管理
 interface ContextMenuState {
   // 当前打开菜单的事件ID，null表示没有菜单打开
   openEventId: string | null;
-  // 菜单位置
-  menuPosition: MenuPosition | null;
   // 打开菜单
-  openMenu: (eventId: string, position?: MenuPosition) => void;
+  openMenu: (eventId: string) => void;
   // 关闭菜单
   closeMenu: () => void;
   // 切换菜单
-  toggleMenu: (eventId: string, position?: MenuPosition) => void;
+  toggleMenu: (eventId: string) => void;
   // 点击其他位置关闭菜单
   closeOnClickOutside: (eventId: string) => void;
 }
 
 export const useContextMenuStore = create<ContextMenuState>((set) => ({
   openEventId: null,
-  menuPosition: null,
 
-  openMenu: (eventId: string, position?: MenuPosition) => {
-    set({ openEventId: eventId, menuPosition: position || null });
+  openMenu: (eventId: string) => {
+    set({ openEventId: eventId });
   },
 
   closeMenu: () => {
-    set({ openEventId: null, menuPosition: null });
+    set({ openEventId: null });
   },
 
-  toggleMenu: (eventId: string, position?: MenuPosition) => {
+  toggleMenu: (eventId: string) => {
     set((state) => ({
       openEventId: state.openEventId === eventId ? null : eventId,
-      menuPosition: state.openEventId === eventId ? null : (position || null),
     }));
   },