Skip to content

Commit 2e20b0c

Browse files
linshenkxlinshenkx
committed
refactor(ui): 优化高级模式测试区域布局结构，统一图像模式和基础模式测试面板布局
- **统一布局结构**：图像模式、基础模式和高级模式测试面板布局保持一致，提升用户体验。 - 使用 `NCard` 包裹测试控制栏和输入区域，使左右两侧卡片结构对称。 - 使用 `NFlex gap` 替换 `marginBottom` 实现统一间距管理。 - 移除冗余的 `div` 包装层、`NFlex` 和 `NCard` 层级，节省垂直空间。 - **简化UI**： - 移除冗余的"测试区域"标题卡片。 - 将"全局变量"按钮整合到临时变量卡片的 header 区域。 - **代码优化**： - 移除测试运行时隐藏变量表单的逻辑，保持始终可见。 - 清理未使用的 `useBreakpoints` / `isMobile` 和 `showVariableForm`。
1 parent 5312658 commit 2e20b0c

File tree

7 files changed

+539
-634
lines changed

7 files changed

+539
-634
lines changed

‎packages/ui/src/components/TestAreaPanel.vue‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<NFlex vertical :style="{ height: '100%' }">
2+
<NFlex vertical :style="{ height: '100%', gap: '12px' }">
33
<!-- 测试输入区域 (仅在系统提示词优化模式下显示) -->
4-
<div v-if="showTestInput" :style="{ flexShrink: 0 }">
4+
<NCard v-if="showTestInput" :style="{ flexShrink: 0 }" size="small">
55
<TestInputSection
66
v-model="testContentProxy"
77
:label="t('test.content')"
@@ -11,14 +11,11 @@
1111
:mode="adaptiveInputMode"
1212
:size="inputSize"
1313
:enable-fullscreen="enableFullscreen"
14-
:style="{ marginBottom: '16px' }"
1514
/>
16-
</div>
17-
18-
15+
</NCard>
1916

2017
<!-- 控制工具栏 -->
21-
<div :style="{ flexShrink: 0 }">
18+
<NCard :style="{ flexShrink: 0 }" size="small">
2219
<TestControlBar
2320
:model-label="t('test.model')"
2421
:show-compare-toggle="enableCompareMode"
@@ -30,7 +27,6 @@
3027
:button-size="adaptiveButtonSize"
3128
@compare-toggle="handleCompareToggle"
3229
@primary-action="handleTest"
33-
:style="{ marginBottom: '16px' }"
3430
>
3531
<template #model-select>
3632
<slot name="model-select"></slot>
@@ -42,7 +38,7 @@
4238
<slot name="custom-actions"></slot>
4339
</template>
4440
</TestControlBar>
45-
</div>
41+
</NCard>
4642

