@opendesign-plus-test/components 0.0.1-rc.21 → 0.0.1-rc.23

package/src/components/meeting/components/OMyCalendarWrapper.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+//
+//import { formatDate } from '@/components/meeting/utils.ts';
+//import dayjs from 'dayjs';
+//import {
+//  OIcon,
+//  OIconArrowLeft,
+//  OIconArrowRight,
+//  OIconChevronLeft,
+//  OIconChevronRight,
+//  OScroller,
+//} from '@opensig/opendesign';
+//import { ElCalendar, useLocale } from 'element-plus';
+//import { Locales, useI18n } from '@/i18n';
+//import { computed, nextTick, onMounted, onUnmounted, ref, ref } from 'vue';
+//
+//const { t, locale } = useI18n();
+//const isEn = computed(() => locale.value === Locales.EN);
+//
+//const props = defineProps<{
+//  selectedDate: string;
+//  allDateList: string[];
+//  list: any[]
+//}>();
+//const emits = defineEmits(['change-month', 'load']);
+//const calendarRef = ref(null);
+//
+//const formatYearMonth = (date) => {
+//  date = dayjs(date ? date : undefined);
+//  if (isEn.value) {
+//    return date.format('MMMM YYYY');
+//  } else {
+//    return date.format('YYYY MM月');
+//  }
+//};
+//
+//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;
+//  }
+//  window.scrollTo({
+//    top: 0,
+//    behavior: 'smooth',
+//  });
+//  calendarRef.value.selectDate(val);
+//  nextTick(() => {
+//    emits('change-month', calendarRef.value.selectedDay);
+//
+//  });
+//};
+//
+//const calcIfAllDeleted = (date) => {
+//  const meetingsOfDate = props.list?.filter((v) => v.date === date) || [];
+//  return meetingsOfDate.length && meetingsOfDate.every((v) => v.is_delete);
+//};
+//const load = () => {
+//  emits('load');
+//};
+//
+//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);
+//});
+
+</script>
+
+<template>
+  <!--  <div class="o-my-calendar-wrapper">-->
+  <!--    <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="{ '&#45;&#45;header-height': headerHeight }"-->
+  <!--        class="scroller-container"-->
+  <!--        show-type="hover"-->
+  <!--      >-->
+  <!--        <div class="list-body">-->
+  <!--          <div class="list-month-change prev-month"  @click="changeMonth('prev-month')">-->
+  <!--            <OIcon>-->
+  <!--              <OIconArrowLeft />-->
+  <!--            </OIcon>-->
+  <!--            <span>{{ t('meeting.preMonth') }}</span>-->
+  <!--          </div>-->
+
+  <!--          <slot></slot>-->
+  <!--          <div class="list-month-change next-month" @click="changeMonth('next-month')">-->
+  <!--            <OIcon>-->
+  <!--              <OIconArrowRight />-->
+  <!--            </OIcon>-->
+  <!--            <span>{{ t('meeting.nextMonth') }}</span>-->
+  <!--          </div>-->
+  <!--        </div>-->
+  <!--      </OScroller>-->
+  <!--  </div>-->
+</template>
+
+<style scoped lang="scss">
+.o-my-calendar-wrapper {
+
+}
+</style>

