CocoClassHelpDocs/components/CustomLayout.vue

<script setup lang="ts">
import { watchEffect, computed } from "vue";

import DefaultTheme from "vitepress/theme";
import { useI18n } from "vue-i18n";
import { useData, withBase } from "vitepress";

import { Right } from "@element-plus/icons-vue";
import i18n from "@/plugins/i18n";

const Layout = DefaultTheme.Layout;

const { lang, localeIndex } = useData();
const { t } = useI18n();
watchEffect(() => {
  i18n.global.locale.value = lang.value;
});
const docsLink = computed(() => {
  return withBase(`/${localeIndex.value === "root" ? "" : localeIndex.value + "/"}docs`);
});
</script>
<template>
  <Layout>
    <template #nav-bar-content-before>
      <a :href="docsLink" class="content-before">{{ t("帮助中心") }}</a>
    </template>
    <template #nav-bar-content-after>
      <a href="https://cloud.cocorobo.cn" class="content-after">
        {{ t("可可智慧教育平台") }}
        <el-icon color="white" size="18" class="content-after__arrow">
          <Right />
        </el-icon>
      </a>
    </template>
  </Layout>
</template>
<i18n locale="zh-HK">
{
  "帮助中心": "幫助中心",
  "可可智慧教育平台": "CocoClass"
}
</i18n>
<i18n locale="en-US">
{
  "帮助中心": "Help Center",
  "可可智慧教育平台": "CocoClass"
}
</i18n>
<style scoped lang="scss">
@use '@/.vitepress/theme/screen' as *;

.content-before {
  @include breakpoint(mobile) {
    font-size: 12px;
    margin: 0;
  }
  color: #2e5aa8;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 0 14px;
}
.content-after {
  @include breakpoint(mobile) {
    display: none;
  }
  color: #2e5aa8;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #2e5aa8;
  border-radius: 100px;
  &__arrow {
    padding: 2px;
    background: #2e5aa8;
    border-radius: 50%;
  }
}
</style>