feat：新增dify接入知识库时更新文档嵌入参数的功能
This commit is contained in:
PingChuan
@@ -3,12 +3,12 @@ import {
|
||||
Button,
|
||||
InputNumber,
|
||||
Checkbox,
|
||||
Select,
|
||||
Card,
|
||||
Empty,
|
||||
Spin,
|
||||
Divider,
|
||||
Tooltip,
|
||||
Progress,
|
||||
} from 'antd';
|
||||
import {
|
||||
QuestionCircleOutlined,
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
} from '@ant-design/icons';
|
||||
import { useDocumentDetail } from '~/hooks/dify-dataset-manager/document-detail';
|
||||
import type { DocumentDetailProps } from '~/types/dify-dataset-manager/document-detail';
|
||||
import { INDEXING_STATUS_CONFIG } from '~/types/dify-dataset-manager/document-detail';
|
||||
|
||||
/**
|
||||
* 文档详情组件
|
||||
@@ -32,6 +33,8 @@ export default function DocumentDetail({
|
||||
previewLoading,
|
||||
showPreview,
|
||||
saving,
|
||||
isProcessing,
|
||||
indexingStatus,
|
||||
updateSettings,
|
||||
handleReset,
|
||||
handlePreview,
|
||||
@@ -56,7 +59,7 @@ export default function DocumentDetail({
|
||||
<h3 className="section-title">分段设置</h3>
|
||||
|
||||
{/* 分块模式 */}
|
||||
<div className="setting-item mode-selector">
|
||||
{/* <div className="setting-item mode-selector">
|
||||
<div className="mode-option active">
|
||||
<div className="mode-icon">
|
||||
<i className="ri-text-spacing"></i>
|
||||
@@ -66,13 +69,13 @@ export default function DocumentDetail({
|
||||
<span className="mode-desc">通用文本分块模式，检索和召回的块是相同的</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* 分段标识符 */}
|
||||
<div className="setting-item">
|
||||
<label className="setting-label">
|
||||
分段标识符
|
||||
<Tooltip title="系统会在遇到指定分隔符时自动分段，默认值为 \n\n（按段落分段）">
|
||||
<Tooltip title="分隔符是用于分隔文本的字符。\n\n和 \n 是常用于分隔段落和行的分隔符。用逗号连接分隔符(\n\n,\n)当段落超过最大块长度时，会按行进行分割。你也可以使用自定义的特殊分隔符(例如 ***)">
|
||||
<QuestionCircleOutlined className="help-icon" />
|
||||
</Tooltip>
|
||||
</label>
|
||||
@@ -80,6 +83,7 @@ export default function DocumentDetail({
|
||||
value={settings.separator}
|
||||
onChange={(e) => updateSettings('separator', e.target.value)}
|
||||
placeholder="\n\n"
|
||||
disabled={isProcessing}
|
||||
className="setting-input"
|
||||
/>
|
||||
</div>
|
||||
@@ -98,6 +102,28 @@ export default function DocumentDetail({
|
||||
onChange={(value) => updateSettings('maxTokens', value || 500)}
|
||||
min={100}
|
||||
max={4000}
|
||||
disabled={isProcessing}
|
||||
className="setting-input-number"
|
||||
/>
|
||||
<span className="input-suffix">characters</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 分段重叠长度 */}
|
||||
<div className="setting-item">
|
||||
<label className="setting-label">
|
||||
分段重叠长度
|
||||
<Tooltip title="设置分段之间的重叠长度可以保留分段之间的语义关系，提升召回效果建议设置为最大分段长度的10%-25%">
|
||||
<QuestionCircleOutlined className="help-icon" />
|
||||
</Tooltip>
|
||||
</label>
|
||||
<div className="setting-input-with-suffix">
|
||||
<InputNumber
|
||||
value={settings.chunkOverlap}
|
||||
onChange={(value) => updateSettings('chunkOverlap', value || 50)}
|
||||
min={0}
|
||||
max={500}
|
||||
disabled={isProcessing}
|
||||
className="setting-input-number"
|
||||
/>
|
||||
<span className="input-suffix">characters</span>
|
||||
@@ -115,6 +141,7 @@ export default function DocumentDetail({
|
||||
<Checkbox
|
||||
checked={settings.removeExtraSpaces}
|
||||
onChange={(e) => updateSettings('removeExtraSpaces', e.target.checked)}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
替换掉连续的空格、换行符和制表符
|
||||
</Checkbox>
|
||||
@@ -122,6 +149,7 @@ export default function DocumentDetail({
|
||||
<Checkbox
|
||||
checked={settings.removeUrlsEmails}
|
||||
onChange={(e) => updateSettings('removeUrlsEmails', e.target.checked)}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
删除所有 URL 和电子邮件地址
|
||||
</Checkbox>
|
||||
@@ -130,27 +158,25 @@ export default function DocumentDetail({
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Q&A 分段 */}
|
||||
{/* 索引方式 */}
|
||||
<div className="settings-section">
|
||||
<div className="qa-segment-row">
|
||||
<Checkbox
|
||||
checked={settings.useQASegment}
|
||||
onChange={(e) => updateSettings('useQASegment', e.target.checked)}
|
||||
<h3 className="section-title">索引方式</h3>
|
||||
<div className="index-options">
|
||||
<div
|
||||
className={`index-option ${settings.indexingTechnique === 'high_quality' ? 'active' : ''} ${isProcessing ? 'disabled' : ''}`}
|
||||
onClick={() => !isProcessing && updateSettings('indexingTechnique', 'high_quality')}
|
||||
>
|
||||
使用 Q&A 分段，语言
|
||||
</Checkbox>
|
||||
<Select
|
||||
value={settings.qaLanguage}
|
||||
onChange={(value) => updateSettings('qaLanguage', value)}
|
||||
disabled={!settings.useQASegment}
|
||||
style={{ width: 120 }}
|
||||
options={[
|
||||
{ value: 'Chinese', label: 'Chinese' },
|
||||
{ value: 'English', label: 'English' },
|
||||
{ value: 'Japanese', label: 'Japanese' },
|
||||
{ value: 'Korean', label: 'Korean' },
|
||||
]}
|
||||
/>
|
||||
<span className="option-radio"></span>
|
||||
<span className="option-label">高质量</span>
|
||||
<span className="option-badge recommended">推荐</span>
|
||||
</div>
|
||||
<div
|
||||
className={`index-option ${settings.indexingTechnique === 'economy' ? 'active' : ''} ${isProcessing ? 'disabled' : ''}`}
|
||||
onClick={() => !isProcessing && updateSettings('indexingTechnique', 'economy')}
|
||||
>
|
||||
<span className="option-radio"></span>
|
||||
<span className="option-label">经济</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -160,12 +186,14 @@ export default function DocumentDetail({
|
||||
icon={<EyeOutlined />}
|
||||
onClick={handlePreview}
|
||||
loading={previewLoading}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
预览块
|
||||
</Button>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleReset}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
@@ -179,12 +207,10 @@ export default function DocumentDetail({
|
||||
type="primary"
|
||||
onClick={handleSaveAndProcess}
|
||||
loading={saving}
|
||||
disabled={isProcessing}
|
||||
block
|
||||
>
|
||||
保存并处理
|
||||
</Button>
|
||||
<Button block style={{ marginTop: 8 }}>
|
||||
取消
|
||||
{isProcessing ? '处理中...' : '保存并处理'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -195,12 +221,7 @@ export default function DocumentDetail({
|
||||
title={
|
||||
<div className="preview-header">
|
||||
<span>预览</span>
|
||||
<Select
|
||||
value={document.name}
|
||||
style={{ width: 200 }}
|
||||
disabled
|
||||
options={[{ value: document.name, label: document.name }]}
|
||||
/>
|
||||
<div>{document.name}</div>
|
||||
<span className="segment-count">
|
||||
{showPreview ? `${previewSegments.length} 段块` : '0 段块'}
|
||||
</span>
|
||||
@@ -208,36 +229,59 @@ export default function DocumentDetail({
|
||||
}
|
||||
className="preview-card"
|
||||
>
|
||||
{previewLoading ? (
|
||||
<div className="preview-loading">
|
||||
<Spin size="large" />
|
||||
<div className="loading-text">加载中...</div>
|
||||
</div>
|
||||
) : !showPreview ? (
|
||||
<div className="preview-empty">
|
||||
<div className="empty-icon">
|
||||
<EyeOutlined />
|
||||
{/* 处理进度显示 */}
|
||||
{isProcessing && indexingStatus && (
|
||||
<div className="processing-status">
|
||||
<div className="processing-title">
|
||||
<Spin size="small" />
|
||||
<span>正在处理文档...</span>
|
||||
</div>
|
||||
<Progress
|
||||
percent={INDEXING_STATUS_CONFIG[indexingStatus]?.percent || 0}
|
||||
status="active"
|
||||
strokeColor={{ '0%': '#00684a', '100%': '#52c41a' }}
|
||||
/>
|
||||
<div className="status-text">
|
||||
{INDEXING_STATUS_CONFIG[indexingStatus]?.text || '处理中...'}
|
||||
</div>
|
||||
<p>点击左侧的"预览块"按钮来预览</p>
|
||||
</div>
|
||||
) : previewSegments.length === 0 ? (
|
||||
<Empty description="暂无分段数据" />
|
||||
) : (
|
||||
<div className="preview-segments">
|
||||
{previewSegments.map((segment, index) => (
|
||||
<div key={segment.id} className="segment-item">
|
||||
<div className="segment-header">
|
||||
<span className="segment-index">#{index + 1}</span>
|
||||
<span className="segment-chars">
|
||||
{segment.word_count} 字符
|
||||
</span>
|
||||
</div>
|
||||
<div className="segment-content">
|
||||
{segment.content}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 预览内容 */}
|
||||
{!isProcessing && (
|
||||
<>
|
||||
{previewLoading ? (
|
||||
<div className="preview-loading">
|
||||
<Spin size="large" />
|
||||
<div className="loading-text">加载中...</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : !showPreview ? (
|
||||
<div className="preview-empty">
|
||||
<div className="empty-icon">
|
||||
<EyeOutlined />
|
||||
</div>
|
||||
<p>点击左侧的"预览块"按钮来预览</p>
|
||||
</div>
|
||||
) : previewSegments.length === 0 ? (
|
||||
<Empty description="暂无分段数据" />
|
||||
) : (
|
||||
<div className="preview-segments">
|
||||
{previewSegments.map((segment, index) => (
|
||||
<div key={segment.id} className="segment-item">
|
||||
<div className="segment-header">
|
||||
<span className="segment-index">#{index + 1}</span>
|
||||
<span className="segment-chars">
|
||||
{segment.word_count} 字符
|
||||
</span>
|
||||
</div>
|
||||
<div className="segment-content">
|
||||
{segment.content}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Tag,
|
||||
Space,
|
||||
Tooltip,
|
||||
Popconfirm,
|
||||
Switch,
|
||||
Empty,
|
||||
Spin,
|
||||
} from 'antd';
|
||||
import {
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
CloudUploadOutlined,
|
||||
DeleteOutlined,
|
||||
FileTextOutlined,
|
||||
CloudUploadOutlined,
|
||||
EyeOutlined,
|
||||
ReloadOutlined,
|
||||
SearchOutlined,
|
||||
UnorderedListOutlined
|
||||
} from '@ant-design/icons';
|
||||
import {
|
||||
Button,
|
||||
Empty,
|
||||
Input,
|
||||
Popconfirm,
|
||||
Space,
|
||||
Spin,
|
||||
Switch,
|
||||
Table,
|
||||
Tag,
|
||||
Tooltip,
|
||||
} from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { Document, IndexingStatus } from '~/api/dify-dataset/type/documentTypes';
|
||||
import { useDocumentList } from '~/hooks/dify-dataset-manager/document-list';
|
||||
import type { DocumentListProps } from '~/types/dify-dataset-manager/document-list';
|
||||
import DocumentUpload from './document-upload';
|
||||
import '../../styles/components/dify-dataset-manager/index.css';
|
||||
import DocumentUpload from './document-upload';
|
||||
|
||||
/**
|
||||
* 文档列表组件
|
||||
@@ -128,11 +128,11 @@ export default function DocumentList({
|
||||
width: 120,
|
||||
render: (_, record) => (
|
||||
<Space size="small">
|
||||
<Tooltip title="查看分段">
|
||||
<Tooltip title="分段设置">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
icon={<UnorderedListOutlined />}
|
||||
onClick={() => onViewDocument?.(record)}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
@@ -237,7 +237,7 @@ export default function DocumentUpload({
|
||||
<div className="setting-item">
|
||||
<label className="setting-label">
|
||||
分段重叠长度
|
||||
<Tooltip title="相邻分段之间重叠的字符数，有助于保持上下文连贯性">
|
||||
<Tooltip title="设置分段之间的重叠长度可以保留分段之间的语义关系，提升召回效果建议设置为最大分段长度的10%-25%">
|
||||
<QuestionCircleOutlined className="help-icon" />
|
||||
</Tooltip>
|
||||
</label>
|
||||
|
||||
Reference in New Issue
Block a user