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,44 @@
+import { useQrState } from '../store/qrContext';
+import { useQrEncode } from '../hooks/useQrEncode';
+
+export default function WifiMode() {
+  const { state, dispatch } = useQrState();
+  const { encode } = useQrEncode();
+
+  const buildWifiText = (ssid: string, password: string, encryption: string, hidden: boolean) => {
+    if (!ssid) return '';
+    return `WIFI:T:${encryption};S:${ssid};P:${password};${hidden ? 'H:true;' : ''};`;
+  };
+
+  const update = (field: string, value: string | boolean) => {
+    const data = { ...state.formData, [field]: String(value) };
+    dispatch({ type: 'SET_FORM_DATA', payload: data });
+    const wifiText = buildWifiText(
+      data.ssid || '', data.password || '', data.encryption || 'WPA', data.hidden === 'true'
+    );
+    encode(wifiText);
+  };
+
+  return (
+    <div className="flex gap-2 items-center h-full px-4">
+      <input placeholder="SSID" value={state.formData.ssid || ''}
+        onChange={e => update('ssid', 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" />
+      <input placeholder="密码" type="password" value={state.formData.password || ''}
+        onChange={e => update('password', 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" />
+      <select value={state.formData.encryption || 'WPA'}
+        onChange={e => update('encryption', e.target.value)}
+        className="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">
+        <option value="WPA">WPA/WPA2</option>
+        <option value="WEP">WEP</option>
+        <option value="nopass">无密码</option>
+      </select>
+      <label className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+        <input type="checkbox" checked={state.formData.hidden === 'true'}
+          onChange={e => update('hidden', e.target.checked)} />
+        隐藏
+      </label>
+    </div>
+  );
+}