From 8db2bb7a2f929680f591ab1d7d4515419c29712f Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 01:20:04 +0800
Subject: [PATCH 01/19] =?UTF-8?q?feat:=20JSON/XML=20=E8=BF=90=E8=A1=8C?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E6=A0=BC=E5=BC=8F=E5=8C=96+=E6=A0=A1?=
 =?UTF-8?q?=E9=AA=8C=E8=80=8C=E9=9D=9E=20cat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- JSON 运行: python3 -m json.tool（美化输出，非法 JSON 报错）
- XML 运行: xmllint --format（格式化，非法 XML 报错），xmllint 为 macOS 自带
---
 src-tauri/src/plugins/json.rs | 5 +++--
 src-tauri/src/plugins/xml.rs  | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src-tauri/src/plugins/json.rs b/src-tauri/src/plugins/json.rs
index e228d3a..3e0e4c8 100644
--- a/src-tauri/src/plugins/json.rs
+++ b/src-tauri/src/plugins/json.rs
@@ -37,7 +37,8 @@ impl LanguagePlugin for JsonPlugin {
             before_compile: None,
             extension: String::from("json"),
             execute_home: None,
-            run_command: Some(String::from("cat $filename")),
+            // 运行=格式化+校验：python3 -m json.tool 会美化输出并对非法 JSON 报错
+            run_command: Some(String::from("python3 -m json.tool $filename")),
             after_compile: None,
             template: Some(String::from("{\n  \n}")),
             timeout: Some(30),
@@ -49,6 +50,6 @@ impl LanguagePlugin for JsonPlugin {
     fn get_default_command(&self) -> String {
         self.get_config()
             .and_then(|config| config.run_command.clone())
-            .unwrap_or_else(|| "cat".to_string())
+            .unwrap_or_else(|| "python3".to_string())
     }
 }
diff --git a/src-tauri/src/plugins/xml.rs b/src-tauri/src/plugins/xml.rs
index 31e4eeb..a1bd8c5 100644
--- a/src-tauri/src/plugins/xml.rs
+++ b/src-tauri/src/plugins/xml.rs
@@ -37,7 +37,8 @@ impl LanguagePlugin for XmlPlugin {
             before_compile: None,
             extension: String::from("xml"),
             execute_home: None,
-            run_command: Some(String::from("cat $filename")),
+            // 运行=格式化+校验：xmllint（macOS 自带）格式化输出并对非法 XML 报错
+            run_command: Some(String::from("xmllint --format $filename")),
             after_compile: None,
             template: Some(String::from("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n")),
             timeout: Some(30),
@@ -49,6 +50,6 @@ impl LanguagePlugin for XmlPlugin {
     fn get_default_command(&self) -> String {
         self.get_config()
             .and_then(|config| config.run_command.clone())
-            .unwrap_or_else(|| "cat".to_string())
+            .unwrap_or_else(|| "xmllint".to_string())
     }
 }

From 6b77f91aec7973668011b0830956b329e81f4128 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 01:24:22 +0800
Subject: [PATCH 02/19] =?UTF-8?q?feat:=20JSON=20=E8=BF=90=E8=A1=8C?=
 =?UTF-8?q?=E6=94=B9=E7=94=A8=E5=AE=9A=E5=88=B6=20JSON=20=E6=A0=91?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=EF=BC=8C=E6=92=A4=E9=94=80=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- JSON 插件 console_type 改为 json，运行输出原文交前端渲染
- 新增 JsonView/JsonNode：可折叠 JSON 树（键值着色、顶部两层默认展开、折叠摘要、复制格式化、解析失败回退原文+错误）
- App 输出区按 consoleType==='json' 渲染；撤销 XML 的 xmllint 改回 cat
---
 src-tauri/src/plugins/json.rs |  8 ++--
 src-tauri/src/plugins/xml.rs  |  5 +-
 src/App.vue                   |  9 ++++
 src/components/JsonNode.vue   | 88 +++++++++++++++++++++++++++++++++++
 src/components/JsonView.vue   | 78 +++++++++++++++++++++++++++++++
 5 files changed, 181 insertions(+), 7 deletions(-)
 create mode 100644 src/components/JsonNode.vue
 create mode 100644 src/components/JsonView.vue

diff --git a/src-tauri/src/plugins/json.rs b/src-tauri/src/plugins/json.rs
index 3e0e4c8..37ff321 100644
--- a/src-tauri/src/plugins/json.rs
+++ b/src-tauri/src/plugins/json.rs
@@ -37,12 +37,12 @@ impl LanguagePlugin for JsonPlugin {
             before_compile: None,
             extension: String::from("json"),
             execute_home: None,
-            // 运行=格式化+校验：python3 -m json.tool 会美化输出并对非法 JSON 报错
-            run_command: Some(String::from("python3 -m json.tool $filename")),
+            // 输出原始 JSON 内容，由前端 JSON 视图（可折叠树）渲染
+            run_command: Some(String::from("cat $filename")),
             after_compile: None,
             template: Some(String::from("{\n  \n}")),
             timeout: Some(30),
-            console_type: Some(String::from("console")),
+            console_type: Some(String::from("json")),
             icon_path: None,
         }
     }
@@ -50,6 +50,6 @@ impl LanguagePlugin for JsonPlugin {
     fn get_default_command(&self) -> String {
         self.get_config()
             .and_then(|config| config.run_command.clone())
-            .unwrap_or_else(|| "python3".to_string())
+            .unwrap_or_else(|| "cat".to_string())
     }
 }
diff --git a/src-tauri/src/plugins/xml.rs b/src-tauri/src/plugins/xml.rs
index a1bd8c5..31e4eeb 100644
--- a/src-tauri/src/plugins/xml.rs
+++ b/src-tauri/src/plugins/xml.rs
@@ -37,8 +37,7 @@ impl LanguagePlugin for XmlPlugin {
             before_compile: None,
             extension: String::from("xml"),
             execute_home: None,
-            // 运行=格式化+校验：xmllint（macOS 自带）格式化输出并对非法 XML 报错
-            run_command: Some(String::from("xmllint --format $filename")),
+            run_command: Some(String::from("cat $filename")),
             after_compile: None,
             template: Some(String::from("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n")),
             timeout: Some(30),
@@ -50,6 +49,6 @@ impl LanguagePlugin for XmlPlugin {
     fn get_default_command(&self) -> String {
         self.get_config()
             .and_then(|config| config.run_command.clone())
-            .unwrap_or_else(|| "xmllint".to_string())
+            .unwrap_or_else(|| "cat".to_string())
     }
 }
diff --git a/src/App.vue b/src/App.vue
index d60189a..d724b98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -142,6 +142,14 @@
                          :execution-time="lastExecutionTime"
                          @clear="clearOutput">
               </WebOutput>
+
+              <!-- JSON 视图 -->
+              <JsonView v-else-if="consoleType === 'json'"
+                        class="flex-1"
+                        :output="output"
+                        :is-running="isRunning"
+                        :execution-time="lastExecutionTime"
+                        @clear="clearOutput"/>
             </div>
           </template>
         </ResizablePanels>
@@ -311,6 +319,7 @@ import AppHeader from './components/AppHeader.vue'
 import CodeEditor from './components/CodeEditor.vue'
 import ConsoleOutput from './components/ConsoleOutput.vue'
 import WebOutput from "./components/WebOutput.vue";
+import JsonView from "./components/JsonView.vue";
 import StatusBar from './components/StatusBar.vue'
 import About from './components/About.vue'
 import Settings from './components/Settings.vue'
diff --git a/src/components/JsonNode.vue b/src/components/JsonNode.vue
new file mode 100644
index 0000000..a1394c3
--- /dev/null
+++ b/src/components/JsonNode.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div class="flex items-start hover:bg-gray-100 dark:hover:bg-gray-800/60 rounded px-1"
+         :style="{ paddingLeft: `${depth * 14 + 4}px` }">
+      <!-- 折叠开关 -->
+      <span v-if="isContainer"
+            class="cursor-pointer select-none w-4 flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            @click="open = !open">{{ open ? '▾' : '▸' }}</span>
+      <span v-else class="w-4 flex-shrink-0"></span>
+
+      <span class="break-all">
+        <!-- 键名 -->
+        <template v-if="keyName !== undefined">
+          <span class="text-purple-600 dark:text-purple-400">"{{ keyName }}"</span><span class="text-gray-400">: </span>
+        </template>
+
+        <!-- 容器 -->
+        <template v-if="isContainer">
+          <span class="text-gray-500">{{ openBracket }}</span>
+          <template v-if="!open">
+            <span class="cursor-pointer text-gray-400" @click="open = true"> {{ entries.length }} {{ isArray ? '项' : '键' }} </span>
+            <span class="text-gray-500">{{ closeBracket }}</span>
+          </template>
+          <span v-else-if="entries.length === 0" class="text-gray-500">{{ closeBracket }}</span>
+        </template>
+
+        <!-- 原始值 -->
+        <template v-else>
+          <span :class="primClass">{{ display }}</span>
+        </template>
+      </span>
+    </div>
+
+    <template v-if="isContainer && open && entries.length">
+      <JsonNode v-for="(e, i) in entries"
+                :key="i"
+                :key-name="isArray ? undefined : e.k"
+                :value="e.v"
+                :depth="depth + 1"/>
+      <div class="text-gray-500" :style="{ paddingLeft: `${depth * 14 + 4 + 16}px` }">{{ closeBracket }}</div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+
+const props = defineProps<{
+  value: any
+  keyName?: string | number
+  depth: number
+}>()
+
+const isArray = computed(() => Array.isArray(props.value))
+const isContainer = computed(() => props.value !== null && typeof props.value === 'object')
+
+// 顶部两层默认展开
+const open = ref(props.depth < 2)
+
+const entries = computed<{ k?: string; v: any }[]>(() => {
+  if (!isContainer.value) {
+    return []
+  }
+  if (isArray.value) {
+    return (props.value as any[]).map(v => ({v}))
+  }
+  return Object.keys(props.value).map(k => ({k, v: props.value[k]}))
+})
+
+const openBracket = computed(() => (isArray.value ? '[' : '{'))
+const closeBracket = computed(() => (isArray.value ? ']' : '}'))
+
+const display = computed(() => {
+  const v = props.value
+  if (v === null) return 'null'
+  if (typeof v === 'string') return `"${v}"`
+  return String(v)
+})
+
+const primClass = computed(() => {
+  const v = props.value
+  if (v === null) return 'text-gray-400'
+  if (typeof v === 'string') return 'text-green-600 dark:text-green-400'
+  if (typeof v === 'number') return 'text-blue-600 dark:text-blue-400'
+  if (typeof v === 'boolean') return 'text-amber-600 dark:text-amber-400'
+  return 'text-gray-700 dark:text-gray-300'
+})
+</script>
diff --git a/src/components/JsonView.vue b/src/components/JsonView.vue
new file mode 100644
index 0000000..f78769e
--- /dev/null
+++ b/src/components/JsonView.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="flex flex-col h-full bg-white dark:bg-gray-900">
+    <!-- 头部 -->
+    <div class="flex items-center justify-between px-3 py-1.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+      <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+        <Braces class="w-3.5 h-3.5"/>
+        <span>JSON 视图</span>
+        <span v-if="isRunning" class="text-blue-500">运行中…</span>
+        <span v-else-if="executionTime" class="text-gray-400">{{ executionTime }} ms</span>
+        <span v-if="parseError" class="text-red-500">解析失败</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <button v-if="parsed !== undefined" class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="copyJson">复制</button>
+        <button class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="emit('clear')">清空</button>
+      </div>
+    </div>
+
+    <!-- 内容 -->
+    <div class="flex-1 overflow-auto p-2 font-mono text-xs">
+      <div v-if="!output.trim()" class="text-gray-400 px-2 py-4 text-center">运行后在此查看 JSON</div>
+      <!-- 解析失败：显示错误 + 原文 -->
+      <div v-else-if="parseError" class="space-y-2">
+        <div class="text-red-500">{{ parseError }}</div>
+        <pre class="whitespace-pre-wrap text-gray-600 dark:text-gray-400">{{ output }}</pre>
+      </div>
+      <!-- JSON 树 -->
+      <JsonNode v-else :value="parsed" :depth="0"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {Braces} from 'lucide-vue-next'
+import JsonNode from './JsonNode.vue'
+import {useToast} from '../plugins/toast'
+
+const props = defineProps<{
+  output: string
+  isRunning: boolean
+  executionTime?: number
+}>()
+const emit = defineEmits<{ clear: [] }>()
+
+const toast = useToast()
+
+const parseError = computed(() => {
+  if (!props.output.trim()) {
+    return ''
+  }
+  try {
+    JSON.parse(props.output)
+    return ''
+  }
+  catch (e: any) {
+    return 'JSON 解析失败：' + (e?.message || e)
+  }
+})
+
+const parsed = computed(() => {
+  try {
+    return JSON.parse(props.output)
+  }
+  catch {
+    return undefined
+  }
+})
+
+const copyJson = async () => {
+  try {
+    await navigator.clipboard.writeText(JSON.stringify(parsed.value, null, 2))
+    toast.success('已复制格式化 JSON')
+  }
+  catch {
+    toast.error('复制失败')
+  }
+}
+</script>

From fe7dafa3f37c6a244fa842e0a091116ae6e73b58 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 07:46:14 +0800
Subject: [PATCH 03/19] =?UTF-8?q?feat:=20=E9=85=8D=E7=BD=AE=E9=A1=B5?=
 =?UTF-8?q?=E8=BE=93=E5=87=BA=E7=B1=BB=E5=9E=8B=E5=A2=9E=E5=8A=A0=20JSON?=
 =?UTF-8?q?=20=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

consoleTypes 增加 {label: 'JSON', value: 'json'}，可在语言设置里把输出类型选为 JSON 视图
---
 src/composables/useLanguageSettings.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/useLanguageSettings.ts b/src/composables/useLanguageSettings.ts
index dc7514a..1d1b1ba 100644
--- a/src/composables/useLanguageSettings.ts
+++ b/src/composables/useLanguageSettings.ts
@@ -33,7 +33,7 @@ export function useLanguageSettings(emit: any)
         }
     ]
 
