Jeditor更新为优先使用prettier格式化显示源代码

frontend/package-lock.json

@@ -59,6 +59,7 @@
         "jquery": "^3.7.0",
         "naive-ui": "^2.34.0",
         "pinia": "^2.1.0",
+        "prettier": "^3.6.2",
         "sortablejs": "^1.15.0",
         "unplugin-icons": "^22.4.2",
         "unplugin-vue-components": "^29.1.0",
@@ -3203,6 +3204,21 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prosemirror-changeset": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.3.1.tgz",

frontend/package.json

@@ -9,11 +9,6 @@
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",
-    "@vue-flow/background": "^1.0.0",
-    "@vue-flow/controls": "^1.0.0",
-    "@vue-flow/core": "^1.0.0",
-    "@vue-flow/minimap": "^1.0.0",
-    "@vueuse/core": "^13.9.0",
     "@tiptap/core": "^2.2.0",
     "@tiptap/extension-blockquote": "^2.2.0",
     "@tiptap/extension-bold": "^2.2.0",
@@ -55,10 +50,16 @@
     "@tiptap/extension-typography": "^2.2.0",
     "@tiptap/extension-underline": "^2.2.0",
     "@tiptap/starter-kit": "^2.2.0",
+    "@vue-flow/background": "^1.0.0",
+    "@vue-flow/controls": "^1.0.0",
+    "@vue-flow/core": "^1.0.0",
+    "@vue-flow/minimap": "^1.0.0",
+    "@vueuse/core": "^13.9.0",
     "axios": "^1.5.0",
     "jquery": "^3.7.0",
     "naive-ui": "^2.34.0",
     "pinia": "^2.1.0",
+    "prettier": "^3.6.2",
     "sortablejs": "^1.15.0",
     "unplugin-icons": "^22.4.2",
     "unplugin-vue-components": "^29.1.0",

frontend/src/components/form/controls/Jeditor.vue

@@ -494,7 +494,10 @@ function toggleSourceMode() {
       ta.style.boxShadow = 'inset 0 1px 3px rgba(0,0,0,0.1)'
       ta.style.transition = 'all 0.2s ease'
       ta.style.boxSizing = 'border-box'  // 确保 padding 包含在高度内
-      ta.value = formatHTML(html)
+      // 异步格式化HTML
+      formatHTML(html).then(formatted => {
+        ta.value = formatted
+      })
       
       host.style.display = 'none'
       // 插在编辑器后，位置与编辑区域一致
@@ -516,32 +519,58 @@ function toggleSourceMode() {
   }
 }
 
-// 格式化HTML，提高可读性
-function formatHTML(html: string): string {
+// 使用Prettier格式化HTML，提高可读性（动态导入 + await）
+async function formatHTML(html: string): Promise<string> {
   if (!html) return ''
   
-  // 简单的HTML格式化函数
-  let formatted = html
-    .replace(/></g, '>\n<')  // 在标签之间添加换行
-    .replace(/^\s+|\s+$/g, '')  // 去除首尾空白
+  try {
+    const prettier = await import('prettier/standalone')
+    const parserHtml = await import('prettier/parser-html')
+    
+    const result = await prettier.format(html, {
+      parser: 'html',
+      plugins: [parserHtml],
+      printWidth: 120,
+      tabWidth: 2,
+      useTabs: false,
+      htmlWhitespaceSensitivity: 'ignore',
+      bracketSameLine: false,
+      singleAttributePerLine: false
+    })
+    
+    return result
+  } catch (error) {
+    console.warn('Prettier formatting failed, using simple formatting:', error)
+    // 回退到简单格式化
+    return formatHTMLSimple(html)
+  }
+}
+
+// 简单但有效的HTML格式化函数（回退方案）
+function formatHTMLSimple(html: string): string {
+  if (!html) return ''
   
-  // 添加缩进
+  // 在标签之间添加换行
+  let formatted = html.replace(/></g, '>\n<')
+  
+  // 分割成行并处理缩进
   const lines = formatted.split('\n')
   let indentLevel = 0
   const indentSize = 2
   
-  const formattedLines = lines.map(line => {
+  const result = lines.map(line => {
     const trimmed = line.trim()
     if (!trimmed) return ''
     
-    // 减少缩进的情况
+    // 闭合标签减少缩进
     if (trimmed.match(/^<\/[^>]+>$/)) {
       indentLevel = Math.max(0, indentLevel - 1)
     }
     
+    // 添加缩进
     const indented = ' '.repeat(indentLevel * indentSize) + trimmed
     
-    // 增加缩进的情况（排除自闭合标签）
+    // 开放标签增加缩进（排除自闭合标签）
     if (trimmed.match(/^<[^/][^>]*[^/]>$/) && !trimmed.match(/^<[^>]*\/>$/)) {
       indentLevel++
     }
@@ -549,7 +578,7 @@ function formatHTML(html: string): string {
     return indented
   })
   
-  return formattedLines.join('\n')
+  return result.join('\n')
 }
 
 function mountControl() {