重新构建路由和配置样式文件

app/routes/rules._index.tsx

@@ -0,0 +1,351 @@
+import React from 'react';
+import { json, type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
+import { useLoaderData, useSearchParams } from "@remix-run/react";
+import { Button } from '~/components/ui/Button';
+import { Card } from '~/components/ui/Card';
+import { Tag, type TagColor } from '~/components/ui/Tag';
+import type { Rule } from '~/models/rule';
+import { RULE_TYPE_LABELS, RULE_TYPE_COLORS, RULE_PRIORITY_LABELS, RULE_PRIORITY_COLORS } from '~/models/rule';
+
+export const links = () => [
+  { rel: "stylesheet", href: "/rules_index.css" }
+];
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "中国烟草AI合同及卷宗审核系统 - 评查点列表" },
+    { name: "description", content: "评查点管理列表" }
+  ];
+};
+
+interface LoaderData {
+  rules: Rule[];
+  groups: {
+    id: string;
+    name: string;
+  }[];
+  totalCount: number;
+}
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const ruleType = url.searchParams.get("ruleType") || "";
+  const groupId = url.searchParams.get("groupId") || "";
+  const isActive = url.searchParams.get("isActive") || "";
+  const keyword = url.searchParams.get("keyword") || "";
+  
+  // 模拟数据，实际项目中应从API获取
+  const rules: Rule[] = [
+    {
+      id: "1",
+      code: "CP001",
+      name: "合同主体信息完整性检查",
+      ruleGroupId: "1",
+      groupName: "合同基本要素检查",
+      ruleType: "essential",
+      priority: "high",
+      description: "检查合同中是否完整包含签约方的基本信息，包括名称、地址、法定代表人等",
+      checkMethod: "automatic",
+      prompt: "检查合同主体双方信息是否完整，包括企业名称、注册地址、法定代表人或授权代表、联系方式等",
+      isActive: true,
+      createdAt: "2023-06-15 10:30",
+      updatedAt: "2023-06-15 10:30"
+    },
+    {
+      id: "2",
+      code: "CP002",
+      name: "合同金额一致性校验",
+      ruleGroupId: "1",
+      groupName: "合同基本要素检查",
+      ruleType: "content",
+      priority: "high",
+      description: "检查合同大小写金额是否一致",
+      checkMethod: "automatic",
+      prompt: "检查合同中的金额大写和小写表示是否一致，如￥10,000.00(壹万元整)",
+      isActive: true,
+      createdAt: "2023-06-20 14:15",
+      updatedAt: "2023-06-20 14:15"
+    },
+    {
+      id: "3",
+      code: "CP003",
+      name: "保密条款合规性审核",
+      ruleGroupId: "1",
+      groupName: "合同基本要素检查",
+      ruleType: "legal",
+      priority: "medium",
+      description: "检查合同是否包含保密条款并符合行业要求",
+      checkMethod: "mixed",
+      prompt: "检查合同中的保密条款是否完整、清晰，包含保密范围、期限、违约责任等",
+      isActive: true,
+      createdAt: "2023-07-05 09:45",
+      updatedAt: "2023-07-05 09:45"
+    },
+    {
+      id: "4",
+      code: "CP004",
+      name: "合同签约日期格式检查",
+      ruleGroupId: "1",
+      groupName: "合同基本要素检查",
+      ruleType: "format",
+      priority: "low",
+      description: "检查合同签约日期格式是否规范",
+      checkMethod: "automatic",
+      prompt: "检查合同签约日期格式是否符合YYYY年MM月DD日的规范格式",
+      isActive: false,
+      createdAt: "2023-07-10 16:20",
+      updatedAt: "2023-07-10 16:20"
+    },
+    {
+      id: "5",
+      code: "CP005",
+      name: "违约责任条款完整性检查",
+      ruleGroupId: "2",
+      groupName: "销售合同专项检查",
+      ruleType: "legal",
+      priority: "high",
+      description: "检查合同违约责任条款是否明确、完整",
+      checkMethod: "mixed",
+      prompt: "检查合同中的违约责任条款是否包含违约情形、违约金计算方式、责任承担方式等内容",
+      isActive: true,
+      createdAt: "2023-07-15 11:30",
+      updatedAt: "2023-07-15 11:30"
+    }
+  ];
+  
+  const groups = [
+    { id: "1", name: "合同基本要素检查" },
+    { id: "2", name: "销售合同专项检查" },
+    { id: "3", name: "采购合同专项检查" },
+    { id: "4", name: "专卖许可证审核规则" },
+    { id: "5", name: "行政处罚规范性检查" }
+  ];
+  
+  // 过滤数据
+  let filteredRules = [...rules];
+  
+  if (ruleType) {
+    filteredRules = filteredRules.filter(rule => rule.ruleType === ruleType);
+  }
+  
+  if (groupId) {
+    filteredRules = filteredRules.filter(rule => rule.ruleGroupId === groupId);
+  }
+  
+  if (isActive) {
+    const activeValue = isActive === 'true';
+    filteredRules = filteredRules.filter(rule => rule.isActive === activeValue);
+  }
+  
+  if (keyword) {
+    const lowerKeyword = keyword.toLowerCase();
+    filteredRules = filteredRules.filter(rule => 
+      rule.name.toLowerCase().includes(lowerKeyword) || 
+      rule.code.toLowerCase().includes(lowerKeyword)
+    );
+  }
+  
+  return json<LoaderData>({ 
+    rules: filteredRules,
+    groups,
+    totalCount: rules.length
+  });
+}
+
+export default function RulesList() {
+  const { rules, groups } = useLoaderData<typeof loader>();
+  const [searchParams, setSearchParams] = useSearchParams();
+  
+  const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
+    const { name, value } = e.target;
+    const newParams = new URLSearchParams(searchParams);
+    
+    if (value) {
+      newParams.set(name, value);
+    } else {
+      newParams.delete(name);
+    }
+    
+    setSearchParams(newParams);
+  };
+  
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const keyword = formData.get('keyword') as string;
+    
+    const newParams = new URLSearchParams(searchParams);
+    if (keyword) {
+      newParams.set('keyword', keyword);
+    } else {
+      newParams.delete('keyword');
+    }
+    
+    setSearchParams(newParams);
+  };
+
+  const handleCopy = (rule: Rule) => {
+    // 实际项目中应调用API复制规则
+    alert(`复制规则: ${rule.name}`);
+  };
+
+  const handleDelete = (rule: Rule) => {
+    // 实际项目中应调用API删除规则
+    if (window.confirm(`确定要删除评查点"${rule.name}"吗？`)) {
+      alert(`删除规则: ${rule.name}`);
+    }
+  };
+  
+  return (
+    <div className="p-6">
+      {/* 页面标识 */}
+      <div className="mb-4 p-3 bg-blue-100 border border-blue-300 rounded text-blue-800">
+        <h3 className="font-bold text-lg">当前页面: 评查点列表 (rules._index.tsx)</h3>
+        <p>如果你看到这个提示，说明你已成功到达评查点列表页面。</p>
+        <div className="mt-2">
+          <a href="/debug" className="text-blue-600 hover:underline">查看路由诊断页面</a> | 
+          <a href="/" className="ml-2 text-blue-600 hover:underline">返回首页</a>
+        </div>
+      </div>
+
+      {/* 页面头部 */}
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-medium">评查点管理</h2>
+        <Button type="primary" icon="ri-add-line" to="/rules/new">
+          新增评查点
+        </Button>
+      </div>
+      
+      {/* 筛选区域 */}
+      <Card className="mb-4" noDivider>
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4">
+          <div>
+            <label htmlFor="ruleType" className="block text-sm mb-1">评查点类型</label>
+            <select 
+              id="ruleType"
+              className="form-select w-full rounded border-gray-300 shadow-sm" 
+              name="ruleType"
+              value={searchParams.get('ruleType') || ''}
+              onChange={handleFilterChange}
+            >
+              <option value="">全部</option>
+              {Object.entries(RULE_TYPE_LABELS).map(([value, label]) => (
+                <option key={value} value={value}>{label}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label htmlFor="groupId" className="block text-sm mb-1">所属规则组</label>
+            <select 
+              id="groupId"
+              className="form-select w-full rounded border-gray-300 shadow-sm"
+              name="groupId"
+              value={searchParams.get('groupId') || ''}
+              onChange={handleFilterChange}
+            >
+              <option value="">全部</option>
+              {groups.map((group) => (
+                <option key={group.id} value={group.id}>{group.name}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label htmlFor="isActive" className="block text-sm mb-1">状态</label>
+            <select 
+              id="isActive"
+              className="form-select w-full rounded border-gray-300 shadow-sm"
+              name="isActive"
+              value={searchParams.get('isActive') || ''}
+              onChange={handleFilterChange}
+            >
+              <option value="">全部</option>
+              <option value="true">启用</option>
+              <option value="false">禁用</option>
+            </select>
+          </div>
+          <div>
+            <label htmlFor="keyword" className="block text-sm mb-1">搜索</label>
+            <form onSubmit={handleSearch} className="flex items-center">
+              <input 
+                type="text" 
+                id="keyword"
+                name="keyword"
+                className="form-input rounded-l flex-1 border-gray-300 shadow-sm" 
+                placeholder="输入评查点名称或编码"
+                defaultValue={searchParams.get('keyword') || ''}
+              />
+              <Button type="primary" icon="ri-search-line" className="rounded-l-none">
+                搜索
+              </Button>
+            </form>
+          </div>
+        </div>
+      </Card>
+      
+      {/* 评查点列表 */}
+      <Card noDivider>
+        <div className="overflow-x-auto">
+          <table className="w-full text-left border-collapse">
+            <thead className="bg-gray-50">
+              <tr className="text-xs text-gray-500 border-b">
+                <th className="py-3 px-4">评查点编码</th>
+                <th className="py-3 px-4">评查点名称</th>
+                <th className="py-3 px-4">评查点类型</th>
+                <th className="py-3 px-4">所属规则组</th>
+                <th className="py-3 px-4">优先级</th>
+                <th className="py-3 px-4">状态</th>
+                <th className="py-3 px-4">创建时间</th>
+                <th className="py-3 px-4">操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rules.map((rule) => {
+                const typeColor = RULE_TYPE_COLORS[rule.ruleType] as TagColor;
+                const priorityColor = RULE_PRIORITY_COLORS[rule.priority] as TagColor;
+                
+                return (
+                  <tr key={rule.id} className="border-b hover:bg-gray-50">
+                    <td className="py-3 px-4">{rule.code}</td>
+                    <td className="py-3 px-4">{rule.name}</td>
+                    <td className="py-3 px-4">
+                      <Tag color={typeColor}>{RULE_TYPE_LABELS[rule.ruleType]}</Tag>
+                    </td>
+                    <td className="py-3 px-4">{rule.groupName}</td>
+                    <td className="py-3 px-4">
+                      <Tag color={priorityColor}>{RULE_PRIORITY_LABELS[rule.priority]}</Tag>
+                    </td>
+                    <td className="py-3 px-4">
+                      {rule.isActive ? (
+                        <span className="flex items-center">
+                          <i className="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></i>
+                          启用
+                        </span>
+                      ) : (
+                        <span className="flex items-center">
+                          <i className="inline-block w-2 h-2 rounded-full bg-gray-400 mr-2"></i>
+                          禁用
+                        </span>
+                      )}
+                    </td>
+                    <td className="py-3 px-4">{rule.createdAt}</td>
+                    <td className="py-3 px-4">
+                      <Button type="default" size="small" icon="ri-edit-line" to={`/rules/${rule.id}`} className="mr-1">
+                        编辑
+                      </Button>
+                      <Button type="default" size="small" icon="ri-file-copy-line" className="mr-1" onClick={() => handleCopy(rule)}>
+                        复制
+                      </Button>
+                      <Button type="danger" size="small" icon="ri-delete-bin-line" onClick={() => handleDelete(rule)}>
+                        删除
+                      </Button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}