新增：连接管理、数据查询等功能

web/src/views/db-cli/components/result/ResultJson.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="result-json-container">
+    <pre class="result-json" v-html="highlightedJson"></pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  data: any[]
+}>()
+
+// 转义 HTML
+const escapeHtml = (str: string) => str
+  .replace(/&/g, '&amp;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+
+// JSON 高亮
+const highlightedJson = computed(() => {
+  const json = JSON.stringify(props.data, null, 2)
+  if (!json) return ''
+
+  return escapeHtml(json)
+    .replace(/: ("(?:[^"\\]|\\.)*")/g, ': <span class="json-string">$1</span>')
+    .replace(/: (-?\d+\.?\d*(?:e[+-]?\d+)?)/gi, ': <span class="json-number">$1</span>')
+    .replace(/: (true|false|null)/g, ': <span class="json-boolean">$1</span>')
+    .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
+})
+</script>
+
+<style scoped>
+.result-json-container {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+  padding: var(--spacing-sm, 8px);
+}
+
+.result-json {
+  margin: 0;
+  padding: var(--spacing-md, 16px);
+  border-radius: var(--border-radius-medium, 6px);
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background: linear-gradient(135deg, var(--color-bg-3) 0%, var(--color-bg-2) 100%);
+  color: var(--color-text-2);
+  border: 1px solid var(--color-border-2);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.result-json :deep(.json-key) {
+  color: rgb(var(--arcoblue-6, 22, 93, 255));
+  font-weight: 500;
+}
+
+.result-json :deep(.json-string) {
+  color: rgb(var(--green-6, 0, 180, 42));
+}
+
+.result-json :deep(.json-number) {
+  color: rgb(var(--orange-6, 255, 125, 0));
+}
+
+.result-json :deep(.json-boolean) {
+  color: rgb(var(--purple-6, 114, 46, 209));
+  font-weight: 500;
+}
+</style>