@opendesign-plus/components 0.0.1-rc.25 → 0.0.1-rc.27

package/src/components/OLanguageSwitcher.vue

@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useLocale, useScreen } from '@opendesign-plus/composables';
+import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
+
+import IconLocale from '~icons/components/icon-locale.svg';
+
+export interface LanguageOptionT {
+  id: string;
+  label: string;
+  simple: string;
+}
+
+const props = defineProps({
+  options: {
+    type: Array as () => LanguageOptionT[],
+    default() {
+      return [
+        { id: 'zh', label: '简体中文', simple: '中' },
+        { id: 'en', label: 'English', simple: 'EN'  },
+      ];
+    },
+  },
+  type: {
+    type: String as () => 'auto' | 'common' | 'mobile',
+    default: 'auto',
+  },
+  auto: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { changeLocale, locale } = useLocale();
+
+const { lePadV } = useScreen();
+const lang = computed(() => {
+  return locale.value;
+});
+
+
+// 选择语言
+const emits = defineEmits(['change']);
+const changeLanguage = (newlang: LanguageOptionT) => {
+  if (props.auto) {
+    changeLocale();
+  }
+  emits('change', newlang);
+};
+
+const getLang = (lang: String, simple?: boolean) => {
+  const item = props.options.find((el: LanguageOptionT) => el.id === lang);
+  if (item) {
+    return simple ? item.simple : item.label;
+  }
+
+  const defaultLang = props.options[0];
+  return simple ? defaultLang.simple : defaultLang.label;
+};
+
+const isCommon = computed(() => {
+  return props.type === 'common' || (props.type === 'auto' && !lePadV.value);
+});
+</script>
+
+<template>
+  <div
+    v-if="isCommon"
+    :class="options.length <= 1 ? 'hide-lang' : 'header-lang'"
+  >
+    <ODropdown
+      trigger="hover"
+      optionPosition="bottom"
+      option-wrap-class="dropdown"
+    >
+      <div class="info-wrap">
+        <OIcon class="icon">
+          <IconLocale />
+          <div :class="['locale-tag', { 'is-en': lang === 'en' }]">{{ getLang(lang, true) }}</div>
+        </OIcon>
+      </div>
+
+      <template #dropdown>
+        <ODropdownItem
+          v-for="item in options"
+          @click="changeLanguage(item)"
+          :key="item.id"
+          :class="['list', { 'is-active': lang === item.id }]"
+        >
+          {{ getLang(item.id) }}
+        </ODropdownItem>
+      </template>
+    </ODropdown>
+  </div>
+
+  <div
+    v-else
+    :class="options.length <= 1 ? 'hide-lang' : 'mobile-change-language'"
+  >
+    <span
+      v-for="item in options"
+      :key="item.id"
+      :class="{ active: lang === item.id }"
+      @click.stop="changeLanguage(item)"
+      >{{ getLang(item.id, true) }}</span
+    >
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.hide-lang {
+  display: none;
+}
+
+.header-lang {
+  height: calc(100% + 10px);
+  display: flex;
+  align-items: center;
+
+  .info-wrap {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .icon {
+      font-size: var(--o-icon_size_control-m);
+      position: relative;
+      color: var(--o-color-info1);
+
+      &:hover {
+        color: var(--o-color-primary1);
+      }
+    }
+    .locale-tag {
+      position: absolute;
+      font-size: 10px;
+      height: 12px;
+      width: 12px;
+      background-color: var(--o-color-fill2);
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      left: 12px;
+      top: 11px;
+
+      &.is-en {
+        width: 16px;
+      }
+    }
+  }
+  .list {
+    background: var(--o-color-fill2);
+    cursor: pointer;
+    box-shadow: var(--o-shadow-1);
+    border-radius: var(--o-radius_control-xs);
+    padding: var(--o-gap-1);
+    width: 144px;
+  }
+}
+
+.o-dropdown {
+  height: 100%;
+}
+.o-dropdown-item {
+  background: var(--o-color-fill2);
+  cursor: pointer;
+  border-radius: var(--o-radius_control-xs);
+  padding: var(--o-gap-1);
+  min-width: 144px;
+  height: 40px;
+  color: var(--o-color-info1);
+
+  @include hover {
+    background: var(--o-color-control2-light);
+  }
+
+  &.is-active {
+    color: var(--o-color-primary1);
+    background: var(--o-color-control3-light);
+  }
+}
+.dropdown {
+  --dropdown-list-radius: var(--o-radius-xs);
+}
+
+.mobile-change-language {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  span {
+    color: var(--o-color-info1);
+    margin-right: var(--o-gap-1);
+    text-align: center;
+    @include text1;
+    cursor: pointer;
+    &.active {
+      color: var(--o-color-primary1);
+      font-weight: 500;
+    }
+    &:not(:last-child) {
+      &:after {
+        content: '|';
+        margin-left: var(--o-gap-1);
+        color: var(--o-color-info1);
+      }
+    }
+  }
+}
+</style>

package/src/components/OPlusConfigProvider.vue

@@ -2,8 +2,8 @@
 import { computed, provide, reactive } from 'vue';
 
 import { OConfigProvider } from '@opensig/opendesign';
-import zhCN from '@opensig/opendesign/es/locale/lang/zh-cn';
-import enUS from '@opensig/opendesign/es/locale/lang/en-us';
+import zhCN from '@opensig/opendesign/es/locale/lang/zh-cn.mjs';
+import enUS from '@opensig/opendesign/es/locale/lang/en-us.mjs';
 
 import { configProviderInjectKey } from '@/shared/provide';
 

package/src/components/activity/OActivityForm.vue

@@ -297,13 +297,17 @@ const confirm = async (val: boolean) => {
     }
     loading.value = true;
     form.value.is_publish = `${ val }`;
+    let flag = undefined;
     if (isEdit.value && props.data?.status === 3) {
       form.value.update_activity_id = props.data?.id;
-      await props.creatActivity?.(form.value);
+      flag = await props.creatActivity?.(form.value);
     } else if (isEdit.value) {
-      await props.editActivity?.(props.data?.id, form.value);
+      flag = await props.editActivity?.(props.data?.id, form.value);
     } else {
-      await props.creatActivity?.(form.value);
+      flag = await props.creatActivity?.(form.value);
+    }
+    if (typeof flag === 'boolean' && !flag) {
+      return;
     }
     message.success({
       content: t('meeting.activityActionSuccess', [form.value.title, type.toLowerCase()]),

package/src/components/activity/OActivityMyCalendar.vue

@@ -329,7 +329,10 @@ const confirm = () => {
   }
   dialogLoading.value = true;
   props.revokeActivityRequest(currentRow.value?.id)
-    .then(() => {
+    .then((flag: any) => {
+      if (typeof flag === 'boolean' && !flag) {
+        return;
+      }
       message.success({
         content: t('meeting.revokeActivitySuccess', [currentRow.value?.title]),
       });
@@ -384,7 +387,10 @@ const handleSubmitReviewItem = (val: ActivityItemT) => {
     is_publish: 'true',
   } as ParamsItemT;
   props.editActivityRequest(val.id, params)
-    .then(() => {
+    .then((flag: any) => {
+      if (typeof flag === 'boolean' && !flag) {
+        return;
+      }
       message.success({
         content: t('meeting.submitReviewSuccess', [val.title]),
       });
@@ -404,7 +410,10 @@ const confirmDelete = () => {
   }
   dialogLoading.value = true;
   props.deleteActivityRequest(currentRow.value?.id)
-    .then(() => {
+    .then((flag) => {
+      if (typeof flag === 'boolean' && !flag) {
+        return;
+      }
       message.success({
         content: t('meeting.deleteActivitySuccess', [currentRow.value?.title]),
       });
@@ -939,14 +948,13 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
           .date-cell {
             height: 56px;
-            width: 42px;
-            padding: var(--o-gap-1);
+            width: 34px;
             position: relative;
             cursor: default !important;
 
             .date-cell-text {
               font-size: 14px;
-              line-height: 36px;
+              line-height: 34px;
               border-radius: var(--activity-cell-radius);
               background-color: var(--o-color-control2-light);
               border: 1px solid transparent;
@@ -971,7 +979,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             &::after {
               content: '';
               position: absolute;
-              bottom: 2px;
+              bottom: 5px;
               left: 50%;
               transform: translateX(-50%);
               width: 8px;
@@ -1034,6 +1042,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
       display: flex;
       align-items: center;
       justify-content: center;
+      min-height: 600px;
     }
 
     .o-scroller {

package/src/components/banner/OBanner.vue

@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { OCarousel, OCarouselItem, OFigure } from '@opensig/opendesign';
+import { computed } from 'vue';
+
+import { useScreen, useTheme } from '@opendesign-plus/composables';
+import ContentWrapper from '../common/ContentWrapper.vue';
+import BannerContent from './OBannerContent.vue';
+import type { BannerItem } from './types';
+
+const props = defineProps<{
+  options?: BannerItem | BannerItem[];
+  size?: 'large' | 'medium' | 'small' | 'tiny';
+  contentJustifyCenter?: boolean;
+  autoPlay?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'click', href: string | undefined): void;
+}>();
+
+const { isLight } = useTheme();
+const { isPhone } = useScreen();
+
+// 单个 Banner（非数组，或仅含一项的数组）
+const singleBanner = computed((): BannerItem | undefined => {
+  if (!props.options) return undefined;
+  if (Array.isArray(props.options)) {
+    return props.options.length === 1 ? props.options[0] : undefined;
+  }
+  return props.options;
+});
+
+// 多个 Banner（数组且超过一项）
+const multiBanner = computed((): BannerItem[] | undefined => {
+  if (!Array.isArray(props.options) || props.options.length <= 1) return undefined;
+  return props.options;
+});
+</script>
+
+<template>
+  <div :class="['home-banner', size]">
+    <!-- 单个 Banner 的情况 -->
+    <div v-if="singleBanner" class="content-height">
+      <div v-if="size === 'tiny'">
+        {{ singleBanner.title }}
+      </div>
+
+      <BannerContent
+        v-else-if="!isPhone"
+        :info="singleBanner"
+        :size="size"
+        :content-justify-center="contentJustifyCenter"
+        :is-phone="isPhone"
+        :is-light="isLight"
+        @click="emit('click', $event)"
+      />
+
+      <ContentWrapper v-else class="banner-wrapper">
+        <OFigure
+          class="banner-bg"
+          :src="singleBanner.bg"
+          fit="cover"
+        />
+      </ContentWrapper>
+    </div>
+
+    <!-- 多个 Banner 轮播的情况 -->
+    <div v-else-if="multiBanner" class="content-height">
+      <OCarousel
+        v-if="!isPhone"
+        class="banner-carousel"
+        effect="toggle"
+        active-class="current-slide"
+        indicator-click
+        :auto-play="autoPlay"
+      >
+        <OCarouselItem
+          v-for="(info, index) in multiBanner"
+          :key="index"
+          class="banner-item"
+          :class="`banner-item${index}`"
+        >
+          <BannerContent
+            :info="info"
+            :size="size"
+            :content-justify-center="contentJustifyCenter"
+            :is-phone="isPhone"
+            :is-light="isLight"
+            @click="emit('click', $event)"
+          />
+        </OCarouselItem>
+      </OCarousel>
+
+      <OCarousel
+        v-else
+        class="banner-carousel"
+        effect="gallery"
+        indicator-click
+        arrow="never"
+        :auto-play="autoPlay"
+      >
+        <OCarouselItem
+          v-for="(info, index) in multiBanner"
+          :key="index"
+          class="banner-item"
+          :class="`banner-item${index}`"
+        >
+          <ContentWrapper class="banner-wrapper">
+            <OFigure
+              class="banner-bg"
+              :src="info.bg"
+              @click="emit('click', info.href)"
+            />
+          </ContentWrapper>
+        </OCarouselItem>
+      </OCarousel>
+    </div>
+
+    <!-- 没有 Banner 数据的情况 -->
+    <div v-else class="content-height">
+      <p>No data.</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.home-banner {
+  overflow: hidden;
+  position: relative;
+
+  &.tiny {
+    @include display2;
+    font-weight: 500;
+    margin: var(--o-gap-8) 0;
+    color: var(--o-color-info1);
+  }
+
+  .content-height {
+    height: 100%;
+  }
+
+  &.large {
+    --banner-height: 460px;
+    height: var(--banner-height);
+
+    @include respond-to('laptop-pc_s') {
+      --banner-height: 400px;
+    }
+
+    @include respond-to('pad_h') {
+      --banner-height: 360px;
+    }
+
+    @include respond-to('<=pad_v') {
+      --banner-height: 184px;
+    }
+  }
+
+  &.medium {
+    --banner-height: 360px;
+    height: var(--banner-height);
+
+    @include respond-to('laptop-pc_s') {
+      --banner-height: 280px;
+    }
+
+    @include respond-to('pad_h') {
+      --banner-height: 220px;
+    }
+
+    @include respond-to('<=pad_v') {
+      --banner-height: 120px;
+    }
+  }
+
+  &.small {
+    --banner-height: 280px;
+    height: var(--banner-height);
+
+    @include respond-to('laptop-pc_s') {
+      --banner-height: 220px;
+    }
+
+    @include respond-to('pad_h') {
+      --banner-height: 180px;
+    }
+
+    @include respond-to('<=pad_v') {
+        display: none;
+    }
+  }
+
+  :deep(.o-btn) {
+    border-radius: var(--btn-height);
+  }
+}
+
+.banner-carousel {
+  width: 100%;
+  height: 100%;
+  @include respond-to('>pad_v') {
+    --carousel-indicator-offset: 53px;
+  }
+
+  @include respond-to('<=pad_v') {
+    --carousel-indicator-offset: 1px;
+  }
+
+  :deep(.o-carousel-indicator-bar) {
+    height: 24px;
+  }
+}
+
+.banner-item {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes fade-up {
+  from {
+    transform: translateY(var(--d));
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.current-slide {
+  .banner-title {
+    animation: fade-up 400ms ease-in;
+  }
+  .banner-subtitle {
+    animation: fade-up 400ms ease-in;
+  }
+  .banner-text {
+    animation: fade-up 400ms ease-in;
+  }
+  .banner-opts {
+    animation: fade-up 400ms ease-in;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+// 定制修改item1
+.banner-item0 {
+  .banner-attach {
+    height: 120px;
+
+    @include respond-to('pad') {
+      height: 80px;
+    }
+  }
+}
+
+.banner-item1 {
+  .banner-attach {
+    height: 156px;
+
+    @include respond-to('pad') {
+      height: 120px;
+    }
+  }
+}
+
+// 定制修改item2
+.banner-item2 {
+  .banner-content {
+    width: 100%;
+    justify-content: center;
+  }
+  .banner-attach {
+    height: 38%;
+    margin-top: -60px;
+    object-fit: contain;
+  }
+}
+
+.banner-wrapper {
+  height: 100%;
+
+  .banner-bg {
+    height: 100%;
+  }
+}
+</style>