优化调整

2025-07-26 00:37:18 +08:00
parent 08bbd4df0f
commit 0dfabc35d7
90 changed files with 3594 additions and 2294 deletions
@@ -0,0 +1,180 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const DIARY_STORAGE_KEY = 'kaixinapp_diary_entries';
+    
+    let diaryData = [
+        {
+            id: 1,
+            author: '开开',
+            avatar: 'https://r2.flowith.net/files/o/1752574406770-thoughtful_kaikai_character_generation_index_1@1024x1024.png',
+            timestamp: '2小时前',
+            content: '今天观察到一种叫做"晚霞"的人类世界景象，云朵被染成了温暖的橘色和柔和的粉色。在高维世界，我们用能量共振来传递美，而在这里，光和色彩就能讲述如此动人的故事。真奇妙。',
+            comments: []
+        },
+        {
+            id: 2,
+            author: '我',
+            avatar: null, 
+            timestamp: '昨天 18:30',
+            content: '终于完成了那个困扰我一周的项目！虽然过程很累，但看到成果的那一刻，感觉一切都值了。晚上要好好奖励自己一顿大餐！',
+            comments: [
+                {
+                    author: '开开',
+                    avatar: 'https://r2.flowith.net/files/o/1752574488398-kaikai_supportive_comfort_character_index_3@1024x1024.png',
+                    content: '恭喜你！我能感受到你此刻成就感带来的能量波动，非常明亮。这正是人类"坚韧"这种美好品质的体现。好好享受你的大餐吧！'
+                }
+            ]
+        },
+        {
+            id: 3,
+            author: '我',
+            avatar: null,
+            timestamp: '2025年7月12日',
+            content: '今天心情有点像梅雨季节，闷闷的。不知道为什么，就是提不起劲。',
+            comments: []
+        }
+    ];
+
+    function loadDiaryFromStorage() {
+        try {
+            const stored = localStorage.getItem(DIARY_STORAGE_KEY);
+            if (stored) {
+                const storedEntries = JSON.parse(stored);
+                diaryData = [...storedEntries, ...diaryData];
+            }
+        } catch (error) {
+            console.error('Failed to load diary entries from storage:', error);
+        }
+    }
+
+    function saveDiaryToStorage(entries) {
+        try {
+            localStorage.setItem(DIARY_STORAGE_KEY, JSON.stringify(entries));
+        } catch (error) {
+            console.error('Failed to save diary entries to storage:', error);
+        }
+    }
+
+    function formatTimestamp() {
+        const now = new Date();
+        return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
+    }
+
+    function renderDiary() {
+        const feedContainer = document.getElementById('diary-feed');
+        if (!feedContainer) return;
+
+        const diaryHtml = diaryData.map(entry => {
+            const avatarHtml = entry.author === '开开'
+                ? `<img src="${entry.avatar}" alt="${entry.author}" class="w-10 h-10 rounded-full object-cover">`
+                : `<i data-lucide="user-circle-2" class="w-10 h-10 text-gray-400"></i>`;
+
+            const commentsHtml = entry.comments.map(comment => {
+                const commentAvatarHtml = comment.author === '开开'
+                    ? `<img src="${comment.avatar}" alt="${comment.author}" class="w-8 h-8 rounded-full object-cover flex-shrink-0">`
+                    : `<i data-lucide="user-circle-2" class="w-8 h-8 text-gray-400 flex-shrink-0"></i>`;
+                
+                return `
+                    <div class="flex items-start">
+                        ${commentAvatarHtml}
+                        <div class="ml-3 bg-light-gray p-3 rounded-lg w-full">
+                            <p class="text-sm font-semibold text-text-dark">${comment.author}</p>
+                            <p class="text-sm text-text-dark mt-1">${comment.content}</p>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+
+            const commentButtonText = entry.comments.length > 0 ? `${entry.comments.length}条评论` : '评论';
+
+            return `
+                <div class="bg-white rounded-xl shadow-sm p-4 animate-fade-in-up">
+                    <div class="flex items-center mb-4">
+                        ${avatarHtml}
+                        <div class="ml-3">
+                            <p class="font-semibold text-text-dark">${entry.author}</p>
+                            <p class="text-xs text-text-medium">${entry.timestamp}</p>
+                        </div>
+                    </div>
+                    
+                    <p class="text-text-dark whitespace-pre-wrap leading-relaxed">${entry.content}</p>
+
+                    <div class="mt-4 pt-3 border-t border-gray-100 flex items-center justify-end space-x-4">
+                        <button data-toggle="comment" data-target="comments-${entry.id}" class="flex items-center text-sm text-text-medium hover:text-tech-blue transition-colors">
+                            <i data-lucide="message-square" class="w-4 h-4 mr-1.5"></i>
+                            <span>${commentButtonText}</span>
+                        </button>
+                    </div>
+
+                    ${entry.comments.length > 0 ? `
+                    <div id="comments-${entry.id}" class="hidden mt-3 pt-3 border-t border-gray-100 space-y-3">
+                        ${commentsHtml}
+                    </div>` : ''}
+                </div>
+            `;
+        }).join('');
+
+        feedContainer.innerHTML = diaryHtml;
+
+        if (typeof lucide !== 'undefined') {
+            lucide.createIcons();
+        }
+
+        document.querySelectorAll('[data-toggle="comment"]').forEach(button => {
+            button.addEventListener('click', () => {
+                const targetId = button.dataset.target;
+                const commentSection = document.getElementById(targetId);
+                if (commentSection) {
+                    const isHidden = commentSection.classList.contains('hidden');
+                    commentSection.classList.toggle('hidden');
+                    
+                    if (isHidden) {
+                        button.classList.add('text-tech-blue');
+                    } else {
+                        button.classList.remove('text-tech-blue');
+                    }
+                }
+            });
+        });
+    }
+
+    function publishDiary() {
+        const contentTextarea = document.getElementById('new-diary-content');
+        const publishBtn = document.getElementById('publish-diary-btn');
+        
+        if (!contentTextarea || !publishBtn) return
+;
+
+        const content = contentTextarea.value.trim();
+        if (!content) return;
+
+        const newEntry = {
+            id: Date.now(),
+            author: '我',
+            avatar: null,
+            timestamp: formatTimestamp(),
+            content: content,
+            comments: []
+        };
+
+        diaryData.unshift(newEntry);
+        
+        const userEntries = diaryData.filter(entry => entry.author === '我' && entry.id >= Date.now() - 86400000);
+        saveDiaryToStorage(userEntries);
+
+        contentTextarea.value = '';
+        renderDiary();
+
+        publishBtn.disabled = true;
+        setTimeout(() => {
+            publishBtn.disabled = false;
+        }, 2000);
+    }
+
+    loadDiaryFromStorage();
+    renderDiary();
+
+    const publishBtn = document.getElementById('publish-diary-btn');
+    if (publishBtn) {
+        publishBtn.addEventListener('click', publishDiary);
+    }
+});