YG-Soft/YG_FT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
移除生成选项面板的高级设置折叠抽屉，温度、最大输出长度、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
Download Patch File Download Diff File Expand all files Collapse all files

158
frontend/src/views/data-process/create/GenerationOptionsPanel.vue
View File

@@ -10,8 +10,6 @@ const props = defineProps<{
validationMessage?: string
}>()
const advancedModelSettingsOpen = ref(false)
const emit = defineEmits<{
'update:options': [value: GenerationControlOptions]
}>()
@@ -99,64 +97,49 @@ function sectionValidationMessage() {
</div>
</div>
<button
type="button"
class="advanced-settings-toggle"
:aria-expanded="advancedModelSettingsOpen"
@click="advancedModelSettingsOpen = !advancedModelSettingsOpen"
>
<span>
<strong>高级设置</strong>
<small>温度、最大输出长度与格式约束</small>
</span>
<i class="fa" :class="advancedModelSettingsOpen ? 'fa-chevron-up' : 'fa-chevron-down'" />
</button>
<div v-if="advancedModelSettingsOpen" class="advanced-settings-panel">
<div class="advanced-settings-grid">
<label class="config-field">
<span class="config-field-label">生成温度 (Temperature)</span>
<el-slider
:model-value="options.temperature"
:min="0"
:max="1"
:step="0.1"
show-input
@update:model-value="updateField('temperature', Number($event) || 0)"
/>
<small>较低值输出更确定、保守，较高值输出更多样、有创造性</small>
</label>
<label class="config-field">
<span class="config-field-label">最大输出长度 (Max Tokens)</span>
<span class="unit-input">
<el-input-number
:model-value="options.maxTokens"
:min="100"
:max="8192"
:step="256"
controls-position="right"
@update:model-value="updateField('maxTokens', Number($event) || 1024)"
/>
<span>Token</span>
</span>
<small>限制单次生成的最大内容长度，防止过度发散</small>
</label>
</div>
<div class="json-mode-row">
<div class="field-copy">
<strong>强制 JSON 格式输出</strong>
<small>要求大模型返回纯 JSON 对象，有助于提高下游结构化提取的稳定性</small>
</div>
<el-switch
:model-value="options.jsonMode"
inline-prompt
active-text="开"
inactive-text="关"
@update:model-value="updateField('jsonMode', Boolean($event))"
<div class="advanced-settings-grid">
<label class="config-field">
<span class="config-field-label">生成温度 (Temperature)</span>
<el-slider
:model-value="options.temperature"
:min="0"
:max="1"
:step="0.1"
show-input
@update:model-value="updateField('temperature', Number($event) || 0)"
/>
<small>较低值输出更确定、保守，较高值输出更多样、有创造性</small>
</label>
<label class="config-field">
<span class="config-field-label">最大输出长度 (Max Tokens)</span>
<span class="unit-input">
<el-input-number
:model-value="options.maxTokens"
:min="100"
:max="8192"
:step="256"
controls-position="right"
@update:model-value="updateField('maxTokens', Number($event) || 1024)"
/>
<span>Token</span>
</span>
<small>限制单次生成的最大内容长度，防止过度发散</small>
</label>
</div>
<div class="json-mode-row">
<div class="field-copy">
<strong>强制 JSON 格式输出</strong>
<small>要求大模型返回纯 JSON 对象，有助于提高下游结构化提取的稳定性</small>
</div>
<el-switch
:model-value="options.jsonMode"
inline-prompt
active-text="开"
inactive-text="关"
@update:model-value="updateField('jsonMode', Boolean($event))"
/>
</div>
<p v-if="sectionValidationMessage()" class="generation-validation-message" role="alert">
@@ -297,61 +280,6 @@ function sectionValidationMessage() {
}
}
.advanced-settings-toggle {
display: flex;
width: 100%;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 4px;
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;
}
> 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: 16px;
margin-top: -8px;
padding: 16px;
background: #fff;
border: 1px solid #e2e5ec;
border-radius: 8px;
}
.advanced-settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -401,8 +329,8 @@ function sectionValidationMessage() {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 14px;
gap: 16px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e2e5ec;
border-radius: 8px;

15
frontend/src/views/data-process/create/StructuredOptionsPanel.vue
View File

@@ -94,19 +94,7 @@ function updatePreprocessOptions(value: Array<string | number | boolean>) {
: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"
inline-prompt
active-text="开"
inactive-text="关"
@update:model-value="updateField('semanticEnrichment', Boolean($event))"
/>
</div>
<div class="generation-option-row">
<div class="generation-option-copy">
<strong>每行生成数量</strong>
@@ -192,6 +180,7 @@ function updatePreprocessOptions(value: Array<string | number | boolean>) {
.preprocess-option {
display: flex;
gap: 10px;
width: 100%;
min-height: 64px;
margin-right: 0;

21
frontend/src/views/data-process/create/TaskSetupStep.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import type { ModelItem } from '@/types'
import type {
GenerationControlOptions,
@@ -97,17 +97,28 @@ async function validate() {
if (!formRef.value) return false
try {
await formRef.value.validate()
if (props.processType === 'structured' && splitTotal.value !== 100) return false
if (props.processType === 'structured' && splitTotal.value !== 100) {
ElMessage.error('结构化数据处理：数据集划分比例总和必须为 100%')
return false
}
if (props.processType === 'unstructured') {
if (unstructuredSplitTotal.value !== 100) return false
if (unstructuredSplitTotal.value !== 100) {
ElMessage.error('非结构化数据处理：数据集划分比例总和必须为 100%')
return false
}
if (chunkValidationMessage.value) {
unstructuredOptionsPanelRef.value?.revealValidation()
ElMessage.error(chunkValidationMessage.value)
return false
}
}
if (generationValidationMessage.value) return false
if (generationValidationMessage.value) {
ElMessage.error(generationValidationMessage.value)
return false
}
return true
} catch {
ElMessage.error('请完善标红的必填项')
return false
}
}
@@ -117,7 +128,7 @@ defineExpose({ validate })
<template>
<section class="task-setup-step">
<el-form ref="formRef" :model="formModel" :rules="rules" label-position="top">
<el-form ref="formRef" :model="formModel" :rules="rules" label-position="top" scroll-to-error>
<div class="form-section">
<h3>基本信息</h3>
<div class="basic-grid">

170
frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue
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);
}