@opendesign-plus/components 0.0.1-rc.2 → 0.0.1-rc.21

package/src/components/meeting/utils.ts

@@ -0,0 +1,70 @@
+import dayjs from 'dayjs';
+import { OptionItemT } from './types';
+
+export const formatDate = (date: string | Date = new Date(), format: string = 'YYYY-MM-DD'): string => {
+  let dateStr = date;
+  if (!dateStr) {
+    dateStr = new Date();
+  }
+  if (!dayjs(new Date(dateStr)).isValid()) {
+    return dateStr as string;
+  }
+  return dayjs(new Date(dateStr)).format(format);
+};
+
+export const findLabelFromOptions = (value: string | number, options: OptionItemT[], labelKey: keyof OptionItemT = 'label', valueKey: keyof OptionItemT = 'value') => {
+  const find = options.find((o) => o[valueKey] === value);
+  return find?.[labelKey] || value;
+};
+
+export const speakerNum = (val: string) => {
+  const regex = /\d+/g;
+  const match = val.match(regex) || '';
+
+  return parseInt(match[0]);
+};
+
+export const getDateNumber = (date: string) => {
+  const arr: string[] = date.split(':');
+  if (arr.length > 3 || !arr.length) {
+    return 0;
+  }
+  let res = 0;
+  let base = 1;
+  while (arr.length > 0) {
+    const current = arr.pop();
+    res += parseInt(current!) * base;
+    base *= 60;
+  }
+  return res;
+};
+
+const formatNumber = (num: number) => {
+  if (num < 0) return 'Invalid number';
+  if (num >= 10) return `${ num }`;
+  return `0${ num }`;
+};
+
+export const formatDateNumber = (num: number) => {
+  if (num > 24 * 60 * 60) return 'Invalid date';
+  const h = Math.floor(num / 60 / 60);
+  const m = Math.floor((num - h * 60 * 60) / 60);
+  const s = num % 60;
+  return `${ formatNumber(h) }:${ formatNumber(m) }:${ formatNumber(s) }`;
+};
+
+export const transformTime = (time: string) => {
+  const arr = time.split(':');
+  const hh = arr[arr.length - 3] ? parseInt(arr[arr.length - 3]) : 0;
+  const mm = parseInt(arr[arr.length - 2]);
+  const ss = parseFloat(arr[arr.length - 1]);
+
+  return hh * 60 * 60 + mm * 60 + ss;
+};
+
+export const transformSeconds = (seconds: number) => {
+  const hh = Math.floor(seconds / 3600);
+  const mm = Math.floor((seconds - hh * 3600) / 60);
+  const ss = Math.floor(seconds - hh * 3600 - mm * 60);
+  return `${ hh ? `${ hh.toString().padStart(2, '0') }:` : '' }${ mm.toString().padStart(2, '0') }:${ ss.toString().padStart(2, '0') }`;
+};

package/src/draft/Banner.vue

