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

package/src/draft/OInfoCard.vue

@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import { OCard, OLink } from '@opensig/opendesign';
+import { useScreen } from '@/composables/useScreen';
+import { ref, watch, type Component } from 'vue';
+
+const { lePadV } = useScreen();
+
+interface LinkT {
+  title: string;
+  target?: '_blank' | '_self';
+  href?: string;
+}
+
+interface BgImgT {
+  pcImg: string;
+  padImg: string;
+  mbImg: string;
+}
+
+export interface LinkCardItemT {
+  icon: Component;
+  title: string;
+  desc: string;
+  links: LinkT[];
+  linkLayout?: 'block' | 'inline';
+  bgImg?: BgImgT;
+  bgPosition?: string;
+}
+
+const props = defineProps<{
+  item: LinkCardItemT;
+}>();
+
+const links = ref<LinkT[]>([]);
+watch(
+  () => props.item,
+  () => {
+    links.value = props.item.links;
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <OCard
+    :href="lePadV && links.length === 1 && links[0].href ? links[0].href : undefined"
+    class="info-card"
+    :style="[{ backgroundImage: `url(${props.item.bgImg?.pcImg})` }, props.item.bgPosition ? { backgroundPosition: props.item.bgPosition } : {}]"
+  >
+    <template #main>
+      <div class="header">
+        <div class="title">
+          <component :is="item.icon" class="title-icon"></component>
+          <span class="title-text">{{ item.title }}</span>
+        </div>
+        <div class="desc">{{ item.desc }}</div>
+      </div>
+
+      <div v-if="lePadV" class="footer" :class="item.linkLayout ? item.linkLayout : ''">
+        <OLink v-for="(link, index) in links" :key="index" hover-underline class="link-item" :href="link.href" :target="link.target" color="primary">
+          {{ link.title }}
+        </OLink>
+      </div>
+
+      <div v-if="!lePadV && links.length > 1" class="footer" :class="item.linkLayout ? item.linkLayout : ''">
+        <OLink v-for="(link, index) in links" :key="index" hover-underline class="link-item" :href="link.href" :target="link.target" color="primary">
+          {{ link.title }}
+        </OLink>
+      </div>
+    </template>
+  </OCard>
+</template>
+
+<style lang="scss" scoped>
+.info-card {
+  height: 100%;
+  --bg-height: 100%;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  position: relative;
+  @include respond-to('<=pad_v') {
+    background-size: auto var(--bg-height);
+    height: auto;
+    &.has-bg-img {
+      :deep(.o-card-main) {
+        padding-top: 48px;
+      }
+    }
+  }
+  --padding-bottom: 0;
+  :deep(.o-card-main) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    @include respond-to('<=pad_v') {
+      padding-bottom: var(--padding-bottom);
+    }
+  }
+}
+
+.title {
+  @include h1;
+  color: var(--o-color-info1);
+  font-weight: 600;
+  vertical-align: vertical;
+}
+
+.title-icon {
+  line-height: var(--o-icon_size-l);
+  font-size: var(--o-icon_size-l);
+  margin-right: var(--o3-gap-2);
+  position: relative;
+  top: calc((var(--o-icon_size-l) - var(--line-height)) / 2);
+}
+
+.desc {
+  @include text1;
+  color: var(--o-color-info3);
+  margin-top: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-clamp: 2;
+}
+
+.footer {
+  @include text1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  &.block {
+    flex-direction: column;
+    .link-item {
+      margin-right: 0;
+    }
+  }
+
+  @include respond-to('>pad_v') {
+    :deep(.o-link-main) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      line-clamp: 1;
+    }
+
+    margin-top: calc(-1 * var(--o3-gap-3) + var(--o3-gap-5));
+
+    .link-item {
+      margin-left: var(var(--o3-gap-7));
+      margin-top: var(--o3-gap-3);
+    }
+    :deep(.o-link) {
+      display: inline-flex;
+      flex-direction: row-reverse;
+      .o-link-prefix {
+        margin-right: 0;
+        margin-left: var(--link-gap);
+      }
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    border-top: 1px solid #edeff2;
+    margin: 8px -12 px 0 -12px;
+    padding: 0 12px;
+  }
+}
+
+.link-item {
+  --link-icon-size: var(--o-icon_size-m);
+}
+</style>

package/src/draft/Process.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import {} from '@opensig/opendesign';
+import arrow from '@/assets/category/process/arrow.png';
+
+interface ProcessItem {
+  title: string;
+  icon?: any;
+}
+
+const props = defineProps<{
+  process: ProcessItem[];
+}>();
+
+const serials = computed(() => props.process.map((_, idx) => String(idx + 1).padStart(2, '0')));
+</script>
+
+<template>
+  <div class="process-list">
+    <template v-for="(item, idx) in props.process" :key="idx">
+      <div class="process-item">
+        <div class="icon">
+          <component :is="item.icon" v-if="item.icon" />
+        </div>
+        <div class="serial">
+          <span class="clip-text">{{ serials[idx] }}</span>
+        </div>
+        <div class="title">{{ item.title }}</div>
+      </div>
+      <img v-if="idx < props.process.length - 1" :src="arrow" alt="arrow" class="process-arrow" />
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.process-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.process-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 80px;
+  flex: 1 1 0;
+}
+.process-arrow {
+  width: 44px;
+  height: 6px;
+  margin: 0 1rem;
+  flex-shrink: 0;
+}
+.icon {
+  font-size: 48px;
+  margin-bottom: 0.5rem;
+}
+.serial {
+  margin-bottom: 0.5rem;
+  .clip-text {
+    font-size: 48px;
+    font-weight: bold;
+    clip-path: polygon(0 0, 100% 0, 100% 54%, 0 54%);
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 54%, 0 54%);
+    color: var(--o-color-info3);
+    opacity: 0.4;
+    line-height: 1;
+    display: inline-block;
+  }
+}
+.title {
+  @include text1;
+  font-weight: 600;
+  margin-top: 0.5rem;
+  text-align: center;
+  position: relative;
+  top: -20px;
+}
+</style>

