@opendesign-plus/components 0.0.1-rc.10

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,121 @@
+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();
+
+const getMeetingColor = () => {
+  if (typeof document !== 'undefined') {
+    const deepBlue = getComputedStyle(document.documentElement)
+      .getPropertyValue('--o-deep-blue-6')?.trim();
+    if (deepBlue) {
+      return 'rgba(var(--o-deep-blue-6))';
+    }
+  }
+  return 'var(--o-color-primary1)';
+};
+
+export const TYPE_COLOR_MAP = {
+  summit: 'rgba(var(--o-orange-6))',
+  events: 'rgba(var(--o-cyan-6))',
+  meeting: getMeetingColor(),
+};
+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,193 @@
+// 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',
+  ACTIVITY = 'activity',
+  APPROVAL = 'approval'
+}
+
+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 enum MeetingGroupType {
+  SIG = 'sig',
+  GROUP = 'group',
+}
+
+export interface MeetingCalendarPropsT {
+  getDateListRequest: any;
+  getMeetingListRequest: any;
+  getSummitListRequest: any;
+  getSummitDatesRequest: any;
+  getEventsListRequest: any;
+  getEventsDatesRequest: any;
+  hiddenEvents?: boolean;
+  hiddenSummit?: boolean;
+  groupType: MeetingGroupType;
+}
+// 会议新增、修改
+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;
+}
+
+export interface MeetingFormPropsT {
+  data?: MeetingItemT;
+  isSub?: boolean;
+  isEdit?: boolean;
+  subId?: string;
+  createMeetingRequest: any,
+  editMeetingRequest: any;
+  editSubMeetingRequest: any;
+  getPlatformsRequest: any;
+  getGroupsRequest: any;
+  showBtns?: boolean;
+  groupType: MeetingGroupType;
+  bookText?: 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; // 当前字幕索引
+}

package/src/components/meeting/utils.ts

@@ -0,0 +1,123 @@
+import dayjs from 'dayjs';
+import { useI18n } from '@/i18n';
+import { INTERVAL_MONTH, INTERVAL_WEEK, INTERVAL_WEEK_OPTIONS, MEETING_TABS } from './config';
+import { CalendarDataType, meetingTabT, OptionItemT } from '@/components/meeting/types.ts';
+
+const { t } = useI18n();
+/**
+ * 格式化时间
+ * @param {string} date 时间
+ * @param {string} format 时间格式
+ * @returns {string} 返回
+ */
+export const formatDate = (date: string | Date = new Date(), format: string = 'YYYY-MM-DD'): string => {
+  let dateStr = date;
+  if (!dateStr) {
+    dateStr = new Date();
+  }
+  if (!dayjs(new Date(dateStr)).isValid()) {
+    return dateStr as string;
+  }
+  return dayjs(new Date(dateStr)).format(format);
+};
+
+export const findLabelFromOptions = (value: string | number, options: OptionItemT[], labelKey: keyof OptionItemT = 'label', valueKey: keyof OptionItemT = 'value') => {
+  const find = options.find((o) => o[valueKey] === value);
+  return find?.[labelKey] || value;
+};
+export const getPointStr = (cycleType: number, points: number[]) => {
+  if (cycleType === INTERVAL_WEEK) {
+    return points
+      .sort((a, b) => {
+        const aIdx = INTERVAL_WEEK_OPTIONS.findIndex((v) => v.value === a);
+        const bIdx = INTERVAL_WEEK_OPTIONS.findIndex((v) => v.value === b);
+        return aIdx - bIdx;
+      })
+      .map((point: number) => findLabelFromOptions(point, INTERVAL_WEEK_OPTIONS))
+      .join(t('meeting.cycleSplit'));
+  }
+  if (cycleType === INTERVAL_MONTH) {
+    return points.join(t('meeting.cycleSplit'));
+  }
+  return '';
+};
+// 处理发言人的序号
+export const speakerNum = (val: string) => {
+  const regex = /\d+/g;
+  const match = val.match(regex) || '';
+
+  return parseInt(match[0]);
+};
+/**
+ * 将时间转换为秒数
+ * @param {string} date 时间 hh:mm:ss
+ * @returns {number}
+ */
+export const getDateNumber = (date: string) => {
+  const arr: string[] = date.split(':');
+  if (arr.length > 3 || !arr.length) {
+    return 0;
+  }
+  let res = 0;
+  let base = 1;
+  while (arr.length > 0) {
+    const current = arr.pop();
+    res += parseInt(current!) * base;
+    base *= 60;
+  }
+  return res;
+};
+
+const formatNumber = (num: number) => {
+  if (num < 0) return 'Invalid number';
+  if (num >= 10) return `${ num }`;
+  return `0${ num }`;
+};
+
+export const formatDateNumber = (num: number) => {
+  if (num > 24 * 60 * 60) return 'Invalid date';
+  const h = Math.floor(num / 60 / 60);
+  const m = Math.floor((num - h * 60 * 60) / 60);
+  const s = num % 60;
+  return `${ formatNumber(h) }:${ formatNumber(m) }:${ formatNumber(s) }`;
+};
+
+// 时分秒 转换成 以秒为单位的格式 - xx秒
+export const transformTime = (time: string) => {
+  const arr = time.split(':');
+  const hh = arr[arr.length - 3] ? parseInt(arr[arr.length - 3]) : 0;
+  const mm = parseInt(arr[arr.length - 2]);
+  const ss = parseFloat(arr[arr.length - 1]);
+
+  return hh * 60 * 60 + mm * 60 + ss;
+};
+
+// 以秒为单位的格式 转换成 时分秒 - hh:mm:ss
+export const transformSeconds = (seconds: number) => {
+  const hh = Math.floor(seconds / 3600);
+  const mm = Math.floor((seconds - hh * 3600) / 60);
+  const ss = Math.floor(seconds - hh * 3600 - mm * 60);
+  return `${ hh ? `${ hh.toString().padStart(2, '0') }:` : '' }${ mm.toString().padStart(2, '0') }:${ ss.toString().padStart(2, '0') }`;
+};
+
+export const getConfig = (val: CalendarDataType, key: keyof meetingTabT): string => {
+  let value = val;
+  if (val === CalendarDataType.ACTIVITY) {
+    value = CalendarDataType.EVENTS;
+  }
+  const find: meetingTabT = MEETING_TABS.find(v => v.value === value)!;
+  return find?.[key] || '';
+};
+
+export const getPlatformLabel = (platform: string) => {
+  switch (platform) {
+    case 'WELINK':
+      return 'WeLink';
+    case 'ZOOM':
+      return 'Zoom';
+    case 'TENCENT':
+      return '腾讯会议';
+    default:
+      return platform;
+  }
+};