feat(mini-program): 添加 Markdown 渲染组件支持回溯过去页面

- 创建 Markdown.vue 组件,解析并渲染 Markdown 格式内容
- 支持分割线 (---)、四级标题 (####)、列表项 (*-)、段落
- 更新 RecordView.vue 使用 Markdown 组件渲染事件内容和 AI 回复
- 样式采用紫色主题,与整体设计保持一致

解决 issues: 小程序回溯过去页面的 Markdown 内容以纯文本显示的问题
This commit is contained in:
2026-04-07 21:00:39 +08:00
parent c498c6ca42
commit ee067ad1cb
2 changed files with 145 additions and 40 deletions
+11 -40
View File
@@ -42,16 +42,16 @@
<text class="event-date">{{ event.time }}</text>
</view>
<text class="event-content">{{ event.content }}</text>
<view class="event-body">
<Markdown class="event-content" :content="event.content" />
</view>
<view class="ai-reply">
<view class="ai-header">
<text class="ai-icon"></text>
<text class="ai-title">Life Harmony AI</text>
</view>
<text class="ai-content" :class="{ typing: event.isNew }">
{{ event.aiFeedback }}
</text>
<Markdown class="ai-content" :content="event.aiFeedback" />
</view>
</view>
</view>
@@ -61,6 +61,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '../../stores/app.js'
import Markdown from '../../components/Markdown.vue'
const store = useAppStore()
@@ -121,6 +122,7 @@ onMounted(() => {
flex-direction: column;
gap: 32rpx;
min-height: 100%;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ==================== 输入卡片 - 金色玻璃态 ==================== */
@@ -285,12 +287,14 @@ onMounted(() => {
white-space: nowrap;
}
.event-body {
margin-bottom: 16rpx;
}
.event-content {
display: block;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
margin-bottom: 24rpx;
}
/* ==================== AI 回复区域 - 金色玻璃态核心特征 ==================== */
@@ -336,39 +340,6 @@ onMounted(() => {
.ai-content {
font-size: 24rpx;
color: rgba(243, 232, 255, 0.8);
font-style: italic;
line-height: 1.5;
overflow: hidden;
white-space: pre-wrap;
}
/* 打字机动画 - 原型标准 */
.ai-content.typing {
animation: typing-reveal 2.5s steps(60, end);
}
@keyframes typing-reveal {
from {
opacity: 0;
transform: translateY(8rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 光标闪烁效果(增强打字机感) */
.ai-content.typing::after {
content: '|';
animation: cursor-blink 0.8s steps(2) infinite;
color: rgba(192, 132, 252, 0.6);
margin-left: 4rpx;
}
@keyframes cursor-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
</style>