@opendesign-plus/components 0.0.1-rc.10

package/src/components/meeting/OMeetingForm.vue

@@ -0,0 +1,1041 @@
+<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>