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

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">
@@ -1245,7 +1247,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               color: var(--o-color-primary1);
             }
             @include respond('>pad_v') {
-              --copy-display: inline-flex;
+              --copy-display: block;
             }
           }
 
@@ -1272,7 +1274,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
             background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
 
             @include respond('<=pad_v') {
-              --copy-display: inline-flex;
+              --copy-display: block;
             }
 
             .o-collapse-item-header {
@@ -1288,31 +1290,33 @@ const cancelActions = computed<DialogActionT[]>(() => {
           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 +1340,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 +1352,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;
@@ -1384,11 +1390,23 @@ const cancelActions = computed<DialogActionT[]>(() => {
                   align-items: center;
                   font-weight: 400;
                   @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 +1431,16 @@ 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;
+              flex-shrink: 0;
+              font-size: 24px;
               display: var(--copy-display);
               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 {

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 emptyImg from '@/assets/meeting/empty.png';
 
 const props = defineProps<{
   sigName: String;
@@ -34,7 +45,7 @@ const monthIdx = ref(-1);
 const clickDateCell2 = (date: string) => {
   clickDateCell(date);
 };
-const changeSelect = (v: string) => {
+const changeSelect = (v: any) => {
   clickDateCell(v);
 };
 // 获取所选日期的会议列表
@@ -79,15 +90,6 @@ const selectTab = () => {
   getDates();
 };
 
-watch(
-  () => lePadV.value,
-  () => {
-    if (lePadV.value) {
-      tabType.value = CalendarDataType.ALL;
-      selectTab();
-    }
-  },
-);
 // -------------------- 获取有会议的日期 --------------------
 
 const getMonthAndDay = (date: string) => {
@@ -284,16 +286,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 +328,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" />
+                </template>
+                <template #description>{{ t('meeting.meetingEmptyText') }}</template>
+              </OResult>
+            </slot>
           </template>
         </OMeetingCalendarList>
       </OScroller>
@@ -335,8 +354,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 +363,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 +408,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 +485,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

@@ -95,19 +95,26 @@ const computedList = computed<any[]>(() => {
     let end_date_time = '';
     if (type !== CalendarDataType.MEETING) {
       let activity_type = activityTypeMap.value.get(v.activity_type)?.label;
+      const isSameDay = v.start_date && (v.start_date === v.end_date || !v.end_date);
       if (v.start_date) {
         dateRange = props.disableFormat ? v.start_date : formatDate(v.start_date);
       }
-      if (v.start) {
-        dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
-      }
-      if (v.end_date || v.end) {
-        dateRange += `${ dateRange ? ' -' : '' }`;
-        if (v.end_date && v.end_date !== v.start_date) {
-          dateRange += `${ dateRange ? ' ' : '' }${ props.disableFormat ? v.end_date : formatDate(v.end_date) }`;
+      if (isSameDay) {
+        if (v.start) {
+          dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
+          if (v.end) {
+            dateRange += `${ dateRange ? ' - ' : '' }${ v.end }`;
+          }
         }
-        if (v.end) {
-          dateRange += `${ dateRange ? ' ' : '' }${ v.end }`;
+      } else {
+        if (v.start) {
+          dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
+        }
+        if (v.end_date) {
+          dateRange += `${ dateRange ? ' - ' : '' }${ props.disableFormat ? v.end_date : formatDate(v.end_date) }`;
+          if (v.end) {
+            dateRange += `${ dateRange ? ' ' : '' }${ v.end }`;
+          }
         }
       }
       if (v.start_date) {
@@ -120,7 +127,7 @@ const computedList = computed<any[]>(() => {
         end_date_time = props.disableFormat ? v.end_date : formatDate(v.end_date);
       }
       if (v.end) {
-        end_date_time += `${ start_date_time ? ' ' : '' }${ v.end }`;
+        end_date_time += `${ end_date_time ? ' ' : '' }${ v.end }`;
       }
 
       return {
@@ -146,9 +153,9 @@ const computedList = computed<any[]>(() => {
     } = v;
     dateRange = props.disableFormat ? date : formatDate(date);
     if (start && end) {
-      dateRange += `${ dateRange ? ' ' : '' } ${ start } - ${ end }`;
+      dateRange += `${ dateRange ? ' ' : '' }${ start } - ${ end }`;
     } else if (start || end) {
-      dateRange += `${ dateRange ? ' ' : '' } ${ start || end }`;
+      dateRange += `${ dateRange ? ' ' : '' }${ start || end }`;
     }
     if (is_cycle) {
       dateRange = `${ props.disableFormat ? cycle_start_date : formatDate(cycle_start_date) } - ${ props.disableFormat ? cycle_end_date : formatDate(cycle_end_date) }`;
@@ -325,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;
+    }
   }
 
 
@@ -423,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;
@@ -431,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);

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

@@ -15,7 +15,7 @@ const props = defineProps<{
 }>();
 const { t, getPlatformLabel } = useMeetingConfig();
 const { locale } = useI18n();
-const isZh = computed(() => locale.value === 'zh');
+const isEn = computed(() => locale.value === 'en');
 // 会议详情配置
 const infoList = computed(() =>
   [
@@ -92,13 +92,24 @@ const columns = computed<ColumnItemT[]>(() => {
 
 const domRef = ref([]);
 const SPLIT_MARK = '|';
+
+const titleMap = ref<Record<CalendarDataType, string>>({
+  [CalendarDataType.ALL]: t('meeting.meetingTopic'),
+  [CalendarDataType.MEETING]: t('meeting.meetingTopic'),
+  [CalendarDataType.EVENTS]: t('meeting.eventsTitle'),
+  [CalendarDataType.APPROVAL]: t('meeting.eventsTitle'),
+  [CalendarDataType.SUMMIT]: t('meeting.summitTitle'),
+});
 // 复制会议内容
 const copyInfo = () => {
   try {
-    const colon = isZh.value ? '：' : ': ';
-    let text = `${ t('meeting.meetingTopic') }${ colon }${ props.data.topic || props.data.name || props.data.title }\n`;
+    const colon = !isEn.value ? '：' : ': ';
+    let text = `${ titleMap.value[props.data.type] ?? t('meeting.meetingTopic') }${ colon }${ props.data.topic || props.data.name || props.data.title }\n`;
     text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => {
-      return `${ pre }${ cur.textContent ? cur.textContent.replace(SPLIT_MARK, colon) : '' }\n`;
+      if (cur.textContent) {
+        return `${ pre }${ cur.textContent ? cur.textContent.replace(SPLIT_MARK, colon) : '' }\n`;
+      }
+      return pre;
     }, '');
     navigator.clipboard.writeText(text);
     return Promise.resolve();
@@ -122,6 +133,7 @@ defineExpose({ copyInfo });
         'is-empty':!getField(info.key)?.length,
         [`label-item_${data.id}`]: true,
         [`type_${data.type}`]: true,
+        'is-en': isEn,
       }"
     >
       <template v-if="getField(info.key) && !info.isRecord">
@@ -190,6 +202,12 @@ defineExpose({ copyInfo });
       }
     }
 
+    &.is-en {
+      .label {
+        width: 6em;
+      }
+    }
+
     .label {
       width: 4em;
       flex-shrink: 0;

package/src/components/meeting/components/OMeetingSigAside.vue

@@ -80,7 +80,7 @@ const changeMonth = (step: number) => {
 .o-sig-meeting-aside {
   width: 35%;
   flex-shrink: 0;
-  padding: var(--o-gap-4);
+  padding: var(--o-gap-4) var(--o-gap-5);
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--o-color-control4);
@@ -91,7 +91,7 @@ const changeMonth = (step: number) => {
     border-right: none;
   }
   @include respond('phone') {
-    padding: 16px;
+    padding: var(--o-gap-4);
     .title {
       margin-bottom: var(--o-gap-2);
     }
@@ -139,6 +139,7 @@ const changeMonth = (step: number) => {
           font-weight: 500;
           margin-bottom: var(--o-gap-1);
           color: var(--o-color-info1);
+          @include tip1;
         }
 
         .day-c {
@@ -147,9 +148,9 @@ const changeMonth = (step: number) => {
           flex-wrap: nowrap;
 
           .o-icon {
-            width: 20px;
-            height: 20px;
-            font-size: 18px;
+            width: 16px;
+            height: 16px;
+            font-size: 14px;
             padding: 1px;
             line-height: 1em;
             position: relative;