feat: Implement frontend Markdown rendering. fix: Refined email view styling, includingelement spacing and layout, and added a dev-only sample message.
This commit is contained in:
parent
8c649adf93
commit
32320e1cb0
|
|
@ -100,6 +100,16 @@ const { t } = useI18n();
|
||||||
const recipient = ref('');
|
const recipient = ref('');
|
||||||
const messages = ref([]);
|
const messages = ref([]);
|
||||||
const selectedMessage = ref(null);
|
const selectedMessage = ref(null);
|
||||||
|
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
selectedMessage.value = {
|
||||||
|
id: 'sample-1',
|
||||||
|
sender: 'demo@example.com',
|
||||||
|
recipient: 'you@shenjianl.cn',
|
||||||
|
subject: 'Markdown 样式测试邮件',
|
||||||
|
body: `# 会议议程：项目启动会\n\n大家好，\n\n这是关于 **“Email-Unlimit”** 项目启动会的议程安排。\n\n---\n\n## 会议详情\n\n- **日期**: 2025年7月30日\n- **时间**: 上午10:00\n- **地点**: 线上会议室 (链接稍后提供)\n\n## 议程\n\n1. **项目介绍** - 介绍项目目标和范围。\n2. **团队分工** - 明确各自的职责。\n3. **技术选型** - 讨论并确认技术栈。\n4. **Q&A** - 自由提问环节。\n\n请准时参加。\n\n谢谢！\n\n> 这是一条重要的提醒：请提前准备好您的问题。`
|
||||||
|
};
|
||||||
|
}
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const copyStatus = ref('idle'); // 'idle' | 'copied'
|
const copyStatus = ref('idle'); // 'idle' | 'copied'
|
||||||
const domain = 'shenjianl.cn';
|
const domain = 'shenjianl.cn';
|
||||||
|
|
@ -371,3 +381,75 @@ const showCopySuccess = () => {
|
||||||
}, 2000);
|
}, 2000);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.message-body {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
white-space: normal; /* 覆盖 pre-wrap 样式 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
为动态渲染的 HTML 内容设置样式
|
||||||
|
使用 :deep() 来穿透 Vue 的作用域限制
|
||||||
|
*/
|
||||||
|
.message-body :deep(> :first-child) {
|
||||||
|
margin-top: 0; /* 移除第一个元素的上边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-body :deep(> :last-child) {
|
||||||
|
margin-bottom: 0; /* 移除最后一个元素的下边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-body :deep(h1),
|
||||||
|
.message-body :deep(h2),
|
||||||
|
.message-body :deep(h3),
|
||||||
|
.message-body :deep(h4),
|
||||||
|
.message-body :deep(h5),
|
||||||
|
.message-body :deep(h6) {
|
||||||
|
margin-top: 1.2em; /* 为标题设置合适的上边距 */
|
||||||
|
margin-bottom: 0.6em; /* 减小标题和下方内容的间距 */
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-body :deep(p) {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.8em; /* 为段落设置合适的下边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-body :deep(ul),
|
||||||
|
.message-body :deep(ol) {
|
||||||
|
padding-left: 1.5em; /* 调整列表的缩进 */
|
||||||
|
margin-bottom: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-body :deep(blockquote) {
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 1em;
|
||||||
|
border-left: 3px solid #ccc;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-body :deep(hr) {
|
||||||
|
margin: 1.5em 0;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-text {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue