feat: save

packages/backend/src/modules/web/web.controller.ts

@@ -28,8 +28,8 @@ export class WebController {
   }
 
   @Get('category/tree')
-  getCategoryTree(@Query('id') id: string) {
-    return this.webService.getCategoryTreeAndPath(+id);
+  getCategoryTree(@Query('id') id: string, @Headers('locale') locale?: string) {
+    return this.webService.getCategoryTreeAndPath(+id, locale);
   }
 
   @Get('search')
@@ -38,7 +38,7 @@ export class WebController {
   }
 
   @Get('articleWithCate/:id')
-  getArticlesByCate(@Param('id') id: string) {
-    return this.webService.getArticlesByCate(+id);
+  getArticlesByCate(@Param('id') id: string, @Headers('locale') locale?: string) {
+    return this.webService.getArticlesByCate(+id, locale);
   }
 }

packages/backend/src/modules/web/web.service.ts

@@ -99,17 +99,19 @@ export class WebService {
     console.log('currentCategory', currentCategory);
     return currentCategory.id
       ? this.categoryRepo.findOne({
-          where: { id: currentCategory.id },
-          relations: { children: true },
-        })
+        where: { id: currentCategory.id },
+        relations: { children: true },
+      })
       : null;
   }
 
-  async getCategoryTreeAndPath(id: number) {
+  async getCategoryTreeAndPath(id: number, locale: string) {
+    const lang = this.sharedService.handleValidLang(locale);
+
     const categories = await this.categoryRepo.find({
-      relations: { children: true },
+      relations: { children: true, translations: true },
     });
-    const data = this.sharedService.handleTree(categories);
+    const data = this.sharedService.handleTree(categories.map((cate) => cate.translate(lang)));
     return getTopMenuFragment(data, id);
   }
 

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

@@ -15,7 +15,6 @@
       </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"
@@ -62,12 +61,14 @@ name: "showcate",
 import {
   type ArticleDetailType,
   type CategoryItem,
-  getArticlesByCateId,
-  getCategoryTree
+  getCategoryTree,
+  getArticlesByCateId
 } from '@/api'
 
 import { NH2, NBreadcrumb, NBreadcrumbItem, NTree, NEmpty } from 'naive-ui'
 import type { TreeOption } from 'naive-ui'
+import { findNodeById, findBreadcrumbPath, type TreeNode } from '@/utils'
+
 
 const route = useRoute()
 const router = useRouter()
@@ -94,16 +95,23 @@ const nodeProps = ({ option }: { option: TreeOption }) => {
   }
 }
 
-onMounted(async () => {
-
+watchEffect(async () => {
   if (params.id) {
     const res = await getArticlesByCateId(params.id);
     if (res) {
       articleList.value = res.data as ArticleDetailType[]
     }
     const res1 = await getCategoryTree(params.id)
-    if (res1) {
+    if (res1 && res1.data) {
       mainCategories.value = res1.data as CategoryItem
+
+      currentCate.value = findNodeById(
+        [mainCategories.value] as unknown as TreeNode[],
+        Number(params.id),
+      ) as unknown as CategoryItem
+      defaultExpandedKeys.value = [currentCate.value.parentId]
+      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

@@ -3,7 +3,6 @@
     <div v-if="detail">
       <div class="breadcrumb my-[30px] pb-[20px] bb-1px_#EBEBEB" role="navigation">
         <n-breadcrumb separator=">" v-if="breadcrumb">
-          <!--          {{ breadcrumb }}-->
           <template v-for="(bread, index) in breadcrumb" :key="index">
             <n-breadcrumb-item :clickable="false"> {{ bread.title }}</n-breadcrumb-item>
           </template>
@@ -91,7 +90,7 @@ import {
   // getArticlesByCateId,
   getNearArticles,
 } from '@/api'
-import { htmlToTree, createAnchorNames, dayjs, findNodeById, findBreadcrumbPath } from '@/utils'
+import { htmlToTree, createAnchorNames, dayjs, findNodeById, findBreadcrumbPath, type TreeNode } from '@/utils'
 import { NH1, NH2, NH4, NBreadcrumb, NBreadcrumbItem, NTree, NAnchor, NAnchorLink } from 'naive-ui'
 import type { TreeOption } from 'naive-ui'
 
@@ -148,11 +147,13 @@ watchEffect(() => {
             mainCategories.value = res.data as CategoryItem[]
             if (mainCategories.value) {
               currentCate.value = findNodeById(
-                [mainCategories.value],
+                [mainCategories.value] as unknown as TreeNode[],
                 detail.value.categoryId,
               ) as unknown as CategoryItem
+
               defaultExpandedKeys.value = [currentCate.value.parentId]
-              breadcrumb.value = findBreadcrumbPath([mainCategories.value], detail.value.categoryId)
+              breadcrumb.value = findBreadcrumbPath([mainCategories.value] as unknown as TreeNode[], detail.value.categoryId)
+              console.log('breadcrumb', [mainCategories.value], breadcrumb.value)
             }
           }
         }

packages/web/src/utils/tree.ts

@@ -5,7 +5,7 @@ export interface TreeNode {
 }
 
 // 递归查找节点的方法
-export function findNodeById(tree: TreeNode[], id: string): TreeNode | null {
+export function findNodeById(tree: TreeNode[], id: string | number): TreeNode | null {
   // debugger
   for (const node of tree) {
     if (node.id === id) {
@@ -24,7 +24,7 @@ export function findNodeById(tree: TreeNode[], id: string): TreeNode | null {
 // 递归查找面包屑路径的方法
 export function findBreadcrumbPath(
   tree: TreeNode[],
-  targetId: string,
+  targetId: string | number,
   path: TreeNode[] = [],
 ): TreeNode[] | null {
   for (const node of tree) {