schedule/src/components/CommonEvents.vue

<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>