feat(frontend): load guild-channel lists and sync chat channel in url

src/pages/ChatPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import { getApiClient } from '../lib/api-client'
 import { disconnectSocket, getSocketClient } from '../lib/socket-client'
 
@@ -10,7 +11,9 @@ type MessageItem = {
 }
 
 export default function ChatPage() {
-  const [channelId, setChannelId] = useState('')
+  const [searchParams, setSearchParams] = useSearchParams()
+  const guildId = searchParams.get('guildId') ?? ''
+  const [channelId, setChannelId] = useState(() => searchParams.get('channelId') ?? '')
   const [content, setContent] = useState('')
   const [messages, setMessages] = useState<MessageItem[]>([])
   const [socketState, setSocketState] = useState<'offline' | 'online'>('offline')
@@ -54,6 +57,15 @@ export default function ChatPage() {
     setContent('')
   }
 
+  function onChangeChannel(value: string) {
+    setChannelId(value)
+    const next = new URLSearchParams(searchParams)
+    if (guildId) next.set('guildId', guildId)
+    if (value) next.set('channelId', value)
+    else next.delete('channelId')
+    setSearchParams(next)
+  }
+
   useEffect(() => {
     if (!channelId || !socket.connected) return
     socket.emit('join_channel', { channelId })
@@ -65,9 +77,10 @@ export default function ChatPage() {
   return (
     <section>
       <h2>聊天</h2>
+      <p>Guild: {guildId || '-'}</p>
       <p>Socket: {socketState}</p>
       <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={channelId} onChange={(e) => setChannelId(e.target.value)} placeholder="Channel ID" />
+        <input value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
         <button onClick={pullMessages}>拉取</button>
       </div>
       <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>