@opendesign-plus-test/components 0.0.1-rc.24 → 0.0.1-rc.26

package/src/components/activity/OMyActivityCalendar.vue

@@ -14,6 +14,7 @@ import {
   OIconArrowRight,
   OIconChevronLeft,
   OIconChevronRight,
+  DialogActionT, OLink,
 } from '@opensig/opendesign';
 import { ElCalendar } from 'element-plus';
 import dayjs from 'dayjs';
@@ -450,6 +451,56 @@ onUnmounted(() => {
   const scrollerContainerEl = scrollerRef.value?.getContainerEl();
   scrollerContainerEl?.removeEventListener('scroll', scrollerScroll);
 });
+
+
+const revokeActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: dialogLoading.value,
+    color: 'primary',
+    variant: 'outline',
+    round: 'pill',
+    size: 'large',
+    label: '确定',
+    onClick: () => {
+      confirm();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: 'solid',
+    round: 'pill',
+    size: 'large',
+    label: '取消',
+    onClick: () => {
+      cancel();
+    },
+  }];
+});
+const deleteActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: dialogLoading.value,
+    color: 'primary',
+    variant: 'outline',
+    round: 'pill',
+    size: 'large',
+    label: '确定',
+    onClick: () => {
+      confirmDelete();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: 'solid',
+    round: 'pill',
+    size: 'large',
+    label: '取消',
+    onClick: () => {
+      cancelDelete();
+    },
+  }];
+});
 </script>
 
 <template>
