@opendesign-plus-test/components 0.0.1-rc.69 → 0.0.1-rc.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.69",
+  "version": "0.0.1-rc.71",
   "type": "module",
   "publishConfig": {
     "access": "public",

package/src/components/header-language-switcher/OHeaderLanguageSwitcher.vue

@@ -29,6 +29,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { changeLocale, locale } = useLocale();
@@ -66,12 +70,15 @@ const isCommon = computed(() => {
 <template>
   <div
     v-if="isCommon"
-    :class="options.length <= 1 ? 'hide-lang' : 'header-lang'"
+    :class="[options.length <= 1 ? 'hide-lang' : 'header-lang', disabled ? 'is-disabled' : '']"
   >
     <ODropdown
       trigger="hover"
       optionPosition="bottom"
-      option-wrap-class="dropdown"
+      :optionWrapClass="{
+        'dropdown':true,
+        'is-disabled': disabled,
+      }"
     >
       <div class="info-wrap">
         <OIcon class="icon">
@@ -95,7 +102,7 @@ const isCommon = computed(() => {
 
   <div
     v-else
-    :class="options.length <= 1 ? 'hide-lang' : 'mobile-change-language'"
+    :class="[options.length <= 1 ? 'hide-lang' : 'mobile-change-language', disabled ? 'is-disabled' : '']"
   >
     <span
       v-for="item in options"
@@ -150,6 +157,21 @@ const isCommon = computed(() => {
       }
     }
   }
+
+  &.is-disabled {
+    .info-wrap {
+      color: var(--o-color-info4);
+      cursor: not-allowed;
+
+      &:hover {
+        color: var(--o-color-info4);
+      }
+
+      .o-icon {
+        color: inherit;
+      }
+    }
+  }
   .list {
     background: var(--o-color-fill2);
     cursor: pointer;
@@ -207,5 +229,25 @@ const isCommon = computed(() => {
       }
     }
   }
+
+  &.is-disabled {
+    span {
+      color: var(--o-color-info4);
+      cursor: not-allowed;
+      @include hover {
+        color: var(--o-color-info4);
+      }
+
+      &:after {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.o-dropdown-list.is-disabled {
+  display: none;
 }
 </style>

package/src/components/meeting/OMeetingCalendar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import {
-  isClient, OFigure,
+  isClient,
+  OFigure,
   OIcon,
   OIconChevronLeft,
   OIconChevronRight,
@@ -17,7 +18,7 @@ import OMeetingCalendarList from './components/OMeetingCalendarList.vue';
 import IconEvent from '~icons/meeting/icon-event.svg';
 import IconSummit from '~icons/meeting/icon-summit.svg';
 import IconMeeting from '~icons/meeting/icon-meet.svg';
-import emptyImg from '@/assets/meeting/svg-icons/icon-empty.svg';
+import emptyDefaultImg from '@/assets/meeting/empty.png';
 import { Locales } from '@/i18n';
 import { useMeetingConfig } from './composables/useMeetingConfig';
 import {
@@ -42,13 +43,11 @@ const props = withDefaults(defineProps<MeetingCalendarPropsT>(), {
 const { t, locale, meetingTabs, getConfig } = useMeetingConfig();
 const isEn = computed(() => locale.value === Locales.EN);
 
-const latestDay = ref<string>('');
 const dateList = ref<string[]>([]);
 const summitData = ref<SummitItemT[]>([]);
 const summitDates = ref<string[]>([]);
 const eventsData = ref<MeetingEventsItemT[]>([]);
 const eventsDates = ref<string[]>([]);
-const allDates = ref<string[]>([]);
 const meetingData = ref<MeetingItemT[]>([]);
 const limitTime = '2021-01-01';
 const tabType = ref<CalendarDataType>(CalendarDataType.ALL);
@@ -168,25 +167,28 @@ const getDateData = async (day?: string) => {
   getActivityData(date);
   getDateList(date);
 
-  allDates.value = [...new Set([...dateList.value, ...summitDates.value, ...eventsDates.value])]
-    .flat()
-    .sort((a: string, b: string) => dayjs(a).isAfter(dayjs(b)) ? 1 : -1);
-  if (!day) {
-    if (!allDates.value.length) {
-      latestDay.value = formatDate(new Date());
-    } else {
-      let find = [...allDates.value].reverse().find((v) => dayjs().isAfter(dayjs(v)));
-      if (!find) {
-        find = allDates.value.find((v) => dayjs(v).isAfter(dayjs()));
-      }
-      latestDay.value = formatDate(find);
-    }
-  }
   paramGetDaysData({
     date: date,
     type: tabType.value,
   });
 };
+const allDates = computed<string[]>(() => {
+  return [...new Set([...dateList.value, ...summitDates.value, ...eventsDates.value])]
+    .flat()
+    .sort((a: string, b: string) => dayjs(a).isAfter(dayjs(b)) ? 1 : -1);
+});
+
+const latestDay = computed(() => {
+  if (!allDates.value.length) {
+    return formatDate(new Date());
+  } else {
+    let find = allDates.value.find((v) => dayjs(v).isAfter(dayjs()));
+    if (!find) {
+      find = [...allDates.value].reverse().find((v) => dayjs().isAfter(dayjs(v)));
+    }
+    return formatDate(find);
+  }
+});
 
 const changeMeetingDay = useDebounceFn((day: string, event?: Event) => {
   if (isAutoClick.value) {
@@ -403,9 +405,9 @@ defineExpose({
                 <slot name="empty">
                   <OResult class="empty-result">
                     <template #image>
-                      <OFigure class="img" :src="emptyImg" />
+                      <OFigure class="img" :src="emptyImg ?? emptyDefaultImg" />
                     </template>
-                    <template #description>{{ t('meeting.meetingEmptyText') }}</template>
+                    <template #description>{{ emptyText ?? t('meeting.meetingEmptyText') }}</template>
                   </OResult>
                 </slot>
               </template>
@@ -459,7 +461,7 @@ defineExpose({
         display: flex;
         align-items: center;
         justify-content: space-between;
-        height: 60px;
+        height: 58px;
         padding: 0 var(--o-gap-6);
         gap: var(--o-gap-6);
         border-bottom: 1px solid var(--o-color-control4);
@@ -809,24 +811,22 @@ defineExpose({
       }
 
       .title-list {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 14px 24px;
+        padding: 16px 0;
         position: relative;
-        height: 60px;
+        height: 58px;
 
         @include respond('<=pad_v') {
           justify-content: space-between;
           padding: 0 16px;
-          gap: 24px;
+          gap: var(--o-gap-4);
           height: auto;
           align-items: flex-start;
+          display: flex;
         }
         @include respond('phone') {
           flex-direction: column;
           align-items: center;
-          gap: 8px;
+          gap: var(--o-gap-2);
         }
 
         &::after {
@@ -845,6 +845,9 @@ defineExpose({
           @include respond('<=pad_v') {
             display: inline-flex;
           }
+          @include respond('pad_v') {
+            max-width: 160px;
+          }
           @include respond('phone') {
             display: flex;
             width: 100%;
@@ -856,38 +859,30 @@ defineExpose({
       }
 
       .o-tab {
-        display: flex;
-        justify-content: center;
-        align-items: flex-end;
-        height: 60px;
+        --tab-nav-padding: 0 0 16px;
+        @include respond('laptop') {
+          --tab-nav-padding: 0 0 18px;
+        }
         @include respond('pad_h') {
           --tab-nav-gap: 24px;
-        }
-        
-        @include respond-to('pad_v') {
-          --tab-nav-justify: flex-end;
+          --tab-nav-padding: 0 0 18px;
         }
 
-        @include respond('pad_v-laptop') {
-          --tab-nav-padding: 0 0 14px;
-        }
         @include respond('<=pad_v') {
           border-bottom: none;
           height: auto;
           .o-icon {
             display: none;
           }
-          .o-tab-navs-container {
-
-            .o-tab-nav {
-              line-height: 32px;
-            }
-          }
         }
+        @include respond-to('pad_v') {
+          --tab-nav-justify: flex-end;
+          width: 50%;
+          --tab-nav-padding: 0 0 14px;
+        }
+
         @include respond('phone') {
-          .o-tab-nav {
-            line-height: 2;
-          }
+          --tab-nav-padding: 0 0 4px;
         }
 
         .o-icon {
@@ -915,8 +910,21 @@ defineExpose({
   }
 
   .empty-result {
-    --result-image-width: 200px;
-    --result-image-height: 175px;
+    --result-image-width: 240px;
+    --result-image-height: 210px;
+    --result-desc-gap: var(--o-gap-4);
+
+    @include respond('laptop') {
+      --result-image-width: 200px;
+      --result-image-height: 175px;
+      --result-desc-gap: var(--o-gap-3);
+    }
+
+    @include respond('<=pad') {
+      --result-image-width: 160px;
+      --result-image-height: 140px;
+      --result-desc-gap: var(--o-gap-2);
+    }
 
     .o-result-description {
       @include tip1;

package/src/components/meeting/OMeetingSigCalendar.vue

@@ -20,7 +20,7 @@ import { useScreen } from '@opendesign-plus/composables';
 import { useMeetingConfig } from './composables/useMeetingConfig';
 import OMeetingCalendarList from '@/components/meeting/components/OMeetingCalendarList.vue';
 import { formatDate } from '@/components/meeting/utils.ts';
-import emptyImg from '@/assets/meeting/svg-icons/icon-empty.svg';
+import emptyDefaultImg from '@/assets/meeting/empty.png';
 
 const props = defineProps<{
   sigName: String;
@@ -28,6 +28,8 @@ const props = defineProps<{
   getDateListRequest: any;
   getEventsListRequest: any;
   dates: String[];
+  emptyImg?: any;
+  emptyText?: string;
 }>();
 const { t, meetingTabs } = useMeetingConfig();
 const { lePadV } = useScreen();
@@ -331,9 +333,9 @@ const list = computed(() => {
             <slot name="empty">
               <OResult class="empty-result">
                 <template #image>
-                  <OFigure class="img" :src="emptyImg" />
+                  <OFigure class="img" :src="emptyImg ?? emptyDefaultImg" />
                 </template>
-                <template #description>{{ t('meeting.meetingEmptyText') }}</template>
+                <template #description>{{ emptyText ?? t('meeting.meetingEmptyText') }}</template>
               </OResult>
             </slot>
           </template>

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

@@ -332,6 +332,10 @@ const computedList = computed<any[]>(() => {
     display: flex;
     align-items: center;
     justify-content: center;
+    @include respond('<=pad_v') {
+      min-height: auto;
+      padding: var(--o-gap-5) 0;
+    }
   }
 
 

package/src/components/meeting/types.ts

@@ -56,6 +56,8 @@ export interface MeetingCalendarPropsT {
   groupType: MeetingGroupType;
   groups: string[];
   disableFormat?: boolean; //是否禁用日期格式化
+  emptyImg?: any;
+  emptyText?: string;
 }
 
 // 会议新增、修改

package/src/i18n/en.ts

@@ -78,7 +78,7 @@ export default {
   'meeting.meetingGroup': 'Group',
   'meeting.selectSig': 'Select a SIG.',
   'meeting.selectGroup': 'Select a Group.',
-  'meeting.enterEtherpad': 'Enter Etherpad.',
+  'meeting.enterEtherpad': 'Enter Meeting Minutes.',
   'meeting.etherpadDesc': 'A meeting assistant for recording meeting minutes and conversations.',
   'meeting.selectDate': 'Select a date.',
   'meeting.finishMeetingConfig': 'Complete the meeting settings.',
@@ -150,12 +150,12 @@ export default {
   'meeting.eventsTitle': 'Name',
   'meeting.summitTitle': 'Name',
   'meeting.meetingDetail': 'Details',
-  'meeting.meetingEtherpad': 'Etherpad',
+  'meeting.meetingEtherpad': 'Meeting Minutes',
   'meeting.meetingReplay': 'Playback',
   'meeting.searchSubtitlePlaceholder': 'Enter',
   'meeting.detailHalfYearMeetings': '默认显示近半年的会议。',
   'meeting.tencent': 'Tencent',
-  'meeting.etherpad': 'Etherpad',
+  'meeting.etherpad': 'Meeting Minutes',
   'common.confirm': 'Confirm',
   'common.cancel': 'Cancel',
   'common.copySuccess': 'Copied Successfully',