diff --git a/packages/ui/src/components/MarkdownRenderer.vue b/packages/ui/src/components/MarkdownRenderer.vue
index 750ee6e0..7ba9aabd 100644
--- a/packages/ui/src/components/MarkdownRenderer.vue
+++ b/packages/ui/src/components/MarkdownRenderer.vue
@@ -1,192 +1,183 @@
-
-
-
-
-
-
\ No newline at end of file
+};
+
+// 监听content变化时重新渲染
+watch(() => props.content, renderMarkdown, { immediate: true });
+
+// 组件挂载时渲染
+onMounted(() => {
+ renderMarkdown();
+});
+
+
+
\ No newline at end of file
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index dd4714c5..1461fd02 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -440,6 +440,89 @@ html * {
.theme-manager-text-disabled {
@apply text-stone-400;
}
+ /* Markdown主题样式 - Light Mode (默认主题) */
+ .theme-markdown-content {
+ @apply text-stone-600;
+ }
+
+ .theme-markdown-content h1,
+ .theme-markdown-content h2,
+ .theme-markdown-content h3,
+ .theme-markdown-content h4 {
+ @apply text-stone-700;
+ }
+
+ .theme-markdown-content h2 {
+ @apply border-b border-stone-200;
+ }
+
+ .theme-markdown-content a {
+ @apply text-stone-800 underline hover:text-stone-600;
+ }
+
+ .theme-markdown-content pre {
+ @apply bg-stone-100 border border-stone-200;
+ }
+
+ .theme-markdown-content code {
+ @apply bg-stone-100 text-stone-700;
+ }
+
+ .theme-markdown-content blockquote {
+ @apply border-l-4 border-stone-300 bg-stone-50 text-stone-600 px-4 py-2;
+ }
+
+ .theme-markdown-content table {
+ @apply border-collapse border border-stone-200 my-4;
+ }
+
+ .theme-markdown-content table th {
+ @apply bg-stone-100 text-stone-700 border border-stone-300 p-2 font-semibold;
+ }
+
+ .theme-markdown-content table td {
+ @apply border border-stone-200 text-stone-600 p-2;
+ }
+
+ .theme-markdown-content tr:nth-child(even) {
+ @apply bg-stone-50;
+ }
+
+ .theme-markdown-content hr {
+ @apply border-stone-200 my-4;
+ }
+
+ .theme-markdown-content ul {
+ @apply list-disc pl-5 my-3;
+ }
+
+ .theme-markdown-content ol {
+ @apply list-decimal pl-5 my-3;
+ }
+
+ .theme-markdown-content img {
+ @apply max-w-full rounded border border-stone-200 my-3;
+ }
+
+ .theme-markdown-content p {
+ @apply my-3;
+ }
+
+ .theme-markdown-content strong {
+ @apply font-semibold text-stone-700;
+ }
+
+ .theme-markdown-content em {
+ @apply italic;
+ }
+
+ .theme-markdown-content pre code {
+ @apply block p-4 overflow-x-auto;
+ }
+
+ .theme-markdown-content code {
+ @apply px-1.5 py-0.5 rounded text-sm;
+ }
}
/* 主题变体 */
@@ -758,6 +841,66 @@ html * {
@apply
text-blue-400;
}
+
+ /* 蓝色主题的 Markdown 样式 */
+ .theme-markdown-content {
+ @apply text-sky-700;
+ }
+
+ .theme-markdown-content h1,
+ .theme-markdown-content h2,
+ .theme-markdown-content h3,
+ .theme-markdown-content h4 {
+ @apply text-sky-800;
+ }
+
+ .theme-markdown-content h2 {
+ @apply border-b border-sky-200;
+ }
+
+ .theme-markdown-content a {
+ @apply text-blue-600 hover:text-blue-800;
+ }
+
+ .theme-markdown-content pre {
+ @apply bg-sky-50 border border-sky-200;
+ }
+
+ .theme-markdown-content code {
+ @apply bg-sky-50 text-sky-800;
+ }
+
+ .theme-markdown-content blockquote {
+ @apply border-l-4 border-sky-300 bg-sky-50/60 text-sky-700;
+ }
+
+ .theme-markdown-content table {
+ @apply border border-sky-200;
+ }
+
+ .theme-markdown-content table th {
+ @apply bg-sky-100 text-sky-800 border border-sky-300;
+ }
+
+ .theme-markdown-content table td {
+ @apply border border-sky-200 text-sky-700;
+ }
+
+ .theme-markdown-content tr:nth-child(even) {
+ @apply bg-sky-50;
+ }
+
+ .theme-markdown-content hr {
+ @apply border-sky-200;
+ }
+
+ .theme-markdown-content img {
+ @apply border border-sky-200;
+ }
+
+ .theme-markdown-content strong {
+ @apply text-sky-800;
+ }
}
:root[data-theme="green"] {
@@ -973,6 +1116,65 @@ html * {
text-red-900 hover:text-white
transition-colors;
}
+ /* 绿色主题的 Markdown 样式 */
+ .theme-markdown-content {
+ @apply text-teal-200;
+ }
+
+ .theme-markdown-content h1,
+ .theme-markdown-content h2,
+ .theme-markdown-content h3,
+ .theme-markdown-content h4 {
+ @apply text-teal-100;
+ }
+
+ .theme-markdown-content h2 {
+ @apply border-b border-teal-600;
+ }
+
+ .theme-markdown-content a {
+ @apply text-teal-300 hover:text-teal-200;
+ }
+
+ .theme-markdown-content pre {
+ @apply bg-teal-900/50 border border-teal-700;
+ }
+
+ .theme-markdown-content code {
+ @apply bg-teal-800 text-teal-200;
+ }
+
+ .theme-markdown-content blockquote {
+ @apply border-l-4 border-teal-600 bg-teal-800/50 text-teal-300;
+ }
+
+ .theme-markdown-content table {
+ @apply border border-teal-700;
+ }
+
+ .theme-markdown-content table th {
+ @apply bg-teal-800 text-teal-200 border border-teal-600;
+ }
+
+ .theme-markdown-content table td {
+ @apply border border-teal-700 text-teal-300;
+ }
+
+ .theme-markdown-content tr:nth-child(even) {
+ @apply bg-teal-800/50;
+ }
+
+ .theme-markdown-content hr {
+ @apply border-teal-600;
+ }
+
+ .theme-markdown-content img {
+ @apply border border-teal-700;
+ }
+
+ .theme-markdown-content strong {
+ @apply text-teal-100;
+ }
}
:root[data-theme="purple"] {
@@ -1245,6 +1447,66 @@ html * {
.theme-manager-text-disabled {
@apply text-white/40;
}
+
+ /* 紫色主题的 Markdown 样式 */
+ .theme-markdown-content {
+ @apply text-white/90;
+ }
+
+ .theme-markdown-content h1,
+ .theme-markdown-content h2,
+ .theme-markdown-content h3,
+ .theme-markdown-content h4 {
+ @apply text-white;
+ }
+
+ .theme-markdown-content h2 {
+ @apply border-b border-purple-600/50;
+ }
+
+ .theme-markdown-content a {
+ @apply text-purple-300 hover:text-purple-200;
+ }
+
+ .theme-markdown-content pre {
+ @apply bg-black/20 border border-purple-600/50;
+ }
+
+ .theme-markdown-content code {
+ @apply bg-purple-900/50 text-purple-200;
+ }
+
+ .theme-markdown-content blockquote {
+ @apply border-l-4 border-purple-500 bg-purple-900/30 text-purple-200;
+ }
+
+ .theme-markdown-content table {
+ @apply border border-purple-700/50;
+ }
+
+ .theme-markdown-content table th {
+ @apply bg-purple-800/50 text-white border border-purple-600/50;
+ }
+
+ .theme-markdown-content table td {
+ @apply border border-purple-700/50 text-white/90;
+ }
+
+ .theme-markdown-content tr:nth-child(even) {
+ @apply bg-purple-800/30;
+ }
+
+ .theme-markdown-content hr {
+ @apply border-purple-600/50;
+ }
+
+ .theme-markdown-content img {
+ @apply border border-purple-600/50;
+ }
+
+ .theme-markdown-content strong {
+ @apply text-white;
+ }
}
:root[data-theme="dark"] {
@@ -1462,4 +1724,64 @@ html * {
.theme-history-card-header {
@apply border-slate-700/50 /*卡片头部下边线*/;
}
+
+ /* 暗色主题的 Markdown 样式 */
+ .theme-markdown-content {
+ @apply text-slate-100;
+ }
+
+ .theme-markdown-content h1,
+ .theme-markdown-content h2,
+ .theme-markdown-content h3,
+ .theme-markdown-content h4 {
+ @apply text-white;
+ }
+
+ .theme-markdown-content h2 {
+ @apply border-b border-slate-700;
+ }
+
+ .theme-markdown-content a {
+ @apply text-purple-400 hover:text-purple-300;
+ }
+
+ .theme-markdown-content pre {
+ @apply bg-slate-800 border border-slate-700;
+ }
+
+ .theme-markdown-content code {
+ @apply bg-slate-800 text-slate-200;
+ }
+
+ .theme-markdown-content blockquote {
+ @apply border-l-4 border-slate-600 bg-slate-800/50 text-slate-300;
+ }
+
+ .theme-markdown-content table {
+ @apply border border-slate-700;
+ }
+
+ .theme-markdown-content table th {
+ @apply bg-slate-800 text-slate-200 border border-slate-700;
+ }
+
+ .theme-markdown-content table td {
+ @apply border border-slate-700 text-slate-300;
+ }
+
+ .theme-markdown-content tr:nth-child(even) {
+ @apply bg-slate-800/70;
+ }
+
+ .theme-markdown-content hr {
+ @apply border-slate-700;
+ }
+
+ .theme-markdown-content img {
+ @apply border border-slate-700;
+ }
+
+ .theme-markdown-content strong {
+ @apply text-white;
+ }
}