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

package/src/components/OHeaderUser.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { OIcon, OBadge, ODivider, ODropdown, ODropdownItem } from '@opensig/opendesign';
+import { OIcon, OBadge, ODropdown, ODropdownItem } from '@opensig/opendesign';
 
 import AppAvatar from './common/AppAvatar.vue';
 
@@ -30,7 +30,6 @@ interface UserPropsT {
   lang?: string;
   noticeTotal?: number;
   userInfo?: UserInfoT;
-  userInfoVisible?: boolean;
   options?: OptionsItemT[];
 }
 
@@ -39,7 +38,6 @@ withDefaults(defineProps<UserPropsT>(), {
   lang: undefined,
   noticeTotal: undefined,
   userInfo: undefined,
-  userInfoVisible: undefined,
   options: undefined,
 });
 
@@ -77,11 +75,11 @@ const jumpToPage = (val: any) => {
         <ODropdown
           :trigger="lePadV ? 'click' : 'hover'"
           :optionPosition="lePadV ? 'br' : 'bottom'"
-          :option-wrap-class="`user-dropdown ${lang === 'en' ? 'is-en' : ''} user-dropdown${userInfoVisible ? '-info' : ''}`"
+          :option-wrap-class="`user-dropdown ${lang === 'en' ? 'is-en' : ''}`"
         >
           <div class="info-wrap hover-icon-rotate">
-            <OBadge :value="noticeTotal" color="danger" class="header-message user-avatar" :class="{ 'notice-not': !noticeTotal }">
-              <AppAvatar :avatar="userInfo.photo" :name="userInfo.username" :custom-size="lePadV ? 24 : 32" />
+            <OBadge :value="noticeTotal" :dot="true" color="danger" class="header-message user-avatar" :class="{ 'notice-not': !noticeTotal }">
+              <AppAvatar :avatar="userInfo.photo" :name="userInfo.username" :custom-size="20" />
             </OBadge>
             <p class="user-account">{{ userInfo.username }}</p>
             <OIcon class="icon">
@@ -90,30 +88,12 @@ const jumpToPage = (val: any) => {
           </div>
           <template #dropdown>
             <!-- 账号信息 -->
-            <div v-if="userInfoVisible" class="user-info-dropdown">
-              <AppAvatar :avatar="userInfo.photo" :name="userInfo.username" :custom-size="32" />
-              <div class="right-info">
-                <p class="user-fullname">用户名</p>
-                <p class="user-account">{{ userInfo.username }}</p>
-              </div>
-            </div>
-            <ODivider v-if="userInfoVisible" :style="{ '--o-divider-gap': '6px' }" />
             <template v-for="item in options" :key="item.label">
-              <ODropdownItem :style="{ '--dropdown-item-justify': userInfoVisible ? 'flex-start' : 'center' }" @click="jumpToPage(item)">
-                <template v-if="item?.icon">
-                  <OBadge :value="item.total" color="danger" class="header-message icon-message" :class="{ 'notice-not': !item.total }">
-                    <OIcon>
-                      <component :is="item.icon" class="icon" />
-                    </OIcon>
-                  </OBadge>
-                  <span>{{ item.label }}</span>
-                </template>
-                <template v-else>
-                  <OBadge v-if="item?.total" :value="item.total" color="danger" class="header-message message" :class="{ 'notice-not': !item.total }">
-                    {{ item.label }}
-                  </OBadge>
-                  <span v-else>{{ item.label }}</span>
-                </template>
+              <ODropdownItem :style="{ '--dropdown-item-justify': 'center' }" @click="jumpToPage(item)">
+                <OBadge v-if="item?.total" :value="item.total" color="danger" class="header-message message" :class="{ 'notice-not': !item.total }">
+                  {{ item.label }}
+                </OBadge>
+                <span v-else>{{ item.label }}</span>
               </ODropdownItem>
             </template>
           </template>
@@ -152,46 +132,25 @@ const jumpToPage = (val: any) => {
 }
 
 .user-avatar {
-  width: 32px;
-  height: 32px;
-  margin-right: 12px;
+  margin-right: 4px;
 
   :deep(.o-badge-content) {
-    right: 8px;
+    --badge-dot-size: 6px;
+    right: 7px;
     top: 2px;
   }
 }
 
 .o-dropdown-item {
-  width: 142px;
   white-space: nowrap;
   --dropdown-item-color: var(--o-color-info1);
-  --dropdown-item-padding: 6px 8px;
+  --dropdown-item-padding: 5px 12px;
   @include tip1;
 
   @include hover {
     color: var(--o-color-primary1);
     background: var(--o-color-control2-light);
   }
-
-  .o-icon {
-    color: var(--o-color-info3);
-    --icon-size: 24px;
-    margin-right: 8px;
-  }
-
-  .icon-message {
-    height: 24px;
-    display: flex;
-
-    @include respond-to('laptop') {
-      height: 16px;
-    }
-
-    :deep(.o-badge-content) {
-      right: 14px;
-    }
-  }
 }
 
 .notice-not {
@@ -200,23 +159,9 @@ const jumpToPage = (val: any) => {
   }
 }
 
-.user-info-dropdown {
-  display: flex;
-  align-items: center;
-}
-
-.right-info {
-  margin-left: 10px;
-}
-
-.user-fullname {
-  color: var(--o-color-info3);
-  @include tip2;
-}
-
 .user-account {
   color: var(--o-color-info1);
-  max-width: 90px;
+  max-width: 96px;
   font-weight: 500;
   @include tip1;
   @include text-truncate(1);
@@ -232,8 +177,6 @@ const jumpToPage = (val: any) => {
       .info-wrap {
         .user-avatar {
           margin-right: 0;
-          width: 24px;
-          height: 24px;
         }
 
         .user-account {
@@ -253,9 +196,6 @@ const jumpToPage = (val: any) => {
 .user-dropdown {
   --dropdown-list-radius: var(--o-radius-m);
 }
-.user-dropdown-info {
-  --dropdown-list-padding: 11px 11px 6px !important;
-}
 .avatar-icon {
   font-size: 24px;
   color: var(--o-color-info1);
@@ -269,10 +209,6 @@ const jumpToPage = (val: any) => {
   .user-dropdown {
     --dropdown-list-radius: 8px;
 
-    .user-info-dropdown {
-      display: none;
-    }
-
     .o-divider {
       display: none;
     }
@@ -297,8 +233,5 @@ const jumpToPage = (val: any) => {
       }
     }
   }
-  .user-dropdown-info {
-    --dropdown-list-padding: 9px 4px !important;
-  }
 }
 </style>

package/src/components/OSourceCode.vue

@@ -70,7 +70,7 @@ const visibleChange = (val: boolean) => {
 
 <style lang="scss" scoped>
 .source-code {
-  height: calc(100% + 10px);
+  height: 100%;
   display: flex;
   align-items: center;
   .info-wrap {

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) {
@@ -184,6 +188,7 @@ const confirmCancel = async () => {
         content: `“${ currentRow.value?.title }”活动${ cancelText.value }失败`,
       });
     }
+  }
 };
 
 // -------------------- 审核操作 --------------------
@@ -350,7 +355,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
             <ThFilter
               v-model="applicantValue"
               @confirm="filterApplicantList"
-              :list="applicantList"
+              :list="applicantOptions"
               :multiple="true"
             >
 
@@ -389,8 +394,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 +564,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 +612,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

@@ -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 || [];
@@ -623,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>
@@ -811,12 +808,34 @@ const deleteActions = computed<DialogActionT[]>(() => {
   .left-calendar {
     width: 336px;
     flex-shrink: 0;
-    --table-bg: var(--o-color-control2-light);
+    @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);
-      background-color: var(--table-bg);
+      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
       border-radius: var(--o-radius-xs);
 
       .el-calendar__header {
@@ -846,18 +865,19 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
       .el-calendar__body {
         .el-calendar-table {
+          width: 100%;
           tr {
-            background: var(--table-bg) !important;
+            background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
           }
 
           th {
             text-align: center;
-            background: var(--table-bg) !important;
+            background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
             border: none;
           }
 
           td {
-            background: var(--table-bg) !important;
+            background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
             border: none;
             text-align: center;
             transition: none;
@@ -890,7 +910,8 @@ 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;
             }
 
             .date-cell-text {
@@ -929,8 +950,8 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
             &.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);
               }
             }
 
@@ -960,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 {
@@ -1009,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;
       }
@@ -1171,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);
       }
@@ -1221,7 +1210,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
 
         &.o-collapse-item-expanded {
-          background-color: var(--o-color-control2-light);
+          background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
         }
       }
 
@@ -1256,6 +1245,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           flex-direction: column;
           align-items: flex-start;
           justify-content: space-between;
+
           .item-header-left {
             display: flex;
             align-items: flex-start;
@@ -1268,11 +1258,12 @@ const deleteActions = computed<DialogActionT[]>(() => {
               align-self: stretch;
               flex-shrink: 0;
             }
+
             .act-icon {
               width: var(--icon-size);
               height: var(--icon-size);
               border-radius: 50%;
-              background-color: var(--o-color-primary1);
+              background-color: rgb(var(--o-cyan-6));
               color: #fff;
               display: flex;
               align-items: center;
@@ -1308,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);
+                  }
                 }
               }
 
@@ -1356,12 +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;
+              --link-color: var(--o-color-info2);
+              --link-color-hover: var(--o-color-primary2);
+              --link-color-active: var(--o-color-primary3);
             }
 
             .o-link + .o-link {
@@ -1429,6 +1434,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
         padding-right: 0 !important;
         min-width: auto;
       }
+
       .o-btn-text {
         @include hover {
           background-color: transparent;
@@ -1457,6 +1463,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 .handle-dialog-active {
   width: 450px;
   --dlg-radius: var(--o-radius-xs);
+
   .o-dlg-header {
     margin-bottom: var(--o-gap-5);
   }