From a43d25b9f5e006c1a3e432745f825d5d6c8aea80 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 3 Nov 2025 09:47:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E6=97=A5=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FabPlus.vue    |   5 +-
 pages.json                |   7 +
 pages/add-event/index.vue | 891 ++++++++++++++++++++++++++++++++++++++
 pages/index/index.vue     |  39 +-
 4 files changed, 935 insertions(+), 7 deletions(-)
 create mode 100644 pages/add-event/index.vue

diff --git a/components/FabPlus.vue b/components/FabPlus.vue
index b562a93..f5c63c3 100644
--- a/components/FabPlus.vue
+++ b/components/FabPlus.vue
@@ -1,6 +1,9 @@
 <template>
-  <button class="fab-plus" >＋</button>
+  <button class="fab-plus" @click="$emit('click')">＋</button>
 </template>
+<script setup>
+defineEmits(['click']);
+</script>
 <style scoped lang="scss">
 .fab-plus {
   position: fixed;
diff --git a/pages.json b/pages.json
index f09f506..4c51c7f 100644
--- a/pages.json
+++ b/pages.json
@@ -12,6 +12,13 @@
 			"style": {
 				"navigationBarTitleText": "办公管理"
 			}
+		},
+		{
+			"path": "pages/add-event/index",
+			"style": {
+				"navigationBarTitleText": "新建日程",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 
diff --git a/pages/add-event/index.vue b/pages/add-event/index.vue
new file mode 100644
index 0000000..5d49745
--- /dev/null
+++ b/pages/add-event/index.vue
@@ -0,0 +1,891 @@
+<template>
+  <view class="add-event-page">
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar">
+      <view class="navbar-content">
+        <text class="nav-btn" @click="handleCancel">取消</text>
+        <text class="nav-title">新建日程</text>
+        <text class="nav-btn nav-btn-primary" @click="handleSave">完成</text>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <scroll-view class="content-scroll" scroll-y>
+      <!-- 标题输入 -->
+      <view class="form-item">
+        <input 
+          v-model="formData.title" 
+          class="title-input" 
+          placeholder="添加标题" 
+          placeholder-style="color: #999;"
+        />
+      </view>
+
+      <!-- 时间日期选择 -->
+      <view class="form-item time-section">
+        <view class="time-item" @click="openStartPicker">
+          <view class="time-icon">🕐</view>
+          <view class="time-content">
+            <text class="time-value">{{ startTime }}</text>
+            <text class="time-date">{{ startDateText }}</text>
+          </view>
+          <text class="arrow">›</text>
+        </view>
+        <text class="time-separator">→</text>
+        <view class="time-item" @click="openEndPicker">
+          <view class="time-icon">🕐</view>
+          <view class="time-content">
+            <text class="time-value">{{ endTime }}</text>
+            <text class="time-date">{{ endDateText }}</text>
+          </view>
+          <text class="arrow">›</text>
+        </view>
+      </view>
+
+      <!-- 全天开关 -->
+      <view class="form-item switch-item" @click="toggleAllDay">
+        <text class="label">全天</text>
+        <switch :checked="formData.allDay" @change="toggleAllDay" color="#2885ff" />
+      </view>
+
+      <!-- 重复选项 -->
+      <view class="form-item clickable-item" @click="showRepeatPicker = true">
+        <text class="label">{{ repeatText }}</text>
+        <text class="arrow">›</text>
+      </view>
+
+      <!-- 描述输入 -->
+      <view class="form-item clickable-item" @click="showDescInput = true">
+        <view class="desc-icon">📄</view>
+        <view class="desc-content">
+          <text v-if="formData.description" class="desc-text">{{ formData.description }}</text>
+          <text v-else class="desc-placeholder">添加描述</text>
+        </view>
+        <text class="arrow">›</text>
+      </view>
+
+      <!-- 日程颜色 -->
+      <view class="form-item clickable-item" @click="showColorPicker = true">
+        <view class="color-dot" :style="{ backgroundColor: formData.color }"></view>
+        <text class="label">日程颜色</text>
+        <text class="arrow">›</text>
+      </view>
+
+      <!-- 提醒设置 -->
+      <view class="form-item clickable-item" @click="showReminderPicker = true">
+        <view class="reminder-icon">🔔</view>
+        <text class="reminder-text">{{ reminderText }}</text>
+        <text class="arrow">›</text>
+      </view>
+    </scroll-view>
+
+    <!-- 开始日期时间选择弹窗 -->
+    <view v-if="showStartDatePicker || showStartTimePicker" class="modal-mask" @click="closeStartPicker">
+      <view class="modal-content datetime-modal" @click.stop>
+        <view class="modal-title">选择开始时间</view>
+        <view class="datetime-content">
+          <!-- 日期选择 -->
+          <view class="date-section">
+            <text class="section-label">日期</text>
+            <uv-calendar
+              ref="startDateCalendar"
+              mode="single"
+              @confirm="handleStartDateConfirm"
+            />
+          </view>
+          <!-- 时间选择 -->
+          <view class="time-section-picker">
+            <text class="section-label">时间</text>
+            <picker
+              mode="multiSelector"
+              :value="startPickerIndex"
+              :range="startPickerRange"
+              @change="handleStartTimeChange"
+            >
+              <view class="picker-display">
+                {{ formatTime(formData.startHour, formData.startMin) }}
+              </view>
+            </picker>
+          </view>
+        </view>
+        <view class="modal-buttons">
+          <button class="modal-btn" @click="closeStartPicker">取消</button>
+          <button class="modal-btn primary" @click="closeStartPicker">确定</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 结束日期时间选择弹窗 -->
+    <view v-if="showEndDatePicker || showEndTimePicker" class="modal-mask" @click="closeEndPicker">
+      <view class="modal-content datetime-modal" @click.stop>
+        <view class="modal-title">选择结束时间</view>
+        <view class="datetime-content">
+          <!-- 日期选择 -->
+          <view class="date-section">
+            <text class="section-label">日期</text>
+            <uv-calendar
+              ref="endDateCalendar"
+              mode="single"
+              @confirm="handleEndDateConfirm"
+            />
+          </view>
+          <!-- 时间选择 -->
+          <view class="time-section-picker">
+            <text class="section-label">时间</text>
+            <picker
+              mode="multiSelector"
+              :value="endPickerIndex"
+              :range="endPickerRange"
+              @change="handleEndTimeChange"
+            >
+              <view class="picker-display">
+                {{ formatTime(formData.endHour, formData.endMin) }}
+              </view>
+            </picker>
+          </view>
+        </view>
+        <view class="modal-buttons">
+          <button class="modal-btn" @click="closeEndPicker">取消</button>
+          <button class="modal-btn primary" @click="closeEndPicker">确定</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 描述输入弹窗 -->
+    <view v-if="showDescInput" class="modal-mask" @click="showDescInput = false">
+      <view class="modal-content" @click.stop>
+        <view class="modal-title">添加描述</view>
+        <textarea 
+          v-model="formData.description" 
+          class="desc-textarea" 
+          placeholder="请输入描述"
+          auto-height
+        />
+        <view class="modal-buttons">
+          <button class="modal-btn" @click="showDescInput = false">取消</button>
+          <button class="modal-btn primary" @click="showDescInput = false">确定</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 颜色选择弹窗 -->
+    <view v-if="showColorPicker" class="modal-mask" @click="showColorPicker = false">
+      <view class="modal-content" @click.stop>
+        <view class="modal-title">选择颜色</view>
+        <view class="color-options">
+          <view 
+            v-for="color in colorOptions" 
+            :key="color"
+            class="color-option"
+            :class="{ active: formData.color === color }"
+            :style="{ backgroundColor: color }"
+            @click="selectColor(color)"
+          ></view>
+        </view>
+        <view class="modal-buttons">
+          <button class="modal-btn" @click="showColorPicker = false">取消</button>
+          <button class="modal-btn primary" @click="showColorPicker = false">确定</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 重复选择弹窗 -->
+    <view v-if="showRepeatPicker" class="modal-mask" @click="showRepeatPicker = false">
+      <view class="modal-content" @click.stop>
+        <view class="modal-title">重复设置</view>
+        <view class="repeat-options">
+          <view 
+            v-for="item in repeatOptions" 
+            :key="item.value"
+            class="repeat-option"
+            :class="{ active: formData.repeat === item.value }"
+            @click="selectRepeat(item.value)"
+          >
+            <text>{{ item.label }}</text>
+            <text v-if="formData.repeat === item.value" class="check">✓</text>
+          </view>
+        </view>
+        <view class="modal-buttons">
+          <button class="modal-btn" @click="showRepeatPicker = false">取消</button>
+          <button class="modal-btn primary" @click="showRepeatPicker = false">确定</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 提醒选择弹窗 -->
+    <view v-if="showReminderPicker" class="modal-mask" @click="showReminderPicker = false">
+      <view class="modal-content" @click.stop>
+        <view class="modal-title">提醒设置</view>
+        <view class="reminder-options">
+          <view 
+            v-for="item in reminderOptions" 
+            :key="item.value"
+            class="reminder-option"
+            :class="{ active: formData.reminder === item.value }"
+            @click="selectReminder(item.value)"
+          >
+            <text>{{ item.label }}</text>
+            <text v-if="formData.reminder === item.value" class="check">✓</text>
+          </view>
+        </view>
+        <view class="modal-buttons">
+          <button class="modal-btn" @click="showReminderPicker = false">取消</button>
+          <button class="modal-btn primary" @click="showReminderPicker = false">确定</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+
+// 表单数据
+const formData = ref({
+  title: '',
+  startDate: '',
+  startHour: 16,
+  startMin: 0,
+  endDate: '',
+  endHour: 17,
+  endMin: 0,
+  allDay: false,
+  repeat: 'none',
+  description: '',
+  color: '#e3fae6',
+  reminder: 15 // 提前多少分钟提醒
+});
+
+// 显示状态
+const showStartTimePicker = ref(false);
+const showStartDatePicker = ref(false);
+const showEndTimePicker = ref(false);
+const showEndDatePicker = ref(false);
+const showDescInput = ref(false);
+const showColorPicker = ref(false);
+const showRepeatPicker = ref(false);
+const showReminderPicker = ref(false);
+
+// 时间选择器相关
+const hourOptions = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0') + '时');
+const minOptions = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0') + '分');
+
+const startPickerRange = ref([hourOptions, minOptions]);
+const startPickerIndex = ref([16, 0]);
+const endPickerRange = ref([hourOptions, minOptions]);
+const endPickerIndex = ref([17, 0]);
+
+const startDateCalendar = ref(null);
+const endDateCalendar = ref(null);
+
+// 颜色选项
+const colorOptions = [
+  '#e3fae6', '#fae1e1', '#e3f2fd', '#fff3e0', 
+  '#f3e5f5', '#e0f2f1', '#ffebee', '#f1f8e9'
+];
+
+// 重复选项
+const repeatOptions = [
+  { label: '不重复', value: 'none' },
+  { label: '每天', value: 'daily' },
+  { label: '每周', value: 'weekly' },
+  { label: '每月', value: 'monthly' },
+  { label: '每年', value: 'yearly' }
+];
+
+// 提醒选项
+const reminderOptions = [
+  { label: '不提醒', value: 0 },
+  { label: '开始时', value: 0 },
+  { label: '开始前5分钟', value: 5 },
+  { label: '开始前15分钟', value: 15 },
+  { label: '开始前30分钟', value: 30 },
+  { label: '开始前1小时', value: 60 },
+  { label: '开始前1天', value: 1440 }
+];
+
+// 格式化时间
+const formatTime = (hour, min) => {
+  const h = String(hour).padStart(2, '0');
+  const m = String(min).padStart(2, '0');
+  return `${h}:${m}`;
+};
+
+// 格式化日期文本
+const formatDateText = (dateStr) => {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+  const weekday = weekdays[date.getDay()];
+  return `${month}月${day}日 ${weekday}`;
+};
+
+// 计算属性
+const startTime = computed(() => {
+  return formData.value.allDay ? '全天' : formatTime(formData.value.startHour, formData.value.startMin);
+});
+
+const endTime = computed(() => {
+  return formData.value.allDay ? '' : formatTime(formData.value.endHour, formData.value.endMin);
+});
+
+const startDateText = computed(() => {
+  return formatDateText(formData.value.startDate);
+});
+
+const endDateText = computed(() => {
+  return formatDateText(formData.value.endDate || formData.value.startDate);
+});
+
+// 打开开始时间选择器
+const openStartPicker = () => {
+  if (formData.value.allDay) {
+    showStartDatePicker.value = true;
+  } else {
+    showStartDatePicker.value = true;
+    showStartTimePicker.value = true;
+  }
+  // 更新选择器索引
+  startPickerIndex.value = [formData.value.startHour, formData.value.startMin];
+};
+
+// 打开结束时间选择器
+const openEndPicker = () => {
+  if (formData.value.allDay) {
+    showEndDatePicker.value = true;
+  } else {
+    showEndDatePicker.value = true;
+    showEndTimePicker.value = true;
+  }
+  // 更新选择器索引
+  endPickerIndex.value = [formData.value.endHour, formData.value.endMin];
+};
+
+// 关闭开始选择器
+const closeStartPicker = () => {
+  showStartDatePicker.value = false;
+  showStartTimePicker.value = false;
+};
+
+// 关闭结束选择器
+const closeEndPicker = () => {
+  showEndDatePicker.value = false;
+  showEndTimePicker.value = false;
+};
+
+const reminderText = computed(() => {
+  if (formData.value.reminder === 0) {
+    return '不提醒';
+  }
+  if (formData.value.reminder === 1440) {
+    return '开始前1天,应用弹窗提醒我';
+  }
+  if (formData.value.reminder === 60) {
+    return `开始前1小时,应用弹窗提醒我`;
+  }
+  return `开始前${formData.value.reminder}分钟,应用弹窗提醒我`;
+});
+
+const repeatText = computed(() => {
+  const option = repeatOptions.find(opt => opt.value === formData.value.repeat);
+  return option ? option.label : '不重复';
+});
+
+// 初始化日期
+const initDates = () => {
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const options = currentPage.options || currentPage.$route?.query || {};
+  
+  let dateStr = '';
+  if (options.date) {
+    dateStr = options.date;
+  } else {
+    const today = new Date();
+    dateStr = today.toISOString().slice(0, 10);
+  }
+  
+  formData.value.startDate = dateStr;
+  formData.value.endDate = dateStr;
+  
+  // 设置默认时间为当前时间到一小时后（如果不是全天）
+  if (!formData.value.allDay) {
+    const today = new Date();
+    formData.value.startHour = today.getHours();
+    formData.value.startMin = Math.ceil(today.getMinutes() / 5) * 5; // 向上取整到5的倍数
+    const endTime = new Date(today);
+    endTime.setHours(today.getHours() + 1);
+    formData.value.endHour = endTime.getHours();
+    formData.value.endMin = endTime.getMinutes();
+    startPickerIndex.value = [formData.value.startHour, formData.value.startMin];
+    endPickerIndex.value = [formData.value.endHour, formData.value.endMin];
+  }
+};
+
+// 处理开始日期确认
+const handleStartDateConfirm = (e) => {
+  const formattedDate = formatDateToYYYYMMDD(e);
+  if (formattedDate) {
+    formData.value.startDate = formattedDate;
+    // 如果结束日期未设置或早于开始日期，更新结束日期
+    if (!formData.value.endDate || formData.value.endDate < formData.value.startDate) {
+      formData.value.endDate = formData.value.startDate;
+    }
+  }
+};
+
+// 处理开始时间变化
+const handleStartTimeChange = (e) => {
+  const [hourIndex, minIndex] = e.detail.value;
+  formData.value.startHour = hourIndex;
+  formData.value.startMin = minIndex;
+  startPickerIndex.value = [hourIndex, minIndex];
+  
+  // 如果结束时间早于开始时间，自动调整结束时间
+  if (formData.value.endDate === formData.value.startDate) {
+    const startTotalMin = formData.value.startHour * 60 + formData.value.startMin;
+    const endTotalMin = formData.value.endHour * 60 + formData.value.endMin;
+    if (endTotalMin <= startTotalMin) {
+      const newEndTotalMin = startTotalMin + 60; // 默认延长1小时
+      formData.value.endHour = Math.floor(newEndTotalMin / 60) % 24;
+      formData.value.endMin = newEndTotalMin % 60;
+      endPickerIndex.value = [formData.value.endHour, formData.value.endMin];
+    }
+  }
+};
+
+// 处理结束日期确认
+const handleEndDateConfirm = (e) => {
+  const formattedDate = formatDateToYYYYMMDD(e);
+  if (formattedDate) {
+    formData.value.endDate = formattedDate;
+  }
+};
+
+// 处理结束时间变化
+const handleEndTimeChange = (e) => {
+  const [hourIndex, minIndex] = e.detail.value;
+  formData.value.endHour = hourIndex;
+  formData.value.endMin = minIndex;
+  endPickerIndex.value = [hourIndex, minIndex];
+};
+
+// 格式化日期为 YYYY-MM-DD（复用首页的逻辑）
+function formatDateToYYYYMMDD(dateInput) {
+  if (!dateInput) return '';
+  let dateStr = '';
+  if (typeof dateInput === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(dateInput)) {
+    return dateInput;
+  }
+  if (typeof dateInput === 'string') {
+    dateStr = dateInput;
+  } else if (dateInput?.date) {
+    dateStr = dateInput.date;
+  } else if (dateInput?.value) {
+    dateStr = dateInput.value;
+  } else if (Array.isArray(dateInput) && dateInput.length > 0) {
+    dateStr = typeof dateInput[0] === 'string' ? dateInput[0] : (dateInput[0]?.date || dateInput[0]?.value || '');
+  }
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  if (!isNaN(date.getTime())) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+  if (/^\d{4}-\d{2}-\d{2}/.test(dateStr)) {
+    return dateStr.slice(0, 10);
+  }
+  return '';
+}
+
+// 切换全天
+const toggleAllDay = () => {
+  formData.value.allDay = !formData.value.allDay;
+  if (formData.value.allDay) {
+    formData.value.startHour = 0;
+    formData.value.startMin = 0;
+    formData.value.endHour = 23;
+    formData.value.endMin = 59;
+    startPickerIndex.value = [0, 0];
+    endPickerIndex.value = [23, 59];
+  }
+};
+
+// 选择颜色
+const selectColor = (color) => {
+  formData.value.color = color;
+};
+
+// 选择重复
+const selectRepeat = (value) => {
+  formData.value.repeat = value;
+};
+
+// 选择提醒
+const selectReminder = (value) => {
+  formData.value.reminder = value;
+};
+
+// 取消
+const handleCancel = () => {
+  uni.navigateBack();
+};
+
+// 保存
+const handleSave = () => {
+  if (!formData.value.title.trim()) {
+    uni.showToast({
+      title: '请输入标题',
+      icon: 'none'
+    });
+    return;
+  }
+
+  // 准备返回的数据
+  const eventData = {
+    title: formData.value.title,
+    date: formData.value.startDate,
+    startHour: formData.value.startHour,
+    startMin: formData.value.startMin,
+    endHour: formData.value.endHour,
+    endMin: formData.value.endMin,
+    color: formData.value.color,
+    allDay: formData.value.allDay,
+    repeat: formData.value.repeat,
+    description: formData.value.description,
+    reminder: formData.value.reminder
+  };
+
+  // 通过 getCurrentPages 获取上一页实例并调用方法
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    const prevPage = pages[pages.length - 2];
+    // 如果上一页有 addEvent 方法，直接调用
+    if (prevPage && typeof prevPage.addEvent === 'function') {
+      prevPage.addEvent(eventData);
+    } else {
+      // 否则使用全局存储，在首页的 onShow 中读取
+      uni.setStorageSync('newEventData', eventData);
+    }
+  } else {
+    // 使用全局存储作为备选方案
+    uni.setStorageSync('newEventData', eventData);
+  }
+  
+  // 返回上一页
+  uni.navigateBack();
+};
+
+onMounted(() => {
+  initDates();
+});
+</script>
+
+<style lang="scss" scoped>
+.add-event-page {
+  min-height: 100vh;
+  background: #fff;
+}
+
+.custom-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: #fff;
+  border-bottom: 1px solid #e5e5e5;
+  padding-top: var(--status-bar-height, 0);
+}
+
+.navbar-content {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+
+.nav-btn {
+  font-size: 16px;
+  color: #333;
+  padding: 8px;
+}
+
+.nav-btn-primary {
+  color: #2885ff;
+}
+
+.nav-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #333;
+}
+
+.content-scroll {
+  margin-top: calc(var(--status-bar-height, 0) + 45px);
+  height: calc(100vh - var(--status-bar-height, 0) - 45px);
+}
+
+.form-item {
+  padding: 16px;
+  border-bottom: 1px solid #f5f5f5;
+  display: flex;
+  align-items: center;
+}
+
+.title-input {
+  width: 100%;
+  font-size: 18px;
+  padding: 8px 0;
+}
+
+.time-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 16px;
+}
+
+.time-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.time-icon {
+  font-size: 20px;
+}
+
+.time-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.time-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+}
+
+.time-date {
+  font-size: 12px;
+  color: #999;
+}
+
+.time-separator {
+  margin: 0 16px;
+  font-size: 20px;
+  color: #ccc;
+}
+
+.arrow {
+  font-size: 20px;
+  color: #ccc;
+  margin-left: auto;
+}
+
+.switch-item {
+  justify-content: space-between;
+}
+
+.label {
+  font-size: 16px;
+  color: #333;
+}
+
+.clickable-item {
+  cursor: pointer;
+}
+
+.desc-icon {
+  font-size: 20px;
+  margin-right: 12px;
+}
+
+.desc-content {
+  flex: 1;
+}
+
+.desc-text {
+  font-size: 16px;
+  color: #333;
+}
+
+.desc-placeholder {
+  font-size: 16px;
+  color: #999;
+}
+
+.color-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 12px;
+}
+
+.reminder-icon {
+  font-size: 20px;
+  margin-right: 12px;
+}
+
+.reminder-text {
+  flex: 1;
+  font-size: 16px;
+  color: #333;
+}
+
+/* 弹窗样式 */
+.modal-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.modal-content {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  width: 80%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.desc-textarea {
+  width: 100%;
+  min-height: 120px;
+  padding: 12px;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.color-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.color-option {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.color-option.active {
+  border-color: #2885ff;
+  transform: scale(1.1);
+}
+
+.repeat-options,
+.reminder-options {
+  margin-bottom: 20px;
+}
+
+.repeat-option,
+.reminder-option {
+  padding: 16px;
+  border-bottom: 1px solid #f5f5f5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.repeat-option:last-child,
+.reminder-option:last-child {
+  border-bottom: none;
+}
+
+.repeat-option.active,
+.reminder-option.active {
+  color: #2885ff;
+}
+
+.check {
+  color: #2885ff;
+  font-size: 18px;
+}
+
+.modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.modal-btn {
+  padding: 10px 24px;
+  border: none;
+  background: #f5f5f5;
+  border-radius: 8px;
+  font-size: 16px;
+  color: #333;
+}
+
+.modal-btn.primary {
+  background: #2885ff;
+  color: #fff;
+}
+
+.datetime-modal {
+  max-width: 90%;
+}
+
+.datetime-content {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.date-section {
+  margin-bottom: 20px;
+}
+
+.section-label {
+  display: block;
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.time-section-picker {
+  margin-top: 20px;
+}
+
+.picker-display {
+  padding: 12px;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 16px;
+  color: #333;
+}
+</style>
+
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 413e1d6..6ad55e4 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -7,13 +7,13 @@
       <uv-calendar ref="calendar" mode="single"  @confirm="handleConfirm" ></uv-calendar>
       <button @click="openCalendar">选择日期</button>
       <view style=" font-size: 12px; color: #666;">
-        当前选择日期：{{ selectedDate }}，事件数：{{ eventsInDay.length }}
+        当前选择日期：{{ selectedDate }}，事件数：{{ eventsInDay ? eventsInDay.length : 0 }}
       </view>
     </view>
     <!-- 滑动容器 -->
     <view 
       class="swipe-container"
-      @touchstart="handleTouchStart"
+      @touchstart="handleTouchStart"  
       @touchmove="handleTouchMove"
       @touchend="handleTouchEnd"
     >
@@ -38,9 +38,9 @@
   </view>
 
   <!-- 悬浮新建按钮 -->
-  <FabPlus @click="showAdd = true" />
+  <FabPlus @click="handleAddClick" />
 
-  <!-- 新建日程弹窗 -->
+  <!-- 新建日程弹窗（保留以备后用） -->
   <AddEventModal :show="showAdd" @ok="addEvent" @cancel="showAdd = false" />
 
   <!-- 底部导航 -->
@@ -55,6 +55,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
+import { onShow } from '@dcloudio/uni-app';
 
 import TimeTable from '@/components/TimeTable.vue';
 import FabPlus from '@/components/FabPlus.vue';
@@ -197,14 +198,25 @@ const handleConfirm = (e) => {
 
 // 悬浮按钮/弹窗控制
 const showAdd = ref(false);
+
+// 处理添加按钮点击
+const handleAddClick = () => {
+  uni.navigateTo({
+    url: `/pages/add-event/index?date=${selectedDate.value}`
+  });
+};
+
+// 添加日程
 function addEvent(e) {
-  // e是{title, startHour, startMin, color}，补充date
+  // e是{title, startHour, startMin, color, date等}，如果没有date则使用selectedDate
   allEvents.value.push({
-    ...e, date: selectedDate.value,
+    ...e,
+    date: e.date || selectedDate.value,
     id: Date.now()
   });
   showAdd.value = false;
 }
+
 const value=ref(0);
 
 // 滑动相关变量
@@ -371,6 +383,21 @@ watch(selectedDate, () => {
 onMounted(() => {
   initScreenWidth();
 });
+
+// 页面显示时处理从新建日程页面返回的数据
+onShow(() => {
+  // 从全局存储中读取新添加的日程数据
+  try {
+    const newEventData = uni.getStorageSync('newEventData');
+    if (newEventData) {
+      addEvent(newEventData);
+      // 清除存储的数据
+      uni.removeStorageSync('newEventData');
+    }
+  } catch (e) {
+    console.error('读取新日程数据失败:', e);
+  }
+});
 </script>
 
 <style lang="scss" scoped>