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

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>