@opendesign-plus-test/components 0.0.1-rc.59 → 0.0.1-rc.60

package/dist/index.d.ts

@@ -1,15 +1,14 @@
+import { default as OBanner } from './components/OBanner.vue';
 import { default as OCookieNotice } from './components/OCookieNotice.vue';
 import { default as OFooter } from './components/OFooter.vue';
 import { default as OHeaderSearch } from './components/OHeaderSearch.vue';
 import { default as OHeaderUser } from './components/OHeaderUser.vue';
-import { default as OLanguageSwitcher } from './components/OLanguageSwitcher.vue';
 import { default as OPlusConfigProvider } from './components/OPlusConfigProvider.vue';
 import { default as OSection } from './components/OSection.vue';
 import { default as OSourceCode } from './components/OSourceCode.vue';
 import { default as OThemeSwitcher } from './components/OThemeSwitcher.vue';
-export { OCookieNotice, OFooter, OHeaderSearch, OHeaderUser, OLanguageSwitcher, OPlusConfigProvider, OSection, OSourceCode, OThemeSwitcher };
+export { OBanner, OCookieNotice, OFooter, OHeaderSearch, OHeaderUser, OPlusConfigProvider, OSection, OSourceCode, OThemeSwitcher };
 export * from './components/activity';
-export * from './components/banner';
 export * from './components/element-plus';
 export * from './components/events';
 export * from './components/header';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.59",
+  "version": "0.0.1-rc.60",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -32,8 +32,8 @@
     "dayjs": "^1.11.13",
     "video.js": "^8.23.7",
     "vue-dompurify-html": "^3.1.2",
-    "@opendesign-plus/composables": "0.0.1-rc.8",
-    "@opendesign-plus/styles": "0.0.1-rc.2"
+    "@opendesign-plus/styles": "0.0.1-rc.2",
+    "@opendesign-plus/composables": "0.0.1-rc.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.0",

package/scripts/generate-components-index.js

