@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/src/components/meeting/OMeetingForm.vue

@@ -1,1131 +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, RulesT,
-  useMessage,
-} 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 dayjs from 'dayjs';
-import { findLabelFromOptions, formatDateNumber, getDateNumber } from './utils';
-import { EMAIL_REGEX, INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from './config';
-import OMeetingCalendarSelector from './components/OMeetingCalendarSelector.vue';
-import { useScreen } from '@opendesign-plus/composables';
-import { useMeetingConfig } from './composables/useMeetingConfig';
-import { ValidatorResultT } from '@opensig/opendesign/lib/form/types';
-
-const { t, locale, cycleTypeOptions0, intervalWeekOptions, getPlatformLabel } = useMeetingConfig();
-
-const props = withDefaults(defineProps<MeetingFormPropsT>(), {
-  showBtns: true,
-  groupType: MeetingGroupType.SIG,
-});
-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');
-});
-const initForm: MeetingPostT = {
-  is_record: true,
-  agenda: '',
-  email_list: '',
-  platform: 'WELINK',
-  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<any>(null); // 表单实例
-const loading = ref(false); // 提交状态
-// 表单校验规则
-const rules = computed<Record<string, RulesT[]>>(() => {
-  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') }],
-    platform: [{ required: true, message: t('meeting.selectPlatform') }],
-    time: [
-      {
-        validator: (value: any) => {
-          const { is_cycle, cycle_type, cycle_interval, cycle_point, date, date_range } = form.value;
-          if (is_cycle) {
-            const msg = t('meeting.finishMeetingConfig');
-            if (cycle_type === INTERVAL_DAY) {
-              if (!cycle_interval) {
-                return {
-                  type: 'danger',
-                  message: msg,
-                };
-              }
-            }
-            if (cycle_type === INTERVAL_WEEK) {
-              if (!cycle_interval || !cycle_point?.length) {
-                return {
-                  type: 'danger',
-                  message: msg,
-                };
-              }
-            }
-            if (cycle_type === INTERVAL_MONTH) {
-              if (!cycle_interval || !cycle_point?.length) {
-                return {
-                  type: 'danger',
-                  message: 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').format('YYYY-MM-DD');
-              }
-              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').format('YYYY-MM-DD');
-              }
-              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: string) => 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 = `${ form.value.date } ${ form.value.start }`;
-            if (dayjs(start).isBefore(dayjs())) {
-              return {
-                type: 'danger',
-                message: t('meeting.startTimeBeforeEndTime'),
-              };
-            }
-          }
-        },
-        triggers: ['blur', 'change'],
-      },
-    ],
-    email_list: [
-      {
-        validator: (value: any) => {
-          if (isEdit.value) {
-            return {} as unknown as ValidatorResultT;
-          }
-          const str = value.replaceAll(' ', '').replaceAll(',', ';') || '';
-          if (str.length) {
-            if (str.length > 1020) {
-              return {
-                type: 'danger',
-                message: t('meeting.emailTooLong'),
-              };
-            }
-            const list: string[] = 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: OptionItemT) => ({ ...v, label: v.group_name, value: v.group_name }));
-  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: string) => ({ label: getPlatformLabel(v), value: v }));
-  if (!props.data) {
-    form.value.platform = typeOptions.value[0].value as unknown as PlatformT;
-  }
-};
-
-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 as unknown as string)) || [],
-        cycle_interval: cycle_interval || 1,
-        time: `${ cycle_start }-${ cycle_end }`,
-        start: cycle_start,
-        end: cycle_end,
-      }
-      : {}),
-  };
-};
-
-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 { mid, date, start, end, sub_id } = sub;
-      Object.assign(
-        form.value,
-        propData,
-        isSub.value
-          ? {
-            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 = typeOptions.value.find(v => (v.value as unknown as string).toLowerCase() === 'welink')?.value as unknown as string || 'WeLink';
-};
-
-const { lePadV } = useScreen();
-const confirm = async () => {
-  let type = isEdit.value ? t('meeting.editSuccess') : t('meeting.booSuccess');
-  try {
-    loading.value = true;
-    const valid = await formRef.value.validate();
-    if (!valid || valid.some((v: any) => !!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 as unknown as any;
-    let flag = undefined;
-    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 (isEdit.value) {
-      if (isSub.value) {
-        const { mid, sub_id } = form.value;
-        const { date, start, end } = params;
-        flag = await props?.editSubMeetingRequest(sub_id, {
-          mid,
-          date,
-          start,
-          end,
-          is_notify: true,
-        });
-      } else {
-        const {
-          email_list: _email_list,
-          platform: _platform,
-          group_name: _group_name,
-          etherpad: _etherpad,
-          ...data
-        } = params;
-        flag = await props?.editMeetingRequest(props.data?.id as unknown as number, {
-          ...data,
-          is_notify: true,
-        });
-      }
-    } else {
-      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,
-    });
-
-    emits('confirm');
-  } finally {
-    loading.value = false;
-  }
-};
-onMounted(() => {
-  getSigOptions();
-  getPlatformOptions();
-});
-
-const changeSig = (sig: any) => {
-  const find = sigOptions.value.find((v) => v.value === sig);
-  if (!isEdit.value) {
-    form.value.etherpad = find?.etherpad || '';
-    form.value.email_list = find?.email_list || '';
-  }
-};
-const disabledDate = (date: 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="labelMap?.topic ?? 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="labelMap?.group_name ?? (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>
-          <template v-if="labelMap?.etherpad">{{ labelMap.etherpad }}</template>
-          <div v-else 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="labelMap?.time ?? t('meeting.meetingTime')" field="time" :rules="rules.time" class="repeat-row" required>
-        <div class="repeat-config-wrapper">
-          <OFormItem field="repeat" class="repeat-radio-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="labelMap?.cycle_point ?? 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="labelMap?.date_range ?? 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="labelMap?.date ?? 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="labelMap?.platform ?? t('meeting.meetingPlatform')" field="platform" :rules="rules.platform" class="platform-item">
-        <ORadioGroup v-model="form.platform" v-if="!data" :disabled="form.is_cycle">
-          <ORadio v-for="item in typeOptions" :key="item.value" :value="item.value">{{ getPlatformLabel(item.label) }}
-          </ORadio>
-        </ORadioGroup>
-        <span v-else>{{ getPlatformLabel(form.platform) }}</span>
-      </OFormItem>
-      <OFormItem field="agenda" :label="labelMap?.agenda ?? 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="labelMap?.is_record ?? 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>
-              <div>
-                <span>{{ t('meeting.meetingRecordDesc1') }}</span>
-                <br>
-                <span>{{ t('meeting.meetingRecordDesc2') }}</span>
-              </div>
-            </div>
-          </div>
-        </template>
-
-      </OFormItem>
-      <template v-if="lePadV">
-        <div class="switch-wrapper">
-          <div class="switch-text">
-            <OIcon>
-              <IconTip />
-            </OIcon>
-            <div>
-              <span>{{ t('meeting.meetingRecordDesc1') }}</span>
-              <br>
-              <span>{{ t('meeting.meetingRecordDesc2') }}</span>
-            </div>
-          </div>
-        </div>
-      </template>
-      <OFormItem field="email_list" :rules="rules.email_list">
-        <template #label>
-          <template v-if="labelMap?.email_list">{{ labelMap.email_list }}</template>
-          <div v-else 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') : (confirmText || 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 {
-  --meeting-card-radius: var(--o-radius-xs);
-  --meeting-input-radius: var(--o-radius-xs);
-  --meeting-cell-radius: var(--o-radius-xs);
-  .form-wrapper {
-    & > .o-form-item {
-      max-width: 592px;
-    }
-
-    .repeat-row,
-    .full-width-item {
-      width: 100%;
-    }
-  }
-
-  .o-form {
-    --o-input-color: var(--o-color-info1);
-    --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(--meeting-input-radius);
-    }
-
-    input,
-    textarea {
-      color: var(--o-input-color);
-      @include text1;
-
-      @include respond('phone') {
-        @include text2;
-      }
-
-      &::placeholder {
-        color: var(--o-placeholder-color);
-        @include text1;
-
-        @include respond('phone') {
-          font-size: 14px !important;
-        }
-      }
-    }
-
-    .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;
-      color: var(--o-color-info2);
-      @include respond('<=pad_v') {
-        height: fit-content;
-        @include text2;
-      }
-    }
-
-    .o-form-item-main {
-      margin-left: var(--o-gap-3);
-    }
-
-    .platform-item {
-      align-items: center;
-
-      .o-form-item-main-wrap {
-        @include respond('<=pad_v') {
-          @include text2;
-        }
-      }
-    }
-    .record-item {
-      @include respond('<=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('<=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('<=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;
-
-          svg path {
-            fill: currentColor;
-          }
-        }
-      }
-    }
-
-    input::placeholder {
-      @include text1;
-    }
-
-    .label-wrapper {
-      display: flex;
-      align-items: center;
-
-      .o-svg-icon {
-        font-size: 1.5em;
-      }
-
-      svg path {
-        fill: currentColor;
-      }
-    }
-  }
-
-  .form-btns {
-    margin-top: var(--o-gap-5);
-    display: flex;
-    align-items: center;
-
-    .o-btn {
-      --btn-min-width: 90px;
-      --btn-radius: calc(var(--btn-height) / 2);
-    }
-  }
-
-  .time-select-wrapper {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--o-color-control1);
-    border-radius: var(--meeting-card-radius);
-    padding: 0 15px;
-    background-color: var(--o-color-fill2);
-    --el-component-size-large: 34px;
-    @include respond('<=pad_v') {
-      --el-component-size-large: calc(var(--o-control_size-l) - 2px);
-    }
-    & > span {
-      padding: 0 var(--o-gap-2);
-    }
-
-    &:hover {
-      border-color: var(--o-color-primary2);
-    }
-
-    @include respond('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(--el-component-size-large) - 24px) / 2) 0;
-        min-height: var(--el-component-size-large);
-        gap: 0;
-      }
-
-
-      .el-select__caret,
-      .el-input__prefix-icon {
-        display: none;
-      }
-
-      div.o-form-item-main {
-        margin-left: 0;
-        @include respond('phone') {
-          margin-top: 0;
-        }
-      }
-    }
-
-    .o-svg-icon {
-      flex-shrink: 0;
-      font-size: 24px;
-      color: var(--o-color-info2);
-    }
-  }
-
-  @include respond('phone') {
-    width: auto;
-    .o-form {
-      .o-form-item-main {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .repeat-config-wrapper {
-    width: 100%;
-
-    .repeat-radio-item {
-      margin-bottom: var(--o-gap-2);
-      .o-form-item-label {
-        display: none;
-      }
-
-      .o-form-item-main {
-        margin-left: 0;
-      }
-    }
-
-    .repeat-config {
-      background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
-      padding: var(--o-gap-5);
-      border-radius: var(--meeting-card-radius);
-      @include respond('<=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('pad_v') {
-          margin-left: 0;
-        }
-        @include respond('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-control5-light);
-  --el-fill-color-blank: var(--o-color-control5-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('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>