列表插入操作，目前缺陷缺少排序，思路，折叠而目标菜单，重新排序再展开。下一步，博客实体，富文本？MarkDown？MongoDB！

components/Home/Blog/Menu.vue

@@ -1,36 +1,55 @@
 <script setup lang="ts">
+import type {blogMenu} from "~/drizzle/schema";
+
 const props = defineProps({
     status:{
         type: Boolean,
         default: false,
         required: true
     },
+    active: {
+        type: [Object, null],
+        default: () => {},
+        required: true
+    },
     blogMenuList:{
         type: Array,
         default: () => [],
         required: true
     }
 })
+// 菜单数据类型
+type BlogMenu = typeof blogMenu.$inferInsert;
+type ShowBlogMenu = BlogMenu & {
+    rank?: number;
+    opne?: boolean;
+    openNumber?: number;
+    childrenLength?: number;
+}
 // 菜单折叠状态
 const menuCollapseStatus = ref(props.status)
 
 watchEffect(() => {
     menuCollapseStatus.value = props.status
 })
-const emit = defineEmits(['createBlogMenu', "update:status", "collapseChildren"])
+const emit = defineEmits(['createBlogMenu', "update:status", "collapseChildren", "update:active"])
 
 // 改变菜单展开状态
 const handleMenuCollapseStatusChange = () => {
     emit('update:status', !props.status)
 }
 // 展开/关闭子菜单
