@opendesign-plus/components 0.0.1-rc.10

package/src/components/activity/OMyActivityCalendar.vue

@@ -0,0 +1,1501 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import {
+  OButton,
+  ODivider,
+  OIcon,
+  OScroller,
+  OCollapse,
+  OCollapseItem,
+  OTag,
+  ODialog,
+  useMessage,
+  OIconArrowLeft,
+  OIconArrowRight,
+  OIconChevronLeft,
+  OIconChevronRight,
+  DialogActionT, OLink,
+} from '@opensig/opendesign';
+import { ElCalendar } from 'element-plus';
+import dayjs from 'dayjs';
+import { useDebounceFn } from '@vueuse/core';
+
+import IconCopy from '~icons/meeting/icon-copy.svg';
+import IconEvent from '~icons/meeting/icon-event.svg';
+
+import type { ActivityItemT, MyActivityCalendarPropsT, ParamsItemT } from './types';
+import { useScreen } from '@opendesign-plus/composables';
+import { formatDate, getDateNumber } from '../meeting/utils';
+import { getStatusMap, getActicityTypeMap } from './config';
+import { PageParamsT } from '../meeting/types';
+import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
+import { useI18n, Locales } from '@/i18n';
+
+const { t, locale } = useI18n();
+const isZh = computed(() => locale.value === Locales.ZH);
+const statusMap = getStatusMap();
+const acticityTypeMap = getActicityTypeMap();
+
+const formatMonthYear = (date: string | Date) => {
+  const d = dayjs(date || new Date());
+  return isZh.value ? d.format('YYYY MM月') : d.format('MMMM YYYY');
+};
+
+const message = useMessage(null);
+const { isPhone } = useScreen();
+
+const props = defineProps<MyActivityCalendarPropsT>();
+
+const emits = defineEmits(['edit']);
+const list = ref<ActivityItemT[]>([]); // 列表数据
+const originList = ref([]); // 原始数据
+
+const currentPage = ref(1); // 分页-当前页
+const pageSize = ref(50); // 分页-每页数量
+const total = ref(null); // 分页-总数
+const reloadAll = ref(false); // 是否需要清空数据
+
+const expanded = ref([]);  // 展开的数据，id
+
+const nextLoading = ref(false);
+const bottomReached = ref(false);
+
+const canLoadMore = computed(() => originList.value.length < total.value || total.value === null);
+
+const getList = async () => {
+  if (!props.getListRequest) {
+    return;
+  }
+  if (nextLoading.value) {
+    return;
+  }
+  try {
+    if (total.value > 0 && (currentPage.value - 1) * pageSize.value > total.value) {
+      return;
+    }
+    // 当月数据已加载完，手动切换下一月
+    if (!canLoadMore.value && isPhone.value) {
+      changeMonth('next-month');
+      return;
+    }
+    nextLoading.value = true;
+    const res = await props.getListRequest({
+      page: currentPage.value,
+      size: pageSize.value,
+    } as unknown as PageParamsT);
+    const tempList = (res.data || [])
+      .map((item: ActivityItemT) => {
+        const { start_date, end_date, start, end } = item;
+        return [
+          {
+            ...item,
+            time: `${ start_date }-${ end }`,
+            start_date_time: `${ start_date } ${ start }`,
+            end_date_time: `${ end_date } ${ end }`,
+            type: 'activity',
+            dateRange: `${ start_date } ${ start }-${ end_date } ${ end }`,
+            isExpired: dayjs(`${ start_date } ${ start }`).isBefore(dayjs()),
+          },
+        ];
+      })
+      .flat()
+      .filter((v) => {
+        return v.start_date.slice(0, 7) === formatDate(selectedDate.value, 'YYYY-MM-DD').slice(0, 7);
+      });
+    if (reloadAll.value) {
+      originList.value = res.data || [];
+      list.value = tempList;
+    } else {
+      if (currentPage.value === 1 && !isPhone.value) {
+        originList.value = res.data || [];
+        list.value = tempList;
+      } else {
+        originList.value = [...originList.value, ...(res.data || [])];
+        list.value = [...list.value, ...tempList];
+      }
+    }
+    list.value.sort((a, b) => {
+      if (a.start_date === b.start_date) {
+        return getDateNumber(a.start) > getDateNumber(b.start) ? 1 : -1;
+      } else {
+        return dayjs(a.start_date).isAfter(dayjs(b.start_date)) ? 1 : -1;
+      }
+    });
+    total.value = res?.total || 0;
+    nextTick(() => {
+      getSelectedDate();
+      // 监听滚动事件以自动加载下一页
+      if (scrollerRef.value && !isPhone.value) {
+        updateScroller();
+      }
+    });
+  } finally {
+    nextLoading.value = false;
+    bottomReached.value = false;
+    reloadAll.value = false;
+  }
+};
+
+const expandList = ref<number[]>([]);
+const getActivityDetail = (val: number) => {
+  if (!props.getActivityDetailRequest) {
+    return;
+  }
+  if (!expandList.value.includes(val)) {
+    expandList.value.push(val);
+    props.getActivityDetailRequest(val).then((res) => {
+      list.value?.forEach((item) => {
+        if (item.id === res.id) {
+          item.approve_record = res.approve_record;
+        }
+      });
+    });
+  }
+};
+
+const change = (val: number[]) => {
+  if (val.length) {
+    val.forEach((item: number) => {
+      getActivityDetail(item);
+    });
+  }
+};
+
+const calcIfApproved = (date) => {
+  const activityOfDate = list.value.filter((v) => v.start_date === date);
+  return activityOfDate.length && activityOfDate.every((v) => v.status === 3 || v.status === 4);
+};
+
+const scrollerScroll = (el) => {
+  const container = el.target;
+  if (!container) return;
+  const scrollTop = container.scrollTop; // 已经滚动的距离
+  const scrollHeight = container.scrollHeight; // 内容总高度
+  const clientHeight = container.clientHeight; // 容器可视高度
+  if (scrollTop + clientHeight >= scrollHeight) {
+    load();
+  }
+};
+const updateScroller = () => {
+  const scrollerContainerEl = scrollerRef.value.getContainerEl();
+  scrollerContainerEl.addEventListener('scroll', scrollerScroll);
+};
+
+// -------------------- 日历 --------------------
+const calendarRef = ref();
+const selectedDate = ref();
+const allDateList = computed<string[]>(() => [...new Set(list.value.map((v) => v.start_date))].sort((a, b) => (dayjs(a).isBefore(dayjs(b)) ? -1 : 1)));
+const dateList = computed<string[]>(() =>
+  [...new Set(list.value.filter((v) => !v.isExpired && !v.is_delete).map((v) => v.start_date))].sort((a, b) => (dayjs(a).isBefore(dayjs(b)) ? -1 : 1)),
+);
+const getSelectedDate = () => {
+  const latest = dateList.value.find((v) => !dayjs(v).isBefore(dayjs(new Date()).format('YYYY-MM-DD')));
+  if (latest) {
+    selectedDate.value = latest;
+  } else if (!selectedDate.value) {
+    selectedDate.value = dayjs().format('YYYY-MM-DD');
+  }
+  calendarRef.value?.pickDay(dayjs(selectedDate.value));
+  selectedDate.value = dayjs(selectedDate.value).format('YYYY-MM-DD');
+  // 根据天再计算出需要展开的最近的会议
+  const needExpand = list.value.find((v) => v.start_date === selectedDate.value && !v.isExpired && !v.is_delete);
+  if (needExpand) {
+    getActivityDetail(needExpand.id);
+    expanded.value = [needExpand.id];
+  }
+};
+
+const cellClick = (e: PointerEvent & any, clickable: boolean) => {
+  if (!clickable || !e.target?.className.includes('date-cell-text')) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+};
+
+const changeMonth = (val: string) => {
+  if (!calendarRef.value) return;
+  currentPage.value = 1;
+  total.value = null;
+  expandList.value = [];
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+  calendarRef.value.selectDate(val);
+  reloadAll.value = true;
+  nextTick(() => {
+    selectedDate.value = dayjs(calendarRef.value.selectedDay).format('YYYY-MM-DD');
+    getList();
+  });
+};
+
+
+// -------------------- 活动列表 --------------------
+const activityList = computed(() => {
+  return list.value.reduce((prev, cur) => {
+    if (!prev.length) {
+      return [
+        {
+          start_date: cur.start_date,
+          list: [cur],
+        },
+      ];
+    } else {
+      const last = prev.at(-1);
+      if (last?.start_date === cur.start_date) {
+        last?.list.push(cur);
+      } else {
+        prev.push({
+          start_date: cur.start_date,
+          list: [cur],
+        });
+      }
+      return prev;
+    }
+  }, []);
+});
+
+// -------------------- 活动详情组件实例 --------------------
+const detailRefs = ref({});
+const getDetailRefs = (insRef, id) => {
+  if (insRef && id) {
+    detailRefs.value[id] = insRef;
+  }
+};
+
+// -------------------- 处理滚动事件 --------------------
+const scrollerRef = ref();
+const scrollToSelectedDate = (date: string) => {
+  const key = dayjs(date).format('YYYY-MM-DD');
+  const targetEle = document.querySelector(`#group-title-${ key }`);
+  if (targetEle) {
+    if (isPhone.value) {
+      window.scrollTo({
+        top: (targetEle.parentElement?.offsetTop || 0) - 52,
+        behavior: 'smooth',
+      });
+    } else {
+      scrollerRef.value?.scrollTo({
+        top: targetEle.parentElement?.offsetTop || 0,
+        behavior: 'smooth',
+      });
+    }
+  }
+};
+
+watch(
+  () => selectedDate.value,
+  () => {
+    scrollToSelectedDate(selectedDate.value);
+  },
+);
+
+// -------------------- 自动加载下一页 --------------------
+const load = useDebounceFn(() => {
+  if (!canLoadMore.value) return;
+  if (isPhone.value) return;
+  bottomReached.value = true;
+  currentPage.value++;
+  getList();
+}, 200);
+
+// -------------------- 活动操作 --------------------
+const dialogLoading = ref(false); // 弹窗按钮状态
+const currentRow = ref<ActivityItemT | null>(null); // 当前活动详情
+// 撤销审核
+const revokeVisible = ref(false);
+const handleRevokeItem = (val: ActivityItemT) => {
+  currentRow.value = val;
+  revokeVisible.value = true;
+};
+const confirm = () => {
+  if (!props.revokeActivityRequest) {
+    return;
+  }
+  dialogLoading.value = true;
+props.revokeActivityRequest(currentRow.value?.id)
+    .then(() => {
+      message.success({
+        content: t('meeting.revokeActivitySuccess', [currentRow.value.title]),
+      });
+      reloadAll.value = true;
+      getList();
+    })
+    .catch(() => {
+      message.danger({
+        content: t('meeting.revokeActivityFail', [currentRow.value.title]),
+      });
+    })
+    .finally(() => {
+      revokeVisible.value = false;
+      dialogLoading.value = false;
+    });
+};
+const cancel = () => {
+  revokeVisible.value = false;
+};
+// 修改活动
+const handleEditItem = (val: ActivityItemT) => {
+  emits('edit', val);
+
+};
+// 提交审核
+const handleSubmitReviewItem = (val: ActivityItemT) => {
+  if (!props.editActivityRequest) {
+    return;
+  }
+  const {
+    title,
+    start_date,
+    end_date,
+    register_end_date,
+    activity_type,
+    synopsis,
+    register_url,
+    content_url,
+    address,
+    start,
+    end,
+    approver,
+  } = val;
+  let params = {
+    title,
+    start_date,
+    end_date,
+    register_end_date,
+    activity_type,
+    synopsis,
+    register_url,
+    content_url,
+    address,
+    start,
+    end,
+    approver,
+    is_publish: 'true',
+  } as ParamsItemT;
+props.editActivityRequest(val.id, params)
+    .then(() => {
+      message.success({
+        content: t('meeting.submitReviewSuccess', [val.title]),
+      });
+      reloadAll.value = true;
+      getList();
+    })
+    .catch(() => {
+      message.danger({
+        content: t('meeting.submitReviewFail', [val.title]),
+      });
+    });
+};
+// 删除活动
+const deleteVisible = ref(false);
+const handleDeleteItem = (val: ActivityItemT) => {
+  currentRow.value = val;
+  deleteVisible.value = true;
+};
+const confirmDelete = () => {
+  if (!props.deleteActivityRequest) {
+    return;
+  }
+  dialogLoading.value = true;
+props.deleteActivityRequest(currentRow.value?.id)
+    .then(() => {
+      message.success({
+        content: t('meeting.deleteActivitySuccess', [currentRow.value.title]),
+      });
+      reloadAll.value = true;
+      getList();
+    })
+    .catch(() => {
+      message.danger({
+        content: t('meeting.deleteActivityFail', [currentRow.value.title]),
+      });
+    })
+    .finally(() => {
+      deleteVisible.value = false;
+      dialogLoading.value = false;
+    });
+};
+const cancelDelete = () => {
+  deleteVisible.value = false;
+};
+
+// -------------------- 获取header高度 --------------------
+const headerRef = ref();
+const headerHeight = ref(0);
+const getHeaderHeight = () => {
+  headerHeight.value = headerRef.value?.clientHeight || 0;
+};
+
+const handleScroll = useDebounceFn(() => {
+  if (!canLoadMore.value) return;
+  if (!isPhone.value) return;
+  const scrollPosition = window.scrollY || window.pageYOffset;
+  // 检测是否接近底部
+  const windowHeight = window.innerHeight;
+  const docHeight = document.documentElement.scrollHeight;
+  const distanceToBottom = docHeight - (scrollPosition + windowHeight);
+  // 当距离底部300px时开始加载
+  if (distanceToBottom <= 300 && !nextLoading.value) {
+    bottomReached.value = true;
+    // 加载下一页
+    currentPage.value++;
+    getList();
+  }
+}, 200);
+
+onMounted(() => {
+  getList();
+  // 添加滚动事件监听
+  window.addEventListener('scroll', handleScroll);
+  // 添加resize监听器
+  window.addEventListener('resize', handleScroll);
+  getHeaderHeight();
+  window.addEventListener('resize', getHeaderHeight);
+});
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+  window.removeEventListener('resize', handleScroll);
+  window.removeEventListener('resize', getHeaderHeight);
+  const scrollerContainerEl = scrollerRef.value?.getContainerEl();
+  scrollerContainerEl?.removeEventListener('scroll', scrollerScroll);
+});
+
+
+const revokeActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: dialogLoading.value,
+    color: 'primary',
+    variant: 'outline',
+    round: 'pill',
+    size: 'large',
+    label: t('meeting.confirmBtn'),
+    onClick: () => {
+      confirm();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: 'solid',
+    round: 'pill',
+    size: 'large',
+    label: t('meeting.cancelBtn'),
+    onClick: () => {
+      cancel();
+    },
+  }];
+});
+const deleteActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: dialogLoading.value,
+    color: 'primary',
+    variant: 'outline',
+    round: 'pill',
+    size: 'large',
+    label: t('meeting.confirmBtn'),
+    onClick: () => {
+      confirmDelete();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: 'solid',
+    round: 'pill',
+    size: 'large',
+    label: t('meeting.cancelBtn'),
+    onClick: () => {
+      cancelDelete();
+    },
+  }];
+});
+</script>
+
+<template>
+  <div class="o-my-activity-calendar">
+    <div class="activity-list">
+      <div v-if="isPhone" class="list-calendar-mb">
+        <span>{{ formatMonthYear(selectedDate) }}</span>
+        <span>
+          <OIcon @click="changeMonth('prev-month')"><OIconChevronLeft /></OIcon>
+          <OIcon @click="changeMonth('next-month')"><OIconChevronRight /></OIcon>
+        </span>
+      </div>
+      <div class="left-calendar">
+        <ElCalendar ref="calendarRef" v-model="selectedDate">
+          <template #header>
+            <span>{{ formatMonthYear(selectedDate) }}</span>
+            <div>
+              <OIcon @click="changeMonth('prev-month')">
+                <OIconChevronLeft />
+              </OIcon>
+              <OIcon @click="changeMonth('next-month')">
+                <OIconChevronRight />
+              </OIcon>
+            </div>
+          </template>
+          <template #date-cell="{ data }">
+            <div
+              @click="(e) => cellClick(e, allDateList.includes(data.day))"
+              :class="{
+                'date-cell': true,
+                'is-selected': data.isSelected,
+                'is-today': formatDate(data.day) === formatDate(),
+                clickable: allDateList.includes(data.day),
+                approved: calcIfApproved(data.day),
+              }"
+            >
+              <div class="date-cell-text">
+                {{ Number(data.day.split('-')[2]) }}
+              </div>
+            </div>
+          </template>
+        </ElCalendar>
+      </div>
+      <div class="right-meeting">
+        <OScroller
+          v-if="list.length"
+          ref="scrollerRef"
+          @scrollend="load"
+          :style="{ '--header-height': headerHeight }"
+          show-type="hover"
+          class="scroller-container"
+        >
+          <div class="list-body">
+            <OCollapse v-model="expanded" :accordion="isPhone" @change="change">
+              <template v-for="(act, idx) in activityList" :key="act.start_date">
+                <div class="list-month-change prev-month" v-if="idx === 0" @click="changeMonth('prev-month')">
+                  <OIcon>
+                    <OIconArrowLeft />
+                  </OIcon>
+                  <span>{{ t('meeting.preMonth') }}</span>
+                </div>
+                <div class="act-item" :class="idx === activityList.length - 1 && 'last-item'">
+                  <div
+                    :class="{
+                      'act-bar': true,
+                      'is-active': dayjs(selectedDate).format('YYYY-MM-DD') === act.start_date,
+                      'is-end': act.list.every((row) => row.isExpired),
+                      approved: act.list.every((row) => row.status === 3 || row.status === 4),
+                    }"
+                  >
+                    <div class="act-bar-line"></div>
+                    <div class="act-bar-dot"></div>
+                  </div>
+                  <div
+                    :class="{
+                      'group-title': true,
+                      'is-end': act.list.every((row) => row.isExpired),
+                    }"
+                    :id="`group-title-${dayjs(new Date(act.start_date)).format('YYYY-MM-DD')}`"
+                  >
+                    {{ dayjs(act.start_date).format('MM/DD') }}
+                  </div>
+                  <OCollapseItem
+                    v-for="(row, rowIdx) in act.list"
+                    :key="row.sub_id || row.id"
+                    :value="row.sub_id || row.id"
+                    :class="{
+                      'last-item': idx === activityList.length - 1 && rowIdx === act.list.length - 1,
+                    }"
+                  >
+                    <template #title>
+                      <div class="item-header-left">
+                        <div class="act-icon">
+                          <OIcon>
+                            <IconEvent />
+                          </OIcon>
+                        </div>
+                        <div class="header-info">
+                          <div
+                            :class="{
+                              'act-title': true,
+                              'is-delete': row.is_delete,
+                              'is-end': row.isExpired,
+                            }"
+                          >
+                            <div class="title-text">{{ row.title }}</div>
+                            <OTag
+                              color="primary"
+                              variant="outline"
+                              :class="[`tag-${row.is_delete ? 'delete' : statusMap.get(row.status)?.id}`]">
+                              {{
+                                row.is_delete === 1 ? t('meeting.statusCanceled') : statusMap.get(row.status)?.text
+                              }}
+                            </OTag>
+                          </div>
+                          <div class="act-info">
+                            <span class="date-range">{{ row.dateRange }}</span>
+                            <ODivider direction="v"></ODivider>
+                            <span>{{ acticityTypeMap.get(row.activity_type)?.label }}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="item-header-right"
+                           v-if="row.content_url && !row.is_delete && [3,4,5,6].includes(row.status)">
+                        <OLink v-if="row.content_url" :href="row.content_url" target="_blank" rel="noopener noreferrer">
+                          {{ t('meeting.activityDetail') }}
+                          <template #suffix>
+                            <OIcon>
+                              <OIconChevronRight></OIconChevronRight>
+                            </OIcon>
+                          </template>
+                        </OLink>
+                        <OLink
+                          v-if="
+                          row.register_url && (
+                            row.status === 3 ||
+                            row.status === 4 ||
+                            (row.status === 2 && row.update_activity_id && new Date(row.register_end_date).getTime() > new Date().getTime()))
+                          "
+                          :href="row.register_url"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {{ t('meeting.registerNow') }}
+                          <template #suffix>
+                            <OIcon>
+                              <OIconChevronRight></OIconChevronRight>
+                            </OIcon>
+                          </template>
+                        </OLink>
+                      </div>
+                      <OIcon @click.stop="() => copyInfo(rowIdx)" class="copy-icon">
+                        <IconCopy />
+                      </OIcon>
+                    </template>
+                    <div class="activity-detail">
+                      <OMeetingDetail
+                        :show="expanded.includes(row.id)"
+                        :data="row"
+                        :ref="(insRef) => getDetailRefs(insRef, row.id)"
+                      />
+                      <div class="activity-btn" v-if="!row.isExpired && !row.is_delete">
+                        <OButton
+                          v-if="row.status === 2"
+                          variant="text"
+                          @click="handleRevokeItem(row)"
+                        >
+                          {{ t('meeting.withdrawReview') }}
+                        </OButton>
+                        <OButton
+                          v-if="row.status === 1 || row.status === 3 || row.status === 4 || row.status === 7"
+                          variant="text" @click="handleEditItem(row)"
+                        >
+                          {{ t('meeting.modifyActivity') }}
+                        </OButton>
+                        <OButton
+                          v-if="row.status === 1 || row.status === 7" variant="text"
+                          @click="handleDeleteItem(row)"
+                        >
+                          {{ t('meeting.deleteActivity') }}
+                        </OButton>
+                        <OButton
+                          v-if="row.status === 1 || row.status === 7" variant="text"
+                          @click="handleSubmitReviewItem(row)"
+                        >
+                          {{ t('meeting.submitReview') }}
+                        </OButton>
+                      </div>
+                    </div>
+                  </OCollapseItem>
+                  <div class="height-placeholder"></div>
+                </div>
+                <template v-if="idx === activityList.length - 1">
+                  <div class="load-text" v-if="bottomReached">{{ t('meeting.loading') }}</div>
+                  <div class="list-month-change next-month" @click="changeMonth('next-month')">
+                    <OIcon>
+                      <OIconArrowRight />
+                    </OIcon>
+                    <span>{{ t('meeting.nextMonth') }}</span>
+                  </div>
+                </template>
+              </template>
+            </OCollapse>
+          </div>
+        </OScroller>
+        <slot v-else name="empty">
+        </slot>
+      </div>
+    </div>
+  </div>
+<!-- 撤销审核弹窗 -->
+  <ODialog v-model:visible="revokeVisible" main-class="handle-dialog-active" :actions="revokeActions">
+    <template #header>{{ t('meeting.withdrawReview') }}</template>
+    <div class="dialog-content">{{ t('meeting.confirmRevokeActivity', [currentRow.title]) }}</div>
+  </ODialog>
+  <!-- 删除活动弹窗 -->
+  <ODialog v-model:visible="deleteVisible" main-class="handle-dialog-active" :actions="deleteActions">
+    <template #header>{{ t('meeting.deleteActivity') }}</template>
+    <div class="dialog-content">{{ t('meeting.confirmDeleteActivity', [currentRow.title]) }}</div>
+  </ODialog>
+</template>
+
+<style lang="scss">
+
+.o-my-activity-calendar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    @include h2;
+  }
+
+  .desc {
+    color: var(--o-color-info2);
+    margin-top: 12px;
+    @include tip1;
+  }
+
+  .activity-list {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--o-gap-4);
+    height: 100%;
+    --phone-padding-top: 0;
+    @include respond-to('pad_v') {
+      flex-direction: column;
+      gap: var(--o-gap-4);
+    }
+    @include respond-to('phone') {
+      flex-direction: column;
+      gap: var(--o-gap-3);
+      --phone-padding-top: calc(var(--o-gap-5) + var(--o-gap-3) + var(--o-gap-3));
+    }
+
+    .o-loading {
+      .o-layer-mask {
+        background-color: transparent;
+      }
+
+      .o-loading-icon {
+        color: var(--layer-mask);
+      }
+    }
+  }
+
+  .list-calendar-mb {
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--grid--layout-padding);
+
+    span:first-child {
+      font-weight: 500;
+      @include display2;
+    }
+
+    span:last-child {
+      display: flex;
+      align-items: center;
+    }
+
+    .o-icon {
+      font-size: 24px;
+      cursor: pointer;
+
+      &:last-child {
+        margin-left: 24px;
+      }
+    }
+
+    @include respond-to('phone') {
+      padding-top: var(--o-gap-7);
+      background-color: var(--o-color-ubmc-bg);
+      padding-bottom: var(--o-gap-4);
+      --phone-padding-top: calc(28px + var(--o-gap-7) + var(--o-gap-4));
+      display: flex;
+      position: fixed;
+      height: var(--phone-padding-top);
+      z-index: 1;
+      top: var(--layout-header-height);
+      left: 0;
+      right: 0;
+    }
+  }
+
+  .left-calendar {
+    width: 336px;
+    flex-shrink: 0;
+    @include respond-to('pad_h') {
+      .el-calendar {
+        .el-calendar__body {
+          padding-left: 12px;
+          padding-right: 12px;
+
+          .el-calendar-table .date-cell {
+            height: 40px;
+            width: 28px;
+
+            .date-cell-text {
+              line-height: 24px;
+              @include tip2;
+            }
+          }
+        }
+      }
+    }
+    @include respond-to('pad_v') {
+      width: 100%;
+    }
+    @include respond-to('phone') {
+      display: none;
+    }
+
+    .el-calendar {
+      min-height: 460px;
+      height: calc(100% - 54px);
+      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+      border-radius: var(--o-radius-xs);
+
+      .el-calendar__header {
+        border-bottom: 1px solid var(--o-color-control4);
+
+        & > span {
+          font-weight: 500;
+          color: var(--o-color-info1);
+          @include h1;
+        }
+
+        & > div {
+          display: flex;
+          align-items: center;
+          gap: var(--o-gap-5);
+
+          .o-icon {
+            font-size: 24px;
+            cursor: pointer;
+
+            &:hover {
+              color: var(--o-color-primary1);
+            }
+          }
+        }
+      }
+
+      .el-calendar__body {
+        .el-calendar-table {
+          width: 100%;
+
+          th {
+            text-align: center;
+            border: none;
+            --o-color-control3-light: transparent;
+          }
+
+          tr {
+            --o-color-fill2: transparent;
+          }
+
+          td {
+            border: none;
+            text-align: center;
+            transition: none;
+            padding: 0;
+            background-color: transparent !important;
+
+            .el-calendar-day {
+              padding: 0;
+              height: fit-content;
+            }
+
+            div {
+              cursor: default !important;
+            }
+
+            &:hover {
+              .el-calendar-day {
+                background-color: transparent;
+              }
+            }
+          }
+
+          .date-cell {
+            height: 56px;
+            width: 42px;
+            padding: var(--o-gap-1);
+            position: relative;
+            cursor: default !important;
+
+            .date-cell-text {
+              font-size: 14px;
+              line-height: 36px;
+              border-radius: var(--o-radius-xs);
+              background-color: var(--o-color-control2-light);
+              border: 1px solid transparent;
+            }
+
+            .date-cell-text {
+              cursor: not-allowed !important;
+            }
+
+            &.clickable {
+              .date-cell-text {
+                cursor: pointer !important;
+              }
+
+              &:not(.is-selected) {
+                .date-cell-text:hover {
+                  background-color: var(--o-color-control3-light);
+                }
+              }
+            }
+
+            &::after {
+              content: '';
+              position: absolute;
+              bottom: 2px;
+              left: 50%;
+              transform: translateX(-50%);
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+            }
+
+            &.is-today {
+              .date-cell-text {
+                color: #000;
+                background-color: var(--o-color-control3-light);
+              }
+            }
+
+            &.is-selected {
+              .date-cell-text {
+                background-color: var(--o-color-control3-light);
+                border: 1px solid var(--o-color-primary1);
+              }
+            }
+
+            &.clickable {
+              &::after {
+                background-color: rgb(var(--o-mixedgray-6));
+              }
+
+              &.approved::after {
+                background-color: rgba(var(--o-cyan-6));
+              }
+
+              &.expired::after {
+                background-color: rgb(var(--o-mixedgray-6));
+              }
+
+              &.all-deleted::after {
+                background-color: rgb(var(--o-mixedgray-6));
+              }
+            }
+          }
+
+          .is-today {
+            color: inherit;
+          }
+        }
+      }
+    }
+
+
+  }
+
+  .right-meeting {
+    flex-grow: 1;
+    background-color: var(--o-color-fill2);
+
+    @include respond-to('phone') {
+      margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
+    }
+
+    &.is-empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .o-scroller {
+      .o-scrollbar-rail {
+        right: -16px;
+        height: 100%;
+      }
+    }
+
+    .scroller-container {
+      height: 100%;
+      max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
+      @include respond-to('phone') {
+        max-height: fit-content;
+      }
+
+      .act-item {
+        padding-left: 24px;
+        position: relative;
+
+        &.last-item {
+          flex-grow: 1;
+        }
+
+        @include respond-to('phone') {
+          padding-left: var(--o-gap-2);
+        }
+
+        .act-bar {
+          position: absolute;
+          left: 0;
+          width: 16px;
+          top: 0;
+          bottom: 0;
+          overflow: hidden;
+
+          --active-color: var(--o-color-primary1);
+
+          &::before {
+            content: '';
+            width: 2px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: var(--o-color-control4);
+          }
+
+          .act-bar-dot {
+            width: 16px;
+            height: 26px;
+            position: relative;
+            @include respond-to('laptop') {
+              height: 24px;
+            }
+            @include respond-to('pad_h') {
+              height: 22px;
+            }
+            @include respond-to('<=pad_v') {
+              height: 22px;
+            }
+
+            &::before,
+            &::after {
+              content: '';
+              border-radius: 50%;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translateY(-50%) translateX(-50%);
+            }
+
+            &::before {
+              width: 16px;
+              height: 16px;
+              background-color: transparent;
+            }
+
+            &::after {
+              width: 8px;
+              height: 8px;
+              background-color: var(--active-color);
+            }
+          }
+
+          &.is-active {
+            .act-bar-dot {
+              &::before {
+                background-color: var(--active-color);
+              }
+
+              &::after {
+                background-color: var(--o-color-fill2);
+              }
+            }
+          }
+
+          &.is-end {
+            --active-color: rgb(222, 222, 227);
+          }
+        }
+
+        .approved {
+          --active-color: var(--o-color-primary1);
+        }
+
+        .group-title {
+          font-weight: 500;
+          margin-bottom: var(--o-gap-2);
+          color: var(--o-color-info1);
+          @include text2;
+          @include respond-to('phone') {
+            padding-left: var(--o-gap-5);
+          }
+
+          &.is-end {
+            color: var(--o-color-info3);
+          }
+        }
+      }
+    }
+  }
+
+  .list-body {
+    height: 100%;
+
+    @include respond-to('phone') {
+      height: fit-content;
+      padding: var(--o-gap-4) !important;
+    }
+
+    .list-month-change {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: var(--o-gap-5);
+      cursor: pointer;
+      --btn-color: var(--o-color-primary1);
+      @include hover {
+        --btn-color: var(--o-color-primary2);
+      }
+      @include respond-to('phone') {
+        display: none;
+      }
+
+      &.prev-month {
+        margin-bottom: var(--o-gap-6);
+      }
+
+      &.next-month {
+        margin-top: var(--o-gap-6);
+        padding-bottom: 32px;
+      }
+
+      .o-icon {
+        font-size: 24px;
+        color: var(--btn-color);
+      }
+
+      span {
+        color: var(--btn-color);
+        @include text1;
+      }
+    }
+
+    .o-collapse {
+      padding: 0;
+      border-radius: 0;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .o-collapse-item-expanded + .o-collapse-item-expanded {
+        margin-top: var(--o-gap-4);
+      }
+
+      .height-placeholder {
+        height: 0;
+        transition: margin var(--o-easing-standard) var(--o-duration-s);
+      }
+
+      .o-collapse-item-expanded + .height-placeholder {
+        height: var(--o-gap-4);
+      }
+
+      .o-collapse-item {
+        padding: var(--o-gap-4) var(--o-gap-5);
+        border-top: none;
+        border-radius: var(--o-radius-xs);
+        transition: margin var(--o-easing-standard) var(--o-duration-s);
+        --copy-display: none;
+        --icon-size: 24px;
+        @include respond-to('<=pad_v') {
+          padding: var(--o-gap-3) var(--o-gap-4);
+        }
+
+        &:hover {
+          @include respond-to('>pad_v') {
+            --copy-display: inline-flex;
+          }
+        }
+
+        @include respond-to('phone') {
+          --icon-size: 20px;
+        }
+
+        &.o-collapse-item-expanded {
+          @include respond-to('<=pad_v') {
+            --copy-display: inline-flex;
+          }
+        }
+
+
+        &.o-collapse-item-expanded {
+          background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+        }
+      }
+
+      .o-collapse-item-header {
+        border-bottom: 1px solid var(--o-color-control4);
+        padding-top: 0;
+        padding-bottom: var(--o-gap-4);
+        display: flex;
+        align-items: center;
+        gap: var(--o-gap-4);
+        position: relative;
+
+        .o-collapse-item-icon {
+          position: relative;
+          top: 4px;
+          flex-shrink: 0;
+          @include respond-to('phone') {
+            position: absolute;
+            right: 0;
+            width: 20px;
+            height: 20px;
+            font-size: 20px;
+            bottom: var(--o-gap-2);
+            top: revert;
+          }
+        }
+
+
+        .o-collapse-item-title {
+          flex: 1;
+          width: 0;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          justify-content: space-between;
+          margin-bottom: 0;
+
+          .item-header-left {
+            display: flex;
+            align-items: flex-start;
+            gap: var(--o-gap-3);
+            width: 100%;
+            @include respond-to('phone') {
+              flex-grow: 1;
+              width: 100%;
+              align-self: stretch;
+              flex-shrink: 0;
+            }
+
+            .act-icon {
+              width: var(--icon-size);
+              height: var(--icon-size);
+              border-radius: 50%;
+              background-color: rgb(var(--o-cyan-6));
+              color: #fff;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              flex-shrink: 0;
+
+              .o-icon {
+                svg path {
+                  fill: currentColor;
+                }
+              }
+
+            }
+
+            .header-info {
+              width: calc(100% - var(--o-gap-3) - var(--icon-size));
+
+              .act-title {
+                font-weight: 500;
+                display: flex;
+                align-items: center;
+                margin-bottom: var(--o-gap-2);
+                @include text2;
+
+                &.is-delete,
+                &.is-end {
+                  color: var(--o-color-info3);
+                }
+
+                .title-text {
+                  flex: 0 1 auto;
+                  min-width: 0;
+                  max-width: 100%;
+                  @include text-truncate(1);
+                }
+
+                .o-tag {
+                  margin-left: 8px;
+                  --tag-radius: 4px;
+                  font-weight: 500;
+                  padding: 0 8px;
+                  height: 24px;
+                  line-height: 24px !important;
+                  @include tip1;
+
+                  .o-tag-label {
+                    transform: none !important;
+                  }
+
+                  &.o-tag-outline {
+                    --tag-bd-color: transparent;
+                    --tag-color: #fff;
+                  }
+
+                  &.tag-under-review {
+                    --tag-bg-color: rgb(var(--o-blue-6));
+                  }
+
+                  &.tag-draft,
+                  &.tag-delete,
+                  &.tag-cancel {
+                    --tag-color: var(--o-color-info3);
+                    --tag-bg-color: var(--o-color-control1-light);
+                  }
+
+                  &.tag-registration,
+                  &.tag-in-progress,
+                  &.tag-ended {
+                    --tag-bg-color: var(--o-color-success1);
+                  }
+
+                  &.tag-reject {
+                    --tag-bg-color: var(--o-color-warning1);
+                  }
+                }
+              }
+
+              .act-info {
+                color: var(--o-color-info3);
+                display: flex;
+                align-items: center;
+                @include tip1;
+
+                .date-range {
+                  flex: 0 1 auto;
+                  min-width: 0;
+                  @include text-truncate(1);
+                }
+              }
+            }
+          }
+
+          .item-header-right {
+            display: flex;
+            align-items: center;
+            padding-left: calc(var(--o-gap-3) + var(--icon-size));
+            gap: var(--o-gap-4);
+            margin-top: var(--o-gap-2);
+            width: 100%;
+
+            .o-link {
+              font-size: 14px;
+              line-height: 21px;
+              --link-color: var(--o-color-info2);
+              --link-color-hover: var(--o-color-primary2);
+              --link-color-active: var(--o-color-primary3);
+            }
+
+            .o-icon {
+              font-size: 16px;
+            }
+          }
+
+          .copy-icon {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: calc(var(--collapse-item-icon-size) + var(--o-gap-4));
+            font-size: 18px;
+            height: 18px;
+            width: 18px;
+            display: var(--copy-display);
+            @include respond-to('phone') {
+              bottom: var(--o-gap-2);
+              transform: revert;
+              top: revert;
+              right: calc(20px + var(--o-gap-2))
+            }
+
+            &:hover {
+              color: var(--o-color-primary1);
+            }
+
+
+            svg path {
+              fill: currentColor;
+            }
+          }
+        }
+
+      }
+
+      .o-collapse-item-body {
+        margin-bottom: 0;
+        padding: var(--o-gap-4) 0 0;
+
+        .activity-detail {
+          padding-left: calc(var(--o-gap-3) + var(--icon-size));
+          @include respond-to('phone') {
+            padding-left: 0;
+          }
+
+          .activity-btn {
+            border-top: 1px solid var(--o-color-control4);
+            margin-top: var(--o-gap-5);
+            padding-top: var(--o-gap-4);
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: var(--o-gap-5);
+          }
+        }
+      }
+
+      .o-btn.o-btn-text {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        min-width: auto;
+      }
+
+      .o-btn-text {
+        @include hover {
+          background-color: transparent;
+          color: var(--o-color-primary1);
+        }
+      }
+
+      .o-btn.o-btn-text {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        min-width: auto;
+      }
+    }
+
+    .load-text {
+      text-align: center;
+      color: var(--o-color-info3);
+      @include tip1;
+    }
+  }
+}
+
+</style>
+
+<style lang="scss">
+.handle-dialog-active {
+  width: 450px;
+  --dlg-radius: var(--o-radius-xs);
+
+  .o-dlg-header {
+    margin-bottom: var(--o-gap-5);
+  }
+
+  .o-dlg-body-content {
+    display: flex;
+    justify-content: center;
+  }
+
+  .dialog-content {
+    margin-bottom: var(--o-gap-2);
+  }
+}
+</style>