chore: refactor category lists

Author: SkyBird233

components/NewsCategoryList.vue renamed to components/CategoryList.vue

@@ -1,34 +1,18 @@
 <script lang="ts" setup>
-import type { Collections } from '@nuxt/content';
-
 const { locale } = useI18n();
 // const textValue = tm('NewsCategoryList');
 
 const props = defineProps<{
   category?: string;
+  filters?: Array<{ key: string; value: string }>;
   limit?: number;
 }>();
 
-const queryNewsCollectionCategory = (
-  locale: keyof Collections,
-  category?: string,
-  limit: number = 0
-) => {
-  const q = queryCollection(locale)
-    .select('path', 'title', 'date')
-    .where('path', 'LIKE', '/news%')
-    .order('date', 'DESC')
-    .limit(limit);
-  return category
-    ? () => q.where('categories', 'LIKE', `%"${category}"%`).all() // `["category1","category2"]`
-    : () => q.all();
-};
-
 const { data, error, status } = await useAsyncData(
   computed(
-    () => `${locale.value}:NewsCategoriesList:${props.category}:${props.limit}`
+    () => `${locale.value}:CategoriesList:${props.category}:${props.limit}`
   ),
-  queryNewsCollectionCategory(locale.value, props.category, props.limit)
+  queryCollectionCategory(props.category, props.limit, props.filters)
 );
 </script>
 

pages/index.vue

@@ -23,7 +23,7 @@ const columnBorderlessList = [
       <div>
         <CategorySecond :title="textValue.title1" />
         <article>
-          <NewsCategoryList :limit="10" />
+          <CategoryList category="news" :limit="10" />
           <div
             class="px-[15px] py-[10px] text-right leading-6 font-[12pt] text-link">
             <link-standard :link="useTIndex(localLink.news, 1)" />

pages/news/index.vue

@@ -4,6 +4,7 @@ const textValue = tm('news.index');
 // const linkValue = tm('allUniversalLink');
 const newsLimit = 10;
 useHead({ title: textValue.title });
+const filters = (newsCategory) => [{ key: 'categories', value: newsCategory }];
 </script>
 
 <template>
@@ -14,9 +15,10 @@ useHead({ title: textValue.title });
         :right-text="textValue.all"
         right-url="/news/list/advisories"
         :show-right-chevron="true" />
-      <news-category-list
-        category="advisories"
+      <category-list
+        category="news"
         :limit="newsLimit"
+        :filters="filters('advisories')"
         class="overflow-y-auto" />
     </div>
     <div class="">
@@ -26,9 +28,10 @@ useHead({ title: textValue.title });
         right-url="/news/list/news"
         class="border-l border-l-white"
         :show-right-chevron="true" />
-      <news-category-list
+      <category-list
         category="news"
         :limit="newsLimit"
+        :filters="filters('news')"
         class="theme-border-secondary overflow-y-auto border-l-[1px]" />
     </div>
     <div>
@@ -37,9 +40,10 @@ useHead({ title: textValue.title });
         :right-text="textValue.all"
         right-url="/news/list/journals"
         :show-right-chevron="true" />
-      <news-category-list
-        category="journals"
+      <category-list
+        category="news"
         :limit="newsLimit"
+        :filters="filters('journals')"
         class="overflow-y-auto" />
     </div>
 
@@ -50,9 +54,10 @@ useHead({ title: textValue.title });
         right-url="/news/list/minutes"
         :show-right-chevron="true"
         class="border-l border-l-white" />
-      <news-category-list
-        category="minutes"
+      <category-list
+        category="news"
         :limit="newsLimit"
+        :filters="filters('minutes')"
         class="theme-border-secondary overflow-y-auto border-l-[1px]" />
     </div>
   </div>

pages/news/list/[category].vue

@@ -23,7 +23,9 @@ useHead({ title: title });
 <template>
   <div>
     <category-second :title="title" class="border-r-solid border-r-white" />
-    <news-category-list :category="route.params.category" />
+    <category-list
+      category="news"
+      :filters="[{ key: 'categories', value: route.params.category }]" />
   </div>
 </template>
 

utils/content.ts

@@ -0,0 +1,31 @@
+import type {
+  CollectionQueryBuilder,
+  EnCollectionItem,
+  ZhCollectionItem
+} from '@nuxt/content';
+
+export const queryCollectionCategory = (
+  category?: string,
+  limit: number = 0,
+  filters?: Array<{ key: string; value: string }>
+) => {
+  const { locale } = useI18n();
+
+  let q = (
+    queryCollection(locale.value) as CollectionQueryBuilder<
+      ZhCollectionItem | EnCollectionItem
+    >
+  )
+    .select('path', 'title', 'date')
+    .where('path', 'LIKE', `/${category}%`)
+    .order('date', 'DESC')
+    .limit(limit);
+
+  if (filters) {
+    for (const filter of filters) {
+      q = q.where(filter.key, 'LIKE', `%"${filter.value}"%`);
+    }
+  }
+
+  return () => q.all();
+};