@opendesign-plus/components 0.0.1-rc.2 → 0.0.1-rc.21

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

@@ -0,0 +1,515 @@
+<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 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;
+}>(), {
+  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[]>();
+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<any[]>(() => {
+  return props.list.map((v: any) => {
+    const type = v.type;
+    let dateRange = '';
+    if (type !== CalendarDataType.MEETING) {
+      let activity_type = activityTypeMap.value.get(v.activity_type)?.label;
+      if (v.start && v.end) {
+        if (v.end_date === v.start_date) {
+          dateRange = `${ formatDate(v.start_date) } ${ v.start }-${ v.end }`;
+        } else {
+          dateRange = `${ formatDate(v.start_date) } ${ v.start }-${ formatDate(v.end_date) } ${ v.end }`;
+        }
+      } else {
+        dateRange = `${ formatDate(v.start_date, 'YYYY/MM/DD HH:mm') } ${ formatDate(v.end_date, 'YYYY/MM/DD HH:mm') }`;
+      }
+
+      return {
+        ...v,
+        activity_type,
+        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: 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: cycle_start_date,
+        endDate: 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">
+              <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 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.content_url" :href="item.content_url" target="_blank" class="jump-detail-link">
+              <span>{{ i18n.DETAILS }}</span>
+              <template #suffix>
+                <OIcon>
+                  <IconChevronRight />
+                </OIcon>
+              </template>
+            </OLink>
+            <OLink 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>
+            </OLink>
+          </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 {
+    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);
+      }
+
+      &:last-child::after {
+        display: none;
+      }
+
+      @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 {
+        .o-collapse-item-header {
+          padding-bottom: var(--o-gap-2);
+
+          .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);
+      position: relative;
+
+      @include respond-to('>pad_v') {
+        &:hover {
+          .o-collapse-item-title {
+            .copy-icon {
+              opacity: 1;
+              visibility: visible;
+            }
+          }
+        }
+      }
+      @include respond-to('<=pad_v') {
+        padding: 12px 16px;
+      }
+
+      .o-collapse-item-title {
+        flex-grow: 1;
+        margin-bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--o-gap-4);
+        padding-right: var(--o-gap-4);
+
+        .meet-title-left {
+          flex-grow: 1;
+          min-width: 0;
+        }
+
+        .copy-icon {
+          flex-shrink: 0;
+          display: inline-flex;
+          opacity: 0;
+          visibility: hidden;
+
+          &: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(--o-radius-xs);
+        @include tip1;
+
+        @include respond-to('<=pad_v') {
+          padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + 16px - 12px);
+
+        }
+        @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;
+        }
+      }
+
+    }
+
+    .jump-detail-link {
+      padding-left: calc(var(--icon-right) + var(--icon-size2));
+      margin-top: var(--o-gap-2);
+      color: var(--o-color-info2);
+      @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: calc(100% - 48px);
+      color: var(--o-color-info2);
+      @include text2;
+
+      @include respond-to('<=pad_v') {
+        @include h3;
+      }
+
+      .tag-wrapper {
+        margin-left: var(--o-gap-2);
+
+        .o-tag {
+          background-color: var(--o-color-control2-light);
+          border: none;
+        }
+      }
+
+      .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) - 4px);
+
+        svg path {
+          fill: currentColor;
+        }
+      }
+
+      .text {
+        display: block;
+        font-weight: 600;
+        @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;
+      font-weight: 400;
+      @include tip1;
+
+      .o-divider {
+        @include tip1;
+      }
+
+      &.hidden-divider {
+        .start-time {
+          padding-right: 24px;
+        }
+
+        .o-divider {
+          display: none;
+        }
+      }
+    }
+
+
+
+  }
+}
+
+</style>

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

@@ -0,0 +1,210 @@
+<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<number[]>([]);
+const temp = ref<number[]>([]);
+const selectorRef = ref<InstanceType<typeof ElSelect> | null>(null);
+
+const init = () => {
+  checked.value = [...props.modelValue];
+  temp.value = [...props.modelValue];
+};
+
+watchEffect(() => {
+  init();
+});
+
+const confirm = () => {
+  emits('update:modelValue', temp.value);
+  if (selectorRef.value) {
+    selectorRef.value.expanded = false;
+  }
+};
+
+const cancel = () => {
+  init();
+  if (selectorRef.value) {
+    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>