@opendesign-plus-test/components 0.0.1-rc.42 → 0.0.1-rc.45

package/src/components/header/components/HeaderContent.vue

@@ -33,8 +33,11 @@ const onMouseLeave = () => {
 
 const showDesc = ref(false);
 const descMouseenter = (e: MouseEvent) => {
-  if (!e || !e.target) return;
-  showDesc.value = e.target.clientHeight < e.target.scrollHeight;
+  if (!e || !e.target) {
+    return;
+  }
+  const target = e.target as HTMLElement;
+  showDesc.value = target!.clientHeight < target.scrollHeight;
 };
 
 const onClickNavHref = (item: any, sub: any) => {
@@ -95,7 +98,8 @@ const onClickShortcut = (item: any) => {
                       <OTag v-if="subItem.tag" round="pill" color="danger" size="small" class="content-tag">{{ subItem.tag }}</OTag>
                     </a>
                     <div v-if="subItem.description" class="desc-container">
-                      <p class="item-desc" :title="showDesc ? subItem.description : null" @mouseenter="descMouseenter($event)">
+                      <p class="item-desc" :title="showDesc ? subItem.description : undefined"
+                         @mouseenter="descMouseenter($event)">
                         {{ subItem.description }}
                       </p>
                     </div>
@@ -164,7 +168,7 @@ const onClickShortcut = (item: any) => {
   overflow-y: auto;
   white-space: nowrap;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     --scroller-padding: 0 var(--layout-content-padding);
   }
 
@@ -194,11 +198,11 @@ const onClickShortcut = (item: any) => {
 .content-item {
   width: 200px;
   margin-top: 24px;
-  @include respond-to('laptop') {
+  @include respond('laptop') {
     width: 170px;
     margin-top: 16px;
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     width: 132px;
     margin-top: 12px;
   }
@@ -220,14 +224,14 @@ const onClickShortcut = (item: any) => {
   .o-icon {
     --icon-size: 24px;
     margin-left: var(--o-gap-2);
-    @include respond-to('<=laptop') {
+    @include respond('<=laptop') {
       --icon-size: 16px;
     }
   }
   .content-tag {
     margin-left: var(--o-gap-2);
     --layout-pkg-radius: var(--o-radius-xs);
-    @include respond-to('<=laptop') {
+    @include respond('<=laptop') {
       display: none;
     }
   }
@@ -252,7 +256,7 @@ const onClickShortcut = (item: any) => {
   margin: 0 16px;
   flex-shrink: 0;
 
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     display: none;
   }
 }
@@ -260,15 +264,15 @@ const onClickShortcut = (item: any) => {
   width: 342px;
   padding: 32px 0;
   flex-shrink: 0;
-  @include respond-to('laptop') {
+  @include respond('laptop') {
     width: 240px;
   }
 
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     width: 240px;
   }
 
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     display: none;
   }
 
@@ -283,11 +287,11 @@ const onClickShortcut = (item: any) => {
     cursor: pointer;
     @include tip1;
 
-    @include respond-to('laptop') {
+    @include respond('laptop') {
       @include text1;
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       @include text1;
     }
 
@@ -325,7 +329,7 @@ const onClickShortcut = (item: any) => {
       text-decoration: none;
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       &:not(:last-child) {
         &:after {
           content: '';
@@ -349,7 +353,7 @@ const onClickShortcut = (item: any) => {
       display: block;
       object-fit: contain;
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         display: none;
       }
     }
@@ -363,7 +367,7 @@ const onClickShortcut = (item: any) => {
       justify-content: space-between;
       white-space: normal;
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: unset;
         height: auto;
       }
@@ -380,7 +384,7 @@ const onClickShortcut = (item: any) => {
         @include hover {
           color: var(--o-color-primary1);
         }
-        @include respond-to('pad_v-laptop') {
+        @include respond('pad_v-laptop') {
           max-height: 44px;
         }
       }
@@ -405,7 +409,7 @@ const onClickShortcut = (item: any) => {
   background-size: cover;
   z-index: -1;
 
-  @include respond-to('<=laptop') {
+  @include respond('<=laptop') {
     display: none;
   }
 }
@@ -418,7 +422,7 @@ const onClickShortcut = (item: any) => {
   background-size: cover;
   z-index: -1;
 
-  @include respond-to('<=laptop') {
+  @include respond('<=laptop') {
     display: none;
   }
 }
@@ -443,7 +447,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(1) {
           .content-container {
@@ -460,7 +464,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(1) {
           .content-container {
             width: 344px;
@@ -469,7 +473,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 25%;
@@ -500,20 +504,20 @@ const onClickShortcut = (item: any) => {
         margin-left: 0;
       }
 
-      @include respond-to('>laptop') {
+      @include respond('>laptop') {
         width: 200px;
       }
 
-      @include respond-to('laptop') {
+      @include respond('laptop') {
         width: 170px;
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         width: 132px;
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           flex: 1 1 auto;
@@ -544,7 +548,7 @@ const onClickShortcut = (item: any) => {
               margin-right: 0;
             }
 
-            @include respond-to('<=laptop') {
+            @include respond('<=laptop') {
               margin-right: 24px;
             }
           }
@@ -553,20 +557,20 @@ const onClickShortcut = (item: any) => {
               margin-right: 40px;
             }
           }
-          @include respond-to('>laptop') {
+          @include respond('>laptop') {
             width: 992px;
           }
-          @include respond-to('laptop') {
+          @include respond('laptop') {
             width: 752px;
           }
-          @include respond-to('pad_h') {
+          @include respond('pad_h') {
             width: auto;
           }
         }
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 80%;
@@ -602,7 +606,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(2) {
           .content-container {
@@ -614,7 +618,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(2) {
           .content-container {
             width: auto;
@@ -623,7 +627,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 25%;
@@ -666,7 +670,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(1) {
           .content-container {
@@ -684,7 +688,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(n) {
           .content-container {
             width: auto;
@@ -693,7 +697,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 20%;
@@ -724,7 +728,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         &:nth-child(n) {
           .content-container {
             width: 170px;
@@ -732,7 +736,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-child(n) {
           .content-container {
             width: 132px;
@@ -741,7 +745,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           .content-container {
@@ -785,7 +789,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(1) {
           .content-container {
@@ -796,7 +800,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('laptop') {
+      @include respond('laptop') {
         &:nth-of-type(1) {
           .content-container {
             width: 558px;
@@ -809,7 +813,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(1) {
           .content-container {
             width: auto;
@@ -823,7 +827,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 20%;
@@ -866,7 +870,7 @@ const onClickShortcut = (item: any) => {
         margin-left: 0;
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         .content-container {
           :deep(.content-item) {
@@ -874,20 +878,20 @@ const onClickShortcut = (item: any) => {
           }
         }
       }
-      @include respond-to('laptop') {
+      @include respond('laptop') {
         .content-container {
           width: 364px;
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         .content-container {
           width: auto;
         }
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 40%;
@@ -909,10 +913,10 @@ const onClickShortcut = (item: any) => {
   }
   .item-sub + .item-sub {
     margin-left: 48px;
-    @include respond-to('laptop') {
+    @include respond('laptop') {
       margin-left: 32px;
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       margin-left: 16px;
     }
   }
@@ -953,7 +957,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         &:nth-of-type(1) {
           .content-container {
@@ -970,7 +974,7 @@ const onClickShortcut = (item: any) => {
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         &:nth-of-type(1) {
           .content-container {
             width: 344px;
@@ -979,7 +983,7 @@ const onClickShortcut = (item: any) => {
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 25%;
@@ -1027,7 +1031,7 @@ const onClickShortcut = (item: any) => {
               margin-right: 0;
             }
 
-            @include respond-to('<=laptop') {
+            @include respond('<=laptop') {
               margin-right: 24px;
             }
           }
@@ -1036,20 +1040,20 @@ const onClickShortcut = (item: any) => {
               margin-right: 40px;
             }
           }
-          @include respond-to('>laptop') {
+          @include respond('>laptop') {
             width: 992px;
           }
-          @include respond-to('laptop') {
+          @include respond('laptop') {
             width: 752px;
           }
-          @include respond-to('pad_h') {
+          @include respond('pad_h') {
             width: auto;
           }
         }
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 80%;
@@ -1082,7 +1086,7 @@ const onClickShortcut = (item: any) => {
         margin-left: 0;
       }
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-left: 24px;
         .content-container {
           :deep(.content-item) {
@@ -1090,20 +1094,20 @@ const onClickShortcut = (item: any) => {
           }
         }
       }
-      @include respond-to('laptop') {
+      @include respond('laptop') {
         .content-container {
           width: 364px;
         }
       }
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         .content-container {
           width: auto;
         }
       }
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .content-left {
         .item-sub {
           max-width: 40%;

package/src/components/header/components/HeaderNav.vue

@@ -187,7 +187,7 @@ onUnmounted(() => {
     height: 100%;
     right: 0;
     top: 0;
-    background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-1), 0) 0%, rgba(var(--o-mixedgray-1), 1) 100%);
+    background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
     z-index: 0;
   }
   &::-webkit-scrollbar {
@@ -195,7 +195,7 @@ onUnmounted(() => {
   }
   &.dark {
     &::after {
-      background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-4), 0) 0%, rgba(var(--o-mixedgray-4), 1) 100%);
+      background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 100%);
     }
   }
 }
@@ -255,10 +255,10 @@ onUnmounted(() => {
     padding: 22px var(--o-gap-4);
     @include text1;
 
-    @include respond-to('laptop') {
+    @include respond('laptop') {
       padding: 22px 12px;
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       padding: 22px 8px;
     }
     &.en {

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

@@ -2,10 +2,11 @@
 import { ref, onMounted, watch } from 'vue';
 import { OIcon, OTag } from '@opensig/opendesign';
 
-import { type NavMobileItemT, NavType } from '../types.ts';
+import { type NavMobileItemT, NavType, CodeItemT, LangItemT } from '../types.ts';
 
 export interface OHeaderEmitsT {
   (e: 'on-click'): void;
+  (e: 'lang-click', val: LangItemT): void;
   (e: 'handle-click', val: any): void;
 }
 const emit = defineEmits<OHeaderEmitsT>();
@@ -42,9 +43,11 @@ const onClick = (url: string, target?: string) => {
   emit('on-click');
 };
 
-const onClickNav = (val: any) => {
+const onClickNav = (val: CodeItemT | LangItemT) => {
   if (navActive.value === NavType.CODE) {
     onClick(val.href, val?.target);
+  } else if (navActive.value === NavType.LANG) {
+    emit('lang-click', val);
   }
 };
 
@@ -242,7 +245,7 @@ watch(
           top: 0;
           width: 100%;
           height: 1px;
-          background-color: rgba(var(--o-mixedgray-14), 0.1);
+          background-color: rgba(var(--o-grey-14), 0.1);
         }
       }
       .content-label {
@@ -340,7 +343,7 @@ watch(
         word-break: normal;
         @include tip1;
         @include text-truncate(2);
-        @include respond-to('phone') {
+        @include respond('phone') {
           @include text1;
         }
       }
@@ -365,7 +368,7 @@ watch(
   width: 99px;
   @include nav-item;
   @include tip1;
-  @include respond-to('phone') {
+  @include respond('phone') {
     @include text1;
   }
 }

package/src/components/header/types.ts

@@ -11,6 +11,8 @@ export interface ChildrenItemT {
   description?: string; // 描述
   href?: string; // 链接
   tag?: tagT; // 标签
+  icon?: any;
+  target?: string;
   children?: ChildrenItemT[];
 }
 
@@ -22,6 +24,8 @@ export interface ShortcutItemT {
   tag?: tagT; // 标签
   remark?: string; // 时间
   type?: string; // 类型
+  target?: string;
+  icon?: string;
 }
 
 export interface NavItemT {