@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.100

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

@@ -1,197 +0,0 @@
-<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

@@ -1,121 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,193 +0,0 @@
-// 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

@@ -1,123 +0,0 @@
-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;
-  }
-};