@opendesign-plus-test/components 0.0.1-rc.27 → 0.0.1-rc.29

package/src/components/meeting/OMeetingForm.vue

@@ -6,6 +6,7 @@ import {
   OForm,
   OFormItem,
   OIcon,
+  OIconTime,
   OInput,
   OOption,
   OPopover,
@@ -14,19 +15,18 @@ import {
   OSelect,
   OSwitch,
   OTextarea,
-  OIconTime,
   useMessage,
 } from '@opensig/opendesign';
 import IconHelp from '~icons/meeting/icon-help.svg';
 import IconTip from '~icons/meeting/icon-tip.svg';
-import { MeetingFormPropsT, MeetingPostT, OptionItemT } from './types';
+import { MeetingFormPropsT, MeetingGroupType, MeetingPostT, OptionItemT } from './types';
 import dayjs from 'dayjs';
-import { findLabelFromOptions, formatDateNumber, getDateNumber } from './utils';
+import { findLabelFromOptions, formatDateNumber, getDateNumber, getPlatformLabel } from './utils';
 import {
+  CYCLE_TYPE_OPTIONS0,
   EMAIL_REGEX,
   INTERVAL_DAY,
   INTERVAL_MONTH,
-  CYCLE_TYPE_OPTIONS0,
   INTERVAL_WEEK,
   INTERVAL_WEEK_OPTIONS,
 } from './config';
@@ -40,8 +40,9 @@ const props = withDefaults(defineProps<MeetingFormPropsT>(), {
   isSub: false,
   isEdit: false,
   showBtns: true,
+  groupType: MeetingGroupType.SIG,
 });
-const message = useMessage();
+const message = useMessage(null);
 
 const cycleTypeOptions = ref(CYCLE_TYPE_OPTIONS0);
 
@@ -72,161 +73,166 @@ const form = ref<MeetingPostT>(Object.assign({}, initForm) as unknown as Meeting
 const formRef = ref(null); // 表单实例
 const loading = ref(false); // 提交状态
 // 表单校验规则
-const rules = ref({
-  topic: [
-    { required: true, message: t('meeting.enterMeetingName') },
-    {
-      validator: (value: string) => {
-        if (value.length > 128) {
-          return {
-            type: 'danger',
-            message: t('meeting.meetingNameTooLong'),
-          };
-        }
-      },
-    },
-  ],
-  agenda: [
-    {
-      validator: (value: string) => {
-        if (value.length > 4096) {
-          return {
-            type: 'danger',
-            message: t('meeting.meetingAgendaTooLong'),
-          };
-        }
-      },
-    },
-  ],
-  group_name: [{ required: true, message: t('meeting.selectSig') }],
-  etherpad: [{ required: true, message: t('meeting.enterEtherpad') }],
-  date: [{ required: true, message: t('meeting.selectDate') }],
-  time: [
-    {
-      validator: (value: string) => {
-        const { is_cycle, cycle_type, cycle_interval, cycle_point, date, date_range } = form.value;
-        if (is_cycle) {
-          const msg = {
-            type: 'danger',
-            message: t('meeting.finishMeetingConfig'),
-          };
-          if (cycle_type === INTERVAL_DAY) {
-            if (!cycle_interval) return msg;
-          }
-          if (cycle_type === INTERVAL_WEEK) {
-            if (!cycle_interval || !cycle_point?.length) return msg;
-          }
-          if (cycle_type === INTERVAL_MONTH) {
-            if (!cycle_interval || !cycle_point?.length) return msg;
+const rules = computed(() => {
+  return {
+    topic: [
+      { required: true, message: t('meeting.enterMeetingName') },
+      {
+        validator: (value: string) => {
+          if (value.length > 128) {
+            return {
+              type: 'danger',
+              message: t('meeting.meetingNameTooLong'),
+            };
           }
-          if (!date_range?.length) {
+        },
+      },
+    ],
+    agenda: [
+      {
+        validator: (value: string) => {
+          if (value.length > 4096) {
             return {
               type: 'danger',
-              message: t('meeting.selectMeetingDate'),
+              message: t('meeting.meetingAgendaTooLong'),
             };
           }
-          const NONE_MSG = t('meeting.invalidMeetingDuration');
-          let start = date_range[0];
-          const end = date_range[1];
-          if (cycle_type === INTERVAL_WEEK) {
-            const weeks = new Set();
-            while (!dayjs(start).isAfter(dayjs(end))) {
-              weeks.add(dayjs(start).day());
-              start = dayjs(start).add(1, 'day');
+        },
+      },
+    ],
+    group_name: [{
+      required: true,
+      message: props.groupType === MeetingGroupType.GROUP ? t('meeting.selectGroup') : t('meeting.selectSig'),
+    }],
+    etherpad: [{ required: true, message: t('meeting.enterEtherpad') }],
+    date: [{ required: true, message: t('meeting.selectDate') }],
+    time: [
+      {
+        validator: (value: string) => {
+          const { is_cycle, cycle_type, cycle_interval, cycle_point, date, date_range } = form.value;
+          if (is_cycle) {
+            const msg = {
+              type: 'danger',
+              message: t('meeting.finishMeetingConfig'),
+            };
+            if (cycle_type === INTERVAL_DAY) {
+              if (!cycle_interval) return msg;
+            }
+            if (cycle_type === INTERVAL_WEEK) {
+              if (!cycle_interval || !cycle_point?.length) return msg;
             }
-            if (cycle_point.every((point) => !weeks.has(point))) {
+            if (cycle_type === INTERVAL_MONTH) {
+              if (!cycle_interval || !cycle_point?.length) return msg;
+            }
+            if (!date_range?.length) {
               return {
                 type: 'danger',
-                message: NONE_MSG,
+                message: t('meeting.selectMeetingDate'),
               };
             }
-          }
-          if (cycle_type === INTERVAL_MONTH) {
-            const days = new Set();
-            while (!dayjs(start).isAfter(dayjs(end))) {
-              days.add(dayjs(start).date());
-              start = dayjs(start).add(1, 'day');
+            const NONE_MSG = t('meeting.invalidMeetingDuration');
+            let start = date_range[0];
+            const end = date_range[1];
+            if (cycle_type === INTERVAL_WEEK) {
+              const weeks = new Set();
+              while (!dayjs(start).isAfter(dayjs(end))) {
+                weeks.add(dayjs(start).day());
+                start = dayjs(start).add(1, 'day');
+              }
+              if (cycle_point.every((point) => !weeks.has(point))) {
+                return {
+                  type: 'danger',
+                  message: NONE_MSG,
+                };
+              }
             }
-            if (cycle_point.every((point) => !days.has(point))) {
+            if (cycle_type === INTERVAL_MONTH) {
+              const days = new Set();
+              while (!dayjs(start).isAfter(dayjs(end))) {
+                days.add(dayjs(start).date());
+                start = dayjs(start).add(1, 'day');
+              }
+              if (cycle_point.every((point) => !days.has(point))) {
+                return {
+                  type: 'danger',
+                  message: NONE_MSG,
+                };
+              }
+            }
+          } else {
+            if (!date) {
               return {
                 type: 'danger',
-                message: NONE_MSG,
+                message: t('meeting.selectMeetingDate'),
               };
             }
           }
-        } else {
-          if (!date) {
-            return {
-              type: 'danger',
-              message: t('meeting.selectMeetingDate'),
-            };
-          }
-        }
-        if (!value?.trim()?.length) {
-          return {
-            type: 'danger',
-            message: t('meeting.selectMeetingTime'),
-          };
-        }
-        const arr = value.split('-').map((v) => v.split(':').map(Number));
-        if (arr[0][0] > arr[1][0] || (arr[0][0] === arr[1][0] && arr[0][1] >= arr[1][1])) {
-          return {
-            type: 'danger',
-            message: t('meeting.endTimeAfterStartTime'),
-          };
-        }
-        if (!form.value.is_cycle && form.value.date && form.value.start) {
-          const start = dayjs(`${ form.value.date } ${ form.value.start }`);
-          if (new Date(start).getTime() < new Date().getTime()) {
+          if (!value?.trim()?.length) {
             return {
               type: 'danger',
-              message: t('meeting.startTimeBeforeEndTime'),
+              message: t('meeting.selectMeetingTime'),
             };
           }
-        }
-      },
-      triggers: ['blur', 'change'],
-    },
-  ],
-  platform: [{ required: true, message: t('meeting.selectPlatform') }],
-  email_list: [
-    {
-      validator: (value: string) => {
-        if (props.isEdit) {
-          return {};
-        }
-        const str = value.replaceAll(' ', '') || '';
-        if (str.length) {
-          if (str.length > 1020) {
+          const arr = value.split('-').map((v) => v.split(':').map(Number));
+          if (arr[0][0] > arr[1][0] || (arr[0][0] === arr[1][0] && arr[0][1] >= arr[1][1])) {
             return {
               type: 'danger',
-              message: t('meeting.emailTooLong'),
+              message: t('meeting.endTimeAfterStartTime'),
             };
           }
-          const list = str.split(';') || [];
-          if (list.some((v) => !EMAIL_REGEX.test(v))) {
-            return {
-              type: 'danger',
-              message: t('meeting.emailInvalid'),
-            };
+          if (!form.value.is_cycle && form.value.date && form.value.start) {
+            const start = dayjs(`${ form.value.date } ${ form.value.start }`);
+            if (new Date(start).getTime() < new Date().getTime()) {
+              return {
+                type: 'danger',
+                message: t('meeting.startTimeBeforeEndTime'),
+              };
+            }
           }
-          if (list.some((v) => v.length > 50)) {
-            return {
-              type: 'danger',
-              message: t('meeting.singleEmailTooLong'),
-            };
+        },
+        triggers: ['blur', 'change'],
+      },
+    ],
+    platform: [{ required: true, message: t('meeting.selectPlatform') }],
+    email_list: [
+      {
+        validator: (value: string) => {
+          if (props.isEdit) {
+            return {};
           }
-          if (list.length > 20) {
-            return {
-              type: 'danger',
-              message: t('meeting.emailCountTooLong'),
-            };
+          const str = value.replaceAll(' ', '') || '';
+          if (str.length) {
+            if (str.length > 1020) {
+              return {
+                type: 'danger',
+                message: t('meeting.emailTooLong'),
+              };
+            }
+            const list = str.split(';') || [];
+            if (list.some((v) => !EMAIL_REGEX.test(v))) {
+              return {
+                type: 'danger',
+                message: t('meeting.emailInvalid'),
+              };
+            }
+            if (list.some((v) => v.length > 50)) {
+              return {
+                type: 'danger',
+                message: t('meeting.singleEmailTooLong'),
+              };
+            }
+            if (list.length > 20) {
+              return {
+                type: 'danger',
+                message: t('meeting.emailCountTooLong'),
+              };
+            }
           }
-        }
+        },
+        triggers: ['blur', 'change'],
       },
-      triggers: ['blur', 'change'],
-    },
-  ],
+    ],
+  };
 });
 
 const sigOptions = ref<OptionItemT[]>([]); // sig组选项列表
@@ -247,7 +253,7 @@ const getPlatformOptions = async () => {
     return;
   }
   const res = await props.getPlatformsRequest();
-  typeOptions.value = res.map((v) => ({ label: v, value: v }));
+  typeOptions.value = res.map((v) => ({ label: getPlatformLabel(v), value: v }));
   if (!props.data) {
     form.value.platform = typeOptions.value[0].value;
   }
@@ -459,10 +465,13 @@ defineExpose({
           style="width: 100%"
           v-model="form.topic" />
       </OFormItem>
-      <OFormItem :rules="rules.group_name" :label="t('meeting.meetingSig')" field="group_name">
+      <OFormItem
+        :rules="rules.group_name"
+        :label="groupType === MeetingGroupType.GROUP ? t('meeting.meetingGroup'):t('meeting.meetingSig')"
+        field="group_name">
         <OSelect
           :disabled="isEdit"
-          :placeholder="t('meeting.selectSig')"
+          :placeholder="groupType === MeetingGroupType.GROUP ? t('meeting.selectGroup') : t('meeting.selectSig')"
           size="large"
           style="width: 100%"
           v-model="form.group_name"
@@ -474,7 +483,7 @@ defineExpose({
       <OFormItem :rules="rules.etherpad" label="Etherpad" field="etherpad" v-if="form.group_name">
         <template #label>
           <div class="label-wrapper">
-            <span>Etherpad&nbsp;</span>
+            <span>{{ t('meeting.etherpad') }}&nbsp;</span>
             <OPopover>
               <div class="o-meeting-form-popover-content etherpad">{{ t('meeting.etherpadDesc') }}</div>
               <template #target>

package/src/components/meeting/OMyMeetingCalendar.vue

@@ -20,7 +20,7 @@ import {
 import { ElCalendar } from 'element-plus';
 import { computed, nextTick, onMounted, ref, onUnmounted, watch } from 'vue';
 import OMeetingDetail from './components/OMeetingDetail.vue';
-import type { MeetingItemT, PageParamsT } from './types.ts';
+import { 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, WEEKDAY } from './config.ts';
@@ -43,11 +43,14 @@ const reloadAll = ref(false); // 是否需要清空数据
 const { t, locale } = useI18n();
 const isEn = computed(() => locale.value === Locales.EN);
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   cancelSubMeetingRequest: any;
   deleteMeetingRequest: any;
-  getMeetingListRequest: any
-}>();
+  getMeetingListRequest: any;
+  groupType: MeetingGroupType
+}>(), {
+  groupType: MeetingGroupType.SIG,
+});
 
 const dialogLoading = ref(false); // 弹窗按钮状态
 const { isPhone } = useScreen();
@@ -648,7 +651,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
                           <div class="meeting-info">
                             <span>{{ row.dateRange }}</span>
                             <ODivider direction="v" />
-                            <span>{{ t('meeting.sigs') }}: {{ row.group_name }}</span>
+                            <span>
+                              {{ groupType === MeetingGroupType.GROUP ? t('meeting.groups') : t('meeting.sigs')
+                              }}: {{ row.group_name }}
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -833,14 +839,39 @@ const cancelActions = computed<DialogActionT[]>(() => {
     }
 
     .list-calendar {
-      width: 334px;
       flex-shrink: 0;
+      width: 334px;
+      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
 
+      @include respond-to('pad_h') {
+        .el-calendar {
+          .el-calendar__body {
+            padding-left: 12px;
+            padding-right: 12px;
+
+            .el-calendar-table .date-cell {
+              height: 40px;
+              width: 28px;
+
+              .date-cell-text {
+                line-height: 24px;
+                @include tip2;
+              }
+            }
+          }
+        }
+      }
+      @include respond-to('pad_v') {
+        width: 100%;
+      }
+      @include respond-to('phone') {
+        display: none;
+      }
       .el-calendar {
         min-height: 460px;
         height: calc(100% - 54px);
-        background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
         border-radius: var(--o-radius-xs);
+        background-color: transparent;
 
         .el-calendar__header {
           border-bottom: 1px solid var(--o-color-control4);
@@ -869,9 +900,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
         .el-calendar__body {
           .el-calendar-table {
-            tr {
-              background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
-            }
 
             th {
               text-align: center;
@@ -979,31 +1007,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
         }
       }
 
-      @include respond-to('pad_h') {
-        width: 240px;
-        .el-calendar {
-          .el-calendar__body {
-            padding-left: 12px;
-            padding-right: 12px;
-
-            .el-calendar-table .date-cell {
-              height: 40px;
-              width: 28px;
-
-              .date-cell-text {
-                line-height: 24px;
-                @include tip2;
-              }
-            }
-          }
-        }
-      }
-      @include respond-to('pad_v') {
-        width: 100%;
-      }
-      @include respond-to('phone') {
-        display: none;
-      }
     }
 
     .list-wrapper {
@@ -1024,11 +1027,15 @@ const cancelActions = computed<DialogActionT[]>(() => {
         .o-scrollbar-rail {
           right: -16px;
         }
+
+        .o-scrollbar {
+          height: 100%;
+        }
       }
 
       .scroller-container {
         height: 100%;
-        max-height: calc(var(--layout-left-height) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
+        max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
 
         @include respond-to('phone') {
           max-height: fit-content;
@@ -1357,18 +1364,13 @@ const cancelActions = computed<DialogActionT[]>(() => {
               display: flex;
               align-items: center;
               padding-left: calc(var(--o-gap-3) + var(--icon-size));
-              gap: var(--o-gap-5);
+              gap: var(--o-gap-4);
               width: 100%;
 
               .o-link {
                 font-size: 14px;
                 line-height: 21px;
               }
-
-              .o-link + .o-link {
-                margin-left: var(--o-gap-section-6);
-              }
-
               .o-icon {
                 font-size: 16px;
               }

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

@@ -4,7 +4,7 @@ import OMeetingDetail from './OMeetingDetail.vue';
 import { computed, nextTick, ref, watch } from 'vue';
 import IconMeetinging from '~icons/meeting/icon-meet.svg';
 import IconCopy from '~icons/meeting/icon-copy.svg';
-import { CalendarDataType, MeetingItemT } from '../types.ts';
+import { CalendarDataType, MeetingGroupType, MeetingItemT } from '../types.ts';
 
 import IconAll from '~icons/meeting/icon-all.svg';
 import IconEvent from '~icons/meeting/icon-event.svg';
@@ -16,7 +16,10 @@ import { CYCLE_TYPE_OPTIONS, INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from
 import { formatDate, getConfig, getPointStr } from '../utils.ts';
 import { useI18n } from '@/i18n';
 
-const props = withDefaults(defineProps<{ list: MeetingItemT[] }>(), {
+const props = withDefaults(defineProps<{
+  list: MeetingItemT[];
+  groupType: MeetingGroupType;
+}>(), {
   list: () => [],
 });
 const { t, locale } = useI18n();
@@ -31,14 +34,16 @@ const copyInfo = async (idx) => {
 };
 
 const collapseNames = ref([]);
-const i18n = {
-  SIG_GROUP: `${ t('meeting.sigs') }: `,
-  NEW_DATE: t('meeting.latestMeeting'),
-  EMPTY_TEXT: t('meeting.meetingEmptyText'),
-  LEARN_MORE: t('common.seeMore'),
-  JOIN_MEETING: t('meeting.joinMeeting'),
-  SIGN: t('meeting.sign'),
-};
+const i18n = computed(() => {
+  return {
+    SIG_GROUP: `${ props.groupType === MeetingGroupType.GROUP ? t('meeting.groups') : t('meeting.sigs') }: `,
+    NEW_DATE: t('meeting.latestMeeting'),
+    EMPTY_TEXT: t('meeting.meetingEmptyText'),
+    LEARN_MORE: t('common.seeMore'),
+    JOIN_MEETING: t('meeting.joinMeeting'),
+    SIGN: t('meeting.sign'),
+  };
+});
 
 const getCurrentIcon = (item) => {
   if (item.type === 'summit') return IconSummit;
@@ -276,11 +281,8 @@ const computedList = computed(() => {
       }
 
       &.o-collapse-item-expanded {
-        @include respond-to('<=pad_v') {
-
-          .copy-icon {
-            display: inline-flex;
-          }
+        .copy-icon {
+          display: inline-flex;
         }
       }
     }
@@ -305,9 +307,9 @@ const computedList = computed(() => {
         padding: 12px 16px;
       }
 
-
       .o-collapse-item-title {
         flex-grow: 1;
+        margin-bottom: 0;
       }
 
 
@@ -333,7 +335,12 @@ const computedList = computed(() => {
     .jump-detail-link {
       padding-left: calc(var(--icon-right) + var(--icon-size2));
       margin-top: var(--o-gap-2);
-      @include text1;
+      color: var(--o-color-info2);
+      @include tip1;
+
+      &:hover {
+        color: var(--o-color-primary1);
+      }
 
       .o-icon {
         font-size: 16px;
@@ -362,7 +369,6 @@ const computedList = computed(() => {
 
       .o-icon {
         flex-shrink: 0;
-        padding: 2px;
         border-radius: 50%;
         overflow: hidden;
         color: var(--o-color-white);
@@ -378,6 +384,7 @@ const computedList = computed(() => {
 
       .text {
         display: block;
+        font-weight: 600;
         @include text-truncate(1);
       }
     }
@@ -390,6 +397,7 @@ const computedList = computed(() => {
       align-items: center;
       color: var(--o-color-info3);
       text-decoration: none;
+      font-weight: 400;
       @include tip1;
 
       .o-divider {