@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.101

package/src/components/meeting/OMeetingForm.vue

@@ -1,1041 +0,0 @@
-<script setup lang="ts">
-import { ElDatePicker, ElInputNumber, ElTimeSelect } from 'element-plus';
-import { computed, onMounted, ref, watch } from 'vue';
-import {
-  OButton,
-  OForm,
-  OFormItem,
-  OIcon,
-  OIconTime,
-  OInput,
-  OOption,
-  OPopover,
-  ORadio,
-  ORadioGroup,
-  OSelect,
-  OSwitch,
-  OTextarea,
-  useMessage,
-} from '@opensig/opendesign';
-import IconHelp from '~icons/meeting/icon-help.svg';
-import IconTip from '~icons/meeting/icon-tip.svg';
-import { MeetingFormPropsT, MeetingGroupType, MeetingPostT, OptionItemT } from './types';
-import dayjs from 'dayjs';
-import { findLabelFromOptions, formatDateNumber, getDateNumber, getPlatformLabel } from './utils';
-import {
-  CYCLE_TYPE_OPTIONS0,
-  EMAIL_REGEX,
-  INTERVAL_DAY,
-  INTERVAL_MONTH,
-  INTERVAL_WEEK,
-  INTERVAL_WEEK_OPTIONS,
-} from './config';
-import OMeetingCalendarSelector from './components/OMeetingCalendarSelector.vue';
-import { useScreen } from '@opendesign-plus/composables';
-import { useI18n } from '@/i18n';
-
-const { t, locale } = useI18n();
-
-const props = withDefaults(defineProps<MeetingFormPropsT>(), {
-  isSub: false,
-  isEdit: false,
-  showBtns: true,
-  groupType: MeetingGroupType.SIG,
-});
-const message = useMessage(null);
-
-const cycleTypeOptions = ref(CYCLE_TYPE_OPTIONS0);
-
-const weekOptions = ref(INTERVAL_WEEK_OPTIONS);
-
-const intervalTypeMax = computed(() => {
-  return findLabelFromOptions(form.value.cycle_type, cycleTypeOptions.value, 'max');
-});
-const initForm = {
-  is_record: false,
-  agenda: '',
-  email_list: '',
-  platform: '',
-  topic: '',
-  group_name: '',
-  etherpad: '',
-  date: '',
-  date_range: [],
-  start: '',
-  end: '',
-  time: '',
-  is_cycle: false,
-  cycle_interval: 1,
-  cycle_type: INTERVAL_DAY,
-  cycle_point: [],
-};
-const form = ref<MeetingPostT>(Object.assign({}, initForm) as unknown as MeetingPostT); // 表单数据
-const formRef = ref(null); // 表单实例
-const loading = ref(false); // 提交状态
-// 表单校验规则
-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'),
-            };
-          }
-        },
-      },
-    ],
-    agenda: [
-      {
-        validator: (value: string) => {
-          if (value.length > 4096) {
-            return {
-              type: 'danger',
-              message: t('meeting.meetingAgendaTooLong'),
-            };
-          }
-        },
-      },
-    ],
-    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_type === INTERVAL_MONTH) {
-              if (!cycle_interval || !cycle_point?.length) return msg;
-            }
-            if (!date_range?.length) {
-              return {
-                type: 'danger',
-                message: t('meeting.selectMeetingDate'),
-              };
-            }
-            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_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: 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()) {
-              return {
-                type: 'danger',
-                message: t('meeting.startTimeBeforeEndTime'),
-              };
-            }
-          }
-        },
-        triggers: ['blur', 'change'],
-      },
-    ],
-    platform: [{ required: true, message: t('meeting.selectPlatform') }],
-    email_list: [
-      {
-        validator: (value: string) => {
-          if (props.isEdit) {
-            return {};
-          }
-          const str = value.replaceAll(' ', '').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'],
-      },
-    ],
-  };
-});
-
-const sigOptions = ref<OptionItemT[]>([]); // sig组选项列表
-const getSigOptions = async () => {
-  if (!props.getGroupsRequest) {
-    return;
-  }
-  const res = await props.getGroupsRequest();
-  sigOptions.value = res.map((v) => ({ label: v.group_name, value: v.group_name, ...v }));
-  if (props.data) {
-    changeSig(form.value.group_name);
-  }
-};
-// 会议平台选项列表
-const typeOptions = ref<OptionItemT[]>([]);
-const getPlatformOptions = async () => {
-  if (!props.getPlatformsRequest) {
-    return;
-  }
-  const res = await props.getPlatformsRequest();
-  typeOptions.value = res.map((v) => ({ label: getPlatformLabel(v), value: v }));
-  if (!props.data) {
-    form.value.platform = typeOptions.value[0].value;
-  }
-};
-
-const emits = defineEmits(['confirm', 'cancel']);
-watch(
-  () => props.data,
-  (data) => {
-    if (data) {
-      const sub = data?.cycle_sub?.find((v) => v.sub_id === props.subId) || {};
-      const { mid, date, start, end, sub_id } = sub;
-      Object.assign(
-        form.value,
-        data,
-        props.isSub
-          ? {
-            is_cycle: false,
-            mid,
-            date,
-            start,
-            end,
-            sub_id,
-          }
-          : {},
-      );
-    } else {
-      const today = dayjs().format('YYYY-MM-DD');
-      const now = dayjs().format('HH:mm');
-
-      let start = '';
-      let end = '';
-      const nowNum = getDateNumber(now);
-      if (nowNum <= getDateNumber('08:00')) {
-        start = '08:00';
-        end = '09:00';
-      } else if (getDateNumber('22:15') <= nowNum) {
-        start = '08:00';
-        end = '09:00';
-      } else {
-        let [h, m] = now.split(':').map(Number);
-        if (m >= 45) {
-          h++;
-          m = 0;
-        } else {
-          m = (Math.floor(m / 15) + 1) * 15;
-        }
-        start = formatDateNumber(h * 60 + m).slice(3);
-        end = formatDateNumber(h * 60 + m + 60).slice(3);
-      }
-      const date_range = [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'month').format('YYYY-MM-DD')];
-
-      Object.assign(form.value, {
-        date: today,
-        start,
-        end,
-        time: `${ start }-${ end }`,
-        date_range,
-      });
-    }
-  },
-  { immediate: true, deep: true },
-);
-const cancel = () => {
-  form.value = Object.assign({}, initForm);
-  formRef.value.clearValidate();
-  formRef.value.resetFields();
-  emits('cancel');
-};
-
-const changeIntervalType = () => {
-  form.value.cycle_point = [];
-  form.value.cycle_interval = 1;
-};
-
-const changeIsCycle = () => {
-  form.value.platform = 'WELINK';
-};
-
-const { lePadV } = useScreen();
-const confirm = async () => {
-  let type = props.isEdit ? t('meeting.editSuccess') : t('meeting.booSuccess');
-  try {
-    loading.value = true;
-    const valid = await formRef.value.validate();
-    if (valid.some((v) => !!v)) {
-      return;
-    }
-    const {
-      topic,
-      etherpad,
-      group_name,
-      platform,
-      date,
-      start,
-      end,
-      agenda,
-      is_record,
-      is_cycle,
-      date_range,
-      cycle_type,
-      cycle_interval,
-      cycle_point,
-    } =
-      form.value;
-    let params = {
-      topic,
-      etherpad,
-      agenda,
-      is_record,
-      group_name,
-      platform,
-      is_cycle,
-    } as MeetingPostT;
-    if (is_cycle) {
-      params = {
-        ...params,
-        cycle_interval,
-        cycle_type,
-        cycle_start_date: date_range?.[0] || '',
-        cycle_end_date: date_range?.[1] || '',
-        cycle_start: start,
-        cycle_end: end,
-      };
-      if (cycle_type !== INTERVAL_DAY) {
-        params = {
-          ...params,
-          cycle_point: cycle_point.join(','),
-        };
-      }
-    } else {
-      params = {
-        ...params,
-        date: date?.split(' ')[0] || '',
-        start,
-        end,
-      };
-    }
-    if (props.isEdit) {
-      if (props.isSub) {
-        const { mid, sub_id } = form.value;
-        const { date, start, end } = params;
-        await props?.editSubMeetingRequest(sub_id, {
-          mid,
-          date,
-          start,
-          end,
-          is_notify: true,
-        });
-      } else {
-        const { email_list, platform, group_name, etherpad, ...data } = params;
-        await props?.editMeetingRequest(props.data.id, {
-          ...data,
-          is_notify: true,
-        });
-      }
-    } else {
-      await props?.createMeetingRequest({
-        ...params,
-        email_list: form.value.email_list.replaceAll(' ', ''),
-      });
-    }
-    const msg = t('meeting.meetingHandleSuccess', [form.value.topic, type]);
-    message.success({
-      content: msg,
-    });
-
-    emits('confirm');
-  } finally {
-    loading.value = false;
-  }
-};
-onMounted(() => {
-  getSigOptions();
-  getPlatformOptions();
-});
-
-const changeSig = (sig) => {
-  const find = sigOptions.value.find((v) => v.value === sig);
-  if (!props.isEdit) {
-    form.value.etherpad = find?.etherpad || '';
-    form.value.email_list = find?.email_list || '';
-  }
-};
-const disabledDate = (date) => {
-  return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
-};
-const changeTime = () => {
-  if (form.value.start && form.value.end) {
-    form.value.time = `${ form.value.start }-${ form.value.end }`;
-  } else {
-    form.value.time = '';
-  }
-};
-
-defineExpose({
-  confirm,
-});
-</script>
-
-<template>
-  <div class="o-meeting-form">
-    <OForm :model="form" ref="formRef" has-required :layout="lePadV ? 'v' : 'h'" class="form-wrapper">
-      <OFormItem :rules="rules.topic" :label="t('meeting.meetingName')" field="topic">
-        <OInput
-          :disabled="isSub"
-          size="large"
-          :placeholder="t('meeting.enterMeetingName')"
-          style="width: 100%"
-          v-model="form.topic" />
-      </OFormItem>
-      <OFormItem
-        :rules="rules.group_name"
-        :label="groupType === MeetingGroupType.GROUP ? t('meeting.meetingGroup'):t('meeting.meetingSig')"
-        field="group_name">
-        <OSelect
-          :disabled="isEdit"
-          :placeholder="groupType === MeetingGroupType.GROUP ? t('meeting.selectGroup') : t('meeting.selectSig')"
-          size="large"
-          style="width: 100%"
-          v-model="form.group_name"
-          @change="changeSig"
-        >
-          <OOption v-for="t in sigOptions" :key="t.value" :value="t.value">{{ t.label }}</OOption>
-        </OSelect>
-      </OFormItem>
-      <OFormItem :rules="rules.etherpad" label="Etherpad" field="etherpad" v-if="form.group_name">
-        <template #label>
-          <div class="label-wrapper">
-            <span>{{ t('meeting.etherpad') }}&nbsp;</span>
-            <OPopover>
-              <div class="o-meeting-form-popover-content etherpad">{{ t('meeting.etherpadDesc') }}</div>
-              <template #target>
-                <OIcon>
-                  <IconHelp />
-                </OIcon>
-              </template>
-            </OPopover>
-          </div>
-        </template>
-        <OInput
-          :disabled="isEdit"
-          size="large"
-          :placeholder="t('meeting.enterEtherpad')"
-          style="width: 100%"
-          v-model="form.etherpad"
-        />
-      </OFormItem>
-
-      <OFormItem :label="t('meeting.meetingTime')" field="time" :rules="rules.time" class="repeat-row" required>
-        <div class="repeat-config-wrapper">
-          <OFormItem field="repeat" class="repeat-item" v-if="!isSub">
-            <ORadioGroup v-model="form.is_cycle" @change="changeIsCycle" :disabled="isEdit">
-              <ORadio :value="false">{{ t('meeting.nonRepeat') }}</ORadio>
-              <ORadio :value="true">{{ t('meeting.isRepeat') }}</ORadio>
-            </ORadioGroup>
-          </OFormItem>
-          <div class="repeat-config">
-            <template v-if="form.is_cycle">
-              <OFormItem :label="t('meeting.every')" class="full-width-item">
-                <div class="repeat-config-item">
-                  <OFormItem v-if="form.cycle_type !== INTERVAL_MONTH">
-                    <ElInputNumber size="large" v-model="form.cycle_interval" :min="1" :max="intervalTypeMax" />
-                  </OFormItem>
-                  <OFormItem>
-                    <OSelect
-                      size="large"
-                      v-model="form.cycle_type"
-                      class="interval-select"
-                      optionWrapClass="o-meeting-form-interval-select-options"
-                      @change="changeIntervalType"
-                    >
-                      <OOption v-for="o in cycleTypeOptions" :key="o.value" :value="o.value" :label="o.label" />
-                    </OSelect>
-                  </OFormItem>
-                </div>
-              </OFormItem>
-              <OFormItem
-                :label="t('meeting.in')"
-                field="cycle_point"
-                class="point-item"
-                v-if="form.cycle_type !== INTERVAL_DAY"
-              >
-                <OSelect
-                  v-if="form.cycle_type === INTERVAL_WEEK"
-                  size="large"
-                  multiple
-                  v-model="form.cycle_point"
-                  :placeholder="t('meeting.selectRepeatDate')"
-                  :max-tag-count="1"
-                >
-                  <OOption v-for="o in weekOptions" :key="o.value" :value="o.value" :label="o.label" />
-                </OSelect>
-                <OMeetingCalendarSelector v-if="form.cycle_type === INTERVAL_MONTH" v-model="form.cycle_point" />
-              </OFormItem>
-              <OFormItem :label="t('meeting.meetingDuration')" field="date_range">
-                <ElDatePicker
-                  size="large"
-                  v-model="form.date_range"
-                  :start-placeholder="t('meeting.startDate')"
-                  :end-placeholder="t('meeting.endDate')"
-                  style="width: 100%"
-                  value-format="YYYY-MM-DD"
-                  :disabled-date="disabledDate"
-                  :clearable="false"
-                  type="daterange"
-                  popper-class="o-meeting-form-date-picker-popper"
-                />
-              </OFormItem>
-            </template>
-            <template v-else>
-              <OFormItem :label="t('meeting.meetingDate')" field="date">
-                <ElDatePicker
-                  popper-class="o-meeting-form-date-picker-popper"
-                  size="large"
-                  v-model="form.date"
-                  :placeholder="t('meeting.selectDate')"
-                  style="width: 100%"
-                  value-format="YYYY-MM-DD"
-                  :disabled-date="disabledDate"
-                  :clearable="false"
-                />
-              </OFormItem>
-            </template>
-
-            <OFormItem :label="t('meeting.meetingTime')">
-              <div class="time-select-wrapper">
-                <OFormItem field="start">
-                  <ElTimeSelect
-                    popper-class="meeting-form-time-popover"
-                    step="00:15"
-                    start="08:00"
-                    end="22:45"
-                    :placeholder="t('meeting.startTime')"
-                    v-model="form.start"
-                    size="large"
-                    :clearable="false"
-                    @change="changeTime"
-                  />
-                </OFormItem>
-                <span>-</span>
-                <OFormItem field="end">
-                  <ElTimeSelect
-                    popper-class="meeting-form-time-popover"
-                    step="00:15"
-                    start="08:00"
-                    end="22:45"
-                    :placeholder="t('meeting.endTime')"
-                    v-model="form.end"
-                    size="large"
-                    :clearable="false"
-                    @change="changeTime"
-                  />
-                </OFormItem>
-                <OIconTime />
-              </div>
-            </OFormItem>
-          </div>
-        </div>
-      </OFormItem>
-      <OFormItem :label="t('meeting.meetingPlatform')" field="platform" :rules="rules.platform">
-        <ORadioGroup v-model="form.platform" v-if="!data" :disabled="form.is_cycle">
-          <ORadio v-for="item in typeOptions" :key="item.value" :value="item.value">{{ item.label }}</ORadio>
-        </ORadioGroup>
-        <span v-else>{{ form.platform }}</span>
-      </OFormItem>
-      <OFormItem field="agenda" :label="t('meeting.meetingAgenda')" :rules="rules.genda">
-        <OTextarea
-          :disabled="isSub"
-          size="large"
-          :placeholder="t('meeting.enterMeetingAgenda')"
-          style="width: 100%"
-          :rows="4" v-model="form.agenda" />
-      </OFormItem>
-      <OFormItem :label="t('meeting.meetingRecord')" field="is_record" class="record-item full-width-item">
-        <template v-if="lePadV">
-          <OSwitch v-model="form.is_record" :disabled="isSub" />
-        </template>
-        <template v-else>
-          <div class="switch-wrapper">
-            <OSwitch v-model="form.is_record" :disabled="isSub" />
-            <div class="switch-text">
-              <OIcon>
-                <IconTip />
-              </OIcon>
-              <span>{{ t('meeting.meetingRecordDesc', [form.platform]) }}</span>
-            </div>
-          </div>
-        </template>
-
-      </OFormItem>
-      <template v-if="lePadV">
-        <div class="switch-wrapper">
-          <div class="switch-text">
-            <OIcon>
-              <IconTip />
-            </OIcon>
-            <span>{{ t('meeting.meetingRecordDesc', [form.platform]) }}</span>
-          </div>
-        </div>
-      </template>
-      <OFormItem field="email_list" :rules="rules.email_list">
-        <template #label>
-          <div class="label-wrapper">
-            <span>{{ t('meeting.meetingEmail') }}&nbsp;</span>
-            <OPopover>
-              <div class="o-meeting-form-popover-content">
-                {{ t('meeting.meetingEmailDesc') }}
-                <a class="link-text" :href="`/${locale}/sig`">{{ t('meeting.sigGroupEmail') }}</a>
-              </div>
-              <template #target>
-                <OIcon>
-                  <IconHelp />
-                </OIcon>
-              </template>
-            </OPopover>
-          </div>
-        </template>
-        <OTextarea
-          :disabled="isEdit"
-          size="large"
-          :placeholder="t('meeting.enterEmail')"
-          style="width: 100%"
-          :rows="4"
-          v-model="form.email_list" />
-      </OFormItem>
-    </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')) }}
-      </OButton>
-      <OButton color="primary" variant="outline" size="large" @click="cancel">{{ t('common.cancel') }}</OButton>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.o-meeting-form {
-  .form-wrapper {
-    & > .o-form-item {
-      max-width: 592px;
-    }
-
-    .repeat-row,
-    .full-width-item {
-      width: 100%;
-    }
-  }
-
-  .o-form {
-    --o-input-color: var(--o-color-info2);
-    --o-placeholder-color: var(--o-color-info4);
-
-
-    &.o-form-layout-v {
-      --form-item-gap: var(--o-gap-3);
-
-      .o-form-item-label {
-        margin-bottom: var(--o-gap-2);
-      }
-
-      .o-form-item-main {
-        margin-left: 0;
-      }
-    }
-
-    .o-textarea {
-      --_box-radius: var(--o-radius-xs);
-    }
-
-    input,
-    textarea {
-      color: var(--o-input-color);
-      @include text1;
-
-      &::placeholder {
-        color: var(--o-placeholder-color);
-      }
-    }
-
-    .o-select {
-      --select-bd-color: var(--o-color-control1);
-      --select-bd-color-hover: var(--o-color-primary2);
-      --select-bd-color-focus: var(--o-color-primary3);
-      --select-bd-color-disabled: var(--o-color-control4);
-    }
-
-    .o-form-item-label {
-      flex: 0 0 100px;
-      height: var(--o-control_size-l);
-      display: flex;
-      align-items: center;
-      --form-label-gap-top: 0;
-      @include respond-to('<=pad_v') {
-        height: fit-content;
-      }
-    }
-
-    .o-form-item-main {
-      margin-left: var(--o-gap-3);
-    }
-
-    .record-item {
-      @include respond-to('<=pad_v') {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        --form-item-gap: var(--o-gap-2);
-      }
-
-      .o-form-item-label {
-        margin: 0;
-        align-items: flex-start;
-      }
-
-      .o-form-item-main {
-        @include respond-to('<=pad_v') {
-          flex-grow: 0;
-        }
-      }
-    }
-
-    .switch-wrapper {
-      display: flex;
-      align-items: flex-start;
-      column-gap: var(--o-gap-4);
-      row-gap: var(--o-gap-2);
-
-      @include respond-to('<=pad_v') {
-        margin-bottom: var(--o-gap-3);
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      .switch-text {
-        display: flex;
-        align-items: flex-start;
-        column-gap: var(--o-gap-1);
-        color: var(--o-color-info3);
-        @include tip1;
-
-        .o-icon {
-          font-size: 16px;
-          position: relative;
-          top: 2px;
-        }
-      }
-    }
-
-    input::placeholder {
-      @include text1;
-    }
-
-    .label-wrapper {
-      display: flex;
-      align-items: center;
-
-      .o-svg-icon {
-        font-size: 1.5em;
-      }
-    }
-  }
-
-  .form-btns {
-    margin-top: var(--o-gap-5);
-    display: flex;
-    align-items: center;
-
-    .o-btn {
-      height: 40px !important;
-      font-size: 16px !important;
-      line-height: 24px !important;
-      border-radius: 20px !important;
-      --btn-min-width: 90px;
-    }
-  }
-
-  .time-select-wrapper {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--o-color-control1);
-    border-radius: var(--o-radius-xs);
-    padding: 0 15px;
-    background-color: var(--o-color-fill2);
-
-    & > span {
-      padding: 0 var(--o-gap-2);
-    }
-
-    &:hover {
-      border-color: var(--o-color-primary2);
-    }
-
-    @include respond-to('phone') {
-      background-color: var(--o-color-fill2);
-    }
-
-    .o-form-item {
-      margin-bottom: 0;
-      flex-grow: 1;
-      --o-input-color: var(--o-color-info1);
-
-      .o-form-item-label {
-        display: none;
-      }
-
-      .el-select__wrapper {
-        box-shadow: none;
-        padding: calc((var(--o-control_size-l) - 24px) / 2) 0;
-        min-height: var(--o-control_size-l);
-        gap: 0;
-      }
-
-      .el-select__placeholder {
-        @include text1;
-      }
-
-      .el-select__caret,
-      .el-input__prefix-icon {
-        display: none;
-      }
-
-      div.o-form-item-main {
-        margin-left: 0;
-        @include respond-to('phone') {
-          margin-top: 0;
-        }
-      }
-    }
-
-    .o-svg-icon {
-      flex-shrink: 0;
-      font-size: 24px;
-      color: var(--o-color-info2);
-    }
-  }
-
-  @include respond-to('phone') {
-    width: auto;
-    .o-form {
-      .o-form-item-main {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .repeat-config-wrapper {
-    width: 100%;
-
-    .repeat-item {
-      .o-form-item-label {
-        display: none;
-      }
-
-      .o-form-item-main {
-        margin-left: 0;
-      }
-
-      @include respond-to('pad_v') {
-        margin-bottom: var(--o-gap-4);
-      }
-      @include respond-to('phone') {
-        margin-bottom: var(--o-gap-3);
-      }
-    }
-
-    .repeat-config {
-      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
-      padding: var(--o-gap-5);
-      border-radius: var(--o-radius-xs);
-      @include respond-to('<=pad_v') {
-        padding: var(--o-gap-4);
-      }
-
-      .o-form-item {
-        align-items: center;
-      }
-
-      .o-form-item-label {
-        .o-form-require-symbol {
-          display: none;
-        }
-
-        flex: 0 0 4em;
-      }
-
-      .o-form-item-main {
-        margin-left: var(--o-gap-6);
-        @include respond-to('pad_v') {
-          margin-left: 0;
-        }
-        @include respond-to('phone') {
-          margin-left: 0;
-          max-width: 100%;
-        }
-      }
-
-      .full-width-item {
-        .o-form-item-main {
-          max-width: 100%;
-        }
-      }
-
-      .repeat-config-item {
-        width: 100%;
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        gap: var(--o-gap-4);
-
-        .o-form-item {
-          margin-bottom: 0;
-          width: calc(50% - var(--o-gap-4) / 2);
-
-          .o-form-item-label {
-            display: none;
-          }
-
-          .o-form-item-main {
-            margin-left: 0;
-          }
-        }
-      }
-
-      .point-item {
-        .o-select {
-          width: 100%;
-        }
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.meeting-form-time-popover, .o-meeting-form-date-picker-popper {
-  --el-color-primary: var(--o-color-primary1);
-  --el-datepicker-active-color: var(--o-color-primary1);
-  --el-fill-color-light: var(--o-color-control2-light);
-  --el-input-bg-color: var(--o-color-control-light);
-  --el-fill-color-blank: var(--o-color-control-light);
-}
-
-.o-meeting-form-popover-content {
-  max-width: 256px;
-  text-align: left;
-  @include tip1;
-
-  &.etherpad {
-    width: 191px;
-  }
-
-  .link-text {
-    color: var(--o-color-primary1);
-    cursor: pointer;
-  }
-}
-
-.o-meeting-form-interval-select-options {
-  .o-option-item {
-    justify-content: center;
-  }
-}
-
-.o-meeting-form-date-picker-popper {
-  @include respond-to('phone') {
-    .el-picker-panel {
-      width: min(var(--grid-content-width), 400px);
-
-      .el-picker-panel__body {
-        display: flex;
-        flex-direction: column;
-        min-width: auto;
-
-        .el-picker-panel__content {
-          border-right: none;
-          width: 100%;
-          padding: 12px 16px;
-        }
-      }
-    }
-  }
-}
-</style>