添加手机串号，用来解决不同手机连接同一台设备时，消息无法区分的问题

Author: richardson

src/components/InteractionInterface.tsx

@@ -26,6 +26,14 @@ interface ChatResponse {
   servoY: number;
 }
 
+export interface MessagePayload {
+  text: string;
+  audioBuffer: ArrayBuffer;
+  expression: string;
+  deviceName: string;
+  phoneSerialNumber: string;
+}
+
 export const InteractionInterface: React.FC = () => {
   const [prompt, setPrompt] = useState('');
   const [response, setResponse] = useState<ChatResponse | null>(null);
@@ -34,6 +42,7 @@ export const InteractionInterface: React.FC = () => {
   const [servoX, setServoX] = useState(90);
   const [servoY, setServoY] = useState(90);
   const [deviceName, setDeviceName] = useState('');
+  const [phoneSerialNumber, setPhoneSerialNumber] = useState('');
   const [serverEndpoint, setServerEndpoint] = useState('');
   const [servoConfig, setServoConfig] = useState<ServoConfig>({
     deviceName: 'Default Device'
@@ -74,12 +83,15 @@ export const InteractionInterface: React.FC = () => {
         // 加载设置
         const deviceNameSetting = await db.settings.get('deviceName');
         const endpointSetting = await db.settings.get('wsEndpoint');
+        const phoneSerialSetting = await db.settings.get('phoneSerialNumber');
 
         const deviceName = deviceNameSetting?.value || 'Not set';
         const endpoint = endpointSetting?.value || '';
+        const phoneSerial = phoneSerialSetting?.value || '';
 
         setDeviceName(deviceName);
         setServerEndpoint(endpoint);
+        setPhoneSerialNumber(phoneSerial);
 
         // 检查服务器状态
         const serverCheck = await checkServerStatus();
@@ -165,7 +177,8 @@ export const InteractionInterface: React.FC = () => {
         text: result.response,
         audio: audioBuffer,
         expression: result.kaomoji ||'neutral',
-        deviceName
+        deviceName,
+        phoneSerialNumber
       });
       logger.log('Message sent to server successfully', 'INFO', ModelName);
 

src/components/SettingsPanel.tsx

@@ -24,6 +24,7 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ setIsConfigured })
     tts_baseUrl: '',
     tts_apiKey: '',
     tts_modelName: '',
+    phoneSerialNumber: '',
   });
 
   const { ports, loading, error } = useSerialPorts();
@@ -148,13 +149,22 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ setIsConfigured })
                     onChange={(e) => handleChange('deviceName', e.target.value)}
                   />
                 </div>
+                
                 <div>
-                <label className="block mb-1">WebSocket 服务地址</label>
-                <Input
-                  value={settings.wsEndpoint}
-                  onChange={(e) => handleChange('wsEndpoint', e.target.value)}
-                />
-              </div>
+                  <label className="block mb-1">WebSocket 服务地址</label>
+                  <Input
+                    value={settings.wsEndpoint}
+                    onChange={(e) => handleChange('wsEndpoint', e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="block mb-1">手机串号</label>
+                  <Input
+                    value={settings.phoneSerialNumber}
+                    onChange={(e) => handleChange('phoneSerialNumber', e.target.value)}
+                    placeholder="请输入手机唯一标识符，在手机屏幕连续单机3下获取"
+                  />
+                </div>
               </div>
             </CardContent>
           </Card>

src/lib/webSocketService.ts

@@ -10,6 +10,7 @@ export interface MessagePayload {
   audioBuffer: ArrayBuffer;
   expression: string;
   deviceName: string;
+  phoneSerialNumber: string;
 }
 
 // Get server URL from settings
@@ -45,6 +46,8 @@ export async function sendMessage(message: any): Promise<void> {
 
     // 添加表情数据（必需字段）
     formData.append('expression', message.expression || 'neutral');
+    // 添加设备ID（必需字段）
+    formData.append('deviceId', message.phoneSerialNumber);
 
     // 将 FormData 转换为字节数组
     const formDataArray = await formDataToBytes(formData);