fix:同时间段任务过多显示异常

Author: discreted66

packages/theme-saas/src/calendar-view/index.less

@@ -449,7 +449,7 @@
         @apply w-12;
 
         ul>li{
-          @apply h-5;
+          @apply h-6;
           @apply text-center;
           @apply border-b;
           @apply border-b-color-bg-1;
@@ -494,6 +494,12 @@
             &.is-even-num{
               @apply border-dashed;
             }
+
+            &.is-scroll-list{
+              @apply overflow-y-auto;
+              @apply overflow-x-hidden;
+              @apply scrollbar-size-0;
+            }
           }
 
           .events-item{
@@ -502,12 +508,12 @@
             @apply flex;
             @apply items-center;
             @apply ~'px-1.5';
-            @apply absolute;
             @apply top-0;
             @apply left-0;
             @apply z-10;
             @apply leading-normal;
             @apply rounded-sm;
+            @apply ~'mb-0.5';
 
             &.theme-blue {
               @apply text-color-brand;

packages/theme/src/calendar-view/index.less

@@ -446,7 +446,8 @@
       margin-left: 21px;
 
       ul > li {
-        height: 20px;
+        height: var(--tv-CalendarView-events-list-height);
+        padding: var(--tv-CalendarView-events-list-padding);
         text-align: left;
         border-bottom-width: var(--tv-CalendarView-timeline-li-border-width);
         border-bottom-style: solid;
@@ -493,6 +494,16 @@
           &.is-even-num {
             border-bottom-style: dashed;
           }
+
+          &.is-scroll-list{
+            overflow-y: auto;
+            overflow-x: hidden;
+
+            &.is-scroll-list::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+            }
+          }
         }
 
         .events-item {
@@ -502,13 +513,13 @@
           display: flex;
           align-items: center;
           padding: 0 6px;
-          position: absolute;
           top: 0;
           left: 0;
           z-index: 10;
           line-height: 1.5;
           border-radius: 2px;
           color: var(--tv-CalendarView-events-item-text-color);
+          margin-bottom: 1px;
 
           &.theme-blue {
             border-left: 2px solid #1890ff;

packages/vue/src/calendar-view/src/mobile-first.vue

@@ -243,7 +243,13 @@
                     v-for="(item, i) in state.dayTimes"
                     :key="date.value + item.time"
                     class="relative h-5 p-0.5 list-none border-b border-color-bg-2"
-                    :class="[i % 2 === 0 ? 'border-dashed' : 'border-solid']"
+                    :class="{
+                      'border-dashed': i % 2 === 0,
+                      'border-solid': i % 2 !== 0,
+                      'overflow-hidden overflow-y-auto scrollbar-size-0':
+                        getEventByTime(date.value, item.time, state.dayTimes[i + 1] && state.dayTimes[i + 1].time)
+                          .length > 1
+                    }"
                   >
                     <div
                       v-for="(event, idx) of getEventByTime(
@@ -252,12 +258,12 @@
                         state.dayTimes[i + 1] && state.dayTimes[i + 1].time
                       )"
                       :key="idx"
-                      class="w-11/12 flex items-center px-1.5 absolute top-0 left-0 z-10 leading-normal rounded-sm"
+                      class="w-11/12 flex mb-0.5 items-center px-1.5 top-0 left-0 z-10 leading-normal rounded-sm"
                       :class="[gcls(`theme-${event.theme || blue}`)]"
                       :style="{
                         'height': event.height + 'px',
-                        'left': event.left + 'px',
-                        'width': `calc(92% - ${event.left}px)`
+
+                        'width': `92%`
                       }"
                     >
                       <span>{{ event.title }}</span>

packages/vue/src/calendar-view/src/pc.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tiny-calendar-view" :style="{ 'height': height ? `${parseInt(height)}px` : 'auto'}">
+  <div class="tiny-calendar-view" :style="{ 'height': height ? `${parseInt(height)}px` : 'auto' }">
     <div class="tiny-calendar-view__header">
       <div>
         <tiny-button v-if="showBackToday" @click="toToday">{{ t('ui.calendarView.backToday') }}</tiny-button>
@@ -162,7 +162,12 @@
                   <li
                     v-for="(item, i) in state.dayTimes"
                     :key="date.value + item.time"
-                    :class="i % 2 === 0 && 'is-even-num'"
+                    :class="{
+                      'is-even-num': i % 2 === 0,
+                      'is-scroll-list':
+                        getEventByTime(date.value, item.time, state.dayTimes[i + 1] && state.dayTimes[i + 1].time)
+                          .length > 1
+                    }"
                   >
                     <div
                       v-for="(event, idx) of getEventByTime(
@@ -175,8 +180,7 @@
                       :class="[`theme-${event.theme || 'blue'}`]"
                       :style="{
                         'height': event.height + 'px',
-                        'left': event.left + 'px',
-                        'width': `calc(92% - ${event.left}px)`
+                        'width': `92%`
                       }"
                     >
                       <span>{{ event.title }}</span>