@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.100

package/src/components/activity/OMyActivityCalendar.vue

@@ -1,1501 +0,0 @@
-<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>