File size: 4,481 Bytes
9eb1c55 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
'use client';
import { useState } from 'react';
export default function KnowledgeFilters() {
const [activeCategory, setActiveCategory] = useState('all');
const [activeStatus, setActiveStatus] = useState('all');
const [searchTerm, setSearchTerm] = useState('');
const [sortBy, setSortBy] = useState('lastUpdated');
const categories = [
{ key: 'all', label: '全部分类', count: 6 },
{ key: 'general', label: '通用', count: 1 },
{ key: 'tech', label: '技术', count: 1 },
{ key: 'product', label: '产品', count: 1 },
{ key: 'service', label: '客服', count: 1 },
{ key: 'legal', label: '法务', count: 1 },
{ key: 'sales', label: '销售', count: 1 }
];
const statuses = [
{ key: 'all', label: '全部状态' },
{ key: 'active', label: '运行中' },
{ key: 'inactive', label: '已停用' },
{ key: 'updating', label: '更新中' }
];
const sortOptions = [
{ key: 'lastUpdated', label: '最后更新' },
{ key: 'name', label: '名称' },
{ key: 'items', label: '内容数量' },
{ key: 'usage', label: '使用次数' },
{ key: 'size', label: '文件大小' }
];
return (
<div className="bg-white border border-gray-200 rounded-lg p-6 mb-6">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
{/* 搜索 */}
<div className="lg:col-span-1">
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<div className="w-4 h-4 flex items-center justify-center">
<i className="ri-search-line text-gray-400"></i>
</div>
</div>
<input
type="text"
placeholder="搜索知识库..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
/>
</div>
</div>
{/* 分类筛选 */}
<div className="lg:col-span-1">
<select
value={activeCategory}
onChange={(e) => setActiveCategory(e.target.value)}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white pr-8"
>
{categories.map((category) => (
<option key={category.key} value={category.key}>
{category.label} ({category.count})
</option>
))}
</select>
</div>
{/* 状态筛选 */}
<div className="lg:col-span-1">
<select
value={activeStatus}
onChange={(e) => setActiveStatus(e.target.value)}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white pr-8"
>
{statuses.map((status) => (
<option key={status.key} value={status.key}>
{status.label}
</option>
))}
</select>
</div>
{/* 排序 */}
<div className="lg:col-span-1">
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white pr-8"
>
{sortOptions.map((option) => (
<option key={option.key} value={option.key}>
按{option.label}排序
</option>
))}
</select>
</div>
</div>
{/* 快速标签 */}
<div className="mt-4 pt-4 border-t border-gray-200">
<div className="flex items-center space-x-2">
<span className="text-sm text-gray-600">快速筛选：</span>
<div className="flex flex-wrap gap-2">
{['默认知识库', '高使用率', '最近更新', '大容量', '技术相关'].map((tag) => (
<button
key={tag}
className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-gray-200 transition-colors cursor-pointer whitespace-nowrap"
>
{tag}
</button>
))}
</div>
</div>
</div>
</div>
);
} |