-    const consoleTypes = [{label: '控制台', value: 'console'}, {label: 'Web', value: 'web'}]
+    const consoleTypes = [{label: '控制台', value: 'console'}, {label: 'Web', value: 'web'}, {label: 'JSON', value: 'json'}]
 
     const {
         activePlugin,

From 38d40732b02d9d93bca37a27e42556f666e5f3cd Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 07:48:48 +0800
Subject: [PATCH 04/19] =?UTF-8?q?feat:=20Markdown=20=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E8=BE=93=E5=87=BA=E7=B1=BB=E5=9E=8B=EF=BC=88=E8=BF=90=E8=A1=8C?=
 =?UTF-8?q?=E5=90=8E=E6=B8=B2=E6=9F=93=E9=A2=84=E8=A7=88=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Markdown 插件 console_type 改为 markdown，输出原文交前端渲染
- 新增 MarkdownView：markdown-it 渲染预览（标题/列表/代码/表格/引用等样式）
- 配置页输出类型增加 Markdown 选项；App 按 consoleType==='markdown' 渲染
---
 src-tauri/src/plugins/markdown.rs      |  3 +-
 src/App.vue                            |  9 +++++
 src/components/MarkdownView.vue        | 54 ++++++++++++++++++++++++++
 src/composables/useLanguageSettings.ts |  2 +-
 4 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MarkdownView.vue

diff --git a/src-tauri/src/plugins/markdown.rs b/src-tauri/src/plugins/markdown.rs
index 6336c8c..89e6fa6 100644
--- a/src-tauri/src/plugins/markdown.rs
+++ b/src-tauri/src/plugins/markdown.rs
@@ -37,11 +37,12 @@ impl LanguagePlugin for MarkdownPlugin {
             before_compile: None,
             extension: String::from("md"),
             execute_home: None,
+            // 输出原始 Markdown，由前端渲染为预览
             run_command: Some(String::from("cat $filename")),
             after_compile: None,
             template: Some(String::from("# 标题\n\n在这里输入 Markdown 内容\n")),
             timeout: Some(30),
-            console_type: Some(String::from("console")),
+            console_type: Some(String::from("markdown")),
             icon_path: None,
         }
     }
diff --git a/src/App.vue b/src/App.vue
index d724b98..f32ac8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -150,6 +150,14 @@
                         :is-running="isRunning"
                         :execution-time="lastExecutionTime"
                         @clear="clearOutput"/>
+
+              <!-- Markdown 预览 -->
+              <MarkdownView v-else-if="consoleType === 'markdown'"
+                            class="flex-1"
+                            :output="output"
+                            :is-running="isRunning"
+                            :execution-time="lastExecutionTime"
+                            @clear="clearOutput"/>
             </div>
           </template>
         </ResizablePanels>
@@ -320,6 +328,7 @@ import CodeEditor from './components/CodeEditor.vue'
 import ConsoleOutput from './components/ConsoleOutput.vue'
 import WebOutput from "./components/WebOutput.vue";
 import JsonView from "./components/JsonView.vue";
+import MarkdownView from "./components/MarkdownView.vue";
 import StatusBar from './components/StatusBar.vue'
 import About from './components/About.vue'
 import Settings from './components/Settings.vue'
diff --git a/src/components/MarkdownView.vue b/src/components/MarkdownView.vue
new file mode 100644
index 0000000..a7b47f8
--- /dev/null
+++ b/src/components/MarkdownView.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-col h-full bg-white dark:bg-gray-900">
+    <!-- 头部 -->
+    <div class="flex items-center justify-between px-3 py-1.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+      <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+        <FileText class="w-3.5 h-3.5"/>
+        <span>Markdown 预览</span>
+        <span v-if="isRunning" class="text-blue-500">运行中…</span>
+        <span v-else-if="executionTime" class="text-gray-400">{{ executionTime }} ms</span>
+      </div>
+      <button class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="emit('clear')">清空</button>
+    </div>
+
+    <!-- 渲染内容 -->
+    <div class="flex-1 overflow-auto">
+      <div v-if="!output.trim()" class="text-gray-400 px-4 py-6 text-center text-sm">运行后在此查看 Markdown 预览</div>
+      <div v-else class="markdown-body px-6 py-5 text-sm text-gray-800 dark:text-gray-200" v-html="rendered"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {FileText} from 'lucide-vue-next'
+import MarkdownIt from 'markdown-it'
+
+const props = defineProps<{
+  output: string
+  isRunning: boolean
+  executionTime?: number
+}>()
+const emit = defineEmits<{ clear: [] }>()
+
+const md = new MarkdownIt({html: false, linkify: true, breaks: true})
+const rendered = computed(() => md.render(props.output || ''))
+</script>
+
+<style scoped>
+.markdown-body :deep(h1) { font-size: 1.6em; font-weight: 700; margin: 0.6em 0 0.4em; }
+.markdown-body :deep(h2) { font-size: 1.35em; font-weight: 700; margin: 0.6em 0 0.4em; border-bottom: 1px solid rgba(128, 128, 128, 0.25); padding-bottom: 0.2em; }
+.markdown-body :deep(h3) { font-size: 1.15em; font-weight: 600; margin: 0.6em 0 0.3em; }
+.markdown-body :deep(p) { margin: 0.5em 0; line-height: 1.7; }
+.markdown-body :deep(ul), .markdown-body :deep(ol) { margin: 0.5em 0; padding-left: 1.5em; }
+.markdown-body :deep(li) { margin: 0.2em 0; }
+.markdown-body :deep(code) { background: rgba(128, 128, 128, 0.18); padding: 0.1em 0.35em; border-radius: 4px; font-family: monospace; font-size: 0.9em; }
+.markdown-body :deep(pre) { background: rgba(128, 128, 128, 0.15); padding: 0.8em 1em; border-radius: 6px; overflow-x: auto; margin: 0.6em 0; }
+.markdown-body :deep(pre code) { background: none; padding: 0; }
+.markdown-body :deep(blockquote) { border-left: 3px solid rgba(128, 128, 128, 0.4); padding-left: 1em; color: rgba(128, 128, 128, 0.95); margin: 0.6em 0; }
+.markdown-body :deep(a) { color: #3b82f6; text-decoration: underline; }
+.markdown-body :deep(table) { border-collapse: collapse; margin: 0.6em 0; }
+.markdown-body :deep(th), .markdown-body :deep(td) { border: 1px solid rgba(128, 128, 128, 0.3); padding: 0.4em 0.7em; }
+.markdown-body :deep(img) { max-width: 100%; }
+.markdown-body :deep(hr) { border: none; border-top: 1px solid rgba(128, 128, 128, 0.3); margin: 1em 0; }
+</style>
diff --git a/src/composables/useLanguageSettings.ts b/src/composables/useLanguageSettings.ts
index 1d1b1ba..b1192ae 100644
--- a/src/composables/useLanguageSettings.ts
+++ b/src/composables/useLanguageSettings.ts
@@ -33,7 +33,7 @@ export function useLanguageSettings(emit: any)
         }
     ]
 
