feat: 继续完成后台前端实现

components/icons/cat.vue

@@ -3,6 +3,16 @@
         p-id="26076">
         <path
             d="M512 0C229.240755 0 0 229.240755 0 512s229.240755 512 512 512 512-229.240755 512-512S794.759245 0 512 0z m328.597736 872.573585c-2.125283-3.526038-4.250566-7.052075-6.424151-10.529811-0.676226-1.062642-1.01434-2.366792-2.270189-5.264906 4.926792 1.932075 8.404528 3.284528 12.655095 4.975094-10.771321-47.770566-30.961509-90.855849-59.314717-130.221887-28.449811-39.462642-62.744151-73.032453-103.510944-101.047547 8.501132-5.409811 16.615849-3.091321 25.068679-1.78717-7.148679-19.320755-19.900377-34.487547-32.26566-50.378867 16.953962-9.080755 24.295849-24.923774 31.396226-39.945661-7.824906-0.966038-15.408302-1.883774-25.020377-3.043019 4.975094-4.685283 8.549434-7.438491 11.350944-10.819622 11.882264-14.297358 17.436981-31.541132 20.335094-49.267925 4.34717-26.517736 6.858868-53.373585 10.384906-80.036226 0.434717-3.381132 1.835472-7.052075 3.815849-9.756981 8.404528-11.350943 11.978868-24.58566 13.524528-38.013585 3.187925-27.193962 5.409811-54.53283 7.390189-81.823397 1.062642-14.490566 0.724528-29.077736 1.159245-43.616603 0.289811-8.646038 1.207547-17.243774 1.352453-25.889812 0.096604-5.89283-3.429434-8.259623-9.322264-8.45283-11.833962-0.338113-22.073962 4.298868-31.97585 9.805283-30.478491 17.002264-56.754717 39.607547-81.823396 63.516981-9.515472 9.080755-19.803774 15.504906-32.845283 17.243774-2.753208 0.386415-6.037736 0.338113-8.404528-0.821132-39.94566-19.272453-82.258113-26.759245-126.261132-23.909434-23.281509 1.497358-45.983396 6.617358-67.767547 15.36-13.57283 5.458113-27.628679 5.168302-41.443019 1.78717-4.540377-1.110943-8.259623-5.554717-12.220378-8.69434-28.594717-22.653585-57.09283-45.355472-85.687547-67.960755-5.699623-4.492075-8.259623-4.34717-10.481509 2.753208-3.284528 10.433208-6.279245 21.349434-6.665661 32.169057-1.352453 37.289057 5.651321 73.805283 12.848302 110.176603 1.738868 8.935849 4.298868 17.243774 1.110944 26.904151-4.298868 12.993208-1.255849 26.710943 1.738868 39.607547 7.196981 30.864906 15.456604 61.44 23.57132 93.270944-4.250566 0.531321-9.756981 1.255849-15.843018 1.980377 2.270189 15.649811 8.984151 29.802264 18.354717 42.698868 9.322264 12.848302 19.272453 25.213585 27.91849 36.419623-4.636981 6.424151-9.273962 12.896604-13.910943 19.369056 0.434717 0.579623 0.869434 1.159245 1.352453 1.78717 10.529811-4.685283 20.818113-6.810566 29.415849 1.159245-5.651321 5.941132-11.206038 11.78566-16.760755 17.678491l1.738868 1.883774c3.815849-2.318491 7.583396-4.636981 12.365283-7.486793l-18.258113 30.768302c6.375849-2.221887 10.626415-3.670943 14.925283-5.168302-13.476226 11.544151-19.369057 26.904151-23.426415 43.858113 2.56-0.966038 4.878491-1.835472 8.935849-3.33283-13.186415 33.569811-10.723019 66.415094-3.236227 100.033208-4.34717-1.01434-7.535094-1.78717-10.771321-2.56-3.381132 11.689057-1.110943 19.030943 13.572831 43.036981-5.603019-0.821132-9.708679-1.449057-14.393963-2.173585-0.724528 6.424151 2.076981 12.606792 5.892831 18.161509 2.704906 3.912453 2.753208 6.955472 0.869433 11.350944-4.10566 9.515472-7.293585 19.369057-11.254339 30.188679 2.173585-1.01434 3.526038-1.642264 5.216604-2.463396-6.472453 20.673208-10.191698 41.491321-12.26868 62.454339C125.391698 855.184906 24.150943 695.402264 24.150943 512 24.150943 242.572075 242.572075 24.150943 512 24.150943s487.849057 218.421132 487.849057 487.849057c0 142.828679-61.391698 271.36-159.251321 360.573585z"