@@ -458,8 +509,8 @@ onUnmounted(() => {
       <div v-if="isPhone" class="list-calendar-mb">
         <span>{{ (selectedDate ? dayjs(new Date(selectedDate)) : dayjs()).format('YYYY MM月') }}</span>
         <span>
-          <OIcon @click="changeMonth('prev-month')"><OIconArrowLeft /></OIcon>
-          <OIcon @click="changeMonth('next-month')"><OIconArrowRight /></OIcon>
+          <OIcon @click="changeMonth('prev-month')"><OIconChevronLeft /></OIcon>
+          <OIcon @click="changeMonth('next-month')"><OIconChevronRight /></OIcon>
         </span>
       </div>
       <div class="left-calendar">
@@ -468,10 +519,10 @@ onUnmounted(() => {
             <span>{{ (selectedDate ? dayjs(new Date(selectedDate)) : dayjs()).format('YYYY MM月') }}</span>
             <div>
               <OIcon @click="changeMonth('prev-month')">
-                <OIconArrowLeft />
+                <OIconChevronLeft />
               </OIcon>
               <OIcon @click="changeMonth('next-month')">
-                <OIconArrowRight />
+                <OIconChevronRight />
               </OIcon>
             </div>
           </template>
@@ -507,7 +558,7 @@ onUnmounted(() => {
               <template v-for="(act, idx) in activityList" :key="act.start_date">
                 <div class="list-month-change prev-month" v-if="idx === 0" @click="changeMonth('prev-month')">
                   <OIcon>
-                    <OIconChevronLeft />
+                    <OIconArrowLeft />
                   </OIcon>
                   <span>上个月</span>
                 </div>
@@ -542,8 +593,7 @@ onUnmounted(() => {
                   >
                     <template #title>
                       <div class="item-header-left">
-                        <div class="act-icon"
-                             :class="[`act-icon-${row.is_delete ? 'delete' : statusMap.get(row.status)?.id}`]">
+                        <div class="act-icon">
                           <OIcon>
                             <IconEvent />
                           </OIcon>
@@ -574,19 +624,31 @@ onUnmounted(() => {
                         </div>
                       </div>
                       <div class="item-header-right" v-if="!row.is_delete">
-                        <OButton
+                        <OLink v-if="row.content_url" :href="row.content_url" target="_blank" rel="noopener noreferrer">
+                          活动详情
+                          <template #suffix>
+                            <OIcon>
+                              <OIconChevronRight></OIconChevronRight>
+                            </OIcon>
+                          </template>
+                        </OLink>
+                        <OLink
                           v-if="
                             row.status === 3 ||
                             row.status === 4 ||
                             (row.status === 2 && row.update_activity_id && new Date(row.register_end_date).getTime() > new Date().getTime())
                           "
-                          color="primary"
                           :href="row.register_url"
                           target="_blank"
                           rel="noopener noreferrer"
-                        >我要报名
-                        </OButton
                         >
+                          我要报名
+                          <template #suffix>
+                            <OIcon>
+                              <OIconChevronRight></OIconChevronRight>
+                            </OIcon>
+                          </template>
+                        </OLink>
                       </div>
                     </template>
                     <div class="activity-detail">
@@ -596,18 +658,30 @@ onUnmounted(() => {
                         :ref="(insRef) => getDetailRefs(insRef, row.id)"
                       />
                       <div class="activity-btn" v-if="!row.isExpired && !row.is_delete">
-                        <OButton v-if="row.status === 2" variant="text" @click="handleRevokeItem(row)">撤销审核
+                        <OButton
+                          v-if="row.status === 2"
+                          variant="text"
+                          @click="handleRevokeItem(row)"
+                        >
+                          撤销审核
                         </OButton>
-                        <OButton v-if="row.status === 1 || row.status === 3 || row.status === 4 || row.status === 7"
-                                 variant="text" @click="handleEditItem(row)"
-                        >修改活动
-                        </OButton
+                        <OButton
+                          v-if="row.status === 1 || row.status === 3 || row.status === 4 || row.status === 7"
+                          variant="text" @click="handleEditItem(row)"
+                        >
+                          修改活动
+                        </OButton>
+                        <OButton
+                          v-if="row.status === 1 || row.status === 7" variant="text"
+                          @click="handleDeleteItem(row)"
                         >
-                        <OButton v-if="row.status === 1 || row.status === 7" variant="text"
-                                 @click="handleDeleteItem(row)">删除活动
+                          删除活动
                         </OButton>
-                        <OButton v-if="row.status === 1 || row.status === 7" variant="text"
-                                 @click="handleSubmitReviewItem(row)">提交审核
+                        <OButton
+                          v-if="row.status === 1 || row.status === 7" variant="text"
+                          @click="handleSubmitReviewItem(row)"
+                        >
+                          提交审核
                         </OButton>
                       </div>
                     </div>
@@ -618,7 +692,7 @@ onUnmounted(() => {
                   <div class="load-text" v-if="bottomReached">加载中···</div>
                   <div class="list-month-change next-month" @click="changeMonth('next-month')">
                     <OIcon>
-                      <OIconChevronRight />
+                      <OIconArrowRight />
                     </OIcon>
                     <span>下个月</span>
                   </div>
@@ -633,30 +707,14 @@ onUnmounted(() => {
     </div>
   </div>
   <!-- 撤销审核弹窗 -->
-  <ODialog v-model:visible="revokeVisible" main-class="handle-dialog-active">
+  <ODialog v-model:visible="revokeVisible" main-class="handle-dialog-active" :actions="revokeActions">
     <template #header>撤销审核</template>
     <div class="dialog-content">是否确认要撤销“{{ currentRow.title }}”活动？撤销审核后活动将变成草稿状态。</div>
-    <template #footer>
-      <div class="dialog-footer">
-        <OButton color="primary" variant="outline" size="large" round="pill" @click="confirm" :loading="dialogLoading">
-          确定
-        </OButton>
-        <OButton color="primary" variant="solid" size="large" round="pill" @click="cancel">取消</OButton>
-      </div>
-    </template>
   </ODialog>
   <!-- 删除活动弹窗 -->
-  <ODialog v-model:visible="deleteVisible" main-class="handle-dialog-active">
+  <ODialog v-model:visible="deleteVisible" main-class="handle-dialog-active" :actions="deleteActions">
     <template #header>删除活动</template>
     <div class="dialog-content">是否确认删除“{{ currentRow.title }}”活动？删除后记录将不再我的个人中心呈现。</div>
-    <template #footer>
-      <div class="dialog-footer">
-        <OButton color="primary" variant="outline" size="large" round="pill" @click="confirmDelete"
-                 :loading="dialogLoading">确定
-        </OButton>
-        <OButton color="primary" variant="solid" size="large" round="pill" @click="cancelDelete">取消</OButton>
-      </div>
-    </template>
   </ODialog>
 </template>
 
@@ -688,14 +746,18 @@ onUnmounted(() => {
   .activity-list {
     display: flex;
     flex-wrap: nowrap;
-    height: calc(100% - var(--o-gap-6) * 5);
-    --table-bg: rgba(243, 246, 250);
-    --cell-bg: rgba(235, 241, 250);
-    --cell-bg-hover: rgba(213, 227, 253);
-    @include respond-to('<=pad_v') {
+    gap: var(--o-gap-4);
+    height: 100%;
+    --phone-padding-top: 0;
+    @include respond-to('pad_v') {
       flex-direction: column;
+      gap: var(--o-gap-4);
+    }
+    @include respond-to('phone') {
+      flex-direction: column;
+      gap: var(--o-gap-3);
+      --phone-padding-top: calc(var(--o-gap-5) + var(--o-gap-3) + var(--o-gap-3));
     }
-
     .o-loading {
       .o-layer-mask {
         background-color: transparent;
@@ -749,10 +811,11 @@ onUnmounted(() => {
   .left-calendar {
     width: 336px;
     flex-shrink: 0;
+    --table-bg: var(--o-color-control2-light);
 
     .el-calendar {
       min-height: 460px;
-      height: 100%;
+      height: calc(100% - 54px);
       background-color: var(--table-bg);
       border-radius: var(--o-radius-xs);
 
@@ -783,15 +846,22 @@ onUnmounted(() => {
 
       .el-calendar__body {
         .el-calendar-table {
+          tr {
+            background: var(--table-bg) !important;
+          }
+
           th {
             text-align: center;
+            background: var(--table-bg) !important;
+            border: none;
           }
 
           td {
-            background-color: var(--table-bg);
+            background: var(--table-bg) !important;
             border: none;
             text-align: center;
             transition: none;
+            padding: 0;
 
             .el-calendar-day {
               padding: 0;
@@ -834,7 +904,7 @@ onUnmounted(() => {
 
               &:not(.is-selected) {
                 .date-cell-text:hover {
-                  background-color: var(--cell-bg-hover);
+                  background-color: var(--o-color-control3-light);
                 }
               }
             }
@@ -853,7 +923,7 @@ onUnmounted(() => {
             &.is-today {
               .date-cell-text {
                 color: #000;
-                background-color: var(--cell-bg-hover);
+                background-color: var(--o-color-control3-light);
               }
             }
 
@@ -870,7 +940,15 @@ onUnmounted(() => {
               }
 
               &.approved::after {
-                background-color: rgba(255, 165, 0, 1);
+                background-color: rgba(var(--o-cyan-6));
+              }
+
+              &.expired::after {
+                background-color: rgb(var(--o-mixedgray-6));
+              }
+
+              &.all-deleted::after {
+                background-color: rgb(var(--o-mixedgray-6));
               }
             }
           }
@@ -912,10 +990,15 @@ onUnmounted(() => {
   .right-meeting {
     flex-grow: 1;
     background-color: var(--o-color-fill2);
-    margin-left: 16px;
+
     @include respond-to('phone') {
-      margin-top: calc(24px + var(--o-gap-7));
-      margin-left: 0;
+      margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
+    }
+
+    &.is-empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .o-scroller {
@@ -932,7 +1015,7 @@ onUnmounted(() => {
       }
 
       .act-item {
-        padding-left: var(--o-gap-5);
+        padding-left: 24px;
         position: relative;
 
         &.last-item {
@@ -951,7 +1034,7 @@ onUnmounted(() => {
           bottom: 0;
           overflow: hidden;
 
-          --active-color: rgb(222, 222, 227);
+          --active-color: var(--o-color-primary1);
 
           &::before {
             content: '';
@@ -1019,7 +1102,7 @@ onUnmounted(() => {
         }
 
         .approved {
-          --active-color: rgba(255, 165, 0, 1);
+          --active-color: var(--o-color-primary1);
         }
 
         .group-title {
@@ -1028,7 +1111,7 @@ onUnmounted(() => {
           color: var(--o-color-info1);
           @include text2;
           @include respond-to('phone') {
-            padding-left: var(--o-gap-4);
+            padding-left: var(--o-gap-5);
           }
 
           &.is-end {
@@ -1088,6 +1171,14 @@ onUnmounted(() => {
       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);
       }
@@ -1106,13 +1197,31 @@ onUnmounted(() => {
         border-top: none;
         border-radius: var(--o-radius-xs);
         transition: margin var(--o-easing-standard) var(--o-duration-s);
+        --copy-display: none;
+        --icon-size: 24px;
+        @include respond-to('<=pad_v') {
+          padding: var(--o-gap-3) var(--o-gap-4);
+        }
+
+        &:hover {
+          @include respond-to('>pad_v') {
+            --copy-display: inline-flex;
+          }
+        }
+
+        @include respond-to('phone') {
+          --icon-size: 20px;
+        }
 
         &.o-collapse-item-expanded {
-          background-color: var(--table-bg);
+          @include respond-to('<=pad_v') {
+            --copy-display: inline-flex;
+          }
         }
 
-        @include respond-to('<=pad_v') {
-          padding: 8px 12px;
+
+        &.o-collapse-item-expanded {
+          background-color: var(--o-color-control2-light);
         }
       }
 
@@ -1125,60 +1234,67 @@ onUnmounted(() => {
         gap: var(--o-gap-4);
 
         .o-collapse-item-icon {
+          position: relative;
+          top: 4px;
           flex-shrink: 0;
+          @include respond-to('phone') {
+            position: absolute;
+            right: 0;
+            width: 20px;
+            height: 20px;
+            font-size: 20px;
+            bottom: var(--o-gap-2);
+            top: revert;
+          }
         }
 
+
         .o-collapse-item-title {
           flex: 1;
           width: 0;
           display: flex;
-          align-items: center;
+          flex-direction: column;
+          align-items: flex-start;
           justify-content: space-between;
-          flex-wrap: nowrap;
-
           .item-header-left {
             display: flex;
             align-items: flex-start;
             gap: var(--o-gap-3);
-            flex: 1;
-            width: 0;
-
+            width: 100%;
+            margin-bottom: var(--o-gap-2);
+            @include respond-to('phone') {
+              flex-grow: 1;
+              width: 100%;
+              align-self: stretch;
+              flex-shrink: 0;
+            }
             .act-icon {
-              width: 24px;
-              height: 24px;
+              width: var(--icon-size);
+              height: var(--icon-size);
               border-radius: 50%;
-              background-color: rgba(var(--o-cyan-6));
+              background-color: var(--o-color-primary1);
               color: #fff;
               display: flex;
               align-items: center;
               justify-content: center;
               flex-shrink: 0;
-              @include respond-to('phone') {
-                width: 20px;
-                height: 20px;
-              }
 
-              svg path {
-                fill: currentColor
+              .o-icon {
+                svg path {
+                  fill: currentColor;
+                }
               }
-            }
-
-            .act-icon-registration,
-            .act-icon-in-progress {
-              background-color: rgba(255, 165, 0, 1);
-            }
 
-            .act-icon-delete {
-              background-color: rgba(222, 222, 227, 1);
             }
 
             .header-info {
-              width: calc(100% - var(--o-gap-3) - 24px);
+              width: calc(100% - var(--o-gap-3) - var(--icon-size));
 
               .act-title {
                 font-weight: 500;
                 display: flex;
                 align-items: center;
+                margin-bottom: var(--o-gap-2);
                 @include text2;
 
                 &.is-delete,
@@ -1237,36 +1353,53 @@ onUnmounted(() => {
           }
 
           .item-header-right {
-            flex-shrink: 0;
             display: flex;
             align-items: center;
-            padding-left: var(--o-gap-4);
-          }
-        }
+            padding-left: calc(var(--o-gap-3) + var(--icon-size));
+            gap: var(--o-gap-5);
+            width: 100%;
 
-        @include respond-to('phone') {
-          .o-collapse-item-icon {
-            align-self: flex-end;
-            position: relative;
-            bottom: 4px;
+            .o-link {
+              font-size: 14px;
+              line-height: 21px;
+            }
+
+            .o-link + .o-link {
+              margin-left: var(--o-gap-section-6);
+            }
+
+            .o-icon {
+              font-size: 16px;
+            }
           }
-          .o-collapse-item-title {
-            flex-direction: column;
-            align-items: flex-start;
 
-            .item-header-left {
-              flex-grow: 1;
-              width: 100%;
-              align-self: stretch;
-              flex-shrink: 0;
+          .copy-icon {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: calc(var(--collapse-item-icon-size) + var(--o-gap-4));
+            font-size: 18px;
+            height: 18px;
+            width: 18px;
+            display: var(--copy-display);
+            @include respond-to('phone') {
+              bottom: var(--o-gap-2);
+              transform: revert;
+              top: revert;
+              right: calc(20px + var(--o-gap-2))
+            }
+
+            &:hover {
+              color: var(--o-color-primary1);
             }
 
-            .item-header-right {
-              padding-left: 24px;
-              margin-top: 8px;
+
+            svg path {
+              fill: currentColor;
             }
           }
         }
+
       }
 
       .o-collapse-item-body {
@@ -1274,7 +1407,7 @@ onUnmounted(() => {
         padding: var(--o-gap-4) 0 0;
 
         .activity-detail {
-          padding-left: calc(var(--o-gap-5) + var(--o-gap-3));
+          padding-left: calc(var(--o-gap-3) + var(--icon-size));
           @include respond-to('phone') {
             padding-left: 0;
           }
@@ -1286,14 +1419,16 @@ onUnmounted(() => {
             display: flex;
             align-items: center;
             justify-content: flex-end;
-
-            .o-btn + .o-btn {
-              margin-left: 16px;
-            }
+            gap: var(--o-gap-5);
           }
         }
       }
 
+      .o-btn.o-btn-text {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        min-width: auto;
+      }
       .o-btn-text {
         @include hover {
           background-color: transparent;
@@ -1321,8 +1456,7 @@ onUnmounted(() => {
 <style lang="scss">
 .handle-dialog-active {
   width: 450px;
-  --dlg-radius: 16px;
-
+  --dlg-radius: var(--o-radius-xs);
   .o-dlg-header {
     margin-bottom: var(--o-gap-5);
   }
@@ -1332,11 +1466,8 @@ onUnmounted(() => {
     justify-content: center;
   }
 
-  .dialog-footer {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--o-gap-4);
-    column-gap: var(--o-gap-4);
+  .dialog-content {
+    margin-bottom: var(--o-gap-2);
   }
 }
 </style>

package/src/components/activity/config.ts

@@ -84,8 +84,8 @@ export const statusMap = new Map([
     7,
     {
       id: 'reject',
-      label: '审核驳回',
-      text: '审核驳回',
+      label: '已驳回',
+      text: '已驳回',
       value: 7,
     },
   ],

package/src/components/activity/types.ts

@@ -15,6 +15,8 @@ export interface ParamsItemT {
   schedules?: string;
   is_publish: string; // 是否发布 true-发布审核 false-发布为草稿
   update_activity_id?: string;
+  email_list?: string; // 邮件列表
+  organizer?: string; // 主办方
   approver: string; // 审批人
 }
 
@@ -23,7 +25,10 @@ export interface ActivityFormPropsT {
   creatActivity: any;
   editActivity: any;
   admins: string[];
-  status?: string | null;
+  organizers: {
+    id: number;
+    name: string;
+  }[];
 }
 
 export interface TypeOptionT {

package/src/components/common/MoreText.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { OIcon, OIconChevronDown, OIconChevronUp } from '@opensig/opendesign';
 import { nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from '@/i18n';
 
 const props = withDefaults(
   defineProps<{
@@ -16,6 +17,9 @@ const props = withDefaults(
     show: false,
   },
 );
+
+const { t } = useI18n();
+
 const expanded = ref(false); // 是否展开
 const showBtn = ref(false); // 受否显示展开按钮
 const offsetHeight = ref(0); // 内容高度