@opendesign-plus/components 0.0.1-rc.10

package/src/components/events/OEventsCalendar.vue

@@ -0,0 +1,588 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { buildVueDompurifyHTMLDirective } from 'vue-dompurify-html';
+import { OCollapse, OCollapseItem, OIcon, OIconChevronRight, OLink } from '@opensig/opendesign';
+import { useScreen } from '@opendesign-plus/composables';
+import type { CalendarItemT, EventsItemT, EventsCalendarPropsT } from './types';
+import { EVENTS_COLOR_MAP, EVENTS_ICON_MAP } from './config.ts';
+
+// 局部注册 v-dompurify-html 指令
+const vDompurifyHtml = buildVueDompurifyHTMLDirective();
+
+const { lePadV } = useScreen();
+
+const props = withDefaults(
+  defineProps<EventsCalendarPropsT>(),
+  {
+    data: () => [],
+  },
+);
+
+const monthList = ['JAN', 'FEB', 'MAR', 'Apr', 'May', 'JUN', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const expanded = ref<string[]>([]);
+
+// 移动端时默认展开第一个，pc端默认展开全部
+watch(
+  [() => props.data, () => lePadV.value],
+  () => {
+    if (props.data.length) {
+      if (lePadV.value) {
+        expanded.value = [props.data[0]?.name];
+      } else {
+        expanded.value = props.data.map((v) => v.name);
+      }
+    } else {
+      expanded.value = [];
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+// 从日期字符串中提取月份（1-12）
+const getMonthFromDate = (dateStr: string): number => {
+  // 格式: "2026/03/12" -> 3
+  const parts = dateStr.split('/');
+  return parseInt(parts[1], 10);
+};
+
+// 计算每个事件的行号，确保重叠的事件不在同一行
+const calculateEventLayout = (events: EventsItemT[]) => {
+  const columnMaxRow = new Array(12).fill(0); // 每个月份列当前占据到第几行
+  const eventLayouts: { event: EventsItemT; row: number; eventIndex: number; start: number; end: number }[] = [];
+
+  events.forEach((event, index) => {
+    // 处理 date 可能是 string 或 [string, string] 的情况
+    const [start, end] = Array.isArray(event.date)
+      ? [getMonthFromDate(event.date[0]), getMonthFromDate(event.date[1])]
+      : [getMonthFromDate(event.date), getMonthFromDate(event.date)];
+
+    // 找到该事件跨越的所有列中，最大的占据行数
+    let maxRow = 0;
+    for (let col = start - 1; col < end; col++) {
+      maxRow = Math.max(maxRow, columnMaxRow[col]);
+    }
+
+    // 将事件放在 maxRow + 1 行
+    const assignedRow = maxRow + 1;
+
+    // 更新所有涉及列的占据行数
+    for (let col = start - 1; col < end; col++) {
+      columnMaxRow[col] = assignedRow;
+    }
+
+    eventLayouts.push({
+      event,
+      row: assignedRow,
+      eventIndex: index,
+      start,
+      end,
+    });
+  });
+
+  return eventLayouts;
+};
+
+// 按月份组织单月事件
+const organizeByMonth = (events: EventsItemT[]) => {
+  const monthEvents: EventsItemT[][] = Array.from({ length: 12 }, () => []);
+
+  events.forEach((event) => {
+    const monthNum = Array.isArray(event.date) ? getMonthFromDate(event.date[0]) : getMonthFromDate(event.date);
+    monthEvents[monthNum - 1].push(event);
+  });
+
+  return monthEvents;
+};
+
+// 获取分组颜色，优先取传递进来的值
+const getColor = (item: CalendarItemT) => {
+  const color = item.color || EVENTS_COLOR_MAP[item.type];
+  return color?.startsWith('--') ? `var(${ color })` : color;
+};
+
+// 获取分组图标，优先取传递进来的值
+const getIcon = (item: CalendarItemT) => {
+  if (item.icon) {
+    return item.icon;
+  }
+  return EVENTS_ICON_MAP[item.type];
+};
+</script>
+
+<template>
+  <div class="o-events-calendar">
+    <div class="month-list" v-if="!lePadV">
+      <div class="month-header" v-for="m in monthList" :key="m">{{ m }}</div>
+    </div>
+    <OCollapse v-model="expanded">
+      <OCollapseItem v-for="(t, tIdx) in data" :key="tIdx" :value="t.name">
+        <template #title>
+          <div class="collapse-header">
+            <div class="collapse-title">
+              <div
+                class="title-icon"
+                :style="{
+                  '--bg-color': getColor(t)
+                }"
+              >
+                <OIcon>
+                  <component :is="getIcon(t)" />
+                </OIcon>
+              </div>
+
+              <span>{{ t.name }}</span>
+            </div>
+            <div class="collapse-desc" v-if="t.desc">
+              <div v-dompurify-html="t.desc"></div>
+            </div>
+          </div>
+        </template>
+        <!-- 跨月事件布局：使用 Grid -->
+        <div v-if="t.isSpanMonth" class="month-content month-content-span">
+          <div
+            v-for="{ event, row, eventIndex, start, end } in calculateEventLayout(t.data)"
+            :key="eventIndex"
+            class="event-item"
+            :class="{ 'event-item-center': event.align === 'center', 'has-link': event.link }"
+            :style="{
+              gridColumn: `${start} / ${end + 1}`,
+              gridRow: row,
+              '--bg-color': getColor(t) || undefined,
+            }"
+          >
+            <div class="event-location" v-if="event.location">{{ event.location }}</div>
+            <div class="event-name">
+              <OLink v-if="event.link" :href="event.link" target="_blank" v-bind="event.linkProps || {}">
+                {{ event.name }}
+              </OLink>
+              <span v-else>{{ event.name }}</span>
+            </div>
+          </div>
+        </div>
+        <!-- 单月事件布局：按月份分列 -->
+        <template v-else>
+          <div v-if="lePadV" class="month-content-row">
+            <div
+              v-for="(monthEvents, monthIndex) in organizeByMonth(t.data)"
+              :key="monthIndex"
+              class="month-row"
+              :class="{
+                'empty-month': monthEvents.length === 0,
+              }"
+            >
+              <div class="month-name">{{ monthList[monthIndex] }}</div>
+              <div
+                v-for="(event, eventIndex) in monthEvents"
+                :key="eventIndex"
+                class="event-item"
+                :class="event.link ? 'has-link' : ''"
+                :style="{
+                  '--bd-color': getColor(t) || undefined,
+                }"
+              >
+                <OLink v-if="event.link" :href="event.link" target="_blank">
+                  <div>
+                    <div class="event-name">
+                      <span>{{ event.name }}</span>
+                    </div>
+                    <div class="event-location">{{ event.location }}</div>
+                  </div>
+                  <OIcon>
+                    <OIconChevronRight />
+                  </OIcon>
+                </OLink>
+                <template v-else>
+                  <div class="event-name">
+                    {{ event.name }}
+                  </div>
+                  <div class="event-location">{{ event.location }}</div>
+                </template>
+              </div>
+            </div>
+          </div>
+          <div v-else class="month-content month-content-column">
+            <div v-for="(monthEvents, monthIndex) in organizeByMonth(t.data)" :key="monthIndex" class="month-column">
+              <div
+                v-for="(event, eventIndex) in monthEvents"
+                :key="eventIndex"
+                class="event-item"
+                :class="event.link ? 'has-link' : ''"
+                :style="{
+                  '--bg-color': getColor(t) || undefined,
+                }"
+              >
+                <div class="event-location">{{ event.location }}</div>
+                <div class="event-name">
+                  <OLink v-if="event.link" :href="event.link" target="_blank">
+                    <span>{{ event.name }}</span>
+                    <template #suffix>
+                      <OIcon>
+                        <OIconChevronRight></OIconChevronRight>
+                      </OIcon>
+                    </template>
+                  </OLink>
+                  <span v-else>{{ event.name }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </OCollapseItem>
+    </OCollapse>
+  </div>
+</template>
+
+<style lang="scss">
+.o-events-calendar {
+  .month-list {
+    display: flex;
+    border-radius: var(--o-radius_control-l) var(--o-radius_control-l) 0 0;
+    background-color: var(--o-color-control2-light);
+    color: var(--o-color-info1);
+
+    .month-header {
+      --header-height: 50px;
+      flex: 1;
+      height: var(--header-height);
+      line-height: var(--header-height);
+      text-align: center;
+      @include respond-to('laptop') {
+        --header-height: 40px;
+      }
+      @include respond-to('pad_h') {
+        --header-height: 38px;
+      }
+    }
+  }
+
+  .o-collapse {
+    --collapse-padding: 0;
+    --collapse-radius: 0 0 var(--o-radius_control-l) var(--o-radius_control-l);
+    @include respond-to('pad_v') {
+      --collapse-radius: var(--o-radius_control-l);
+    }
+    @include respond-to('phone') {
+      --collapse-radius: var(--o-radius_control-l);
+    }
+
+    .o-collapse-item {
+      .o-collapse-item-header {
+        padding: var(--o-gap-4) var(--o-gap-6);
+        align-items: center;
+
+        .o-collapse-item-title {
+          flex: 1;
+        }
+      }
+
+      .o-collapse-item-body {
+        margin-bottom: 0;
+      }
+
+      &.o-collapse-item-expanded {
+        .o-collapse-item-header {
+          border-bottom: 1px solid var(--o-color-control4);
+        }
+      }
+    }
+  }
+
+  .collapse-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-right: var(--o-gap-4);
+    @include respond-to('<=pad_v') {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .collapse-title {
+      display: flex;
+      align-items: center;
+
+      .title-icon {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: var(--o-gap-4);
+        background-color: rgb(var(--bg-color));
+      }
+
+      .o-icon {
+        font-size: 20px;
+        color: var(--o-white);
+        @include respond-to('laptop') {
+          font-size: 16px;
+        }
+        @include respond-to('pad_h') {
+          font-size: 16px;
+        }
+
+        svg {
+          fill: none;
+        }
+      }
+
+      span {
+        font-weight: 600;
+        @include text2;
+      }
+    }
+
+    .collapse-desc {
+      display: flex;
+      align-items: center;
+      font-weight: 400;
+      color: var(--o-color-info3);
+      white-space: normal;
+      @include text1;
+      @include respond-to('<=pad_v') {
+        margin-top: var(--o-gap-1);
+        font-size: 12px;
+      }
+
+      a {
+        color: var(--o-color-primary1);
+      }
+    }
+  }
+
+  .month-content {
+    padding: var(--o-gap-3) 0;
+    position: relative;
+    @include respond-to('pad_h') {
+      padding: var(--o-gap-2) 0;
+    }
+    background-image: linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 1 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 1 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 1 + 0.5px),
+        transparent calc(100% / 12 * 1 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 2 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 2 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 2 + 0.5px),
+        transparent calc(100% / 12 * 2 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 3 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 3 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 3 + 0.5px),
+        transparent calc(100% / 12 * 3 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 4 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 4 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 4 + 0.5px),
+        transparent calc(100% / 12 * 4 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 5 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 5 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 5 + 0.5px),
+        transparent calc(100% / 12 * 5 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 6 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 6 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 6 + 0.5px),
+        transparent calc(100% / 12 * 6 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 7 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 7 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 7 + 0.5px),
+        transparent calc(100% / 12 * 7 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 8 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 8 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 8 + 0.5px),
+        transparent calc(100% / 12 * 8 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 9 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 9 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 9 + 0.5px),
+        transparent calc(100% / 12 * 9 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 10 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 10 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 10 + 0.5px),
+        transparent calc(100% / 12 * 10 + 0.5px)
+    ),
+    linear-gradient(
+        to right,
+        transparent calc(100% / 12 * 11 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 11 - 0.5px),
+        var(--o-color-control4) calc(100% / 12 * 11 + 0.5px),
+        transparent calc(100% / 12 * 11 + 0.5px)
+    );
+
+    --event-gap: 6px;
+    @include respond-to('pad_h') {
+      --event-gap: var(--o-gap-1);
+    }
+    // 跨月事件布局：Grid
+    &.month-content-span {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      grid-auto-rows: auto;
+      gap: var(--o-gap-3) 0;
+
+      .event-item {
+        margin: 0 var(--event-gap);
+      }
+    }
+
+    // 单月事件布局：Flex 列
+    &.month-content-column {
+      display: flex;
+    }
+
+    .month-column {
+      flex: 1 1 0;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--o-gap-3);
+      padding: 0 var(--event-gap);
+
+      .event-item {
+        width: 100%;
+        margin: 0;
+      }
+    }
+
+    .event-item {
+      align-self: start;
+
+      .event-location {
+        color: var(--o-color-info3);
+        margin-bottom: var(--o-gap-1);
+        @include tip2;
+      }
+
+      .event-name {
+        color: var(--o-color-info1);
+        min-height: 32px;
+        padding: 2px var(--o-gap-2);
+        border-radius: 4px;
+        word-break: normal;
+        overflow-wrap: anywhere;
+        background: linear-gradient(to right, rgba(var(--bg-color), 0.06) 0%, rgba(var(--bg-color), 0.2) 100%), var(--o-color-fill2); // 底层实色背景遮住分割线
+        display: flex;
+        align-items: center; // 垂直居中
+        justify-content: center;
+        @include tip1;
+
+        .o-link {
+          --link-color: var(--o-color-info1);
+          --link-gap: 2px;
+          display: flex;
+          @include tip1;
+          @include respond-to('pad_v') {
+            color: var(--o-color-info1);
+          }
+
+          .o-link-main {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        .o-icon {
+          font-size: 16px;
+        }
+      }
+
+      &.event-item-center {
+        .event-name {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .month-content-row {
+    padding: 0 var(--o-gap-3);
+
+    .month-row {
+      border-bottom: 1px solid var(--o-color-control4);
+      padding: var(--o-gap-2) 0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &.empty-month {
+        display: none;
+      }
+
+      .month-name {
+        color: var(--o-color-info2);
+        font-weight: 400;
+        @include tip1;
+      }
+
+      .event-item {
+        margin-top: var(--o-gap-2);
+        padding-left: 14px;
+        border-left: 2px solid rgb(var(--bd-color));
+
+        .event-name {
+          font-weight: 500;
+          color: var(--o-color-info1);
+          @include text1;
+        }
+
+        .event-location {
+          font-weight: 400;
+          color: var(--o-color-info3);
+          @include tip1;
+        }
+
+        &.has-link {
+          display: flex;
+
+          .o-link {
+            flex: 1;
+            --link-color: var(--o-color-info1);
+
+            .o-link-main {
+              width: 100%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+
+            .o-icon {
+              font-size: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+</style>