4743
<!-- 测试结果区域 -->
4844
<TestResultSection
@@ -137,6 +133,7 @@ import { computed, ref, onUnmounted } from 'vue'
137133
import { useI18n } from "vue-i18n";
138134
import {
139135
NFlex,
136+
NCard,
140137
} from "naive-ui";
141138
import type {
142139
OptimizationMode,

‎packages/ui/src/components/context-mode/ContextSystemWorkspace.vue‎

Lines changed: 70 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -132,119 +132,83 @@
132132
</NFlex>
133133

134134
<!-- 右侧：测试区域 -->
135-
<NFlex
136-
vertical
135+
<ConversationTestPanel
136+
ref="testAreaPanelRef"
137137
:style="{
138138
flex: 1,
139139
overflow: 'auto',
140140
height: '100%',
141-
gap: '12px',
141+
minHeight: 0,
142142
}"
143+
:optimization-mode="optimizationMode"
144+
:is-test-running="conversationTester.testResults.isTestingOriginal || conversationTester.testResults.isTestingOptimized"
145+
:is-compare-mode="isCompareMode"
146+
:enable-compare-mode="true"
147+
@update:isCompareMode="emit('update:isCompareMode', $event)"
148+
@compare-toggle="emit('compare-toggle')"
149+
:global-variables="globalVariables"
150+
:predefined-variables="predefinedVariables"
151+
:temporary-variables="tempVars.temporaryVariables.value"
152+
:input-mode="inputMode"
153+
:control-bar-layout="controlBarLayout"
154+
:button-size="buttonSize"
155+
:result-vertical-layout="resultVerticalLayout"
156+
@test="handleTestWithVariables"
157+
@open-variable-manager="emit('open-variable-manager')"
158+
@open-global-variables="emit('open-global-variables')"
159+
@variable-change="handleVariableChange"
160+
@save-to-global="(name: string, value: string) => emit('save-to-global', name, value)"
161+
@temporary-variable-remove="handleVariableRemove"
162+
@temporary-variables-clear="handleVariablesClear"
163+
v-bind="evaluationHandler.testAreaEvaluationProps.value"
164+
@evaluate-original="evaluationHandler.handlers.onEvaluateOriginal"
165+
@evaluate-optimized="evaluationHandler.handlers.onEvaluateOptimized"
166+
@show-original-detail="evaluationHandler.handlers.onShowOriginalDetail"
167+
@show-optimized-detail="evaluationHandler.handlers.onShowOptimizedDetail"
168+
@apply-improvement="handleApplyImprovement"
143169
>
144-
<!-- 测试区域操作栏 -->
145-
<NCard size="small" :style="{ flexShrink: 0 }">
146-
<NFlex justify="space-between" align="center">
147-
<!-- 左侧：区域标识 -->
148-
<NFlex align="center" :size="8">
149-
<NText strong>{{ $t("test.areaTitle") }}</NText>
150-
</NFlex>
151-
152-
<!-- 右侧：快捷操作按钮 -->
153-
<NFlex :size="8">
154-
<NButton
155-
size="small"
156-
quaternary
157-
@click="emit('open-global-variables')"
158-
:title="$t('contextMode.actions.globalVariables')"
159-
>
160-
<template #icon><span>📊</span></template>
161-
<span v-if="!isMobile">{{
162-
$t("contextMode.actions.globalVariables")
163-
}}</span>
164-
</NButton>
165-
</NFlex>
166-
</NFlex>
167-
</NCard>
168-
169-
<!-- 测试区域主内容 -->
170-
<NCard
171-
:style="{ flex: 1, overflow: 'auto' }"
172-
content-style="height: 100%; max-height: 100%; overflow: hidden;"
173-
>
174-
<ConversationTestPanel
175-
ref="testAreaPanelRef"
176-
:optimization-mode="optimizationMode"
177-
:is-test-running="conversationTester.testResults.isTestingOriginal || conversationTester.testResults.isTestingOptimized"
178-
:is-compare-mode="isCompareMode"
179-
:enable-compare-mode="true"
180-
@update:isCompareMode="emit('update:isCompareMode', $event)"
181-
@compare-toggle="emit('compare-toggle')"
182-
:global-variables="globalVariables"
183-
:predefined-variables="predefinedVariables"
184-
:temporary-variables="tempVars.temporaryVariables.value"
185-
:input-mode="inputMode"
186-
:control-bar-layout="controlBarLayout"
187-
:button-size="buttonSize"
188-
:result-vertical-layout="resultVerticalLayout"
189-
@test="handleTestWithVariables"
190-
@open-variable-manager="emit('open-variable-manager')"
191-
@variable-change="handleVariableChange"
192-
@save-to-global="
193-
(name: string, value: string) => emit('save-to-global', name, value)
194-
"
195-
@temporary-variable-remove="handleVariableRemove"
196-
@temporary-variables-clear="handleVariablesClear"
197-
v-bind="evaluationHandler.testAreaEvaluationProps.value"
198-
@evaluate-original="evaluationHandler.handlers.onEvaluateOriginal"
199-
@evaluate-optimized="evaluationHandler.handlers.onEvaluateOptimized"
200-
@show-original-detail="evaluationHandler.handlers.onShowOriginalDetail"
201-
@show-optimized-detail="evaluationHandler.handlers.onShowOptimizedDetail"
202-
@apply-improvement="handleApplyImprovement"
203-
>
204-
<!-- 模型选择插槽 -->
205-
<template #model-select>
206-
<slot name="test-model-select"></slot>
207-
</template>
208-
209-
<!-- 🆕 对比模式结果插槽：直接绑定测试结果 -->
210-
<template #original-result>
211-
<OutputDisplay
212-
:content="conversationTester.testResults.originalResult"
213-
:reasoning="conversationTester.testResults.originalReasoning"
214-
:streaming="conversationTester.testResults.isTestingOriginal"
215-
:enableDiff="false"
216-
mode="readonly"
217-
:style="{ height: '100%', minHeight: '0' }"
218-
/>
219-
</template>
220-
221-
<template #optimized-result>
222-
<OutputDisplay
223-
:content="conversationTester.testResults.optimizedResult"
224-
:reasoning="conversationTester.testResults.optimizedReasoning"
225-
:streaming="conversationTester.testResults.isTestingOptimized"
226-
:enableDiff="false"
227-
mode="readonly"
228-
:style="{ height: '100%', minHeight: '0' }"
229-
/>
230-
</template>
231-
232-
<!-- 单一结果插槽 -->
233-
<template #single-result>
234-
<OutputDisplay
235-
:content="conversationTester.testResults.optimizedResult"
236-
:reasoning="conversationTester.testResults.optimizedReasoning"
237-
:streaming="conversationTester.testResults.isTestingOptimized"
238-
:enableDiff="false"
239-
mode="readonly"
240-
:style="{ height: '100%', minHeight: '0' }"
241-
/>
242-
</template>
243-
</ConversationTestPanel>
244-
</NCard>
245-
</NFlex>
170+
<!-- 模型选择插槽 -->
171+
<template #model-select>
172+
<slot name="test-model-select"></slot>
173+
</template>
174+
175+
<!-- 对比模式结果插槽 -->
176+
<template #original-result>
177+
<OutputDisplay
178+
:content="conversationTester.testResults.originalResult"
179+
:reasoning="conversationTester.testResults.originalReasoning"
180+
:streaming="conversationTester.testResults.isTestingOriginal"
181+
:enableDiff="false"
182+
mode="readonly"
183+
:style="{ height: '100%', minHeight: '0' }"
184+
/>
185+
</template>
186+
187+
<template #optimized-result>
188+
<OutputDisplay
189+
:content="conversationTester.testResults.optimizedResult"
190+
:reasoning="conversationTester.testResults.optimizedReasoning"
191+
:streaming="conversationTester.testResults.isTestingOptimized"
192+
:enableDiff="false"
193+
mode="readonly"
194+
:style="{ height: '100%', minHeight: '0' }"
195+
/>
196+
</template>
197+
198+
<!-- 单一结果插槽 -->
199+
<template #single-result>
200+
<OutputDisplay
201+
:content="conversationTester.testResults.optimizedResult"
202+
:reasoning="conversationTester.testResults.optimizedReasoning"
203+
:streaming="conversationTester.testResults.isTestingOptimized"
204+
:enableDiff="false"
205+
mode="readonly"
206+
:style="{ height: '100%', minHeight: '0' }"
207+
/>
208+
</template>
209+
</ConversationTestPanel>
246210

