合同初步可以访问

2025-05-29 17:42:35 +08:00
parent 9200654c35
commit b92d87a3b4
16 changed files with 2239 additions and 0 deletions
@@ -0,0 +1,51 @@
+interface SearchResultHeaderProps {
+  total: number;
+  viewMode: 'grid' | 'list';
+  onViewModeChange: (mode: 'grid' | 'list') => void;
+  sortBy: string;
+  onSortChange: (sort: string) => void;
+}
+
+export function SearchResultHeader({
+  total,
+  viewMode,
+  onViewModeChange,
+  sortBy,
+  onSortChange
+}: SearchResultHeaderProps) {
+  return (
+    <div className="result-header">
+      <div className="result-info">
+        为您找到 <span className="result-count">{total}</span> 个相关模板
+      </div>
+      <div className="flex items-center gap-4">
+        <div className="view-toggle">
+          <button 
+            className={`view-btn ${viewMode === 'grid' ? 'active' : ''}`}
+            onClick={() => onViewModeChange('grid')}
+            aria-label="网格视图"
+          >
+            <i className="ri-grid-line"></i>
+          </button>
+          <button 
+            className={`view-btn ${viewMode === 'list' ? 'active' : ''}`}
+            onClick={() => onViewModeChange('list')}
+            aria-label="列表视图"
+          >
+            <i className="ri-list-check"></i>
+          </button>
+        </div>
+        <select 
+          className="px-3 py-2 border border-gray-200 rounded-lg text-sm"
+          value={sortBy}
+          onChange={(e) => onSortChange(e.target.value)}
+        >
+          <option value="relevance">相关度排序</option>
+          <option value="newest">最新更新</option>
+          <option value="popular">使用频率</option>
+          <option value="rating">评分最高</option>
+        </select>
+      </div>
+    </div>
+  );
+}