@opendesign-plus-test/components 0.0.1-rc.51 → 0.0.1-rc.53

package/src/components/OThemeSwitcher.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Component, computed } from 'vue';
-import { OIcon, OSwitch } from '@opensig/opendesign';
+import { computed } from 'vue';
+import { OIcon, OSwitch, OIconSun, OIconMoon } from '@opensig/opendesign';
 import { useScreen } from '@opendesign-plus/composables';
 
 import IconSun from '~icons/components/icon-sun.svg';
@@ -11,8 +11,7 @@ export interface OThemeSwitcherPropsT {
   type?: 'auto' | 'common' | 'mobile';
   lightValue?: string;
   darkValue?: string;
-  lightIcon?: Component;
-  darkIcon?: Component;
+  disabled?: boolean;
 }
 
 export interface OThemeSwitcherEmitsT {
@@ -25,8 +24,7 @@ const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
   type: 'auto',
   lightValue: 'light',
   darkValue: 'dark',
-  lightIcon: IconSun,
-  darkIcon: IconMoon,
+  disabled: false,
 });
 
 const emit = defineEmits<OThemeSwitcherEmitsT>();
@@ -37,7 +35,7 @@ const switchVal = computed({
   get() {
     return props.theme;
   },
-  set(val) {
+  set(val: string) {
     emit('update:theme', val);
     emit('change', val);
   },
@@ -48,13 +46,17 @@ const isCommon = computed(() => {
 });
 
 const toggleTheme = () => {
+  if (props.disabled) {
+    return;
+  }
+
   switchVal.value = switchVal.value === props.lightValue ? props.darkValue : props.lightValue;
 };
 </script>
 
 <template>
   <div class="o-theme-switcher">
-    <div v-if="isCommon" class="o-theme-switcher-common" @click="toggleTheme">
+    <div v-if="isCommon" class="o-theme-switcher-common" :class="{ disabled }" @click="toggleTheme">
       <OIcon class="o-theme-icon">
         <IconMoon v-if="switchVal === lightValue" />
         <IconSun v-else />
@@ -62,16 +64,18 @@ const toggleTheme = () => {
     </div>
 
     <div v-else class="o-theme-switcher-mobile">
-      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="darkValue" :unchecked-value="lightValue">
-        <template #on>
-          <OIcon class="o-theme-icon">
-            <IconSun />
-          </OIcon>
+      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="lightValue" :unchecked-value="darkValue" :disabled="disabled">
+        <template #inactive>
+          <OIconMoon />
+        </template>
+        <template #active>
+          <OIconSun />
         </template>
         <template #off>
-          <OIcon class="o-theme-icon">
-            <IconMoon />
-          </OIcon>
+          <OIconSun />
+        </template>
+        <template #on>
+          <OIconMoon />
         </template>
       </OSwitch>
     </div>
@@ -80,29 +84,49 @@ const toggleTheme = () => {
 
 <style lang="scss" scoped>
 .o-theme-switcher-common {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
   display: flex;
   align-items: center;
+  width: var(--o-icon_size-m);
+  height: var(--o-icon_size-m);
+  font-size: var(--o-icon_size-m);
+
+  @include respond-to('pad_h') {
+    width: var(--o-icon_size-s);
+    height: var(--o-icon_size-s);
+    font-size: var(--o-icon_size-s);
+  }
+}
+
+.o-theme-switcher-common:not(.disabled) {
+  cursor: pointer;
 
   .o-theme-icon {
-    font-size: 24px;
-    color: var(--o-color-info1);
+    color: var(--o-color-info2);
 
     @include hover {
-      color: var(--o-color-primary1);
+      color: var(--o-color-primary2);
+      background-color: var(--o-color-control2-light);
+      border-radius: var(--o-radius-xs);
+    }
+
+    &:active {
+      color: var(--o-color-primary3);
     }
   }
 }
 
+.o-theme-switcher-common.disabled {
+  cursor: not-allowed;
+
+  .o-theme-icon {
+    color: var(--o-color-info4);
+  }
+}
+
 .o-theme-switcher-mobile {
   .o-theme-switch {
-    background-color: var(--o-color-control1-light);
-
-    .o-theme-icon {
-      color: var(--o-color-white);
-    }
+    --switch-handler-color: var(--o-color-white);
+    --switch-color: var(--o-color-info4);
   }
 }
 </style>

package/src/components/activity/OActivityApproval.vue

@@ -569,6 +569,8 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .o-activity-table {
+  --activity-card-radius: var(--o-radius-xs);
+  --activity-input-radius: var(--o-radius-xs);
   .table-wrapper {
     .el-table {
       border-top: none;
@@ -695,7 +697,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
     @include text1;
 
     .el-table__header-wrapper {
-      border-radius: 12px 12px 0 0;
+      border-radius: var(--activity-card-radius) var(--activity-card-radius) 0 0;
 
       .el-table__cell {
         padding: 12px 0 11px;
@@ -725,7 +727,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
   }
 
   .o-textarea {
-    --_box-radius: 16px;
+    --_box-radius: var(--activity-input-radius);
   }
 
   .dialog-footer {
@@ -756,7 +758,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
     .o-collapse {
       padding: 0;
-      border-radius: 12px;
+      border-radius: var(--activity-card-radius);
 
       .o-collapse-item {
         --collapse-item-header-padding: 8px 0 12px;
@@ -826,11 +828,12 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .handle-dialog-approval {
+  --activity-card-radius: var(--o-radius-xs);
   --dlg-width: 450px;
-  --dlg-radius: var(--o-radius-xs);
+  --dlg-radius: var(--activity-card-radius);
   @include respond('<=pad_v') {
     width: 100%;
-    --dlg-radius: var(--o-radius-xs) var(--o-radius-xs) 0 0;
+    --dlg-radius: var(--activity-card-radius) var(--activity-card-radius) 0 0;
   }
 }
 
@@ -841,6 +844,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
 }
 .review-dialog {
   --dlg-width: 690px;
+  --activity-input-radius: var(--o-radius-xs);
 
   .o-form {
     width: 450px;
@@ -852,7 +856,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
     .o-textarea {
       width: 100%;
-      --_box-radius: var(--o-radius-xs);
+      --_box-radius: var(--activity-input-radius);
     }
   }
 

package/src/components/activity/OActivityForm.vue

@@ -297,13 +297,17 @@ const confirm = async (val: boolean) => {
     }
     loading.value = true;
     form.value.is_publish = `${ val }`;
+    let flag = undefined;
     if (isEdit.value && props.data?.status === 3) {
       form.value.update_activity_id = props.data?.id;
-      await props.creatActivity?.(form.value);
+      flag = await props.creatActivity?.(form.value);
     } else if (isEdit.value) {
-      await props.editActivity?.(props.data?.id, form.value);
+      flag = await props.editActivity?.(props.data?.id, form.value);
     } else {
-      await props.creatActivity?.(form.value);
+      flag = await props.creatActivity?.(form.value);
+    }
+    if (typeof flag === 'boolean' && !flag) {
+      return;
     }
     message.success({
       content: t('meeting.activityActionSuccess', [form.value.title, type.toLowerCase()]),
@@ -444,6 +448,8 @@ defineExpose({
 
 <style lang="scss">
 .o-activity-form {
+  --activity-card-radius: var(--o-radius-xs);
+  --activity-input-radius: var(--o-radius-xs);
   .form-wrapper {
     & > .o-form-item {
       max-width: 620px;
@@ -480,7 +486,7 @@ defineExpose({
     }
 
     .o-textarea {
-      --_box-radius: var(--o-radius-xs);
+      --_box-radius: var(--activity-input-radius);
       width: 100%;
     }
 
@@ -489,7 +495,7 @@ defineExpose({
     }
 
     .el-input__wrapper {
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--activity-input-radius);
     }
 
     .time-config {
@@ -497,7 +503,7 @@ defineExpose({
       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);
+      border-radius: var(--activity-card-radius);
       @include respond('<=pad_v') {
         padding: var(--o-gap-4);
       }

package/src/components/activity/{OMyActivityCalendar.vue → OActivityMyCalendar.vue}

@@ -21,7 +21,6 @@ import dayjs from 'dayjs';
 import { useDebounceFn } from '@vueuse/core';
 
 import IconCopy from '~icons/meeting/icon-copy.svg';
-import IconEvent from '~icons/meeting/icon-event.svg';
 
 import type { ActivityItemT, MyActivityCalendarPropsT, ParamsItemT } from './types';
 import { useScreen } from '@opendesign-plus/composables';
@@ -30,10 +29,12 @@ import { useActivityConfig } from './composables/useActivityConfig';
 import { CalendarDataType, MeetingItemT, PageParamsT } from '../meeting/types';
 import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
 import { useI18n, Locales } from '@/i18n';
+import { useMeetingConfig } from '@/components/meeting/composables/useMeetingConfig.ts';
 
 const { t, locale } = useI18n();
 const isZh = computed(() => locale.value === Locales.ZH);
 const { statusMap, activityTypeMap } = useActivityConfig();
+const { getConfig } = useMeetingConfig();
 
 const formatMonthYear = (date: string | Date) => {
   const d = dayjs(date || new Date());
@@ -328,7 +329,10 @@ const confirm = () => {
   }
   dialogLoading.value = true;
   props.revokeActivityRequest(currentRow.value?.id)
-    .then(() => {
+    .then((flag: any) => {
+      if (typeof flag === 'boolean' && !flag) {
+        return;
+      }
       message.success({
         content: t('meeting.revokeActivitySuccess', [currentRow.value?.title]),
       });
@@ -383,7 +387,10 @@ const handleSubmitReviewItem = (val: ActivityItemT) => {
     is_publish: 'true',
   } as ParamsItemT;
   props.editActivityRequest(val.id, params)
-    .then(() => {
+    .then((flag: any) => {
+      if (typeof flag === 'boolean' && !flag) {
+        return;
+      }
       message.success({
         content: t('meeting.submitReviewSuccess', [val.title]),
       });
@@ -403,7 +410,10 @@ const confirmDelete = () => {
   }
   dialogLoading.value = true;
   props.deleteActivityRequest(currentRow.value?.id)
-    .then(() => {
+    .then((flag) => {
+      if (typeof flag === 'boolean' && !flag) {
+        return;
+      }
       message.success({
         content: t('meeting.deleteActivitySuccess', [currentRow.value?.title]),
       });
@@ -545,6 +555,9 @@ const deleteActions = computed<DialogActionT[]>(() => {
                 clickable: allDateList.includes(data.day),
                 approved: calcIfApproved(data.day),
               }"
+              :style="{
+                '--dot-bg': `${getConfig(CalendarDataType.EVENTS, 'color')}`
+              }"
             >
               <div class="date-cell-text">
                 {{ Number(data.day.split('-')[2]) }}
@@ -602,9 +615,14 @@ const deleteActions = computed<DialogActionT[]>(() => {
                   >
                     <template #title>
                       <div class="item-header-left">
-                        <div class="act-icon">
+                        <div
+                          class="act-icon"
+                          :style="{
+                            backgroundColor: `${getConfig(CalendarDataType.EVENTS, 'color')}`
+                          }"
+                        >
                           <OIcon>
-                            <IconEvent />
+                            <component :is="getConfig(CalendarDataType.EVENTS, 'icon')" />
                           </OIcon>
                         </div>
                         <div class="header-info">
@@ -634,7 +652,12 @@ const deleteActions = computed<DialogActionT[]>(() => {
                       </div>
                       <div class="item-header-right"
                            v-if="row.content_url && !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">
+                        <OLink
+                          :hover-underline="false"
+                          v-if="row.content_url"
+                          :href="row.content_url"
+                          target="_blank"
+                          rel="noopener noreferrer">
                           {{ t('meeting.activityDetail') }}
                           <template #suffix>
                             <OIcon>
@@ -643,6 +666,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                           </template>
                         </OLink>
                         <OLink
+                          :hover-underline="false"
                           v-if="
                           row.register_url && (
                             row.status === 3 ||
@@ -735,6 +759,8 @@ const deleteActions = computed<DialogActionT[]>(() => {
 <style lang="scss">
 
 .o-my-activity-calendar {
+  --activity-card-radius: var(--o-radius-xs);
+  --activity-cell-radius: var(--o-radius-xs);
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -853,9 +879,9 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
     .el-calendar {
       min-height: 460px;
-      height: calc(100% - 54px);
+      height: 100%;
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--activity-card-radius);
 
       .el-calendar__header {
         border-bottom: 1px solid var(--o-color-control4);
@@ -884,6 +910,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
       .el-calendar__body {
         .el-calendar-table {
+          display: table;
           width: 100%;
 
           th {
@@ -921,15 +948,14 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
           .date-cell {
             height: 56px;
-            width: 42px;
-            padding: var(--o-gap-1);
+            width: 34px;
             position: relative;
             cursor: default !important;
 
             .date-cell-text {
               font-size: 14px;
-              line-height: 36px;
-              border-radius: var(--o-radius-xs);
+              line-height: 34px;
+              border-radius: var(--activity-cell-radius);
               background-color: var(--o-color-control2-light);
               border: 1px solid transparent;
             }
@@ -953,7 +979,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             &::after {
               content: '';
               position: absolute;
-              bottom: 2px;
+              bottom: 5px;
               left: 50%;
               transform: translateX(-50%);
               width: 8px;
@@ -981,7 +1007,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
               }
 
               &.approved::after {
-                background-color: rgba(var(--o-cyan-6));
+                background-color: var(--dot-bg);
               }
 
               &.expired::after {
@@ -1016,6 +1042,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
       display: flex;
       align-items: center;
       justify-content: center;
+      min-height: 600px;
     }
 
     .o-scroller {
@@ -1194,18 +1221,14 @@ const deleteActions = computed<DialogActionT[]>(() => {
       }
 
       .height-placeholder {
-        height: 0;
-        transition: margin var(--o-easing-standard) var(--o-duration-s);
-      }
-
-      .o-collapse-item-expanded + .height-placeholder {
         height: var(--o-gap-4);
       }
 
       .o-collapse-item {
         padding: var(--o-gap-4) var(--o-gap-5);
+        padding-bottom: calc(var(--o-gap-5) - var(--o-gap-4));
         border-top: none;
-        border-radius: var(--o-radius-xs);
+        border-radius: var(--activity-card-radius);
         transition: margin var(--o-easing-standard) var(--o-duration-s);
         --copy-display: none;
         --icon-size: 24px;
@@ -1214,6 +1237,9 @@ const deleteActions = computed<DialogActionT[]>(() => {
         }
 
         &:hover {
+          .title-text {
+            color: var(--o-color-primary1);
+          }
           @include respond('>pad_v') {
             --copy-display: inline-flex;
           }
@@ -1224,19 +1250,20 @@ const deleteActions = computed<DialogActionT[]>(() => {
         }
 
         &.o-collapse-item-expanded {
+          border-bottom: none;
+          background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
           @include respond('<=pad_v') {
             --copy-display: inline-flex;
           }
-        }
-
 
-        &.o-collapse-item-expanded {
-          background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+          .o-collapse-item-header {
+            border-bottom: 1px solid var(--o-color-control4);
+          }
         }
       }
 
       .o-collapse-item-header {
-        border-bottom: 1px solid var(--o-color-control4);
+        border-bottom: none;
         padding-top: 0;
         padding-bottom: var(--o-gap-4);
         display: flex;
@@ -1325,7 +1352,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
                 .o-tag {
                   margin-left: 8px;
-                  --tag-radius: 4px;
+                  --tag-radius: var(--activity-cell-radius);
                   font-weight: 500;
                   padding: 0 8px;
                   height: 24px;
@@ -1368,6 +1395,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                 color: var(--o-color-info3);
                 display: flex;
                 align-items: center;
+                font-weight: 400;
                 @include tip1;
 
                 .date-range {
@@ -1386,6 +1414,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             gap: var(--o-gap-4);
             margin-top: var(--o-gap-2);
             width: 100%;
+            font-weight: 400;
 
             .o-link {
               font-size: 14px;
@@ -1409,6 +1438,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             height: 18px;
             width: 18px;
             display: var(--copy-display);
+            color: var(--o-color-info1);
             @include respond('phone') {
               bottom: var(--o-gap-2);
               transform: revert;
@@ -1483,8 +1513,9 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .handle-dialog-active {
+  --activity-card-radius: var(--o-radius-xs);
   width: 450px;
-  --dlg-radius: var(--o-radius-xs);
+  --dlg-radius: var(--activity-card-radius);
 
   .o-dlg-header {
     margin-bottom: var(--o-gap-5);

package/src/components/activity/index.ts

@@ -1,6 +1,6 @@
 import _OActivityForm from './OActivityForm.vue';
 import _OActivityApproval from './OActivityApproval.vue';
-import _OMyActivityCalendar from './OMyActivityCalendar.vue';
+import _OActivityMyCalendar from './OActivityMyCalendar.vue';
 import type { App } from 'vue';
 
 
@@ -14,11 +14,11 @@ const OActivityApproval = Object.assign(_OActivityApproval, {
     app.component('OActivityApproval', _OActivityApproval);
   },
 });
-const OMyActivityCalendar = Object.assign(_OMyActivityCalendar, {
+const OActivityMyCalendar = Object.assign(_OActivityMyCalendar, {
   install(app: App) {
-    app.component('OMyActivityCalendar', _OMyActivityCalendar);
+    app.component('OActivityMyCalendar', OActivityMyCalendar);
   },
 });
 
-export { OActivityForm, OActivityApproval, OMyActivityCalendar };
+export { OActivityForm, OActivityApproval, OActivityMyCalendar };
 export * from './types';

package/src/components/events/OEventsApply.vue

@@ -67,6 +67,7 @@ defineProps<EventsApplyPropsT>();
 
 <style lang="scss">
 .o-events-apply {
+  --events-card-radius: var(--o-radius-xs);
   width: 100%;
   // 移动端时间线序号
   .timeline-number {
@@ -126,7 +127,7 @@ defineProps<EventsApplyPropsT>();
 
     .step-item {
       background: var(--o-color-fill2);
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--events-card-radius);
       display: flex;
       flex-direction: column; // 垂直排列子元素
       --idx-size: 20px;

package/src/components/events/OEventsCalendar.vue

@@ -236,9 +236,11 @@ const getIcon = (item: CalendarItemT) => {
 
 <style lang="scss">
 .o-events-calendar {
+  --events-card-radius: var(--o-radius-xs);
+  --events-name-radius: var(--o-radius-xs);
   .month-list {
     display: flex;
-    border-radius: var(--o-radius_control-l) var(--o-radius_control-l) 0 0;
+    border-radius: var(--events-card-radius) var(--events-card-radius) 0 0;
     background-color: var(--o-color-control2-light);
     color: var(--o-color-info1);
 
@@ -259,12 +261,12 @@ const getIcon = (item: CalendarItemT) => {
 
   .o-collapse {
     --collapse-padding: 0;
-    --collapse-radius: 0 0 var(--o-radius_control-l) var(--o-radius_control-l);
+    --collapse-radius: 0 0 var(--events-card-radius) var(--events-card-radius);
     @include respond('pad_v') {
-      --collapse-radius: var(--o-radius_control-l);
+      --collapse-radius: var(--events-card-radius);
     }
     @include respond('phone') {
-      --collapse-radius: var(--o-radius_control-l);
+      --collapse-radius: var(--events-card-radius);
     }
 
     .o-collapse-item {
@@ -493,7 +495,7 @@ const getIcon = (item: CalendarItemT) => {
         color: var(--o-color-info1);
         min-height: 32px;
         padding: 2px var(--o-gap-2);
-        border-radius: 4px;
+        border-radius: var(--events-name-radius);
         word-break: normal;
         overflow-wrap: anywhere;
         background: linear-gradient(to right, rgba(var(--bg-color), 0.06) 0%, rgba(var(--bg-color), 0.2) 100%), var(--o-color-fill2); // 底层实色背景遮住分割线

package/src/components/events/OEventsList.vue

@@ -186,13 +186,15 @@ const list = computed(() => {
 
 <style lang="scss">
 .o-events-list {
+  --events-card-radius: var(--o-radius-xs);
+  --events-tag-radius: var(--o-radius-xs);
   .filter-wrapper {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     justify-content: space-between;
     background-color: var(--o-color-fill2);
-    border-radius: var(--o-radius-xs);
+    border-radius: var(--events-card-radius);
     padding: var(--o-gap-5) var(--o-gap-6);
     gap: var(--o-gap-3) var(--o-gap-2);
     @include text1;
@@ -221,7 +223,7 @@ const list = computed(() => {
       .o-toggle {
         --toggle-size: 32px;
         --toggle-padding: 3px 15px;
-        --toggle-radius: 4px;
+        --toggle-radius: var(--events-tag-radius);
         max-height: 32px;
         --toggle-bg-color: var(--o-color-fill1);
         --toggle-bg-color-hover: var(--o-color-control2-light);
@@ -316,7 +318,7 @@ const list = computed(() => {
           position: absolute;
           top: var(--o-gap-3);
           right: var(--o-gap-3);
-          border-radius: var(--o-radius-xs);
+          border-radius: var(--events-tag-radius);
           @include respond('<=pad_v') {
             --tag-padding: var(--o-gap-1);
           }
@@ -368,7 +370,7 @@ const list = computed(() => {
     }
 
     .event-card {
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--events-card-radius);
       color: rgb(var(--o-white));
       background-size: cover;
       background-repeat: no-repeat;