update

.prettierrc.js

@@ -0,0 +1,104 @@
+export default {
+    /**
+     * 换行宽度，当代码宽度达到多少时换行
+     * @default 80
+     * @type {number}
+     */
+    printWidth: 80,
+    /**
+     * 缩进的空格数量
+     * @default 2
+     * @type {number}
+     */
+    tabWidth: 3,
+    /**
+     * 是否使用制表符代替空格
+     * @default false
+     * @type {boolean}
+     */
+    useTabs: false,
+    /**
+     * 是否在代码块结尾加上分号
+     * @default true
+     * @type {boolean}
+     */
+    semi: false,
+    /**
+     * 是否使用单引号替代双引号
+     * @default false
+     * @type {boolean}
+     */
+    singleQuote: true,
+    /**
+     * 对象属性的引号处理
+     * @default "as-needed"
+     * @type {"as-needed"|"consistent"|"preserve"}
+     */
+    quoteProps: 'as-needed',
+    /**
+     * jsx中是否使用单引号替代双引号
+     * @default false
+     * @type {boolean}
+     */
+    jsxSingleQuote: true,
+    /**
+     * 在jsx中使用是否单引号代替双引号
+     * @default false
+     * @type {boolean}
+     */
+    /**
+     * 末尾是否加上逗号
+     * @default "es5"
+     * @type {"es5"|"none"|"all"}
+     */
+    trailingComma: 'none',
+    /**
+     * 在对象，数组括号与文字之间加空格 "{ foo: bar }"
+     * @default true
+     * @type {boolean}
+     */
+    bracketSpacing: true,
+    /**
+     * 把多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。
+     * @default false
+     * @type {boolean}
+     */
+    bracketSameLine: true,
+    /**
+     * 当箭头函数只有一个参数是否加括号
+     * @default "always"
+     * @type {"always"|"avoid"}
+     */
+    arrowParens: 'always',
+    /**
+     * 为HTML、Vue、Angular和Handlebars指定全局空格敏感性
+     * @default "css"
+     * @type {"css"|"strict"|"ignore"}
+     */
+    htmlWhitespaceSensitivity: 'ignore',
+    /**
+     * 是否缩进Vue文件中的<script>和<style>标记内的代码。有些人(比如Vue的创建者)不使用缩进来保存缩进级别，但这可能会破坏编辑器中的代码折叠。
+     * @default "always"
+     * @type {"always"|"avoid"}
+     */
+    vueIndentScriptAndStyle: false,
+    /**
+     * 文件结束符
+     * @default "lf"
+     * @type {"lf"|"crlf"|"cr"|"auto"}
+     */
+    endOfLine: 'crlf',
+    /**
+     * 因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+     */
+    proseWrap: 'never',
+    // 是否使用根目录下的EditorConfig配置文件
+    useEditorConfig: false,
+    /**
+     * HTML\VUE\JSX每行只有单个属性
+     * @default true
+     * @type {boolean}
+     */
+    // singleAttributePerLine: true,
+    // disableLanguages: ['html']
+}

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.9.0",
+    "@vicons/ionicons5": "^0.13.0",
     "naive-ui": "^2.41.0",
     "node-fetch": "^3.3.2",
     "nuxt": "^3.10.3",

pages/index.vue

@@ -6,14 +6,22 @@
     <div class="content-warp">
       <div v-for="(item) in PageContent" :key="item.subTitle" class="content">
         <div class="sub-title">
-          <span>{{ item.subTitle }}</span>
+          <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>
+          </n-divider>
         </div>
-        <div v-for="(cItem) in item.content" :key="cItem.name" class="content-item">
+        <div :class="['content-items-warp', item.show ? '' : 'content-items-warp-hide']">
-          <div class="content-item-name">{{ cItem.name }}</div>
+          <div v-for="(cItem) in item.content" :key="cItem.name" class="content-item">
-          <div class="content-item-description">{{ cItem.description }}</div>
+            <div class="content-item-name">{{ cItem.name }}</div>
-          <div class="content-item-link-warp">
+            <div class="content-item-description">{{ cItem.description }}</div>
-            <div>link:</div>
+            <div class="content-item-link-warp">
-            <a v-for="link in cItem.links" :href="link.url" target="_blank">{{ link.name }}</a>
+              <div>link:</div>
+              <a v-for="link in cItem.links" :href="link.url" target="_blank">{{ link.name }}</a>
+            </div>
           </div>
         </div>
       </div>
@@ -22,10 +30,28 @@
 </template>
 
 <script lang="ts" setup>
+import { reactive } from 'vue';
+// @ts-ignore
+import { ChevronDown } from "@vicons/ionicons5"
 
