@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -1,626 +0,0 @@
-<script setup lang="ts">
-import {
-  isClient,
-  OCollapse,
-  OCollapseItem,
-  ODivider,
-  OIcon,
-  OButton,
-  OTag,
-  useMessage,
-} from '@opensig/opendesign';
-import OMeetingDetail from './OMeetingDetail.vue';
-import { computed, nextTick, ref, watch } from 'vue';
-import IconCopy from '~icons/meeting/icon-copy.svg';
-import { CalendarDataType, CycleSubItemT, MeetingGroupType, MeetingItemT, ObsDataItemT } from '../types.ts';
-import IconChevronRight from '~icons/components/icon-chevron-right.svg';
-import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from '../config.ts';
-import { formatDate } from '../utils.ts';
-import { useMeetingConfig } from '../composables/useMeetingConfig';
-import { useActivityConfig } from '@/components/activity/composables/useActivityConfig';
-
-const { activityTypeMap } = useActivityConfig();
-
-const props = withDefaults(defineProps<{
-  list: MeetingItemT[];
-  groupType?: MeetingGroupType;
-  disableFormat?: boolean;
-}>(), {
-  list: () => [],
-});
-const { t, locale, getConfig, getPointStr } = useMeetingConfig();
-const detailRefs = ref<any[]>([]);
-const message = useMessage(null);
-const copyInfo = async (idx: number) => {
-  const instance = detailRefs.value[idx];
-  await instance.copyInfo();
-  message.success({
-    content: t('common.copySuccess'),
-  });
-};
-
-const collapseNames = ref<number[]>([]);
-const i18n = computed(() => {
-  return {
-    SIG_GROUP: `${ props.groupType === MeetingGroupType.GROUP ? t('meeting.groups') : t('meeting.sigs') }: `,
-    NEW_DATE: t('meeting.latestMeeting'),
-    EMPTY_TEXT: t('meeting.meetingEmptyText'),
-    LEARN_MORE: t('common.seeMore'),
-    JOIN_MEETING: t('meeting.joinMeeting'),
-    SIGN: t('meeting.sign'),
-    DETAILS: t('meeting.detail'),
-  };
-});
-
-// -------------------- 监听尺寸变化 --------------------
-const meetInfoRef = ref<HTMLDivElement[]>();
-
-let resizeObserver: ResizeObserver | null = null;
-watch(
-  [() => props.list, () => isClient],
-  () => {
-    if (props.list.length === 1) {
-      collapseNames.value = [props.list[0].id];
-    } else {
-      collapseNames.value = [];
-    }
-    if (isClient) {
-      nextTick(() => {
-        if (!resizeObserver) {
-          resizeObserver = new ResizeObserver((entries) => {
-            for (let entry of entries) {
-              const { height } = entry.contentRect;
-              entry.target.classList.remove('hidden-divider');
-              if (height >= 30) {
-                entry.target.classList.add('hidden-divider');
-              }
-            }
-          });
-        } else {
-          resizeObserver.disconnect();
-        }
-        meetInfoRef.value?.forEach((targetDiv) => {
-          resizeObserver!.observe(targetDiv);
-        });
-      });
-    }
-  },
-);
-
-const computedList = computed<any[]>(() => {
-  return props.list.map((v: any) => {
-    const type = v.type;
-    let dateRange = '';
-    let start_date_time = '';
-    let end_date_time = '';
-    if (type !== CalendarDataType.MEETING) {
-      let activity_type = activityTypeMap.value.get(v.activity_type)?.label;
-      const isSameDay = v.start_date && (v.start_date === v.end_date || !v.end_date);
-      if (v.start_date) {
-        dateRange = props.disableFormat ? v.start_date : formatDate(v.start_date);
-      }
-      if (isSameDay) {
-        if (v.start) {
-          dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
-          if (v.end) {
-            dateRange += `${ dateRange ? ' - ' : '' }${ v.end }`;
-          }
-        }
-      } else {
-        if (v.start) {
-          dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
-        }
-        if (v.end_date) {
-          dateRange += `${ dateRange ? ' - ' : '' }${ props.disableFormat ? v.end_date : formatDate(v.end_date) }`;
-          if (v.end) {
-            dateRange += `${ dateRange ? ' ' : '' }${ v.end }`;
-          }
-        }
-      }
-      if (v.start_date) {
-        start_date_time = props.disableFormat ? v.start_date : formatDate(v.start_date);
-      }
-      if (v.start) {
-        start_date_time += `${ start_date_time ? ' ' : '' }${ v.start }`;
-      }
-      if (v.end_date) {
-        end_date_time = props.disableFormat ? v.end_date : formatDate(v.end_date);
-      }
-      if (v.end) {
-        end_date_time += `${ end_date_time ? ' ' : '' }${ v.end }`;
-      }
-
-      return {
-        ...v,
-        activity_type,
-        dateRange,
-        start_date_time,
-        end_date_time,
-      };
-    }
-    const {
-      is_cycle,
-      date,
-      start,
-      end,
-      cycle_start_date,
-      cycle_end_date,
-      cycle_start,
-      cycle_end,
-      cycle_type,
-      cycle_interval,
-      cycle_point,
-    } = v;
-    dateRange = props.disableFormat ? date : formatDate(date);
-    if (start && end) {
-      dateRange += `${ dateRange ? ' ' : '' }${ start } - ${ end }`;
-    } else if (start || end) {
-      dateRange += `${ dateRange ? ' ' : '' }${ start || end }`;
-    }
-    if (is_cycle) {
-      dateRange = `${ props.disableFormat ? cycle_start_date : formatDate(cycle_start_date) } - ${ props.disableFormat ? cycle_end_date : formatDate(cycle_end_date) }`;
-    }
-
-    let timeRange = '';
-    if (start && end) {
-      timeRange = `${ start } - ${ end }`;
-    } else {
-      if (start) {
-        timeRange = start;
-      }
-      if (end) {
-        timeRange = end;
-      }
-    }
-    let replay_url = null;
-    let hasObsData = false;
-    const obsData = v.obs_data?.filter((v: ObsDataItemT) => v.text_video_url) || [];
-
-    if (is_cycle) {
-      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 as unknown as number[]), cycle_interval]);
-        } else {
-          cycleType = t('meeting.cycleWeek.one', [getPointStr(cycle_type, cycle_point as unknown as number[])]);
-        }
-      }
-      if (cycle_type === INTERVAL_MONTH) {
-        cycleType = t('meeting.cycleMonth', [getPointStr(cycle_type, cycle_point as unknown as number[])]);
-      }
-      timeRange = t('meeting.cycleMeetingText2', {
-        startDate: formatDate(cycle_start_date),
-        endDate: formatDate(cycle_end_date),
-        startTime: cycle_start,
-        endTime: cycle_end,
-        cycleType,
-      });
-      hasObsData = obsData.some((t: ObsDataItemT) => t.sub_id === v.cycle_sub.find((z: CycleSubItemT) => z.date === date)?.sub_id);
-    } else {
-      hasObsData = obsData.length > 0;
-    }
-    if (hasObsData) {
-      replay_url = `${ location.origin }/${ locale.value }/video/${ v.group_name }/${ v.mid }/${ date }`;
-    }
-
-    return {
-      ...v,
-      dateRange,
-      timeRange,
-      replay_url,
-    };
-  });
-});
-</script>
-
-<template>
-  <div class="o-meeting-calendar-list" :class="!computedList?.length ? 'is-empty':''">
-    <slot name="empty" v-if="!computedList?.length"></slot>
-    <OCollapse v-else v-model="collapseNames" :style="{ '--collapse-padding': '0' }">
-      <OCollapseItem v-for="(item, index) in computedList" :key="item.id" :value="item.id">
-        <template #title>
-          <div class="meet-title-left">
-            <div class="meet-title" :title="item.topic || item.name || item.title">
-              <OIcon
-                :style="{
-                  backgroundColor: `${getConfig(item.type, 'color')}`
-                }"
-              >
-                <component :is="getConfig(item.type, 'icon')" />
-              </OIcon>
-              <div class="text">
-                {{ item.topic || item.name || item.title }}
-              </div>
-              <div class="tag-wrapper" v-if="item.is_cycle">
-                <OTag color="primary" variant="outline">{{ t('meeting.cycle') }}</OTag>
-              </div>
-            </div>
-            <div class="meet-info" ref="meetInfoRef">
-            <span class="start-time">
-              <span>{{ item.dateRange }}</span>
-            </span>
-              <ODivider v-if="item.group_name || item.activity_type" direction="v" />
-              <div>
-                <template v-if="item.group_name">{{ i18n.SIG_GROUP }} {{ item.group_name }}</template>
-                <template v-if="item.activity_type">{{ item.activity_type }}</template>
-              </div>
-            </div>
-            <OButton
-              variant="text"
-              v-if="item.url"
-              :href="item.url"
-              target="_blank"
-              class="jump-detail-link"
-            >
-              <span>{{ i18n.LEARN_MORE }}</span>
-              <template #suffix>
-                <OIcon>
-                  <IconChevronRight />
-                </OIcon>
-              </template>
-            </OButton>
-            <OButton
-              variant="text"
-              v-if="item.join_url"
-              :href="item.join_url"
-              target="_blank"
-              class="jump-detail-link"
-            >
-              <span>{{ i18n.JOIN_MEETING }}</span>
-              <template #suffix>
-                <OIcon>
-                  <IconChevronRight />
-                </OIcon>
-              </template>
-            </OButton>
-            <OButton
-              variant="text"
-              v-if="item.content_url"
-              :href="item.content_url"
-              target="_blank"
-              class="jump-detail-link"
-            >
-              <span>{{ i18n.DETAILS }}</span>
-              <template #suffix>
-                <OIcon>
-                  <IconChevronRight />
-                </OIcon>
-              </template>
-            </OButton>
-            <OButton
-              variant="text"
-              v-if="item.register_url"
-              :href="item.register_url"
-              target="_blank"
-              class="jump-detail-link"
-            >
-              <span>{{ i18n.SIGN }}</span>
-              <template #suffix>
-                <OIcon>
-                  <IconChevronRight />
-                </OIcon>
-              </template>
-            </OButton>
-          </div>
-          <OIcon @click.stop="() => copyInfo(index)" class="copy-icon">
-            <IconCopy />
-          </OIcon>
-        </template>
-        <div class="calendar-info">
-          <OMeetingDetail
-            :show="collapseNames.includes(item.id)"
-            :data="item"
-            :ref="(insRef) => (detailRefs[index] = insRef)"
-            from="home"
-          />
-        </div>
-      </OCollapseItem>
-    </OCollapse>
-  </div>
-</template>
-
-<style lang="scss">
-.o-meeting-calendar-list {
-
-
-  &.is-empty {
-    min-height: 400px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    @include respond('<=pad_v') {
-      min-height: auto;
-      padding: var(--o-gap-5) 0;
-    }
-  }
-
-
-  .o-collapse {
-    --icon-size2: 24px;
-    --icon-right: 12px;
-    @include respond('<=pad') {
-      --icon-size2: 20px;
-    }
-    @include respond('<=pad_v') {
-      --icon-right: 8px;
-    }
-    @include respond('phone') {
-      --icon-right: 4px;
-    }
-
-    .o-collapse-item {
-      position: relative;
-      border-top: none;
-      border-bottom: none;
-
-      &::after {
-        position: absolute;
-        content: '';
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: calc(100% - 2 * 24px);
-        height: 1px;
-        background-color: var(--collapse-division-color);
-      }
-
-      &:last-child::after {
-        display: none;
-      }
-
-      @include respond('<=pad_v') {
-        &::after {
-          width: calc(100% - 2 * 16px);
-        }
-        &:last-child {
-          &::after {
-            display: none;
-          }
-        }
-      }
-
-      &.o-collapse-item-expanded {
-        .o-collapse-item-header {
-          padding-bottom: 0;
-
-          .o-collapse-item-title {
-            .copy-icon {
-              opacity: 1;
-              visibility: visible;
-            }
-          }
-        }
-
-      }
-    }
-
-    .o-collapse-item-icon {
-      height: min-content;
-    }
-
-    .o-collapse-item-header {
-      align-items: center;
-      padding: var(--o-gap-4) var(--o-gap-5) var(--o-gap-4) var(--o-gap-5);
-      position: relative;
-
-      @include hover {
-        .text {
-          color: var(--o-color-primary1);
-        }
-      }
-      @include respond('>pad_v') {
-        &:hover {
-          .o-collapse-item-title {
-            .copy-icon {
-              opacity: 1;
-              visibility: visible;
-            }
-          }
-        }
-      }
-      @include respond('pad_h') {
-        padding: var(--o-gap-4) var(--o-gap-3) var(--o-gap-2) var(--o-gap-3);
-      }
-      @include respond('<=pad_v') {
-        padding: var(--o-gap-3) var(--o-gap-4) var(--o-gap-1) var(--o-gap-4);
-      }
-
-      .o-collapse-item-title {
-        flex-grow: 1;
-        min-width: 0;
-        margin-bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: var(--o-gap-4);
-        padding-right: var(--o-gap-4);
-        @include respond('laptop') {
-          padding-right: var(--o-gap-3);
-        }
-        @include respond('<=pad') {
-          padding-right: var(--o-gap-2);
-        }
-
-        .meet-title-left {
-          flex-grow: 1;
-          min-width: 0;
-        }
-
-        .copy-icon {
-          font-size: 24px;
-          flex-shrink: 0;
-          display: inline-flex;
-          opacity: 0;
-          visibility: hidden;
-          color: var(--o-color-info1);
-          @include respond('<=laptop') {
-            font-size: 20px;
-          }
-          @include respond('<=pad_v') {
-            font-size: 24px;
-          }
-
-          &:hover {
-            color: var(--o-color-primary1);
-          }
-
-          svg path {
-            fill: currentColor;
-          }
-        }
-      }
-
-
-      .o-collapse-item-icon {
-        .o-svg-icon {
-          &:hover {
-            color: var(--o-color-primary1);
-          }
-        }
-      }
-
-    }
-
-    .o-collapse-item-body {
-      margin-bottom: 0;
-      padding: 0 12px 16px 12px;
-
-      a {
-        word-break: break-all;
-      }
-
-      .calendar-info {
-        display: flex;
-        color: var(--o-color-info3);
-        flex-direction: column;
-        background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
-        padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + var(--o-gap-5) - 12px);
-        border-radius: var(--meeting-card-radius);
-        @include tip1;
-
-        @include respond('pad_h') {
-          padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2));
-        }
-        @include respond('<=pad_v') {
-          padding: 16px 8px;
-        }
-
-        .info-item {
-          display: flex;
-          margin-top: 8px;
-
-          .item-title {
-            min-width: 110px;
-          }
-        }
-
-        .info-item:first-child {
-          margin-top: 0;
-        }
-      }
-
-    }
-
-    .jump-detail-link {
-      padding-left: calc(var(--icon-right) + var(--icon-size2));
-      margin-top: var(--o-gap-1);
-      color: var(--o-color-info2);
-      font-weight: 400;
-      @include tip1;
-
-      &:hover {
-        color: var(--o-color-primary1);
-      }
-
-      .o-icon {
-        font-size: 16px;
-
-        svg path {
-          fill: currentColor;
-        }
-      }
-    }
-
-    .jump-detail-link + .jump-detail-link {
-      padding-left: 24px;
-    }
-
-    .meet-title {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      color: var(--o-color-info2);
-      @include text2;
-
-      @include respond('<=pad_v') {
-        @include h3;
-      }
-
-      .tag-wrapper {
-        margin-left: var(--o-gap-2);
-
-        .o-tag {
-          background-color: var(--o-color-control2-light);
-          border: none;
-          font-weight: 400;
-        }
-      }
-
-      .o-icon {
-        flex-shrink: 0;
-        border-radius: 50%;
-        overflow: hidden;
-        color: var(--o-color-white);
-        margin-right: var(--icon-right);
-        width: var(--icon-size2);
-        height: var(--icon-size2);
-        font-size: calc(var(--icon-size2) - 2px);
-
-        svg path {
-          fill: currentColor;
-        }
-      }
-
-      .text {
-        display: block;
-        font-weight: 600;
-        @include text-truncate(1);
-      }
-    }
-
-    .meet-info {
-      display: flex;
-      margin-left: calc(var(--icon-right) + var(--icon-size2));
-      margin-top: var(--o-gap-2);
-      flex-wrap: wrap;
-      align-items: center;
-      color: var(--o-color-info3);
-      text-decoration: none;
-      font-weight: 400;
-      @include tip1;
-
-      .o-divider {
-        @include tip1;
-      }
-
-      &.hidden-divider {
-        .start-time {
-          padding-right: 24px;
-        }
-
-        .o-divider {
-          display: none;
-        }
-      }
-    }
-
-
-
-  }
-}
-
-</style>