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

package/src/components/events/OEventsList.vue

@@ -1,461 +0,0 @@
-<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;
-    gap: var(--o-gap-4);
-
-    .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;
-      }
-    }
-  }
-  .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

@@ -1,35 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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; // 关键词
-}