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

package/src/components/banner/OBannerContent.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { OButton, OFigure } from '@opensig/opendesign';
+import ContentWrapper from '../common/ContentWrapper.vue';
+import type { BannerContentProps } from './types';
+
+defineProps<BannerContentProps>();
+
+// 内联定义 emits 类型
+const emit = defineEmits<{
+  (e: 'click', href: string | undefined): void;
+}>();
+
+const onClick = (href: string | undefined, hasBtn: string | undefined) => {
+  if (href && !hasBtn) {
+    window.open(href);
+    emit('click', href);
+  }
+};
+</script>
+
+<template>
+  <OFigure
+    class="banner-bg"
+    :src="info.bg"
+    :class="{
+      'with-sticky-bg': info.withStickyBg,
+      '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': true, 
+            'text-dark': info.text_theme === 'dark' 
+          }" 
+          v-if="info.title"
+        >
+          {{ info.title }}
+        </div>
+        <!-- 副标题 -->
+        <div 
+          :class="{
+            'banner-subtitle': true, 
+            'text-dark': info.text_theme === 'dark' 
+          }" 
+          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 === 'tiny' ? undefined : size"
+          >
+            {{ info.btn }}
+          </OButton>
+        </div>
+      </div>
+    </ContentWrapper>
+  </OFigure>
+</template>
+
+<style lang="scss" scoped>
+.banner-bg {
+  width: 100%;
+  height: 100%;
+
+  :deep(.o-figure-img) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include respond-to('pad') {
+    :deep(.o-figure-img) {
+      transition: object-position 0.3s ease;
+      object-position: var(--pad-offset);
+    }
+  }
+
+  @include respond-to('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-title {
+  @include display1;
+  color: var(--o-color-info1);
+  font-weight: 500;
+  margin-bottom: 8px;
+
+  &.text-dark {
+    color: var(--o-color-info1-inverse);
+  }
+
+  @include respond-to('<=pad_v') {
+    font-size: 22px;
+    line-height: 30px;
+  }
+}
+
+.banner-subtitle {
+  color: var(--o-color-info1);
+  margin-top: 8px;
+  font-size: 16px;
+
+  &.text-dark {
+    color: var(--o-color-info1-inverse);
+  }
+}
+
+.banner-text {
+  height: var(--pc-height);
+  width: var(--pc-width);
+  background-size: contain;
+  background-repeat: no-repeat;
+
+  @include respond-to('pad') {
+    height: var(--pad-height);
+    width: var(--pad-width);
+  }
+}
+
+.banner-opts {
+  margin-top: 24px;
+  --d: 20px;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>

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/header/OHeader.vue

@@ -35,7 +35,7 @@ const handleMouseenter = (val: any) => {
     itemVisible.value = true;
   }
 };
-const handleMouseleave = (val: any) => {
+const handleMouseleave = () => {
   itemVisible.value = false;
 };
 const handleClick = (val: any) => {

package/src/components/meeting/OMeetingCalendar.vue

@@ -286,6 +286,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
   }
   return false;
 };
+
+defineExpose({
+  refresh: getDateData,
+});
 </script>
 <template>
   <div class="o-meeting-calendar">
@@ -372,7 +376,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             >
               <OOption v-for="t in groups" :value="t" :key="t">{{ t }}</OOption>
             </OSelect>
-            <OTab v-model="tabType" :line="false">
+            <OTab v-model="tabType" :line="false" :max-show="9999">
               <OTabPane v-for="item in tabs" :key="item.value" :value="item.value">
                 <template #nav>
                   <OIcon>
@@ -822,6 +826,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
         .o-select {
           display: none;
+          margin-bottom: var(--o-gap-2);
           @include respond('<=pad_v') {
             display: inline-flex;
           }
@@ -829,6 +834,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             display: flex;
             width: 100%;
             max-width: 100%;
+            margin-bottom: 0;
           }
         }
 
@@ -857,17 +863,16 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           .o-icon {
             display: none;
           }
