feat: css

components/CustomLayout.vue

@@ -1,23 +1,29 @@
 <script setup lang="ts">
-import { watchEffect } from "vue";
+import { watchEffect, computed } from "vue";
 
 import DefaultTheme from "vitepress/theme";
 import { useI18n } from "vue-i18n";
-import { useData } from "vitepress";
+import { useData, withBase } from "vitepress";
 import i18n from "@/plugins/i18n";
 
 const Layout = DefaultTheme.Layout;
 
-const { lang } = useData();
+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>
-      <div class="content-before">{{ t("帮助中心") }}</div>
+      <a :href="docsLink" class="content-before">{{ t("帮助中心") }}</a>
+    </template>
+    <template #nav-bar-content-after>
+      <a :href="docsLink" class="content-after">{{ t("CocoClass") }}</a>
     </template>
   </Layout>
 </template>
@@ -34,4 +40,8 @@ watchEffect(() => {
   line-height: 24px;
   margin-left: 14px;
 }
+.content-after {
+  color: #2e5aa8;
+  /* TODO */
+}
 </style>

components/CustomNavBar.vue

@@ -74,6 +74,12 @@ watchPostEffect(() => {
   </div>
 </template>
 
+<style scoped lang="scss">
+.search {
+  justify-content: end;
+}
+</style>
+
 <style scoped>
 .VPNavBar {
   position: relative;