From 2c9297df83b476c720e6e99294e537eb81d8875a Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Wed, 29 Apr 2026 23:34:15 +0800
Subject: [PATCH] feat: add DatabaseIcon component for improved database
 representation in connection list

---
 src/App.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fc31d71a68..c7102435b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,6 +20,7 @@ import DataGrid from "@/components/grid/DataGrid.vue";
 import RedisKeyBrowser from "@/components/redis/RedisKeyBrowser.vue";
 import AiAssistant from "@/components/editor/AiAssistant.vue";
 import MongoDocBrowser from "@/components/mongo/MongoDocBrowser.vue";
+import DatabaseIcon from "@/components/icons/DatabaseIcon.vue";
 import QueryHistory from "@/components/editor/QueryHistory.vue";
 import DangerConfirmDialog from "@/components/editor/DangerConfirmDialog.vue";
 import type { ConnectionConfig } from "@/types/database";
@@ -689,10 +690,7 @@ async function setupFileDrop() {
               <div class="grid grid-cols-[1.2fr_0.8fr] gap-4">
                 <div class="rounded-lg border">
                   <div class="flex items-center justify-between border-b px-4 py-3">
-                    <div>
-                      <div class="text-sm font-medium">{{ t('welcome.quickConnections') }}</div>
-                      <div class="text-xs text-muted-foreground">{{ t('welcome.quickConnectionsHint') }}</div>
-                    </div>
+                    <div class="text-sm font-medium">{{ t('welcome.quickConnections') }}</div>
                   </div>
                   <div class="divide-y">
                     <button
@@ -701,11 +699,11 @@ async function setupFileDrop() {
                       class="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-muted/40"
                       @click="openConnectionQuery(connection.id)"
                     >
-                      <Database class="h-4 w-4 text-muted-foreground" />
+                      <DatabaseIcon :db-type="connection.db_type" class="h-4 w-4" />
                       <div class="min-w-0 flex-1">
                         <div class="truncate text-sm font-medium">{{ connection.name }}</div>
                         <div class="truncate text-xs text-muted-foreground">
-                          {{ connection.db_type.toUpperCase() }} · {{ connection.host || connection.database || 'local' }}
+                          {{ connection.db_type.toUpperCase() }} · {{ connection.host || connection.database || 'local' }}{{ connection.port ? ':' + connection.port : '' }}
                         </div>
                       </div>
                       <FilePlus2 class="h-4 w-4 text-muted-foreground" />
@@ -719,7 +717,6 @@ async function setupFileDrop() {
                 <div class="rounded-lg border">
                   <div class="border-b px-4 py-3">
                     <div class="text-sm font-medium">{{ t('welcome.shortcuts') }}</div>
-                    <div class="text-xs text-muted-foreground">{{ t('welcome.shortcutsHint') }}</div>
                   </div>
                   <div class="grid gap-1 p-2">
                     <button class="flex items-center gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-muted/50" @click="showConnectionDialog = true">