@opendesign-plus-test/components 0.0.1-rc.22 → 0.0.1-rc.221

package/src/components/meeting/OMyMeetingCalendar.vue

@@ -1,1534 +0,0 @@
-<script setup lang="ts">
-import {
-  DialogActionT,
-  OCollapse,
-  OCollapseItem,
-  ODialog,
-  ODivider,
-  OIcon,
-  OIconArrowLeft,
-  OIconArrowRight,
-  OIconChevronLeft,
-  OIconChevronRight,
-  OLink,
-  ORadio,
-  ORadioGroup,
-  OScroller,
-  OTag,
-  useMessage,
-} from '@opensig/opendesign';
-import { ElCalendar } from 'element-plus';
-import { computed, nextTick, onMounted, ref, onUnmounted, watch } from 'vue';
-import OMeetingDetail from './components/OMeetingDetail.vue';
-import type { MeetingItemT, PageParamsT } from './types.ts';
-import dayjs from 'dayjs';
-import IconMeeting from '~icons/meeting/icon-meet.svg';
-import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK, WEEKDAY } from './config.ts';
-import { formatDate, getDateNumber } from './utils.ts';
-import { getPointStr } from './utils.ts';
-import { useDebounceFn } from '@vueuse/core';
-import { useScreen } from '@opendesign-plus/composables';
-import { Locales, useI18n } from '@/i18n';
-import IconCopy from '~icons/meeting/icon-copy.svg';
-
-const message = useMessage(null);
-const tableLoading = ref(false); // 列表数据加载状态
-const currentPage = ref(1); // 分页-当前页
-const pageSize = ref(50); // 分页-每页数量
-const total = ref<number | null>(null); // 分页-总数
-const list = ref<MeetingItemT[]>([]); // 列表数据
-const originList = ref([]); // 原始数据
-const canLoadMore = computed(() => total.value === null || originList.value.length < total.value);
-const reloadAll = ref(false); // 是否需要清空数据
-const { t, locale } = useI18n();
-const isEn = computed(() => locale.value === Locales.EN);
-
-const props = defineProps<{
-  cancelSubMeetingRequest: any;
-  deleteMeetingRequest: any;
-  getMeetingListRequest: any
-}>();
-
-const dialogLoading = ref(false); // 弹窗按钮状态
-const { isPhone } = useScreen();
-const expanded = ref([]); // 展开的数据， sub_id 或 id
-const emits = defineEmits(['edit']);
-// -------------------- 自动加载下一页 --------------------
-const nextLoading = ref(false);
-const bottomReached = ref(false);
-const headerRef = ref();
-const headerHeight = ref(0);
-const getHeaderHeight = () => {
-  headerHeight.value = headerRef.value?.clientHeight || 0;
-};
-
-const getList = async () => {
-  if (!props.getMeetingListRequest) {
-    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;
-    }
-    tableLoading.value = true;
-    nextLoading.value = true;
-    const res = await props.getMeetingListRequest({
-      page: currentPage.value,
-      size: pageSize.value,
-      order_by: 'date',
-      order_type: 'asc',
-      month: dayjs(selectedDate.value).format('YYYY-MM'),
-    } as unknown as PageParamsT);
-    const tempList = (res.data || [])
-      .map((item: MeetingItemT) => {
-        const {
-          is_cycle,
-          date,
-          start,
-          end,
-          cycle_sub,
-          cycle_start_date,
-          cycle_end_date,
-          cycle_start,
-          cycle_end,
-          cycle_type,
-          cycle_interval,
-          cycle_point,
-        } =
-          item;
-        if (is_cycle) {
-          let timeRange = '';
-          let cycleType = '';
-          if (cycle_type === INTERVAL_DAY) {
-            cycleType = t('meeting.cycleDay');
-          }
-          if (cycle_type === INTERVAL_WEEK) {
-            if (cycle_interval > 1) {
-              cycleType = t('meeting.cycleWeek.other', [getPointStr(cycle_type, cycle_point), cycle_interval]);
-            } else {
-              cycleType = t('meeting.cycleWeek.one', [getPointStr(cycle_type, cycle_point)]);
-            }
-          }
-          if (cycle_type === INTERVAL_MONTH) {
-            cycleType = t('meeting.cycleMonth', [getPointStr(cycle_type, cycle_point)]);
-          }
-          timeRange = t('meeting.cycleMeetingText2', {
-            startDate: cycle_start_date,
-            endDate: cycle_end_date,
-            startTime: cycle_start,
-            endTime: cycle_end,
-            cycleType,
-          });
-          const obsData = item.obs_data?.filter((v) => v.text_video_url);
-          return cycle_sub
-            .filter((v) => {
-              return (
-                dayjs(v.date).isBefore(dayjs(selectedDate.value).add(1, 'month').format('YYYY-MM-01')) &&
-                !dayjs(v.date).isBefore(dayjs(selectedDate.value).format('YYYY-MM-01'))
-              );
-            })
-            .map(({ id: _id, ...sub }) => {
-              return {
-                ...item,
-                ...sub,
-                timeRange: timeRange,
-                dateRange: `${ sub.start }-${ sub.end }`,
-                hasObsData: obsData.find((v) => v.sub_id === sub.sub_id),
-                time: `${ sub.start }-${ sub.end }`,
-                isExpired: dayjs(`${ sub.date } ${ sub.start }`).isBefore(dayjs()),
-              };
-            });
-        }
-        return [
-          {
-            ...item,
-            dateRange: `${ start } - ${ end }`,
-            timeRange: `${ start } - ${ end }`,
-            hasObsData: item.obs_data?.filter((v) => v.text_video_url)?.length > 0,
-            time: `${ start }-${ end }`,
-            isExpired: dayjs(`${ date } ${ start }`).isBefore(dayjs()),
-          },
-        ];
-      })
-      .flat()
-      .filter((v) => v.date.slice(0, 7) === formatDate(selectedDate.value, 'YYYY-MM-DD').slice(0, 7));
-    // 如果需要清空，则完全替换
-    // 如果页码为1，表示第一次加载
-    // 如果是移动端，则一直往里填充数据
-    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.date === b.date) {
-        return getDateNumber(a.start) > getDateNumber(b.start) ? 1 : -1;
-      } else {
-        return dayjs(a.date).isAfter(dayjs(b.date)) ? 1 : -1;
-      }
-    });
-    total.value = res?.total || 0;
-    nextTick(() => {
-      getSelectedDate();
-      // 监听滚动事件以自动加载下一页
-      if (scrollerRef.value && !isPhone.value) {
-        updateScroller();
-      }
-    });
-  } finally {
-    tableLoading.value = false;
-    nextLoading.value = false;
-    bottomReached.value = false;
-    reloadAll.value = false;
-  }
-};
-
-const load = useDebounceFn(() => {
-  if (!canLoadMore.value) return;
-  if (isPhone.value) return;
-  bottomReached.value = true;
-  currentPage.value++;
-  getList();
-}, 200);
-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);
-const calcIfAllDeleted = (date) => {
-  const meetingsOfDate = list.value.filter((v) => v.date === date);
-  return meetingsOfDate.length && meetingsOfDate.every((v) => v.is_delete);
-};
-
-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 detailRefs = ref({}); // 会议详情组件实例
-const getDetailRefs = (insRef, id) => {
-  if (insRef && id) {
-    detailRefs.value[id] = insRef;
-  }
-};
-const copyInfo = async (idx) => {
-  const instance = detailRefs.value[idx];
-  await instance.copyInfo();
-  message.success({
-    content: t('common.copySuccess'),
-  });
-};
-// -------------------- 取消 --------------------
-const cancelVisible = ref(false); // 取消弹窗
-const currentRow = ref<MeetingItemT | null>(null); // 当前激活行，用于取消事件
-// 打开编辑会议弹窗
-const editMeeting = (row: MeetingItemT) => {
-  emits('edit', row, 'whole');
-};
-// 打开取消会议弹窗
-const cancelMeeting = (row: MeetingItemT) => {
-  currentRow.value = row;
-  cancelVisible.value = true;
-};
-// 确定取消会议
-const confirmCancel = async () => {
-  if (!props.deleteMeetingRequest) {
-    return;
-  }
-  try {
-    dialogLoading.value = true;
-    await props.deleteMeetingRequest(currentRow.value.id);
-    cancelVisible.value = false;
-    message.success({
-      content: `${ t('meeting.meetingCancel', [currentRow.value.topic]) }`,
-    });
-    reloadAll.value = true;
-    getList();
-  } finally {
-    dialogLoading.value = false;
-  }
-};
-const handleDialogVisible = ref(false);
-const handleDialogType = ref('');
-const handleDialogRow = ref(null);
-const handleOptions = [
-  {
-    label: t('meeting.meetingSingle'),
-    value: 'single',
-  },
-  {
-    label: t('meeting.meetingCycle'),
-    value: 'whole',
-  },
-];
-
-const handleType = ref('single');
-const handleItem = (row: MeetingItemT, type: 'edit' | 'cancel') => {
-  if (row.is_cycle) {
-    handleDialogRow.value = row;
-    handleDialogType.value = type;
-    handleDialogVisible.value = true;
-  } else {
-    if (type === 'cancel') {
-      cancelMeeting(row);
-    } else {
-      editMeeting(row);
-    }
-  }
-};
-const cancelHandleItem = () => {
-  handleDialogVisible.value = false;
-  handleDialogRow.value = null;
-  handleDialogType.value = '';
-  handleType.value = 'single';
-};
-const confirmHandleItem = async () => {
-  const row = handleDialogRow.value;
-  if (handleDialogType.value === 'cancel') {
-    try {
-      dialogLoading.value = true;
-      if (handleType.value === 'single' && row.is_cycle) {
-        if (!props.cancelSubMeetingRequest) {
-          return;
-        }
-        await props.cancelSubMeetingRequest(row.sub_id);
-        message.success({
-          content: `${ t('meeting.meetingCancel', [row.topic]) }`,
-        });
-      } else {
-        if (!props.deleteMeetingRequest) {
-          return;
-        }
-        await props.deleteMeetingRequest(row.id);
-        message.success({
-          content: `${ t('meeting.meetingCancel', [row.topic]) }`,
-        });
-      }
-      cancelHandleItem();
-      reloadAll.value = true;
-      getList();
-    } finally {
-      dialogLoading.value = false;
-    }
-  } else {
-    emits('edit', row, handleType.value);
-    cancelHandleItem();
-  }
-};
-
-// -------------------- 日历 --------------------
-const calendarRef = ref();
-const allDateList = computed<string[]>(() => [...new Set(list.value.map((v) => v.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.date))].sort((a, b) => (dayjs(a).isBefore(dayjs(b)) ? -1 : 1)),
-);
-const selectedDate = ref();
-
-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.date === selectedDate.value && !v.isExpired && !v.is_delete);
-  if (needExpand) {
-    expanded.value = [needExpand.sub_id || 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) => {
-  if (!calendarRef.value) return;
-  currentPage.value = 1;
-  total.value = null;
-  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 groupList = computed(() => {
-  return list.value.reduce((prev, cur) => {
-    if (!prev.length) {
-      return [
-        {
-          date: cur.date,
-          list: [cur],
-        },
-      ];
-    } else {
-      const last = prev.at(-1);
-      if (last.date === cur.date) {
-        last.list.push(cur);
-      } else {
-        prev.push({
-          date: cur.date,
-          list: [cur],
-        });
-      }
-      return prev;
-    }
-  }, []);
-});
-
-const getWeekFromDate = (date) => {
-  return WEEKDAY[dayjs(date).day()];
-};
-
-// -------------------- 处理滚动事件 --------------------
-const scrollerRef = ref();
-watch(
-  () => selectedDate.value,
-  () => {
-    scrollToSelectedDate(selectedDate.value);
-  },
-);
-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',
-      });
-    }
-  }
-};
-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 formatYearMonth = (date) => {
-  date = dayjs(date ? date : undefined);
-  if (isEn.value) {
-    return date.format('MMMM YYYY');
-  } else {
-    return date.format('YYYY MM月');
-  }
-};
-const handleActions = computed<DialogActionT[]>(() => {
-  return [
-    {
-      id: 'confirm',
-      color: 'primary',
-      label: t('common.confirm'),
-      variant: 'solid',
-      size: 'large',
-      round: 'pill',
-      loading: dialogLoading.value,
-      onClick: () => {
-        confirmHandleItem();
-      },
-    },
-    {
-      id: 'cancel',
-      color: 'primary',
-      label: t('common.cancel'),
-      variant: 'outline',
-      size: 'large',
-      round: 'pill',
-      onClick: () => {
-        cancelHandleItem();
-      },
-    },
-  ];
-});
-const cancelActions = computed<DialogActionT[]>(() => {
-  return [
-    {
-      id: 'confirm',
-      color: 'primary',
-      label: t('common.confirm'),
-      variant: 'solid',
-      size: 'large',
-      round: 'pill',
-      loading: dialogLoading.value,
-      onClick: () => {
-        confirmCancel();
-      },
-    },
-    {
-      id: 'cancel',
-      color: 'primary',
-      label: t('common.cancel'),
-      variant: 'outline',
-      size: 'large',
-      round: 'pill',
-      onClick: () => {
-        cancelVisible.value = false;
-      },
-    },
-  ];
-});
-</script>
-
-<template>
-  <div class="o-my-meeting-calendar">
-    <div class="meeting-list">
-      <div class="list-calendar-mb">
-        <span>{{ formatYearMonth(selectedDate) }}</span>
-        <span>
-          <OIcon @click="changeMonth('prev-month')"><OIconChevronLeft /></OIcon>
-          <OIcon @click="changeMonth('next-month')"><OIconChevronRight /></OIcon>
-        </span>
-      </div>
-      <div class="list-calendar">
-        <ElCalendar ref="calendarRef" v-model="selectedDate">
-          <template #header>
-            <span>{{ formatYearMonth(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),
-                expired: dayjs(formatDate()).isAfter(dayjs(data.day)),
-                'all-deleted': calcIfAllDeleted(data.day),
-              }"
-            >
-              <div class="date-cell-text">
-                {{ Number(data.day.split('-')[2]) }}
-              </div>
-            </div>
-          </template>
-        </ElCalendar>
-      </div>
-      <div class="list-wrapper" :class="!list.length ? 'is-empty' : ''">
-        <OScroller
-          ref="scrollerRef"
-          @scrollend="load"
-          v-if="list.length"
-          :style="{ '--header-height': headerHeight }"
-          class="scroller-container"
-          show-type="hover"
-        >
-          <div class="list-body">
-            <OCollapse v-model="expanded" :accordion="isPhone">
-              <template v-for="(group, idx) in groupList" :key="group.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="group-item" :class="idx === groupList.length - 1 && 'last-item'">
-                  <div
-                    :class="{
-                      'group-bar': true,
-                      'is-active': dayjs(selectedDate).format('YYYY-MM-DD') === group.date,
-                      'is-end': group.list.every((row) => row.isExpired),
-                    }"
-                  >
-                    <div class="group-bar-line"></div>
-                    <div class="group-bar-dot"></div>
-                  </div>
-                  <div
-                    :class="{
-                      'group-title': true,
-                      'is-end': group.list.every((row) => row.isExpired),
-                    }"
-                    :id="`group-title-${dayjs(new Date(group.date)).format('YYYY-MM-DD')}`"
-                  >
-                    {{ dayjs(group.date).format('MM/DD') }} {{ getWeekFromDate(group.date) }}
-                  </div>
-                  <OCollapseItem
-                    v-for="(row, rowIdx) in group.list"
-                    :key="row.sub_id || row.id"
-                    :value="row.sub_id || row.id"
-                    :class="{
-                      'last-item': idx === groupList.length - 1 && rowIdx === group.list.length - 1,
-                    }"
-                  >
-                    <template #title>
-                      <div class="item-header-left">
-                        <div class="meeting-icon">
-                          <OIcon>
-                            <IconMeeting />
-                          </OIcon>
-                        </div>
-                        <div class="header-info">
-                          <div
-                            :class="{
-                              'meeting-title': true,
-                              'is-delete': row.is_delete,
-                              'is-end': row.isExpired,
-                            }"
-                          >
-                            <div v-if="row.is_delete">{{ t('meeting.meetingCancelled') }}</div>
-                            <div class="title-wrapper">
-                              <div class="title-text">{{ row.topic }}</div>
-                            </div>
-                            <div class="tag-wrapper" v-if="row.is_cycle">
-                              <OTag color="primary" variant="outline">{{ t('meeting.cycle') }}</OTag>
-                            </div>
-                          </div>
-                          <div class="meeting-info">
-                            <span>{{ row.dateRange }}</span>
-                            <ODivider direction="v" />
-                            <span>{{ t('meeting.sigs') }}: {{ row.group_name }}</span>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="item-header-right" v-if="!row.is_delete">
-                        <OLink
-                          v-if="!row.isExpired"
-                          target="_blank"
-                          :href="row.join_url"
-                          rel="noopener noreferrer"
-                        >
-                          {{ t('meeting.joinMeeting') }}
-                          <template #suffix>
-                            <OIcon>
-                              <OIconChevronRight></OIconChevronRight>
-                            </OIcon>
-                          </template>
-                        </OLink>
-                        <template v-else>
-                          <OLink target="_blank" v-if="row.etherpad" :href="row.etherpad">
-                            {{ t('meeting.meetingSummary') }}
-                            <template #suffix>
-                              <OIcon>
-                                <OIconChevronRight></OIconChevronRight>
-                              </OIcon>
-                            </template>
-                          </OLink>
-                          <OLink
-                            target="_blank"
-                            :href="`/${locale}/video/${row.group_name}/${row.mid}/${row.date}`"
-                            v-if="row.hasObsData">
-                            {{ t('meeting.viewRecord') }}
-                            <template #suffix>
-                              <OIcon>
-                                <OIconChevronRight></OIconChevronRight>
-                              </OIcon>
-                            </template>
-                          </OLink>
-                        </template>
-                      </div>
-                      <OIcon @click.stop="() => copyInfo(rowIdx)" class="copy-icon">
-                        <IconCopy />
-                      </OIcon>
-                    </template>
-                    <div class="meeting-detail">
-                      <OMeetingDetail
-                        :show="expanded.includes(row.sub_id || row.id)"
-                        :data="row"
-                        :ref="(insRef) => getDetailRefs(insRef, row.id)"
-                        from="my"
-                      />
-                      <div class="meeting-btn" v-if="!row.isExpired && !row.is_delete">
-                        <OLink @click="handleItem(row, 'edit')">{{ t('meeting.editMeeting') }}
-                        </OLink>
-                        <OLink @click="handleItem(row, 'cancel')">{{ t('meeting.cancelMeeting') }}
-                        </OLink>
-                      </div>
-                    </div>
-                  </OCollapseItem>
-                  <div class="height-placeholder"></div>
-                </div>
-                <template v-if="idx === groupList.length - 1">
-                  <div class="load-text" v-if="bottomReached">{{ t('common.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 name="empty" v-else-if="!tableLoading"></slot>
-      </div>
-      <ODialog
-        v-model:visible="handleDialogVisible"
-        main-class="handle-dialog"
-        @close="cancelHandleItem"
-        :actions="handleActions"
-      >
-        <template #header>
-          {{
-            t('meeting.meetingHandleText', [handleDialogType === 'edit' ? t('meeting.edit') : t('meeting.cancel2')])
-          }}
-        </template>
-        <ORadioGroup v-model="handleType">
-          <ORadio v-for="t in handleOptions" :value="t.value" :key="t.value">{{ t.label }}</ORadio>
-        </ORadioGroup>
-      </ODialog>
-      <ODialog v-model:visible="cancelVisible" main-class="cancel-dialog" :actions="cancelActions">
-        <template #header>{{ t('meeting.confirmCancel') }}</template>
-        <div class="dialog-content">{{ t('meeting.confirmCancelDesc', [currentRow?.topic]) }}</div>
-      </ODialog>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.o-my-meeting-calendar {
-
-  .card-content-wrapper {
-    height: 100%;
-    @include respond-to('phone') {
-      padding-top: 0;
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 32px;
-      z-index: 11;
-      background: linear-gradient(180deg, rgba(var(--o-gray-1), 0), rgba(var(--o-gray-1), 0.3) 25%, rgba(var(--o-gray-1), 1) 100%,);
-      @include respond-to('phone') {
-        display: none;
-      }
-    }
-
-    @include respond-to('phone') {
-      background-color: transparent;
-    }
-
-    .content-wrapper {
-      @include respond-to('<=pad_v') {
-        padding-top: 0;
-      }
-    }
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .title {
-      font-weight: 500;
-      color: var(--o-color-info1);
-      @include h2;
-    }
-
-    .desc {
-      margin-top: 12px;
-      color: var(--o-color-info2);
-      @include tip1;
-    }
-  }
-
-  .meeting-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 {
-      display: none;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 var(--grid--layout-padding);
-
-      span:first-child {
-        @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-fill1);
-        padding-bottom: 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;
-      }
-    }
-
-    .list-calendar {
-      width: 334px;
-      flex-shrink: 0;
-      --table-bg: var(--o-color-control2-light);
-
-      .el-calendar {
-        min-height: 460px;
-        height: calc(100% - 54px);
-        background-color: var(--table-bg);
-        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 {
-            tr {
-              background: var(--table-bg) !important;
-            }
-
-            th {
-              text-align: center;
-              background: var(--table-bg) !important;
-              border: none;
-            }
-
-            td {
-              background: var(--table-bg) !important;
-              border: none;
-              text-align: center;
-              transition: none;
-              padding: 0;
-
-              .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);
-              }
-
-              .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 {
-                  color: #fff;
-                  background-color: var(--o-color-primary1);
-                }
-              }
-
-              &.clickable {
-                &::after {
-                  background-color: var(--o-color-primary1);
-                }
-
-                &.expired::after {
-                  background-color: rgb(var(--o-mixedgray-6));
-                }
-
-                &.all-deleted::after {
-                  background-color: rgb(var(--o-mixedgray-6));
-                }
-              }
-            }
-
-            .is-today {
-              color: inherit;
-            }
-          }
-        }
-      }
-
-      @include respond-to('pad_h') {
-        width: 240px;
-        .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;
-      }
-    }
-
-    .list-wrapper {
-      flex-grow: 1;
-      background-color: var(--o-color-fill2);
-
-      &.is-empty {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      @include respond-to('phone') {
-        margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
-      }
-
-      .o-scroller {
-        .o-scrollbar-rail {
-          right: -16px;
-        }
-      }
-
-      .scroller-container {
-        height: 100%;
-        max-height: calc(var(--layout-left-height) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
-
-        @include respond-to('phone') {
-          max-height: fit-content;
-        }
-
-        .group-item {
-          padding-left: 24px;
-          position: relative;
-
-          &.last-item {
-            flex-grow: 1;
-          }
-
-          @include respond-to('phone') {
-            padding-left: var(--o-gap-2);
-          }
-
-          .group-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);
-            }
-
-            .group-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 {
-              .group-bar-dot {
-                &::before {
-                  background-color: var(--active-color);
-                }
-
-                &::after {
-                  background-color: var(--o-color-fill2);
-                }
-              }
-            }
-
-            &.is-end {
-              --active-color: rgb(222, 222, 227);
-            }
-          }
-
-          .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 {
-          &.last-item {
-            .o-collapse-item-header {
-              border-bottom: none;
-            }
-          }
-        }
-
-        .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;
-            }
-          }
-
-          &.o-collapse-item-expanded {
-            @include respond-to('<=pad_v') {
-              --copy-display: inline-flex;
-            }
-          }
-
-          @include respond-to('phone') {
-            --icon-size: 20px;
-          }
-
-          &.o-collapse-item-expanded {
-            background-color: var(--o-color-control2-light);
-          }
-        }
-
-        .o-collapse-item-header {
-          border-bottom: 1px solid var(--o-color-control4);
-          padding-top: 0;
-          padding-bottom: var(--o-gap-2);
-          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;
-            .item-header-left {
-              display: flex;
-              align-items: flex-start;
-              gap: var(--o-gap-3);
-              width: 100%;
-              margin-bottom: var(--o-gap-2);
-              @include respond-to('phone') {
-                flex-grow: 1;
-                width: 100%;
-                align-self: stretch;
-                flex-shrink: 0;
-              }
-              .meeting-icon {
-                width: var(--icon-size);
-                height: var(--icon-size);
-                border-radius: 50%;
-                background-color: var(--o-color-primary1);
-                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));
-
-                .meeting-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);
-                  }
-
-                  .tag-wrapper {
-                    flex: 10;
-                    margin-left: var(--o-gap-2);
-
-                    .o-tag {
-                      background-color: var(--o-color-control2-light);
-                      border: none;
-                    }
-                  }
-
-                  .title-wrapper {
-                    flex: 0 1 auto;
-                    min-width: 0;
-                    max-width: 100%;
-                  }
-
-                  .title-text {
-                    @include text-truncate(1);
-                  }
-                }
-
-                .meeting-info {
-                  color: var(--o-color-info3);
-                  display: flex;
-                  align-items: center;
-                  @include tip1;
-
-                  span:last-child {
-                    width: 0;
-                    flex: 1;
-                    @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-5);
-              width: 100%;
-
-              .o-link {
-                font-size: 14px;
-                line-height: 21px;
-              }
-
-              .o-link + .o-link {
-                margin-left: var(--o-gap-section-6);
-              }
-
-              .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;
-
-          .meeting-detail {
-            padding-left: calc(var(--o-gap-3) + var(--icon-size));
-
-            @include respond-to('phone') {
-              padding-left: 0;
-            }
-
-            .meeting-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;
-        }
-      }
-
-      .load-text {
-        text-align: center;
-        color: var(--o-color-info3);
-        @include tip1;
-      }
-    }
-  }
-
-  @include in-dark {
-    .group-bar.is-end {
-      --active-color: rgb(65, 65, 68) !important;
-    }
-    .meeting-list {
-
-      .is-today {
-        .date-cell-text {
-          color: #fff !important;
-        }
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.handle-dialog {
-  width: 450px;
-
-  .o-dlg-header {
-    margin-bottom: var(--o-gap-5);
-  }
-
-  .o-dlg-body-content {
-    display: flex;
-    justify-content: center;
-  }
-
-  .dialog-footer {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--o-gap-4);
-    column-gap: var(--o-gap-4);
-  }
-}
-
-.cancel-dialog {
-  .dialog-content {
-    width: 384px;
-    text-align: center;
-  }
-
-  .dialog-footer {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--o-gap-4);
-    column-gap: var(--o-gap-4);
-  }
-}
-
-[data-o-theme='dark'] .meeting-list {
-  .o-collapse-item-body {
-    background-color: rgb(43, 43, 47) !important;
-  }
-}
-</style>