@opendesign-plus-test/components 0.0.1-rc.51 → 0.0.1-rc.53

package/src/components/meeting/{OMyMeetingCalendar.vue → OMeetingMyCalendar.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  DialogActionT,
+  DialogActionT, OButton,
   OCollapse,
   OCollapseItem,
   ODialog,
@@ -20,9 +20,8 @@ import {
 import { ElCalendar } from 'element-plus';
 import { computed, nextTick, onMounted, ref, onUnmounted, watch } from 'vue';
 import OMeetingDetail from './components/OMeetingDetail.vue';
-import { MeetingGroupType, MeetingItemT, PageParamsT } from './types.ts';
+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';
@@ -40,7 +39,7 @@ const list = ref<MeetingItemT[]>([]); // 列表数据
 const originList = ref<MeetingItemT[]>([]); // 原始数据
 const canLoadMore = computed(() => total.value === null || originList.value.length < total.value);
 const reloadAll = ref(false); // 是否需要清空数据
-const { t, locale, getPointStr, getWeekFromDate } = useMeetingConfig();
+const { t, locale, getPointStr, getConfig, getWeekFromDate } = useMeetingConfig();
 const isEn = computed(() => locale.value === Locales.EN);
 
 const props = withDefaults(defineProps<{
@@ -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();
@@ -578,6 +581,9 @@ const cancelActions = computed<DialogActionT[]>(() => {
                 expired: dayjs(formatDate()).isAfter(dayjs(data.day)),
                 'all-deleted': calcIfAllDeleted(data.day),
               }"
+              :style="{
+                '--dot-bg': `${getConfig(CalendarDataType.MEETING, 'color')}`
+              }"
             >
               <div class="date-cell-text">
                 {{ Number(data.day.split('-')[2]) }}
@@ -634,9 +640,14 @@ const cancelActions = computed<DialogActionT[]>(() => {
                   >
                     <template #title>
                       <div class="item-header-left">
-                        <div class="meeting-icon">
+                        <div
+                          class="meeting-icon"
+                          :style="{
+                            backgroundColor: `${getConfig(CalendarDataType.MEETING, 'color')}`
+                          }"
+                        >
                           <OIcon>
-                            <IconMeeting />
+                            <component :is="getConfig(CalendarDataType.MEETING, 'icon')" />
                           </OIcon>
                         </div>
                         <div class="header-info">
@@ -667,6 +678,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                       </div>
                       <div class="item-header-right" v-if="!row.is_delete">
                         <OLink
+                          :hover-underline="false"
                           v-if="!row.isExpired"
                           target="_blank"
                           :href="row.join_url"
@@ -680,7 +692,12 @@ const cancelActions = computed<DialogActionT[]>(() => {
                           </template>
                         </OLink>
                         <template v-else>
-                          <OLink target="_blank" v-if="row.etherpad" :href="row.etherpad">
+                          <OLink
+                            :hover-underline="false"
+                            target="_blank"
+                            v-if="row.etherpad"
+                            :href="row.etherpad"
+                          >
                             {{ t('meeting.meetingSummary') }}
                             <template #suffix>
                               <OIcon>
@@ -689,6 +706,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                             </template>
                           </OLink>
                           <OLink
+                            :hover-underline="false"
                             target="_blank"
                             :href="`/${locale}/video/${row.group_name}/${row.mid}/${row.date}`"
                             v-if="row.hasObsData">
@@ -713,10 +731,12 @@ const cancelActions = computed<DialogActionT[]>(() => {
                         from="my"
                       />
                       <div class="meeting-btn" v-if="!row.isExpired && !row.is_delete">
-                        <OLink @click="handleItem(row, 'edit')">{{ t('meeting.editMeeting') }}
-                        </OLink>
-                        <OLink @click="handleItem(row, 'cancel')">{{ t('meeting.cancelMeeting') }}
-                        </OLink>
+                        <OButton color="normal" variant="text" @click="handleItem(row, 'edit')">
+                          {{ t('meeting.editMeeting') }}
+                        </OButton>
+                        <OButton color="normal" variant="text" @click="handleItem(row, 'cancel')">
+                          {{ t('meeting.cancelMeeting') }}
+                        </OButton>
                       </div>
                     </div>
                   </OCollapseItem>
@@ -745,7 +765,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       >
         <template #header>
           {{
-            t('meeting.meetingHandleText', [handleDialogType === 'edit' ? t('meeting.edit') : t('meeting.cancel2')])
+            t('meeting.meetingHandleText', [handleDialogType === 'edit' ? t('meeting.edit') : t('meeting.cancel')])
           }}
         </template>
         <ORadioGroup v-model="handleType">
@@ -762,6 +782,9 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .o-my-meeting-calendar {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
 
   .header {
     display: flex;
@@ -877,7 +900,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       .el-calendar {
         min-height: 460px;
         height: calc(100% - 54px);
-        border-radius: var(--o-radius-xs);
+        border-radius: var(--meeting-card-radius);
         background-color: transparent;
 
         .el-calendar__header {
@@ -911,6 +934,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
         .el-calendar__body {
           .el-calendar-table {
+            display: table;
 
             th {
               text-align: center;
@@ -947,16 +971,16 @@ 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;
-                border-radius: var(--o-radius-xs);
+                line-height: 34px;
+                border-radius: var(--meeting-cell-radius);
                 background-color: var(--o-color-control2-light);
+                border: 1px solid transparent;
               }
 
               .date-cell-text {
@@ -978,7 +1002,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               &::after {
                 content: '';
                 position: absolute;
-                bottom: 2px;
+                bottom: 5px;
                 left: 50%;
                 transform: translateX(-50%);
                 width: 8px;
@@ -995,14 +1019,14 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
               &.is-selected {
                 .date-cell-text {
-                  color: #fff;
-                  background-color: var(--o-color-primary1);
+                  background-color: var(--o-color-control3-light);
+                  border: 1px solid var(--o-color-primary1);
                 }
               }
 
               &.clickable {
                 &::after {
-                  background-color: var(--o-color-primary1);
+                  background-color: var(--dot-bg);
                 }
 
                 &.expired::after {
@@ -1035,6 +1059,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         display: flex;
         align-items: center;
         justify-content: center;
+        min-height: 600px;
       }
 
 
@@ -1207,31 +1232,20 @@ const cancelActions = computed<DialogActionT[]>(() => {
         display: flex;
         flex-direction: column;
 
-        .o-collapse-item {
-          &.last-item {
-            .o-collapse-item-header {
-              border-bottom: none;
-            }
-          }
-        }
-
         .o-collapse-item-expanded + .o-collapse-item-expanded {
           margin-top: var(--o-gap-4);
         }
 
         .height-placeholder {
-          height: 0;
-          transition: margin var(--o-easing-standard) var(--o-duration-s);
-        }
-
-        .o-collapse-item-expanded + .height-placeholder {
           height: var(--o-gap-4);
         }
 
+
         .o-collapse-item {
           padding: var(--o-gap-4) var(--o-gap-5);
+          padding-bottom: calc(var(--o-gap-5) - var(--o-gap-4));
           border-top: none;
-          border-radius: var(--o-radius-xs);
+          border-radius: var(--meeting-card-radius);
           transition: margin var(--o-easing-standard) var(--o-duration-s);
           --copy-display: none;
           --icon-size: 24px;
@@ -1239,30 +1253,42 @@ const cancelActions = computed<DialogActionT[]>(() => {
             padding: var(--o-gap-3) var(--o-gap-4);
           }
 
+          @include respond('phone') {
+            --icon-size: 20px;
+          }
+
           &:hover {
+            .title-text {
+              color: var(--o-color-primary1);
+            }
             @include respond('>pad_v') {
               --copy-display: inline-flex;
             }
           }
 
-          @include respond('phone') {
-            --icon-size: 20px;
+          &.last-item {
+            .o-collapse-item-header {
+              border-bottom: none;
+            }
           }
           &.o-collapse-item-expanded {
+            border-bottom: none;
+            background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
+
             @include respond('<=pad_v') {
               --copy-display: inline-flex;
             }
-          }
 
-          &.o-collapse-item-expanded {
-            background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
+            .o-collapse-item-header {
+              border-bottom: 1px solid var(--o-color-control4);
+            }
           }
         }
 
         .o-collapse-item-header {
-          border-bottom: 1px solid var(--o-color-control4);
+          border-bottom: none;
           padding-top: 0;
-          padding-bottom: var(--o-gap-2);
+          padding-bottom: var(--o-gap-4);
           display: flex;
           align-items: center;
           gap: var(--o-gap-4);
@@ -1334,7 +1360,11 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
                   &.is-delete,
                   &.is-end {
-                    color: var(--o-color-info3);
+                    color: var(--o-color-info4);
+
+                    .title-text {
+                      color: var(--o-color-info4) !important;
+                    }
                   }
 
                   .tag-wrapper {
@@ -1380,10 +1410,12 @@ const cancelActions = computed<DialogActionT[]>(() => {
               padding-left: calc(var(--o-gap-3) + var(--icon-size));
               gap: var(--o-gap-4);
               width: 100%;
+              font-weight: 400;
 
               .o-link {
                 font-size: 14px;
                 line-height: 21px;
+                --link-color: var(--o-color-info2);
               }
               .o-icon {
                 font-size: 16px;
@@ -1399,6 +1431,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               height: 18px;
               width: 18px;
               display: var(--copy-display);
+              color: var(--o-color-info1);
               @include respond('phone') {
                 bottom: var(--o-gap-2);
                 right: calc(20px + var(--o-gap-2))
@@ -1431,10 +1464,15 @@ const cancelActions = computed<DialogActionT[]>(() => {
               border-top: 1px solid var(--o-color-control4);
               margin-top: var(--o-gap-5);
               padding-top: var(--o-gap-4);
+              padding-bottom: var(--o-gap-4);
               display: flex;
               align-items: center;
               justify-content: flex-end;
               gap: var(--o-gap-5);
+
+              .o-link {
+                --link-color: inherit;
+              }
             }
           }
         }

package/src/components/meeting/OMeetingPlayback.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 import { speakerNum, transformSeconds, transformTime } from './utils';
-import { OOption, OSelect, OTab, OTabPane, type SelectValueT } from '@opensig/opendesign';
+import { OOption, OScroller, OSelect, OTab, OTabPane, type SelectValueT } from '@opensig/opendesign';
 import OMeetingPlaybackSubtitles from './components/OMeetingPlaybackSubtitles.vue';
 import OMeetingPlaybackVideo from './components/OMeetingPlaybackVideo.vue';
 import { useI18n } from '@/i18n';
@@ -200,10 +200,10 @@ 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>
-        <div class="tab-content">
+        <OScroller :class="['tab-content', `tab-content-${tab}`]" show-type="hover">
           <div class="base-info" v-if="tab === tabOptions[0].value">
             <div class="info-item">
               <span>{{ t('meeting.item1') }}</span>
@@ -252,7 +252,7 @@ onUnmounted(() => {
               </div>
             </div>
           </div>
-        </div>
+        </OScroller>
       </div>
     </div>
     <div class="right-card card-wrapper" :style="{
@@ -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>
@@ -271,15 +276,22 @@ onUnmounted(() => {
   display: flex;
   gap: var(--grid-column-gutter);
   align-items: flex-start;
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
 
   @include respond('<=pad_v') {
     flex-wrap: wrap;
   }
 
   .card-wrapper {
-    border-radius: var(--o-radius-xs);
+    border-radius: var(--meeting-card-radius);
     background-color: var(--o-color-fill2);
     padding: var(--o-gap-5);
+
+    &.left-card {
+      padding-bottom: 0;
+    }
   }
 
   .left-card {
@@ -311,8 +323,10 @@ onUnmounted(() => {
       margin-top: var(--o-gap-5);
 
       .o-tab {
-        .o-tab-navs {
-          justify-content: flex-start;
+        --tab-nav-justify: flex-start;
+
+        .o-tab-nav-list {
+          width: 100%;
         }
 
         .o-tab-nav {
@@ -325,9 +339,23 @@ onUnmounted(() => {
 
       .tab-content {
         padding-top: var(--o-gap-4);
+        height: 280px;
+        padding-bottom: 0;
+        position: relative;
+
+        &::after {
+          height: 24px;
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: linear-gradient(180deg, rgba(var(--o-grey-1), 0), rgba(var(--o-grey-1), 1) 100%);
+        }
 
         .base-info {
-          @include tip1;
+          padding-bottom: var(--o-gap-5);
+          @include text1;
 
           .info-item {
             display: flex;
@@ -340,6 +368,7 @@ onUnmounted(() => {
             span:first-child {
               width: 6em;
               flex-shrink: 0;
+              color: var(--o-color-info3);
             }
 
             span:last-child {
@@ -355,6 +384,7 @@ onUnmounted(() => {
         .subject-list {
           counter-reset: itemIndex;
           position: relative;
+          padding-bottom: var(--o-gap-5);
 
           .mouse-current-time {
             position: absolute;
@@ -362,7 +392,7 @@ onUnmounted(() => {
             padding: var(--o-gap-1);
             box-shadow: var(--o-shadow-1);
             z-index: 10;
-            border-radius: var(--o-radius-xs);
+            border-radius: var(--meeting-cell-radius);
             transform: translateY(calc(0px - 100% - 4px));
             color: var(--o-color-info2);
             @include tip1;
@@ -402,7 +432,7 @@ onUnmounted(() => {
               right: 0;
               height: 4px;
               border-radius: 2px;
-              background-color: var(--o-color-fill1);
+              background-color: var(--o-color-fill3);
             }
 
             .subject-progress {
@@ -417,7 +447,7 @@ onUnmounted(() => {
                 position: absolute;
                 top: 0;
                 bottom: 0;
-                border-radius: var(--o-radius-xs);
+                border-radius: var(--meeting-cell-radius);
                 left: calc(var(--start) * 100%);
                 right: calc((1 - var(--end)) * 100%);
                 z-index: 9;

package/src/components/meeting/{OSigMeetingCalendar.vue → OMeetingSigCalendar.vue}

@@ -3,7 +3,7 @@ import { ref, onMounted, computed, nextTick, watch } from 'vue';
 import { ODivider, OPopover, OIcon, OTabPane, OTab, OScroller } from '@opensig/opendesign';
 import dayjs from 'dayjs';
 import IconTips from '~icons/components/icon-tips.svg';
-import OSigMeetingAside from './components/OSigMeetingAside.vue';
+import OMeetingSigAside from './components/OMeetingSigAside.vue';
 import { CalendarDataType, MeetingEventsItemT, MeetingItemT } from './types.ts';
 import { useScreen } from '@opendesign-plus/composables';
 import { useMeetingConfig } from './composables/useMeetingConfig';
@@ -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>
@@ -281,7 +281,7 @@ onMounted(() => {
     <ODivider class="meeting-divider" v-if="!lePadV || (lePadV && dateList.length)" />
     <div class="meeting-card-content">
       <template v-if="!lePadV && monthIdx !== -1">
-        <OSigMeetingAside
+        <OMeetingSigAside
           :data="dateMapList.slice(monthIdx, monthIdx + 1)"
           :meetingDates="tabType !== CalendarDataType.EVENTS ? meetingDates :[] "
           :eventsDates="tabType !== CalendarDataType.MEETING ? eventsDates : []"
@@ -308,9 +308,12 @@ onMounted(() => {
 
 <style lang="scss">
 .o-sig-meeting-calendar {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
   width: 100%;
   background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
+  border-radius: var(--meeting-card-radius);
   margin-top: var(--o-gap-5);
   @include respond('phone') {
     .meeting-card-header {