@opendesign-plus/components 0.0.1-rc.31 → 0.0.1-rc.33

package/src/components/meeting/OMeetingMyCalendar.vue

@@ -244,7 +244,7 @@ const getDetailRefs = (insRef: any, id: number) => {
     detailRefs.value[id] = insRef;
   }
 };
-const copyInfo = async (idx: number) => {
+const copyInfo = async (idx: number | string) => {
   const instance = detailRefs.value[idx];
   await instance.copyInfo();
   message.success({
@@ -632,81 +632,83 @@ const cancelActions = computed<DialogActionT[]>(() => {
                     }"
                   >
                     <template #title>
-                      <div class="item-header-left">
-                        <div
-                          class="meeting-icon"
-                          :style="{
+                      <div class="item-header">
+                        <div class="item-header-left">
+                          <div
+                            class="meeting-icon"
+                            :style="{
                             backgroundColor: `${row.is_delete ? 'var(--o-color-info4)' : getConfig(CalendarDataType.MEETING, 'color')}`
                           }"
-                        >
-                          <OIcon>
-                            <component :is="getConfig(CalendarDataType.MEETING, 'icon')" />
-                          </OIcon>
-                        </div>
-                        <div class="header-info">
-                          <div class="meeting-title">
-                            <div v-if="row.is_delete">{{ t('meeting.meetingCancelled') }}</div>
-                            <div class="title-wrapper">
-                              <div class="title-text">{{ row.topic }}</div>
-                            </div>
-                            <div class="tag-wrapper" v-if="row.is_cycle">
-                              <OTag color="primary" variant="outline">{{ t('meeting.cycle') }}</OTag>
-                            </div>
+                          >
+                            <OIcon>
+                              <component :is="getConfig(CalendarDataType.MEETING, 'icon')" />
+                            </OIcon>
                           </div>
-                          <div class="meeting-info">
-                            <span>{{ row.dateRange }}</span>
-                            <ODivider direction="v" />
-                            <span>
+                          <div class="header-info">
+                            <div class="meeting-title">
+                              <div v-if="row.is_delete">{{ t('meeting.meetingCancelled') }}</div>
+                              <div class="title-wrapper">
+                                <div class="title-text">{{ row.topic }}</div>
+                              </div>
+                              <div class="tag-wrapper" v-if="row.is_cycle">
+                                <OTag color="primary" variant="outline">{{ t('meeting.cycle') }}</OTag>
+                              </div>
+                            </div>
+                            <div class="meeting-info">
+                              <span>{{ row.dateRange }}</span>
+                              <ODivider direction="v" />
+                              <span>
                               {{ groupType === MeetingGroupType.GROUP ? t('meeting.groups') : t('meeting.sigs')
-                              }}: {{ row.group_name }}
+                                }}: {{ row.group_name }}
                             </span>
+                            </div>
                           </div>
                         </div>
-                      </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"
-                          rel="noopener noreferrer"
-                        >
-                          {{ t('meeting.joinMeeting') }}
-                          <template #suffix>
-                            <OIcon>
-                              <OIconChevronRight></OIconChevronRight>
-                            </OIcon>
-                          </template>
-                        </OLink>
-                        <template v-else>
+                        <div class="item-header-right" v-if="!row.is_delete">
                           <OLink
                             :hover-underline="false"
+                            v-if="!row.isExpired"
                             target="_blank"
-                            v-if="row.etherpad"
-                            :href="row.etherpad"
+                            :href="row.join_url"
+                            rel="noopener noreferrer"
                           >
-                            {{ t('meeting.meetingSummary') }}
+                            {{ t('meeting.joinMeeting') }}
                             <template #suffix>
                               <OIcon>
                                 <OIconChevronRight></OIconChevronRight>
                               </OIcon>
                             </template>
                           </OLink>
-                          <OLink
-                            :hover-underline="false"
-                            target="_blank"
-                            :href="`/${locale}/video/${row.group_name}/${row.mid}/${row.date}`"
-                            v-if="row.hasObsData">
-                            {{ t('meeting.viewRecord') }}
-                            <template #suffix>
-                              <OIcon>
-                                <OIconChevronRight></OIconChevronRight>
-                              </OIcon>
-                            </template>
-                          </OLink>
-                        </template>
+                          <template v-else>
+                            <OLink
+                              :hover-underline="false"
+                              target="_blank"
+                              v-if="row.etherpad"
+                              :href="row.etherpad"
+                            >
+                              {{ t('meeting.meetingSummary') }}
+                              <template #suffix>
+                                <OIcon>
+                                  <OIconChevronRight></OIconChevronRight>
+                                </OIcon>
+                              </template>
+                            </OLink>
+                            <OLink
+                              :hover-underline="false"
+                              target="_blank"
+                              :href="`/${locale}/video/${row.group_name}/${row.mid}/${row.date}`"
+                              v-if="row.hasObsData">
+                              {{ t('meeting.viewRecord') }}
+                              <template #suffix>
+                                <OIcon>
+                                  <OIconChevronRight></OIconChevronRight>
+                                </OIcon>
+                              </template>
+                            </OLink>
+                          </template>
+                        </div>
                       </div>
-                      <OIcon @click.stop="() => copyInfo(rowIdx)" class="copy-icon">
+                      <OIcon @click.stop="() => copyInfo(row.sub_id || row.id)" class="copy-icon">
                         <IconCopy />
                       </OIcon>
                     </template>
@@ -714,7 +716,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                       <OMeetingDetail
                         :show="expanded.includes(row.sub_id || row.id)"
                         :data="row"
-                        :ref="(insRef) => getDetailRefs(insRef, row.id)"
+                        :ref="(insRef) => getDetailRefs(insRef, row.sub_id || row.id)"
                         from="my"
                       />
                       <div class="meeting-btn" v-if="!row.isExpired && !row.is_delete">
@@ -922,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 {
@@ -1230,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);
@@ -1244,8 +1246,12 @@ const cancelActions = computed<DialogActionT[]>(() => {
             .title-text {
               color: var(--o-color-primary1);
             }
-            @include respond('>pad_v') {
-              --copy-display: inline-flex;
+
+            .o-collapse-item-title {
+              .copy-icon {
+                opacity: 1;
+                visibility: visible;
+              }
             }
           }
 
@@ -1271,12 +1277,26 @@ const cancelActions = computed<DialogActionT[]>(() => {
             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);
+              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);
+              }
+
+              .o-collapse-item-title {
+                .copy-icon {
+                  opacity: 1;
+                  visibility: visible;
+                }
+              }
             }
           }
         }