-          .o-tab-navs-wrap {
-            height: 40px;
+          .o-tab-navs-container {
 
             .o-tab-nav {
-              line-height: 2;
+              line-height: 32px;
             }
           }
         }
         @include respond('phone') {
-          .o-tab-navs-wrap {
-            height: auto;
+          .o-tab-nav {
+            line-height: 2;
           }
         }
 

package/src/components/meeting/OMeetingForm.vue

@@ -45,7 +45,7 @@ const intervalTypeMax = computed(() => {
   return findLabelFromOptions(form.value.cycle_type, cycleTypeOptions.value, 'max');
 });
 const initForm: MeetingPostT = {
-  is_record: false,
+  is_record: true,
   agenda: '',
   email_list: '',
   platform: 'WELINK',
@@ -265,15 +265,48 @@ const getPlatformOptions = async () => {
 };
 
 const emits = defineEmits(['confirm', 'cancel']);
+
+const getPropData = () => {
+  if (!props.data) {
+    return {};
+  }
+  const {
+    start,
+    end,
+    is_cycle,
+    cycle_start_date,
+    cycle_end_date,
+    cycle_point,
+    cycle_interval,
+    cycle_start,
+    cycle_end,
+  } = props.data;
+  return {
+    ...props.data,
+    time: `${ start }-${ end }`,
+    ...(is_cycle
+      ? {
+        date_range: [cycle_start_date, cycle_end_date],
+        cycle_point: cycle_point?.map((v) => parseInt(v)) || [],
+        cycle_interval: cycle_interval || 1,
+        time: `${ cycle_start }-${ cycle_end }`,
+        start: cycle_start,
+        end: cycle_end,
+      }
+      : {}),
+  };
+};
+
 watch(
   () => props.data,
   (data) => {
     if (data) {
-      const sub = data?.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,
-        data,
+        propData,
         props.isSub
           ? {
             is_cycle: false,
@@ -373,6 +406,7 @@ const confirm = async () => {
       platform,
       is_cycle,
     } as MeetingPostT as unknown as any;
+    let flag = undefined;
     if (is_cycle) {
       params = {
         ...params,
@@ -401,7 +435,7 @@ const confirm = async () => {
       if (props.isSub) {
         const { mid, sub_id } = form.value;
         const { date, start, end } = params;
-        await props?.editSubMeetingRequest(sub_id, {
+        flag = await props?.editSubMeetingRequest(sub_id, {
           mid,
           date,
           start,
@@ -416,17 +450,21 @@ const confirm = async () => {
           etherpad: _etherpad,
           ...data
         } = params;
-        await props?.editMeetingRequest(props.data?.id as unknown as number, {
+        flag = await props?.editMeetingRequest(props.data?.id as unknown as number, {
           ...data,
           is_notify: true,
         });
       }
     } else {
-      await props?.createMeetingRequest({
+      flag = await props?.createMeetingRequest({
         ...params,
         email_list: form.value.email_list.replaceAll(' ', ''),
       });
     }
+    // 如果返回的是boolean，只有true表示回调成功
+    if (typeof flag === 'boolean' && !flag) {
+      return;
+    }
     const msg = t('meeting.meetingHandleSuccess', [form.value.topic, type]);
     message.success({
       content: msg,
@@ -651,7 +689,11 @@ defineExpose({
               <OIcon>
                 <IconTip />
               </OIcon>
-              <span>{{ t('meeting.meetingRecordDesc', [getPlatformLabel(form.platform)]) }}</span>
+              <div>
+                <span>{{ t('meeting.meetingRecordDesc1') }}</span>
+                <br>
+                <span>{{ t('meeting.meetingRecordDesc2') }}</span>
+              </div>
             </div>
           </div>
         </template>
@@ -663,7 +705,11 @@ defineExpose({
             <OIcon>
               <IconTip />
             </OIcon>
-            <span>{{ t('meeting.meetingRecordDesc', [getPlatformLabel(form.platform)]) }}</span>
+            <div>
+              <span>{{ t('meeting.meetingRecordDesc1') }}</span>
+              <br>
+              <span>{{ t('meeting.meetingRecordDesc2') }}</span>
+            </div>
           </div>
         </div>
       </template>
@@ -695,7 +741,7 @@ defineExpose({
     </OForm>
     <div class="form-btns" v-if="showBtns">
       <OButton color="primary" variant="solid" size="large" @click="confirm" :loading="loading">
-        {{ isEdit ? t('common.save') : (bookText || t('meeting.book')) }}
+        {{ isEdit ? t('common.save') : (confirmText || t('meeting.book')) }}
       </OButton>
       <OButton color="primary" variant="outline" size="large" @click="cancel">{{ t('common.cancel') }}</OButton>
     </div>

package/src/components/meeting/OMeetingMyCalendar.vue

@@ -22,7 +22,6 @@ import { computed, nextTick, onMounted, ref, onUnmounted, watch } from 'vue';
 import OMeetingDetail from './components/OMeetingDetail.vue';
 import { CalendarDataType, MeetingGroupType, MeetingItemT, PageParamsT } from './types.ts';
 import dayjs from 'dayjs';
-import IconMeeting from '~icons/meeting/icon-meet.svg';
 import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from './config.ts';
 import { formatDate, getDateNumber } from './utils.ts';
 import { useMeetingConfig } from './composables/useMeetingConfig';
@@ -279,7 +278,10 @@ const confirmCancel = async () => {
   }
   try {
     dialogLoading.value = true;
-    await props.deleteMeetingRequest(currentRow.value.id);
+    const flag = await props.deleteMeetingRequest(currentRow.value.id);
+    if (typeof flag === 'boolean' && !flag) {
+      return;
+    }
     cancelVisible.value = false;
     message.success({
       content: `${ t('meeting.meetingCancel', [currentRow.value.topic]) }`,
@@ -331,24 +333,25 @@ const confirmHandleItem = async () => {
   }
   if (handleDialogType.value === 'cancel') {
     try {
+      let flag = undefined;
       dialogLoading.value = true;
       if (handleType.value === 'single' && row.is_cycle) {
         if (!props.cancelSubMeetingRequest) {
           return;
         }
-        await props.cancelSubMeetingRequest(row.sub_id);
-        message.success({
-          content: `${ t('meeting.meetingCancel', [row.topic]) }`,
-        });
+        flag = await props.cancelSubMeetingRequest(row.sub_id);
       } else {
         if (!props.deleteMeetingRequest) {
           return;
         }
-        await props.deleteMeetingRequest(row.id);
-        message.success({
-          content: `${ t('meeting.meetingCancel', [row.topic]) }`,
-        });
+        flag = await props.deleteMeetingRequest(row.id);
+      }
+      if (typeof flag === 'boolean' && !flag) {
+        return;
       }
+      message.success({
+        content: `${ t('meeting.meetingCancel', [row.topic]) }`,
+      });
       cancelHandleItem();
       reloadAll.value = true;
       getList();
@@ -968,14 +971,13 @@ const cancelActions = 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(--meeting-cell-radius);
                 background-color: var(--o-color-control2-light);
                 border: 1px solid transparent;
@@ -1000,7 +1002,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               &::after {
                 content: '';
                 position: absolute;
-                bottom: 2px;
+                bottom: 5px;
                 left: 50%;
                 transform: translateX(-50%);
                 width: 8px;
@@ -1057,6 +1059,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         display: flex;
         align-items: center;
         justify-content: center;
+        min-height: 600px;
       }
 
 

package/src/components/meeting/OMeetingPlayback.vue

@@ -200,7 +200,7 @@ onUnmounted(() => {
         />
       </div>
       <div class="info-wrapper">
-        <OTab v-model="tab">
+        <OTab v-model="tab" :max-show="9999">
           <OTabPane v-for="t in tabOptions" :key="t.value" :value="t.value" :label="t.label" />
         </OTab>
         <OScroller :class="['tab-content', `tab-content-${tab}`]" show-type="hover">
@@ -261,7 +261,12 @@ onUnmounted(() => {
       <OMeetingPlaybackSubtitles
         :captions="captionsList"
         :trackIdx="trackIdx"
-        :instance="playbackInstance" />
+        :instance="playbackInstance"
+      >
+        <template #empty>
+          <slot name="empty"></slot>
+        </template>
+      </OMeetingPlaybackSubtitles>
     </div>
   </div>
 </template>
@@ -319,8 +324,9 @@ onUnmounted(() => {
 
       .o-tab {
         --tab-nav-justify: flex-start;
-        .o-tab-navs {
-          justify-content: flex-start;
+
+        .o-tab-nav-list {
+          width: 100%;
         }
 
         .o-tab-nav {

package/src/components/meeting/OMeetingSigCalendar.vue

@@ -254,7 +254,7 @@ onMounted(() => {
           </div>
         </OPopover>
       </div>
-      <OTab v-model="tabType" @change="selectTab" :line="false">
+      <OTab v-model="tabType" @change="selectTab" :line="false" :max-show="9999">
         <OTabPane v-for="item in meetingTabs.slice(0, -1)" :key="item.value" :value="item.value">
           <template #nav>
             <OIcon>