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

package/src/assets/svg-icons/icon-overview.svg

@@ -1,3 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<path d="M17.484 5.148c-0.872-0.739-2.151-0.737-3.021 0.004l-10.8 9.199c-0.533 0.454-0.597 1.253-0.155 1.772l0.108 0.114c0.236 0.222 0.548 0.346 0.873 0.345l2.266-0.007v0.334l0.001 8.164c0 1.289 1.045 2.333 2.333 2.333h9.286c1.289 0 2.333-1.045 2.333-2.333v-6.243c0-1.289-1.045-2.333-2.333-2.333h-4.824c-1.289 0-2.333 1.045-2.333 2.333v4.207c0 0.331 0.269 0.6 0.6 0.6s0.6-0.269 0.6-0.6v-4.207c0-0.626 0.507-1.133 1.133-1.133h4.824c0.626 0 1.133 0.507 1.133 1.133v6.243c0 0.626-0.507 1.133-1.133 1.133h-9.286c-0.626 0-1.133-0.507-1.133-1.133v-8.419l-0.007-0.147c-0.067-0.643-0.612-1.135-1.264-1.133l-2.383 0.006 10.964-9.333 0.143-0.1c0.412-0.239 0.933-0.195 1.3 0.116l10.985 9.307-2.439 0.001c-0.7 0-1.267 0.567-1.267 1.267v10.167c0 0.331 0.269 0.6 0.578 0.601l0.104-0.006c0.295-0.040 0.518-0.293 0.518-0.595l-0.001-9.901v-0.334l2.327 0.001c0.699 0 1.267-0.567 1.267-1.267 0-0.372-0.164-0.726-0.448-0.966l-10.85-9.191z"></path>
-</svg>

package/src/assets/svg-icons/icon-setting.svg

@@ -1,3 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<path d="M19.531 3.93l0.111 0.020 0.105 0.038 0.235 0.1c1.316 0.503 2.445 1.138 3.448 1.948l0.384 0.324 0.206 0.22c0.117 0.123 0.183 0.287 0.183 0.456l-0.010 0.127-0.409 2.698c-0.107 0.71 0.252 1.406 0.887 1.732l0.16 0.071 2.489 0.93c0.154 0.057 0.281 0.17 0.357 0.314l0.048 0.112 0.022 0.097 0.151 0.799c0.234 1.395 0.235 2.834 0 4.276l-0.101 0.547-0.052 0.333c-0.028 0.175-0.125 0.331-0.268 0.434l-0.093 0.057-0.1 0.040-2.365 0.826c-0.672 0.235-1.118 0.87-1.116 1.577l0.010 0.174 0.328 2.763c0.015 0.13-0.008 0.261-0.066 0.378l-0.063 0.104-0.065 0.074-0.263 0.272c-0.359 0.329-0.785 0.654-1.243 0.946l-0.346 0.211-0.393 0.235c-0.38 0.215-0.785 0.41-1.198 0.575l-0.419 0.156-0.303 0.127c-0.201 0.084-0.429 0.065-0.612-0.050l-0.093-0.069-1.949-1.649c-0.574-0.485-1.4-0.525-2.016-0.103l-0.145 0.112-1.871 1.646c-0.139 0.122-0.322 0.18-0.504 0.162l-0.112-0.020-0.105-0.039-0.192-0.085c-1.074-0.361-2.046-0.864-2.956-1.527l-0.393-0.299-0.677-0.568c-0.152-0.127-0.238-0.314-0.238-0.511l0.010-0.123 0.399-2.629c0.108-0.716-0.258-1.418-0.902-1.74l-0.162-0.070-2.573-0.929c-0.156-0.056-0.285-0.169-0.362-0.315l-0.048-0.113-0.022-0.097-0.151-0.823c-0.233-1.439-0.235-2.915-0.005-4.297l0.098-0.519 0.060-0.377c0.034-0.213 0.169-0.396 0.361-0.491l0.107-0.043 2.422-0.808c0.697-0.233 1.158-0.894 1.138-1.624l-0.015-0.179-0.406-2.771c-0.020-0.134 0.002-0.269 0.062-0.39l0.064-0.107 0.067-0.076 0.262-0.271c0.454-0.417 1.001-0.814 1.62-1.176 0.566-0.324 1.11-0.59 1.637-0.799l0.4-0.149 0.304-0.127 0.126-0.039c0.128-0.026 0.26-0.014 0.381 0.035l0.107 0.056 0.102 0.077 1.884 1.663c0.569 0.502 1.403 0.555 2.030 0.135l0.147-0.112 1.972-1.705c0.139-0.12 0.321-0.177 0.502-0.159zM19.755 5.289l-0.19-0.078-1.707 1.478c-1.023 0.885-2.523 0.933-3.598 0.124l-0.184-0.15-1.64-1.449-0.417 0.157c-0.358 0.142-0.721 0.311-1.095 0.51l-0.372 0.205c-0.445 0.26-0.854 0.543-1.175 0.808l-0.288 0.248 0.027 0.181 0.34 2.328c0.191 1.3-0.527 2.561-1.734 3.063l-0.205 0.077-2.12 0.708-0.037 0.191-0.076 0.391c-0.183 1.099-0.206 2.26-0.069 3.394l0.067 0.477 0.068 0.368 0.035 0.188 2.266 0.818c1.217 0.439 1.987 1.639 1.884 2.923l-0.025 0.214-0.326 2.159-0.028 0.184 0.421 0.355c0.787 0.627 1.616 1.107 2.507 1.456l0.47 0.169 1.603-1.41c1.005-0.885 2.488-0.954 3.569-0.174l0.185 0.145 1.708 1.442 0.434-0.162c0.245-0.098 0.479-0.203 0.702-0.316l0.316-0.169 0.427-0.255c0.409-0.238 0.812-0.518 1.13-0.781l0.294-0.254-0.021-0.176-0.278-2.334c-0.149-1.259 0.546-2.464 1.703-2.967l0.208-0.081 2.075-0.725 0.035-0.191 0.067-0.37c0.188-1.15 0.213-2.291 0.077-3.392l-0.067-0.461-0.066-0.356-0.035-0.185-2.19-0.817c-1.201-0.448-1.957-1.64-1.855-2.913l0.025-0.212 0.344-2.268 0.028-0.186-0.287-0.238c-0.796-0.644-1.683-1.165-2.726-1.605l-0.204-0.084zM16 10.871c-2.833 0-5.129 2.296-5.129 5.129s2.297 5.129 5.129 5.129c2.833 0 5.129-2.296 5.129-5.129 0-1.076-0.333-2.111-0.954-2.98-0.193-0.27-0.567-0.332-0.837-0.139s-0.332 0.567-0.139 0.837c0.476 0.666 0.73 1.457 0.73 2.282 0 2.17-1.759 3.929-3.929 3.929s-3.929-1.759-3.929-3.929 1.759-3.929 3.929-3.929c0.246 0 0.491 0.023 0.73 0.068 0.326 0.061 0.639-0.153 0.701-0.479s-0.153-0.639-0.479-0.7c-0.312-0.059-0.63-0.088-0.951-0.088z"></path>
-</svg>

package/src/assets/svg-icons/icon-sun.svg

@@ -1,3 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path opacity="0.8" fill="currentColor" d="M12 1.992c0.387 0 0.7 0.313 0.7 0.7v1.2c0 0.387-0.313 0.7-0.7 0.7s-0.7-0.313-0.7-0.7v-1.2c0-0.387 0.313-0.7 0.7-0.7zM6.769 6.747c-0.273 0.273-0.717 0.273-0.99 0l-0.849-0.849c-0.137-0.137-0.205-0.316-0.205-0.495s0.068-0.358 0.205-0.495c0.273-0.273 0.717-0.273 0.99 0l0.849 0.849c0.136 0.137 0.205 0.316 0.205 0.495s-0.068 0.358-0.205 0.495zM18.192 6.747c-0.273 0.273-0.717 0.273-0.99 0-0.137-0.137-0.205-0.316-0.205-0.495s0.068-0.358 0.205-0.495l0.849-0.849c0.273-0.273 0.717-0.273 0.99 0 0.137 0.137 0.205 0.316 0.205 0.495s-0.068 0.358-0.205 0.495l-0.849 0.849zM5.3 12c0-3.7 3-6.7 6.7-6.7s6.7 3 6.7 6.7-3 6.7-6.7 6.7c-3.7 0-6.7-3-6.7-6.7zM17.3 12c0-2.927-2.373-5.3-5.3-5.3s-5.3 2.373-5.3 5.3c0 2.927 2.373 5.3 5.3 5.3s5.3-2.373 5.3-5.3zM4.594 11.969c0 0.387-0.313 0.7-0.7 0.7h-1.2c-0.387 0-0.7-0.313-0.7-0.7s0.313-0.7 0.7-0.7h1.2c0.386 0 0.7 0.313 0.7 0.7zM21.977 11.999c0 0.387-0.314 0.7-0.7 0.7h-1.2c-0.387 0-0.7-0.313-0.7-0.7s0.313-0.7 0.7-0.7h1.2c0.387 0 0.7 0.313 0.7 0.7zM5.921 19.060c-0.273 0.273-0.717 0.273-0.99 0-0.137-0.137-0.205-0.316-0.205-0.495s0.068-0.358 0.205-0.495l0.849-0.849c0.273-0.273 0.717-0.273 0.99 0 0.137 0.137 0.205 0.316 0.205 0.495s-0.068 0.358-0.205 0.495l-0.849 0.849zM19.041 19.060c-0.273 0.273-0.717 0.273-0.99 0l-0.849-0.849c-0.137-0.137-0.205-0.316-0.205-0.495s0.068-0.358 0.205-0.495c0.273-0.273 0.717-0.273 0.99 0l0.849 0.849c0.137 0.137 0.205 0.316 0.205 0.495s-0.068 0.358-0.205 0.495zM11.971 19.376c0.387 0 0.7 0.313 0.7 0.7v1.2c0 0.387-0.313 0.7-0.7 0.7s-0.7-0.313-0.7-0.7v-1.2c0-0.387 0.313-0.7 0.7-0.7z"></path>
-</svg>

package/src/components/OBanner.vue