-    const consoleTypes = [{label: '控制台', value: 'console'}, {label: 'Web', value: 'web'}, {label: 'JSON', value: 'json'}]
+    const consoleTypes = [{label: '控制台', value: 'console'}, {label: 'Web', value: 'web'}, {label: 'JSON', value: 'json'}, {label: 'Markdown', value: 'markdown'}]
 
     const {
         activePlugin,

From fedce4f7b41e3f012262e34a160fecea65931f7c Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 07:51:44 +0800
Subject: [PATCH 05/19] =?UTF-8?q?fix:=20Markdown=20=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=86=85=E5=B5=8C=20HTML=EF=BC=88DOMPurify?=
 =?UTF-8?q?=20=E5=87=80=E5=8C=96=E9=98=B2=20XSS=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MarkdownView 与 PreviewPanel 的 markdown-it 开启 html:true，渲染结果经 DOMPurify 净化后再 v-html，既能渲染 md 中的 HTML 又防止脚本注入
---
 package.json                    | 1 +
 src/components/MarkdownView.vue | 6 ++++--
 src/components/PreviewPanel.vue | 6 ++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 1f6fa75..8056559 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "codemirror": "^6.0.2",
+    "dompurify": "^3.4.8",
     "lodash-es": "^4.17.21",
     "lucide-vue-next": "^0.539.0",
     "markdown-it": "^14.2.0",
diff --git a/src/components/MarkdownView.vue b/src/components/MarkdownView.vue
index a7b47f8..d7239fe 100644
--- a/src/components/MarkdownView.vue
+++ b/src/components/MarkdownView.vue
@@ -23,6 +23,7 @@
 import {computed} from 'vue'
 import {FileText} from 'lucide-vue-next'
 import MarkdownIt from 'markdown-it'
+import DOMPurify from 'dompurify'
 
 const props = defineProps<{
   output: string
@@ -31,8 +32,9 @@ const props = defineProps<{
 }>()
 const emit = defineEmits<{ clear: [] }>()
 
-const md = new MarkdownIt({html: false, linkify: true, breaks: true})
-const rendered = computed(() => md.render(props.output || ''))
+// 允许 Markdown 中的 HTML，渲染后用 DOMPurify 净化（去除 script 等危险内容）防 XSS
+const md = new MarkdownIt({html: true, linkify: true, breaks: true})
+const rendered = computed(() => DOMPurify.sanitize(md.render(props.output || '')))
 </script>
 
 <style scoped>
diff --git a/src/components/PreviewPanel.vue b/src/components/PreviewPanel.vue
index 75c1b3a..f5da0d4 100644
--- a/src/components/PreviewPanel.vue
+++ b/src/components/PreviewPanel.vue
@@ -33,6 +33,7 @@
 import {computed} from 'vue'
 import {Eye, X} from 'lucide-vue-next'
 import MarkdownIt from 'markdown-it'
+import DOMPurify from 'dompurify'
 
 const props = defineProps<{
   content: string
@@ -41,7 +42,8 @@ const props = defineProps<{
 }>()
 const emit = defineEmits<{ close: [] }>()
 
-const md = new MarkdownIt({html: false, linkify: true, breaks: true})
+// 允许 Markdown 内的 HTML，渲染后用 DOMPurify 净化防 XSS
+const md = new MarkdownIt({html: true, linkify: true, breaks: true})
 
 // 根据语言或扩展名判断预览类型
 const kind = computed<'markdown' | 'html' | 'none'>(() => {
@@ -58,7 +60,7 @@ const kind = computed<'markdown' | 'html' | 'none'>(() => {
 
 const kindLabel = computed(() => ({markdown: 'Markdown', html: 'HTML', none: '不支持'}[kind.value]))
 
-const rendered = computed(() => (kind.value === 'markdown' ? md.render(props.content || '') : ''))
+const rendered = computed(() => (kind.value === 'markdown' ? DOMPurify.sanitize(md.render(props.content || '')) : ''))
 </script>
 
 <style scoped>

From 21174e79503c5ec67dd534f07f4f8c4bfe99ab8e Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:00:27 +0800
Subject: [PATCH 06/19] =?UTF-8?q?perf:=20=E4=BF=AE=E5=A4=8D=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E5=90=8E=E7=BA=A6=203=20=E7=A7=92=E5=8D=A1=E9=A1=BF?=
 =?UTF-8?q?=EF=BC=88=E6=89=A7=E8=A1=8C=E5=8E=86=E5=8F=B2=E5=86=99=E5=BA=93?=
 =?UTF-8?q?=E9=98=BB=E5=A1=9E=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：迁移到 KvStore 后所有配置/状态都写入同一个 codeforge.sqlite，运行时 kv 写入与 history.insert 在同库并发；而执行历史连接未开 WAL、synchronous=FULL 且无 busy_timeout，单次 insert 在 fsync/竞争下可阻塞数秒（执行耗时只统计到命令本身故仍显示百毫秒）。

- 四个连接(execution/ai/kv/snippets)统一 WAL + synchronous=NORMAL + busy_timeout(5s)
- 执行轮询 sleep 100ms→20ms，快命令响应更快
---
 src-tauri/src/ai_history.rs | 2 ++
 src-tauri/src/execution.rs  | 8 +++++++-
 src-tauri/src/kv.rs         | 2 ++
 src-tauri/src/snippets.rs   | 2 ++
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src-tauri/src/ai_history.rs b/src-tauri/src/ai_history.rs
index 916c209..8aa0d08 100644
--- a/src-tauri/src/ai_history.rs
+++ b/src-tauri/src/ai_history.rs
@@ -14,6 +14,8 @@ impl AiHistory {
         let db_path = get_codeforge_db_path()?;
         let conn = Connection::open(&db_path).map_err(|e| format!("打开数据库失败: {}", e))?;
         let _ = conn.pragma_update(None, "journal_mode", "WAL");
+        let _ = conn.pragma_update(None, "synchronous", "NORMAL");
+        let _ = conn.busy_timeout(std::time::Duration::from_secs(5));
         // 清理早期错误结构的旧表
         let _ = conn.execute("DROP TABLE IF EXISTS ai_conversations", []);
         conn.execute(
diff --git a/src-tauri/src/execution.rs b/src-tauri/src/execution.rs
index bf72c6b..761d6cf 100644
--- a/src-tauri/src/execution.rs
+++ b/src-tauri/src/execution.rs
@@ -41,6 +41,12 @@ impl ExecutionHistory {
         let conn =
             Connection::open(&db_path).map_err(|e| format!("打开执行历史数据库失败: {}", e))?;
 
+        // 与其它连接（ai/kv/snippets）共用同一个库文件：统一 WAL + NORMAL + busy_timeout，
+        // 避免并发写入（如运行时同时有 kv 写入）相互阻塞导致 insert 卡顿
+        let _ = conn.pragma_update(None, "journal_mode", "WAL");
+        let _ = conn.pragma_update(None, "synchronous", "NORMAL");
+        let _ = conn.busy_timeout(std::time::Duration::from_secs(5));
+
         conn.execute(
             "CREATE TABLE IF NOT EXISTS execution_history (
                 id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -627,7 +633,7 @@ pub async fn execute_code(
                 return Ok(result);
             }
             Ok(None) => {
-                tokio::time::sleep(tokio::time::Duration::from_millis(100)).await;
+                tokio::time::sleep(tokio::time::Duration::from_millis(20)).await;
             }
             Err(e) => {
                 let _ = child.kill();
diff --git a/src-tauri/src/kv.rs b/src-tauri/src/kv.rs
index a0bf793..d4eab09 100644
--- a/src-tauri/src/kv.rs
+++ b/src-tauri/src/kv.rs
@@ -15,6 +15,8 @@ impl KvStore {
         let db_path = get_codeforge_db_path()?;
         let conn = Connection::open(&db_path).map_err(|e| format!("打开数据库失败: {}", e))?;
         let _ = conn.pragma_update(None, "journal_mode", "WAL");
+        let _ = conn.pragma_update(None, "synchronous", "NORMAL");
+        let _ = conn.busy_timeout(std::time::Duration::from_secs(5));
         conn.execute(
             "CREATE TABLE IF NOT EXISTS kv_store (
                 key TEXT PRIMARY KEY,
diff --git a/src-tauri/src/snippets.rs b/src-tauri/src/snippets.rs
index 8056db6..27df8b8 100644
--- a/src-tauri/src/snippets.rs
+++ b/src-tauri/src/snippets.rs
@@ -26,6 +26,8 @@ impl Snippets {
         let db_path = get_codeforge_db_path()?;
         let conn = Connection::open(&db_path).map_err(|e| format!("打开数据库失败: {}", e))?;
         let _ = conn.pragma_update(None, "journal_mode", "WAL");
+        let _ = conn.pragma_update(None, "synchronous", "NORMAL");
+        let _ = conn.busy_timeout(std::time::Duration::from_secs(5));
         conn.execute(
             "CREATE TABLE IF NOT EXISTS snippets (
                 id TEXT PRIMARY KEY,

From efccf437f0b034ce0b8df76f91bcd9c356fe7415 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:04:14 +0800
Subject: [PATCH 07/19] =?UTF-8?q?fix:=20=E8=AF=AD=E8=A8=80=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96=E6=97=B6=E5=90=8C=E6=AD=A5=E8=BE=93=E5=87=BA=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=EF=BC=8C=E4=BF=AE=E5=A4=8D=20JSON/Markdown=20?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=E4=B8=8D=E6=BF=80=E6=B4=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

consoleType 之前只在启动时设置，打开文件/切换标签/下拉切语言都不更新，导致打开 .md/.json 运行后仍按旧输出类型渲染（如控制台），定制视图不生效。改为 watch(currentLanguage) 同步
---
 src/App.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index f32ac8e..adb7010 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1139,6 +1139,11 @@ const {
 const editorConfigKey = ref(0)
 const consoleType = ref('console')
 
+// 语言变化（打开文件/切换标签/下拉切换）时同步输出类型，否则 JSON/Markdown 等视图不会激活
+watch(currentLanguage, () => {
+  consoleType.value = getCurrentConsoleType()
+})
+
 // ===== 布局管理 =====
 // 当前布局模式：horizontal(左右) / vertical(上下) / editor(仅编辑器)
 const layoutMode = computed<LayoutMode>(() => editorConfig.value?.layout || 'horizontal')

From beed11b28ec9daff07ad7a1cff5304719b10cc55 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:08:26 +0800
Subject: [PATCH 08/19] =?UTF-8?q?fix:=20=E8=BF=90=E8=A1=8C=20Markdown/JSON?=
 =?UTF-8?q?=20=E5=8D=A1=E6=AD=BB=E2=80=94=E2=80=94=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E9=98=B2=E6=8A=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

cat 输出按行流式刷新 output，MarkdownView/JsonView 的渲染是 computed，每行都全量重渲染（markdown-it+DOMPurify / 整树解析），几百行就 O(N²) 卡死主线程。改为对 output 防抖 200ms 后再渲染，流式期间不逐行重渲染
---
 src/components/JsonView.vue     | 20 +++++++++++++-------
 src/components/MarkdownView.vue | 13 ++++++++++---
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/JsonView.vue b/src/components/JsonView.vue
index f78769e..5b51f46 100644
--- a/src/components/JsonView.vue
+++ b/src/components/JsonView.vue
@@ -17,20 +17,21 @@
 
     <!-- 内容 -->
     <div class="flex-1 overflow-auto p-2 font-mono text-xs">
-      <div v-if="!output.trim()" class="text-gray-400 px-2 py-4 text-center">运行后在此查看 JSON</div>
+      <div v-if="!stable.trim()" class="text-gray-400 px-2 py-4 text-center">运行后在此查看 JSON</div>
       <!-- 解析失败：显示错误 + 原文 -->
       <div v-else-if="parseError" class="space-y-2">
         <div class="text-red-500">{{ parseError }}</div>
-        <pre class="whitespace-pre-wrap text-gray-600 dark:text-gray-400">{{ output }}</pre>
+        <pre class="whitespace-pre-wrap text-gray-600 dark:text-gray-400">{{ stable }}</pre>
       </div>
       <!-- JSON 树 -->
-      <JsonNode v-else :value="parsed" :depth="0"/>
+      <JsonNode v-else-if="parsed !== undefined" :value="parsed" :depth="0"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, ref, watch} from 'vue'
+import {debounce} from 'lodash-es'
 import {Braces} from 'lucide-vue-next'
 import JsonNode from './JsonNode.vue'
 import {useToast} from '../plugins/toast'
@@ -44,12 +45,17 @@ const emit = defineEmits<{ clear: [] }>()
 
 const toast = useToast()
 
+// 流式输出逐行刷新 output，解析/渲染防抖，避免每行都重建整棵树导致卡死
+const stable = ref(props.output)
+const applyOutput = debounce((v: string) => { stable.value = v }, 200)
+watch(() => props.output, (v) => applyOutput(v))
+
 const parseError = computed(() => {
-  if (!props.output.trim()) {
+  if (!stable.value.trim()) {
     return ''
   }
   try {
-    JSON.parse(props.output)
+    JSON.parse(stable.value)
     return ''
   }
   catch (e: any) {
@@ -59,7 +65,7 @@ const parseError = computed(() => {
 
 const parsed = computed(() => {
   try {
-    return JSON.parse(props.output)
+    return JSON.parse(stable.value)
   }
   catch {
     return undefined
diff --git a/src/components/MarkdownView.vue b/src/components/MarkdownView.vue
index d7239fe..fe753b0 100644
--- a/src/components/MarkdownView.vue
+++ b/src/components/MarkdownView.vue
@@ -13,14 +13,15 @@
 
     <!-- 渲染内容 -->
     <div class="flex-1 overflow-auto">
-      <div v-if="!output.trim()" class="text-gray-400 px-4 py-6 text-center text-sm">运行后在此查看 Markdown 预览</div>
+      <div v-if="!stable.trim()" class="text-gray-400 px-4 py-6 text-center text-sm">运行后在此查看 Markdown 预览</div>
       <div v-else class="markdown-body px-6 py-5 text-sm text-gray-800 dark:text-gray-200" v-html="rendered"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, ref, watch} from 'vue'
+import {debounce} from 'lodash-es'
 import {FileText} from 'lucide-vue-next'
 import MarkdownIt from 'markdown-it'
 import DOMPurify from 'dompurify'
@@ -34,7 +35,13 @@ const emit = defineEmits<{ clear: [] }>()
 
 // 允许 Markdown 中的 HTML，渲染后用 DOMPurify 净化（去除 script 等危险内容）防 XSS
 const md = new MarkdownIt({html: true, linkify: true, breaks: true})
-const rendered = computed(() => DOMPurify.sanitize(md.render(props.output || '')))
+
+// 流式输出会逐行刷新 output，渲染防抖避免每行都全量重渲染导致卡死
+const stable = ref(props.output)
+const applyOutput = debounce((v: string) => { stable.value = v }, 200)
+watch(() => props.output, (v) => applyOutput(v))
+
+const rendered = computed(() => DOMPurify.sanitize(md.render(stable.value || '')))
 </script>
 
 <style scoped>

From d03949c37d25367f35a4a4a192d5d8143a835c03 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:14:10 +0800
Subject: [PATCH 09/19] =?UTF-8?q?feat:=20XML=20=E7=8B=AC=E7=AB=8B=E8=BE=93?=
 =?UTF-8?q?=E5=87=BA=E7=B1=BB=E5=9E=8B=EF=BC=88=E5=8F=AF=E6=8A=98=E5=8F=A0?=
 =?UTF-8?q?=20XML=20=E6=A0=91=E8=A7=86=E5=9B=BE=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- XML 插件 console_type 改为 xml，输出原文交前端渲染
- 新增 XmlView/XmlNode：DOMParser 解析，可折叠元素树（标签蓝/属性紫/值绿/文本），顶 3 层默认展开，解析失败回退原文+错误，渲染防抖
- 配置页输出类型增加 XML 选项；App 按 consoleType==='xml' 渲染
---
 src-tauri/src/plugins/xml.rs           |  3 +-
 src/App.vue                            |  9 ++++
 src/components/XmlNode.vue             | 54 ++++++++++++++++++++
 src/components/XmlView.vue             | 70 ++++++++++++++++++++++++++
 src/composables/useLanguageSettings.ts |  2 +-
 5 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 src/components/XmlNode.vue
 create mode 100644 src/components/XmlView.vue

diff --git a/src-tauri/src/plugins/xml.rs b/src-tauri/src/plugins/xml.rs
index 31e4eeb..a93ac0c 100644
--- a/src-tauri/src/plugins/xml.rs
+++ b/src-tauri/src/plugins/xml.rs
@@ -37,11 +37,12 @@ impl LanguagePlugin for XmlPlugin {
             before_compile: None,
             extension: String::from("xml"),
             execute_home: None,
+            // 输出原始 XML，由前端 XML 视图（可折叠树）渲染
             run_command: Some(String::from("cat $filename")),
             after_compile: None,
             template: Some(String::from("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n")),
             timeout: Some(30),
-            console_type: Some(String::from("console")),
+            console_type: Some(String::from("xml")),
             icon_path: None,
         }
     }
diff --git a/src/App.vue b/src/App.vue
index adb7010..34fd4d2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -158,6 +158,14 @@
                             :is-running="isRunning"
                             :execution-time="lastExecutionTime"
                             @clear="clearOutput"/>
+
+              <!-- XML 视图 -->
+              <XmlView v-else-if="consoleType === 'xml'"
+                       class="flex-1"
+                       :output="output"
+                       :is-running="isRunning"
+                       :execution-time="lastExecutionTime"
+                       @clear="clearOutput"/>
             </div>
           </template>
         </ResizablePanels>
@@ -329,6 +337,7 @@ import ConsoleOutput from './components/ConsoleOutput.vue'
 import WebOutput from "./components/WebOutput.vue";
 import JsonView from "./components/JsonView.vue";
 import MarkdownView from "./components/MarkdownView.vue";
+import XmlView from "./components/XmlView.vue";
 import StatusBar from './components/StatusBar.vue'
 import About from './components/About.vue'
 import Settings from './components/Settings.vue'
diff --git a/src/components/XmlNode.vue b/src/components/XmlNode.vue
new file mode 100644
index 0000000..7127b1d
--- /dev/null
+++ b/src/components/XmlNode.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div class="flex items-start hover:bg-gray-100 dark:hover:bg-gray-800/60 rounded px-1"
+         :style="{ paddingLeft: `${depth * 14 + 4}px` }">
+      <span v-if="hasElementChildren"
+            class="cursor-pointer select-none w-4 flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            @click="open = !open">{{ open ? '▾' : '▸' }}</span>
+      <span v-else class="w-4 flex-shrink-0"></span>
+
+      <span class="break-all">
+        <span class="text-blue-600 dark:text-blue-400">&lt;{{ tag }}</span><!--
+     --><span v-for="a in attrs" :key="a.name"> <span class="text-purple-600 dark:text-purple-400">{{ a.name }}</span><span class="text-gray-400">=</span><span class="text-green-600 dark:text-green-400">"{{ a.value }}"</span></span><!--
+     --><template v-if="selfClosing"><span class="text-blue-600 dark:text-blue-400">/&gt;</span></template><!--
+     --><template v-else><span class="text-blue-600 dark:text-blue-400">&gt;</span><!--
+       --><template v-if="!hasElementChildren"><span class="text-gray-700 dark:text-gray-300">{{ text }}</span><span class="text-blue-600 dark:text-blue-400">&lt;/{{ tag }}&gt;</span></template><!--
+       --><template v-else-if="!open"><span class="text-gray-400 cursor-pointer" @click="open = true">…</span><span class="text-blue-600 dark:text-blue-400">&lt;/{{ tag }}&gt;</span></template><!--
+     --></template>
+      </span>
+    </div>
+
+    <template v-if="hasElementChildren && open">
+      <XmlNode v-for="(c, i) in elementChildren" :key="i" :node="c" :depth="depth + 1"/>
+      <div class="text-blue-600 dark:text-blue-400" :style="{ paddingLeft: `${depth * 14 + 4 + 16}px` }">&lt;/{{ tag }}&gt;</div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+
+const props = defineProps<{
+  node: Element
+  depth: number
+}>()
+
+const tag = computed(() => props.node.tagName)
+
+const attrs = computed(() =>
+    Array.from(props.node.attributes).map(a => ({name: a.name, value: a.value}))
+)
+
+const elementChildren = computed(() =>
+    Array.from(props.node.children) as Element[]
+)
+const hasElementChildren = computed(() => elementChildren.value.length > 0)
+
+// 无元素子节点时的文本内容
+const text = computed(() => (props.node.textContent || '').trim())
+
+// 无子元素且无文本 → 自闭合
+const selfClosing = computed(() => !hasElementChildren.value && !text.value)
+
+const open = ref(props.depth < 3)
+</script>
diff --git a/src/components/XmlView.vue b/src/components/XmlView.vue
new file mode 100644
index 0000000..e0c423c
--- /dev/null
+++ b/src/components/XmlView.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="flex flex-col h-full bg-white dark:bg-gray-900">
+    <div class="flex items-center justify-between px-3 py-1.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+      <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+        <Code class="w-3.5 h-3.5"/>
+        <span>XML 视图</span>
+        <span v-if="isRunning" class="text-blue-500">运行中…</span>
+        <span v-else-if="executionTime" class="text-gray-400">{{ executionTime }} ms</span>
+        <span v-if="parseError" class="text-red-500">解析失败</span>
+      </div>
+      <button class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="emit('clear')">清空</button>
+    </div>
+
+    <div class="flex-1 overflow-auto p-2 font-mono text-xs">
+      <div v-if="!stable.trim()" class="text-gray-400 px-2 py-4 text-center">运行后在此查看 XML</div>
+      <div v-else-if="parseError" class="space-y-2">
+        <div class="text-red-500">{{ parseError }}</div>
+        <pre class="whitespace-pre-wrap text-gray-600 dark:text-gray-400">{{ stable }}</pre>
+      </div>
+      <XmlNode v-else-if="root" :node="root" :depth="0"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, watch} from 'vue'
+import {debounce} from 'lodash-es'
+import {Code} from 'lucide-vue-next'
+import XmlNode from './XmlNode.vue'
+
+const props = defineProps<{
+  output: string
+  isRunning: boolean
+  executionTime?: number
+}>()
+const emit = defineEmits<{ clear: [] }>()
+
+// 流式输出防抖，避免逐行重建树
+const stable = ref(props.output)
+const applyOutput = debounce((v: string) => { stable.value = v }, 200)
+watch(() => props.output, (v) => applyOutput(v))
+
+const doc = computed<Document | null>(() => {
+  if (!stable.value.trim()) {
+    return null
+  }
+  try {
+    return new DOMParser().parseFromString(stable.value, 'application/xml')
+  }
+  catch {
+    return null
+  }
+})
+
+const parseError = computed(() => {
+  const d = doc.value
+  if (!d) {
+    return ''
+  }
+  const err = d.querySelector('parsererror')
+  return err ? 'XML 解析失败：' + (err.textContent || '').trim() : ''
+})
+
+const root = computed<Element | null>(() => {
+  if (!doc.value || parseError.value) {
+    return null
+  }
+  return doc.value.documentElement || null
+})
+</script>
diff --git a/src/composables/useLanguageSettings.ts b/src/composables/useLanguageSettings.ts
index b1192ae..52c9182 100644
--- a/src/composables/useLanguageSettings.ts
+++ b/src/composables/useLanguageSettings.ts
@@ -33,7 +33,7 @@ export function useLanguageSettings(emit: any)
         }
     ]
 
-    const consoleTypes = [{label: '控制台', value: 'console'}, {label: 'Web', value: 'web'}, {label: 'JSON', value: 'json'}, {label: 'Markdown', value: 'markdown'}]
+    const consoleTypes = [{label: '控制台', value: 'console'}, {label: 'Web', value: 'web'}, {label: 'JSON', value: 'json'}, {label: 'Markdown', value: 'markdown'}, {label: 'XML', value: 'xml'}]
 
     const {
         activePlugin,

From 6b98bbba9f0d56bcc8a7f4880e70bbb11fdcaa47 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:18:41 +0800
Subject: [PATCH 10/19] =?UTF-8?q?feat:=20YAML=20=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E8=BE=93=E5=87=BA=E7=B1=BB=E5=9E=8B=EF=BC=88=E5=A4=8D=E7=94=A8?=
 =?UTF-8?q?=20JSON=20=E6=A0=91=E8=A7=86=E5=9B=BE=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- YAML 插件 console_type 改为 yaml，输出原文交前端渲染
- 新增 YamlView：js-yaml 解析为对象后复用 JsonNode 渲染可折叠树，解析失败回退原文+错误，渲染防抖
- 配置页输出类型增加 YAML 选项；App 按 consoleType==='yaml' 渲染
---
 package.json                           |  2 +
 src-tauri/src/plugins/yaml.rs          |  3 +-
 src/App.vue                            |  9 ++++
 src/components/YamlView.vue            | 58 ++++++++++++++++++++++++++
 src/composables/useLanguageSettings.ts |  2 +-
 5 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/components/YamlView.vue

diff --git a/package.json b/package.json
index 8056559..53aac4c 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@xterm/xterm": "^6.0.0",
     "codemirror": "^6.0.2",
     "dompurify": "^3.4.8",
+    "js-yaml": "^4.2.0",
     "lodash-es": "^4.17.21",
     "lucide-vue-next": "^0.539.0",
     "markdown-it": "^14.2.0",
@@ -49,6 +50,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",
     "@tauri-apps/cli": "^2",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
     "@vitejs/plugin-vue": "^5.2.1",
diff --git a/src-tauri/src/plugins/yaml.rs b/src-tauri/src/plugins/yaml.rs
index bd04999..417c5c7 100644
--- a/src-tauri/src/plugins/yaml.rs
+++ b/src-tauri/src/plugins/yaml.rs
@@ -46,11 +46,12 @@ impl LanguagePlugin for YamlPlugin {
             before_compile: None,
             extension: String::from("yaml,yml"),
             execute_home: None,
+            // 输出原始 YAML，由前端 YAML 视图（可折叠树）渲染
             run_command: Some(String::from("cat $filename")),
             after_compile: None,
             template: Some(String::from("# 在这里输入 YAML 内容\n")),
             timeout: Some(30),
-            console_type: Some(String::from("console")),
+            console_type: Some(String::from("yaml")),
             icon_path: None,
         }
     }
diff --git a/src/App.vue b/src/App.vue
index 34fd4d2..cdf44d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -166,6 +166,14 @@
                        :is-running="isRunning"
                        :execution-time="lastExecutionTime"
                        @clear="clearOutput"/>
+
+              <!-- YAML 视图 -->
+              <YamlView v-else-if="consoleType === 'yaml'"
+                        class="flex-1"
+                        :output="output"
+                        :is-running="isRunning"
+                        :execution-time="lastExecutionTime"
+                        @clear="clearOutput"/>
             </div>
           </template>
         </ResizablePanels>
@@ -338,6 +346,7 @@ import WebOutput from "./components/WebOutput.vue";
 import JsonView from "./components/JsonView.vue";
 import MarkdownView from "./components/MarkdownView.vue";
 import XmlView from "./components/XmlView.vue";
+import YamlView from "./components/YamlView.vue";
 import StatusBar from './components/StatusBar.vue'
 import About from './components/About.vue'
 import Settings from './components/Settings.vue'
diff --git a/src/components/YamlView.vue b/src/components/YamlView.vue
new file mode 100644
index 0000000..9fa4930
--- /dev/null
+++ b/src/components/YamlView.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="flex flex-col h-full bg-white dark:bg-gray-900">
+    <div class="flex items-center justify-between px-3 py-1.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+      <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+        <FileText class="w-3.5 h-3.5"/>
+        <span>YAML 视图</span>
+        <span v-if="isRunning" class="text-blue-500">运行中…</span>
+        <span v-else-if="executionTime" class="text-gray-400">{{ executionTime }} ms</span>
+        <span v-if="parseError" class="text-red-500">解析失败</span>
+      </div>
+      <button class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="emit('clear')">清空</button>
+    </div>
+
+    <div class="flex-1 overflow-auto p-2 font-mono text-xs">
+      <div v-if="!stable.trim()" class="text-gray-400 px-2 py-4 text-center">运行后在此查看 YAML</div>
+      <div v-else-if="parseError" class="space-y-2">
+        <div class="text-red-500">{{ parseError }}</div>
+        <pre class="whitespace-pre-wrap text-gray-600 dark:text-gray-400">{{ stable }}</pre>
+      </div>
+      <JsonNode v-else-if="parsed !== undefined" :value="parsed" :depth="0"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, watch} from 'vue'
+import {debounce} from 'lodash-es'
+import {FileText} from 'lucide-vue-next'
+import yaml from 'js-yaml'
+import JsonNode from './JsonNode.vue'
+
+const props = defineProps<{
+  output: string
+  isRunning: boolean
+  executionTime?: number
+}>()
+const emit = defineEmits<{ clear: [] }>()
+
+// 流式输出防抖
+const stable = ref(props.output)
+const applyOutput = debounce((v: string) => { stable.value = v }, 200)
+watch(() => props.output, (v) => applyOutput(v))
+
+// YAML 解析为 JS 对象，复用 JSON 树渲染（一次解析，派生 parsed/parseError）
+const parseResult = computed<{ value: any; error: string }>(() => {
+  if (!stable.value.trim()) {
+    return {value: undefined, error: ''}
+  }
+  try {
+    return {value: yaml.load(stable.value), error: ''}
+  }
+  catch (e: any) {
+    return {value: undefined, error: 'YAML 解析失败：' + (e?.reason || e?.message || e)}
+  }
+})
+const parsed = computed(() => parseResult.value.value)
+const parseError = computed(() => parseResult.value.error)
+</script>
diff --git a/src/composables/useLanguageSettings.ts b/src/composables/useLanguageSettings.ts
index 52c9182..ce4f18c 100644
--- a/src/composables/useLanguageSettings.ts
+++ b/src/composables/useLanguageSettings.ts
@@ -33,7 +33,7 @@ export function useLanguageSettings(emit: any)
         }
     ]
 
-    const consoleTypes = [{label: '控制台', value: 'console'}, {label: 'Web', value: 'web'}, {label: 'JSON', value: 'json'}, {label: 'Markdown', value: 'markdown'}, {label: 'XML', value: 'xml'}]
+    const consoleTypes = [{label: '控制台', value: 'console'}, {label: 'Web', value: 'web'}, {label: 'JSON', value: 'json'}, {label: 'Markdown', value: 'markdown'}, {label: 'XML', value: 'xml'}, {label: 'YAML', value: 'yaml'}]
 
     const {
         activePlugin,

From cfd5c5a6223de4cc2d1f2881849ac4382efcc68f Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:24:14 +0800
Subject: [PATCH 11/19] =?UTF-8?q?feat:=20JSON=20=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=96=87=E6=9C=AC/=E5=8F=AF=E8=A7=86?=
 =?UTF-8?q?=E5=8C=96=E5=8F=8C=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

默认格式化文本，点头部「可视化」图标切换为可折叠树；复制与清空改为图标(Copy/Trash2)，与控制台一致
---
 src/components/JsonView.vue | 40 +++++++++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/JsonView.vue b/src/components/JsonView.vue
index 5b51f46..70182a1 100644
--- a/src/components/JsonView.vue
+++ b/src/components/JsonView.vue
@@ -9,9 +9,19 @@
         <span v-else-if="executionTime" class="text-gray-400">{{ executionTime }} ms</span>
         <span v-if="parseError" class="text-red-500">解析失败</span>
       </div>
-      <div class="flex items-center gap-2">
-        <button v-if="parsed !== undefined" class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="copyJson">复制</button>
-        <button class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="emit('clear')">清空</button>
+      <div class="flex items-center gap-1">
+        <button class="p-1 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
+                :class="mode === 'tree' ? 'text-blue-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
+                :title="mode === 'tree' ? '切换为文本' : '切换为可视化（树）'"
+                @click="mode = mode === 'tree' ? 'text' : 'tree'">
+          <Network class="w-3.5 h-3.5"/>
+        </button>
+        <button v-if="parsed !== undefined" class="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" title="复制" @click="copyJson">
+          <Copy class="w-3.5 h-3.5"/>
+        </button>
+        <button class="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" title="清空" @click="emit('clear')">
+          <Trash2 class="w-3.5 h-3.5"/>
+        </button>
       </div>
     </div>
 
@@ -23,8 +33,10 @@
         <div class="text-red-500">{{ parseError }}</div>
         <pre class="whitespace-pre-wrap text-gray-600 dark:text-gray-400">{{ stable }}</pre>
       </div>
-      <!-- JSON 树 -->
-      <JsonNode v-else-if="parsed !== undefined" :value="parsed" :depth="0"/>
+      <!-- 可视化：JSON 树 -->
+      <JsonNode v-else-if="mode === 'tree' && parsed !== undefined" :value="parsed" :depth="0"/>
+      <!-- 文本：格式化后的 JSON -->
+      <pre v-else class="whitespace-pre-wrap text-gray-700 dark:text-gray-300">{{ formatted }}</pre>
     </div>
   </div>
 </template>
@@ -32,7 +44,7 @@
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
 import {debounce} from 'lodash-es'
-import {Braces} from 'lucide-vue-next'
+import {Braces, Copy, Network, Trash2} from 'lucide-vue-next'
 import JsonNode from './JsonNode.vue'
 import {useToast} from '../plugins/toast'
 
@@ -72,6 +84,22 @@ const parsed = computed(() => {
   }
 })
 
+// 显示模式：text=格式化文本（默认），tree=可视化树
+const mode = ref<'text' | 'tree'>('text')
+
+// 格式化后的 JSON 文本
+const formatted = computed(() => {
+  if (parsed.value === undefined) {
+    return stable.value
+  }
+  try {
+    return JSON.stringify(parsed.value, null, 2)
+  }
+  catch {
+    return stable.value
+  }
+})
+
 const copyJson = async () => {
   try {
     await navigator.clipboard.writeText(JSON.stringify(parsed.value, null, 2))

From 01557733d507dada0c055dc506dd35b2670599dc Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:31:01 +0800
Subject: [PATCH 12/19] =?UTF-8?q?feat:=20JSON=20=E5=8F=AF=E8=A7=86?=
 =?UTF-8?q?=E5=8C=96=E5=85=B3=E7=B3=BB=E5=9B=BE=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

模式1=层级树(默认)，模式2=关系图(DataGraph)：每个对象/数组渲染成卡片，标量为键值行，嵌套对象作为独立卡片用贝塞尔连线连接，行内 chevron 展开/收起子节点；确定性布局(深度分列、父节点居中)。头部 Network 图标切换两种模式
---
 src/components/DataGraph.vue | 149 +++++++++++++++++++++++++++++++++++
 src/components/JsonView.vue  |  38 +++------
 2 files changed, 162 insertions(+), 25 deletions(-)
 create mode 100644 src/components/DataGraph.vue

diff --git a/src/components/DataGraph.vue b/src/components/DataGraph.vue
new file mode 100644
index 0000000..e97211a
--- /dev/null
+++ b/src/components/DataGraph.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="relative w-full h-full overflow-auto bg-[#0b1020]">
+    <div class="relative" :style="{ width: `${graph.w}px`, height: `${graph.h}px` }">
+      <!-- 连线 -->
+      <svg class="absolute inset-0 pointer-events-none" :width="graph.w" :height="graph.h">
+        <path v-for="(e, i) in graph.edges" :key="i" :d="e.d" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-opacity="0.6"/>
+      </svg>
+
+      <!-- 卡片节点 -->
+      <div v-for="n in graph.nodes" :key="n.id"
+           class="absolute rounded-xl border border-blue-500/40 bg-[#111a2e]/95 shadow-lg"
+           :style="{ left: `${n.x}px`, top: `${n.y}px`, width: `${CARD_W}px` }">
+        <div class="px-3 py-2 font-bold text-sm text-gray-100 border-b border-white/10 truncate">{{ n.title }}</div>
+        <div v-for="(r, ri) in n.rows" :key="ri"
+             class="flex items-center gap-2 px-3 border-b border-white/5 last:border-0"
+             :style="{ height: `${ROW_H}px` }">
+          <span class="text-gray-400 text-xs flex-shrink-0 max-w-[40%] truncate">{{ r.key }}</span>
+          <span class="flex-1 px-2 py-0.5 rounded bg-black/30 border border-white/10 font-mono text-xs truncate"
+                :class="r.childId ? 'text-blue-300' : 'text-gray-200'">{{ r.display }}</span>
+          <button v-if="r.childId"
+                  class="flex-shrink-0 w-5 h-5 flex items-center justify-center rounded border border-blue-500/40 text-blue-300 hover:bg-blue-500/20 cursor-pointer"
+                  :title="expanded.has(r.childId) ? '收起' : '展开'"
+                  @click="toggle(r.childId)">
+            <ChevronDown class="w-3.5 h-3.5 transition-transform" :class="{ '-rotate-90': !expanded.has(r.childId) }"/>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, watch} from 'vue'
+import {ChevronDown} from 'lucide-vue-next'
+
+const props = defineProps<{ value: any }>()
+
+const CARD_W = 260
+const HEADER_H = 40
+const ROW_H = 34
+const X_GAP = 320
+const V_GAP = 24
+const PAD = 32
+
+const isObj = (v: any) => v !== null && typeof v === 'object'
+const entriesOf = (v: any): [string, any][] =>
+    Array.isArray(v) ? v.map((x, i) => [String(i), x]) : Object.entries(v)
+
+const summary = (v: any) => (Array.isArray(v) ? `[ ${v.length} ]` : '{ … }')
+const scalar = (v: any) => {
+  if (v === null) return 'null'
+  const s = typeof v === 'string' ? `"${v}"` : String(v)
+  return s.length > 40 ? s.slice(0, 40) + '…' : s
+}
+
+// 展开状态（按 childId 路径）；默认展开前两层
+const expanded = reactive(new Set<string>())
+const initExpand = (v: any, path: string, depth: number) => {
+  if (!isObj(v) || depth >= 2) return
+  for (const [k, val] of entriesOf(v)) {
+    if (isObj(val)) {
+      const childId = path ? `${path}/${k}` : k
+      expanded.add(childId)
+      initExpand(val, childId, depth + 1)
+    }
+  }
+}
+watch(() => props.value, (v) => {
+  expanded.clear()
+  initExpand(v, '', 0)
+}, {immediate: true})
+
+const toggle = (id: string) => {
+  if (expanded.has(id)) {
+    expanded.delete(id)
+  }
+  else {
+    expanded.add(id)
+  }
+}
+
+interface GRow { key: string; display: string; childId?: string; value?: any }
+interface GNode { id: string; title: string; rows: GRow[]; x: number; y: number; height: number; children: { node: GNode; rowIndex: number }[] }
+
+const graph = computed(() => {
+  const nodes: GNode[] = []
+
+  const build = (value: any, path: string, title: string): GNode => {
+    const id = path || 'root'
+    const ents = isObj(value) ? entriesOf(value) : [['(value)', value] as [string, any]]
+    const rows: GRow[] = ents.map(([k, v]) => {
+      const expandable = isObj(v)
+      const childId = expandable ? (path ? `${path}/${k}` : k) : undefined
+      return {key: k, value: v, childId, display: expandable ? summary(v) : scalar(v)}
+    })
+    const node: GNode = {
+      id, title, rows,
+      x: 0, y: 0,
+      height: HEADER_H + rows.length * ROW_H,
+      children: []
+    }
+    nodes.push(node)
+    rows.forEach((r, ri) => {
+      if (r.childId && expanded.has(r.childId)) {
+        const child = build(r.value, r.childId, r.key)
+        node.children.push({node: child, rowIndex: ri})
+      }
+    })
+    return node
+  }
+
+  const root = build(props.value, '', 'ROOT')
+
+  // 布局：x 按深度，y 用游标堆叠叶子、父节点居中于子节点
+  let cursor = PAD
+  const layout = (node: GNode, depth: number) => {
+    node.x = PAD + depth * X_GAP
+    if (node.children.length === 0) {
+      node.y = cursor
+      cursor += node.height + V_GAP
+      return
+    }
+    for (const c of node.children) {
+      layout(c.node, depth + 1)
+    }
+    const first = node.children[0].node
+    const last = node.children[node.children.length - 1].node
+    node.y = (first.y + last.y + last.height) / 2 - node.height / 2
+    if (node.y < PAD) node.y = PAD
+  }
+  layout(root, 0)
+
+  // 连线
+  const edges: { d: string }[] = []
+  for (const node of nodes) {
+    for (const {node: child, rowIndex} of node.children) {
+      const sx = node.x + CARD_W
+      const sy = node.y + HEADER_H + rowIndex * ROW_H + ROW_H / 2
+      const tx = child.x
+      const ty = child.y + child.height / 2
+      edges.push({d: `M ${sx} ${sy} C ${sx + 70} ${sy}, ${tx - 70} ${ty}, ${tx} ${ty}`})
+    }
+  }
+
+  const w = Math.max(...nodes.map(n => n.x + CARD_W), 0) + PAD
+  const h = Math.max(cursor, ...nodes.map(n => n.y + n.height)) + PAD
+  return {nodes, edges, w, h}
+})
+</script>
diff --git a/src/components/JsonView.vue b/src/components/JsonView.vue
index 70182a1..7d1297d 100644
--- a/src/components/JsonView.vue
+++ b/src/components/JsonView.vue
@@ -11,9 +11,9 @@
       </div>
       <div class="flex items-center gap-1">
         <button class="p-1 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
-                :class="mode === 'tree' ? 'text-blue-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
-                :title="mode === 'tree' ? '切换为文本' : '切换为可视化（树）'"
-                @click="mode = mode === 'tree' ? 'text' : 'tree'">
+                :class="mode === 'graph' ? 'text-blue-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
+                :title="mode === 'graph' ? '切换为层级树' : '切换为可视化关系图'"
+                @click="mode = mode === 'graph' ? 'tree' : 'graph'">
           <Network class="w-3.5 h-3.5"/>
         </button>
         <button v-if="parsed !== undefined" class="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" title="复制" @click="copyJson">
@@ -25,18 +25,18 @@
       </div>
     </div>
 
-    <!-- 内容 -->
-    <div class="flex-1 overflow-auto p-2 font-mono text-xs">
+    <!-- 可视化关系图：独立占满（自带滚动）-->
+    <DataGraph v-if="mode === 'graph' && stable.trim() && !parseError && parsed !== undefined"
+               :value="parsed" class="flex-1"/>
+
+    <!-- 层级树 / 占位 / 错误 -->
+    <div v-else class="flex-1 overflow-auto p-2 font-mono text-xs">
       <div v-if="!stable.trim()" class="text-gray-400 px-2 py-4 text-center">运行后在此查看 JSON</div>
-      <!-- 解析失败：显示错误 + 原文 -->
       <div v-else-if="parseError" class="space-y-2">
         <div class="text-red-500">{{ parseError }}</div>
         <pre class="whitespace-pre-wrap text-gray-600 dark:text-gray-400">{{ stable }}</pre>
       </div>
-      <!-- 可视化：JSON 树 -->
-      <JsonNode v-else-if="mode === 'tree' && parsed !== undefined" :value="parsed" :depth="0"/>
-      <!-- 文本：格式化后的 JSON -->
-      <pre v-else class="whitespace-pre-wrap text-gray-700 dark:text-gray-300">{{ formatted }}</pre>
+      <JsonNode v-else-if="parsed !== undefined" :value="parsed" :depth="0"/>
     </div>
   </div>
 </template>
@@ -46,6 +46,7 @@ import {computed, ref, watch} from 'vue'
 import {debounce} from 'lodash-es'
 import {Braces, Copy, Network, Trash2} from 'lucide-vue-next'
 import JsonNode from './JsonNode.vue'
+import DataGraph from './DataGraph.vue'
 import {useToast} from '../plugins/toast'
 
 const props = defineProps<{
@@ -84,21 +85,8 @@ const parsed = computed(() => {
   }
 })
 
-// 显示模式：text=格式化文本（默认），tree=可视化树
-const mode = ref<'text' | 'tree'>('text')
-
-// 格式化后的 JSON 文本
-const formatted = computed(() => {
-  if (parsed.value === undefined) {
-    return stable.value
-  }
-  try {
-    return JSON.stringify(parsed.value, null, 2)
-  }
-  catch {
-    return stable.value
-  }
-})
+// 显示模式：tree=层级树（默认），graph=可视化关系图
+const mode = ref<'tree' | 'graph'>('tree')
 
 const copyJson = async () => {
   try {

From 9a1348321d8cc368e3ae030f1541ff93c2c28426 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:31:50 +0800
Subject: [PATCH 13/19] =?UTF-8?q?feat:=20YAML=20=E5=8F=AF=E8=A7=86?=
 =?UTF-8?q?=E5=8C=96=E5=85=B3=E7=B3=BB=E5=9B=BE=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

复用 DataGraph：YAML 解析为对象后渲染关系图；头部 Network 图标切换 层级树/关系图，清空改为图标
---
 src/components/YamlView.vue | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/YamlView.vue b/src/components/YamlView.vue
index 9fa4930..5d5a42d 100644
--- a/src/components/YamlView.vue
+++ b/src/components/YamlView.vue
@@ -8,10 +8,25 @@
         <span v-else-if="executionTime" class="text-gray-400">{{ executionTime }} ms</span>
         <span v-if="parseError" class="text-red-500">解析失败</span>
       </div>
-      <button class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="emit('clear')">清空</button>
+      <div class="flex items-center gap-1">
+        <button class="p-1 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
+                :class="mode === 'graph' ? 'text-blue-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
+                :title="mode === 'graph' ? '切换为层级树' : '切换为可视化关系图'"
+                @click="mode = mode === 'graph' ? 'tree' : 'graph'">
+          <Network class="w-3.5 h-3.5"/>
+        </button>
+        <button class="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" title="清空" @click="emit('clear')">
+          <Trash2 class="w-3.5 h-3.5"/>
+        </button>
+      </div>
     </div>
 
-    <div class="flex-1 overflow-auto p-2 font-mono text-xs">
+    <!-- 可视化关系图 -->
+    <DataGraph v-if="mode === 'graph' && stable.trim() && !parseError && parsed !== undefined"
+               :value="parsed" class="flex-1"/>
+
+    <!-- 层级树 / 占位 / 错误 -->
+    <div v-else class="flex-1 overflow-auto p-2 font-mono text-xs">
       <div v-if="!stable.trim()" class="text-gray-400 px-2 py-4 text-center">运行后在此查看 YAML</div>
       <div v-else-if="parseError" class="space-y-2">
         <div class="text-red-500">{{ parseError }}</div>
@@ -25,9 +40,10 @@
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
 import {debounce} from 'lodash-es'
-import {FileText} from 'lucide-vue-next'
+import {FileText, Network, Trash2} from 'lucide-vue-next'
 import yaml from 'js-yaml'
 import JsonNode from './JsonNode.vue'
+import DataGraph from './DataGraph.vue'
 
 const props = defineProps<{
   output: string
@@ -36,6 +52,9 @@ const props = defineProps<{
 }>()
 const emit = defineEmits<{ clear: [] }>()
 
+// 显示模式：tree=层级树（默认），graph=可视化关系图
+const mode = ref<'tree' | 'graph'>('tree')
+
 // 流式输出防抖
 const stable = ref(props.output)
 const applyOutput = debounce((v: string) => { stable.value = v }, 200)

From 3835f6cf0b63148fa73264c17955fcf65a8570d3 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:33:21 +0800
Subject: [PATCH 14/19] =?UTF-8?q?feat:=20XML=20=E5=8F=AF=E8=A7=86=E5=8C=96?=
 =?UTF-8?q?=E5=85=B3=E7=B3=BB=E5=9B=BE=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

XML DOM 转为普通对象（属性 @ 前缀、同名子标签聚合为数组）后复用 DataGraph 渲染关系图，根节点标题为根标签名；头部 Network 图标切换 层级树/关系图，清空改为图标。DataGraph 增加 rootTitle 属性
---
 src/components/DataGraph.vue |  4 +--
 src/components/XmlView.vue   | 55 ++++++++++++++++++++++++++++++++++--
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/components/DataGraph.vue b/src/components/DataGraph.vue
index e97211a..cf03329 100644
--- a/src/components/DataGraph.vue
+++ b/src/components/DataGraph.vue
@@ -33,7 +33,7 @@
 import {computed, reactive, watch} from 'vue'
 import {ChevronDown} from 'lucide-vue-next'
 
-const props = defineProps<{ value: any }>()
+const props = defineProps<{ value: any; rootTitle?: string }>()
 
 const CARD_W = 260
 const HEADER_H = 40
@@ -109,7 +109,7 @@ const graph = computed(() => {
     return node
   }
 
-  const root = build(props.value, '', 'ROOT')
+  const root = build(props.value, '', props.rootTitle || 'ROOT')
 
   // 布局：x 按深度，y 用游标堆叠叶子、父节点居中于子节点
   let cursor = PAD
diff --git a/src/components/XmlView.vue b/src/components/XmlView.vue
index e0c423c..63d2c5e 100644
--- a/src/components/XmlView.vue
+++ b/src/components/XmlView.vue
@@ -8,10 +8,25 @@
         <span v-else-if="executionTime" class="text-gray-400">{{ executionTime }} ms</span>
         <span v-if="parseError" class="text-red-500">解析失败</span>
       </div>
-      <button class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" @click="emit('clear')">清空</button>
+      <div class="flex items-center gap-1">
+        <button class="p-1 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
+                :class="mode === 'graph' ? 'text-blue-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
+                :title="mode === 'graph' ? '切换为层级树' : '切换为可视化关系图'"
+                @click="mode = mode === 'graph' ? 'tree' : 'graph'">
+          <Network class="w-3.5 h-3.5"/>
+        </button>
+        <button class="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" title="清空" @click="emit('clear')">
+          <Trash2 class="w-3.5 h-3.5"/>
+        </button>
+      </div>
     </div>
 
-    <div class="flex-1 overflow-auto p-2 font-mono text-xs">
+    <!-- 可视化关系图 -->
+    <DataGraph v-if="mode === 'graph' && stable.trim() && !parseError && graphData !== null"
+               :value="graphData" :root-title="rootTag" class="flex-1"/>
+
+    <!-- 层级树 / 占位 / 错误 -->
+    <div v-else class="flex-1 overflow-auto p-2 font-mono text-xs">
       <div v-if="!stable.trim()" class="text-gray-400 px-2 py-4 text-center">运行后在此查看 XML</div>
       <div v-else-if="parseError" class="space-y-2">
         <div class="text-red-500">{{ parseError }}</div>
@@ -25,8 +40,9 @@
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
 import {debounce} from 'lodash-es'
-import {Code} from 'lucide-vue-next'
+import {Code, Network, Trash2} from 'lucide-vue-next'
 import XmlNode from './XmlNode.vue'
+import DataGraph from './DataGraph.vue'
 
 const props = defineProps<{
   output: string
@@ -67,4 +83,37 @@ const root = computed<Element | null>(() => {
   }
   return doc.value.documentElement || null
 })
+
+// 显示模式：tree=层级树（默认），graph=可视化关系图
+const mode = ref<'tree' | 'graph'>('tree')
+
+// 把 XML 元素转为普通对象，复用 DataGraph（属性加 @ 前缀，同名子标签聚合为数组）
+const xmlToData = (el: Element): any => {
+  const obj: Record<string, any> = {}
+  for (const a of Array.from(el.attributes)) {
+    obj['@' + a.name] = a.value
+  }
+  const children = Array.from(el.children)
+  if (children.length === 0) {
+    const text = (el.textContent || '').trim()
+    if (Object.keys(obj).length === 0) {
+      return text
+    }
+    if (text) {
+      obj['#text'] = text
+    }
+    return obj
+  }
+  const groups: Record<string, Element[]> = {}
+  for (const c of children) {
+    (groups[c.tagName] ||= []).push(c)
+  }
+  for (const [tag, els] of Object.entries(groups)) {
+    obj[tag] = els.length === 1 ? xmlToData(els[0]) : els.map(xmlToData)
+  }
+  return obj
+}
+
+const graphData = computed(() => (root.value ? xmlToData(root.value) : null))
+const rootTag = computed(() => root.value?.tagName || 'ROOT')
 </script>

From 78f2a3b70dfa50126000e3294840750f64f70bea Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:43:43 +0800
Subject: [PATCH 15/19] =?UTF-8?q?feat:=20GitHub=20Actions=20=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E5=8F=AF=E8=A7=86=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

YAML 检测到 on+jobs 时识别为 GHA 工作流，新增'工作流图'模式（检测到时默认）：触发(on)为起始节点，各 job 按 needs 依赖拓扑分列连线，job 卡片列出 runs-on 与 steps。头部 Workflow 图标切换
---
 src/components/WorkflowGraph.vue | 167 +++++++++++++++++++++++++++++++
 src/components/YamlView.vue      |  36 ++++++-
 2 files changed, 199 insertions(+), 4 deletions(-)
 create mode 100644 src/components/WorkflowGraph.vue

diff --git a/src/components/WorkflowGraph.vue b/src/components/WorkflowGraph.vue
new file mode 100644
index 0000000..adedae8
--- /dev/null
+++ b/src/components/WorkflowGraph.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="relative w-full h-full overflow-auto bg-[#0b1020]">
+    <div class="relative" :style="{ width: `${graph.w}px`, height: `${graph.h}px` }">
+      <svg class="absolute inset-0 pointer-events-none" :width="graph.w" :height="graph.h">
+        <path v-for="(e, i) in graph.edges" :key="i" :d="e.d" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-opacity="0.6"/>
+      </svg>
+
+      <div v-for="n in graph.nodes" :key="n.id"
+           class="absolute rounded-xl border shadow-lg"
+           :class="n.kind === 'trigger' ? 'border-amber-500/50 bg-[#2a230f]/95' : 'border-blue-500/40 bg-[#111a2e]/95'"
+           :style="{ left: `${n.x}px`, top: `${n.y}px`, width: `${CARD_W}px` }">
+        <div class="px-3 py-2 font-bold text-sm border-b border-white/10 truncate flex items-center gap-1.5"
+             :class="n.kind === 'trigger' ? 'text-amber-200' : 'text-gray-100'">
+          <component :is="n.kind === 'trigger' ? Zap : Workflow" class="w-3.5 h-3.5"/>
+          {{ n.title }}
+        </div>
+        <div v-for="(r, ri) in n.rows" :key="ri"
+             class="flex items-center gap-2 px-3 border-b border-white/5 last:border-0"
+             :style="{ height: `${ROW_H}px` }">
+          <span v-if="r.tag" class="text-[10px] px-1 rounded bg-white/10 text-gray-300 flex-shrink-0">{{ r.tag }}</span>
+          <span class="flex-1 text-xs text-gray-300 font-mono truncate">{{ r.text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {Workflow, Zap} from 'lucide-vue-next'
+
+const props = defineProps<{ workflow: any }>()
+
+const CARD_W = 280
+const HEADER_H = 40
+const ROW_H = 30
+const X_GAP = 340
+const V_GAP = 28
+const PAD = 32
+
+const asArray = (v: any): any[] => (Array.isArray(v) ? v : v == null ? [] : [v])
+
+// 触发事件列表
+const triggers = computed<string[]>(() => {
+  const on = props.workflow?.on
+  if (!on) return []
+  if (typeof on === 'string') return [on]
+  if (Array.isArray(on)) return on.map(String)
+  if (typeof on === 'object') return Object.keys(on)
+  return []
+})
+
+// 某个 step 的展示文本
+const stepText = (s: any): string => {
+  if (s == null) return ''
+  if (typeof s === 'string') return s
+  if (s.name) return s.name
+  if (s.uses) return `uses: ${s.uses}`
+  if (s.run) return `run: ${String(s.run).split('\n')[0]}`
+  return '(step)'
+}
+
+interface WRow { tag?: string; text: string }
+interface WNode { id: string; title: string; kind: 'trigger' | 'job'; rows: WRow[]; x: number; y: number; height: number; deps: string[]; level: number }
+
+const graph = computed(() => {
+  const jobs = (props.workflow?.jobs && typeof props.workflow.jobs === 'object') ? props.workflow.jobs : {}
+  const jobIds = Object.keys(jobs)
+
+  const needsOf = (id: string): string[] =>
+      asArray(jobs[id]?.needs).map(String).filter((n: string) => jobIds.includes(n))
+
+  // 拓扑层级（最长路径）
+  const levelCache = new Map<string, number>()
+  const levelOf = (id: string, seen = new Set<string>()): number => {
+    if (levelCache.has(id)) return levelCache.get(id)!
+    if (seen.has(id)) return 0
+    seen.add(id)
+    const deps = needsOf(id)
+    const lv = deps.length ? Math.max(...deps.map(d => levelOf(d, seen))) + 1 : 0
+    levelCache.set(id, lv)
+    return lv
+  }
+
+  const nodes: WNode[] = []
+
+  // 触发节点（最左列）
+  if (triggers.value.length) {
+    nodes.push({
+      id: '__trigger__', title: '触发 (on)', kind: 'trigger',
+      rows: triggers.value.map(t => ({text: t})),
+      x: 0, y: 0, height: HEADER_H + triggers.value.length * ROW_H, deps: [], level: -1
+    })
+  }
+
+  // job 节点
+  for (const id of jobIds) {
+    const job = jobs[id] || {}
+    const rows: WRow[] = []
+    if (job['runs-on']) {
+      rows.push({tag: 'runs-on', text: String(job['runs-on'])})
+    }
+    for (const s of asArray(job.steps)) {
+      rows.push({tag: 'step', text: stepText(s)})
+    }
+    if (rows.length === 0) {
+      rows.push({text: '(无步骤)'})
+    }
+    nodes.push({
+      id, title: job.name || id, kind: 'job', rows,
+      x: 0, y: 0, height: HEADER_H + rows.length * ROW_H,
+      deps: needsOf(id), level: levelOf(id)
+    })
+  }
+
+  // 按层级分列；触发节点列 = 0，job 列 = level + (有触发?1:0)
+  const hasTrigger = triggers.value.length > 0
+  const colOf = (n: WNode) => (n.kind === 'trigger' ? 0 : n.level + (hasTrigger ? 1 : 0))
+
+  // 每列垂直堆叠
+  const colCursor = new Map<number, number>()
+  // 按列分组后排布
+  const byCol = new Map<number, WNode[]>()
+  for (const n of nodes) {
+    const c = colOf(n)
+    if (!byCol.has(c)) byCol.set(c, [])
+    byCol.get(c)!.push(n)
+  }
+  for (const [col, list] of Array.from(byCol.entries()).sort((a, b) => a[0] - b[0])) {
+    let y = PAD
+    for (const n of list) {
+      n.x = PAD + col * X_GAP
+      n.y = y
+      y += n.height + V_GAP
+    }
+    colCursor.set(col, y)
+  }
+
+  // 连线：触发 → level0 job；job → 依赖它的 job
+  const idMap = new Map(nodes.map(n => [n.id, n]))
+  const edges: { d: string }[] = []
+  const link = (from: WNode, to: WNode) => {
+    const sx = from.x + CARD_W
+    const sy = from.y + from.height / 2
+    const tx = to.x
+    const ty = to.y + to.height / 2
+    edges.push({d: `M ${sx} ${sy} C ${sx + 80} ${sy}, ${tx - 80} ${ty}, ${tx} ${ty}`})
+  }
+  const trigger = idMap.get('__trigger__')
+  for (const n of nodes) {
+    if (n.kind !== 'job') continue
+    if (n.deps.length === 0) {
+      if (trigger) link(trigger, n)
+    }
+    else {
+      for (const d of n.deps) {
+        const dn = idMap.get(d)
+        if (dn) link(dn, n)
+      }
+    }
+  }
+
+  const w = Math.max(...nodes.map(n => n.x + CARD_W), 0) + PAD
+  const h = Math.max(PAD, ...nodes.map(n => n.y + n.height)) + PAD
+  return {nodes, edges, w, h}
+})
+</script>
diff --git a/src/components/YamlView.vue b/src/components/YamlView.vue
index 5d5a42d..3cec93e 100644
--- a/src/components/YamlView.vue
+++ b/src/components/YamlView.vue
@@ -9,6 +9,13 @@
         <span v-if="parseError" class="text-red-500">解析失败</span>
       </div>
       <div class="flex items-center gap-1">
+        <button v-if="isWorkflow"
+                class="p-1 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
+                :class="mode === 'workflow' ? 'text-amber-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
+                title="GitHub Actions 工作流图"
+                @click="mode = mode === 'workflow' ? 'tree' : 'workflow'">
+          <Workflow class="w-3.5 h-3.5"/>
+        </button>
         <button class="p-1 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
                 :class="mode === 'graph' ? 'text-blue-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
                 :title="mode === 'graph' ? '切换为层级树' : '切换为可视化关系图'"
@@ -21,8 +28,12 @@
       </div>
     </div>
 
+    <!-- GitHub Actions 工作流图 -->
+    <WorkflowGraph v-if="mode === 'workflow' && isWorkflow && !parseError"
+                   :workflow="parsed" class="flex-1"/>
+
     <!-- 可视化关系图 -->
-    <DataGraph v-if="mode === 'graph' && stable.trim() && !parseError && parsed !== undefined"
+    <DataGraph v-else-if="mode === 'graph' && stable.trim() && !parseError && parsed !== undefined"
                :value="parsed" class="flex-1"/>
 
     <!-- 层级树 / 占位 / 错误 -->
@@ -40,10 +51,11 @@
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
 import {debounce} from 'lodash-es'
-import {FileText, Network, Trash2} from 'lucide-vue-next'
+import {FileText, Network, Trash2, Workflow} from 'lucide-vue-next'
 import yaml from 'js-yaml'
 import JsonNode from './JsonNode.vue'
 import DataGraph from './DataGraph.vue'
+import WorkflowGraph from './WorkflowGraph.vue'
 
 const props = defineProps<{
   output: string
@@ -52,8 +64,8 @@ const props = defineProps<{
 }>()
 const emit = defineEmits<{ clear: [] }>()
 
-// 显示模式：tree=层级树（默认），graph=可视化关系图
-const mode = ref<'tree' | 'graph'>('tree')
+// 显示模式：tree=层级树，graph=关系图，workflow=GitHub Actions 工作流图
+const mode = ref<'tree' | 'graph' | 'workflow'>('tree')
 
 // 流式输出防抖
 const stable = ref(props.output)
@@ -74,4 +86,20 @@ const parseResult = computed<{ value: any; error: string }>(() => {
 })
 const parsed = computed(() => parseResult.value.value)
 const parseError = computed(() => parseResult.value.error)
+
+// 检测是否为 GitHub Actions 工作流（含 on 触发 + jobs）
+const isWorkflow = computed(() => {
+  const v = parsed.value
+  return !!(v && typeof v === 'object' && v.on !== undefined && v.jobs && typeof v.jobs === 'object')
+})
+
+// 是工作流时默认用工作流图模式
+watch(isWorkflow, (yes) => {
+  if (yes && mode.value === 'tree') {
+    mode.value = 'workflow'
+  }
+  else if (!yes && mode.value === 'workflow') {
+    mode.value = 'tree'
+  }
+}, {immediate: true})
 </script>

From e3f99a0d923c5ba6424f43cc23784e28683151af Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:49:07 +0800
Subject: [PATCH 16/19] =?UTF-8?q?docs:=20=E9=87=8D=E5=86=99=20README?=
 =?UTF-8?q?=EF=BC=8C=E6=B8=85=E6=99=B0=E5=91=88=E7=8E=B0=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E4=B8=8E=E5=AE=8C=E6=95=B4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 定位更新为「多语言代码编辑器与运行器」，不再只是执行器
- 按编辑/运行/可视化/AI/Git/搜索终端分类列出完整功能与快捷键
- 支持语言图标网格补全（含 scala/applescript/json/xml/yaml/markdown/text）并附文字清单
- 加徽章、技术栈表、环境要求(Node 22+)、贡献入口
---
 README.md | 192 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 129 insertions(+), 63 deletions(-)

diff --git a/README.md b/README.md
index ba0117c..b0e712d 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,125 @@
 <div align="center">
-<img src="public/codeforge.svg" width=100 />
+<img src="public/codeforge.svg" width="100" />
 
-<h1 style="margin-top: -20px;">CodeForge</h1>
+<h1 style="margin-top: -10px;">CodeForge</h1>
 
-CodeForge 是一款轻量级、高性能的桌面代码执行器，专为开发者、学生和编程爱好者设计。
+**一款现代化的桌面端多语言代码编辑器与运行器**
+
+集「文件/项目编辑 · 一键运行 · AI 助手 · Git 集成 · 集成终端 · 结构化数据可视化」于一身，
+让你在一个轻量优雅的桌面应用里完成编写、运行、调试与协作。
+
+<p>
+  <img alt="version" src="https://img.shields.io/badge/version-26.1.0-blue" />
+  <img alt="platform" src="https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-555" />
+  <img alt="stack" src="https://img.shields.io/badge/Tauri%202-Vue%203-FFC131" />
+  <img alt="license" src="https://img.shields.io/badge/license-MIT-green" />
+</p>
 </div>
 
-## 演示视频
-
-📹 [下载演示视频](https://devlive-cdn.oss-cn-beijing.aliyuncs.com/applications/codeforge/codeforge.mp4) (点击下载或观看)
-
-> 注：由于 GitHub 不支持直接播放视频，请下载或点击链接查看
-
-## 特性
-
-- 🚀 **即时执行** - 一键运行代码
-- 💻 **现代界面** - 简洁优雅的用户体验
-- 📝 **智能编辑** - 代码高亮、行号、自动缩进
-- 📊 **执行监控** - 实时显示执行时间和结果
-- 🔧 **插件架构** - 可扩展的语言支持系统
-
-## 支持的语言
-
-<div style="display: flex; align-items: center; justify-content: center;">
-  <img src="public/icons/c.svg" width="60" alt="C">
-  <img src="public/icons/cangjie.svg" width="60" alt="Cangjie">
-  <img src="public/icons/clojure.svg" width="60" alt="Clojure">
-  <img src="public/icons/cpp.svg" width="60" alt="C++">
-  <img src="public/icons/css.svg" width="60" alt="CSS">
-  <img src="public/icons/go.svg" width="60" alt="Go">
-  <img src="public/icons/groovy.svg" width="60" alt="Groovy">
-  <img src="public/icons/haskell.svg" width="60" alt="Haskell">
-  <img src="public/icons/html.svg" width="60" alt="HTML">
-  <img src="public/icons/java.svg" width="60" alt="Java">
-  <img src="public/icons/javascript-browser.svg" width="60" alt="JavaScript (Browser)">
-  <img src="public/icons/javascript-jquery.svg" width="60" alt="JavaScript (jQuery)">
-  <img src="public/icons/javascript-nodejs.svg" width="60" alt="JavaScript (Node.js)">
-  <img src="public/icons/kotlin.svg" width="60" alt="Kotlin">
-  <img src="public/icons/lua.svg" width="60" alt="Lua">
-  <img src="public/icons/nodejs.svg" width="60" alt="Node.js">
-  <img src="public/icons/objective-c.svg" width="60" alt="Objective-C">
-  <img src="public/icons/objective-cpp.svg" width="60" alt="Objective-C++">
-  <img src="public/icons/php.svg" width="60" alt="PHP">
-  <img src="public/icons/python.svg" width="60" alt="Python 2">
-  <img src="public/icons/python.svg" width="60" alt="Python 3">
-  <img src="public/icons/r.svg" width="60" alt="R">
-  <img src="public/icons/ruby.svg" width="60" alt="Ruby">
-  <img src="public/icons/rust.svg" width="60" alt="Rust">
-  <img src="public/icons/shell.svg" width="60" alt="Shell">
-  <img src="public/icons/svg.svg" width="60" alt="SVG">
-  <img src="public/icons/swift.svg" width="60" alt="Swift">
-  <img src="public/icons/typescript.svg" width="60" alt="TypeScript">
-  <img src="public/icons/typescript-browser.svg" width="60" alt="TypeScript (Browser)">
-  <img src="public/icons/typescript-nodejs.svg" width="60" alt="TypeScript (Node.js)">
+---
+
+## 📹 演示视频
+
+[下载演示视频](https://devlive-cdn.oss-cn-beijing.aliyuncs.com/applications/codeforge/codeforge.mp4)（点击下载或观看）
+
+> GitHub 不支持直接播放视频，请下载或点击链接查看。
+
+---
+
+## ✨ 核心功能
+
+### 📂 编辑与项目
+- **文件树侧栏 + 多标签编辑** —— 打开文件夹，像 IDE 一样浏览、编辑整个项目
+- **面包屑路径导航** —— 点击任意层级在系统文件管理器中定位
+- **命令面板**（`Cmd/Ctrl + Shift + P`）—— 一处入口直达所有命令
+- **快速打开**（`Cmd/Ctrl + P`）—— 模糊匹配 + 最近文件优先
+- **符号大纲**（`Cmd/Ctrl + Shift + O`）、**跳转到行**（`Cmd/Ctrl + G`）
+- **代码片段** —— 自定义前缀，输入后按 `Tab` 展开（`$0` 为光标落点）
+- **会话恢复** —— 重启自动恢复上次的文件夹与标签页
+- **深色模式** —— 跟随系统 / 浅色 / 深色，编辑器主题同步切换
+
+### ▶️ 运行与调试
+- **一键运行 / 按文件就地运行**，实时流式输出、执行耗时统计
+- **运行选中片段**（`Cmd/Ctrl + Shift + Enter`）
+- **监听模式** —— 保存后自动重跑
+- **运行输入** —— 自定义参数 / stdin / 环境变量，并按文件记忆
+- **执行历史** —— 持久化保存，可一键重跑与还原
+
+### 📊 结构化数据可视化
+- **JSON / XML / YAML** —— 可折叠**层级树**，以及卡片 + 连线的**关系图**两种可视化
+- **Markdown** —— 实时渲染预览（支持内嵌 HTML，DOMPurify 净化防 XSS）
+- **GitHub Actions 工作流** —— 自动识别并渲染为 **Jobs 依赖 DAG 图**（触发事件 → 各 Job → Steps）
+
+### 🤖 AI 助手
+- **多服务商** —— Claude (Anthropic) / OpenAI / DeepSeek
+- **AI 代码预测** —— 编辑器内幽灵补全，`Tab` 接受
+- **解释代码 / 生成测试 / 格式化代码** —— 一键发起，应用前可 diff 预览确认
+- **报错分析、自然语言生成代码、生成 Git 提交信息**
+- **对话与执行历史绑定** —— 每次执行的 AI 讨论可追溯
+
+### 🔱 Git 集成
+- **源代码管理面板** —— 暂存 / 提交 / 推送 / 分支切换，AI 一键生成提交信息
+- **文件树状态徽标**（M / A / D / U）
+- **编辑器行内差异标记** —— 相对 HEAD 的增 / 改 / 删
+
+### 🔎 搜索与终端
+- **文件夹内搜索与替换**（`Cmd/Ctrl + Shift + F`）
+- **集成终端** —— 真实 shell、多标签、可拖拽改高度（`` Cmd/Ctrl + ` ``）
+
+---
+
+## 🧩 支持的语言
+
+可运行语言均采用**插件化架构**，每种语言独立实现；JSON / XML / YAML / Markdown / 纯文本为编辑与可视化类型。
+
+<div align="center">
+  <img src="public/icons/python.svg" width="48" title="Python 2 / 3" />
+  <img src="public/icons/nodejs.svg" width="48" title="Node.js" />
+  <img src="public/icons/typescript.svg" width="48" title="TypeScript" />
+  <img src="public/icons/javascript-nodejs.svg" width="48" title="JavaScript (Node.js)" />
+  <img src="public/icons/javascript-browser.svg" width="48" title="JavaScript (Browser)" />
+  <img src="public/icons/javascript-jquery.svg" width="48" title="JavaScript (jQuery)" />
+  <img src="public/icons/go.svg" width="48" title="Go" />
+  <img src="public/icons/rust.svg" width="48" title="Rust" />
+  <img src="public/icons/java.svg" width="48" title="Java" />
+  <img src="public/icons/kotlin.svg" width="48" title="Kotlin" />
+  <img src="public/icons/scala.svg" width="48" title="Scala" />
+  <img src="public/icons/groovy.svg" width="48" title="Groovy" />
+  <img src="public/icons/clojure.svg" width="48" title="Clojure" />
+  <img src="public/icons/c.svg" width="48" title="C" />
+  <img src="public/icons/cpp.svg" width="48" title="C++" />
+  <img src="public/icons/objective-c.svg" width="48" title="Objective-C" />
+  <img src="public/icons/objective-cpp.svg" width="48" title="Objective-C++" />
+  <img src="public/icons/swift.svg" width="48" title="Swift" />
+  <img src="public/icons/ruby.svg" width="48" title="Ruby" />
+  <img src="public/icons/php.svg" width="48" title="PHP" />
+  <img src="public/icons/r.svg" width="48" title="R" />
+  <img src="public/icons/lua.svg" width="48" title="Lua" />
+  <img src="public/icons/haskell.svg" width="48" title="Haskell" />
+  <img src="public/icons/cangjie.svg" width="48" title="Cangjie" />
+  <img src="public/icons/shell.svg" width="48" title="Shell" />
+  <img src="public/icons/applescript.svg" width="48" title="AppleScript" />
+  <img src="public/icons/html.svg" width="48" title="HTML" />
+  <img src="public/icons/css.svg" width="48" title="CSS" />
+  <img src="public/icons/svg.svg" width="48" title="SVG" />
+  <img src="public/icons/json.svg" width="48" title="JSON" />
+  <img src="public/icons/xml.svg" width="48" title="XML" />
+  <img src="public/icons/yaml.svg" width="48" title="YAML" />
+  <img src="public/icons/markdown.svg" width="48" title="Markdown" />
+  <img src="public/icons/text.svg" width="48" title="纯文本" />
 </div>
 
-## 安装
+<div align="center">
 
-**系统要求：**
+`Python` · `Node.js` · `TypeScript` · `JavaScript` · `Go` · `Rust` · `Java` · `Kotlin` · `Scala` · `Groovy` · `Clojure` · `C` · `C++` · `Objective-C/C++` · `Swift` · `Ruby` · `PHP` · `R` · `Lua` · `Haskell` · `Cangjie` · `Shell` · `AppleScript` · `HTML` · `CSS` · `SVG` · `JSON` · `XML` · `YAML` · `Markdown` · `Text`
 
-- Node.js 18+
-- Rust 1.8+
-- Tauri 2.x
-- Vue 3.x
+</div>
 
-**构建步骤：**
+---
+
+## 🚀 安装与构建
+
+**环境要求：** Node.js 22+ · Rust 1.8+ · pnpm
 
 ```bash
 # 克隆项目
@@ -81,12 +136,23 @@ pnpm tauri dev
 pnpm tauri build
 ```
 
-## 技术栈
+---
+
+## 🛠 技术栈
+
+| 层 | 技术 |
+| --- | --- |
+| 前端 | Vue 3 · TypeScript · Tailwind CSS · CodeMirror 6 |
+| 后端 | Rust · Tauri 2 |
+| 存储 | SQLite（执行历史 / AI 对话 / 代码片段 / 应用配置统一入库） |
+| 架构 | 插件化语言支持系统 |
+
+---
+
+## 🤝 贡献与反馈
 
-- **前端：** Vue 3 + TypeScript + Tailwind CSS
-- **后端：** Rust + Tauri
-- **架构：** 插件化语言支持系统
+欢迎提交 Issue 与 PR：<https://github.com/devlive-community/codeforge/issues>
 
-## 许可证
+## 📄 许可证
 
-MIT License
\ No newline at end of file
+[MIT License](LICENSE)

From 8b44895321b865aabb115f828e51ed970e566f88 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:53:13 +0800
Subject: [PATCH 17/19] =?UTF-8?q?feat:=20=E7=8A=B6=E6=80=81=E6=A0=8F?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BB=88=E7=AB=AF=E5=88=87=E6=8D=A2=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=EF=BC=88=E5=B8=A6=E5=BF=AB=E6=8D=B7=E9=94=AE=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

底部状态栏右侧新增终端图标按钮，点击切换终端面板，并显示当前绑定的快捷键(默认 ⌘`/Ctrl+`)，跟随用户自定义
---
 src/App.vue                  |  2 +-
 src/components/StatusBar.vue | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cdf44d8..02d6127 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -232,7 +232,7 @@
               @close="showTerminal = false; terminalMounted = false"/>
 
     <!-- 状态栏 -->
-    <StatusBar :env-info="envInfo" :is-loading="isLoadingEnvInfo" :execution-time="lastExecutionTime" :code-length="(code || '').length" @check-environment="refreshEnvInfo"/>
+    <StatusBar :env-info="envInfo" :is-loading="isLoadingEnvInfo" :execution-time="lastExecutionTime" :code-length="(code || '').length" @check-environment="refreshEnvInfo" @toggle-terminal="toggleTerminal"/>
 
     <!-- 关于组件 -->
     <About v-if="showAbout" @close="closeAbout"/>
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index 4f65b42..f02eac9 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -26,14 +26,23 @@
         <Hash class="w-3 h-3 font-normal"/>
         <span><strong>{{ codeLength }}</strong> 字符</span>
       </div>
+
+      <!-- 终端 -->
+      <button @click="emit('toggleTerminal')"
+              class="flex items-center gap-1.5 p-1 rounded cursor-pointer hover:bg-white/20 transition-colors"
+              :title="`终端（${terminalShortcut}）`">
+        <TerminalIcon class="w-3.5 h-3.5"/>
+        <span class="text-xs opacity-80">{{ terminalShortcut }}</span>
+      </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Clock, Hash, RefreshCw } from 'lucide-vue-next'
-import { toRefs } from 'vue'
+import { Clock, Hash, RefreshCw, Terminal as TerminalIcon } from 'lucide-vue-next'
+import { computed, toRefs } from 'vue'
 import { useStatusBar } from '../composables/useStatusBar'
+import { useShortcuts } from '../composables/useShortcuts'
 
 const props = defineProps<{
   envInfo: {
@@ -49,10 +58,15 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   checkEnvironment: []
+  toggleTerminal: []
 }>()
 
 const { envInfo, isLoading } = toRefs(props)
 
+// 终端快捷键提示（跟随用户自定义绑定）
+const { getBinding, formatCombo } = useShortcuts()
+const terminalShortcut = computed(() => formatCombo(getBinding('toggleTerminal')))
+
 const {
   getStatusColor,
   getStatusIcon,

From af81408bd2b71768de1495b6c521cc790e310be0 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 08:54:06 +0800
Subject: [PATCH 18/19] =?UTF-8?q?style:=20=E7=8A=B6=E6=80=81=E6=A0=8F?=
 =?UTF-8?q?=E7=BB=88=E7=AB=AF=E6=8C=89=E9=92=AE=E4=B8=8D=E5=86=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=BF=AB=E6=8D=B7=E9=94=AE=E6=96=87=E5=AD=97=EF=BC=88?=
 =?UTF-8?q?=E4=BB=85=E5=9B=BE=E6=A0=87=EF=BC=8C=E5=BF=AB=E6=8D=B7=E9=94=AE?=
 =?UTF-8?q?=E4=BF=9D=E7=95=99=E5=9C=A8=20hover=20=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StatusBar.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index f02eac9..ac5ec55 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -29,10 +29,9 @@
 
       <!-- 终端 -->
       <button @click="emit('toggleTerminal')"
-              class="flex items-center gap-1.5 p-1 rounded cursor-pointer hover:bg-white/20 transition-colors"
+              class="p-1 rounded cursor-pointer hover:bg-white/20 transition-colors"
               :title="`终端（${terminalShortcut}）`">
         <TerminalIcon class="w-3.5 h-3.5"/>
-        <span class="text-xs opacity-80">{{ terminalShortcut }}</span>
       </button>
     </div>
   </div>

From 82edd4cdd6f734fcc3000e8733f05518ba713125 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 6 Jun 2026 09:01:05 +0800
Subject: [PATCH 19/19] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20SQL=20?=
 =?UTF-8?q?=E8=AF=AD=E8=A8=80=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 按插件架构新增 src-tauri/src/plugins/sql.rs（.sql），默认在内存 SQLite 中执行(sqlite3 :memory: .read)，在 mod.rs/manager.rs 注册
- 前端 getLanguageExtension 增加 SQL 高亮(@codemirror/lang-sql)
- 新增 sql.svg 数据库图标
---
 package.json                           |  1 +
 public/icons/sql.svg                   |  6 +++
 src-tauri/src/plugins/manager.rs       |  2 +
 src-tauri/src/plugins/mod.rs           |  1 +
 src-tauri/src/plugins/sql.rs           | 57 ++++++++++++++++++++++++++
 src/composables/useCodeMirrorEditor.ts |  3 ++
 6 files changed, 70 insertions(+)
 create mode 100644 public/icons/sql.svg
 create mode 100644 src-tauri/src/plugins/sql.rs

diff --git a/package.json b/package.json
index 53aac4c..50e2f35 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@codemirror/lang-php": "^6.0.2",
     "@codemirror/lang-python": "^6.2.1",
     "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lang-yaml": "^6.1.3",
     "@codemirror/language": "^6.11.2",
diff --git a/public/icons/sql.svg b/public/icons/sql.svg
new file mode 100644
index 0000000..a10961d
--- /dev/null
+++ b/public/icons/sql.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <rect x="2" y="2" width="20" height="20" rx="4" fill="#0277bd"/>
+  <ellipse cx="12" cy="7.5" rx="6" ry="2.2" fill="none" stroke="#fff" stroke-width="1.3"/>
+  <path d="M6 7.5 V16.5 C6 17.7 8.7 18.7 12 18.7 S18 17.7 18 16.5 V7.5" fill="none" stroke="#fff" stroke-width="1.3"/>
+  <path d="M6 12 C6 13.2 8.7 14.2 12 14.2 S18 13.2 18 12" fill="none" stroke="#fff" stroke-width="1.3"/>
+</svg>
diff --git a/src-tauri/src/plugins/manager.rs b/src-tauri/src/plugins/manager.rs
index 374d7d9..587883c 100644
--- a/src-tauri/src/plugins/manager.rs
+++ b/src-tauri/src/plugins/manager.rs
@@ -29,6 +29,7 @@ use crate::plugins::ruby::RubyPlugin;
 use crate::plugins::rust::RustPlugin;
 use crate::plugins::scala::ScalaPlugin;
 use crate::plugins::shell::ShellPlugin;
+use crate::plugins::sql::SqlPlugin;
 use crate::plugins::svg::SvgPlugin;
 use crate::plugins::swift::SwiftPlugin;
 use crate::plugins::text::TextPlugin;
@@ -75,6 +76,7 @@ impl PluginManager {
             ("yaml".to_string(), Box::new(YamlPlugin)),
             ("markdown".to_string(), Box::new(MarkdownPlugin)),
             ("text".to_string(), Box::new(TextPlugin)),
+            ("sql".to_string(), Box::new(SqlPlugin)),
             ("php".to_string(), Box::new(PHPPlugin)),
             ("r".to_string(), Box::new(RPlugin)),
             ("cangjie".to_string(), Box::new(CangjiePlugin)),
diff --git a/src-tauri/src/plugins/mod.rs b/src-tauri/src/plugins/mod.rs
index eed10ee..c3a86a6 100644
--- a/src-tauri/src/plugins/mod.rs
+++ b/src-tauri/src/plugins/mod.rs
@@ -429,6 +429,7 @@ pub mod ruby;
 pub mod rust;
 pub mod scala;
 pub mod shell;
+pub mod sql;
 pub mod svg;
 pub mod swift;
 pub mod text;
diff --git a/src-tauri/src/plugins/sql.rs b/src-tauri/src/plugins/sql.rs
new file mode 100644
index 0000000..bd353d3
--- /dev/null
+++ b/src-tauri/src/plugins/sql.rs
@@ -0,0 +1,57 @@
+use super::{LanguagePlugin, PluginConfig};
+use std::vec;
+
+pub struct SqlPlugin;
+
+impl LanguagePlugin for SqlPlugin {
+    fn get_order(&self) -> i32 {
+        28
+    }
+
+    fn get_language_name(&self) -> &'static str {
+        "SQL"
+    }
+
+    fn get_language_key(&self) -> &'static str {
+        "sql"
+    }
+
+    fn get_file_extension(&self) -> String {
+        self.get_config()
+            .map(|config| config.extension.clone())
+            .unwrap_or_else(|| "sql".to_string())
+    }
+
+    fn get_version_args(&self) -> Vec<&'static str> {
+        vec!["--version"]
+    }
+
+    fn get_path_command(&self) -> String {
+        "sqlite3".to_string()
+    }
+
+    fn get_default_config(&self) -> PluginConfig {
+        PluginConfig {
+            enabled: true,
+            language: String::from("sql"),
+            before_compile: None,
+            extension: String::from("sql"),
+            execute_home: None,
+            // 在内存 SQLite 中执行脚本（需要本机有 sqlite3）
+            run_command: Some(String::from("sqlite3 :memory: .read $filename")),
+            after_compile: None,
+            template: Some(String::from(
+                "-- 在这里输入 SQL（默认在内存 SQLite 中执行）\nSELECT 'Hello, CodeForge' AS message;\n",
+            )),
+            timeout: Some(30),
+            console_type: Some(String::from("console")),
+            icon_path: None,
+        }
+    }
+
+    fn get_default_command(&self) -> String {
+        self.get_config()
+            .and_then(|config| config.run_command.clone())
+            .unwrap_or_else(|| "sqlite3".to_string())
+    }
+}
diff --git a/src/composables/useCodeMirrorEditor.ts b/src/composables/useCodeMirrorEditor.ts
index 95112b2..e7e7a59 100644
--- a/src/composables/useCodeMirrorEditor.ts
+++ b/src/composables/useCodeMirrorEditor.ts
@@ -83,6 +83,7 @@ import {cursorListener} from "../editor/cursorInfo";
 import {json} from "@codemirror/lang-json";
 import {markdown} from "@codemirror/lang-markdown";
 import {yaml} from "@codemirror/lang-yaml";
+import {sql} from "@codemirror/lang-sql";
 import {useSnippets} from "./useSnippets";
 
 interface Props
@@ -321,6 +322,8 @@ export function useCodeMirrorEditor(props: Props)
                 return markdown()
             case 'xml':
                 return xml()
+            case 'sql':
+                return sql()
             case 'text':
                 return null
             default: