@opendesign-plus-test/components 0.0.1-rc.26 → 0.0.1-rc.27

package/dist/index.d.ts

@@ -1,18 +1,17 @@
 import { default as OBanner } from './components/OBanner.vue';
 import { default as OCookieNotice } from './components/OCookieNotice.vue';
 import { default as OFooter } from './components/OFooter.vue';
-import { default as OHeader } from './components/OHeader.vue';
-import { default as OHeaderMoblie } from './components/OHeaderMoblie.vue';
 import { default as OHeaderSearch } from './components/OHeaderSearch.vue';
 import { default as OHeaderUser } from './components/OHeaderUser.vue';
 import { default as OPlusConfigProvider } from './components/OPlusConfigProvider.vue';
 import { default as OSection } from './components/OSection.vue';
 import { default as OSourceCode } from './components/OSourceCode.vue';
 import { default as OThemeSwitcher } from './components/OThemeSwitcher.vue';
-export { OBanner, OCookieNotice, OFooter, OHeader, OHeaderMoblie, OHeaderSearch, OHeaderUser, OPlusConfigProvider, OSection, OSourceCode, OThemeSwitcher };
+export { OBanner, OCookieNotice, OFooter, OHeaderSearch, OHeaderUser, OPlusConfigProvider, OSection, OSourceCode, OThemeSwitcher };
 export * from './components/activity';
 export * from './components/element-plus';
 export * from './components/events';
