@opendesign-plus-test/components 0.0.1-rc.42 → 0.0.1-rc.45

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,7 +196,7 @@ 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') {
+    @include respond('<=pad_v') {
       padding: var(--o-gap-3) var(--o-gap-4);
     }
 
@@ -191,10 +210,10 @@ const list = computed(() => {
         flex-shrink: 0;
         margin-right: var(--o-gap-5);
         font-weight: 500;
-        @include respond-to('pad_v') {
+        @include respond('pad_v') {
           margin-right: var(--o-gap-4);
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           margin-right: var(--o-gap-4);
         }
       }
@@ -217,7 +236,7 @@ const list = computed(() => {
     .o-input {
       .o-icon-search {
         font-size: 24px;
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           font-size: 16px;
         }
       }
@@ -228,15 +247,15 @@ const list = computed(() => {
     grid-template-columns: repeat(4, 1fr);
     gap: var(--o-gap-6);
     margin-top: var(--o-gap-6);
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       grid-template-columns: repeat(1, 1fr);
       container-type: inline-size;
     }
-    @include respond-to('pad_v') {
+    @include respond('pad_v') {
       margin-top: var(--o-gap-4);
       gap: var(--o-gap-3);
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: var(--o-gap-4);
       gap: var(--o-gap-3);
     }
@@ -244,23 +263,22 @@ const list = computed(() => {
     .o-card {
       aspect-ratio: 1 / 1;
       position: relative;
-      @include respond-to('<=pad_v') {
+      @include respond('<=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 计入总尺寸
@@ -268,16 +286,25 @@ 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') {
+        @include respond('pad_v') {
           margin-top: var(--o-gap-4);
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           margin-top: var(--o-gap-4);
         }
 
@@ -290,7 +317,7 @@ const list = computed(() => {
           top: var(--o-gap-3);
           right: var(--o-gap-3);
           border-radius: var(--o-radius-xs);
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             --tag-padding: var(--o-gap-1);
           }
         }
@@ -301,10 +328,10 @@ const list = computed(() => {
           height: 3lh; // 3倍行高
           @include h2;
           @include text-truncate(3);
-          @include respond-to('pad_v') {
+          @include respond('pad_v') {
             @include h1;
           }
-          @include respond-to('phone') {
+          @include respond('phone') {
             height: 2lh;
             @include text-truncate(2);
           }
@@ -322,13 +349,13 @@ const list = computed(() => {
           }
 
           @include text1;
-          @include respond-to('pad_v') {
+          @include respond('pad_v') {
             margin-top: var(--o-gap-2);
           }
-          @include respond-to('phone') {
+          @include respond('phone') {
             margin-top: var(--o-gap-2);
           }
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             display: flex;
             align-items: center;
             .o-divider {

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/OHeader.vue

@@ -149,9 +149,9 @@ const handleMouseleaveSub = (val: string) => {
 }
 
 .header-wrap-dark {
-  box-shadow: 0 3px 9px 0 rgba(var(--o-mixedgray-4), 0.08);
+  box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
   .header-nav-content {
-    box-shadow: 0 3px 9px 0 rgba(var(--o-mixedgray-4), 0.08);
+    box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
   }
 }
 </style>

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>