@opendesign-plus-test/components 0.0.1-rc.2

package/src/components/OSection.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { isArray, OLink, OIcon } from '@opensig/opendesign';
+import IconChevronRight from '~icons/components/icon-chevron-right.svg';
+
+interface SectionPropsT {
+  title?: string | Array<string>;
+  subtitle?: string;
+  full?: boolean;
+  headerJustifyCenter?: boolean;
+  footer?: string;
+  footerHref?: string;
+}
+
+const props = withDefaults(defineProps<SectionPropsT>(), {
+  title: undefined,
+  subtitle: undefined,
+  full: false,
+  headerJustifyCenter: true,
+  footer: undefined,
+  footerHref: undefined,
+});
+</script>
+
+<template>
+  <div class="app-section" :class="{ 'is-full': props.full }">
+    <div class="section-wrapper">
+      <slot name="main">
+        <!-- header -->
+        <div v-if="$slots.header || props.title || props.subtitle" class="section-header" :class="{ 'is-left': !props.headerJustifyCenter }">
+          <slot name="header">
+            <template v-if="isArray(props.title)">
+              <h2 v-for="item in props.title" :key="item" class="section-title">
+                {{ item }}
+              </h2>
+            </template>
+            <h2 v-else-if="$slots.title || props.title" class="section-title">
+              <slot name="title">
+                {{ props.title }}
+              </slot>
+            </h2>
+            <p v-if="$slots.subtitle || props.subtitle" class="section-subtitle">
+              <slot name="subtitle">
+                {{ props.subtitle }}
+              </slot>
+            </p>
+          </slot>
+        </div>
+
+        <!-- body -->
+        <div v-if="$slots.default" class="section-body">
+          <slot></slot>
+        </div>
+
+        <!-- footer -->
+        <div v-if="$slots.footer || props.footer" class="section-footer">
+          <slot name="footer">
+            <OLink :href="props.footerHref" target="_blank">
+              {{ props.footer }}
+              <template #suffix>
+                <OIcon class="footer-icon"><IconChevronRight /> </OIcon>
+              </template>
+            </OLink>
+          </slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-section {
+  --o-gap-section: var(--o-gap-7);
+  .section-wrapper {
+    margin: var(--o-gap-section) auto 0;
+  }
+
+  &.is-full {
+    .section-body {
+      max-width: 100%;
+      width: 100%;
+      padding: 0;
+    }
+  }
+
+  &:last-child {
+    .section-wrapper {
+      padding-bottom: var(--o-gap-section);
+    }
+  }
+
+  .section-header {
+    &.is-left {
+      .section-title,
+      .section-subtitle {
+        justify-content: start;
+      }
+    }
+  }
+
+  .section-title {
+    max-width: var(--layout-content-max-width);
+    padding: 0 var(--layout-content-padding);
+    margin: 0 auto;
+
+    display: flex;
+    justify-content: center;
+    color: var(--o-color-info1);
+    text-align: center;
+    @include display3;
+    font-weight: 500;
+  }
+
+  .section-subtitle {
+    max-width: var(--layout-content-max-width);
+    padding: 0 var(--layout-content-padding);
+    margin: 0 auto;
+
+    display: flex;
+    justify-content: center;
+    margin-top: 12px;
+    color: var(--o-color-info2);
+    @include text1;
+
+    @include respond-to('pad-laptop') {
+      margin-top: 8px;
+    }
+
+    @include respond-to('phone') {
+      margin-top: 12px;
+      text-align: center;
+    }
+  }
+
+  .section-body {
+    max-width: var(--layout-content-max-width);
+    padding: 0 var(--layout-content-padding);
+    margin: 0 auto;
+
+    margin-top: var(--o-gap-7);
+  }
+
+  .section-footer {
+    max-width: var(--layout-content-max-width);
+    padding: 0 var(--layout-content-padding);
+    margin: 0 auto;
+    color: var(--o-color-info1);
+
+    display: flex;
+    justify-content: center;
+    @include text1;
+
+    margin-top: 32px;
+
+    :deep(.o-btn) {
+      border-radius: var(--btn-height);
+    }
+
+    @include respond-to('<=laptop') {
+      margin-top: 16px;
+    }
+
+    @include respond-to('phone') {
+      margin-top: 12px;
+    }
+
+    &:hover {
+      .footer-icon {
+        fill: var(--link-color-active);
+      }
+    }
+  }
+
+  .footer-icon {
+    font-size: 16px;
+    height: 24px;
+  }
+}
+</style>

