fix(Category): url 空格引起的 bug

src/app/vol/list/[category]/[[...page]]/page.tsx

@@ -13,7 +13,23 @@ export const metadata: Metadata = {
 const getCategoryList = async () => {
   const result = await apiSearchCategoryList();
   if (result.code !== 200) return notFound();
-  return result.data;
+
+  // 去除空格
+  const list: Category[] = result.data.map((item) => {
+    return { ...item, nameEn: item.nameEn.replace(/ /g, '') };
+  });
+
+  // 添加“全部”tag
+  list.unshift({
+    id: '0',
+    nameCh: '全部',
+    nameEn: 'all',
+    image: '',
+    thumbnail: '',
+    description: '',
+  });
+
+  return list;
 };
 
 const getRecommendList = async () => {
@@ -45,7 +61,7 @@ export default async function Journal({ params }: { params: { category?: string;
       {/* 左侧 */}
       <div className="w-[712px] mt-[50px]">
         {/* category */}
-        <Category current={categoryInfo?.nameEn ?? 'all'} />
+        <Category list={categoryList} current={categoryInfo?.id ?? '0'} />
         {/*  */}
         <div className="flex flex-row items-center justify-between  mt-[33px]">
           <div className="text-[17px] leading-[23.8px]">{categoryInfo?.nameCh ?? '全部'}</div>

src/components/Category.tsx

@@ -1,31 +1,13 @@
 import Link from 'next/link';
 
-import { apiSearchCategoryList } from '@/services/server/journal';
+const Category = async ({ list, current }: { list: Category[]; current: string }) => {
-
-const getCategoryList = async () => {
-  const result = await apiSearchCategoryList();
-  return result.code === 200 ? result.data : [];
-};
-
-const Category = async ({ current = '' }: { current?: string }) => {
-  const categoryList = await getCategoryList();
-
-  categoryList.unshift({
-    id: '0',
-    nameCh: '全部',
-    nameEn: 'all',
-    image: '',
-    thumbnail: '',
-    description: '',
-  });
-
   return (
     <div className={`grid grid-cols-8`}>
-      {categoryList.map((item: Category) => (
+      {list.map((item: Category) => (
         <Link
           href={`/vol/list/${item.nameEn}`}
           key={item.id}
-          className={`w-[80px] h-[35px] mt-[10px] rounded-[120px] text-[13px] leading-[18px] text-center leading-[35px] cursor-pointer ${current === item.nameEn ? 'bg-brand text-[#fff]' : 'bg-[#F2F3F7] text-[#000]'}`}
+          className={`w-[80px] h-[35px] mt-[10px] rounded-[120px] text-[13px] leading-[18px] text-center leading-[35px] cursor-pointer ${current === item.id ? 'bg-brand text-[#fff]' : 'bg-[#F2F3F7] text-[#000]'} hover:bg-brand hover:text-[#fff]`}
         >
           {item.nameCh}
         </Link>