From b92d87a3b420ceca6afb879f02acb73d90925044 Mon Sep 17 00:00:00 2001
From: awen <hzven@foxmail.com>
Date: Thu, 29 May 2025 17:42:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=90=8C=E5=88=9D=E6=AD=A5=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E8=AE=BF=E9=97=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../contract-template/CompactSearchBox.tsx    | 151 +++++
 .../contract-template/ContractSearchHero.tsx  | 164 +++++
 .../contract-template/FilterTabs.tsx          |  26 +
 .../contract-template/QuickCategories.tsx     |  52 ++
 .../contract-template/SearchResultHeader.tsx  |  51 ++
 .../contract-template/TemplateCard.tsx        | 118 ++++
 .../contract-template/TemplateGrid.tsx        |  32 +
 app/components/layout/Sidebar.tsx             |  21 +
 app/routes/contract-template.detail.$id.tsx   | 326 +++++++++
 app/routes/contract-template.list._index.tsx  | 239 +++++++
 .../contract-template.search._index.tsx       |  77 +++
 .../contract-template.search.results.tsx      | 276 ++++++++
 app/routes/contract-template.tsx              |  10 +
 app/styles/main.css                           |   3 +
 app/styles/pages/contract-template.css        | 636 ++++++++++++++++++
 app/types/contract-template.ts                |  57 ++
 16 files changed, 2239 insertions(+)
 create mode 100644 app/components/contract-template/CompactSearchBox.tsx
 create mode 100644 app/components/contract-template/ContractSearchHero.tsx
 create mode 100644 app/components/contract-template/FilterTabs.tsx
 create mode 100644 app/components/contract-template/QuickCategories.tsx
 create mode 100644 app/components/contract-template/SearchResultHeader.tsx
 create mode 100644 app/components/contract-template/TemplateCard.tsx
 create mode 100644 app/components/contract-template/TemplateGrid.tsx
 create mode 100644 app/routes/contract-template.detail.$id.tsx
 create mode 100644 app/routes/contract-template.list._index.tsx
 create mode 100644 app/routes/contract-template.search._index.tsx
 create mode 100644 app/routes/contract-template.search.results.tsx
 create mode 100644 app/routes/contract-template.tsx
 create mode 100644 app/styles/pages/contract-template.css
 create mode 100644 app/types/contract-template.ts

