优化调整

2025-07-26 00:37:18 +08:00
parent 08bbd4df0f
commit 0dfabc35d7
90 changed files with 3594 additions and 2294 deletions
@@ -0,0 +1,77 @@
+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();
+    }
+});