-const PageContent = [
+type PageContent = {
+  subTitle: string,
+  show: boolean,
+  content: ContentItem[]
+}
+type ContentItem = {
+  name: string,
+  description: string,
+  links: {
+    name: string,
+    url: string
+  }[]
+}
+
+const PageContent = reactive<PageContent[]>([
   {
     subTitle: '个人项目',
+    show: true,
     content: [
       {
         name: 'miaoDirectory',
@@ -50,20 +76,51 @@ const PageContent = [
             url: "https://nj.miaospring.top:3001/539943419/miaoShare"
           }
         ]
+      },
+      {
+        name: 'miaoBlog',
+        description: '施工中，不过不要抱有太大期待',
+        links: [
+          {
+            name: "github",
+            url: "https://github.com/Zioywishing/miaoBlog"
+          }
+        ]
       }
     ]
+  }, {
+    subTitle: '学习资料',
+    show: true,
+    content: [
+      {
+        name: 'vue3',
+        description: 'vue3官方文档',
+        links: [
+          {
+            name: 'vue3',
+
+            url: 'https://cn.vuejs.org/'
+          }
+        ]
+      },
+    ]
   }
-]
+])
+
+const switchItemShow = (item: PageContent) => {
+  item.show = !item.show
+}
 
 </script>
 
 <style lang="scss" scoped>
 .main {
   box-sizing: border-box;
-  height: 100%;
+  min-height: calc(100vh - 60px);
   display: flex;
   flex-direction: column;
   padding: 20px 10px;
+  background: rgba(21, 170, 135, .02);
 
   .content-warp {
     box-sizing: border-box;
@@ -71,44 +128,112 @@ const PageContent = [
     padding: 0 15px;
 
     .content {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(200px, 250px));
-      gap: 20px;
-      /* 可选，设置子元素之间的间距 */
 
       .sub-title {
-        font-size: 20px;
+        display: flex;
         margin-bottom: 10px;
         letter-spacing: 2px;
-        grid-row: 1 / span 1;
+        user-select: none;
-        grid-column: 1 / -1;
+
+        .sub-title-text {
+          font-size: 20px;
+          // font-weight: 500;
+          letter-spacing: 2px;
+          margin-right: 10px;
+          // width: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .sub-title-chevron {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          transition: color .15s linear,
+            transform 0.3s ease;
+          cursor: pointer;
+          color: #535353;
+
+          // &:hover {
+          //   color: #000000;
+          // }
+
+          &-hide {
+            transform: rotate(180deg);
+          }
+        }
+      }
+
+      .content-items-warp {
+        max-height: 200vh;
+        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;
+        opacity: 1;
+
+        // margin: 0 -20px;
+        &-hide {
+          max-height: 0;
+          opacity: 0;
+        }
       }
 
       .content-item {
-        border: 1px solid #000;
+        // border: 1px solid #000;
         display: flex;
         flex-direction: column;
         align-items: baseline;
-        // margin-bottom: 10px;
+        padding-bottom: 10px;
-        padding: 5px 10px 10px 10px;
         border-radius: 10px;
+        overflow: hidden;
+        transition: scale 0.15s ease;
+        user-select: none;
+
+        background-color: rgba(255, 255, 255, 0.15);
+        backdrop-filter: blur(19px);
+        border: .5px solid rgba(255, 255, 255, 0.18);
+        box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
+        -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
+
+        &:hover {
+          scale: 1.01;
+        }
 
         .content-item-name {
+          width: 100%;
           font-size: 20px;
           padding-bottom: 5px;
+          background-color: #15aa87ce;
+          color: #fff;
+          margin-bottom: 10px;
+          padding-left: 10px;
+          letter-spacing: 0px;
+          // font-family: PT Serif, Serif;
+          // font-weight: 600;
         }
 
         .content-item-description {
           font-size: 14px;
           font-weight: 300;
+          padding: 0 10px;
         }
 
         .content-item-link-warp {
+          flex: 1;
           width: 100%;
+          box-sizing: border-box;
           display: flex;
           justify-content: flex-end;
-          margin-top: 10px;
+          align-items: flex-end;
           user-select: none;
+          padding-right: 10px;
 
           &>div {
             font-size: 14px;
@@ -140,7 +265,7 @@ const PageContent = [
     width: 100%;
     display: flex;
     justify-content: center;
-    margin-bottom: 20px;
+    // margin-bottom: 10px;
 
     &>span {
       font-size: 30px;

pages/posts.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
+    <div class="temp">
-
+        其实<br>一篇文章都还没写
     </div>
 </template>
 
@@ -8,6 +8,13 @@
 
 </script>
 
-<style scoped>
+<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>

pages/tools.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

pnpm-lock.yaml

@@ -11,6 +11,9 @@ 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
       naive-ui:
         specifier: ^2.41.0
         version: 2.41.0(vue@3.5.13(typescript@5.7.3))
@@ -951,6 +954,9 @@ 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}
@@ -4232,6 +4238,8 @@ 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