-            fill="#15aa87" p-id="26077"></path>
+            :fill="props.fill" p-id="26077"></path>
     </svg>
 </template>
+
+<script setup lang="ts">
+const props = defineProps({
+    fill: {
+        type: String,
+        default: '#15aa87'
+    }
+})
+
+</script>

components/icons/documents.vue

@@ -0,0 +1,14 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+        <path
+            d="M336 264.13V436c0 24.3-19.05 44-42.95 44H107c-23.95 0-43-19.7-43-44V172a44.26 44.26 0 0 1 44-44h94.12a24.55 24.55 0 0 1 17.49 7.36l109.15 111a25.4 25.4 0 0 1 7.24 17.77z"
+            fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path>
+        <path d="M200 128v108a28.34 28.34 0 0 0 28 28h108" fill="none" stroke="currentColor" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="32"></path>
+        <path
+            d="M176 128V76a44.26 44.26 0 0 1 44-44h94a24.83 24.83 0 0 1 17.61 7.36l109.15 111A25.09 25.09 0 0 1 448 168v172c0 24.3-19.05 44-42.95 44H344"
+            fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path>
+        <path d="M312 32v108a28.34 28.34 0 0 0 28 28h108" fill="none" stroke="currentColor" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="32"></path>
+    </svg>
+</template>

components/icons/home.vue

@@ -0,0 +1,11 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+        <path
+            d="M80 212v236a16 16 0 0 0 16 16h96V328a24 24 0 0 1 24-24h80a24 24 0 0 1 24 24v136h96a16 16 0 0 0 16-16V212"
+            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
+        <path d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256" fill="none" stroke="currentColor"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
+            d="M400 179V64h-48v69"></path>
+    </svg>
+</template>

pages/posts/post-[id].vue

@@ -26,9 +26,10 @@ const title = ref('')
 
 const renderedData = ref('')
 
