@opendesign-plus/components 0.0.1-rc.3 → 0.0.1-rc.31

package/src/components/header/types.ts

@@ -0,0 +1,96 @@
+type tagT = 'HOT' | 'NEW';
+
+export enum NavType {
+  NAV = 'nav',
+  CODE = 'code',
+  LANG = 'lang',
+}
+
+export interface ChildrenItemT {
+  label: string; // 标题
+  description?: string; // 描述
+  href?: string; // 链接
+  tag?: tagT; // 标签
+  icon?: any;
+  target?: string;
+  children?: ChildrenItemT[];
+}
+
+export interface ShortcutItemT {
+  label: string; // 标题
+  description?: string; // 描述
+  picture?: string; // 缩略图
+  href?: string; // 链接
+  tag?: tagT; // 标签
+  remark?: string; // 时间
+  type?: string; // 类型
+  target?: string;
+  icon?: string;
+}
+
+export interface NavItemT {
+  label: string; // 标题
+  id: string; // id
+  href?: string; // 链接
+  withPicture: boolean; // 快捷链接是否显示缩略图
+  children: ChildrenItemT[]; // 导航子项
+  shortcut: ShortcutItemT[]; // 右侧快捷链接
+  tag?: string; // 标签
+}
+
+export interface CodeItemT {
+  label: string; // 标题
+  href: string; // 链接
+  icon?: string; // icon
+}
+
+export interface LangItemT {
+  id: string; // id
+  label: string; // 全称
+  simple: string; // 简写
+}
+
+export interface CodeT {
+  label: string; // 标题
+  list: CodeItemT[]; // 代码仓数据
+}
+
+export interface LangT {
+  label: string; // 标题
+  list: LangItemT[]; // 语言数据
+}
+
+export interface NavT {
+  logo: string; // 社区logo
+  community: string; // 社区 openEuler/openUBMC/mindspore
+  navData: NavItemT[];
+  bgLeft?: string; // 导航左侧背景插图
+  bgRight?: string; // 导航右侧背景插图
+  activeIndex: string | number; // 激活态
+  codeData?: CodeT[]; // 导航右侧代码仓数据
+  langData?: LangT[]; // 导航右侧语言数据
+  isSimpleHeader?: boolean; // 移动端二级导航
+  headerTitle?: string; // 移动端二级标题
+}
+
+export interface NavLiT {
+  navData: NavItemT[];
+  activeIndex: string | number; // 激活态
+  hoverId: string | number; // hover态
+}
+
+export interface NavLiItemT {
+  itemData: NavItemT;
+  itemVisible: boolean; // 下拉面板
+  community: string; // 社区 openEuler/openUBMC/mindspore
+  bgLeft?: string; // 导航左侧背景插图
+  bgRight?: string; // 导航右侧背景插图
+  hoverIndex: string | number; // hover态
+}
+
+export interface NavMobileItemT {
+  menuShow: boolean; // 展开导航
+  navData: NavItemT[];
+  codeData?: CodeT[]; // 导航右侧代码仓数据
+  langData?: LangT[]; // 导航右侧语言数据
+}

package/src/components/header-language-switcher/OHeaderLanguageSwitcher.vue

