From df13a5b6c33de6f3bed20ad2e7efdc1dd042fe7f Mon Sep 17 00:00:00 2001
From: liqi <qiqiqiyoucili@163.com>
Date: Tue, 10 Jun 2025 22:04:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=9C=E5=8E=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |   1 +
 pnpm-lock.yaml                      |  33 +++
 src/App.vue                         |  69 ++---
 src/components/CalendarView.vue     | 101 ++++---
 src/components/CommonEventModal.vue | 249 +++++++++-------
 src/components/CommonEvents.vue     |  60 +---
 src/components/EventDetail.vue      | 106 ++-----
 src/components/EventModal.vue       | 442 ++++++++++++++++++----------
 src/components/LoginModal.vue       |  58 ++--
 src/style.css                       |  15 +
 src/utils/calendarUtils.js          |  34 ++-
 11 files changed, 652 insertions(+), 516 deletions(-)

diff --git a/package.json b/package.json
index f1c9d45..46abb43 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "aos": "^2.3.4",
     "axios": "^1.6.2",
     "chinese-lunar": "^0.1.4",
+    "chinese-lunar-calendar": "^1.0.1",
     "dayjs": "^1.11.13",
     "lucide-vue-next": "^0.507.0",
     "pinia": "^2.1.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3191141..9c78300 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       chinese-lunar:
         specifier: ^0.1.4
         version: 0.1.4
