@opendesign-plus/components 0.0.1-rc.35 → 0.0.1-rc.36

package/src/components/events/OEventsCalendar.vue

@@ -1,600 +0,0 @@
-<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 {
-  --events-card-radius: var(--o-radius-xs);
-  --events-name-radius: var(--o-radius-xs);
-  .month-list {
-    display: flex;
-    border-radius: var(--events-card-radius) var(--events-card-radius) 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('laptop') {
-        --header-height: 40px;
-      }
-      @include respond('pad_h') {
-        --header-height: 38px;
-      }
-    }
-  }
-
-  .o-collapse {
-    --collapse-padding: 0;
-    --collapse-radius: 0 0 var(--events-card-radius) var(--events-card-radius);
-    @include respond('pad_v') {
-      --collapse-radius: var(--events-card-radius);
-    }
-    @include respond('phone') {
-      --collapse-radius: var(--events-card-radius);
-    }
-
-    .o-collapse-item {
-      .o-collapse-item-header {
-        padding: var(--o-gap-4) var(--o-gap-6);
-        align-items: center;
-        @include respond('<=pad_v') {
-          padding: var(--o-gap-2) var(--o-gap-3);
-        }
-
-        .o-collapse-item-title {
-          flex: 1;
-          margin-bottom: 0;
-        }
-      }
-
-      .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('<=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));
-        @include respond('<=pad_v') {
-          margin-right: var(--o-gap-2);
-        }
-      }
-
-      .o-icon {
-        font-size: 20px;
-        color: var(--o-white);
-        @include respond('laptop') {
-          font-size: 16px;
-        }
-        @include respond('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('<=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('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('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: var(--events-name-radius);
-        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('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;
-        @include respond('<=pad_v') {
-          @include text2;
-        }
-      }
-
-      .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>