-onMounted(async () => {
 const id = route.params.id as string
 
+onMounted(async () => {
+
     const _p = new Promise<postContent>(async (resolve, reject) => {
         try {
             const cache = postStore.getPostCache(id)

pages/user/index.vue

@@ -1,9 +1,11 @@
 <template>
-    <div>
+    <div class="loading-wrapper">
-        <el-button @click="handleLogout">
+        <div class="loading">
-            logout
+            <div></div>
-        </el-button>
+            <div></div>
-        <nuxt-link to="user/test"> test</nuxt-link>
+            <div></div>
+            <div></div>
+        </div>
     </div>
 </template>
 
@@ -13,16 +15,174 @@ import useUserStore from '~/hooks/pinia/useUserStore';
 const router = useRouter()
 const userStore = useUserStore()
 
-const handleLogout = () => {
+// definePageMeta({
-    userStore.logout()
+//     middleware: [
-    router.push('user/login')
+//         function (to, from) {
-}
+//             // if (userStore.isLogin === false) {
+//             //     return navigateTo('user/login')
+//             // }
+//             console.log(to, from)
+//         }
+//     ]
+// })
 
 onBeforeMount(() => {
     if (userStore.isLogin === false) {
-        return router.push('user/login')
+        return router.replace('/user/login')
+    } else {
+        return router.replace('/user/main')
     }
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+.loading-wrapper {
+    height: calc(100vh - 60px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.loading,
+.loading>div {
+    /* scale: 1.5; */
+    position: relative;
+    box-sizing: border-box;
+}
+
+.loading {
+    display: block;
+    font-size: 0;
+    color: #15aa87;
+}
+
+.loading>div {
+    display: inline-block;
+    float: none;
+    background-color: currentColor;
+    border: 0 solid currentColor;
+}
+
+.loading {
+    width: 8px;
+    height: 8px;
+}
+
+.loading>div {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
+    animation: ball-fussion-ball1 1s 0s ease infinite;
+}
+
+.loading>div:nth-child(1) {
+    top: 0;
+    left: 50%;
+    z-index: 1;
+}
+
+.loading>div:nth-child(2) {
+    top: 50%;
+    left: 100%;
+    z-index: 2;
+    animation-name: ball-fussion-ball2;
+}
+
+.loading>div:nth-child(3) {
+    top: 100%;
+    left: 50%;
+    z-index: 1;
+    animation-name: ball-fussion-ball3;
+}
+
+.loading>div:nth-child(4) {
+    top: 50%;
+    left: 0;
+    z-index: 2;
+    animation-name: ball-fussion-ball4;
+}
+
+@keyframes ball-fussion-ball2 {
+    0% {
+        opacity: 0.35;
+    }
+
+    50% {
+        top: 200%;
+        left: 200%;
+        opacity: 1;
+    }
+
+    100% {
+        top: 100%;
+        left: 50%;
+        z-index: 1;
+        opacity: 0.35;
+    }
+}
+
+@keyframes ball-fussion-ball1 {
+    0% {
+        opacity: 0.35;
+    }
+
+    50% {
+        top: -100%;
+        left: 200%;
+        opacity: 1;
+    }
+
+    100% {
+        top: 50%;
+        left: 100%;
+        z-index: 2;
+        opacity: 0.35;
+    }
+}
+
+@keyframes ball-fussion-ball3 {
+    0% {
+        opacity: 0.35;
+    }
+
+    50% {
+        top: 200%;
+        left: -100%;
+        opacity: 1;
+    }
+
+    100% {
+        top: 50%;
+        left: 0;
+        z-index: 2;
+        opacity: 0.35;
+    }
+}
+
+@keyframes ball-fussion-ball4 {
+    0% {
+        opacity: 0.35;
+    }
+
+    50% {
+        top: -100%;
+        left: -100%;
+        opacity: 1;
+    }
+
+    100% {
+        top: 0;
+        left: 50%;
+        z-index: 1;
+        opacity: 0.35;
+    }
+}
+
+/* 作者：德育处主任
+链接：https://juejin.cn/post/7037036742985121800
+来源：稀土掘金
+著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 */
+</style>

pages/user/login.vue

@@ -33,6 +33,9 @@ const userStore = useUserStore()
 
 const username = ref('')
 const password = ref('')
+username.value = '539943419'
+password.value = 'zjh030628'
+onMounted(() => handleLogin())
 
 let isLogining = false
 

pages/user/main.vue

@@ -1,13 +1,332 @@
 <template>
-    <div>
+    <div :class="['user-main', showSidebar ? '' : 'hide-sidebar']">
-        用户主界面
+        <div class="user-sidebar">
+            <!-- <el-button @click="handleHideSidebar">hide</el-button> -->
+            <div class="sidebar-item" @click="handleHideSidebar">
+                <div class="sidebar-item-icon">
+                    <component class="sidebar-item-icon-noFill" :is="chevronDown"
+                        :style="{ transform: showSidebar ? '' : 'rotate(-90deg)' }"></component>
+                </div>
+                <div class="sidebar-item-title">
+                    <!-- {{ '隐藏' }} -->
+                </div>
+            </div>
+            <NuxtLink v-for="item in menuItem" class="sidebar-item" :to="item.to">
+                <div class="sidebar-item-icon">
+                    <component :class="item.iconFill ? 'sidebar-item-icon-noFill' : ''" :is="item.icon"></component>
+                </div>
+                <div class="sidebar-item-title">
+                    {{ item.title }}
+                </div>
+            </NuxtLink>
+        </div>
+        <div class="user-content">
+            <el-scrollbar>
+                <router-view></router-view>
+            </el-scrollbar>
+        </div>
+        <div class="user-bottom-bar">
+            <NuxtLink v-for="item in menuItem" class="bottom-item" :to="item.to">
+                <div class="bottom-item-icon">
+                    <component :class="item.iconFill ? 'bottom-item-icon-noFill' : ''" :is="item.icon"></component>
+                </div>
+                <div class="bottom-item-title">
+                    {{ item.title }}
+                </div>
+            </NuxtLink>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import useUserStore from '~/hooks/pinia/useUserStore';
+import Cat from '~/components/icons/cat.vue'
+import chevronDown from '~/components/icons/chevronDown.vue';
+import Documents from '~/components/icons/documents.vue';
+import Home from '~/components/icons/home.vue';
 
+const router = useRouter()
+const userStore = useUserStore()
+
+const menuItem = shallowReactive([
+    {
+        title: '主页',
+        icon: Home,
+        iconFill: true,
+        to: '/user/main'
+    }, {
+        title: '文章',
+        icon: Documents,
+        iconFill: true,
+        to: '/user/main/post'
+    }, {
+        title: '账户',
+        icon: Cat,
+        to: '/user/main/account'
+    }, {
+        title: '测试',
+        icon: Cat,
+        to: '/user/main/test'
+    }
+])
+
+const showSidebar = ref(true)
+
+const handleHideSidebar = () => {
+    showSidebar.value = !showSidebar.value
+}
+
+const handleLogout = () => {
+    userStore.logout()
+    router.push('user/login')
+}
+
+onBeforeMount(() => {
+    if (userStore.isLogin === false) {
+        return router.replace('/user/login')
+    }
+})
 </script>
 
 <style lang="scss" scoped>
+.user-main {
+    width: 100%;
+    height: calc(100vh - 60px);
+    max-height: calc(100vh - 60px);
+    display: grid;
+    grid-template: 1fr 40px / 100px 1fr;
+    transition: grid-template .2s ease;
 
+    .user-content {
+        grid-column: 1 / -1;
+        grid-row: 1 / -1;
+        max-height: calc(100vh - 60px);
+    }
+
+    .user-sidebar {
+        grid-column: 1;
+        grid-row: 1 / -1;
+        border-right: 1px solid #ccc;
+        padding: 10px 0px;
+        display: flex;
+        flex-direction: column;
+        // gap: 10px;
+        // align-items: start;
+
+        .sidebar-item {
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            height: 40px;
+            width: 100%;
+            // justify-content: center;
+            text-decoration: none;
+            padding: 5px 0px;
+            transition: all .2s ease;
+            user-select: none;
+            cursor: pointer;
+            overflow: hidden;
+
+            &:hover {
+                background-color: #e0e0e054;
+            }
+
+            &-icon {
+                min-width: 40px;
+                height: 30px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: black;
+
+                svg {
+                    width: 20px;
+                    aspect-ratio: 1;
+                    transition: all .2s ease;
+                }
+            }
+
+            &-title {
+                margin-left: 6px;
+                text-wrap: nowrap;
+                letter-spacing: 2px;
+                color: black;
+                font-family: PT Serif, Serif;
+                transition: all .2s ease;
+            }
+        }
+    }
+
+    .user-bottom-bar {
+        grid-column: 1 / -1;
+        grid-row: 2;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .bottom-item {
+            height: 30px;
+            aspect-ratio: 1;
+            color: #000;
+            transition: all .2s ease;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-decoration: none;
+
+            &-icon {
+                width: 30px;
+                height: 30px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #000;
+
+                svg {
+                    width: 20px;
+                    aspect-ratio: 1;
+                    transition: all .2s ease;
+                }
+            }
+
+            &-title {
+                text-wrap: nowrap;
+                letter-spacing: 2px;
+                color: #000;
+                font-family: PT Serif, Serif;
+                transition: all .2s ease;
+                font-size: 7px;
+                margin-top: 3px;
+                transform: translateX(1px);
+            }
+
+            // &:hover {
+            //     scale: 1.05;
+            // }
+        }
+    }
+}
+
+
+
+.hide-sidebar {
+    grid-template: 1fr 40px / 40px 1fr;
+
+    // .sidebar-item-title {
+    //     // display: none;
+    // }
+}
+
+@media screen and (max-width: 768px) {
+    .user-main {
+        .user-sidebar {
+            display: none;
+        }
+
+        .user-content {
+            grid-row: 1;
+            max-height: calc(100vh - 100px);
+        }
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .user-main {
+        .user-bottom-bar {
+            display: none;
+        }
+
+        .user-content {
+            grid-column: 2;
+            grid-row: 1 / -1;
+        }
+    }
+}
+</style>
+
+<style lang="scss">
+.user-main {
+    .user-sidebar {
+        .sidebar-item {
+            .sidebar-item-icon {
+                svg {
+                    path {
+                        fill: black;
+                        transition: all .2s ease;
+                    }
+                }
+
+                .sidebar-item-icon-noFill {
+                    path {
+                        fill: none;
+                    }
+                }
+            }
+
+        }
+
+        .router-link-exact-active {
+            .sidebar-item-icon {
+                svg {
+                    path {
+                        fill: #15aa87;
+                    }
+                }
+
+                .sidebar-item-icon-noFill {
+                    path {
+                        fill: none;
+                        stroke: #15aa87;
+                    }
+                }
+            }
+
+            .sidebar-item-title {
+                color: #15aa87 !important;
+            }
+        }
+    }
+
+    .user-bottom-bar {
+        .bottom-item {
+            .bottom-item-icon {
+                svg {
+                    path {
+                        fill: black;
+                        transition: all .2s ease;
+                    }
+                }
+
+                .bottom-item-icon-noFill {
+                    path {
+                        fill: none;
+                    }
+                }
+            }
+
+        }
+
+        .router-link-exact-active {
+            .bottom-item-icon {
+                svg {
+                    path {
+                        fill: #15aa87;
+                    }
+                }
+
+                .bottom-item-icon-noFill {
+                    path {
+                        fill: none;
+                        stroke: #15aa87;
+                    }
+                }
+            }
+
+            .bottom-item-title {
+                color: #15aa87 !important;
+            }
+        }
+    }
+}
 </style>

pages/user/main/account.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <el-button @click="handleLogout">登出</el-button>
+    </div>
+</template>
+
+<script setup>
+import useUserStore from '~/hooks/pinia/useUserStore';
+
+const userStore = useUserStore()
+const router = useRouter()
+
+const handleLogout = () => {
+    userStore.logout()
+    router.push('/user/login')
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

pages/user/main/index.vue

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

pages/user/main/post.vue

@@ -0,0 +1,9 @@
+<template>
+    <nuxt-page></nuxt-page>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped></style>

pages/user/main/post/edit-[id].vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        edit: id-{{ route.params.id }}
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const route = useRoute()
+
+</script>
+
+<style scoped>
+
+</style>

pages/user/main/post/index.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="post-index">
+        <div class="post-index-title">
+            文章列表
+        </div>
+        <div class="post-index-list">
+            <div class="post-index-list-item">
+                上传文章
+            </div>
+            <div v-for="post in postList" :key="post.id" class="post-item post-index-list-item">
+                <div class="post-item-header">
+                    <div class="post-item-header-title">
+                        {{ post.title }}
+                    </div>
+                    <!-- <div class="post-item-header-date">
+                        {{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}
+                    </div> -->
+                </div>
+                <div class="post-item-content">
+                    <span>
+                        {{ post.summary }}
+                    </span>
+                </div>
+                <div class="post-item-footer">
+                    <div class="post-item-footer-info">
+                        <div class="post-item-footer-info-date">
+                            {{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}
+                        </div>
+                        <div class="post-item-footer-info-tags">
+                            <span v-for="tag in post.tags" :key="tag">{{ tag }}</span>
+                        </div>
+                    </div>
+                    <el-button class="post-item-footer-btn" @click="handleClickEditBtn(post.id)">
+                        编辑
+                    </el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { postItem } from '~/types/post';
+import getPostList from '~/utils/getPost';
+
+const router = useRouter()
+
+const postList = ref<postItem[]>([]);
+
+const handleClickEditBtn = (id: number) => {
+    router.push(`/user/main/post/edit-${id}`)
+}
+
+onMounted(async () => {
+    postList.value = await getPostList();
+})
+</script>
+
+<style lang="scss" scoped>
+.post-index {
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &-title {
+        width: 100%;
+        text-align: center;
+        padding: 0 0 10px 0;
+        font-size: 2rem;
+        font-weight: bold;
+        margin-bottom: 1rem;
+        letter-spacing: 4px;
+        text-decoration: none;
+        font-family: PT Serif, Serif;
+        border-bottom: 1px solid #ccc;
+        margin: 10px 0 20px;
+    }
+
+    &-list {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 1rem;
+
+        &-item {
+            // height: 100px;
+            border-radius: 5px;
+            border: 1px solid #ccc;
+        }
+
+        .post-item {
+            box-sizing: border-box;
+            overflow: hidden;
+            padding-bottom: 5px;
+
+            // padding: 10px;
+            &-header {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                &-title {
+                    width: 100%;
+                    box-sizing: border-box;
+                    text-align: center;
+                    letter-spacing: 4px;
+                    text-decoration: none;
+                    font-size: large;
+                    background-color: #15aa87;
+                    color: #fff;
+                    padding: 3px 0 5px;
+                    // font-family: PT Serif, Serif;
+                }
+            }
+
+            &-content {
+                max-height: 45px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-indent: 2em;
+                color: #363636;
+            }
+
+            &-footer {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-top: 5px;
+
+                &-info {
+                    padding: 0 5px;
+
+                    &>div {
+                        font-size: 10px;
+                    }
+                }
+
+                &-btn {
+                    height: 25px;
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+}
+</style>

style/default.scss

@@ -1,6 +1,7 @@
 body,html {
     padding: 0;
-    margin: 0
+    margin: 0;
+    -webkit-tap-highlight-color: transparent;
 }
 
 body {
@@ -11,3 +12,7 @@ body {
     color: #2c3e50;
     background-color: #fff
 }
+
+:focus-visible {
+    outline: #15aa8761 auto 1px;
+}

utils/getPost.ts

@@ -0,0 +1,33 @@
+import useDefaultStore from "~/hooks/pinia/useDefaultStore"
+import usePostStore from "~/hooks/pinia/usePostStore"
+import useMiaoFetch from "~/hooks/useMiaoFetch"
+// import usePostStore from "~/hooks/pinia/usePostStore"
+import type { postContent, postItem } from "~/types/post"
+
+export default async function getPostList() {
+    const store = useDefaultStore()
+    const cache = store.getCache('posts')
+    if (cache) {
+        return cache as postItem[]
+    }
+    const response = await $fetch('/api/posts/getPostList')
+    const res = response.data
+    store.setCache('posts', res)
+    return res
+}
+
+export async function getPostData(id: number | string) {
+    const postStore = usePostStore()
+    const cache = postStore.getPostCache(`${id}`)
+    if (cache) {
+        return cache
+    }
+    const res = await $fetch('/api/posts/getPostContent', {
+        method: 'POST',
+        body: {
+            id
+        }
+    }) as postContent
+    postStore.setPostCache(`${id}`, res)
+    return res
+}