From 0947009ee653f321fe2bcdfbea2fcc645afcd9cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Mon, 18 May 2026 09:59:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=9F=E4=B8=80=E8=81=8A=E5=A4=A9=20?=
 =?UTF-8?q?Markdown=20=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 ChatTimeMarkdown 并在管理端、用户端聊天入口复用

- 收敛聊天页面重复 Markdown 样式，保留工具和思考块独立渲染
---
 .../chat-history/ChatHistoryDetailDrawer.vue  |  27 --
 .../chat/ChatTimeMessageContent.vue           |   7 +-
 .../app/src/views/ai/chat/index.vue           |  28 +-
 .../app/src/views/publicChat/index.vue        |  47 +--
 .../packages/effects/common-ui/package.json   |   1 +
 .../chat-markdown/ChatTimeMarkdown.vue        | 308 ++++++++++++++++++
 .../src/components/chat-markdown/index.ts     |   1 +
 .../effects/common-ui/src/components/index.ts |   1 +
 easyflow-ui-admin/pnpm-lock.yaml              |   3 +
 .../app/src/components/chat/bubbleList.vue    |   8 +-
 .../packages/effects/common-ui/package.json   |   1 +
 .../chat-markdown/ChatTimeMarkdown.vue        | 308 ++++++++++++++++++
 .../src/components/chat-markdown/index.ts     |   1 +
 .../effects/common-ui/src/components/index.ts |   1 +
 easyflow-ui-usercenter/pnpm-lock.yaml         |   3 +
 15 files changed, 638 insertions(+), 107 deletions(-)
 create mode 100644 easyflow-ui-admin/packages/effects/common-ui/src/components/chat-markdown/ChatTimeMarkdown.vue
 create mode 100644 easyflow-ui-admin/packages/effects/common-ui/src/components/chat-markdown/index.ts
 create mode 100644 easyflow-ui-usercenter/packages/effects/common-ui/src/components/chat-markdown/ChatTimeMarkdown.vue
 create mode 100644 easyflow-ui-usercenter/packages/effects/common-ui/src/components/chat-markdown/index.ts