package/src/draft/Section.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { isArray, OLink } from '@opensig/opendesign';
+
+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 {
+  .section-wrapper {
+    max-width: 1416px;
+    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-t2c);
+  }
+
+  .section-footer {
+    max-width: var(--layout-content-max-width);
+    padding: 0 var(--layout-content-padding);
+    margin: 0 auto;
+
+    display: flex;
+    justify-content: center;
+    @include text1;
+
+    margin-top: 32px;
+
+    @include respond-to('<=laptop') {
+      margin-top: 16px;
+    }
+
+    @include respond-to('phone') {
+      margin-top: 12px;
+    }
+  }
+
+  .footer-icon {
+    font-size: 16px;
+  }
+}
+</style>

package/src/draft/SingleTabCard.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { type PropType } from 'vue';
+import { OButton, OCard, OTab, OTabPane } from '@opensig/opendesign';
+import { useScreen } from '@/composables/useScreen';
+
+const { lePadV } = useScreen();
+
+interface ButtonT {
+    text: string;
+    href?: string;
+}
+
+interface CardT {
+    title: string;
+    content: string;
+    cover?: string;
+    buttons?: ButtonT[];
+}
+
+interface TabListT {
+    title: string;
+    card: CardT;
+}
+
+defineProps({
+    tabs: {
+        type: Array as PropType<TabListT[]>,
+        default: () => [],
+    },
+});
+</script>
+<template>
+    <div class="wrapper">
+        <template v-if="tabs.length === 1">
+            <OCard :title="tabs[0].card.title" :detail="tabs[0].card.content" :cover="tabs[0].card.cover"
+                :layout="lePadV ? 'v' : 'hr'" :cover-ratio="lePadV ? undefined : 16 / 9" class="single-card">
+                <template #footer>
+                    <div class="buttons">
+                        <OButton v-for="(button, index) in tabs[0].card.buttons" :key="index" :href="button.href"
+                            color="primary" round="pill" variant="outline" class="button">{{ button.text }}
+                        </OButton>
+                    </div>
+                </template>
+            </OCard>
+        </template>
+        <template v-else>
+            <OTab :line="false" class="section-tab">
+                <OTabPane v-for="(tab, index) in tabs" :key="index" :label="tab.title" :value="tab.title"
+                    class="tab-pane">
+                    <OCard :title="tab.card.title" :detail="tab.card.content" :cover="tab.card.cover"
+                        :layout="lePadV ? 'v' : 'hr'" :cover-ratio="lePadV ? undefined : 16 / 9" class="single-card">
+                        <template #footer>
+                            <div class="buttons">
+                                <OButton v-for="(button, index) in tab.card.buttons" :key="index" :href="button.href"
+                                    color="primary" round="pill" variant="outline" class="button">{{ button.text }}
+                                </OButton>
+                            </div>
+                        </template>
+                    </OCard>
+                </OTabPane>
+            </OTab>
+        </template>
+
+    </div>
+</template>
+<style lang="scss" scoped>
+.section-tab {
+    :deep(.o-tab-pane) {
+        padding-top: var(--o3-gap-5);
+    }
+}
+
+.buttons {
+    display: flex;
+    gap: var(--o3-gap-4);
+}
+
+.single-card {
+    @include respond-to('<=pad_v') {
+        :deep(.o-figure-img) {
+            height: 184px;
+        }
+    }
+}
+</style>

