@opendesign-plus-test/components 0.0.1-rc.70 → 0.0.1-rc.72

package/package.json

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

package/src/assets/styles/element-plus.scss

@@ -144,13 +144,13 @@
 
               &.start-date {
                 .el-date-table-cell {
-                  border-radius: var(--cell-radius) 0 0 var(--cell-radius);
+                  border-radius: var(--cell-radius);
                 }
               }
 
               &.end-date {
                 .el-date-table-cell {
-                  border-radius: 0 var(--cell-radius) var(--cell-radius) 0;
+                  border-radius: var(--cell-radius);
                 }
               }
             }
@@ -177,6 +177,36 @@
     border: 1px solid var(--el-input-border-color);
   }
 
+  .el-date-editor {
+    &.is-focus {
+
+      .el-input__wrapper {
+        box-shadow: none;
+        --el-input-border-color: var(--o-color-primary3);
+      }
+    }
+
+    &:hover {
+
+      .el-input__wrapper {
+        box-shadow: none;
+        --el-input-border-color: var(--o-color-primary2);
+      }
+    }
+
+    &.el-input__wrapper {
+      &:hover {
+        box-shadow: none;
+        --el-input-border-color: var(--o-color-primary2);
+      }
+
+      &.is-active {
+        --el-input-border-color: var(--o-color-primary3);
+      }
+    }
+  }
+
+
   .el-select__wrapper {
     background: var(--o-color-fill2);
   }

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/empty.png';
+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) {
@@ -201,6 +203,15 @@ const changeMeetingDay = useDebounceFn((day: string, event?: Event) => {
 }, 300)
 
 
+watch(() => latestDay.value,
+  () => {
+    changeMeetingDay(latestDay.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
 const selectDate = (val: string, date: string) => {
   if (formatDate(date) === formatDate(limitTime) && val === 'prev-month') {
     isLimit.value = true;
@@ -247,7 +258,6 @@ const getCalendarHeight = async () => {
 
 onMounted(() => {
   getCalendarHeight();
-  getDateData();
 });
 
 const stopWatchData = watch(
@@ -403,9 +413,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 +469,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 +819,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 {
@@ -859,38 +867,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 {

package/src/components/meeting/OMeetingMyCalendar.vue

@@ -924,9 +924,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
             display: table;
 
             th {
-              text-align: center;
+              text-align: left;
               border: none;
               --o-color-control3-light: transparent;
+              padding-left: calc(17px - 0.5em);
             }
 
             tr {
@@ -1232,7 +1233,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
           border-top: none;
           border-radius: var(--meeting-card-radius);
           transition: margin var(--o-easing-standard) var(--o-duration-s);
-          --copy-display: none;
           --icon-size: 24px;
           @include respond('<=pad_v') {
             padding: var(--o-gap-3) var(--o-gap-4);
@@ -1246,8 +1246,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
             .title-text {
               color: var(--o-color-primary1);
             }
-            @include respond('>pad_v') {
-              --copy-display: block;
+
+            .copy-icon {
+              visibility: visible;
+              opacity: 1;
             }
           }
 
@@ -1274,11 +1276,26 @@ const cancelActions = computed<DialogActionT[]>(() => {
             background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
 
             @include respond('<=pad_v') {
-              --copy-display: block;
+              .copy-icon {
+                visibility: visible;
+                opacity: 1;
+
+              }
             }
 
             .o-collapse-item-header {
-              border-bottom: 1px solid var(--o-color-control4);
+              padding-bottom: var(--o-gap-2);
+              position: relative;
+
+              &::after {
+                content: '';
+                position: absolute;
+                left: calc(var(--o-gap-3) + var(--icon-size));
+                right: 0;
+                bottom: 0;
+                height: 1px;
+                background-color: var(--o-color-control4);
+              }
             }
           }
         }
@@ -1286,7 +1303,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         .o-collapse-item-header {
           border-bottom: none;
           padding-top: 0;
-          padding-bottom: var(--o-gap-4);
+          padding-bottom: 0;
           display: flex;
           align-items: center;
           gap: var(--o-gap-4);
@@ -1389,7 +1406,11 @@ const cancelActions = computed<DialogActionT[]>(() => {
                   display: flex;
                   align-items: center;
                   font-weight: 400;
-                  @include tip1;
+                  font-size: 14px;
+                  line-height: 22px;
+                  @include respond('<=pad_v') {
+                    @include tip1;
+                  }
                   @include respond('phone') {
                     flex-direction: column;
                     align-items: flex-start;
@@ -1433,7 +1454,8 @@ const cancelActions = computed<DialogActionT[]>(() => {
             .copy-icon {
               flex-shrink: 0;
               font-size: 24px;
-              display: var(--copy-display);
+              visibility: hidden;
+              opacity: 0;
               color: var(--o-color-info1);
               height: 1em;
               @include respond('<=laptop') {
@@ -1457,7 +1479,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
         .o-collapse-item-body {
           margin-bottom: 0;
-          padding: var(--o-gap-4) 0 0;
+          padding: var(--o-gap-2) 0 0;
 
           .meeting-detail {
             padding-left: calc(var(--o-gap-3) + var(--icon-size));
@@ -1468,13 +1490,23 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
             .meeting-btn {
               border-top: 1px solid var(--o-color-control4);
-              margin-top: var(--o-gap-5);
+              margin-top: var(--o-gap-4);
               padding-top: var(--o-gap-4);
-              padding-bottom: var(--o-gap-4);
+              padding-bottom: calc(var(--o-gap-4) - var(--o-gap-2));
               display: flex;
               align-items: center;
               justify-content: flex-end;
               gap: var(--o-gap-5);
+              @include respond('pad_h') {
+                margin-top: var(--o-gap-3);
+                padding-top: var(--o-gap-3);
+                padding-bottom: calc(var(--o-gap-3) - var(--o-gap-2));
+              }
+              @include respond('<=pad_v') {
+                margin-top: var(--o-gap-2);
+                padding-top: var(--o-gap-2);
+                padding-bottom: 0;
+              }
 
               .o-link {
                 --link-color: inherit;

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/empty.png';
+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

@@ -372,11 +372,6 @@ const computedList = computed<any[]>(() => {
         display: none;
       }
 
-      @include hover {
-        .text {
-          color: var(--o-color-primary1);
-        }
-      }
       @include respond('<=pad_v') {
         &::after {
           width: calc(100% - 2 * 16px);
@@ -409,9 +404,14 @@ const computedList = computed<any[]>(() => {
 
     .o-collapse-item-header {
       align-items: center;
-      padding: var(--o-gap-4) var(--o-gap-5);
+      padding: var(--o-gap-4) var(--o-gap-4) var(--o-gap-3) var(--o-gap-4);
       position: relative;
 
+      @include hover {
+        .text {
+          color: var(--o-color-primary1);
+        }
+      }
       @include respond('>pad_v') {
         &:hover {
           .o-collapse-item-title {
@@ -423,7 +423,7 @@ const computedList = computed<any[]>(() => {
         }
       }
       @include respond('<=pad_v') {
-        padding: 12px 16px;
+        padding: var(--o-gap-4) var(--o-gap-3) var(--o-gap-2) var(--o-gap-3);
       }
 
       .o-collapse-item-title {
@@ -586,8 +586,6 @@ const computedList = computed<any[]>(() => {
       .text {
         display: block;
         font-weight: 600;
-        min-width: 0;
-        flex: 1;
         @include text-truncate(1);
       }
     }

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

@@ -174,42 +174,40 @@ defineExpose({ copyInfo });
 <style lang="scss">
 .o-meeting-detail {
   position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: var(--o-gap-2);
+  column-gap: var(--o-gap-4);
+
+  @include respond('<=pad_v') {
+    row-gap: var(--o-gap-1);
+    column-gap: var(--o-gap-1);
+  }
+
   .label-item {
     color: var(--o-color-info3);
-    display: flex;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: start;
     font-size: 14px;
-    gap: var(--o-gap-2);
-
+    line-height: 22px;
     @include respond('<=pad_v') {
       font-size: 12px;
-      gap: var(--o-gap-1);
-    }
-
-    &:not(.is-empty) {
-      margin-bottom: var(--o-gap-2);
-    }
-
-    &:last-child {
-      margin-bottom: 0;
+      line-height: 18px;
     }
 
     &.record-item {
-      align-items: flex-start;
+      align-items: start;
 
       .value {
         margin-bottom: 0;
       }
     }
 
-    &.is-en {
-      .label {
-        width: 6em;
-      }
-    }
-
     .label {
-      width: 4em;
+      white-space: nowrap;
       flex-shrink: 0;
       display: flex;
 
@@ -222,18 +220,21 @@ defineExpose({ copyInfo });
     }
 
     .split-mark {
-      width: 0;
-      height: 0;
-      opacity: 0;
-      overflow: hidden;
+      display: none;
     }
 
     .more-text-wrapper {
-      position: relative;
-      top: -2px;
+      //position: relative;
+      //top: -2px;
     }
 
     .o-link {
+      font-size: 14px;
+      line-height: 22px;
+      @include respond('<=pad_v') {
+        font-size: 12px;
+        line-height: 18px;
+      }
       .o-link-main {
         word-wrap: break-word;
         @include text-truncate(3);
@@ -261,7 +262,7 @@ defineExpose({ copyInfo });
   }
 
   .label-item.is-empty {
-    margin: 0;
+    display: none;
   }
 
   .meeting-action {

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.',
@@ -144,18 +144,18 @@ export default {
   'meeting.version2512Banner': 'openUBMC 25.12 LTS 社区发行版正式上线',
   'meeting.sigs': 'SIG Groups',
   'meeting.groups': 'Groups',
-  'meeting.activityAddress': 'Address',
+  'meeting.activityAddress': 'Location',
   'meeting.livePlatform': 'Live Platform',
   'meeting.meetingTopic': 'Topics',
   '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',