@@ -1284,35 +1304,37 @@ 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);
-          position: relative;
+
+          @include respond('laptop') {
+            gap: var(--o-gap-3);
+          }
+
+          @include respond('<=pad') {
+            gap: var(--o-gap-2);
+          }
 
           .o-collapse-item-icon {
-            position: relative;
-            top: 4px;
             flex-shrink: 0;
-            @include respond('phone') {
-              position: absolute;
-              right: 0;
-              width: 20px;
-              height: 20px;
-              font-size: 20px;
-              top: 50%;
-              transform: translateY(-50%);
-            }
           }
 
           .o-collapse-item-title {
             flex: 1;
             width: 0;
+            min-width: 0;
             display: flex;
-            flex-direction: column;
-            align-items: flex-start;
+            align-items: center;
             justify-content: space-between;
             margin-bottom: 0;
+            gap: var(--o-gap-4);
+
+            .item-header {
+              flex: 1;
+              min-width: 0;
+            }
             .item-header-left {
               display: flex;
               align-items: flex-start;
@@ -1336,6 +1358,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                 justify-content: center;
                 flex-shrink: 0;
                 --icon-size2: var(--icon-size);
+                padding: 1px;
 
                 .o-icon {
                   font-size: calc(var(--icon-size2) - 2px);
@@ -1347,7 +1370,8 @@ const cancelActions = computed<DialogActionT[]>(() => {
               }
 
               .header-info {
-                width: calc(100% - var(--o-gap-3) - var(--icon-size));
+                min-width: 0;
+                flex: 1;
 
                 .meeting-title {
                   font-weight: 500;
@@ -1383,12 +1407,28 @@ 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;
+                  }
 
+                  .o-divider {
+                    @include respond('phone') {
+                      display: none;
+                    }
+                  }
                   span:last-child {
                     width: 0;
                     flex: 1;
                     @include text-truncate(1);
+                    @include respond('phone') {
+                      width: fit-content;
+                    }
                   }
                 }
               }
@@ -1413,18 +1453,17 @@ const cancelActions = computed<DialogActionT[]>(() => {
             }
 
             .copy-icon {
-              position: absolute;
-              top: 50%;
-              transform: translateY(-50%);
-              right: calc(var(--collapse-item-icon-size) + var(--o-gap-4));
-              font-size: 18px;
-              height: 18px;
-              width: 18px;
-              display: var(--copy-display);
+              flex-shrink: 0;
+              font-size: 24px;
+              visibility: hidden;
+              opacity: 0;
               color: var(--o-color-info1);
-              @include respond('phone') {
-                bottom: var(--o-gap-2);
-                right: calc(20px + var(--o-gap-2))
+              height: 1em;
+              @include respond('<=laptop') {
+                font-size: 20px;
+              }
+              @include respond('<=pad_v') {
+                font-size: 24px;
               }
 
               &:hover {
@@ -1441,7 +1480,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));
@@ -1452,13 +1491,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

@@ -1,7 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick, watch } from 'vue';
-import { ODivider, OPopover, OIcon, OTabPane, OTab, OScroller } from '@opensig/opendesign';
-import { ElSelect, ElOption } from 'element-plus';
+import {
+  ODivider,
+  OPopover,
+  OIcon,
+  OTabPane,
+  OTab,
+  OScroller,
+  OSelect,
+  OOption,
+  OFigure,
+  OResult,
+} from '@opensig/opendesign';
 import dayjs from 'dayjs';
 import IconTips from '~icons/components/icon-tips.svg';
 import OMeetingSigAside from './components/OMeetingSigAside.vue';
@@ -10,6 +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 emptyDefaultImg from '@/assets/meeting/empty.png';
 
 const props = defineProps<{
   sigName: String;
@@ -17,6 +28,8 @@ const props = defineProps<{
   getDateListRequest: any;
   getEventsListRequest: any;
   dates: String[];
+  emptyImg?: any;
+  emptyText?: string;
 }>();
 const { t, meetingTabs } = useMeetingConfig();
 const { lePadV } = useScreen();
@@ -34,7 +47,7 @@ const monthIdx = ref(-1);
 const clickDateCell2 = (date: string) => {
   clickDateCell(date);
 };
-const changeSelect = (v: string) => {
+const changeSelect = (v: any) => {
   clickDateCell(v);
 };
 // 获取所选日期的会议列表
@@ -79,15 +92,6 @@ const selectTab = () => {
   getDates();
 };
 
-watch(
-  () => lePadV.value,
-  () => {
-    if (lePadV.value) {
-      tabType.value = CalendarDataType.ALL;
-      selectTab();
-    }
-  },
-);
 // -------------------- 获取有会议的日期 --------------------
 
 const getMonthAndDay = (date: string) => {
@@ -284,16 +288,26 @@ const list = computed(() => {
       </OTab>
     </div>
     <template v-if="lePadV && dateList.length">
-      <div class="date-select">
-        <ElSelect v-model="selectDate" @change="changeSelect">
-          <template #label>{{ t('meeting.latestMeeting') }} {{ formatDate(selectDate) }}</template>
-          <ElOption
-            v-for="date in dateList"
-            :key="date"
-            :value="date"
-            :label="formatDate(date)"
-          />
-        </ElSelect>
+      <div class="phone-filter-wrapper">
+        <div class="date-select">
+          <OSelect v-model="selectDate" @change="changeSelect">
+            <OOption
+              v-for="date in dateList"
+              :key="date"
+              :value="date"
+              :label="formatDate(date)"
+            />
+          </OSelect>
+        </div>
+        <div>
+          <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>
+                {{ item.label }}
+              </template>
+            </OTabPane>
+          </OTab>
+        </div>
       </div>
     </template>
     <ODivider class="meeting-divider" v-if="!lePadV || (lePadV && dateList.length)" />
@@ -316,7 +330,14 @@ const list = computed(() => {
           :rows="calendarRows"
         >
           <template #empty>
-            <slot name="empty"></slot>
+            <slot name="empty">
+              <OResult class="empty-result">
+                <template #image>
+                  <OFigure class="img" :src="emptyImg ?? emptyDefaultImg" />
+                </template>
+                <template #description>{{ emptyText ?? t('meeting.meetingEmptyText') }}</template>
+              </OResult>
+            </slot>
           </template>
         </OMeetingCalendarList>
       </OScroller>
@@ -335,8 +356,6 @@ const list = computed(() => {
   margin-top: var(--o-gap-5);
   @include respond('phone') {
     .meeting-card-header {
-      padding: var(--o-gap-3) var(--o-gap-4) 0;
-
       .el-input {
         flex-grow: 1;
       }
@@ -346,11 +365,44 @@ const list = computed(() => {
     }
   }
 
-  .date-select {
-    padding: var(--o-gap-4);
+  .phone-filter-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--o-gap-4);
+    padding: var(--o-gap-4) var(--o-gap-3) 0 var(--o-gap-3);
+    flex-wrap: nowrap;
+    @include respond('phone') {
+      flex-wrap: wrap;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--o-gap-2);
+    }
+
+    .date-select {
+      padding-bottom: var(--o-gap-2);
+      max-width: 240px;
+      @include respond('phone') {
+        max-width: 100%;
+        width: 100%;
+        padding-bottom: 0;
+      }
+
+      .o-select {
+        width: 100%;
+      }
+    }
+
+    .o-tab {
+      flex-shrink: 0;
+      --tab-text-height: calc(var(--tab-nav-text-height) + var(--o-gap-2) + 2px);
+      @include respond('phone') {
+        --tab-text-height: var(--tab-nav-text-height);
+      }
 
-    .o-select {
-      width: 100%;
+      .o-tab-head {
+        line-height: var(--tab-text-height);
+      }
     }
   }
 
@@ -358,7 +410,7 @@ const list = computed(() => {
     font-weight: 500;
     display: flex;
     align-items: center;
-    padding: var(--o-gap-3) var(--o-gap-6) 0;
+    padding: var(--o-gap-3) var(--o-gap-5) 0;
     @include text1;
     @include respond('<=pad') {
       padding: var(--o-gap-3) var(--o-gap-4) 0;
@@ -435,5 +487,14 @@ const list = computed(() => {
       height: auto;
     }
   }
+
+  .empty-result {
+    --result-image-width: 200px;
+    --result-image-height: 175px;
+
+    .o-result-description {
+      @include tip1;
+    }
+  }
 }
 </style>

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;
+    }
   }
 
 
@@ -368,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);
@@ -405,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 {
@@ -419,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 {
@@ -430,7 +434,13 @@ const computedList = computed<any[]>(() => {
         align-items: center;
         justify-content: center;
         gap: var(--o-gap-4);
-        padding-right: var(--o-gap-5);
+        padding-right: var(--o-gap-4);
+        @include respond('laptop') {
+          padding-right: var(--o-gap-3);
+        }
+        @include respond('<=pad') {
+          padding-right: var(--o-gap-2);
+        }
 
         .meet-title-left {
           flex-grow: 1;
@@ -438,11 +448,18 @@ const computedList = computed<any[]>(() => {
         }
 
         .copy-icon {
+          font-size: 24px;
           flex-shrink: 0;
           display: inline-flex;
           opacity: 0;
           visibility: hidden;
           color: var(--o-color-info1);
+          @include respond('<=laptop') {
+            font-size: 20px;
+          }
+          @include respond('<=pad_v') {
+            font-size: 24px;
+          }
 
           &:hover {
             color: var(--o-color-primary1);
@@ -569,8 +586,6 @@ const computedList = computed<any[]>(() => {
       .text {
         display: block;
         font-weight: 600;
-        min-width: 0;
-        flex: 1;
         @include text-truncate(1);
       }
     }