From ba26450d4c3c5cfcee13cf5c0c7bee2accd2b946 Mon Sep 17 00:00:00 2001
From: qian <wuchengqian5@163.com>
Date: Thu, 27 Aug 2026 23:15:07 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=E4=BF=AE=E5=A4=8D=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E5=B9=BF=E5=9C=BA=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/service/PlaygroundPage.vue      | 33 +++++++++----------
 .../src/views/service/playground/ChatTab.vue  | 24 +++++++++++---
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/web/tenant/src/views/service/PlaygroundPage.vue b/web/tenant/src/views/service/PlaygroundPage.vue
index 5334179..ace4f5b 100644
--- a/web/tenant/src/views/service/PlaygroundPage.vue
+++ b/web/tenant/src/views/service/PlaygroundPage.vue
@@ -80,16 +80,11 @@ watch(selectedKeyId, loadModels, { immediate: true })
 
 <template>
 	<div>
-		<div class="page-header">
-			<h1 class="page-title">API Playground</h1>
-			<p class="page-description">在线调试 AI 模型。不同大模型参数不一致，此处仅做简单功能演示，验证资源可用。请还用API调用获取最佳体验。</p>
-		</div>
-
-		<!-- Toolbar: 分类标签 + API Key 选择器 -->
-		<div class="card mb-6">
-			<div class="flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
-				<!-- 分类标签 -->
-				<div class="tabs">
+		<!-- 紧凑工具栏：左侧模型类型标签 + 右侧 API Key 单行收纳 -->
+		<div class="card mb-3">
+			<div class="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-3 sm:px-5">
+				<!-- 左侧：模型类型标签 -->
+				<div class="tabs flex-wrap">
 					<button v-for="tab in tabs" :key="tab.key"
 						class="tab"
 						:class="{ 'tab-active': activeTab === tab.key }"
@@ -98,8 +93,16 @@ watch(selectedKeyId, loadModels, { immediate: true })
 					</button>
 				</div>
 
-				<!-- API Key 区域 -->
-				<div class="flex shrink-0 items-center gap-2">
+				<!-- 模型加载指示内联在工具栏中，避免独立行造成的布局跳动 -->
+				<transition name="fade">
+					<div v-if="modelsLoading" class="flex shrink-0 items-center gap-1.5 text-xs text-gray-400">
+						<div class="spinner h-3.5 w-3.5 text-primary-600"></div>
+						加载模型...
+					</div>
+				</transition>
+
+				<!-- 右侧：API Key 区域 -->
+				<div class="ml-auto flex shrink-0 items-center gap-2">
 					<!-- 加载中 -->
 					<template v-if="keyLoading">
 						<div class="spinner h-4 w-4 text-primary-600"></div>
@@ -128,12 +131,6 @@ watch(selectedKeyId, loadModels, { immediate: true })
 		</div>
 
 		<template v-if="revealedKey">
-			<transition name="fade">
-				<div v-if="modelsLoading" class="mb-4 flex items-center gap-2 text-sm text-gray-500">
-					<div class="spinner h-4 w-4 text-primary-600"></div>
-					加载模型...
-				</div>
-			</transition>
 			<ChatTab v-if="activeTab === 'chat'" :models="modelsByCategory('chat').value" :api-key="revealedKey" />
 			<ImageTab v-if="activeTab === 'image'" :models="modelsByCategory('image').value" :api-key="revealedKey" />
 			<VideoTab v-if="activeTab === 'video'" :models="modelsByCategory('video').value" :api-key="revealedKey" />
diff --git a/web/tenant/src/views/service/playground/ChatTab.vue b/web/tenant/src/views/service/playground/ChatTab.vue
index ae7a456..8fe88d0 100644
--- a/web/tenant/src/views/service/playground/ChatTab.vue
+++ b/web/tenant/src/views/service/playground/ChatTab.vue
@@ -48,6 +48,7 @@ const params = reactive({
 	systemPrompt: '',
 	topP: 1.0,
 	stream: true,
+	thinking: false,
 })
 
 const imageConfig = reactive({
@@ -101,6 +102,10 @@ function buildRequestBody(apiMessages: { role: string; content: string }[]) {
 		max_tokens: params.maxTokens,
 		stream: params.stream,
 	}
+	// 思考控制：通过 thinking 参数开关（{"type": "enabled"} / {"type": "disabled"}），图片模型不参与
+	if (!isImageModel.value) {
+		body.thinking = { type: params.thinking ? 'enabled' : 'disabled' }
+	}
 	if (params.stream) {
 		body.stream_options = { include_usage: true }
 	}
@@ -284,11 +289,13 @@ function clearChat() {
 </script>
 
 <template>
-	<div class="flex flex-col lg:h-[calc(100vh-20rem)] lg:overflow-hidden">
-		<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 lg:min-h-0 lg:flex-1">
+	<!-- 高度偏移 ≈ 顶栏与页边距(约128px) + 上方工具栏卡片(约116px)，保证对话卡片完整落在视口内 -->
+	<div class="flex flex-col lg:h-[calc(100vh-15.5rem)] lg:overflow-hidden">
+		<!-- grid-rows minmax(0,1fr) 强制行高等于容器高，配合左列内部滚动，避免行高被参数卡撑破导致底部输入框被裁切 -->
+		<div class="grid grid-cols-1 lg:grid-cols-4 lg:grid-rows-[minmax(0,1fr)] gap-6 lg:min-h-0 lg:flex-1">
 			<!-- Left: Parameters -->
-			<div class="lg:col-span-1">
-				<div class="card lg:sticky lg:top-6">
+			<div class="lg:col-span-1 lg:min-h-0 lg:overflow-y-auto lg:pr-1">
+				<div class="card">
 					<div class="card-header">
 						<h3 class="text-sm font-semibold text-gray-900">参数配置</h3>
 					</div>
@@ -313,6 +320,13 @@ function clearChat() {
 							<label class="input-label">System Prompt</label>
 							<n-input v-model:value="params.systemPrompt" type="textarea" :rows="3" placeholder="设置系统提示词..." />
 						</div>
+						<div v-if="!isImageModel">
+							<div class="flex items-center justify-between">
+								<label class="input-label mb-0">深度思考</label>
+								<n-switch v-model:value="params.thinking" />
+							</div>
+							<p class="mt-1 text-xs text-gray-400">通过 thinking 参数控制开关，仅对支持的模型生效</p>
+						</div>
 						<div class="flex items-center justify-between">
 							<label class="input-label mb-0">流式响应</label>
 							<n-switch v-model:value="params.stream" />
@@ -335,7 +349,7 @@ function clearChat() {
 			</div>
 
 			<!-- Right: Chat -->
-			<div class="lg:col-span-3 min-h-0 h-[65vh] lg:h-auto">
+			<div class="h-[65vh] lg:col-span-3 lg:h-auto lg:min-h-0">
 				<div class="card flex flex-col h-full overflow-hidden">
 					<div class="px-6 py-2 bg-amber-50 border-b border-amber-200 text-center">
 						<span class="text-xs text-amber-700 font-medium">Playground 模式 — 使用真实 API Key 调用，产生实际费用</span>