247-
<!-- 🆕 评估详情面板 -->
211+
<!-- 评估详情面板 -->
248212
<EvaluationPanel
249213
v-bind="evaluationHandler.panelProps.value"
250214
@close="evaluationHandler.evaluation.closePanel"
@@ -259,7 +223,6 @@ import { ref, computed, inject, provide, type Ref } from 'vue'
259223
260224
import { useI18n } from "vue-i18n";
261225
import { NCard, NFlex, NButton, NText, NEmpty } from "naive-ui";
262-
import { useBreakpoints } from "@vueuse/core";
263226
import PromptPanelUI from "../PromptPanel.vue";
264227
import ConversationTestPanel from "./ConversationTestPanel.vue";
265228
import ConversationManager from "./ConversationManager.vue";
@@ -283,14 +246,6 @@ import type { IteratePayload, SaveFavoritePayload } from "../../types/workspace"
283246
import type { VariableManagerHooks } from '../../composables/prompt/useVariableManager'
284247
import type { AppServices } from '../../types/services'
285248
286-
// 响应式断点
287-
const breakpoints = useBreakpoints({
288-
mobile: 640,
289-
tablet: 1024,
290-
});
291-
const isMobile = breakpoints.smaller("mobile");
292-
293-
// Props 定义
294249
interface Props {
295250
// 核心状态
296251
optimizedReasoning?: string;

0 commit comments

Comments
 (0)