@opendesign-plus/components 0.0.1-rc.10

package/src/components/activity/config.ts

@@ -0,0 +1,141 @@
+import { useI18n } from '@/i18n';
+
+export const getActicityTypeMap = () => {
+  const { t } = useI18n();
+  return new Map([
+    [
+      1,
+      {
+        label: t('meeting.offline'),
+        value: 1,
+      },
+    ],
+    [
+      2,
+      {
+        label: t('meeting.online'),
+        value: 2,
+      },
+    ],
+    [
+      3,
+      {
+        label: t('meeting.onlineOffline'),
+        value: 3,
+      },
+    ],
+  ]);
+};
+
+export const WEBSITE_REGEXP = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w ./?%&=-]*)?$/;
+
+
+export const getStatusMap = () => {
+  const { t } = useI18n();
+  return new Map([
+    [
+      1,
+      {
+        id: 'draft',
+        label: t('meeting.statusDraft'),
+        text: t('meeting.statusDraft'),
+        value: 1,
+      },
+    ],
+    [
+      2,
+      {
+        id: 'under-review',
+        label: t('meeting.statusUnderReview'),
+        text: t('meeting.statusPending'),
+        value: 2,
+      },
+    ],
+    [
+      3,
+      {
+        id: 'registration',
+        label: t('meeting.statusRegistering'),
+        text: t('meeting.statusApproved'),
+        value: 3,
+      },
+    ],
+    [
+      4,
+      {
+        id: 'in-progress',
+        label: t('meeting.statusInProgress'),
+        text: t('meeting.statusApproved'),
+        value: 4,
+      },
+    ],
+    [
+      5,
+      {
+        id: 'ended',
+        label: t('meeting.statusEnded'),
+        text: t('meeting.statusEnded'),
+        value: 5,
+      },
+    ],
+    [
+      6,
+      {
+        id: 'modified',
+        label: t('meeting.statusModified'),
+        text: t('meeting.statusModified'),
+        value: 6,
+      },
+    ],
+    [
+      7,
+      {
+        id: 'reject',
+        label: t('meeting.statusRejected'),
+        text: t('meeting.statusRejected'),
+        value: 7,
+      },
+    ],
+  ]);
+};
+
+export const getApprovalStatusMap = () => {
+  const { t } = useI18n();
+  return new Map([
+    [
+      'all',
+      {
+        label: t('common.all'),
+        value: 'all',
+      },
+    ],
+    [
+      'rejected',
+      {
+        label: t('meeting.statusRejected'),
+        value: 'rejected',
+      },
+    ],
+    [
+      'approved',
+      {
+        label: t('meeting.statusApproved'),
+        value: 'approved',
+      },
+    ],
+    [
+      'publish',
+      {
+        label: t('meeting.statusPending'),
+        value: 'publish',
+      },
+    ],
+    [
+      'cancel',
+      {
+        label: t('meeting.statusCanceled'),
+        value: 'cancel',
+      },
+    ],
+  ]);
+};

package/src/components/activity/index.ts

@@ -0,0 +1,24 @@
+import _OActivityForm from './OActivityForm.vue';
+import _OActivityApproval from './OActivityApproval.vue';
+import _OMyActivityCalendar from './OMyActivityCalendar.vue';
+import type { App } from 'vue';
+
+
+const OActivityForm = Object.assign(_OActivityForm, {
+  install(app: App) {
+    app.component('OActivityForm', _OActivityForm);
+  },
+});
+const OActivityApproval = Object.assign(_OActivityApproval, {
+  install(app: App) {
+    app.component('OActivityApproval', _OActivityApproval);
+  },
+});
+const OMyActivityCalendar = Object.assign(_OMyActivityCalendar, {
+  install(app: App) {
+    app.component('OMyActivityCalendar', _OMyActivityCalendar);
+  },
+});
+
+export { OActivityForm, OActivityApproval, OMyActivityCalendar };
+export * from './types';

package/src/components/activity/types.ts

@@ -0,0 +1,88 @@
+// 活动新增、修改
+export interface ParamsItemT {
+  id?: number; // 活动id
+  title: string; // 活动名称
+  start_date: string; // 活动起始日期
+  end_date: string; // 活动结束日期
+  register_end_date: string; // 报名截止时间
+  activity_type: string | number; // 活动类型
+  synopsis: string; // 活动简介
+  register_url: string; // 报名网址
+  content_url: string; // 活动详情网址
+  address: string; // 活动地址
+  start: string; // 活动开始时间
+  end: string; // 活动结束时间
+  schedules?: string;
+  is_publish: string; // 是否发布 true-发布审核 false-发布为草稿
+  update_activity_id?: string;
+  email_list?: string; // 邮件列表
+  organizer?: string; // 主办方
+  approver: string; // 审批人
+}
+
+export interface ActivityFormPropsT {
+  data?: ParamsItemT;
+  creatActivity: any;
+  editActivity: any;
+  admins: string[];
+  organizers: {
+    id: number;
+    name: string;
+  }[];
+}
+
+export interface TypeOptionT {
+  label: string;
+  value: number;
+}
+
+export interface ActivityItemT {
+  activity_mode: number;
+  activity_type: number;
+  address: string;
+  approver: string;
+  approve_record: object;
+  start_date: string;
+  end: string;
+  end_date: string;
+  id: number;
+  is_delete: number; // 1-已取消 0-正常
+  live_address: string;
+  register_end_date: string;
+  register_url: string;
+  start: string;
+  status: number; // 1-草稿 2-审核中 3-报名中 4-进行中 5-已结束 6-已修改 7-驳回
+  synopsis: string;
+  title: string;
+  update_activity_id: number;
+  user: string;
+}
+
+export interface ReviewParamsT {
+  page: number;
+  size: number;
+  status: string;
+  activity_mode?: string;
+  is_delete?: number;
+  search: string;
+  sponsor: string;
+  order_by: string;
+}
+
+export interface ActivityTablePropsT {
+  getTableDataRequest: any;
+  applicantList: string[];
+  cancelActivityRequest: any;
+  deleteActivityRequest: any;
+  approveActivityRequest: any;
+  rejectActivityRequest: any;
+  getActivityDetailRequest: any;
+}
+
+export interface MyActivityCalendarPropsT {
+  getListRequest: any;
+  revokeActivityRequest: any;
+  deleteActivityRequest: any;
+  editActivityRequest: any;
+  getActivityDetailRequest: any;
+}

package/src/components/common/AppAvatar.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
+
+const props = defineProps({
+  // 头像
+  avatar: {
+    type: String,
+    default: '',
+  },
+  // 用户名
+  name: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  // mini： 16 small： 24， medium： 40， large： 64
+  size: {
+    type: String as PropType<'mini' | 'small' | 'medium' | 'large'>,
+    default: 'medium',
+  },
+  // 大小尺寸自定义，单位px
+  customSize: {
+    type: Number,
+    default: 0,
+  },
+  // round--圆形 square--方形
+  variant: {
+    type: String as PropType<'round' | 'square'>,
+    default: 'round',
+  },
+});
+
+const bgColorArr = ['#058EF0', '#FA7305', '#03B5A5'];
+
+const avatarText = computed(() => props.name?.charAt(0).toUpperCase());
+const getAvatarStyle = computed(() => {
+  const avatarStyle = {
+    'background-color': '',
+    width: '32px',
+    height: '32px',
+    'font-size': '20px',
+  };
+  avatarStyle['background-color'] = props.name ? bgColorArr[props.name?.length % bgColorArr.length] : 'transparent';
+  let sizeNum = 0;
+  if (props.customSize) {
+    sizeNum = Number(props.customSize);
+  } else {
+    const sizeToNum = {
+      mini: 16,
+      small: 24,
+      medium: 40,
+      large: 64,
+    };
+    sizeNum = sizeToNum[props.size];
+  }
+  avatarStyle.height = `${sizeNum}px`;
+  avatarStyle.width = `${sizeNum}px`;
+  avatarStyle['font-size'] = `${sizeNum / 2}px`;
+  return avatarStyle;
+});
+</script>
+
+<template>
+  <img v-if="avatar && !avatar.includes('gitcode')" :src="avatar" class="img-avatar" :class="variant" :style="getAvatarStyle" alt="" />
+  <div v-else class="word-avatar" :class="variant" :style="getAvatarStyle">
+    {{ avatarText }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.img-avatar {
+  background-color: transparent !important;
+}
+.word-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--o-color-info1-inverse);
+}
+.round {
+  border-radius: 50%;
+}
+</style>

package/src/components/common/ClientOnlyWrapper.ts

@@ -0,0 +1,21 @@
+import { defineComponent, onMounted, ref, h, resolveComponent } from 'vue';
+
+const fallback = (slots: any) => {
+  const show = ref(false);
+
+  onMounted(() => {
+    show.value = true;
+  });
+
+  return () => (show.value && slots.default ? slots.default() : null);
+};
+
+export default defineComponent({
+  setup(_, { slots }) {
+    const BuiltIn = resolveComponent('ClientOnly');
+    if (BuiltIn && typeof BuiltIn !== 'string') {
+      return () => h(BuiltIn, null, { default: () => slots.default ? slots.default() : null });
+    }
+    return fallback(slots);
+  },
+});

