feat(frontend): add message edit delete and ranged pull controls

src/pages/ChatPage.tsx

@@ -17,6 +17,11 @@ export default function ChatPage() {
   const [content, setContent] = useState('')
   const [messages, setMessages] = useState<MessageItem[]>([])
   const [socketState, setSocketState] = useState<'offline' | 'online'>('offline')
+  const [seqFrom, setSeqFrom] = useState('1')
+  const [seqTo, setSeqTo] = useState('999999')
+  const [limit, setLimit] = useState('50')
+  const [editingMessageId, setEditingMessageId] = useState('')
+  const [editingContent, setEditingContent] = useState('')
 
   const socket = useMemo(() => getSocketClient('frontend-user'), [])
 
@@ -43,7 +48,11 @@ export default function ChatPage() {
   async function pullMessages() {
     if (!channelId) return
     const res = await getApiClient().get(`/channels/${channelId}/messages`, {
-      params: { seq_from: 1, seq_to: 999999, limit: 100 },
+      params: {
+        seq_from: Number(seqFrom || '1'),
+        seq_to: Number(seqTo || '999999'),
+        limit: Number(limit || '50'),
+      },
     })
     setMessages(res.data.items ?? [])
   }
@@ -57,6 +66,21 @@ export default function ChatPage() {
     setContent('')
   }
 
+  async function editMessage() {
+    if (!channelId || !editingMessageId || !editingContent.trim()) return
+    await getApiClient().patch(`/channels/${channelId}/messages/${editingMessageId}`, {
+      content: editingContent,
+    })
+    setEditingContent('')
+    await pullMessages()
+  }
+
+  async function deleteMessage(messageId: string) {
+    if (!channelId || !messageId) return
+    await getApiClient().delete(`/channels/${channelId}/messages/${messageId}`)
+    await pullMessages()
+  }
+
   function onChangeChannel(value: string) {
     setChannelId(value)
     const next = new URLSearchParams(searchParams)
@@ -81,16 +105,31 @@ export default function ChatPage() {
       <p>Socket: {socketState}</p>
       <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
         <input value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
+        <input value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" />
+        <input value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" />
+        <input value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" />
         <button onClick={pullMessages}>拉取</button>
       </div>
       <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
         <input value={content} onChange={(e) => setContent(e.target.value)} placeholder="输入消息" />
         <button onClick={sendMessage}>发送</button>
       </div>
+      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
+        <input
+          value={editingMessageId}
+          onChange={(e) => setEditingMessageId(e.target.value)}
+          placeholder="messageId"
+        />
+        <input value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="新内容" />
+        <button onClick={editMessage}>编辑</button>
+      </div>
       <ul>
         {messages.map((m) => (
           <li key={m.messageId}>
-            #{m.seq} {m.content}
+            #{m.seq} {m.content} ({m.messageId}){' '}
+            <button type="button" onClick={() => deleteMessage(m.messageId)}>
+              删除
+            </button>
           </li>
         ))}
       </ul>