perf(layout): update styles

src/assets/jsons/teachers.json

@@ -0,0 +1,18 @@
+{
+  "语文": [
+    {
+      "name": "金卫东",
+      "description": "中共党员, 包河区第四、第五届中学语文学科带头人, 合肥市语文骨干教师; 荣获合肥市优秀班主任、包河区师德标兵、包河好人等荣誉称号; 获合肥市首届和第二届"我读经典"语文教师征文一等奖; 坚持撰写教育博客, 获合肥市岗位大练兵教师空间一等奖; 繁荣校园文化,创作《南园赋》, 产生良好社会影响; 主持"基于传统文化的初中语文课堂教学实践研究"课题, 获合肥市2019年优秀课题; 2020年获合肥市"三科国家统编教材优质课评选"一等奖; 辅导学生先后获得第十届中国中学生大赛和第十三届"叶圣陶杯"全国中学生新作文大赛最高奖."
+    },
+    {
+      "name": "陈香",
+      "description": "南园中学语文教师, 爱岗敬业, 任劳任怨, 深受学生的爱戴, 家长的好评. 多篇论文, 教学设计获市区级一二等奖, 区优质课二等奖, 区试卷命题大赛一等奖, 辅导学生朗诵演讲比赛多次获一二奖. 2021年获得"包河区优秀教师"称号."
+    }
+  ],
+  "数学": [
+    {
+      "name": "晏彦",
+      "description": "中学一级教师, 从事教育教学工作十余年; 在中学数学教育教学中因材施教, 勇于探索, 敢于创新, 寓教于乐; 尊重、信任学生, 充分发挥学生的主体作用, 并且取得可喜成绩, 所带班级的考试成绩始终名列前茅. 在班主任管理工作中, 擅于与学生进行沟通和交流, 深受学生的喜爱; 所带班级班风纯正、学风优良, 多次被评为"包河区先进班集体". 曾荣获"全国示范校多学科新课程探索研讨会"论文评比一等奖, 包河区微课评选一等奖, 包河区教学评比二等奖; 2016年评为包河区优秀教师."
+    }
+  ]
+}

src/common/interfaces/Teacher.ts

@@ -0,0 +1,6 @@
+interface Teacher {
+  name: string
+  description: string
+}
+
+export { Teacher }

src/components/Footer.vue

@@ -8,7 +8,7 @@ function toggleLocales() {
 </script>
 
 <template>
-  <nav class="text-xl m-6 flex justify-center">
+  <v-footer app class="text-xl m-6 flex justify-center">
     <RouterLink class="icon-btn mx-2" to="/" :title="t('button.home')">
       <div class="i-carbon-campsite" />
     </RouterLink>
@@ -28,5 +28,5 @@ function toggleLocales() {
     <a class="icon-btn mx-2" rel="noreferrer" href="https://git.thehrz.net/thehrz/19yuke2-vue" target="_blank" title="Gitea">
       <div class="i-simple-icons-gitea" />
     </a>
-  </nav>
+  </v-footer>
 </template>

src/components/Nav.vue

@@ -10,6 +10,10 @@ export default {
         title: '事件',
         page: '/events',
       },
+      {
+        title: '文章',
+        page: '/posts',
+      },
       {
         title: '关于',
         page: '/about',

src/layouts/default.vue

@@ -1,10 +1,18 @@
 <template>
   <v-theme-provider :theme="isDark ? 'dark' : 'light'">
-    <v-layout class="text-gray-700 dark:text-gray-200 min-h-screen flex flex-col">
+    <v-layout class="text-gray-700 dark:text-gray-200 flex flex-col">
       <Nav />
-      <div class="m-auto mt-0 px-5 text-left flex">
-        <RouterView />
-      </div>
+
+      <v-main style="--v-layout-top: 25px">
+        <router-view v-slot="{ Component }">
+          <transition name="fade">
+            <div class="prose max-w-100ch m-auto">
+              <component :is="Component" />
+            </div>
+          </transition>
+        </router-view>
+      </v-main>
+
       <Footer />
     </v-layout>
   </v-theme-provider>

src/layouts/index.vue

@@ -1,11 +1,19 @@
 <template>
   <v-theme-provider :theme="isDark ? 'dark' : 'light'">
-    <v-layout class="text-gray-700 dark:text-gray-200 min-h-screen flex flex-col">
+    <v-app class="text-gray-700 dark:text-gray-200 flex flex-col">
       <Nav />
-      <div class="m-auto px-5 text-left flex">
-        <RouterView />
+
+      <div style="--v-layout-top: 25px" class="m-auto">
+        <router-view v-slot="{ Component }">
+          <transition name="fade">
+            <div class="prose max-w-100ch m-auto">
+              <component :is="Component" />
+            </div>
+          </transition>
+        </router-view>
       </div>
+
       <Footer />
-    </v-layout>
+    </v-app>
   </v-theme-provider>
 </template>

src/pages/teachers/index.vue

@@ -1,13 +1,26 @@
 <script setup lang="ts">
+import _teachers from '~/assets/jsons/teachers.json'
 
+// import type { Teacher } from '~/common/interfaces/Teacher'
+
+// const teachers = _teachers as Teacher[]
 </script>
 
 <template>
-  <h1 class="m-auto">
-    teachers
-  </h1>
+  <article>
+    <h1>在19预科2班任教的老师</h1>
+
+    <v-list lines="three">
+      <v-list-item v-for="item, index in Object.keys(_teachers)" :key="index" :title="item">
+        <v-expansion-panels>
+          <v-expansion-panel
+            title="Title"
+            text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima"
+          />
+        </v-expansion-panels>
+      </v-list-item>
+    </v-list>
+  </article>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/posts/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>post</h1>
+</template>

tsconfig.json

@@ -27,7 +27,7 @@
       "vite-plugin-vue-meta-layouts/client.d.ts"
     ],
     "paths": {
-      "~/*": ["src/*"]
+      "~/*": ["src/*"],
     }
   },
   "vueCompilerOptions": {

unocss.config.ts

@@ -27,5 +27,4 @@ export default defineConfig({
     presetTypography(),
   ],
   transformers: [transformerDirectives(), transformerVariantGroup()],
-  safelist: 'prose max-w-100ch mt-5'.split(' '),
 })

vite.config.ts

@@ -80,7 +80,6 @@ export default defineConfig({
     // https://github.com/antfu/vite-plugin-vue-markdown
     // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
     Markdown({
-      wrapperClasses: 'prose max-w-100ch mt-5',
       headEnabled: true,
       markdownItSetup(md) {
         // https://prismjs.com/