初始化提交

2025-12-13 21:35:46 +08:00
parent 487457e0a9
commit 4573a21f88
54 changed files with 20690 additions and 0 deletions
--- a/mengyaprofile-frontend/src/components/ContactsSection.js
+++ b/mengyaprofile-frontend/src/components/ContactsSection.js
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import './ContactsSection.css';
+
+function ContactsSection({ contacts }) {
+  const [copiedType, setCopiedType] = useState(null);
+
+  const handleCopy = (value, type) => {
+    navigator.clipboard.writeText(value).then(() => {
+      setCopiedType(type);
+      setTimeout(() => setCopiedType(null), 2000);
+    });
+  };
+
+  const getContactIcon = (type) => {
+    const icons = {
+      qq: '💬',
+      email: '📧',
+      github: '🐙',
+      wechat: '💚',
+      twitter: '🐦',
+      linkedin: '💼'
+    };
+    return icons[type] || '📱';
+  };
+
+  // 判断 icon 是否为 URL
+  const isImageUrl = (icon) => {
+    return icon && (icon.startsWith('http://') || icon.startsWith('https://'));
+  };
+
+  // 渲染图标(支持 URL 和 Emoji)
+  const renderIcon = (contact) => {
+    const icon = contact.icon || getContactIcon(contact.type);
+    
+    if (isImageUrl(icon)) {
+      return (
+        <img 
+          src={icon} 
+          alt={contact.label}
+          className="contact-icon-img"
+          onError={(e) => {
+            e.target.style.display = 'none';
+            e.target.nextSibling.style.display = 'block';
+          }}
+        />
+      );
+    }
+    
+    return <span className="contact-icon-emoji">{icon}</span>;
+  };
+
+  return (
+    <section className="contacts-section">
+      <h2 className="section-title">
+        <span className="title-icon">📮</span>
+        联系方式
+      </h2>
+      
+      <div className="contacts-grid">
+        {contacts.map((contact, index) => (
+          <div key={index} className="contact-card">
+            <div className="contact-icon">
+              {renderIcon(contact)}
+            </div>
+            
+            <div className="contact-info">
+              <h3 className="contact-label">{contact.label}</h3>
+              <p className="contact-value">{contact.value}</p>
+            </div>
+            
+            <div className="contact-actions">
+              {contact.link && (
+                <a
+                  href={contact.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="contact-button contact-visit"
+                  title="访问"
+                >
+                  🔗
+                </a>
+              )}
+              
+              <button
+                onClick={() => handleCopy(contact.value, contact.type)}
+                className="contact-button contact-copy"
+                title="复制"
+              >
+                {copiedType === contact.type ? '✓' : '📋'}
+              </button>
+            </div>
+            
+            {copiedType === contact.type && (
+              <div className="copy-toast">已复制!</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default ContactsSection;