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

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>
   )
 }