@@ -77,7 +77,7 @@ export default {
   }
 };
 `;
-
+    
     // 写入文件
     fs.writeFileSync(indexFilePath, indexContent, 'utf-8');
     console.log(`组件索引文件已生成: ${indexFilePath}`);

package/src/components/OBanner.vue

@@ -0,0 +1,398 @@
+<script setup lang="ts">
+import { OButton, OCarousel, OCarouselItem, OFigure } from '@opensig/opendesign';
+import { computed, ref } from 'vue';
+
+import { useScreen, useTheme } from '@opendesign-plus/composables';
+import ContentWrapper from './common/ContentWrapper.vue';
+
+const props = withDefaults(defineProps<{
+  options: any;
+  size: string;
+  contentJustifyCenter: boolean;
+}>(), {
+  options: undefined,
+  size: 'large',
+  contentJustifyCenter: false,
+});
+
+const { isLight } = useTheme('opendesignplus', document.domain || 'localhost');
+const { isPhone } = useScreen();
+
+const bannerInfo = computed(() => props.options);
+
+// 主题切换
+const theme = ref('');
+const onBeforeChange = (idx: number) => {
+  setTimeout(() => {
+    theme.value = bannerInfo.value[idx].bg_theme ?? 'light';
+  }, 100);
+};
+
+// banner跳转
+const onClick = (href: string, hasBtn: boolean | undefined) => {
+  if (href && !hasBtn) {
+    window.open(href);
+  }
+};
+</script>
+
+<template>
+  <div :class="['home-banner', size]">
+    <div v-if="size === 'tiny'">
+      {{ bannerInfo[1].title }}
+    </div>
+
+    <OCarousel
+      v-else-if="!isPhone"
+      class="banner-carousel"
+      effect="toggle"
+      active-class="current-slide"
+      indicator-click
+      :auto-play="true"
+      :data-o-theme="theme"
+      @before-change="onBeforeChange"
+    >
+      <OCarouselItem v-for="(info, index) in bannerInfo" :key="index" class="banner-item" :class="`banner-item${index}`">
+        <OFigure
+          class="banner-bg"
+          :src="info.bg"
+          :class="{
+            'with-sticky-bg': info.withStickyBg,
+            'in-dark': !isLight,
+            'cursor-pointer': info.href && !info.btn,
+          }"
+          :style="{
+            '--pad-offset': info.pad_offset,
+          }"
+          @click="onClick(info.href, info.btn)"
+        >
+          <ContentWrapper class="banner-wrapper" :class="['banner-wrapper', contentJustifyCenter ? 'content-center' : '']">
+            <div class="banner-content">
+              <img v-if="!isPhone && info.attach" :src="info.attach" class="banner-attach" />
+
+              <!-- 标题 -->
+              <div class="banner-title" v-if="info.title">{{ info.title }}</div>
+              <!-- 副标题 -->
+              <div class="banner-subtitle" v-if="info.subtitle">{{ info.subtitle }}</div>
+              <div
+                class="banner-text"
+                v-if="info.bg_text"
+                :style="{
+                  backgroundImage: `url(${info.bg_text})`,
+                  '--pc-width': info.pc_text_width,
+                  '--pc-height': info.pc_text_height,
+                  '--pad-width': info.pad_text_width,
+                  '--pad-height': info.pad_text_height,
+                }"
+              ></div>
+              <!-- 操作按钮 -->
+              <div v-if="info.btn" class="banner-opts">
+                <OButton :href="info.href" target="_blank" variant="solid" color="primary" :size="size">
+                  {{ info.btn }}
+                </OButton>
+              </div>
+            </div>
+          </ContentWrapper>
+        </OFigure>
+      </OCarouselItem>
+    </OCarousel>
+
+    <OCarousel
+      v-else-if="isPhone"
+      class="banner-carousel"
+      effect="gallery"
+      indicator-click
+      :data-o-theme="theme"
+      arrow="never"
+      :auto-play="true"
+      @before-change="onBeforeChange"
+    >
+      <OCarouselItem
+        v-for="(info, index) in bannerInfo"
+        class="banner-item"
+        :class="`banner-item${index}`"
+        :key="index">
+        <ContentWrapper class="banner-wrapper">
+          <OFigure class="banner-bg" :src="info.bg" @click="onClick(info.href)" />
+        </ContentWrapper>
+      </OCarouselItem>
+    </OCarousel>
+  </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);
+  }
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    font-size: 48px; // 基础字体大小
+    margin-bottom: 8px;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    font-size: 16px;
+  }
+
+  .banner-text {
+    height: var(--pc-height);
+    width: var(--pc-width);
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    @include respond('pad') {
+      height: var(--pad-height);
+      width: var(--pad-width);
+    }
+  }
+
+  &.large {
+    --banner-height: 460px;
+    height: var(--banner-height);
+
+    .banner-title {
+      @include display1;
+    }
+
+    .banner-subtitle {
+      @include h4;
+    }
+
+    @include respond('laptop-pc_s') {
+      --banner-height: 400px;
+    }
+
+    @include respond('pad_h') {
+      --banner-height: 360px;
+    }
+
+    @include respond('<=pad_v') {
+      --banner-height: 184px;
+    }
+  }
+
+  &.medium {
+    --banner-height: 360px;
+    height: var(--banner-height);
+
+    .banner-title {
+      @include display2;
+    }
+
+    .banner-subtitle {
+      @include text2;
+    }
+
+    @include respond('laptop-pc_s') {
+      --banner-height: 280px;
+    }
+
+    @include respond('pad_h') {
+      --banner-height: 220px;
+    }
+
+    @include respond('<=pad_v') {
+      --banner-height: 120px;
+    }
+
+    .banner-text {
+      --pc-height: 100px !important;
+      --pc-width: 500px !important;
+
+      @include respond('pad') {
+        --pc-height: 60px !important;
+        --pc-width: 300px !important;
+      }
+    }
+  }
+
+  &.small {
+    --banner-height: 280px;
+    height: var(--banner-height);
+
+    .banner-title {
+      @include display2;
+    }
+
+    .banner-subtitle {
+      @include text2;
+    }
+
+    @include respond('laptop-pc_s') {
+      --banner-height: 220px;
+    }
+
+    @include respond('pad_h') {
+      --banner-height: 180px;
+    }
+
+    @include respond('<=pad_v') {
+      display: none;
+    }
+
+    .banner-text {
+      --pc-height: 80px !important;
+      --pc-width: 400px !important;
+
+      @include respond('pad') {
+        --pc-height: 50px !important;
+        --pc-width: 250px !important;
+      }
+    }
+  }
+
+  :deep(.o-btn) {
+    border-radius: var(--btn-height);
+  }
+}
+
+.banner-carousel {
+  width: 100%;
+  height: 100%;
+  @include respond('>pad_v') {
+    --carousel-indicator-offset: 53px;
+  }
+
+  @include respond('<=pad_v') {
+    --carousel-indicator-offset: 1px;
+  }
+
+  :deep(.o-carousel-indicator-bar) {
+    height: 24px;
+  }
+}
+
+.banner-item {
+  width: 100%;
+  height: 100%;
+}
+
+.banner-bg {
+  width: 100%;
+  height: 100%;
+
+  :deep(.o-figure-img) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include respond('pad') {
+    :deep(.o-figure-img) {
+      transition: object-position 0.3s ease;
+      object-position: var(--pad-offset);
+    }
+  }
+
+  @include respond('phone') {
+    --figure-radius: 4px;
+  }
+}
+
+.banner-wrapper {
+  height: 100%;
+
+  &.content-center {
+    display: flex;
+    justify-content: center;
+
+    & .banner-content {
+      align-items: center;
+    }
+  }
+}
+
+.banner-content {
+  height: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.banner-opts {
+  margin-top: 24px;
+  --d: 20px;
+}
+
+@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;
+  }
+}
+
+.in-dark.with-sticky-bg {
+  :deep(.o-figure-img) {
+    @include img-in-dark;
+  }
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
+
+<style lang="scss" scoped>
+// 定制修改item1
+.banner-item0 {
+  .banner-attach {
+    height: 120px;
+
+    @include respond('pad') {
+      height: 80px;
+    }
+  }
+}
+
+.banner-item1 {
+  .banner-attach {
+    height: 156px;
+
+    @include respond('pad') {
+      height: 120px;
+    }
+  }
+}
+
+// 定制修改item2
+.banner-item2 {
+  .banner-content {
+    width: 100%;
+    justify-content: center;
+  }
+  .banner-attach {
+    height: 38%;
+    margin-top: -60px;
+    object-fit: contain;
+  }
+}
+</style>

package/src/components/OHeaderSearch.vue

@@ -214,7 +214,7 @@ const handleClear = () => {
 const handleSuggestClick = (item: OSearchRecommendItem) => {
   emit('recommend-click', item);
   innerValue.value = item.key;
-  runSearch();
+  runSearch(item.key);
 };
 
 const handleRecommendClick = (val: string) => {

package/src/components/activity/OActivityMyCalendar.vue

@@ -410,7 +410,7 @@ const confirmDelete = () => {
   }
   dialogLoading.value = true;
   props.deleteActivityRequest(currentRow.value?.id)
-    .then((flag: any) => {
+    .then((flag) => {
       if (typeof flag === 'boolean' && !flag) {
         return;
       }

package/src/components/header/types.ts

@@ -35,7 +35,6 @@ export interface NavItemT {
   withPicture: boolean; // 快捷链接是否显示缩略图
   children: ChildrenItemT[]; // 导航子项
   shortcut: ShortcutItemT[]; // 右侧快捷链接
-  tag?: string; // 标签
 }
 
 export interface CodeItemT {

package/src/components/meeting/OMeetingCalendar.vue

@@ -82,8 +82,8 @@ const getSummitData = async (date: string) => {
       return {
         ...v,
         type: CalendarDataType.SUMMIT,
-        start_date_time: `${ formatDate(v.start_date) } ${ v.start || '' }`,
-        end_date_time: `${ formatDate(v.end_date) } ${ v.end || '' }`,
+        start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
+        end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
       };
     });
   } else {
@@ -97,8 +97,8 @@ const getActivityData = async (date: string) => {
       return {
         ...v,
         type: CalendarDataType.EVENTS,
-        start_date_time: `${ formatDate(v.start_date) } ${ v.start || '' }`,
-        end_date_time: `${ formatDate(v.end_date) } ${ v.end || '' }`,
+        start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
+        end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
       };
     });
   } else {

package/src/components/meeting/OMeetingForm.vue

@@ -19,15 +19,7 @@ import {
 } from '@opensig/opendesign';
 import IconHelp from '~icons/meeting/icon-help.svg';
 import IconTip from '~icons/meeting/icon-tip.svg';
-import {
-  CycleSubItemT,
-  MeetingFormPropsT,
-  MeetingGroupType,
-  MeetingItemT,
-  MeetingPostT,
-  OptionItemT,
-  PlatformT,
-} from './types';
+import { CycleSubItemT, MeetingFormPropsT, MeetingGroupType, MeetingPostT, OptionItemT, PlatformT } from './types';
 import dayjs from 'dayjs';
 import { findLabelFromOptions, formatDateNumber, getDateNumber } from './utils';
 import { EMAIL_REGEX, INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from './config';
@@ -39,6 +31,8 @@ import { ValidatorResultT } from '@opensig/opendesign/lib/form/types';
 const { t, locale, cycleTypeOptions0, intervalWeekOptions, getPlatformLabel } = useMeetingConfig();
 
 const props = withDefaults(defineProps<MeetingFormPropsT>(), {
+  isSub: false,
+  isEdit: false,
   showBtns: true,
   groupType: MeetingGroupType.SIG,
 });
@@ -47,8 +41,6 @@ const message = useMessage(null);
 const cycleTypeOptions = cycleTypeOptions0;
 const weekOptions = intervalWeekOptions;
 
-const isEdit = computed(() => Object.keys(props?.data || {}).length > 0);
-const isSub = computed(() => !!props.subId);
 const intervalTypeMax = computed(() => {
   return findLabelFromOptions(form.value.cycle_type, cycleTypeOptions.value, 'max');
 });
@@ -210,7 +202,7 @@ const rules = computed<Record<string, RulesT[]>>(() => {
     email_list: [
       {
         validator: (value: any) => {
-          if (isEdit.value) {
+          if (props.isEdit) {
             return {} as unknown as ValidatorResultT;
           }
           const str = value.replaceAll(' ', '').replaceAll(',', ';') || '';
@@ -295,7 +287,7 @@ const getPropData = () => {
     ...(is_cycle
       ? {
         date_range: [cycle_start_date, cycle_end_date],
-        cycle_point: cycle_point?.map((v) => parseInt(v as unknown as string)) || [],
+        cycle_point: cycle_point?.map((v) => parseInt(v)) || [],
         cycle_interval: cycle_interval || 1,
         time: `${ cycle_start }-${ cycle_end }`,
         start: cycle_start,
@@ -309,13 +301,13 @@ watch(
   () => props.data,
   (data) => {
     if (data) {
-      const propData = getPropData() as unknown as MeetingItemT;
-      const sub = propData?.cycle_sub?.find((v) => v.sub_id === (props.subId)) || {} as unknown as CycleSubItemT;
+      const propData = getPropData() as unknown as CycleSubItemT;
+      const sub = propData?.cycle_sub?.find((v) => v.sub_id === (props.subId || propData.sub_id)) || {} as unknown as CycleSubItemT;
       const { mid, date, start, end, sub_id } = sub;
       Object.assign(
         form.value,
         propData,
-        isSub.value
+        props.isSub
           ? {
             is_cycle: false,
             mid,
@@ -376,12 +368,12 @@ const changeIntervalType = () => {
 };
 
 const changeIsCycle = () => {
-  form.value.platform = typeOptions.value.find(v => (v.value as unknown as string).toLowerCase() === 'welink')?.value as unknown as string || 'WeLink';
+  form.value.platform = 'WELINK';
 };
 
 const { lePadV } = useScreen();
 const confirm = async () => {
-  let type = isEdit.value ? t('meeting.editSuccess') : t('meeting.booSuccess');
+  let type = props.isEdit ? t('meeting.editSuccess') : t('meeting.booSuccess');
   try {
     loading.value = true;
     const valid = await formRef.value.validate();
@@ -439,8 +431,8 @@ const confirm = async () => {
         end,
       };
     }
-    if (isEdit.value) {
-      if (isSub.value) {
+    if (props.isEdit) {
+      if (props.isSub) {
         const { mid, sub_id } = form.value;
         const { date, start, end } = params;
         flag = await props?.editSubMeetingRequest(sub_id, {
@@ -490,7 +482,7 @@ onMounted(() => {
 
 const changeSig = (sig: any) => {
   const find = sigOptions.value.find((v) => v.value === sig);
-  if (!isEdit.value) {
+  if (!props.isEdit) {
     form.value.etherpad = find?.etherpad || '';
     form.value.email_list = find?.email_list || '';
   }

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -90,11 +90,7 @@ const computedList = computed<any[]>(() => {
           dateRange = `${ formatDate(v.start_date) } ${ v.start }-${ formatDate(v.end_date) } ${ v.end }`;
         }
       } else {
-        if (v.start_date === v.end_date) {
-          dateRange = formatDate(v.start_date, 'YYYY/MM/DD');
-        } else {
-          dateRange = `${ formatDate(v.start_date, 'YYYY/MM/DD') }-${ formatDate(v.end_date, 'YYYY/MM/DD') }`;
-        }
+        dateRange = `${ formatDate(v.start_date, 'YYYY/MM/DD HH:mm') } ${ formatDate(v.end_date, 'YYYY/MM/DD HH:mm') }`;
       }
 
       return {
@@ -173,7 +169,7 @@ const computedList = computed<any[]>(() => {
       <OCollapseItem v-for="(item, index) in computedList" :key="item.id" :value="item.id">
         <template #title>
           <div class="meet-title-left">
-            <div class="meet-title" :title="item.topic || item.name || item.title">
+            <div class="meet-title" :title="item.topic || item.name">
               <OIcon
                 :style="{
                   backgroundColor: `${getConfig(item.type, 'color')}`

package/src/components/meeting/components/OMeetingDetail.vue

@@ -5,7 +5,6 @@ import { CalendarDataType, MeetingItemT } from '../types.ts';
 import MoreText from '@/components/common/MoreText.vue';
 import { formatDate } from '@/components/meeting/utils.ts';
 import { useMeetingConfig } from '../composables/useMeetingConfig';
-import { useI18n } from '@/i18n';
 
 const props = defineProps<{
   data: MeetingItemT;
@@ -14,8 +13,7 @@ const props = defineProps<{
   page?: CalendarDataType
 }>();
 const { t, getPlatformLabel } = useMeetingConfig();
-const { locale } = useI18n();
-const isZh = computed(() => locale.value === 'zh');
+
 // 会议详情配置
 const infoList = computed(() =>
   [
@@ -85,15 +83,11 @@ const columns = computed<ColumnItemT[]>(() => {
 });
 
 const domRef = ref([]);
-const SPLIT_MARK = '|';
 // 复制会议内容
 const copyInfo = () => {
   try {
-    const colon = isZh.value ? '：' : ': ';
-    let text = `${ t('meeting.meetingTopic') }${ colon }${ props.data.topic || props.data.name || props.data.title }\n`;
-    text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => {
-      return `${ pre }${ cur.textContent ? cur.textContent.replace(SPLIT_MARK, colon) : '' }\n`;
-    }, '');
+    let text = `${ t('meeting.meetingTopic') + props.data.topic }\n`;
+    text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => `${ pre }${ cur.textContent }\n`, '');
     navigator.clipboard.writeText(text);
     return Promise.resolve();
   } catch (e) {
@@ -120,7 +114,6 @@ defineExpose({ copyInfo });
     >
       <template v-if="getField(info.key) && !info.isRecord">
         <span class="label">{{ info.label }}</span>
-        <span class="split-mark">{{ SPLIT_MARK }}</span>
         <MoreText :show="show" v-if="info.ellipsis" :text="getField(info.key) || '-'" />
         <OLink
           v-else-if="info.isLink"
@@ -197,13 +190,6 @@ defineExpose({ copyInfo });
       }
     }
 
-    .split-mark {
-      width: 0;
-      height: 0;
-      opacity: 0;
-      overflow: hidden;
-    }
-
     &.type_events {
       .label {
         width: 6em;