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

package/src/components/meeting/OMeetingForm.vue

@@ -704,9 +704,6 @@ defineExpose({
 
 <style lang="scss">
 .o-meeting-form {
-  --meeting-card-radius: var(--o-radius-xs);
-  --meeting-input-radius: var(--o-radius-xs);
-  --meeting-cell-radius: var(--o-radius-xs);
   .form-wrapper {
     & > .o-form-item {
       max-width: 592px;
@@ -736,7 +733,7 @@ defineExpose({
     }
 
     .o-textarea {
-      --_box-radius: var(--meeting-input-radius);
+      --_box-radius: var(--o-radius-xs);
     }
 
     input,
@@ -744,17 +741,8 @@ defineExpose({
       color: var(--o-input-color);
       @include text1;
 
-      @include respond('phone') {
-        @include text2;
-      }
-
       &::placeholder {
         color: var(--o-placeholder-color);
-        @include text1;
-
-        @include respond('phone') {
-          font-size: 14px !important;
-        }
       }
     }
 
@@ -866,8 +854,11 @@ defineExpose({
     align-items: center;
 
     .o-btn {
+      height: 40px !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 20px !important;
       --btn-min-width: 90px;
-      --btn-radius: calc(var(--btn-height) / 2);
     }
   }
 
@@ -876,7 +867,7 @@ defineExpose({
     display: flex;
     align-items: center;
     border: 1px solid var(--o-color-control1);
-    border-radius: var(--meeting-card-radius);
+    border-radius: var(--o-radius-xs);
     padding: 0 15px;
     background-color: var(--o-color-fill2);
 
@@ -908,6 +899,9 @@ defineExpose({
         gap: 0;
       }
 
+      .el-select__placeholder {
+        @include text1;
+      }
 
       .el-select__caret,
       .el-input__prefix-icon {
@@ -961,7 +955,7 @@ defineExpose({
     .repeat-config {
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
       padding: var(--o-gap-5);
-      border-radius: var(--meeting-card-radius);
+      border-radius: var(--o-radius-xs);
       @include respond('<=pad_v') {
         padding: var(--o-gap-4);
       }

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, OScroller, OSelect, OTab, OTabPane, type SelectValueT } from '@opensig/opendesign';
+import { OOption, 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>
-        <OScroller :class="['tab-content', `tab-content-${tab}`]" show-type="hover">
+        <div class="tab-content">
           <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>
-        </OScroller>
+        </div>
       </div>
     </div>
     <div class="right-card card-wrapper" :style="{
@@ -271,22 +271,15 @@ 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(--meeting-card-radius);
+    border-radius: var(--o-radius-xs);
     background-color: var(--o-color-fill2);
     padding: var(--o-gap-5);
-
-    &.left-card {
-      padding-bottom: 0;
-    }
   }
 
   .left-card {
@@ -318,7 +311,6 @@ onUnmounted(() => {
       margin-top: var(--o-gap-5);
 
       .o-tab {
-        --tab-nav-justify: flex-start;
         .o-tab-navs {
           justify-content: flex-start;
         }
@@ -333,23 +325,9 @@ 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 {
-          padding-bottom: var(--o-gap-5);
-          @include text1;
+          @include tip1;
 
           .info-item {
             display: flex;
@@ -362,7 +340,6 @@ onUnmounted(() => {
             span:first-child {
               width: 6em;
               flex-shrink: 0;
-              color: var(--o-color-info3);
             }
 
             span:last-child {
@@ -378,7 +355,6 @@ onUnmounted(() => {
         .subject-list {
           counter-reset: itemIndex;
           position: relative;
-          padding-bottom: var(--o-gap-5);
 
           .mouse-current-time {
             position: absolute;
@@ -386,7 +362,7 @@ onUnmounted(() => {
             padding: var(--o-gap-1);
             box-shadow: var(--o-shadow-1);
             z-index: 10;
-            border-radius: var(--meeting-cell-radius);
+            border-radius: var(--o-radius-xs);
             transform: translateY(calc(0px - 100% - 4px));
             color: var(--o-color-info2);
             @include tip1;
@@ -426,7 +402,7 @@ onUnmounted(() => {
               right: 0;
               height: 4px;
               border-radius: 2px;
-              background-color: var(--o-color-fill3);
+              background-color: var(--o-color-fill1);
             }
 
             .subject-progress {
@@ -441,7 +417,7 @@ onUnmounted(() => {
                 position: absolute;
                 top: 0;
                 bottom: 0;
-                border-radius: var(--meeting-cell-radius);
+                border-radius: var(--o-radius-xs);
                 left: calc(var(--start) * 100%);
                 right: calc((1 - var(--end)) * 100%);
                 z-index: 9;

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  DialogActionT, OButton,
+  DialogActionT,
   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 { CalendarDataType, MeetingGroupType, MeetingItemT, PageParamsT } from './types.ts';
+import { 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, getConfig, getWeekFromDate } = useMeetingConfig();
+const { t, locale, getPointStr, getWeekFromDate } = useMeetingConfig();
 const isEn = computed(() => locale.value === Locales.EN);
 
 const props = withDefaults(defineProps<{
@@ -578,9 +578,6 @@ 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]) }}
@@ -637,14 +634,9 @@ const cancelActions = computed<DialogActionT[]>(() => {
                   >
                     <template #title>
                       <div class="item-header-left">
-                        <div
-                          class="meeting-icon"
-                          :style="{
-                            backgroundColor: `${getConfig(CalendarDataType.MEETING, 'color')}`
-                          }"
-                        >
+                        <div class="meeting-icon">
                           <OIcon>
-                            <component :is="getConfig(CalendarDataType.MEETING, 'icon')" />
+                            <IconMeeting />
                           </OIcon>
                         </div>
                         <div class="header-info">
@@ -675,7 +667,6 @@ 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"
@@ -689,12 +680,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                           </template>
                         </OLink>
                         <template v-else>
-                          <OLink
-                            :hover-underline="false"
-                            target="_blank"
-                            v-if="row.etherpad"
-                            :href="row.etherpad"
-                          >
+                          <OLink target="_blank" v-if="row.etherpad" :href="row.etherpad">
                             {{ t('meeting.meetingSummary') }}
                             <template #suffix>
                               <OIcon>
@@ -703,7 +689,6 @@ 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">
@@ -728,12 +713,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
                         from="my"
                       />
                       <div class="meeting-btn" v-if="!row.isExpired && !row.is_delete">
-                        <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>
+                        <OLink @click="handleItem(row, 'edit')">{{ t('meeting.editMeeting') }}
+                        </OLink>
+                        <OLink @click="handleItem(row, 'cancel')">{{ t('meeting.cancelMeeting') }}
+                        </OLink>
                       </div>
                     </div>
                   </OCollapseItem>
@@ -762,7 +745,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       >
         <template #header>
           {{
-            t('meeting.meetingHandleText', [handleDialogType === 'edit' ? t('meeting.edit') : t('meeting.cancel')])
+            t('meeting.meetingHandleText', [handleDialogType === 'edit' ? t('meeting.edit') : t('meeting.cancel2')])
           }}
         </template>
         <ORadioGroup v-model="handleType">
@@ -779,9 +762,6 @@ 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;
@@ -897,7 +877,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       .el-calendar {
         min-height: 460px;
         height: calc(100% - 54px);
-        border-radius: var(--meeting-card-radius);
+        border-radius: var(--o-radius-xs);
         background-color: transparent;
 
         .el-calendar__header {
@@ -931,7 +911,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
         .el-calendar__body {
           .el-calendar-table {
-            display: table;
 
             th {
               text-align: center;
@@ -976,9 +955,8 @@ const cancelActions = computed<DialogActionT[]>(() => {
               .date-cell-text {
                 font-size: 14px;
                 line-height: 36px;
-                border-radius: var(--meeting-cell-radius);
+                border-radius: var(--o-radius-xs);
                 background-color: var(--o-color-control2-light);
-                border: 1px solid transparent;
               }
 
               .date-cell-text {
@@ -1017,14 +995,14 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
               &.is-selected {
                 .date-cell-text {
-                  background-color: var(--o-color-control3-light);
-                  border: 1px solid var(--o-color-primary1);
+                  color: #fff;
+                  background-color: var(--o-color-primary1);
                 }
               }
 
               &.clickable {
                 &::after {
-                  background-color: var(--dot-bg);
+                  background-color: var(--o-color-primary1);
                 }
 
                 &.expired::after {
@@ -1229,20 +1207,31 @@ 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: var(--o-gap-4);
+          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(--meeting-card-radius);
+          border-radius: var(--o-radius-xs);
           transition: margin var(--o-easing-standard) var(--o-duration-s);
           --copy-display: none;
           --icon-size: 24px;
@@ -1250,42 +1239,30 @@ 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;
             }
           }
 
-          &.last-item {
-            .o-collapse-item-header {
-              border-bottom: none;
-            }
+          @include respond('phone') {
+            --icon-size: 20px;
           }
           &.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-header {
-              border-bottom: 1px solid var(--o-color-control4);
-            }
+          &.o-collapse-item-expanded {
+            background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
           }
         }
 
         .o-collapse-item-header {
-          border-bottom: none;
+          border-bottom: 1px solid var(--o-color-control4);
           padding-top: 0;
-          padding-bottom: var(--o-gap-4);
+          padding-bottom: var(--o-gap-2);
           display: flex;
           align-items: center;
           gap: var(--o-gap-4);
@@ -1357,11 +1334,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
                   &.is-delete,
                   &.is-end {
-                    color: var(--o-color-info4);
-
-                    .title-text {
-                      color: var(--o-color-info4) !important;
-                    }
+                    color: var(--o-color-info3);
                   }
 
                   .tag-wrapper {
@@ -1407,12 +1380,10 @@ 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;
@@ -1428,7 +1399,6 @@ 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))
@@ -1461,15 +1431,10 @@ 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/{OMeetingSigCalendar.vue → OSigMeetingCalendar.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 OMeetingSigAside from './components/OMeetingSigAside.vue';
+import OSigMeetingAside from './components/OSigMeetingAside.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">
-        <OMeetingSigAside
+        <OSigMeetingAside
           :data="dateMapList.slice(monthIdx, monthIdx + 1)"
           :meetingDates="tabType !== CalendarDataType.EVENTS ? meetingDates :[] "
           :eventsDates="tabType !== CalendarDataType.MEETING ? eventsDates : []"
@@ -308,12 +308,9 @@ 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(--meeting-card-radius);
+  border-radius: var(--o-radius-xs);
   margin-top: var(--o-gap-5);
   @include respond('phone') {
     .meeting-card-header {

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

@@ -165,8 +165,8 @@ const computedList = computed<any[]>(() => {
             <div class="meet-title" :title="item.topic || item.name">
               <OIcon
                 :style="{
-                  backgroundColor: `${getConfig(item.type, 'color')}`
-                }"
+              backgroundColor: `${getConfig(item.type, 'color')}`
+            }"
               >
                 <component :is="getConfig(item.type, 'icon')" />
               </OIcon>
@@ -389,7 +389,7 @@ const computedList = computed<any[]>(() => {
         flex-direction: column;
         background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
         padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + var(--o-gap-5) - 12px);
-        border-radius: var(--meeting-card-radius);
+        border-radius: var(--o-radius-xs);
         @include tip1;
 
         @include respond('<=pad_v') {

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

@@ -173,7 +173,7 @@ const removeTag = (val: number) => {
       justify-content: center;
       background-color: var(--o-color-fill2);
       color: var(--o-color-info1);
-      border-radius: var(--meeting-cell-radius);
+      border-radius: var(--o-radius-xs);
 
       &:hover,
       &.is-checked {

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

@@ -363,7 +363,7 @@ watch(
   height: 100%;
   min-height: calc(var(--layout-content-min-height) - 104px);
   background-color: var(--o-color-fill2);
-  border-radius: var(--meeting-card-radius);
+  border-radius: var(--o-radius-xs);
 
   .search-captions {
     display: flex;
@@ -371,8 +371,8 @@ watch(
     gap: var(--o-gap-4);
 
     .input-captions {
-      --input-radius: var(--meeting-input-radius);
-      --_box-radius: var(--meeting-input-radius);
+      --input-radius: var(--o-radius-xs);
+      --_box-radius: var(--o-radius-xs);
       flex-grow: 1;
 
       .o-icon {
@@ -443,7 +443,6 @@ watch(
   .o-tab {
     margin-top: var(--o-gap-5);
     height: calc(100% - 64px);
-    --tab-nav-justify: flex-start;
 
     .o-tab-navs {
       justify-content: flex-start;
@@ -457,7 +456,7 @@ watch(
       height: calc(100% - var(--o-line_height-text2) - var(--o-gap-4));
       .o-tab-pane {
         height: 100%;
-        padding-top: var(--o-gap-5);
+        padding-top: var(--o-gap-4);
 
         .o-scroller {
           height: 100%;
@@ -484,7 +483,7 @@ watch(
     .captions-item {
       padding: 4px 8px;
       cursor: pointer;
-      border-radius: var(--meeting-cell-radius);
+      border-radius: var(--o-radius-xs);
       @include hover {
         background-color: rgba(var(--o-blue-6), 0.1);
       }
@@ -501,7 +500,7 @@ watch(
           width: 18px;
           height: 18px;
           border-radius: 50%;
-          background-color: var(--o-color-primary1);
+          background-color: var(--o-color-primary2);
           color: var(--o-color-info1-inverse);
           display: flex;
           justify-content: center;
@@ -510,13 +509,13 @@ watch(
         }
 
         .speaker {
-          color: var(--o-color-info3);
+          color: var(--o-color-info4);
           margin-left: 4px;
           @include tip2;
         }
 
         .start-time {
-          color: var(--o-color-info3);
+          color: var(--o-color-info4);
           margin-left: 16px;
           @include tip2;
         }
@@ -535,7 +534,7 @@ watch(
       .text {
         color: var(--o-color-info2);
         margin-top: 8px;
-        @include text1;
+        @include tip1;
 
         .light-keyword {
           background-color: rgba(var(--o-blue-6), 0.2);