初始化

src/components/CommonEvents.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <!-- 说明卡片 -->
+    <div class="bg-white rounded-2xl shadow-soft overflow-hidden mb-6" data-aos="zoom-in">
+      <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">
+        <ul class="space-y-4">
+          <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">
+              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="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"
+        >
+          <i class="fas fa-plus text-white text-sm"></i>
+
+        </button>
+
+      </div>
+
+      <div class="p-5 max-h-[420px] overflow-y-auto">
+        <div class="space-y-3">
+          <div
+              v-for="(event, index) in commonEvents"
+              :key="'common-'+index"
+              draggable="true"
+              @dragstart="handleDragStart($event, event)"
+              @dragend="handleDragEnd"
+              class="common-event group flex items-center px-4 py-3 rounded-xl border border-gray-100 bg-white cursor-move transition-all relative hover:shadow-md"
+          >
+            <div
+                class="absolute top-0 left-0 w-1 h-full rounded-l"
+                :style="{ backgroundColor: event.color }"
+            ></div>
+
+            <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"
+          >
+            <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"
+          >
+            <i class="fas fa-plus-circle mr-2"></i>
+            新增快捷日程
+          </button>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  commonEvents: Array
+});
+
+const emit = defineEmits(['add-common-event', 'drag-start', 'drag-end']);
+
+const handleDragStart = (event, commonEvent) => {
+  emit('drag-start', event, commonEvent, 'common');
+};
+
+const handleDragEnd = () => {
+  emit('drag-end');
+};
+</script>
+
+
+<style scoped>
+.common-event {
+  transition: all 0.3s ease;
+  cursor: grab;
+}
+
+.common-event:hover {
+  transform: translateX(5px);
+}
+</style>