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

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

@@ -1,462 +0,0 @@
-<script setup lang="ts">
-import { OCollapse, OCollapseItem, ODivider, OIcon, OLink, OTag, useMessage } from '@opensig/opendesign';
-import OMeetingDetail from './OMeetingDetail.vue';
-import { computed, nextTick, ref, watch } from 'vue';
-import IconMeetinging from '~icons/meeting/icon-meet.svg';
-import IconCopy from '~icons/meeting/icon-copy.svg';
-import { CalendarDataType, MeetingItemT } from '../types.ts';
-
-import IconAll from '~icons/meeting/icon-all.svg';
-import IconEvent from '~icons/meeting/icon-event.svg';
-import IconSummit from '~icons/meeting/icon-summit.svg';
-import IconMeeting from '~icons/meeting/icon-meet.svg';
-import IconChevronRight from '~icons/components/icon-chevron-right.svg';
-import { CYCLE_TYPE_OPTIONS, INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from '../config.ts';
-
-import { formatDate, getConfig, getPointStr } from '../utils.ts';
-import { useI18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{ list: MeetingItemT[] }>(), {
-  list: () => [],
-});
-const { t, locale } = useI18n();
-const detailRefs = ref([]);
-const message = useMessage();
-const copyInfo = async (idx) => {
-  const instance = detailRefs.value[idx];
-  await instance.copyInfo();
-  message.success({
-    content: t('common.copySuccess'),
-  });
-};
-
-const collapseNames = ref([]);
-const i18n = {
-  SIG_GROUP: `${ 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'),
-};
-
-const getCurrentIcon = (item) => {
-  if (item.type === 'summit') return IconSummit;
-  if (item.type === 'events') return IconEvent;
-  return IconMeeting;
-};
-
-// -------------------- 监听尺寸变化 --------------------
-const meetInfoRef = ref();
-const 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');
-    }
-  }
-});
-
-watch(
-  () => props.list,
-  () => {
-    if (props.list.length === 1) {
-      collapseNames.value = [props.list[0].id];
-    } else {
-      collapseNames.value = [];
-    }
-    nextTick(() => {
-      meetInfoRef.value?.forEach((targetDiv) => {
-        resizeObserver.observe(targetDiv);
-      });
-    });
-  },
-);
-
-const computedList = computed(() => {
-  return props.list.map((v) => {
-    const type = v.type;
-    let dateRange = '';
-    if (['events', 'summit'].includes(type)) {
-      dateRange = `${ formatDate(v.start_date, 'YYYY/MM/DD HH:mm') } ${ formatDate(v.end_date, 'YYYY/MM/DD HH:mm') }`;
-      return {
-        ...v,
-        dateRange,
-      };
-    }
-    const {
-      is_cycle,
-      date,
-      start,
-      end,
-      cycle_start_date,
-      cycle_end_date,
-      cycle_start,
-      cycle_end,
-      cycle_type,
-      cycle_interval,
-      cycle_point,
-    } = v;
-    dateRange = `${ formatDate(date) } ${ start } - ${ end }`;
-    if (is_cycle) {
-      dateRange = `${ formatDate(cycle_start_date) } - ${ formatDate(cycle_end_date) }`;
-    }
-
-    let timeRange = `${ start } - ${ end }`;
-    let replay_url = null;
-    let hasObsData = false;
-    const obsData = v.obs_data?.filter((v) => 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), 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,
-      });
-      hasObsData = obsData.some((t) => t.sub_id === v.cycle_sub.find((z) => 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" :title="item.topic || item.name">
-            <OIcon
-              :style="{
-              backgroundColor: `${getConfig(item.type, 'color')}`
-            }"
-            >
-              <component :is="getConfig(item.type, 'icon')" />
-            </OIcon>
-            <div class="text">
-              {{ item.topic || item.name }}
-            </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 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>
-          <OLink v-if="item.url" :href="item.url" target="_blank" class="jump-detail-link">
-            <span>{{ i18n.LEARN_MORE }}</span>
-            <template #suffix>
-              <OIcon>
-                <IconChevronRight />
-              </OIcon>
-            </template>
-          </OLink>
-          <OLink 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>
-          </OLink>
-          <OLink v-if="item.signUrl" :href="item.signUrl" target="_blank" class="jump-detail-link">
-            <span>{{ i18n.SIGN }}</span>
-            <template #suffix>
-              <OIcon>
-                <IconChevronRight />
-              </OIcon>
-            </template>
-          </OLink>
-          <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 {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-
-  .o-collapse {
-    --icon-size2: 24px;
-    --icon-right: 12px;
-    @include respond-to('<=pad') {
-      --icon-size2: 20px;
-    }
-    @include respond-to('<=pad_v') {
-      --icon-right: 8px;
-    }
-    @include respond-to('phone') {
-      --icon-right: 4px;
-    }
-
-    .o-collapse-item {
-      position: relative;
-      border-top: 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);
-      }
-
-      @include hover {
-        .text {
-          color: var(--o-color-primary1);
-        }
-      }
-      @include respond-to('<=pad_v') {
-        &::after {
-          width: calc(100% - 2 * 16px);
-        }
-        &:last-child {
-          &::after {
-            display: none;
-          }
-        }
-      }
-
-      &.o-collapse-item-expanded {
-        @include respond-to('<=pad_v') {
-
-          .copy-icon {
-            display: inline-flex;
-          }
-        }
-      }
-    }
-
-    .o-collapse-item-icon {
-      height: min-content;
-    }
-
-    .o-collapse-item-header {
-      align-items: center;
-      padding: var(--o-gap-4) var(--o-gap-5);
-      position: relative;
-
-      @include respond-to('>pad_v') {
-        &:hover {
-          .copy-icon {
-            display: inline-flex;
-          }
-        }
-      }
-      @include respond-to('<=pad_v') {
-        padding: 12px 16px;
-      }
-
-
-      .o-collapse-item-title {
-        flex-grow: 1;
-      }
-
-
-      .o-collapse-item-icon {
-        .o-svg-icon {
-          &:hover {
-            color: var(--o-color-primary1);
-          }
-        }
-      }
-
-    }
-
-    .o-collapse-item-body {
-      background-color: var(--o-color-control2-light);
-      margin-bottom: 0;
-
-      a {
-        word-break: break-all;
-      }
-    }
-
-    .jump-detail-link {
-      padding-left: calc(var(--icon-right) + var(--icon-size2));
-      margin-top: var(--o-gap-2);
-      @include text1;
-
-      .o-icon {
-        font-size: 16px;
-      }
-    }
-
-    .jump-detail-link + .jump-detail-link {
-      padding-left: 24px;
-    }
-
-    .meet-title {
-      display: flex;
-      align-items: center;
-      width: calc(100% - 48px);
-      color: var(--o-color-info1);
-      @include text2;
-
-      .tag-wrapper {
-        margin-left: var(--o-gap-2);
-
-        .o-tag {
-          background-color: var(--o-color-control2-light);
-          border: none;
-        }
-      }
-
-      .o-icon {
-        flex-shrink: 0;
-        padding: 2px;
-        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: var(--icon-size2);
-
-        svg path {
-          fill: currentColor;
-        }
-      }
-
-      .text {
-        display: block;
-        @include text-truncate(1);
-      }
-    }
-
-    .meet-info {
-      margin-left: calc(var(--icon-right) + var(--icon-size2));
-      margin-top: var(--o-gap-2);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      color: var(--o-color-info3);
-      text-decoration: none;
-      @include tip1;
-
-      .o-divider {
-        @include tip1;
-      }
-
-      &.hidden-divider {
-        .start-time {
-          padding-right: 24px;
-        }
-
-        .o-divider {
-          display: none;
-        }
-      }
-    }
-
-    .copy-icon {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 56px;
-      font-size: 18px;
-      display: none;
-
-      @include respond-to('phone') {
-        right: 48px;
-      }
-
-      &:hover {
-        color: var(--o-color-primary1);
-      }
-
-      svg path {
-        fill: currentColor;
-      }
-    }
-
-    .calendar-info {
-      display: flex;
-      color: var(--o-color-info3);
-      flex-direction: column;
-      padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + var(--o-gap-5));
-      @include tip1;
-
-      @include respond-to('<=pad_v') {
-        padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + 16px);
-
-      }
-      @include respond-to('phone') {
-        padding: 12px 16px;
-      }
-
-      .info-item {
-        display: flex;
-        margin-top: 8px;
-
-        .item-title {
-          min-width: 110px;
-        }
-      }
-
-      .info-item:first-child {
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-</style>

package/src/components/meeting/components/OMeetingCalendarSelector.vue

@@ -1,206 +0,0 @@
-<script setup lang="ts">
-import { OButton } from '@opensig/opendesign';
-import { ElSelect, ElOption } from 'element-plus';
-import { computed, ref, watchEffect } from 'vue';
-import { useI18n } from '@/i18n';
-
-const { t } = useI18n();
-const props = withDefaults(
-  defineProps<{
-    modelValue: number[];
-    multiple?: boolean;
-  }>(),
-  {
-    modelValue: () => [],
-    multiple: false,
-  },
-);
-const emits = defineEmits(['update:modelValue']);
-// 默认31天
-const getList = () => {
-  let res = [];
-  for (let i = 1; i <= 31; i++) {
-    res.push(i);
-  }
-  return res;
-};
-
-const list = computed(() => getList());
-const checked = ref([]);
-const temp = ref([]);
-const selectorRef = ref(null);
-
-const init = () => {
-  checked.value = [...props.modelValue];
-  temp.value = [...props.modelValue];
-};
-
-watchEffect(() => {
-  init();
-});
-
-const confirm = () => {
-  emits('update:modelValue', temp.value);
-  selectorRef.value.expanded = false;
-};
-
-const cancel = () => {
-  init();
-  selectorRef.value.expanded = false;
-};
-
-const clickItem = (val: number) => {
-  if (props.multiple) {
-    const idx = temp.value.indexOf(val);
-    if (idx === -1) {
-      temp.value.push(val);
-    } else {
-      temp.value.splice(idx, 1);
-    }
-    temp.value.sort();
-  } else {
-    temp.value = [val];
-    confirm();
-  }
-};
-
-const removeTag = (val: number) => {
-  if (props.multiple) {
-    clickItem(val);
-  } else {
-    temp.value = [];
-  }
-  confirm();
-};
-</script>
-
-<template>
-  <div class="calendar-selector" :class="!multiple && 'is-single'">
-    <ElSelect
-      ref="selectorRef"
-      popper-class="calendar-selector-popper"
-      :placeholder="t('meeting.selectRepeatDate')"
-      size="large"
-      multiple
-      collapseTags
-      maxCollapseTags="3"
-      :modelValue="checked"
-      @remove-tag="removeTag"
-    >
-      <ElOption
-        v-for="t in list"
-        :key="t"
-        :label="t"
-        :value="t"
-        @click="clickItem(t)"
-        :class="temp.includes(t) && 'is-checked'" />
-      <template #footer v-if="multiple">
-        <OButton round="pill" color="primary" variant="outline" @click="confirm">{{ t('common.confirm') }}</OButton>
-        <OButton variant="text" @click="cancel">{{ t('common.cancel') }}</OButton>
-      </template>
-    </ElSelect>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.calendar-selector {
-  width: 100%;
-
-  :deep(.el-select) {
-    .el-select__placeholder {
-      @include text1;
-    }
-
-    .el-select__icon {
-      height: 24px;
-      font-size: 24px;
-      margin-right: 2px;
-      color: var(--o-color-info1);
-      background-color: var(--o-color-info2);
-      mask: url(@/assets/meeting/svg-icons/icon-calendar.svg) no-repeat center;
-      background-size: 24px;
-      background-repeat: no-repeat;
-      background-position: center center;
-      transform: rotateZ(0deg);
-
-      svg {
-        display: none;
-      }
-    }
-  }
-
-  &.is-single {
-    :deep(.el-select) {
-      .el-select__selection {
-        margin-left: 0;
-      }
-
-      .el-tag {
-        padding: 0;
-        background-color: transparent;
-        color: var(--o-color-info1);
-        @include text1;
-
-        .el-tag__close {
-          display: none;
-        }
-      }
-    }
-  }
-}
-</style>
-<style lang="scss">
-.calendar-selector-popper {
-  padding: 0 24px;
-
-  .el-select-dropdown__list {
-    padding: 16px 0;
-    display: flex;
-    gap: 12px 8px;
-    flex-wrap: wrap;
-    width: 272px;
-
-    .el-select-dropdown__item {
-      padding: 0;
-      width: 32px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--o-color-fill2);
-      color: var(--o-color-info1);
-      border-radius: var(--o-radius-xs);
-
-      &:hover,
-      &.is-checked {
-        background-color: var(--o-color-primary1);
-        color: #fff;
-        font-weight: inherit;
-      }
-
-      &.is-selected {
-        font-weight: inherit;
-
-        &::after {
-          content: none;
-        }
-      }
-    }
-  }
-
-  .el-select-dropdown__footer {
-    padding: 16px 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .o-btn {
-      min-width: fit-content;
-
-      &:last-child {
-        padding: 0;
-      }
-    }
-  }
-}
-</style>