From 49be3ea9df3005c4c53e16899388449e49d687aa Mon Sep 17 00:00:00 2001
From: thehrz <thehrz@outlook.com>
Date: Thu, 6 Jul 2023 15:33:21 +0800
Subject: [PATCH] perf(layout): update styles

---
 {public => src/assets}/jsons/events.json |  0
 src/assets/jsons/teachers.json           | 18 +++++++++++++++++
 src/common/interfaces/Teacher.ts         |  6 ++++++
 src/components/Footer.vue                |  4 ++--
 src/components/Nav.vue                   |  4 ++++
 src/layouts/default.vue                  | 16 +++++++++++----
 src/layouts/index.vue                    | 16 +++++++++++----
 src/pages/teachers/index.vue             | 25 ++++++++++++++++++------
 src/posts/index.vue                      |  3 +++
 tsconfig.json                            |  2 +-
 unocss.config.ts                         |  1 -
 vite.config.ts                           |  1 -
 12 files changed, 77 insertions(+), 19 deletions(-)
 rename {public => src/assets}/jsons/events.json (100%)
 create mode 100644 src/assets/jsons/teachers.json
 create mode 100644 src/common/interfaces/Teacher.ts
 create mode 100644 src/posts/index.vue

diff --git a/public/jsons/events.json b/src/assets/jsons/events.json
similarity index 100%
rename from public/jsons/events.json
rename to src/assets/jsons/events.json
diff --git a/src/assets/jsons/teachers.json b/src/assets/jsons/teachers.json
new file mode 100644
index 0000000..4f896ea
--- /dev/null
+++ b/src/assets/jsons/teachers.json
@@ -0,0 +1,18 @@
+{
+  "语文": [
+    {
+      "name": "金卫东",
+      "description": "中共党员, 包河区第四、第五届中学语文学科带头人, 合肥市语文骨干教师; 荣获合肥市优秀班主任、包河区师德标兵、包河好人等荣誉称号; 获合肥市首届和第二届&quot;我读经典&quot;语文教师征文一等奖; 坚持撰写教育博客, 获合肥市岗位大练兵教师空间一等奖; 繁荣校园文化,创作《南园赋》, 产生良好社会影响; 主持&quot;基于传统文化的初中语文课堂教学实践研究&quot;课题, 获合肥市2019年优秀课题; 2020年获合肥市&quot;三科国家统编教材优质课评选&quot;一等奖; 辅导学生先后获得第十届中国中学生大赛和第十三届&quot;叶圣陶杯&quot;全国中学生新作文大赛最高奖."
+    },
+    {
+      "name": "陈香",
+      "description": "南园中学语文教师, 爱岗敬业, 任劳任怨, 深受学生的爱戴, 家长的好评. 多篇论文, 教学设计获市区级一二等奖, 区优质课二等奖, 区试卷命题大赛一等奖, 辅导学生朗诵演讲比赛多次获一二奖. 2021年获得&quot;包河区优秀教师&quot;称号."
+    }
+  ],
+  "数学": [
+    {
+      "name": "晏彦",
+      "description": "中学一级教师, 从事教育教学工作十余年; 在中学数学教育教学中因材施教, 勇于探索, 敢于创新, 寓教于乐; 尊重、信任学生, 充分发挥学生的主体作用, 并且取得可喜成绩, 所带班级的考试成绩始终名列前茅. 在班主任管理工作中, 擅于与学生进行沟通和交流, 深受学生的喜爱; 所带班级班风纯正、学风优良, 多次被评为&quot;包河区先进班集体&quot;. 曾荣获&quot;全国示范校多学科新课程探索研讨会&quot;论文评比一等奖, 包河区微课评选一等奖, 包河区教学评比二等奖; 2016年评为包河区优秀教师."
+    }
+  ]
+}
diff --git a/src/common/interfaces/Teacher.ts b/src/common/interfaces/Teacher.ts
new file mode 100644
index 0000000..65cab9b
--- /dev/null
+++ b/src/common/interfaces/Teacher.ts
@@ -0,0 +1,6 @@
+interface Teacher {
+  name: string
+  description: string
+}
+
+export { Teacher }
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 64dcc18..6dd5f24 100644
--- a/src/components/Footer.vue
+++ b/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>
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index ffa00ae..b49f38f 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -10,6 +10,10 @@ export default {
         title: '事件',
         page: '/events',
       },
+      {
+        title: '文章',
+        page: '/posts',
+      },
       {
         title: '关于',
         page: '/about',
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 94baae5..2b8d776 100644
--- a/src/layouts/default.vue
+++ b/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>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index d570bf8..a93dd1d 100644
--- a/src/layouts/index.vue
+++ b/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>
diff --git a/src/pages/teachers/index.vue b/src/pages/teachers/index.vue
index 10e35b5..8c20fa9 100644
--- a/src/pages/teachers/index.vue
+++ b/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>
diff --git a/src/posts/index.vue b/src/posts/index.vue
new file mode 100644
index 0000000..986f48e
--- /dev/null
+++ b/src/posts/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>post</h1>
+</template>
diff --git a/tsconfig.json b/tsconfig.json
index f76bf3b..81e9932 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,7 +27,7 @@
       "vite-plugin-vue-meta-layouts/client.d.ts"
     ],
     "paths": {
-      "~/*": ["src/*"]
+      "~/*": ["src/*"],
     }
   },
   "vueCompilerOptions": {
diff --git a/unocss.config.ts b/unocss.config.ts
index 85983fd..57519b6 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -27,5 +27,4 @@ export default defineConfig({
     presetTypography(),
   ],
   transformers: [transformerDirectives(), transformerVariantGroup()],
-  safelist: 'prose max-w-100ch mt-5'.split(' '),
 })
diff --git a/vite.config.ts b/vite.config.ts
index 8e6d65b..6c8e19b 100644
--- a/vite.config.ts
+++ b/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/