feat: add database workspace dashboard with stats and quick actions

src-tauri/tauri.conf.json

@@ -18,8 +18,7 @@
         "minWidth": 900,
         "minHeight": 600,
         "resizable": true,
-        "fullscreen": false,
-        "visible": false
+        "fullscreen": false
       }
     ],
     "security": {

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
-import { DatabaseZap, FilePlus2, Play, Loader2, X, Globe, Moon, Sun, Upload, Download, Plus, History, Server, Table2 } from "lucide-vue-next";
+import { DatabaseZap, FilePlus2, Play, Loader2, X, Globe, Moon, Sun, Upload, Download, Plus, History, Server, Table2, Database, Search, ShieldCheck, Sparkles } from "lucide-vue-next";
 import { Splitpanes, Pane } from "splitpanes";
 import "splitpanes/dist/splitpanes.css";
 import { Button } from "@/components/ui/button";
@@ -94,6 +94,14 @@ const activeDatabaseOptions = computed(() => {
 
 const activeDatabaseValue = computed(() => activeTab.value?.database || "");
 const activeConnectionValue = computed(() => activeConnection.value?.id || "");
+const connectionStats = computed(() => {
+  const total = connectionStore.connections.length;
+  const connected = connectionStore.connectedIds.size;
+  const types = new Set(connectionStore.connections.map((connection) => connection.db_type)).size;
+  return { total, connected, types };
+});
+
+const recentConnections = computed(() => connectionStore.connections.slice(0, 5));
 
 function connectionDisplayName(connectionId: string): string {
   return connectionStore.getConfig(connectionId)?.name || connectionId;
@@ -154,6 +162,15 @@ function newQuery() {
   queryStore.createTab(conn.id, conn.database || "");
 }
 
+async function openConnectionQuery(connectionId: string) {
+  const connection = connectionStore.getConfig(connectionId);
+  if (!connection) return;
+  const options = await getDatabaseOptions(connectionId);
+  const database = connection.database || options[0] || "";
+  connectionStore.activeConnectionId = connectionId;
+  queryStore.createTab(connectionId, database);
+}
+
 const DANGER_RE = /^\s*(DROP|DELETE|TRUNCATE|ALTER)\b/i;
 
 function isDangerousSql(sql: string): boolean {
@@ -597,15 +614,105 @@ onUnmounted(() => {
           </div>
 
           <!-- Empty State -->
-          <div v-else class="flex-1 flex items-center justify-center">
-            <div class="text-center">
-              <h2 class="text-lg font-medium mb-2">{{ t('welcome.title') }}</h2>
-              <p class="text-sm text-muted-foreground mb-4">
-                {{ t('welcome.subtitle') }}
-              </p>
-              <Button @click="showConnectionDialog = true">
-                <Plus class="h-4 w-4 mr-2" /> {{ t('toolbar.newConnection') }}
-              </Button>
+          <div v-else class="flex-1 overflow-auto bg-background">
+            <div class="mx-auto flex min-h-full w-full max-w-5xl flex-col justify-center gap-6 px-8 py-10">
+              <div class="flex items-start justify-between gap-6">
+                <div class="space-y-2">
+                  <div class="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                    <DatabaseZap class="h-4 w-4" />
+                    {{ t('app.name') }}
+                  </div>
+                  <h2 class="text-2xl font-semibold tracking-normal">{{ t('welcome.title') }}</h2>
+                  <p class="max-w-xl text-sm leading-6 text-muted-foreground">
+                    {{ t('welcome.subtitle') }}
+                  </p>
+                </div>
+                <div class="flex shrink-0 gap-2">
+                  <Button variant="outline" @click="showConnectionDialog = true">
+                    <Plus class="h-4 w-4" /> {{ t('toolbar.newConnection') }}
+                  </Button>
+                  <Button :disabled="!connectionStore.activeConnectionId" @click="newQuery">
+                    <FilePlus2 class="h-4 w-4" /> {{ t('toolbar.newQuery') }}
+                  </Button>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-3 gap-3">
+                <div class="rounded-lg border bg-muted/20 px-4 py-3">
+                  <div class="flex items-center gap-2 text-xs text-muted-foreground">
+                    <Database class="h-3.5 w-3.5" /> {{ t('welcome.connections') }}
+                  </div>
+                  <div class="mt-2 text-2xl font-semibold">{{ connectionStats.total }}</div>
+                </div>
+                <div class="rounded-lg border bg-muted/20 px-4 py-3">
+                  <div class="flex items-center gap-2 text-xs text-muted-foreground">
+                    <ShieldCheck class="h-3.5 w-3.5" /> {{ t('welcome.connected') }}
+                  </div>
+                  <div class="mt-2 text-2xl font-semibold">{{ connectionStats.connected }}</div>
+                </div>
+                <div class="rounded-lg border bg-muted/20 px-4 py-3">
+                  <div class="flex items-center gap-2 text-xs text-muted-foreground">
+                    <Sparkles class="h-3.5 w-3.5" /> {{ t('welcome.databaseTypes') }}
+                  </div>
+                  <div class="mt-2 text-2xl font-semibold">{{ connectionStats.types }}</div>
+                </div>
+              </div>
+
+              <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>
+                  <div class="divide-y">
+                    <button
+                      v-for="connection in recentConnections"
+                      :key="connection.id"
+                      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" />
+                      <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' }}
+                        </div>
+                      </div>
+                      <FilePlus2 class="h-4 w-4 text-muted-foreground" />
+                    </button>
+                    <div v-if="recentConnections.length === 0" class="px-4 py-8 text-sm text-muted-foreground">
+                      {{ t('sidebar.noConnections') }}
+                    </div>
+                  </div>
+                </div>
+
+                <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">
+                      <Plus class="h-4 w-4" /> {{ t('toolbar.newConnection') }}
+                    </button>
+                    <button class="flex items-center gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-muted/50" :disabled="!connectionStore.activeConnectionId" @click="newQuery">
+                      <FilePlus2 class="h-4 w-4" /> {{ t('toolbar.newQuery') }}
+                    </button>
+                    <button class="flex items-center gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-muted/50" @click="showHistory = true">
+                      <History class="h-4 w-4" /> {{ t('history.title') }}
+                    </button>
+                    <button class="flex items-center gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-muted/50" @click="connectionStore.importConnectionsFromFile()">
+                      <Upload class="h-4 w-4" /> {{ t('sidebar.import') }}
+                    </button>
+                    <div class="mt-2 rounded-md bg-muted/30 px-3 py-2 text-xs leading-5 text-muted-foreground">
+                      <Search class="mr-1 inline h-3.5 w-3.5" />
+                      {{ t('welcome.tip') }}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           </div>

src/components/sidebar/TreeItem.vue

@@ -125,6 +125,15 @@ async function toggle() {
   }
 }
 
+function onClick() {
+  const node = props.node;
+  if (node.type === "table" || node.type === "view") {
+    openData();
+  } else if (canExpand) {
+    toggle();
+  }
+}
+
 async function openData() {
   const node = props.node;
   if (!(node.type === "table" || node.type === "view") || !node.connectionId || !node.database) return;
@@ -215,8 +224,7 @@ function showMore() {
         <div
           class="flex items-center gap-1.5 py-1 px-2 rounded-sm cursor-pointer hover:bg-accent transition-colors"
           :style="{ paddingLeft }"
-          @click="canExpand && toggle()"
-          @dblclick="openData"
+          @click="onClick"
         >
           <template v-if="canExpand">
             <Loader2 v-if="node.isLoading" class="w-3.5 h-3.5 shrink-0 animate-spin text-muted-foreground" />

src/i18n/locales/en.ts

@@ -71,8 +71,16 @@ export default {
     rowsPerPageShort: " rows",
   },
   welcome: {
-    title: "Welcome to DBX",
-    subtitle: "Create a connection to get started",
+    title: "Database Workspace",
+    subtitle: "Choose a connection on the left to browse schema, or open a query tab directly. DBX supports multiple databases, query history, grid editing, and an AI SQL assistant.",
+    connections: "Connections",
+    connected: "Connected",
+    databaseTypes: "Database Types",
+    quickConnections: "Quick Start",
+    quickConnectionsHint: "Click a connection to open a query tab.",
+    shortcuts: "Shortcuts",
+    shortcutsHint: "Start the next action from here.",
+    tip: "You can also expand connections on the left and right-click databases or tables for more actions.",
   },
   common: {
     language: "Language",

src/i18n/locales/zh-CN.ts

@@ -71,8 +71,16 @@ export default {
     rowsPerPageShort: " 行/页",
   },
   welcome: {
-    title: "欢迎使用 DBX",
-    subtitle: "创建一个连接以开始使用",
+    title: "数据库工作台",
+    subtitle: "选择左侧连接开始浏览结构，或直接创建查询标签页。DBX 支持多种数据库、查询历史、数据表格编辑和 AI SQL 助手。",
+    connections: "连接",
+    connected: "已连接",
+    databaseTypes: "数据库类型",
+    quickConnections: "快速开始",
+    quickConnectionsHint: "点击连接即可新建查询标签页。",
+    shortcuts: "常用操作",
+    shortcutsHint: "从这里开始你的下一步。",
+    tip: "也可以在左侧展开连接，右键数据库或表查看更多操作。",
   },
   common: {
     language: "语言",

src/main.ts

@@ -2,7 +2,6 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import VueVirtualScroller from "vue-virtual-scroller";
 import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
-import { getCurrentWindow } from "@tauri-apps/api/window";
 import i18n from "./i18n";
 import App from "./App.vue";
 import "./styles/globals.css";
@@ -12,5 +11,3 @@ app.use(createPinia());
 app.use(i18n);
 app.use(VueVirtualScroller);
 app.mount("#root");
-
-getCurrentWindow().show();

src/stores/connectionStore.ts

@@ -436,6 +436,7 @@ export const useConnectionStore = defineStore("connection", () => {
     connections,
     activeConnectionId,
     treeNodes,
+    connectedIds,
     getConfig,
     addConnection,
     updateConnection,