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

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

@@ -1,213 +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<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="o-meeting-calendar-selector" :class="!multiple && 'is-single'">
-    <ElSelect
-      ref="selectorRef"
-      popper-class="o-meeting-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 lang="scss">
-.o-meeting-calendar-selector {
-  width: 100%;
-
-  .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 {
-    .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">
-.o-meeting-calendar-selector-popper {
-  --meeting-card-radius: var(--o-radius-xs);
-  --meeting-input-radius: var(--o-radius-xs);
-  --meeting-cell-radius: var(--o-radius-xs);
-  padding: 0 var(--o-gap-5);
-
-  .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(--meeting-cell-radius);
-
-      &: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>

package/src/components/meeting/components/OMeetingDetail.vue

@@ -1,285 +0,0 @@
-<script setup lang="ts">
-import { OLink } from '@opensig/opendesign';
-import { computed, ref } from 'vue';
-import { CalendarDataType, MeetingItemT } from '../types.ts';
-import MoreText from '@/components/common/MoreText.vue';
-import { formatDate } from '@/components/meeting/utils.ts';
-import { useMeetingConfig } from '../composables/useMeetingConfig';
-import { useI18n } from '@/i18n';
-
-const props = defineProps<{
-  data: MeetingItemT;
-  from?: string;
-  show: boolean;
-  page?: CalendarDataType
-}>();
-const { t, getPlatformLabel } = useMeetingConfig();
-const { locale } = useI18n();
-const isEn = computed(() => locale.value === 'en');
-// 会议详情配置
-const infoList = computed(() =>
-  [
-    { label: t('meeting.meetingDetail'), key: 'agenda', ellipsis: true },
-    { label: t('meeting.meetingCreator'), key: 'sponsor' },
-    { label: t('meeting.meetingDate2'), key: 'timeRange', extra: 'date' },
-    { label: t('meeting.meetingId'), key: 'mid' },
-    { label: t('meeting.meetingPlatform'), key: 'platform' },
-    { label: t('meeting.meetingLink'), key: 'join_url', isLink: true },
-    { label: t('meeting.meetingEtherpad'), key: 'etherpad', isLink: true },
-    { label: t('meeting.meetingReplay'), key: 'replay_url', isLink: true },
-  ].slice(0, props.from === 'my' ? 7 : 8),
-);
-
-
-const activityInfoList = computed(() => {
-  const isLive = !!props.data.live_url?.length;
-  return [
-    { label: t('meeting.activityDetail2'), key: 'agenda', ellipsis: true },
-    { label: t('meeting.startDate'), key: 'start_date_time' },
-    { label: t('meeting.endDate'), key: 'end_date_time' },
-    { label: t('meeting.registrationDeadline'), key: 'register_end_date' },
-    { label: isLive ? t('meeting.livePlatform') : t('meeting.activityAddress'), key: isLive ? 'live_url' : 'address' },
-    { label: t('meeting.activityDetailUrl'), key: 'content_url', isLink: true },
-    { label: t('meeting.activityApprover'), key: 'approver' },
-    { label: t('meeting.reviewNotesLabel'), key: 'approve_record', isRecord: true },
-  ].slice(0, props.from === 'home' ? 5 : 8);
-});
-const activityInfoApprovalList = computed(() => {
-  const isLive = !!props.data.live_url?.length;
-  return [
-    { label: t('meeting.activityType'), key: 'activity_type', isType: true },
-    { label: isLive ? t('meeting.livePlatform') : t('meeting.activityAddress'), key: isLive ? 'live_url' : 'address' },
-    { label: t('meeting.startDate'), key: 'start_date_time' },
-    { label: t('meeting.endDate'), key: 'end_date_time' },
-    { label: t('meeting.registrationDeadline'), key: 'register_end_date' },
-    { label: t('meeting.registrationUrl'), key: 'register_url', isLink: true },
-    { label: t('meeting.activityDetailUrl'), key: 'content_url', isLink: true },
-    { label: t('meeting.activityApprover'), key: 'approver' },
-    { label: t('meeting.reviewNotesLabel'), key: 'approve_record', isRecord: true },
-  ];
-});
-
-interface ColumnItemT {
-  label: string;
-  key: string;
-  ellipsis?: boolean;
-  isLink?: boolean;
-  isRecord?: boolean;
-  isType?: boolean;
-  extra?: string;
-}
-
-const getField = (key: string) => {
-  const val = (props.data as Record<string, any>)[key];
-  if (key === 'register_end_date' && val) {
-    return formatDate(val, 'YYYY/MM/DD HH:mm');
-  }
-  if (key === 'date' && val) {
-    if (props.data.is_cycle) {
-      return '';
-    }
-    return formatDate(val);
-  }
-  return val;
-};
-
-const columns = computed<ColumnItemT[]>(() => {
-  if (props.data.type === CalendarDataType.EVENTS) {
-    if (props.page === CalendarDataType.APPROVAL) {
-      return activityInfoApprovalList.value;
-    }
-    return activityInfoList.value;
-  }
-  if (props.data.type === CalendarDataType.SUMMIT) {
-    return activityInfoList.value;
-  }
-  return infoList.value;
-});
-
-const domRef = ref([]);
-const SPLIT_MARK = '|';
-
-const titleMap = ref<Record<CalendarDataType, string>>({
-  [CalendarDataType.ALL]: t('meeting.meetingTopic'),
-  [CalendarDataType.MEETING]: t('meeting.meetingTopic'),
-  [CalendarDataType.EVENTS]: t('meeting.eventsTitle'),
-  [CalendarDataType.APPROVAL]: t('meeting.eventsTitle'),
-  [CalendarDataType.SUMMIT]: t('meeting.summitTitle'),
-});
-// 复制会议内容
-const copyInfo = () => {
-  try {
-    const colon = !isEn.value ? '：' : ': ';
-    let text = `${ titleMap.value[props.data.type] ?? t('meeting.meetingTopic') }${ colon }${ props.data.topic || props.data.name || props.data.title }\n`;
-    text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => {
-      if (cur.textContent) {
-        return `${ pre }${ cur.textContent ? cur.textContent.replace(SPLIT_MARK, colon) : '' }\n`;
-      }
-      return pre;
-    }, '');
-    navigator.clipboard.writeText(text);
-    return Promise.resolve();
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-defineExpose({ copyInfo });
-</script>
-
-<template>
-  <div class="o-meeting-detail">
-    <div
-      ref="domRef"
-      class="label-item"
-      v-for="(info, infoIdx) in columns"
-      :key="infoIdx"
-      :class="{
-        'record-item': info.isRecord && getField(info.key)?.length,
-        'link-item': info.isLink,
-        'is-empty':!getField(info.key)?.length,
-        [`label-item_${data.id}`]: true,
-        [`type_${data.type}`]: true,
-        'is-en': isEn,
-      }"
-    >
-      <template v-if="getField(info.key) && !info.isRecord">
-        <span class="label">{{ info.label }}</span>
-        <span class="split-mark">{{ SPLIT_MARK }}</span>
-        <MoreText :show="show" v-if="info.ellipsis" :text="getField(info.key) || '-'" />
-        <OLink
-          v-else-if="info.isLink"
-          target="_blank"
-          class="value"
-          color="primary"
-          hover-underline
-          :href="getField(info.key)"
-        >
-          {{ getField(info.key) }}
-        </OLink>
-        <span v-else-if="info.key === 'platform'">{{ getPlatformLabel(getField(info.key)) }}</span>
-        <span v-else class="value">
-          <i v-if="info.extra && getField(info.extra)" class="extra">{{ getField(info.extra) }}</i>
-          <span class="value-text">{{ getField(info.key) || '-' }}</span>
-        </span>
-      </template>
-      <template v-if="info.isRecord && getField(info.key)?.length">
-        <span class="label">{{ info.label }}</span>
-        <div>
-          <p v-for="re in getField(info.key)" :key="re.create_time" class="value">
-            {{ re.reason }}&nbsp;&nbsp;
-            {{ formatDate(re.create_time, 'YYYY/MM/DD HH:mm:ss') }}
-            {{ re.action === 1 ? t('meeting.approveReview') : t('meeting.rejectReview') }}
-          </p>
-        </div>
-      </template>
-    </div>
-  </div>
-
-</template>
-
-<style lang="scss">
-.o-meeting-detail {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  row-gap: var(--o-gap-2);
-  column-gap: var(--o-gap-4);
-
-  @include respond('pad_v') {
-    row-gap: var(--o-gap-2);
-    column-gap: var(--o-gap-2);
-  }
-  @include respond('phone') {
-    row-gap: var(--o-gap-2);
-    column-gap: var(--o-gap-4);
-  }
-
-  .label-item {
-    color: var(--o-color-info3);
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-columns: subgrid;
-    grid-column: 1 / -1;
-    align-items: start;
-    font-size: 14px;
-    line-height: 22px;
-    @include respond('<=pad_v') {
-      font-size: 12px;
-      line-height: 18px;
-    }
-
-    &.record-item {
-      align-items: start;
-
-      .value {
-        margin-bottom: 0;
-      }
-    }
-
-    .label {
-      white-space: nowrap;
-      flex-shrink: 0;
-      display: flex;
-
-      i {
-        width: 0;
-        height: 0;
-        opacity: 0;
-        overflow: hidden;
-      }
-    }
-
-    .split-mark {
-      display: none;
-    }
-
-    .o-link {
-      font-size: 14px;
-      line-height: 22px;
-      @include respond('<=pad_v') {
-        font-size: 12px;
-        line-height: 18px;
-      }
-      .o-link-main {
-        word-wrap: break-word;
-        @include text-truncate(3);
-      }
-    }
-
-    .value {
-      display: flex;
-      align-items: flex-start;
-
-      &.link {
-        color: var(--o-color-primary1);
-        cursor: pointer;
-      }
-
-      .extra {
-        width: 0;
-        height: 0;
-        opacity: 0;
-        overflow: hidden;
-      }
-    }
-  }
-
-  .label-item.is-empty {
-    display: none;
-  }
-
-  .meeting-action {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--o-gap-2);
-
-    @include respond('phone') {
-      border-top: 1px solid var(--o-color-control4);
-      padding-top: var(--o-gap-2);
-      position: static;
-      margin-top: var(--o-gap-2);
-    }
-  }
-}
-</style>