feat: 执行查询前提示选择数据库

* Improve：执行查询前提示选择数据库

* Fix：补齐连接配置测试字段

---------

Co-authored-by: staff <staff@qimaos-MacBook-Pro.local>

apps/desktop/src/components/layout/EditorToolbar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watchEffect } from "vue";
+import { computed, ref, watch, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import { Play, Loader2, Square, Database, Check, Table2, AlignLeft, GitBranch, Save, FolderOpen, Layers, X, Shield, Upload } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
@@ -25,6 +25,7 @@ const props = defineProps<{
   explainMode?: string;
   blockDangerousRedisCommands?: boolean;
   sqlKeywordCase: "preserve" | "upper" | "lower";
+  databaseRequiredSignal?: number;
 }>();
 
 const emit = defineEmits<{
@@ -81,6 +82,22 @@ const activeSchemaOptions = computed(() => {
   if (!connection) return [];
   return getSchemaOptionsForDb(connection.id, schemaDatabaseKey.value);
 });
+const databaseRequiredVisible = ref(false);
+
+watch(
+  () => props.databaseRequiredSignal,
+  (signal) => {
+    if (!signal) return;
+    databaseRequiredVisible.value = false;
+    requestAnimationFrame(() => {
+      databaseRequiredVisible.value = true;
+    });
+  },
+);
+
+watch(activeDatabaseValue, (database) => {
+  if (database) databaseRequiredVisible.value = false;
+});
 
 watchEffect(() => {
   const connection = props.activeConnection;
@@ -254,8 +271,8 @@ function connectionById(connectionId: string): ConnectionConfig | undefined {
       <div
         v-if="activeConnection?.db_type !== 'elasticsearch' && activeConnection?.db_type !== 'qdrant' && activeConnection?.db_type !== 'milvus' && activeConnection?.db_type !== 'weaviate' && activeConnection?.db_type !== 'chromadb' && activeConnection?.db_type !== 'zookeeper' && !isSingleDb"
         class="flex items-center gap-1"
+        :class="{ 'database-required-prompt': databaseRequiredVisible }"
       >
-        <Database class="h-3.5 w-3.5 shrink-0" />
         <SearchableSelect
           :model-value="activeDatabaseValue"
           :options="activeDatabaseOptions.length ? activeDatabaseOptions : activeDatabaseValue ? [activeDatabaseValue] : []"
@@ -265,6 +282,7 @@ function connectionById(connectionId: string): ConnectionConfig | undefined {
           :loading-text="t('common.loading')"
           :loading="loadingDatabaseOptions[activeConnection?.id || '']"
           :display-name="databaseDisplayName"
+          trigger-class="gap-1.5"
           @update:model-value="(database) => emit('changeDatabase', database)"
           @update:open="
             (open: boolean) => {
@@ -272,6 +290,10 @@ function connectionById(connectionId: string): ConnectionConfig | undefined {
             }
           "
         >
+          <template #trigger-label="{ label, loading }">
+            <Database class="h-3.5 w-3.5 shrink-0" />
+            <span class="truncate">{{ loading ? t("common.loading") : label }}</span>
+          </template>
           <template #option-label="{ label }">
             <TruncatedTextTooltip :text="label" class="min-w-0 flex-1" side="left" :side-offset="8" />
           </template>
@@ -319,3 +341,33 @@ function connectionById(connectionId: string): ConnectionConfig | undefined {
     </div>
   </div>
 </template>
+
+<style scoped>
+.database-required-prompt {
+  color: var(--destructive);
+  animation: database-required-shake 420ms ease;
+}
+
+.database-required-prompt :deep(button) {
+  color: var(--destructive);
+  border-color: color-mix(in oklch, var(--destructive) 55%, transparent);
+  background: color-mix(in oklch, var(--destructive) 10%, transparent);
+}
+
+@keyframes database-required-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  12%,
+  36%,
+  60% {
+    transform: translateX(-3px);
+  }
+  24%,
+  48%,
+  72% {
+    transform: translateX(3px);
+  }
+}
+</style>