@opendesign-plus-test/components 0.0.1-rc.41 → 0.0.1-rc.43

package/src/components/events/OEventsList.vue

@@ -17,6 +17,7 @@ import { useI18n } from '@/i18n';
 
 import { CITY_MAP, DEFAULT_COVER } from './config.ts';
 import { useScreen } from '@opendesign-plus/composables';
+import dayjs from 'dayjs';
 
 const { t } = useI18n();
 const { lePadV } = useScreen();
@@ -84,12 +85,30 @@ const changeKeyword = () => {
 const list = computed(() => {
   return props.data
     .map((v: EventsCardItemT) => {
+      let startDate = v.startDate;
+      let endDate = v.endDate;
+      let dateStr = dayjs(v.date).format('YYYY/MM/DD');
+      if (startDate && endDate) {
+        const yearFirstDay = dayjs().format('YYYY-01-01');
+        if (compareDate(yearFirstDay, startDate)) {
+          startDate = yearFirstDay;
+        }
+        const yearLastDay = dayjs().format('YYYY-12-31');
+        if (compareDate(endDate, yearLastDay)) {
+          endDate = yearLastDay;
+        }
+        dateStr = `${ dayjs(startDate).format('YYYY/MM/DD') }-${ dayjs(endDate).format('MM/DD') }`;
+      }
       return {
         ...v,
-        status: !compareDate(new Date(), v.date as string) ? EventsStatusT.ING : EventsStatusT.FINISH,
+        startDate,
+        endDate,
+        dateStr,
+        status: !compareDate(new Date(), v.date || v.endDate as string) ? EventsStatusT.ING : EventsStatusT.FINISH,
+
       };
     })
-    .sort((a: EventsCardItemT, b: EventsCardItemT) => (compareDate(a.date as string, b.date as string) ? -1 : 1))
+    .sort((a: EventsCardItemT, b: EventsCardItemT) => (compareDate(a.date || a.endDate as string, b.date || b.endDate as string) ? -1 : 1))
     .map((v) => {
       const city = v.city?.replace('市', '')?.replace('中国', '')?.replaceAll(' ', '');
       let cover = null;
@@ -143,7 +162,7 @@ const list = computed(() => {
         </OTag>
         <div class="event-name">{{ item.name }}</div>
         <div class="event-desc">
-          <div class="event-date">{{ item.date }}</div>
+          <div class="event-date">{{ item.dateStr }}</div>
           <ODivider direction="v" />
           <div class="event-location" v-if="item.city">{{ item.city }}</div>
         </div>
@@ -177,6 +196,9 @@ const list = computed(() => {
     padding: var(--o-gap-5) var(--o-gap-6);
     gap: var(--o-gap-3) var(--o-gap-2);
     @include text1;
+    @include respond-to('<=pad_v') {
+      padding: var(--o-gap-3) var(--o-gap-4);
+    }
 
     .filter-left {
       display: flex;
@@ -227,6 +249,7 @@ const list = computed(() => {
     margin-top: var(--o-gap-6);
     @include respond-to('<=pad_v') {
       grid-template-columns: repeat(1, 1fr);
+      container-type: inline-size;
     }
     @include respond-to('pad_v') {
       margin-top: var(--o-gap-4);
@@ -243,16 +266,19 @@ const list = computed(() => {
       @include respond-to('<=pad_v') {
         aspect-ratio: 1 / 0.4;
       }
+      @container (max-width: 300px) {
+        height: 140px;
+        width: 100%;
+        aspect-ratio: unset;
+      }
 
       .o-card-cover {
         padding: 0;
+        height: 100%;
       }
 
-      .o-card-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
+      .o-card-main {
+        padding: 0;
         position: absolute;
         overflow: hidden; // 防止内容溢出
         box-sizing: border-box; // 确保 padding 计入总尺寸
@@ -260,11 +286,20 @@ const list = computed(() => {
         top: 0;
         width: 100%;
         height: 100%;
+      }
+      .o-card-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
         color: var(--o-color-white);
         text-align: center;
-        cursor: pointer;
         padding: var(--o-gap-6);
-        z-index: 10;
 
         @include respond-to('pad_v') {
           margin-top: var(--o-gap-4);

package/src/components/events/config.ts

@@ -17,7 +17,7 @@ export const EVENTS_ICON_MAP = {
   summit: IconSummit,
 };
 
-export const CITY_MAP = {
+export const CITY_MAP: Record<string, string | string[]> = {
   上海: 'https://infrastructure-website.osinfra.cn/picture/city/shanghai.jpg',
   北京: 'https://infrastructure-website.osinfra.cn/picture/city/beijing.jpg',
   南京: 'https://infrastructure-website.osinfra.cn/picture/city/nanjing.jpg',

package/src/components/events/types.ts

@@ -47,7 +47,10 @@ export interface StepItemT {
 // 活动列表
 export interface EventsCardItemT {
   name: string; // 事件名称
-  date: string; // 事件日期
+  date?: string; // 事件日期
+  startDate?: string; // 事件开始日期
+  endDate?: string; // 事件结束日期
+  dateStr?: string; // 经处理后的展示时间
   city: string; // 事件城市
   cover?: string; // 卡片封面，如果不传递，组件内部通过date计算得出
   status?: EventsStatusT; // 事件状态，不传递，组件内部通过date计算得出

package/src/components/header/OHeaderMobile.vue

@@ -5,13 +5,14 @@ import { OIcon, OIconArrowLeft } from '@opensig/opendesign';
 import ContentWrapper from '../common/ContentWrapper.vue';
 import HeaderNavMobile from './components/HeaderNavMobile.vue';
 
-import { type NavT } from './types.ts';
+import type { NavT, LangItemT } from './types.ts';
 
 import IconClose from '~icons/components/icon-close.svg';
 import IconMenu from '~icons/components/icon-header-menu.svg';
 
 export interface OHeaderT {
   (e: 'go-back'): void;
+  (e: 'lang-click', val: LangItemT): void;
   (e: 'go-home'): void;
 }
 
@@ -40,6 +41,11 @@ const mobileClick = () => {
 const handleClick = () => {
   menuPanel();
 };
+
+const langClick = (val: LangItemT) => {
+  emit('lang-click', val);
+  menuPanel();
+};
 </script>
 
 <template>
@@ -89,6 +95,7 @@ const handleClick = () => {
         :menu-show="menuShow"
         @handle-click="handleClick"
         @on-click="mobileClick"
+        @lang-click="langClick"
       >
         <template #tool>
           <slot name="tool"></slot>

package/src/components/header/components/HeaderContent.vue

@@ -33,8 +33,11 @@ const onMouseLeave = () => {
 
 const showDesc = ref(false);
 const descMouseenter = (e: MouseEvent) => {
-  if (!e || !e.target) return;
-  showDesc.value = e.target.clientHeight < e.target.scrollHeight;
+  if (!e || !e.target) {
+    return;
+  }
+  const target = e.target as HTMLElement;
+  showDesc.value = target!.clientHeight < target.scrollHeight;
 };
 
 const onClickNavHref = (item: any, sub: any) => {
@@ -95,7 +98,8 @@ const onClickShortcut = (item: any) => {
                       <OTag v-if="subItem.tag" round="pill" color="danger" size="small" class="content-tag">{{ subItem.tag }}</OTag>
                     </a>
                     <div v-if="subItem.description" class="desc-container">
-                      <p class="item-desc" :title="showDesc ? subItem.description : null" @mouseenter="descMouseenter($event)">
+                      <p class="item-desc" :title="showDesc ? subItem.description : undefined"
+                         @mouseenter="descMouseenter($event)">
                         {{ subItem.description }}
                       </p>
                     </div>

package/src/components/header/components/HeaderNavMobile.vue

@@ -2,10 +2,11 @@
 import { ref, onMounted, watch } from 'vue';
 import { OIcon, OTag } from '@opensig/opendesign';
 
-import { type NavMobileItemT, NavType } from '../types.ts';
+import { type NavMobileItemT, NavType, CodeItemT, LangItemT } from '../types.ts';
 
 export interface OHeaderEmitsT {
   (e: 'on-click'): void;
+  (e: 'lang-click', val: LangItemT): void;
   (e: 'handle-click', val: any): void;
 }
 const emit = defineEmits<OHeaderEmitsT>();
@@ -42,9 +43,11 @@ const onClick = (url: string, target?: string) => {
   emit('on-click');
 };
 
-const onClickNav = (val: any) => {
+const onClickNav = (val: CodeItemT | LangItemT) => {
   if (navActive.value === NavType.CODE) {
     onClick(val.href, val?.target);
+  } else if (navActive.value === NavType.LANG) {
+    emit('lang-click', val);
   }
 };
 

package/src/components/header/types.ts

@@ -11,6 +11,8 @@ export interface ChildrenItemT {
   description?: string; // 描述
   href?: string; // 链接
   tag?: tagT; // 标签
+  icon?: any;
+  target?: string;
   children?: ChildrenItemT[];
 }
 
@@ -22,6 +24,8 @@ export interface ShortcutItemT {
   tag?: tagT; // 标签
   remark?: string; // 时间
   type?: string; // 类型
+  target?: string;
+  icon?: string;
 }
 
 export interface NavItemT {

package/src/components/meeting/OMeetingCalendar.vue

@@ -19,7 +19,14 @@ import IconSummit from '~icons/meeting/icon-summit.svg';
 import IconMeeting from '~icons/meeting/icon-meet.svg';
 import { Locales } from '@/i18n';
 import { useMeetingConfig } from './composables/useMeetingConfig';
-import { CalendarDataType, MeetingCalendarPropsT, MeetingGroupType } from './types.ts';
+import {
+  CalendarDataType,
+  MeetingEventsItemT,
+  MeetingCalendarPropsT,
+  MeetingGroupType, MeetingItemT,
+  meetingTabT,
+  SummitItemT,
+} from './types.ts';
 import { formatDate } from './utils.ts';
 import { useDebounceFn } from '@vueuse/core';
 
@@ -35,16 +42,16 @@ const { t, locale, meetingTabs, getConfig } = useMeetingConfig();
 const isEn = computed(() => locale.value === Locales.EN);
 
 const latestDay = ref<string>('');
-const dateList = ref([]);
-const summitData = ref([]);
-const summitDates = ref([]);
-const eventsData = ref([]);
-const eventsDates = ref([]);
+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([]);
+const meetingData = ref<MeetingItemT[]>([]);
 const limitTime = '2021-01-01';
-const tabType = ref(CalendarDataType.ALL);
-const tabs = computed(() => {
+const tabType = ref<CalendarDataType>(CalendarDataType.ALL);
+const tabs = computed<meetingTabT[]>(() => {
   let list = meetingTabs.value;
   if (props.hiddenEvents) {
     list = list.filter((item) => item.value !== CalendarDataType.EVENTS);
@@ -68,24 +75,25 @@ const currentDay = ref('');
 const isAutoClick = ref(false);
 // sig组列表
 const group = ref('');
-const getSummitData = async (date) => {
+const getSummitData = async (date: string) => {
   if (props.getSummitListRequest) {
     const list = await props.getSummitListRequest(date);
-    summitData.value = (list || []).map(v => {
+    summitData.value = (list || []).map((v: SummitItemT) => {
       return {
-
         ...v,
         type: CalendarDataType.SUMMIT,
+        start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
+        end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
       };
     });
   } else {
     summitData.value = [];
   }
 };
-const getActivityData = async (date) => {
+const getActivityData = async (date: string) => {
   if (props.getEventsListRequest) {
     const list = await props.getEventsListRequest(date);
-    eventsData.value = (list || []).map(v => {
+    eventsData.value = (list || []).map((v: MeetingEventsItemT) => {
       return {
         ...v,
         type: CalendarDataType.EVENTS,
@@ -98,19 +106,19 @@ const getActivityData = async (date) => {
   }
 };
 
-const getDateList = async (date) => {
+const getDateList = async (date: string) => {
   if (props.getDateListRequest) {
-    props.getDateListRequest(date, group.value || '').then(res => {
+    props.getDateListRequest(date, group.value || '').then((res: string[]) => {
       dateList.value = res;
     });
   }
   if (props.getEventsDatesRequest) {
-    props.getEventsDatesRequest(date).then(res => {
+    props.getEventsDatesRequest(date).then((res: string[]) => {
       eventsDates.value = res;
     });
   }
   if (props.getSummitDatesRequest) {
-    props.getSummitDatesRequest(date).then(res => {
+    props.getSummitDatesRequest(date).then((res: string[]) => {
       summitDates.value = res;
     });
   }
@@ -124,12 +132,12 @@ const paramGetDaysData = async (params: { date: string; type: string }) => {
     return;
   }
   try {
-    const res = await props.getMeetingListRequest(params.date, group.value, '');
+    const res: MeetingItemT[] = await props.getMeetingListRequest(params.date, group.value, '');
     meetingData.value = res.map((v) => {
       return {
         ...v,
         time: `${ v.start }-${ v.end }`,
-        type: 'meeting',
+        type: CalendarDataType.MEETING,
         date: v.date || params.date,
       };
     }).sort((a: any, b: any) => {
@@ -146,7 +154,7 @@ const renderData = computed(() => {
     ...eventsData.value.filter(v => (!dayjs(v.start_date).isAfter(dayjs(currentDay.value)) && !dayjs(currentDay.value).isAfter(dayjs(v.end_date))) || v.dates?.includes(currentDay.value)),
     ...summitData.value.filter(v => v.dates?.includes(currentDay.value)),
   ].filter((v) => {
-    if (tabType.value === 'all') {
+    if (tabType.value === CalendarDataType.ALL) {
       return true;
     }
     return v.type === tabType.value;
@@ -228,13 +236,17 @@ const watchChange = (element: HTMLElement) => {
   });
 };
 
-onMounted(() => {
+const getCalendarHeight = async () => {
   // 设置右侧 日程列表高度
   const tbody = document.querySelector('.calendar-body .el-calendar__body') as HTMLElement;
   if (tbody) {
     watchChange(tbody);
     calendarHeight.value = `${ tbody.offsetHeight - 2 }px`;
   }
+};
+
+onMounted(() => {
+  getCalendarHeight();
   getDateData();
 });
 
@@ -374,8 +386,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         </div>
 
         <div>
-          <OScroller class="meeting-list" show-type="hover" size="small">
-            <OMeetingCalendarList :list="renderData" :groupType="groupType">
+          <OScroller class="meeting-list" show-type="hover" size="small" :style="{
+            '--height': calendarHeight
+          }">
+            <OMeetingCalendarList :list="renderData as unknown as MeetingItemT[]" :groupType="groupType">
               <template #empty>
                 <slot name="empty"></slot>
               </template>
@@ -401,20 +415,6 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
     width: 100%;
   }
 
-  .calendar-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--o-gap-5);
-    margin-bottom: var(--o-gap-5);
-    @include respond-to('<=pad_v') {
-      flex-direction: column-reverse;
-      justify-content: center;
-      gap: var(--o-gap-2);
-      margin-bottom: var(--o-gap-3);
-    }
-  }
-
   .calendar-body {
     display: flex;
     border-radius: var(--o-radius-xs);
@@ -751,12 +751,6 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           }
         }
       }
-
-      .prev, .next {
-        .el-calendar-day {
-          color: var(--o-color-info3);
-        }
-      }
     }
 
     .detail-list {
@@ -842,7 +836,6 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         justify-content: center;
         align-items: flex-end;
         height: 60px;
-        border-bottom: 1px solid var(--o-color-control4);
       }
 
       .o-tab {
@@ -878,19 +871,20 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         .o-tab-nav-anchor {
           .o-tab-nav-anchor-line {
             width: 100%;
+            @include respond-to('<=pad_v') {
+              width: 16px;
+            }
           }
         }
       }
     }
 
     .meeting-list {
-      height: v-bind('calendarHeight');
+      height: var(--height);
       @include respond-to('<=pad_v') {
         height: auto;
       }
     }
-
   }
-
 }
 </style>