refactor(ui): 优化 PromptPanel 组件中版本选择按钮的样式和布局

- 调整版本选择按钮的样式，使其在不同屏幕宽度下都能良好显示- 添加相对定位和额外样式，以修复移动端和小屏幕下的样式问题
- 优化 HTML 结构，提高组件的可维护性

Author: linzehao

packages/ui/src/components/PromptPanel.vue

@@ -2,14 +2,16 @@
   <div class="flex flex-col h-full">
     <!-- 标题和按钮区域 -->
     <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0 mb-3 flex-none">
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-3 flex-wrap">
         <h3 class="text-lg font-semibold theme-text">{{ t('prompt.optimized') }}</h3>
-        <div v-if="versions && versions.length > 0" class="flex items-center gap-1">
+        <div v-if="versions && versions.length > 0" 
+             class="flex items-center gap-1 version-container"
+             style="position: relative;">
           <button
             v-for="version in versions.slice().reverse()"
             :key="version.id"
             @click="switchVersion(version)"
-            class="px-2 py-1 text-xs rounded transition-colors"
+            class="px-2 py-1 text-xs rounded transition-colors flex-shrink-0"
             :class="[
               currentVersionId === version.id
                 ? 'font-medium theme-prompt-version-selected'
@@ -20,7 +22,7 @@
           </button>
         </div>
       </div>
-      <div class="flex items-center space-x-4">
+      <div class="flex items-center space-x-4 flex-shrink-0">
         <button
           v-if="optimizedPrompt"
           @click="handleIterate"
@@ -244,4 +246,17 @@ textarea {
 textarea::-webkit-scrollbar {
   display: none; /* Chrome, Safari and Opera */
 }
+
+/* 版本容器样式 */
+.version-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+@media (max-width: 640px) {
+  .version-container {
+    margin-top: 4px;
+  }
+}
 </style>