@opendesign-plus-test/components 0.0.1-rc.42 → 0.0.1-rc.45

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -3,7 +3,7 @@ import { OCollapse, OCollapseItem, ODivider, OIcon, OLink, OTag, useMessage } fr
 import OMeetingDetail from './OMeetingDetail.vue';
 import { computed, nextTick, ref, watch } from 'vue';
 import IconCopy from '~icons/meeting/icon-copy.svg';
-import { MeetingGroupType, MeetingItemT } from '../types.ts';
+import { CalendarDataType, CycleSubItemT, MeetingGroupType, MeetingItemT, ObsDataItemT } from '../types.ts';
 import IconChevronRight from '~icons/components/icon-chevron-right.svg';
 import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from '../config.ts';
 import { formatDate } from '../utils.ts';
@@ -14,14 +14,14 @@ const { activityTypeMap } = useActivityConfig();
 
 const props = withDefaults(defineProps<{
   list: MeetingItemT[];
-  groupType: MeetingGroupType;
+  groupType?: MeetingGroupType;
 }>(), {
   list: () => [],
 });
 const { t, locale, getConfig, getPointStr } = useMeetingConfig();
-const detailRefs = ref([]);
+const detailRefs = ref<any[]>([]);
 const message = useMessage(null);
-const copyInfo = async (idx) => {
+const copyInfo = async (idx: number) => {
   const instance = detailRefs.value[idx];
   await instance.copyInfo();
   message.success({
@@ -29,7 +29,7 @@ const copyInfo = async (idx) => {
   });
 };
 
-const collapseNames = ref([]);
+const collapseNames = ref<number[]>([]);
 const i18n = computed(() => {
   return {
     SIG_GROUP: `${ props.groupType === MeetingGroupType.GROUP ? t('meeting.groups') : t('meeting.sigs') }: `,
@@ -43,7 +43,7 @@ const i18n = computed(() => {
 });
 
 // -------------------- 监听尺寸变化 --------------------
-const meetInfoRef = ref();
+const meetInfoRef = ref<HTMLDivElement[]>();
 const resizeObserver = new ResizeObserver((entries) => {
   for (let entry of entries) {
     const { height } = entry.contentRect;
@@ -70,11 +70,11 @@ watch(
   },
 );
 
-const computedList = computed(() => {
-  return props.list.map((v) => {
+const computedList = computed<any[]>(() => {
+  return props.list.map((v: any) => {
     const type = v.type;
     let dateRange = '';
-    if (type !== 'meeting') {
+    if (type !== CalendarDataType.MEETING) {
       let activity_type = activityTypeMap.value.get(v.activity_type)?.label;
       if (v.start && v.end) {
         if (v.end_date === v.start_date) {
@@ -113,7 +113,7 @@ const computedList = computed(() => {
     let timeRange = `${ start } - ${ end }`;
     let replay_url = null;
     let hasObsData = false;
-    const obsData = v.obs_data?.filter((v) => v.text_video_url) || [];
+    const obsData = v.obs_data?.filter((v: ObsDataItemT) => v.text_video_url) || [];
 
     if (is_cycle) {
       let cycleType = '';
@@ -122,13 +122,13 @@ const computedList = computed(() => {
       }
       if (cycle_type === INTERVAL_WEEK) {
         if (cycle_interval > 1) {
-          cycleType = t('meeting.cycleWeek.other', [getPointStr(cycle_type, cycle_point), cycle_interval]);
+          cycleType = t('meeting.cycleWeek.other', [getPointStr(cycle_type, cycle_point as unknown as number[]), cycle_interval]);
         } else {
-          cycleType = t('meeting.cycleWeek.one', [getPointStr(cycle_type, cycle_point)]);
+          cycleType = t('meeting.cycleWeek.one', [getPointStr(cycle_type, cycle_point as unknown as number[])]);
         }
       }
       if (cycle_type === INTERVAL_MONTH) {
-        cycleType = t('meeting.cycleMonth', [getPointStr(cycle_type, cycle_point)]);
+        cycleType = t('meeting.cycleMonth', [getPointStr(cycle_type, cycle_point as unknown as number[])]);
       }
       timeRange = t('meeting.cycleMeetingText2', {
         startDate: cycle_start_date,
@@ -137,7 +137,7 @@ const computedList = computed(() => {
         endTime: cycle_end,
         cycleType,
       });
-      hasObsData = obsData.some((t) => t.sub_id === v.cycle_sub.find((z) => z.date === date)?.sub_id);
+      hasObsData = obsData.some((t: ObsDataItemT) => t.sub_id === v.cycle_sub.find((z: CycleSubItemT) => z.date === date)?.sub_id);
     } else {
       hasObsData = obsData.length > 0;
     }
@@ -251,13 +251,13 @@ const computedList = computed(() => {
   .o-collapse {
     --icon-size2: 24px;
     --icon-right: 12px;
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       --icon-size2: 20px;
     }
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       --icon-right: 8px;
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       --icon-right: 4px;
     }
 
@@ -285,7 +285,7 @@ const computedList = computed(() => {
           color: var(--o-color-primary1);
         }
       }
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         &::after {
           width: calc(100% - 2 * 16px);
         }
@@ -302,7 +302,8 @@ const computedList = computed(() => {
 
           .o-collapse-item-title {
             .copy-icon {
-              display: inline-flex;
+              opacity: 1;
+              visibility: visible;
             }
           }
         }
@@ -319,16 +320,17 @@ const computedList = computed(() => {
       padding: var(--o-gap-4) var(--o-gap-5);
       position: relative;
 
-      @include respond-to('>pad_v') {
+      @include respond('>pad_v') {
         &:hover {
           .o-collapse-item-title {
             .copy-icon {
-              display: inline-flex;
+              opacity: 1;
+              visibility: visible;
             }
           }
         }
       }
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         padding: 12px 16px;
       }
 
@@ -343,11 +345,14 @@ const computedList = computed(() => {
 
         .meet-title-left {
           flex-grow: 1;
+          min-width: 0;
         }
 
         .copy-icon {
           flex-shrink: 0;
-          display: none;
+          display: inline-flex;
+          opacity: 0;
+          visibility: hidden;
 
           &:hover {
             color: var(--o-color-primary1);
@@ -387,11 +392,11 @@ const computedList = computed(() => {
         border-radius: var(--o-radius-xs);
         @include tip1;
 
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + 16px - 12px);
 
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           padding: 12px 16px;
         }
 
@@ -441,7 +446,7 @@ const computedList = computed(() => {
       color: var(--o-color-info2);
       @include text2;
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         @include h3;
       }
 

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

@@ -26,9 +26,9 @@ const getList = () => {
 };
 
 const list = computed(() => getList());
-const checked = ref([]);
-const temp = ref([]);
-const selectorRef = ref(null);
+const checked = ref<number[]>([]);
+const temp = ref<number[]>([]);
+const selectorRef = ref<InstanceType<typeof ElSelect> | null>(null);
 
 const init = () => {
   checked.value = [...props.modelValue];
@@ -41,12 +41,16 @@ watchEffect(() => {
 
 const confirm = () => {
   emits('update:modelValue', temp.value);
-  selectorRef.value.expanded = false;
+  if (selectorRef.value) {
+    selectorRef.value.expanded = false;
+  }
 };
 
 const cancel = () => {
   init();
-  selectorRef.value.expanded = false;
+  if (selectorRef.value) {
+    selectorRef.value.expanded = false;
+  }
 };
 
 const clickItem = (val: number) => {
@@ -83,7 +87,7 @@ const removeTag = (val: number) => {
       size="large"
       multiple
       collapseTags
-      maxCollapseTags="3"
+      :maxCollapseTags="3"
       :modelValue="checked"
       @remove-tag="removeTag"
     >

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

@@ -30,7 +30,7 @@ const infoList = computed(() =>
 
 
 const activityInfoList = computed(() => {
-  const isLive = props.data.live_url?.length > 0;
+  const isLive = !!props.data.live_url?.length;
   return [
     { label: t('meeting.activityDetail2'), key: 'agenda', ellipsis: true },
     { label: t('meeting.startDate'), key: 'start_date_time' },
@@ -43,7 +43,7 @@ const activityInfoList = computed(() => {
   ].slice(0, props.from === 'home' ? 5 : 8);
 });
 const activityInfoApprovalList = computed(() => {
-  const isLive = props.data.live_url?.length > 0;
+  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' },
@@ -57,14 +57,28 @@ const activityInfoApprovalList = computed(() => {
   ];
 });
 
-const columns = computed(() => {
-  console.log(props.page);
+interface ColumnItemT {
+  label: string;
+  key: string;
+  ellipsis?: boolean;
+  isLink?: boolean;
+  isRecord?: boolean;
+  isType?: boolean;
+  extra?: string;
+}
+
+const getField = (key: string) => (props.data as Record<string, any>)[key];
+
+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;
 });
 
@@ -73,7 +87,7 @@ const domRef = ref([]);
 const copyInfo = () => {
   try {
     let text = `${ t('meeting.meetingTopic') + props.data.topic }\n`;
-    text += [...domRef.value].reduce((pre, cur) => `${ pre }${ cur.textContent }\n`, '');
+    text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => `${ pre }${ cur.textContent }\n`, '');
     navigator.clipboard.writeText(text);
     return Promise.resolve();
   } catch (e) {
@@ -91,36 +105,36 @@ defineExpose({ copyInfo });
       v-for="(info, infoIdx) in columns"
       :key="infoIdx"
       :class="{
-        'record-item': info.isRecord && data[info.key]?.length,
+        'record-item': info.isRecord && getField(info.key)?.length,
         'link-item': info.isLink,
-        'is-empty':!data[info.key]?.length,
+        'is-empty':!getField(info.key)?.length,
         [`label-item_${data.id}`]: true,
         [`type_${data.type}`]: true,
       }"
     >
-      <template v-if="data[info.key] && !info.isRecord">
+      <template v-if="getField(info.key) && !info.isRecord">
         <span class="label">{{ info.label }}</span>
-        <MoreText :show="show" v-if="info.ellipsis" :text="data[info.key] || '-'" />
+        <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="data[info.key]"
+          :href="getField(info.key)"
         >
-          {{ data[info.key] }}
+          {{ getField(info.key) }}
         </OLink>
-        <span v-else-if="info.key === 'platform'">{{ getPlatformLabel(data[info.key]) }}</span>
+        <span v-else-if="info.key === 'platform'">{{ getPlatformLabel(getField(info.key)) }}</span>
         <span v-else class="value">
-          <i v-if="info.extra" class="extra">{{ data[info.extra] }}</i>
-          {{ data[info.key] || '-' }}
+          <i v-if="info.extra" class="extra">{{ getField(info.extra) }}</i>
+          {{ getField(info.key) || '-' }}
         </span>
       </template>
-      <template v-if="info.isRecord && data[info.key]?.length">
+      <template v-if="info.isRecord && getField(info.key)?.length">
         <span class="label">{{ info.label }}</span>
         <div>
-          <p v-for="re in data[info.key]" :key="re.create_time" class="value">
+          <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') }}
@@ -142,7 +156,7 @@ defineExpose({ copyInfo });
     font-size: 14px;
     gap: var(--o-gap-5);
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       font-size: 12px;
       gap: var(--o-gap-2);
     }
@@ -219,7 +233,7 @@ defineExpose({ copyInfo });
     justify-content: flex-end;
     gap: var(--o-gap-2);
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       border-top: 1px solid var(--o-color-control4);
       padding-top: var(--o-gap-2);
       position: static;

package/src/components/meeting/components/OMeetingPlaybackSubtitles.vue

@@ -475,7 +475,7 @@ watch(
 
   .captions-tab {
     .captions-scroller {
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         max-height: 600px;
       }
     }

package/src/components/meeting/components/OMeetingPlaybackVideo.vue

@@ -26,7 +26,7 @@ const closeSpeakerMenu = () => {
   speakerMenuVisible.value = false;
 };
 
-const handleCue = (textTrack, init = false) => {
+const handleCue = (textTrack: any, init = false) => {
   const player = props.instance;
   if (!player) return;
   // 修改字幕
@@ -133,7 +133,7 @@ const videoInit = async () => {
         FullscreenToggle: true,
       },
     },
-  });
+  }) as unknown as any;
   emits('getInstance', player);
   // 加载视频
   player.src(props.src);
@@ -150,10 +150,10 @@ const videoInit = async () => {
 
   // 添加自定义控制字幕的按钮
   class CustomSubsCapsButton extends videojs.getComponent('Button') {
-    constructor(player, options) {
+    constructor(player: any, options: object) {
       super(player, options);
       this.addClass('vjs-subtitle-toggle-button', 'vjs-subtitle-hidden');
-      this.controlText('Toggle Subtitles');
+      (this as any).controlText('Toggle Subtitles');
     }
 
     buildCSSClass() {
@@ -161,7 +161,7 @@ const videoInit = async () => {
     }
 
     handleClick() {
-      const tracks = this.player().textTracks();
+      const tracks = this.player().textTracks() as unknown as any[];
       for (let i = 0; i < tracks.length; i++) {
         if (tracks[i].kind === 'subtitles') {
           handleCue(tracks[i], true);
@@ -181,14 +181,14 @@ const videoInit = async () => {
 
   if (props.vtt) {
     videojs.registerComponent('SubtitleToggleButton', CustomSubsCapsButton);
-    if (!player.controlBar.children_.some((v) => v.name_ === 'SubtitleToggleButton')) {
+    if (!player.controlBar.children_.some((v: any) => v.name_ === 'SubtitleToggleButton')) {
       player.controlBar.addChild('SubtitleToggleButton', {}, 8);
     }
   }
 
   // 动态修改字幕
   const textTracks = player?.textTracks().tracks_;
-  textTracks.forEach((textTrack) => {
+  textTracks.forEach((textTrack: any) => {
     textTrack?.addEventListener('cuechange', () => {
       handleCue(textTrack);
     });
@@ -652,12 +652,12 @@ defineExpose({
 
       .vjs-progress-holder {
         margin: 0;
-        background: rgba(var(--o-mixedgray-1), 0.3);
+        background: rgba(var(--o-grey-1), 0.3);
       }
 
       .vjs-load-progress {
         div {
-          background: rgba(var(--o-mixedgray-1), 0.5);
+          background: rgba(var(--o-grey-1), 0.5);
         }
       }
 
@@ -724,7 +724,7 @@ defineExpose({
     background-repeat: no-repeat;
     background-size: cover;
     border: 0.5px solid rgba(var(--o-white), 0.6);
-    background-color: rgba(var(--o-mixedgray-1), 0.2);
+    background-color: rgba(var(--o-grey-1), 0.2);
 
     .vjs-icon-placeholder::before {
       content: none;
@@ -733,8 +733,8 @@ defineExpose({
 
   @include hover {
     .vjs-big-play-button {
-      border: 0.5px solid rgba(var(--o-mixedgray-1), 0.6);
-      background-color: rgba(var(--o-mixedgray-1), 0.2);
+      border: 0.5px solid rgba(var(--o-grey-1), 0.6);
+      background-color: rgba(var(--o-grey-1), 0.2);
     }
   }
 }

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { OIcon, OIconArrowLeft, OIconArrowRight } from '@opensig/opendesign';
-import IconMeetinging from '~icons/meeting/icon-meet.svg';
 import { useMeetingConfig } from '@/components/meeting/composables/useMeetingConfig';
 import { CalendarDataType } from '@/components/meeting';
 
@@ -18,11 +17,11 @@ const props = defineProps<{
 const STEP = 1;
 
 const emits = defineEmits(['click-date', 'change-month']);
-const clickDate = (date) => {
+const clickDate = (date: string) => {
   emits('click-date', date);
 };
 
-const changeMonth = (step) => {
+const changeMonth = (step: number) => {
   if (props.current + step >= props.total || props.current + step < 0) return;
   emits('change-month', step);
 };
@@ -85,17 +84,17 @@ const changeMonth = (step) => {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--o-color-control4);
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     padding: var(--o-gap-4);
     border-right: none;
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     padding: 16px;
     .title {
       margin-bottom: var(--o-gap-2);
     }
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     width: 100%;
   }
 
@@ -113,7 +112,7 @@ const changeMonth = (step) => {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         display: flex;
       }
 
@@ -186,11 +185,11 @@ const changeMonth = (step) => {
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     .day-item {
     }
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     .day-item {
       width: min(128px, calc((100% - var(--o-gap-2)) / 2));
     }