diff --git a/app/components/contract-template/CompactSearchBox.tsx b/app/components/contract-template/CompactSearchBox.tsx
new file mode 100644
index 0000000..633b568
--- /dev/null
+++ b/app/components/contract-template/CompactSearchBox.tsx
@@ -0,0 +1,151 @@
+import { useState, useRef } from 'react';
+
+interface CompactSearchBoxProps {
+  onSearch: (query: string) => void;
+  initialQuery?: string;
+  searchTime?: string;
+}
+
+export function CompactSearchBox({ 
+  onSearch, 
+  initialQuery = '',
+  searchTime = '搜索用时 0.3秒'
+}: CompactSearchBoxProps) {
+  const [searchQuery, setSearchQuery] = useState(initialQuery);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setSearchQuery(value);
+    
+    // 自动调整高度
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = Math.max(60, textareaRef.current.scrollHeight) + 'px';
+    }
+  };
+
+  const handleSearch = () => {
+    if (searchQuery.trim()) {
+      onSearch(searchQuery);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleSearch();
+    }
+  };
+
+  return (
+    <div style={{
+      marginBottom: '24px'
+    }}>
+      <div style={{
+        padding: '20px 0',
+        margin: '0',
+        background: 'none'
+      }}>
+        <div style={{
+          maxWidth: '600px',
+          margin: '0 auto',
+          position: 'relative'
+        }}>
+          <div style={{
+            background: 'white',
+            border: '2px solid #e5e7eb',
+            borderRadius: '8px',
+            padding: '12px 16px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
+            transition: 'all 0.3s ease'
+          }}>
+            <textarea 
+              ref={textareaRef}
+              placeholder="例如：销售合同、设备采购协议、包含违约责任条款的合同..."
+              value={searchQuery}
+              onChange={handleSearchInputChange}
+              onKeyDown={handleKeyDown}
+              aria-label="合同模板搜索输入框"
+              style={{
+                width: '100%',
+                minHeight: '60px',
+                border: 'none',
+                outline: 'none',
+                resize: 'vertical',
+                fontSize: '14px',
+                lineHeight: '1.5',
+                background: 'transparent',
+                margin: '0',
+                padding: '0',
+                fontFamily: 'inherit'
+              }}
+            />
+            
+            {/* 搜索操作区域 - 水平布局 */}
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              width: '100%',
+              marginTop: '8px',
+              paddingTop: '8px',
+              borderTop: '1px solid #f0f0f0'
+            }}>
+              {/* 搜索时间提示 - 左侧 */}
+              <div style={{
+                fontSize: '11px',
+                color: 'rgba(0, 0, 0, 0.45)',
+                display: 'flex',
+                alignItems: 'center',
+                flex: '1'
+              }}>
+                <i className="ri-time-line" style={{ marginRight: '4px', fontSize: '11px' }}></i>
+                {searchTime}
+              </div>
+              
+              {/* 重新搜索按钮 - 右侧 */}
+              <button 
+                onClick={handleSearch}
+                disabled={!searchQuery.trim()}
+                aria-label="重新搜索"
+                style={{
+                  background: '#00684a',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '6px',
+                  padding: '6px 16px',
+                  fontSize: '13px',
+                  fontWeight: '500',
+                  cursor: 'pointer',
+                  transition: 'all 0.3s ease',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '6px',
+                  margin: '0',
+                  flexShrink: '0'
+                }}
+                onMouseEnter={(e) => {
+                  if (!e.currentTarget.disabled) {
+                    e.currentTarget.style.background = '#005a40';
+                    e.currentTarget.style.transform = 'translateY(-1px)';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!e.currentTarget.disabled) {
+                    e.currentTarget.style.background = '#00684a';
+                    e.currentTarget.style.transform = 'translateY(0)';
+                  }
+                }}
+              >
+                <i className="ri-search-line" style={{ fontSize: '13px' }}></i>
+                重新搜索
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/contract-template/ContractSearchHero.tsx b/app/components/contract-template/ContractSearchHero.tsx
new file mode 100644
index 0000000..aed5cc2
--- /dev/null
+++ b/app/components/contract-template/ContractSearchHero.tsx
@@ -0,0 +1,164 @@
+import { useState, useRef } from 'react';
+
+interface ContractSearchHeroProps {
+  onSearch: (query: string) => void;
+  initialQuery?: string;
+  tipText?: string;
+  tipIcon?: string;
+}
+
+export function ContractSearchHero({ 
+  onSearch, 
+  initialQuery = '',
+  tipText = '支持自然语言描述，AI将为您匹配最相关的模板',
+  tipIcon = 'ri-lightbulb-line'
+}: ContractSearchHeroProps) {
+  const [searchQuery, setSearchQuery] = useState(initialQuery);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setSearchQuery(value);
+    
+    // 自动调整高度
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = Math.max(80, textareaRef.current.scrollHeight) + 'px';
+    }
+  };
+
+  const handleSearch = () => {
+    onSearch(searchQuery);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleSearch();
+    }
+  };
+
+  return (
+    <div style={{
+      textAlign: 'center',
+      padding: '60px 0',
+      background: 'linear-gradient(135deg, rgba(0, 104, 74, 0.05) 0%, rgba(0, 104, 74, 0.02) 100%)',
+      borderRadius: '16px',
+      marginBottom: '32px'
+    }}>
+      <h1 style={{
+        fontSize: '32px',
+        fontWeight: '600',
+        color: 'rgba(0, 0, 0, 0.85)',
+        marginBottom: '12px',
+        margin: '0 0 12px 0'
+      }}>AI智能合同模板搜索</h1>
+      
+      <p style={{
+        fontSize: '16px',
+        color: 'rgba(0, 0, 0, 0.45)',
+        marginBottom: '40px',
+        margin: '0 0 40px 0'
+      }}>输入合同名称、用途或关键内容，快速找到最适合的模板</p>
+      
+      <div style={{
+        maxWidth: '600px',
+        margin: '0 auto',
+        position: 'relative'
+      }}>
+        <div style={{
+          background: 'white',
+          border: '2px solid #e5e7eb',
+          borderRadius: '12px',
+          padding: '16px 20px',
+          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
+          transition: 'all 0.3s ease'
+        }}>
+          <textarea 
+            ref={textareaRef}
+            placeholder="例如：销售合同、设备采购协议、包含违约责任条款的合同..."
+            value={searchQuery}
+            onChange={handleSearchInputChange}
+            onKeyDown={handleKeyDown}
+            aria-label="合同模板搜索输入框"
+            style={{
+              width: '100%',
+              minHeight: '80px',
+              border: 'none',
+              outline: 'none',
+              resize: 'vertical',
+              fontSize: '16px',
+              lineHeight: '1.5',
+              background: 'transparent',
+              margin: '0',
+              padding: '0',
+              fontFamily: 'inherit'
+            }}
+          />
+          
+          {/* 搜索操作区域 - 水平布局 */}
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            width: '100%',
+            marginTop: '16px',
+            paddingTop: '16px',
+            borderTop: '1px solid #f0f0f0'
+          }}>
+            {/* 提示文字 - 左侧 */}
+            <div style={{
+              fontSize: '12px',
+              color: 'rgba(0, 0, 0, 0.45)',
+              display: 'flex',
+              alignItems: 'center',
+              flex: '1'
+            }}>
+              <i className={tipIcon} style={{ marginRight: '4px', fontSize: '12px' }}></i>
+              {tipText}
+            </div>
+            
+            {/* 搜索按钮 - 右侧 */}
+            <button 
+              onClick={handleSearch}
+              disabled={!searchQuery.trim()}
+              aria-label="开始搜索"
+              style={{
+                background: '#00684a',
+                color: 'white',
+                border: 'none',
+                borderRadius: '8px',
+                padding: '10px 24px',
+                fontSize: '14px',
+                fontWeight: '500',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '6px',
+                margin: '0',
+                flexShrink: '0'
+              }}
+              onMouseEnter={(e) => {
+                if (!e.currentTarget.disabled) {
+                  e.currentTarget.style.background = '#005a40';
+                  e.currentTarget.style.transform = 'translateY(-1px)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!e.currentTarget.disabled) {
+                  e.currentTarget.style.background = '#00684a';
+                  e.currentTarget.style.transform = 'translateY(0)';
+                }
+              }}
+            >
+              <i className="ri-search-line" style={{ fontSize: '14px' }}></i>
+              智能搜索
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/contract-template/FilterTabs.tsx b/app/components/contract-template/FilterTabs.tsx
new file mode 100644
index 0000000..b15a2b3
--- /dev/null
+++ b/app/components/contract-template/FilterTabs.tsx
@@ -0,0 +1,26 @@
+interface FilterItem {
+  label: string;
+  count: number;
+}
+
+interface FilterTabsProps {
+  filters: FilterItem[];
+  activeFilter: string;
+  onFilterChange: (filter: string) => void;
+}
+
+export function FilterTabs({ filters, activeFilter, onFilterChange }: FilterTabsProps) {
+  return (
+    <div className="filter-tabs">
+      {filters.map((filter) => (
+        <button
+          key={filter.label}
+          className={`filter-tab ${activeFilter === filter.label ? 'active' : ''}`}
+          onClick={() => onFilterChange(filter.label)}
+        >
+          {filter.label} ({filter.count})
+        </button>
+      ))}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/contract-template/QuickCategories.tsx b/app/components/contract-template/QuickCategories.tsx
new file mode 100644
index 0000000..ee31b59
--- /dev/null
+++ b/app/components/contract-template/QuickCategories.tsx
@@ -0,0 +1,52 @@
+import { useNavigate } from '@remix-run/react';
+
+interface CategoryItem {
+  name: string;
+  icon: string;
+  count: number;
+}
+
+interface QuickCategoriesProps {
+  categories: CategoryItem[];
+  onCategoryClick?: (category: string) => void;
+}
+
+export function QuickCategories({ categories, onCategoryClick }: QuickCategoriesProps) {
+  const navigate = useNavigate();
+
+  const handleCategoryClick = (category: CategoryItem) => {
+    if (onCategoryClick) {
+      onCategoryClick(category.name);
+    } else {
+      // 默认导航到合同列表页面并筛选分类
+      navigate(`/contract-template/list?category=${encodeURIComponent(category.name)}`);
+    }
+  };
+
+  return (
+    <div className="quick-categories">
+      {categories.map((category) => (
+        <div 
+          key={category.name}
+          className="category-card" 
+          onClick={() => handleCategoryClick(category)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleCategoryClick(category);
+            }
+          }}
+          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>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/contract-template/SearchResultHeader.tsx b/app/components/contract-template/SearchResultHeader.tsx
new file mode 100644
index 0000000..8173455
--- /dev/null
+++ b/app/components/contract-template/SearchResultHeader.tsx
@@ -0,0 +1,51 @@
+interface SearchResultHeaderProps {
+  total: number;
+  viewMode: 'grid' | 'list';
+  onViewModeChange: (mode: 'grid' | 'list') => void;
+  sortBy: string;
+  onSortChange: (sort: string) => void;
+}
+
+export function SearchResultHeader({
+  total,
+  viewMode,
+  onViewModeChange,
+  sortBy,
+  onSortChange
+}: SearchResultHeaderProps) {
+  return (
+    <div className="result-header">
+      <div className="result-info">
+        为您找到 <span className="result-count">{total}</span> 个相关模板
+      </div>
+      <div className="flex items-center gap-4">
+        <div className="view-toggle">
+          <button 
+            className={`view-btn ${viewMode === 'grid' ? 'active' : ''}`}
+            onClick={() => onViewModeChange('grid')}
+            aria-label="网格视图"
+          >
+            <i className="ri-grid-line"></i>
+          </button>
+          <button 
+            className={`view-btn ${viewMode === 'list' ? 'active' : ''}`}
+            onClick={() => onViewModeChange('list')}
+            aria-label="列表视图"
+          >
+            <i className="ri-list-check"></i>
+          </button>
+        </div>
+        <select 
+          className="px-3 py-2 border border-gray-200 rounded-lg text-sm"
+          value={sortBy}
+          onChange={(e) => onSortChange(e.target.value)}
+        >
+          <option value="relevance">相关度排序</option>
+          <option value="newest">最新更新</option>
+          <option value="popular">使用频率</option>
+          <option value="rating">评分最高</option>
+        </select>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/contract-template/TemplateCard.tsx b/app/components/contract-template/TemplateCard.tsx
new file mode 100644
index 0000000..55cd694
--- /dev/null
+++ b/app/components/contract-template/TemplateCard.tsx
@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import { useNavigate } from '@remix-run/react';
+
+interface Template {
+  id: string;
+  title: string;
+  type: string;
+  description: string;
+  updateTime: string;
+  useCount: number;
+  rating: number;
+  category: string;
+}
+
+interface TemplateCardProps {
+  template: Template;
+  onClick: () => void;
+}
+
+export function TemplateCard({ template, onClick }: TemplateCardProps) {
+  const [isFavorited, setIsFavorited] = useState(false);
+  const navigate = useNavigate();
+
+  const handleFavoriteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsFavorited(!isFavorited);
+  };
+
+  const handleActionClick = (e: React.MouseEvent, action: string) => {
+    e.stopPropagation();
+    
+    switch (action) {
+      case '立即使用':
+        console.log('下载并使用模板:', template.id);
+        // 这里应该触发下载逻辑
+        break;
+      case '预览':
+        // 导航到模板详情页面
+        navigate(`/contract-template/detail/${template.id}`);
+        break;
+      default:
+        console.log(`执行操作: ${action}`, template.id);
+    }
+  };
+
+  const renderStars = (rating: number) => {
+    const stars = [];
+    const fullStars = Math.floor(rating);
+    const hasHalfStar = rating % 1 !== 0;
+
+    for (let i = 0; i < 5; i++) {
+      if (i < fullStars) {
+        stars.push(<i key={i} className="ri-star-fill text-xs"></i>);
+      } else if (i === fullStars && hasHalfStar) {
+        stars.push(<i key={i} className="ri-star-half-fill text-xs"></i>);
+      } else {
+        stars.push(<i key={i} className="ri-star-line text-xs"></i>);
+      }
+    }
+    return stars;
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <div 
+      className="template-card" 
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label={`查看${template.title}详情`}
+    >
+      <div className="template-header">
+        <div className="template-type">{template.type}</div>
+        <div className="flex items-center gap-1 text-yellow-500">
+          {renderStars(template.rating)}
+          <span className="text-xs ml-1">{template.rating}</span>
+        </div>
+      </div>
+      
+      <h3 className="template-title">{template.title}</h3>
+      <p className="template-desc">{template.description}</p>
+      
+      <div className="template-meta">
+        <span>更新时间：{template.updateTime}</span>
+        <span>使用次数：{template.useCount.toLocaleString()}</span>
+      </div>
+      
+      <div className="template-actions">
+        <button 
+          className="action-btn primary"
+          onClick={(e) => handleActionClick(e, '立即使用')}
+        >
+          立即使用
+        </button>
+        <button 
+          className="action-btn"
+          onClick={(e) => handleActionClick(e, '预览')}
+        >
+          预览
+        </button>
+        <button 
+          className="action-btn"
+          onClick={handleFavoriteClick}
+          title={isFavorited ? '取消收藏' : '收藏'}
+        >
+          <i className={isFavorited ? 'ri-star-fill text-yellow-500' : 'ri-star-line'}></i>
+        </button>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/contract-template/TemplateGrid.tsx b/app/components/contract-template/TemplateGrid.tsx
new file mode 100644
index 0000000..47a1046
--- /dev/null
+++ b/app/components/contract-template/TemplateGrid.tsx
@@ -0,0 +1,32 @@
+import { TemplateCard } from './TemplateCard';
+
+interface Template {
+  id: string;
+  title: string;
+  type: string;
+  description: string;
+  updateTime: string;
+  useCount: number;
+  rating: number;
+  category: string;
+}
+
+interface TemplateGridProps {
+  templates: Template[];
+  viewMode: 'grid' | 'list';
+  onTemplateClick: (templateId: string) => void;
+}
+
+export function TemplateGrid({ templates, viewMode, onTemplateClick }: TemplateGridProps) {
+  return (
+    <div className={`template-grid ${viewMode === 'list' ? 'list-view' : ''}`}>
+      {templates.map((template) => (
+        <TemplateCard
+          key={template.id}
+          template={template}
+          onClick={() => onTemplateClick(template.id)}
+        />
+      ))}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/layout/Sidebar.tsx b/app/components/layout/Sidebar.tsx
index 34b10b5..68a0c8d 100644
--- a/app/components/layout/Sidebar.tsx
+++ b/app/components/layout/Sidebar.tsx
@@ -6,6 +6,7 @@ interface MenuItem {
   title: string;
   path: string;
   icon: string;
+  hideBreadcrumb?: boolean;
   children?: MenuItem[];
 }
 
@@ -26,6 +27,26 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
       hideBreadcrumb: true,
       icon: 'ri-search-line'
     },
+    {
+      id: 'contract-template',
+      title: '合同模板',
+      path: '/contract-template',
+      icon: 'ri-file-search-line',
+      children: [
+        {
+          id: 'contract-search-ai',
+          title: '智能搜索',
+          path: '/contract-template/search',
+          icon: 'ri-search-line'
+        },
+        {
+          id: 'contract-list',
+          title: '合同列表',
+          path: '/contract-template/list',
+          icon: 'ri-folder-line'
+        }
+      ]
+    },
     {
       id: 'home',
       title: '系统概览',
diff --git a/app/routes/contract-template.detail.$id.tsx b/app/routes/contract-template.detail.$id.tsx
new file mode 100644
index 0000000..fdd8b88
--- /dev/null
+++ b/app/routes/contract-template.detail.$id.tsx
@@ -0,0 +1,326 @@
+import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node';
+import { useLoaderData, useNavigate } from '@remix-run/react';
+import { useState } from 'react';
+import styles from '~/styles/pages/contract-template.css?url';
+
+export const links = () => [
+  { rel: 'stylesheet', href: styles }
+];
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return [
+    { title: `${data?.template.title || '合同模板详情'} - 智慧法务` },
+    { 
+      name: 'description', 
+      content: data?.template.description || '查看合同模板详细信息' 
+    }
+  ];
+};
+
+// 面包屑导航配置
+export const handle = {
+  breadcrumb: (data: { template: { title: string } }) => {
+    return data?.template?.title || "模板详情";
+  }
+};
+
+// 模拟详细数据
+const getTemplateDetail = (id: string) => {
+  const templates = {
+    '1': {
+      id: '1',
+      title: '烟草产品销售合同（2023版）',
+      type: '销售合同 · 标准版',
+      description: '本模板是专为烟草行业设计的标准销售合同，严格遵循《烟草专卖法》等相关法律法规，涵盖了烟草产品销售过程中的各个关键环节。',
+      updateTime: '2023年10月25日',
+      useCount: 2156,
+      rating: 4.9,
+      fileSize: '245KB',
+      scope: '烟草产品销售',
+      legalBasis: '《合同法》《烟草专卖法》',
+      templateCode: 'XS-2023-001',
+      reviews: [
+        {
+          user: '李经理',
+          rating: 5,
+          comment: '模板非常专业，条款完整，符合行业规范。我们公司一直在使用这个模板，效果很好。',
+          date: '2023-10-20'
+        },
+        {
+          user: '王总',
+          rating: 4,
+          comment: '模板结构清晰，易于理解和使用。特别是违约责任条款写得很详细，对我们很有帮助。',
+          date: '2023-10-18'
+        }
+      ],
+      features: [
+        { title: '法律合规', description: '严格遵循烟草行业法律法规，确保合同条款合法有效', icon: 'ri-shield-check-line', color: 'green' },
+        { title: '条款完整', description: '涵盖销售全流程，条款结构完整，逻辑清晰', icon: 'ri-settings-3-line', color: 'blue' },
+        { title: '易于定制', description: '模板化设计，可根据具体业务需求灵活调整', icon: 'ri-edit-line', color: 'purple' },
+        { title: '行业标准', description: '符合烟草行业标准，被广泛使用和认可', icon: 'ri-award-line', color: 'orange' }
+      ],
+      structure: [
+        { step: 1, title: '合同主体', description: '甲乙双方基本信息、资质证明' },
+        { step: 2, title: '标的物条款', description: '产品名称、规格、数量、质量标准' },
+        { step: 3, title: '价格与付款', description: '价格条款、付款方式、结算周期' },
+        { step: 4, title: '交付与验收', description: '交付时间、地点、方式、验收标准' },
+        { step: 5, title: '违约责任', description: '违约情形、责任承担、损失赔偿' },
+        { step: 6, title: '争议解决', description: '争议处理方式、管辖法院' }
+      ],
+      preview: `
+中文合同预览内容...
+
+                        烟草产品销售合同
+                    合同编号：_______________
+
+甲方（销售方）：_________________________
+地址：_____________________________________
+法定代表人：_______________  联系电话：_______________
+烟草专卖许可证号：_________________________
+
+乙方（采购方）：_________________________
+地址：_____________________________________
+法定代表人：_______________  联系电话：_______________
+烟草专卖零售许可证号：_____________________
+
+根据《中华人民共和国合同法》、《中华人民共和国烟草专卖法》等相关法律法规，
+甲乙双方在平等、自愿、公平、诚信的基础上，就烟草产品销售事宜达成如下协议：
+
+第一条 标的物
+1.1 产品名称：_________________________
+1.2 产品规格：_________________________
+1.3 产品数量：_________________________
+1.4 产品单价：_________________________
+1.5 合同总金额：_______________________
+
+... 更多条款内容请下载完整模板查看 ...
+      `
+    }
+  };
+  
+  return templates[id as keyof typeof templates] || null;
+};
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const template = getTemplateDetail(params.id!);
+  
+  if (!template) {
+    throw new Response('模板未找到', { status: 404 });
+  }
+  
+  return { template };
+}
+
+export default function ContractTemplateDetail() {
+  const { template } = useLoaderData<typeof loader>();
+  const navigate = useNavigate();
+  const [isFavorited, setIsFavorited] = useState(false);
+
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  const handleDownload = () => {
+    console.log('下载模板:', template.id);
+    // 这里应该是实际的下载逻辑
+  };
+
+  const handlePreview = () => {
+    console.log('预览模板:', template.id);
+    // 这里应该打开预览模态框或新页面
+  };
+
+  const handleFavorite = () => {
+    setIsFavorited(!isFavorited);
+    console.log('收藏状态:', !isFavorited);
+  };
+
+  const handleShare = () => {
+    console.log('分享模板:', template.id);
+    // 这里应该是分享功能
+  };
+
+  const renderStars = (rating: number) => {
+    const stars = [];
+    const fullStars = Math.floor(rating);
+    
+    for (let i = 0; i < 5; i++) {
+      if (i < fullStars) {
+        stars.push(<i key={i} className="ri-star-fill"></i>);
+      } else {
+        stars.push(<i key={i} className="ri-star-line"></i>);
+      }
+    }
+    return stars;
+  };
+
+  return (
+    <div className="contract-search-results">
+      {/* 返回按钮 */}
+      <div className="mb-6">
+        <button 
+          onClick={handleBack}
+          className="flex items-center px-3 py-2 text-sm border border-gray-200 rounded-lg hover:border-primary-color transition-colors"
+        >
+          <i className="ri-arrow-left-line mr-2"></i>
+          返回列表
+        </button>
+      </div>
+
+      {/* 模板详情 */}
+      <div className="template-detail max-w-4xl mx-auto">
+        {/* 详情头部 */}
+        <div className="detail-header bg-white rounded-xl p-8 mb-6 border border-gray-100">
+          <div className="flex justify-between items-start mb-4">
+            <div className="template-type">{template.type}</div>
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1 text-yellow-500">
+                {renderStars(template.rating)}
+                <span className="text-sm ml-1">{template.rating} (156评价)</span>
+              </div>
+            </div>
+          </div>
+          
+          <h1 className="detail-title text-3xl font-semibold mb-6">{template.title}</h1>
+          
+          <div className="detail-meta grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
+            <div className="meta-item">
+              <span className="meta-label text-gray-500">模板编号：</span>
+              <span>{template.templateCode}</span>
+            </div>
+            <div className="meta-item">
+              <span className="meta-label text-gray-500">更新时间：</span>
+              <span>{template.updateTime}</span>
+            </div>
+            <div className="meta-item">
+              <span className="meta-label text-gray-500">使用次数：</span>
+              <span>{template.useCount.toLocaleString()}次</span>
+            </div>
+            <div className="meta-item">
+              <span className="meta-label text-gray-500">文件大小：</span>
+              <span>{template.fileSize}</span>
+            </div>
+            <div className="meta-item">
+              <span className="meta-label text-gray-500">适用范围：</span>
+              <span>{template.scope}</span>
+            </div>
+            <div className="meta-item">
+              <span className="meta-label text-gray-500">法律依据：</span>
+              <span>{template.legalBasis}</span>
+            </div>
+          </div>
+          
+          <div className="detail-actions flex gap-3">
+            <button 
+              className="detail-btn primary bg-primary text-white px-6 py-3 rounded-lg flex items-center gap-2 hover:bg-primary-hover"
+              onClick={handleDownload}
+            >
+              <i className="ri-download-line"></i>
+              立即下载使用
+            </button>
+            <button 
+              className="detail-btn secondary bg-white border border-gray-200 px-6 py-3 rounded-lg flex items-center gap-2 hover:border-primary"
+              onClick={handlePreview}
+            >
+              <i className="ri-eye-line"></i>
+              在线预览
+            </button>
+            <button 
+              className={`detail-btn secondary bg-white border border-gray-200 px-6 py-3 rounded-lg flex items-center gap-2 hover:border-primary ${isFavorited ? 'text-yellow-500' : ''}`}
+              onClick={handleFavorite}
+            >
+              <i className={isFavorited ? 'ri-star-fill' : 'ri-star-line'}></i>
+              收藏模板
+            </button>
+            <button 
+              className="detail-btn secondary bg-white border border-gray-200 px-6 py-3 rounded-lg flex items-center gap-2 hover:border-primary"
+              onClick={handleShare}
+            >
+              <i className="ri-share-line"></i>
+              分享
+            </button>
+          </div>
+        </div>
+        
+        {/* 详情内容 */}
+        <div className="detail-content bg-white rounded-xl p-8 border border-gray-100">
+          {/* 模板简介 */}
+          <div className="content-section mb-8">
+            <h3 className="section-title text-xl font-semibold mb-4">模板简介</h3>
+            <p className="text-gray-600 leading-relaxed">
+              {template.description}模板包含完整的合同条款结构，
+              包括合同主体、标的物、价格条款、交付方式、付款条件、违约责任、争议解决等核心内容。
+              适用于各类烟草产品的销售业务，能够有效保护交易双方的合法权益。
+            </p>
+          </div>
+          
+          {/* 主要特点 */}
+          <div className="content-section mb-8">
+            <h3 className="section-title text-xl font-semibold mb-4">主要特点</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {template.features.map((feature, index) => (
+                <div key={index} className={`bg-${feature.color}-50 p-4 rounded-lg border border-${feature.color}-200`}>
+                  <div className="flex items-center mb-2">
+                    <i className={`${feature.icon} text-${feature.color}-600 mr-2`}></i>
+                    <span className="font-medium">{feature.title}</span>
+                  </div>
+                  <p className="text-sm text-gray-600">{feature.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          
+          {/* 合同条款结构 */}
+          <div className="content-section mb-8">
+            <h3 className="section-title text-xl font-semibold mb-4">合同条款结构</h3>
+            <div className="space-y-3">
+              {template.structure.map((item) => (
+                <div key={item.step} className="flex items-center p-3 bg-gray-50 rounded-lg">
+                  <div className="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">
+                    {item.step}
+                  </div>
+                  <div>
+                    <div className="font-medium">{item.title}</div>
+                    <div className="text-sm text-gray-600">{item.description}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          
+          {/* 合同预览 */}
+          <div className="content-section mb-8">
+            <h3 className="section-title text-xl font-semibold mb-4">合同预览</h3>
+            <div className="content-preview bg-gray-50 rounded-lg p-6 font-mono text-sm line-height-6 border-l-4 border-primary">
+              <pre className="whitespace-pre-wrap">{template.preview}</pre>
+            </div>
+          </div>
+          
+          {/* 用户评价 */}
+          <div className="content-section">
+            <h3 className="section-title text-xl font-semibold mb-4">用户评价</h3>
+            <div className="space-y-4">
+              {template.reviews.map((review, index) => (
+                <div key={index} className="border border-gray-200 rounded-lg p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <div className="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium">
+                        {review.user[0]}
+                      </div>
+                      <span className="font-medium">{review.user}</span>
+                      <div className="flex items-center gap-1 text-yellow-500">
+                        {renderStars(review.rating)}
+                      </div>
+                    </div>
+                    <span className="text-sm text-gray-500">{review.date}</span>
+                  </div>
+                  <p className="text-gray-600">{review.comment}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/routes/contract-template.list._index.tsx b/app/routes/contract-template.list._index.tsx
new file mode 100644
index 0000000..4721025
--- /dev/null
+++ b/app/routes/contract-template.list._index.tsx
@@ -0,0 +1,239 @@
+import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node';
+import { useLoaderData, useSearchParams, useNavigate } from '@remix-run/react';
+import { useState } from 'react';
+import { SearchResultHeader } from '~/components/contract-template/SearchResultHeader';
+import { FilterTabs } from '~/components/contract-template/FilterTabs';
+import { TemplateGrid } from '~/components/contract-template/TemplateGrid';
+import { Pagination } from '~/components/ui/Pagination';
+import styles from '~/styles/pages/contract-template.css?url';
+
+export const links = () => [
+  { rel: 'stylesheet', href: styles }
+];
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: '合同模板列表 - 智慧法务' },
+    { 
+      name: 'description', 
+      content: '浏览和管理所有合同模板，按分类查看各种类型的合同模板。' 
+    }
+  ];
+};
+
+// 模拟数据 - 完整的模板库
+const mockTemplates = [
+  {
+    id: '1',
+    title: '烟草产品销售合同（2023版）',
+    type: '标准版',
+    description: '最新版本的烟草产品销售合同模板，包含完整的法律条款、风险控制措施和行业标准要求。',
+    updateTime: '2023-10-25',
+    useCount: 2156,
+    rating: 4.9,
+    category: '销售合同'
+  },
+  {
+    id: '2',
+    title: '零售商销售协议模板',
+    type: '标准版',
+    description: '专为零售商设计的销售协议，涵盖商品配送、结算方式、退换货政策等关键条款。',
+    updateTime: '2023-10-20',
+    useCount: 1834,
+    rating: 4.8,
+    category: '销售合同'
+  },
+  {
+    id: '3',
+    title: '大客户销售合同模板',
+    type: '专业版',
+    description: '适用于大客户的专业销售合同，包含定制化条款、特殊优惠政策和长期合作框架。',
+    updateTime: '2023-10-18',
+    useCount: 1245,
+    rating: 4.7,
+    category: '销售合同'
+  },
+  {
+    id: '4',
+    title: '小额销售合同（简化版）',
+    type: '简化版',
+    description: '适用于小额交易的简化版销售合同，条款精简但保证法律效力。',
+    updateTime: '2023-10-15',
+    useCount: 956,
+    rating: 4.6,
+    category: '销售合同'
+  },
+  {
+    id: '5',
+    title: '区域代理销售合同',
+    type: '标准版',
+    description: '区域代理商专用销售合同，明确代理权限、销售目标和考核标准。',
+    updateTime: '2023-10-12',
+    useCount: 743,
+    rating: 4.5,
+    category: '销售合同'
+  },
+  {
+    id: '6',
+    title: '批发销售合同模板',
+    type: '标准版',
+    description: '适用于大宗批发业务的销售合同，包含数量折扣、物流配送等专业条款。',
+    updateTime: '2023-10-10',
+    useCount: 612,
+    rating: 4.4,
+    category: '销售合同'
+  },
+  {
+    id: '7',
+    title: '设备采购合同标准模板',
+    type: '标准版',
+    description: '设备采购专用合同模板，包含详细的技术要求、验收标准、质保条款等内容。',
+    updateTime: '2023-10-08',
+    useCount: 589,
+    rating: 4.6,
+    category: '采购合同'
+  },
+  {
+    id: '8',
+    title: '服务类采购合同',
+    type: '标准版',
+    description: '适用于各类服务采购，包含服务标准、交付要求、考核指标等条款。',
+    updateTime: '2023-10-05',
+    useCount: 432,
+    rating: 4.5,
+    category: '采购合同'
+  }
+];
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const category = url.searchParams.get('category') || '';
+  const type = url.searchParams.get('type') || '';
+  const page = parseInt(url.searchParams.get('page') || '1');
+  const pageSize = 6;
+  
+  // 筛选模板
+  let filteredTemplates = mockTemplates;
+  
+  if (category) {
+    filteredTemplates = filteredTemplates.filter(t => t.category === category);
+  }
+  
+  if (type) {
+    filteredTemplates = filteredTemplates.filter(t => t.type === type);
+  }
+  
+  const total = filteredTemplates.length;
+  const startIndex = (page - 1) * pageSize;
+  const templates = filteredTemplates.slice(startIndex, startIndex + pageSize);
+
+  return {
+    templates,
+    total,
+    page,
+    pageSize,
+    category,
+    type
+  };
+}
+
+export default function ContractTemplateList() {
+  const { templates, total, page, pageSize, category } = useLoaderData<typeof loader>();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [activeFilter, setActiveFilter] = useState(category || '全部');
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [sortBy, setSortBy] = useState('newest');
+
+  const handleTemplateClick = (templateId: string) => {
+    navigate(`/contract-template/detail/${templateId}`);
+  };
+
+  const handleFilterChange = (filter: string) => {
+    setActiveFilter(filter);
+    const params = new URLSearchParams(searchParams);
+    
+    if (filter === '全部') {
+      params.delete('category');
+    } else {
+      params.set('category', filter);
+    }
+    params.delete('page'); // 重置页码
+    
+    navigate(`/contract-template/list?${params.toString()}`);
+  };
+
+  const handlePageChange = (newPage: number) => {
+    const params = new URLSearchParams(searchParams);
+    params.set('page', newPage.toString());
+    navigate(`/contract-template/list?${params.toString()}`);
+  };
+
+  // 动态生成筛选选项
+  const allCategories = [...new Set(mockTemplates.map(t => t.category))];
+  const filters = [
+    { label: '全部', count: mockTemplates.length },
+    ...allCategories.map(cat => ({
+      label: cat,
+      count: mockTemplates.filter(t => t.category === cat).length
+    }))
+  ];
+
+  const totalPages = Math.ceil(total / pageSize);
+  const currentCategory = category || '全部';
+
+  return (
+    <div className="contract-search-results">
+      {/* 页面头部 */}
+      <div className="result-header">
+        <div>
+          <h2 className="text-2xl font-semibold mb-2">
+            {currentCategory === '全部' ? '合同模板库' : `${currentCategory}模板`}
+          </h2>
+          <div className="result-info">
+            共 <span className="result-count">{total}</span> 个模板
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <SearchResultHeader 
+            total={0}
+            viewMode={viewMode}
+            onViewModeChange={setViewMode}
+            sortBy={sortBy}
+            onSortChange={setSortBy}
+          />
+        </div>
+      </div>
+
+      {/* 筛选标签 */}
+      <FilterTabs 
+        filters={filters}
+        activeFilter={activeFilter}
+        onFilterChange={handleFilterChange}
+      />
+
+      {/* 模板网格 */}
+      <TemplateGrid 
+        templates={templates}
+        viewMode={viewMode}
+        onTemplateClick={handleTemplateClick}
+      />
+
+      {/* 分页 */}
+      {totalPages > 1 && (
+        <Pagination 
+          currentPage={page}
+          total={total}
+          pageSize={pageSize}
+          onChange={handlePageChange}
+          showPageSizeChanger={false}
+        />
+      )}
+    </div>
+  );
+}
+
+// 面包屑导航配置
+export const handle = {
+  breadcrumb: "合同列表"
+}; 
\ No newline at end of file
diff --git a/app/routes/contract-template.search._index.tsx b/app/routes/contract-template.search._index.tsx
new file mode 100644
index 0000000..f90ce8c
--- /dev/null
+++ b/app/routes/contract-template.search._index.tsx
@@ -0,0 +1,77 @@
+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-handshake-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>
+  );
+} 
\ No newline at end of file
diff --git a/app/routes/contract-template.search.results.tsx b/app/routes/contract-template.search.results.tsx
new file mode 100644
index 0000000..31010b9
--- /dev/null
+++ b/app/routes/contract-template.search.results.tsx
@@ -0,0 +1,276 @@
+import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node';
+import { useLoaderData, useSearchParams, useNavigate } from '@remix-run/react';
+import { useState } from 'react';
+import { CompactSearchBox } from '~/components/contract-template/CompactSearchBox';
+import { SearchResultHeader } from '~/components/contract-template/SearchResultHeader';
+import { FilterTabs } from '~/components/contract-template/FilterTabs';
+import { TemplateGrid } from '~/components/contract-template/TemplateGrid';
+import { Pagination } from '~/components/ui/Pagination';
+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: "搜索结果"
+};
+
+// 模拟数据 - 扩展搜索结果
+const mockSearchResults = [
+  {
+    id: '1',
+    title: '烟草产品销售合同标准模板',
+    type: '销售合同',
+    description: '适用于烟草产品销售业务，包含完整的违约责任条款、付款方式、交付条件等核心要素，符合行业规范要求。',
+    updateTime: '2023-10-25',
+    useCount: 1248,
+    rating: 4.8,
+    category: '销售合同'
+  },
+  {
+    id: '2', 
+    title: '零售商销售协议模板',
+    type: '销售合同',
+    description: '专为零售商设计的销售协议，详细规定了违约责任、退换货政策、结算方式等条款。',
+    updateTime: '2023-10-20',
+    useCount: 856,
+    rating: 4.6,
+    category: '销售合同'
+  },
+  {
+    id: '3',
+    title: '设备采购合同（含违约条款）',
+    type: '采购合同', 
+    description: '设备采购专用合同模板，包含详细的违约责任条款、质量保证、验收标准等内容。',
+    updateTime: '2023-10-18',
+    useCount: 642,
+    rating: 4.7,
+    category: '采购合同'
+  },
+  {
+    id: '4',
+    title: '批发销售合同模板',
+    type: '销售合同',
+    description: '适用于大宗批发业务的销售合同，强化了违约责任条款和风险控制措施。',
+    updateTime: '2023-10-15',
+    useCount: 534,
+    rating: 4.5,
+    category: '销售合同'
+  },
+  {
+    id: '5',
+    title: '技术服务合同（标准版）',
+    type: '服务合同',
+    description: '技术服务类合同模板，包含服务标准、违约责任、知识产权保护等关键条款。',
+    updateTime: '2023-10-12',
+    useCount: 423,
+    rating: 4.4,
+    category: '服务合同'
+  },
+  {
+    id: '6',
+    title: '区域代理销售合同',
+    type: '销售合同',
+    description: '区域代理商专用销售合同，明确代理权限、销售目标、违约责任等核心条款。',
+    updateTime: '2023-10-10',
+    useCount: 312,
+    rating: 4.3,
+    category: '销售合同'
+  },
+  {
+    id: '7',
+    title: '物流运输服务合同',
+    type: '物流运输',
+    description: '专业的物流运输服务合同模板，涵盖运输责任、保险、违约赔偿等关键条款。',
+    updateTime: '2023-10-08',
+    useCount: 267,
+    rating: 4.2,
+    category: '物流运输'
+  },
+  {
+    id: '8',
+    title: '仓储管理服务协议',
+    type: '物流运输',
+    description: '仓储管理专用合同，包含货物保管、出入库管理、损失责任等详细条款。',
+    updateTime: '2023-10-05',
+    useCount: 189,
+    rating: 4.1,
+    category: '物流运输'
+  },
+  {
+    id: '9',
+    title: '劳务派遣合同模板',
+    type: '人事劳务',
+    description: '劳务派遣服务合同，明确派遣关系、工资福利、社保缴纳等人事管理条款。',
+    updateTime: '2023-10-03',
+    useCount: 345,
+    rating: 4.6,
+    category: '人事劳务'
+  },
+  {
+    id: '10',
+    title: '商业机密保护协议',
+    type: '保密协议',
+    description: '企业商业机密保护专用协议，涵盖信息范围、保密义务、违约责任等核心内容。',
+    updateTime: '2023-10-01',
+    useCount: 156,
+    rating: 4.5,
+    category: '保密协议'
+  },
+  {
+    id: '11',
+    title: '办公场地租赁合同',
+    type: '租赁合同',
+    description: '办公场地租赁标准合同，包含租金支付、物业管理、违约处理等全面条款。',
+    updateTime: '2023-09-28',
+    useCount: 278,
+    rating: 4.3,
+    category: '租赁合同'
+  },
+  {
+    id: '12',
+    title: '设备租赁协议（长期）',
+    type: '租赁合同',
+    description: '长期设备租赁专用协议，详细规定租赁期限、维护责任、续租条件等关键条款。',
+    updateTime: '2023-09-25',
+    useCount: 198,
+    rating: 4.4,
+    category: '租赁合同'
+  }
+];
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const query = url.searchParams.get('q') || '';
+  const category = url.searchParams.get('category') || '';
+  const page = parseInt(url.searchParams.get('page') || '1');
+  
+  // 模拟搜索耗时
+  const startTime = Date.now();
+  
+  // 这里应该是实际的搜索逻辑
+  // 目前返回模拟数据
+  let filteredResults = mockSearchResults;
+  
+  // 如果有查询条件，进行筛选
+  if (query || category) {
+    filteredResults = mockSearchResults.filter(item => {
+      const matchesQuery = !query || 
+        item.title.toLowerCase().includes(query.toLowerCase()) ||
+        item.description.toLowerCase().includes(query.toLowerCase());
+      const matchesCategory = !category || item.category === category;
+      return matchesQuery && matchesCategory;
+    });
+  }
+
+  // 计算搜索耗时
+  const endTime = Date.now();
+  const searchTime = (endTime - startTime) / 1000;
+  const searchTimeText = `搜索用时 ${searchTime.toFixed(1)}秒`;
+
+  return {
+    results: filteredResults,
+    query,
+    category,
+    total: filteredResults.length,
+    page,
+    pageSize: 6,
+    searchTime: searchTimeText
+  };
+}
+
+export default function ContractTemplateSearchResults() {
+  const { results, query, total, page, pageSize, searchTime } = useLoaderData<typeof loader>();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [activeFilter, setActiveFilter] = useState('全部');
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [sortBy, setSortBy] = useState('relevance');
+
+  const handleSearch = (newQuery: string) => {
+    if (newQuery.trim()) {
+      navigate(`/contract-template/search/results?q=${encodeURIComponent(newQuery)}`);
+    }
+  };
+
+  const handleTemplateClick = (templateId: string) => {
+    navigate(`/contract-template/detail/${templateId}`);
+  };
+
+  const handleFilterChange = (filter: string) => {
+    setActiveFilter(filter);
+    // 这里可以添加实际的筛选逻辑
+  };
+
+  const handlePageChange = (newPage: number) => {
+    const params = new URLSearchParams(searchParams);
+    params.set('page', newPage.toString());
+    navigate(`/contract-template/search/results?${params.toString()}`);
+  };
+
+  const filters = [
+    { label: '全部', count: total },
+    { label: '销售合同', count: results.filter(r => r.category === '销售合同').length },
+    { label: '采购合同', count: results.filter(r => r.category === '采购合同').length },
+    { label: '服务合同', count: results.filter(r => r.category === '服务合同').length }
+  ];
+
+  const totalPages = Math.ceil(total / pageSize);
+
+  return (
+    <div className="contract-search-results">
+      {/* 紧凑搜索框 */}
+      <CompactSearchBox 
+        initialQuery={query}
+        onSearch={handleSearch}
+        searchTime={searchTime}
+      />
+
+      {/* 搜索结果头部 */}
+      <SearchResultHeader 
+        total={total}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+        sortBy={sortBy}
+        onSortChange={setSortBy}
+      />
+
+      {/* 筛选标签 */}
+      <FilterTabs 
+        filters={filters}
+        activeFilter={activeFilter}
+        onFilterChange={handleFilterChange}
+      />
+
+      {/* 模板网格 */}
+      <TemplateGrid 
+        templates={results}
+        viewMode={viewMode}
+        onTemplateClick={handleTemplateClick}
+      />
+
+      {/* 分页 */}
+      {totalPages > 1 && (
+        <Pagination 
+          currentPage={page}
+          total={total}
+          pageSize={pageSize}
+          onChange={handlePageChange}
+          showPageSizeChanger={false}
+        />
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/routes/contract-template.tsx b/app/routes/contract-template.tsx
new file mode 100644
index 0000000..bc442e6
--- /dev/null
+++ b/app/routes/contract-template.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from '@remix-run/react';
+
+// 面包屑导航配置
+export const handle = {
+  breadcrumb: "合同模板"
+};
+
+export default function ContractTemplate() {
+  return <Outlet />;
+} 
\ No newline at end of file
diff --git a/app/styles/main.css b/app/styles/main.css
index a5d7f86..7cd9ad9 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -29,6 +29,9 @@
 
 /* @import './components/modal.css'; */
 
+/* 导入页面特定样式 */
+@import './pages/contract-template.css';
+
 /* Tailwind 基础指令 */
 @tailwind base;
 @tailwind components;
diff --git a/app/styles/pages/contract-template.css b/app/styles/pages/contract-template.css
new file mode 100644
index 0000000..c108555
--- /dev/null
+++ b/app/styles/pages/contract-template.css
@@ -0,0 +1,636 @@
+/* 合同模板页面样式 */
+:root {
+  --primary-color: #00684a;
+  --primary-hover: #005a40;
+  --primary-light: rgba(0, 104, 74, 0.1);
+  --success-color: #52c41a;
+  --warning-color: #faad14;
+  --error-color: #ff4d4f;
+  --text-color: rgba(0, 0, 0, 0.85);
+  --text-secondary: rgba(0, 0, 0, 0.45);
+  --border-color: #f0f0f0;
+  --bg-gray: #f5f5f5;
+  --gradient-bg: linear-gradient(135deg, #f8fffe 0%, #f0f9ff 100%);
+}
+
+.contract-template-search {
+  padding: 24px;
+  background: var(--gradient-bg);
+  min-height: 100vh;
+}
+
+.contract-search-results {
+  padding: 24px;
+  background: var(--gradient-bg);
+  min-height: 100vh;
+}
+
+/* 搜索英雄区域 */
+.search-hero {
+  text-align: center;
+  padding: 60px 0;
+  background: linear-gradient(135deg, rgba(0, 104, 74, 0.05) 0%, rgba(0, 104, 74, 0.02) 100%);
+  border-radius: 16px;
+  margin-bottom: 32px;
+}
+
+.search-title {
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 12px;
+}
+
+.search-subtitle {
+  font-size: 16px;
+  color: var(--text-secondary);
+  margin-bottom: 40px;
+}
+
+.search-container {
+  max-width: 600px;
+  margin: 0 auto;
+  position: relative;
+}
+
+/* 搜索框样式 */
+.search-hero .search-box,
+.compact-search-box .search-box {
+  background: white;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.search-hero .search-box:focus-within,
+.compact-search-box .search-box:focus-within {
+  border-color: var(--primary-color);
+  box-shadow: 0 4px 20px rgba(0, 104, 74, 0.15);
+}
+
+.search-hero .search-textarea,
+.compact-search-box .search-textarea {
+  width: 100%;
+  min-height: 80px;
+  border: none;
+  outline: none;
+  resize: vertical;
+  font-size: 16px;
+  line-height: 1.5;
+  background: transparent;
+  margin: 0;
+  padding: 0;
+}
+
+.search-hero .search-textarea::placeholder,
+.compact-search-box .search-textarea::placeholder {
+  color: var(--text-secondary);
+}
+
+.search-hero .search-actions,
+.compact-search-box .search-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.search-hero .search-tips,
+.compact-search-box .search-tips {
+  font-size: 12px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.search-hero .search-tips i,
+.compact-search-box .search-tips i {
+  margin-right: 4px;
+  font-size: 12px;
+}
+
+.search-hero .search-btn,
+.compact-search-box .search-btn {
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 24px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.search-hero .search-btn:hover:not(:disabled),
+.compact-search-box .search-btn:hover:not(:disabled) {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+.search-hero .search-btn:disabled,
+.compact-search-box .search-btn:disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+  transform: none;
+  opacity: 0.6;
+}
+
+.search-hero .search-btn i,
+.compact-search-box .search-btn i {
+  font-size: 14px;
+}
+
+/* 快速分类 */
+.quick-categories {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-top: 40px;
+}
+
+.category-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid var(--border-color);
+}
+
+.category-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  border-color: var(--primary-color);
+}
+
+.category-icon {
+  width: 48px;
+  height: 48px;
+  background: var(--primary-light);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 12px;
+  color: var(--primary-color);
+  font-size: 24px;
+}
+
+.category-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: var(--text-color);
+}
+
+.category-count {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+/* 紧凑搜索框 */
+.compact-search-box {
+  margin-bottom: 24px;
+}
+
+.compact-search-box .search-hero {
+  padding: 20px 0;
+  margin-bottom: 0;
+  background: none;
+}
+
+.compact-search-box .search-title {
+  display: none; /* 在紧凑模式下隐藏大标题 */
+}
+
+.compact-search-box .search-subtitle {
+  display: none; /* 在紧凑模式下隐藏副标题 */
+}
+
+.compact-search-box .search-container {
+  max-width: 100%;
+}
+
+/* 紧凑搜索框特定样式 */
+.compact-search-box .search-box {
+  padding: 12px 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.compact-search-box .search-textarea {
+  min-height: 60px;
+  font-size: 14px;
+}
+
+.compact-search-box .search-actions {
+  margin-top: 8px;
+  padding-top: 8px;
+  gap: 8px;
+}
+
+.compact-search-box .search-btn {
+  padding: 6px 16px;
+  font-size: 13px;
+  border-radius: 6px;
+}
+
+.compact-search-box .search-tips {
+  font-size: 11px;
+}
+
+.compact-search-box .search-tips i {
+  font-size: 11px;
+}
+
+/* 搜索结果头部 */
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.result-info {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.result-count {
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+/* 筛选标签 */
+.filter-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.filter-tab {
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: 1px solid #e5e7eb;
+  background: white;
+  color: var(--text-color);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.filter-tab.active,
+.filter-tab:hover {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+/* 模板网格 */
+.template-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 20px;
+}
+
+.template-grid.list-view {
+  display: block;
+}
+
+.template-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.template-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  border-color: var(--primary-color);
+}
+
+.list-view .template-card {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  margin-bottom: 12px;
+}
+
+.template-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.list-view .template-header {
+  flex: 0 0 auto;
+  margin-bottom: 0;
+  margin-right: 16px;
+}
+
+.template-type {
+  background: var(--primary-light);
+  color: var(--primary-color);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.template-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  line-height: 1.4;
+  color: var(--text-color);
+}
+
+.template-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.list-view .template-desc {
+  margin-bottom: 0;
+  margin-left: 16px;
+  flex: 1;
+}
+
+.template-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+}
+
+.list-view .template-meta {
+  margin-bottom: 0;
+  margin-left: 16px;
+  flex: 0 0 auto;
+}
+
+.template-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.list-view .template-actions {
+  margin-left: 16px;
+  flex: 0 0 auto;
+}
+
+.action-btn {
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  background: white;
+  color: var(--text-color);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.action-btn:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.action-btn.primary {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+.action-btn.primary:hover {
+  background: var(--primary-hover);
+}
+
+/* 视图切换 */
+.view-toggle {
+  display: flex;
+  gap: 4px;
+  background: white;
+  border-radius: 6px;
+  padding: 4px;
+  border: 1px solid #e5e7eb;
+}
+
+.view-btn {
+  padding: 6px 12px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.view-btn.active {
+  background: var(--primary-color);
+  color: white;
+}
+
+/* 分页 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+  gap: 8px;
+}
+
+.page-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  background: white;
+  color: var(--text-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.page-btn:hover,
+.page-btn.active {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+/* 模板详情页面 */
+.template-detail {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.detail-header {
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  margin-bottom: 24px;
+  border: 1px solid var(--border-color);
+}
+
+.detail-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: var(--text-color);
+}
+
+.detail-meta {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.meta-label {
+  color: var(--text-secondary);
+  margin-right: 8px;
+}
+
+.detail-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.detail-btn {
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: none;
+}
+
+.detail-btn.primary {
+  background: var(--primary-color);
+  color: white;
+}
+
+.detail-btn.primary:hover {
+  background: var(--primary-hover);
+}
+
+.detail-btn.secondary {
+  background: white;
+  color: var(--text-color);
+  border: 1px solid #e5e7eb;
+}
+
+.detail-btn.secondary:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.detail-content {
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  border: 1px solid var(--border-color);
+}
+
+.content-section {
+  margin-bottom: 32px;
+}
+
+.content-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: var(--text-color);
+}
+
+.content-preview {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 20px;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  border-left: 4px solid var(--primary-color);
+  white-space: pre-wrap;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .search-hero {
+    padding: 40px 20px;
+  }
+
+  .search-title {
+    font-size: 24px;
+  }
+
+  .quick-categories {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  }
+
+  .template-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .result-header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  .filter-tabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .detail-actions {
+    flex-direction: column;
+  }
+
+  .detail-btn {
+    padding: 8px 16px;
+    font-size: 12px;
+  }
+} 
\ No newline at end of file
diff --git a/app/types/contract-template.ts b/app/types/contract-template.ts
new file mode 100644
index 0000000..af1ff31
--- /dev/null
+++ b/app/types/contract-template.ts
@@ -0,0 +1,57 @@
+// 合同模板相关类型定义
+
+export interface Template {
+  id: string;
+  title: string;
+  type: string;
+  description: string;
+  updateTime: string;
+  useCount: number;
+  rating: number;
+  category: string;
+}
+
+export interface TemplateDetail extends Template {
+  fileSize: string;
+  scope: string;
+  legalBasis: string;
+  templateCode: string;
+  reviews: Review[];
+  features: Feature[];
+  structure: StructureItem[];
+  preview: string;
+}
+
+export interface Review {
+  user: string;
+  rating: number;
+  comment: string;
+  date: string;
+}
+
+export interface Feature {
+  title: string;
+  description: string;
+  icon: string;
+  color: string;
+}
+
+export interface StructureItem {
+  step: number;
+  title: string;
+  description: string;
+}
+
+export interface FilterItem {
+  label: string;
+  count: number;
+}
+
+export interface CategoryItem {
+  name: string;
+  icon: string;
+  count: number;
+}
+
+export type ViewMode = 'grid' | 'list';
+export type SortBy = 'relevance' | 'newest' | 'popular' | 'rating'; 
\ No newline at end of file