feat: 添加Markdown渲染支持并增强UI功能
- 引入markdown-it库实现节点内容和摘要的Markdown渲染 - 添加多种边类型选择功能(直线/曲线/折线等) - 实现全屏模式切换功能 - 优化底部工具栏和节点输入框的样式 - 更新i18n多语言支持新增功能文本
This commit is contained in:
@@ -29,3 +29,72 @@ body {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Markdown 渲染基础样式 */
|
||||
.markdown-body {
|
||||
@apply text-slate-700;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
@apply text-lg font-black mt-4 mb-2 text-slate-900;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
@apply text-base font-black mt-3 mb-2 text-slate-900;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
@apply text-sm font-black mt-2 mb-1 text-slate-800;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
@apply mb-2 last:mb-0;
|
||||
}
|
||||
|
||||
.markdown-body ul, .markdown-body ol {
|
||||
@apply pl-4 mb-2 list-outside;
|
||||
}
|
||||
|
||||
.markdown-body ul {
|
||||
@apply list-disc;
|
||||
}
|
||||
|
||||
.markdown-body ol {
|
||||
@apply list-decimal;
|
||||
}
|
||||
|
||||
.markdown-body li {
|
||||
@apply mb-1;
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
@apply px-1 py-0.5 bg-slate-100 rounded text-[0.9em] font-mono text-orange-600;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
@apply p-3 bg-slate-900 text-slate-100 rounded-lg overflow-x-auto mb-3 font-mono text-[0.85em];
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
@apply pl-3 border-l-4 border-slate-200 text-slate-500 italic mb-2;
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
@apply text-orange-500 hover:underline;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
@apply w-full border-collapse mb-3;
|
||||
}
|
||||
|
||||
.markdown-body th, .markdown-body td {
|
||||
@apply border border-slate-200 p-2 text-left;
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
@apply bg-slate-50 font-bold;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
@apply my-4 border-t border-slate-100;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user