package/src/components/common/ContentWrapper.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { isBoolean, isString, isUndefined } from '@opensig/opendesign';
+import { computed } from 'vue';
+
+const DEFAULT = Symbol('default');
+
+interface ContentWrapperPropsT {
+  verticalPadding?: boolean | string | Array<string>;
+}
+
+const props = withDefaults(defineProps<ContentWrapperPropsT>(), {
+  verticalPadding: undefined,
+});
+
+const paddingTop = computed(() => {
+  if (!props.verticalPadding) {
+    return 0;
+  }
+
+  if (isBoolean(props.verticalPadding)) {
+    return DEFAULT;
+  } else if (isString(props.verticalPadding)) {
+    return props.verticalPadding;
+  } else {
+    return props.verticalPadding[0];
+  }
+});
+
+const paddingBottom = computed(() => {
+  if (!props.verticalPadding) {
+    return 0;
+  }
+
+  if (isBoolean(props.verticalPadding)) {
+    return DEFAULT;
+  } else if (isString(props.verticalPadding)) {
+    return props.verticalPadding;
+  } else {
+    return !isUndefined(props.verticalPadding[1]) ? props.verticalPadding[1] : props.verticalPadding[0];
+  }
+});
+</script>
+
+<template>
+  <div
+    class="content-wrapper"
+    :style="{
+      '--content-wrapper-vertical-paddingTop': paddingTop === DEFAULT ? undefined : paddingTop,
+      '--content-wrapper-vertical-paddingBottom': paddingBottom === DEFAULT ? undefined : paddingBottom,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content-wrapper {
+  --layout-content-max-width: 1544px;
+  --layout-content-padding: 64px;
+  --layout-header-height: 80px;
+
+  @include respond-to('<=laptop') {
+    --layout-content-max-width: 100%;
+    --layout-content-padding: 40px;
+  }
+
+  @include respond-to('<=pad') {
+    --layout-content-padding: 32px;
+  }
+
+  @include respond-to('phone') {
+    --layout-content-padding: 24px;
+  }
+
+  max-width: var(--layout-content-max-width);
+  padding-left: var(--layout-content-padding);
+  padding-right: var(--layout-content-padding);
+  margin: 0 auto;
+
+  --content-wrapper-vertical-paddingTop: 72px;
+  --content-wrapper-vertical-paddingBottom: 72px;
+  padding-top: var(--content-wrapper-vertical-paddingTop);
+  padding-bottom: var(--content-wrapper-vertical-paddingBottom);
+}
+</style>

package/src/components/common/MoreText.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { OIcon, OIconChevronDown, OIconChevronUp } from '@opensig/opendesign';
+import { nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from '@/i18n';
+
+const props = withDefaults(
+  defineProps<{
+    text?: string;
+    link?: boolean;
+    lines?: number;
+    show: boolean;
+  }>(),
+  {
+    text: '',
+    link: false,
+    lines: 3,
+    show: false,
+  },
+);
+
+const { t } = useI18n();
+
+const expanded = ref(false); // 是否展开
+const showBtn = ref(false); // 受否显示展开按钮
+const offsetHeight = ref(0); // 内容高度
+const contentRef = ref(null); // 内容节点
+
+onMounted(() => {
+  determineHeight();
+});
+watch([() => props.text, () => props.show], () => {
+  determineHeight();
+});
+const determineHeight = () => {
+  nextTick(() => {
+    const ele = contentRef.value;
+    if (ele) {
+      const range = document.createRange();
+      range.setStart(ele, 0);
+      range.setEnd(ele, ele.childNodes.length);
+      showBtn.value = range.getBoundingClientRect().height > ele.offsetHeight + 10 || ele.scrollHeight > ele.offsetHeight + 10;
+      offsetHeight.value = range.getBoundingClientRect().height || ele.scrollHeight;
+    } else {
+      showBtn.value = false;
+    }
+  });
+};
+
+const clickText = () => {
+  if (props.link) {
+    window.open(props.text)
+  }
+};
+</script>
+
+<template>
+  <div class="more-text-wrapper">
+    <div
+      :class="['more-text-content', link && 'is-link']"
+      ref="contentRef"
+      :style="{
+        'max-height': expanded ? offsetHeight + 'px' : '66px',
+        '-webkit-line-clamp': expanded ? 'initial' : lines,
+      }"
+      @click="clickText"
+    >
+      {{ text }}
+    </div>
+    <div class="more-text-btn" v-if="showBtn" @click="expanded = !expanded">
+      <div v-if="!expanded">
+        <span>{{ t('common.expand') }}</span>
+        <OIcon>
+          <OIconChevronDown />
+        </OIcon>
+      </div>
+      <div v-else>
+        <span>{{ t('common.collapse') }}</span>
+        <OIcon>
+          <OIconChevronUp />
+        </OIcon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.more-text-wrapper {
+  .more-text-content {
+    line-height: 22px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    white-space: pre-wrap;
+    word-break: break-all;
+    transition: height 0.1s;
+
+    &.is-link {
+      color: var(--o-color-primary1);
+      cursor: pointer;
+      @include hover {
+        color: var(--o-color-primary2);
+      }
+    }
+  }
+
+  .more-text-btn {
+    color: var(--o-color-primary1);
+    @include hover {
+      color: var(--o-color-primary2);
+    }
+
+    & > div {
+      height: 22px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      column-gap: 4px;
+      justify-content: flex-end;
+      @include tip1;
+    }
+  }
+}
+</style>