@@ -1,265 +1,265 @@
-<script setup lang="ts">
-import { onMounted, type PropType } from 'vue';
-import { OButton } from '@opensig/opendesign';
-
-import AOS from 'aos';
-
-import ContentWrapper from './ContentWrapper.vue';
-
-defineProps({
-  backgroundImage: {
-    type: String,
-    default: '',
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-  href: {
-    type: String,
-    default: '',
-  },
-  text: {
-    type: String,
-    default: '',
-  },
-  // 风格
-  theme: {
-    type: String as PropType<'light' | 'dark'>,
-    default: 'light',
-  },
-  // 指定在何处显示链接的资源
-  target: {
-    type: String,
-    default: '_blank',
-  },
-  size: {
-    type: String as PropType<'small' | 'medium' | 'large'>,
-    default: 'medium',
-  },
-});
-
-onMounted(() => {
-  AOS.init({
-    duration: 800,
-  });
-});
-</script>
-
-<template>
-  <div class="banner-content" :class="`banner-${size}`">
-    <div class="banner-bg" :style="{ backgroundImage: `url(${backgroundImage})` }"></div>
-    <ContentWrapper class="banner-text">
-      <div class="banner-text-content">
-        <p v-if="title" class="banner-title" data-aos="fade-up">{{ title }}</p>
-        <p v-if="subtitle" class="banner-subtitle" data-aos="fade-up">
-          {{ subtitle }}
-        </p>
-        <OButton v-if="href" variant="outline" color="primary" size="medium" :href="href" :target="target"
-          class="learn-btn">
-          <span>{{ text }}</span>
-        </OButton>
-      </div>
-    </ContentWrapper>
-  </div>
-</template>
-
-<style lang="scss">
-.banner-content {
-  width: 100%;
-  position: relative;
-}
-
-.banner-bg {
-  height: 100%;
-  margin: 0 auto;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.banner-text {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.banner-text-content {
-  height: 100%;
-}
-
-.learn-btn {
-  margin-top: 24px;
-}
-
-.banner-small {
-  height: 280px;
-
-  .banner-title {
-    color: var(--o-color-info1);
-    font-weight: 500;
-    padding-top: 48px;
-    @include display2;
-  }
-
-  .banner-subtitle {
-    color: var(--o-color-info1);
-    margin-top: 8px;
-    width: 60%;
-    @include text2;
-  }
-
-  @media (min-width: 1201px) and (max-width: 1680px) {
-    height: 220px;
-
-    .banner-title {
-      padding-top: 40px;
-      @include display3;
-    }
-
-    .banner-subtitle {
-      @include text1;
-    }
-  }
-
-  @include respond-to('pad_h') {
-    height: 180px;
-
-    .banner-title {
-      padding-top: 32px;
-      @include h1;
-    }
-
-    .banner-subtitle {
-      @include tip1;
-    }
-  }
-
-  @include respond-to('<=pad_v') {
-    display: none;
-  }
-}
-
-.banner-medium {
-  height: 360px;
-
-  .banner-title {
-    color: var(--o-color-info1);
-    font-weight: 500;
-    padding-top: 88px;
-    @include display2;
-  }
-
-  .banner-subtitle {
-    color: var(--o-color-info1);
-    margin-top: 8px;
-    width: 60%;
-    @include text2;
-  }
-
-  @media (min-width: 1201px) and (max-width: 1680px) {
-    height: 280px;
-
-    .banner-title {
-      padding-top: 64px;
-      @include display3;
-    }
-
-    .banner-subtitle {
-      @include text1;
-    }
-  }
-
-  @include respond-to('pad_h') {
-    height: 220px;
-
-    .banner-title {
-      padding-top: 48px;
-      @include h1;
-    }
-
-    .banner-subtitle {
-      @include tip1;
-    }
-  }
-
-  @include respond-to('<=pad_v') {
-    height: 120px;
-
-    .banner-title {
-      text-align: center;
-      padding-top: 48px;
-      @include h3;
-    }
-
-    .banner-subtitle {
-      display: none;
-    }
-  }
-}
-
-.banner-large {
-  height: 460px;
-
-  .banner-title {
-    color: var(--o-color-info1);
-    font-weight: 500;
-    padding-top: 124px;
-    @include display1;
-  }
-
-  .banner-subtitle {
-    color: var(--o-color-info1);
-    margin-top: 8px;
-    width: 60%;
-    @include h4;
-  }
-
-  @media (min-width: 1201px) and (max-width: 1680px) {
-    height: 400px;
-
-    .banner-title {
-      padding-top: 100px;
-      @include display2;
-    }
-
-    .banner-subtitle {
-      @include text2;
-    }
-  }
-
-  @include respond-to('pad_h') {
-    height: 320px;
-
-    .banner-title {
-      padding-top: 80px;
-      @include display3;
-    }
-
-    .banner-subtitle {
-      @include text1;
-    }
-  }
-
-  @include respond-to('<=pad_v') {
-    height: 184px;
-
-    .banner-title {
-      text-align: center;
-      padding-top: 48px;
-      @include h3;
-    }
-
-    .banner-subtitle {
-      text-align: center;
-      @include tip2;
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import { onMounted, type PropType } from 'vue';
+import { OButton } from '@opensig/opendesign';
+
+import AOS from 'aos';
+
+import ContentWrapper from './ContentWrapper.vue';
+
+defineProps({
+  backgroundImage: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  href: {
+    type: String,
+    default: '',
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  // 风格
+  theme: {
+    type: String as PropType<'light' | 'dark'>,
+    default: 'light',
+  },
+  // 指定在何处显示链接的资源
+  target: {
+    type: String,
+    default: '_blank',
+  },
+  size: {
+    type: String as PropType<'small' | 'medium' | 'large'>,
+    default: 'medium',
+  },
+});
+
+onMounted(() => {
+  AOS.init({
+    duration: 800,
+  });
+});
+</script>
+
+<template>
+  <div class="banner-content" :class="`banner-${size}`">
+    <div class="banner-bg" :style="{ backgroundImage: `url(${backgroundImage})` }"></div>
+    <ContentWrapper class="banner-text">
+      <div class="banner-text-content">
+        <p v-if="title" class="banner-title" data-aos="fade-up">{{ title }}</p>
+        <p v-if="subtitle" class="banner-subtitle" data-aos="fade-up">
+          {{ subtitle }}
+        </p>
+        <OButton v-if="href" variant="outline" color="primary" size="medium" :href="href" :target="target"
+          class="learn-btn">
+          <span>{{ text }}</span>
+        </OButton>
+      </div>
+    </ContentWrapper>
+  </div>
+</template>
+
+<style lang="scss">
+.banner-content {
+  width: 100%;
+  position: relative;
+}
+
+.banner-bg {
+  height: 100%;
+  margin: 0 auto;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.banner-text {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.banner-text-content {
+  height: 100%;
+}
+
+.learn-btn {
+  margin-top: 24px;
+}
+
+.banner-small {
+  height: 280px;
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    padding-top: 48px;
+    @include display2;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    width: 60%;
+    @include text2;
+  }
+
+  @media (min-width: 1201px) and (max-width: 1680px) {
+    height: 220px;
+
+    .banner-title {
+      padding-top: 40px;
+      @include display3;
+    }
+
+    .banner-subtitle {
+      @include text1;
+    }
+  }
+
+  @include respond-to('pad_h') {
+    height: 180px;
+
+    .banner-title {
+      padding-top: 32px;
+      @include h1;
+    }
+
+    .banner-subtitle {
+      @include tip1;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    display: none;
+  }
+}
+
+.banner-medium {
+  height: 360px;
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    padding-top: 88px;
+    @include display2;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    width: 60%;
+    @include text2;
+  }
+
+  @media (min-width: 1201px) and (max-width: 1680px) {
+    height: 280px;
+
+    .banner-title {
+      padding-top: 64px;
+      @include display3;
+    }
+
+    .banner-subtitle {
+      @include text1;
+    }
+  }
+
+  @include respond-to('pad_h') {
+    height: 220px;
+
+    .banner-title {
+      padding-top: 48px;
+      @include h1;
+    }
+
+    .banner-subtitle {
+      @include tip1;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    height: 120px;
+
+    .banner-title {
+      text-align: center;
+      padding-top: 48px;
+      @include h3;
+    }
+
+    .banner-subtitle {
+      display: none;
+    }
+  }
+}
+
+.banner-large {
+  height: 460px;
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    padding-top: 124px;
+    @include display1;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    width: 60%;
+    @include h4;
+  }
+
+  @media (min-width: 1201px) and (max-width: 1680px) {
+    height: 400px;
+
+    .banner-title {
+      padding-top: 100px;
+      @include display2;
+    }
+
+    .banner-subtitle {
+      @include text2;
+    }
+  }
+
+  @include respond-to('pad_h') {
+    height: 320px;
+
+    .banner-title {
+      padding-top: 80px;
+      @include display3;
+    }
+
+    .banner-subtitle {
+      @include text1;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    height: 184px;
+
+    .banner-title {
+      text-align: center;
+      padding-top: 48px;
+      @include h3;
+    }
+
+    .banner-subtitle {
+      text-align: center;
+      @include tip2;
+    }
+  }
+}
+</style>