refactor: 数据处理向导生成选项改为平铺布局

移除生成选项面板的高级设置折叠抽屉,温度、最大输出长度、JSON 模式等配置直接平铺展示,简化非结构化与任务设置步骤的嵌套结构,列表新建按钮文案精简。
This commit is contained in:
caoxiaozhu
2026-07-13 16:39:16 +08:00
parent 0917206191
commit c9ddc3b652
5 changed files with 86 additions and 280 deletions

View File

@@ -47,8 +47,6 @@ const UNSTRUCTURED_NUMBER_LIMITS = {
type UnstructuredNumberField = keyof typeof UNSTRUCTURED_NUMBER_LIMITS
const advancedChunkSettingsOpen = ref(props.options.chunkMethod === 'custom')
const smartPreprocessEnabled = computed(() => SMART_PREPROCESS_OPTIONS.every(
(option) => props.options.preprocessOptions.includes(option),
))
@@ -61,14 +59,6 @@ const preserveSpecialContentEnabled = computed(() => (
&& props.options.preserveLists
))
watch(() => props.options.chunkMethod, (method) => {
if (method === 'custom') advancedChunkSettingsOpen.value = true
})
watch(() => props.chunkValidationMessage, (message) => {
if (message) advancedChunkSettingsOpen.value = true
})
function updateField<K extends keyof UnstructuredProcessOptions>(
field: K,
value: UnstructuredProcessOptions[K],
@@ -117,7 +107,7 @@ function updateUnstructuredNumber(field: UnstructuredNumberField, value: number
}
function revealValidation() {
advancedChunkSettingsOpen.value = true
// Advanced settings are now flattened, no need to open toggle
}
defineExpose({ revealValidation })
@@ -153,6 +143,17 @@ defineExpose({ revealValidation })
<small>处理姓名手机号等隐私信息</small>
</span>
</label>
<label class="preprocess-option" :class="{ 'is-checked': preserveSpecialContentEnabled }">
<el-checkbox
:model-value="preserveSpecialContentEnabled"
@update:model-value="updateSpecialContentProtection"
/>
<span class="preprocess-option-copy">
<strong>保护表格代码和列表</strong>
<small>避免切分点破坏特殊内容块的完整性</small>
</span>
</label>
</div>
</div>
@@ -217,36 +218,6 @@ defineExpose({ revealValidation })
</span>
<small>在相邻切片中最多重复保留的上下文默认 100 Token</small>
</label>
</div>
<p class="chunk-estimation-note">
Token 数为轻量估算值实际长度以训练使用的模型分词器为准
</p>
<p v-if="chunkValidationMessage" class="option-validation-message" role="alert">
{{ chunkValidationMessage }}
</p>
<button
type="button"
class="advanced-settings-toggle"
:aria-expanded="advancedChunkSettingsOpen"
aria-controls="unstructured-advanced-settings"
@click="advancedChunkSettingsOpen = !advancedChunkSettingsOpen"
>
<span>
<strong>高级设置</strong>
<small>最小切片长度自定义分隔符和特殊内容保护</small>
</span>
<i class="fa" :class="advancedChunkSettingsOpen ? 'fa-chevron-up' : 'fa-chevron-down'" />
</button>
<div
v-if="advancedChunkSettingsOpen"
id="unstructured-advanced-settings"
class="advanced-settings-panel"
>
<div class="advanced-settings-grid">
<label class="config-field">
<span class="config-field-label">最小切片长度</span>
<span class="unit-input">
@@ -277,23 +248,15 @@ defineExpose({ revealValidation })
/>
<small>系统会优先在分隔符位置结束当前切片</small>
</label>
</div>
<div class="generation-option-row advanced-protection-row">
<div class="generation-option-copy">
<strong>保护表格代码和列表</strong>
<small>避免切分点破坏特殊内容块的完整性</small>
</div>
<el-switch
:model-value="preserveSpecialContentEnabled"
aria-label="保护表格代码和列表"
inline-prompt
active-text=""
inactive-text=""
@update:model-value="updateSpecialContentProtection"
/>
</div>
</div>
<p class="chunk-estimation-note">
Token 数为轻量估算值实际长度以训练使用的模型分词器为准
</p>
<p v-if="chunkValidationMessage" class="option-validation-message" role="alert">
{{ chunkValidationMessage }}
</p>
</div>
<div class="form-section generation-options-section">
@@ -311,20 +274,7 @@ defineExpose({ revealValidation })
:validation-message="validationAttempted ? generationValidationMessage : ''"
@update:options="updateGenerationOptions"
/>
<div class="generation-option-row">
<div class="generation-option-copy">
<strong>语义丰富表达</strong>
<small>使用大模型将问答表述得更自然柔和</small>
</div>
<el-switch
:model-value="options.semanticEnrichment"
aria-label="非结构化语义丰富表达"
inline-prompt
active-text=""
inactive-text=""
@update:model-value="updateField('semanticEnrichment', Boolean($event))"
/>
</div>
<div class="generation-option-row">
<div class="generation-option-copy">
@@ -421,6 +371,7 @@ defineExpose({ revealValidation })
.preprocess-option {
display: flex;
gap: 10px;
width: 100%;
min-height: 64px;
margin-right: 0;
@@ -559,75 +510,8 @@ defineExpose({ revealValidation })
line-height: 1.5;
}
.advanced-settings-toggle {
display: flex;
width: 100%;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 12px;
padding: 10px 14px;
color: #344054;
text-align: left;
background: #fff;
border: 1px solid #e2e5ec;
border-radius: 8px;
cursor: pointer;
transition: border-color 0.18s ease, background-color 0.18s ease;
&:hover {
background: #f8f7ff;
border-color: #b7b2f7;
}
&:focus-visible {
outline: 2px solid #5b50f2;
outline-offset: 2px;
}
> span {
display: grid;
gap: 3px;
}
strong {
font-size: 13px;
font-weight: 600;
}
small {
color: #8a93a3;
font-size: 12px;
line-height: 1.5;
}
i {
flex: 0 0 auto;
color: #7b8495;
font-size: 12px;
}
}
.advanced-settings-panel {
display: grid;
gap: 12px;
margin-top: 8px;
padding: 12px;
background: #fff;
border: 1px solid #e2e5ec;
border-radius: 8px;
}
.advanced-settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 900px) {
.chunk-settings-grid,
.advanced-settings-grid {
.chunk-settings-grid {
grid-template-columns: minmax(0, 1fr);
}
@@ -636,17 +520,11 @@ defineExpose({ revealValidation })
flex-direction: column;
}
.compact-option-list .generation-option-row,
.advanced-protection-row {
.compact-option-list .generation-option-row {
align-items: center;
flex-direction: row;
}
.advanced-protection-row {
align-items: flex-start;
flex-direction: column;
}
.preprocess-option-grid {
grid-template-columns: minmax(0, 1fr);
}