77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import type { MetaFunction } from '@remix-run/node';
|
|
import { useNavigate } from '@remix-run/react';
|
|
import { ContractSearchHero } from '~/components/contract-template/ContractSearchHero';
|
|
import styles from '~/styles/pages/contract-template.css?url';
|
|
|
|
export const links = () => [
|
|
{ rel: 'stylesheet', href: styles }
|
|
];
|
|
|
|
export const meta: MetaFunction = () => {
|
|
return [
|
|
{ title: 'AI智能合同模板搜索 - 智慧法务' },
|
|
{
|
|
name: 'description',
|
|
content: '使用AI智能搜索快速找到最适合的合同模板，支持自然语言描述搜索。'
|
|
}
|
|
];
|
|
};
|
|
|
|
// 面包屑导航配置
|
|
export const handle = {
|
|
breadcrumb: "智能搜索"
|
|
};
|
|
|
|
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 handleSearch = (query: string) => {
|
|
if (query.trim()) {
|
|
navigate(`/contract-template/search/results?q=${encodeURIComponent(query)}`);
|
|
}
|
|
};
|
|
|
|
const handleCategoryClick = (categoryName: string) => {
|
|
navigate(`/contract-template/list?category=${encodeURIComponent(categoryName)}`);
|
|
};
|
|
|
|
return (
|
|
<div className="contract-template-search">
|
|
<ContractSearchHero onSearch={handleSearch} />
|
|
<div className="quick-categories">
|
|
{categories.map((category, index) => (
|
|
<div
|
|
key={index}
|
|
className="category-card"
|
|
onClick={() => handleCategoryClick(category.name)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
handleCategoryClick(category.name);
|
|
}
|
|
}}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label={`选择${category.name}分类，共${category.count}个模板`}
|
|
>
|
|
<div className="category-icon">
|
|
<i className={category.icon}></i>
|
|
</div>
|
|
<div className="category-title">{category.name}</div>
|
|
<div className="category-count">{category.count}个模板</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|