leaudit-platform-frontend/app/routes/contract-search._index.tsx

// import { useState } from 'react';
// import styles from '~/styles/pages/contract-search.css?url';

// export const links = () => [
//   { rel: 'stylesheet', href: styles }
// ];

// export default function ContractSearchIndex() {
//   const [searchQuery, setSearchQuery] = useState('');
  
//   const handleSearchInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
//     setSearchQuery(e.target.value);
//     // 自动调整高度
//     e.target.style.height = 'auto';
//     e.target.style.height = Math.max(80, e.target.scrollHeight) + 'px';
//   };

//   const handleSearch = () => {
//     if (searchQuery.trim()) {
//       console.log('搜索查询:', searchQuery);
//       // 这里可以添加实际的搜索逻辑
//     }
//   };

//   const handleCategoryClick = (categoryName: string) => {
//     console.log('选择分类:', categoryName);
//     // 这里可以添加跳转到相应分类的逻辑
//   };

//   const handleKeyDown = (e: React.KeyboardEvent, categoryName: string) => {
//     if (e.key === 'Enter' || e.key === ' ') {
//       e.preventDefault();
//       handleCategoryClick(categoryName);
//     }
//   };

//   return (
//     <div className="content-area">
//       <div className="search-hero">
//         <h1 className="search-title">AI智能合同模板搜索</h1>
//         <p className="search-subtitle">输入合同名称、用途或关键内容，快速找到最适合的模板</p>
        
//         <div className="search-container">
//           <div className="search-box">
//             <textarea 
//               className="search-textarea" 
//               placeholder="例如：销售合同、设备采购协议、包含违约责任条款的合同..."
//               value={searchQuery}
//               onChange={handleSearchInputChange}
//               aria-label="搜索输入框"
//             ></textarea>
//             <div className="search-actions">
//               <div className="search-tips">
//                 <i className="ri-lightbulb-line mr-1"></i>
//                 支持自然语言描述，AI将为您匹配最相关的模板
//               </div>
//               <button 
//                 className="search-btn" 
//                 onClick={handleSearch}
//                 aria-label="开始搜索"
//               >
//                 <i className="ri-search-line"></i>
//                 智能搜索
//               </button>
//             </div>
//           </div>
//         </div>
//       </div>
      
//       <div className="quick-categories">
//         <button 
//           className="category-card" 
//           onClick={() => handleCategoryClick('销售合同')}
//           onKeyDown={(e) => handleKeyDown(e, '销售合同')}
//           tabIndex={0}
//           aria-label="销售合同分类"
//         >
//           <div className="category-icon">
//             <i className="ri-handshake-line"></i>
//           </div>
//           <div className="category-title">销售合同</div>
//           <div className="category-count">128个模板</div>
//         </button>
//         <button 
//           className="category-card" 
//           onClick={() => handleCategoryClick('采购合同')}
//           onKeyDown={(e) => handleKeyDown(e, '采购合同')}
//           tabIndex={0}
//           aria-label="采购合同分类"
//         >
//           <div className="category-icon">
//             <i className="ri-shopping-cart-line"></i>
//           </div>
//           <div className="category-title">采购合同</div>
//           <div className="category-count">96个模板</div>
//         </button>
//         <button 
//           className="category-card" 
//           onClick={() => handleCategoryClick('物流运输')}
//           onKeyDown={(e) => handleKeyDown(e, '物流运输')}
//           tabIndex={0}
//           aria-label="物流运输分类"
//         >
//           <div className="category-icon">
//             <i className="ri-truck-line"></i>
//           </div>
//           <div className="category-title">物流运输</div>
//           <div className="category-count">64个模板</div>
//         </button>
//         <button 
//           className="category-card" 
//           onClick={() => handleCategoryClick('人事劳务')}
//           onKeyDown={(e) => handleKeyDown(e, '人事劳务')}
//           tabIndex={0}
//           aria-label="人事劳务分类"
//         >
//           <div className="category-icon">
//             <i className="ri-user-settings-line"></i>
//           </div>
//           <div className="category-title">人事劳务</div>
//           <div className="category-count">52个模板</div>
//         </button>
//         <button 
//           className="category-card" 
//           onClick={() => handleCategoryClick('租赁合同')}
//           onKeyDown={(e) => handleKeyDown(e, '租赁合同')}
//           tabIndex={0}
//           aria-label="租赁合同分类"
//         >
//           <div className="category-icon">
//             <i className="ri-building-line"></i>
//           </div>
//           <div className="category-title">租赁合同</div>
//           <div className="category-count">38个模板</div>
//         </button>
//         <button 
//           className="category-card" 
//           onClick={() => handleCategoryClick('保密协议')}
//           onKeyDown={(e) => handleKeyDown(e, '保密协议')}
//           tabIndex={0}
//           aria-label="保密协议分类"
//         >
//           <div className="category-icon">
//             <i className="ri-shield-check-line"></i>
//           </div>
//           <div className="category-title">保密协议</div>
//           <div className="category-count">24个模板</div>
//         </button>
//       </div>
//     </div>
//   );
// }