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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.27",
+  "version": "0.0.1-rc.29",
   "type": "module",
   "publishConfig": {
     "access": "public",

package/src/components/activity/OActivityApproval.vue

@@ -36,7 +36,7 @@ const params = reactive<ReviewParamsT>({
 
 // -------------------- 申请人 --------------------
 const applicantValue = ref('');
-const applicantList = ref<string[]>([]);
+const applicantOptions = computed(() => props.applicantList.map(v => ({ value: v, label: v })));
 
 const filterApplicantList = () => {
   params.sponsor = applicantValue.value.join(',');
@@ -51,9 +51,13 @@ const sortTime = () => {
 
 // -------------------- 状态 --------------------
 const statusValue = ref();
-const statusOptions = ref<TypeOptionT[]>([]);
-approvalStatusMap.forEach((item) => {
-  statusOptions.value.push(item);
+const statusOptions = computed<TypeOptionT[]>(() => {
+  let list: TypeOptionT[] | { label: string; value: string; }[] = [];
+  approvalStatusMap.forEach((item) => {
+    list.push(item);
+  });
+  return list.slice(1);
+
 });
 const filterStatusList = () => {
   params.status = statusValue.value;
@@ -164,7 +168,7 @@ const cancel = () => {
 };
 
 const confirmCancel = async () => {
-  if (!props.deleteActivityRequest || !props.cancelActivityRequest)
+  if (props.deleteActivityRequest && props.cancelActivityRequest) {
     try {
       loading.value = true;
       if (cancelStatus.value === 1) {
@@ -177,13 +181,15 @@ const confirmCancel = async () => {
       message.success({
         content: `“${ currentRow.value?.title }”活动${ cancelText.value }成功`,
       });
-    } catch {
+    } catch (err) {
+      console.log(err);
       loading.value = false;
       cancelVisible.value = false;
       message.danger({
         content: `“${ currentRow.value?.title }”活动${ cancelText.value }失败`,
       });
     }
+  }
 };
 
 // -------------------- 审核操作 --------------------
@@ -350,7 +356,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
             <ThFilter
               v-model="applicantValue"
               @confirm="filterApplicantList"
-              :list="applicantList"
+              :list="applicantOptions"
               :multiple="true"
             >
 
@@ -389,8 +395,12 @@ const reviewActions = computed<DialogActionT[]>(() => {
             </ThFilter>
           </template>
           <template #default="scope">
-            <OTag v-if="scope.row.is_delete !== 1" color="primary" variant="outline"
-                  :class="[`tag-${statusMap.get(scope.row.status)?.id}`]">
+            <OTag
+              v-if="scope.row.is_delete !== 1"
+              color="primary"
+              variant="outline"
+              :class="[`tag-${statusMap.get(scope.row.status)?.id}`]"
+            >
               {{
                 statusMap.get(scope.row.status)?.text
               }}
@@ -555,10 +565,19 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .o-activity-table {
+  .table-wrapper {
+    .el-table {
+      border-top: none;
+    }
+
+    .el-table__header {
+      margin-bottom: 0;
+    }
+  }
 
   .expand-detail {
     padding: 16px 60px;
-    background-color: rgba(243, 246, 250, 1);
+    background-color: var(--o-color-fill3);
   }
 
   .activity-btn {
@@ -594,28 +613,44 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
   .o-tag {
     --tag-radius: 100px;
-    --tag-bg-color: rgba(0, 113, 243, 0.1);
-    --tag-bd-color: transparent;
-  }
+    font-weight: 500;
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px !important;
+    @include tip1;
+
+    .o-tag-label {
+      transform: none !important;
+    }
 
-  .tag-draft,
-  .tag-cancel {
-    --tag-color: var(--o-color-info3);
-    --tag-bg-color: rgba(222, 222, 227, 1);
-  }
+    &.o-tag-outline {
+      --tag-bd-color: transparent;
+      --tag-color: #fff;
+    }
 
-  .tag-registration,
-  .tag-in-progress,
-  .tag-ended {
-    --tag-color: rgba(36, 171, 54, 1);
-    --tag-bg-color: rgba(36, 171, 54, 0.1);
-  }
+    &.tag-under-review {
+      --tag-bg-color: rgb(var(--o-blue-6));
+    }
+
+    &.tag-draft,
+    &.tag-cancel {
+      --tag-color: var(--o-color-info3);
+      --tag-bg-color: var(--o-color-control1-light);
+    }
 
-  .tag-reject {
-    --tag-color: rgba(294, 118, 17, 1);
-    --tag-bg-color: rgba(294, 118, 17, 0.1);
+    &.tag-registration,
+    &.tag-in-progress,
+    &.tag-ended {
+      --tag-bg-color: var(--o-color-success1);
+    }
+
+    &.tag-reject {
+      --tag-bg-color: var(--o-color-warning1);
+    }
   }
 
+
+
   .sort-time {
     display: flex;
     align-items: center;

package/src/components/activity/OActivityForm.vue

@@ -111,11 +111,10 @@ const rules = ref<Record<string, RulesT[]>>({
     },
   ],
   register_end_date: [
-    { required: true, message: '请选择报名截止时间' },
     {
       validator: () => {
         const { register_end_date, end_date, end } = form.value;
-        if (dayjs(`${ end_date } ${ end }`).valueOf() < dayjs(register_end_date).valueOf()) {
+        if (register_end_date && dayjs(`${ end_date } ${ end }`).valueOf() < dayjs(register_end_date).valueOf()) {
           return {
             type: 'danger',
             message: '报名截止日期必须小于结束日期',
@@ -139,7 +138,6 @@ const rules = ref<Record<string, RulesT[]>>({
     },
   ],
   register_url: [
-    { required: true, message: '请输入活动报名网址' },
     {
       validator: (value: string) => {
         const str = value.replaceAll(' ', '') || '';
@@ -157,7 +155,6 @@ const rules = ref<Record<string, RulesT[]>>({
     },
   ],
   content_url: [
-    { required: true, message: '请输入活动详情介绍网址' },
     {
       validator: (value: string) => {
         const str = value.replaceAll(' ', '') || '';
@@ -503,7 +500,7 @@ defineExpose({
 
     .time-config {
       width: 100%;
-      background-color: var(--o-color-control2-light);
+      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
       padding: var(--o-gap-5);
       padding-right: calc(var(--o-gap-4) + var(--o-gap-5));
       border-radius: var(--o-radius-xs);

package/src/components/activity/OMyActivityCalendar.vue

@@ -620,7 +620,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                           </div>
                         </div>
                       </div>
-                      <div class="item-header-right" v-if="!row.is_delete">
+                      <div class="item-header-right" v-if="!row.is_delete && [3,4,5,6].includes(row.status)">
                         <OLink v-if="row.content_url" :href="row.content_url" target="_blank" rel="noopener noreferrer">
                           活动详情
                           <template #suffix>
@@ -808,7 +808,30 @@ const deleteActions = computed<DialogActionT[]>(() => {
   .left-calendar {
     width: 336px;
     flex-shrink: 0;
+    @include respond-to('pad_h') {
+      .el-calendar {
+        .el-calendar__body {
+          padding-left: 12px;
+          padding-right: 12px;
+
+          .el-calendar-table .date-cell {
+            height: 40px;
+            width: 28px;
 
+            .date-cell-text {
+              line-height: 24px;
+              @include tip2;
+            }
+          }
+        }
+      }
+    }
+    @include respond-to('pad_v') {
+      width: 100%;
+    }
+    @include respond-to('phone') {
+      display: none;
+    }
     .el-calendar {
       min-height: 460px;
       height: calc(100% - 54px);
@@ -842,6 +865,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
       .el-calendar__body {
         .el-calendar-table {
+          width: 100%;
           tr {
             background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
           }
@@ -886,7 +910,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
               font-size: 14px;
               line-height: 36px;
               border-radius: var(--o-radius-xs);
-              background-color: var(--cell-bg);
+              background-color: var(--o-color-control2-light);
               border: 1px solid transparent;
             }
 
@@ -957,31 +981,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
       }
     }
 
-    @include respond-to('pad_h') {
-      width: 240px;
-      .el-calendar {
-        .el-calendar__body {
-          padding-left: 12px;
-          padding-right: 12px;
-
-          .el-calendar-table .date-cell {
-            height: 40px;
-            width: 28px;
 
-            .date-cell-text {
-              line-height: 24px;
-              @include tip2;
-            }
-          }
-        }
-      }
-    }
-    @include respond-to('pad_v') {
-      width: 100%;
-    }
-    @include respond-to('phone') {
-      display: none;
-    }
   }
 
   .right-meeting {
@@ -1006,7 +1006,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
     .scroller-container {
       height: 100%;
-      max-height: calc(var(--layout-left-height) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
+      max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
       @include respond-to('phone') {
         max-height: fit-content;
       }
@@ -1168,14 +1168,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
       display: flex;
       flex-direction: column;
 
-      .o-collapse-item {
-        &.last-item {
-          .o-collapse-item-header {
-            border-bottom: none;
-          }
-        }
-      }
-
       .o-collapse-item-expanded + .o-collapse-item-expanded {
         margin-top: var(--o-gap-4);
       }
@@ -1307,32 +1299,43 @@ const deleteActions = computed<DialogActionT[]>(() => {
                   max-width: 100%;
                   @include text-truncate(1);
                 }
-
                 .o-tag {
                   margin-left: 8px;
-                  --tag-radius: var(--o-radius-xs);
-                  --tag-bg-color: var(--o-color-primary1);
-                  --tag-color: #fff;
-                  --tag-bd-color: transparent;
-                  --tag-padding: 2px 8px;
-                }
-
-                .tag-draft,
-                .tag-ended,
-                .tag-delete {
-                  --tag-color: var(--o-color-info3);
-                  --tag-bg-color: rgba(222, 222, 227, 1);
-                }
-
-                .tag-registration,
-                .tag-in-progress {
-                  --tag-color: rgba(36, 171, 54, 1);
-                  --tag-bg-color: rgba(36, 171, 54, 0.1);
-                }
-
-                .tag-reject {
-                  --tag-color: rgba(294, 118, 17, 1);
-                  --tag-bg-color: rgba(294, 118, 17, 0.1);
+                  --tag-radius: 4px;
+                  font-weight: 500;
+                  padding: 0 8px;
+                  height: 24px;
+                  line-height: 24px !important;
+                  @include tip1;
+
+                  .o-tag-label {
+                    transform: none !important;
+                  }
+
+                  &.o-tag-outline {
+                    --tag-bd-color: transparent;
+                    --tag-color: #fff;
+                  }
+
+                  &.tag-under-review {
+                    --tag-bg-color: rgb(var(--o-blue-6));
+                  }
+
+                  &.tag-draft,
+                  &.tag-cancel {
+                    --tag-color: var(--o-color-info3);
+                    --tag-bg-color: var(--o-color-control1-light);
+                  }
+
+                  &.tag-registration,
+                  &.tag-in-progress,
+                  &.tag-ended {
+                    --tag-bg-color: var(--o-color-success1);
+                  }
+
+                  &.tag-reject {
+                    --tag-bg-color: var(--o-color-warning1);
+                  }
                 }
               }
 
@@ -1355,16 +1358,15 @@ const deleteActions = computed<DialogActionT[]>(() => {
             display: flex;
             align-items: center;
             padding-left: calc(var(--o-gap-3) + var(--icon-size));
-            gap: var(--o-gap-5);
+            gap: var(--o-gap-4);
             width: 100%;
 
             .o-link {
               font-size: 14px;
               line-height: 21px;
-            }
-
-            .o-link + .o-link {
-              margin-left: var(--o-gap-section-6);
+              --link-color: var(--o-color-info2);
+              --link-color-hover: var(--o-color-primary2);
+              --link-color-active: var(--o-color-primary3);
             }
 
             .o-icon {

package/src/components/common/ThFilter.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useLocale } from '@opendesign-plus/composables';
 import {
   OCheckbox,
   OCheckboxGroup,
@@ -13,10 +12,14 @@ import {
 } from '@opensig/opendesign';
 import { computed, h, nextTick, ref, watch } from 'vue';
 import IconFilter from '~icons/components/icon-filter.svg';
-import AppEmpty from '../../../../../../.vitepress/src/components/AppEmpty.vue';
+import { useI18n } from '@/i18n';
+import { buildVueDompurifyHTMLDirective } from 'vue-dompurify-html';
+
+// 局部注册 v-dompurify-html 指令
+const vDompurifyHtml = buildVueDompurifyHTMLDirective();
 
 type TItem = { label: string; value: string | number; children?: TItem[] };
-const { t } = useLocale();
+const { t } = useI18n();
 const props = withDefaults(
   defineProps<{
     modelValue: string[] | number[] | string | number;
@@ -257,6 +260,7 @@ const renderLabel = ({ data }) => {
     min-width: 80px;
     max-width: calc(var(--table-width, 300) * 0.8px);
     --dropdown-item-justify: flex-start;
+    --dropdown-item-padding: 7px 12px;
   }
 
   .o-dropdown-item.is-active {

package/src/components/meeting/OMeetingCalendar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import {
-  isClient, OButton,
+  isClient,
   OIcon,
   OIconChevronLeft,
   OIconChevronRight,
@@ -12,42 +12,34 @@ import {
   OTabPane,
 } from '@opensig/opendesign';
 import dayjs from 'dayjs';
-import { ElCalendar, ElConfigProvider } from 'element-plus';
+import { ElCalendar } from 'element-plus';
 import OMeetingCalendarList from './components/OMeetingCalendarList.vue';
-import elZh from 'element-plus/es/locale/lang/zh-cn';
-import elEn from 'element-plus/es/locale/lang/en';
 import IconEvent from '~icons/meeting/icon-event.svg';
 import IconSummit from '~icons/meeting/icon-summit.svg';
 import IconMeeting from '~icons/meeting/icon-meet.svg';
 import { Locales, useI18n } from '@/i18n';
 import { MEETING_TABS } from './config';
-import { CalendarDataType, GroupItemT } from './types.ts';
+import { CalendarDataType, GroupItemT, MeetingCalendarPropsT, MeetingGroupType } from './types.ts';
 import { formatDate, getConfig } from './utils.ts';
 
-const props = withDefaults(defineProps<{
-  getDateListRequest: any;
-  getMeetingListRequest: any;
-  getSummitListRequest: any;
-  getEventsListRequest: any;
-  hiddenEvents?: boolean;
-  hiddenSummit?: boolean;
-  createDesc?: string
-}>(), {
+const props = withDefaults(defineProps<MeetingCalendarPropsT>(), {
   getSummitListRequest: async () => [],
   getEventsListRequest: async () => [],
   hiddenEvents: false,
   hiddenSummit: false,
+  groupType: MeetingGroupType.SIG,
 });
 
 const { t, locale } = useI18n();
 const isEn = computed(() => locale.value === Locales.EN);
-const isZh = computed(() => locale.value === Locales.ZH);
 
 // -------------------- 获取存在会议的日期列表 --------------------
 const latestDay = ref<string>(''); // 截止当天最新的活动日期
 const dateList = ref([]);
 const summitData = ref([]);
+const summitDates = ref([]);
 const eventsData = ref([]);
+const eventsDates = ref([]);
 const allDates = ref<string[]>([]);
 const meetingData = ref([]);
 // 日历展示时间限制
@@ -107,9 +99,19 @@ const getActivityData = async (date) => {
 
 const getDateList = async (date) => {
   if (props.getDateListRequest) {
-    dateList.value = await props.getDateListRequest(date);
-  } else {
-    dateList.value = [];
+    props.getDateListRequest(date).then(res => {
+      dateList.value = res;
+    });
+  }
+  if (props.getEventsDatesRequest) {
+    props.getEventsDatesRequest(date).then(res => {
+      eventsDates.value = res;
+    });
+  }
+  if (props.getSummitDatesRequest) {
+    props.getSummitDatesRequest(date).then(res => {
+      summitDates.value = res;
+    });
   }
 };
 
@@ -162,7 +164,7 @@ const getDateData = async (day?: string) => {
   getActivityData(date);
   getDateList(date);
 
-  allDates.value = [...new Set([...dateList.value, ...summitData.value.map(v => v.dates), ...eventsData.value.map(v => v.dates)])]
+  allDates.value = [...new Set([...dateList.value, ...summitDates.value, ...eventsDates.value])]
     .flat()
     .sort((a: string, b: string) => dayjs(a).isAfter(dayjs(b)) ? 1 : -1);
   if (!day) {
@@ -264,17 +266,22 @@ const formatYearMonth = (date: string) => {
     return date;
   }
 };
-const emits = defineEmits(['create']);
-const create = () => {
-  emits('create');
+// 根据类型校验日历日期是否可选
+const checkSelectedDay = (type: CalendarDataType, date: string) => {
+  if (type === CalendarDataType.MEETING) {
+    return ([CalendarDataType.ALL, CalendarDataType.MEETING].includes(tabType.value) && dateList.value.includes(date));
+  }
+  if (type === CalendarDataType.SUMMIT) {
+    return ([CalendarDataType.ALL, CalendarDataType.SUMMIT].includes(tabType.value) && summitDates.value.includes(date));
+  }
+  if (type === CalendarDataType.EVENTS) {
+    return ([CalendarDataType.ALL, CalendarDataType.EVENTS].includes(tabType.value) && eventsDates.value.includes(date));
+  }
+  return false;
 };
 </script>
 <template>
   <div class="o-meeting-calendar">
-    <div class="calendar-header">
-      <span>{{ createDesc || '' }}</span>
-      <OButton color="primary" variant="solid" round="pill" @click="create">预定会议</OButton>
-    </div>
     <div class="calendar-body">
       <ElCalendar ref="calendar" class="calender">
         <template #header="{ date }">
@@ -288,7 +295,11 @@ const create = () => {
                 <OIconChevronRight />
               </OIcon>
             </div>
-            <OSelect v-model="sig" :placeholder="t('meeting.allSigs')" clearable>
+            <OSelect
+              v-model="sig"
+              :placeholder="groupType === MeetingGroupType.GROUP ? t('meeting.allGroups') : t('meeting.allSigs')"
+              clearable
+            >
               <OOption v-for="t in sigOptions" :value="t.group_name" :key="t.group_name">{{ t.group_name }}</OOption>
             </OSelect>
           </div>
@@ -312,7 +323,7 @@ const create = () => {
                       zIndex: getConfig(CalendarDataType.MEETING, 'zIndex'),
                       backgroundColor: getConfig(CalendarDataType.MEETING, 'color')
                     }"
-                  v-if="(tabType === CalendarDataType.ALL || tabType === CalendarDataType.MEETING) && dateList.includes(data.day)">
+                  v-if="checkSelectedDay(CalendarDataType.MEETING, data.day)">
                   <IconMeeting />
                 </OIcon>
                 <OIcon
@@ -321,7 +332,7 @@ const create = () => {
                       zIndex: getConfig(CalendarDataType.EVENTS, 'zIndex'),
                       backgroundColor: getConfig(CalendarDataType.EVENTS, 'color')
                     }"
-                  v-if="(tabType === CalendarDataType.ALL || tabType === CalendarDataType.EVENTS) && eventsData.some(v => v.dates.includes(data.day))">
+                  v-if="checkSelectedDay(CalendarDataType.EVENTS, data.day)">
                   <IconEvent />
                 </OIcon>
                 <OIcon
@@ -330,7 +341,7 @@ const create = () => {
                       zIndex: getConfig(CalendarDataType.SUMMIT, 'zIndex'),
                       backgroundColor: getConfig(CalendarDataType.SUMMIT, 'color')
                     }"
-                  v-if="(tabType === CalendarDataType.ALL || tabType === CalendarDataType.SUMMIT) && summitData.some(v => v.dates.includes(data.day))">
+                  v-if="checkSelectedDay(CalendarDataType.SUMMIT, data.day)">
                   <IconSummit />
                 </OIcon>
               </div>
@@ -363,7 +374,7 @@ const create = () => {
 
         <div>
           <OScroller class="meeting-list" show-type="hover" size="small">
-            <OMeetingCalendarList :list="renderData">
+            <OMeetingCalendarList :list="renderData" :groupType="groupType">
               <template #empty>
                 <slot name="empty"></slot>
               </template>
@@ -386,6 +397,7 @@ const create = () => {
   .el-calendar-table {
     margin-bottom: 0;
     display: table;
+    width: 100%;
   }
 
   .calendar-header {
@@ -662,6 +674,7 @@ const create = () => {
 
       .date-calender {
         position: relative;
+        margin-bottom: 0;
 
         &::after {
           content: '';
@@ -778,7 +791,7 @@ const create = () => {
       .title-list {
         display: flex;
         align-items: center;
-        justify-content: flex-end;
+        justify-content: center;
         padding: 14px 24px;
         position: relative;
         height: 60px;