From 189ffeced4097232255bee7e9ad5bca86bf45a1a Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Sun, 6 Apr 2025 02:53:27 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BB=A3=E7=A0=81=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/assets/main.css | 1 - web/src/assets/markdown.css | 58 --------- web/src/components/MessageComponent.vue | 162 +++++++++++++----------- web/src/views/AgentView.vue | 3 +- 4 files changed, 87 insertions(+), 137 deletions(-) delete mode 100644 web/src/assets/markdown.css diff --git a/web/src/assets/main.css b/web/src/assets/main.css index c07dd712..7553fcab 100644 --- a/web/src/assets/main.css +++ b/web/src/assets/main.css @@ -1,5 +1,4 @@ @import './base.css'; -@import './markdown.css'; :root { --header-height: 60px; diff --git a/web/src/assets/markdown.css b/web/src/assets/markdown.css deleted file mode 100644 index 7acc8984..00000000 --- a/web/src/assets/markdown.css +++ /dev/null @@ -1,58 +0,0 @@ -.message-md { - color: var(--gray-900); - max-width: 100%; -} - -.message-md pre { - border-radius: 8px; - font-size: 0.9rem; - border: 1px solid var(--main-light-3); - padding: 1rem; -} - -.message-md pre:has(code) { - padding: 0; -} - -.message-md pre code { - font-size: 13px; - font-family: 'Menlo', 'Monaco', 'Consolas', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'Courier New', monospace; - line-height: 1.5; - letter-spacing: 0.025em; - tab-size: 4; - -moz-tab-size: 4; - background-color: var(--gray-100); -} - -.message-md strong { - color: var(--gray-800); -} - -.message-md h1, -.message-md h2, -.message-md h3, -.message-md h4, -.message-md h5, -.message-md h6 { - font-size: 1rem; -} - -.message-md li > p, -.message-md ol > p, -.message-md ul > p { - margin: 0.25rem 0; -} - -.message-md ol, -.message-md ul { - padding-left: 1rem; -} - -.message-md hr { - margin-bottom: 1rem; -} - -.message-md a { - color: var(--main-800); - margin: auto 2px; -} \ No newline at end of file diff --git a/web/src/components/MessageComponent.vue b/web/src/components/MessageComponent.vue index b4bbcbc1..8bc07ee7 100644 --- a/web/src/components/MessageComponent.vue +++ b/web/src/components/MessageComponent.vue @@ -42,8 +42,15 @@ - - + + +
你停止生成了本次回答 重新编辑问题 @@ -68,33 +75,9 @@ import { computed, ref } from 'vue'; import { CaretRightOutlined } from '@ant-design/icons-vue'; import RefsComponent from '@/components/RefsComponent.vue' -import { Marked } from 'marked'; -import { markedHighlight } from 'marked-highlight'; -import hljs from 'highlight.js'; -import 'highlight.js/styles/github.css'; - -import { MdPreview, config } from 'md-editor-v3' -config({ - markdownItConfig(md) { - md.renderer.rules.image = (tokens, idx, options, env, self) => { - tokens[idx].attrSet('style', 'display:inline-block;min-height:33px;padding:0;margin:0') - if (tokens[idx].content) { - tokens[idx].attrSet('title', tokens[idx].content) - } - tokens[idx].attrSet( - 'onerror', - 'this.src="/ui/assets/load_error.png";this.onerror=null;this.height="33px"' - ) - return md.renderer.renderToken(tokens, idx, options) - } - md.renderer.rules.link_open = (tokens, idx, options, env, self) => { - tokens[idx].attrSet('target', '_blank') - return md.renderer.renderToken(tokens, idx, options) - } - document.appendChild - } -}) +import { MdPreview } from 'md-editor-v3' +import 'md-editor-v3/lib/preview.css'; const props = defineProps({ // 消息角色：'user'|'assistant'|'sent'|'received' @@ -138,31 +121,6 @@ const emit = defineEmits(['retry', 'retryStoppedMessage']); const reasoningActiveKey = ref(['show']); -const renderMarkdown = (msg) => { - if (!msg.content) return ''; - - if (msg.status === 'loading') { - return marked.parse(msg.content + '🟢') - } else { - return marked.parse(msg.content) - } -} - - -const marked = new Marked( - { - gfm: true, - breaks: true, - tables: true, - }, - markedHighlight({ - langPrefix: 'hljs language-', - highlight(code) { - return hljs.highlightAuto(code).value; - } - }) -); - // 计算属性：内容为空且正在加载 const isEmptyAndLoading = computed(() => { const isEmpty = !props.message.content || props.message.content.length === 0; @@ -192,8 +150,6 @@ const isEmptyAndLoading = computed(() => { max-width: 95%; color: white; background-color: var(--main-color); - // background-color: var(--main-color); - // background: linear-gradient(90deg, var(--main-light-1) 10.79%, var(--main-color) 87.08%); align-self: flex-end; border-radius: .5rem; padding: 0.5rem 1rem; @@ -215,28 +171,6 @@ const isEmptyAndLoading = computed(() => { white-space: pre-line; } - .message-md { - margin-bottom: 0; - - :deep(code) { - padding: 2px 4px; - border-radius: 4px; - background-color: var(--gray-100); - } - - :deep(pre) { - padding: 12px; - border-radius: 8px; - background-color: var(--gray-100); - overflow-x: auto; - - code { - padding: 0; - background-color: transparent; - } - } - } - .err-msg { color: #d15252; border: 1px solid #f19999; @@ -443,4 +377,78 @@ const isEmptyAndLoading = computed(() => { transform: translateY(0); } } + + + \ No newline at end of file diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue index 2ca517d0..99c06ba5 100644 --- a/web/src/views/AgentView.vue +++ b/web/src/views/AgentView.vue @@ -492,7 +492,7 @@ const toggleTool = (tool, checked) => { width: 100%; height: 100vh; overflow: hidden; - --agent-sidebar-width: 230px; + --agent-sidebar-width: 300px; --config-sidebar-width: 350px; } @@ -550,6 +550,7 @@ const toggleTool = (tool, checked) => { } .sidebar-title { + height: var(--header-height); font-weight: bold; user-select: none; white-space: nowrap;