feat: WiFi/vCard/Email/电话/SMS 全模式表单

2026-06-17 00:24:38 +08:00
parent 1a4af38bac
commit 3c56fc45d3
6 changed files with 158 additions and 5 deletions
@@ -0,0 +1,33 @@
+import { useQrState } from '../store/qrContext';
+import { useQrEncode } from '../hooks/useQrEncode';
+
+const FIELDS = [
+  { key: 'name', placeholder: '姓名' },
+  { key: 'phone', placeholder: '电话' },
+  { key: 'email', placeholder: '邮箱' },
+  { key: 'company', placeholder: '公司' },
+  { key: 'address', placeholder: '地址' },
+];
+
+export default function VCardMode() {
+  const { state, dispatch } = useQrState();
+  const { encode } = useQrEncode();
+
+  const update = (field: string, value: string) => {
+    const data = { ...state.formData, [field]: value };
+    dispatch({ type: 'SET_FORM_DATA', payload: data });
+    const vcard = `BEGIN:VCARD\nVERSION:3.0\nFN:${data.name || ''}\nTEL:${data.phone || ''}\nEMAIL:${data.email || ''}\nORG:${data.company || ''}\nADR:${data.address || ''}\nEND:VCARD`;
+    encode(vcard);
+  };
+
+  return (
+    <div className="flex gap-2 items-center h-full px-4">
+      {FIELDS.map(f => (
+        <input key={f.key} placeholder={f.placeholder}
+          value={state.formData[f.key] || ''}
+          onChange={e => update(f.key, e.target.value)}
+          className="flex-1 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm bg-transparent outline-none focus:ring-2 focus:ring-blue-500/30" />
+      ))}
+    </div>
+  );
+}