+      chinese-lunar-calendar:
+        specifier: ^1.0.1
+        version: 1.0.1
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -308,36 +311,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -395,56 +404,67 @@ packages:
     resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.40.0':
     resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.40.0':
     resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.40.0':
     resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.40.0':
     resolution: {integrity: sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.40.0':
     resolution: {integrity: sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.40.0':
     resolution: {integrity: sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.40.0':
     resolution: {integrity: sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.40.0':
     resolution: {integrity: sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.40.0':
     resolution: {integrity: sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.40.0':
     resolution: {integrity: sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.40.0':
     resolution: {integrity: sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==}
@@ -502,24 +522,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
     resolution: {integrity: sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
     resolution: {integrity: sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.4':
     resolution: {integrity: sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.4':
     resolution: {integrity: sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==}
@@ -647,6 +671,9 @@ packages:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
 
+  chinese-lunar-calendar@1.0.1:
+    resolution: {integrity: sha512-T5XjtA6ygOkxjwltYf8dEB1DLsPKewDKajf74fNeT6rH2g9EZPf2AHk6vAlK/SAImTYKXoUNQ3Q4JwN0BduqRA==}
+
   chinese-lunar@0.1.4:
     resolution: {integrity: sha512-E4seb9UZkSJtkm65Ry2ZLWTw5Z87DOyGcCePdg3ft7da342hnEliMtcDAPSn+YSo/o0xl1Egmhh671kxEJgY+g==}
 
@@ -846,24 +873,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.29.2:
     resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.29.2:
     resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.29.2:
     resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.29.2:
     resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
@@ -1570,6 +1601,8 @@ snapshots:
       es-errors: 1.3.0
       function-bind: 1.1.2
 
+  chinese-lunar-calendar@1.0.1: {}
+
   chinese-lunar@0.1.4: {}
 
   chokidar@4.0.3:
diff --git a/src/App.vue b/src/App.vue
index 7f10cc3..f0520b1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="min-h-screen w-full bg-gradient-to-br from-gray-50 to-gray-100">
+  <div class="min-h-screen w-full bg-gradient-to-br from-gray-50 to-gray-100 bg-fixed">
     <!-- 登录模态框 -->
     <LoginModal v-if="showLoginModal" @login="handleLogin" @close="showLoginModal = false" />
 
     <!-- 顶部导航 - 粘性布局 -->
-    <header class="sticky top-0 z-50 bg-gradient-to-r from-primary-600 to-primary-800 py-5 px-6 rounded-b-2xl shadow-lg">
+    <header class="sticky top-0 z-50 bg-gradient-to-r from-primary-600 to-primary-800 py-5 px-6 rounded-b-2xl shadow-lg w-full">
       <div class="max-w-7xl mx-auto">
         <div class="flex flex-col sm:flex-row items-center justify-between">
           <div class="flex items-center">
             <div class="w-12 h-12 rounded-xl bg-white bg-opacity-20 flex items-center justify-center shadow-md">
-              <i class="fas fa-calendar-alt text-b text-2xl"></i>
+              <i class="fas fa-calendar-alt text-white text-2xl"></i>
             </div>
-            <h1 class="ml-4 text-2xl font-bold text-b drop-shadow">智能日程管家</h1>
+            <h1 class="ml-4 text-2xl font-bold text-white drop-shadow">智能日程管家</h1>
           </div>
 
           <div class="mt-4 sm:mt-0 flex items-center">
@@ -50,13 +50,13 @@
       </div>
     </header>
 
-    <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6">
+    <div class="w-full mx-auto px-4 py-8 sm:px-6">
       <!-- 日历导航 -->
       <div data-aos="fade-up" class="flex items-center justify-between mb-8 bg-white rounded-xl p-4 shadow">
         <div class="flex items-center">
           <button
               @click="changeDate(-1)"
-              class="w-10 h-10 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 transition-all shadow hover:scale-105"
+              class="w-10 h-10 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 transition-all shadow hover:scale-105 active:scale-95"
           >
             <i class="fas fa-chevron-left text-primary-600"></i>
           </button>
@@ -71,7 +71,7 @@
 
           <button
               @click="changeDate(1)"
-              class="w-10 h-10 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 transition-all shadow hover:scale-105"
+              class="w-10 h-10 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 transition-all shadow hover:scale-105 active:scale-95"
           >
             <i class="fas fa-chevron-right text-primary-600"></i>
           </button>
@@ -79,14 +79,14 @@
 
         <button
             @click="currentDate = dayjs().format('YYYY-MM-DD')"
-            class="flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl transition-all shadow-lg hover:shadow-xl hover:transform hover:-translate-y-0.5"
+            class="flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl transition-all shadow-lg hover:shadow-xl hover:transform hover:-translate-y-0.5 active:translate-y-0"
         >
           <i class="fas fa-calendar-check mr-2"></i> 返回今天
         </button>
       </div>
 
       <!-- 主要内容 -->
-      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+      <div class="grid grid-cols-1 lg:grid-cols-[1fr_2fr_1fr] gap-6">
         <!-- 左侧面板 -->
         <div class="lg:col-span-1" data-aos="fade-right" data-aos-delay="100">
           <CommonEvents
@@ -98,7 +98,7 @@
         </div>
 
         <!-- 中间面板 - 日历 -->
-        <div class="lg:col-span-2" data-aos="fade-up" data-aos-delay="200">
+        <div class="lg:col-span-1" data-aos="fade-up" data-aos-delay="200">
           <CalendarView
               :view="view"
               :currentDate="currentDate"
@@ -132,8 +132,9 @@
     <!-- 模态框 -->
     <EventModal
         v-if="showEventModal"
-        :event="editingEvent || newEvent"
+        :event="editingEvent"
         :isEditing="!!editingEvent"
+        :isOpen="showEventModal"
         @close="closeModal"
         @save="saveEvent"
         @delete="deleteEvent"
@@ -141,6 +142,7 @@
 
     <CommonEventModal
         v-if="showCommonEventModal"
+        :isOpen="showCommonEventModal"
         @close="closeCommonModal"
         @save="saveCommonEvent"
     />
@@ -157,6 +159,8 @@ import CommonEvents from './components/CommonEvents.vue';
 import EventModal from './components/EventModal.vue';
 import CommonEventModal from './components/CommonEventModal.vue';
 import LoginModal from './components/LoginModal.vue';
+import AOS from 'aos';
+import 'aos/dist/aos.css';
 
 dayjs.locale('zh-cn');
 
@@ -235,20 +239,6 @@ const commonEvents = ref([
   }
 ]);
 
-// 新事件模板
-const newEvent = ref({
-  id: null,
-  title: '',
-  date: selectedDate.value,
-  startTime: '10:00',
-  duration: 60,
-  location: '',
-  color: '#645eff',
-  creator: null,
-  participants: [],
-  completed: false
-});
-
 // 计算属性
 const displayDate = computed(() => {
   if (view.value === 'day') {
@@ -279,24 +269,11 @@ const changeDate = (offset) => {
 
 const selectDate = (date) => {
   selectedDate.value = date;
-  newEvent.value.date = date;
 };
 
 const closeModal = () => {
   showEventModal.value = false;
   editingEvent.value = null;
-  newEvent.value = {
-    id: null,
-    title: '',
-    date: selectedDate.value,
-    startTime: '10:00',
-    duration: 60,
-    location: '',
-    color: '#645eff',
-    creator: null,
-    participants: [],
-    completed: false
-  };
 };
 
 const closeCommonModal = () => {
@@ -430,6 +407,13 @@ const handleLogin = (userData) => {
 
 // 初始化
 onMounted(() => {
+  AOS.init({
+    duration: 800,
+    easing: 'ease-out-quart',
+    once: true,
+    mirror: false
+  });
+
   const savedEvents = localStorage.getItem('events');
   if (savedEvents) {
     events.value = JSON.parse(savedEvents);
@@ -439,6 +423,13 @@ onMounted(() => {
   if (savedCommonEvents) {
     commonEvents.value = JSON.parse(savedCommonEvents);
   }
+
+  const savedUser = localStorage.getItem('user');
+  if (savedUser) {
+    console.log(savedUser, 'ssssssssss')
+    user.value = JSON.parse(savedUser);
+    showLoginModal.value = false;
+  }
 });
 </script>
 
@@ -478,4 +469,4 @@ button:hover {
 button:active {
   transform: translateY(1px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index ca603bd..8311456 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-white rounded-2xl shadow-soft p-6">
+  <div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft p-6">
     <!-- 月视图 -->
-    <div v-if="view === 'month'" class="month-view">
+    <div v-if="view === 'month'" class="month-view" data-aos="fade-up" data-aos-duration="500">
       <div class="grid grid-cols-7 gap-1">
         <div
             v-for="day in ['日', '一', '二', '三', '四', '五', '六']"
@@ -20,8 +20,11 @@
             @dragover.prevent="handleDragOver($event, day.date)"
             @dragleave="handleDragLeave"
             @drop="handleDropEvent($event, day.date)"
-            :class="{'bg-primary-50': selectedDate === day.date}"
-            class="calendar-cell dropzone rounded-xl border border-gray-100 p-3 cursor-pointer transition-all relative min-h-[120px]"
+            :class="{
+            'bg-primary-50': selectedDate === day.date,
+            'drag-over': isDragOverCell === day.date
+          }"
+            class="calendar-cell dropzone rounded-xl border border-gray-100 p-3 cursor-pointer transition-all relative min-h-[120px] hover:shadow-md"
         >
           <!-- 日期和工作状态 -->
           <div class="flex justify-between items-start">
@@ -59,25 +62,28 @@
           </div>
 
           <!-- 事件展示 -->
-          <div v-if="hasEvent(day.date)" class="mt-2 text-xs truncate max-w-full">
-            {{ getFirstEventTitle(day.date) }}
-          </div>
-
-          <!-- 事件指示器 -->
-          <div v-if="hasEvent(day.date)" class="absolute bottom-3 right-3 flex">
-            <span
-                v-for="(color, index) in getEventColorsForDay(day.date)"
-                :key="index"
-                class="event-dot"
-                :style="{backgroundColor: color}"
-            ></span>
+          <div v-if="hasEvent(day.date)" class="mt-2 text-xs max-w-full overflow-hidden">
+            <div
+                v-for="(event, idx) in getEventsForDate(day.date).slice(0, 2)"
+                :key="idx"
+                class="truncate mb-1 flex items-center"
+            >
+              <span
+                  class="event-dot mr-1"
+                  :style="{ backgroundColor: event.color }"
+              ></span>
+              {{ event.title }}
+            </div>
+            <div v-if="getEventsForDate(day.date).length > 2" class="text-gray-500">
+              +{{ getEventsForDate(day.date).length - 2 }}个日程
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <!-- 周视图 -->
-    <div v-else-if="view === 'week'" class="week-view">
+    <div v-else-if="view === 'week'" class="week-view" data-aos="fade-up" data-aos-duration="500">
       <div class="flex mb-3 bg-gray-50 rounded-lg">
         <div class="w-20"></div>
         <div
@@ -85,7 +91,7 @@
             :key="index"
             @click="selectDate(day.format('YYYY-MM-DD'))"
             :class="{'bg-primary-100': selectedDate === day.format('YYYY-MM-DD')}"
-            class="flex-1 text-center py-3 rounded-lg transition-colors cursor-pointer"
+            class="flex-1 text-center py-3 rounded-lg transition-colors cursor-pointer hover:bg-gray-100"
         >
           <p class="font-medium text-gray-700">{{ day.format('ddd') }}</p>
           <p
@@ -120,7 +126,8 @@
               @drop="handleDropEvent($event, day.format('YYYY-MM-DD'), (hour + 8) + ':00')"
               :class="{
               'bg-gray-50': index % 2 === 0,
-              'border-l border-gray-200': index > 0
+              'border-l border-gray-200': index > 0,
+              'drag-over': isDragOverCell === day.format('YYYY-MM-DD') + '-' + (hour + 8)
             }"
               class="flex-1 min-h-16 p-2 dropzone"
           >
@@ -128,7 +135,7 @@
                 v-for="event in getEventsForDate(day.format('YYYY-MM-DD'), (hour + 8) + ':00')"
                 :key="event.id"
                 @click="showEventDetail(event)"
-                class="text-xs p-2 rounded-lg mb-1 truncate"
+                class="text-xs p-2 rounded-lg mb-1 truncate cursor-pointer hover:shadow-sm"
                 :style="{
                 backgroundColor: `${event.color}10`,
                 borderLeft: `3px solid ${event.color}`
@@ -142,7 +149,7 @@
     </div>
 
     <!-- 日视图 -->
-    <div v-else class="day-view">
+    <div v-else class="day-view" data-aos="fade-up" data-aos-duration="500">
       <div
           class="flex items-center justify-center py-3 mb-4 rounded-xl day-header"
           @click="selectDate(currentDate)"
@@ -175,6 +182,9 @@
               @dragover.prevent="handleDragOver($event, currentDay.format('YYYY-MM-DD'), (hour + 7) + ':00')"
               @dragleave="handleDragLeave"
               @drop="handleDropEvent($event, currentDay.format('YYYY-MM-DD'), (hour + 7) + ':00')"
+              :class="{
+              'drag-over': isDragOverCell === currentDay.format('YYYY-MM-DD') + '-' + (hour + 7)
+            }"
               class="flex-1 min-h-16 p-3 dropzone"
           >
             <div
@@ -183,7 +193,7 @@
                 draggable="true"
                 @dragstart="handleDragStart($event, event, 'event')"
                 @dragend="handleDragEnd"
-                class="schedule-item mb-2 p-3 rounded-lg shadow-sm cursor-pointer border-l-4"
+                class="schedule-item mb-2 p-3 rounded-lg shadow-sm cursor-pointer border-l-4 hover:shadow-md"
                 :style="{
                 backgroundColor: `${event.color}10`,
                 borderLeftColor: event.color
@@ -205,7 +215,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps, defineEmits } from 'vue';
+import { computed, defineProps, defineEmits, ref } from 'vue';
 import dayjs from 'dayjs';
 import { getLunarDate, getFestival, getSolarTerm, isHoliday } from '@/utils/calendarUtils';
 
@@ -219,6 +229,9 @@ const props = defineProps({
 
 const emit = defineEmits(['select-date', 'show-event-detail', 'drop-event', 'drag-start', 'drag-end']);
 
+// 拖拽状态
+const isDragOverCell = ref(null);
+
 // 计算月视图日期
 const monthDays = computed(() => {
   const startDay = dayjs(props.currentDate).startOf('month').startOf('week');
@@ -257,16 +270,15 @@ const hasEvent = (date) => {
   return props.events.some(e => e.date === date);
 };
 
-// 获取当天第一个事件的标题
-const getFirstEventTitle = (date) => {
-  const events = props.events.filter(e => e.date === date);
-  return events.length > 0 ? events[0].title : '';
-};
+// 获取当天的所有事件
+const getEventsForDate = (date, time = null) => {
+  let filteredEvents = props.events.filter(e => e.date === date);
 
-// 获取当天所有事件颜色
-const getEventColorsForDay = (date) => {
-  const events = props.events.filter(e => e.date === date);
-  return [...new Set(events.map(e => e.color))];
+  if (time) {
+    filteredEvents = filteredEvents.filter(e => e.startTime === time);
+  }
+
+  return filteredEvents;
 };
 
 // 检查是否是今天
@@ -279,17 +291,6 @@ const isWorkDayOnWeekend = (date) => {
   return false;
 };
 
-// 获取指定时间的日程
-const getEventsForDate = (date, time = null) => {
-  let filteredEvents = props.events.filter(e => e.date === date);
-
-  if (time) {
-    filteredEvents = filteredEvents.filter(e => e.startTime === time);
-  }
-
-  return filteredEvents;
-};
-
 const selectDate = (date) => {
   emit('select-date', date);
 };
@@ -310,17 +311,23 @@ const handleDragEnd = () => {
 
 // 处理拖拽悬停
 const handleDragOver = (event, date, time = null) => {
-  event.currentTarget.classList.add('drag-over');
+  // 生成唯一标识，用于标记当前拖拽悬停的单元格
+  if (time) {
+    isDragOverCell.value = `${date}-${time}`;
+  } else {
+    isDragOverCell.value = date;
+  }
+  event.preventDefault();
 };
 
 // 处理拖拽离开
 const handleDragLeave = (event) => {
-  event.currentTarget.classList.remove('drag-over');
+  isDragOverCell.value = null;
 };
 
 // 处理放置事件
 const handleDropEvent = (event, date, time = null) => {
-  event.currentTarget.classList.remove('drag-over');
+  isDragOverCell.value = null;
   emit('drop-event', event, date, time);
 };
 </script>
@@ -400,4 +407,4 @@ const handleDropEvent = (event, date, time = null) => {
 .day-header {
   background: linear-gradient(to right, #f0f4ff, #e0e7ff);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/CommonEventModal.vue b/src/components/CommonEventModal.vue
index 1a68cc6..ff9f156 100644
--- a/src/components/CommonEventModal.vue
+++ b/src/components/CommonEventModal.vue
@@ -1,101 +1,141 @@
 <template>
-  <transition name="modal">
-    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4 py-6 backdrop-blur-sm">
-      <div class="modal-container bg-white rounded-2xl w-full max-w-md mx-auto shadow-soft-lg transition-all duration-300 transform scale-100">
-        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-          <h3 class="text-lg font-bold text-gray-800">添加快捷日程</h3>
-
-          <button @click="$emit('close')" class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center transition-colors">
-            <i class="fas fa-times text-gray-600"></i>
-
-          </button>
-
-        </div>
-
-
-        <div class="p-6">
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700 mb-1">标题</label>
-
-            <input
-                v-model="eventData.title"
-                type="text"
-                placeholder="快捷日程名称"
-                required
-                class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-none transition-colors"
-                :class="{'border-red-500': !eventData.title}"
-            >
-            <p v-if="!eventData.title" class="text-red-500 text-xs mt-1">标题不能为空</p>
-
-          </div>
-
-
-          <div class="grid grid-cols-2 gap-4 mb-6">
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-1">默认持续时间</label>
-
-              <div class="relative">
-                <input
-                    v-model="eventData.duration"
-                    type="number"
-                    min="5"
-                    max="240"
-                    required
-                    class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-none transition-colors pr-12"
-                    :class="{'border-red-500': !eventData.duration}"
-                >
-                <span class="absolute inset-y-0 right-4 flex items-center text-gray-500">分钟</span>
-
-                <p v-if="!eventData.duration" class="text-red-500 text-xs mt-1">请填写持续时间</p>
-
-              </div>
-
-            </div>
-
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">选择颜色</label>
-
-              <div class="flex gap-2">
-                <button
-                    v-for="color in colors"
-                    :key="color"
-                    @click="eventData.color = color"
-                    :class="{'ring-2 ring-offset-2 ring-gray-800': eventData.color === color}"
-                    class="w-8 h-8 rounded-full focus:outline-none transition-all hover:scale-110"
-                    :style="{ backgroundColor: color }"
-                ></button>
-
-              </div>
-
-            </div>
-
-          </div>
-
-
-          <div class="flex justify-end space-x-3">
-            <button
-                @click="save"
-                class="px-5 py-2.5 text-sm rounded-lg bg-gradient-to-r from-secondary-500 to-secondary-700 hover:from-secondary-600 hover:to-secondary-800 text-white transition-colors font-medium hover:shadow-md"
-            >
-              添加快捷日程
+  <transition
+      enter-active-class="transition-all duration-300 ease-out"
+      leave-active-class="transition-all duration-200 ease-in"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+  >
+    <div v-if="isOpen" class="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 px-4 py-6">
+      <transition
+          enter-active-class="transition-all duration-300 ease-out"
+          leave-active-class="transition-all duration-200 ease-in"
+          enter-from-class="opacity-0 translate-y-4"
+          enter-to-class="opacity-100 translate-y-0"
+          leave-from-class="opacity-100 translate-y-0"
+          leave-to-class="opacity-0 translate-y-4"
+      >
+        <div v-if="isOpen" class="modal-container bg-white rounded-2xl w-full max-w-md mx-auto shadow-2xl transition-all duration-300 transform">
+          <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
+            <h3 class="text-lg font-bold text-gray-800">添加快捷日程</h3>
+            <button @click="$emit('close')" class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center transition-colors hover:scale-110 active:scale-95">
+              <i class="fas fa-times text-gray-600"></i>
             </button>
-
           </div>
 
+          <div class="p-6">
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">
+                标题 <span class="text-red-500">*</span>
+              </label>
+              <input
+                  v-model="eventData.title"
+                  type="text"
+                  placeholder="快捷日程名称"
+                  required
+                  class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
+                  :class="{'border-red-500 ring-2 ring-red-200': !eventData.title && touched.title}"
+                  @blur="touched.title = true"
+              >
+              <p v-if="!eventData.title && touched.title" class="text-red-500 text-xs mt-1 animate-pulse">
+                <i class="fas fa-exclamation-circle mr-1"></i> 标题不能为空
+              </p>
+            </div>
+
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">
+                描述
+              </label>
+              <textarea
+                  v-model="eventData.description"
+                  placeholder="可选：添加日程描述"
+                  rows="3"
+                  class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
+              ></textarea>
+            </div>
+
+            <div class="grid grid-cols-2 gap-4 mb-6">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                  默认持续时间 <span class="text-red-500">*</span>
+                </label>
+                <div class="relative">
+                  <input
+                      v-model="eventData.duration"
+                      type="number"
+                      min="5"
+                      max="240"
+                      required
+                      class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200 pr-12"
+                      :class="{'border-red-500 ring-2 ring-red-200': !eventData.duration && touched.duration}"
+                      @blur="touched.duration = true"
+                  >
+                  <span class="absolute inset-y-0 right-4 flex items-center text-gray-500">分钟</span>
+                  <p v-if="!eventData.duration && touched.duration" class="text-red-500 text-xs mt-1 animate-pulse">
+                    <i class="fas fa-exclamation-circle mr-1"></i> 请填写持续时间
+                  </p>
+                </div>
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">选择颜色</label>
+                <div class="flex gap-2">
+                  <button
+                      v-for="color in colors"
+                      :key="color"
+                      @click="eventData.color = color"
+                      :class="{'ring-2 ring-offset-2 ring-gray-800': eventData.color === color}"
+                      class="w-8 h-8 rounded-full focus:outline-none transition-all hover:scale-110 active:scale-95"
+                      :style="{ backgroundColor: color }"
+                  ></button>
+                </div>
+              </div>
+            </div>
+
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">
+                重复设置
+              </label>
+              <select
+                  v-model="eventData.repeat"
+                  class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
+              >
+                <option value="">不重复</option>
+                <option value="daily">每天</option>
+                <option value="weekly">每周</option>
+                <option value="monthly">每月</option>
+              </select>
+            </div>
+
+            <div class="flex justify-end space-x-3">
+              <button
+                  @click="$emit('close')"
+                  class="px-5 py-2.5 text-sm rounded-lg border border-gray-300 hover:bg-gray-50 text-gray-700 transition-colors font-medium hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"
+              >
+                取消
+              </button>
+              <button
+                  @click="save"
+                  class="px-5 py-2.5 text-sm rounded-lg bg-gradient-to-r from-secondary-500 to-secondary-700 hover:from-secondary-600 hover:to-secondary-800 text-white transition-colors font-medium hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"
+              >
+                添加快捷日程
+              </button>
+            </div>
+          </div>
         </div>
-
-      </div>
-
+      </transition>
     </div>
-
   </transition>
-
 </template>
 
-
 <script setup>
 import { ref } from 'vue';
 
+const props = defineProps({
+  isOpen: Boolean
+});
+
 const emit = defineEmits(['close', 'save']);
 
 const colors = [
@@ -108,32 +148,37 @@ const colors = [
 
 const eventData = ref({
   title: '',
+  description: '',
   duration: 30,
-  color: colors[1]
+  color: colors[1],
+  repeat: ''
+});
+
+const touched = ref({
+  title: false,
+  duration: false
 });
 
 const save = () => {
-  if (!eventData.value.title.trim()) {
+  // 标记字段为已触摸
+  touched.value.title = true;
+  touched.value.duration = true;
+
+  if (!eventData.value.title.trim() || !eventData.value.duration) {
     return;
   }
+
   emit('save', eventData.value);
 };
 </script>
 
-
 <style scoped>
-/* 模态框动画 */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
 .modal-container {
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-</style>
\ No newline at end of file
+
+button {
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/CommonEvents.vue b/src/components/CommonEvents.vue
index 870245f..4e383cf 100644
--- a/src/components/CommonEvents.vue
+++ b/src/components/CommonEvents.vue
@@ -1,13 +1,12 @@
 <template>
-  <div>
+  <div data-aos="zoom-in" data-aos-duration="500">
     <!-- 说明卡片 -->
-    <div class="bg-white rounded-2xl shadow-soft overflow-hidden mb-6" data-aos="zoom-in">
+    <div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft overflow-hidden mb-6">
       <div class="bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-4">
         <h2 class="text-white font-bold text-lg flex items-center">
           <i class="fas fa-info-circle mr-2"></i>
           操作指南
         </h2>
-
       </div>
 
       <div class="p-6">
@@ -16,69 +15,50 @@
             <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-xs mr-3">
               1
             </div>
-
             <div>
               <p class="font-medium">拖放快捷日程到日历</p>
-
               <p class="text-sm text-gray-600 mt-1">将左侧的快捷日程拖放到日历中的日期添加新日程</p>
-
             </div>
-
           </li>
 
           <li class="flex">
             <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-xs mr-3">
               2
             </div>
-
             <div>
               <p class="font-medium">拖放日程到其他日期</p>
-
               <p class="text-sm text-gray-600 mt-1">将右侧详情中的日程拖放到日历中的其他日期进行移动</p>
-
             </div>
-
           </li>
 
           <li class="flex">
             <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-xs mr-3">
               3
             </div>
-
             <div>
               <p class="font-medium">自定义快捷日程</p>
-
               <p class="text-sm text-gray-600 mt-1">点击底部按钮添加快捷日程模板</p>
-
             </div>
-
           </li>
-
         </ul>
-
       </div>
-
     </div>
 
-
     <!-- 常用日程卡片 -->
-    <div class="bg-white rounded-2xl shadow-soft overflow-hidden" data-aos="zoom-in" data-aos-delay="100">
+    <div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft overflow-hidden" data-aos="zoom-in" data-aos-delay="100">
       <div class="flex justify-between items-center bg-gradient-to-r from-secondary-500 to-secondary-700 px-6 py-4">
         <h2 class="text-white font-bold text-lg flex items-center">
           <i class="fas fa-star mr-2"></i>
           常用日程
           <span class="ml-2 text-sm bg-white text-secondary-700 px-2 py-1 rounded-md">可拖拽</span>
-
         </h2>
 
         <button
             @click="$emit('add-common-event')"
-            class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center transition-colors hover:bg-white/30 hover:scale-110"
+            class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center transition-colors hover:bg-white/30 hover:scale-110 hover:shadow-sm active:scale-95"
         >
           <i class="fas fa-plus text-white text-sm"></i>
-
         </button>
-
       </div>
 
       <div class="p-5 max-h-[420px] overflow-y-auto">
@@ -98,72 +78,51 @@
 
             <div class="ml-4 flex-1">
               <h3 class="font-medium text-gray-800">{{ event.title }}</h3>
-
               <div class="flex items-center mt-1 text-xs text-gray-500">
                 <span>持续: {{ event.duration }}分钟</span>
-
                 <span class="mx-2">|</span>
-
                 <span>类型: 快捷</span>
-
               </div>
-
             </div>
 
             <div class="flex">
               <span class="text-gray-400 group-hover:text-primary-600 transition-colors">
                 <i class="fas fa-grip-lines"></i>
-
               </span>
-
             </div>
-
           </div>
-
         </div>
 
-
         <div v-if="commonEvents.length === 0" class="py-8 text-center text-gray-500">
           <div
               class="bg-gradient-to-br from-gray-100 to-gray-200 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"
           >
             <i class="fas fa-inbox text-2xl text-gray-400"></i>
-
           </div>
-
           <p>暂无快捷日程</p>
-
           <button
               @click="$emit('add-common-event')"
-              class="mt-4 inline-flex items-center px-4 py-2 bg-gradient-to-r from-secondary-500 to-secondary-700 hover:from-secondary-600 hover:to-secondary-800 text-white rounded-xl transition-all hover:shadow-md"
+              class="mt-4 inline-flex items-center px-4 py-2 bg-gradient-to-r from-secondary-500 to-secondary-700 hover:from-secondary-600 hover:to-secondary-800 text-white rounded-xl transition-all hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"
           >
             <i class="fas fa-plus mr-2"></i>
             添加快捷日程
           </button>
-
         </div>
 
-
         <div class="mt-4">
           <button
               @click="$emit('add-common-event')"
-              class="w-full flex items-center justify-center py-3 bg-gray-50 hover:bg-gray-100 rounded-xl text-secondary-600 font-medium transition-colors hover:shadow-sm"
+              class="w-full flex items-center justify-center py-3 bg-gray-50 hover:bg-gray-100 rounded-xl text-secondary-600 font-medium transition-colors hover:shadow-sm hover:-translate-y-0.5 active:translate-y-0"
           >
             <i class="fas fa-plus-circle mr-2"></i>
             新增快捷日程
           </button>
-
         </div>
-
       </div>
-
     </div>
-
   </div>
-
 </template>
 
-
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 
@@ -182,7 +141,6 @@ const handleDragEnd = () => {
 };
 </script>
 
-
 <style scoped>
 .common-event {
   transition: all 0.3s ease;
@@ -191,5 +149,11 @@ const handleDragEnd = () => {
 
 .common-event:hover {
   transform: translateX(5px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+}
+
+button {
+  transition: all 0.3s ease;
+  cursor: pointer;
 }
 </style>
diff --git a/src/components/EventDetail.vue b/src/components/EventDetail.vue
index df61e54..04391f9 100644
--- a/src/components/EventDetail.vue
+++ b/src/components/EventDetail.vue
@@ -1,10 +1,13 @@
 <template>
   <div
-      class="bg-white rounded-2xl shadow-soft p-6 h-full"
+      class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft p-6 h-full"
       @dragover.prevent="handleDragOver"
       @dragleave="handleDragLeave"
       @drop="handleDrop"
       :class="{'drag-over': isDragOver}"
+      data-aos="fade-left"
+      data-aos-duration="500"
+      data-aos-delay="300"
   >
     <div
         v-if="!selectedDate"
@@ -12,29 +15,20 @@
         data-aos="fade-in"
     >
       <div
-          class="bg-gradient-to-br from-gray-200 to-gray-300 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-5">
-        <i class="fas fa-calendar-star text-4xl text-gray-600"></i>
-
+          class="bg-gradient-to-br from-gray-100 to-gray-200 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-5">
+        <i class="fas fa-calendar-star text-4xl text-gray-400"></i>
       </div>
 
       <h3 class="text-xl font-bold text-gray-800 mb-2">选择日期查看详情</h3>
-
       <p class="text-gray-600 mb-6">点击日历中的日期查看该日的日程详情</p>
-
       <div class="flex">
         <span class="event-dot bg-primary-600"></span>
-
         <span class="event-dot bg-secondary-500 ml-1"></span>
-
         <span class="event-dot bg-accent-500 ml-1"></span>
-
       </div>
-
       <p class="text-gray-500 mt-4">将快捷日程拖到此处添加到选中日期</p>
-
     </div>
 
-
     <div v-if="selectedDate" class="h-full flex flex-col">
       <div class="pb-4 border-b border-gray-100" data-aos="fade-in">
         <div class="flex justify-between">
@@ -43,46 +37,36 @@
             <span class="text-lg text-primary-600 ml-2">
               {{ dayjs(selectedDate).format('dddd') }}
             </span>
-
           </h2>
 
           <button
               @click="$emit('add-event')"
-              class="flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl transition-all shadow-md hover:shadow-lg"
+              class="flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0"
           >
             <i class="fas fa-plus mr-2"></i>
             添加日程
           </button>
-
         </div>
 
-
         <div class="mt-3 flex flex-wrap gap-2">
           <span v-if="getFestival(selectedDate)" class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm">
-            <i class="fas fa-gift mr-1"></i>
- {{ getFestival(selectedDate) }}
+            <i class="fas fa-gift mr-1"></i> {{ getFestival(selectedDate) }}
           </span>
 
           <span v-if="getSolarTerm(selectedDate)" class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">
-            <i class="fas fa-leaf mr-1"></i>
- {{ getSolarTerm(selectedDate) }}
+            <i class="fas fa-leaf mr-1"></i> {{ getSolarTerm(selectedDate) }}
           </span>
 
           <span v-if="isHoliday(selectedDate)" class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm">
-            <i class="fas fa-umbrella-beach mr-1"></i>
- 休息日
+            <i class="fas fa-umbrella-beach mr-1"></i> 休息日
           </span>
 
           <span v-else class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">
-            <i class="fas fa-briefcase mr-1"></i>
- 工作日
+            <i class="fas fa-briefcase mr-1"></i> 工作日
           </span>
-
         </div>
-
       </div>
 
-
       <div class="mt-4 flex-1 overflow-y-auto">
         <div class="flex justify-between items-center mb-3">
           <h3 class="font-semibold text-gray-800 flex items-center">
@@ -93,16 +77,14 @@
           <span class="text-sm text-gray-500">
             共 {{ getEventsForDate(selectedDate).length }} 个日程
           </span>
-
         </div>
 
-
         <div
             v-if="getEventsForDate(selectedDate).length > 0"
             class="space-y-3"
         >
           <div
-              v-for="event in getEventsForDate(selectedDate)"
+              v-for="(event, index) in getEventsForDate(selectedDate)"
               :key="event.id"
               draggable="true"
               @dragstart="handleDragStart($event, event)"
@@ -119,31 +101,23 @@
               <div class="flex-1">
                 <div class="flex justify-between">
                   <h4 class="font-semibold text-gray-800">{{ event.title }}</h4>
-
                   <div>
                     <button
                         @click.stop="$emit('edit-event', event)"
-                        class="w-8 h-8 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 text-gray-500 hover:text-primary-600"
+                        class="w-8 h-8 flex items-center justify-center rounded-full bg-white hover:bg-gray-100 text-gray-500 hover:text-primary-600 hover:scale-110 active:scale-95"
                     >
                       <i class="fas fa-edit"></i>
-
                     </button>
-
                   </div>
-
                 </div>
 
-
                 <div class="mt-2 flex flex-wrap gap-2">
                   <span class="inline-flex items-center text-xs px-3 py-1 rounded-full bg-white shadow-sm">
                     <i class="fas fa-clock mr-1" :style="{ color: event.color }"></i>
-
                     <span :style="{ color: event.color }">
                       {{ event.startTime }}
                       <span v-if="event.duration">({{ event.duration }}分钟)</span>
-
                     </span>
-
                   </span>
 
                   <span
@@ -151,102 +125,77 @@
                       class="inline-flex items-center text-xs px-3 py-1 rounded-full bg-white shadow-sm"
                   >
                     <i class="fas fa-location-dot mr-1 text-gray-500"></i>
-
                     {{ event.location }}
                   </span>
-
                 </div>
 
-
                 <!-- 新增字段 -->
                 <div class="mt-4 grid grid-cols-2 gap-3">
                   <div>
                     <p class="text-sm text-gray-500">发起人</p>
-
                     <p class="font-medium flex items-center">
                       <i class="fas fa-user-circle mr-2 text-primary-500"></i>
-
-                      {{ event.creator?.name || '测试' }}
+                      {{ event.creator?.name || '未设置' }}
                     </p>
-
                   </div>
 
-
                   <div>
                     <p class="text-sm text-gray-500">状态</p>
-
                     <div>
                       <span v-if="event.completed" class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
                         已完成
                       </span>
-
                       <span v-else class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">
                         进行中
                       </span>
-
                     </div>
-
                   </div>
-
                 </div>
 
-
                 <div class="mt-3">
                   <p class="text-sm text-gray-500">参与人</p>
-
                   <div class="flex flex-wrap mt-1">
-                    <div v-for="(participant, index) in event.participants" :key="index"
-                         class="flex items-center mr-3 mb-2">
+                    <div v-for="(participant, pIndex) in event.participants" :key="pIndex"
+                         class="flex items-center mr-3 mb-2 bg-gray-100 px-2 py-1 rounded-full">
                       <i class="fas fa-user mr-1 text-sm text-gray-500"></i>
-
                       <span class="text-sm">{{ participant.name }}</span>
-
                     </div>
-
+                    <div v-if="!event.participants || event.participants.length === 0" class="text-gray-400 text-xs">
+                      暂无参与人
+                    </div>
                   </div>
-
                 </div>
 
+                <div v-if="event.description" class="mt-3 text-sm text-gray-600">
+                  <p class="font-medium text-gray-700 mb-1">描述：</p>
+                  <p class="whitespace-pre-line">{{ event.description }}</p>
+                </div>
               </div>
-
             </div>
-
           </div>
-
         </div>
 
-
         <div v-else class="py-8 text-center text-gray-500" data-aos="fade-in">
           <div
               class="bg-gradient-to-br from-gray-100 to-gray-200 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"
           >
             <i class="fas fa-calendar-plus text-2xl text-gray-400"></i>
-
           </div>
-
           <p>今日暂无日程安排</p>
-
           <p class="text-sm mt-2 text-gray-500 mb-4">点击"添加日程"或拖放快捷日程创建计划</p>
-
           <button
               @click="$emit('add-event')"
-              class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl transition-all shadow-md hover:shadow-lg"
+              class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0"
           >
             <i class="fas fa-plus mr-2"></i>
             添加新日程
           </button>
-
         </div>
-
       </div>
-
     </div>
-
   </div>
-
 </template>
 
-
 <script setup>
 import { defineProps, defineEmits, ref } from 'vue';
 import dayjs from 'dayjs';
@@ -331,4 +280,9 @@ const handleDrop = (event) => {
     box-shadow: inset 0 0 0 0 rgba(100, 94, 255, 0);
   }
 }
-</style>
\ No newline at end of file
+
+button {
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/EventModal.vue b/src/components/EventModal.vue
index 085c408..1aa27e9 100644
--- a/src/components/EventModal.vue
+++ b/src/components/EventModal.vue
@@ -1,174 +1,216 @@
 <template>
-  <transition name="modal">
-    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4 py-6 backdrop-blur-sm">
-      <div class="modal-container bg-white rounded-2xl w-full max-w-md mx-auto shadow-soft-lg transition-all duration-300 transform scale-100">
-        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-          <h3 class="text-lg font-bold text-gray-800">
-            {{ isEditing ? '编辑日程' : '添加新日程' }}
-          </h3>
-
-          <button @click="$emit('close')" class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center transition-colors">
-            <i class="fas fa-times text-gray-600"></i>
-
-          </button>
-
-        </div>
-
-
-        <div class="p-6">
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700 mb-1">标题</label>
-
-            <input
-                v-model="eventData.title"
-                type="text"
-                placeholder="日程标题"
-                required
-                class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-none transition-colors"
-                :class="{'border-red-500': !eventData.title}"
-            >
-            <p v-if="!eventData.title" class="text-red-500 text-xs mt-1">标题不能为空</p>
+  <!-- 外层背景动画 -->
+  <transition
+      enter-active-class="transition-all duration-300 ease-out"
+      leave-active-class="transition-all duration-200 ease-in"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+  >
+    <div v-if="isOpen" class="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 px-4 py-6">
+      <!-- 内层模态框动画 -->
+      <transition
+          enter-active-class="transition-all duration-300 ease-out"
+          leave-active-class="transition-all duration-200 ease-in"
+          enter-from-class="opacity-0 translate-y-4"
+          enter-to-class="opacity-100 translate-y-0"
+          leave-from-class="opacity-100 translate-y-0"
+          leave-to-class="opacity-0 translate-y-4"
+      >
+        <div class="modal-container bg-white rounded-2xl w-full max-w-md mx-auto shadow-soft-lg overflow-hidden">
+          <!-- 模态框头部 -->
+          <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-gradient-to-r from-gray-50 to-white">
+            <h3 class="text-lg font-bold text-gray-800 flex items-center">
+              <i class="fas fa-calendar-plus text-primary-500 mr-2"></i>
+              {{ isEditing ? '编辑日程' : '添加新日程' }}
+            </h3>
 
+            <button @click="$emit('close')" class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center transition-colors hover:scale-110 active:scale-95">
+              <i class="fas fa-times text-gray-600"></i>
+            </button>
           </div>
 
-
-          <div class="grid grid-cols-2 gap-4 mb-4">
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-1">日期</label>
-
+          <!-- 模态框主体内容 -->
+          <div class="p-6 overflow-y-auto max-h-[80vh]">
+            <!-- 标题输入 -->
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">
+                标题 <span class="text-red-500">*</span>
+              </label>
               <input
-                  v-model="eventData.date"
-                  type="date"
-                  required
-                  class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-none transition-colors"
-              >
-            </div>
-
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-1">时间</label>
-
-              <input
-                  v-model="eventData.startTime"
-                  type="time"
-                  required
-                  class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-none transition-colors"
-              >
-            </div>
-
-          </div>
-
-
-          <div class="grid grid-cols-2 gap-4 mb-4">
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-1">地点</label>
-
-              <input
-                  v-model="eventData.location"
+                  v-model="eventData.title"
                   type="text"
-                  placeholder="如：会议室"
-                  class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-none transition-colors"
+                  placeholder="日程标题"
+                  required
+                  class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
+                  :class="{'border-red-500 ring-2 ring-red-200': !eventData.title && touched.title}"
+                  @blur="touched.title = true"
               >
+              <p v-if="!eventData.title && touched.title" class="text-red-500 text-xs mt-1 animate-pulse">
+                <i class="fas fa-exclamation-circle mr-1"></i> 标题不能为空
+              </p>
             </div>
 
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-1">持续时间</label>
-
-              <div class="relative">
+            <!-- 日期和时间 -->
+            <div class="grid grid-cols-2 gap-4 mb-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                  日期 <span class="text-red-500">*</span>
+                </label>
                 <input
-                    v-model="eventData.duration"
-                    type="number"
-                    min="5"
-                    max="480"
+                    v-model="eventData.date"
+                    type="date"
                     required
-                    class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-none transition-colors pr-12"
-                    :class="{'border-red-500': !eventData.duration}"
+                    class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
                 >
-                <span class="absolute inset-y-0 right-4 flex items-center text-gray-500">分钟</span>
-
-                <p v-if="!eventData.duration" class="text-red-500 text-xs mt-1">请填写持续时间</p>
-
               </div>
 
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                  时间 <span class="text-red-500">*</span>
+                </label>
+                <input
+                    v-model="eventData.startTime"
+                    type="time"
+                    required
+                    class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
+                >
+              </div>
             </div>
 
-          </div>
-
-
-          <!-- 新增字段 -->
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
-
-            <div class="flex space-x-4">
-              <label class="flex items-center">
-                <input type="radio" v-model="eventData.completed" :value="false" class="text-primary-600">
-                <span class="ml-2">进行中</span>
-
-              </label>
-
-              <label class="flex items-center">
-                <input type="radio" v-model="eventData.completed" :value="true" class="text-primary-600">
-                <span class="ml-2">已完成</span>
-
-              </label>
+            <!-- 地点和持续时间 -->
+            <div class="grid grid-cols-2 gap-4 mb-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">地点</label>
+                <input
+                    v-model="eventData.location"
+                    type="text"
+                    placeholder="如：会议室"
+                    class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
+                >
+              </div>
 
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                  持续时间 <span class="text-red-500">*</span>
+                </label>
+                <div class="relative">
+                  <input
+                      v-model="eventData.duration"
+                      type="number"
+                      min="5"
+                      max="480"
+                      required
+                      class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200 pr-12"
+                      :class="{'border-red-500 ring-2 ring-red-200': !eventData.duration && touched.duration}"
+                      @blur="touched.duration = true"
+                  >
+                  <span class="absolute inset-y-0 right-4 flex items-center text-gray-500">分钟</span>
+                  <p v-if="!eventData.duration && touched.duration" class="text-red-500 text-xs mt-1 animate-pulse">
+                    <i class="fas fa-exclamation-circle mr-1"></i> 请填写持续时间
+                  </p>
+                </div>
+              </div>
             </div>
 
-          </div>
+            <!-- 描述 -->
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
+              <textarea
+                  v-model="eventData.description"
+                  rows="3"
+                  placeholder="输入日程详细描述..."
+                  class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
+              ></textarea>
+            </div>
 
+            <!-- 参与人 -->
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">参与人</label>
+              <div class="flex flex-wrap gap-2">
+                <div v-for="(participant, index) in eventData.participants" :key="index"
+                     class="flex items-center bg-gray-100 px-3 py-1 rounded-full">
+                  <input
+                      v-model="participant.name"
+                      type="text"
+                      placeholder="姓名"
+                      class="bg-transparent outline-none text-sm w-20"
+                  >
+                  <button @click="removeParticipant(index)" class="ml-1 text-gray-400 hover:text-red-500">
+                    <i class="fas fa-times text-xs"></i>
+                  </button>
+                </div>
+                <button
+                    @click="addParticipant"
+                    class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-primary-600"
+                >
+                  <i class="fas fa-plus"></i>
+                </button>
+              </div>
+            </div>
 
-          <div class="mb-6">
-            <label class="block text-sm font-medium text-gray-700 mb-2">选择颜色</label>
+            <!-- 状态 -->
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
+              <div class="flex space-x-4">
+                <label class="flex items-center">
+                  <input type="radio" v-model="eventData.completed" :value="false" class="text-primary-600 focus:ring-primary-500">
+                  <span class="ml-2">进行中</span>
+                </label>
+                <label class="flex items-center">
+                  <input type="radio" v-model="eventData.completed" :value="true" class="text-primary-600 focus:ring-primary-500">
+                  <span class="ml-2">已完成</span>
+                </label>
+              </div>
+            </div>
 
-            <div class="flex gap-2">
+            <!-- 颜色选择 -->
+            <div class="mb-6">
+              <label class="block text-sm font-medium text-gray-700 mb-2">选择颜色</label>
+              <div class="flex gap-2">
+                <button
+                    v-for="color in colors"
+                    :key="color"
+                    @click="eventData.color = color"
+                    :class="{'ring-2 ring-offset-2 ring-gray-800': eventData.color === color}"
+                    class="w-8 h-8 rounded-full focus:outline-none transition-all hover:scale-110 active:scale-95"
+                    :style="{ backgroundColor: color }"
+                ></button>
+              </div>
+            </div>
+
+            <!-- 底部按钮 -->
+            <div class="flex justify-end space-x-3 pt-4 border-t border-gray-100">
               <button
-                  v-for="color in colors"
-                  :key="color"
-                  @click="eventData.color = color"
-                  :class="{'ring-2 ring-offset-2 ring-gray-800': eventData.color === color}"
-                  class="w-8 h-8 rounded-full focus:outline-none transition-all hover:scale-110"
-                  :style="{ backgroundColor: color }"
-              ></button>
-
+                  @click="$emit('delete')"
+                  v-if="isEditing"
+                  class="px-4 py-2 text-sm rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 flex items-center"
+              >
+                <i class="fas fa-trash-alt mr-2"></i> 删除
+              </button>
+              <button
+                  @click="save"
+                  class="px-5 py-2.5 text-sm rounded-lg bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white transition-colors font-medium hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 flex items-center"
+              >
+                <i class="fas fa-save mr-2"></i>
+                {{ isEditing ? '更新日程' : '添加日程' }}
+              </button>
             </div>
-
           </div>
-
-
-          <div class="flex justify-end space-x-3">
-            <button
-                @click="$emit('delete')"
-                v-if="isEditing"
-                class="px-4 py-2 text-sm rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
-            >
-              删除
-            </button>
-
-            <button
-                @click="save"
-                class="px-5 py-2.5 text-sm rounded-lg bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white transition-colors font-medium hover:shadow-md"
-            >
-              {{ isEditing ? '更新日程' : '添加日程' }}
-            </button>
-
-          </div>
-
         </div>
-
-      </div>
-
+      </transition>
     </div>
-
   </transition>
-
 </template>
 
-
 <script setup>
 import { ref, watch } from 'vue';
 
 const props = defineProps({
   event: Object,
-  isEditing: Boolean
+  isEditing: Boolean,
+  isOpen: Boolean
 });
 
 const emit = defineEmits(['close', 'save', 'delete']);
@@ -181,35 +223,125 @@ const colors = [
   '#8c6bed'
 ];
 
-const eventData = ref({ ...props.event });
+const defaultEventData = {
+  title: '',
+  date: '',
+  startTime: '10:00',
+  duration: 30,
+  location: '',
+  description: '',
+  color: colors[0],
+  completed: false,
+  participants: []
+};
+
+const eventData = ref({
+  ...defaultEventData,
+  ...(props.event || {})
+});
+
+const touched = ref({
+  title: false,
+  duration: false
+});
+
+// 添加参与人
+const addParticipant = () => {
+  if (!eventData.value.participants) {
+    eventData.value.participants = [];
+  }
+  eventData.value.participants.push({ name: '' });
+};
+
+// 移除参与人
+const removeParticipant = (index) => {
+  eventData.value.participants.splice(index, 1);
+};
 
 // 当传入的 event prop 变化时更新本地值
 watch(() => props.event, (newValue) => {
-  eventData.value = { ...newValue };
-});
+  eventData.value = {
+    ...defaultEventData,
+    ...newValue,
+    participants: newValue?.participants ? [...newValue.participants] : []
+  };
+}, { deep: true });
 
+// 保存事件
 const save = () => {
-  if (!eventData.value.title || !eventData.value.duration) {
+  // 标记字段为已触摸
+  touched.value.title = true;
+  touched.value.duration = true;
+
+  // 验证必填字段
+  if (!eventData.value.title.trim() || !eventData.value.duration) {
     return;
   }
-  emit('save', eventData.value);
+
+  // 过滤掉空白的参与人
+  const cleanedParticipants = eventData.value.participants?.filter(p => p.name.trim()) || [];
+
+  // 触发保存事件
+  emit('save', {
+    ...eventData.value,
+    participants: cleanedParticipants
+  });
 };
 </script>
 
-
 <style scoped>
-/* 模态框动画 */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
+/* 模态框容器动画 */
 .modal-container {
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  will-change: transform, opacity;
 }
-</style>
\ No newline at end of file
+
+/* 按钮通用样式 */
+button {
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+/* 单选按钮样式 */
+input[type="radio"] {
+  accent-color: #645eff;
+}
+
+/* 文本区域样式 */
+textarea {
+  resize: none;
+  min-height: 80px;
+}
+
+/* 背景模糊效果 */
+.backdrop-blur-sm {
+  backdrop-filter: blur(6px);
+}
+
+/* 通用过渡效果 */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 动画关键帧 */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* 错误提示动画 */
+.animate-pulse {
+  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue
index 7bfb419..b2af37c 100644
--- a/src/components/LoginModal.vue
+++ b/src/components/LoginModal.vue
@@ -1,75 +1,64 @@
 <template>
-  <transition name="modal">
-    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-100 px-4 py-6 backdrop-blur-sm">
+  <transition
+      enter-active-class="transition-all duration-300 ease-out"
+      leave-active-class="transition-all duration-200 ease-in"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+  >
+    <div v-if="showLoginModal" class="fixed inset-0 bg-gray-900 bg-opacity-70 flex items-center justify-center z-50 px-4 py-6 backdrop-blur-md">
       <div class="modal-container bg-white rounded-2xl w-full max-w-md mx-auto shadow-soft-lg transition-all duration-300 transform scale-100">
         <div class="p-8">
           <div class="text-center mb-6">
             <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center mx-auto mb-4">
               <i class="fas fa-calendar-alt text-white text-2xl"></i>
-
             </div>
-
             <h2 class="text-2xl font-bold text-gray-800">欢迎使用智能日程管家</h2>
-
             <p class="text-gray-600 mt-2">请登录您的账号</p>
-
           </div>
 
-
           <div class="mb-5">
             <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
-
             <input
                 v-model="loginData.username"
                 type="text"
-                class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-none transition-colors"
+                class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
                 placeholder="liqi"
                 required
             >
           </div>
 
-
           <div class="mb-6">
             <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
-
             <input
                 v-model="loginData.password"
                 type="password"
-                class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-none transition-colors"
+                class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-300 outline-none transition-colors duration-200"
                 placeholder="123456"
                 required
             >
           </div>
 
-
           <div class="mb-6">
             <label class="block text-sm font-medium text-gray-700 mb-1">团队</label>
-
             <div class="px-4 py-3 bg-gray-50 rounded-lg border border-gray-200">
               萧康云医技术开发团队-医生组
             </div>
-
           </div>
 
-
           <button
               @click="login"
-              class="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl font-medium transition-colors shadow-md hover:shadow-lg hover:-translate-y-0.5"
+              class="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800 text-white rounded-xl font-medium transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0"
           >
             登录
           </button>
-
         </div>
-
       </div>
-
     </div>
-
   </transition>
-
 </template>
 
-
 <script setup>
 import { ref } from 'vue';
 
@@ -85,34 +74,29 @@ const login = () => {
     return;
   }
 
-  // 模拟登录成功
+  // 登录成功后
   const user = {
     id: 'user-001',
     name: '李齐',
-    avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
+    avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=Bella',
     phone: '13800138000',
     email: 'liqi@example.com',
     team: '萧康云医技术开发团队-医生组'
   };
 
+  // 保存到localStorage
+  localStorage.setItem('user', JSON.stringify(user));
   emit('login', user);
 };
 </script>
 
-
 <style scoped>
-/* 模态框动画 */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
 .modal-container {
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+button {
   transition: all 0.3s ease;
+  cursor: pointer;
 }
 </style>
diff --git a/src/style.css b/src/style.css
index b7ac51a..2c6b995 100644
--- a/src/style.css
+++ b/src/style.css
@@ -144,3 +144,18 @@ input:focus, textarea:focus {
 .error {
     border-color: #ef4444;
 }
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background: linear-gradient(to bottom, #f0f4ff, #e0e7ff) no-repeat fixed;
+}
+
+/* 动画 */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.animate-fadeIn {
+    animation: fadeIn 0.3s ease-in-out;
+}
diff --git a/src/utils/calendarUtils.js b/src/utils/calendarUtils.js
index 29587e8..24b345b 100644
--- a/src/utils/calendarUtils.js
+++ b/src/utils/calendarUtils.js
@@ -1,5 +1,18 @@
 import dayjs from 'dayjs';
 import * as chineseLunar from 'chinese-lunar';
+import { getLunar } from 'chinese-lunar-calendar'
+
+const lunarMonthArray = [
+    '正', '二', '三', '四', '五', '六', '七', '八', '九', '十',
+    '十一', '十二'
+];
+
+const lunarArray = [
+    '初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
+    '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
+    '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'
+];
+
 
 /**
  * 获取农历日期
@@ -8,19 +21,16 @@ import * as chineseLunar from 'chinese-lunar';
  */
 export function getLunarDate(date) {
     try {
-        // 使用chinese-lunar库获取农历信息
-        const lunar = chineseLunar.solarToLunar(new Date(date));
 
-        const month = chineseLunar.format(lunar, 'M');
-        const day = chineseLunar.format(lunar, 'D');
+        const d = dayjs(date);
 
-        console.log(date, chineseLunar.dayName(lunar))
-        // console.log(date, lunar, month + day)
-        if (day === '初一') {
-            return month;
-        } else {
-            return day;
-        }
+        const year = d.year();
+        const month = d.month() + 1;
+        const day = d.date();
+
+        const result = getLunar(year, month, day);
+        console.log(getLunar(year, month, day));
+        return result.dateStr;
     } catch (error) {
         console.error('获取农历日期错误:', error);
         return '';
@@ -116,4 +126,4 @@ export function isHoliday(date) {
         console.error('判断假日错误:', error);
         return false;
     }
-}
\ No newline at end of file
+}