@opendesign-plus/components 0.0.1-rc.21 → 0.0.1-rc.23

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  DialogActionT,
+  DialogActionT, OButton,
   OCollapse,
   OCollapseItem,
   ODialog,
@@ -20,7 +20,7 @@ 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';
@@ -40,7 +40,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<{
@@ -578,6 +578,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 +637,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 +675,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 +689,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 +703,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 +728,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 +762,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 +779,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;
@@ -787,11 +807,11 @@ const cancelActions = computed<DialogActionT[]>(() => {
     gap: var(--o-gap-4);
     height: 100%;
     --phone-padding-top: 0;
-    @include respond-to('pad_v') {
+    @include respond('pad_v') {
       flex-direction: column;
       gap: var(--o-gap-4);
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       flex-direction: column;
       gap: var(--o-gap-3);
       --phone-padding-top: calc(var(--o-gap-5) + var(--o-gap-3) + var(--o-gap-3));
@@ -831,7 +851,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         }
       }
 
-      @include respond-to('phone') {
+      @include respond('phone') {
         padding-top: var(--o-gap-7);
         background-color: var(--o-color-fill1);
         padding-bottom: var(--o-gap-4);
@@ -850,7 +870,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       width: 334px;
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         .el-calendar {
           .el-calendar__body {
             padding-left: 12px;
@@ -868,16 +888,16 @@ const cancelActions = computed<DialogActionT[]>(() => {
           }
         }
       }
-      @include respond-to('pad_v') {
+      @include respond('pad_v') {
         width: 100%;
       }
-      @include respond-to('phone') {
+      @include respond('phone') {
         display: none;
       }
       .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 +931,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
         .el-calendar__body {
           .el-calendar-table {
+            display: table;
 
             th {
               text-align: center;
@@ -955,8 +976,9 @@ const cancelActions = computed<DialogActionT[]>(() => {
               .date-cell-text {
                 font-size: 14px;
                 line-height: 36px;
-                border-radius: var(--o-radius-xs);
+                border-radius: var(--meeting-cell-radius);
                 background-color: var(--o-color-control2-light);
+                border: 1px solid transparent;
               }
 
               .date-cell-text {
@@ -995,22 +1017,22 @@ 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 {
-                  background-color: rgb(var(--o-mixedgray-6));
+                  background-color: rgb(var(--o-grey-6));
                 }
 
                 &.all-deleted::after {
-                  background-color: rgb(var(--o-mixedgray-6));
+                  background-color: rgb(var(--o-grey-6));
                 }
               }
             }
@@ -1028,7 +1050,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       flex-grow: 1;
       background-color: var(--o-color-fill2);
 
-      @include respond-to('phone') {
+      @include respond('phone') {
         margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
       }
       &.is-empty {
@@ -1049,7 +1071,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         height: 100%;
         max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
 
-        @include respond-to('phone') {
+        @include respond('phone') {
           max-height: fit-content;
         }
 
@@ -1061,7 +1083,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
             flex-grow: 1;
           }
 
-          @include respond-to('phone') {
+          @include respond('phone') {
             padding-left: var(--o-gap-2);
           }
 
@@ -1090,13 +1112,13 @@ const cancelActions = computed<DialogActionT[]>(() => {
               width: 16px;
               height: 26px;
               position: relative;
-              @include respond-to('laptop') {
+              @include respond('laptop') {
                 height: 24px;
               }
-              @include respond-to('pad_h') {
+              @include respond('pad_h') {
                 height: 22px;
               }
-              @include respond-to('<=pad_v') {
+              @include respond('<=pad_v') {
                 height: 22px;
               }
 
@@ -1145,7 +1167,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
             margin-bottom: var(--o-gap-2);
             color: var(--o-color-info1);
             @include text2;
-            @include respond-to('phone') {
+            @include respond('phone') {
               padding-left: var(--o-gap-5);
             }
 
@@ -1160,7 +1182,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
     .list-body {
       height: 100%;
 
-      @include respond-to('phone') {
+      @include respond('phone') {
         height: fit-content;
         padding: var(--o-gap-4) !important;
       }
@@ -1176,7 +1198,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
           --btn-color: var(--o-color-primary2);
         }
 
-        @include respond-to('phone') {
+        @include respond('phone') {
           display: none;
         }
 
@@ -1207,62 +1229,63 @@ 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;
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             padding: var(--o-gap-3) var(--o-gap-4);
           }
 
+          @include respond('phone') {
+            --icon-size: 20px;
+          }
+
           &:hover {
-            @include respond-to('>pad_v') {
+            .title-text {
+              color: var(--o-color-primary1);
+            }
+            @include respond('>pad_v') {
               --copy-display: inline-flex;
             }
           }
 
-          @include respond-to('phone') {
-            --icon-size: 20px;
+          &.last-item {
+            .o-collapse-item-header {
+              border-bottom: none;
+            }
           }
           &.o-collapse-item-expanded {
-            @include respond-to('<=pad_v') {
+            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);
@@ -1272,7 +1295,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
             position: relative;
             top: 4px;
             flex-shrink: 0;
-            @include respond-to('phone') {
+            @include respond('phone') {
               position: absolute;
               right: 0;
               width: 20px;
@@ -1297,7 +1320,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               gap: var(--o-gap-3);
               width: 100%;
               margin-bottom: var(--o-gap-2);
-              @include respond-to('phone') {
+              @include respond('phone') {
                 flex-grow: 1;
                 width: 100%;
                 align-self: stretch;
@@ -1334,7 +1357,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 +1407,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,7 +1428,8 @@ const cancelActions = computed<DialogActionT[]>(() => {
               height: 18px;
               width: 18px;
               display: var(--copy-display);
-              @include respond-to('phone') {
+              color: var(--o-color-info1);
+              @include respond('phone') {
                 bottom: var(--o-gap-2);
                 right: calc(20px + var(--o-gap-2))
               }
@@ -1423,7 +1453,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
           .meeting-detail {
             padding-left: calc(var(--o-gap-3) + var(--icon-size));
 
-            @include respond-to('phone') {
+            @include respond('phone') {
               padding-left: 0;
             }
 
@@ -1431,10 +1461,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';
@@ -203,7 +203,7 @@ onUnmounted(() => {
         <OTab v-model="tab">
           <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="{
@@ -271,20 +271,27 @@ 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-to('<=pad_v') {
+  @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 {
     width: 60%;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       width: 100%;
     }
 
@@ -311,13 +318,14 @@ onUnmounted(() => {
       margin-top: var(--o-gap-5);
 
       .o-tab {
+        --tab-nav-justify: flex-start;
         .o-tab-navs {
           justify-content: flex-start;
         }
 
         .o-tab-nav {
           padding-bottom: var(--o-gap-4);
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             padding-bottom: var(--o-gap-2);
           }
         }
@@ -325,9 +333,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 +362,7 @@ onUnmounted(() => {
             span:first-child {
               width: 6em;
               flex-shrink: 0;
+              color: var(--o-color-info3);
             }
 
             span:last-child {
@@ -355,6 +378,7 @@ onUnmounted(() => {
         .subject-list {
           counter-reset: itemIndex;
           position: relative;
+          padding-bottom: var(--o-gap-5);
 
           .mouse-current-time {
             position: absolute;
@@ -362,7 +386,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 +426,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 +441,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;
@@ -431,7 +455,7 @@ onUnmounted(() => {
 
   .right-card {
     width: 40%;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       width: 100%;
     }
   }

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';
@@ -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,11 +308,14 @@ 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-to('phone') {
+  @include respond('phone') {
     .meeting-card-header {
       padding: 12px 16px 0;
 
@@ -339,7 +342,7 @@ onMounted(() => {
     align-items: center;
     padding: 12px 32px 0;
     @include text1;
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       padding: 12px 16px 0;
     }
 
@@ -405,7 +408,7 @@ onMounted(() => {
   .list-content {
     flex-grow: 1;
     height: 400px;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       height: auto;
     }
   }