@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useLocale, useScreen } from '@opendesign-plus/composables';
+import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
+
+import IconLocale from '~icons/components/icon-locale.svg';
+
+export interface LanguageOptionT {
+  id: string;
+  label: string;
+  simple: string;
+}
+
+const props = defineProps({
+  options: {
+    type: Array as () => LanguageOptionT[],
+    default() {
+      return [
+        { id: 'zh', label: '简体中文', simple: '中' },
+        { id: 'en', label: 'English', simple: 'EN'  },
+      ];
+    },
+  },
+  type: {
+    type: String as () => 'auto' | 'common' | 'mobile',
+    default: 'auto',
+  },
+  auto: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { changeLocale, locale } = useLocale();
+
+const { lePadV } = useScreen();
+const lang = computed(() => {
+  return locale.value;
+});
+
+
+// 选择语言
+const emits = defineEmits(['change']);
+const changeLanguage = (newlang: LanguageOptionT) => {
+  if (props.auto) {
+    changeLocale();
+  }
+  emits('change', newlang);
+};
+
+const getLang = (lang: String, simple?: boolean) => {
+  const item = props.options.find((el: LanguageOptionT) => el.id === lang);
+  if (item) {
+    return simple ? item.simple : item.label;
+  }
+
+  const defaultLang = props.options[0];
+  return simple ? defaultLang.simple : defaultLang.label;
+};
+
+const isCommon = computed(() => {
+  return props.type === 'common' || (props.type === 'auto' && !lePadV.value);
+});
+</script>
+
+<template>
+  <div
+    v-if="isCommon"
+    :class="options.length <= 1 ? 'hide-lang' : 'header-lang'"
+  >
+    <ODropdown
+      trigger="hover"
+      optionPosition="bottom"
+      option-wrap-class="dropdown"
+    >
+      <div class="info-wrap">
+        <OIcon class="icon">
+          <IconLocale />
+          <div :class="['locale-tag', { 'is-en': lang === 'en' }]">{{ getLang(lang, true) }}</div>
+        </OIcon>
+      </div>
+
+      <template #dropdown>
+        <ODropdownItem
+          v-for="item in options"
+          @click="changeLanguage(item)"
+          :key="item.id"
+          :class="['list', { 'is-active': lang === item.id }]"
+        >
+          {{ getLang(item.id) }}
+        </ODropdownItem>
+      </template>
+    </ODropdown>
+  </div>
+
+  <div
+    v-else
+    :class="options.length <= 1 ? 'hide-lang' : 'mobile-change-language'"
+  >
+    <span
+      v-for="item in options"
+      :key="item.id"
+      :class="{ active: lang === item.id }"
+      @click.stop="changeLanguage(item)"
+      >{{ getLang(item.id, true) }}</span
+    >
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.hide-lang {
+  display: none;
+}
+
+.header-lang {
+  height: calc(100% + 10px);
+  display: flex;
+  align-items: center;
+
+  .info-wrap {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .icon {
+      font-size: var(--o-icon_size_control-m);
+      position: relative;
+      color: var(--o-color-info1);
+
+      &:hover {
+        color: var(--o-color-primary1);
+      }
+    }
+    .locale-tag {
+      position: absolute;
+      font-size: 10px;
+      height: 12px;
+      width: 12px;
+      background-color: var(--o-color-fill2);
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      left: 12px;
+      top: 11px;
+
+      &.is-en {
+        width: 16px;
+      }
+    }
+  }
+  .list {
+    background: var(--o-color-fill2);
+    cursor: pointer;
+    box-shadow: var(--o-shadow-1);
+    border-radius: var(--o-radius_control-xs);
+    padding: var(--o-gap-1);
+    width: 144px;
+  }
+}
+
+.o-dropdown {
+  height: 100%;
+}
+.o-dropdown-item {
+  background: var(--o-color-fill2);
+  cursor: pointer;
+  border-radius: var(--o-radius_control-xs);
+  padding: var(--o-gap-1);
+  min-width: 144px;
+  height: 40px;
+  color: var(--o-color-info1);
+
+  @include hover {
+    background: var(--o-color-control2-light);
+  }
+
+  &.is-active {
+    color: var(--o-color-primary1);
+    background: var(--o-color-control3-light);
+  }
+}
+.dropdown {
+  --dropdown-list-radius: var(--o-radius-xs);
+}
+
+.mobile-change-language {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  span {
+    color: var(--o-color-info1);
+    margin-right: var(--o-gap-1);
+    text-align: center;
+    @include text1;
+    cursor: pointer;
+    &.active {
+      color: var(--o-color-primary1);
+      font-weight: 500;
+    }
+    &:not(:last-child) {
+      &:after {
+        content: '|';
+        margin-left: var(--o-gap-1);
+        color: var(--o-color-info1);
+      }
+    }
+  }
+}
+</style>

package/src/components/header-language-switcher/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderLanguageSwitcher from './OHeaderLanguageSwitcher.vue';
+import type { App } from 'vue';
+
+const OHeaderLanguageSwitcher = Object.assign(_OHeaderLanguageSwitcher, {
+  install(app: App) {
+    app.component('OHeaderLanguageSwitcher', _OHeaderLanguageSwitcher);
+  },
+});
+
+export { OHeaderLanguageSwitcher };