package/src/components/OThemeSwitcher.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { Component, computed } from 'vue';
+import { OIcon, OSwitch } from '@opensig/opendesign';
+import { useScreen } from '@opendesign-plus/composables';
+
+import IconSun from '~icons/components/icon-sun.svg';
+import IconMoon from '~icons/components/icon-moon.svg';
+
+export interface OThemeSwitcherPropsT {
+  theme?: string;
+  type?: 'auto' | 'common' | 'mobile';
+  lightValue?: string;
+  darkValue?: string;
+  lightIcon?: Component;
+  darkIcon?: Component;
+}
+
+export interface OThemeSwitcherEmitsT {
+  (e: 'update:theme', value: string): void;
+  (e: 'change', val: string): void;
+}
+
+const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
+  theme: 'light',
+  type: 'auto',
+  lightValue: 'light',
+  darkValue: 'dark',
+  lightIcon: IconSun,
+  darkIcon: IconMoon,
+});
+
+const emit = defineEmits<OThemeSwitcherEmitsT>();
+
+const { gtPhone } = useScreen();
+
+const switchVal = computed({
+  get() {
+    return props.theme;
+  },
+  set(val) {
+    emit('update:theme', val);
+    emit('change', val);
+  },
+});
+
+const isCommon = computed(() => {
+  return props.type === 'common' || (props.type === 'auto' && gtPhone.value);
+});
+
+const toggleTheme = () => {
+  switchVal.value = switchVal.value === props.lightValue ? props.darkValue : props.lightValue;
+};
+</script>
+
+<template>
+  <div class="o-theme-switcher">
+    <div v-if="isCommon" class="o-theme-switcher-common" @click="toggleTheme">
+      <OIcon class="o-theme-icon">
+        <IconMoon v-if="switchVal === lightValue" />
+        <IconSun v-else />
+      </OIcon>
+    </div>
+
+    <div v-else class="o-theme-switcher-mobile">
+      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="darkValue" :unchecked-value="lightValue">
+        <template #on>
+          <OIcon class="o-theme-icon">
+            <IconSun />
+          </OIcon>
+        </template>
+        <template #off>
+          <OIcon class="o-theme-icon">
+            <IconMoon />
+          </OIcon>
+        </template>
+      </OSwitch>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.o-theme-switcher-common {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+
+  .o-theme-icon {
+    font-size: 24px;
+    color: var(--o-color-info1);
+
+    @include hover {
+      color: var(--o-color-primary1);
+    }
+  }
+}
+
+.o-theme-switcher-mobile {
+  .o-theme-switch {
+    background-color: var(--o-color-control1-light);
+
+    .o-theme-icon {
+      color: var(--o-color-white);
+    }
+  }
+}
+</style>

package/src/components/common/ClientOnlyWrapper.ts

@@ -0,0 +1,21 @@
+import { defineComponent, onMounted, ref, h, resolveComponent } from 'vue';
+
+const fallback = (slots: any) => {
+  const show = ref(false);
+
+  onMounted(() => {
+    show.value = true;
+  });
+
+  return () => (show.value && slots.default ? slots.default() : null);
+};
+
+export default defineComponent({
+  setup(_, { slots }) {
+    const BuiltIn = resolveComponent('ClientOnly');
+    if (BuiltIn && typeof BuiltIn !== 'string') {
+      return () => h(BuiltIn, null, { default: () => slots.default ? slots.default() : null });
+    }
+    return fallback(slots);
+  },
+});

package/src/components/common/ContentWrapper.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { isBoolean, isString, isUndefined } from '@opensig/opendesign';
+import { computed } from 'vue';
+
+const DEFAULT = Symbol('default');
+
+interface ContentWrapperPropsT {
+  verticalPadding?: boolean | string | Array<string>;
+}
+
+const props = withDefaults(defineProps<ContentWrapperPropsT>(), {
+  verticalPadding: undefined,
+});
+
+const paddingTop = computed(() => {
+  if (!props.verticalPadding) {
+    return 0;
+  }
+
+  if (isBoolean(props.verticalPadding)) {
+    return DEFAULT;
+  } else if (isString(props.verticalPadding)) {
+    return props.verticalPadding;
+  } else {
+    return props.verticalPadding[0];
+  }
+});
+
+const paddingBottom = computed(() => {
+  if (!props.verticalPadding) {
+    return 0;
+  }
+
+  if (isBoolean(props.verticalPadding)) {
+    return DEFAULT;
+  } else if (isString(props.verticalPadding)) {
+    return props.verticalPadding;
+  } else {
+    return !isUndefined(props.verticalPadding[1]) ? props.verticalPadding[1] : props.verticalPadding[0];
+  }
+});
+</script>
+
+<template>
+  <div
+    class="content-wrapper"
+    :style="{
+      '--content-wrapper-vertical-paddingTop': paddingTop === DEFAULT ? undefined : paddingTop,
+      '--content-wrapper-vertical-paddingBottom': paddingBottom === DEFAULT ? undefined : paddingBottom,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content-wrapper {
+  --layout-content-max-width: 1544px;
+  --layout-content-padding: 64px;
+  --layout-header-height: 80px;
+
+  @include respond-to('<=laptop') {
+    --layout-content-max-width: 100%;
+    --layout-content-padding: 40px;
+  }
+
+  @include respond-to('<=pad') {
+    --layout-content-padding: 32px;
+  }
+
+  @include respond-to('phone') {
+    --layout-content-padding: 24px;
+  }
+
+  max-width: var(--layout-content-max-width);
+  padding-left: var(--layout-content-padding);
+  padding-right: var(--layout-content-padding);
+  margin: 0 auto;
+
+  --content-wrapper-vertical-paddingTop: 72px;
+  --content-wrapper-vertical-paddingBottom: 72px;
+  padding-top: var(--content-wrapper-vertical-paddingTop);
+  padding-bottom: var(--content-wrapper-vertical-paddingBottom);
+}
+</style>

package/src/draft/Banner.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { onMounted, type PropType } from 'vue';
+import { OButton } from '@opensig/opendesign';
+
+import AOS from 'aos';
+
+import ContentWrapper from './ContentWrapper.vue';
+
+defineProps({
+  backgroundImage: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  href: {
+    type: String,
+    default: '',
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  // 风格
+  theme: {
+    type: String as PropType<'light' | 'dark'>,
+    default: 'light',
+  },
+  // 指定在何处显示链接的资源
+  target: {
+    type: String,
+    default: '_blank',
+  },
+  size: {
+    type: String as PropType<'small' | 'medium' | 'large'>,
+    default: 'medium',
+  },
+});
+
+onMounted(() => {
+  AOS.init({
+    duration: 800,
+  });
+});
+</script>
+
+<template>
+  <div class="banner-content" :class="`banner-${size}`">
+    <div class="banner-bg" :style="{ backgroundImage: `url(${backgroundImage})` }"></div>
+    <ContentWrapper class="banner-text">
+      <div class="banner-text-content">
+        <p v-if="title" class="banner-title" data-aos="fade-up">{{ title }}</p>
+        <p v-if="subtitle" class="banner-subtitle" data-aos="fade-up">
+          {{ subtitle }}
+        </p>
+        <OButton v-if="href" variant="outline" color="primary" size="medium" :href="href" :target="target"
+          class="learn-btn">
+          <span>{{ text }}</span>
+        </OButton>
+      </div>
+    </ContentWrapper>
+  </div>
+</template>
+
+<style lang="scss">
+.banner-content {
+  width: 100%;
+  position: relative;
+}
+
+.banner-bg {
+  height: 100%;
+  margin: 0 auto;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.banner-text {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.banner-text-content {
+  height: 100%;
+}
+
+.learn-btn {
+  margin-top: 24px;
+}
+
+.banner-small {
+  height: 280px;
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    padding-top: 48px;
+    @include display2;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    width: 60%;
+    @include text2;
+  }
+
+  @media (min-width: 1201px) and (max-width: 1680px) {
+    height: 220px;
+
+    .banner-title {
+      padding-top: 40px;
+      @include display3;
+    }
+
+    .banner-subtitle {
+      @include text1;
+    }
+  }
+
+  @include respond-to('pad_h') {
+    height: 180px;
+
+    .banner-title {
+      padding-top: 32px;
+      @include h1;
+    }
+
+    .banner-subtitle {
+      @include tip1;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    display: none;
+  }
+}
+
+.banner-medium {
+  height: 360px;
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    padding-top: 88px;
+    @include display2;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    width: 60%;
+    @include text2;
+  }
+
+  @media (min-width: 1201px) and (max-width: 1680px) {
+    height: 280px;
+
+    .banner-title {
+      padding-top: 64px;
+      @include display3;
+    }
+
+    .banner-subtitle {
+      @include text1;
+    }
+  }
+
+  @include respond-to('pad_h') {
+    height: 220px;
+
+    .banner-title {
+      padding-top: 48px;
+      @include h1;
+    }
+
+    .banner-subtitle {
+      @include tip1;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    height: 120px;
+
+    .banner-title {
+      text-align: center;
+      padding-top: 48px;
+      @include h3;
+    }
+
+    .banner-subtitle {
+      display: none;
+    }
+  }
+}
+
+.banner-large {
+  height: 460px;
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    padding-top: 124px;
+    @include display1;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    width: 60%;
+    @include h4;
+  }
+
+  @media (min-width: 1201px) and (max-width: 1680px) {
+    height: 400px;
+
+    .banner-title {
+      padding-top: 100px;
+      @include display2;
+    }
+
+    .banner-subtitle {
+      @include text2;
+    }
+  }
+
+  @include respond-to('pad_h') {
+    height: 320px;
+
+    .banner-title {
+      padding-top: 80px;
+      @include display3;
+    }
+
+    .banner-subtitle {
+      @include text1;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    height: 184px;
+
+    .banner-title {
+      text-align: center;
+      padding-top: 48px;
+      @include h3;
+    }
+
+    .banner-subtitle {
+      text-align: center;
+      @include tip2;
+    }
+  }
+}
+</style>