@opendesign-plus-test/components 0.0.1-rc.19 → 0.0.1-rc.21

package/src/components/OHeaderMoblie.vue

@@ -94,11 +94,12 @@ const mobileClick = () => {
   z-index: 999;
   box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
   backdrop-filter: blur(5px);
+  --o-header-height: 56px;
 }
 .header-wrap {
   display: flex;
   align-items: center;
-  height: 48px;
+  height: var(--o-header-height);
   justify-content: space-between;
   position: relative;
 }
@@ -119,11 +120,10 @@ const mobileClick = () => {
     .header-title {
       color: var(--o-color-info1);
       font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      @include text2;
     }
   }
   .simple-header-right {

package/src/components/OSourceCode.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
 
 import IconChevronDown from '~icons/components/icon-chevron-down.svg';
@@ -14,6 +15,7 @@ interface CodePropsT {
   options?: CodeItemT[];
   url?: string;
   icon?: string;
+  justify?: string;
 }
 
 withDefaults(defineProps<CodePropsT>(), {
@@ -21,11 +23,17 @@ withDefaults(defineProps<CodePropsT>(), {
   options: undefined,
   url: undefined,
   icon: undefined,
+  justify: 'center',
 });
 
 const itemChange = (data: any) => {
   window.open(data.url, '_blank');
 };
+
+const dropdownVisible = ref(false);
+const visibleChange = (val: boolean) => {
+  dropdownVisible.value = val;
+};
 </script>
 
 <template>
@@ -36,13 +44,20 @@ const itemChange = (data: any) => {
         <component :is="icon" class="icon" />
       </OIcon>
     </div>
-    <ODropdown v-else trigger="hover" optionPosition="bottom" option-wrap-class="dropdown">
+    <ODropdown
+      v-else
+      trigger="hover"
+      optionPosition="bottom"
+      option-wrap-class="dropdown"
+      :class="{ 'dropdown-active': dropdownVisible }"
+      @visible-change="visibleChange"
+    >
       <div class="info-wrap hover-icon-rotate">
         <span class="title">{{ title }}</span>
         <OIcon class="icon"><IconChevronDown /></OIcon>
       </div>
       <template #dropdown>
-        <ODropdownItem v-for="item in options" @click="itemChange(item)" :key="item.url" class="list">
+        <ODropdownItem v-for="item in options" @click="itemChange(item)" :key="item.url" class="list" :style="{ '--dropdown-item-justify': justify }">
           {{ item.label }}
           <OIcon v-if="item.icon">
             <component :is="item.icon" class="icon" />
@@ -65,7 +80,7 @@ const itemChange = (data: any) => {
     color: var(--o-color-info1);
     cursor: pointer;
 
-    &:hover {
+    @include hover {
       color: var(--o-color-primary1);
     }
 
@@ -105,18 +120,32 @@ const itemChange = (data: any) => {
 .o-dropdown {
   height: 100%;
 }
+.dropdown-active {
+  .info-wrap {
+    color: var(--o-color-primary1);
+  }
+  .o-icon {
+    transform: rotate(-180deg);
+  }
+}
 .o-dropdown-item {
   background: var(--o-color-fill2);
   cursor: pointer;
   border-radius: var(--o-radius_control-xs);
-  padding: var(--o-gap-1);
+  padding: var(--o-gap-1) 12px;
   min-width: 144px;
-  height: 40px;
+  height: 32px;
+  @include tip1;
 
   @include hover {
-    color: var(--o-color-primary1);
     background: var(--o-color-control2-light);
   }
+
+  &:active {
+    color: var(--o-color-primary1);
+    background: var(--o-color-control3-light);
+    font-weight: 600;
+  }
 }
 .dropdown {
   --dropdown-list-radius: var(--o-radius-xs);

package/src/components/common/HeaderEulerNav.vue

@@ -16,7 +16,7 @@ const props = defineProps({
 });
 
 const { locale } = useLocale();
-const { theme } = useTheme();
+const { theme, isDark } = useTheme();
 
 const navRef = ref();
 const navListRef = ref();
@@ -32,9 +32,9 @@ const navShortcut = ref<any>([]);
 const isPicture = ref(false);
 const toggleDebounced = useDebounceFn(function (item: any | null) {
   if (item === null) {
-    // navActive.value = '';
-    // isShow.value = false;
-    // isPicture.value = false;
+    navActive.value = '';
+    isShow.value = false;
+    isPicture.value = false;
   } else {
     navActive.value = item.id;
     isShow.value = true;
@@ -103,7 +103,7 @@ onUnmounted(() => {
       <div class="right-icon" v-if="navVisibleLeft">
         <OIcon @click="scrollNavLeft"><IconCaretLeft /></OIcon>
       </div>
-      <nav ref="navRef" class="o-nav" :class="{ 'o-nav-scroll': navVisibleLeft || !navVisibleRight }">
+      <nav ref="navRef" class="o-nav" :class="{ 'o-nav-scroll': navVisibleLeft || !navVisibleRight, dark: isDark }">
         <ul ref="navListRef" class="o-nav-list">
           <li v-for="item in navData" :key="item.id" @mouseenter="toggleDebounced(item)" @mouseleave="toggleDebounced(null)">
             <span :id="'tour_headerNav_' + item.ID" class="nav-item">{{ item.label }}</span>
@@ -126,7 +126,7 @@ onUnmounted(() => {
                                 </OIcon>
                                 <OTag v-if="subItem.tag" round="pill" color="danger" size="small" class="content-tag">{{ subItem.tag }}</OTag>
                               </a>
-                              <div class="desc-container">
+                              <div v-if="subItem.description" class="desc-container">
                                 <p class="item-desc" :title="showDesc ? subItem.description : null" @mouseenter="descMouseenter($event)">
                                   {{ subItem.description }}
                                 </p>
@@ -214,6 +214,11 @@ onUnmounted(() => {
   &::-webkit-scrollbar {
     display: none;
   }
+  &.dark {
+    &::after {
+      background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-4), 0) 0%, rgba(var(--o-mixedgray-4), 1) 100%);
+    }
+  }
 
   .o-nav-list {
     display: flex;
@@ -285,7 +290,7 @@ onUnmounted(() => {
 }
 .nav-dropdown {
   position: fixed;
-  top: 72px;
+  top: var(--o-header-height);
   left: 0;
   right: 0;
   background: var(--o-color-fill2);
@@ -358,6 +363,7 @@ onUnmounted(() => {
       }
       .content-tag {
         margin-left: var(--o-gap-2);
+        border-radius: var(--o-radius-xs);
         @include respond-to('<=laptop') {
           display: none;
         }
@@ -918,9 +924,9 @@ onUnmounted(() => {
   }
 
   .icon {
-    height: 16px;
-    width: 16px;
-    padding-left: 6px;
+    width: 24px;
+    height: 24px;
+    padding-left: 8px;
   }
 }
 .content-label {

package/src/components/common/HeaderNavMoblie.vue

@@ -132,7 +132,6 @@ watch(
   justify-content: center;
   height: 48px;
   color: var(--o-color-info1);
-  font-weight: 500;
 
   &.active {
     color: var(--o-color-primary1);
@@ -142,7 +141,7 @@ watch(
 
 .header-content-mb {
   position: fixed;
-  top: 48px;
+  top: var(--o-header-height);
   bottom: 0;
   left: 0;
   right: 0;
@@ -157,8 +156,8 @@ watch(
   position: fixed;
   left: 0;
   overflow: hidden;
-  top: 48px;
-  height: calc(100vh - 48px);
+  top: var(--o-header-height);
+  height: calc(100vh - var(--o-header-height));
   transform: translateX(-130%);
 
   transition-duration: 0.333s;
@@ -186,12 +185,12 @@ watch(
     padding: 0;
     margin: 0;
     height: auto;
-    @include h4;
 
     > li {
       position: relative;
-      @include nav-item;
       text-align: center;
+      @include tip1;
+      @include nav-item;
     }
   }
 }
@@ -228,7 +227,7 @@ watch(
       .content-label {
         color: var(--o-color-info3);
         font-weight: 500;
-        @include text1;
+        @include tip1;
       }
 
       .item-not-children {
@@ -277,6 +276,7 @@ watch(
 
   .container-mobile {
     color: var(--o-color-primary1);
+    margin-top: 8px;
     @include text2;
 
     .icon {
@@ -299,7 +299,7 @@ watch(
       color: var(--o-color-primary1);
       display: flex;
       align-items: center;
-      @include text2;
+      @include tip1;
     }
 
     .content-tag {
@@ -316,7 +316,7 @@ watch(
         margin-top: var(--o-gap-1);
         text-align: justify;
         word-break: normal;
-        @include text1;
+        @include tip2;
         @include text-truncate(2);
       }
     }

package/src/components/common/HeaderUbmcNav.vue

@@ -419,7 +419,7 @@ const handelHref = (href: string) => {
   align-items: center;
   height: 100%;
   padding: 0 var(--o-gap-4);
-  color: var(--o-color-info2);
+  color: var(--o-color-info1);
   word-break: keep-all;
   position: relative;
   font-weight: normal;

package/src/components/events/OEventsList.vue

@@ -14,8 +14,8 @@ import { computed, ref } from 'vue';
 import { type EventsCardItemT, EventsStatusT, type EventsListPropsT, SearchParamsT } from './types';
 import { compareDate } from './utils.ts';
 import { useI18n } from '@/i18n';
-import defaultCover from 'https://infrastructure-website.osinfra.cn/picture/city/default-cover.jpg';
-import { CITY_MAP } from './config.ts';
+
+import { CITY_MAP, DEFAULT_COVER } from './config.ts';
 import { useScreen } from '@opendesign-plus/composables';
 
 const { t } = useI18n();
@@ -100,7 +100,7 @@ const list = computed(() => {
         cover = CITY_MAP[city];
       }
       if (!cover) {
-        cover = defaultCover;
+        cover = DEFAULT_COVER;
       }
       return {
         ...v,

package/src/components/events/config.ts

@@ -30,4 +30,6 @@ export const CITY_MAP = {
   西安: 'https://infrastructure-website.osinfra.cn/picture/city/xian.jpg',
   郑州: 'https://infrastructure-website.osinfra.cn/picture/city/zhengzhou.jpg',
   武汉: 'https://infrastructure-website.osinfra.cn/picture/city/wuhan.jpg',
-};
+};
+
+export const DEFAULT_COVER = 'https://infrastructure-website.osinfra.cn/picture/city/default-cover.jpg';

package/vite.config.ts

@@ -91,7 +91,7 @@ export default defineConfig(({ mode }) => {
           events: FileSystemIconLoader(path.resolve(__dirname, './src/assets/events/svg-icons')),
         },
       }),
-      ElementPlus({ useSource: true })
+      ...(isLibraryMode ? [] : [ElementPlus({ useSource: true })])
     ],
     assetsInclude: ['**/*.md'],
     server: {