@opendesign-plus/components 0.0.1-rc.12 → 0.0.1-rc.13

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

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { OLink } from '@opensig/opendesign';
 import { computed, ref } from 'vue';
-import { CalendarDataType, MeetingItemT } from '@/components/meeting/types.ts';
+import { CalendarDataType, MeetingItemT } from '../types.ts';
 import MoreText from '@/components/common/MoreText.vue';
-import { Locales, useI18n } from '@/i18n';
-import { formatDate, getPlatformLabel } from '@/components/meeting/utils.ts';
+import { formatDate } from '@/components/meeting/utils.ts';
+import { useMeetingConfig } from '../composables/useMeetingConfig';
 
 const props = defineProps<{
   data: MeetingItemT;
   from?: string;
   show: boolean;
 }>();
-const { t, locale } = useI18n();
-const isZh = computed(() => locale.value === Locales.ZH);
+const { t, getPlatformLabel } = useMeetingConfig();
+
 // 会议详情配置
 const infoList = computed(() =>
   [
@@ -29,7 +29,7 @@ const infoList = computed(() =>
 
 
 const activityInfoList = computed(() => {
-  const isLive = props.data.activity_type === 2 || props.data.activity_type === '线上';
+  const isLive = props.data.live_url?.length > 0;
   return [
     { label: t('meeting.activityDetail2'), key: 'agenda', ellipsis: true },
     { label: t('meeting.startDate'), key: 'start_date_time' },
@@ -42,7 +42,7 @@ const activityInfoList = computed(() => {
   ].slice(0, props.from === 'home' ? 5 : 8);
 });
 const activityInfoApprovalList = computed(() => {
-  const isLive = props.data.activity_type === 2 || props.data.activity_type === '线上';
+  const isLive = props.data.live_url?.length > 0;
   return [
     { label: t('meeting.activityType'), key: 'activity_type', isType: true },
     { label: isLive ? t('meeting.livePlatform') : t('meeting.activityAddress'), key: 'address' },

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

@@ -1,9 +1,11 @@
 <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 { useMeetingConfig } from '@/components/meeting/composables/useMeetingConfig';
 import { CalendarDataType } from '@/components/meeting';
 
+const { getConfig } = useMeetingConfig();
+
 const props = defineProps<{
   data: any[];
   current: number;

package/src/components/meeting/composables/useMeetingConfig.ts

@@ -0,0 +1,111 @@
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+import { useI18n } from '@/i18n';
+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 { CalendarDataType, meetingTabT, OptionItemT } from '../types';
+import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK, TYPE_COLOR_MAP } from '../config';
+
+export const useMeetingConfig = () => {
+  const { t, locale } = useI18n();
+
+  const meetingTabs = computed<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 },
+  ]);
+
+  const cycleTypeOptions0 = computed<OptionItemT[]>(() => [
+    { 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 },
+  ]);
+
+  const cycleTypeOptions = computed<OptionItemT[]>(() => [
+    { 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 },
+  ]);
+
+  const weekDay = computed(() => [
+    t('meeting.sunday'),
+    t('meeting.monday'),
+    t('meeting.tuesday'),
+    t('meeting.wednesday'),
+    t('meeting.thursday'),
+    t('meeting.friday'),
+    t('meeting.saturday'),
+  ]);
+
+  const intervalWeekOptions = computed(() => {
+    const list: OptionItemT[] = [];
+    for (let i = 1; i <= 7; i++) {
+      const idx = i % 7;
+      list.push({ value: idx, label: weekDay.value[idx] });
+    }
+    return list;
+  });
+
+  const getPointStr = (cycleType: number, points: number[]) => {
+    if (cycleType === INTERVAL_WEEK) {
+      return points
+        .sort((a, b) => {
+          const aIdx = intervalWeekOptions.value.findIndex((v) => v.value === a);
+          const bIdx = intervalWeekOptions.value.findIndex((v) => v.value === b);
+          return aIdx - bIdx;
+        })
+        .map((point: number) => {
+          const opt = intervalWeekOptions.value.find((v) => v.value === point);
+          return opt?.label || String(point);
+        })
+        .join(t('meeting.cycleSplit'));
+    }
+    if (cycleType === INTERVAL_MONTH) {
+      return points.join(t('meeting.cycleSplit'));
+    }
+    return '';
+  };
+
+  const getConfig = (val: CalendarDataType, key: keyof meetingTabT): string => {
+    let value = val;
+    if (val === CalendarDataType.ACTIVITY) {
+      value = CalendarDataType.EVENTS;
+    }
+    const find: meetingTabT | undefined = meetingTabs.value.find(v => v.value === value);
+    return find?.[key] || '';
+  };
+
+  const getPlatformLabel = (platform: string) => {
+    switch (platform) {
+      case 'WELINK':
+        return 'WeLink';
+      case 'ZOOM':
+        return 'Zoom';
+      case 'TENCENT':
+        return locale.value === 'zh' ? '腾讯会议' : 'Tencent';
+      default:
+        return platform;
+    }
+  };
+
+  const getWeekFromDate = (date: string | Date) => {
+    return weekDay.value[dayjs(date).day()];
+  };
+
+  return {
+    t,
+    locale,
+    meetingTabs,
+    cycleTypeOptions0,
+    cycleTypeOptions,
+    weekDay,
+    intervalWeekOptions,
+    getPointStr,
+    getConfig,
+    getPlatformLabel,
+    getWeekFromDate,
+  };
+};

package/src/components/meeting/config.ts

@@ -1,121 +1,59 @@
-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(),
+import { CalendarDataType, meetingTabT } from './types.ts';
+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';
+
+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 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)'];
+
+export const TYPE_COLOR_MAP = {
+  summit: 'rgba(var(--o-orange-6))',
+  events: 'rgba(var(--o-cyan-6))',
+  meeting: getMeetingColor(),
+};
+
+export const INTERVAL_DAY = 0;
+export const INTERVAL_WEEK = 1;
+export const INTERVAL_MONTH = 2;
+
+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)'];
+
+export const getMeetingTabs = (t: (key: string) => string): 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,
+  },
+];

package/src/components/meeting/types.ts

@@ -109,6 +109,7 @@ export interface MeetingItemT extends MeetingPostT {
   update_time: string;
   time: string; // 处理一下时间范围
   cycle_sub: any[];
+  live_url?: string;
 }
 
 export interface PageParamsT {

package/src/components/meeting/utils.ts

@@ -1,123 +1,70 @@
-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;
-  }
+import dayjs from 'dayjs';
+import { OptionItemT } from './types';
+
+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 speakerNum = (val: string) => {
+  const regex = /\d+/g;
+  const match = val.match(regex) || '';
+
+  return parseInt(match[0]);
+};
+
+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) }`;
+};
+
+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;
+};
+
+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') }`;
 };

package/src/i18n/en.ts

@@ -122,7 +122,7 @@ export default {
   'meeting.meetingTypeSummit': 'Summit',
   'meeting.allSigs': 'All SIGs',
   'meeting.allGroups': 'All Groups',
-  'meeting.meetingCreator': 'Organizer',
+  'meeting.meetingCreator': 'Convener',
   'meeting.meetingDate2': 'Time',
   'meeting.meetingId': 'Meeting ID',
   'meeting.meetingLink': 'Meeting Link',