修改一些功能

webfile/index.html

@@ -25,17 +25,8 @@
         
         <div class="content">
             <h2>欢迎使用</h2>
-            <div class="card">
-                <h3>卡片标题</h3>
-                <p>这是一个WinUI风格的卡片内容区域。您可以在这里放置各种内容。</p>
-            </div>
-            <div class="card">
-                <h3>另一个卡片</h3>
-                <p>响应式设计使得在窄屏设备上侧边栏可以隐藏。</p>
-            </div>
-            <div class="card">
-                <h3>更多内容</h3>
-                <p>主内容区域可以滚动，侧边栏在移动设备上会覆盖内容。</p>
+            <div id="posts-container">
+                <!-- 帖子卡片将通过JavaScript动态加载 -->
             </div>
         </div>
     </div>
@@ -45,10 +36,36 @@
             document.getElementById('sidebar').classList.toggle('open');
         });
         
-        // 为侧边栏菜单项添加悬停效果
-        document.querySelectorAll('.sidebar-menu li').forEach(item => {
-            item.style.cursor = 'pointer';
-        });
+        // 获取帖子数据
+        async function fetchPosts() {
+            try {
+                const response = await fetch('/api/posts');
+                const posts = await response.json();
+                
+                const container = document.getElementById('posts-container');
+                container.innerHTML = '';
+                
+                posts.forEach(post => {
+                    const card = document.createElement('div');
+                    card.className = 'card';
+                    card.innerHTML = `
+                        <h3>${post.title}</h3>
+                        <p class="post-content">${post.content}</p>
+                        <p class="post-description">${post.description}</p>
+                        <div class="post-author">
+                            <span class="username">@${post.author.username}</span>
+                            <span class="nickname">${post.author.nickname}</span>
+                        </div>
+                    `;
+                    container.appendChild(card);
+                });
+            } catch (error) {
+                console.error('获取帖子失败:', error);
+            }
+        }
+        
+        // 页面加载时获取帖子
+        document.addEventListener('DOMContentLoaded', fetchPosts);
     </script>
 </body>
 </html>