diff --git a/app/components/layout/Layout.tsx b/app/components/layout/Layout.tsx
index c190608..5acd1f3 100644
--- a/app/components/layout/Layout.tsx
+++ b/app/components/layout/Layout.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Sidebar } from './Sidebar';
 // import { Header } from './Header';
 import { Breadcrumb } from './Breadcrumb';
-import { useMatches } from '@remix-run/react';
+import { useMatches, useLocation } from '@remix-run/react';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -11,7 +11,7 @@ interface LayoutProps {
 // 添加一个接口表示路由handle可能包含的属性
 interface RouteHandle {
   hideBreadcrumb?: boolean;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 interface Match {
@@ -23,9 +23,14 @@ interface Match {
 export function Layout({ children }: LayoutProps) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const matches = useMatches() as Match[];
+  const location = useLocation();
+  
+  // 检查当前路径是否应该隐藏侧边栏
+  const noLayoutPaths = ['/login', '/'];
+  const shouldHideSidebar = noLayoutPaths.includes(location.pathname);
   
   // 检查当前路由是否应该隐藏默认面包屑
-  const shouldHideBreadcrumb = matches.some(match => 
+  const shouldHideBreadcrumb = shouldHideSidebar || matches.some(match => 
     match.handle && match.handle.hideBreadcrumb === true
   );
   
@@ -43,6 +48,11 @@ export function Layout({ children }: LayoutProps) {
     localStorage.setItem('sidebarCollapsed', String(newState));
   };
   
+  // 如果是无布局页面，只渲染内容
+  if (shouldHideSidebar) {
+    return <>{children}</>;
+  }
+  
   return (
     <div className="layout-container">
       <Sidebar 
diff --git a/app/components/layout/Sidebar.tsx b/app/components/layout/Sidebar.tsx
index 2e58a84..34b10b5 100644
--- a/app/components/layout/Sidebar.tsx
+++ b/app/components/layout/Sidebar.tsx
@@ -19,10 +19,17 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
   const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({});
   
   const menuItems: MenuItem[] = [
+    {
+      id: 'contract-search',
+      title: '智能搜索',
+      path: '/contract-search',
+      hideBreadcrumb: true,
+      icon: 'ri-search-line'
+    },
     {
       id: 'home',
       title: '系统概览',
-      path: '/',
+      path: '/home',
       icon: 'ri-home-line'
     },
     {
diff --git a/app/components/reviews/ReviewPointsList.tsx b/app/components/reviews/ReviewPointsList.tsx
index e37288b..502ff41 100644
--- a/app/components/reviews/ReviewPointsList.tsx
+++ b/app/components/reviews/ReviewPointsList.tsx
@@ -459,15 +459,24 @@ export function ReviewPointsList({
     
     // 获取所有consistency规则中的fields
     const allConsistencyFields: string[][] = [];
+    
+    // 存储 sourceField 和 targetField 的映射关系
+    const pairsMapping: Record<string, string> = {};
+    
     consistencyRules.forEach(rule => {
       if (rule.config?.fields) {
         allConsistencyFields.push(rule.config.fields);
-      }else if (rule.config?.pairs) {
+      } else if (rule.config?.pairs) {
         // 处理pairs情况，提取sourceField和targetField
         const fields: string[] = [];
         rule.config.pairs.forEach(pair => {
           if (pair.sourceField) fields.push(pair.sourceField);
           if (pair.targetField) fields.push(pair.targetField);
+          
+          // 记录 sourceField 和 targetField 的映射关系
+          if (pair.sourceField && pair.targetField) {
+            pairsMapping[pair.sourceField] = pair.targetField;
+          }
         });
         if (fields.length > 0) {
           allConsistencyFields.push(fields);
@@ -507,10 +516,136 @@ export function ReviewPointsList({
       }
     });
     
+    // 对每个分组内的条目按照 sourceField 和 targetField 的关系进行排序
+    Object.keys(groupedContent).forEach(groupKey => {
+      if (groupKey !== 'default' && groupedContent[groupKey].length > 1) {
+        // 创建一个新数组用于存储排序后的结果
+        const sortedEntries: Array<[string, { page?: number | string, value?: object }]> = [];
+        const entriesMap = new Map(groupedContent[groupKey]);
+        
+        // 找出所有的源字段和目标字段对
+        const processed = new Set<string>();
+        
+        // 构建一个字段之间的连接关系图，用于处理嵌套关系
+        const fieldChains: Array<string[]> = [];
+        
+        // 遍历所有映射关系，构建字段链
+        const buildFieldChains = () => {
+          // 创建一个图结构，记录每个字段的后继字段
+          const graph: Record<string, string[]> = {};
+          
+          // 根据映射关系建立图
+          Object.entries(pairsMapping).forEach(([source, target]) => {
+            if (!graph[source]) graph[source] = [];
+            graph[source].push(target);
+            
+            // 确保目标字段在图中有一个空数组
+            if (!graph[target]) graph[target] = [];
+          });
+          
+          // 查找所有在当前分组中的字段
+          const fieldsInGroup = new Set(Array.from(entriesMap.keys()));
+          
+          // 找出入度为0的节点（即只作为sourceField而不是任何targetField的字段）
+          const startNodes: string[] = [];
+          for (const field of fieldsInGroup) {
+            // 检查该字段是否作为targetField存在
+            const isTarget = Object.values(pairsMapping).includes(field);
+            // 如果该字段是sourceField但不是targetField，则为起始节点
+            if (!isTarget && field in pairsMapping) {
+              startNodes.push(field);
+            }
+          }
+          
+          // 从每个起始节点开始，使用DFS构建字段链
+          for (const startNode of startNodes) {
+            const chain: string[] = [];
+            const dfs = (node: string) => {
+              // 如果该节点不在当前分组中，则跳过
+              if (!fieldsInGroup.has(node)) return;
+              
+              chain.push(node);
+              // 遍历所有后继节点
+              for (const nextNode of graph[node] || []) {
+                dfs(nextNode);
+              }
+            };
+            
+            dfs(startNode);
+            
+            // 如果链不为空，则添加到字段链列表中
+            if (chain.length > 0) {
+              fieldChains.push(chain);
+            }
+          }
+          
+          // 处理环形依赖或没有入度为0的节点的情况
+          // 找出未被处理的字段
+          const processedInChains = new Set(fieldChains.flat());
+          const remainingFields = Array.from(fieldsInGroup).filter(f => !processedInChains.has(f));
+          
+          // 将剩余字段按照pairsMapping的关系组织成链
+          while (remainingFields.length > 0) {
+            const field = remainingFields.shift()!;
+            
+            // 如果该字段已经在某个链中，则跳过
+            if (processedInChains.has(field)) continue;
+            
+            const chain: string[] = [field];
+            processedInChains.add(field);
+            
+            // 向后查找链
+            let currentField = field;
+            while (currentField in pairsMapping) {
+              const nextField = pairsMapping[currentField];
+              // 如果下一个字段不在分组中或已处理，则中断
+              if (!fieldsInGroup.has(nextField) || processedInChains.has(nextField)) break;
+              
+              chain.push(nextField);
+              processedInChains.add(nextField);
+              currentField = nextField;
+              
+              // 从剩余字段中移除
+              const index = remainingFields.indexOf(nextField);
+              if (index !== -1) {
+                remainingFields.splice(index, 1);
+              }
+            }
+            
+            if (chain.length > 0) {
+              fieldChains.push(chain);
+            }
+          }
+        };
+        
+        buildFieldChains();
+        
+        // 根据字段链构建排序后的结果
+        fieldChains.forEach(chain => {
+          chain.forEach(field => {
+            if (entriesMap.has(field) && !processed.has(field)) {
+              sortedEntries.push([field, entriesMap.get(field)!]);
+              processed.add(field);
+            }
+          });
+        });
+        
+        // 添加剩余未处理的字段
+        for (const [key] of groupedContent[groupKey]) {
+          if (!processed.has(key)) {
+            sortedEntries.push([key, entriesMap.get(key)!]);
+          }
+        }
+        
+        // 用排序后的结果替换原数组
+        groupedContent[groupKey] = sortedEntries;
+      }
+    });
+    
     return (
       <>
         {/* 渲染各个分组 */}
-        {Object.entries(groupedContent).map(([groupKey, entries], groupIndex) => {
+        {Object.entries(groupedContent).map(([groupKey, entries]) => {
           if (entries.length === 0) return null;
           
           // 非默认组添加边框
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 64825cb..6fdd113 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,324 +1,174 @@
-// import React from 'react';
-import { type MetaFunction, type LoaderFunctionArgs, redirect } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import { Card } from "~/components/ui/Card";
-import { Button } from "~/components/ui/Button";
-import { FileTag, links as fileTagLinks } from "~/components/ui/FileTag";
-// import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
-import { Tag } from "~/components/ui/Tag";
-import homeStyles from "~/styles/pages/sys_overview.css?url";
-import { getDocuments, type DocumentUI } from "~/api/files/documents";
-import { useState, useEffect } from "react";
-import { getHomeData } from "~/api/home/home";
+import { useState, useEffect } from 'react';
+import { useNavigate, Form } from '@remix-run/react';
+import { type MetaFunction, type ActionFunctionArgs, LoaderFunctionArgs, redirect } from "@remix-run/node";
+import styles from "~/styles/pages/home.css?url";
 import dayjs from 'dayjs';
-import { getUserSession } from "~/root";
-
-// 文件处理状态选项
-const fileProcessingStatusOptions = [
-  { value: "Waiting", label: "上传中", icon: "ri-loader-line", color: "blue" },
-  { value: "Cutting", label: "切分中", icon: "ri-loader-line", color: "purple" },
-  { value: "Extractioning", label: "抽取中", icon: "ri-loader-line", color: "cyan" },
-  { value: "Evaluationing", label: "评查中", icon: "ri-loader-line", color: "teal" },
-  { value: "Processed", label: "已完成", icon: "ri-check-line", color: "green" },
-];
+// import { getUserSession, logout } from "~/root";
 
 export const links = () => [
-  { rel: "stylesheet", href: homeStyles },
-  ...fileTagLinks()
+  { rel: "stylesheet", href: styles }
 ];
 
 export const meta: MetaFunction = () => {
   return [
     { title: "中国烟草AI合同及卷宗审核系统 - 首页" },
-    { name: "description", content: "AI审核系统首页" }
+    { name: "description", content: "中国烟草AI合同及卷宗审核系统首页" },
   ];
 };
 
-// API 响应的类型定义
-// interface StatsData {
-//   totalFiles: number;
-//   reviewedFiles: number;
-//   pendingFiles: number;
-//   passRate: number;
-// }
-
-// 添加认证检查
-export async function loader({ request }: LoaderFunctionArgs) {
-  // 检查用户登录状态
-  // const { isAuthenticated } = await getUserSession(request);
+// 处理登出请求
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const intent = formData.get("intent");
   
-  // if (!isAuthenticated) {
-  //   return redirect("/login");
-  // }
-  
-  try {
-    const documentSearchParams = {
-      page: 1,
-      pageSize: 10,
-      order: 'updated_at.desc'
-    };
-   
-    // 获取最近文档数据
-    const responseDocuments = await getDocuments(documentSearchParams);
-    if (responseDocuments.error) {
-      console.error('获取最近文档数据失败', responseDocuments.error);
-      return Response.json({ error: responseDocuments.error }, { status: responseDocuments.status || 500 });
-    }
-    const recentFiles = responseDocuments.data?.documents || [];
-    console.log("recentFiles-------",recentFiles);
-
-
-    const homeData = await getHomeData();
-    console.log("homeData-------",homeData);
-
-
-    return Response.json({ homeData, recentFiles });
-  } catch (error) {
-    // 错误处理
-    console.error('Failed to fetch dashboard data:', error);
-    return Response.json(
-      { error: '获取数据失败，请稍后重试' },
-      { status: 500 }
-    );
+  if (intent === "logout") {
+    // return logout(request);
   }
+  
+  return null;
 }
 
+// 验证用户登录状态
+// export async function loader({ request }: LoaderFunctionArgs) {
+  // const { isAuthenticated } = await getUserSession(request);
+  
+//   if (!isAuthenticated) {
+//     return redirect("/login");
+//   }
+  
+//   return Response.json({ isAuthenticated });
+// }
+
 export default function Index() {
-  const { homeData, recentFiles: initialRecentFiles } = useLoaderData<typeof loader>();
-  // 使用useState存储最近文档数据，初始值为loader加载的数据
-  const [recentFiles, setRecentFiles] = useState<DocumentUI[]>(initialRecentFiles || []);
+  const navigate = useNavigate();
   const [currentDateTime, setCurrentDateTime] = useState({
     date: '',
     time: ''
   });
   
-  // 更新当前时间
+  // 更新日期时间
   useEffect(() => {
-    // 使用dayjs格式化日期和时间
     const updateDateTime = () => {
       const now = dayjs();
+      // 格式化日期: YYYY/MM/DD
       setCurrentDateTime({
-        date: now.format('YYYY年MM月DD日'),
+        date: now.format('YYYY/MM/DD'),
         time: now.format('HH:mm:ss')
       });
     };
     
-    // 立即更新一次
+    // 初始化时间
     updateDateTime();
     
-    // 设置计时器，每秒更新一次
+    // 每秒更新一次
     const timerID = setInterval(updateDateTime, 1000);
     
-    // 清理函数，组件卸载时清除计时器
     return () => clearInterval(timerID);
   }, []);
-
-  // 修改useEffect定时器，每10秒自动获取最近文档数据
-  // 按照定时器更新最近文档
-  useEffect(() => {
-    // 定义一个函数用于获取最新的文档数据
-    const fetchLatestDocuments = async () => {
-      try {
-        const documentSearchParams = {
-          page: 1,
-          pageSize: 10,
-          order: 'updated_at.desc'
-        };
-        
-        console.log('定时获取最新文档数据...');
-        const responseDocuments = await getDocuments(documentSearchParams);
-        
-        if (responseDocuments.error) {
-          console.error('获取最近文档数据失败', responseDocuments.error);
-          return;
-        }
-        
-        // 获取新的文档数据
-        const newRecentFiles = responseDocuments.data?.documents || [];
-        
-        // 检查数据是否有变化
-        if (JSON.stringify(newRecentFiles) !== JSON.stringify(recentFiles)) {
-          console.log('文档数据已更新，直接更新状态');
-          // 直接更新状态，不需要刷新页面
-          setRecentFiles(newRecentFiles);
-        }
-      } catch (error) {
-        console.error('自动获取文档数据失败:', error);
-      }
-    };
-    
-    // 设置10秒的定时器
-    const timerID = setInterval(fetchLatestDocuments, 10000);
-    
-    // 组件卸载时清除定时器
-    return () => {
-      console.log('清除文档数据自动更新定时器');
-      clearInterval(timerID);
-    };
-  }, []); // 不再依赖recentFiles，避免循环依赖
-
-  return (
-    <div className="dashboard-container">
-      {/* 页面头部 */}
-      <div className="flex justify-between items-center mb-4">
-          <h2 className="text-xl font-medium">系统概览</h2>
-          <div className="text-sm text-gray-500 flex flex-row items-center justify-between">
-            <div className="flex items-center">
-              <span id="current-date">{currentDateTime.date}</span>
-              <span className="mx-2">|</span>
-              <span id="current-time">{currentDateTime.time}</span>
-            </div>
-            <div className="user-profile p-4 border-b border-gray-100 flex items-center">
-              <div className="avatar w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
-                <span>管</span>
-              </div>
-              <div className="ml-3">
-                <p className="text-sm font-medium">系统管理员</p>
-                <p className="text-xs text-gray-500">超级管理员</p>
-              </div>
-            </div>
-          </div>
-      </div>
-
-      {/* 统计卡片区域 */}
-      <Card title="统计信息" icon="ri-bar-chart-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
-        <div className="stat-grid ">
-          <StatCard 
-            title="今日待审文件" 
-            value={homeData.todayPendingFiles}
-            icon="ri-inbox-line"
-          />
-        <StatCard 
-          title="本月已审核文件" 
-          value={homeData.monthlyReviewedFiles}
-          icon="ri-file-search-line"
-          trend={{ value: homeData.monthlyReviewGrowth.value, isUp: homeData.monthlyReviewGrowth.isUp }}
-        />
-        <StatCard 
-          title="本月审核通过率" 
-          value={homeData.monthlyPassRate}
-          icon="ri-percent-line"
-          trend={{ value: homeData.passRateGrowth.value, isUp: homeData.passRateGrowth.isUp }}
-        />
-        <StatCard 
-          title="本月问题检出数" 
-          value={homeData.issuesDetected}
-          icon="ri-error-warning-line"
-          trend={{ value: homeData.issuesGrowth.value, isUp: homeData.issuesGrowth.isUp }}
-        />
-        </div>
-      </Card>
-      
-      {/* 快捷访问区域 */}
-      <Card title="快捷访问" icon="ri-speed-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
-        <div className="shortcut-grid">
-          <ShortcutItem icon="ri-upload-cloud-line" label="上传文件" to="/files/upload" />
-          <ShortcutItem icon="ri-file-list-3-line" label="文档列表" to="/documents" />
-          <ShortcutItem icon="ri-list-check-3" label="评查点列表" to="/rules" />
-          <ShortcutItem icon="ri-folder-open-line" label="评查点分组" to="/rule-groups" />
-          {/* <ShortcutItem icon="ri-file-chart-line" label="评查详情" to="/reviews" /> */}
-          <ShortcutItem icon="ri-file-list-line" label="文档类型" to="/document-types" />
-          {/* <ShortcutItem icon="ri-settings-3-line" label="系统设置" to="/settings" /> */}
-          <ShortcutItem icon="ri-chat-1-line" label="提示词管理" to="/prompts" />
-        </div>
-      </Card>
-      
-      {/* 最近文档区域 */}
-      <Card 
-        title="最近文档" 
-        icon="ri-file-list-3-line" 
-        extra={<Button to="/documents" size="small">查看全部</Button>}
-        className="mt-6"
-      >
-        <div className="doc-list">
-          {recentFiles.map((file: DocumentUI) => (
-            <div key={file.id} className="doc-item">
-              <div className="doc-info">
-                <FileTag 
-                  extension={file.name.endsWith('.pdf') ? 'pdf' : 'docx'} 
-                  showIcon={true}
-                  showText={false}
-                  showBackground={false}
-                  size="lg"
-                  className="mr-2"
-                />
-                <div>
-                  <div className="doc-name">{file.name}</div>
-                  <div className="doc-meta">
-                    <Tag size="sm" className="mr-2">
-                      {file.typeName}
-                    </Tag>
-                    <span className="text-gray-500">·</span>
-                    <span className="ml-2 text-gray-500">{file.updatedAt}</span>
-                  </div>
-                </div>
-              </div>
-              <div className="doc-status">
-                {(() => {
-                  const fileStatus = file.fileStatus || "-";
-                  const status = fileProcessingStatusOptions.find(s => s.value === fileStatus) || 
-                                 fileProcessingStatusOptions[0];
-                  const isSpinning = fileStatus !== "Processed";
-                  return (
-                    <div className={`inline-flex items-center px-2 py-1 rounded-full text-xs bg-${status.color}-100 text-${status.color}-800`}>
-                      <i className={`${status.icon} ${isSpinning ? "animate-spin" : ""} mr-1`}></i>
-                      <span>{status.label}</span>
-                    </div>
-                  );
-                })()}
-              </div>
-            </div>
-          ))}
-        </div>
-      </Card>
-    </div>
-  );
-}
-
-// 统计卡片组件
-interface StatCardProps {
-  title: string;
-  value: number | string;
-  icon: string;
-  trend?: {
-    value: number;
-    isUp: boolean;
+  
+  // 处理模块点击
+  const handleModuleClick = (path: string) => {
+    navigate(path);
+  };
+
+  // 处理键盘事件
+  const handleKeyDown = (path: string, e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handleModuleClick(path);
+    }
+  };
+
+  // 处理登出
+  const handleLogout = () => {
+    // 使用Form组件提交登出请求
+    const form = document.getElementById('logout-form') as HTMLFormElement;
+    if (form) {
+      form.submit();
+    }
   };
-}
 
-function StatCard({ title, value, icon, trend }: StatCardProps) {
   return (
-    <div className="stat-card">
-      <div className="stat-title">{title}</div>
-      <div className="stat-value">{value}</div>
-      {trend && (
-        <div className={`stat-trend ${trend.isUp ? 'trend-up' : 'trend-down'}`}>
-          <i className={`mr-1 ${trend.isUp ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'}`}></i>
-          <span>{trend.value}%</span>
-          <span className="ml-1 text-gray-500">较上月</span>
+    <div className="home-page">
+      {/* 登出表单 - 隐藏 */}
+      <Form method="post" id="logout-form" className="hidden">
+        <input type="hidden" name="intent" value="logout" />
+      </Form>
+      
+      {/* 头部 */}
+      <header className="header">
+        <div className="logo-container">
+          <img src="/logo.svg" alt="中国烟草" className="logo" />
+          <div className="flex flex-col">
+            <span className="logo-text ">中国烟草</span>
+            <span className="logo-text-en">CHINA TOBACCO</span>
+          </div>
         </div>
-      )}
-      <i className={`${icon} stat-icon`}></i>
+        <div className="user-info">
+          <span className="datetime">{currentDateTime.date} {currentDateTime.time}</span>
+          <div className="user">
+            <img src="/avatar.png" alt="用户头像" className="avatar" />
+            <span className="username">系统管理员</span>
+            <button 
+              onClick={handleLogout} 
+              className="logout-button"
+              aria-label="登出"
+            >
+              <i className="ri-logout-box-line"></i>
+            </button>
+          </div>
+        </div>
+      </header>
+      
+      {/* 主要内容 */}
+      <main className="index-main-content">
+        <h1 className="welcome-text">- 欢迎来到智慧法务平台 -</h1>
+        
+        <div className="modules-container">
+          {/* 合同管理模块 */}
+          <div 
+            className="module-card" 
+            onClick={() => handleModuleClick('/documents')}
+            onKeyDown={(e) => handleKeyDown('/documents', e)}
+            role="button"
+            tabIndex={0}
+            aria-label="合同管理"
+          >
+            <i className="ri-file-list-2-fill text-[3rem] text-[#269b6c]"></i>
+            <span className="module-name">合同管理</span>
+          </div>
+          
+          {/* 案卷智能评查模块 */}
+          <div 
+            className="module-card" 
+            onClick={() => handleModuleClick('/home')}
+            onKeyDown={(e) => handleKeyDown('/home', e)}
+            role="button"
+            tabIndex={0}
+            aria-label="案卷智能评查"
+          >
+            <i className="ri-folder-shared-fill text-[3rem] text-[#269b6c]"></i>
+            <span className="module-name">案卷智能评查</span>
+          </div>
+          
+          {/* 智慧法务大模型模块 */}
+          <div 
+            className="module-card" 
+            onClick={() => handleModuleClick('/prompts')}
+            onKeyDown={(e) => handleKeyDown('/prompts', e)}
+            role="button"
+            tabIndex={0}
+            aria-label="智慧法务大模型"
+          >
+            <i className="ri-robot-2-fill text-[3rem] text-[#269b6c]"></i>
+            <span className="module-name">智慧法务大模型</span>
+          </div>
+        </div>
+      </main>
+      {/* 底部山水背景 */}
+      <footer className="footer">
+        <div className="mountains-bg"></div>
+      </footer>
+      
     </div>
   );
-}
-
-// 快捷方式组件
-interface ShortcutItemProps {
-  icon: string;
-  label: string;
-  to: string;
-}
-
-function ShortcutItem({ icon, label, to }: ShortcutItemProps) {
-  return (
-    <Button 
-      to={to} 
-      type="default" 
-      className="shortcut-item"
-    >
-      <i className={`${icon} shortcut-icon text-2xl`}></i>
-      <span className="shortcut-label">{label}</span>
-    </Button>
-  );
-}
+} 
\ No newline at end of file
diff --git a/app/routes/contract-search._index.tsx b/app/routes/contract-search._index.tsx
new file mode 100644
index 0000000..28f0b85
--- /dev/null
+++ b/app/routes/contract-search._index.tsx
@@ -0,0 +1,152 @@
+// 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>
+//   );
+// }
diff --git a/app/routes/contract-search.tsx b/app/routes/contract-search.tsx
new file mode 100644
index 0000000..5f6ec27
--- /dev/null
+++ b/app/routes/contract-search.tsx
@@ -0,0 +1,23 @@
+import { Outlet } from "@remix-run/react";
+import { type MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "智能搜索 - 中国烟草AI合同及卷宗审核系统" },
+    { 
+      name: "contract-search", 
+      content: "智能搜索模块，包括智能搜索功能" 
+    }
+  ];
+};
+
+export const handle = {
+  breadcrumb: "智能搜索"
+};
+
+/**
+ * 配置列表路由布局
+ */
+export default function ContractSearchLayout() {
+  return <Outlet />;
+}
\ No newline at end of file
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 1007d7c..649760b 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -1,180 +1,324 @@
-import { useState, useEffect } from 'react';
-import { useNavigate, Form } from '@remix-run/react';
-import { type MetaFunction, type ActionFunctionArgs, LoaderFunctionArgs, redirect, json } from "@remix-run/node";
-import styles from "~/styles/pages/home.css?url";
-import { getUserSession, logout } from "~/root";
+// import React from 'react';
+import { type MetaFunction, type LoaderFunctionArgs, redirect } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import { Card } from "~/components/ui/Card";
+import { Button } from "~/components/ui/Button";
+import { FileTag, links as fileTagLinks } from "~/components/ui/FileTag";
+// import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
+import { Tag } from "~/components/ui/Tag";
+import homeStyles from "~/styles/pages/sys_overview.css?url";
+import { getDocuments, type DocumentUI } from "~/api/files/documents";
+import { useState, useEffect } from "react";
+import { getHomeData } from "~/api/home/home";
+import dayjs from 'dayjs';
+// import { getUserSession } from "~/root";
+
+// 文件处理状态选项
+const fileProcessingStatusOptions = [
+  { value: "Waiting", label: "上传中", icon: "ri-loader-line", color: "blue" },
+  { value: "Cutting", label: "切分中", icon: "ri-loader-line", color: "purple" },
+  { value: "Extractioning", label: "抽取中", icon: "ri-loader-line", color: "cyan" },
+  { value: "Evaluationing", label: "评查中", icon: "ri-loader-line", color: "teal" },
+  { value: "Processed", label: "已完成", icon: "ri-check-line", color: "green" },
+];
 
 export const links = () => [
-  { rel: "stylesheet", href: styles }
+  { rel: "stylesheet", href: homeStyles },
+  ...fileTagLinks()
 ];
 
 export const meta: MetaFunction = () => {
   return [
     { title: "中国烟草AI合同及卷宗审核系统 - 首页" },
-    { name: "description", content: "中国烟草AI合同及卷宗审核系统首页" },
+    { name: "description", content: "AI审核系统首页" }
   ];
 };
 
-// 处理登出请求
-export async function action({ request }: ActionFunctionArgs) {
-  const formData = await request.formData();
-  const intent = formData.get("intent");
-  
-  if (intent === "logout") {
-    return logout(request);
-  }
-  
-  return null;
-}
+// API 响应的类型定义
+// interface StatsData {
+//   totalFiles: number;
+//   reviewedFiles: number;
+//   pendingFiles: number;
+//   passRate: number;
+// }
 
-// 验证用户登录状态
+// 添加认证检查
 export async function loader({ request }: LoaderFunctionArgs) {
-  const { isAuthenticated } = await getUserSession(request);
+  // 检查用户登录状态
+  // const { isAuthenticated } = await getUserSession(request);
   
-  if (!isAuthenticated) {
-    return redirect("/login");
+  // if (!isAuthenticated) {
+  //   return redirect("/login");
+  // }
+  
+  try {
+    const documentSearchParams = {
+      page: 1,
+      pageSize: 10,
+      order: 'updated_at.desc'
+    };
+   
+    // 获取最近文档数据
+    const responseDocuments = await getDocuments(documentSearchParams);
+    if (responseDocuments.error) {
+      console.error('获取最近文档数据失败', responseDocuments.error);
+      return Response.json({ error: responseDocuments.error }, { status: responseDocuments.status || 500 });
+    }
+    const recentFiles = responseDocuments.data?.documents || [];
+    console.log("recentFiles-------",recentFiles);
+
+
+    const homeData = await getHomeData();
+    console.log("homeData-------",homeData);
+
+
+    return Response.json({ homeData, recentFiles });
+  } catch (error) {
+    // 错误处理
+    console.error('Failed to fetch dashboard data:', error);
+    return Response.json(
+      { error: '获取数据失败，请稍后重试' },
+      { status: 500 }
+    );
   }
-  
-  return json({ isAuthenticated });
 }
 
 export default function Home() {
-  const navigate = useNavigate();
-  const [currentTime, setCurrentTime] = useState('');
-  const [currentDate, setCurrentDate] = useState('');
+  const { homeData, recentFiles: initialRecentFiles } = useLoaderData<typeof loader>();
+  // 使用useState存储最近文档数据，初始值为loader加载的数据
+  const [recentFiles, setRecentFiles] = useState<DocumentUI[]>(initialRecentFiles || []);
+  const [currentDateTime, setCurrentDateTime] = useState({
+    date: '',
+    time: ''
+  });
   
-  // 更新日期时间
+  // 更新当前时间
   useEffect(() => {
+    // 使用dayjs格式化日期和时间
     const updateDateTime = () => {
-      const now = new Date();
-      // 格式化日期: YYYY/MM/DD
-      const date = now.toLocaleDateString('zh-CN', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-      }).replace(/\//g, '/');
-      
-      // 格式化时间: HH:MM
-      const time = now.toLocaleTimeString('zh-CN', {
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false
+      const now = dayjs();
+      setCurrentDateTime({
+        date: now.format('YYYY年MM月DD日'),
+        time: now.format('HH:mm:ss')
       });
-      
-      setCurrentDate(date);
-      setCurrentTime(time);
     };
     
-    // 初始化时间
+    // 立即更新一次
     updateDateTime();
     
-    // 每分钟更新一次
-    const interval = setInterval(updateDateTime, 60000);
+    // 设置计时器，每秒更新一次
+    const timerID = setInterval(updateDateTime, 1000);
     
-    return () => clearInterval(interval);
+    // 清理函数，组件卸载时清除计时器
+    return () => clearInterval(timerID);
   }, []);
-  
-  // 处理模块点击
-  const handleModuleClick = (path: string) => {
-    navigate(path);
-  };
 
-  // 处理键盘事件
-  const handleKeyDown = (path: string, e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      handleModuleClick(path);
-    }
-  };
-
-  // 处理登出
-  const handleLogout = () => {
-    // 使用Form组件提交登出请求
-    const form = document.getElementById('logout-form') as HTMLFormElement;
-    if (form) {
-      form.submit();
-    }
-  };
+  // 修改useEffect定时器，每10秒自动获取最近文档数据
+  // 按照定时器更新最近文档
+  useEffect(() => {
+    // 定义一个函数用于获取最新的文档数据
+    const fetchLatestDocuments = async () => {
+      try {
+        const documentSearchParams = {
+          page: 1,
+          pageSize: 10,
+          order: 'updated_at.desc'
+        };
+        
+        console.log('定时获取最新文档数据...');
+        const responseDocuments = await getDocuments(documentSearchParams);
+        
+        if (responseDocuments.error) {
+          console.error('获取最近文档数据失败', responseDocuments.error);
+          return;
+        }
+        
+        // 获取新的文档数据
+        const newRecentFiles = responseDocuments.data?.documents || [];
+        
+        // 检查数据是否有变化
+        if (JSON.stringify(newRecentFiles) !== JSON.stringify(recentFiles)) {
+          console.log('文档数据已更新，直接更新状态');
+          // 直接更新状态，不需要刷新页面
+          setRecentFiles(newRecentFiles);
+        }
+      } catch (error) {
+        console.error('自动获取文档数据失败:', error);
+      }
+    };
+    
+    // 设置10秒的定时器
+    const timerID = setInterval(fetchLatestDocuments, 10000);
+    
+    // 组件卸载时清除定时器
+    return () => {
+      console.log('清除文档数据自动更新定时器');
+      clearInterval(timerID);
+    };
+  }, []); // 不再依赖recentFiles，避免循环依赖
 
   return (
-    <div className="home-page">
-      {/* 登出表单 - 隐藏 */}
-      <Form method="post" id="logout-form" className="hidden">
-        <input type="hidden" name="intent" value="logout" />
-      </Form>
-      
-      {/* 头部 */}
-      <header className="header">
-        <div className="logo-container">
-          <img src="/logo.png" alt="中国烟草" className="logo" />
-          <span className="logo-text">中国烟草</span>
-          <span className="logo-text-en">CHINA TOBACCO</span>
+    <div className="dashboard-container">
+      {/* 页面头部 */}
+      <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-medium">系统概览</h2>
+          <div className="text-sm text-gray-500 flex flex-row items-center justify-between">
+            <div className="flex items-center">
+              <span id="current-date">{currentDateTime.date}</span>
+              <span className="mx-2">|</span>
+              <span id="current-time">{currentDateTime.time}</span>
+            </div>
+            <div className="user-profile p-4 border-b border-gray-100 flex items-center">
+              <div className="avatar w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
+                <span>管</span>
+              </div>
+              <div className="ml-3">
+                <p className="text-sm font-medium">系统管理员</p>
+                <p className="text-xs text-gray-500">超级管理员</p>
+              </div>
+            </div>
+          </div>
+      </div>
+
+      {/* 统计卡片区域 */}
+      <Card title="统计信息" icon="ri-bar-chart-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
+        <div className="stat-grid ">
+          <StatCard 
+            title="今日待审文件" 
+            value={homeData.todayPendingFiles}
+            icon="ri-inbox-line"
+          />
+        <StatCard 
+          title="本月已审核文件" 
+          value={homeData.monthlyReviewedFiles}
+          icon="ri-file-search-line"
+          trend={{ value: homeData.monthlyReviewGrowth.value, isUp: homeData.monthlyReviewGrowth.isUp }}
+        />
+        <StatCard 
+          title="本月审核通过率" 
+          value={homeData.monthlyPassRate}
+          icon="ri-percent-line"
+          trend={{ value: homeData.passRateGrowth.value, isUp: homeData.passRateGrowth.isUp }}
+        />
+        <StatCard 
+          title="本月问题检出数" 
+          value={homeData.issuesDetected}
+          icon="ri-error-warning-line"
+          trend={{ value: homeData.issuesGrowth.value, isUp: homeData.issuesGrowth.isUp }}
+        />
         </div>
-        <div className="user-info">
-          <span className="datetime">{currentDate} {currentTime}</span>
-          <div className="user">
-            <img src="/avatar.png" alt="用户头像" className="avatar" />
-            <span className="username">系统管理员</span>
-            <button 
-              onClick={handleLogout} 
-              className="logout-button"
-              aria-label="登出"
-            >
-              <i className="ri-logout-box-line"></i>
-            </button>
-          </div>
-        </div>
-      </header>
+      </Card>
       
-      {/* 主要内容 */}
-      <main className="main-content">
-        <h1 className="welcome-text">- 欢迎来到智慧法务平台 -</h1>
-        
-        <div className="modules-container">
-          {/* 合同管理模块 */}
-          <div 
-            className="module-card" 
-            onClick={() => handleModuleClick('/documents')}
-            onKeyDown={(e) => handleKeyDown('/documents', e)}
-            role="button"
-            tabIndex={0}
-            aria-label="合同管理"
-          >
-            <div className="module-icon contract-icon"></div>
-            <span className="module-name">合同管理</span>
-          </div>
-          
-          {/* 案卷智能评查模块 */}
-          <div 
-            className="module-card" 
-            onClick={() => handleModuleClick('/')}
-            onKeyDown={(e) => handleKeyDown('/', e)}
-            role="button"
-            tabIndex={0}
-            aria-label="案卷智能评查"
-          >
-            <div className="module-icon review-icon"></div>
-            <span className="module-name">案卷智能评查</span>
-          </div>
-          
-          {/* 智慧法务大模型模块 */}
-          <div 
-            className="module-card" 
-            onClick={() => handleModuleClick('/prompts')}
-            onKeyDown={(e) => handleKeyDown('/prompts', e)}
-            role="button"
-            tabIndex={0}
-            aria-label="智慧法务大模型"
-          >
-            <div className="module-icon ai-icon"></div>
-            <span className="module-name">智慧法务大模型</span>
-          </div>
+      {/* 快捷访问区域 */}
+      <Card title="快捷访问" icon="ri-speed-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
+        <div className="shortcut-grid">
+          <ShortcutItem icon="ri-upload-cloud-line" label="上传文件" to="/files/upload" />
+          <ShortcutItem icon="ri-file-list-3-line" label="文档列表" to="/documents" />
+          <ShortcutItem icon="ri-list-check-3" label="评查点列表" to="/rules" />
+          <ShortcutItem icon="ri-folder-open-line" label="评查点分组" to="/rule-groups" />
+          {/* <ShortcutItem icon="ri-file-chart-line" label="评查详情" to="/reviews" /> */}
+          <ShortcutItem icon="ri-file-list-line" label="文档类型" to="/document-types" />
+          {/* <ShortcutItem icon="ri-settings-3-line" label="系统设置" to="/settings" /> */}
+          <ShortcutItem icon="ri-chat-1-line" label="提示词管理" to="/prompts" />
         </div>
-      </main>
+      </Card>
       
-      {/* 底部山水背景 */}
-      <footer className="footer">
-        <div className="mountains-bg"></div>
-      </footer>
+      {/* 最近文档区域 */}
+      <Card 
+        title="最近文档" 
+        icon="ri-file-list-3-line" 
+        extra={<Button to="/documents" size="small">查看全部</Button>}
+        className="mt-6"
+      >
+        <div className="doc-list">
+          {recentFiles.map((file: DocumentUI) => (
+            <div key={file.id} className="doc-item">
+              <div className="doc-info">
+                <FileTag 
+                  extension={file.name.endsWith('.pdf') ? 'pdf' : 'docx'} 
+                  showIcon={true}
+                  showText={false}
+                  showBackground={false}
+                  size="lg"
+                  className="mr-2"
+                />
+                <div>
+                  <div className="doc-name">{file.name}</div>
+                  <div className="doc-meta">
+                    <Tag size="sm" className="mr-2">
+                      {file.typeName}
+                    </Tag>
+                    <span className="text-gray-500">·</span>
+                    <span className="ml-2 text-gray-500">{file.updatedAt}</span>
+                  </div>
+                </div>
+              </div>
+              <div className="doc-status">
+                {(() => {
+                  const fileStatus = file.fileStatus || "-";
+                  const status = fileProcessingStatusOptions.find(s => s.value === fileStatus) || 
+                                 fileProcessingStatusOptions[0];
+                  const isSpinning = fileStatus !== "Processed";
+                  return (
+                    <div className={`inline-flex items-center px-2 py-1 rounded-full text-xs bg-${status.color}-100 text-${status.color}-800`}>
+                      <i className={`${status.icon} ${isSpinning ? "animate-spin" : ""} mr-1`}></i>
+                      <span>{status.label}</span>
+                    </div>
+                  );
+                })()}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Card>
     </div>
   );
-} 
\ No newline at end of file
+}
+
+// 统计卡片组件
+interface StatCardProps {
+  title: string;
+  value: number | string;
+  icon: string;
+  trend?: {
+    value: number;
+    isUp: boolean;
+  };
+}
+
+function StatCard({ title, value, icon, trend }: StatCardProps) {
+  return (
+    <div className="stat-card">
+      <div className="stat-title">{title}</div>
+      <div className="stat-value">{value}</div>
+      {trend && (
+        <div className={`stat-trend ${trend.isUp ? 'trend-up' : 'trend-down'}`}>
+          <i className={`mr-1 ${trend.isUp ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'}`}></i>
+          <span>{trend.value}%</span>
+          <span className="ml-1 text-gray-500">较上月</span>
+        </div>
+      )}
+      <i className={`${icon} stat-icon`}></i>
+    </div>
+  );
+}
+
+// 快捷方式组件
+interface ShortcutItemProps {
+  icon: string;
+  label: string;
+  to: string;
+}
+
+function ShortcutItem({ icon, label, to }: ShortcutItemProps) {
+  return (
+    <Button 
+      to={to} 
+      type="default" 
+      className="shortcut-item"
+    >
+      <i className={`${icon} shortcut-icon text-2xl`}></i>
+      <span className="shortcut-label">{label}</span>
+    </Button>
+  );
+}
diff --git a/app/styles/pages/contract-search.css b/app/styles/pages/contract-search.css
new file mode 100644
index 0000000..f4523f8
--- /dev/null
+++ b/app/styles/pages/contract-search.css
@@ -0,0 +1,186 @@
+/* 合同搜索页面样式 */
+: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%);
+}
+
+.content-area {
+  @apply flex-1 p-6 overflow-y-auto;
+}
+
+.search-hero {
+  @apply text-center py-16 bg-gradient-to-r from-green-50 to-blue-50 rounded-2xl mb-8;
+}
+
+.search-title {
+  @apply text-3xl font-semibold text-gray-800 mb-3;
+}
+
+.search-subtitle {
+  @apply text-base text-gray-600 mb-10;
+}
+
+.search-container {
+  @apply max-w-xl mx-auto relative;
+}
+
+.search-box {
+  @apply bg-white border-2 border-gray-200 rounded-xl p-4 shadow-md transition-all;
+}
+
+.search-box:focus-within {
+  @apply border-green-600 shadow-lg;
+}
+
+.search-textarea {
+  @apply w-full min-h-[80px] border-none outline-none resize-vertical text-base leading-relaxed;
+}
+
+.search-actions {
+  @apply flex justify-between items-center mt-3 pt-3 border-t border-gray-100;
+}
+
+.search-tips {
+  @apply text-xs text-gray-500;
+}
+
+.search-btn {
+  @apply bg-green-700 text-white border-none rounded-lg py-2.5 px-6 text-sm font-medium cursor-pointer transition-all flex items-center gap-1.5;
+}
+
+.search-btn:hover {
+  @apply bg-green-800 transform -translate-y-0.5;
+}
+
+.quick-categories {
+  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mt-10;
+}
+
+.category-card {
+  @apply bg-white rounded-xl p-5 text-center cursor-pointer transition-all border border-gray-100 shadow-sm;
+}
+
+.category-card:hover {
+  @apply transform -translate-y-0.5 shadow-md border-green-700;
+}
+
+.category-icon {
+  @apply w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-3 text-green-700;
+}
+
+.category-title {
+  @apply text-base font-medium mb-1;
+}
+
+.category-count {
+  @apply text-xs text-gray-500;
+}
+
+.contract-search-container {
+  @apply w-full p-6 bg-white rounded-lg shadow-sm;
+}
+
+.search-header {
+  @apply mb-6;
+}
+
+.search-description {
+  @apply text-gray-600 text-sm;
+}
+
+.search-form {
+  @apply mb-6;
+}
+
+.search-form-row {
+  @apply flex flex-wrap items-center gap-4 mb-4;
+}
+
+.search-form-item {
+  @apply flex-grow min-w-[200px];
+}
+
+.search-form-label {
+  @apply block text-sm font-medium text-gray-700 mb-1;
+}
+
+.search-form-input {
+  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
+}
+
+.search-form-select {
+  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
+}
+
+.search-form-date {
+  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
+}
+
+.search-buttons {
+  @apply flex justify-end gap-4 mt-6;
+}
+
+.search-button {
+  @apply px-4 py-2 rounded-md font-medium;
+}
+
+.search-button-primary {
+  @apply bg-blue-600 text-white hover:bg-blue-700;
+}
+
+.search-button-secondary {
+  @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
+}
+
+.search-results {
+  @apply mt-8;
+}
+
+.search-results-header {
+  @apply flex justify-between items-center mb-4;
+}
+
+.search-results-title {
+  @apply text-lg font-medium text-gray-800;
+}
+
+.search-results-count {
+  @apply text-gray-600;
+}
+
+.search-results-table {
+  @apply w-full border-collapse;
+}
+
+.search-results-table th {
+  @apply px-4 py-3 bg-gray-100 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
+}
+
+.search-results-table td {
+  @apply px-4 py-3 border-t border-gray-200 text-sm;
+}
+
+.search-results-actions {
+  @apply flex gap-2;
+}
+
+.search-results-action {
+  @apply text-blue-600 hover:text-blue-800 cursor-pointer;
+}
+
+.no-results {
+  @apply py-12 text-center text-gray-500;
+}
+
+.pagination-container {
+  @apply mt-6 flex justify-center;
+} 
\ No newline at end of file
diff --git a/app/styles/pages/home.css b/app/styles/pages/home.css
index a421c6d..95e3f4e 100644
--- a/app/styles/pages/home.css
+++ b/app/styles/pages/home.css
@@ -2,8 +2,9 @@
 .home-page {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
-    background-color: #f0f7f4;
+    height: 100vh;
+    /* height: 100%; */
+    background-color: #ffffff;
   }
   
   /* 头部样式 */
@@ -11,7 +12,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.75rem 2rem;
+    padding: 0.75rem 1rem;
     background-color: white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   }
@@ -22,19 +23,19 @@
   }
   
   .logo {
-    height: 36px;
-    margin-right: 0.75rem;
+    height: 60px;
+    margin-right: 0.15rem;
   }
   
   .logo-text {
-    font-size: 1.125rem;
-    font-weight: 600;
+    font-size: 1.8rem;
+    font-weight: 800;
     color: #333;
-    margin-right: 0.5rem;
   }
   
   .logo-text-en {
-    font-size: 0.75rem;
+    margin-top: -0.2rem;
+    font-size: 0.85rem;
     color: #666;
     font-weight: 500;
     text-transform: uppercase;
@@ -48,7 +49,7 @@
   }
   
   .datetime {
-    font-size: 0.875rem;
+    font-size:1rem;
     color: #666;
   }
   
@@ -72,13 +73,18 @@
   }
   
   /* 主要内容区域 */
-  .main-content {
+  .index-main-content {
+    border-radius: 0.5rem 0.5rem 0 0;
+    height: 100%;
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 3rem 1.5rem;
+    justify-content: center;
+    margin: 1rem;
     padding-bottom: 0;
+    margin-bottom: 0;
+    background-color: #f0f7f4;
   }
   
   .welcome-text {
@@ -98,11 +104,10 @@
   
   .module-card {
     display: flex;
-    flex-direction: column;
     align-items: center;
     width: 250px;
     padding: 2rem 1.5rem;
-    background-color: white;
+    background: linear-gradient(to bottom, #ebebeb, #ffffff);
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     transition: transform 0.2s, box-shadow 0.2s;
@@ -111,19 +116,11 @@
   
   .module-card:hover {
     transform: translateY(-5px);
+    border: 1px solid #269b6c;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   }
   
-  .module-icon {
-    width: 64px;
-    height: 64px;
-    margin-bottom: 1.5rem;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-  
-  .contract-icon {
+  /* .contract-icon {
     background-image: url('/images/contract-icon.svg');
   }
   
@@ -133,9 +130,10 @@
   
   .ai-icon {
     background-image: url('/images/ai-icon.svg');
-  }
+  } */
   
   .module-name {
+    margin-left: 1rem;
     font-size: 1.125rem;
     font-weight: 500;
     color: #333;
@@ -144,8 +142,12 @@
   /* 底部山水背景 */
   .footer {
     height: 200px;
+    margin: 1rem;
+    margin-top: 0;
     overflow: hidden;
     position: relative;
+    background-color: #f0f7f4;
+    border-radius: 0 0 0.5rem 0.5rem;
   }
   
   .mountains-bg {
diff --git a/html/合同模板页面.html b/html/合同模板页面.html
new file mode 100644
index 0000000..873e9b1
--- /dev/null
+++ b/html/合同模板页面.html
@@ -0,0 +1,1629 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>中国烟草合同模板库 - AI智能搜索系统</title>
+    <link href="https://unpkg.com/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+    <link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <!-- <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> -->
+    <style>
+        :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%);
+        }
+
+        body {
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+            line-height: 1.5;
+            color: var(--text-color);
+            background: var(--gradient-bg);
+            margin: 0;
+            padding: 20px;
+        }
+
+        .page-container {
+            width: 1440px;
+            height: 900px;
+            border: 1px solid #666;
+            border-radius: 8px;
+            background: white;
+            margin: 20px;
+            display: inline-block;
+            vertical-align: top;
+            overflow: hidden;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            position: relative;
+        }
+
+        .window-controls {
+            position: absolute;
+            top: 12px;
+            right: 16px;
+            display: flex;
+            gap: 8px;
+            z-index: 100;
+        }
+
+        .window-control {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
+        .control-close { background: #ff5f57; }
+        .control-minimize { background: #ffbd2e; }
+        .control-maximize { background: #28ca42; }
+
+        .layout-container {
+            display: flex;
+            height: 100%;
+        }
+
+        .sidebar {
+            width: 220px;
+            background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
+            border-right: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+        }
+
+        .sidebar-header {
+            padding: 20px 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--primary-color);
+        }
+
+        .logo i {
+            font-size: 24px;
+            margin-right: 8px;
+        }
+
+        .sidebar-menu {
+            flex: 1;
+            padding: 16px 0;
+        }
+
+        .menu-item {
+            margin: 0 12px 4px;
+        }
+
+        .menu-item a {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            border-radius: 8px;
+            color: var(--text-color);
+            text-decoration: none;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+
+        .menu-item:hover a,
+        .menu-item.active a {
+            background: var(--primary-light);
+            color: var(--primary-color);
+        }
+
+        .menu-item i {
+            margin-right: 12px;
+            font-size: 18px;
+        }
+
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background: var(--gradient-bg);
+        }
+
+        .top-nav {
+            height: 60px;
+            background: white;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+            padding: 0 24px;
+            justify-content: space-between;
+        }
+
+        .breadcrumb {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+        }
+
+        .breadcrumb-item {
+            color: var(--text-secondary);
+        }
+
+        .breadcrumb-item:last-child {
+            color: var(--text-color);
+            font-weight: 500;
+        }
+
+        .breadcrumb-item:not(:last-child)::after {
+            content: '/';
+            margin: 0 8px;
+            color: #d9d9d9;
+        }
+
+        .content-area {
+            flex: 1;
+            padding: 24px;
+            overflow-y: auto;
+        }
+
+        .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-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;
+        }
+
+        .search-box:focus-within {
+            border-color: var(--primary-color);
+            box-shadow: 0 4px 20px rgba(0, 104, 74, 0.15);
+        }
+
+        .search-textarea {
+            width: 100%;
+            min-height: 80px;
+            border: none;
+            outline: none;
+            resize: vertical;
+            font-size: 16px;
+            line-height: 1.5;
+        }
+
+        .search-actions {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid #f0f0f0;
+        }
+
+        .search-tips {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .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;
+            gap: 6px;
+        }
+
+        .search-btn:hover {
+            background: var(--primary-hover);
+            transform: translateY(-1px);
+        }
+
+        .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;
+        }
+
+        .category-count {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .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;
+        }
+
+        .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-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);
+        }
+
+        .template-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 12px;
+        }
+
+        .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;
+        }
+
+        .template-desc {
+            font-size: 14px;
+            color: var(--text-secondary);
+            line-height: 1.5;
+            margin-bottom: 16px;
+        }
+
+        .template-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .template-actions {
+            display: flex;
+            gap: 8px;
+        }
+
+        .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;
+        }
+
+        .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);
+        }
+
+        .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;
+        }
+
+        .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;
+        }
+
+        .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;
+        }
+
+        .detail-btn.primary {
+            background: var(--primary-color);
+            color: white;
+            border: none;
+        }
+
+        .detail-btn.secondary {
+            background: white;
+            color: var(--text-color);
+            border: 1px solid #e5e7eb;
+        }
+
+        .detail-content {
+            background: white;
+            border-radius: 12px;
+            padding: 32px;
+            border: 1px solid var(--border-color);
+        }
+
+        .content-section {
+            margin-bottom: 32px;
+        }
+
+        .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);
+        }
+
+        .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);
+        }
+
+        .list-view .template-card {
+            display: flex;
+            align-items: center;
+            padding: 16px 20px;
+        }
+
+        .list-view .template-header {
+            flex: 1;
+            margin-bottom: 0;
+        }
+
+        .list-view .template-desc {
+            margin-bottom: 0;
+            margin-left: 16px;
+            flex: 2;
+        }
+
+        .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;
+        }
+    </style>
+</head>
+<body>
+    <!-- 搜索页面 -->
+    <div class="page-container">
+        <div class="window-controls">
+            <div class="window-control control-close"></div>
+            <div class="window-control control-minimize"></div>
+            <div class="window-control control-maximize"></div>
+        </div>
+        
+        <div class="layout-container">
+            <div class="sidebar">
+                <div class="sidebar-header">
+                    <div class="logo">
+                        <i class="ri-file-search-line"></i>
+                        <span>合同模板库</span>
+                    </div>
+                </div>
+                <div class="sidebar-menu">
+                    <div class="menu-item active">
+                        <a href="#"><i class="ri-search-line"></i>智能搜索</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-folder-line"></i>模板分类</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-star-line"></i>收藏模板</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-history-line"></i>使用历史</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-upload-cloud-line"></i>上传模板</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-settings-3-line"></i>系统设置</a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="main-content">
+                <div class="top-nav">
+                    <div class="breadcrumb">
+                        <span class="breadcrumb-item">首页</span>
+                        <span class="breadcrumb-item">智能搜索</span>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <span class="text-sm text-gray-500">欢迎，张经理</span>
+                        <i class="ri-user-line text-gray-400"></i>
+                    </div>
+                </div>
+                
+                <div class="content-area">
+                    <div class="search-hero">
+                        <h1 class="search-title">AI智能合同模板搜索</h1>
+                        <p class="search-subtitle">输入合同名称、用途或关键内容，快速找到最适合的模板</p>
+                        
+                        <div class="search-container">
+                            <div class="search-box">
+                                <textarea 
+                                    class="search-textarea" 
+                                    placeholder="例如：销售合同、设备采购协议、包含违约责任条款的合同..."
+                                ></textarea>
+                                <div class="search-actions">
+                                    <div class="search-tips">
+                                        <i class="ri-lightbulb-line mr-1"></i>
+                                        支持自然语言描述，AI将为您匹配最相关的模板
+                                    </div>
+                                    <button class="search-btn">
+                                        <i class="ri-search-line"></i>
+                                        智能搜索
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="quick-categories">
+                        <div class="category-card">
+                            <div class="category-icon">
+                                <i class="ri-handshake-line"></i>
+                            </div>
+                            <div class="category-title">销售合同</div>
+                            <div class="category-count">128个模板</div>
+                        </div>
+                        <div class="category-card">
+                            <div class="category-icon">
+                                <i class="ri-shopping-cart-line"></i>
+                            </div>
+                            <div class="category-title">采购合同</div>
+                            <div class="category-count">96个模板</div>
+                        </div>
+                        <div class="category-card">
+                            <div class="category-icon">
+                                <i class="ri-truck-line"></i>
+                            </div>
+                            <div class="category-title">物流运输</div>
+                            <div class="category-count">64个模板</div>
+                        </div>
+                        <div class="category-card">
+                            <div class="category-icon">
+                                <i class="ri-user-settings-line"></i>
+                            </div>
+                            <div class="category-title">人事劳务</div>
+                            <div class="category-count">52个模板</div>
+                        </div>
+                        <div class="category-card">
+                            <div class="category-icon">
+                                <i class="ri-building-line"></i>
+                            </div>
+                            <div class="category-title">租赁合同</div>
+                            <div class="category-count">38个模板</div>
+                        </div>
+                        <div class="category-card">
+                            <div class="category-icon">
+                                <i class="ri-shield-check-line"></i>
+                            </div>
+                            <div class="category-title">保密协议</div>
+                            <div class="category-count">24个模板</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 搜索结果页面 -->
+    <div class="page-container">
+        <div class="window-controls">
+            <div class="window-control control-close"></div>
+            <div class="window-control control-minimize"></div>
+            <div class="window-control control-maximize"></div>
+        </div>
+        
+        <div class="layout-container">
+            <div class="sidebar">
+                <div class="sidebar-header">
+                    <div class="logo">
+                        <i class="ri-file-search-line"></i>
+                        <span>合同模板库</span>
+                    </div>
+                </div>
+                <div class="sidebar-menu">
+                    <div class="menu-item active">
+                        <a href="#"><i class="ri-search-line"></i>智能搜索</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-folder-line"></i>模板分类</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-star-line"></i>收藏模板</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-history-line"></i>使用历史</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-upload-cloud-line"></i>上传模板</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-settings-3-line"></i>系统设置</a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="main-content">
+                <div class="top-nav">
+                    <div class="breadcrumb">
+                        <span class="breadcrumb-item">首页</span>
+                        <span class="breadcrumb-item">搜索结果</span>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <div class="view-toggle">
+                            <button class="view-btn active"><i class="ri-grid-line"></i></button>
+                            <button class="view-btn"><i class="ri-list-check"></i></button>
+                        </div>
+                        <span class="text-sm text-gray-500">欢迎，张经理</span>
+                        <i class="ri-user-line text-gray-400"></i>
+                    </div>
+                </div>
+                
+                <div class="content-area">
+                    <!-- 搜索框 -->
+                    <div class="search-container mb-6">
+                        <div class="search-box">
+                            <textarea 
+                                class="search-textarea" 
+                                style="min-height: 60px;"
+                            >销售合同 包含违约责任条款</textarea>
+                            <div class="search-actions">
+                                <div class="search-tips">
+                                    <i class="ri-time-line mr-1"></i>
+                                    搜索用时 0.3秒
+                                </div>
+                                <button class="search-btn">
+                                    <i class="ri-search-line"></i>
+                                    重新搜索
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="result-header">
+                        <div class="result-info">
+                            为您找到 <span class="result-count">24</span> 个相关模板
+                        </div>
+                        <div class="flex items-center gap-4">
+                            <select class="px-3 py-2 border border-gray-200 rounded-lg text-sm">
+                                <option>相关度排序</option>
+                                <option>最新更新</option>
+                                <option>使用频率</option>
+                                <option>评分最高</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="filter-tabs">
+                        <div class="filter-tab active">全部 (24)</div>
+                        <div class="filter-tab">销售合同 (18)</div>
+                        <div class="filter-tab">采购合同 (4)</div>
+                        <div class="filter-tab">服务合同 (2)</div>
+                    </div>
+                    
+                    <div class="template-grid">
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">销售合同</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.8</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">烟草产品销售合同标准模板</h3>
+                            <p class="template-desc">适用于烟草产品销售业务，包含完整的违约责任条款、付款方式、交付条件等核心要素，符合行业规范要求。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-25</span>
+                                <span>使用次数：1,248</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">销售合同</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.6</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">零售商销售协议模板</h3>
+                            <p class="template-desc">专为零售商设计的销售协议，详细规定了违约责任、退换货政策、结算方式等条款。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-20</span>
+                                <span>使用次数：856</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">采购合同</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.7</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">设备采购合同（含违约条款）</h3>
+                            <p class="template-desc">设备采购专用合同模板，包含详细的违约责任条款、质量保证、验收标准等内容。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-18</span>
+                                <span>使用次数：642</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">销售合同</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.5</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">批发销售合同模板</h3>
+                            <p class="template-desc">适用于大宗批发业务的销售合同，强化了违约责任条款和风险控制措施。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-15</span>
+                                <span>使用次数：534</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">服务合同</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.4</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">技术服务合同（标准版）</h3>
+                            <p class="template-desc">技术服务类合同模板，包含服务标准、违约责任、知识产权保护等关键条款。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-12</span>
+                                <span>使用次数：423</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">销售合同</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.3</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">区域代理销售合同</h3>
+                            <p class="template-desc">区域代理商专用销售合同，明确代理权限、销售目标、违约责任等核心条款。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-10</span>
+                                <span>使用次数：312</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="pagination">
+                        <button class="page-btn"><i class="ri-arrow-left-s-line"></i></button>
+                        <button class="page-btn active">1</button>
+                        <button class="page-btn">2</button>
+                        <button class="page-btn">3</button>
+                        <button class="page-btn">4</button>
+                        <button class="page-btn"><i class="ri-arrow-right-s-line"></i></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 模板列表页面 -->
+    <div class="page-container">
+        <div class="window-controls">
+            <div class="window-control control-close"></div>
+            <div class="window-control control-minimize"></div>
+            <div class="window-control control-maximize"></div>
+        </div>
+        
+        <div class="layout-container">
+            <div class="sidebar">
+                <div class="sidebar-header">
+                    <div class="logo">
+                        <i class="ri-file-search-line"></i>
+                        <span>合同模板库</span>
+                    </div>
+                </div>
+                <div class="sidebar-menu">
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-search-line"></i>智能搜索</a>
+                    </div>
+                    <div class="menu-item active">
+                        <a href="#"><i class="ri-folder-line"></i>模板分类</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-star-line"></i>收藏模板</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-history-line"></i>使用历史</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-upload-cloud-line"></i>上传模板</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-settings-3-line"></i>系统设置</a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="main-content">
+                <div class="top-nav">
+                    <div class="breadcrumb">
+                        <span class="breadcrumb-item">首页</span>
+                        <span class="breadcrumb-item">模板分类</span>
+                        <span class="breadcrumb-item">销售合同</span>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <div class="view-toggle">
+                            <button class="view-btn active"><i class="ri-grid-line"></i></button>
+                            <button class="view-btn"><i class="ri-list-check"></i></button>
+                        </div>
+                        <span class="text-sm text-gray-500">欢迎，张经理</span>
+                        <i class="ri-user-line text-gray-400"></i>
+                    </div>
+                </div>
+                
+                <div class="content-area">
+                    <div class="result-header">
+                        <div>
+                            <h2 class="text-2xl font-semibold mb-2">销售合同模板</h2>
+                            <div class="result-info">
+                                共 <span class="result-count">128</span> 个模板
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-4">
+                            <select class="px-3 py-2 border border-gray-200 rounded-lg text-sm">
+                                <option>最新更新</option>
+                                <option>使用频率</option>
+                                <option>评分最高</option>
+                                <option>名称排序</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="filter-tabs">
+                        <div class="filter-tab active">全部 (128)</div>
+                        <div class="filter-tab">标准版 (86)</div>
+                        <div class="filter-tab">简化版 (24)</div>
+                        <div class="filter-tab">专业版 (18)</div>
+                    </div>
+                    
+                    <div class="template-grid">
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">标准版</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.9</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">烟草产品销售合同（2023版）</h3>
+                            <p class="template-desc">最新版本的烟草产品销售合同模板，包含完整的法律条款、风险控制措施和行业标准要求。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-25</span>
+                                <span>使用次数：2,156</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-fill text-yellow-500"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">标准版</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.8</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">零售商销售协议模板</h3>
+                            <p class="template-desc">专为零售商设计的销售协议，涵盖商品配送、结算方式、退换货政策等关键条款。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-20</span>
+                                <span>使用次数：1,834</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">专业版</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.7</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">大客户销售合同模板</h3>
+                            <p class="template-desc">适用于大客户的专业销售合同，包含定制化条款、特殊优惠政策和长期合作框架。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-18</span>
+                                <span>使用次数：1,245</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">简化版</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.6</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">小额销售合同（简化版）</h3>
+                            <p class="template-desc">适用于小额交易的简化版销售合同，条款精简但保证法律效力。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-15</span>
+                                <span>使用次数：956</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">标准版</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.5</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">区域代理销售合同</h3>
+                            <p class="template-desc">区域代理商专用销售合同，明确代理权限、销售目标和考核标准。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-12</span>
+                                <span>使用次数：743</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                        
+                        <div class="template-card">
+                            <div class="template-header">
+                                <div class="template-type">标准版</div>
+                                <div class="flex items-center gap-1 text-yellow-500">
+                                    <i class="ri-star-fill text-xs"></i>
+                                    <span class="text-xs">4.4</span>
+                                </div>
+                            </div>
+                            <h3 class="template-title">批发销售合同模板</h3>
+                            <p class="template-desc">适用于大宗批发业务的销售合同，包含数量折扣、物流配送等专业条款。</p>
+                            <div class="template-meta">
+                                <span>更新时间：2023-10-10</span>
+                                <span>使用次数：612</span>
+                            </div>
+                            <div class="template-actions mt-3">
+                                <button class="action-btn primary">立即使用</button>
+                                <button class="action-btn">预览</button>
+                                <button class="action-btn"><i class="ri-star-line"></i></button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="pagination">
+                        <button class="page-btn"><i class="ri-arrow-left-s-line"></i></button>
+                        <button class="page-btn active">1</button>
+                        <button class="page-btn">2</button>
+                        <button class="page-btn">3</button>
+                        <button class="page-btn">4</button>
+                        <button class="page-btn">5</button>
+                        <button class="page-btn">6</button>
+                        <button class="page-btn"><i class="ri-arrow-right-s-line"></i></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 模板详情页面 -->
+    <div class="page-container">
+        <div class="window-controls">
+            <div class="window-control control-close"></div>
+            <div class="window-control control-minimize"></div>
+            <div class="window-control control-maximize"></div>
+        </div>
+        
+        <div class="layout-container">
+            <div class="sidebar">
+                <div class="sidebar-header">
+                    <div class="logo">
+                        <i class="ri-file-search-line"></i>
+                        <span>合同模板库</span>
+                    </div>
+                </div>
+                <div class="sidebar-menu">
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-search-line"></i>智能搜索</a>
+                    </div>
+                    <div class="menu-item active">
+                        <a href="#"><i class="ri-folder-line"></i>模板分类</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-star-line"></i>收藏模板</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-history-line"></i>使用历史</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-upload-cloud-line"></i>上传模板</a>
+                    </div>
+                    <div class="menu-item">
+                        <a href="#"><i class="ri-settings-3-line"></i>系统设置</a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="main-content">
+                <div class="top-nav">
+                    <div class="breadcrumb">
+                        <span class="breadcrumb-item">首页</span>
+                        <span class="breadcrumb-item">模板分类</span>
+                        <span class="breadcrumb-item">销售合同</span>
+                        <span class="breadcrumb-item">烟草产品销售合同</span>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <button class="px-3 py-1 text-sm border border-gray-200 rounded-lg hover:border-primary-color">
+                            <i class="ri-arrow-left-line mr-1"></i>返回列表
+                        </button>
+                        <span class="text-sm text-gray-500">欢迎，张经理</span>
+                        <i class="ri-user-line text-gray-400"></i>
+                    </div>
+                </div>
+                
+                <div class="content-area">
+                    <div class="template-detail">
+                        <div class="detail-header">
+                            <div class="flex justify-between items-start mb-4">
+                                <div class="template-type">销售合同 · 标准版</div>
+                                <div class="flex items-center gap-2">
+                                    <div class="flex items-center gap-1 text-yellow-500">
+                                        <i class="ri-star-fill"></i>
+                                        <i class="ri-star-fill"></i>
+                                        <i class="ri-star-fill"></i>
+                                        <i class="ri-star-fill"></i>
+                                        <i class="ri-star-fill"></i>
+                                        <span class="text-sm ml-1">4.9 (156评价)</span>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <h1 class="detail-title">烟草产品销售合同（2023版）</h1>
+                            
+                            <div class="detail-meta">
+                                <div class="meta-item">
+                                    <span class="meta-label">模板编号：</span>
+                                    <span>XS-2023-001</span>
+                                </div>
+                                <div class="meta-item">
+                                    <span class="meta-label">更新时间：</span>
+                                    <span>2023年10月25日</span>
+                                </div>
+                                <div class="meta-item">
+                                    <span class="meta-label">使用次数：</span>
+                                    <span>2,156次</span>
+                                </div>
+                                <div class="meta-item">
+                                    <span class="meta-label">文件大小：</span>
+                                    <span>245KB</span>
+                                </div>
+                                <div class="meta-item">
+                                    <span class="meta-label">适用范围：</span>
+                                    <span>烟草产品销售</span>
+                                </div>
+                                <div class="meta-item">
+                                    <span class="meta-label">法律依据：</span>
+                                    <span>《合同法》《烟草专卖法》</span>
+                                </div>
+                            </div>
+                            
+                            <div class="detail-actions">
+                                <button class="detail-btn primary">
+                                    <i class="ri-download-line"></i>
+                                    立即下载使用
+                                </button>
+                                <button class="detail-btn secondary">
+                                    <i class="ri-eye-line"></i>
+                                    在线预览
+                                </button>
+                                <button class="detail-btn secondary">
+                                    <i class="ri-star-line"></i>
+                                    收藏模板
+                                </button>
+                                <button class="detail-btn secondary">
+                                    <i class="ri-share-line"></i>
+                                    分享
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div class="detail-content">
+                            <div class="content-section">
+                                <h3 class="section-title">模板简介</h3>
+                                <p class="text-gray-600 leading-relaxed">
+                                    本模板是专为烟草行业设计的标准销售合同，严格遵循《烟草专卖法》等相关法律法规，
+                                    涵盖了烟草产品销售过程中的各个关键环节。模板包含完整的合同条款结构，
+                                    包括合同主体、标的物、价格条款、交付方式、付款条件、违约责任、争议解决等核心内容。
+                                    适用于各类烟草产品的销售业务，能够有效保护交易双方的合法权益。
+                                </p>
+                            </div>
+                            
+                            <div class="content-section">
+                                <h3 class="section-title">主要特点</h3>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div class="bg-green-50 p-4 rounded-lg border border-green-200">
+                                        <div class="flex items-center mb-2">
+                                            <i class="ri-shield-check-line text-green-600 mr-2"></i>
+                                            <span class="font-medium">法律合规</span>
+                                        </div>
+                                        <p class="text-sm text-gray-600">严格遵循烟草行业法律法规，确保合同条款合法有效</p>
+                                    </div>
+                                    <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
+                                        <div class="flex items-center mb-2">
+                                            <i class="ri-settings-3-line text-blue-600 mr-2"></i>
+                                            <span class="font-medium">条款完整</span>
+                                        </div>
+                                        <p class="text-sm text-gray-600">涵盖销售全流程，条款结构完整，逻辑清晰</p>
+                                    </div>
+                                    <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
+                                        <div class="flex items-center mb-2">
+                                            <i class="ri-edit-line text-purple-600 mr-2"></i>
+                                            <span class="font-medium">易于定制</span>
+                                        </div>
+                                        <p class="text-sm text-gray-600">模板化设计，可根据具体业务需求灵活调整</p>
+                                    </div>
+                                    <div class="bg-orange-50 p-4 rounded-lg border border-orange-200">
+                                        <div class="flex items-center mb-2">
+                                            <i class="ri-award-line text-orange-600 mr-2"></i>
+                                            <span class="font-medium">行业标准</span>
+                                        </div>
+                                        <p class="text-sm text-gray-600">符合烟草行业标准，被广泛使用和认可</p>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="content-section">
+                                <h3 class="section-title">合同条款结构</h3>
+                                <div class="space-y-3">
+                                    <div class="flex items-center p-3 bg-gray-50 rounded-lg">
+                                        <div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">1</div>
+                                        <div>
+                                            <div class="font-medium">合同主体</div>
+                                            <div class="text-sm text-gray-600">甲乙双方基本信息、资质证明</div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center p-3 bg-gray-50 rounded-lg">
+                                        <div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">2</div>
+                                        <div>
+                                            <div class="font-medium">标的物条款</div>
+                                            <div class="text-sm text-gray-600">产品名称、规格、数量、质量标准</div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center p-3 bg-gray-50 rounded-lg">
+                                        <div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">3</div>
+                                        <div>
+                                            <div class="font-medium">价格与付款</div>
+                                            <div class="text-sm text-gray-600">价格条款、付款方式、结算周期</div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center p-3 bg-gray-50 rounded-lg">
+                                        <div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">4</div>
+                                        <div>
+                                            <div class="font-medium">交付与验收</div>
+                                            <div class="text-sm text-gray-600">交付时间、地点、方式、验收标准</div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center p-3 bg-gray-50 rounded-lg">
+                                        <div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">5</div>
+                                        <div>
+                                            <div class="font-medium">违约责任</div>
+                                            <div class="text-sm text-gray-600">违约情形、责任承担、损失赔偿</div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center p-3 bg-gray-50 rounded-lg">
+                                        <div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">6</div>
+                                        <div>
+                                            <div class="font-medium">争议解决</div>
+                                            <div class="text-sm text-gray-600">争议处理方式、管辖法院</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="content-section">
+                                <h3 class="section-title">合同预览</h3>
+                                <div class="content-preview">
+                                    <div class="text-center mb-4">
+                                        <h4 class="text-lg font-bold">烟草产品销售合同</h4>
+                                        <p class="text-sm text-gray-600 mt-1">合同编号：_______________</p>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <p><strong>甲方（销售方）：</strong>_________________________</p>
+                                        <p><strong>地址：</strong>_____________________________________</p>
+                                        <p><strong>法定代表人：</strong>_______________  <strong>联系电话：</strong>_______________</p>
+                                        <p><strong>烟草专卖许可证号：</strong>_________________________</p>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <p><strong>乙方（采购方）：</strong>_________________________</p>
+                                        <p><strong>地址：</strong>_____________________________________</p>
+                                        <p><strong>法定代表人：</strong>_______________  <strong>联系电话：</strong>_______________</p>
+                                        <p><strong>烟草专卖零售许可证号：</strong>_____________________</p>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <p>根据《中华人民共和国合同法》、《中华人民共和国烟草专卖法》等相关法律法规，
+                                        甲乙双方在平等、自愿、公平、诚信的基础上，就烟草产品销售事宜达成如下协议：</p>
+                                    </div>
+                                    
+                                    <div class="mb-4">
+                                        <p><strong>第一条 标的物</strong></p>
+                                        <p>1.1 产品名称：_________________________</p>
+                                        <p>1.2 产品规格：_________________________</p>
+                                        <p>1.3 产品数量：_________________________</p>
+                                        <p>1.4 产品单价：_________________________</p>
+                                        <p>1.5 合同总金额：_______________________</p>
+                                    </div>
+                                    
+                                    <div class="text-center text-gray-500 text-sm">
+                                        ... 更多条款内容请下载完整模板查看 ...
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="content-section">
+                                <h3 class="section-title">用户评价</h3>
+                                <div class="space-y-4">
+                                    <div class="border border-gray-200 rounded-lg p-4">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <div class="flex items-center gap-2">
+                                                <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium">李</div>
+                                                <span class="font-medium">李经理</span>
+                                                <div class="flex items-center gap-1 text-yellow-500">
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                </div>
+                                            </div>
+                                            <span class="text-sm text-gray-500">2023-10-20</span>
+                                        </div>
+                                        <p class="text-gray-600">模板非常专业，条款完整，符合行业规范。我们公司一直在使用这个模板，效果很好。</p>
+                                    </div>
+                                    
+                                    <div class="border border-gray-200 rounded-lg p-4">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <div class="flex items-center gap-2">
+                                                <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center text-sm font-medium">王</div>
+                                                <span class="font-medium">王总</span>
+                                                <div class="flex items-center gap-1 text-yellow-500">
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-line text-xs"></i>
+                                                </div>
+                                            </div>
+                                            <span class="text-sm text-gray-500">2023-10-18</span>
+                                        </div>
+                                        <p class="text-gray-600">模板结构清晰，易于理解和使用。特别是违约责任条款写得很详细，对我们很有帮助。</p>
+                                    </div>
+                                    
+                                    <div class="border border-gray-200 rounded-lg p-4">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <div class="flex items-center gap-2">
+                                                <div class="w-8 h-8 bg-purple-500 text-white rounded-full flex items-center justify-center text-sm font-medium">张</div>
+                                                <span class="font-medium">张主任</span>
+                                                <div class="flex items-center gap-1 text-yellow-500">
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                    <i class="ri-star-fill text-xs"></i>
+                                                </div>
+                                            </div>
+                                            <span class="text-sm text-gray-500">2023-10-15</span>
+                                        </div>
+                                        <p class="text-gray-600">非常实用的模板，法律条款严谨，符合最新的法规要求。推荐给同行使用。</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // 搜索功能
+            const searchButtons = document.querySelectorAll('.search-btn');
+            searchButtons.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const textarea = this.closest('.search-box').querySelector('.search-textarea');
+                    const query = textarea.value.trim();
+                    if (query) {
+                        console.log('搜索查询:', query);
+                        // 这里可以添加实际的搜索逻辑
+                    }
+                });
+            });
+
+            // 分类卡片点击
+            const categoryCards = document.querySelectorAll('.category-card');
+            categoryCards.forEach(card => {
+                card.addEventListener('click', function() {
+                    const title = this.querySelector('.category-title').textContent;
+                    console.log('选择分类:', title);
+                });
+            });
+
+            // 模板卡片操作
+            const templateCards = document.querySelectorAll('.template-card');
+            templateCards.forEach(card => {
+                card.addEventListener('click', function(e) {
+                    if (!e.target.closest('button')) {
+                        const title = this.querySelector('.template-title').textContent;
+                        console.log('查看模板详情:', title);
+                    }
+                });
+            });
+
+            // 按钮点击事件
+            const actionButtons = document.querySelectorAll('.action-btn, .detail-btn');
+            actionButtons.forEach(btn => {
+                btn.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    const action = this.textContent.trim();
+                    console.log('执行操作:', action);
+                });
+            });
+
+            // 筛选标签
+            const filterTabs = document.querySelectorAll('.filter-tab');
+            filterTabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    filterTabs.forEach(t => t.classList.remove('active'));
+                    this.classList.add('active');
+                    console.log('筛选:', this.textContent);
+                });
+            });
+
+            // 视图切换
+            const viewButtons = document.querySelectorAll('.view-btn');
+            viewButtons.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    viewButtons.forEach(b => b.classList.remove('active'));
+                    this.classList.add('active');
+                    
+                    const isListView = this.querySelector('.ri-list-check');
+                    const grid = document.querySelector('.template-grid');
+                    if (grid) {
+                        if (isListView) {
+                            grid.classList.add('list-view');
+                            grid.style.display = 'block';
+                        } else {
+                            grid.classList.remove('list-view');
+                            grid.style.display = 'grid';
+                        }
+                    }
+                });
+            });
+
+            // 分页
+            const pageButtons = document.querySelectorAll('.page-btn');
+            pageButtons.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    if (!this.querySelector('i')) {
+                        pageButtons.forEach(b => b.classList.remove('active'));
+                        this.classList.add('active');
+                    }
+                });
+            });
+
+            // 收藏功能
+            const starButtons = document.querySelectorAll('.action-btn i.ri-star-line, .action-btn i.ri-star-fill');
+            starButtons.forEach(star => {
+                star.closest('button').addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    const icon = this.querySelector('i');
+                    if (icon.classList.contains('ri-star-line')) {
+                        icon.classList.remove('ri-star-line');
+                        icon.classList.add('ri-star-fill');
+                        icon.style.color = '#faad14';
+                    } else {
+                        icon.classList.remove('ri-star-fill');
+                        icon.classList.add('ri-star-line');
+                        icon.style.color = '';
+                    }
+                });
+            });
+
+            // 搜索框自动调整高度
+            const textareas = document.querySelectorAll('.search-textarea');
+            textareas.forEach(textarea => {
+                textarea.addEventListener('input', function() {
+                    this.style.height = 'auto';
+                    this.style.height = Math.max(80, this.scrollHeight) + 'px';
+                });
+            });
+
+            // 模拟加载动画
+            setTimeout(() => {
+                document.body.style.opacity = '1';
+            }, 100);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file