From 11ce69d307c4e869fb04731888eb54aeb0486267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B2=E9=B8=BF=E5=AE=87?= <shywzt@iCloud.com>
Date: Thu, 10 Apr 2025 10:51:37 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=E9=A1=B9=E5=B9=B6=E9=87=8D=E6=9E=84=E4=BB=A3=E7=A0=81=E4=BB=A5?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 史鸿宇 <shywzt@iCloud.com>
---
 package.json                                  | 18 +++--
 .../dialoguePanel/DialoguePanel.vue           |  2 +-
 .../dialoguePanel/DialogueThought.vue         |  2 +-
 src/utils/index.ts                            |  2 +-
 src/utils/marked.js                           | 68 -------------------
 src/utils/{markedjs.ts => marked.ts}          | 66 ++++++++----------
 .../dialogue/components/DialogueSession.vue   | 12 ----
 src/views/dialogue/components/InitalPanel.vue |  6 --
 8 files changed, 38 insertions(+), 138 deletions(-)
 delete mode 100644 src/utils/marked.js
 rename src/utils/{markedjs.ts => marked.ts} (62%)

diff --git a/package.json b/package.json
index 4e7e292..f4dd9b9 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     }
   },
   "engines": {
-    "node": ">= 18.18.2"
+    "node": ">= 22.14.0"
   },
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
@@ -99,17 +99,15 @@
     "element-plus": "^2.8.3",
     "highlight.js": "11.10.0",
     "js-yaml": "^4.1.0",
-    "marked": "4.3",
-    "pinia": "2.1.6",
-    "vue": "3.3.4",
+    "marked": "^15.0.8",
+    "marked-highlight": "^2.2.1",
+    "pinia": "^3.0.2",
+    "vue": "^3.5.13",
     "vue-codemirror": "^6.1.1",
     "vue-echarts": "^7.0.3",
     "vue-i18n": "^9.14.0",
-    "vue-router": "4.2.4",
-    "xss": "1.0.14",
-    "xterm": "4.17.0",
-    "xterm-addon-attach": "0.5.0",
-    "xterm-addon-fit": "0.6.0"
+    "vue-router": "^4.5.0",
+    "xss": "1.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -123,7 +121,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/minimist": "^1.2.5",
-    "@types/node": "18.19.67",
+    "@types/node": "^22.14.0",
     "@typescript-eslint/eslint-plugin": "8.17.0",
     "@typescript-eslint/parser": "8.17.0",
     "@vitejs/plugin-vue": "5.2.1",
