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

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 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;
+    }
   }
 
 
@@ -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);

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;

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.',
@@ -147,13 +147,15 @@ export default {
   'meeting.activityAddress': 'Address',
   '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',

package/src/i18n/zh.ts

@@ -146,6 +146,8 @@ export default {
   'meeting.activityAddress': '活动地点',
   'meeting.livePlatform': '直播平台',
   'meeting.meetingTopic': '会议主题',
+  'meeting.eventsTitle': '活动名称',
+  'meeting.summitTitle': '峰会名称',
   'meeting.meetingDetail': '会议详情',
   'meeting.meetingEtherpad': '会议纪要',
   'meeting.meetingReplay': '智能回放',