github/dbx
4
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-29 16:18:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): 优化表格与 SQL 文件弹窗布局

Browse Source
This commit is contained in:
t8y2
2026-05-09 17:54:38 +08:00
parent 67bc43e997
commit e984f698b2
2 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/grid/DataGrid.vue
+8 -8
View File
@@ -1834,8 +1834,8 @@ defineExpose({
autocapitalize="off"
autocorrect="off"
spellcheck="false"
class="flex-1 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground"
placeholder="id > 100"
class="flex-1 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground/60"
placeholder="condition..."
@keydown="onWhereFilterKeydown"
@click="updateWhereSuggestionPosition"
@blur="dismissWhereSuggestions"
@@ -1885,8 +1885,8 @@ defineExpose({
autocapitalize="off"
autocorrect="off"
spellcheck="false"
class="flex-1 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground"
placeholder="column desc"
class="flex-1 h-5 min-w-0 text-xs bg-transparent outline-none placeholder:text-muted-foreground/60"
placeholder="columns..."
@keydown="onOrderByKeydown"
@click="updateOrderBySuggestionPosition"
@blur="dismissOrderBySuggestions"
@@ -1949,7 +1949,7 @@ defineExpose({
<SelectTrigger class="h-6 w-28 px-2 text-xs">
<SelectValue :placeholder="t('grid.filterRows')" />
</SelectTrigger>
<SelectContent>
<SelectContent position="popper">
<SelectItem value="all">{{ t("grid.filterAllRows") }}</SelectItem>
<SelectItem value="changed">{{ t("grid.filterChangedRows") }}</SelectItem>
<SelectItem value="edited">{{ t("grid.statusEdited") }}</SelectItem>
@@ -1994,8 +1994,8 @@ defineExpose({
<div class="flex-1 flex min-h-0 overflow-hidden">
<div class="flex-1 flex flex-col min-w-0 overflow-hidden">
<!-- Sticky header -->
<div ref="headerRef" class="shrink-0 bg-muted z-10 border-b border-border overflow-hidden">
<div class="flex text-xs font-medium" :style="{ width: 'var(--total-w)' }">
<div ref="headerRef" class="shrink-0 bg-muted/60 z-10 border-y border-border overflow-hidden">
<div class="flex text-xs font-semibold text-foreground" :style="{ width: 'var(--total-w)' }">
<div
class="shrink-0 px-2 py-1.5 border-r border-border text-center text-muted-foreground select-none"
:style="{ width: 'var(--row-num-w)' }"
@@ -2005,7 +2005,7 @@ defineExpose({
<Tooltip v-for="(col, colIdx) in result.columns" :key="`${col}-${colIdx}`">
<TooltipTrigger as-child>
<div
class="shrink-0 px-3 py-1.5 border-r border-border whitespace-nowrap cursor-pointer hover:bg-accent/50 select-none relative overflow-hidden"
class="shrink-0 px-3 py-1.5 border-r border-border whitespace-nowrap cursor-pointer hover:bg-accent/60 select-none relative overflow-hidden"
:style="{ width: `var(--col-w-${colIdx})` }"
@click="toggleSort(col, colIdx)"
>
src/components/sql-file/SqlFileExecutionDialog.vue
+12 -10
View File
@@ -336,7 +336,7 @@ watch(open, (value) => {
<template>
<Dialog :open="open" @update:open="handleOpenChange">
<DialogScrollContent class="sm:max-w-[620px]" :trap-focus="false" @interact-outside.prevent>
<DialogScrollContent class="sm:max-w-[620px] min-w-0 overflow-hidden" :trap-focus="false" @interact-outside.prevent>
<DialogHeader>
<DialogTitle class="flex items-center gap-2">
<FileCode class="w-4 h-4" />
@@ -344,8 +344,8 @@ watch(open, (value) => {
</DialogTitle>
</DialogHeader>
<div class="grid gap-4 py-3">
<div class="space-y-3">
<div class="grid min-w-0 gap-4 py-3">
<div class="min-w-0 space-y-3">
<div class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
{{ t("sqlFile.file") }}
</div>
@@ -370,7 +370,7 @@ watch(open, (value) => {
</Button>
</div>
<div v-if="preview" class="border rounded-md overflow-hidden">
<div v-if="preview" class="min-w-0 max-w-full border rounded-md overflow-hidden">
<div class="flex items-center justify-between gap-3 px-3 py-2 text-xs border-b bg-muted/40">
<div class="min-w-0 flex items-center gap-2">
<FileCode class="w-3.5 h-3.5 text-muted-foreground shrink-0" />
@@ -378,13 +378,13 @@ watch(open, (value) => {
</div>
<span class="text-muted-foreground shrink-0">{{ formatBytes(preview.sizeBytes) }}</span>
</div>
<pre class="max-h-40 overflow-auto p-3 text-xs font-mono whitespace-pre-wrap bg-muted/15">{{
<pre class="max-h-40 max-w-full overflow-auto p-3 text-xs font-mono whitespace-pre bg-muted/15">{{
preview.preview
}}</pre>
</div>
</div>
<div class="space-y-3">
<div class="min-w-0 space-y-3">
<div class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
{{ t("sqlFile.target") }}
</div>
@@ -437,7 +437,7 @@ watch(open, (value) => {
</div>
</div>
<div class="space-y-2.5">
<div class="min-w-0 space-y-2.5">
<div class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
{{ t("sqlFile.options") }}
</div>
@@ -454,7 +454,7 @@ watch(open, (value) => {
</button>
</div>
<div v-if="running || terminalStatus !== 'idle' || progress" class="space-y-3">
<div v-if="running || terminalStatus !== 'idle' || progress" class="min-w-0 space-y-3">
<div class="flex items-center justify-between gap-3 text-xs">
<div class="flex items-center gap-1.5 min-w-0" :class="statusTone">
<component :is="statusIcon" class="w-3.5 h-3.5 shrink-0" :class="{ 'animate-spin': running }" />
@@ -508,14 +508,16 @@ watch(open, (value) => {
<div v-if="progress?.statementSummary" class="space-y-1">
<Label class="text-xs">{{ t("sqlFile.currentStatement") }}</Label>
<div class="border rounded-md p-2 text-xs font-mono bg-muted/15 max-h-20 overflow-auto whitespace-pre-wrap">
<div
class="max-h-20 max-w-full overflow-auto rounded-md border bg-muted/15 p-2 text-xs font-mono whitespace-pre"
>
{{ progress.statementSummary }}
</div>
</div>
<div
v-if="progress?.error || terminalError"
class="border rounded-md p-2 text-xs text-destructive bg-destructive/5"
class="max-w-full overflow-auto rounded-md border bg-destructive/5 p-2 text-xs text-destructive whitespace-pre-wrap"
>
{{ progress?.error || terminalError }}
</div>