feat(frontend): add api client and socket client wrappers with runtime config

src/pages/ChatPage.tsx

@@ -1,8 +1,86 @@
+import { useEffect, useMemo, useState } from 'react'
+import { getApiClient } from '../lib/api-client'
+import { disconnectSocket, getSocketClient } from '../lib/socket-client'
+
+type MessageItem = {
+  messageId: string
+  seq: number
+  content: string
+  isDeleted?: boolean
+}
+
 export default function ChatPage() {
+  const [channelId, setChannelId] = useState('')
+  const [content, setContent] = useState('')
+  const [messages, setMessages] = useState<MessageItem[]>([])
+  const [socketState, setSocketState] = useState<'offline' | 'online'>('offline')
+
+  const socket = useMemo(() => getSocketClient('frontend-user'), [])
+
+  useEffect(() => {
+    socket.on('connect', () => setSocketState('online'))
+    socket.on('disconnect', () => setSocketState('offline'))
+    socket.on('message.created', (m: MessageItem) => setMessages((prev) => [...prev, m]))
+    socket.on('message.updated', (m: MessageItem) =>
+      setMessages((prev) => prev.map((x) => (x.messageId === m.messageId ? m : x))),
+    )
+    socket.on('message.deleted', (m: MessageItem) =>
+      setMessages((prev) =>
+        prev.map((x) => (x.messageId === m.messageId ? { ...x, isDeleted: true, content: '[deleted]' } : x)),
+      ),
+    )
+    socket.connect()
+
+    return () => {
+      socket.removeAllListeners()
+      disconnectSocket()
+    }
+  }, [socket])
+
+  async function pullMessages() {
+    if (!channelId) return
+    const res = await getApiClient().get(`/channels/${channelId}/messages`, {
+      params: { seq_from: 1, seq_to: 999999, limit: 100 },
+    })
+    setMessages(res.data.items ?? [])
+  }
+
+  async function sendMessage() {
+    if (!channelId || !content.trim()) return
+    await getApiClient().post(`/channels/${channelId}/messages`, {
+      content,
+      authorUserId: 'frontend-user',
+    })
+    setContent('')
+  }
+
+  useEffect(() => {
+    if (!channelId || !socket.connected) return
+    socket.emit('join_channel', { channelId })
+    return () => {
+      socket.emit('leave_channel', { channelId })
+    }
+  }, [channelId, socket, socketState])
+
   return (
     <section>
       <h2>聊天</h2>
-      <p>下一步接入消息拉取/发送/编辑/删除与实时订阅。</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" />
+        <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>
+      <ul>
+        {messages.map((m) => (
+          <li key={m.messageId}>
+            #{m.seq} {m.content}
+          </li>
+        ))}
+      </ul>
     </section>
   )
 }

src/pages/WorkspacePage.tsx

@@ -1,8 +1,61 @@
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { getApiClient, resetApiClient } from '../lib/api-client'
+import {
+  getRuntimeConfig,
+  setRuntimeConfig,
+} from '../lib/runtime-config'
+import type { RuntimeConfig } from '../lib/runtime-config'
+import { reconnectSocket } from '../lib/socket-client'
+
 export default function WorkspacePage() {
+  const [form, setForm] = useState<RuntimeConfig>(getRuntimeConfig())
+  const [health, setHealth] = useState('')
+
+  async function onSave(e: FormEvent) {
+    e.preventDefault()
+    setRuntimeConfig(form)
+    resetApiClient()
+    reconnectSocket()
+    setHealth('配置已保存')
+  }
+
+  async function checkHealth() {
+    try {
+      const res = await getApiClient().get('/healthz')
+      setHealth(JSON.stringify(res.data))
+    } catch {
+      setHealth('healthz 访问失败')
+    }
+  }
+
   return (
     <section>
       <h2>工作台</h2>
-      <p>这里会展示 Guild/Channel 概览与会话入口。</p>
+      <form onSubmit={onSave} style={{ display: 'grid', gap: 8, maxWidth: 760 }}>
+        <input
+          value={form.guildApiBase}
+          onChange={(e) => setForm((v) => ({ ...v, guildApiBase: e.target.value }))}
+          placeholder="Guild API Base"
+        />
+        <input
+          value={form.guildSocketBase}
+          onChange={(e) => setForm((v) => ({ ...v, guildSocketBase: e.target.value }))}
+          placeholder="Guild Socket Base"
+        />
+        <input
+          value={form.apiKey}
+          onChange={(e) => setForm((v) => ({ ...v, apiKey: e.target.value }))}
+          placeholder="API Key"
+        />
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button type="submit">保存配置</button>
+          <button type="button" onClick={checkHealth}>
+            测试 healthz
+          </button>
+        </div>
+      </form>
+      <p>{health}</p>
     </section>
   )
 }