@opendesign-plus-test/components 0.0.1-rc.41 → 0.0.1-rc.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.41",
+  "version": "0.0.1-rc.42",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -32,8 +32,8 @@
     "dayjs": "^1.11.13",
     "video.js": "^8.23.7",
     "vue-dompurify-html": "^3.1.2",
-    "@opendesign-plus/styles": "0.0.1-rc.2",
-    "@opendesign-plus/composables": "0.0.1-rc.6"
+    "@opendesign-plus/composables": "0.0.1-rc.6",
+    "@opendesign-plus/styles": "0.0.1-rc.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.0",

package/src/components/activity/OActivityApproval.vue

@@ -19,11 +19,11 @@ import { useActivityConfig } from './composables/useActivityConfig';
 import ThFilter from '../common/ThFilter.vue';
 import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
 import { useI18n } from '@/i18n';
+import { CalendarDataType } from '@/components/meeting';
 
 const { t, locale } = useI18n();
 const isZh = computed(() => locale.value === 'zh');
-const { approvalStatusMap, statusMap } = useActivityConfig();
-
+const { approvalStatusMap, statusMap, activityTypeMap } = useActivityConfig();
 
 const message = useMessage(null);
 const { isPhone, lePadV } = useScreen();
@@ -94,15 +94,16 @@ const getData = async () => {
   const res = await props.getTableDataRequest(paramsData);
   tableData.value = (res.data || [])
     .map((item) => {
-      const { start_date, end_date, start, end } = item;
+      const { start_date, end_date, start, end, activity_type } = item;
       return [
         {
           ...item,
           time: `${ start_date }-${ end }`,
           start_date_time: `${ start_date } ${ start }`,
           end_date_time: `${ end_date } ${ end }`,
-          type: 'activity',
+          type: CalendarDataType.EVENTS,
           dateRange: `${ start_date } ${ start }-${ end_date } ${ end }`,
+          activity_type: activityTypeMap.value.get(activity_type)?.label,
         },
       ];
     })
@@ -503,7 +504,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
                 :show="expanded.includes(act.id)"
                 :data="act"
                 :ref="(insRef) => getDetailRefs(insRef, act.id)"
-                page="approval"
+                :page="CalendarDataType.APPROVAL"
               />
             </div>
           </OCollapseItem>
@@ -716,8 +717,8 @@ const reviewActions = computed<DialogActionT[]>(() => {
     }
   }
 
-  .pagination {
-    margin-top: 32px;
+  .pagination, .pagination-wrapper {
+    margin-top: var(--o-gap-6);
     display: flex;
     align-items: center;
     justify-content: flex-end;

package/src/components/activity/OActivityForm.vue

@@ -494,7 +494,7 @@ defineExpose({
 
     .time-config {
       width: 100%;
-      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+      background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
       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

@@ -27,7 +27,7 @@ import type { ActivityItemT, MyActivityCalendarPropsT, ParamsItemT } from './typ
 import { useScreen } from '@opendesign-plus/composables';
 import { formatDate, getDateNumber } from '../meeting/utils';
 import { useActivityConfig } from './composables/useActivityConfig';
-import { PageParamsT } from '../meeting/types';
+import { CalendarDataType, PageParamsT } from '../meeting/types';
 import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
 import { useI18n, Locales } from '@/i18n';
 
@@ -81,6 +81,7 @@ const getList = async () => {
     const res = await props.getListRequest({
       page: currentPage.value,
       size: pageSize.value,
+      start_date: selectedDate.value,
     } as unknown as PageParamsT);
     const tempList = (res.data || [])
       .map((item: ActivityItemT) => {
@@ -91,7 +92,7 @@ const getList = async () => {
             time: `${ start_date }-${ end }`,
             start_date_time: `${ start_date } ${ start }`,
             end_date_time: `${ end_date } ${ end }`,
-            type: 'activity',
+            type: CalendarDataType.EVENTS,
             dateRange: `${ start_date } ${ start }-${ end_date } ${ end }`,
             isExpired: dayjs(`${ start_date } ${ start }`).isBefore(dayjs()),
           },
@@ -182,7 +183,7 @@ const updateScroller = () => {
 
 // -------------------- 日历 --------------------
 const calendarRef = ref();
-const selectedDate = ref();
+const selectedDate = ref(dayjs().format('YYYY-MM-DD'));
 const allDateList = computed<string[]>(() => [...new Set(list.value.map((v) => v.start_date))].sort((a, b) => (dayjs(a).isBefore(dayjs(b)) ? -1 : 1)));
 const dateList = computed<string[]>(() =>
   [...new Set(list.value.filter((v) => !v.isExpired && !v.is_delete).map((v) => v.start_date))].sort((a, b) => (dayjs(a).isBefore(dayjs(b)) ? -1 : 1)),
@@ -838,7 +839,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     .el-calendar {
       min-height: 460px;
       height: calc(100% - 54px);
-      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+      background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
       border-radius: var(--o-radius-xs);
 
       .el-calendar__header {
@@ -1215,7 +1216,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
 
         &.o-collapse-item-expanded {
-          background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+          background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
         }
       }
 

package/src/components/events/OEventsList.vue

@@ -177,6 +177,9 @@ const list = computed(() => {
     padding: var(--o-gap-5) var(--o-gap-6);
     gap: var(--o-gap-3) var(--o-gap-2);
     @include text1;
+    @include respond-to('<=pad_v') {
+      padding: var(--o-gap-3) var(--o-gap-4);
+    }
 
     .filter-left {
       display: flex;
@@ -227,6 +230,7 @@ const list = computed(() => {
     margin-top: var(--o-gap-6);
     @include respond-to('<=pad_v') {
       grid-template-columns: repeat(1, 1fr);
+      container-type: inline-size;
     }
     @include respond-to('pad_v') {
       margin-top: var(--o-gap-4);
@@ -243,6 +247,10 @@ const list = computed(() => {
       @include respond-to('<=pad_v') {
         aspect-ratio: 1 / 0.4;
       }
+      @container (max-width: 300px) {
+        height: 140px;
+        aspect-ratio: unset;
+      }
 
       .o-card-cover {
         padding: 0;

package/src/components/meeting/OMeetingCalendar.vue

@@ -401,20 +401,6 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
     width: 100%;
   }
 
-  .calendar-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--o-gap-5);
-    margin-bottom: var(--o-gap-5);
-    @include respond-to('<=pad_v') {
-      flex-direction: column-reverse;
-      justify-content: center;
-      gap: var(--o-gap-2);
-      margin-bottom: var(--o-gap-3);
-    }
-  }
-
   .calendar-body {
     display: flex;
     border-radius: var(--o-radius-xs);
@@ -751,12 +737,6 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           }
         }
       }
-
-      .prev, .next {
-        .el-calendar-day {
-          color: var(--o-color-info3);
-        }
-      }
     }
 
     .detail-list {
@@ -842,7 +822,6 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         justify-content: center;
         align-items: flex-end;
         height: 60px;
-        border-bottom: 1px solid var(--o-color-control4);
       }
 
       .o-tab {
@@ -878,6 +857,9 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         .o-tab-nav-anchor {
           .o-tab-nav-anchor-line {
             width: 100%;
+            @include respond-to('<=pad_v') {
+              width: 16px;
+            }
           }
         }
       }

package/src/components/meeting/OMeetingForm.vue

@@ -606,7 +606,7 @@ defineExpose({
           </div>
         </div>
       </OFormItem>
-      <OFormItem :label="t('meeting.meetingPlatform')" field="platform" :rules="rules.platform">
+      <OFormItem :label="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>
@@ -740,8 +740,10 @@ defineExpose({
       display: flex;
       align-items: center;
       --form-label-gap-top: 0;
+      color: var(--o-color-info2);
       @include respond-to('<=pad_v') {
         height: fit-content;
+        @include text2;
       }
     }
 
@@ -749,6 +751,15 @@ defineExpose({
       margin-left: var(--o-gap-3);
     }
 
+    .platform-item {
+      align-items: center;
+
+      .o-form-item-main-wrap {
+        @include respond-to('<=pad_v') {
+          @include text2;
+        }
+      }
+    }
     .record-item {
       @include respond-to('<=pad_v') {
         display: flex;
@@ -792,6 +803,10 @@ defineExpose({
           font-size: 16px;
           position: relative;
           top: 2px;
+
+          svg path {
+            fill: currentColor;
+          }
         }
       }
     }
@@ -807,6 +822,10 @@ defineExpose({
       .o-svg-icon {
         font-size: 1.5em;
       }
+
+      svg path {
+        fill: currentColor;
+      }
     }
   }
 
@@ -915,7 +934,7 @@ defineExpose({
     }
 
     .repeat-config {
-      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+      background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
       padding: var(--o-gap-5);
       border-radius: var(--o-radius-xs);
       @include respond-to('<=pad_v') {

package/src/components/meeting/OMyMeetingCalendar.vue

@@ -837,7 +837,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
     .list-calendar {
       flex-shrink: 0;
       width: 334px;
-      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+      background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
 
       @include respond-to('pad_h') {
         .el-calendar {
@@ -1244,7 +1244,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
           }
 
           &.o-collapse-item-expanded {
-            background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
+            background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
           }
         }
 
@@ -1494,9 +1494,4 @@ const cancelActions = computed<DialogActionT[]>(() => {
   }
 }
 
-[data-o-theme='dark'] .meeting-list {
-  .o-collapse-item-body {
-    background-color: rgb(43, 43, 47) !important;
-  }
-}
 </style>

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

@@ -161,63 +161,65 @@ const computedList = computed(() => {
     <OCollapse v-else v-model="collapseNames" :style="{ '--collapse-padding': '0' }">
       <OCollapseItem v-for="(item, index) in computedList" :key="item.id" :value="item.id">
         <template #title>
-          <div class="meet-title" :title="item.topic || item.name">
-            <OIcon
-              :style="{
+          <div class="meet-title-left">
+            <div class="meet-title" :title="item.topic || item.name">
+              <OIcon
+                :style="{
               backgroundColor: `${getConfig(item.type, 'color')}`
             }"
-            >
-              <component :is="getConfig(item.type, 'icon')" />
-            </OIcon>
-            <div class="text">
-              {{ item.topic || item.name || item.title }}
-            </div>
-            <div class="tag-wrapper" v-if="item.is_cycle">
-              <OTag color="primary" variant="outline">{{ t('meeting.cycle') }}</OTag>
+              >
+                <component :is="getConfig(item.type, 'icon')" />
+              </OIcon>
+              <div class="text">
+                {{ item.topic || item.name || item.title }}
+              </div>
+              <div class="tag-wrapper" v-if="item.is_cycle">
+                <OTag color="primary" variant="outline">{{ t('meeting.cycle') }}</OTag>
+              </div>
             </div>
-          </div>
-          <div class="meet-info" ref="meetInfoRef">
+            <div class="meet-info" ref="meetInfoRef">
             <span class="start-time">
               <span>{{ item.dateRange }}</span>
             </span>
-            <ODivider direction="v" />
-            <div>
-              <template v-if="item.group_name">{{ i18n.SIG_GROUP }} {{ item.group_name }}</template>
-              <template v-if="item.activity_type">{{ item.activity_type }}</template>
+              <ODivider direction="v" />
+              <div>
+                <template v-if="item.group_name">{{ i18n.SIG_GROUP }} {{ item.group_name }}</template>
+                <template v-if="item.activity_type">{{ item.activity_type }}</template>
+              </div>
             </div>
+            <OLink v-if="item.url" :href="item.url" target="_blank" class="jump-detail-link">
+              <span>{{ i18n.LEARN_MORE }}</span>
+              <template #suffix>
+                <OIcon>
+                  <IconChevronRight />
+                </OIcon>
+              </template>
+            </OLink>
+            <OLink v-if="item.join_url" :href="item.join_url" target="_blank" class="jump-detail-link">
+              <span>{{ i18n.JOIN_MEETING }}</span>
+              <template #suffix>
+                <OIcon>
+                  <IconChevronRight />
+                </OIcon>
+              </template>
+            </OLink>
+            <OLink v-if="item.content_url" :href="item.content_url" target="_blank" class="jump-detail-link">
+              <span>{{ i18n.DETAILS }}</span>
+              <template #suffix>
+                <OIcon>
+                  <IconChevronRight />
+                </OIcon>
+              </template>
+            </OLink>
+            <OLink v-if="item.register_url" :href="item.register_url" target="_blank" class="jump-detail-link">
+              <span>{{ i18n.SIGN }}</span>
+              <template #suffix>
+                <OIcon>
+                  <IconChevronRight />
+                </OIcon>
+              </template>
+            </OLink>
           </div>
-          <OLink v-if="item.url" :href="item.url" target="_blank" class="jump-detail-link">
-            <span>{{ i18n.LEARN_MORE }}</span>
-            <template #suffix>
-              <OIcon>
-                <IconChevronRight />
-              </OIcon>
-            </template>
-          </OLink>
-          <OLink v-if="item.join_url" :href="item.join_url" target="_blank" class="jump-detail-link">
-            <span>{{ i18n.JOIN_MEETING }}</span>
-            <template #suffix>
-              <OIcon>
-                <IconChevronRight />
-              </OIcon>
-            </template>
-          </OLink>
-          <OLink v-if="item.content_url" :href="item.content_url" target="_blank" class="jump-detail-link">
-            <span>{{ i18n.DETAILS }}</span>
-            <template #suffix>
-              <OIcon>
-                <IconChevronRight />
-              </OIcon>
-            </template>
-          </OLink>
-          <OLink v-if="item.register_url" :href="item.register_url" target="_blank" class="jump-detail-link">
-            <span>{{ i18n.SIGN }}</span>
-            <template #suffix>
-              <OIcon>
-                <IconChevronRight />
-              </OIcon>
-            </template>
-          </OLink>
           <OIcon @click.stop="() => copyInfo(index)" class="copy-icon">
             <IconCopy />
           </OIcon>
@@ -295,9 +297,16 @@ const computedList = computed(() => {
       }
 
       &.o-collapse-item-expanded {
-        .copy-icon {
-          display: inline-flex;
+        .o-collapse-item-header {
+          padding-bottom: var(--o-gap-2);
+
+          .o-collapse-item-title {
+            .copy-icon {
+              display: inline-flex;
+            }
+          }
         }
+
       }
     }
 
@@ -312,8 +321,10 @@ const computedList = computed(() => {
 
       @include respond-to('>pad_v') {
         &:hover {
-          .copy-icon {
-            display: inline-flex;
+          .o-collapse-item-title {
+            .copy-icon {
+              display: inline-flex;
+            }
           }
         }
       }
@@ -324,6 +335,28 @@ const computedList = computed(() => {
       .o-collapse-item-title {
         flex-grow: 1;
         margin-bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--o-gap-4);
+        padding-right: var(--o-gap-4);
+
+        .meet-title-left {
+          flex-grow: 1;
+        }
+
+        .copy-icon {
+          flex-shrink: 0;
+          display: none;
+
+          &:hover {
+            color: var(--o-color-primary1);
+          }
+
+          svg path {
+            fill: currentColor;
+          }
+        }
       }
 
 
@@ -349,7 +382,7 @@ const computedList = computed(() => {
         display: flex;
         color: var(--o-color-info3);
         flex-direction: column;
-        background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+        background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
         padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + var(--o-gap-5) - 12px);
         border-radius: var(--o-radius-xs);
         @include tip1;
@@ -405,7 +438,7 @@ const computedList = computed(() => {
       display: flex;
       align-items: center;
       width: calc(100% - 48px);
-      color: var(--o-color-info1);
+      color: var(--o-color-info2);
       @include text2;
 
       @include respond-to('<=pad_v') {
@@ -469,26 +502,7 @@ const computedList = computed(() => {
       }
     }
 
-    .copy-icon {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 56px;
-      font-size: 18px;
-      display: none;
 
-      @include respond-to('phone') {
-        right: 48px;
-      }
-
-      &:hover {
-        color: var(--o-color-primary1);
-      }
-
-      svg path {
-        fill: currentColor;
-      }
-    }
 
   }
 }

package/src/components/meeting/components/OMeetingDetail.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
   data: MeetingItemT;
   from?: string;
   show: boolean;
+  page?: CalendarDataType
 }>();
 const { t, getPlatformLabel } = useMeetingConfig();
 
@@ -57,6 +58,7 @@ const activityInfoApprovalList = computed(() => {
 });
 
 const columns = computed(() => {
+  console.log(props.page);
   if (props.data.type === CalendarDataType.EVENTS) {
     if (props.page === CalendarDataType.APPROVAL) {
       return activityInfoApprovalList.value;
@@ -174,7 +176,7 @@ defineExpose({ copyInfo });
       }
     }
 
-    &.type_activity {
+    &.type_events {
       .label {
         width: 6em;
       }

package/src/components/meeting/config.ts

@@ -4,21 +4,10 @@ import IconEvent from '~icons/meeting/icon-event.svg';
 import IconMeeting from '~icons/meeting/icon-meet.svg';
 import IconSummit from '~icons/meeting/icon-summit.svg';
 
-const getMeetingColor = () => {
-  if (typeof document !== 'undefined') {
-    const deepBlue = getComputedStyle(document.documentElement)
-      .getPropertyValue('--o-deep-blue-6')?.trim();
-    if (deepBlue) {
-      return 'rgba(var(--o-deep-blue-6))';
-    }
-  }
-  return 'var(--o-color-primary1)';
-};
-
 export const TYPE_COLOR_MAP = {
   summit: 'rgba(var(--o-orange-6))',
   events: 'rgba(var(--o-cyan-6))',
-  meeting: getMeetingColor(),
+  meeting: 'rgba(var(--o-deep-blue-6))',
 };
 
 export const INTERVAL_DAY = 0;

package/src/components/meeting/types.ts

@@ -13,7 +13,6 @@ export enum CalendarDataType {
   MEETING = 'meeting',
   EVENTS = 'events',
   SUMMIT = 'summit',
-  ACTIVITY = 'activity',
   APPROVAL = 'approval'
 }
 
@@ -111,6 +110,7 @@ export interface MeetingItemT extends MeetingPostT {
   time: string; // 处理一下时间范围
   cycle_sub: any[];
   live_url?: string;
+  type: CalendarDataType;
 }
 
 export interface PageParamsT {