From 6be2c9a0d789d34f1d6c04a7ede525c35994d89d Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Sun, 12 Jan 2025 21:19:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E4=BA=86=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E6=8B=BC=E5=86=99=E9=94=99=E8=AF=AF=EF=BC=8C=E7=95=A5?=
 =?UTF-8?q?=E5=BE=AE=E5=AE=8C=E6=88=90=E4=BA=86=E4=B8=80=E4=BA=9B=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E9=83=A8=E5=88=86=E7=9A=84=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.vue                                       |  23 +++-
 ...tentWarpper.vue => miaoContentWrapper.vue} |   4 +-
 components/miaoHeader.vue                     |  13 +-
 nuxt.config.ts                                |  53 ++++----
 pages/index.vue                               |  68 +++++-----
 pages/posts.vue                               |  13 +-
 pages/posts/index.vue                         | 119 ++++++++++++++++++
 pages/posts/temp.vue                          |  21 ++++
 pages/tool/genshin-gacha.vue                  |   4 +-
 server/api/posts/getPosts.ts                  |  22 ++++
 server/api/test.ts                            |   5 +
 tsconfig.json                                 |  13 +-
 types/post.ts                                 |   9 ++
 utils/range.ts                                |  11 ++
 utils/sleep.ts                                |   5 +
 15 files changed, 308 insertions(+), 75 deletions(-)
 rename components/{miaoContentWarpper.vue => miaoContentWrapper.vue} (85%)
 create mode 100644 pages/posts/index.vue
 create mode 100644 pages/posts/temp.vue
 create mode 100644 server/api/posts/getPosts.ts
 create mode 100644 server/api/test.ts
 create mode 100644 types/post.ts
 create mode 100644 utils/range.ts
 create mode 100644 utils/sleep.ts

diff --git a/app.vue b/app.vue
index 893f124..4d8c81c 100644
--- a/app.vue
+++ b/app.vue
@@ -1,16 +1,17 @@
 <template>
-  <div class="main-warpper">
+  <div class="main-wrapper">
     <miao-header></miao-header>
-    <miao-content-warpper>
+    <miao-content-wrapper>
       <NuxtPage />
-    </miao-content-warpper>
+    </miao-content-wrapper>
   </div>
 </template>
 
 <script lang="ts" setup>
 import miaoHeader from './components/miaoHeader.vue';
-import miaoContentWarpper from './components/miaoContentWarpper.vue';
+import miaoContentWrapper from './components/miaoContentWrapper.vue';
 
+// @ts-ignore
 useHead({
   title: '杪 Blog',
   meta: [
@@ -21,7 +22,7 @@ useHead({
 </script>
 
 <style lang="scss" scoped>
-.main-warpper {
+.main-wrapper {
   width: 100vw;
   height: 100vh;
   display: flex;
@@ -31,4 +32,16 @@ useHead({
 
 <style lang="scss">
 @use '/style/default.scss';
+</style>
+
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.15s ease;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
 </style>
\ No newline at end of file
diff --git a/components/miaoContentWarpper.vue b/components/miaoContentWrapper.vue
similarity index 85%
rename from components/miaoContentWarpper.vue
rename to components/miaoContentWrapper.vue
index 42a0188..98e4226 100644
--- a/components/miaoContentWarpper.vue
+++ b/components/miaoContentWrapper.vue
@@ -1,7 +1,7 @@
 <template>
     <main id="miao-main">
         <n-scrollbar>
-            <div class="miao-main-slot-warpper">
+            <div class="miao-main-slot-wrapper">
                 <slot></slot>
             </div>
         </n-scrollbar>
@@ -20,7 +20,7 @@
     padding: 0;
     box-sizing: border-box;
 
-    .miao-main-slot-warpper {
+    .miao-main-slot-wrapper {
         position: relative;
         min-height: calc(100vh - 60px);
     }
diff --git a/components/miaoHeader.vue b/components/miaoHeader.vue
index e17fb59..8ca0033 100644
--- a/components/miaoHeader.vue
+++ b/components/miaoHeader.vue
@@ -1,11 +1,11 @@
 <template>
-    <section id="miao-header-warpper">
+    <section id="miao-header-wrapper">
         <header id="miao-header">
             <div class="miao-header-title">
                 <a href="https://nj.miaospring.top:3001/" target="_blank" title="喵"><span
                         style="color: #15aa87; margin-right: 1px;">杪</span>Blog</a>
             </div>
-            <div class="header-right-warp">
+            <div class="header-right-wrap">
                 <ul class="miao-header-nav">
                     <li v-for="(item) in navList" :key="item.path"
                         :class="['miao-header-nav-item', isActive(item) ? 'miao-header-nav-item-active' : '']">
@@ -57,8 +57,9 @@ const isActive = (navItem: NavItem) => {
     return false
 }
 
-onMounted(() => {
-    // console.log(route)
+onMounted(async () => {
+    // const data = await $fetch('/api/test')
+    // console.log(data)
 })
 </script>
 
@@ -66,7 +67,7 @@ onMounted(() => {
 // @use '/style/miaoStyle.scss';
 
 
-#miao-header-warpper {
+#miao-header-wrapper {
     position: relative;
     background-color: #fff;
     user-select: none;
@@ -102,7 +103,7 @@ onMounted(() => {
             }
         }
 
-        .header-right-warp {
+        .header-right-wrap {
             flex: 1;
             height: 100%;
             margin-left: auto;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4be766b..afa26b0 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,25 +5,36 @@ import Components from "unplugin-vue-components/vite";
 // https://nuxt.com/docs/api/configuration/nuxt-config
 // @ts-ignore
 export default defineNuxtConfig({
-								devtools: { enabled: true },
-								alias: {
-																"@": "/"
-								},
-								vite: {
-																server: {},
-																plugins: [
-																								AutoImport({
-																																imports: [
-																																								{
-																																																"naive-ui": ["useDialog", "useMessage", "useNotification", "useLoadingBar"]
-																																								}
-																																]
-																								}),
-																								Components({
-																																resolvers: [NaiveUiResolver()]
-																								})
-																]
-								},
-								modules: ["nuxtjs-naive-ui", "@pinia/nuxt"],
-								compatibilityDate: "2025-01-12"
+	devtools: { enabled: false },
+	alias: {
+		"@": "/"
+	},
+	app: {
+		pageTransition: {
+			name: 'page',
+			mode: 'out-in'
+		}
+	},
+	vite: {
+		server: {},
+		plugins: [
+			AutoImport({
+				imports: [
+					{
+						"naive-ui": ["useDialog", "useMessage", "useNotification", "useLoadingBar"]
+					}
+				]
+			}),
+			Components({
+				resolvers: [NaiveUiResolver()]
+			})
+		]
+	},
+	modules: ["nuxtjs-naive-ui", "@pinia/nuxt"],
+	compatibilityDate: "2025-01-12",
+	build: {
+		// 开启打包分析
+		analyze: true,
+	},
+	experimental: { appManifest: false },
 });
diff --git a/pages/index.vue b/pages/index.vue
index 6441031..1f03c69 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,22 +3,24 @@
     <div class="title">
       <span>导航</span>
     </div>
-    <div class="content-warp">
+    <div class="content-wrap">
       <div v-for="(item) in PageContent" :key="item.subTitle" class="content">
         <div class="sub-title">
           <n-divider title-placement="left">
-            <div class="sub-title-text">{{ item.subTitle }}</div>
-            <div :class="['sub-title-chevron', item.show ? '' : 'sub-title-chevron-hide']"
-              @click="switchItemShow(item)">
-              <ChevronDown />
+            <div class="sub-title-wrapper">
+              <div class="sub-title-text">{{ item.subTitle }}</div>
+              <div :class="['sub-title-chevron', item.show ? '' : 'sub-title-chevron-hide']"
+                @click="switchItemShow(item)">
+                <ChevronDown />
+              </div>
             </div>
           </n-divider>
         </div>
-        <div :class="['content-items-warp', item.show ? '' : 'content-items-warp-hide']">
+        <div :class="['content-items-wrap', item.show ? '' : 'content-items-wrap-hide']">
           <div v-for="(cItem) in item.content" :key="cItem.name" class="content-item">
             <div class="content-item-name">{{ cItem.name }}</div>
             <div class="content-item-description">{{ cItem.description }}</div>
-            <div class="content-item-link-warp">
+            <div class="content-item-link-wrap">
               <div>link:</div>
               <a v-for="link in (cItem.links ?? [])" :href="link.url" target="_blank">{{ link.name }}</a>
               <NuxtLink v-for="link in (cItem.nuxtLinks ?? [])" :to="link.to">{{ link.name }}</NuxtLink>
@@ -93,6 +95,21 @@ const PageContent = reactive<PageContent[]>([
         ]
       }
     ]
+  }, {
+    subTitle: '小工具',
+    show: true,
+    content: [
+      {
+        name: 'genshin-gacha',
+        description: '通过模拟来计算抽卡成功率的小工具',
+        nuxtLinks: [
+          {
+            name: 'demo',
+            to: 'tool/genshin-gacha'
+          }
+        ]
+      },
+    ]
   }, {
     subTitle: '学习资料',
     show: true,
@@ -109,22 +126,7 @@ const PageContent = reactive<PageContent[]>([
         ]
       },
     ]
-  }, {
-    subTitle: '小工具',
-    show: true,
-    content: [
-      {
-        name: 'genshin-gacha',
-        description: '通过模拟来计算抽卡成功率的小工具',
-        nuxtLinks: [
-          {
-            name: 'demo',
-            to: 'tool/genshin-gacha'
-          }
-        ]
-      },
-    ]
-  }
+  },
 ])
 
 const switchItemShow = (item: PageContent) => {
@@ -140,14 +142,13 @@ const switchItemShow = (item: PageContent) => {
 <style lang="scss" scoped>
 .main {
   box-sizing: border-box;
-  // min-height: calc(100vh - 60px);
   height: 100%;
   display: flex;
   flex-direction: column;
   padding: 20px 10px;
   background: rgba(21, 170, 135, .02);
 
-  .content-warp {
+  .content-wrap {
     box-sizing: border-box;
     width: 100%;
     padding: 0 15px;
@@ -156,10 +157,17 @@ const switchItemShow = (item: PageContent) => {
 
       .sub-title {
         display: flex;
+        height: 80px;
         margin-bottom: 10px;
         letter-spacing: 2px;
         user-select: none;
 
+        .sub-title-wrapper {
+          height: 80px;
+          display: flex;
+          align-items: center;
+        }
+
         .sub-title-text {
           font-size: 20px;
           // font-weight: 500;
@@ -193,14 +201,14 @@ const switchItemShow = (item: PageContent) => {
         }
       }
 
-      .content-items-warp {
-        max-height: 200vh;
+      .content-items-wrap {
+        max-height: 400vh;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
         justify-content: center;
         gap: 20px;
         // overflow: hidden;
-        transition: max-height 0.25s ease, opacity 0.3s ease;
+        transition: max-height 0.25s ease, opacity 0.25s ease;
         opacity: 1;
 
         // margin: 0 -20px;
@@ -248,9 +256,10 @@ const switchItemShow = (item: PageContent) => {
           font-size: 14px;
           font-weight: 300;
           padding: 0 10px;
+          min-height: 40px;
         }
 
-        .content-item-link-warp {
+        .content-item-link-wrap {
           flex: 1;
           width: 100%;
           box-sizing: border-box;
@@ -291,6 +300,7 @@ const switchItemShow = (item: PageContent) => {
     width: 100%;
     display: flex;
     justify-content: center;
+    user-select: none;
     // margin-bottom: 10px;
 
     &>span {
diff --git a/pages/posts.vue b/pages/posts.vue
index 536d7ef..babb082 100644
--- a/pages/posts.vue
+++ b/pages/posts.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="temp">
-        其实<br>一篇文章都还没写
+    <div class="post-wrapper">
+        <NuxtPage />
     </div>
 </template>
 
@@ -9,12 +9,13 @@
 </script>
 
 <style lang="scss" scoped>
-.temp {
-    height: calc(100vh - 60px);
+.post-wrapper {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: 35px;
-    font-family: PT Serif, Serif;
+    margin: 0 auto;
+    max-width: 800px;
+    padding: 0;
 }
 </style>
\ No newline at end of file
diff --git a/pages/posts/index.vue b/pages/posts/index.vue
new file mode 100644
index 0000000..65903ce
--- /dev/null
+++ b/pages/posts/index.vue
@@ -0,0 +1,119 @@
+<template>
+    <div class="posts-wrapper">
+        <article class="posts-item" v-for="post in postsData" :key="post.id">
+            <header class="post-title">
+                <a href="">{{ post.title }}</a>
+            </header>
+            <p class="post-summary">{{ post.summary }}...</p>
+            <footer class="post-footer">
+                <div class="post-date">{{ post.date }}</div>
+                <div class="post-tags">
+                    <div v-for="tag in post.tags">{{ tag }}</div>
+                </div>
+            </footer>
+        </article>
+        <div class="posts-skeleton" v-if="!isInit">
+            <div class="posts-skeleton-item" v-for="_ in range(5)">
+                <n-skeleton text style="height: 40px; width: 60%" />
+                <n-skeleton text :repeat="2" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { postItem } from '~/types/post';
+
+
+// const router = useRouter()
+const isInit = ref(false)
+
+const postsData = ref<postItem[]>([])
+
+onMounted(async () => {
+    // router.push('/posts/temp')
+    await sleep(1000)
+    postsData.value = await $fetch('/api/posts/getPosts')
+    isInit.value = true
+    console.log(postsData.value)
+})
+
+</script>
+
+<style lang="scss" scoped>
+.posts-wrapper {
+    // height: 50vh;
+    width: 100%;
+    padding-top: 10px;
+    // background-color: #15aa87;
+    .posts-item {
+        margin: 10px 20px;
+        padding-bottom: 20px;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid #e8e8e8;
+        }
+
+        .post-title {
+            font-family: PT Serif, Serif;
+            font-size: 28px;
+            border-bottom: 0;
+
+            &>a {
+                cursor: pointer;
+                color: #000;
+                transition: all .2s;
+                text-decoration: none;
+
+                &:hover {
+                    color: #15aa87;
+                }
+            }
+        }
+
+        .post-summary {
+            font-size: 14px;
+            color: rgba(0, 0, 0, .54);
+            font-weight: 200;
+        }
+
+        .post-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+            font-size: 12px;
+            color: rgba(0, 0, 0, .54);
+            font-weight: 200;
+
+            .post-date {
+                font-size: 12px;
+            }
+
+            .post-tags {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                gap: 10px;
+                font-size: 12px;
+                color: rgba(0, 0, 0, .54);
+                font-weight: 200;
+
+                &>div {
+                    cursor: pointer;
+                    transition: color .2s linear;
+                    &:hover {
+                        color: #15aa87;
+                    }
+                }
+            }
+        }
+    }
+
+    .posts-skeleton {
+        &-item {
+            padding: 10px 20px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/posts/temp.vue b/pages/posts/temp.vue
new file mode 100644
index 0000000..fb3c5e7
--- /dev/null
+++ b/pages/posts/temp.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="temp">
+        其实<br>一篇文章都还没写
+        <NuxtPage />
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+.temp {
+    height: calc(100vh - 60px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 35px;
+    font-family: PT Serif, Serif;
+}
+</style>
\ No newline at end of file
diff --git a/pages/tool/genshin-gacha.vue b/pages/tool/genshin-gacha.vue
index ad2f515..390c4ef 100644
--- a/pages/tool/genshin-gacha.vue
+++ b/pages/tool/genshin-gacha.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="iframe-warpper">
+    <div class="iframe-wrapper">
         <iframe src="/iframe-source/genshin-gacha/index.html" frameborder="0"></iframe>
     </div>
 </template>
@@ -9,7 +9,7 @@
 </script>
 
 <style scoped>
-.iframe-warpper {
+.iframe-wrapper {
     width: 100%;
     min-height: inherit;
     padding: 0;
diff --git a/server/api/posts/getPosts.ts b/server/api/posts/getPosts.ts
new file mode 100644
index 0000000..e484058
--- /dev/null
+++ b/server/api/posts/getPosts.ts
@@ -0,0 +1,22 @@
+import type { postItem } from "~/types/post";
+
+function generateFakeData(length: number) {
+    const data: postItem[] = [];
+    for (let i = 0; i < length; i++) {
+        data.push({
+            id: i,
+            title: `测试标题`,
+            summary: `测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要`,
+            type: 'markdown',
+            tags: ['test', 'test1'],
+            url: '',
+            date: parseInt(new Date().getTime().toFixed()),
+        });
+    }
+    return data;
+}
+
+export default defineEventHandler((event) => {
+    const data = generateFakeData(50)
+    return data
+})
\ No newline at end of file
diff --git a/server/api/test.ts b/server/api/test.ts
new file mode 100644
index 0000000..f9f85c3
--- /dev/null
+++ b/server/api/test.ts
@@ -0,0 +1,5 @@
+export default defineEventHandler((event) => {
+    return {
+        hello: 'world'
+    }
+})
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 66472a2..388c1d5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,9 +1,14 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
-  "exclude": [
-    ".output",
-    "node_modules",
-    ".nuxt",
+  "include": [
+    "pages/**/*",
+    "hooks/**/*",
+    "components/**/*",
+    "server/**/*",
+    "style/**/*",
+    "utils/**/*",
+    ".nuxt/**/*",
+    "types/**/*"
   ]
 }
diff --git a/types/post.ts b/types/post.ts
new file mode 100644
index 0000000..bc6d90b
--- /dev/null
+++ b/types/post.ts
@@ -0,0 +1,9 @@
+export type postItem = {
+    id: number;
+    title: string;
+    date: number;
+    summary: string;
+    tags: string[];
+    type: 'markdown';
+    url: string;
+};
\ No newline at end of file
diff --git a/utils/range.ts b/utils/range.ts
new file mode 100644
index 0000000..23164a6
--- /dev/null
+++ b/utils/range.ts
@@ -0,0 +1,11 @@
+export default function range(start: number, end?: number) {
+    if (end === undefined) {
+        end = start;
+        start = 0;
+    }
+    const result = [];
+    for (let i = start; i < end; i++) {
+        result.push(i);
+    }
+    return result;
+}
\ No newline at end of file
diff --git a/utils/sleep.ts b/utils/sleep.ts
new file mode 100644
index 0000000..812fce1
--- /dev/null
+++ b/utils/sleep.ts
@@ -0,0 +1,5 @@
+export default function sleep(time: number) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, time)
+    })
+}
\ No newline at end of file