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

package/src/components/activity/OMyActivityCalendar.vue

@@ -14,7 +14,7 @@ import {
   OIconArrowRight,
   OIconChevronLeft,
   OIconChevronRight,
-  DialogActionT,
+  DialogActionT, OLink,
 } from '@opensig/opendesign';
 import { ElCalendar } from 'element-plus';
 import dayjs from 'dayjs';
@@ -43,7 +43,7 @@ const pageSize = ref(50); // 分页-每页数量
 const total = ref(null); // 分页-总数
 const reloadAll = ref(false); // 是否需要清空数据
 
-const expanded = ref([]); // 展开的数据，id
+const expanded = ref([]);  // 展开的数据，id
 
 const nextLoading = ref(false);
 const bottomReached = ref(false);
@@ -71,7 +71,6 @@ const getList = async () => {
       page: currentPage.value,
       size: pageSize.value,
     } as unknown as PageParamsT);
-    console.log(res);
     const tempList = (res.data || [])
       .map((item: ActivityItemT) => {
         const { start_date, end_date, start, end } = item;
@@ -89,13 +88,11 @@ const getList = async () => {
       })
       .flat()
       .filter((v) => {
-        console.log(v.start_date, formatDate(selectedDate.value, 'YYYY-MM-DD'));
         return v.start_date.slice(0, 7) === formatDate(selectedDate.value, 'YYYY-MM-DD').slice(0, 7);
       });
     if (reloadAll.value) {
       originList.value = res.data || [];
       list.value = tempList;
-      console.log(list.value);
     } else {
       if (currentPage.value === 1 && !isPhone.value) {
         originList.value = res.data || [];
@@ -460,6 +457,7 @@ const revokeActions = computed<DialogActionT[]>(() => {
     color: 'primary',
     variant: 'outline',
     round: 'pill',
+    size: 'large',
     label: '确定',
     onClick: () => {
       confirm();
@@ -469,6 +467,7 @@ const revokeActions = computed<DialogActionT[]>(() => {
     color: 'primary',
     variant: 'solid',
     round: 'pill',
+    size: 'large',
     label: '取消',
     onClick: () => {
       cancel();
@@ -482,6 +481,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     color: 'primary',
     variant: 'outline',
     round: 'pill',
+    size: 'large',
     label: '确定',
     onClick: () => {
       confirmDelete();
@@ -491,6 +491,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     color: 'primary',
     variant: 'solid',
     round: 'pill',
+    size: 'large',
     label: '取消',
     onClick: () => {
       cancelDelete();
@@ -505,8 +506,8 @@ const deleteActions = computed<DialogActionT[]>(() => {
       <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">
@@ -515,10 +516,10 @@ const deleteActions = computed<DialogActionT[]>(() => {
             <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>
@@ -554,7 +555,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
               <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>
@@ -589,8 +590,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                   >
                     <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>
@@ -621,19 +621,31 @@ const deleteActions = computed<DialogActionT[]>(() => {
                         </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">
@@ -643,18 +655,30 @@ const deleteActions = computed<DialogActionT[]>(() => {
                         :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>
@@ -665,7 +689,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                   <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>
@@ -719,14 +743,18 @@ const deleteActions = computed<DialogActionT[]>(() => {
   .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;
@@ -783,8 +811,8 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
     .el-calendar {
       min-height: 460px;
-      height: 100%;
-      background-color: var(--table-bg);
+      height: calc(100% - 54px);
+      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
       border-radius: var(--o-radius-xs);
 
       .el-calendar__header {
@@ -814,15 +842,22 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
       .el-calendar__body {
         .el-calendar-table {
+          tr {
+            background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
+          }
+
           th {
             text-align: center;
+            background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
+            border: none;
           }
 
           td {
-            background-color: var(--table-bg);
+            background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
             border: none;
             text-align: center;
             transition: none;
+            padding: 0;
 
             .el-calendar-day {
               padding: 0;
@@ -852,6 +887,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
               line-height: 36px;
               border-radius: var(--o-radius-xs);
               background-color: var(--cell-bg);
+              border: 1px solid transparent;
             }
 
             .date-cell-text {
@@ -865,7 +901,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
               &:not(.is-selected) {
                 .date-cell-text:hover {
-                  background-color: var(--cell-bg-hover);
+                  background-color: var(--o-color-control3-light);
                 }
               }
             }
@@ -884,14 +920,14 @@ const deleteActions = computed<DialogActionT[]>(() => {
             &.is-today {
               .date-cell-text {
                 color: #000;
-                background-color: var(--cell-bg-hover);
+                background-color: var(--o-color-control3-light);
               }
             }
 
             &.is-selected {
               .date-cell-text {
-                color: #fff;
-                background-color: var(--o-color-primary1);
+                background-color: var(--o-color-control3-light);
+                border: 1px solid var(--o-color-primary1);
               }
             }
 
@@ -901,7 +937,15 @@ const deleteActions = computed<DialogActionT[]>(() => {
               }
 
               &.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));
               }
             }
           }
@@ -943,10 +987,15 @@ const deleteActions = computed<DialogActionT[]>(() => {
   .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 {
@@ -963,7 +1012,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
       }
 
       .act-item {
-        padding-left: var(--o-gap-5);
+        padding-left: 24px;
         position: relative;
 
         &.last-item {
@@ -982,7 +1031,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           bottom: 0;
           overflow: hidden;
 
-          --active-color: rgb(222, 222, 227);
+          --active-color: var(--o-color-primary1);
 
           &::before {
             content: '';
@@ -1050,7 +1099,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
         }
 
         .approved {
-          --active-color: rgba(255, 165, 0, 1);
+          --active-color: var(--o-color-primary1);
         }
 
         .group-title {
@@ -1059,7 +1108,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           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 {
@@ -1119,6 +1168,14 @@ 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);
       }
@@ -1137,13 +1194,31 @@ const deleteActions = computed<DialogActionT[]>(() => {
         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: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
         }
       }
 
@@ -1156,60 +1231,69 @@ const deleteActions = computed<DialogActionT[]>(() => {
         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: rgb(var(--o-cyan-6));
               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,
@@ -1268,36 +1352,53 @@ const deleteActions = computed<DialogActionT[]>(() => {
           }
 
           .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 {
@@ -1305,7 +1406,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
         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;
           }
@@ -1317,14 +1418,17 @@ const deleteActions = computed<DialogActionT[]>(() => {
             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;
@@ -1352,6 +1456,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 <style lang="scss">
 .handle-dialog-active {
   width: 450px;
+  --dlg-radius: var(--o-radius-xs);
 
   .o-dlg-header {
     margin-bottom: var(--o-gap-5);
@@ -1361,5 +1466,9 @@ const deleteActions = computed<DialogActionT[]>(() => {
     display: flex;
     justify-content: center;
   }
+
+  .dialog-content {
+    margin-bottom: var(--o-gap-2);
+  }
 }
 </style>

package/src/components/activity/types.ts

@@ -29,7 +29,6 @@ export interface ActivityFormPropsT {
     id: number;
     name: string;
   }[];
-  status?: string | null;
 }
 
 export interface TypeOptionT {

package/src/components/common/MoreText.vue

@@ -47,8 +47,9 @@ const determineHeight = () => {
 };
 
 const clickText = () => {
-  console.log(props.link);
-  console.log('判断是否使用a标签');
+  if (props.link) {
+    window.open(props.text)
+  }
 };
 </script>