From e2079c538892b7c85aeeb0c9cbb526c4f1f544c6 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Mon, 13 Jan 2025 12:44:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BA=86=E5=87=A0?=
 =?UTF-8?q?=E4=B8=AA=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                       |  2 ++
 components/icons/chevronDown.vue |  6 ++++
 components/icons/link.vue        |  6 ++++
 components/icons/tag.vue         |  8 +++++
 components/icons/time.vue        |  8 +++++
 components/miaoDivider-left.vue  |  2 ++
 package.json                     |  1 -
 pages/index.vue                  | 58 +++++++++++++++++++++++++-------
 pages/posts/index.vue            | 37 ++++++++++++++++----
 pages/posts/post-[id].vue        |  9 ++++-
 pnpm-lock.yaml                   |  8 -----
 server/api/test/testDir.ts       |  8 +++++
 12 files changed, 124 insertions(+), 29 deletions(-)
 create mode 100644 components/icons/chevronDown.vue
 create mode 100644 components/icons/link.vue
 create mode 100644 components/icons/tag.vue
 create mode 100644 components/icons/time.vue
 create mode 100644 server/api/test/testDir.ts

diff --git a/.gitignore b/.gitignore
index 4a7f73a..772cf59 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+userData
\ No newline at end of file
diff --git a/components/icons/chevronDown.vue b/components/icons/chevronDown.vue
new file mode 100644
index 0000000..9b079f1
--- /dev/null
+++ b/components/icons/chevronDown.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
+            d="M112 184l144 144 144-144" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/link.vue b/components/icons/link.vue
new file mode 100644
index 0000000..f0aa0ed
--- /dev/null
+++ b/components/icons/link.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+        <path d="M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42" fill="none"
+            stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/tag.vue b/components/icons/tag.vue
new file mode 100644
index 0000000..a5b1333
--- /dev/null
+++ b/components/icons/tag.vue
@@ -0,0 +1,8 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+        <path
+            d="M435.25 48h-122.9a14.46 14.46 0 00-10.2 4.2L56.45 297.9a28.85 28.85 0 000 40.7l117 117a28.85 28.85 0 0040.7 0L459.75 210a14.46 14.46 0 004.2-10.2v-123a28.66 28.66 0 00-28.7-28.8z"
+            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
+        <path d="M384 160a32 32 0 1132-32 32 32 0 01-32 32z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/time.vue b/components/icons/time.vue
new file mode 100644
index 0000000..e321315
--- /dev/null
+++ b/components/icons/time.vue
@@ -0,0 +1,8 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+        <path d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z" fill="none"
+            stroke="currentColor" stroke-miterlimit="10" stroke-width="32" />
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
+            d="M256 128v144h96" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/miaoDivider-left.vue b/components/miaoDivider-left.vue
index 7b40564..f777301 100644
--- a/components/miaoDivider-left.vue
+++ b/components/miaoDivider-left.vue
@@ -25,10 +25,12 @@
 
 .left-line {
   flex: 1;
+  min-width: 25px;
 }
 
 .right-line {
   flex: 32;
+  min-width: 25px;
 }
 
 .miao-divider-text {
diff --git a/package.json b/package.json
index bff0318..ad36863 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.9.0",
-    "@vicons/ionicons5": "^0.13.0",
     "dayjs": "^1.11.13",
     "markdown-it": "^14.1.0",
     "node-fetch": "^3.3.2",
diff --git a/pages/index.vue b/pages/index.vue
index fba613a..29fe2a5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,14 +14,14 @@
                 <ChevronDown />
               </div>
             </div>
-          </miao-divider-left >
+          </miao-divider-left>
         </div>
         <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-wrap">
-              <div>link:</div>
+              <div class="content-item-link-wrap-icon"> <link-icon /></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>
             </div>
@@ -36,7 +36,8 @@
 import { reactive } from 'vue';
 import miaoDividerLeft from '~/components/miaoDivider-left.vue';
 // @ts-ignore
-import ChevronDown from "@vicons/ionicons5/ChevronDown"
+import ChevronDown from "~/components/icons/ChevronDown.vue";
+import linkIcon from '~/components/icons/link.vue';
 
 type PageContent = {
   subTitle: string,
@@ -62,7 +63,7 @@ const PageContent = reactive<PageContent[]>([
     show: true,
     content: [
       {
-        name: 'miaoDirectory',
+        name: 'MiaoDirectory',
         description: '有个插件功能的单文件文件托管服务',
         links: [
           {
@@ -76,7 +77,7 @@ const PageContent = reactive<PageContent[]>([
         ]
       },
       {
-        name: 'miaoShare',
+        name: 'MiaoShare',
         description: '多了个加密环节的文件分享平台',
         links: [
           {
@@ -86,7 +87,7 @@ const PageContent = reactive<PageContent[]>([
         ]
       },
       {
-        name: 'miaoBlog',
+        name: 'MiaoBlog',
         description: '施工中，不过不要抱有太大期待',
         links: [
           {
@@ -101,7 +102,7 @@ const PageContent = reactive<PageContent[]>([
     show: true,
     content: [
       {
-        name: 'genshin-gacha',
+        name: 'Genshin-Gacha',
         description: '通过模拟来计算抽卡成功率的小工具',
         nuxtLinks: [
           {
@@ -111,7 +112,7 @@ const PageContent = reactive<PageContent[]>([
         ]
       },
       {
-        name: 'miaoTracker',
+        name: 'MiaoTracker',
         description: '仅仅是个接口而已，用来查询开发者的位置记录',
         nuxtLinks: [
           {
@@ -135,6 +136,26 @@ const PageContent = reactive<PageContent[]>([
           }
         ]
       },
+      {
+        name: 'Nuxt',
+        description: 'Nuxt官方文档',
+        links: [
+          {
+            name: 'Nuxt',
+            url: 'https://nuxt.com/'
+          }
+        ]
+      },
+      {
+        name: 'Element-plus',
+        description: 'element-plus官方文档',
+        links: [
+          {
+            name: 'element-plus',
+            url: 'https://element-plus.org/zh-CN/guide/design.html'
+          }
+        ]
+      }
     ]
   },
 ])
@@ -252,14 +273,15 @@ const switchItemShow = (item: PageContent) => {
         }
 
         .content-item-name {
+          box-sizing: border-box;
           width: 100%;
           font-size: 20px;
           padding-bottom: 5px;
           background-color: #15aa87ce;
           color: #fff;
-          margin-bottom: 10px;
-          padding-left: 10px;
+          padding: 3px 10px 5px;
           letter-spacing: 0px;
+          margin-bottom: 10px;
           // font-family: PT Serif, Serif;
           // font-weight: 600;
         }
@@ -281,10 +303,14 @@ const switchItemShow = (item: PageContent) => {
           user-select: none;
           padding-right: 10px;
 
-          &>div {
-            font-size: 14px;
-            font-weight: 300;
+          &-icon {
+            // font-size: 14px;
+            // font-weight: 300;
             margin-right: 10px;
+            height: 16px;
+            aspect-ratio: 1;
+            transform: translateY(0px) rotate(-45deg);
+            opacity: .7;
           }
 
           &>a {
@@ -321,4 +347,10 @@ const switchItemShow = (item: PageContent) => {
     }
   }
 }
+
+@media screen and (max-width: 999px) {
+  .main .content-wrap .content .content-items-wrap {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  }
+}
 </style>
\ No newline at end of file
diff --git a/pages/posts/index.vue b/pages/posts/index.vue
index 082879c..1b6e577 100644
--- a/pages/posts/index.vue
+++ b/pages/posts/index.vue
@@ -6,15 +6,21 @@
             </header>
             <p class="post-summary">{{ post.summary }}...</p>
             <footer class="post-footer">
-                <div class="post-date">{{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}</div>
+                <div class="post-date">
+                    <time-icon class="post-date-icon" />
+                    <span>
+                        {{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}
+                    </span>
+                </div>
                 <div class="post-tags">
+                    <bookmark class="post-tags-icon" />
                     <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)">
-                <el-skeleton :rows="5" />
+                <el-skeleton :rows="3" />
             </div>
         </div>
     </div>
@@ -22,6 +28,8 @@
 
 <script setup lang="ts">
 import useDefaultStore from '~/hooks/pinia/useDefaultStore';
+import timeIcon from '~/components/icons/time.vue'
+import bookmark from '~/components/icons/tag.vue'
 import type { postItem } from '~/types/post';
 
 const store = useDefaultStore()
@@ -43,7 +51,11 @@ onMounted(async () => {
     // router.push('/posts/temp')
     // await sleep(1000)
     postsData.value = await getData()
-    isInit.value = true
+    isInit.value = true;
+    (async () => {
+        const res = await $fetch('/api/test/testDir')
+        console.log(res)
+    })()
     // console.log(postsData.value)
 })
 
@@ -52,12 +64,13 @@ onMounted(async () => {
 <style lang="scss" scoped>
 .posts-wrapper {
     // height: 50vh;
+    box-sizing: border-box;
     width: 100%;
-    padding-top: 10px;
+    padding: 10px 20px;
 
     // background-color: #15aa87;
     .posts-item {
-        margin: 10px 20px;
+        margin: 10px 0px;
         padding-bottom: 20px;
 
         &:not(:last-child) {
@@ -97,18 +110,29 @@ onMounted(async () => {
             font-weight: 200;
 
             .post-date {
+                display: flex;
                 font-size: 12px;
+                &-icon {
+                    height: 16px;
+                    margin-right: 5px;
+                }
             }
 
             .post-tags {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                gap: 10px;
+                gap: 6px;
                 font-size: 12px;
                 color: rgba(0, 0, 0, .54);
                 font-weight: 200;
 
+                &-icon {
+                    height: 10px;
+                    transform: rotate(-90deg) translate(-1px, -1px);
+                    // margin-right: -3px;
+                }
+
                 &>div {
                     cursor: pointer;
                     transition: color .2s linear;
@@ -124,6 +148,7 @@ onMounted(async () => {
     .posts-skeleton {
         &-item {
             padding: 10px 20px;
+            // border-bottom: 1px solid #e8e8e8;
         }
     }
 }
diff --git a/pages/posts/post-[id].vue b/pages/posts/post-[id].vue
index 45b08bc..7e37eba 100644
--- a/pages/posts/post-[id].vue
+++ b/pages/posts/post-[id].vue
@@ -2,7 +2,7 @@
     <div class="md-wrapper">
         <div class="md" v-if="isInit">
             <div class="md-title">{{ title }}</div>
-            <n-divider />
+            <div class="md-divider"></div>
             <div v-html="renderedData"></div>
         </div>
         <div v-else class="md-skeleton-item">
@@ -88,4 +88,11 @@ onMounted(async () => {
     font-size: 42px;
     margin-bottom: -10px;
 }
+
+.md-divider {
+    width: 100%;
+    height: 1px;
+    background-color: #e8e8e8;
+    margin: 30px 0;
+}
 </style>
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7da3219..0a57456 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ importers:
       '@pinia/nuxt':
         specifier: ^0.9.0
         version: 0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))(rollup@4.30.1)
-      '@vicons/ionicons5':
-        specifier: ^0.13.0
-        version: 0.13.0
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -983,9 +980,6 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
-  '@vicons/ionicons5@0.13.0':
-    resolution: {integrity: sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==}
-
   '@vitejs/plugin-vue-jsx@4.1.1':
     resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4296,8 +4290,6 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vicons/ionicons5@0.13.0': {}
-
   '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@babel/core': 7.26.0
diff --git a/server/api/test/testDir.ts b/server/api/test/testDir.ts
new file mode 100644
index 0000000..a885dc1
--- /dev/null
+++ b/server/api/test/testDir.ts
@@ -0,0 +1,8 @@
+import fs from 'fs';
+
+export default defineEventHandler((event) => {
+    const res = fs.readdirSync('./')
+    return {
+        res
+    }
+})
\ No newline at end of file