feat(页面): 添加联系与赞助版块

新增微信二维码和赞助二维码展示区域，包含响应式设计和交互效果
添加相关样式定义和图片资源

static/app/styles.css

@@ -2840,3 +2840,120 @@ input:checked + .toggle-slider:before {
         padding: 0.4rem 0.6rem;
     }
 }
+
+/* Contact and Sponsor Section */
+.contact-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 1.5rem;
+}
+
+.contact-card {
+    background: var(--bg-primary);
+    padding: 2rem;
+    border-radius: 0.5rem;
+    box-shadow: var(--shadow-md);
+    text-align: center;
+    transition: var(--transition);
+    border: 1px solid var(--border-color);
+}
+
+.contact-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-color);
+}
+
+.contact-card h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.contact-card h3 i {
+    color: var(--primary-color);
+}
+
+.qr-container {
+    margin: 1.5rem 0;
+    display: flex;
+    justify-content: center;
+}
+
+.qr-code {
+    width: 200px;
+    height: 200px;
+    object-fit: contain;
+    border: 4px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    transition: var(--transition);
+}
+
+.qr-code:hover {
+    border-color: var(--primary-color);
+    transform: scale(1.05);
+}
+
+.qr-description {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.5;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .contact-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+    
+    .contact-card {
+        padding: 1.5rem;
+    }
+    
+    .qr-code {
+        width: 180px;
+        height: 180px;
+    }
+}
+
+@media (max-width: 480px) {
+    .qr-code {
+        width: 150px;
+        height: 150px;
+    }
+    
+    .contact-card {
+        padding: 1rem;
+    }
+
+/* Contact section styling for dashboard */
+.contact-section {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.contact-section h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.contact-section h3 i {
+    color: var(--primary-color);
+}
+}

static/index.html

@@ -377,6 +377,27 @@
                             </ul>
                         </div>
                     </div>
+                    
+                    <!-- Contact and Sponsor Section -->
+                    <div class="contact-section">
+                        <h3><i class="fas fa-qrcode"></i> 联系与赞助</h3>
+                        <div class="contact-grid">
+                            <div class="contact-card">
+                                <h3><i class="fab fa-weixin"></i> 扫码进群，注明来意</h3>
+                                <div class="qr-container">
+                                    <img src="static/wechat.png" alt="微信二维码" class="qr-code">
+                                </div>
+                                <p class="qr-description">添加微信获取更多技术支持和交流</p>
+                            </div>
+                            <div class="contact-card">
+                                <h3><i class="fas fa-heart"></i> 扫码赞助</h3>
+                                <div class="qr-container">
+                                    <img src="static/sponsor.png" alt="赞助二维码" class="qr-code">
+                                </div>
+                                <p class="qr-description">您的赞助是项目持续发展的动力</p>
+                            </div>
+                        </div>
+                    </div>
                 </section>
 
                 <!-- Configuration Section -->