feat: save

packages/web/src/pages/showcate/[id].vue

@@ -12,14 +12,15 @@
       </div>
 
       <div v-if="currentCate">
-        <n-h2 class="mb-10"> {{ currentCate.title }}</n-h2>
+        <!-- <n-h2 class="mb-10"></n-h2> -->
+        <!-- <n-h2 class="mb-10"> {{ currentCate.title }}</n-h2> -->
       </div>
 
       <div class="w-full flex flex-row flex-nowrap">
         <div class="flex-basis-[240px] flex-grow-0 flex-shrink-0 br-1px_#EBEBEB">
-          <n-tree class="left-tree" v-if="mainCategories" block-line :data="mainCategories.children"
-            :default-expanded-keys="defaultExpandedKeys" :node-props="nodeProps" key-field="id" label-field="title"
-            children-field="children" selectable>
+          <n-tree class="left-tree" v-if="mainCategories" v-model:selected-keys="selectedKeys" block-line
+            :data="mainCategories.children" :default-expanded-keys="defaultExpandedKeys" :node-props="nodeProps"
+            key-field="id" label-field="title" children-field="children" selectable>
             <template #empty></template>
           </n-tree>
         </div>
@@ -82,7 +83,7 @@ const currentCate = ref<CategoryItem | undefined>()
 const mainCategories = ref<CategoryItem>()
 const articleList = ref<ArticleDetailType[]>([])
 const defaultExpandedKeys = ref<number[]>([])
-
+const selectedKeys = ref<number[]>([])
 
 const nodeProps = ({ option }: { option: TreeOption }) => {
   return {
@@ -111,7 +112,10 @@ watchEffect(async () => {
           [mainCategories.value] as unknown as TreeNode[],
           Number(params.id),
         ) as unknown as CategoryItem
+        console.log('currentCate', currentCate.value)
         defaultExpandedKeys.value = [currentCate.value.parentId]
+        const selectID = currentCate.value.parentId ? currentCate.value.id : currentCate.value.children[0].id
+        selectedKeys.value = [selectID];
         breadcrumb.value = findBreadcrumbPath([mainCategories.value] as unknown as TreeNode[], Number(params.id))
         console.log('breadcrumb', [mainCategories.value], breadcrumb.value)
       }

packages/web/src/pages/showdoc/[id].vue

@@ -15,7 +15,7 @@
       </div>
       <div class="w-full flex flex-row flex-nowrap">
         <div class="flex-basis-[240px] flex-grow-0 flex-shrink-0 br-1px_#EBEBEB">
-          <n-tree class="left-tree" v-if="mainCategories" block-line :data="mainCategories.children"
+          <n-tree class="left-tree" v-model:selected-keys="selectedKeys" v-if="mainCategories" block-line :data="mainCategories.children"
             :default-expanded-keys="defaultExpandedKeys" :node-props="nodeProps" key-field="id" label-field="title"
             children-field="children" selectable />
 
@@ -111,7 +111,7 @@ import type { TreeOption } from 'naive-ui'
 
 const route = useRoute()
 const router = useRouter()
-
+const selectedKeys = ref([]); 
 const params = route.params as {
   id?: number
 }
@@ -168,8 +168,9 @@ watchEffect(() => {
                   [mainCategories.value] as unknown as TreeNode[],
                   detail.value.categoryId,
                 ) as unknown as CategoryItem
-
                 defaultExpandedKeys.value = [currentCate.value.parentId]
+                const selectID = currentCate.value.parentId ? currentCate.value.id : currentCate.value.children[0].id
+                selectedKeys.value = [selectID];
                 breadcrumb.value = findBreadcrumbPath([mainCategories.value] as unknown as TreeNode[], detail.value.categoryId)
                 console.log('breadcrumb', [mainCategories.value], breadcrumb.value)
               }
@@ -191,7 +192,7 @@ const handleToArticle = (article: ArticleDetailType) => {
   router.replace(`/showdoc/${article.id}`)
   setTimeout(() => {
     location.reload()
-  }, 50)
+  }, 100)
 }
 const handleBreadcrumb = (bread: TreeNode) => {
   router.replace(`/showcate/${bread.id}`)