package/src/draft/SliderCard.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { OCarousel, OCarouselItem, OFigure, OLink } from '@opensig/opendesign';
+import { useScreen } from '@/composables/useScreen';
+
+const { lePadV } = useScreen();
+
+interface CardT {
+  title: string;
+  content: string;
+  cover: string;
+  href: string;
+}
+
+const props = defineProps({
+  cards: {
+    type: Array as () => CardT[],
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div class="wrapper">
+    <OCarousel v-if="!lePadV" class="slider-card" indicator-click :loop="true" effect="toggle">
+      <OCarouselItem v-for="(card, index) in props.cards" :key="index" class="slider-card-item">
+        <OFigure :src="card.cover" :alt="card.title" class="slider-card-cover">
+          <div class="card-content">
+            <div class="card-title">{{ card.title }}</div>
+            <div class="card-description">{{ card.content }}</div>
+            <OLink v-if="card.href" :href="card.href" class="card-link"> 了解更多 </OLink>
+          </div>
+        </OFigure>
+      </OCarouselItem>
+    </OCarousel>
+    <OCarousel v-else class="slider-card" indicator-click :loop="true" effect="toggle">
+      <OCarouselItem v-for="(card, index) in props.cards" :key="index" class="slider-card-item">
+        <OFigure :src="card.cover" :alt="card.title" class="slider-card-cover">
+          <div class="card-content">
+            <div class="card-title">{{ card.title }}</div>
+            <div class="card-description">{{ card.content }}</div>
+            <OLink v-if="card.href" :href="card.href" class="card-link"> 了解更多 </OLink>
+          </div>
+        </OFigure>
+      </OCarouselItem>
+    </OCarousel>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-card {
+  --slide-width: calc(70vw - 36px);
+  --slide-gap: 16px;
+  --carousel-indicator-offset: -32px;
+  height: 360px;
+  width: 100%;
+  overflow: visible;
+  :deep(.the-slider-container) {
+    height: 100%;
+    overflow: hidden;
+  }
+  :deep(.o-carousel-indicator-bar) {
+    width: 100%;
+    &::after {
+      border-radius: 6px;
+    }
+    &::before {
+      border-radius: 6px;
+    }
+  }
+  @include respond-to('pc_s') {
+    height: 300px;
+  }
+  @include respond-to('<=laptop') {
+    height: 280px;
+  }
+  @include respond-to('<=pad_v') {
+    --slide-width: calc(100vw - 64px);
+    width: calc(var(--slide-gap) + var(--slide-width));
+    height: 184px;
+  }
+}
+
+.slider-card-item {
+  height: 100%;
+}
+
+.slider-card-cover {
+  width: 100%;
+  height: 100%;
+}
+
+.card-content {
+  padding: 0 96px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+.card-title {
+  @include h1;
+  font-weight: 600;
+  color: var(--o-color-info1);
+}
+
+.card-description {
+  margin-top: var(--o3-gap-3);
+  margin-bottom: var(--o3-gap-7);
+}
+</style>

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/i18n/en.ts

@@ -0,0 +1,20 @@
+export default {
+  search: 'Search',
+  'search.hot': 'Top search',
+  'search.placeholder': 'Please enter the content',
+  'search.expandedPlaceholder': 'Please enter the content',
+  'search.history': 'History',
+  'cookie.title': '{0} Community Respects Your Privacy',
+  'cookie.desc': 'This site uses cookies from us and our partners to improve your browsing experience and make the site work properly. By clicking "Accept All", you consent to the use of cookies. By clicking "Reject All", you disable the use of unnecessary cookies. You can manage your cookie settings by clicking "Manage Cookies". For more information or to change your cookie settings, please refer to our ',
+  'cookie.about': 'About Cookies',
+  'cookie.acceptAll': 'Accept All',
+  'cookie.rejectAll': 'Reject All',
+  'cookie.manage': 'Manage Cookies',
+  'cookie.necessaryCookie': 'Strictly Necessary Cookies',
+  'cookie.alwaysOn': 'Always active',
+  'cookie.necessaryCookieDetail': 'These cookies are necessary for the site to work properly and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as logging in or filling in forms. You can set the browser to block these cookies, but that can make parts of the site not work. These cookies do not store any personally identifiable information.',
+  'cookie.analyticalCookie': 'Analytics Cookies',
+  'cookie.analyticalCookieDetail': 'We will use these cookies only with your consent. These cookies help us make improvements by collecting statistics such as the number of visits and traffic sources.',
+  'cookie.saveSetting': 'Save Settings',
+  'cookie.setting': 'Cookie settings',
+};

package/src/i18n/index.ts

@@ -0,0 +1,42 @@
+import { computed, inject, getCurrentInstance, ref } from 'vue';
+
+import zh from './zh';
+import en from './en';
+import { configProviderInjectKey } from '@/shared/provide';
+import { isString, isUndefined } from '@opensig/opendesign';
+
+const i18nLangs = ref({
+  zh,
+  en,
+});
+
+export function useI18n() {
+  const instance = getCurrentInstance();
+  const configProvider = instance ? inject(configProviderInjectKey) : null;
+  const locale = computed(() => {
+    return configProvider?.locale || 'zh';
+  });
+
+  const transform = (key: string, ...args: any[]): string => {
+    const lang = i18nLangs.value[locale.value];
+    const value = lang[key as keyof typeof lang];
+
+    // 处理变量替换
+    if (args.length > 0 && isString(value)) {
+      return value.replace(/{(\d+)}/g, (match, index) => {
+        return args[index] ?? match;
+      });
+    }
+
+    if (isUndefined(value)) {
+      console.warn(`Cannot translate the value of keypath '${key}'`);
+    }
+
+    return value;
+  };
+
+  return {
+    locale,
+    t: transform,
+  };
+}

package/src/i18n/zh.ts

@@ -0,0 +1,9 @@
+export default {
+  search: '搜索',
+  'search.hot': '热门搜索',
+  'search.placeholder': '搜索',
+  'search.expandedPlaceholder': '请输入搜索内容',
+  'search.history': '历史搜索',
+  'cookie.desc': '我们使用cookie来确保您的高速浏览体验。继续浏览本站，即表示您同意我们使用cookie。',
+  'cookie.about': '查看详情',
+};