Update Nav

package.json

@@ -18,6 +18,7 @@
     "@unocss/reset": "^0.48.4",
     "@vueuse/core": "^9.11.0",
     "@vueuse/head": "^1.0.22",
+    "lxgw-wenkai-lite-webfont": "^1.7.0",
     "nprogress": "^0.2.0",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.2.45",
@@ -29,6 +30,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.34.1",
     "@iconify-json/carbon": "^1.1.13",
+    "@iconify-json/simple-icons": "^1.1.48",
     "@intlify/unplugin-vue-i18n": "^0.8.1",
     "@mdi/font": "^7.1.96",
     "@types/markdown-it-link-attributes": "^3.0.1",

pnpm-lock.yaml

@@ -10,6 +10,9 @@ dependencies:
   '@vueuse/head':
     specifier: ^1.0.22
     version: 1.0.22(vue@3.2.45)
+  lxgw-wenkai-lite-webfont:
+    specifier: ^1.7.0
+    version: 1.7.0
   nprogress:
     specifier: ^0.2.0
     version: 0.2.0
@@ -39,6 +42,9 @@ devDependencies:
   '@iconify-json/carbon':
     specifier: ^1.1.13
     version: 1.1.13
+  '@iconify-json/simple-icons':
+    specifier: ^1.1.48
+    version: 1.1.48
   '@intlify/unplugin-vue-i18n':
     specifier: ^0.8.1
     version: 0.8.1(vue-i18n@9.2.2)
@@ -1780,6 +1786,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/simple-icons@1.1.48:
+    resolution: {integrity: sha512-haFEPmTPriak+bcmhJawCTW2N2KxcaNNpS3z5hofBUBlCzwRhjM+vU0eImJ6i51HNFlSozt8sxVOZtT7NsWZJg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
@@ -6557,6 +6569,10 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /lxgw-wenkai-lite-webfont@1.7.0:
+    resolution: {integrity: sha512-VcQYNRpdXAxaZsJ18rfT1mmAreGqkIFNZ/9pdVLbT2Tkb+2lLWJDXq4zYxMEk9AcecSnxO31R2LHh5ieLlxjRg==}
+    dev: false
+
   /magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:

src/components/Footer.vue

@@ -26,8 +26,8 @@ const toggleLocales = () => {
       <div i-carbon-dicom-overlay />
     </RouterLink>
 
-    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
-      <div i-carbon-logo-github />
+    <a class="icon-btn mx-2" rel="noreferrer" href="https://git.thehrz.net/thehrz/19yuke2-vue" target="_blank" title="Gitea">
+      <div i-simple-icons-gitea />
     </a>
   </nav>
 </template>

src/components/Nav.vue

@@ -1,13 +1,38 @@
+<script lang="ts">
+export default {
+  data: () => ({
+    pages: [
+      {
+        title: '教师',
+        page: '/teachers',
+      },
+      {
+        title: '事件',
+        page: '/events',
+      },
+      {
+        title: '关于',
+        page: '/about',
+      },
+    ],
+  }),
+}
+</script>
+
 <template>
-  <nav>
-    <v-toolbar :theme="isDark ? 'dark' : 'light'">
+  <v-app-bar :theme="isDark ? 'dark' : 'light'" class="!static">
     <v-app-bar-nav-icon />
 
     <router-link to="/">
-        <v-toolbar-title>合肥市南园学校19预科2班</v-toolbar-title>
+      <v-toolbar-title font-bold>
+        合肥市南园学校19预科2班
+      </v-toolbar-title>
     </router-link>
 
-      <v-spacer />
-    </v-toolbar>
-  </nav>
+    <v-toolbar-items>
+      <v-btn v-for="(page, index) in pages" :key="index" :to="page.page">
+        {{ page.title }}
+      </v-btn>
+    </v-toolbar-items>
+  </v-app-bar>
 </template>

src/layouts/default.vue

@@ -9,9 +9,9 @@ export default {
 </script>
 
 <template>
-  <main class="text-gray-700 dark:text-gray-200 min-h-screen flex flex-col">
+  <v-layout class="text-gray-700 dark:text-gray-200 min-h-screen flex flex-col">
     <Nav />
     <RouterView />
     <Footer />
-  </main>
+  </v-layout>
 </template>

src/pages/index.md

@@ -1,3 +1,2 @@
-<div class="text-center">
-  <h1 class="text-9">属于19预科2班的故事还未完结</h1>
-</div>
+<!-- markdownlint-disable no-inline-html -->
+<h1 class="text-9 text-center">属于19预科2班的故事还未完结</h1>

src/styles/main.css

@@ -1,4 +1,5 @@
-@import './markdown.css';
+@import "./markdown.css";
+@import "lxgw-wenkai-lite-webfont/style.css";
 
 html,
 body,
@@ -7,6 +8,7 @@ body,
   margin: 0;
   padding: 0;
   overflow-y: auto;
+  font-family: "LXGW WenKai Lite", sans-serif;
 }
 
 html.dark {
@@ -19,7 +21,7 @@ html.dark {
 }
 
 #nprogress .bar {
-  background: rgb(13,148,136);
+  background: rgb(13, 148, 136);
   opacity: 0.75;
   position: fixed;
   z-index: 1031;

unocss.config.ts

@@ -4,7 +4,6 @@ import {
   presetIcons,
   presetTypography,
   presetUno,
-  presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -22,13 +21,6 @@ export default defineConfig({
       warn: true,
     }),
     presetTypography(),
-    presetWebFonts({
-      fonts: {
-        sans: 'DM Sans',
-        serif: 'DM Serif Display',
-        mono: 'DM Mono',
-      },
-    }),
   ],
   transformers: [
     transformerDirectives(),