feat(web): prioritize SMS operations workspace

apps/web/src/instances/messages-module.tsx

@@ -41,6 +41,7 @@ export function MessagesModule({ instance, dataSource, refreshSignal }: Messages
   const [retry, setRetry] = useState(0);
   const [phoneNumber, setPhoneNumber] = useState('');
   const [content, setContent] = useState('');
+  const [pendingSend, setPendingSend] = useState<SendMessageInput>();
   const [sending, setSending] = useState(false);
   const [sendState, setSendState] = useState<'success' | 'error'>();
 
@@ -61,13 +62,14 @@ export function MessagesModule({ instance, dataSource, refreshSignal }: Messages
     return () => controller.abort();
   }, [dataSource, instance.id, refreshSignal, retry]);
 
-  async function send(): Promise<void> {
+  async function send(input: SendMessageInput): Promise<void> {
     if (!dataSource || sending) return;
     setSending(true);
     setSendState(undefined);
     try {
-      await dataSource.send(instance.id, { phoneNumber, content });
+      await dataSource.send(instance.id, input);
       setContent('');
+      setPendingSend(undefined);
       setSendState('success');
       setRetry((value) => value + 1);
     } catch {
@@ -92,7 +94,7 @@ export function MessagesModule({ instance, dataSource, refreshSignal }: Messages
         <form
           onSubmit={(event) => {
             event.preventDefault();
-            void send();
+            setPendingSend({ phoneNumber: phoneNumber.trim(), content: content.trim() });
           }}
         >
           <label>
@@ -122,6 +124,22 @@ export function MessagesModule({ instance, dataSource, refreshSignal }: Messages
         </form>
         {sendState === 'success' ? <p role="status">短信已提交发送。</p> : null}
         {sendState === 'error' ? <p role="alert">短信发送失败，请核对设备状态后重试。</p> : null}
+        {pendingSend ? (
+          <section className="send-confirmation" role="region" aria-label="确认发送短信">
+            <h3>发送前确认</h3>
+            <p>号码：{pendingSend.phoneNumber}</p>
+            <p>内容：{pendingSend.content}</p>
+            <p>确认后会立即提交到当前设备。</p>
+            <div className="fleet-card-actions">
+              <button type="button" disabled={sending} onClick={() => void send(pendingSend)}>
+                {sending ? '正在发送…' : '确认并发送'}
+              </button>
+              <button type="button" disabled={sending} onClick={() => setPendingSend(undefined)}>
+                返回修改
+              </button>
+            </div>
+          </section>
+        ) : null}
       </section>
 
       <section className="messages-card" aria-labelledby="sms-list-title">