@@ -1,390 +0,0 @@
-<script setup lang="ts">
-import { OButton, OCarousel, OCarouselItem, OFigure } from '@opensig/opendesign';
-import { computed, ref } from 'vue';
-
-import { useScreen, useTheme } from '@opendesign-plus/composables';
-import ContentWrapper from './common/ContentWrapper.vue';
-
-const props = defineProps({
-  options: undefined,
-  size: 'large',
-  contentJustifyCenter: false,
-});
-
-const { isLight } = useTheme('opendesignplus', document.domain || 'localhost');
-const { isPhone } = useScreen();
-
-const bannerInfo = computed(() => props.options);
-
-// 主题切换
-const theme = ref('');
-const onBeforeChange = (idx: number) => {
-  setTimeout(() => {
-    theme.value = bannerInfo.value[idx].bg_theme ?? 'light';
-  }, 100);
-};
-
-// banner跳转
-const onClick = (href: string, hasBtn: boolean | undefined) => {
-  if (href && !hasBtn) {
-    window.open(href);
-  }
-};
-</script>
-
-<template>
-  <div :class="['home-banner', size]">
-    <div v-if="size === 'tiny'">
-      {{ bannerInfo[1].title }}
-    </div>
-
-    <OCarousel
-      v-else-if="!isPhone"
-      class="banner-carousel"
-      effect="toggle"
-      active-class="current-slide"
-      indicator-click
-      :auto-play="true"
-      :data-o-theme="theme"
-      @before-change="onBeforeChange"
-    >
-      <OCarouselItem v-for="(info, index) in bannerInfo" :key="index" class="banner-item" :class="`banner-item${index}`">
-        <OFigure
-          class="banner-bg"
-          :src="info.bg"
-          :class="{
-            'with-sticky-bg': info.withStickyBg,
-            'in-dark': !isLight,
-            'cursor-pointer': info.href && !info.btn,
-          }"
-          :style="{
-            '--pad-offset': info.pad_offset,
-          }"
-          @click="onClick(info.href, info.btn)"
-        >
-          <ContentWrapper class="banner-wrapper" :class="['banner-wrapper', contentJustifyCenter ? 'content-center' : '']">
-            <div class="banner-content">
-              <img v-if="!isPhone && info.attach" :src="info.attach" class="banner-attach" />
-
-              <!-- 标题 -->
-              <div class="banner-title" v-if="info.title">{{ info.title }}</div>
-              <!-- 副标题 -->
-              <div class="banner-subtitle" v-if="info.subtitle">{{ info.subtitle }}</div>
-              <div
-                class="banner-text"
-                v-if="info.bg_text"
-                :style="{
-                  backgroundImage: `url(${info.bg_text})`,
-                  '--pc-width': info.pc_text_width,
-                  '--pc-height': info.pc_text_height,
-                  '--pad-width': info.pad_text_width,
-                  '--pad-height': info.pad_text_height,
-                }"
-              ></div>
-              <!-- 操作按钮 -->
-              <div v-if="info.btn" class="banner-opts">
-                <OButton :href="info.href" target="_blank" variant="solid" color="primary" :size="size">
-                  {{ info.btn }}
-                </OButton>
-              </div>
-            </div>
-          </ContentWrapper>
-        </OFigure>
-      </OCarouselItem>
-    </OCarousel>
-
-    <OCarousel
-      v-else="isPhone"
-      class="banner-carousel"
-      effect="gallery"
-      indicator-click
-      :data-o-theme="theme"
-      arrow="never"
-      :auto-play="true"
-      @before-change="onBeforeChange"
-    >
-      <OCarouselItem v-for="(info, index) in bannerInfo" class="banner-item" :class="`banner-item${index}`">
-        <ContentWrapper class="banner-wrapper">
-          <OFigure class="banner-bg" :src="info.bg" @click="onClick(info.href)" />
-        </ContentWrapper>
-      </OCarouselItem>
-    </OCarousel>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.home-banner {
-  overflow: hidden;
-  position: relative;
-
-  &.tiny {
-    @include display2;
-    font-weight: 500;
-    margin: var(--o-gap-8) 0;
-    color: var(--o-color-info1);
-  }
-
-  .banner-title {
-    color: var(--o-color-info1);
-    font-weight: 500;
-    font-size: 48px; // 基础字体大小
-    margin-bottom: 8px;
-  }
-
-  .banner-subtitle {
-    color: var(--o-color-info1);
-    margin-top: 8px;
-    font-size: 16px;
-  }
-
-  .banner-text {
-    height: var(--pc-height);
-    width: var(--pc-width);
-    background-size: contain;
-    background-repeat: no-repeat;
-
-    @include respond-to('pad') {
-      height: var(--pad-height);
-      width: var(--pad-width);
-    }
-  }
-
-  &.large {
-    --banner-height: 460px;
-    height: var(--banner-height);
-
-    .banner-title {
-      @include display1;
-    }
-
-    .banner-subtitle {
-      @include h4;
-    }
-
-    @include respond-to('laptop-pc_s') {
-      --banner-height: 400px;
-    }
-
-    @include respond-to('pad_h') {
-      --banner-height: 360px;
-    }
-
-    @include respond-to('<=pad_v') {
-      --banner-height: 184px;
-    }
-  }
-
-  &.medium {
-    --banner-height: 360px;
-    height: var(--banner-height);
-
-    .banner-title {
-      @include display2;
-    }
-
-    .banner-subtitle {
-      @include text2;
-    }
-
-    @include respond-to('laptop-pc_s') {
-      --banner-height: 280px;
-    }
-
-    @include respond-to('pad_h') {
-      --banner-height: 220px;
-    }
-
-    @include respond-to('<=pad_v') {
-      --banner-height: 120px;
-    }
-
-    .banner-text {
-      --pc-height: 100px !important;
-      --pc-width: 500px !important;
-
-      @include respond-to('pad') {
-        --pc-height: 60px !important;
-        --pc-width: 300px !important;
-      }
-    }
-  }
-
-  &.small {
-    --banner-height: 280px;
-    height: var(--banner-height);
-
-    .banner-title {
-      @include display2;
-    }
-
-    .banner-subtitle {
-      @include text2;
-    }
-
-    @include respond-to('laptop-pc_s') {
-      --banner-height: 220px;
-    }
-
-    @include respond-to('pad_h') {
-      --banner-height: 180px;
-    }
-
-    @include respond-to('<=pad_v') {
-      display: none;
-    }
-
-    .banner-text {
-      --pc-height: 80px !important;
-      --pc-width: 400px !important;
-
-      @include respond-to('pad') {
-        --pc-height: 50px !important;
-        --pc-width: 250px !important;
-      }
-    }
-  }
-
-  :deep(.o-btn) {
-    border-radius: var(--btn-height);
-  }
-}
-
-.banner-carousel {
-  width: 100%;
-  height: 100%;
-  @include respond-to('>pad_v') {
-    --carousel-indicator-offset: 53px;
-  }
-
-  @include respond-to('<=pad_v') {
-    --carousel-indicator-offset: 1px;
-  }
-
-  :deep(.o-carousel-indicator-bar) {
-    height: 24px;
-  }
-}
-
-.banner-item {
-  width: 100%;
-  height: 100%;
-}
-
-.banner-bg {
-  width: 100%;
-  height: 100%;
-
-  :deep(.o-figure-img) {
-    width: 100%;
-    height: 100%;
-  }
-
-  @include respond-to('pad') {
-    :deep(.o-figure-img) {
-      transition: object-position 0.3s ease;
-      object-position: var(--pad-offset);
-    }
-  }
-
-  @include respond-to('phone') {
-    --figure-radius: 4px;
-  }
-}
-
-.banner-wrapper {
-  height: 100%;
-
-  &.content-center {
-    display: flex;
-    justify-content: center;
-
-    & .banner-content {
-      align-items: center;
-    }
-  }
-}
-
-.banner-content {
-  height: 100%;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: center;
-  position: relative;
-}
-
-.banner-opts {
-  margin-top: 24px;
-  --d: 20px;
-}
-
-@keyframes fade-up {
-  from {
-    transform: translateY(var(--d));
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.current-slide {
-  .banner-title {
-    animation: fade-up 400ms ease-in;
-  }
-  .banner-subtitle {
-    animation: fade-up 400ms ease-in;
-  }
-  .banner-text {
-    animation: fade-up 400ms ease-in;
-  }
-  .banner-opts {
-    animation: fade-up 400ms ease-in;
-  }
-}
-
-.in-dark.with-sticky-bg {
-  :deep(.o-figure-img) {
-    @include img-in-dark;
-  }
-}
-.cursor-pointer {
-  cursor: pointer;
-}
-</style>
-
-<style lang="scss" scoped>
-// 定制修改item1
-.banner-item0 {
-  .banner-attach {
-    height: 120px;
-
-    @include respond-to('pad') {
-      height: 80px;
-    }
-  }
-}
-
-.banner-item1 {
-  .banner-attach {
-    height: 156px;
-
-    @include respond-to('pad') {
-      height: 120px;
-    }
-  }
-}
-
-// 定制修改item2
-.banner-item2 {
-  .banner-content {
-    width: 100%;
-    justify-content: center;
-  }
-  .banner-attach {
-    height: 38%;
-    margin-top: -60px;
-    object-fit: contain;
-  }
-}
-</style>