78 lines
3.3 KiB
JavaScript
78 lines
3.3 KiB
JavaScript
import { navLinks } from './data.js';
|
|
|
|
const renderMessages = () => {
|
|
const messages = [
|
|
{
|
|
type: 'ai',
|
|
icon: 'sparkles',
|
|
color: 'text-warm-orange',
|
|
title: '开开的每周心情总结',
|
|
content: '你好呀！上周我们聊了很多关于"新工作的挑战"，你表现出了很棒的适应能力和积极心态。记得给自己一些放松的时间哦，比如看看你喜欢的电影。',
|
|
timestamp: '2025年7月15日 09:30'
|
|
},
|
|
{
|
|
type: 'system',
|
|
icon: 'bell',
|
|
color: 'text-tech-blue',
|
|
title: '系统通知：欢迎使用日记功能',
|
|
content: '现在，你可以在日记区记录下你的生活点滴，开开会阅读你的日记并给你温暖的回复和鼓励哦。',
|
|
timestamp: '2025年7月14日 18:00'
|
|
},
|
|
{
|
|
type: 'ai',
|
|
icon: 'sparkles',
|
|
color: 'text-warm-orange',
|
|
title: '开开的话题追踪提醒',
|
|
content: '我发现你最近经常提到"学吉他"，我已经为你创建了一个话题追踪卡片，帮你记录学习进度和心得。一起加油吧！',
|
|
timestamp: '2025年7月12日 11:25'
|
|
},
|
|
{
|
|
type: 'system',
|
|
icon: 'award',
|
|
color: 'text-green-500',
|
|
title: '成就解锁：初次见面',
|
|
content: '恭喜你完成了与开开的第一次对话，这是共同成长的第一步。',
|
|
timestamp: '2025年7月10日 20:45'
|
|
}
|
|
];
|
|
|
|
const messageListContainer = document.getElementById('message-list');
|
|
if (messageListContainer) {
|
|
messageListContainer.innerHTML = '';
|
|
messages.forEach((msg, index) => {
|
|
const messageEl = document.createElement('div');
|
|
messageEl.className = 'bg-white p-5 rounded-xl shadow-sm border border-gray-200/80 flex items-start space-x-4 hover:shadow-md hover:border-tech-blue/30 transition-all duration-300 animate-fade-in-up';
|
|
messageEl.style.animationDelay = `${index * 0.1}s`;
|
|
|
|
messageEl.innerHTML = `
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-light-gray flex items-center justify-center border">
|
|
<i data-lucide="${msg.icon}" class="w-5 h-5 ${msg.color}"></i>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="font-bold text-text-dark">${msg.title}</h3>
|
|
<span class="text-xs text-text-medium whitespace-nowrap">${msg.timestamp}</span>
|
|
</div>
|
|
<p class="text-text-medium mt-1 pr-4">${msg.content}</p>
|
|
</div>
|
|
<button class="flex-shrink-0 text-text-medium hover:text-tech-blue self-center">
|
|
<i data-lucide="chevron-right" class="w-5 h-5"></i>
|
|
</button>
|
|
`;
|
|
messageListContainer.appendChild(messageEl);
|
|
});
|
|
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
renderMessages();
|
|
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
});
|