diff --git a/easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue b/easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue
index b9784bc..308e46d 100644
--- a/easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue
+++ b/easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue
@@ -509,33 +509,6 @@ async function handleCopyMessage(item: ChatTimeTimelineItem) {
 
 .chat-history-detail__markdown {
   min-width: 0;
-  font-size: 14px;
-  line-height: 1.72;
-}
-
-.chat-history-detail__markdown :deep(.markdown-body) {
-  font-size: inherit;
-  line-height: inherit;
-  background: transparent;
-}
-
-.chat-history-detail__markdown :deep(.markdown-body > :first-child) {
-  margin-top: 0;
-}
-
-.chat-history-detail__markdown :deep(.markdown-body > :last-child) {
-  margin-bottom: 0;
-}
-
-.chat-history-detail__markdown :deep(.markdown-body p) {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.chat-history-detail__markdown :deep(pre) {
-  max-width: 100%;
-  margin-top: 0;
-  overflow: auto;
 }
 
 .chat-history-detail__tool-panel :deep(.el-collapse-item__wrap) {
diff --git a/easyflow-ui-admin/app/src/components/chat/ChatTimeMessageContent.vue b/easyflow-ui-admin/app/src/components/chat/ChatTimeMessageContent.vue
index 053d81d..3099799 100644
--- a/easyflow-ui-admin/app/src/components/chat/ChatTimeMessageContent.vue
+++ b/easyflow-ui-admin/app/src/components/chat/ChatTimeMessageContent.vue
@@ -5,9 +5,8 @@ import type {
 } from '@easyflow/types';
 
 import { computed, ref } from 'vue';
-import { XMarkdown as ElXMarkdown } from 'vue-element-plus-x';
 
-import { ChatThinkingBlock } from '@easyflow/common-ui';
+import { ChatThinkingBlock, ChatTimeMarkdown } from '@easyflow/common-ui';
 import { IconifyIcon } from '@easyflow/icons';
 
 import { CircleCheck } from '@element-plus/icons-vue';
@@ -75,7 +74,7 @@ function toggleToolExpanded() {
           :status="segment.status"
           class="chat-thinking-block-item"
         />
-        <ElXMarkdown v-else :markdown="segment.content" />
+        <ChatTimeMarkdown v-else :content="segment.content" />
       </template>
     </div>
   </template>
@@ -125,7 +124,7 @@ function toggleToolExpanded() {
     </div>
   </template>
 
-  <ElXMarkdown v-else :markdown="item.content" />
+  <ChatTimeMarkdown v-else :content="item.content" />
 </template>
 
 <style scoped>
diff --git a/easyflow-ui-admin/app/src/views/ai/chat/index.vue b/easyflow-ui-admin/app/src/views/ai/chat/index.vue
index 57c07b9..08f9457 100644
--- a/easyflow-ui-admin/app/src/views/ai/chat/index.vue
+++ b/easyflow-ui-admin/app/src/views/ai/chat/index.vue
@@ -2274,39 +2274,13 @@ async function deleteSession(targetSession?: SessionItem) {
   background: transparent;
 }
 
-.chat-workspace__message-bubble.is-assistant :deep(.markdown-body),
-.chat-workspace__message-bubble.is-user :deep(.markdown-body),
-.chat-workspace__message-bubble.is-tool :deep(.markdown-body) {
-  font-size: 14px;
-  line-height: 1.72;
-  background: transparent;
-}
-
+.chat-workspace__message-bubble.is-user :deep(.chat-time-markdown),
 .chat-workspace__message-bubble.is-user :deep(.elx-xmarkdown-container),
 .chat-workspace__message-bubble.is-user :deep(.elx-xmarkdown-provider) {
   width: auto;
   max-width: 100%;
 }
 
-.chat-workspace__message-bubble.is-assistant :deep(.markdown-body > :first-child),
-.chat-workspace__message-bubble.is-user :deep(.markdown-body > :first-child),
-.chat-workspace__message-bubble.is-tool :deep(.markdown-body > :first-child) {
-  margin-top: 0;
-}
-
-.chat-workspace__message-bubble.is-assistant :deep(.markdown-body > :last-child),
-.chat-workspace__message-bubble.is-user :deep(.markdown-body > :last-child),
-.chat-workspace__message-bubble.is-tool :deep(.markdown-body > :last-child) {
-  margin-bottom: 0;
-}
-
-.chat-workspace__message-bubble.is-assistant :deep(.markdown-body p),
-.chat-workspace__message-bubble.is-user :deep(.markdown-body p),
-.chat-workspace__message-bubble.is-tool :deep(.markdown-body p) {
-  font-size: inherit;
-  line-height: inherit;
-}
-
 .chat-workspace__message-bubble.is-assistant :deep(pre),
 .chat-workspace__message-bubble.is-user :deep(pre),
 .chat-workspace__message-bubble.is-tool :deep(pre) {
diff --git a/easyflow-ui-admin/app/src/views/publicChat/index.vue b/easyflow-ui-admin/app/src/views/publicChat/index.vue
index 6467644..6bbc380 100644
--- a/easyflow-ui-admin/app/src/views/publicChat/index.vue
+++ b/easyflow-ui-admin/app/src/views/publicChat/index.vue
@@ -12,10 +12,9 @@ import {
   ref,
   watch,
 } from 'vue';
-import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
 import { useRoute, useRouter } from 'vue-router';
 
-import { ChatThinkingBlock } from '@easyflow/common-ui';
+import { ChatThinkingBlock, ChatTimeMarkdown } from '@easyflow/common-ui';
 import { LOGIN_PATH } from '@easyflow/constants';
 import { IconifyIcon } from '@easyflow/icons';
 import { $t } from '@easyflow/locales';
@@ -1854,9 +1853,9 @@ function prefetchVisibleVariants() {
                           ]"
                         >
                           <template v-if="segment.type === 'text'">
-                            <ElXMarkdown
+                            <ChatTimeMarkdown
                               class="public-chat-markdown"
-                              :markdown="segment.content"
+                              :content="segment.content"
                             />
                           </template>
                           <template v-else-if="segment.type === 'thinking'">
@@ -2342,50 +2341,10 @@ function prefetchVisibleVariants() {
   box-shadow: 0 2px 6px rgb(15 23 42 / 5%);
 }
 
-.public-chat-markdown {
-  color: var(--pc-ink);
-}
-
 .public-chat-thinking-block {
   margin-bottom: 8px;
 }
 
-.public-chat-markdown :deep(*) {
-  overflow-wrap: anywhere;
-}
-
-.public-chat-markdown :deep(p) {
-  margin: 0 0 10px;
-}
-
-.public-chat-markdown :deep(p:last-child) {
-  margin-bottom: 0;
-}
-
-.public-chat-markdown :deep(a) {
-  color: var(--pc-primary);
-  word-break: break-all;
-  text-decoration: underline;
-}
-
-.public-chat-markdown :deep(img) {
-  display: block;
-  max-width: min(100%, 420px);
-  height: auto;
-  margin: 10px 0;
-  border: 1px solid #dbe5f1;
-  border-radius: 10px;
-  box-shadow: 0 6px 18px rgb(15 23 42 / 8%);
-}
-
-.public-chat-markdown :deep(pre) {
-  padding: 10px 12px;
-  overflow: auto;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-}
-
 .public-chat-tool-header {
   display: flex;
   gap: 8px;
diff --git a/easyflow-ui-admin/packages/effects/common-ui/package.json b/easyflow-ui-admin/packages/effects/common-ui/package.json
index a000080..c6771a5 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/package.json
+++ b/easyflow-ui-admin/packages/effects/common-ui/package.json
@@ -37,6 +37,7 @@
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
     "vue": "catalog:",
+    "vue-element-plus-x": "catalog:",
     "vue-json-viewer": "catalog:",
     "vue-router": "catalog:",
     "vue-tippy": "catalog:"
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-markdown/ChatTimeMarkdown.vue b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-markdown/ChatTimeMarkdown.vue
new file mode 100644
index 0000000..9197407
--- /dev/null
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-markdown/ChatTimeMarkdown.vue
@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { XMarkdown as ElXMarkdown } from 'vue-element-plus-x';
+
+import { usePreferences } from '@easyflow-core/preferences';
+
+interface Props {
+  content?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  content: '',
+});
+const { isDark } = usePreferences();
+const normalizedContent = computed(() => String(props.content || ''));
+</script>
+
+<template>
+  <ElXMarkdown
+    class="chat-time-markdown"
+    :allow-html="false"
+    :enable-breaks="true"
+    :enable-code-line-number="false"
+    :enable-latex="true"
+    :default-theme-mode="isDark ? 'dark' : 'light'"
+    :markdown="normalizedContent"
+    :need-view-code-btn="false"
+  />
+</template>
+
+<style scoped>
+.chat-time-markdown {
+  width: 100%;
+  min-width: 0;
+  color: hsl(var(--text-strong));
+  font-size: 14px;
+  line-height: 1.72;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.chat-time-markdown :deep(.elx-xmarkdown-container),
+.chat-time-markdown :deep(.elx-xmarkdown-provider),
+.chat-time-markdown :deep(.markdown-body) {
+  width: 100%;
+  max-width: 100%;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
+}
+
+.chat-time-markdown :deep(.markdown-body) {
+  overflow-wrap: anywhere;
+}
+
+.chat-time-markdown :deep(.markdown-body > :first-child) {
+  margin-top: 0;
+}
+
+.chat-time-markdown :deep(.markdown-body > :last-child) {
+  margin-bottom: 0;
+}
+
+.chat-time-markdown :deep(h1),
+.chat-time-markdown :deep(h2),
+.chat-time-markdown :deep(h3),
+.chat-time-markdown :deep(h4),
+.chat-time-markdown :deep(h5),
+.chat-time-markdown :deep(h6) {
+  margin: 1.35em 0 0.62em;
+  color: hsl(var(--text-strong));
+  font-weight: 650;
+  line-height: 1.28;
+  letter-spacing: 0;
+}
+
+.chat-time-markdown :deep(h1) {
+  font-size: 1.55em;
+}
+
+.chat-time-markdown :deep(h2) {
+  font-size: 1.34em;
+}
+
+.chat-time-markdown :deep(h3) {
+  font-size: 1.18em;
+}
+
+.chat-time-markdown :deep(h4) {
+  font-size: 1.06em;
+}
+
+.chat-time-markdown :deep(h5),
+.chat-time-markdown :deep(h6) {
+  font-size: 1em;
+}
+
+.chat-time-markdown :deep(p) {
+  margin: 0.72em 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.chat-time-markdown :deep(strong) {
+  color: hsl(var(--text-strong));
+  font-weight: 650;
+}
+
+.chat-time-markdown :deep(em) {
+  font-style: italic;
+}
+
+.chat-time-markdown :deep(del) {
+  color: hsl(var(--text-muted));
+}
+
+.chat-time-markdown :deep(a) {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  word-break: break-word;
+}
+
+.chat-time-markdown :deep(a:hover) {
+  color: hsl(var(--primary) / 0.82);
+}
+
+.chat-time-markdown :deep(hr) {
+  height: 1px;
+  margin: 1.25em 0;
+  background: hsl(var(--divider-faint) / 0.84);
+  border: 0;
+}
+
+.chat-time-markdown :deep(blockquote) {
+  margin: 0.95em 0;
+  padding: 8px 12px;
+  color: hsl(var(--text-muted));
+  background: hsl(var(--surface-subtle) / 0.72);
+  border-left: 3px solid hsl(var(--primary) / 0.32);
+  border-radius: 0 10px 10px 0;
+}
+
+.chat-time-markdown :deep(blockquote > :first-child) {
+  margin-top: 0;
+}
+
+.chat-time-markdown :deep(blockquote > :last-child) {
+  margin-bottom: 0;
+}
+
+.chat-time-markdown :deep(ul),
+.chat-time-markdown :deep(ol) {
+  margin: 0.72em 0;
+  padding-left: 1.45em;
+}
+
+.chat-time-markdown :deep(ul) {
+  list-style: disc;
+}
+
+.chat-time-markdown :deep(ol) {
+  list-style: decimal;
+}
+
+.chat-time-markdown :deep(ul ul),
+.chat-time-markdown :deep(ol ul) {
+  list-style: circle;
+}
+
+.chat-time-markdown :deep(ul ul ul),
+.chat-time-markdown :deep(ol ul ul) {
+  list-style: square;
+}
+
+.chat-time-markdown :deep(li) {
+  margin: 0.28em 0;
+  padding-left: 0.12em;
+}
+
+.chat-time-markdown :deep(li > p) {
+  margin: 0.36em 0;
+}
+
+.chat-time-markdown :deep(li.task-list-item) {
+  list-style: none;
+}
+
+.chat-time-markdown :deep(.task-list-item-checkbox) {
+  width: 14px;
+  height: 14px;
+  margin: 0 0.48em 0 -1.45em;
+  vertical-align: -0.12em;
+  accent-color: hsl(var(--primary));
+}
+
+.chat-time-markdown :deep(table) {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  margin: 1em 0;
+  overflow: auto;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.chat-time-markdown :deep(th),
+.chat-time-markdown :deep(td) {
+  min-width: 96px;
+  padding: 8px 10px;
+  vertical-align: top;
+  border: 1px solid hsl(var(--divider-faint) / 0.88);
+}
+
+.chat-time-markdown :deep(th) {
+  color: hsl(var(--text-strong));
+  font-weight: 650;
+  background: hsl(var(--surface-subtle));
+}
+
+.chat-time-markdown :deep(tr:nth-child(2n) td) {
+  background: hsl(var(--surface-subtle) / 0.42);
+}
+
+.chat-time-markdown :deep(code) {
+  padding: 0.12em 0.34em;
+  color: hsl(var(--primary));
+  font-size: 0.92em;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  background: hsl(var(--surface-subtle));
+  border: 1px solid hsl(var(--divider-faint) / 0.7);
+  border-radius: 6px;
+}
+
+.chat-time-markdown :deep(pre) {
+  max-width: 100%;
+  margin: 1em 0;
+  padding: 12px 14px;
+  overflow: auto;
+  color: hsl(var(--text-strong));
+  background: hsl(var(--surface-subtle));
+  border: 1px solid hsl(var(--divider-faint) / 0.82);
+  border-radius: 12px;
+}
+
+.chat-time-markdown :deep(pre code) {
+  display: block;
+  min-width: max-content;
+  padding: 0;
+  color: inherit;
+  font-size: 0.92em;
+  line-height: 1.68;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.chat-time-markdown :deep(.shiki),
+.chat-time-markdown :deep(.shiki code) {
+  background: transparent !important;
+}
+
+.chat-time-markdown :deep(img) {
+  display: block;
+  max-width: min(100%, 460px);
+  height: auto;
+  margin: 1em 0;
+  border: 1px solid hsl(var(--divider-faint) / 0.82);
+  border-radius: 12px;
+}
+
+.chat-time-markdown :deep(.katex-display) {
+  max-width: 100%;
+  margin: 1em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.chat-time-markdown :deep(.katex) {
+  font-size: 1em;
+}
+
+.chat-time-markdown :deep(.mermaid),
+.chat-time-markdown :deep([class*='mermaid']) {
+  max-width: 100%;
+  margin: 1em 0;
+  overflow: auto;
+}
+
+.chat-time-markdown :deep(svg) {
+  max-width: 100%;
+  height: auto;
+}
+
+:global(.dark) .chat-time-markdown :deep(blockquote) {
+  background: hsl(var(--surface-subtle) / 0.5);
+}
+
+:global(.dark) .chat-time-markdown :deep(code),
+:global(.dark) .chat-time-markdown :deep(pre) {
+  background: hsl(var(--surface-subtle) / 0.78);
+}
+</style>
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-markdown/index.ts b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-markdown/index.ts
new file mode 100644
index 0000000..bc682e4
--- /dev/null
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-markdown/index.ts
@@ -0,0 +1 @@
+export { default as ChatTimeMarkdown } from './ChatTimeMarkdown.vue';
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/components/index.ts b/easyflow-ui-admin/packages/effects/common-ui/src/components/index.ts
index a650c5f..caae19d 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/components/index.ts
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './api-component';
 export * from './captcha';
+export * from './chat-markdown';
 export * from './chat-thinking';
 export * from './col-page';
 export * from './count-to';
diff --git a/easyflow-ui-admin/pnpm-lock.yaml b/easyflow-ui-admin/pnpm-lock.yaml
index 736ac70..ac2082f 100644
--- a/easyflow-ui-admin/pnpm-lock.yaml
+++ b/easyflow-ui-admin/pnpm-lock.yaml
@@ -1366,6 +1366,9 @@ importers:
       vue:
         specifier: ^3.5.17
         version: 3.5.24(typescript@5.9.3)
+      vue-element-plus-x:
+        specifier: 'catalog:'
+        version: 1.3.7(rollup@4.53.2)(vue@3.5.24(typescript@5.9.3))
       vue-json-viewer:
         specifier: 'catalog:'
         version: 3.0.4(vue@3.5.24(typescript@5.9.3))
diff --git a/easyflow-ui-usercenter/app/src/components/chat/bubbleList.vue b/easyflow-ui-usercenter/app/src/components/chat/bubbleList.vue
index 02907a4..1fa6b61 100644
--- a/easyflow-ui-usercenter/app/src/components/chat/bubbleList.vue
+++ b/easyflow-ui-usercenter/app/src/components/chat/bubbleList.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import type { ChatTimeTimelineItem } from '@easyflow/types';
 
-import { XMarkdown as ElXMarkdown } from 'vue-element-plus-x';
-
 import { computed, ref } from 'vue';
 
-import { ChatThinkingBlock } from '@easyflow/common-ui';
+import { ChatThinkingBlock, ChatTimeMarkdown } from '@easyflow/common-ui';
 import { IconifyIcon } from '@easyflow/icons';
 import { useUserStore } from '@easyflow/stores';
 
@@ -200,7 +198,7 @@ async function handleCopy(item: ChatTimeTimelineItem) {
               :status="segment.status"
               class="chat-thinking-block-item"
             />
-            <ElXMarkdown v-else :markdown="segment.content" />
+            <ChatTimeMarkdown v-else :content="segment.content" />
           </template>
         </div>
       </template>
@@ -256,7 +254,7 @@ async function handleCopy(item: ChatTimeTimelineItem) {
           </div>
         </div>
       </template>
-      <ElXMarkdown v-else :markdown="item.content" />
+      <ChatTimeMarkdown v-else :content="item.content" />
     </template>
 
     <template #footer="{ item }">
diff --git a/easyflow-ui-usercenter/packages/effects/common-ui/package.json b/easyflow-ui-usercenter/packages/effects/common-ui/package.json
index a000080..c6771a5 100644
--- a/easyflow-ui-usercenter/packages/effects/common-ui/package.json
+++ b/easyflow-ui-usercenter/packages/effects/common-ui/package.json
@@ -37,6 +37,7 @@
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
     "vue": "catalog:",
+    "vue-element-plus-x": "catalog:",
     "vue-json-viewer": "catalog:",
     "vue-router": "catalog:",
     "vue-tippy": "catalog:"
diff --git a/easyflow-ui-usercenter/packages/effects/common-ui/src/components/chat-markdown/ChatTimeMarkdown.vue b/easyflow-ui-usercenter/packages/effects/common-ui/src/components/chat-markdown/ChatTimeMarkdown.vue
new file mode 100644
index 0000000..9197407
--- /dev/null
+++ b/easyflow-ui-usercenter/packages/effects/common-ui/src/components/chat-markdown/ChatTimeMarkdown.vue
@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { XMarkdown as ElXMarkdown } from 'vue-element-plus-x';
+
+import { usePreferences } from '@easyflow-core/preferences';
+
+interface Props {
+  content?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  content: '',
+});
+const { isDark } = usePreferences();
+const normalizedContent = computed(() => String(props.content || ''));
+</script>
+
+<template>
+  <ElXMarkdown
+    class="chat-time-markdown"
+    :allow-html="false"
+    :enable-breaks="true"
+    :enable-code-line-number="false"
+    :enable-latex="true"
+    :default-theme-mode="isDark ? 'dark' : 'light'"
+    :markdown="normalizedContent"
+    :need-view-code-btn="false"
+  />
+</template>
+
+<style scoped>
+.chat-time-markdown {
+  width: 100%;
+  min-width: 0;
+  color: hsl(var(--text-strong));
+  font-size: 14px;
+  line-height: 1.72;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.chat-time-markdown :deep(.elx-xmarkdown-container),
+.chat-time-markdown :deep(.elx-xmarkdown-provider),
+.chat-time-markdown :deep(.markdown-body) {
+  width: 100%;
+  max-width: 100%;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
+}
+
+.chat-time-markdown :deep(.markdown-body) {
+  overflow-wrap: anywhere;
+}
+
+.chat-time-markdown :deep(.markdown-body > :first-child) {
+  margin-top: 0;
+}
+
+.chat-time-markdown :deep(.markdown-body > :last-child) {
+  margin-bottom: 0;
+}
+
+.chat-time-markdown :deep(h1),
+.chat-time-markdown :deep(h2),
+.chat-time-markdown :deep(h3),
+.chat-time-markdown :deep(h4),
+.chat-time-markdown :deep(h5),
+.chat-time-markdown :deep(h6) {
+  margin: 1.35em 0 0.62em;
+  color: hsl(var(--text-strong));
+  font-weight: 650;
+  line-height: 1.28;
+  letter-spacing: 0;
+}
+
+.chat-time-markdown :deep(h1) {
+  font-size: 1.55em;
+}
+
+.chat-time-markdown :deep(h2) {
+  font-size: 1.34em;
+}
+
+.chat-time-markdown :deep(h3) {
+  font-size: 1.18em;
+}
+
+.chat-time-markdown :deep(h4) {
+  font-size: 1.06em;
+}
+
+.chat-time-markdown :deep(h5),
+.chat-time-markdown :deep(h6) {
+  font-size: 1em;
+}
+
+.chat-time-markdown :deep(p) {
+  margin: 0.72em 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.chat-time-markdown :deep(strong) {
+  color: hsl(var(--text-strong));
+  font-weight: 650;
+}
+
+.chat-time-markdown :deep(em) {
+  font-style: italic;
+}
+
+.chat-time-markdown :deep(del) {
+  color: hsl(var(--text-muted));
+}
+
+.chat-time-markdown :deep(a) {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  word-break: break-word;
+}
+
+.chat-time-markdown :deep(a:hover) {
+  color: hsl(var(--primary) / 0.82);
+}
+
+.chat-time-markdown :deep(hr) {
+  height: 1px;
+  margin: 1.25em 0;
+  background: hsl(var(--divider-faint) / 0.84);
+  border: 0;
+}
+
+.chat-time-markdown :deep(blockquote) {
+  margin: 0.95em 0;
+  padding: 8px 12px;
+  color: hsl(var(--text-muted));
+  background: hsl(var(--surface-subtle) / 0.72);
+  border-left: 3px solid hsl(var(--primary) / 0.32);
+  border-radius: 0 10px 10px 0;
+}
+
+.chat-time-markdown :deep(blockquote > :first-child) {
+  margin-top: 0;
+}
+
+.chat-time-markdown :deep(blockquote > :last-child) {
+  margin-bottom: 0;
+}
+
+.chat-time-markdown :deep(ul),
+.chat-time-markdown :deep(ol) {
+  margin: 0.72em 0;
+  padding-left: 1.45em;
+}
+
+.chat-time-markdown :deep(ul) {
+  list-style: disc;
+}
+
+.chat-time-markdown :deep(ol) {
+  list-style: decimal;
+}
+
+.chat-time-markdown :deep(ul ul),
+.chat-time-markdown :deep(ol ul) {
+  list-style: circle;
+}
+
+.chat-time-markdown :deep(ul ul ul),
+.chat-time-markdown :deep(ol ul ul) {
+  list-style: square;
+}
+
+.chat-time-markdown :deep(li) {
+  margin: 0.28em 0;
+  padding-left: 0.12em;
+}
+
+.chat-time-markdown :deep(li > p) {
+  margin: 0.36em 0;
+}
+
+.chat-time-markdown :deep(li.task-list-item) {
+  list-style: none;
+}
+
+.chat-time-markdown :deep(.task-list-item-checkbox) {
+  width: 14px;
+  height: 14px;
+  margin: 0 0.48em 0 -1.45em;
+  vertical-align: -0.12em;
+  accent-color: hsl(var(--primary));
+}
+
+.chat-time-markdown :deep(table) {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  margin: 1em 0;
+  overflow: auto;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.chat-time-markdown :deep(th),
+.chat-time-markdown :deep(td) {
+  min-width: 96px;
+  padding: 8px 10px;
+  vertical-align: top;
+  border: 1px solid hsl(var(--divider-faint) / 0.88);
+}
+
+.chat-time-markdown :deep(th) {
+  color: hsl(var(--text-strong));
+  font-weight: 650;
+  background: hsl(var(--surface-subtle));
+}
+
+.chat-time-markdown :deep(tr:nth-child(2n) td) {
+  background: hsl(var(--surface-subtle) / 0.42);
+}
+
+.chat-time-markdown :deep(code) {
+  padding: 0.12em 0.34em;
+  color: hsl(var(--primary));
+  font-size: 0.92em;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  background: hsl(var(--surface-subtle));
+  border: 1px solid hsl(var(--divider-faint) / 0.7);
+  border-radius: 6px;
+}
+
+.chat-time-markdown :deep(pre) {
+  max-width: 100%;
+  margin: 1em 0;
+  padding: 12px 14px;
+  overflow: auto;
+  color: hsl(var(--text-strong));
+  background: hsl(var(--surface-subtle));
+  border: 1px solid hsl(var(--divider-faint) / 0.82);
+  border-radius: 12px;
+}
+
+.chat-time-markdown :deep(pre code) {
+  display: block;
+  min-width: max-content;
+  padding: 0;
+  color: inherit;
+  font-size: 0.92em;
+  line-height: 1.68;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.chat-time-markdown :deep(.shiki),
+.chat-time-markdown :deep(.shiki code) {
+  background: transparent !important;
+}
+
+.chat-time-markdown :deep(img) {
+  display: block;
+  max-width: min(100%, 460px);
+  height: auto;
+  margin: 1em 0;
+  border: 1px solid hsl(var(--divider-faint) / 0.82);
+  border-radius: 12px;
+}
+
+.chat-time-markdown :deep(.katex-display) {
+  max-width: 100%;
+  margin: 1em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.chat-time-markdown :deep(.katex) {
+  font-size: 1em;
+}
+
+.chat-time-markdown :deep(.mermaid),
+.chat-time-markdown :deep([class*='mermaid']) {
+  max-width: 100%;
+  margin: 1em 0;
+  overflow: auto;
+}
+
+.chat-time-markdown :deep(svg) {
+  max-width: 100%;
+  height: auto;
+}
+
+:global(.dark) .chat-time-markdown :deep(blockquote) {
+  background: hsl(var(--surface-subtle) / 0.5);
+}
+
+:global(.dark) .chat-time-markdown :deep(code),
+:global(.dark) .chat-time-markdown :deep(pre) {
+  background: hsl(var(--surface-subtle) / 0.78);
+}
+</style>
diff --git a/easyflow-ui-usercenter/packages/effects/common-ui/src/components/chat-markdown/index.ts b/easyflow-ui-usercenter/packages/effects/common-ui/src/components/chat-markdown/index.ts
new file mode 100644
index 0000000..bc682e4
--- /dev/null
+++ b/easyflow-ui-usercenter/packages/effects/common-ui/src/components/chat-markdown/index.ts
@@ -0,0 +1 @@
+export { default as ChatTimeMarkdown } from './ChatTimeMarkdown.vue';
diff --git a/easyflow-ui-usercenter/packages/effects/common-ui/src/components/index.ts b/easyflow-ui-usercenter/packages/effects/common-ui/src/components/index.ts
index a650c5f..caae19d 100644
--- a/easyflow-ui-usercenter/packages/effects/common-ui/src/components/index.ts
+++ b/easyflow-ui-usercenter/packages/effects/common-ui/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './api-component';
 export * from './captcha';
+export * from './chat-markdown';
 export * from './chat-thinking';
 export * from './col-page';
 export * from './count-to';
diff --git a/easyflow-ui-usercenter/pnpm-lock.yaml b/easyflow-ui-usercenter/pnpm-lock.yaml
index 8a22af2..9961d9c 100644
--- a/easyflow-ui-usercenter/pnpm-lock.yaml
+++ b/easyflow-ui-usercenter/pnpm-lock.yaml
@@ -1342,6 +1342,9 @@ importers:
       vue:
         specifier: ^3.5.17
         version: 3.5.24(typescript@5.9.3)
+      vue-element-plus-x:
+        specifier: 'catalog:'
+        version: 1.3.7(rollup@4.53.2)(vue@3.5.24(typescript@5.9.3))
       vue-json-viewer:
         specifier: 'catalog:'
         version: 3.0.4(vue@3.5.24(typescript@5.9.3))