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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.27",
+  "version": "0.0.1-rc.28",
   "type": "module",
   "publishConfig": {
     "access": "public",

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

@@ -620,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>
@@ -808,7 +808,30 @@ const deleteActions = computed<DialogActionT[]>(() => {
   .left-calendar {
     width: 336px;
     flex-shrink: 0;
+    @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);
@@ -842,6 +865,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
       .el-calendar__body {
         .el-calendar-table {
+          width: 100%;
           tr {
             background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%) !important;
           }
@@ -886,7 +910,7 @@ 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;
             }
 
@@ -957,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 {
@@ -1006,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;
       }
@@ -1168,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);
       }
@@ -1307,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);
+                  }
                 }
               }
 
@@ -1355,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 {

package/src/components/common/ThFilter.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useLocale } from '@opendesign-plus/composables';
 import {
   OCheckbox,
   OCheckboxGroup,
@@ -13,10 +12,14 @@ import {
 } from '@opensig/opendesign';
 import { computed, h, nextTick, ref, watch } from 'vue';
 import IconFilter from '~icons/components/icon-filter.svg';
-import AppEmpty from '../../../../../../.vitepress/src/components/AppEmpty.vue';
+import { useI18n } from '@/i18n';
+import { buildVueDompurifyHTMLDirective } from 'vue-dompurify-html';
+
+// 局部注册 v-dompurify-html 指令
+const vDompurifyHtml = buildVueDompurifyHTMLDirective();
 
 type TItem = { label: string; value: string | number; children?: TItem[] };
-const { t } = useLocale();
+const { t } = useI18n();
 const props = withDefaults(
   defineProps<{
     modelValue: string[] | number[] | string | number;
@@ -257,6 +260,7 @@ const renderLabel = ({ data }) => {
     min-width: 80px;
     max-width: calc(var(--table-width, 300) * 0.8px);
     --dropdown-item-justify: flex-start;
+    --dropdown-item-padding: 7px 12px;
   }
 
   .o-dropdown-item.is-active {

package/src/components/meeting/OMeetingCalendar.vue

@@ -31,7 +31,6 @@ const props = withDefaults(defineProps<{
   getEventsListRequest: any;
   hiddenEvents?: boolean;
   hiddenSummit?: boolean;
-  createDesc?: string
 }>(), {
   getSummitListRequest: async () => [],
   getEventsListRequest: async () => [],
@@ -264,17 +263,9 @@ const formatYearMonth = (date: string) => {
     return date;
   }
 };
-const emits = defineEmits(['create']);
-const create = () => {
-  emits('create');
-};
 </script>
 <template>
   <div class="o-meeting-calendar">
-    <div class="calendar-header">
-      <span>{{ createDesc || '' }}</span>
-      <OButton color="primary" variant="solid" round="pill" @click="create">预定会议</OButton>
-    </div>
     <div class="calendar-body">
       <ElCalendar ref="calendar" class="calender">
         <template #header="{ date }">
@@ -386,6 +377,7 @@ const create = () => {
   .el-calendar-table {
     margin-bottom: 0;
     display: table;
+    width: 100%;
   }
 
   .calendar-header {
@@ -662,6 +654,7 @@ const create = () => {
 
       .date-calender {
         position: relative;
+        margin-bottom: 0;
 
         &::after {
           content: '';
@@ -778,7 +771,7 @@ const create = () => {
       .title-list {
         display: flex;
         align-items: center;
-        justify-content: flex-end;
+        justify-content: center;
         padding: 14px 24px;
         position: relative;
         height: 60px;

package/src/components/meeting/OMeetingForm.vue

@@ -21,7 +21,7 @@ import IconHelp from '~icons/meeting/icon-help.svg';
 import IconTip from '~icons/meeting/icon-tip.svg';
 import { MeetingFormPropsT, MeetingPostT, OptionItemT } from './types';
 import dayjs from 'dayjs';
-import { findLabelFromOptions, formatDateNumber, getDateNumber } from './utils';
+import { findLabelFromOptions, formatDateNumber, getDateNumber, getPlatformLabel } from './utils';
 import {
   EMAIL_REGEX,
   INTERVAL_DAY,
@@ -247,7 +247,7 @@ const getPlatformOptions = async () => {
     return;
   }
   const res = await props.getPlatformsRequest();
-  typeOptions.value = res.map((v) => ({ label: v, value: v }));
+  typeOptions.value = res.map((v) => ({ label: getPlatformLabel(v), value: v }));
   if (!props.data) {
     form.value.platform = typeOptions.value[0].value;
   }
@@ -474,7 +474,7 @@ defineExpose({
       <OFormItem :rules="rules.etherpad" label="Etherpad" field="etherpad" v-if="form.group_name">
         <template #label>
           <div class="label-wrapper">
-            <span>Etherpad&nbsp;</span>
+            <span>{{ t('meeting.etherpad') }}&nbsp;</span>
             <OPopover>
               <div class="o-meeting-form-popover-content etherpad">{{ t('meeting.etherpadDesc') }}</div>
               <template #target>

package/src/components/meeting/OMyMeetingCalendar.vue

@@ -833,14 +833,39 @@ const cancelActions = computed<DialogActionT[]>(() => {
     }
 
     .list-calendar {
-      width: 334px;
       flex-shrink: 0;
+      width: 334px;
+      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+
+      @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: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
         border-radius: var(--o-radius-xs);
+        background-color: transparent;
 
         .el-calendar__header {
           border-bottom: 1px solid var(--o-color-control4);
@@ -869,9 +894,6 @@ const cancelActions = 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;
@@ -979,31 +1001,6 @@ const cancelActions = 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;
-      }
     }
 
     .list-wrapper {
@@ -1024,11 +1021,15 @@ const cancelActions = computed<DialogActionT[]>(() => {
         .o-scrollbar-rail {
           right: -16px;
         }
+
+        .o-scrollbar {
+          height: 100%;
+        }
       }
 
       .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;
@@ -1357,7 +1358,7 @@ const cancelActions = 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 {

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

@@ -276,11 +276,8 @@ const computedList = computed(() => {
       }
 
       &.o-collapse-item-expanded {
-        @include respond-to('<=pad_v') {
-
-          .copy-icon {
-            display: inline-flex;
-          }
+        .copy-icon {
+          display: inline-flex;
         }
       }
     }
@@ -305,9 +302,9 @@ const computedList = computed(() => {
         padding: 12px 16px;
       }
 
-
       .o-collapse-item-title {
         flex-grow: 1;
+        margin-bottom: 0;
       }
 
 
@@ -333,7 +330,12 @@ const computedList = computed(() => {
     .jump-detail-link {
       padding-left: calc(var(--icon-right) + var(--icon-size2));
       margin-top: var(--o-gap-2);
-      @include text1;
+      color: var(--o-color-info2);
+      @include tip1;
+
+      &:hover {
+        color: var(--o-color-primary1);
+      }
 
       .o-icon {
         font-size: 16px;
@@ -362,7 +364,6 @@ const computedList = computed(() => {
 
       .o-icon {
         flex-shrink: 0;
-        padding: 2px;
         border-radius: 50%;
         overflow: hidden;
         color: var(--o-color-white);
@@ -378,6 +379,7 @@ const computedList = computed(() => {
 
       .text {
         display: block;
+        font-weight: 600;
         @include text-truncate(1);
       }
     }
@@ -390,6 +392,7 @@ const computedList = computed(() => {
       align-items: center;
       color: var(--o-color-info3);
       text-decoration: none;
+      font-weight: 400;
       @include tip1;
 
       .o-divider {