diff --git a/src/components/dialoguePanel/DialoguePanel.vue b/src/components/dialoguePanel/DialoguePanel.vue
index 87e1db2..98b2302 100644
--- a/src/components/dialoguePanel/DialoguePanel.vue
+++ b/src/components/dialoguePanel/DialoguePanel.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { DialoguePanelType } from './type';
-import marked from 'src/utils/marked.js';
+import marked from 'src/utils/marked';
 import { computed, ref, withDefaults } from 'vue';
 import { writeText } from 'src/utils';
 import {
diff --git a/src/components/dialoguePanel/DialogueThought.vue b/src/components/dialoguePanel/DialogueThought.vue
index 6caff4b..d76af5a 100644
--- a/src/components/dialoguePanel/DialogueThought.vue
+++ b/src/components/dialoguePanel/DialogueThought.vue
@@ -24,7 +24,7 @@
 <script setup>
 import { IconCaretDown } from '@computing/opendesign-icons';
 import { ref, computed } from 'vue';
-import marked from 'src/utils/marked.js';
+import marked from 'src/utils/marked';
 import xss from 'xss';
 const props = defineProps({
   content: {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 8cd5918..d139273 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -7,5 +7,5 @@
 // IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
 // PURPOSE.
 // See the Mulan PSL v2 for more details.
-export * from './markedjs';
+export * from './marked';
 export * from './tools';
diff --git a/src/utils/marked.js b/src/utils/marked.js
deleted file mode 100644
index b51736b..0000000
--- a/src/utils/marked.js
+++ /dev/null
@@ -1,68 +0,0 @@
-// Copyright (c) Huawei Technologies Co., Ltd. 2023-2024. All rights reserved.
-// licensed under the Mulan PSL v2.
-// You can use this software according to the terms and conditions of the Mulan PSL v2.
-// You may obtain a copy of Mulan PSL v2 at:
-//      http://license.coscl.org.cn/MulanPSL2
-// THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
-// PURPOSE.
-// See the Mulan PSL v2 for more details.
-import { marked } from 'marked';
-import hljs from 'highlight.js';
-import { randomInt } from './tools';
-
-marked.setOptions({
-  gfm: true, // 启动类似于Github样式的Markdown语法
-  breaks: false, // 支持Github换行符，必须打开gfm选项
-  sanitize: false, // 原始输出，忽略HTML标签（关闭后，可直接渲染HTML标签）
-  pedantic: false, // 只解析符合Markdwon定义的，不修正Markdown的错误
-});
-
-export const link = /\bhttps?:\/\/[\w/.-]+(?<![.,。，])/g;
-
-const ICON_SVG = `<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-5d9e4641=""><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path></svg>`;
-
-/**
- * 自定义代码块内容解析
- * @param code 解析后的HTML代码
- * @param language 语言
- * @returns
- */
-export const renderCode = (code, language) => {
-  const id = `pre-${Date.now()}-${randomInt()}`;
-  const lang = language ? language : 'bash';
-  return `<pre><div class="code-toolbar"><span>${lang}</span><i class="pre-copy" onclick="onHtmlEventDispatch(this,'click',event,'copyPreCode','${id}')">${ICON_SVG}</i></div><code id="${id}" class="hljs language-${lang}">${
-    hljs.highlight(code, { language: lang }).value
-  }</code></pre>`;
-};
-
-/**
- * 解析网页链接内容
- * @param href
- * @param text
- * @returns
- */
-export const renderLink = (href, text) => {
-  if (href === text) {
-    const txt = text.replace(link, '');
-    const url = (href.match(link) ?? [])[0];
-    return `<a href="${url}" target="_blank">${url}</a>${txt}`;
-  }
-  return `<a href="${href}" target="_blank">${text}</a>`;
-};
-
-/**
- * 自定义渲染
- */
-const renderer = {
-  code(code, infostring) {
-    return renderCode(code, infostring);
-  },
-  link(href, title, text) {
-    return renderLink(href, text);
-  },
-};
-
-marked.use({ renderer });
-
-export default marked;
diff --git a/src/utils/markedjs.ts b/src/utils/marked.ts
similarity index 62%
rename from src/utils/markedjs.ts
rename to src/utils/marked.ts
index c941986..0dc146d 100644
--- a/src/utils/markedjs.ts
+++ b/src/utils/marked.ts
@@ -7,9 +7,9 @@
 // IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
 // PURPOSE.
 // See the Mulan PSL v2 for more details.
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
 import hljs from 'highlight.js';
-import { marked } from 'marked';
-
 import { randomInt } from './tools';
 
 /**
@@ -18,8 +18,24 @@ import { randomInt } from './tools';
 const ICON_SVG = `<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-5d9e4641=""><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path></svg>`;
 
 export const doubleDollar = /(?<=\$\$).*?(?=\$\$)/;
+// export const doubleDollar = /\$\$(.*?)\$\$/g;
+
 export const doubleWell = /(?<=##).*?(?=##)/;
+// export const doubleWell = /##(.*?)##/;
+
 export const link = /\bhttps?:\/\/[\w/.-]+(?<![.,。，])/g;
+// export const link = /\bhttps?:\/\/[\w/.-]+/g;
+
+const marked = new Marked(
+  markedHighlight({
+    langPrefix: 'hljs language-',
+    highlight(code, lang, _info) {
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+    },
+  }),
+);
+
 // #region ----------------------------------------< markedjs 配置 >--------------------------------------
 /**
  * markedjs 配置
@@ -28,55 +44,27 @@ marked.setOptions({
   gfm: true, // 启动类似于Github样式的Markdown语法
   breaks: false, // 支持Github换行符，必须打开gfm选项
   pedantic: false, // 只解析符合Markdwon定义的，不修正Markdown的错误
-  // 高亮的语法规范
-  highlight: (code: string, lang: string) =>
-    hljs.highlight(code, { language: lang }).value,
 });
 
 // #endregion
 
 // #region ----------------------------------------< renderer >--------------------------------------
-/**
- * 自定义代码块内容解析
- * @param code 解析后的HTML代码
- * @param language 语言
- * @returns
- */
-export const renderCode = (
-  code: string,
-  language: string | undefined,
-): string => {
+
+const renderer = new marked.Renderer();
+renderer.code = function ({ text, lang }) {
   const id = `pre-${Date.now()}-${randomInt()}`;
-  return `<pre><div class="code-toolbar"><span>${language}</span><i class="pre-copy" onclick="onHtmlEventDispatch(this,'click',event,'copyPreCode','${id}')">${ICON_SVG}</i></div><code id="${id}" class="hljs language-${language}">${code}</code></pre>`;
+  return `<pre><div class="code-toolbar"><span>${lang}</span><i class="pre-copy" onclick="onHtmlEventDispatch(this,'click',event,'copyPreCode','${id}')">${ICON_SVG}</i></div><code id="${id}" class="hljs language-${lang}">${text}</code></pre>`;
 };
-
-/**
- * 解析网页链接内容
- * @param href
- * @param text
- * @returns
- */
-export const renderLink = (href: string, text: string): string => {
-  if (href === text) {
-    const txt = text.replace(link, '');
+renderer.link = function ({ href, title, tokens }) {
+  const text = this.parser.parseInline(tokens);
+  if (href === title) {
+    const txt = title.replace(link, '');
     const url = (href.match(link) ?? [])[0];
     return `<a href="${url}" target="_blank">${url}</a>${txt}`;
   }
   return `<a href="${href}" target="_blank">${text}</a>`;
 };
 
-/**
- * 自定义渲染
- */
-const renderer = {
-  code(code: string, infostring: string | undefined): string {
-    return renderCode(code, infostring);
-  },
-  link(href: string, title: string | null | undefined, text: string): string {
-    return renderLink(href, text);
-  },
-};
-
-marked.use({ renderer });
+marked.use({ renderer: renderer });
 // #endregion
 export default marked;
diff --git a/src/views/dialogue/components/DialogueSession.vue b/src/views/dialogue/components/DialogueSession.vue
index 25ef5a4..549d383 100644
--- a/src/views/dialogue/components/DialogueSession.vue
+++ b/src/views/dialogue/components/DialogueSession.vue
@@ -13,7 +13,6 @@ import CommonFooter from 'src/components/commonFooter/CommonFooter.vue';
 import { api } from 'src/apis';
 import { useHistorySessionStore } from 'src/store/historySession';
 import { successMsg, errorMsg } from 'src/components/Message';
-import 'xterm/css/xterm.css';
 import i18n from 'src/i18n';
 const { user_selected_app, selectMode } = storeToRefs(useHistorySessionStore());
 const { getHistorySession } = useHistorySessionStore();
@@ -1179,17 +1178,6 @@ button[disabled]:hover {
   }
 }
 
-.dialogue-shell {
-  flex: 1;
-  height: calc(100% - 36px);
-  width: 500px;
-
-  :deep(.xterm) {
-    padding: 10px;
-    height: 100%;
-  }
-}
-
 .problem {
   display: flex;
   margin-top: 16px;
diff --git a/src/views/dialogue/components/InitalPanel.vue b/src/views/dialogue/components/InitalPanel.vue
index 127ac03..befc078 100644
--- a/src/views/dialogue/components/InitalPanel.vue
+++ b/src/views/dialogue/components/InitalPanel.vue
@@ -3,7 +3,6 @@ import { onMounted, ref } from 'vue';
 import { EG_LIST } from '../constants';
 import { IconLoad } from '@computing/opendesign-icons';
 import { useChangeThemeStore } from 'src/store';
-import 'xterm/css/xterm.css';
 import router from 'src/router';
 const themeStore = useChangeThemeStore();
 import { useRoute } from 'vue-router';
@@ -132,11 +131,6 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.dialogue-shell {
-  width: 100%;
-  height: 100%;
-}
-
 .sidenav {
   height: 100%;
   /* 100% 全高 */
-- 
Gitee