@opendesign-plus/components 0.0.1-rc.24 → 0.0.1-rc.26

package/src/components/meeting/OMeetingForm.vue

@@ -45,7 +45,7 @@ const intervalTypeMax = computed(() => {
   return findLabelFromOptions(form.value.cycle_type, cycleTypeOptions.value, 'max');
 });
 const initForm: MeetingPostT = {
-  is_record: false,
+  is_record: true,
   agenda: '',
   email_list: '',
   platform: 'WELINK',
@@ -265,15 +265,48 @@ const getPlatformOptions = async () => {
 };
 
 const emits = defineEmits(['confirm', 'cancel']);
+
+const getPropData = () => {
+  if (!props.data) {
+    return {};
+  }
+  const {
+    start,
+    end,
+    is_cycle,
+    cycle_start_date,
+    cycle_end_date,
+    cycle_point,
+    cycle_interval,
+    cycle_start,
+    cycle_end,
+  } = props.data;
+  return {
+    ...props.data,
+    time: `${ start }-${ end }`,
+    ...(is_cycle
+      ? {
+        date_range: [cycle_start_date, cycle_end_date],
+        cycle_point: cycle_point?.map((v) => parseInt(v)) || [],
+        cycle_interval: cycle_interval || 1,
+        time: `${ cycle_start }-${ cycle_end }`,
+        start: cycle_start,
+        end: cycle_end,
+      }
+      : {}),
+  };
+};
+
 watch(
   () => props.data,
   (data) => {
     if (data) {
-      const sub = data?.cycle_sub?.find((v) => v.sub_id === props.subId) || {} as unknown as CycleSubItemT;
+      const propData = getPropData() as unknown as CycleSubItemT;
+      const sub = propData?.cycle_sub?.find((v) => v.sub_id === (props.subId || propData.sub_id)) || {} as unknown as CycleSubItemT;
       const { mid, date, start, end, sub_id } = sub;
       Object.assign(
         form.value,
-        data,
+        propData,
         props.isSub
           ? {
             is_cycle: false,
@@ -373,6 +406,7 @@ const confirm = async () => {
       platform,
       is_cycle,
     } as MeetingPostT as unknown as any;
+    let flag = undefined;
     if (is_cycle) {
       params = {
         ...params,
@@ -401,7 +435,7 @@ const confirm = async () => {
       if (props.isSub) {
         const { mid, sub_id } = form.value;
         const { date, start, end } = params;
-        await props?.editSubMeetingRequest(sub_id, {
+        flag = await props?.editSubMeetingRequest(sub_id, {
           mid,
           date,
           start,
@@ -416,17 +450,21 @@ const confirm = async () => {
           etherpad: _etherpad,
           ...data
         } = params;
-        await props?.editMeetingRequest(props.data?.id as unknown as number, {
+        flag = await props?.editMeetingRequest(props.data?.id as unknown as number, {
           ...data,
           is_notify: true,
         });
       }
     } else {
-      await props?.createMeetingRequest({
+      flag = await props?.createMeetingRequest({
         ...params,
         email_list: form.value.email_list.replaceAll(' ', ''),
       });
     }
+    // 如果返回的是boolean，只有true表示回调成功
+    if (typeof flag === 'boolean' && !flag) {
+      return;
+    }
     const msg = t('meeting.meetingHandleSuccess', [form.value.topic, type]);
     message.success({
       content: msg,
@@ -651,7 +689,11 @@ defineExpose({
               <OIcon>
                 <IconTip />
               </OIcon>
-              <span>{{ t('meeting.meetingRecordDesc', [getPlatformLabel(form.platform)]) }}</span>
+              <div>
+                <span>{{ t('meeting.meetingRecordDesc1') }}</span>
+                <br>
+                <span>{{ t('meeting.meetingRecordDesc2') }}</span>
+              </div>
             </div>
           </div>
         </template>
@@ -663,7 +705,11 @@ defineExpose({
             <OIcon>
               <IconTip />
             </OIcon>
-            <span>{{ t('meeting.meetingRecordDesc', [getPlatformLabel(form.platform)]) }}</span>
+            <div>
+              <span>{{ t('meeting.meetingRecordDesc1') }}</span>
+              <br>
+              <span>{{ t('meeting.meetingRecordDesc2') }}</span>
+            </div>
           </div>
         </div>
       </template>
@@ -695,7 +741,7 @@ defineExpose({
     </OForm>
     <div class="form-btns" v-if="showBtns">
       <OButton color="primary" variant="solid" size="large" @click="confirm" :loading="loading">
-        {{ isEdit ? t('common.save') : (bookText || t('meeting.book')) }}
+        {{ isEdit ? t('common.save') : (confirmText || t('meeting.book')) }}
       </OButton>
       <OButton color="primary" variant="outline" size="large" @click="cancel">{{ t('common.cancel') }}</OButton>
     </div>

package/src/components/meeting/OMeetingMyCalendar.vue

@@ -22,7 +22,6 @@ import { computed, nextTick, onMounted, ref, onUnmounted, watch } from 'vue';
 import OMeetingDetail from './components/OMeetingDetail.vue';
 import { CalendarDataType, MeetingGroupType, MeetingItemT, PageParamsT } from './types.ts';
 import dayjs from 'dayjs';
-import IconMeeting from '~icons/meeting/icon-meet.svg';
 import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from './config.ts';
 import { formatDate, getDateNumber } from './utils.ts';
 import { useMeetingConfig } from './composables/useMeetingConfig';
@@ -279,7 +278,10 @@ const confirmCancel = async () => {
   }
   try {
     dialogLoading.value = true;
-    await props.deleteMeetingRequest(currentRow.value.id);
+    const flag = await props.deleteMeetingRequest(currentRow.value.id);
+    if (typeof flag === 'boolean' && !flag) {
+      return;
+    }
     cancelVisible.value = false;
     message.success({
       content: `${ t('meeting.meetingCancel', [currentRow.value.topic]) }`,
@@ -331,24 +333,25 @@ const confirmHandleItem = async () => {
   }
   if (handleDialogType.value === 'cancel') {
     try {
+      let flag = undefined;
       dialogLoading.value = true;
       if (handleType.value === 'single' && row.is_cycle) {
         if (!props.cancelSubMeetingRequest) {
           return;
         }
-        await props.cancelSubMeetingRequest(row.sub_id);
-        message.success({
-          content: `${ t('meeting.meetingCancel', [row.topic]) }`,
-        });
+        flag = await props.cancelSubMeetingRequest(row.sub_id);
       } else {
         if (!props.deleteMeetingRequest) {
           return;
         }
-        await props.deleteMeetingRequest(row.id);
-        message.success({
-          content: `${ t('meeting.meetingCancel', [row.topic]) }`,
-        });
+        flag = await props.deleteMeetingRequest(row.id);
+      }
+      if (typeof flag === 'boolean' && !flag) {
+        return;
       }
+      message.success({
+        content: `${ t('meeting.meetingCancel', [row.topic]) }`,
+      });
       cancelHandleItem();
       reloadAll.value = true;
       getList();
@@ -968,14 +971,13 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
             .date-cell {
               height: 56px;
-              width: 42px;
-              padding: var(--o-gap-1);
+              width: 34px;
               position: relative;
               cursor: default !important;
 
               .date-cell-text {
                 font-size: 14px;
-                line-height: 36px;
+                line-height: 34px;
                 border-radius: var(--meeting-cell-radius);
                 background-color: var(--o-color-control2-light);
                 border: 1px solid transparent;
@@ -1000,7 +1002,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               &::after {
                 content: '';
                 position: absolute;
-                bottom: 2px;
+                bottom: 5px;
                 left: 50%;
                 transform: translateX(-50%);
                 width: 8px;
@@ -1057,6 +1059,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         display: flex;
         align-items: center;
         justify-content: center;
+        min-height: 600px;
       }
 
 

package/src/components/meeting/OMeetingPlayback.vue

@@ -200,7 +200,7 @@ onUnmounted(() => {
         />
       </div>
       <div class="info-wrapper">
-        <OTab v-model="tab">
+        <OTab v-model="tab" :max-show="9999">
           <OTabPane v-for="t in tabOptions" :key="t.value" :value="t.value" :label="t.label" />
         </OTab>
         <OScroller :class="['tab-content', `tab-content-${tab}`]" show-type="hover">
@@ -261,7 +261,12 @@ onUnmounted(() => {
       <OMeetingPlaybackSubtitles
         :captions="captionsList"
         :trackIdx="trackIdx"
-        :instance="playbackInstance" />
+        :instance="playbackInstance"
+      >
+        <template #empty>
+          <slot name="empty"></slot>
+        </template>
+      </OMeetingPlaybackSubtitles>
     </div>
   </div>
 </template>
@@ -319,8 +324,9 @@ onUnmounted(() => {
 
       .o-tab {
         --tab-nav-justify: flex-start;
-        .o-tab-navs {
-          justify-content: flex-start;
+
+        .o-tab-nav-list {
+          width: 100%;
         }
 
         .o-tab-nav {

package/src/components/meeting/OMeetingSigCalendar.vue

@@ -254,7 +254,7 @@ onMounted(() => {
           </div>
         </OPopover>
       </div>
-      <OTab v-model="tabType" @change="selectTab" :line="false">
+      <OTab v-model="tabType" @change="selectTab" :line="false" :max-show="9999">
         <OTabPane v-for="item in meetingTabs.slice(0, -1)" :key="item.value" :value="item.value">
           <template #nav>
             <OIcon>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { OCollapse, OCollapseItem, ODivider, OIcon, OLink, OTag, useMessage } from '@opensig/opendesign';
+import { isClient, OCollapse, OCollapseItem, ODivider, OIcon, OLink, OTag, useMessage } from '@opensig/opendesign';
 import OMeetingDetail from './OMeetingDetail.vue';
 import { computed, nextTick, ref, watch } from 'vue';
 import IconCopy from '~icons/meeting/icon-copy.svg';
@@ -44,29 +44,36 @@ const i18n = computed(() => {
 
 // -------------------- 监听尺寸变化 --------------------
 const meetInfoRef = ref<HTMLDivElement[]>();
-const resizeObserver = new ResizeObserver((entries) => {
-  for (let entry of entries) {
-    const { height } = entry.contentRect;
-    entry.target.classList.remove('hidden-divider');
-    if (height >= 30) {
-      entry.target.classList.add('hidden-divider');
-    }
-  }
-});
 
+let resizeObserver: ResizeObserver | null = null;
 watch(
-  () => props.list,
+  [() => props.list, () => isClient],
   () => {
     if (props.list.length === 1) {
       collapseNames.value = [props.list[0].id];
     } else {
       collapseNames.value = [];
     }
-    nextTick(() => {
-      meetInfoRef.value?.forEach((targetDiv) => {
-        resizeObserver.observe(targetDiv);
+    if (isClient) {
+      nextTick(() => {
+        if (!resizeObserver) {
+          resizeObserver = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+              const { height } = entry.contentRect;
+              entry.target.classList.remove('hidden-divider');
+              if (height >= 30) {
+                entry.target.classList.add('hidden-divider');
+              }
+            }
+          });
+        } else {
+          resizeObserver.disconnect();
+        }
+        meetInfoRef.value?.forEach((targetDiv) => {
+          resizeObserver!.observe(targetDiv);
+        });
       });
-    });
+    }
   },
 );
 
@@ -187,7 +194,13 @@ const computedList = computed<any[]>(() => {
                 <template v-if="item.activity_type">{{ item.activity_type }}</template>
               </div>
             </div>
-            <OLink v-if="item.url" :href="item.url" target="_blank" class="jump-detail-link">
+            <OLink
+              :hover-underline="false"
+              v-if="item.url"
+              :href="item.url"
+              target="_blank"
+              class="jump-detail-link"
+            >
               <span>{{ i18n.LEARN_MORE }}</span>
               <template #suffix>
                 <OIcon>
@@ -195,7 +208,13 @@ const computedList = computed<any[]>(() => {
                 </OIcon>
               </template>
             </OLink>
-            <OLink v-if="item.join_url" :href="item.join_url" target="_blank" class="jump-detail-link">
+            <OLink
+              :hover-underline="false"
+              v-if="item.join_url"
+              :href="item.join_url"
+              target="_blank"
+              class="jump-detail-link"
+            >
               <span>{{ i18n.JOIN_MEETING }}</span>
               <template #suffix>
                 <OIcon>
@@ -203,7 +222,13 @@ const computedList = computed<any[]>(() => {
                 </OIcon>
               </template>
             </OLink>
-            <OLink v-if="item.content_url" :href="item.content_url" target="_blank" class="jump-detail-link">
+            <OLink
+              :hover-underline="false"
+              v-if="item.content_url"
+              :href="item.content_url"
+              target="_blank"
+              class="jump-detail-link"
+            >
               <span>{{ i18n.DETAILS }}</span>
               <template #suffix>
                 <OIcon>
@@ -211,7 +236,13 @@ const computedList = computed<any[]>(() => {
                 </OIcon>
               </template>
             </OLink>
-            <OLink v-if="item.register_url" :href="item.register_url" target="_blank" class="jump-detail-link">
+            <OLink
+              :hover-underline="false"
+              v-if="item.register_url"
+              :href="item.register_url"
+              target="_blank"
+              class="jump-detail-link"
+            >
               <span>{{ i18n.SIGN }}</span>
               <template #suffix>
                 <OIcon>
@@ -226,7 +257,8 @@ const computedList = computed<any[]>(() => {
         </template>
         <div class="calendar-info">
           <OMeetingDetail
-            :show="collapseNames.includes(item.id)" :data="item"
+            :show="collapseNames.includes(item.id)"
+            :data="item"
             :ref="(insRef) => (detailRefs[index] = insRef)"
             from="home"
           />
@@ -241,6 +273,7 @@ const computedList = computed<any[]>(() => {
 
 
   &.is-empty {
+    min-height: 400px;
     height: 100%;
     display: flex;
     align-items: center;
@@ -264,6 +297,7 @@ const computedList = computed<any[]>(() => {
     .o-collapse-item {
       position: relative;
       border-top: none;
+      border-bottom: none;
 
       &::after {
         position: absolute;
@@ -353,6 +387,7 @@ const computedList = computed<any[]>(() => {
           display: inline-flex;
           opacity: 0;
           visibility: hidden;
+          color: var(--o-color-info1);
 
           &:hover {
             color: var(--o-color-primary1);
@@ -420,6 +455,7 @@ const computedList = computed<any[]>(() => {
       padding-left: calc(var(--icon-right) + var(--icon-size2));
       margin-top: var(--o-gap-2);
       color: var(--o-color-info2);
+      font-weight: 400;
       @include tip1;
 
       &:hover {
@@ -442,7 +478,7 @@ const computedList = computed<any[]>(() => {
     .meet-title {
       display: flex;
       align-items: center;
-      width: calc(100% - 48px);
+      width: 100%;
       color: var(--o-color-info2);
       @include text2;
 

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

@@ -79,10 +79,10 @@ const removeTag = (val: number) => {
 </script>
 
 <template>
-  <div class="calendar-selector" :class="!multiple && 'is-single'">
+  <div class="o-meeting-calendar-selector" :class="!multiple && 'is-single'">
     <ElSelect
       ref="selectorRef"
-      popper-class="calendar-selector-popper"
+      popper-class="o-meeting-calendar-selector-popper"
       :placeholder="t('meeting.selectRepeatDate')"
       size="large"
       multiple
@@ -106,11 +106,11 @@ const removeTag = (val: number) => {
   </div>
 </template>
 
-<style scoped lang="scss">
-.calendar-selector {
+<style lang="scss">
+.o-meeting-calendar-selector {
   width: 100%;
 
-  :deep(.el-select) {
+  .el-select {
     .el-select__placeholder {
       @include text1;
     }
@@ -134,7 +134,7 @@ const removeTag = (val: number) => {
   }
 
   &.is-single {
-    :deep(.el-select) {
+    .el-select {
       .el-select__selection {
         margin-left: 0;
       }
@@ -154,8 +154,11 @@ const removeTag = (val: number) => {
 }
 </style>
 <style lang="scss">
-.calendar-selector-popper {
-  padding: 0 24px;
+.o-meeting-calendar-selector-popper {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
+  padding: 0 var(--o-gap-5);
 
   .el-select-dropdown__list {
     padding: 16px 0;

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

@@ -146,7 +146,7 @@ defineExpose({ copyInfo });
 
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 .o-meeting-detail {
   position: relative;
   .label-item {

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

@@ -329,7 +329,7 @@ watch(
         </ElSelect>
       </div>
     </div>
-    <OTab v-model="activeTab" variant="text" class="captions-tab" @change="changeTab">
+    <OTab v-model="activeTab" variant="text" class="captions-tab" @change="changeTab" :max-show="9999">
       <OTabPane :value="0" :label="t('meeting.audioToText')">
         <OScroller v-if="computedCaptions.length" id="captionsScrollDom" class="captions-scroller" show-type="hover"
                    size="small" disabled-x>
@@ -350,8 +350,9 @@ watch(
             </OCol>
           </ORow>
         </OScroller>
-        <div v-else>111</div>
-        <!--        <AppEmpty v-else height="100%" />-->
+        <div v-else>
+          <slot name="empty"></slot>
+        </div>
       </OTabPane>
     </OTab>
   </div>
@@ -445,8 +446,10 @@ watch(
     height: calc(100% - 64px);
     --tab-nav-justify: flex-start;
 
+    .o-tab-nav-list {
+      width: 100%;
+    }
     .o-tab-navs {
-      justify-content: flex-start;
 
       .o-tab-nav {
         padding-bottom: var(--o-gap-4);

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

@@ -49,16 +49,16 @@ export const useMeetingConfig = () => {
     return list;
   });
 
-  const getPointStr = (cycleType: number, points: number[]) => {
+  const getPointStr = (cycleType: number, points: (number | string)[]) => {
     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);
+          const aIdx = intervalWeekOptions.value.findIndex((v) => v.value === a || v.value.toString() === a);
+          const bIdx = intervalWeekOptions.value.findIndex((v) => v.value === b || v.value.toString() === b);
           return aIdx - bIdx;
         })
-        .map((point: number) => {
-          const opt = intervalWeekOptions.value.find((v) => v.value === point);
+        .map((point: number | string) => {
+          const opt = intervalWeekOptions.value.find((v) => v.value === point || v.value.toString() === point);
           return opt?.label || String(point);
         })
         .join(t('meeting.cycleSplit'));

package/src/components/meeting/index.ts

@@ -24,11 +24,11 @@ const OMeetingPlayback = Object.assign(_OMeetingPlayback, {
 
 const OMeetingSigCalendar = Object.assign(_OMeetingSigCalendar, {
   install(app: App) {
-    app.component('OMeetingSigCalendar', _OMeetingMyCalendar);
+    app.component('OMeetingSigCalendar', _OMeetingSigCalendar);
   },
 });
 
-const OMeetingMyCalendar = Object.assign(_OMeetingSigCalendar, {
+const OMeetingMyCalendar = Object.assign(_OMeetingMyCalendar, {
   install(app: App) {
     app.component('OMeetingMyCalendar', _OMeetingMyCalendar);
   },

package/src/components/meeting/types.ts

@@ -98,7 +98,7 @@ export interface MeetingFormPropsT {
   getGroupsRequest: any;
   showBtns?: boolean;
   groupType: MeetingGroupType;
-  bookText?: string
+  confirmText?: string
 }
 
 export interface ObsDataItemT {