feat(frontend): translate UI to English and refresh layout styles

2026-05-14 13:33:37 +00:00
parent 4724678035
commit cfaa1cb657
5 changed files with 194 additions and 67 deletions
--- a/src/index.css
+++ b/src/index.css
@@ -64,6 +64,124 @@

 body {
  margin: 0;
+  background: linear-gradient(180deg, rgba(170, 59, 255, 0.08), transparent 220px) no-repeat var(--bg);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  min-height: 100vh;
+}
+
+.sidebar {
+  border-right: 1px solid var(--border);
+  padding: 20px 16px;
+  text-align: left;
+  background: color-mix(in srgb, var(--bg) 94%, var(--accent) 6%);
+}
+
+.sidebar-title {
+  margin: 0 0 14px;
+}
+
+.sidebar-nav {
+  display: grid;
+  gap: 10px;
+}
+
+.sidebar-session {
+  margin-top: 20px;
+  font-size: 13px;
+}
+
+.page-content {
+  padding: 18px;
+  text-align: left;
+}
+
+.panel {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: var(--shadow);
+  background: var(--bg);
+}
+
+.form-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.row-wrap {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.input {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  min-width: 120px;
+  background: transparent;
+  color: var(--text-h);
+}
+
+.input:focus {
+  outline: 2px solid var(--accent-border);
+  outline-offset: 1px;
+}
+
+.btn {
+  border: 1px solid var(--accent-border);
+  background: var(--accent);
+  color: #fff;
+  border-radius: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--text-h);
+}
+
+.btn-danger {
+  background: #dc2626;
+  border-color: #dc2626;
+}
+
+.muted {
+  color: var(--text);
+}
+
+.error-text {
+  color: #dc2626;
+  margin-top: 10px;
+}
+
+.list-reset {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.card {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+  display: grid;
+  gap: 8px;
+  background: color-mix(in srgb, var(--bg) 95%, var(--accent) 5%);
 }

 h1,
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -5,28 +5,28 @@ export default function AppLayout() {
  const { isAuthed, session, logout } = useAuth()

  return (
-    <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '100vh' }}>
-      <aside style={{ borderRight: '1px solid #ddd', padding: 16 }}>
-        <h3>Fabric</h3>
-        <nav style={{ display: 'grid', gap: 8 }}>
-          <Link to="/workspace">工作台</Link>
-          <Link to="/chat">聊天</Link>
-          <Link to="/login">登录</Link>
+    <div className="app-shell">
+      <aside className="sidebar">
+        <h3 className="sidebar-title">Fabric</h3>
+        <nav className="sidebar-nav">
+          <Link to="/workspace">Workspace</Link>
+          <Link to="/chat">Chat</Link>
+          <Link to="/login">Login</Link>
        </nav>
-        <div style={{ marginTop: 16, fontSize: 12 }}>
+        <div className="sidebar-session">
          {isAuthed ? (
            <>
-              <div>{session?.user.email}</div>
-              <button onClick={() => logout()} style={{ marginTop: 6 }}>
-                登出
+              <div className="muted">{session?.user.email}</div>
+              <button onClick={() => logout()} className="btn btn-secondary" style={{ marginTop: 8 }}>
+                Sign out
              </button>
            </>
          ) : (
-            <span>未登录</span>
+            <span className="muted">Not signed in</span>
          )}
        </div>
      </aside>
-      <main style={{ padding: 16 }}>
+      <main className="page-content">
        <Outlet />
      </main>
    </div>
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -127,7 +127,7 @@ export default function ChatPage() {
      setMessages(res.data.items ?? [])
      setPageInfo(res.data.page ?? null)
    } catch {
-      setError('消息拉取失败')
+      setError('Failed to load messages')
    } finally {
      setLoading(false)
    }
@@ -144,7 +144,7 @@ export default function ChatPage() {
      socket?.emit('typing.stop', { channelId })
      setContent('')
    } catch {
-      setError('发送失败')
+      setError('Failed to send message')
    }
  }

@@ -158,7 +158,7 @@ export default function ChatPage() {
      setEditingContent('')
      await pullMessages()
    } catch {
-      setError('编辑失败')
+      setError('Failed to edit message')
    }
  }

@@ -169,7 +169,7 @@ export default function ChatPage() {
      await guildApi().delete(`/channels/${channelId}/messages/${messageId}`)
      await pullMessages()
    } catch {
-      setError('删除失败')
+      setError('Failed to delete message')
    }
  }

