From 945cf6c9509c82cc56c18d9c879e335a22361f7a Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Sat, 7 Mar 2026 10:33:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A9=BA=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0DDL=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复无数据时重复显示空状态的问题
- 将DDL展示改为可编辑的textarea
- 优化空状态UI样式和提示文案

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/assets/styles/index.css       | 10 +++-
 web/src/views/Database.vue            | 68 +++++++--------------------
 web/src/views/database/database.css   | 62 ++++++++++++++++++++++--
 web/src/views/database/useDatabase.ts |  5 +-
 4 files changed, 85 insertions(+), 60 deletions(-)

diff --git a/web/src/assets/styles/index.css b/web/src/assets/styles/index.css
index 08c883e..fcfef52 100644
--- a/web/src/assets/styles/index.css
+++ b/web/src/assets/styles/index.css
@@ -286,8 +286,14 @@ html.dark .el-select-dropdown__item.is-selected {
 
 /* el-checkbox */
 html.dark .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: #ffb700;
-  border-color: #ffb700;
+  background-color: transparent;
+  border-color: #ff9500;
+}
+
+html.dark .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
+  border-color: #ff9500 !important;
+  width: 4px;
+  height: 8px;
 }
 
 html.dark .el-checkbox .el-checkbox__label {
diff --git a/web/src/views/Database.vue b/web/src/views/Database.vue
index de5e5e0..d11ef2a 100644
--- a/web/src/views/Database.vue
+++ b/web/src/views/Database.vue
@@ -85,7 +85,7 @@ const {
         <i class="fa-solid fa-circle-notch fa-spin text-2xl mb-2"></i>
         <p>Loading...</p>
       </div>
-      <table v-else class="w-full">
+      <table v-else-if="filteredDatabases().length > 0" class="w-full">
         <thead class="bg-dark-600">
           <tr>
             <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Database Name</th>
@@ -142,9 +142,12 @@ const {
       </table>
 
       <!-- 空状态 -->
-      <div v-if="filteredDatabases().length === 0" class="empty-state">
-        <i class="fa-solid fa-database empty-state-icon"></i>
-        <p>No databases found</p>
+      <div v-else class="empty-box">
+        <div class="empty-icon">
+          <i class="fa-solid fa-database"></i>
+        </div>
+        <p class="empty-text">No databases found</p>
+        <p class="empty-tip">Click "New Connection" to add a database</p>
       </div>
     </div>
 
@@ -516,11 +519,11 @@ const {
               </div>
             </template>
 
-            <!-- 步骤2：DDL和字段映射 -->
+            <!-- 步骤2：DDL编辑 -->
             <template v-if="mappingStep === 2">
-              <!-- DDL 展示 -->
-              <div class="p-4 border-b border-dark-600 bg-dark-900/50">
-                <div class="flex items-center justify-between mb-2">
+              <!-- DDL 编辑区域 -->
+              <div class="flex-1 p-4 overflow-hidden">
+                <div class="flex items-center justify-between mb-3">
                   <span class="text-sm font-medium text-gray-300">DDL - {{ selectedTable?.name }}</span>
                   <div class="flex items-center gap-2">
                     <button
@@ -542,49 +545,12 @@ const {
                     </button>
                   </div>
                 </div>
-                <div v-if="selectedTable" class="bg-dark-950 rounded-lg p-4 max-h-32 overflow-auto">
-                  <pre class="text-xs text-primary-cyan font-mono whitespace-pre-wrap">{{ selectedTable.ddl }}</pre>
-                </div>
-              </div>
-
-              <!-- 字段映射表格 - 卡片式布局 -->
-              <div class="flex-1 overflow-auto p-4">
-                <div v-if="selectedTable" class="space-y-2">
-                  <!-- 表头 -->
-                  <div class="grid grid-cols-12 gap-4 px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    <div class="col-span-3">Field Name</div>
-                    <div class="col-span-2">Type</div>
-                    <div class="col-span-7">Comment / Mapping</div>
-                  </div>
-                  <!-- 字段行 -->
-                  <div
-                    v-for="col in selectedTable.columns"
-                    :key="col.name"
-                    class="grid grid-cols-12 gap-4 items-center px-4 py-3 bg-dark-800 rounded-lg border border-dark-600"
-                  >
-                    <!-- 字段名 -->
-                    <div class="col-span-3 flex items-center gap-2">
-                      <div class="w-6 h-6 rounded bg-primary-yellow/20 flex items-center justify-center flex-shrink-0">
-                        <i class="fa-solid fa-key text-xs text-primary-yellow"></i>
-                      </div>
-                      <span class="font-medium text-primary-yellow truncate" :title="col.name">{{ col.name }}</span>
-                    </div>
-                    <!-- 类型 -->
-                    <div class="col-span-2">
-                      <span class="inline-flex items-center px-2 py-1 rounded-md bg-dark-600 text-gray-400 text-xs font-mono">
-                        {{ col.type }}
-                      </span>
-                    </div>
-                    <!-- 注释输入 -->
-                    <div class="col-span-7">
-                      <input
-                        v-model="col.mapped_name"
-                        type="text"
-                        :placeholder="col.comment || 'Enter comment...'"
-                        class="w-full bg-dark-700 border border-dark-500 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan focus:ring-1 focus:ring-primary-cyan/30 transition-all"
-                      >
-                    </div>
-                  </div>
+                <div v-if="selectedTable" class="h-[calc(100%-40px)]">
+                  <textarea
+                    v-model="selectedTable.ddl"
+                    class="w-full h-full bg-dark-950 border border-dark-500 rounded-lg p-4 text-xs text-primary-cyan font-mono whitespace-pre-wrap resize-none focus:outline-none focus:border-primary-cyan focus:ring-1 focus:ring-primary-cyan/30 overflow-auto"
+                    placeholder="Enter DDL..."
+                  ></textarea>
                 </div>
               </div>
             </template>
diff --git a/web/src/views/database/database.css b/web/src/views/database/database.css
index 2a1ed25..fde1b9b 100644
--- a/web/src/views/database/database.css
+++ b/web/src/views/database/database.css
@@ -30,13 +30,69 @@
   @apply border-b border-dark-600 hover:bg-dark-600/50 transition-colors;
 }
 
-/* 空状态 */
+/* 空状态（已不使用） */
 .empty-state {
-  @apply py-16 text-center text-gray-500;
+  @apply py-16 text-center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 自定义空状态盒子 */
+.empty-box {
+  min-height: 340px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-icon {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #1f2937, #111827);
+  border-radius: 24px;
+  margin-bottom: 20px;
+}
+
+.empty-icon i {
+  font-size: 40px;
+  color: #6b7280;
+}
+
+.empty-text {
+  color: #d1d5db;
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.empty-tip {
+  color: #6b7280;
+  font-size: 0.875rem;
 }
 
 .empty-state-icon {
-  @apply text-4xl mb-4 block;
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  display: block;
+  color: #4b5563;
+}
+
+.empty-state-title {
+  color: #d1d5db;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.empty-state-hint {
+  color: #6b7280;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
 }
 
 /* 表格复选框 */
diff --git a/web/src/views/database/useDatabase.ts b/web/src/views/database/useDatabase.ts
index e0283c4..295890d 100644
--- a/web/src/views/database/useDatabase.ts
+++ b/web/src/views/database/useDatabase.ts
@@ -482,10 +482,7 @@ export function useDatabase() {
       parent_table: table.name,
       sub_table_name: table.table_comment || table.name,
       sub_table_comment: table.table_comment || '',
-      fields: (table.columns || []).map(col => ({
-        column_name: col.name,
-        mapped_name: col.mapped_name || '',
-      })),
+      ddl: table.ddl || '',
     }))
 
     try {