@opendesign-plus-test/components 0.0.1-rc.68 → 0.0.1-rc.69

package/src/components/meeting/OMeetingSigCalendar.vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick, watch } from 'vue';
-import { ODivider, OPopover, OIcon, OTabPane, OTab, OScroller } from '@opensig/opendesign';
-import { ElSelect, ElOption } from 'element-plus';
+import {
+  ODivider,
+  OPopover,
+  OIcon,
+  OTabPane,
+  OTab,
+  OScroller,
+  OSelect,
+  OOption,
+  OFigure,
+  OResult,
+} from '@opensig/opendesign';
 import dayjs from 'dayjs';
 import IconTips from '~icons/components/icon-tips.svg';
 import OMeetingSigAside from './components/OMeetingSigAside.vue';
@@ -10,6 +20,7 @@ import { useScreen } from '@opendesign-plus/composables';
 import { useMeetingConfig } from './composables/useMeetingConfig';
 import OMeetingCalendarList from '@/components/meeting/components/OMeetingCalendarList.vue';
 import { formatDate } from '@/components/meeting/utils.ts';
+import emptyImg from '@/assets/meeting/svg-icons/icon-empty.svg';
 
 const props = defineProps<{
   sigName: String;
@@ -34,7 +45,7 @@ const monthIdx = ref(-1);
 const clickDateCell2 = (date: string) => {
   clickDateCell(date);
 };
-const changeSelect = (v: string) => {
+const changeSelect = (v: any) => {
   clickDateCell(v);
 };
 // 获取所选日期的会议列表
@@ -79,15 +90,6 @@ const selectTab = () => {
   getDates();
 };
 
-watch(
-  () => lePadV.value,
-  () => {
-    if (lePadV.value) {
-      tabType.value = CalendarDataType.ALL;
-      selectTab();
-    }
-  },
-);
 // -------------------- 获取有会议的日期 --------------------
 
 const getMonthAndDay = (date: string) => {
@@ -284,16 +286,26 @@ const list = computed(() => {
       </OTab>
     </div>
     <template v-if="lePadV && dateList.length">
-      <div class="date-select">
-        <ElSelect v-model="selectDate" @change="changeSelect">
-          <template #label>{{ t('meeting.latestMeeting') }} {{ formatDate(selectDate) }}</template>
-          <ElOption
-            v-for="date in dateList"
-            :key="date"
-            :value="date"
-            :label="formatDate(date)"
-          />
-        </ElSelect>
+      <div class="phone-filter-wrapper">
+        <div class="date-select">
+          <OSelect v-model="selectDate" @change="changeSelect">
+            <OOption
+              v-for="date in dateList"
+              :key="date"
+              :value="date"
+              :label="formatDate(date)"
+            />
+          </OSelect>
+        </div>
+        <div>
+          <OTab v-model="tabType" @change="selectTab" :line="false" :max-show="9999">
+            <OTabPane v-for="item in meetingTabs.slice(0, -1)" :key="item.value" :value="item.value">
+              <template #nav>
+                {{ item.label }}
+              </template>
+            </OTabPane>
+          </OTab>
+        </div>
       </div>
     </template>
     <ODivider class="meeting-divider" v-if="!lePadV || (lePadV && dateList.length)" />
@@ -316,7 +328,14 @@ const list = computed(() => {
           :rows="calendarRows"
         >
           <template #empty>
-            <slot name="empty"></slot>
+            <slot name="empty">
+              <OResult class="empty-result">
+                <template #image>
+                  <OFigure class="img" :src="emptyImg" />
+                </template>
+                <template #description>{{ t('meeting.meetingEmptyText') }}</template>
+              </OResult>
+            </slot>
           </template>
         </OMeetingCalendarList>
       </OScroller>
@@ -335,8 +354,6 @@ const list = computed(() => {
   margin-top: var(--o-gap-5);
   @include respond('phone') {
     .meeting-card-header {
-      padding: var(--o-gap-3) var(--o-gap-4) 0;
-
       .el-input {
         flex-grow: 1;
       }
@@ -346,11 +363,44 @@ const list = computed(() => {
     }
   }
 
-  .date-select {
-    padding: var(--o-gap-4);
+  .phone-filter-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--o-gap-4);
+    padding: var(--o-gap-4) var(--o-gap-3) 0 var(--o-gap-3);
+    flex-wrap: nowrap;
+    @include respond('phone') {
+      flex-wrap: wrap;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--o-gap-2);
+    }
+
+    .date-select {
+      padding-bottom: var(--o-gap-2);
+      max-width: 240px;
+      @include respond('phone') {
+        max-width: 100%;
+        width: 100%;
+        padding-bottom: 0;
+      }
+
+      .o-select {
+        width: 100%;
+      }
+    }
+
+    .o-tab {
+      flex-shrink: 0;
+      --tab-text-height: calc(var(--tab-nav-text-height) + var(--o-gap-2) + 2px);
+      @include respond('phone') {
+        --tab-text-height: var(--tab-nav-text-height);
+      }
 
-    .o-select {
-      width: 100%;
+      .o-tab-head {
+        line-height: var(--tab-text-height);
+      }
     }
   }
 
@@ -358,7 +408,7 @@ const list = computed(() => {
     font-weight: 500;
     display: flex;
     align-items: center;
-    padding: var(--o-gap-3) var(--o-gap-6) 0;
+    padding: var(--o-gap-3) var(--o-gap-5) 0;
     @include text1;
     @include respond('<=pad') {
       padding: var(--o-gap-3) var(--o-gap-4) 0;
@@ -435,5 +485,14 @@ const list = computed(() => {
       height: auto;
     }
   }
+
+  .empty-result {
+    --result-image-width: 200px;
+    --result-image-height: 175px;
+
+    .o-result-description {
+      @include tip1;
+    }
+  }
 }
 </style>

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

@@ -95,19 +95,26 @@ const computedList = computed<any[]>(() => {
     let end_date_time = '';
     if (type !== CalendarDataType.MEETING) {
       let activity_type = activityTypeMap.value.get(v.activity_type)?.label;
+      const isSameDay = v.start_date && (v.start_date === v.end_date || !v.end_date);
       if (v.start_date) {
         dateRange = props.disableFormat ? v.start_date : formatDate(v.start_date);
       }
-      if (v.start) {
-        dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
-      }
-      if (v.end_date || v.end) {
-        dateRange += `${ dateRange ? ' -' : '' }`;
-        if (v.end_date && v.end_date !== v.start_date) {
-          dateRange += `${ dateRange ? ' ' : '' }${ props.disableFormat ? v.end_date : formatDate(v.end_date) }`;
+      if (isSameDay) {
+        if (v.start) {
+          dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
+          if (v.end) {
+            dateRange += `${ dateRange ? ' - ' : '' }${ v.end }`;
+          }
         }
-        if (v.end) {
-          dateRange += `${ dateRange ? ' ' : '' }${ v.end }`;
+      } else {
+        if (v.start) {
+          dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
+        }
+        if (v.end_date) {
+          dateRange += `${ dateRange ? ' - ' : '' }${ props.disableFormat ? v.end_date : formatDate(v.end_date) }`;
+          if (v.end) {
+            dateRange += `${ dateRange ? ' ' : '' }${ v.end }`;
+          }
         }
       }
       if (v.start_date) {
@@ -120,7 +127,7 @@ const computedList = computed<any[]>(() => {
         end_date_time = props.disableFormat ? v.end_date : formatDate(v.end_date);
       }
       if (v.end) {
-        end_date_time += `${ start_date_time ? ' ' : '' }${ v.end }`;
+        end_date_time += `${ end_date_time ? ' ' : '' }${ v.end }`;
       }
 
       return {
@@ -146,9 +153,9 @@ const computedList = computed<any[]>(() => {
     } = v;
     dateRange = props.disableFormat ? date : formatDate(date);
     if (start && end) {
-      dateRange += `${ dateRange ? ' ' : '' } ${ start } - ${ end }`;
+      dateRange += `${ dateRange ? ' ' : '' }${ start } - ${ end }`;
     } else if (start || end) {
-      dateRange += `${ dateRange ? ' ' : '' } ${ start || end }`;
+      dateRange += `${ dateRange ? ' ' : '' }${ start || end }`;
     }
     if (is_cycle) {
       dateRange = `${ props.disableFormat ? cycle_start_date : formatDate(cycle_start_date) } - ${ props.disableFormat ? cycle_end_date : formatDate(cycle_end_date) }`;
@@ -423,7 +430,13 @@ const computedList = computed<any[]>(() => {
         align-items: center;
         justify-content: center;
         gap: var(--o-gap-4);
-        padding-right: var(--o-gap-5);
+        padding-right: var(--o-gap-4);
+        @include respond('laptop') {
+          padding-right: var(--o-gap-3);
+        }
+        @include respond('<=pad') {
+          padding-right: var(--o-gap-2);
+        }
 
         .meet-title-left {
           flex-grow: 1;
@@ -431,11 +444,18 @@ const computedList = computed<any[]>(() => {
         }
 
         .copy-icon {
+          font-size: 24px;
           flex-shrink: 0;
           display: inline-flex;
           opacity: 0;
           visibility: hidden;
           color: var(--o-color-info1);
+          @include respond('<=laptop') {
+            font-size: 20px;
+          }
+          @include respond('<=pad_v') {
+            font-size: 24px;
+          }
 
           &:hover {
             color: var(--o-color-primary1);

package/src/components/meeting/components/OMeetingDetail.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
 }>();
 const { t, getPlatformLabel } = useMeetingConfig();
 const { locale } = useI18n();
-const isZh = computed(() => locale.value === 'zh');
+const isEn = computed(() => locale.value === 'en');
 // 会议详情配置
 const infoList = computed(() =>
   [
@@ -92,13 +92,24 @@ const columns = computed<ColumnItemT[]>(() => {
 
 const domRef = ref([]);
 const SPLIT_MARK = '|';
+
+const titleMap = ref<Record<CalendarDataType, string>>({
+  [CalendarDataType.ALL]: t('meeting.meetingTopic'),
+  [CalendarDataType.MEETING]: t('meeting.meetingTopic'),
+  [CalendarDataType.EVENTS]: t('meeting.eventsTitle'),
+  [CalendarDataType.APPROVAL]: t('meeting.eventsTitle'),
+  [CalendarDataType.SUMMIT]: t('meeting.summitTitle'),
+});
 // 复制会议内容
 const copyInfo = () => {
   try {
-    const colon = isZh.value ? '：' : ': ';
-    let text = `${ t('meeting.meetingTopic') }${ colon }${ props.data.topic || props.data.name || props.data.title }\n`;
+    const colon = !isEn.value ? '：' : ': ';
+    let text = `${ titleMap.value[props.data.type] ?? t('meeting.meetingTopic') }${ colon }${ props.data.topic || props.data.name || props.data.title }\n`;
     text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => {
-      return `${ pre }${ cur.textContent ? cur.textContent.replace(SPLIT_MARK, colon) : '' }\n`;
+      if (cur.textContent) {
+        return `${ pre }${ cur.textContent ? cur.textContent.replace(SPLIT_MARK, colon) : '' }\n`;
+      }
+      return pre;
     }, '');
     navigator.clipboard.writeText(text);
     return Promise.resolve();
@@ -122,6 +133,7 @@ defineExpose({ copyInfo });
         'is-empty':!getField(info.key)?.length,
         [`label-item_${data.id}`]: true,
         [`type_${data.type}`]: true,
+        'is-en': isEn,
       }"
     >
       <template v-if="getField(info.key) && !info.isRecord">
@@ -190,6 +202,12 @@ defineExpose({ copyInfo });
       }
     }
 
+    &.is-en {
+      .label {
+        width: 6em;
+      }
+    }
+
     .label {
       width: 4em;
       flex-shrink: 0;

package/src/components/meeting/components/OMeetingSigAside.vue

@@ -80,7 +80,7 @@ const changeMonth = (step: number) => {
 .o-sig-meeting-aside {
   width: 35%;
   flex-shrink: 0;
-  padding: var(--o-gap-4);
+  padding: var(--o-gap-4) var(--o-gap-5);
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--o-color-control4);
@@ -91,7 +91,7 @@ const changeMonth = (step: number) => {
     border-right: none;
   }
   @include respond('phone') {
-    padding: 16px;
+    padding: var(--o-gap-4);
     .title {
       margin-bottom: var(--o-gap-2);
     }
@@ -139,6 +139,7 @@ const changeMonth = (step: number) => {
           font-weight: 500;
           margin-bottom: var(--o-gap-1);
           color: var(--o-color-info1);
+          @include tip1;
         }
 
         .day-c {
@@ -147,9 +148,9 @@ const changeMonth = (step: number) => {
           flex-wrap: nowrap;
 
           .o-icon {
-            width: 20px;
-            height: 20px;
-            font-size: 18px;
+            width: 16px;
+            height: 16px;
+            font-size: 14px;
             padding: 1px;
             line-height: 1em;
             position: relative;

package/src/i18n/en.ts

@@ -147,6 +147,8 @@ export default {
   'meeting.activityAddress': 'Address',
   'meeting.livePlatform': 'Live Platform',
   'meeting.meetingTopic': 'Topics',
+  'meeting.eventsTitle': 'Name',
+  'meeting.summitTitle': 'Name',
   'meeting.meetingDetail': 'Details',
   'meeting.meetingEtherpad': 'Etherpad',
   'meeting.meetingReplay': 'Playback',

package/src/i18n/zh.ts

@@ -146,6 +146,8 @@ export default {
   'meeting.activityAddress': '活动地点',
   'meeting.livePlatform': '直播平台',
   'meeting.meetingTopic': '会议主题',
+  'meeting.eventsTitle': '活动名称',
+  'meeting.summitTitle': '峰会名称',
   'meeting.meetingDetail': '会议详情',
   'meeting.meetingEtherpad': '会议纪要',
   'meeting.meetingReplay': '智能回放',

package/src/assets/meeting/svg-icons/icon-empty_dark.svg

@@ -1,49 +0,0 @@
-<svg width="320.000000" height="280.000000" viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<defs>
-		<clipPath id="clip832_47109">
-			<rect id="空内容" width="320.000000" height="280.000000" fill="white" fill-opacity="0"/>
-		</clipPath>
-		<linearGradient x1="160.000000" y1="203.999634" x2="160.000000" y2="250.525574" id="paint_linear_832_47113_0" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#418CFF" stop-opacity="0.200000"/>
-			<stop offset="1.000000" stop-color="#418CFF" stop-opacity="0.000000"/>
-		</linearGradient>
-	</defs>
-	<g clip-path="url(#clip832_47109)">
-		<mask id="mask832_47110" mask-type="alpha" maskUnits="userSpaceOnUse" x="0.000000" y="0.000000" width="320.000000" height="280.000000">
-			<rect id="蒙版" width="320.000000" height="280.000000" fill="#D8D8D8" fill-opacity="1.000000"/>
-			<rect id="蒙版" x="0.500000" y="0.500000" width="319.000000" height="279.000000" stroke="#979797" stroke-opacity="0" stroke-width="1.000000"/>
-		</mask>
-		<g mask="url(#mask832_47110)">
-			<path id="形状结合" d="M82.5635 204C16.7947 217.145 -29 246.52 -29 280.648L349 280.648C349 246.52 303.205 217.145 237.437 204C235.692 207.917 231.765 210.648 227.2 210.648L92.8 210.648C88.2349 210.648 84.3079 207.917 82.5635 204Z" clip-rule="evenodd" fill="url(#paint_linear_832_47113_0)" fill-opacity="1.000000" fill-rule="evenodd"/>
-		</g>
-		<g mask="url(#mask832_47110)">
-			<g opacity="0.800000">
-				<g opacity="0.400000">
-					<path id="形状结合备份 2" d="M238.41 123.892L81.6099 123.892L81.6099 199.492C81.6099 205.678 86.6243 210.692 92.8098 210.692L227.21 210.692C233.396 210.692 238.41 205.678 238.41 199.492L238.41 123.892ZM185.2 147.692L134.8 147.692C131.707 147.692 129.2 150.2 129.2 153.292C129.2 156.385 131.707 158.892 134.8 158.892L185.2 158.892C188.293 158.892 190.8 156.385 190.8 153.292C190.8 150.2 188.293 147.692 185.2 147.692Z" clip-rule="evenodd" fill="#418CFF" fill-opacity="1.000000" fill-rule="evenodd"/>
-				</g>
-				<g opacity="0.500000">
-					<path id="形状结合备份 3" d="M101.21 79.0912L218.81 79.0912L238.41 123.891L218.8 123.891L218.8 79.0925L101.209 79.0925L101.21 79.0912ZM101.2 79.1135L81.6099 123.891L101.2 123.891L101.2 101.492L101.2 79.1135Z" clip-rule="evenodd" fill="#418CFF" fill-opacity="1.000000" fill-rule="evenodd"/>
-				</g>
-				<g opacity="0.600000">
-					<rect id="矩形备份 2" x="101.209961" y="79.092285" width="117.599998" height="44.799999" fill="#418CFF" fill-opacity="1.000000"/>
-				</g>
-				<g opacity="0.500000">
-					<path id="路径 8备份" d="M141.41 53.84L150.21 49.68L118.01 30.09L121.36 61.06L130.58 57.2L137.3 65.09L137.3 55.39L123.04 36.7L141.41 53.84Z" fill="#418CFF" fill-opacity="1.000000" fill-rule="evenodd"/>
-				</g>
-				<g opacity="0.500000">
-					<path id="路径 9备份" d="M137.1 69.36L137.08 69.34C137.05 69.05 137.25 68.79 137.55 68.76C137.84 68.73 138.1 68.93 138.13 69.23L138.12 69.25L137.62 69.31L164.2 97.36C162.45 98.04 160.51 98.43 158.38 98.43C141.01 98.43 137.7 70.16 137.61 69.31L137.1 69.36ZM167.76 95.4C166.68 96.19 165.49 96.85 164.2 97.36L195.59 130.5C195.49 130.6 195.43 130.74 195.43 130.89C195.43 131.19 195.67 131.42 195.97 131.42L195.99 131.4L195.98 130.89C207.36 130.74 224.93 106.21 188.78 102.28C179.4 101.26 172.54 98.67 167.76 95.4ZM167.76 95.4C154.13 86.07 157.47 71.22 167.51 71.42C178.24 71.63 177.32 88.38 167.76 95.4Z" fill="#D8D8D8" fill-opacity="0" fill-rule="evenodd"/>
-					<path id="路径 9备份" d="M137.61 69.29C137.61 69.29 140.74 98.43 158.38 98.43C176.02 98.43 181.08 71.68 167.51 71.42C153.94 71.15 152.62 98.34 188.78 102.28C224.95 106.21 207.34 130.76 195.96 130.89" stroke="#418CFF" stroke-opacity="0.800000" stroke-width="1.062340" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="4.24936 4.24936"/>
-				</g>
-				<g opacity="0.300000">
-					<path id="路径-14备份" d="M263.56 176.16C262.39 178.17 261.51 179.39 260.94 179.81C259.29 181.01 257.77 181.34 256.73 181.4C254.34 181.52 259.23 180.69 260.87 178.65C261.97 177.29 263.25 175.25 264.7 172.53L263.38 172.6L262.01 174.52C261.52 173.96 260.91 173.7 260.19 173.74C259.1 173.8 256.31 174.42 255.39 177.56C254.78 179.65 253.4 181.53 251.24 183.21C254.56 184.69 257.7 184.52 260.66 182.72C263.62 180.91 264.58 178.72 263.56 176.16Z" fill="#418CFF" fill-opacity="1.000000" fill-rule="evenodd"/>
-				</g>
-				<g opacity="0.300000">
-					<path id="路径-14备份" d="M70.75 101.63C68.76 105.14 67.27 107.27 66.29 108.01C63.5 110.11 60.91 110.69 59.14 110.78C55.08 110.99 63.39 109.54 66.18 105.98C68.04 103.6 70.21 100.03 72.68 95.28L70.42 95.4L68.1 98.75C67.27 97.77 66.23 97.32 65 97.38C63.15 97.48 58.41 98.57 56.86 104.05C55.82 107.71 53.48 111 49.82 113.93C55.46 116.53 60.8 116.25 65.82 113.1C70.85 109.94 72.49 106.12 70.75 101.63Z" fill="#418CFF" fill-opacity="1.000000" fill-rule="evenodd"/>
-				</g>
-				<g opacity="0.300000">
-					<path id="路径" d="M281.54 142.79C281.93 142.77 282.25 143.07 282.27 143.45C282.74 153.32 277.51 160.9 266.71 166.14C266.36 166.31 265.94 166.16 265.78 165.81C265.61 165.47 265.75 165.05 266.1 164.88C276.43 159.87 281.31 152.78 280.87 143.52C280.85 143.13 281.15 142.81 281.54 142.79Z" fill="#418CFF" fill-opacity="1.000000" fill-rule="evenodd"/>
-				</g>
-			</g>
-		</g>
-	</g>
-</svg>