github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 06:51:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nacos): improve config list scrolling

Browse Source 
* fix(nacos): improve config list scrolling

* fix(nacos): add resizable config list columns
This commit is contained in:
LSD authored and GitHub committed 2026-07-10 13:40:27 +08:00
1 parent 7b2f969356
commit 0efc724369
3 files changed
+229 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/nacos/NacosAdminConsole.vue
+38 -21
View File
@@ -13,6 +13,7 @@ import EditorSearchPanel from "@/components/editor/EditorSearchPanel.vue";
import NacosConfigDiffDialog from "@/components/nacos/NacosConfigDiffDialog.vue";
import NacosConfigHistoryDialog from "@/components/nacos/NacosConfigHistoryDialog.vue";
import { useToast } from "@/composables/useToast";
import { useNacosConfigListColumnResize } from "@/composables/useNacosConfigListColumnResize";
import { useConnectionStore } from "@/stores/connectionStore";
import { useI18n } from "vue-i18n";
import * as api from "@/lib/backend/api";
@@ -113,6 +114,7 @@ const NACOS_SPLIT_SIZE_KEY = "dbx-nacos-admin-split-size";
const savedNacosSplitSize = Number(safeLocalStorageGet(NACOS_SPLIT_SIZE_KEY));
const nacosSplitSize = ref(savedNacosSplitSize >= 20 && savedNacosSplitSize <= 80 ? savedNacosSplitSize : 42);
const CONNECTION_NOT_FOUND_RETRY_DELAYS_MS = [150, 350, 700];
const { gridTemplateColumns: configListGridTemplate, minWidth: configListMinWidth, resizingColumnIndex: configListResizingColumnIndex, onResizeStart: onConfigListColumnResizeStart } = useNacosConfigListColumnResize();
const namespace = computed(() => props.namespace ?? connectionInfo.value?.namespace ?? "");
const namespaceLabel = computed(() => props.namespaceName || namespace.value || "public");
@@ -909,28 +911,43 @@ onBeforeUnmount(() => {
</div>
<div v-if="configError" class="border-b px-3 py-2 text-xs text-destructive">{{ configError }}</div>
<div class="min-h-0 flex-1 overflow-auto">
<div class="sticky top-0 z-20 grid grid-cols-4 border-b bg-muted px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground shadow-sm">
<span class="truncate pr-3">dataID</span>
<span class="truncate pr-3">{{ t("nacos.group") }}</span>
<span class="truncate pr-3">{{ t("nacos.application") }}</span>
<span class="truncate">{{ t("nacos.format") }}</span>
<div class="min-w-max" :style="{ minWidth: configListMinWidth }">
<div class="sticky top-0 z-20 grid border-b bg-muted px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground shadow-sm" :style="{ gridTemplateColumns: configListGridTemplate }">
<div class="relative min-w-0 truncate pr-4">
<span class="truncate">dataID</span>
<div data-column-resize-handle class="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/30" :class="configListResizingColumnIndex === 0 ? 'bg-primary/30' : ''" @mousedown="onConfigListColumnResizeStart(0, $event)" />
</div>
<div class="relative min-w-0 truncate pr-4">
<span class="truncate">{{ t("nacos.group") }}</span>
<div data-column-resize-handle class="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/30" :class="configListResizingColumnIndex === 1 ? 'bg-primary/30' : ''" @mousedown="onConfigListColumnResizeStart(1, $event)" />
</div>
<div class="relative min-w-0 truncate pr-4">
<span class="truncate">{{ t("nacos.application") }}</span>
<div data-column-resize-handle class="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/30" :class="configListResizingColumnIndex === 2 ? 'bg-primary/30' : ''" @mousedown="onConfigListColumnResizeStart(2, $event)" />
</div>
<div class="relative min-w-0 truncate pr-4">
<span class="truncate">{{ t("nacos.format") }}</span>
<div data-column-resize-handle class="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/30" :class="configListResizingColumnIndex === 3 ? 'bg-primary/30' : ''" @mousedown="onConfigListColumnResizeStart(3, $event)" />
</div>
</div>
<button
v-for="item in configs"
:key="`${item.namespace}:${item.group}:${item.dataId}`"
type="button"
class="grid w-full items-center border-b px-3 py-2.5 text-left text-sm transition-colors hover:bg-accent/50"
:class="{ 'bg-accent': selectedConfig?.dataId === item.dataId && selectedConfig?.group === item.group }"
:style="{ gridTemplateColumns: configListGridTemplate }"
@click="selectConfig(item)"
>
<span class="flex min-w-0 items-center gap-2 pr-3" :title="item.dataId">
<FileText class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span class="truncate font-medium text-foreground">{{ item.dataId }}</span>
</span>
<span class="truncate pr-3 text-xs text-muted-foreground" :title="item.group || 'DEFAULT_GROUP'">{{ item.group || "DEFAULT_GROUP" }}</span>
<span class="truncate pr-3 text-xs text-muted-foreground" :title="item.appName || '-'">{{ item.appName || "-" }}</span>
<span class="truncate text-xs text-muted-foreground" :title="configFormatLabel(item)">{{ configFormatLabel(item) }}</span>
</button>
</div>
<button
v-for="item in configs"
:key="`${item.namespace}:${item.group}:${item.dataId}`"
type="button"
class="grid w-full grid-cols-4 items-center border-b px-3 py-2.5 text-left text-sm transition-colors hover:bg-accent/50"
:class="{ 'bg-accent': selectedConfig?.dataId === item.dataId && selectedConfig?.group === item.group }"
@click="selectConfig(item)"
>
<span class="flex min-w-0 items-center gap-2 pr-3" :title="item.dataId">
<FileText class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span class="truncate font-medium text-foreground">{{ item.dataId }}</span>
</span>
<span class="truncate pr-3 text-xs text-muted-foreground" :title="item.group || 'DEFAULT_GROUP'">{{ item.group || "DEFAULT_GROUP" }}</span>
<span class="truncate pr-3 text-xs text-muted-foreground" :title="item.appName || '-'">{{ item.appName || "-" }}</span>
<span class="truncate text-xs text-muted-foreground" :title="configFormatLabel(item)">{{ configFormatLabel(item) }}</span>
</button>
<div v-if="!configLoading && configs.length === 0" class="flex h-full items-center justify-center text-sm text-muted-foreground">{{ t("nacos.noConfigs") }}</div>
</div>
<div class="flex shrink-0 items-center justify-between border-t px-3 py-2 text-xs text-muted-foreground">