first-update

easy-dataset-main/app/projects/[projectId]/multi-turn/components/SearchBar.js

@@ -0,0 +1,92 @@
+'use client';
+
+import { Box, Paper, Button, IconButton, InputBase, CircularProgress } from '@mui/material';
+import {
+  Search as SearchIcon,
+  FilterList as FilterIcon,
+  Download as DownloadIcon,
+  Delete as DeleteIcon
+} from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * 搜索栏组件
+ * @param {string} searchKeyword - 搜索关键词
+ * @param {function} onSearchChange - 搜索关键词变化回调
+ * @param {function} onSearch - 搜索回调
+ * @param {function} onFilterClick - 筛选按钮点击回调
+ * @param {function} onExportClick - 导出按钮点击回调
+ * @param {boolean} exportLoading - 导出加载状态
+ * @param {number} selectedCount - 选中的项目数量
+ * @param {function} onBatchDelete - 批量删除回调
+ * @param {boolean} batchDeleteLoading - 批量删除加载状态
+ */
+const SearchBar = ({
+  searchKeyword,
+  onSearchChange,
+  onSearch,
+  onFilterClick,
+  onExportClick,
+  exportLoading = false,
+  selectedCount = 0,
+  onBatchDelete,
+  batchDeleteLoading = false
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, justifyContent: 'space-between' }}>
+      <Box sx={{ display: 'flex', gap: 2 }}>
+        <Paper
+          component="form"
+          sx={{
+            p: '2px 4px',
+            display: 'flex',
+            alignItems: 'center',
+            width: 400,
+            borderRadius: 2
+          }}
+        >
+          <IconButton sx={{ p: '10px' }} aria-label="search">
+            <SearchIcon />
+          </IconButton>
+          <InputBase
+            sx={{ ml: 1, flex: 1 }}
+            placeholder={t('datasets.searchPlaceholder')}
+            value={searchKeyword}
+            onChange={e => onSearchChange(e.target.value)}
+            onKeyPress={e => e.key === 'Enter' && onSearch()}
+          />
+        </Paper>
+        <Button variant="outlined" startIcon={<FilterIcon />} onClick={onFilterClick} sx={{ borderRadius: 2 }}>
+          {t('datasets.moreFilters')}
+        </Button>
+      </Box>
+      <Box sx={{ display: 'flex', gap: 2 }}>
+        {selectedCount > 0 && (
+          <Button
+            variant="outlined"
+            color="error"
+            startIcon={batchDeleteLoading ? <CircularProgress size={16} /> : <DeleteIcon />}
+            onClick={onBatchDelete}
+            disabled={batchDeleteLoading}
+            sx={{ borderRadius: 2 }}
+          >
+            {batchDeleteLoading ? t('datasets.deleting') : `${t('datasets.batchDelete')} (${selectedCount})`}
+          </Button>
+        )}
+        <Button
+          variant="outlined"
+          startIcon={exportLoading ? <CircularProgress size={16} /> : <DownloadIcon />}
+          onClick={onExportClick}
+          disabled={exportLoading}
+          sx={{ borderRadius: 2 }}
+        >
+          {exportLoading ? t('datasets.exporting') : t('exportDialog.export')}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default SearchBar;