@opendesign-plus/components 0.0.1-rc.18 → 0.0.1-rc.19

package/src/components/header/components/HeaderNavMobile.vue

@@ -0,0 +1,377 @@
+<script lang="ts" setup>
+import { ref, onMounted, watch } from 'vue';
+import { OIcon, OTag } from '@opensig/opendesign';
+
+import { type NavMobileItemT, NavType } from '../types.ts';
+
+export interface OHeaderEmitsT {
+  (e: 'on-click'): void;
+  (e: 'handle-click', val: any): void;
+}
+const emit = defineEmits<OHeaderEmitsT>();
+
+const props = withDefaults(defineProps<NavMobileItemT>(), {
+  menuShow: false,
+  navData: () => [],
+  codeData: () => [],
+  langData: () => [],
+});
+
+const navActive = ref('');
+const navInfo = ref({});
+
+const handleNavClick = (item: any, val?: string) => {
+  if (val === NavType.NAV) {
+    if (item?.children?.length) {
+      navActive.value = item.id;
+      navInfo.value = item;
+    } else {
+      emit('handle-click', item);
+    }
+  } else if (val === NavType.CODE) {
+    navActive.value = val;
+    navInfo.value = props.codeData.list;
+  } else if (val === NavType.LANG) {
+    navActive.value = val;
+    navInfo.value = props.langData.list;
+  }
+};
+
+const onClick = (url: string, target?: string) => {
+  window.open(url, target ? target : '_self');
+  emit('on-click');
+};
+
+const onClickNav = (val: any) => {
+  if (navActive.value === NavType.CODE) {
+    onClick(val.href, val?.target);
+  }
+};
+
+onMounted(() => {
+  navActive.value = props.navData[0].id;
+  navInfo.value = props.navData[0];
+});
+
+watch(
+  () => props.navData || props.codeData || props.langData,
+  () => {
+    if (navActive.value === NavType.CODE) {
+      navInfo.value = props.codeData.list;
+    } else if (navActive.value === NavType.LANG) {
+      navInfo.value = props.langData.list;
+    } else {
+      navInfo.value = props.navData.find((item) => item.id === navActive.value);
+    }
+  },
+  {
+    deep: true,
+  }
+);
+</script>
+
+<template>
+  <div class="header-nav" :class="{ active: menuShow }">
+    <div class="o-nav">
+      <ul class="o-nav-list">
+        <li
+          v-for="item in navData"
+          :key="item.id"
+          :class="{
+            active: navActive === item.id,
+          }"
+        >
+          <span @click="handleNavClick(item, 'nav')">{{ item.label }}</span>
+        </li>
+      </ul>
+      <div class="nav-aside">
+        <ul v-if="navActive !== 'code' && navActive !== 'lang'" class="nav-aside-wrapper">
+          <li v-for="item in navInfo.children" :value="item.label" :key="item.label" class="nav-aside-content">
+            <template v-if="item?.children">
+              <p class="content-label">{{ item.label }}</p>
+              <div class="container-mobile">
+                <div v-for="subItem in item?.children" :key="subItem.label" class="content-container-mobile">
+                  <a @click="onClick(subItem.href, subItem?.target)" rel="noopener noreferrer" class="content-subtitle">
+                    <span class="item-label">{{ subItem.label }}</span>
+                    <OIcon v-if="subItem.icon">
+                      <component :is="subItem.icon" class="icon" />
+                    </OIcon>
+                    <OTag v-if="subItem.tag" round="pill" color="danger" size="small" class="content-tag">{{ subItem.tag }}</OTag>
+                  </a>
+                  <div class="desc-container">
+                    <p class="item-desc">{{ subItem.description }}</p>
+                  </div>
+                </div>
+              </div>
+            </template>
+            <template v-else>
+              <a @click="onClick(item.href, item?.target)" rel="noopener noreferrer" class="content-subtitle item-not-children">
+                <span class="item-label">{{ item.label }}</span>
+                <OIcon v-if="item.icon">
+                  <component :is="item.icon" class="icon" />
+                </OIcon>
+                <OTag v-if="item.tag" round="pill" color="danger" size="small">{{ item.tag }}</OTag>
+              </a>
+            </template>
+          </li>
+        </ul>
+        <div v-else class="nav-aside-wrapper">
+          <a v-for="item in navInfo" :key="item.label" @click="onClickNav(item)" class="source-code-item">
+            <span>{{ item.label }}</span>
+            <OIcon v-if="item.icon">
+              <component :is="item.icon" class="icon" />
+            </OIcon>
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- 移动端 tool -->
+    <div class="header-tool">
+      <!-- 源码 -->
+      <div
+        v-if="codeData"
+        class="header-tool-item"
+        @click="handleNavClick(null, 'code')"
+        :class="{
+          active: navActive === 'code',
+        }"
+      >
+        {{ codeData.label }}
+      </div>
+      <div
+        v-if="langData"
+        class="header-tool-item"
+        @click="handleNavClick(null, 'lang')"
+        :class="{
+          active: navActive === 'lang',
+        }"
+      >
+        {{ langData.label }}
+      </div>
+      <!-- 语言 -->
+      <div v-if="$slots.tool" class="other-tool">
+        <slot name="tool"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@mixin nav-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  color: var(--o-color-info1);
+
+  &.active {
+    color: var(--o-color-primary1);
+    background: var(--o-color-fill2);
+    font-weight: 500;
+  }
+}
+
+.header-nav {
+  flex: 1;
+  justify-content: space-between;
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+  background-color: var(--o-color-fill2);
+  transform: translateX(-130%);
+
+  transition-duration: 0.333s;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.5, 0, 0.84, 0.25);
+  display: block;
+  opacity: 0;
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(0);
+  }
+}
+
+.o-nav {
+  height: 100%;
+  position: relative;
+  width: 99px;
+  background: var(--o-color-fill1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .o-nav-list {
+    padding: 0;
+    margin: 0;
+    height: auto;
+
+    > li {
+      position: relative;
+      text-align: center;
+      @include text2;
+      @include nav-item;
+    }
+  }
+}
+
+.nav-aside {
+  position: fixed;
+  background-color: var(--o-color-fill2);
+  top: 0;
+  left: 0;
+  width: calc(100% - 99px);
+  transform: translateX(99px);
+  height: 100%;
+  z-index: 190;
+  .nav-aside-wrapper {
+    overflow-y: auto;
+    padding: 16px 12px 32px;
+    height: 100%;
+    .nav-aside-content {
+      display: block;
+      flex: 0 1 auto;
+
+      & + .nav-aside-content {
+        position: relative;
+        padding-top: var(--o-gap-3);
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          width: 100%;
+          height: 1px;
+          background-color: rgba(var(--o-mixedgray-14), 0.1);
+        }
+      }
+      .content-label {
+        color: var(--o-color-info3);
+        @include text2;
+      }
+
+      .item-not-children {
+        margin-bottom: 12px;
+        display: flex;
+        align-items: center;
+        .o-tag {
+          margin-left: var(--o-gap-2);
+          --layout-pkg-radius: 100vh;
+        }
+        .o-icon {
+          margin-left: var(--o-gap-2);
+        }
+      }
+    }
+
+    .source-code-item {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      color: var(--o-color-info1);
+
+      &.active {
+        color: var(--o-color-primary1);
+      }
+
+      & + .source-code-item {
+        border-top: 1px solid var(--o-color-control4);
+      }
+
+      .icon {
+        margin-left: var(--o-gap-2);
+      }
+    }
+
+    &::-webkit-scrollbar-track {
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background: var(--o-color-control1);
+    }
+  }
+
+  .container-mobile {
+    @include text2;
+
+    .o-icon {
+      --icon-size: 16px;
+      margin-left: var(--o-gap-2);
+    }
+  }
+
+  .content-container-mobile {
+    margin-top: var(--o-gap-3);
+
+    &:first-child {
+      margin-top: 8px;
+    }
+    &:last-child {
+      margin-bottom: 12px;
+    }
+
+    .content-subtitle {
+      color: var(--o-color-info1);
+      display: flex;
+      align-items: center;
+      @include text2;
+    }
+
+    .content-tag {
+      margin-left: var(--o-gap-2);
+      --layout-pkg-radius: var(--o-radius-xs);
+    }
+
+    .desc-container {
+      overflow: hidden;
+      position: relative;
+
+      .item-desc {
+        color: var(--o-color-info2);
+        margin-top: var(--o-gap-1);
+        text-align: justify;
+        word-break: normal;
+        @include tip1;
+        @include text-truncate(2);
+        @include respond-to('phone') {
+          @include text1;
+        }
+      }
+    }
+  }
+}
+
+.header-tool {
+  position: absolute;
+  bottom: 36px;
+  left: 0;
+  width: 99px;
+
+  display: flex;
+  height: auto;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.header-tool-item {
+  width: 99px;
+  @include nav-item;
+  @include tip1;
+  @include respond-to('phone') {
+    @include text1;
+  }
+}
+.other-tool {
+  width: 99px;
+  margin-top: 8px;
+  text-align: center;
+}
+</style>

package/src/components/header/index.ts

@@ -1,16 +1,16 @@
 import _OHeader from './OHeader.vue';
-import _OHeaderMoblie from './OHeaderMoblie.vue';
+import _OHeaderMobile from './OHeaderMobile.vue';
 import type { App } from 'vue';
 
 const OHeader = Object.assign(_OHeader, {
   install(app: App) {
-    app.component('OEventsCalendar', _OHeader);
+    app.component('OHeader', _OHeader);
   },
 });
-const OHeaderMoblie = Object.assign(_OHeaderMoblie, {
+const OHeaderMobile = Object.assign(_OHeaderMobile, {
   install(app: App) {
-    app.component('OEventsList', _OHeaderMoblie);
+    app.component('OHeaderMobile', _OHeaderMobile);
   },
 });
 
-export { OHeader, OHeaderMoblie };
+export { OHeader, OHeaderMobile };

package/src/components/header/types.ts

@@ -0,0 +1,91 @@
+type tagT = 'HOT' | 'NEW';
+
+export enum NavType {
+  NAV = 'nav',
+  CODE = 'code',
+  LANG = 'lang',
+}
+
+export interface ChildrenItemT {
+  label: string; // 标题
+  description?: string; // 描述
+  href?: string; // 链接
+  tag?: tagT; // 标签
+  children?: ChildrenItemT[];
+}
+
+export interface ShortcutItemT {
+  label: string; // 标题
+  description?: string; // 描述
+  picture?: string; // 缩略图
+  href?: string; // 链接
+  tag?: tagT; // 标签
+  remark?: string; // 时间
+  type?: string; // 类型
+}
+
+export interface NavItemT {
+  label: string; // 标题
+  id: string; // id
+  href?: string; // 链接
+  withPicture: boolean; // 快捷链接是否显示缩略图
+  children: ChildrenItemT[]; // 导航子项
+  shortcut: ShortcutItemT[]; // 右侧快捷链接
+}
+
+export interface CodeItemT {
+  label: string; // 标题
+  href: string; // 链接
+  icon?: string; // icon
+}
+
+export interface LangItemT {
+  id: string; // id
+  label: string; // 全称
+  simple: string; // 简写
+}
+
+export interface CodeT {
+  label: string; // 标题
+  list: CodeItemT[]; // 代码仓数据
+}
+
+export interface LangT {
+  label: string; // 标题
+  list: LangItemT[]; // 语言数据
+}
+
+export interface NavT {
+  logo: string; // 社区logo
+  community: string; // 社区 openEuler/openUBMC/mindspore
+  navData: NavItemT[];
+  bgLeft?: string; // 导航左侧背景插图
+  bgRight?: string; // 导航右侧背景插图
+  activeIndex: string | number; // 激活态
+  codeData?: CodeT[]; // 导航右侧代码仓数据
+  langData?: LangT[]; // 导航右侧语言数据
+  isSimpleHeader?: boolean; // 移动端二级导航
+  headerTitle?: string; // 移动端二级标题
+}
+
+export interface NavLiT {
+  navData: NavItemT[];
+  activeIndex: string | number; // 激活态
+  hoverId: string | number; // hover态
+}
+
+export interface NavLiItemT {
+  itemData: NavItemT;
+  itemVisible: boolean; // 下拉面板
+  community: string; // 社区 openEuler/openUBMC/mindspore
+  bgLeft?: string; // 导航左侧背景插图
+  bgRight?: string; // 导航右侧背景插图
+  hoverIndex: string | number; // hover态
+}
+
+export interface NavMobileItemT {
+  menuShow: boolean; // 展开导航
+  navData: NavItemT[];
+  codeData?: CodeT[]; // 导航右侧代码仓数据
+  langData?: LangT[]; // 导航右侧语言数据
+}

package/src/components/meeting/OMeetingCalendar.vue

@@ -19,7 +19,7 @@ import IconSummit from '~icons/meeting/icon-summit.svg';
 import IconMeeting from '~icons/meeting/icon-meet.svg';
 import { Locales } from '@/i18n';
 import { useMeetingConfig } from './composables/useMeetingConfig';
-import { CalendarDataType, GroupItemT, MeetingCalendarPropsT, MeetingGroupType } from './types.ts';
+import { CalendarDataType, MeetingCalendarPropsT, MeetingGroupType } from './types.ts';
 import { formatDate } from './utils.ts';
 import { useDebounceFn } from '@vueuse/core';
 
@@ -29,8 +29,8 @@ const props = withDefaults(defineProps<MeetingCalendarPropsT>(), {
   hiddenEvents: false,
   hiddenSummit: false,
   groupType: MeetingGroupType.SIG,
+  groups: () => [],
 });
-
 const { t, locale, meetingTabs, getConfig } = useMeetingConfig();
 const isEn = computed(() => locale.value === Locales.EN);
 
@@ -67,8 +67,7 @@ const isLimit = ref(false);
 const currentDay = ref('');
 const isAutoClick = ref(false);
 // sig组列表
-const sig = ref('');
-const sigOptions = ref<GroupItemT[]>([]);
+const group = ref('');
 const getSummitData = async (date) => {
   if (props.getSummitListRequest) {
     const list = await props.getSummitListRequest(date);
@@ -76,7 +75,7 @@ const getSummitData = async (date) => {
       return {
 
         ...v,
-        type: 'summit',
+        type: CalendarDataType.SUMMIT,
       };
     });
   } else {
@@ -89,7 +88,7 @@ const getActivityData = async (date) => {
     eventsData.value = (list || []).map(v => {
       return {
         ...v,
-        type: 'activity',
+        type: CalendarDataType.EVENTS,
         start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
         end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
       };
@@ -101,7 +100,7 @@ const getActivityData = async (date) => {
 
 const getDateList = async (date) => {
   if (props.getDateListRequest) {
-    props.getDateListRequest(date).then(res => {
+    props.getDateListRequest(date, group.value || '').then(res => {
       dateList.value = res;
     });
   }
@@ -125,7 +124,7 @@ const paramGetDaysData = async (params: { date: string; type: string }) => {
     return;
   }
   try {
-    const res = await props.getMeetingListRequest(params.date, sig.value);
+    const res = await props.getMeetingListRequest(params.date, group.value, '');
     meetingData.value = res.map((v) => {
       return {
         ...v,
@@ -136,11 +135,6 @@ const paramGetDaysData = async (params: { date: string; type: string }) => {
     }).sort((a: any, b: any) => {
       return parseInt((a.start || a.cycle_start)?.replace(':', '')) - parseInt(b.end || b.cycle_end?.replace(':', ''));
     });
-
-    sigOptions.value = [...new Set(meetingData.value.map((v) => v.group_name))].map((v) => ({ group_name: v }));
-    if (!sigOptions.value.find((v) => v.group_name === sig.value)) {
-      sig.value = '';
-    }
   } catch {
     meetingData.value = [];
   }
@@ -148,7 +142,7 @@ const paramGetDaysData = async (params: { date: string; type: string }) => {
 
 const renderData = computed(() => {
   return [
-    ...meetingData.value.filter((v) => !sig.value || v.group_name === sig.value),
+    ...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)),
   ].filter((v) => {
@@ -186,20 +180,6 @@ const getDateData = async (day?: string) => {
   });
 };
 
-watch([() => tabType.value, () => tabs.value], () => {
-  selectTab();
-});
-
-// 活动会议筛选
-function selectTab() {
-  nextTick(() => {
-    paramGetDaysData({
-      date: currentDay.value,
-      type: tabType.value,
-    });
-  });
-}
-
 const changeMeetingDay = useDebounceFn((day: string, event?: Event) => {
   if (isAutoClick.value) {
     isAutoClick.value = false;
@@ -222,6 +202,15 @@ const selectDate = (val: string, date: string) => {
   calendar.value.selectDate(val);
   changeMeetingDay(formatDate(calendar.value.selectedDay));
 };
+const changeGroup = () => {
+  nextTick(() => {
+    paramGetDaysData({
+      date: currentDay.value,
+      type: tabType.value,
+    });
+    getDateList(currentDay.value);
+  });
+};
 
 const removeLeadingZero = (str: string) => {
   // 使用正则表达式匹配以 0 开头的字符串，然后去除开头的 0
@@ -302,11 +291,12 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
               </OIcon>
             </div>
             <OSelect
-              v-model="sig"
-              :placeholder="groupType === MeetingGroupType.GROUP ? t('meeting.allGroups') : t('meeting.allSigs')"
+              v-model="group"
+              :placeholder="t(groupType === MeetingGroupType.GROUP ? 'meeting.allGroups' : 'meeting.allSigs')"
               clearable
+              @change="changeGroup"
             >
-              <OOption v-for="t in sigOptions" :value="t.group_name" :key="t.group_name">{{ t.group_name }}</OOption>
+              <OOption v-for="t in groups" :value="t" :key="t">{{ t }}</OOption>
             </OSelect>
           </div>
 
@@ -362,8 +352,13 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         </div>
         <div class="right-title">
           <div class="title-list">
-            <OSelect v-model="sig" :placeholder="t('meeting.allSigs')" clearable>
-              <OOption v-for="t in sigOptions" :value="t.group_name" :key="t.group_name">{{ t.group_name }}</OOption>
+            <OSelect
+              v-model="group"
+              :placeholder="t(groupType === MeetingGroupType.GROUP ? 'meeting.allGroups' : 'meeting.allSigs')"
+              clearable
+              @change="changeGroup"
+            >
+              <OOption v-for="t in groups" :value="t" :key="t">{{ t }}</OOption>
             </OSelect>
             <OTab v-model="tabType" :line="false">
               <OTabPane v-for="item in tabs" :key="item.value" :value="item.value">
@@ -449,6 +444,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         padding: 0 var(--o-gap-6);
         gap: var(--o-gap-6);
         border-bottom: 1px solid var(--o-color-control4);
+        background: var(--o-color-fill2);
         @include respond-to('<=pad_v') {
           justify-content: center;
           border-bottom: none;
@@ -473,7 +469,11 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           display: flex;
           align-items: center;
           flex-shrink: 0;
+          color: var(--o-color-info1);
           @include text2;
+          @include respond-to('<=pad_v') {
+            @include h3;
+          }
 
           .o-icon {
             cursor: pointer;
@@ -502,6 +502,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         padding: 0 var(--o-gap-6) var(--o-gap-6);
         border-right: 1px solid var(--o-color-control4);
         margin-bottom: 0;
+        background: var(--o-color-fill2);
 
         thead {
           th {
@@ -776,13 +777,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
       }
 
       .current-day {
+        color: var(--o-color-info2);
         @include respond-to('>pad_v') {
-
           display: none;
         }
-      }
-
-      .current-day {
         @include respond-to('<=pad_v') {
           display: flex;
           margin: 16px 16px 12px;

package/src/components/meeting/OMyMeetingCalendar.vue

@@ -871,10 +871,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
         .el-calendar__header {
           border-bottom: 1px solid var(--o-color-control4);
+          color: var(--o-color-info1);
 
           & > span {
             font-weight: 500;
-            color: var(--o-color-info1);
             @include h1;
           }
 
@@ -890,6 +890,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
               &:hover {
                 color: var(--o-color-primary1);
               }
+
+              svg path {
+                fill: currentColor;
+              }
             }
           }
         }