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

package/src/components/banner/index.ts

@@ -0,0 +1,18 @@
+import _OBanner from './OBanner.vue';
+import _OBannerContent from './OBannerContent.vue';
+import type { App } from 'vue';
+
+
+const OBanner = Object.assign(_OBanner, {
+  install(app: App) {
+    app.component('OBanner', _OBanner);
+  },
+});
+const OBannerContent = Object.assign(_OBannerContent, {
+  install(app: App) {
+    app.component('OBannerContent', _OBannerContent);
+  },
+});
+
+export { OBanner, OBannerContent };
+export * from './types';

package/src/components/banner/types.ts

@@ -0,0 +1,39 @@
+// Banner 项的类型定义
+export interface BannerItem {
+  title?: string;
+  subtitle?: string;
+  bg: string;
+  text_theme?: 'light' | 'dark';
+  bg_text?: string;
+  pc_text_width?: string;
+  pc_text_height?: string;
+  pad_text_width?: string;
+  pad_text_height?: string;
+  attach?: string;
+  href?: string;
+  btn?: string;
+  withStickyBg?: boolean;
+  pad_offset?: string;
+}
+
+// BannerContent 组件的 Props 类型
+export interface BannerContentProps {
+  info: BannerItem;
+  size?: 'large' | 'medium' | 'small' | 'tiny';
+  contentJustifyCenter?: boolean;
+  isPhone?: boolean;
+  isLight?: boolean;
+}
+
+// Emits 事件类型
+export interface HomeBannerEmits {
+  (e: 'before-change', index: number): void;
+  (e: 'click', href: string | undefined): void;
+}
+
+export interface BannerContentEmits {
+  (e: 'click', href: string | undefined): void;
+}
+
+// 组件尺寸类型
+export type ComponentSize = 'large' | 'medium' | 'small' | 'tiny';

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/ClientOnly.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const isClient = ref(false);
+
+onMounted(() => {
+  isClient.value = true;
+});
+</script>
+
+<template>
+  <slot v-if="isClient" />
+</template>

package/src/components/common/ContentWrapper.vue

@@ -1,85 +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>
+<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('<=laptop') {
+    --layout-content-max-width: 100%;
+    --layout-content-padding: 40px;
+  }
+
+  @include respond('<=pad') {
+    --layout-content-padding: 32px;
+  }
+
+  @include respond('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<any>(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>