-const handleCollapseChildrenEvent = (item, index) => {
+const handleCollapseChildrenEvent = (item: ShowBlogMenu, index: number) => {
     item.childrenLength && emit('collapseChildren', item, index)
 }
 // 创建blog菜单
 const handleCreateBlogMenuItemEvent = (pid: string) => {
     emit('createBlogMenu', pid)
 }
+// 选中blog菜单
+const handleActiveBlogMenu = (blogObject: BlogMenu) => {
+    emit('update:active', blogObject)
+}
 </script>
 
 <template>
@@ -47,21 +66,28 @@ const handleCreateBlogMenuItemEvent = (pid: string) => {
                     </header>
                     <div class="line"/>
                     <div class="blogMenuContent">
-                        <div class="contentBox blogMenuItem" v-for="(item, index) in blogMenuList" :key="item.id">
+                        <TransitionGroup name="list">
-                            <div :style="{width: item.rank * 1.4 + 'rem'}"></div>
+                            <div v-for="(item, index) in blogMenuList" :key="item.id">
-                            <div class="textIcon"
+                                <div class="contentBox blogMenuItem" :class="active?.id == item.id && 'active'">
-                                 :class="item.childrenLength && 'haveChildren'"
+                                    <div :style="{width: item.rank * 1.4 + 'rem'}" @click.stop></div>
-                                 @click="handleCollapseChildrenEvent(item, index)"
+                                    <div class="textIcon"
-                            >
+                                         :class="item.childrenLength && 'haveChildren'"
-                                <div class=" bar a11 allCenter star-blogIconFont">&#xe608;</div>
+                                         @click.stop="handleCollapseChildrenEvent(item, index)"
-                                <div class=" bar a11 allCenter sxIconFont" :class="item.open && 'open'"><div>&#xe64a;</div></div>
+                                    >
+                                        <div class=" bar a11 allCenter star-blogIconFont">&#xe608;</div>
+                                        <div class=" bar a11 allCenter sxIconFont" :class="item.open && 'open'"><div>&#xe64a;</div></div>
+                                    </div>
+                                    <nuxt-link class="text" :to="'/home/blog/'+item.id" @click="handleActiveBlogMenu(item)">
+                                        <div class="oneLineOverMore">{{item.name}}</div>
+                                    </nuxt-link>
+                                    <div class="barBox" :class="item.pid === '0' && 'awaistShows'" @click.stop>
+                                        <div class="star-blogIconFont bar a11 allCenter" @click="handleCreateBlogMenuItemEvent(item.id)">&#xe608;</div>
+                                        <div class="star-blogIconFont bar a11 allCenter">&#xe73a;</div>
+                                    </div>
+                                </div>
+
                             </div>
-                            <div class="text"><div class="oneLineOverMore">{{item.name}}</div></div>
+                        </TransitionGroup>
-                            <div class="barBox" :class="item.pid === '0' && 'awaistShows'">
-                                <div class="star-blogIconFont bar a11 allCenter" @click="handleCreateBlogMenuItemEvent(item.id)">&#xe608;</div>
-                                <div class="star-blogIconFont bar a11 allCenter">&#xe73a;</div>
-                            </div>
-                        </div>
                     </div>
                     <footer></footer>
                 </div>
@@ -81,6 +107,18 @@ const handleCreateBlogMenuItemEvent = (pid: string) => {
 .blogmenu-enter-from, .blogmenu-leave-to {
     width: 0px;
 }
+
+.list-enter-active,
+.list-leave-active {
+    transition: all .5s ease;
+}
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+    background-color: var(--font-color-top3-active);
+    transform: translateX(30px);
+}
+
 .homeBlogMenu{
     user-select: none;
 }
@@ -206,7 +244,7 @@ const handleCreateBlogMenuItemEvent = (pid: string) => {
     position: relative;
     flex: 1;
     overflow: hidden;
-    & > div.blogMenuItem{
+    .blogMenuItem{
         position: relative;
         font-size: 1rem;
         display: flex;
@@ -232,7 +270,7 @@ const handleCreateBlogMenuItemEvent = (pid: string) => {
                 }
             }
         }
-        & > div.text{
+        & > .text{
             position: relative;
             flex: 1;
             min-width: 0;// 关键

components/Ni/Popup.vue

@@ -133,6 +133,7 @@ onMounted(() => {
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.2);
+    z-index: 999;
 }
 
 // 弹窗主体
@@ -150,6 +151,7 @@ onMounted(() => {
     background-color: var(--Ni-content-bg-color);
     display: flex;
     flex-direction: column;
+    z-index: 999;
 
     @media (min-width: 768px){
         &{

pages/home/blog.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import rfdc from "rfdc";
 import type {blogMenu} from "~/drizzle/schema";
+import {useAsyncData} from "nuxt/app";
 const clone = rfdc()
 const niMessage = useNiMessage()
 
+const {data: obm, error} = await useFetch('/api/blog/blogMenu');
+if (error.value) {
+    throw error.value;
+}
+
 definePageMeta({
     layout: 'home',
     pageTransition: {
@@ -12,28 +18,39 @@ definePageMeta({
     },
 })
 // 菜单数据类型
-type InsertBlogMenu = typeof blogMenu.$inferInsert;
+type BlogMenu = typeof blogMenu.$inferInsert;
+type ShowBlogMenu = BlogMenu & {
+    rank?: number;
+    opne?: boolean;
+    openNumber?: number;
+    childrenLength?: number;
+}
 // 菜单原始数据
-const originalBlogMenuLis = shallowRef([])
+const originalBlogMenuList = shallowRef<ShowBlogMenu[]>(obm as ShowBlogMenu)
 // 根据pid存储列表Map
 const blogMenuPidMap = ref(new Map)
 // 根据id存储对象Map
 const blogMenuIdMap = ref(new Map)
 // blog渲染列表
-const blogMenuList = ref<InsertBlogMenu[]>([]);
+const blogMenuList = ref<ShowBlogMenu[]>([]);
 // blog菜单对象
-const blogMenuObject = ref<InsertBlogMenu>(null);
+const blogMenuObject = ref<ShowBlogMenu>(null);
+// 选中的blog菜单对象
+const activeBlogMenuObject = ref<ShowBlogMenu>(null);
 // 菜单折叠
 const menuCollapseStatus = ref(true)
 // blog信息弹窗状态
 const blogInfoPopupStatus = ref(false)
+// 新增的blog菜单Pid
+const insertBlogMenuPid = ref<string>('');
 
+// ---- 数据相关
 // 格式化菜单数据
-const formatBlogMenuListToPidMap = (blogMenuList: Array<InsertBlogMenu>) => {
+const formatBlogMenuListToPidMap = (blogMenuList: Array<ShowBlogMenu>) => {
     const idMap = new Map()
     const pidMap = new Map()
     const list = clone(blogMenuList)
-    const pidObj: Record<string, InsertBlogMenu[]> = {};
+    const pidObj: Record<string, ShowBlogMenu[]> = {};
     for(const menuItem of list){
         if(pidObj[menuItem.pid]){
             pidObj[menuItem.pid].push(menuItem)
@@ -43,11 +60,13 @@ const formatBlogMenuListToPidMap = (blogMenuList: Array<InsertBlogMenu>) => {
         if(menuItem.pid == 0){
             menuItem.rank = 0;
         }
+        menuItem.openNumber = 0;
     }
     for(const menuItem of list){
         const id = menuItem.id;
         if(pidObj[id]){
             menuItem.childrenLength = pidObj[id].length
+            consola.info(menuItem.name, menuItem.childrenLength)
         }
         idMap.set(id, menuItem)
     }
@@ -57,29 +76,75 @@ const formatBlogMenuListToPidMap = (blogMenuList: Array<InsertBlogMenu>) => {
     blogMenuPidMap.value = pidMap
     blogMenuIdMap.value = idMap
 }
-// 获取blog菜单数据
+// 初始化blog菜单数据
-const getMenuListFetch = async () => {
+const initMenuData = () => {
-    const { data, error } = await useFetch('/api/blog/blogMenu');
+    const blogMenuData = originalBlogMenuList.value
-    if (error.value) {
+    formatBlogMenuListToPidMap(blogMenuData);
-        throw error.value;
-    }
-    originalBlogMenuLis.value = data.value;
-    formatBlogMenuListToPidMap(data.value);
     blogMenuList.value = blogMenuPidMap.value.get('0')
 }
-// 展开/关闭子菜单事件
+// 客户端获取菜单数据
-const handleCollapseChildrenEvent = (item, index) => {
+const getMenuListForClient = async () => {
-    if(item.open == true){
+    const resd = await $fetch('/api/blog/blogMenu').catch(e => {
-        blogMenuIdMap.value.get(item.id).open = false;
+        consola.warn('获取博客目录异常', e)
-        blogMenuList.value.splice(index + 1, item.childrenLength);
+        niMessage.warning('获取博客目录异常!')
+    });
+    if(resd){
+        originalBlogMenuList.value = resd;
+        initMenuData()
+    }
+}
+// 修改上级菜单的打开数量
+const changeParentOpenNumber = (item: ShowBlogMenu, openNumber: number, type = '-') => {
+    if(item.pid === '0'){
+        item.openNumber = openNumber
+        return
+    }
+    let targetMenuItem = item;
+    while(true){
+        // 获取父元素
+        targetMenuItem = blogMenuIdMap.value.get(targetMenuItem.pid);
+        if(type == '-'){
+            targetMenuItem.openNumber -= openNumber
+        }else{
+            targetMenuItem.openNumber += openNumber
+        }
+        if(targetMenuItem.pid === '0'){
+            break;
+        }
+    }
+    if(type == '-'){
+        item.openNumber = 0
     }else{
+        item.openNumber = openNumber
+    }
+}
+
+// --- 事件
+// 展开/关闭子菜单事件
+const handleCollapseChildrenEvent = (item: ShowBlogMenu, index: number) => {
+    if(item.open == true){
+        // 闭合
+        // 将状态关闭
+        blogMenuIdMap.value.get(item.id).open = false;
+        // 删除子孙元素
+        blogMenuList.value.splice(index + 1, item.openNumber);
+        // 降低父辈元素的打开数量
+        changeParentOpenNumber(item, item.openNumber, '-');
+        //
+    }else{
+        // 展开
+        // 将状态打开
         blogMenuIdMap.value.get(item.id).open = true;
+        // 获取子元素
         const childrenList = blogMenuPidMap.value.get(item.id)
         blogMenuList.value.splice(index + 1, 0, ...childrenList.map(i => {
             i.rank = item.rank + 1;
+            i.open = false;
             return i
         }));
+        changeParentOpenNumber(item, childrenList.length, '+');
     }
+
 }
 // 新增blog事件
 const handleCreateBlogMenuItemEvent = (pid: string) => {
@@ -89,21 +154,42 @@ const handleCreateBlogMenuItemEvent = (pid: string) => {
         desc: ''
     }
     blogInfoPopupStatus.value = true;
+    insertBlogMenuPid.value = pid
 }
 // 确认新增
 const handleCreateBlogMenuItemAck = async () => {
-    consola.info(blogMenuObject.value)
     const resd= await $fetch('/api/blog/blogMenu',{
         method: 'POST',
         body: blogMenuObject.value
+    }).catch(e => {
+        consola.error(e);
+        niMessage.warning('创建博客失败!');
     });
-    consola.info(resd);
+    if(resd){
+        niMessage.success('创建博客成功!');
+        blogInfoPopupStatus.value = false;
+        const father = blogMenuIdMap.value.get(insertBlogMenuPid.value);
+        resd.rank = father.rank + 1;
+        resd.opne = false;
+        resd.openNumber = 0;
+        resd.childrenLength = 0;
+        father.childrenLength ++;
+        blogMenuIdMap.value.set(resd.id, resd)
+        const pidMap = blogMenuPidMap.value.get(father.id)
+        pidMap.push(resd)
+        if(father.open){
+            const openNumber = father.openNumber
+            changeParentOpenNumber(father, 1, '+');
+            const insertIndex = blogMenuList.value.findIndex(i => i.id === father.id)
+            father.openNumber =  father.openNumber + openNumber
+            blogMenuList.value.splice(insertIndex + father.openNumber, 0, resd);
+        }
+    }
 }
 
 // SSR运行
-await getMenuListFetch()
+initMenuData()
 onMounted(() => {
-    consola.log(blogMenuList.value)
 })
 </script>
 
@@ -112,6 +198,7 @@ onMounted(() => {
         <HomeBlogMenu
             class="left"
             v-model:status="menuCollapseStatus"
+            v-model:active="activeBlogMenuObject"
             :blogMenuList
             @createBlogMenu="handleCreateBlogMenuItemEvent"
             @collapseChildren="handleCollapseChildrenEvent"></HomeBlogMenu>
@@ -122,6 +209,7 @@ onMounted(() => {
                 </div>
             </header>
             <main>
+                <NuxtPage />
             </main>
         </div>
         <div class="right"></div>

pages/home/blog/[blogId].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div>
+    ID {{$route.params.blogId}}
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

server/api/blog/blogMenu/index.get.ts

@@ -7,6 +7,6 @@ export default defineEventHandler(async event => {
   // 初始化DB
   const blogMenuDB = new BlogMenuDB(event)
   const resd = await blogMenuDB.getBlogMenu(headerAuth)
-  consola.info(resd)
+  // consola.info(resd)
   return resd
 })

server/api/blog/blogMenu/index.post.ts

@@ -11,9 +11,10 @@ export default defineEventHandler(async event => {
   const blogMenuDB = new BlogMenuDB(event)
   const resd = await blogMenuDB.insertBlogMenu(body, headerAuth)
   consola.info(body, resd)
+  const result = await blogMenuDB.getBlogMenuForBlogId(body.id, headerAuth)
   // if(!requAuth.isTrue) {
   //   // 判断为正常登录
   // }
 
-  return resd
+  return result[0]
 })

server/middleware/02.auth.ts

@@ -9,7 +9,7 @@ export default defineEventHandler(event => {
         ...defaultToken,
         isTrue: false
     })
-    consola.info(`Token ${t}`);
+    // consola.info(`Token ${t}`);
 
     if (!t) {
         throw createError({

server/services/blog/blogMenu.ts

@@ -37,4 +37,14 @@ export class BlogMenuDB {
                 and(eq(blogMenu.createdBy, headerAuth.userId), eq(blogMenu.deleted, 0), headerAuth.isTrue ? undefined : eq(blogMenu.public, 1))
             ).orderBy(asc(blogMenu.sort), asc(blogMenu.createdAt));
     }
+    // 获取指定目录id
+    async getBlogMenuForBlogId(blogId: string, headerAuth: HeaderAuth):Promise<InsertBlogMenu> {
+        const result = await this.db
+            .select()
+            .from(blogMenu)
+            .where(
+                and(eq(blogMenu.createdBy, headerAuth.userId), eq(blogMenu.deleted, 0), headerAuth.isTrue ? undefined : eq(blogMenu.public, 1), eq(blogMenu.id, blogId))
+            ).limit(1);
+        return result
+    }
 }