@@ -201,41 +201,44 @@ export default function ChatPage() {
  }, [channelId, socket, socketState])

  return (
-    <section>
-      <h2>聊天</h2>
-      <p>Guild: {guildId || '-'}</p>
-      <p>Socket: {socketState}</p>
-      <p>在线人数: {onlineCount}</p>
-      {loading ? <p>加载中...</p> : null}
-      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
-      {typingUsers.length ? <p>正在输入: {typingUsers.join(', ')}</p> : null}
-      <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>
+    <section className="panel">
+      <h2>Chat</h2>
+      <p className="muted">Guild: {guildId || '-'}</p>
+      <p className="muted">Socket: {socketState}</p>
+      <p className="muted">Online users: {onlineCount}</p>
+      {loading ? <p className="muted">Loading...</p> : null}
+      {error ? <p className="error-text">{error}</p> : null}
+      {typingUsers.length ? <p className="muted">Typing: {typingUsers.join(', ')}</p> : null}
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
+        <input className="input" value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" />
+        <input className="input" value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" />
+        <input className="input" value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" />
+        <button className="btn btn-secondary" onClick={pullMessages}>Fetch</button>
      </div>
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="输入消息" />
-        <button onClick={sendMessage}>发送</button>
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="Type a message" />
+        <button className="btn" onClick={sendMessage}>Send</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 className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={editingMessageId} onChange={(e) => setEditingMessageId(e.target.value)} placeholder="messageId" />
+        <input className="input" value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="Updated content" />
+        <button className="btn btn-secondary" onClick={editMessage}>Edit</button>
      </div>
-      <ul>
+      <ul className="list-reset">
        {messages.map((m) => (
-          <li key={m.messageId}>
-            #{m.seq} {m.content} ({m.messageId}){' '}
-            <button type="button" onClick={() => deleteMessage(m.messageId)}>
-              删除
+          <li key={m.messageId} className="card" style={{ marginTop: 8 }}>
+            <div>
+              <strong>#{m.seq}</strong> {m.content}
+            </div>
+            <div className="muted">{m.messageId}</div>
+            <button className="btn btn-danger" type="button" onClick={() => deleteMessage(m.messageId)}>
+              Delete
            </button>
          </li>
        ))}
      </ul>
-      {!loading && !messages.length ? <p>暂无消息</p> : null}
+      {!loading && !messages.length ? <p className="muted">No messages yet</p> : null}
      {pageInfo ? (
        <p>
          next_expected_seq: {pageInfo.nextExpectedSeq ?? '-'} | highest_committed_seq: {pageInfo.highestCommittedSeq ?? '-'} |
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -19,35 +19,38 @@ export default function LoginPage() {
      await login(centerApiBase.trim(), centerApiKey.trim(), email, password)
      navigate('/workspace')
    } catch {
-      setError('登录失败，请检查账号密码')
+      setError('Login failed. Please check your email and password.')
    }
  }

  return (
-    <section>
-      <h2>登录</h2>
-      {isAuthed ? <p>当前用户：{session?.user.email}</p> : null}
-      <form onSubmit={onSubmit} style={{ display: 'grid', gap: 8, maxWidth: 420 }}>
+    <section className="panel">
+      <h2>Login</h2>
+      {isAuthed ? <p className="muted">Current user: {session?.user.email}</p> : null}
+      <form onSubmit={onSubmit} className="form-grid" style={{ maxWidth: 460 }}>
        <input
+          className="input"
          value={centerApiBase}
          onChange={(e) => setCenterApiBase(e.target.value)}
          placeholder="Center API Base (e.g. http://localhost:7001/api)"
        />
        <input
+          className="input"
          value={centerApiKey}
          onChange={(e) => setCenterApiKey(e.target.value)}
          placeholder="Center API Key"
        />
-        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
+        <input className="input" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
        <input
+          className="input"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
          type="password"
        />
-        <button type="submit">登录</button>
+        <button className="btn" type="submit">Sign in</button>
      </form>
-      <p>{error}</p>
+      {error ? <p className="error-text">{error}</p> : null}
    </section>
  )
 }
--- a/src/pages/WorkspacePage.tsx
+++ b/src/pages/WorkspacePage.tsx
@@ -22,7 +22,7 @@ export default function WorkspacePage() {
      const res = await axios.get(`${session.centerApiBase}/healthz`)
      setHealth(JSON.stringify(res.data))
    } catch {
-      setHealth('center healthz 访问失败')
+      setHealth('Failed to access center healthz')
    }
  }

@@ -45,26 +45,29 @@ export default function WorkspacePage() {
  }

  return (
-    <section>
-      <h2>工作台</h2>
-      <p>Center: {session?.centerApiBase || '-'}</p>
-      <div style={{ marginBottom: 8 }}>
-        <button type="button" onClick={checkCenterHealth}>
-          测试 Center healthz
+    <section className="panel">
+      <h2>Workspace</h2>
+      <p className="muted">Center: {session?.centerApiBase || '-'}</p>
+      <div style={{ marginBottom: 12 }}>
+        <button className="btn" type="button" onClick={checkCenterHealth}>
+          Test Center healthz
        </button>
      </div>
-      <p>{health}</p>
+      {health ? <p className="muted">{health}</p> : null}

-      <ul>
+      <ul className="list-reset">
        {(session?.guilds ?? []).map((g) => (
-          <li key={g.nodeId} style={{ marginTop: 8 }}>
-            <strong>{g.name}</strong> ({g.nodeId}) - {g.endpoint}{' '}
-            <button type="button" onClick={() => loadChannels(g.nodeId, g.endpoint)}>
-              加载频道
+          <li key={g.nodeId} className="card" style={{ marginTop: 12 }}>
+            <div>
+              <strong>{g.name}</strong> <span className="muted">({g.nodeId})</span>
+            </div>
+            <div className="muted">{g.endpoint}</div>
+            <button className="btn btn-secondary" type="button" onClick={() => loadChannels(g.nodeId, g.endpoint)}>
+              Load channels
            </button>
-            <ul>
+            <ul className="list-reset" style={{ marginTop: 10 }}>
              {(channelsByGuild[g.nodeId] ?? []).map((c) => (
-                <li key={c.id}>
+                <li key={c.id} style={{ marginTop: 6 }}>
                  <Link
                    to={`/chat?guildId=${encodeURIComponent(g.nodeId)}&channelId=${encodeURIComponent(c.id)}`}
                  >