+export * from './components/header';
 export * from './components/meeting';
 declare const _default: {
     install: (app: any) => void;

package/package.json

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

package/src/assets/svg-icons/icon-chevron-down.svg

@@ -1,3 +1,3 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path d="M5.759 8.873c0.251-0.251 0.644-0.271 0.918-0.063l0.072 0.063 5.016 5.016c0.1 0.1 0.254 0.115 0.37 0.043l0.054-0.043 5.062-5.062c0.273-0.273 0.717-0.273 0.99 0 0.251 0.251 0.271 0.644 0.063 0.918l-0.063 0.072-5.062 5.062c-0.629 0.629-1.628 0.662-2.296 0.099l-0.108-0.099-5.016-5.016c-0.273-0.273-0.273-0.717 0-0.99z"></path>
+<path fill="currentColor" d="M5.759 8.873c0.251-0.251 0.644-0.271 0.918-0.063l0.072 0.063 5.016 5.016c0.1 0.1 0.254 0.115 0.37 0.043l0.054-0.043 5.062-5.062c0.273-0.273 0.717-0.273 0.99 0 0.251 0.251 0.271 0.644 0.063 0.918l-0.063 0.072-5.062 5.062c-0.629 0.629-1.628 0.662-2.296 0.099l-0.108-0.099-5.016-5.016c-0.273-0.273-0.273-0.717 0-0.99z"></path>
 </svg>

package/src/components/OCookieNotice.vue

@@ -15,7 +15,6 @@ const COOKIE_KEY_EN = 'agreed-cookiepolicy-en';
 
 const props = defineProps<{
   visible?: boolean;
-  enableGrid?: boolean;
   community: string;
   detailUrl: string;
   wrapper?: string | HTMLElement;
@@ -26,10 +25,18 @@ const emit = defineEmits<{
   (e: 'update:visible', value: boolean): void;
 }>();
 
-const { lePadV, leLaptop } = useScreen();
+const { lePadV, leLaptop, isPhone } = useScreen();
 const { locale, t } = useI18n();
 const isZh = computed(() => locale.value === 'zh');
 
+const cookieNoticeRef = ref<HTMLDivElement>();
+const enableGrid = computed(() => {
+  if (cookieNoticeRef.value) {
+    return !!getComputedStyle(cookieNoticeRef.value!).getPropertyValue('--grid-content-width');
+  }
+  return false;
+});
+
 const cookieKey = computed(() => (isZh.value ? COOKIE_KEY_ZH : COOKIE_KEY_EN));
 
 // 是否允许分析cookie
@@ -123,38 +130,67 @@ const rejectAll = () => {
 };
 
 // 弹出框设置
-const dlgActions = computed<Array<DialogActionT>>(() => [
-  {
-    id: 'save',
-    color: 'primary',
-    label: t('cookie.saveSetting'),
-    variant: 'outline',
-    size: 'large',
-    round: 'pill',
-    onClick: () => {
-      if (analysisAllowed.value) {
-        acceptAll();
-      } else {
-        rejectAll();
-      }
-
-      toggleDlgVisible(false);
+const dlgActions = computed<Array<DialogActionT>>(() => {
+  if (isPhone.value) {
+    return [
+      {
+        id: 'save',
+        label: t('cookie.saveSetting'),
+        variant: 'text',
+        onClick: () => {
+          if (analysisAllowed.value) {
+            acceptAll();
+          } else {
+            rejectAll();
+          }
+          toggleDlgVisible(false);
+        },
+      },
+      {
+        id: 'allowAll',
+        label: t('cookie.acceptAll'),
+        variant: 'text',
+        onClick: () => {
+          analysisAllowed.value = true;
+          acceptAll();
+          toggleDlgVisible(false);
+        },
+      },
+    ]
+  }
+  return [
+    {
+      id: 'save',
+      color: 'primary',
+      label: t('cookie.saveSetting'),
+      variant: 'outline',
+      size: 'medium',
+      round: 'pill',
+      onClick: () => {
+        if (analysisAllowed.value) {
+          acceptAll();
+        } else {
+          rejectAll();
+        }
+
+        toggleDlgVisible(false);
+      },
     },
-  },
-  {
-    id: 'allowAll',
-    color: 'primary',
-    label: t('cookie.acceptAll'),
-    variant: 'outline',
-    size: 'large',
-    round: 'pill',
-    onClick: () => {
-      analysisAllowed.value = true;
-      acceptAll();
-      toggleDlgVisible(false);
+    {
+      id: 'allowAll',
+      color: 'primary',
+      label: t('cookie.acceptAll'),
+      variant: 'outline',
+      size: 'medium',
+      round: 'pill',
+      onClick: () => {
+        analysisAllowed.value = true;
+        acceptAll();
+        toggleDlgVisible(false);
+      },
     },
-  },
-]);
+  ]
+});
 
 const onDlgChange = (val: boolean) => {
   if (val) {
@@ -175,43 +211,54 @@ defineExpose({
 <template>
   <ClientOnly>
     <Teleport :to="wrapper || '#app'">
-      <div v-if="visibleVmodel" class="cookie-notice">
+      <div ref="cookieNoticeRef" v-if="visibleVmodel" class="cookie-notice">
         <div class="cookie-notice-content">
           <div :type="locale" :class="{ 'cookie-notice-wrap-grid': enableGrid, 'cookie-notice-wrap': !enableGrid }">
-            <div class="cookie-notice-left">
-              <p v-if="isZh" class="cookie-desc" style="margin-top: 0">
-                {{ t('cookie.desc') }}
-                <a :href="detailUrl" target="_blank" rel="noopener noreferrer">
-                  {{ t('cookie.about') }}
-                </a>
-              </p>
-              <template v-else>
-                <p class="cookie-title">{{ t('cookie.title', [community]) }}</p>
-                <p class="cookie-desc">
+            <div class="cookie-title">
+              <template v-if="isZh">
+                <OIcon style="display: inline-block; font-size: 24px; margin-right: 4px">
+                  <svg style="transform: rotate(180deg);" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+                    <path fill="#002fa7" d="M21 12c0 4.971-4.029 9-9 9s-9-4.029-9-9c0-4.971 4.029-9 9-9s9 4.029 9 9z" />
+                    <path
+                      fill="#fff"
+                      d="M12 9.4c0.552 0 1-0.448 1-1s-0.448-1-1-1c-0.552 0-1 0.448-1 1s0.448 1 1 1zM12.492 10.943c-0.042-0.233-0.246-0.41-0.492-0.41-0.276 0-0.5 0.224-0.5 0.5v5.5l0.008 0.090c0.042 0.233 0.246 0.41 0.492 0.41 0.276 0 0.5-0.224 0.5-0.5v-5.5l-0.008-0.090z"
+                    />
+                  </svg>
+                </OIcon>
+                <p class="cookie-zh-title" style="margin-top: 0">
                   {{ t('cookie.desc') }}
-                  <a :href="detailUrl" target="_blank" rel="noopener noreferrer">{{ t('cookie.about') }} </a>.
+                  <a :href="detailUrl" target="_blank" rel="noopener noreferrer">
+                    {{ t('cookie.about') }}
+                  </a>
                 </p>
               </template>
+              <p v-else class="cookie-en-title">{{ t('cookie.title', [community]) }}</p>
+              <OIcon class="cookie-notice-close" @click="toggleNoticeVisible(false)">
+                <OIconClose />
+              </OIcon>
             </div>
-            <div v-if="!isZh" class="cookie-notice-right">
-              <OButton round="pill" variant="outline" color="primary" @click="acceptAll">{{ t('cookie.acceptAll') }}</OButton>
-              <OButton round="pill" variant="outline" color="primary" @click="rejectAll">{{ t('cookie.rejectAll') }}</OButton>
-              <OButton round="pill" variant="outline" color="primary" @click="toggleDlgVisible(true)">
-                {{ t('cookie.manage') }}
-              </OButton>
+            <div v-if="!isZh" class="cookie-en-content">
+              <p class="cookie-en-desc">
+                {{ t('cookie.desc') }}
+                <a :href="detailUrl" target="_blank" rel="noopener noreferrer">{{ t('cookie.about') }} </a>.
+              </p>
+              <div class="cookie-notice-right">
+                <OButton round="pill" variant="outline" color="primary" @click="acceptAll">{{ t('cookie.acceptAll') }}</OButton>
+                <OButton round="pill" variant="outline" color="primary" @click="rejectAll">{{ t('cookie.rejectAll') }}</OButton>
+                <OButton round="pill" variant="outline" color="primary" @click="toggleDlgVisible(true)">{{ t('cookie.manage') }}</OButton>
+              </div>
             </div>
-            <OIcon class="cookie-notice-close" :type="locale" @click="toggleNoticeVisible(false)">
-              <OIconClose />
-            </OIcon>
           </div>
         </div>
         <ODialog
           v-model:visible="isDlgVisible"
           :size="leLaptop ? 'medium' : 'large'"
           :phone-half-full="lePadV"
+          :main-class="enableGrid ? 'o-cookie-notice-dlg-main' : ''"
           class="cookie-dlg"
           :actions="dlgActions"
           @change="onDlgChange"
+          style="--dlg-radius: 4px"
         >
           <template #header>
             <span class="cookie-dlg-title">{{ t('cookie.manage') }}</span>
@@ -244,7 +291,37 @@ defineExpose({
   </ClientOnly>
 </template>
 
+<style lang="scss">
+.o-cookie-notice-dlg-main {
+  --dlg-edge-gap: 32px;
+  @include respond-to('laptop') {
+    --dlg-edge-gap: 24px;
+  }
+  @include respond-to('phone') {
+    --dlg-edge-gap: 16px 24px;
+  }
+
+  --dlg-width: var(--grid-14);
+  @include respond-to('pad_h') {
+    --dlg-edge-gap: 16px;
+    --dlg-width: var(--grid-8);
+  }
+  @include respond-to('<=pad_v') {
+    --dlg-width: 100vw;
+  }
+}
+</style>
 <style lang="scss" scoped>
+.o-btn {
+  --btn-bd-color-hover: var(--o-color-primary2);
+  --btn-bd-color-active: var(--o-color-primary3);
+
+  --btn-color-hover: var(--o-color-primary2);
+  --btn-color-active: var(--o-color-primary3);
+
+  --btn-bg-color-hover: transparent;
+  --btn-bg-color-active: transparent;
+}
 .cookie-notice {
   position: fixed;
   bottom: 0;
@@ -271,153 +348,228 @@ defineExpose({
 
 .cookie-notice-wrap {
   position: relative;
-  display: flex;
-  justify-content: space-between;
   margin: 0 auto;
-  padding: 24px var(--layout-content-padding);
+  padding: 16px var(--layout-content-padding);
   max-width: var(--layout-content-max-width);
+  @media (1680px >= width >= 1201px) {
+    padding: 12px var(--layout-content-padding);
+  }
+  @include respond-to('pad_h') {
+    padding: 8px var(--layout-content-padding);
+  }
+  @media (max-width: 840px) {
+    padding: 16px var(--layout-content-padding);
+  }
+  @include respond-to('phone') {
+    padding: 16px var(--layout-content-padding);
+  }
   &:not([type='zh']) {
     @media (max-width: 840px) {
       flex-direction: column;
-      align-items: center;
     }
   }
 }
 
 .cookie-notice-wrap-grid {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
   width: var(--grid-content-width);
-  padding: 24px 0;
+  padding: 16px 0;
   margin: 0 auto;
+  @media (1680px >= width >= 1201px) {
+    padding: 12px 0;
+  }
+  @include respond-to('pad_h') {
+    padding: 8px 0;
+  }
+  @media (max-width: 840px) {
+    padding: 16px 0;
+  }
+  @include respond-to('phone') {
+    padding: 16px 0;
+  }
   &:not([type='zh']) {
     @media (max-width: 840px) {
       padding: 16px 0;
       flex-direction: column;
-      align-items: center;
     }
   }
 }
 
-.cookie-notice-left {
-  width: 60%;
-
-  @media (max-width: 1100px) {
-    width: 58%;
+.cookie-title {
+  display: flex;
+  font-size: 16px;
+  line-height: calc(1em + 8px);
+  color: var(--o-color-info1);
+  font-weight: 500;
+  @media (max-width: 1680px) {
+    font-size: 14px;
   }
-
-  @media (max-width: 840px) {
-    width: 100%;
+  @include respond-to('<=pad_v') {
+    text-align: center;
   }
+}
 
-  .cookie-title {
-    font-size: 16px;
-    line-height: 28px;
-    color: var(--o-color-info1);
-    font-weight: 500;
-    @media (max-width: 840px) {
-      font-size: 16px;
-      line-height: 24px;
-      text-align: center;
-    }
+.cookie-en-title {
+  @include respond-to('<=pad_v') {
+    margin-left: auto;
   }
+}
 
-  .cookie-desc {
+.cookie-zh-title {
+  font-size: 14px;
+  line-height: 22px;
+  margin-right: 8px;
+  text-align: start;
+  @include respond-to('<=pad_v') {
     font-size: 12px;
     line-height: 18px;
-    color: var(--o-color-info2);
-    margin-top: 8px;
   }
 }
 
-.cookie-notice-right {
+.cookie-en-content {
   display: flex;
-  align-items: center;
-  margin-top: 12px;
-
-  @media (max-width: 840px) {
-    width: 100%;
+  width: 100%;
+  margin-top: 8px;
+  @include respond-to('<=pad_v') {
+    flex-direction: column;
   }
+}
 
-  @media (max-width: 840px) {
-    flex-direction: column;
-    align-items: center;
+.cookie-en-desc {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--o-color-info2);
+  @media (min-width: 1681px) {
+    margin-right: 48px;
   }
+  @media (1680px >= width >= 1201px) {
+    margin-right: 40px;
+  }
+  @include respond-to('pad') {
+    margin-right: 24px;
+  }
+  @include respond-to('<=pad_v') {
+    margin: 0;
+  }
+}
+
+.cookie-notice-right {
+  display: flex;
+  margin-left: auto;
 
   .o-btn:not(:first-child) {
     margin-left: 16px;
+    @media (1680px >= width >= 1201px) {
+      margin-left: 12px;
+    }
+    @include respond-to('pad_h') {
+      margin-left: 8px;
+    }
+    @media (min-width: 841px) {
+      margin-left: 12px;
+    }
   }
 
-  @media (max-width: 840px) {
+  @include respond-to('<=pad_v') {
+    margin-top: 16px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    gap: 12px;
+
     .o-btn {
-      align-self: stretch;
-      &:not(:first-child) {
-        margin-top: 12px;
-        margin-left: 0;
+      margin: 0;
+      &:nth-child(1) {
+        grid-column: 1;
+        grid-row: 1;
+      }
+      &:nth-child(2) {
+        grid-column: 2;
+        grid-row: 1;
+      }
+      &:nth-child(3) {
+        grid-column: 1 / span 2;
+        grid-row: 2;
       }
     }
   }
 }
 
 .cookie-notice-close {
-  &[type='en'] {
-    position: absolute;
-    top: 16px;
-    right: var(--layout-content-padding);
-    transform-origin: center;
-  }
+  display: block;
+  overflow: visible !important;
+  margin-left: auto;
   cursor: pointer;
   color: var(--o-color-info1);
-  font-size: 20px;
+  font-size: 24px;
   &:hover {
     color: var(--o-color-primary2);
   }
-  @media (max-width: 840px) {
-    font-size: 14px;
-  }
   @include x-svg-hover;
 }
 
-.cookie-notice-wrap-grid .cookie-notice-close {
-  right: 0;
-}
-
 .cookie-dlg-content {
   .content-item + .content-item {
     margin-top: 24px;
+    @media (1680px >= width >= 1201px) {
+      margin-top: 16px;
+    }
+    @include respond-to('<=pad') {
+      margin-top: 12px;
+    }
   }
 
   .content-item {
     .item-header {
       display: flex;
       align-items: center;
+      justify-content: space-between;
       .item-title {
-        font-size: 18px;
-        line-height: 32px;
+        font-size: 20px;
+        line-height: calc(1em + 8px);
         color: var(--o-color-info1);
         font-weight: 500;
+        @media (1680px >= width >= 1201px) {
+          font-size: 18px;
+        }
+        @include respond-to('<=pad') {
+          font-size: 16px;
+        }
       }
 
       .item-extra {
         font-size: 14px;
-        line-height: 22px;
         color: var(--o-color-info3);
         margin-left: 24px;
+        @include respond-to('<=pad') {
+          font-size: 12px;
+        }
       }
     }
 
     .item-detail {
       font-size: 16px;
-      line-height: 28px;
+      line-height: calc(1em + 8px);
       color: var(--o-color-info2);
-      margin-top: 12px;
-      @media (max-width: 840px) {
+      margin-top: 16px;
+      @media (max-width: 1680px) {
+        margin-top: 12px;
         font-size: 14px;
-        line-height: 21px;
+      }
+      @include respond-to('<=pad') {
+        margin-top: 8px;
+      }
+      @media (max-width: 840px) {
         margin-top: 8px;
       }
     }
   }
+
+  .content-item:nth-child(2) {
+    .item-detail {
+      font-size: 16px !important;
+      line-height: calc(1em + 8px);
+    }
+  }
 }
 </style>

package/src/components/OFooter.vue

@@ -3,7 +3,17 @@ import { ODivider } from '@opensig/opendesign';
 
 import ContentWrapper from './common/ContentWrapper.vue';
 
-const props = withDefaults(defineProps(), {
+const props = withDefaults(defineProps<{
+  simple: any;
+  atom: any;
+  lang: any;
+  quickNav: any;
+  friendshipLink: any;
+  footerLogo: any;
+  footerOption: any;
+  qrcode: any;
+  footerBg: any;
+}>(), {
   simple: false,
   atom: undefined,
   lang: undefined,