Skip to content

Commit 6300123

Browse files
Jasonxia007Jasonxia007
committed
🐛 Fix bug: Some knowledgebase upload components misbehave when dragging file onto them
🎨 Fix lint warning in UploadArea.tsx, UploadAreaUI.tsx and DocumentListLayout.tsx, using a conciser tailwind style declaration
1 parent c64dd72 commit 6300123

File tree

3 files changed

+35
-46
lines changed

3 files changed

+35
-46
lines changed

‎frontend/app/[locale]/setup/knowledgeBaseSetup/components/UploadArea.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,10 +179,10 @@ const UploadArea = forwardRef<UploadAreaRef, UploadAreaProps>(({
179179
// 触发文件选择回调, 传递所有文件
180180
const files = newFileList
181181
.map(file => file.originFileObj)
182-
.filter((file): file is File => !!file);
182+
.filter((file): file is RcFile => !!file);
183183

184184
if (files.length > 0) {
185-
onFileSelect(files);
185+
onFileSelect(files as unknown as File[]);
186186
}
187187
}, [indexName, onFileSelect, isCreatingMode, newKnowledgeBaseName, onUpload]);
188188

‎frontend/app/[locale]/setup/knowledgeBaseSetup/components/UploadAreaUI.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const UploadAreaUI: React.FC<UploadAreaUIProps> = ({
6060
return (
6161
<div className="p-3 bg-gray-50 border-t border-gray-200 h-[30%]">
6262
<div className="h-full border-2 border-dashed border-gray-200 rounded-md flex flex-col items-center justify-center bg-white">
63-
<WarningFilled style={{ fontSize: '32px', color: '#faad14', marginBottom: '16px' }} />
63+
<WarningFilled className="text-[32px] text-yellow-500 mb-4" />
6464
<p className="text-gray-600 text-base mb-2">{t('knowledgeBase.status.notReady')}</p>
6565
<p className="text-gray-400 text-sm">{t('common.retryLater')}</p>
6666
</div>
@@ -71,7 +71,7 @@ const UploadAreaUI: React.FC<UploadAreaUIProps> = ({
7171
// 禁用状态UI
7272
if (disabled) {
7373
return (
74-
<div className="p-3 bg-gray-50 border-t border-gray-200 opacity-50 cursor-not-allowed" style={{ height: componentHeight }}>
74+
<div className={`p-3 bg-gray-50 border-t border-gray-200 opacity-50 cursor-not-allowed h-[${componentHeight}]`}>
7575
<div className="border-2 border-dashed border-gray-300 bg-white rounded-md p-4 text-center flex flex-col items-center justify-center h-full">
7676
<div className="mb-0.5 text-blue-500 text-lg">📄</div>
7777
<p className="mb-0.5 text-gray-700 text-xs font-medium">
@@ -108,10 +108,9 @@ const UploadAreaUI: React.FC<UploadAreaUIProps> = ({
108108
// Model mismatch status UI
109109
if (modelMismatch) {
110110
return (
111-
<div className="p-3 bg-gray-50 border-t border-gray-200 h-[30%] flex items-center justify-center" style={{ minHeight: 120 }}>
111+
<div className="p-3 bg-gray-50 border-t border-gray-200 h-[30%] flex items-center justify-center min-h-[120px]">
112112
<span
113-
className="text-base font-medium text-center"
114-
style={{ lineHeight: 1.7, color: '#888' }}
113+
className="text-base font-medium text-center leading-[1.7] text-gray-500"
115114
>
116115
{t('knowledgeBase.upload.modelMismatch.description')}
117116
</span>
@@ -131,11 +130,15 @@ const UploadAreaUI: React.FC<UploadAreaUIProps> = ({
131130
{/* 上传区域层 */}
132131
<div
133132
className="absolute inset-0 transition-opacity duration-300 ease-in-out"
133+
onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
134+
onDragEnter={(e) => { e.preventDefault(); e.stopPropagation(); }}
135+
onDragLeave={(e) => { e.preventDefault(); e.stopPropagation(); }}
136+
onDrop={(e) => { e.preventDefault(); e.stopPropagation(); }}
134137
>
135138
<Dragger {...uploadProps} className="!h-full flex flex-col justify-center !bg-transparent !border-gray-200" showUploadList={false}>
136139
<div className="flex flex-col items-center justify-center h-full">
137140
<p className="ant-upload-drag-icon !mb-4">
138-
<InboxOutlined style={{ fontSize: '48px', color: '#1677ff' }} />
141+
<InboxOutlined className="text-[48px] text-blue-600" />
139142
</p>
140143
<p className="ant-upload-text !mb-2 text-base">
141144
{t('knowledgeBase.upload.dragHint')}
@@ -162,7 +165,7 @@ const UploadAreaUI: React.FC<UploadAreaUIProps> = ({
162165
<h4 className="text-sm font-medium text-gray-700 m-0">{t('knowledgeBase.upload.completed')}</h4>
163166
<span className="text-xs text-gray-500">{t('knowledgeBase.upload.fileCount', { count: fileList.length })}</span>
164167
</div>
165-
<div className="overflow-auto" style={{ height: 'calc(100% - 41px)' }}>
168+
<div className="overflow-auto h-[calc(100%_-_41px)]">
166169
{fileList.map(file => (
167170
<div key={file.uid} className="border-b border-gray-100 last:border-b-0">
168171
<div className="flex items-center justify-between py-2 px-3 hover:bg-gray-50 transition-colors">

‎frontend/app/[locale]/setup/knowledgeBaseSetup/document/DocumentListLayout.tsx‎

Lines changed: 23 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -237,9 +237,9 @@ const DocumentListContainer = forwardRef<DocumentListRef, DocumentListProps>(({
237237

238238
// Refactored: Style is embedded within the component
239239
return (
240-
<div className="flex flex-col w-full bg-white border border-gray-200 rounded-md shadow-sm h-full" style={{ height: containerHeight }}>
240+
<div className={`flex flex-col w-full bg-white border border-gray-200 rounded-md shadow-sm h-full h-[${containerHeight}]`}>
241241
{/* Title bar */}
242-
<div className={`${LAYOUT.KB_HEADER_PADDING} border-b border-gray-200 flex-shrink-0 flex items-center`} style={{ height: titleBarHeight }}>
242+
<div className={`${LAYOUT.KB_HEADER_PADDING} border-b border-gray-200 flex-shrink-0 flex items-center h-[${titleBarHeight}]`}>
243243
<div className="flex items-center justify-between w-full">
244244
<div className="flex items-center">
245245
{isCreatingMode ? (
@@ -260,14 +260,8 @@ const DocumentListContainer = forwardRef<DocumentListRef, DocumentListProps>(({
260260
value={knowledgeBaseName}
261261
onChange={(e) => onNameChange && onNameChange(e.target.value)}
262262
placeholder={t('document.input.knowledgeBaseName')}
263-
className={`${LAYOUT.KB_TITLE_MARGIN}`}
263+
className={`${LAYOUT.KB_TITLE_MARGIN} w-[320px] font-medium my-[2px]`}
264264
size="large"
265-
style={{
266-
width: '320px',
267-
fontWeight: 500,
268-
marginTop: '2px',
269-
marginBottom: '2px'
270-
}}
271265
prefix={<span className="text-blue-600">📚</span>}
272266
autoFocus
273267
disabled={hasDocuments || isUploading || docState.isLoadingDocuments} // Disable editing name if there are documents or uploading
@@ -294,11 +288,17 @@ const DocumentListContainer = forwardRef<DocumentListRef, DocumentListProps>(({
294288
</div>
295289

296290
{/* Document list */}
297-
<div className="p-2 overflow-auto flex-grow" style={{ height: contentHeight }}>
291+
<div
292+
className="p-2 overflow-auto flex-grow"
293+
onDragOver={(e) => { if (!isCreatingMode && knowledgeBaseName) { return; } e.preventDefault(); e.stopPropagation(); }}
294+
onDrop={(e) => { e.preventDefault(); e.stopPropagation(); }}
295+
onDragEnter={(e) => { e.preventDefault(); e.stopPropagation(); }}
296+
onDragLeave={(e) => { e.preventDefault(); e.stopPropagation(); }}
297+
>
298298
{showDetail ? (
299-
<div style={{ padding: '16px 32px', height: '100%', display: 'flex', flexDirection: 'column' }}>
300-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
301-
<span style={{ fontWeight: 700, fontSize: 18 }}>{t('document.summary.title')}</span>
299+
<div className="px-8 py-4 h-full flex flex-col">
300+
<div className="flex items-center justify-between mb-5">
301+
<span className="font-bold text-lg">{t('document.summary.title')}</span>
302302
<Button
303303
type="default"
304304
onClick={handleAutoSummary}
@@ -311,17 +311,9 @@ const DocumentListContainer = forwardRef<DocumentListRef, DocumentListProps>(({
311311
<Input.TextArea
312312
value={summary}
313313
onChange={(e) => setSummary(e.target.value)}
314-
style={{
315-
flex: 1,
316-
minHeight: 0,
317-
marginBottom: 20,
318-
resize: 'none',
319-
fontSize: 18,
320-
lineHeight: 1.7,
321-
padding: 20
322-
}}
314+
className="flex-1 min-h-0 mb-5 resize-none text-lg leading-[1.7] p-5"
323315
/>
324-
<div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end' }}>
316+
<div className="flex gap-3 justify-end">
325317
<Button
326318
type="primary"
327319
size="large"
@@ -345,8 +337,8 @@ const DocumentListContainer = forwardRef<DocumentListRef, DocumentListProps>(({
345337
) : isCreatingMode ? (
346338
<div className="flex items-center justify-center border border-gray-200 rounded-md h-full">
347339
<div className="text-center p-6">
348-
<div className="mb-4">
349-
<InfoCircleFilled style={{ fontSize: 36, color: '#1677ff' }} />
340+
<div className="mb-4 text-blue-600 text-[36px]">
341+
<InfoCircleFilled />
350342
</div>
351343
<h3 className="text-lg font-medium text-gray-800 mb-2">{t('document.title.createNew')}</h3>
352344
<p className="text-gray-500 text-sm max-w-md">
@@ -359,19 +351,19 @@ const DocumentListContainer = forwardRef<DocumentListRef, DocumentListProps>(({
359351
<table className="min-w-full bg-white">
360352
<thead className={`${LAYOUT.TABLE_HEADER_BG} sticky top-0 z-10`}>
361353
<tr>
362-
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT}`} style={{ width: COLUMN_WIDTHS.NAME }}>
354+
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT} w-[${COLUMN_WIDTHS.NAME}]`}>
363355
{t('document.table.header.name')}
364356
</th>
365-
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT}`} style={{ width: COLUMN_WIDTHS.STATUS }}>
357+
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT} w-[${COLUMN_WIDTHS.STATUS}]`}>
366358
{t('document.table.header.status')}
367359
</th>
368-
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT}`} style={{ width: COLUMN_WIDTHS.SIZE }}>
360+
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT} w-[${COLUMN_WIDTHS.SIZE}]`}>
369361
{t('document.table.header.size')}
370362
</th>
371-
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT}`} style={{ width: COLUMN_WIDTHS.DATE }}>
363+
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT} w-[${COLUMN_WIDTHS.DATE}]`}>
372364
{t('document.table.header.date')}
373365
</th>
374-
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT}`} style={{ width: COLUMN_WIDTHS.ACTION }}>
366+
<th className={`${LAYOUT.CELL_PADDING} text-left ${LAYOUT.HEADER_TEXT} w-[${COLUMN_WIDTHS.ACTION}]`}>
375367
{t('document.table.header.action')}
376368
</th>
377369
</tr>
@@ -385,13 +377,7 @@ const DocumentListContainer = forwardRef<DocumentListRef, DocumentListProps>(({
385377
{getFileIcon(doc.type)}
386378
</span>
387379
<span
388-
className={`${LAYOUT.TEXT_SIZE} font-medium text-gray-800 truncate`}
389-
style={{
390-
maxWidth: DOCUMENT_NAME_CONFIG.MAX_WIDTH,
391-
textOverflow: DOCUMENT_NAME_CONFIG.TEXT_OVERFLOW,
392-
whiteSpace: DOCUMENT_NAME_CONFIG.WHITE_SPACE,
393-
overflow: DOCUMENT_NAME_CONFIG.OVERFLOW
394-
}}
380+
className={`${LAYOUT.TEXT_SIZE} font-medium text-gray-800 truncate max-w-[${DOCUMENT_NAME_CONFIG.MAX_WIDTH}] whitespace-${DOCUMENT_NAME_CONFIG.WHITE_SPACE} overflow-${DOCUMENT_NAME_CONFIG.OVERFLOW} text-${DOCUMENT_NAME_CONFIG.TEXT_OVERFLOW}`}
395381
title={doc.name}
396382
>
397383
{doc.name}

0 commit comments

Comments
 (0)