@opendesign-plus/components 0.0.1-rc.28 → 0.0.1-rc.29

package/src/components/events/OEventsList.vue

@@ -131,35 +131,50 @@ const list = computed(() => {
 
 <template>
   <div class="o-events-list">
-    <div class="filter-wrapper">
-      <div class="filter-left">
-        <span>{{ t('events.status') }}</span>
-        <ORadioGroup v-model="status" :style="{ '--radio-group-gap': '8px' }" @change="changeStatus">
-          <ORadio v-for="t in statusOptions" :key="t.value" :value="t.value">
-            <template #radio="{ checked }">
-              <OToggle :checked="checked">{{ t.label }}</OToggle>
+    <div class="filter-slot-wrapper">
+      <slot name="filter">
+        <div class="filter-wrapper">
+          <div class="filter-left">
+            <span>{{ t('events.status') }}</span>
+            <ORadioGroup v-model="status" :style="{ '--radio-group-gap': '8px' }" @change="changeStatus">
+              <ORadio v-for="t in statusOptions" :key="t.value" :value="t.value">
+                <template #radio="{ checked }">
+                  <OToggle :checked="checked">{{ t.label }}</OToggle>
+                </template>
+              </ORadio>
+            </ORadioGroup>
+          </div>
+          <OInput
+            size="large"
+            v-model="input"
+            :placeholder="t('events.searchPlaceholder')"
+            @pressEnter="changeKeyword"
+            @clear="changeKeyword"
+            clearable>
+            <template #prefix>
+              <OIcon class="input-icon">
+                <OIconSearch />
+              </OIcon>
             </template>
-          </ORadio>
-        </ORadioGroup>
-      </div>
-      <OInput
-        v-model="input"
-        :placeholder="t('events.searchPlaceholder')"
-        @pressEnter="changeKeyword"
-        @clear="changeKeyword"
-        clearable>
-        <template #prefix>
-          <OIcon class="input-icon">
-            <OIconSearch />
-          </OIcon>
-        </template>
-      </OInput>
+          </OInput>
+        </div>
+      </slot>
     </div>
     <div class="list-content">
       <OCard v-for="item in list" :key="item.name" :cover="item.cover" :href="item.link">
-        <OTag class="event-status">
-          {{ item.status === EventsStatusT.ING ? t('events.statusIng') : t('events.statusFinish') }}
-        </OTag>
+        <div class="tags-wrapper">
+          <template v-if="item.tags?.length">
+            <OTag v-for="tag in item.tags" :key="tag.title" size="medium">
+              <span>{{ tag.title }}</span>
+              <template #icon v-if="tag.icon">
+                <component :is="tag.icon"></component>
+              </template>
+            </OTag>
+          </template>
+          <OTag class="event-status">
+            {{ item.status === EventsStatusT.ING ? t('events.statusIng') : t('events.statusFinish') }}
+          </OTag>
+        </div>
         <div class="event-name">{{ item.name }}</div>
         <div class="event-desc">
           <div class="event-date">{{ item.dateStr }}</div>
@@ -188,19 +203,32 @@ const list = computed(() => {
 .o-events-list {
   --events-card-radius: var(--o-radius-xs);
   --events-tag-radius: var(--o-radius-xs);
-  .filter-wrapper {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: space-between;
+
+  .filter-slot-wrapper {
     background-color: var(--o-color-fill2);
     border-radius: var(--events-card-radius);
     padding: var(--o-gap-5) var(--o-gap-6);
     gap: var(--o-gap-3) var(--o-gap-2);
     @include text1;
-    @include respond('<=pad_v') {
+    @include respond('laptop') {
+      padding: var(--o-gap-4) var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      padding: var(--o-gap-4) var(--o-gap-5);
+    }
+    @include respond('pad_v') {
       padding: var(--o-gap-3) var(--o-gap-4);
     }
+    @include respond('phone') {
+      padding: var(--o-gap-3) var(--o-gap-4);
+    }
+  }
+
+  .filter-wrapper {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
     .filter-left {
       display: flex;
@@ -212,6 +240,12 @@ const list = computed(() => {
         flex-shrink: 0;
         margin-right: var(--o-gap-5);
         font-weight: 500;
+        @include respond('laptop') {
+          margin-right: var(--o-gap-4);
+        }
+        @include respond('pad_h') {
+          margin-right: var(--o-gap-3);
+        }
         @include respond('pad_v') {
           margin-right: var(--o-gap-4);
         }
@@ -219,7 +253,6 @@ const list = computed(() => {
           margin-right: var(--o-gap-4);
         }
       }
-
       .o-toggle {
         --toggle-size: 32px;
         --toggle-padding: 3px 15px;
@@ -253,6 +286,14 @@ const list = computed(() => {
       grid-template-columns: repeat(1, 1fr);
       container-type: inline-size;
     }
+    @include respond('laptop') {
+      margin-top: var(--o-gap-5);
+      gap: var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      margin-top: var(--o-gap-4);
+      gap: var(--o-gap-4);
+    }
     @include respond('pad_v') {
       margin-top: var(--o-gap-4);
       gap: var(--o-gap-3);
@@ -310,17 +351,29 @@ const list = computed(() => {
           margin-top: var(--o-gap-4);
         }
 
-        .event-status {
-          --tag-color: rgb(var(--o-white));
-          --tag-bg-color: rgba(var(--o-black), 0.25);
-          --tag-padding: var(--o-gap-1) var(--o-gap-3);
-          border: none;
+        .tags-wrapper {
           position: absolute;
           top: var(--o-gap-3);
           right: var(--o-gap-3);
-          border-radius: var(--events-tag-radius);
-          @include respond('<=pad_v') {
-            --tag-padding: var(--o-gap-1);
+          display: flex;
+          align-items: center;
+          column-gap: var(--o-gap-2);
+          flex-wrap: wrap;
+          justify-content: flex-end;
+          @include respond('phone') {
+            top: var(--o-gap-2);
+            right: var(--o-gap-2);
+          }
+
+          .o-tag {
+            --tag-color: rgb(var(--o-white));
+            --tag-bg-color: rgba(var(--o-black), 0.25);
+            --tag-padding: var(--o-gap-1) var(--o-gap-3);
+            border: none;
+            border-radius: var(--events-tag-radius);
+            @include respond('<=pad') {
+              --tag-padding: var(--o-gap-1);
+            }
           }
         }
 
@@ -351,6 +404,12 @@ const list = computed(() => {
           }
 
           @include text1;
+          @include respond('laptop') {
+            margin-top: var(--o-gap-4);
+          }
+          @include respond('pad_h') {
+            margin-top: var(--o-gap-3);
+          }
           @include respond('pad_v') {
             margin-top: var(--o-gap-2);
           }
@@ -382,6 +441,19 @@ const list = computed(() => {
     --pagination-item-bg-color-current: var(--o-color-primary1);
     --pagination-item-color-current: #fff;
 
+    @include respond('laptop') {
+      margin-top: var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      margin-top: var(--o-gap-4);
+    }
+    @include respond('pad_v') {
+      margin-top: var(--o-gap-4);
+    }
+    @include respond('phone') {
+      margin-top: var(--o-gap-4);
+    }
+
     .o-pagination-wrap {
       justify-content: flex-end;
     }

package/src/components/events/types.ts

@@ -55,6 +55,7 @@ export interface EventsCardItemT {
   cover?: string; // 卡片封面，如果不传递，组件内部通过date计算得出
   status?: EventsStatusT; // 事件状态，不传递，组件内部通过date计算得出
   link: string; // 跳转链接
+  tags?: { icon?: any; title: string }[];
 }
 
 

package/src/components/{OFooter.vue → footer/OFooter.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ODivider } from '@opensig/opendesign';
 
-import ContentWrapper from './common/ContentWrapper.vue';
+import ContentWrapper from '../common/ContentWrapper.vue';
 
 const props = withDefaults(defineProps<{
   simple: any;
@@ -34,9 +34,9 @@ const props = withDefaults(defineProps<{
       <ContentWrapper v-if="$slots.atom || props.atom">
         <slot name="atom">
           <div v-if="props.atom" class="atom">
-            <p class="atom-text">{{ props.atom[props.lang].title }}</p>
-            <a :href="props.atom[props.lang].href" target="_blank">
-              <img :src="props.atom[props.lang].img" class="atom-logo" alt="" />
+            <p class="atom-text">{{ props.atom[props.lang]?.title }}</p>
+            <a :href="props.atom[props.lang]?.href" target="_blank">
+              <img :src="props.atom[props.lang]?.img" class="atom-logo" alt="" />
             </a>
           </div>
           <ODivider class="atom-divider" />

package/src/components/footer/index.ts

@@ -0,0 +1,10 @@
+import _OFooter from './OFooter.vue';
+import type { App } from 'vue';
+
+const OFooter = Object.assign(_OFooter, {
+  install(app: App) {
+    app.component('OFooter', _OFooter);
+  },
+});
+
+export { OFooter };

package/src/components/header/index.ts

@@ -7,10 +7,12 @@ const OHeader = Object.assign(_OHeader, {
     app.component('OHeader', _OHeader);
   },
 });
+
 const OHeaderMobile = Object.assign(_OHeaderMobile, {
   install(app: App) {
     app.component('OHeaderMobile', _OHeaderMobile);
   },
 });
 
+export * from './types';
 export { OHeader, OHeaderMobile };

package/src/components/header/types.ts

@@ -35,6 +35,7 @@ export interface NavItemT {
   withPicture: boolean; // 快捷链接是否显示缩略图
   children: ChildrenItemT[]; // 导航子项
   shortcut: ShortcutItemT[]; // 右侧快捷链接
+  tag?: string; // 标签
 }
 
 export interface CodeItemT {

package/src/components/header-language-switcher/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderLanguageSwitcher from './OHeaderLanguageSwitcher.vue';
+import type { App } from 'vue';
+
+const OHeaderLanguageSwitcher = Object.assign(_OHeaderLanguageSwitcher, {
+  install(app: App) {
+    app.component('OHeaderLanguageSwitcher', _OHeaderLanguageSwitcher);
+  },
+});
+
+export { OHeaderLanguageSwitcher };

package/src/components/{OHeaderSearch.vue → header-search/OHeaderSearch.vue}

@@ -4,15 +4,15 @@ import { OIcon } from '@opensig/opendesign';
 import { onClickOutside, useDebounceFn } from '@vueuse/core';
 import { useScreen } from '@opendesign-plus/composables';
 
-import SearchImageInput from './search/internal/SearchImageInput.vue';
-import SearchPanel from './search/internal/SearchPanel.vue';
-import { useSearchHistory } from './search/composables/useSearchHistory';
+import SearchImageInput from '../search/internal/SearchImageInput.vue';
+import SearchPanel from '../search/internal/SearchPanel.vue';
+import { useSearchHistory } from '../search/composables/useSearchHistory';
 import { useI18n } from '@/i18n';
 import type {
   OSearchPayload,
   OSearchRecommendItem,
   OSearchUploadImageFn,
-} from './search/types';
+} from '../search/types';
 
 import IconSearch from '~icons/components/icon-header-search.svg';
 import IconBack from '~icons/components/icon-header-back.svg';

package/src/components/header-search/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderSearch from './OHeaderSearch.vue';
+import type { App } from 'vue';
+
+const OHeaderSearch = Object.assign(_OHeaderSearch, {
+  install(app: App) {
+    app.component('OHeaderSearch', _OHeaderSearch);
+  },
+});
+
+export { OHeaderSearch };

package/src/components/{OSourceCode.vue → header-source-code/OHeaderSourceCode.vue}

@@ -4,14 +4,14 @@ import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
 
 import IconChevronDown from '~icons/components/icon-chevron-down.svg';
 
-interface CodeItemT {
+export interface CodeItemT {
   label: string;
   href: string;
   icon?: string;
   target?: string;
 }
 
-interface CodePropsT {
+export interface CodePropsT {
   title?: string;
   options?: CodeItemT[];
   href?: string;

package/src/components/header-source-code/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderSourceCode from './OHeaderSourceCode.vue';
+import type { App } from 'vue';
+
+const OHeaderSourceCode = Object.assign(_OHeaderSourceCode, {
+  install(app: App) {
+    app.component('OHeaderSourceCode', _OHeaderSourceCode);
+  },
+});
+
+export { OHeaderSourceCode };

package/src/components/{OThemeSwitcher.vue → header-theme/OHeaderTheme.vue}

@@ -6,7 +6,7 @@ import { useScreen } from '@opendesign-plus/composables';
 import IconSun from '~icons/components/icon-sun.svg';
 import IconMoon from '~icons/components/icon-moon.svg';
 
-export interface OThemeSwitcherPropsT {
+export interface OHeaderThemePropsT {
   theme?: string;
   type?: 'auto' | 'common' | 'mobile';
   lightValue?: string;
@@ -14,12 +14,12 @@ export interface OThemeSwitcherPropsT {
   disabled?: boolean;
 }
 
-export interface OThemeSwitcherEmitsT {
+export interface OHeaderThemeEmitsT {
   (e: 'update:theme', value: string): void;
   (e: 'change', val: string): void;
 }
 
-const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
+const props = withDefaults(defineProps<OHeaderThemePropsT>(), {
   theme: 'light',
   type: 'auto',
   lightValue: 'light',
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
   disabled: false,
 });
 
-const emit = defineEmits<OThemeSwitcherEmitsT>();
+const emit = defineEmits<OHeaderThemeEmitsT>();
 
 const { gtPhone } = useScreen();
 

package/src/components/header-theme/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderTheme from './OHeaderTheme.vue';
+import type { App } from 'vue';
+
+const OHeaderTheme = Object.assign(_OHeaderTheme, {
+  install(app: App) {
+    app.component('OHeaderTheme', _OHeaderTheme);
+  },
+});
+
+export { OHeaderTheme };

package/src/components/{OHeaderUser.vue → header-user/OHeaderUser.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { OIcon, OBadge, ODropdown, ODropdownItem } from '@opensig/opendesign';
 
-import AppAvatar from './common/AppAvatar.vue';
+import AppAvatar from '../common/AppAvatar.vue';
 
 import IconAvatar from '~icons/components/icon-avatar-line.svg';
 import IconChevronDown from '~icons/components/icon-chevron-down.svg';
@@ -10,12 +10,12 @@ import { useScreen } from '@opendesign-plus/composables';
 
 const { lePadV } = useScreen();
 
-interface UserInfoT {
+export interface UserInfoT {
   photo: string;
   username: string;
 }
 
-interface OptionsItemT {
+export interface OptionsItemT {
   id: string; // id
   label: string; // 标题
   icon?: string; // icon
@@ -25,7 +25,7 @@ interface OptionsItemT {
   logout: boolean; // 是否是退出登录 item
 }
 
-interface UserPropsT {
+export interface UserPropsT {
   token?: string;
   lang?: string;
   noticeTotal?: number;

package/src/components/header-user/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderUser from './OHeaderUser.vue';
+import type { App } from 'vue';
+
+const OHeaderUser = Object.assign(_OHeaderUser, {
+  install(app: App) {
+    app.component('OHeaderUser', _OHeaderUser);
+  },
+});
+
+export { OHeaderUser };

package/src/components/meeting/OMeetingCalendar.vue

@@ -77,13 +77,12 @@ const isAutoClick = ref(false);
 const group = ref('');
 const getSummitData = async (date: string) => {
   if (props.getSummitListRequest) {
+    summitData.value = [];
     const list = await props.getSummitListRequest(date);
     summitData.value = (list || []).map((v: SummitItemT) => {
       return {
         ...v,
         type: CalendarDataType.SUMMIT,
-        start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
-        end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
       };
     });
   } else {
@@ -92,13 +91,12 @@ const getSummitData = async (date: string) => {
 };
 const getActivityData = async (date: string) => {
   if (props.getEventsListRequest) {
+    eventsData.value = [];
     const list = await props.getEventsListRequest(date);
     eventsData.value = (list || []).map((v: MeetingEventsItemT) => {
       return {
         ...v,
         type: CalendarDataType.EVENTS,
-        start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
-        end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
       };
     });
   } else {
@@ -132,6 +130,7 @@ const paramGetDaysData = async (params: { date: string; type: string }) => {
     return;
   }
   try {
+    meetingData.value = [];
     const res: MeetingItemT[] = await props.getMeetingListRequest(params.date, group.value, '');
     meetingData.value = res.map((v) => {
       return {
@@ -151,8 +150,8 @@ const paramGetDaysData = async (params: { date: string; type: string }) => {
 const renderData = computed(() => {
   return [
     ...meetingData.value,
-    ...eventsData.value.filter(v => (!dayjs(v.start_date).isAfter(dayjs(currentDay.value)) && !dayjs(currentDay.value).isAfter(dayjs(v.end_date))) || v.dates?.includes(currentDay.value)),
-    ...summitData.value.filter(v => v.dates?.includes(currentDay.value)),
+    ...eventsData.value,
+    ...summitData.value,
   ].filter((v) => {
     if (tabType.value === CalendarDataType.ALL) {
       return true;
@@ -307,6 +306,7 @@ defineExpose({
               </OIcon>
             </div>
             <OSelect
+              v-if="groups?.length > 0"
               v-model="group"
               :placeholder="t(groupType === MeetingGroupType.GROUP ? 'meeting.allGroups' : 'meeting.allSigs')"
               clearable
@@ -317,8 +317,8 @@ defineExpose({
           </div>
 
           <div class="right-title">
-            {{ t('meeting.latestMeeting') }}&nbsp;
-            <span>{{ dayjs(latestDay).format('YYYY/MM/DD') }}</span>
+            <span>{{ t('meeting.latestMeeting') }}&nbsp;</span>
+            <span>{{ formatDate(dayjs(latestDay)) }}</span>
           </div>
         </template>
         <template #date-cell="{ data }">
@@ -364,7 +364,7 @@ defineExpose({
       <div class="detail-list">
         <div class="current-day">
           {{ t('meeting.latestMeeting') }}&nbsp;
-          <span>{{ dayjs(currentDay).format('YYYY/MM/DD') }}</span>
+          <span>{{ formatDate(dayjs(currentDay)) }}</span>
         </div>
         <div class="right-title">
           <div class="title-list">
@@ -393,7 +393,11 @@ defineExpose({
           <OScroller class="meeting-list" show-type="hover" size="small" :style="{
             '--height': calendarHeight
           }">
-            <OMeetingCalendarList :list="renderData as unknown as MeetingItemT[]" :groupType="groupType">
+            <OMeetingCalendarList
+              :list="renderData as unknown as MeetingItemT[]"
+              :groupType="groupType"
+              :disableFormat="disableFormat"
+            >
               <template #empty>
                 <slot name="empty"></slot>
               </template>
@@ -463,6 +467,9 @@ defineExpose({
           align-items: center;
           justify-content: center;
           gap: var(--o-gap-6);
+          @include respond('<=pad') {
+            gap: var(--o-gap-4);
+          }
 
           .o-select {
             max-width: 240px;
@@ -489,7 +496,7 @@ defineExpose({
 
           .month-date {
             font-weight: 500;
-            margin: 0 var(--o-gap-1);
+            margin: 0;
           }
         }
 
@@ -619,16 +626,16 @@ defineExpose({
             display: flex;
             margin-top: 4px;
             color: var(--o-color-white);
-            height: 20px;
+            height: 16px;
 
             .o-icon {
               flex-shrink: 0;
               position: relative;
               border-radius: 50%;
-              padding: 2px;
               width: 16px;
               height: 16px;
-              font-size: 12px;
+              font-size: 14px;
+              padding: 1px;
               margin-left: -4px;
               margin-top: 0;
               @include respond('<=pad_v') {
@@ -845,13 +852,12 @@ defineExpose({
         justify-content: center;
         align-items: flex-end;
         height: 60px;
-      }
-
-      .o-tab {
-        .o-icon {
-          svg path {
-            fill: currentColor;
-          }
+        @include respond('pad_h') {
+          --tab-nav-gap: 24px;
+        }
+        
+        @include respond-to('pad_v') {
+          --tab-nav-justify: flex-end;
         }
 
         @include respond('pad_v-laptop') {
@@ -876,6 +882,11 @@ defineExpose({
           }
         }
 
+        .o-icon {
+          svg path {
+            fill: currentColor;
+          }
+        }
         .o-tab-nav-anchor {
           .o-tab-nav-anchor-line {
             width: 100%;