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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.18",
+  "version": "0.0.1-rc.19",
   "type": "module",
   "publishConfig": {
     "access": "public",

package/src/components/OFooter.vue

@@ -29,7 +29,7 @@ const props = defineProps({
               <img :src="props.atom[props.lang].img" class="atom-logo" alt="" />
             </a>
           </div>
-          <ODivider class="atom-divider" />
+          <ODivider :style="{ '--o-divider-bd-color': 'rgba(229, 229, 229, 0.12)', '--o-divider-gap': '16px' }" />
         </slot>
       </ContentWrapper>
       <div class="footer-content" :style="{ backgroundImage: `url(${props.footerBg})` }">
@@ -81,7 +81,7 @@ const props = defineProps({
                     <ODivider
                       v-if="index !== props.footerOption[props.lang].link.length - 1"
                       :style="{
-                        '--o-divider-bd-color': 'var(--o-color-info3-inverse)',
+                        '--o-divider-bd-color': 'var(--o-color-white)',
                         '--o-divider-label-gap': '0 8px',
                       }"
                       direction="v"
@@ -191,26 +191,12 @@ const props = defineProps({
       height: 32px;
       margin-top: 12px;
 
-      @include respond-to('<=laptop') {
-        margin-top: 8px;
-      }
-
       @include respond-to('<=pad_v') {
         height: 30px;
-        margin-top: 12px;
+        margin-top: 16px;
       }
     }
   }
-  .atom-divider {
-    --o-divider-bd-color: rgba(229, 229, 229, 0.12);
-    --o-divider-gap: 16px;
-    @include respond-to('laptop') {
-      --o-divider-gap: 12px;
-    }
-    @include respond-to('pad_h') {
-      --o-divider-gap: 8px;
-    }
-  }
   .footer-content {
     @include tip1;
     background-position: bottom;
@@ -258,12 +244,11 @@ const props = defineProps({
     margin-top: 16px;
     padding-bottom: 12px;
     display: flex;
-    justify-content: center;
     border-bottom: 1px solid rgba(229, 229, 229, 0.12);
     @include tip2;
     .friendship-link-title {
       color: var(--o-color-white);
-      margin-right: 32px;
+      margin-right: 38px;
       flex-shrink: 0;
     }
     a:not(:last-of-type) {
@@ -281,7 +266,13 @@ const props = defineProps({
     }
 
     @include respond-to('<=pad_v') {
-      display: none;
+      flex-direction: column;
+      padding-bottom: 16px;
+      .friendship-link-box {
+        margin-top: 12px;
+        display: flex;
+        flex-wrap: wrap;
+      }
     }
   }
   .inner {
@@ -293,7 +284,7 @@ const props = defineProps({
 
     @include respond-to('<=pad_v') {
       margin: 0 auto;
-      padding: 0 0 24px;
+      padding: 12px 0 24px;
       flex-direction: column;
     }
   }
@@ -337,12 +328,7 @@ const props = defineProps({
       display: inline-block;
     }
     .footer-option-item {
-      display: flex;
-      justify-content: center;
       align-items: center;
-      .o-divider {
-        height: 12px;
-      }
     }
 
     @include respond-to('<=pad_v') {
@@ -351,10 +337,14 @@ const props = defineProps({
   }
   .license {
     color: var(--o-color-white);
-    margin-top: 8px;
+    margin-top: 6px;
     span {
       color: rgba(var(--o-white), 0.6);
     }
+
+    @include respond-to('<=pad_v') {
+      margin-top: 4px;
+    }
   }
   .copyright {
     margin-top: 6px;
@@ -400,7 +390,7 @@ const props = defineProps({
     }
   }
   .footer-right {
-    flex: 1;
+    flex-shrink: 0;
     .code-box {
       display: flex;
       justify-content: right;
@@ -452,10 +442,7 @@ const props = defineProps({
         }
       }
       .code-pop + .code-pop {
-        margin-left: 80px;
-        @include respond-to('<=pad_v') {
-          margin-left: 64px;
-        }
+        margin-left: 16px;
       }
     }
 
@@ -517,11 +504,6 @@ const props = defineProps({
     .footer-right {
       flex-shrink: 0;
       margin-left: 16px;
-      display: flex;
-      align-items: center;
-      .o-divider-v {
-        height: 12px;
-      }
     }
   }
   .app-footer-mb {
@@ -530,14 +512,6 @@ const props = defineProps({
     text-align: center;
     color: var(--o-color-info4);
     @include tip1;
-    .links {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .o-divider-v {
-        height: 12px;
-      }
-    }
     .copyright {
       margin-top: 4px;
     }

package/src/components/OHeader.vue

@@ -60,12 +60,11 @@ const goHome = () => {
   z-index: 999;
   box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
   backdrop-filter: blur(5px);
-  --o-header-height: 72px;
 }
 .header-wrap {
   display: flex;
   align-items: center;
-  height: var(--o-header-height);
+  height: 72px;
 }
 .header-logo {
   height: 100%;

package/src/components/OHeaderMoblie.vue

@@ -94,12 +94,11 @@ 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: var(--o-header-height);
+  height: 48px;
   justify-content: space-between;
   position: relative;
 }
@@ -120,10 +119,11 @@ 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,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
 
 import IconChevronDown from '~icons/components/icon-chevron-down.svg';
@@ -15,7 +14,6 @@ interface CodePropsT {
   options?: CodeItemT[];
   url?: string;
   icon?: string;
-  justify?: string;
 }
 
 withDefaults(defineProps<CodePropsT>(), {
@@ -23,17 +21,11 @@ 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>
@@ -44,20 +36,13 @@ const visibleChange = (val: boolean) => {
         <component :is="icon" class="icon" />
       </OIcon>
     </div>
-    <ODropdown
-      v-else
-      trigger="hover"
-      optionPosition="bottom"
-      option-wrap-class="dropdown"
-      :class="{ 'dropdown-active': dropdownVisible }"
-      @visible-change="visibleChange"
-    >
+    <ODropdown v-else trigger="hover" optionPosition="bottom" option-wrap-class="dropdown">
       <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" :style="{ '--dropdown-item-justify': justify }">
+        <ODropdownItem v-for="item in options" @click="itemChange(item)" :key="item.url" class="list">
           {{ item.label }}
           <OIcon v-if="item.icon">
             <component :is="item.icon" class="icon" />
@@ -80,7 +65,7 @@ const visibleChange = (val: boolean) => {
     color: var(--o-color-info1);
     cursor: pointer;
 
-    @include hover {
+    &:hover {
       color: var(--o-color-primary1);
     }
 
@@ -120,31 +105,17 @@ const visibleChange = (val: boolean) => {
 .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) 12px;
+  padding: var(--o-gap-1);
   min-width: 144px;
-  height: 32px;
-  @include tip1;
+  height: 40px;
 
   @include hover {
-    background: var(--o-color-control2-light);
-  }
-
-  &:active {
     color: var(--o-color-primary1);
-    background: var(--o-color-control3-light);
-    font-weight: 600;
+    background: var(--o-color-control2-light);
   }
 }
 .dropdown {

package/src/components/common/HeaderEulerNav.vue

@@ -16,7 +16,7 @@ const props = defineProps({
 });
 
 const { locale } = useLocale();
-const { theme, isDark } = useTheme();
+const { theme } = 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, dark: isDark }">
+      <nav ref="navRef" class="o-nav" :class="{ 'o-nav-scroll': navVisibleLeft || !navVisibleRight }">
         <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 v-if="subItem.description" class="desc-container">
+                              <div class="desc-container">
                                 <p class="item-desc" :title="showDesc ? subItem.description : null" @mouseenter="descMouseenter($event)">
                                   {{ subItem.description }}
                                 </p>
@@ -214,11 +214,6 @@ 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;
@@ -290,7 +285,7 @@ onUnmounted(() => {
 }
 .nav-dropdown {
   position: fixed;
-  top: var(--o-header-height);
+  top: 72px;
   left: 0;
   right: 0;
   background: var(--o-color-fill2);
@@ -363,7 +358,6 @@ onUnmounted(() => {
       }
       .content-tag {
         margin-left: var(--o-gap-2);
-        border-radius: var(--o-radius-xs);
         @include respond-to('<=laptop') {
           display: none;
         }
@@ -924,9 +918,9 @@ onUnmounted(() => {
   }
 
   .icon {
-    width: 24px;
-    height: 24px;
-    padding-left: 8px;
+    height: 16px;
+    width: 16px;
+    padding-left: 6px;
   }
 }
 .content-label {

package/src/components/common/HeaderNavMoblie.vue

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

package/src/components/events/OEventsList.vue

@@ -14,7 +14,7 @@ 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 '@/assets/events/city/default-cover.png';
+import defaultCover from 'https://infrastructure-website.osinfra.cn/picture/city/default-cover.jpg';
 import { CITY_MAP } from './config.ts';
 import { useScreen } from '@opendesign-plus/composables';
 

package/src/components/events/config.ts

@@ -3,20 +3,6 @@ import IconEvents from '~icons/events/icon-events.svg';
 import IconCompetition from '~icons/events/icon-competition.svg';
 import IconRelease from '~icons/events/icon-release.svg';
 
-import 上海 from '@/assets/events/city/上海.png';
-import 北京 from '@/assets/events/city/北京.png';
-import 南京 from '@/assets/events/city/南京.png';
-import 天津 from '@/assets/events/city/天津.png';
-import 成都 from '@/assets/events/city/成都.png';
-import 无锡 from '@/assets/events/city/无锡.png';
-import 杭州 from '@/assets/events/city/杭州.png';
-import 深圳1 from '@/assets/events/city/深圳1.png';
-import 深圳2 from '@/assets/events/city/深圳2.png';
-import 苏州 from '@/assets/events/city/苏州.png';
-import 西安 from '@/assets/events/city/西安.png';
-import 郑州 from '@/assets/events/city/郑州.png';
-import 武汉 from '@/assets/events/city/武汉.png';
-
 export const EVENTS_COLOR_MAP = {
   summit: '--o-orange-6',
   events: '--o-cyan-6',
@@ -32,16 +18,16 @@ export const EVENTS_ICON_MAP = {
 };
 
 export const CITY_MAP = {
-  上海,
-  北京,
-  南京,
-  天津,
-  成都,
-  无锡,
-  杭州,
-  深圳: [深圳1, 深圳2],
-  苏州,
-  西安,
-  郑州,
-  武汉,
+  上海: 'https://infrastructure-website.osinfra.cn/picture/city/shanghai.jpg',
+  北京: 'https://infrastructure-website.osinfra.cn/picture/city/beijing.jpg',
+  南京: 'https://infrastructure-website.osinfra.cn/picture/city/nanjing.jpg',
+  天津: 'https://infrastructure-website.osinfra.cn/picture/city/tianjin.jpg',
+  成都: 'https://infrastructure-website.osinfra.cn/picture/city/chengdu.jpg',
+  无锡: 'https://infrastructure-website.osinfra.cn/picture/city/wuxi.jpg',
+  杭州: 'https://infrastructure-website.osinfra.cn/picture/city/hangzhou.jpg',
+  深圳: ['https://infrastructure-website.osinfra.cn/picture/city/shenzhen1.jpg', 'https://infrastructure-website.osinfra.cn/picture/city/shenzhen2.jpg'],
+  苏州: 'https://infrastructure-website.osinfra.cn/picture/city/suzhou.jpg',
+  西安: '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',
 };