caoxiaozhu/X-Agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复空状态显示问题，添加DDL编辑功能

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-07 10:33:45 +08:00
parent 2eddc53249
commit 945cf6c950
4 changed files with 85 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/assets/styles/index.css
View File

@@ -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 {

68
web/src/views/Database.vue
View File

@@ -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>

62
web/src/views/database/database.css
View File

@@ -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;
}
/* 表格复选框 */

5
web/src/views/database/useDatabase.ts
View File

@@ -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 {