package/src/components/meeting/components/OSigMeetingAside.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { OIcon, OIconArrowLeft, OIconArrowRight } from '@opensig/opendesign';
+import IconMeetinging from '~icons/meeting/icon-meet.svg';
+import { getConfig } from '@/components/meeting/utils.ts';
+import { CalendarDataType } from '@/components/meeting';
+
+const props = defineProps<{
+  data: any[];
+  current: number;
+  total: number;
+  active: string;
+  meetingDates: string[];// 会议日期列表
+  eventsDates: string[];// 活动日期列表
+}>();
+
+const STEP = 1;
+
+const emits = defineEmits(['click-date', 'change-month']);
+const clickDate = (date) => {
+  emits('click-date', date);
+};
+
+const changeMonth = (step) => {
+  if (props.current + step >= props.total || props.current + step < 0) return;
+  emits('change-month', step);
+};
+</script>
+
+<template>
+  <div class="o-sig-meeting-aside">
+    <template v-for="(d, dIdx) in data" :key="dIdx">
+      <div v-for="m in d" :key="m.month" class="month-item">
+        <div class="month">{{ m.month.replace(/-/g, '/') }}</div>
+        <div class="days">
+          <div
+            class="day-item"
+            v-for="d in m.days"
+            :key="d"
+            @click="clickDate(`${m.month}-${d}`)"
+            :class="active === `${m.month}-${d}` && 'active'"
+          >
+            <div class="day-d">{{ d }}</div>
+            <div class="day-c">
+              <OIcon
+                v-if="meetingDates.includes(`${m.month}-${d}`)"
+                :style="{
+                  zIndex: getConfig(CalendarDataType.MEETING, 'zIndex'),
+                  backgroundColor: getConfig(CalendarDataType.MEETING, 'color'),
+                }"
+              >
+                <component :is="getConfig(CalendarDataType.MEETING, 'icon')" />
+              </OIcon>
+              <OIcon
+                v-if="eventsDates.includes(`${m.month}-${d}`)"
+                :style="{
+                  zIndex: getConfig(CalendarDataType.EVENTS, 'zIndex'),
+                  backgroundColor: getConfig(CalendarDataType.EVENTS, 'color'),
+                }"
+              >
+                <component :is="getConfig(CalendarDataType.EVENTS, 'icon')" />
+              </OIcon>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="arrow-wrapper">
+      <OIcon @click="changeMonth(0 - STEP)" :class="current - STEP < 0 && 'disabled'">
+        <OIconArrowLeft />
+      </OIcon>
+      <OIcon @click="changeMonth(STEP)" :class="current + STEP >= total && 'disabled'">
+        <OIconArrowRight />
+      </OIcon>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.o-sig-meeting-aside {
+  width: 35%;
+  flex-shrink: 0;
+  padding: var(--o-gap-4) var(--o-gap-6);
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--o-color-control4);
+  @include respond-to('<=pad') {
+    padding: var(--o-gap-4);
+    border-right: none;
+  }
+  @include respond-to('phone') {
+    padding: 16px;
+    .title {
+      margin-bottom: var(--o-gap-2);
+    }
+  }
+  @include respond-to('<=pad_v') {
+    width: 100%;
+  }
+
+  .month-item {
+    margin-bottom: var(--o-gap-3);
+
+    .month {
+      color: var(--o-color-info3);
+      margin-bottom: var(--o-gap-2);
+      @include tip1;
+    }
+
+    .days {
+      gap: var(--o-gap-2);
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+
+      @include respond-to('<=pad_v') {
+        display: flex;
+      }
+
+      .day-item {
+        height: 64px;
+        border-radius: 4px;
+        background-color: var(--o-color-control2-light);
+        padding: 8px 12px;
+        cursor: pointer;
+        border: 1px solid transparent;
+
+        &:hover,
+        &.active {
+          background-color: var(--o-color-control3-light);
+          border-color: var(--o-color-primary1);
+        }
+
+        .day-d {
+          font-weight: 500;
+          margin-bottom: var(--o-gap-1);
+        }
+
+        .day-c {
+          color: rgb(var(--o-white));
+          display: flex;
+          flex-wrap: nowrap;
+
+          .o-icon {
+            width: 20px;
+            height: 20px;
+            font-size: 20px;
+            line-height: 1em;
+            position: relative;
+            border-radius: 50%;
+            margin-left: -6px;
+
+            &:first-child {
+              margin-left: 0;
+            }
+
+            svg path {
+              fill: currentColor;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .arrow-wrapper {
+    margin-top: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--o-color-primary1);
+
+    .o-icon {
+      font-size: 24px;
+      cursor: pointer;
+
+      &.disabled {
+        cursor: not-allowed;
+        color: var(--o-color-primary4);
+      }
+
+      &:not(.disabled):hover {
+        color: var(--o-color-primary2);
+      }
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    .day-item {
+    }
+  }
+  @include respond-to('<=pad_v') {
+    .day-item {
+      width: min(128px, calc((100% - var(--o-gap-2)) / 2));
+    }
+  }
+}
+
+</style>

package/src/components/meeting/config.ts

@@ -0,0 +1,110 @@
+import IconAll from '~icons/meeting/icon-all.svg';
+import IconEvent from '~icons/meeting/icon-event.svg';
+import IconMeeting from '~icons/meeting/icon-meet.svg';
+import IconSummit from '~icons/meeting/icon-summit.svg';
+import { useI18n } from '@/i18n';
+import { CalendarDataType, meetingTabT } from './types.ts';
+
+const { t } = useI18n();
+
+export const TYPE_COLOR_MAP = {
+  summit: 'var(--o-color-warning1)',
+  events: 'rgba(var(--o-cyan-6))',
+  meeting: 'var(--o-color-primary1)',
+};
+export const MEETING_TABS: meetingTabT[] = [
+  {
+    label: t('meeting.meetingTypeAll'),
+    value: CalendarDataType.ALL,
+    icon: IconAll,
+  },
+  {
+    label: t('meeting.meetingTypeMeet'),
+    value: CalendarDataType.MEETING,
+    icon: IconMeeting,
+    color: TYPE_COLOR_MAP.meeting,
+    zIndex: 3,
+  },
+  {
+    label: t('meeting.meetingTypeEvents'),
+    value: CalendarDataType.EVENTS,
+    icon: IconEvent,
+    color: TYPE_COLOR_MAP.events,
+    zIndex: 2,
+  },
+  {
+    label: t('meeting.meetingTypeSummit'),
+    value: CalendarDataType.SUMMIT,
+    icon: IconSummit,
+    color: TYPE_COLOR_MAP.summit,
+    zIndex: 1,
+  },
+];
+
+
+export const INTERVAL_DAY = 0;
+export const INTERVAL_WEEK = 1;
+export const INTERVAL_MONTH = 2;
+
+export const CYCLE_TYPE_OPTIONS0 = [
+  {
+    label: t('meeting.day0'),
+    value: INTERVAL_DAY,
+    max: 7,
+  },
+  {
+    label: t('meeting.week0'),
+    value: INTERVAL_WEEK,
+    max: 2,
+  },
+  {
+    label: t('meeting.month0'),
+    value: INTERVAL_MONTH,
+    max: 1,
+  },
+];
+export const CYCLE_TYPE_OPTIONS = [
+  {
+    label: t('meeting.day'),
+    value: INTERVAL_DAY,
+    max: 7,
+  },
+  {
+    label: t('meeting.week'),
+    value: INTERVAL_WEEK,
+    max: 2,
+  },
+  {
+    label: t('meeting.month'),
+    value: INTERVAL_MONTH,
+    max: 1,
+  },
+];
+export const WEEKDAY = [
+  t('meeting.sunday'),
+  t('meeting.monday'),
+  t('meeting.tuesday'),
+  t('meeting.wednesday'),
+  t('meeting.thursday'),
+  t('meeting.friday'),
+  t('meeting.saturday'),
+];
+
+const getWeekOptions = () => {
+  const list = [];
+  for (let i = 1; i <= 7; i++) {
+    const idx = i % 7;
+    list.push({
+      value: idx,
+      label: WEEKDAY[idx],
+    });
+  }
+  return list;
+};
+
+export const INTERVAL_WEEK_OPTIONS = getWeekOptions();
+
+
+export const EMAIL_REGEX = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
+
+export const PROGRESS_COLORS = ['var(--o-color-primary1)', 'var(--o-color-warning1)', 'var(--o-color-success1)'];

package/src/components/meeting/index.ts

@@ -0,0 +1,45 @@
+import type { App } from 'vue';
+import _OMeetingCalendar from './OMeetingCalendar.vue';
+import _OMeetingForm from './OMeetingForm.vue';
+import _OMeetingPlayback from './OMeetingPlayback.vue';
+import _OSigMeetingCalendar from './OSigMeetingCalendar.vue';
+import _OMyMeetingCalendar from './OMyMeetingCalendar.vue';
+
+const OMeetingCalendar = Object.assign(_OMeetingCalendar, {
+  install(app: App) {
+    app.component('OMeetingCalendar', _OMeetingCalendar);
+  },
+});
+const OMeetingForm = Object.assign(_OMeetingForm, {
+  install(app: App) {
+    app.component('OMeetingCalendar', _OMeetingForm);
+  },
+});
+
+const OMeetingPlayback = Object.assign(_OMeetingPlayback, {
+  install(app: App) {
+    app.component('OMeetingPlayback', _OMeetingPlayback);
+  },
+});
+
+const OSigMeetingCalendar = Object.assign(_OSigMeetingCalendar, {
+  install(app: App) {
+    app.component('OSigMeetingCalendar', _OSigMeetingCalendar);
+  },
+});
+
+const OMyMeetingCalendar = Object.assign(_OMyMeetingCalendar, {
+  install(app: App) {
+    app.component('OMyMeetingCalendar', _OMyMeetingCalendar);
+  },
+});
+
+export {
+  OMeetingCalendar,
+  OMeetingForm,
+  OMeetingPlayback,
+  OSigMeetingCalendar,
+  OMyMeetingCalendar,
+};
+
+export * from './types';

package/src/components/meeting/types.ts

@@ -0,0 +1,167 @@
+// sig组列表
+import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from '@/components/meeting/config.ts';
+
+export interface GroupItemT {
+  id?: number;
+  group_name: string;
+  maillist?: string;
+}
+
+// 会议日历上额外的数据，活动或者峰会
+export enum CalendarDataType {
+  ALL = 'all',
+  MEETING = 'meeting',
+  EVENTS = 'events',
+  SUMMIT = 'summit',
+}
+
+export interface CalendarOtherDataT {
+  id: string;
+  name: string;
+  url: string;
+  dates: string[];
+  location?: string;
+  address?: string;
+  start_date: string;
+  end_date: string;
+  activity_type: string;
+  type: CalendarDataType.EVENTS | CalendarDataType.SUMMIT;
+}
+
+export interface OptionItemT {
+  label: string;
+  value: string | number;
+}
+
+
+export type PlatformT = 'welink' | 'tencent';
+
+// 会议新增、修改
+export interface MeetingPostT {
+  id?: number; // 会议id
+  topic: string; // 会议主题 128
+  sponsor: string; // 会议发起人 20
+  group_name: string; // 所属SIG 64
+  platform: PlatformT; // 会议平台
+  date: string; // 会议日期
+  date_range?: string[]; // 日期返回
+  time: string; // 会议时间
+  start: string; // 会议开始时间
+  end: string; // 会议结束时间
+  etherpad: string; // etherpad链接
+  agenda: string; // 会议议程
+  email_list: string; // 通知邮件列表 1020
+  is_record: boolean; // 会议录制
+  is_cycle: boolean; // 是否重复
+  cycle_start_date: string;
+  cycle_end_date: string;
+  cycle_start: string;
+  cycle_end: string;
+  cycle_interval: number; // 重复周期, 当intervalType为month时固定为1
+  cycle_type: typeof INTERVAL_DAY | typeof INTERVAL_WEEK | typeof INTERVAL_MONTH; // 重复类型，默认为INTERVAL_DAY
+  cycle_point: number[]; // 重复节点，当intervalType为week|month时存在值
+  is_notify?: boolean;
+}
+
+// sig组列表
+export interface GroupItemT {
+  id?: number;
+  group_name: string;
+  maillist?: string;
+}
+
+// 会议详情
+export interface MeetingItemT extends MeetingPostT {
+  id: number;
+  community: string;
+  mid: string;
+  m_mid: string;
+  join_url: string; // 会议链接
+  create_time: string; // 创建时间
+  isEnd: boolean; // 是否结束
+  is_delete: boolean; // 是否取消
+  update_time: string;
+  time: string; // 处理一下时间范围
+  cycle_sub: any[];
+}
+
+export interface PageParamsT {
+  page: number;
+  size: number;
+}
+
+export interface OptionItemT {
+  label: string;
+  value: string | number;
+}
+
+export interface meetingTabT {
+  label: string;
+  value: string;
+  icon: any;
+  color?: string;
+  zIndex?: number;
+}
+
+
+// -------------------- 会议回放 --------------------
+interface MeetingPlaybackPropsDetailT {
+  topic: string; // 会议主题
+  date: string; // 会议日期
+  start: string; // 会议开始时间
+  end: string; // 会议结束时间
+  agenda: string; // 会议详情
+  sponsor: string; // 会议创建人
+  groupName: string; // 会议所属sig组
+}
+
+interface MeetingPlaybackPropsDataT {
+  mid: string; // 会议ID
+  subId?: string; //子会议ID
+  textJson: string;  // 字幕json文件
+  poster: string; // 封面
+  video: string;  // 录屏
+  textVtt: string;  // 字幕文件
+  topicJson: string;  // 议题分段
+}
+
+export interface MeetingPlaybackPropsT {
+  dates: string[]; // 如果是周期会议，传入可选的日期
+  detail: MeetingPlaybackPropsDetailT; // 会议信息
+  data: MeetingPlaybackPropsDataT; // 回放信息
+}
+
+export interface SubjectItemT {
+  title: string; // 议题
+  startTime: string | number; // 议题开始时间 时:分:秒格式
+  endTime: string | number; // 议题结束时间 时:分:秒格式
+}
+
+
+export interface CaptionItemT {
+  ID: number; // 字幕id
+  start_time: string; // 字幕开始时间
+  end_time: string; //  字幕结束时间
+  speaker: string; // 发言人
+  content: string; // 发言内容
+  contentHtml: string; // 发言内容转html
+  speakerIdx: number; // 当前发言人索引
+  speakerLabel: string; // 发言人文案
+}
+
+
+export interface MeetingPlaybackVideoPropsT {
+  src: string; // 视频资源
+  vtt?: string; // 字幕资源
+  captions?: CaptionItemT[]; // 语言转文字json
+  poster?: string | null; // 封面图片
+  posterTitle?: string | null; // 封面文案
+  instance?: any; // 播放器实例
+  trackIdx: number; // 当前字幕索引
+}
+
+export interface MeetingPlaybackSubtitlesPropsT {
+  captions?: CaptionItemT[]; // 语言转文字json
+  instance?: any; // 播放器实例
+  trackIdx: number; // 当前字幕索引
+}