合同基本列表数据查询基本完善

app/routes/contract-template.search._index.tsx

@@ -1,6 +1,8 @@
 import type { MetaFunction } from '@remix-run/node';
-import { useNavigate } from '@remix-run/react';
+import { useNavigate, useLoaderData } from '@remix-run/react';
 import { ContractSearchHero } from '~/components/contract-template/ContractSearchHero';
+import { getContractCategoriesWithCount } from '~/api/contract-template/templates';
+import type { ContractCategoryWithCount } from '~/api/contract-template/templates';
 import styles from '~/styles/pages/contract-template.css?url';
 
 export const links = () => [
@@ -22,18 +24,50 @@ export const handle = {
   breadcrumb: "智能搜索"
 };
 
+/**
+ * 转换分类数据为前端显示格式
+ * @param category 分类数据
+ * @returns 转换后的分类数据
+ */
+function transformCategory(category: ContractCategoryWithCount) {
+  return {
+    id: category.id,
+    name: category.name,
+    icon: category.icon || 'ri-file-text-line',
+    count: category.template_count
+  };
+}
+
+/**
+ * 加载分类数据
+ * @returns 分类数据
+ */
+export async function loader() {
+  try {
+    // 使用聚合查询获取分类及其模板数量
+    const categoriesResponse = await getContractCategoriesWithCount();
+
+    // 处理分类数据
+    if (categoriesResponse.error) {
+      console.error('获取分类失败:', categoriesResponse.error);
+      return { categories: [] };
+    }
+
+    const categories = categoriesResponse.data || [];
+
+    // 转换分类数据格式
+    const categoriesWithCount = categories.map(transformCategory);
+
+    return { categories: categoriesWithCount };
+  } catch (error) {
+    console.error('加载分类数据失败:', error);
+    return { categories: [] };
+  }
+}
+
 export default function ContractTemplateSearchIndex() {
   const navigate = useNavigate();
-  
-  // 模拟分类数据
-  const categories = [
-    { name: '销售合同', icon: 'ri-contract-line', count: 128 },
-    { name: '采购合同', icon: 'ri-shopping-cart-line', count: 96 },
-    { name: '物流运输', icon: 'ri-truck-line', count: 64 },
-    { name: '人事劳务', icon: 'ri-user-settings-line', count: 52 },
-    { name: '租赁合同', icon: 'ri-building-line', count: 38 },
-    { name: '保密协议', icon: 'ri-shield-check-line', count: 24 }
-  ];
+  const { categories } = useLoaderData<typeof loader>();
 
   const handleSearch = (query: string) => {
     if (query.trim()) {
@@ -41,8 +75,12 @@ export default function ContractTemplateSearchIndex() {
     }
   };
 
-  const handleCategoryClick = (categoryName: string) => {
-    navigate(`/contract-template/list?category=${encodeURIComponent(categoryName)}`);
+  /**
+   * 处理分类点击事件 - 使用ID而不是名称
+   * @param categoryId 分类ID
+   */
+  const handleCategoryClick = (categoryId: number) => {
+    navigate(`/contract-template/list?category_id=${categoryId}`);
   };
 
   return (
@@ -51,13 +89,13 @@ export default function ContractTemplateSearchIndex() {
       <div className="quick-categories">
         {categories.map((category, index) => (
           <div 
-            key={index}
+            key={category.id || index}
             className="category-card"
-            onClick={() => handleCategoryClick(category.name)}
+            onClick={() => handleCategoryClick(category.id)}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
-                handleCategoryClick(category.name);
+                handleCategoryClick(category.id);
               }
             }}
             role="button"