使用html 和javascript 实现微信界面功能2

1.功能说明：

对上一篇的基础上进行了稍稍改造
主要修改点：
搜索功能:
在搜索框后面增加了搜索按钮。
搜索按钮调用performSearch函数来执行搜索操作。
表单形式的功能:
上传文件: 修改为表单形式，允许用户通过文件输入控件选择文件并上传。
发布朋友圈: 修改为表单形式，允许用户输入朋友圈内容并发布。
展示视频: 修改为表单形式，允许用户输入视频URL并展示。
2.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易版微信</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .container {
            width: 80%;
            max-width: 1200px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
        }
        .sidebar {
            width: 25%;
            background: #e9ecef;
            padding: 20px;
            box-sizing: border-box;
        }
        .main-content {
            width: 75%;
            padding: 20px;
            box-sizing: border-box;
        }
        .search-area {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .search-area input {
            width: calc(100% - 80px);
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            outline: none;
        }
        .search-area button {
            padding: 10px 20px;
            border: none;
            background: #07c160;
            color: white;
            cursor: pointer;
            border-radius: 5px;
            margin-left: 10px;
        }
        .search-area button:hover {
            background: #06a352;
        }
        .friends-list, .favorites-list, .files-list, .moments-list, .videos-list {
            margin-top: 20px;
        }
        .item {
            padding: 10px;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
        }
        .item:last-child {
            border-bottom: none;
        }
        .item:hover {
            background: #f1f1f1;
        }
        .video-item video {
            width: 100%;
            border-radius: 10px;
        }
        .disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        .messages {
            max-height: 300px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .message {
            margin-bottom: 10px;
        }
        .message.user {
            text-align: right;
        }
        .message.bot {
            text-align: left;
        }
        .input-area {
            display: flex;
            border-top: 1px solid #ddd;
        }
        .input-area input {
            flex-grow: 1;
            padding: 10px;
            border: none;
            outline: none;
        }
        .input-area button {
            padding: 10px;
            border: none;
            background: #07c160;
            color: white;
            cursor: pointer;
        }
        .input-area button:hover {
            background: #06a352;
        }
        .confirmation-message {
            margin-top: 20px;
            padding: 10px;
            background: #ffcccc;
            border: 1px solid #ff4d4d;
            border-radius: 5px;
        }
        .confirmation-message p {
            margin: 0;
        }
        .confirmation-buttons button {
            margin-right: 10px;
        }
        .friend-details img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            outline: none;
        }
        .form-group button {
            padding: 10px 20px;
            border: none;
            background: #07c160;
            color: white;
            cursor: pointer;
            border-radius: 5px;
        }
        .form-group button:hover {
            background: #06a352;
        }
        .preview-image {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h3>搜索</h3>
            <div class="search-area">
                <input type="text" id="searchInput" placeholder="搜索...">
                <button onclick="performSearch()">搜索</button>
            </div>
            <h3>好友</h3>
            <div class="friends-list" id="friendsList">
                <div class="item" onclick="showFriends()">查看好友</div>
            </div>
            <h3>收藏</h3>
            <div class="favorites-list" id="favoritesList">
                <div class="item" onclick="showFavorites()">查看收藏</div>
            </div>
            <h3>文件</h3>
            <div class="files-list" id="filesList">
                <div class="item" onclick="showFiles()">查看文件</div>
            </div>
            <h3>朋友圈</h3>
            <div class="moments-list" id="momentsList">
                <div class="item" onclick="showMoments()">查看朋友圈</div>
            </div>
            <h3>视频号</h3>
            <div class="videos-list" id="videosList">
                <div class="item" onclick="showVideos()">查看视频</div>
            </div>
        </div>
        <div class="main-content">
            <h2 id="contentTitle">主界面</h2>
            <div id="contentArea"></div>
        </div>
    </div>

    <script>
        let friends = [];
        let favorites = [];
        let files = [];
        let moments = [];
        let videos = [];
        let confirmationCallback = null;

        function generateUniqueId() {
            return Math.random().toString(36).substr(2, 9);
        }

        function addFriendForm() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>添加好友</h3>
                <form id="addFriendForm">
                    <div class="form-group">
                        <label for="friendNickname">网名:</label>
                        <input type="text" id="friendNickname" required>
                    </div>
                    <div class="form-group">
                        <label for="friendAge">年龄:</label>
                        <input type="number" id="friendAge" min="1" required>
                    </div>
                    <div class="form-group">
                        <label for="friendGender">性别:</label>
                        <select id="friendGender" required>
                            <option value="">请选择...</option>
                            <option value="male">男</option>
                            <option value="female">女</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="friendAddress">地址:</label>
                        <input type="text" id="friendAddress" required>
                    </div>
                    <div class="form-group">
                        <label for="friendAvatar">头像:</label>
                        <input type="file" id="friendAvatar" accept="image/*" required>
                        <img id="avatarPreview" class="preview-image" src="" alt="Avatar Preview" style="display:none;">
                    </div>
                    <button type="submit">添加好友</button>
                </form>
            `;
            document.getElementById('friendAvatar').addEventListener('change', function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const previewImage = document.getElementById('avatarPreview');
                        previewImage.src = e.target.result;
                        previewImage.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                }
            });
            document.getElementById('addFriendForm').onsubmit = (event) => {
                event.preventDefault();
                const nickname = document.getElementById('friendNickname').value;
                const age = parseInt(document.getElementById('friendAge').value);
                const gender = document.getElementById('friendGender').value;
                const address = document.getElementById('friendAddress').value;
                const avatarFile = document.getElementById('friendAvatar').files[0];
                if (!avatarFile) {
                    showMessage('请上传头像');
                    return;
                }
                const friendId = generateUniqueId();
                const reader = new FileReader();
                reader.onloadend = () => {
                    const avatarUrl = reader.result;
                    friends.push({ id: friendId, nickname, age, gender, address, avatar: avatarUrl, blocked: false });
                    showMessage(`已添加好友 ${nickname}`);
                    showFriends();
                };
                reader.readAsDataURL(avatarFile);
            };
        }

        function deleteFriend(index) {
            confirmationCallback = () => {
                friends.splice(index, 1);
                showFriends();
            };
            showConfirmation(`确定要删除 ${friends[index].nickname} 吗？`);
        }

        function blockFriend(index) {
            friends[index].blocked = !friends[index].blocked;
            showMessage(`已将 ${friends[index].nickname} ${friends[index].blocked ? '拉黑' : '取消拉黑'}`);
            showFriends();
        }

        function addToFavoritesForm() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>添加收藏</h3>
                <form id="addFavoriteForm">
                    <div class="form-group">
                        <label for="favoriteContent">收藏内容:</label>
                        <textarea id="favoriteContent" rows="4" required></textarea>
                    </div>
                    <button type="submit">添加收藏</button>
                </form>
            `;
            document.getElementById('addFavoriteForm').onsubmit = (event) => {
                event.preventDefault();
                const content = document.getElementById('favoriteContent').value;
                if (content) {
                    favorites.push({ content, likes: 0 });
                    showMessage(`已添加收藏`);
                    showFavorites();
                }
            };
        }

        function deleteFavorite(index) {
            confirmationCallback = () => {
                favorites.splice(index, 1);
                showFavorites();
            };
            showConfirmation(`确定要删除此收藏吗？`);
        }

        function likeFavorite(index) {
            favorites[index].likes++;
            showFavorites();
        }

        function uploadFileForm() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>上传文件</h3>
                <form id="uploadFileForm">
                    <div class="form-group">
                        <label for="fileUpload">选择文件:</label>
                        <input type="file" id="fileUpload" required>
                    </div>
                    <button type="submit">上传文件</button>
                </form>
            `;
            document.getElementById('uploadFileForm').onsubmit = (event) => {
                event.preventDefault();
                const fileInput = document.getElementById('fileUpload');
                const file = fileInput.files[0];
                if (file) {
                    files.push(file);
                    showMessage(`${file.name} 已上传`);
                    showFiles();
                }
            };
        }

        function downloadFile(index) {
            const file = files[index];
            const url = URL.createObjectURL(file);
            const a = document.createElement('a');
            a.href = url;
            a.download = file.name;
            document.body.appendChild(a);
            a.click();
            a.remove();
        }

        function deleteFile(index) {
            confirmationCallback = () => {
                files.splice(index, 1);
                showFiles();
            };
            showConfirmation(`确定要删除此文件吗？`);
        }

        function postMomentForm() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>发布朋友圈</h3>
                <form id="postMomentForm">
                    <div class="form-group">
                        <label for="momentContent">朋友圈内容:</label>
                        <textarea id="momentContent" rows="4" required></textarea>
                    </div>
                    <button type="submit">发布朋友圈</button>
                </form>
            `;
            document.getElementById('postMomentForm').onsubmit = (event) => {
                event.preventDefault();
                const content = document.getElementById('momentContent').value;
                if (content) {
                    moments.push({ content, likes: 0 });
                    showMessage(`已发布朋友圈`);
                    showMoments();
                }
            };
        }

        function deleteMoment(index) {
            confirmationCallback = () => {
                moments.splice(index, 1);
                showMoments();
            };
            showConfirmation(`确定要删除此朋友圈吗？`);
        }

        function likeMoment(index) {
            moments[index].likes++;
            showMoments();
        }

        function showVideoForm() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>展示视频</h3>
                <form id="showVideoForm">
                    <div class="form-group">
                        <label for="videoUrl">视频URL:</label>
                        <input type="url" id="videoUrl" required>
                    </div>
                    <button type="submit">展示视频</button>
                </form>
            `;
            document.getElementById('showVideoForm').onsubmit = (event) => {
                event.preventDefault();
                const videoUrl = document.getElementById('videoUrl').value;
                if (videoUrl) {
                    videos.push({ url: videoUrl, likes: 0 });
                    showMessage(`已添加视频`);
                    showVideos();
                }
            };
        }

        function deleteVideo(index) {
            confirmationCallback = () => {
                videos.splice(index, 1);
                showVideos();
            };
            showConfirmation(`确定要删除此视频吗？`);
        }

        function likeVideo(index) {
            videos[index].likes++;
            showVideos();
        }

        function updateFriendsList() {
            const friendsList = document.getElementById('friendsList');
            friendsList.innerHTML = `
                <div class="item" οnclick="showFriends()">查看好友</div>
            `;
            if (friends.length > 0) {
                friends.forEach((friend, index) => {
                    const item = document.createElement('div');
                    item.className = 'item';
                    item.textContent = `${friend.nickname} (${friend.age}) ${friend.blocked ? '(已拉黑)' : ''}`;
                    item.onclick = () => showFriendDetails(index);
                    friendsList.appendChild(item);
                });
            }
        }

        function updateFavoritesList() {
            const favoritesList = document.getElementById('favoritesList');
            favoritesList.innerHTML = `
                <div class="item" οnclick="showFavorites()">查看收藏</div>
            `;
            if (favorites.length > 0) {
                favorites.forEach((favorite, index) => {
                    const item = document.createElement('div');
                    item.className = 'item';
                    item.textContent = `${favorite.content.substring(0, 50)}... (${favorite.likes} 点赞)`;
                    item.onclick = () => showFavoriteDetails(index);
                    favoritesList.appendChild(item);
                });
            }
        }

        function updateFilesList() {
            const filesList = document.getElementById('filesList');
            filesList.innerHTML = `
                <div class="item" οnclick="showFiles()">查看文件</div>
            `;
            if (files.length > 0) {
                files.forEach((file, index) => {
                    const item = document.createElement('div');
                    item.className = 'item';
                    item.textContent = `${file.name}`;
                    item.onclick = () => showFileDetails(index);
                    filesList.appendChild(item);
                });
            }
        }

        function updateMomentsList() {
            const momentsList = document.getElementById('momentsList');
            momentsList.innerHTML = `
                <div class="item" οnclick="showMoments()">查看朋友圈</div>
            `;
            if (moments.length > 0) {
                moments.forEach((moment, index) => {
                    const item = document.createElement('div');
                    item.className = 'item';
                    item.textContent = `${moment.content.substring(0, 50)}... (${moment.likes} 点赞)`;
                    item.onclick = () => showMomentDetails(index);
                    momentsList.appendChild(item);
                });
            }
        }

        function updateVideosList() {
            const videosList = document.getElementById('videosList');
            videosList.innerHTML = `
                <div class="item" οnclick="showVideos()">查看视频</div>
            `;
            if (videos.length > 0) {
                videos.forEach((video, index) => {
                    const item = document.createElement('div');
                    item.className = 'item';
                    item.innerHTML = `<video src="${video.url}" controls></video> (${video.likes} 点赞)`;
                    item.onclick = () => showVideoDetails(index);
                    videosList.appendChild(item);
                });
            }
        }

        function showFriends() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>好友列表</h3>
                <button οnclick="addFriendForm()">添加好友</button>
                <div id="friendsContent"></div>
            `;
            const friendsContent = document.getElementById('friendsContent');
            friends.forEach((friend, index) => {
                const item = document.createElement('div');
                item.className = 'item';
                item.textContent = `${friend.nickname} (${friend.age}) ${genderMap[friend.gender]} ${friend.blocked ? '(已拉黑)' : ''}`;
                item.onclick = () => showFriendDetails(index);
                friendsContent.appendChild(item);
            });
        }

        function showFriendDetails(index) {
            const friend = friends[index];
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>${friend.nickname}</h3>
                <div class="friend-details">
                    <img src="${friend.avatar}" alt="${friend.nickname}'s Avatar">
                    <p>年龄: ${friend.age}</p>
                    <p>性别: ${genderMap[friend.gender]}</p>
                    <p>地址: ${friend.address}</p>
                    <p>状态: ${friend.blocked ? '已拉黑' : '正常'}</p>
                    <button οnclick="chatWithFriend(${index})" ${friend.blocked ? 'class="disabled"' : ''}>聊天</button>
                    <button οnclick="deleteFriend(${index})">删除好友</button>
                    <button οnclick="blockFriend(${index})">${friend.blocked ? '取消拉黑' : '拉黑好友'}</button>
                </div>
            `;
        }

        function chatWithFriend(index) {
            const friend = friends[index];
            if (friend.blocked) {
                showMessage('无法与已拉黑的好友聊天');
                return;
            }
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>与 ${friend.nickname} 聊天</h3>
                <div class="messages" id="friendMessages"></div>
                <div class="input-area">
                    <input type="text" id="friendMessageInput" placeholder="输入消息...">
                    <button οnclick="sendFriendMessage(${index})">发送</button>
                </div>
            `;
        }

        function sendFriendMessage(index) {
            const friendMessageInput = document.getElementById('friendMessageInput');
            const friendMessagesContainer = document.getElementById('friendMessages');
            const userMessage = friendMessageInput.value.trim();

            if (userMessage === '') return;

            // 创建用户消息元素
            const userMessageElement = document.createElement('div');
            userMessageElement.className = 'message user';
            userMessageElement.textContent = userMessage;
            friendMessagesContainer.appendChild(userMessageElement);

            // 添加撤回按钮
            const revokeButton = document.createElement('button');
            revokeButton.textContent = '撤回';
            revokeButton.onclick = () => {
                friendMessagesContainer.removeChild(userMessageElement);
            };
            userMessageElement.appendChild(revokeButton);

            // 清空输入框
            friendMessageInput.value = '';

            // 模拟好友回复
            setTimeout(() => {
                const friendReply = `收到：${userMessage}`;
                const friendMessageElement = document.createElement('div');
                friendMessageElement.className = 'message bot';
                friendMessageElement.textContent = friendReply;
                friendMessagesContainer.appendChild(friendMessageElement);

                // 自动滚动到底部
                friendMessagesContainer.scrollTop = friendMessagesContainer.scrollHeight;
            }, 1000);
        }

        function showFavoriteDetails(index) {
            const favorite = favorites[index];
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>收藏内容</h3>
                <p>${favorite.content}</p>
                <p>点赞数: ${favorite.likes}</p>
                <button οnclick="likeFavorite(${index})">点赞</button>
                <button οnclick="deleteFavorite(${index})">删除收藏</button>
            `;
        }

        function showFileDetails(index) {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>文件详情</h3>
                <p>文件名: ${files[index].name}</p>
                <button οnclick="downloadFile(${index})">下载文件</button>
                <button οnclick="deleteFile(${index})">删除文件</button>
            `;
        }

        function showMomentDetails(index) {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>朋友圈内容</h3>
                <p>${moments[index].content}</p>
                <p>点赞数: ${moments[index].likes}</p>
                <button οnclick="likeMoment(${index})">点赞</button>
                <button οnclick="deleteMoment(${index})">删除朋友圈</button>
            `;
        }

        function showVideoDetails(index) {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>视频详情</h3>
                <video src="${videos[index].url}" controls></video>
                <p>点赞数: ${videos[index].likes}</p>
                <button οnclick="likeVideo(${index})">点赞</button>
                <button οnclick="deleteVideo(${index})">删除视频</button>
            `;
        }

        function showFavorites() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>收藏内容列表</h3>
                <button οnclick="addToFavoritesForm()">新增收藏内容</button>
                <div id="favoritesContent"></div>
            `;
            const favoritesContent = document.getElementById('favoritesContent');
            favorites.forEach((favorite, index) => {
                const item = document.createElement('div');
                item.className = 'item';
                item.textContent = `${favorite.content.substring(0, 50)}... (${favorite.likes} 点赞)`;
                item.onclick = () => showFavoriteDetails(index);
                favoritesContent.appendChild(item);
            });
        }

        function showFiles() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>文件列表</h3>
                <button οnclick="uploadFileForm()">上传文件</button>
                <div id="filesContent"></div>
            `;
            const filesContent = document.getElementById('filesContent');
            files.forEach((file, index) => {
                const item = document.createElement('div');
                item.className = 'item';
                item.textContent = `${file.name}`;
                item.onclick = () => showFileDetails(index);
                filesContent.appendChild(item);
            });
        }

        function showMoments() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>朋友圈列表</h3>
                <button οnclick="postMomentForm()">发布朋友圈</button>
                <div id="momentsContent"></div>
            `;
            const momentsContent = document.getElementById('momentsContent');
            moments.forEach((moment, index) => {
                const item = document.createElement('div');
                item.className = 'item';
                item.textContent = `${moment.content.substring(0, 50)}... (${moment.likes} 点赞)`;
                item.onclick = () => showMomentDetails(index);
                momentsContent.appendChild(item);
            });
        }

        function showVideos() {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>视频列表</h3>
                <button οnclick="showVideoForm()">展示视频</button>
                <div id="videosContent"></div>
            `;
            const videosContent = document.getElementById('videosContent');
            videos.forEach((video, index) => {
                const item = document.createElement('div');
                item.className = 'item';
                item.innerHTML = `<video src="${video.url}" controls></video> (${video.likes} 点赞)`;
                item.onclick = () => showVideoDetails(index);
                videosContent.appendChild(item);
            });
        }

        function showConfirmation(message) {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML += `
                <div class="confirmation-message" id="confirmationMessage">
                    <p>${message}</p>
                    <div class="confirmation-buttons">
                        <button οnclick="confirmAction()">确认</button>
                        <button οnclick="cancelAction()">取消</button>
                    </div>
                </div>
            `;
        }

        function confirmAction() {
            if (confirmationCallback) {
                confirmationCallback();
                confirmationCallback = null;
            }
            hideConfirmation();
        }

        function cancelAction() {
            confirmationCallback = null;
            hideConfirmation();
        }

        function hideConfirmation() {
            const confirmationMessage = document.getElementById('confirmationMessage');
            if (confirmationMessage) {
                confirmationMessage.remove();
            }
        }

        function showMessage(message) {
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML += `
                <div class="confirmation-message" id="confirmationMessage">
                    <p>${message}</p>
                </div>
            `;
            setTimeout(hideConfirmation, 3000); // Hide after 3 seconds
        }

        function searchFriends(query) {
            const filteredFriends = friends.filter(friend =>
                friend.nickname.toLowerCase().includes(query.toLowerCase())
            );
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>搜索结果</h3>
                <div id="searchResults"></div>
            `;
            const searchResults = document.getElementById('searchResults');
            if (filteredFriends.length > 0) {
                filteredFriends.forEach((friend, index) => {
                    const item = document.createElement('div');
                    item.className = 'item';
                    item.textContent = `${friend.nickname} (${friend.age}) ${genderMap[friend.gender]} ${friend.blocked ? '(已拉黑)' : ''}`;
                    item.onclick = () => showSearchFriendDetails(filteredFriends, index);
                    searchResults.appendChild(item);
                });
            } else {
                searchResults.innerHTML = '<p>没有找到匹配的好友</p>';
            }
        }

        function performSearch() {
            const query = document.getElementById('searchInput').value;
            if (query.trim()) {
                searchFriends(query);
            } else {
                showFriends(); // Reset to full list if search is cleared
            }
        }

        function showSearchFriendDetails(filteredFriends, index) {
            const friend = filteredFriends[index];
            const contentArea = document.getElementById('contentArea');
            contentArea.innerHTML = `
                <h3>${friend.nickname}</h3>
                <div class="friend-details">
                    <img src="${friend.avatar}" alt="${friend.nickname}'s Avatar">
                    <p>年龄: ${friend.age}</p>
                    <p>性别: ${genderMap[friend.gender]}</p>
                    <p>地址: ${friend.address}</p>
                    <p>状态: ${friend.blocked ? '已拉黑' : '正常'}</p>
                    <button οnclick="chatWithFriend(${friends.indexOf(friend)})" ${friend.blocked ? 'class="disabled"' : ''}>聊天</button>
                    <button οnclick="deleteFriend(${friends.indexOf(friend)})">删除好友</button>
                    <button οnclick="blockFriend(${friends.indexOf(friend)})">${friend.blocked ? '取消拉黑' : '拉黑好友'}</button>
                </div>
            `;
        }

        // Gender mapping
        const genderMap = {
            male: '男',
            female: '女',
            other: '其他'
        };

        // 初始化列表
        updateFriendsList();
        updateFavoritesList();
        updateFilesList();
        updateMomentsList();
        updateVideosList();
    </script>
</body>
</html>