feat(filters): fragment presets and code-block send log detail

This commit is contained in:
RhenCloud 2026-08-18 13:45:23 +08:00
parent c090281cb2
commit 2807c97c5f
No known key found for this signature in database
GPG key ID: A574A617378C4E0B
5 changed files with 105 additions and 8 deletions

View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue";
import type { Filter, FilterNode, NamedFragment, Route, RouteTarget, RouteTemplate } from "~/types";
import { ROUTE_TEMPLATES } from "~/types";
import { FRAGMENT_PRESETS, ROUTE_TEMPLATES } from "~/types";
import type { NodeForm } from "~/composables/useFilterNode";
import { blankLeafForm, blankNode, nodeToForm, nodeFormToRouteFilters, formToNode } from "~/composables/useFilterNode";
@ -197,8 +197,8 @@ async function runTest(): Promise<void> {
}
}
function insertFragment(frag: NamedFragment): void {
const child = nodeToForm(frag.node);
function insertNode(node: FilterNode): void {
const child = nodeToForm(node);
if (root.value.kind === "all" || root.value.kind === "any") {
root.value.children.push(child);
} else {
@ -211,6 +211,10 @@ function insertFragment(frag: NamedFragment): void {
}
}
function insertFragment(frag: NamedFragment): void {
insertNode(frag.node);
}
async function saveAsFragment(): Promise<void> {
fragmentError.value = "";
const name = fragmentName.value.trim();
@ -407,6 +411,19 @@ watch(
<section v-if="groupId" class="editor-section">
<h3 class="editor-section-title">{{ t("routeEditor.fragments") }}</h3>
<div class="fragments-presets">
<span class="hint">{{ t("routeEditor.fragmentsPresets") }}</span>
<div v-for="preset in FRAGMENT_PRESETS" :key="preset.id" class="fragment-row">
<span class="fragment-name">{{ t(preset.nameKey) }}</span>
<button
type="button"
class="btn btn-ghost fragment-action"
@click="insertNode(preset.node)"
>
{{ t("routeEditor.fragmentsInsert") }}
</button>
</div>
</div>
<div class="fragments-list">
<div v-if="!fragments.length" class="hint">{{ t("routeEditor.fragmentsEmpty") }}</div>
<div v-for="frag in fragments" :key="frag.id" class="fragment-row">

View file

@ -69,7 +69,8 @@
<template v-for="row in detailRows" :key="row.label">
<dt>{{ row.label }}</dt>
<dd>
<code v-if="row.code">{{ row.value }}</code>
<pre v-if="row.block" class="log-block">{{ row.value }}</pre>
<code v-else-if="row.code">{{ row.value }}</code>
<span v-else>{{ row.value }}</span>
</dd>
</template>
@ -107,8 +108,8 @@ const detailError = ref("");
const detailRows = computed(() => {
const l = detail.value;
if (!l) return [] as Array<{ label: string; value: string; code?: boolean }>;
const rows: Array<{ label: string; value: string; code?: boolean }> = [
if (!l) return [] as Array<{ label: string; value: string; code?: boolean; block?: boolean }>;
const rows: Array<{ label: string; value: string; code?: boolean; block?: boolean }> = [
{ label: t("logs.id"), value: String(l.id ?? "-"), code: true },
{ label: t("logs.time"), value: fmtTime(l.ts) },
{ label: t("logs.route"), value: l.routeId, code: true },
@ -125,13 +126,13 @@ const detailRows = computed(() => {
{ label: t("logs.duration"), value: l.durationMs != null ? `${l.durationMs} ms` : "-" },
{ label: t("logs.attempts"), value: l.attempts != null ? String(l.attempts) : "-" },
{ label: t("logs.ok"), value: l.ok ? t("logs.yes") : t("logs.no") },
{ label: t("logs.error"), value: l.error || "-" },
{ label: t("logs.error"), value: l.error || "-", block: true },
];
if (l.detail && Object.keys(l.detail).length > 0) {
rows.push({
label: t("logs.detail"),
value: JSON.stringify(l.detail, null, 2),
code: true,
block: true,
});
}
return rows;