From 32320e1cb0b41c515003c345b2b5a910022d5bd1 Mon Sep 17 00:00:00 2001
From: shenjianZ <shenjianZLT@gmail.com>
Date: Tue, 29 Jul 2025 13:12:39 +0800
Subject: [PATCH] feat: Implement frontend Markdown rendering. fix: Refined
 email view styling, includingelement spacing and layout, and added a dev-only
 sample message.

---
 frontend/src/views/Home.vue | 84 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index e483dfc..311431c 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -100,6 +100,16 @@ const { t } = useI18n();
 const recipient = ref('');
 const messages = ref([]);
 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 copyStatus = ref('idle'); // 'idle' | 'copied'
 const domain = 'shenjianl.cn';
@@ -370,4 +380,76 @@ const showCopySuccess = () => {
     copyStatus.value = 'idle';
   }, 2000);
 };
-</script>
\ No newline at end of file
+</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>