lq/schedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化页面显示

Browse Source
This commit is contained in:
年糕崽崽
2025-06-11 15:42:48 +08:00
parent 62379b55fd
commit 11ccacfa9a
6 changed files with 217 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>工作日程工具</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

222
src/App.vue
View File

@@ -1,134 +1,63 @@
<template> <template>
<div class="min-h-screen w-full bg-gradient-to-br from-gray-50 to-gray-100 bg-fixed"> <div class="min-h-screen w-full bg-gradient-to-br from-gray-50 to-gray-100 bg-fixed pt-3">
<!-- 登录模态框 --> <!-- 登录模态框 -->
<LoginModal v-if="showLoginModal" @login="handleLogin" @close="showLoginModal = false" /> <LoginModal v-if="showLoginModal" @login="handleLogin" @close="showLoginModal = false" />
<!-- 顶部导航 - 粘性布局 --> <!-- 顶部导航 - 粘性布局 -->
<!-- <header class="sticky top-0 z-50 text-orange-600/80 py-5 px-6 rounded-b-2xl shadow-lg w-full frosted-glass"> <!-- <header class="sticky top-0 z-50 text-orange-600/80 py-5 px-6 rounded-b-2xl shadow-lg w-full frosted-glass">
<div class="max-w-7xl mx-auto"> <div class="max-w-7xl mx-auto">
<div class="flex flex-col sm:flex-row items-center justify-between"> <div class="flex flex-col sm:flex-row items-center justify-between">
<div class="flex items-center"> <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"> <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-2xl"></i> <i class="fas fa-calendar-alt text-2xl"></i>
</div> </div>
<h1 class="ml-4 text-2xl font-bold drop-shadow">智能日程管家</h1> <h1 class="ml-4 text-2xl font-bold drop-shadow">智能日程管家</h1>
</div> </div>
<div class="mt-4 sm:mt-0 flex items-center"> <div class="mt-4 sm:mt-0 flex items-center">
<div class="flex rounded-xl overflow-hidden bg-white bg-opacity-20"> <div class="flex rounded-xl overflow-hidden bg-white bg-opacity-20">
<button <button
@click="changeView('day')" @click="changeView('day')"
:class="{'bg-white text-primary-600': view === 'day'}" :class="{'bg-white text-primary-600': view === 'day'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5" class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
> >
<i class="fas fa-sun mr-2"></i> 日视图 <i class="fas fa-sun mr-2"></i> 日视图
</button> </button>
<button <button
@click="changeView('week')" @click="changeView('week')"
:class="{'bg-white text-primary-600': view === 'week'}" :class="{'bg-white text-primary-600': view === 'week'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5" class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
> >
<i class="fas fa-calendar-week mr-2"></i> 周视图 <i class="fas fa-calendar-week mr-2"></i> 周视图
</button> </button>
<button <button
@click="changeView('month')" @click="changeView('month')"
:class="{'bg-white text-primary-600': view === 'month'}" :class="{'bg-white text-primary-600': view === 'month'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5" class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
> >
<i class="fas fa-calendar-days mr-2"></i> 月视图 <i class="fas fa-calendar-days mr-2"></i> 月视图
</button> </button>
</div> </div>
<div class="ml-4 flex items-center"> <div class="ml-4 flex items-center">
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white"> <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white">
</div>
<span class="ml-2 text-white text-sm hidden md:block">{{ user.name }}</span>
</div>
</div> </div>
<span class="ml-2 text-white text-sm hidden md:block">{{ user.name }}</span>
</div> </div>
</div> </div>
</div> </header>-->
</div>
</header>-->
<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">
<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-2xl"></i>
</div>
<h1 class="ml-4 text-2xl font-bold drop-shadow">智能日程管家</h1>
</div>
<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 active:scale-95"
>
<i class="fas fa-chevron-left text-primary-600"></i>
</button>
<div class="mx-4">
<div class="text-xl font-bold text-gray-800 flex items-center">
{{ displayDate }}
<span class="ml-3 text-sm px-3 py-1 bg-primary-600 text-white rounded-full">当前视图</span>
</div>
<p class="text-gray-600 mt-1">{{ dayjs().format('YYYY年MM月') }}</p>
</div>
<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 active:scale-95"
>
<i class="fas fa-chevron-right text-primary-600"></i>
</button>
</div>
<div class="mt-4 sm:mt-0 flex items-center">
<div class="flex rounded-xl overflow-hidden bg-white bg-opacity-20">
<button
@click="changeView('day')"
:class="{'bg-white text-primary-600': view === 'day'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
>
<i class="fas fa-sun mr-2"></i> 日视图
</button>
<button
@click="changeView('week')"
:class="{'bg-white text-primary-600': view === 'week'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
>
<i class="fas fa-calendar-week mr-2"></i> 周视图
</button>
<button
@click="changeView('month')"
:class="{'bg-white text-primary-600': view === 'month'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
>
<i class="fas fa-calendar-days mr-2"></i> 月视图
</button>
</div>
<div class="ml-4 flex items-center">
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white">
</div>
<span class="ml-2 text-white text-sm hidden md:block">{{ user.name }}</span>
</div>
</div>
<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 active:translate-y-0"
>
<i class="fas fa-calendar-check mr-2"></i> 返回今天
</button>
</div>
<div class="w-full mx-auto px-4 sm:px-6">
<!-- 主要内容 --> <!-- 主要内容 -->
<div class="grid grid-cols-1 lg:grid-cols-[1fr_2fr_1fr] 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"> <div class="lg:col-span-1" data-aos="fade-right" data-aos-delay="100">
<CommonEvents <CommonEvents
:commonEvents="commonEvents" :commonEvents="commonEvents"
:user-info="user"
@add-common-event="showCommonEventModal = true" @add-common-event="showCommonEventModal = true"
@drag-start="handleDragStart" @drag-start="handleDragStart"
@drag-end="handleDragEnd" @drag-end="handleDragEnd"
@@ -137,6 +66,63 @@
<!-- 中间面板 - 日历 --> <!-- 中间面板 - 日历 -->
<div class="lg:col-span-1" data-aos="fade-up" data-aos-delay="200"> <div class="lg:col-span-1" data-aos="fade-up" data-aos-delay="200">
<div data-aos="fade-up" class="flex items-center justify-between 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 active:scale-95"
>
<i class="fas fa-chevron-left text-primary-600"></i>
</button>
<div class="mx-4">
<div class="text-xl font-bold text-gray-800 flex items-center">
{{ displayDate }}
<span class="ml-3 text-sm px-3 py-1 bg-primary-600 text-white rounded-full">当前视图</span>
</div>
<p class="text-gray-600 mt-1">{{ dayjs().format('YYYY年MM月') }}</p>
</div>
<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 active:scale-95"
>
<i class="fas fa-chevron-right text-primary-600"></i>
</button>
</div>
<div class="mt-4 sm:mt-0 flex items-center">
<div class="flex rounded-xl overflow-hidden bg-white bg-opacity-20">
<button
@click="changeView('day')"
:class="{'bg-white text-primary-600': view === 'day'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
>
<i class="fas fa-sun mr-2"></i> 日视图
</button>
<button
@click="changeView('week')"
:class="{'bg-white text-primary-600': view === 'week'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
>
<i class="fas fa-calendar-week mr-2"></i> 周视图
</button>
<button
@click="changeView('month')"
:class="{'bg-white text-primary-600': view === 'month'}"
class="px-4 py-2 font-medium transition-all hover:transform hover:-translate-y-0.5"
>
<i class="fas fa-calendar-days mr-2"></i> 月视图
</button>
</div>
</div>
<button
@click="selectDate(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 active:translate-y-0"
>
<i class="fas fa-calendar-check mr-2"></i> 返回今天
</button>
</div>
<CalendarView <CalendarView
:view="view" :view="view"
:currentDate="currentDate" :currentDate="currentDate"
@@ -231,9 +217,9 @@ const events = ref([
duration: 60, duration: 60,
location: '会议室A', location: '会议室A',
color: '#645eff', color: '#645eff',
creator: { id: 'user-1', name: '李齐' }, creator: { id: 'user-1', name: '李琦' },
participants: [ participants: [
{ id: 'user-1', name: '李齐' }, { id: 'user-1', name: '李琦' },
{ id: 'user-2', name: '张明' }, { id: 'user-2', name: '张明' },
{ id: 'user-3', name: '王芳' } { id: 'user-3', name: '王芳' }
], ],

29
src/components/CalendarView.vue
View File

@@ -12,7 +12,7 @@
</div> </div>
</div> </div>
<div class="grid grid-cols-7 gap-2 mt-3"> <div class="grid grid-cols-7 mt-3">
<div <div
v-for="(day, index) in monthDays" v-for="(day, index) in monthDays"
:key="index" :key="index"
@@ -21,15 +21,16 @@
@dragleave="handleDragLeave" @dragleave="handleDragLeave"
@drop="handleDropEvent($event, day.date)" @drop="handleDropEvent($event, day.date)"
:class="{ :class="{
'bg-primary-50': selectedDate === day.date, 'bg-primary-50': selectedDate === day.date,
'drag-over': isDragOverCell === day.date 'active-day': 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" 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"> <div class="flex justify-between items-start">
<span <span
class="text-lg font-semibold w-8 h-8 flex items-center justify-center rounded-full" class="text-lg font-semibold w-8 h-8 flex items-center justify-center rounded-full relative"
:class="{ :class="{
'bg-primary-600 text-white': isToday(day.date), 'bg-primary-600 text-white': isToday(day.date),
'text-gray-900': day.currentMonth && !isToday(day.date), 'text-gray-900': day.currentMonth && !isToday(day.date),
@@ -39,6 +40,10 @@
{{ day.date.split('-')[2] }} {{ day.date.split('-')[2] }}
</span> </span>
<!-- 农历日期 -->
<span class="lunar-date text-xs text-gray-500 mt-1" style="position: absolute; right: 5px; bottom: 5px">
{{ getLunarDate(day.date) }}
</span>
<span v-if="isHoliday(day.date)" class="work-marker day-off">休</span> <span v-if="isHoliday(day.date)" class="work-marker day-off">休</span>
<span v-else-if="isWorkDayOnWeekend(day.date)" class="work-marker work-day">班</span> <span v-else-if="isWorkDayOnWeekend(day.date)" class="work-marker work-day">班</span>
</div> </div>
@@ -56,10 +61,6 @@
</div> </div>
</div> </div>
<!-- 农历日期 -->
<div class="lunar-date text-xs text-gray-500 mt-1">
{{ getLunarDate(day.date) }}
</div>
<!-- 事件展示 --> <!-- 事件展示 -->
<div v-if="hasEvent(day.date)" class="mt-2 text-xs max-w-full overflow-hidden"> <div v-if="hasEvent(day.date)" class="mt-2 text-xs max-w-full overflow-hidden">
@@ -343,10 +344,18 @@ const handleDropEvent = (event, date, time = null) => {
} }
.dropzone.drag-over { .dropzone.drag-over {
background-color: rgba(100, 94, 255, 0.1); background-color: rgba(100, 94, 255, 0.3);
box-shadow: inset 0 0 0 2px #645eff; box-shadow: inset 0 0 0 2px #645eff;
} }
.dropzone.active-day {
background-color: rgba(100, 94, 255, 0.3);
box-shadow: inset 0 0 0 2px #645eff;
/* 用虚线美化边框 */
border-bottom: 1px dashed rgba(100, 94, 255, 0.5);
border-radius: 10px;
}
.work-marker { .work-marker {
position: absolute; position: absolute;
top: 6px; top: 6px;

187
src/components/CommonEvents.vue
View File

@@ -1,123 +1,85 @@
<template> <template>
<div data-aos="zoom-in" data-aos-duration="500"> <div data-aos="zoom-in" data-aos-duration="500" style="height: 90vh;">
<!-- 说明卡片 --> <!-- 用户信息卡片 -->
<div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft overflow-hidden mb-6"> <div class="bg-gradient-to-br from-white to-gray-50 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"> <div class="p-6">
<ul class="space-y-4"> <div class="flex items-center">
<li class="flex"> <img :src="userInfo.avatar" alt="用户头像" class="w-16 h-16 rounded-full object-cover border-2 border-indigo-100">
<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"> <div class="ml-4">
1 <h3 class="text-lg font-bold text-gray-800">{{ userInfo.name }}</h3>
</div> <p class="text-sm text-gray-600">{{ userInfo.team }}</p>
<div> </div>
<p class="font-medium">拖放快捷日程到日历</p> </div>
<p class="text-sm text-gray-600 mt-1">将左侧的快捷日程拖放到日历中的日期添加新日程</p>
</div>
</li>
<li class="flex"> <div class="mt-4 grid grid-cols-2 gap-4">
<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"> <div class="flex items-center">
2 <i class="fas fa-phone-alt text-indigo-500 mr-2"></i>
</div> <span class="text-sm text-gray-700">{{ userInfo.phone }}</span>
<div> </div>
<p class="font-medium">拖放日程到其他日期</p> <div class="flex items-center">
<p class="text-sm text-gray-600 mt-1">将右侧详情中的日程拖放到日历中的其他日期进行移动</p> <i class="fas fa-envelope text-indigo-500 mr-2"></i>
</div> <span class="text-sm text-gray-700">{{ userInfo.email }}</span>
</li> </div>
<div class="flex items-center">
<li class="flex"> <i class="fas fa-id-card text-indigo-500 mr-2"></i>
<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"> <span class="text-sm text-gray-700">{{ userInfo.id }}</span>
3 </div>
</div> </div>
<div>
<p class="font-medium">自定义快捷日程</p>
<p class="text-sm text-gray-600 mt-1">点击底部按钮添加快捷日程模板</p>
</div>
</li>
</ul>
</div> </div>
</div> </div>
<!-- &lt;!&ndash; 说明卡片 &ndash;&gt;-->
<!-- <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">-->
<!-- <p class="text-gray-700 mb-4">-->
<!-- 常用日程可以拖拽到日历中快速创建日程，也可以点击编辑按钮修改日程内容。-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- 常用日程卡片 --> <!-- 常用日程卡片 -->
<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="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft" 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"> <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"> <h2 class="text-white font-bold text-lg flex items-center">
<i class="fas fa-star mr-2"></i> <i class="fas fa-calendar-alt mr-2"></i>
常用日程 常用日程
<span class="ml-2 text-sm text-secondary-700 px-2 py-1 rounded-md">可拖拽</span>
</h2> </h2>
<button <button
@click="$emit('add-common-event')" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors duration-200"
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" @click="addCommonEvent"
> >
<i class="fas fa-plus text-white text-sm"></i> <i class="fas fa-plus mr-2"></i>
新增常用日程
</button> </button>
</div> </div>
<div class="p-6">
<div class="p-5 max-h-[420px] overflow-y-auto"> <div class="grid grid-cols-1 gap-4 overflow-y-auto" style="height: 350px;">
<div class="space-y-3">
<div <div
v-for="(event, index) in commonEvents" v-for="commonEvent in commonEvents"
:key="'common-'+index" :key="commonEvent.id"
class="common-event bg-white p-4 rounded-lg shadow-xs flex justify-between items-center"
draggable="true" draggable="true"
@dragstart="handleDragStart($event, event)" @dragstart="handleDragStart($event, commonEvent)"
@dragend="handleDragEnd" @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 <div>
class="absolute top-0 left-0 w-1 h-full rounded-l" <h3 class="font-bold text-gray-800">{{ commonEvent.title }}</h3>
:style="{ backgroundColor: event.color }" <p class="text-sm text-gray-600">{{ commonEvent.desc }}</p>
></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>
<button
class="text-gray-500 hover:text-gray-700 transition-colors duration-200"
@click="editCommonEvent(commonEvent)"
>
<i class="fas fa-edit"></i>
</button>
</div> </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 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 hover:-translate-y-0.5 active:translate-y-0"
>
<i class="fas fa-plus-circle mr-2"></i>
新增快捷日程
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -127,10 +89,33 @@
import { defineProps, defineEmits } from 'vue'; import { defineProps, defineEmits } from 'vue';
const props = defineProps({ const props = defineProps({
commonEvents: Array commonEvents: {
type: Array,
required: true
},
userInfo: {
type: Object,
required: true,
default: () => ({
id: "",
name: "",
avatar: "",
phone: "",
email: "",
team: ""
})
}
}); });
const emit = defineEmits(['add-common-event', 'drag-start', 'drag-end']); const emit = defineEmits(['add-common-event', 'drag-start', 'drag-end', 'edit-common-event']);
const addCommonEvent = () => {
emit('add-common-event');
};
const editCommonEvent = (event) => {
emit('edit-common-event', event);
};
const handleDragStart = (event, commonEvent) => { const handleDragStart = (event, commonEvent) => {
emit('drag-start', event, commonEvent, 'common'); emit('drag-start', event, commonEvent, 'common');
@@ -148,7 +133,7 @@ const handleDragEnd = () => {
} }
.common-event:hover { .common-event:hover {
transform: translateX(5px); transform: translateX(-5px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
} }

15
src/components/EventDetail.vue
View File

@@ -1,18 +1,15 @@
<template> <template>
<div <div
class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft p-6 h-full" class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft p-6"
style="height: 90vh;"
@dragover.prevent="handleDragOver" @dragover.prevent="handleDragOver"
@dragleave="handleDragLeave" @dragleave="handleDragLeave"
@drop="handleDrop" @drop="handleDrop"
:class="{'drag-over': isDragOver}" :class="{'drag-over': isDragOver}"
data-aos="fade-left"
data-aos-duration="500"
data-aos-delay="300"
> >
<div <div
v-if="!selectedDate" v-if="!selectedDate"
class="h-full flex flex-col items-center justify-center text-center p-6" class="h-full flex flex-col items-center justify-center text-center p-6"
data-aos="fade-in"
> >
<div <div
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"> 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">
@@ -30,7 +27,7 @@
</div> </div>
<div v-if="selectedDate" class="h-full flex flex-col"> <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="pb-4 border-b border-gray-100">
<div class="flex justify-between"> <div class="flex justify-between">
<h2 class="text-xl font-bold text-gray-800"> <h2 class="text-xl font-bold text-gray-800">
{{ dayjs(selectedDate).format('MM月DD日') }} {{ dayjs(selectedDate).format('MM月DD日') }}
@@ -67,7 +64,7 @@
</div> </div>
</div> </div>
<div class="mt-4 flex-1 overflow-y-auto"> <div class="mt-4 flex-1 overflow-y-auto" style="height: calc(100% - 120px);">
<div class="flex justify-between items-center mb-3"> <div class="flex justify-between items-center mb-3">
<h3 class="font-semibold text-gray-800 flex items-center"> <h3 class="font-semibold text-gray-800 flex items-center">
<i class="fas fa-tasks text-primary-600 mr-2"></i> <i class="fas fa-tasks text-primary-600 mr-2"></i>
@@ -94,8 +91,6 @@
backgroundColor: `${event.color}08`, backgroundColor: `${event.color}08`,
borderLeftColor: event.color borderLeftColor: event.color
}" }"
data-aos="fade-up"
:data-aos-delay="50 * index"
> >
<div class="flex items-start"> <div class="flex items-start">
<div class="flex-1"> <div class="flex-1">
@@ -175,7 +170,7 @@
</div> </div>
</div> </div>
<div v-else class="py-8 text-center text-gray-500" data-aos="fade-in"> <div v-else class="py-8 text-center text-gray-500">
<div <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" 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"
> >

4
src/components/LoginModal.vue
View File

@@ -7,7 +7,7 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" 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="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="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="p-8">
<div class="text-center mb-6"> <div class="text-center mb-6">
@@ -77,7 +77,7 @@ const login = () => {
// 登录成功后 // 登录成功后
const user = { const user = {
id: 'user-001', id: 'user-001',
name: '李齐', name: '李琦',
avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=Bella', avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=Bella',
phone: '13800138000', phone: '13800138000',
email: 'liqi@example.com', email: 'liqi@example.com',