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

package/src/components/events/OEventsList.vue

@@ -0,0 +1,463 @@
+<script setup lang="ts">
+import {
+  OCard,
+  ODivider,
+  OIcon,
+  OIconSearch,
+  OInput, OPagination,
+  ORadio,
+  ORadioGroup,
+  OTag,
+  OToggle,
+} from '@opensig/opendesign';
+import { computed, ref } from 'vue';
+import { type EventsCardItemT, EventsStatusT, type EventsListPropsT, SearchParamsT } from './types';
+import { compareDate } from './utils.ts';
+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();
+
+const props = withDefaults(
+  defineProps<EventsListPropsT>(),
+  {
+    data: () => [],
+  },
+);
+
+interface StatusOptionT {
+  label: string;
+  value: EventsStatusT;
+}
+
+const statusOptions: StatusOptionT[] = [
+  {
+    label: t('events.statusAll'),
+    value: EventsStatusT.ALL,
+  },
+  {
+    label: t('events.statusIng'),
+    value: EventsStatusT.ING,
+  },
+  {
+    label: t('events.statusFinish'),
+    value: EventsStatusT.FINISH,
+  },
+];
+
+defineSlots<{
+  empty?: () => any;
+}>();
+
+const emits = defineEmits<{
+  (e: 'search', params: SearchParamsT): void;
+}>();
+const status = ref<EventsStatusT>(EventsStatusT.ALL);
+const input = ref('');
+const keyword = ref('');
+
+const emitSearch = (params = {}) => {
+  emits(
+    'search',
+    Object.assign(
+      {
+        page: props.page,
+        pageSize: props.pageSize,
+        status: status.value,
+        keyword: keyword.value,
+      },
+      params,
+    ),
+  );
+};
+
+const changeStatus = () => {
+  emitSearch();
+};
+const changeKeyword = () => {
+  keyword.value = input.value;
+  emitSearch();
+};
+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,
+        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 || a.endDate as string, b.date || b.endDate as string) ? -1 : 1))
+    .map((v) => {
+      const city = v.city?.replace('市', '')?.replace('中国', '')?.replaceAll(' ', '');
+      let cover = null;
+
+      if (Array.isArray(CITY_MAP[city])) {
+        cover = CITY_MAP[city][v.name.length % CITY_MAP[city].length];
+      } else {
+        cover = CITY_MAP[city];
+      }
+      if (!cover) {
+        cover = DEFAULT_COVER;
+      }
+      return {
+        ...v,
+        cover,
+      };
+    });
+});
+</script>
+
+<template>
+  <div class="o-events-list">
+    <div class="filter-slot-wrapper">
+      <slot name="filter">
+        <div class="filter-wrapper">
+          <div class="filter-left">
+            <span>{{ t('events.status') }}</span>
+            <ORadioGroup v-model="status" :style="{ '--radio-group-gap': '8px' }" @change="changeStatus">
+              <ORadio v-for="t in statusOptions" :key="t.value" :value="t.value">
+                <template #radio="{ checked }">
+                  <OToggle :checked="checked">{{ t.label }}</OToggle>
+                </template>
+              </ORadio>
+            </ORadioGroup>
+          </div>
+          <OInput
+            size="large"
+            v-model="input"
+            :placeholder="t('events.searchPlaceholder')"
+            @pressEnter="changeKeyword"
+            @clear="changeKeyword"
+            clearable>
+            <template #prefix>
+              <OIcon class="input-icon">
+                <OIconSearch />
+              </OIcon>
+            </template>
+          </OInput>
+        </div>
+      </slot>
+    </div>
+    <div class="list-content">
+      <OCard v-for="item in list" :key="item.name" :cover="item.cover" :href="item.link">
+        <div class="tags-wrapper">
+          <template v-if="item.tags?.length">
+            <OTag v-for="tag in item.tags" :key="tag.title" size="medium">
+              <span>{{ tag.title }}</span>
+              <template #icon v-if="tag.icon">
+                <component :is="tag.icon"></component>
+              </template>
+            </OTag>
+          </template>
+          <OTag class="event-status">
+            {{ item.status === EventsStatusT.ING ? t('events.statusIng') : t('events.statusFinish') }}
+          </OTag>
+        </div>
+        <div class="event-name">{{ item.name }}</div>
+        <div class="event-desc">
+          <div class="event-date">{{ item.dateStr }}</div>
+          <ODivider direction="v" />
+          <div class="event-location" v-if="item.city">{{ item.city }}</div>
+        </div>
+      </OCard>
+    </div>
+    <template v-if="!list.length">
+      <slot name="empty"></slot>
+    </template>
+    <OPagination
+      v-if="total > 8"
+      :page="page"
+      :simple="lePadV"
+      :show-total="true"
+      :pageSize="pageSize"
+      :total="total"
+      @change="emitSearch"
+      :pageSizes="[4, 12, 24, 36, 48]"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.o-events-list {
+  --events-card-radius: var(--o-radius-xs);
+  --events-tag-radius: var(--o-radius-xs);
+
+  .filter-slot-wrapper {
+    background-color: var(--o-color-fill2);
+    border-radius: var(--events-card-radius);
+    padding: var(--o-gap-5) var(--o-gap-6);
+    gap: var(--o-gap-3) var(--o-gap-2);
+    @include text1;
+    @include respond('laptop') {
+      padding: var(--o-gap-4) var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      padding: var(--o-gap-4) var(--o-gap-5);
+    }
+    @include respond('pad_v') {
+      padding: var(--o-gap-3) var(--o-gap-4);
+    }
+    @include respond('phone') {
+      padding: var(--o-gap-3) var(--o-gap-4);
+    }
+  }
+
+  .filter-wrapper {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .filter-left {
+      display: flex;
+      align-items: center;
+      gap: var(--o-gap-2);
+      flex-wrap: wrap;
+
+      span:first-child {
+        flex-shrink: 0;
+        margin-right: var(--o-gap-5);
+        font-weight: 500;
+        @include respond('laptop') {
+          margin-right: var(--o-gap-4);
+        }
+        @include respond('pad_h') {
+          margin-right: var(--o-gap-3);
+        }
+        @include respond('pad_v') {
+          margin-right: var(--o-gap-4);
+        }
+        @include respond('phone') {
+          margin-right: var(--o-gap-4);
+        }
+      }
+      .o-toggle {
+        --toggle-size: 32px;
+        --toggle-padding: 3px 15px;
+        --toggle-radius: var(--events-tag-radius);
+        max-height: 32px;
+        --toggle-bg-color: var(--o-color-fill1);
+        --toggle-bg-color-hover: var(--o-color-control2-light);
+        --toggle-color: var(--o-color-info1);
+        --toggle-color-hover: var(--o-color-info1);
+        --toggle-color-active: var(--o-color-primary1);
+        --toggle-color-disabled: var(--o-color-info4);
+        @include text1;
+      }
+    }
+
+    .o-input {
+      .o-icon-search {
+        font-size: 24px;
+        @include respond('<=pad_v') {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  .list-content {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--o-gap-6);
+    margin-top: var(--o-gap-6);
+    @include respond('<=pad_v') {
+      grid-template-columns: repeat(1, 1fr);
+      container-type: inline-size;
+    }
+    @include respond('laptop') {
+      margin-top: var(--o-gap-5);
+      gap: var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      margin-top: var(--o-gap-4);
+      gap: var(--o-gap-4);
+    }
+    @include respond('pad_v') {
+      margin-top: var(--o-gap-4);
+      gap: var(--o-gap-3);
+    }
+    @include respond('phone') {
+      margin-top: var(--o-gap-4);
+      gap: var(--o-gap-3);
+    }
+
+    .o-card {
+      aspect-ratio: 1 / 1;
+      position: relative;
+      @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-main {
+        padding: 0;
+        position: absolute;
+        overflow: hidden; // 防止内容溢出
+        box-sizing: border-box; // 确保 padding 计入总尺寸
+        left: 0;
+        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;
+        padding: var(--o-gap-6);
+
+        @include respond('pad_v') {
+          margin-top: var(--o-gap-4);
+        }
+        @include respond('phone') {
+          margin-top: var(--o-gap-4);
+        }
+
+        .tags-wrapper {
+          position: absolute;
+          top: var(--o-gap-3);
+          right: var(--o-gap-3);
+          display: flex;
+          align-items: center;
+          column-gap: var(--o-gap-2);
+          flex-wrap: wrap;
+          justify-content: flex-end;
+          @include respond('phone') {
+            top: var(--o-gap-2);
+            right: var(--o-gap-2);
+          }
+
+          .o-tag {
+            --tag-color: rgb(var(--o-white));
+            --tag-bg-color: rgba(var(--o-black), 0.25);
+            --tag-padding: var(--o-gap-1) var(--o-gap-3);
+            border: none;
+            border-radius: var(--events-tag-radius);
+            @include respond('<=pad') {
+              --tag-padding: var(--o-gap-1);
+            }
+          }
+        }
+
+        .event-name {
+          font-weight: 500;
+          text-align: center;
+          height: 3lh; // 3倍行高
+          @include h2;
+          @include text-truncate(3);
+          @include respond('pad_v') {
+            @include h1;
+          }
+          @include respond('phone') {
+            height: 2lh;
+            @include text-truncate(2);
+          }
+        }
+
+        .event-desc {
+          text-align: center;
+          font-weight: 500;
+          margin-top: var(--o-gap-5);
+
+          .o-divider {
+            --o-divider-color: var(--o-color-info1-inverse);
+            --o-divider-bd-color: var(--o-color-info1-inverse);
+            display: none;
+          }
+
+          @include text1;
+          @include respond('laptop') {
+            margin-top: var(--o-gap-4);
+          }
+          @include respond('pad_h') {
+            margin-top: var(--o-gap-3);
+          }
+          @include respond('pad_v') {
+            margin-top: var(--o-gap-2);
+          }
+          @include respond('phone') {
+            margin-top: var(--o-gap-2);
+          }
+          @include respond('<=pad_v') {
+            display: flex;
+            align-items: center;
+            .o-divider {
+              display: block;
+            }
+            @include tip1;
+          }
+        }
+      }
+    }
+
+    .event-card {
+      border-radius: var(--events-card-radius);
+      color: rgb(var(--o-white));
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+  }
+
+  .o-pagination {
+    margin-top: var(--o-gap-6);
+    --pagination-item-bg-color-current: var(--o-color-primary1);
+    --pagination-item-color-current: #fff;
+
+    @include respond('laptop') {
+      margin-top: var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      margin-top: var(--o-gap-4);
+    }
+    @include respond('pad_v') {
+      margin-top: var(--o-gap-4);
+    }
+    @include respond('phone') {
+      margin-top: var(--o-gap-4);
+    }
+
+    .o-pagination-wrap {
+      justify-content: flex-end;
+    }
+  }
+
+}
+</style>

package/src/components/events/config.ts

@@ -0,0 +1,35 @@
+import IconSummit from '~icons/events/icon-summit.svg';
+import IconEvents from '~icons/events/icon-events.svg';
+import IconCompetition from '~icons/events/icon-competition.svg';
+import IconRelease from '~icons/events/icon-release.svg';
+
+export const EVENTS_COLOR_MAP = {
+  summit: '--o-orange-6',
+  events: '--o-cyan-6',
+  competition: '--o-blue-6',
+  release: '--o-purple-6',
+};
+
+export const EVENTS_ICON_MAP = {
+  events: IconEvents,
+  competition: IconCompetition,
+  release: IconRelease,
+  summit: IconSummit,
+};
+
+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',
+  天津: 'https://infrastructure-website.osinfra.cn/picture/city/tianjin.jpg',
+  成都: 'https://infrastructure-website.osinfra.cn/picture/city/chengdu.jpg',
+  无锡: 'https://infrastructure-website.osinfra.cn/picture/city/wuxi.jpg',
+  杭州: 'https://infrastructure-website.osinfra.cn/picture/city/hangzhou.jpg',
+  深圳: ['https://infrastructure-website.osinfra.cn/picture/city/shenzhen1.jpg', 'https://infrastructure-website.osinfra.cn/picture/city/shenzhen2.jpg'],
+  苏州: 'https://infrastructure-website.osinfra.cn/picture/city/suzhou.jpg',
+  西安: 'https://infrastructure-website.osinfra.cn/picture/city/xian.jpg',
+  郑州: 'https://infrastructure-website.osinfra.cn/picture/city/zhengzhou.jpg',
+  武汉: 'https://infrastructure-website.osinfra.cn/picture/city/wuhan.jpg',
+};
+
+export const DEFAULT_COVER = 'https://infrastructure-website.osinfra.cn/picture/city/default-cover.jpg';

package/src/components/events/index.ts

@@ -0,0 +1,24 @@
+import _OEventsCalendar from './OEventsCalendar.vue';
+import _OEventsList from './OEventsList.vue';
+import _OEventsApply from './OEventsApply.vue';
+import type { App } from 'vue';
+
+
+const OEventsCalendar = Object.assign(_OEventsCalendar, {
+  install(app: App) {
+    app.component('OEventsCalendar', _OEventsCalendar);
+  },
+});
+const OEventsList = Object.assign(_OEventsList, {
+  install(app: App) {
+    app.component('OEventsList', _OEventsList);
+  },
+});
+const OEventsApply = Object.assign(_OEventsApply, {
+  install(app: App) {
+    app.component('OEventsApply', _OEventsApply);
+  },
+});
+
+export { OEventsCalendar, OEventsList, OEventsApply };
+export * from './types';

package/src/components/events/types.ts

@@ -0,0 +1,84 @@
+type EventsTextAlignT = 'center' | 'left';
+
+export enum EventsStatusT {
+  FINISH = 'finish',
+  ING = 'ing',
+  ALL = ''
+}
+
+
+export interface EventsItemT {
+  name: string; // 事件名称
+  date: string | [string, string]; // 事件日期， "YYYY/MM/DD" 或 ["YYYY/MM/DD", "YYYY/MM/DD"]
+  location?: string; // 事件地点
+  link?: string; // 跳转链接
+  linkProps?: {
+    [key: string]: string | boolean;
+  },
+  align?: EventsTextAlignT; // 文本居中方式
+  cover?: string; // 事件背景，作为列表卡片形式时使用
+  status?: EventsStatusT; // 事件状态，作为列表卡片形式时使用，不传递，组件内部通过date计算得出
+}
+
+export type EventsTypeT = 'summit' | 'events' | 'competition' | 'release';
+
+export interface CalendarItemT {
+  name: string; // 分组标题
+  desc?: string; // 分组描述，可选，支持传递html片段
+  type: EventsTypeT; // 分组类型，决定颜色和图标
+  color?: string; // 分组颜色，可选，如果没有传递由type决定， RGB格式: "255, 0, 0"，包括图标背景和事件背景
+  icon?: string; // 分组图标，可选，如果没有传递由type决定，白色线性，背景由颜色决定
+  data: EventsItemT[];
+  isSpanMonth?: boolean; // 是否包含跨月事件，为true时date需要是[string, string]
+}
+
+export interface StepItemT {
+  title: string; // 标题
+  desc?: string; // 描述，支持HTML片段
+  img?: string; // 插图
+  imgPhone?: string; // 移动端插图
+  listTitle?: string; // 列表标题
+  list: Array<{
+    title: string; // 列表项标题
+    desc?: string; // 列表项描述
+  }>;
+}
+
+// 活动列表
+export interface EventsCardItemT {
+  name: string; // 事件名称
+  date?: string; // 事件日期
+  startDate?: string; // 事件开始日期
+  endDate?: string; // 事件结束日期
+  dateStr?: string; // 经处理后的展示时间
+  city: string; // 事件城市
+  cover?: string; // 卡片封面，如果不传递，组件内部通过date计算得出
+  status?: EventsStatusT; // 事件状态，不传递，组件内部通过date计算得出
+  link: string; // 跳转链接
+  tags?: { icon?: any; title: string }[];
+}
+
+
+// 组件 Props 类型定义
+export interface EventsApplyPropsT {
+  steps: StepItemT[];
+}
+
+export interface EventsListPropsT {
+  data: EventsCardItemT[]; // 活动列表数据
+  page: number; // 当前页码
+  pageSize: number; // 当前每页个数
+  total: number; // 活动总计个数
+}
+
+export interface EventsCalendarPropsT {
+  data: CalendarItemT[];
+}
+
+// OEventList 组件搜索事件参数
+export interface SearchParamsT {
+  page: number; // 页码
+  pageSize: number; // 每页数量
+  status: EventsStatusT; // 状态
+  keyword: string; // 关键词
+}

package/src/components/events/utils.ts

@@ -0,0 +1,9 @@
+/**
+ * 比较两个日期字符串的先后顺序
+ * @param dateA - 第一个日期字符串
+ * @param dateB - 第二个日期字符串
+ * @returns 如果 dateA 晚于 dateB 返回 true，否则返回 false
+ */
+export const compareDate = (dateA: string | Date, dateB: string | Date): boolean => {
+  return new Date(dateA).getTime() > new Date(dateB).getTime();
+};